/* lato-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/lato-v23-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('/fonts/lato-v23-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

  
/* lato-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('/fonts/lato-v23-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

  
* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 14px; line-height: 1.4; height: 100%; background: #111; scroll-behavior: smooth; display: flex;}
body {font-family: 'Lato', sans-serif; font-size: 1rem; flex: 1; display: flex;}
img {display: block; max-width: 100%; width: 13.57rem;}
a {color: white;}

.sidebar {
    background: #242527; 
    border-right: 0.4rem solid #2c2e2f;
    color: #666;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.2rem;
    position: relative;
}
.sidebar .h1 {padding-top: 0.75rem;}
.sidebar ul {text-align: right; margin: 2.2rem 0; line-height: 1.75; letter-spacing: 0.1em;}
.sidebar ul li {list-style: none;}
.sidebar ul li a {color: #999; text-decoration: none; padding-right: 1.5rem;}
.sidebar ul li.active a {color: #fff;}
.sidebar .footer {
    font-size: 0.6rem;
    text-align: right;
    line-height: 2;
}
.sidebar .footer a {color: #666; text-decoration: none;}

.backhome {font-size: 0.6rem; text-transform: uppercase; text-decoration: none; color: #666!important; padding: 2rem 0; display: none;}

.main {flex: 1;}
.main > div {min-height: 100%; max-width: 30rem; background: #242527; padding: 2.2rem 2.6rem; color: #c0c0c0;}
.main > div > div {max-width: 20rem; margin: 0 auto; font-size: 0.95rem; line-height: 1.7;}
.main > div > div h1 {font-size: 1.5rem; font-weight: 400; text-transform: uppercase; margin: 0.9rem 0 1.25rem; letter-spacing: 0.05em; color: white; opacity: 0.9;}
.main > div > div p {margin-bottom: 1.7em;}
.main > div > div a {color: #c0c0c0;}

.main ul li {list-style: none; display: none; cursor: pointer;}
.home .main ul li {cursor: default;}
.main ul li.active {display: block;}
.main ul, .main ul li, .main ul li img {height: 100%; width: 100%;}
.main ul li img {object-fit: contain;}

@media (max-width: 1200px) {
  .sidebar .h1 {padding-top: 0;}
  body:not(.home) .main {margin-left: calc(-13.57rem - 4.8rem);}
  body:not(.home) .main > div {padding: 11.2rem 2.6rem 3rem 2.6rem;}
  body:not(.home) .main > div > div {max-width: 100%;}
  body:not(.home) .sidebar {background: transparent; border: 0; height: 10rem;}
  body:not(.home) .sidebar > div.footer,
  body:not(.home) .sidebar > div > ul {display: none;}
  body.home .main ul li img {display: none}
  body.home .sidebar {width: 100%;max-width: 30rem; border: 0;}
  body.home .sidebar ul {text-align: left;}
  body.home .sidebar .footer {text-align: left;}
  .backhome {display: block;}
}