body, div, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

header, nav, main, section, footer {
    display: block;
}

img {
    border: 0;
}

*, *:after, *:before {
    box-sizing: border-box;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400;
    src: local('Assistant Regular'),
         local('Assistant-Regular'),
         url('../fonts/Assistant-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Assistant';
    font-style: italic;
    font-weight: 400;
    src: local('Assistant Italic'),
         local('Assistant-Italic'),
         url('../fonts/Assistant-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 700;
    src: local('Assistant Bold'),
         local('Assistant-Bold'),
         url('../fonts/Assistant-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
html {
    font-size: 62.5%;
    overflow-y: scroll;
}

body {
    font-family: 'Assistant', sans-serif;
    font-size: 1.6rem;
    color: #047;
}

a {
    color: #047;
}

b, strong {
    font-weight: 700;
}

i, em {
    font-style: italic;
}

.wrapper {
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    background-color: #FFF;
    background-image: url("../img/general/drop.jpg");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: right;
    background-position-y: calc(0.3415 * 100vw + 80px);
}

@media (min-width: 60em) {
    .wrapper {
        background-position-y: 41rem;
    }
}

header {
    width: 100%;
    height: 13.8rem;
    overflow:hidden;
}

main {
    width: calc(100% - 9rem);
    padding: 2.4rem 0 1.5% 3.2rem;
    float: left;
}

main img {
    width: 31%;
    margin: 0 2.2% 2.2% 0;
    vertical-align: middle;
}

nav {
    width: 9rem;
}

nav ul {
    list-style-type: none;
    background-color: rgba(255, 255, 255, 1);
}

nav input {
    display: none;
}

nav label {
    display: block;
    float: right;
    position: relative;
    overflow: hidden;
    margin: 0 0 0 2.5%;
    padding: 0;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 0;
    text-indent: -9999px;
    background-color: #5E8FC7;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 100;
}
  
nav label:focus {
    outline: none;
}
  
nav label span {
    display: block;
    position: absolute;
    top: 1.6rem;
    left: 0.6rem;
    right: 0.6rem;
    height: 0.4rem;
    background: #FFF;
    transition: background 0s 0.3s;
}
  
nav label span::before,
nav label span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 0.4rem;
    background-color: #FFF;
    content: "";
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}
  
nav label span::before {
    top: -0.8rem;
    transition-property: top, transform;
}
  
nav label span::after {
    bottom: -0.8rem;
    transition-property: bottom, transform;
}
  
nav label.is-active {
    background-color: #8BE;
}
  
nav label.is-active span {
    background: none;
}
  
nav label.is-active span::before {
    top: 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
  
nav label.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
  
nav label.is-active span::before,
nav label.is-active span::after {
    transition-delay: 0s, 0.3s;
}

nav.main {
    margin-top: -2.5rem;
    padding-right: 2.5%;
    float: left;
    position: relative;
}

nav.main ul[role="menubar"] {
    width: 14rem;
    padding-left: 0.8rem;
    position: absolute;
    right: 0;
    display: none;
}

nav.main input:checked + ul[role="menubar"] { display: block; }

nav.main li {
    padding-top: 0.6rem;
}

nav.main li a, nav.main li span {
    text-decoration: none;
    font-weight: 700;
}

nav.main li.active span {
    font-style: italic;
}

nav.main ul li:first-child {
    padding-bottom: 2.4rem;
}

nav.main li:nth-child(n+5) {
    text-indent: 1.6rem;
}

nav.main li.open-menu {
    position: relative;
}

nav.main li.open-menu span {
    cursor: pointer;
}

nav.main ul.projects {
    width: 30.3rem;
    margin-top: 0.6rem;
    display: none;
    position: absolute;
    right: 0;
}

nav.main li.open-menu:hover {
    /* height: 42.1rem; */
    height: 39.2rem;
}

nav.main li.open-menu:hover ul.projects {
    position: absolute;
    display: block;
}

nav.main ul.projects li {
    padding: 0.6rem 0 0.6rem 1.6rem;
    line-height: 1;
    text-indent: 0;
    border-bottom: 0.1rem solid #8BE;
}

nav.main ul.projects li:first-child {
    border-top: 0.1rem solid #8BE;
}

ul.projects li a {
    font-size: 1.4rem;
}

@media only screen and (min-width: 34em) {
    main {
        width: 75%;
    }

    nav {
        width: 25%;
    }

    nav label {
        display: none;
    }


    nav.main ul[role="menubar"] {
        width: 100%;
        display: block;
        position: static;
    }
}

h2 {
    max-width: 60rem;
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    font-weight: 400;
}

h2::first-line {
    font-size: 2rem;
    font-weight: 700;
}

section {
    max-width: 60rem;
    padding: 0 1rem 1rem 0;
    background-color: #FFF;
    -webkit-border-bottom-right-radius: 4rem;
    -moz-border-radius-bottomright: 4rem;
    border-bottom-right-radius: 4rem;
}

section.projects {
    max-width: 100%;
}

section.contact {
    background-color: transparent;
}

section p {
    padding: 1rem 0;
}

section ul {
    list-style-type: none;
}

section ul > li {
    padding-left: 0.9rem;
  }

section ul > li:before {
    content: "- ";
    margin-left: -0.9rem;
  }

section figure {
    margin: 0 0 2.4rem 0;
    padding: 0;
}

section figure img {
    width: 100%;
    margin-bottom: 0.8rem;
}

section figure figcaption {
    font-size: 1.4rem;
}

nav.sub {
    position: absolute;
    right: 0;
    top: 0;
}

nav.sub ul li {
    width: 50%;
    min-width: 8.3rem;
    float: left;
}

nav.sub li a {
    text-decoration: none;
}

ul.references li {
    padding-bottom: 0.8rem;
}

section.privacy h3 {
    font-size: 1.6rem;
}

footer {
    padding: 0 25% 1.5% 3.2rem;
    position: relative;
    clear: left;
    font-size: 1.4rem;
}