/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* general */

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

body {
    margin-top: 160px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background-color: white;
    color: black;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.col-1-1, .col-1-2 {
    width: 100%;
    height: 100%;
    margin: 0 auto 50px auto;
}

.col-1-2 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.curtain {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150vh;
    z-index: 50;
    background-color: white;
    transition: 1s;
}

.open {
    background-color: rgba(0, 0, 0, 0);
    transition: color 0.1s, background-color 2s;
}

.wrapper {
    display: none;
}

.show {
    display: block;
}

.hide {
    display: none !important;
}

.nav-btn.chosen {
    font-weight: bolder;
    transition: 2s;
}

a {
    text-decoration: none;
    color: black;
}

/* typography */

h1 {
    font-size: 40px;
    font-weight: bolder;
    text-align: center;
}

h2 {
    font-size: 20px;
    font-weight: bolder;
}

h3 {
    font-size: 18px;
    font-weight: 400;
}

p {
    font-size: 18px;
    line-height: 2;
}

/* header */

.primary-header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 30px;
    z-index: 100;
    transition: 0.5s;
}

.header-white {
    color: white;
    transition: 0.3s;
}

.header-scroll {
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.08);
    background-color: white;
    transition: 0.2s;
    color: black
}

.name {
    cursor: pointer;
    z-index: 100;
    transition: 0.3s;
}

.hamburger {
    display: none;
    width: 25px;
    height: 25px;
    position: relative;
    cursor: pointer;
    z-index: 100;
}

.hamburger span {
    width: 100%;
    height: 5px;
    background-color: black;
    border-radius: 5px;
    position: absolute;
    transition: 0.5s;
}

.hamburger span:first-child {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 10px;
}

.hamburger span:last-child {
    bottom: 0;
}

.hamburger.active span {
    transition: 0.5s;
}

.hamburger.active span:first-child {
    transform: rotate(0.125turn);
    top: 10px;
}

.hamburger.active span:nth-child(2) {
    display: none;
}

.hamburger.active span:last-child {
    transform: rotate(-0.125turn);
    bottom: 10px;
}

.primary-nav ul {
    display: flex;
    flex-flow: row nowrap;
    transition: color 0.1s;
}

.primary-nav li {
    cursor: pointer;
    font-size: 16px;
    font-weight: lighter;
    padding-left: 15px;
    transition: 2s;
    transition: color 0.1s;
}

.primary-nav li:hover {
    font-weight: bold;
    transition: 1s;
}

/* footer */

.primary-footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: white;
    padding: 0 30px;
    width: 100%;
    height: 60px;
    align-items: center;
    margin-top: 50px;
    z-index: 100;
}

.social-icons-footer {
    display: flex;
    flex-flow: row nowrap;
}

.social-icons-footer .is-img {
    width: 40px;
    height: 40px;
    background-size: 40px;
    margin-right: 15px;
}

.footer-nav ul {
    display: flex;
    flex-flow: row nowrap;
}

.footer-nav li {
    cursor: pointer;
    font-size: 16px;
    font-weight: lighter;
    padding-left: 15px;
    transition: 2s;
}

.footer-nav li:hover {
    font-weight: bold;
    transition: 1s;
}

@media (max-width: 960px) {
    .container {
        width: 100%;
        padding: 0;
    }
    .col-1-1 {
        margin: 0;
    }
    .col-1-2 {
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
    }
    .col-1-1 .color-overlay, .col-1-2 .color-overlay {
        width: 100%;
    }
}

@media (max-width: 500px) {
    body {
        margin-top: 220px;
    }
    h1 {
        font-size: 22px;
    }
    .hamburger {
        display: block;
    }
    .nav-mobile-cover {
        width: 100%;
        height: 60px;
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 95;
    }
    .header-white {
        color: black;
        transition: 0;
    }
    .primary-nav {
        position: absolute;
        top: -300px;
        left: 0;
        background-color: white;
        width: 100%;
        transition: 1s;
        z-index: 90;
    }
    .backdrop {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        z-index: 85;
        transition: 1s;
    }
    .backdrop.active {
        background-color: rgba(0, 0, 0, 0.7);
        transition: 1s;
    }
    .primary-nav.open {
        top: 60px;
        transition: 1s;
    }
    .primary-nav ul {
        display: block;
        padding: 20px 0;
    }
    .primary-nav li {
        display: block;
        cursor: pointer;
        font-size: 22px;
        padding: 30px;
        text-align: center;
        font-weight: bold;
        transition: 2s;
    }
    .primary-nav .nav-btn.chosen {
        text-decoration: underline;
    }
    .primary-footer {
        flex-flow: column-reverse;
        height: 135px;
    }
    .social-icons-footer {
        padding: 20px;
    }
    .footer-nav {
        padding: 20px;
    }
    .footer-nav li {
        padding: 0 10px;
    }
}