@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratOffice-Regular.woff2') format('woff2'),
        url('fonts/AkkuratOffice-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratOffice-BoldItalic.woff2') format('woff2'),
        url('fonts/AkkuratOffice-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratLightOffice-Italic.woff2') format('woff2'),
        url('fonts/AkkuratLightOffice-Italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratOffice-Bold.woff2') format('woff2'),
        url('fonts/AkkuratOffice-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratOffice-Italic.woff2') format('woff2'),
        url('fonts/AkkuratOffice-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Akkurat Office';
    src: url('fonts/AkkuratLightOffice-Regular.woff2') format('woff2'),
        url('fonts/AkkuratLightOffice-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

html {
    font-family: "Akkurat Office", Arial, sans-serif;
    height: 100%;
    width: 100%;
    font-size:10px;
    font-weight: normal;
}

body {
    width: 100%;
    height: 100%;
    margin:0;
    font-size:1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.6em;
}

/*
Dektop:
Page: 1388
Content: 982
Page max: 1473
Column width: 36
Column space: 50
Column count: 12

Mobile:
Page: 414
Content: 342
Page max: 1473
Column width: 63
Column space: 30
Column count: 4;


*/

/* common */

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;    
}

hr {
    border-bottom-width: 0;
    border-top-width: 1px;
    margin: 0;
}

p {
    margin-top: 0;
}

::selection {
  background: #4ee4ff;
  color: white;
}

a {
    color:#000;
    transition: .2s linear color;
}

a:hover {
    color:#4EE4FF;
    transition: .2s linear color;
}

a.arrow-link {
    font-size:12px;
    margin-right: 4.5rem;
    position: relative; 
    text-decoration: none;
    color: #000;
    letter-spacing: initial;
}

a.arrow-link:hover {
    color:#000;
}
   
a.arrow-link:after {
    /*content: url(/resources/arrow.svg);*/
    /* black arrow: content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2036.67%2031.92%22%20style%3D%22enable-background%3Anew%200%200%2036.67%2031.92%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20class%3D%22st0%22%3E%0A%09%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M20.72%2C31.92h-3.76l14.6-14.56H0v-2.8h31.55L16.96%2C0h3.76l15.96%2C15.96L20.72%2C31.92z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A);*/
    content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2036.67%2031.92%22%20style%3D%22enable-background%3Anew%200%200%2036.67%2031.92%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20class%3D%22st0%22%3E%0A%09%3Cpath%20fill%3D%22%234EE4FF%22%20d%3D%22M20.72%2C31.92h-3.76l14.6-14.56H0v-2.8h31.55L16.96%2C0h3.76l15.96%2C15.96L20.72%2C31.92z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A);
    transition: .2s linear opacity;
    opacity:1;  
}

a.arrow-link.black:after {
    /*content: url(/resources/arrow.svg);*/
    content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2036.67%2031.92%22%20style%3D%22enable-background%3Anew%200%200%2036.67%2031.92%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20class%3D%22st0%22%3E%0A%09%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M20.72%2C31.92h-3.76l14.6-14.56H0v-2.8h31.55L16.96%2C0h3.76l15.96%2C15.96L20.72%2C31.92z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A);    
    transition: .2s linear opacity;
    opacity:1;    
}

a.arrow-link:after, a.arrow-link span:after {    
    position: absolute;
    top: -7px;
    right: -4.5rem;    
    display: inline-block;
    width: 2.7rem;
    vertical-align: middle;
    margin-left: 10px;
    transform: rotate(90deg) scale(1.1);

}

a.arrow-link.arrow-right:after, a.arrow-link.arrow-right span:after {
    transform: rotate(0deg) scale(1.1) translate(0px, 0px);
    transition: .2s linear transform;
}

a.arrow-link span:after {    
    content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2036.67%2031.92%22%20style%3D%22enable-background%3Anew%200%200%2036.67%2031.92%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20class%3D%22st0%22%3E%0A%09%3Cpath%20fill%3D%22%234EE4FF%22%20d%3D%22M20.72%2C31.92h-3.76l14.6-14.56H0v-2.8h31.55L16.96%2C0h3.76l15.96%2C15.96L20.72%2C31.92z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A);
    opacity:0;
    z-index: 100;
    transition: .2s linear all;
}

a.arrow-link:hover span:after {        
    transition: .2s linear all;
    opacity:1;
    transform: rotate(90deg) scale(1.1) translate(0px, 0);    
}

a.arrow-link:hover:after {    
    transform: rotate(90deg) scale(1.1) translate(0px, 0);    
    transition: .2s linear all;
    opacity:0;
}

a.arrow-link.arrow-right:hover:after {
    transform: rotate(0deg) scale(1.1) translate(5px, 0px);
}

a.arrow-link.arrow-right:hover span:after {
    transform: rotate(0deg) scale(1.1) translate(5px, 0px);
}

a.arrow-link.fadeout:after {
    opacity:0;
    transition: .2s linear all;
}

a.arrow-link.fadeout:hover span:after {        
    transition: .2s linear all;
    opacity:0;
}

a.arrow-link.cross:after {
    /*content: url(/resources/arrow.svg);*/
    content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%2032%2032%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20style%3D%22fill%3A%2359E0F8%3B%22%20points%3D%2228.5%2C4.9%2027.1%2C3.5%2016%2C14.6%204.9%2C3.5%203.5%2C4.9%2014.6%2C16%203.5%2C27.1%204.9%2C28.5%2016%2C17.4%2027.1%2C28.5%20%0A%0928.5%2C27.1%2017.4%2C16%20%22%2F%3E%0A%3C%2Fsvg%3E);
    transition: .2s linear all;
    opacity:1;    
}

a.arrow-link.cross span:after {    
    content: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%2032%2032%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20style%3D%22fill%3A%2359E0F8%3B%22%20points%3D%2228.5%2C4.9%2027.1%2C3.5%2016%2C14.6%204.9%2C3.5%203.5%2C4.9%2014.6%2C16%203.5%2C27.1%204.9%2C28.5%2016%2C17.4%2027.1%2C28.5%20%0A%0928.5%2C27.1%2017.4%2C16%20%22%2F%3E%0A%3C%2Fsvg%3E);    
    opacity:1;
    z-index: 100;
    transition: .2s linear all;
}

a.arrow-link.cross.fadeout:after {
    opacity:0;
    transition: .2s linear all;
}


#content {
    width: 100%;
}

.column-content {
    width:calc(982 / 1388 * 100%);
    max-width:1473px;
    margin: 0px auto;
    position: relative;
}

.threeColumn {
    width:calc((36 * 3 + 50 * 2) / 982 * 100%);
}

.fourColumn {
    width:calc((36 * 4 + 50 * 3) / 982 * 100%);
}

.fiveColumn {
    width:calc((36 * 5 + 50 * 4) / 982 * 100%);
}

.sixColumn {
    width:calc((36 * 6 + 50 * 5) / 982 * 100%);
}

.sevenColumn {
    width:calc((36 * 7 + 50 * 6) / 982 * 100%);
}

.sixColumn .threeColumn {
    width:calc((36 * 3 + 50 * 2) / 466 * 100%);
}

.eightColumn {
    width:calc((36 * 8 + 50 * 7) / 982 * 100%);
}

.twelveColumn {
    width:100% ;
}

@media screen and (max-width: 768px) {

/*Mobile:
Page: 414
Content: 342
Page max: 1473
Column width: 63
Column space: 30
Column count: 4;*/

    body {
        font-size:1.5rem;
    }

    .column-content {
        width:calc(342 / 414 * 100%);
        max-width: initial;
        margin: 0px auto;
        position: relative;
    }

    .threeColumn {
        width:calc((63 * 2 + 30 * 1) / 342 * 100%);
    }

    .fourColumn {
        width:calc((63 * 2 + 30 * 1) / 342 * 100%);
    }

    .fiveColumn {
        width:100%;
    }    

    .sixColumn {
        width:100%;
    }
    
    .sixColumn .threeColumn {
        width:calc((63 * 2 + 30 * 1) / 342 * 100%);
    }

    .sevenColumn {
        width:100%;
    }

    .eightColumn {
        width:100%;
    }

    .mTwoColumn {
        width:calc((63 * 2 + 30 * 1) / 342 * 100%);
    }

    .mThreeColumn {
        width:calc((63 * 3 + 30 * 2) / 342 * 100%);
    }
}

/* header */

.logo-letter {
    fill:#000;
    transition: .4s ease fill;
}

.header {
    z-index:100;
}

.logo-o {
    position: fixed;
    top: 40px;
    left: 40px;
    width:calc(112 / 1388 * 100%);
    max-width:112px;
    height: auto;
    z-index:100;
}

.logo-p {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width:calc(99 / 1388 * 100%);
    max-width:99px;
    height: auto;
    z-index:100;
}

.logo-white {
    z-index: 101;
}

 .header-company-name {
    z-index: 100;
    position: fixed;
    transform: rotate(-90deg);
    left: 50px;
    bottom: 28px;
    transform-origin: center left;
    color:#000;
    transition:.2s linear color;
    letter-spacing: .1em;
 }

 .header-company-name p {
    margin: 0;
 }

 body.menu-open .logo-p .logo-letter {
    fill:#FFF;
    transition: .4s ease fill;
}

body.invert-logo-on-header .logo-letter, body.invert-logo-on-header .logo-letter {
    fill:#FFF;
    transition: none;
}

body.invert-logo-on-header .header-mobile .logo-letter {
    fill:#000;
    transition: .4s ease fill;
}


 @media screen and (max-width: 768px) {

       @keyframes logo-o {
        0% {
            opacity: 1;
            top: 20px;
            left: 20px;
            width:calc(100 / 1388 * 100% * 3);
        }

        49% {
            opacity: 0;
            top: 20px;
            left: 20px;
            width:calc(100 / 1388 * 100% * 3);
        }
        50% {
            opacity: 0;
            width:14px;
            top:18px;
            left:15px;
        }

        100% {
            opacity: 1;
            width:14px;
            top:18px;
            left:15px;

        }      
    }

    @keyframes logo-o-rev {
        0% {
            opacity: 1;
            width:14px;
            top:18px;
            left:15px;
        }

        49% {
            opacity: 0;
            width:14px;
            top:18px;
            left:15px;
        }
        50% {
            opacity: 0;
            top: 20px;
            left: 20px;
            width:calc(100 / 1388 * 100% * 3);
        }

        100% {
            opacity: 1;
            top: 20px;
            left: 20px;
            width:calc(100 / 1388 * 100% * 3);

        }      
    }

    @keyframes logo-p {
        0% {
            opacity: 1;
            top: auto;
            left:auto;
            bottom: 20px;
            right: 20px;
            width:calc(88 / 1388 * 100% * 3);
        }

        49% {
            opacity: 0;
            top: auto;
            left:auto;
            bottom: 20px;
            right: 20px;
            width:calc(88 / 1388 * 100% * 3);;
        }
        50% {
            opacity: 0;
            width:12px;
            top:33px;
            left:36px;
            right:auto;
            bottom:auto;
        }

        100% {
            opacity: 1;
            width:12px;
            top:33px;
            left:36px;
            right:auto;
            bottom:auto;
        }      
    }

    @keyframes logo-p-rev {
        0% {
            opacity: 1;
            width:12px;
            top:33px;
            left:36px;
            right:auto;
            bottom:auto;
        }

        49% {
            opacity: 0;
            width:12px;
            top:33px;
            left:36px;
            right:auto;
            bottom:auto;
        }

        50% {
            opacity: 0;
            top: auto;
            left:auto;
            bottom: 20px;
            right: 20px;
            width:calc(88 / 1388 * 100% * 3);
        }

        100% {
            opacity: 1;
            top: auto;
            left:auto;
            bottom: 20px;
            right: 20px;
            width:calc(88 / 1388 * 100% * 3);
        }      
    }


    .animation-reverse svg.logo-o {
        animation-name: logo-o-rev;
        top: 20px;
        left: 20px;
        width:calc(100 / 1388 * 100% * 3);
        animation-duration: .5s;
        animation-iteration-count: 1;
    }

    .animation-reverse svg.logo-p {
        animation-name: logo-p-rev;
        top: auto;
        left:auto;
        bottom: 20px;
        right: 20px;
        width:calc(88 / 1388 * 100% * 3);
        animation-duration: .5s;
        animation-iteration-count: 1;
    }

    .animation-initial svg.logo-o {
        top: 20px;
        left: 20px;
        width:calc(100 / 1388 * 100% * 3);
    }

    .header svg.logo-o {
        position: fixed;        
        max-width: initial;
        height: auto;
        z-index:100;        
    }

    .header svg.logo-p {
        top: auto;
        left:auto;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width:calc(88 / 1388 * 100% * 3);
        max-width: initial;
        height: auto;
        z-index:100;

    }
      
     body.menu-open .logo-o .logo-letter, body.menu-open .logo-p .logo-letter {
        fill:#FFF;
        transition: .2s linear fill;
    }

    .menu-wrapper.is-active ~ .header-company-name {
        color:#FFF;
        transition:.2s linear color;

     }

    .header-company-name {  
        left:calc((100% - 342 / 414 * 100%) / 4);
        font-size:1.2rem;
        bottom:20px;
        transition: .2s ease opacity;
        opacity: 1;
    }        
    
    .header-mobile .header-company-name {
        opacity: 0;
        transition: .2s ease opacity;
    }


    .header-mobile svg.logo-o {
        animation-name: logo-o;
        width:14px;
        top:18px;
        left:15px;
        animation-duration: .5s;
        animation-iteration-count: 1;
    }

    .header-mobile svg.logo-p {
        animation-name: logo-p;
        width:12px;
        top:33px;
        left:36px;
        right:auto;
        bottom:auto;
        animation-duration: .5s;
        animation-iteration-count: 1;
    }

    .menu-wrapper {
        width:100%;
        height:70px;
        background-color: rgba(255,255,255,0);
        border-bottom-width: 1px;
        border-bottom-color: rgba(190,190,190,0);
        border-bottom-style: solid;
        transition: background-color .5s ease, border-bottom-color .5s linear;
    }

    .header-mobile .menu-wrapper {
        background-color: rgba(255,255,255,1);        
        border-bottom-color: rgba(190,190,190,1);
        transition: background-color .5s ease, border-bottom-color .5s linear;
    }
 }

 /* menu */

 .menu-wrapper {
    position: fixed;
    z-index:100;
    top: 0;
    right: 0;
}

.menu {
    width:calc((1 - 982/1388) * 100%);
    background-color: #333333;
    position: fixed;
    z-index:101;
    top: 0;
    left:100%;
    bottom:0;
    transition:.4s ease all;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding:10%;
    justify-content: center;
    align-items: center;
}

.menu a {
    display: block;
    font-size: 3.0rem;
    font-weight: 300;
    color: #FFF;
    transition: .2s ease color;
    text-decoration: none;
    margin: 4rem 0;
}

.menu a:hover {
    color: #4EE4FF;
    transition: .2s ease color;
}


.hamburger-wrapper {
    z-index:104;
    position: fixed;
    top: 20px;
    right: 20px;
    transition:.4s ease right;
}

.menu-wrapper.is-active .hamburger-wrapper {
    right: calc((1 - 982/1388) * 100% - 70px);
    transition:.4s ease right;    
}


.menu-wrapper.is-active .menu {
    left:calc(982/1388 * 100%);
    transition:.4s ease all;    
}

@media screen and (max-width: 768px) {
    .hamburger-wrapper {
        top:8px;
        right:8px;
    }

    .menu {
        width:100%;
    }

    .menu a {
        font-size: 2.0rem;
    }
    
    .menu-wrapper.is-active .hamburger-wrapper {
        right: 8px;
        transition:.4s ease all;    
    }

    .menu-wrapper.is-active .menu {
        left:0;
        transition:.4s ease all;    
    }

}

/*front page*/

.intro-animation-cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    opacity: 1;
    z-index: 4;
}

@keyframes intro-animation-o {

    0% {
        top:50vh;
        top: calc(var(--vh, 1vh) * 50);
        left:50vw;
        transform: translate(-125%, -75%);
        opacity:0;
    }

    20% {
        top:50vh;
        top: calc(var(--vh, 1vh) * 50);
        left:50vw;
        transform: translate(-125%, -75%);
        opacity:1;
    }

    40% {
        top:50vh;
        top: calc(var(--vh, 1vh) * 50);
        left:50vw;
        transform: translate(-125%, -75%);
    }

    100% {
        transform: translate(0,0);
    } 
}

@keyframes intro-animation-p {

    0% {
        right:50vw;
        bottom:50vh;
        bottom: calc(var(--vh, 1vh) * 50);
        transform: translate(125%, 75%);
        opacity:0;
    }

    20% {
        right:50vw;
        bottom:50vh;
        bottom: calc(var(--vh, 1vh) * 50);
        transform: translate(125%, 75%);
        opacity:1;
    }

    40% {
       right:50vw;
       bottom:50vh;
       bottom: calc(var(--vh, 1vh) * 50);
       transform: translate(125%, 75%);
    }

    100% {
        transform: translate(0, 0);
    } 
}

@keyframes intro-animation-cover {

    0% {
        display: block;
        opacity:1;
        visibility: visible;
    }

    80% {
        opacity:1;
    }

    99% {
        opacity:0;
        visibility: visible;
        
    }

    100% {
        opacity:0;       
        visibility: hidden;
    }  
}

.front-page .logo-o {
    visibility: hidden;
/*    opacity: 1;
    animation-name: intro-animation-o;
    animation-duration: 2s;
    animation-iteration-count: 1; 
    animation-timing-function: ease;*/
}

.front-page .logo-p {
    visibility: hidden;
/*    bottom: 40px;
    right: 40px;
    opacity: 1;
    animation-name: intro-animation-p;
    animation-duration: 2s;
    animation-iteration-count: 1; 
    animation-timing-function: ease;*/
}

.intro-animation-cover {
     opacity: 1;
/*     visibility: hidden;
     animation-name: intro-animation-cover;
     animation-duration: 2.5s;
     animation-iteration-count: 1; 
     animation-timing-function: ease-in-out;*/
     
}

@keyframes type { 
  0% { width: 0; } 
  80% { width: 0; }
  100% {  }
} 

.front-page .header-company-name p {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 13rem;    
    animation: type 2s steps(13, end);
}

@keyframes hero-wrapper { 
    0% {
            visibility: hidden;
        } 
    20% {
        visibility: visible;
    }
}

.front-page-hero-wrapper {
    animation: hero-wrapper 2s linear;
}


.front-page-hero-wrapper {
    width: 100%;
}

@keyframes gradientanimation {
    0% {
        background-position:0vw center;
    }

    50% {
        background-position:100vw center;
    }

    100% {
        background-position:200vw center;
    }  
}

.front-page-hero-wrapper .front-page-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgb(255,255,255);    
    background: linear-gradient(45deg, #D4C2FC 0%, #EEE4E5 10%, #F4D3F0 20%, #C8E0F8 30%, #A9F7FE 40%, #D4C2FC 50%, #EEE4E5 60%, #F4D3F0 70%, #C8E0F8 80%, #A9F7FE 90%, #D4C2FC 100%);    
    mix-blend-mode: hard-light;
    animation-name: gradientanimation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-position:0vw center;
    background-size: 200vw 200vw;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .front-page-hero-wrapper .front-page-hero-gradient {
        opacity: 0.7 !important;
    }
}

@supports (-ms-accelerator:true) {
    .front-page-hero-wrapper .front-page-hero-gradient {
        opacity: 0.7 !important;
    }
}

@supports (-ms-ime-align:auto) {
    .front-page-hero-wrapper .front-page-hero-gradient {
        opacity: 0.7 !important;
    }
}

.front-page-hero-wrapper .front-page-hero-slideshow {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.front-page-hero-wrapper .flickity-page-dots {
    bottom: 35px;
    text-align: right;
    right:160px;
    z-index: 3;
}

.front-page-hero-wrapper .flickity-page-dots .dot {
    width: 16px;
    height: 16px;
    margin: 0 13px;
    background-color: #F3F3F3;
    opacity: 1.0;
}

.front-page-hero-wrapper .flickity-page-dots .is-selected {
    background-color: #000;
}

.front-page-hero-slide {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #FFF;
}

.front-page-hero-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.front-page-hero-slide-data {
    z-index: 100;
    position: absolute;
    width:calc(982 / 1388 * 100%);
    max-width:1473px;
    left:calc((100% - 982 / 1388 * 100%) / 2);
    top: 20%;  
}

/*.front-page-hero-slide-data div, .front-page-hero-slide-data h2 {
    position: absolute;
}*/

.front-page-hero-slide-data-title {
    position: absolute;
    top: 0;
    left: 0;    
}

.front-page-hero-slide-data-link {
    position: absolute;
    top: 0;
    right: 0;
}

.front-page-hero-slide-data-headline {
    font-size: 6vw;
    margin: 25vh 0 0;
    margin: calc(var(--vh, 1vh) * 25) 0 0;
    letter-spacing: -.1vw;    
    line-height: initial;
}

.front-page-hero-slide-data-headline a {
    text-decoration: none;
}

.front-page-hero-slide-data-headline a:hover {
    color:#000;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.front-page-hero-slide {
    opacity: 0 !important;
}

.front-page-hero-slide:not(.is-selected){
    animation: fadeOut ease 3s;
}

.front-page-hero-slide.is-selected {
    z-index: 99;
    opacity: 1 !important;
    animation: fadeIn ease 3s;
}



.front-page-intro-block {
    margin-top: 14rem;
    margin-bottom: 18rem;
    font-size: 20px;    
    line-height: 1.6em;
}

.front-page-intro-block-bigtext {
    /*font-size: 7.074927954vw;*/
    font-size: 9.074927954vw;
    letter-spacing: -.2vw;
    margin-top: 10rem;
    margin-bottom: 10rem;
    line-height: initial;    
}

.front-page-intro-block-bigtext span {
    display: block;
}

.front-page-intro-block-bigtext span.front-page-intro-block-bigtext-politicsandart {
    text-align: right;
    width: 100%;
}

.front-page-intro-block-top-text {
    
}

.front-page-block-top-link {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.6rem;
}

.front-page-intro-block-bottom-text {    
    position: relative;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .front-page-intro-block {
        margin-top: 7rem;
        margin-bottom: 12rem;
    }

    .front-page-intro-block-bigtext {
        overflow: hidden;
    }

    .front-page-hero-slide-data {
        z-index: 100;
        position: absolute;
        width:calc(342 / 414 * 100%);
        max-width: initial;
        left:calc((100% - 342 / 414 * 100%) / 2);
        top: 0;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;                
    }


    .front-page-hero-wrapper .flickity-page-dots {
        text-align: center;
        right: auto;
    }

    .front-page-hero-slide-data-title {
        position: relative;
       
    }

    .front-page-hero-slide-data-headline {
        font-size: 10vw;    
        top: auto;
        letter-spacing: -.1vw;
        position: relative;
        margin: 2rem 0;
    }

    .front-page-hero-slide-data-link {
        position: relative;
    }

    .front-page-intro-block {
        position: relative;
        font-size: 1.5rem;        
    }

    .front-page-block-top-link {
        top:auto;
        bottom:-6rem;
    }

    .front-page-intro-block-bigtext {    
        font-size: 14vw;
    }
}

    /* featured projects */
.front-page-featured-projects-block {
    margin-top: 14rem;
    clear: both;
    position: relative;
}

.front-page-featured-projects-block-title {
    font-size: 3.0rem;
    margin-bottom:6rem;
}

.front-page-featured-project {
    margin-bottom: 16rem;
    overflow: hidden;
    clear: both;
}

.front-page-featured-project img {
    width: 100%;
    height: auto;
}

.front-page-featured-project a {
    text-decoration: none;
}

.front-page-featured-project a img {
    display: block;
    opacity: 1.0;
    transition:.2s ease opacity;
}

.front-page-featured-project a:hover img {
    opacity: .8;
    transition:.2s ease opacity;
}

.front-page-featured-project-right {
    float: right;
}

.front-page-featured-project-categories {
    font-size: 1.2rem;
    margin-bottom:1.5rem;
    letter-spacing: initial;
}

.front-page-featured-project-categories a {
    text-decoration: none;
}

.front-page-featured-project-categories a:hover {

}

.front-page-featured-project-title {
    font-size: 1.5rem;
    margin-bottom:5rem;
    margin-top:1.5rem;
}

.front-page-featured-project-headline {
    font-size: 8rem;
    letter-spacing: -.2rem;
    line-height: initial;
}

    /* instagram feed */

.front-page-instagram-feed-block {
    position: relative;
    clear: both;
}

.front-page-instagram-feed-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.2rem;
    letter-spacing: initial;

}

.front-page-instagram-feed-item {
    margin-bottom: 2rem;
}

.front-page-instagram-feed-item img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
        
}

@media screen and (max-width: 768px) {

    .front-page-featured-project-headline {
        font-size: 4rem;
        letter-spacing: -.1rem;
    }

    .front-page-block-top-link {
        font-size: 1.2rem;
    }

    .front-page-featured-project {
        margin-bottom: 8rem;
    }

    .front-page-featured-project-title {
        font-size: 1.5rem;
        margin-bottom:3.5rem;
        margin-top:1.5rem;
    }

    .front-page-instagram-feed-block {
        margin-top: 12rem;
    }
}


/* about page */

h1.about-page-title {
    margin: 0;
    padding: 0;
    font-weight: normal;
    position: absolute;
    top: 20vh;
    top: calc(var(--vh, 1vh) * 20);
    left: 0;
    font-size: 1.6rem;
}

.about-page-intro-block-bigtext-wrapper {
    margin: 0;
    padding: 30vh 0 5vh;
    padding: calc(var(--vh, 1vh) * 30) 0 calc(var(--vh, 1vh) * 5);
    width: 100%;
    position: relative;
    z-index: 0;
}

.about-page-about-and-news {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    /*align-items: center;*/
    font-weight: 300;
}
.about-page-about h3 {
    margin-top: 0;
}

.about-page-news {
    padding-top:32rem;
}

.about-page-news-section-title {
    font-size: 1.2rem;
    margin: 2.4rem 0 1.3rem 0;
}

.about-page-news-wrapper {
    display: flex;
    flex-direction: column;
}

.about-page-news-image img {
    width: 100%;
    height: auto;    
}

.project-page-block-large-text.about-page-largetext {
    font-weight: normal;
}

.about-page-phone-mail {
    margin-top: -15rem;
    margin-bottom: 20rem;    
    font-weight: 300;
}

.about-page-phone-mail span {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 1em;
    font-size: 1.2rem;
    vertical-align: middle;
    line-height: 2em;
    margin: 0;
}

.about-page-phone-mail p {
    display: inline;
    white-space: nowrap;
}

.about-page-phone-mail p:first-child {
    margin-right: 5rem;
}

.about-page-phone-mail a {
    text-decoration: none;
}

.about-page-milestone {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rem;
}

.about-page-milestone.about-page-milestone-right {
    flex-direction: row-reverse;
}

.about-page-milestone-image img {
    width: 100%;
    height: auto;
}

.about-page-milestone-data {
    padding-top: 2rem;
    font-weight: 300;
}

.about-page-milestone-headline {
    font-size: 1.5rem;
    font-weight: normal;
}

.about-page-milestone-year {
    font-size: 6rem;
    margin:1.2rem 0 1rem;
    font-weight: normal;
    line-height: initial;
}

.about-page-intro-block-bigtext {    
    font-size: 9.074927954vw;
    letter-spacing: -.2vw;
    margin-top: 10rem;
    margin-bottom: 10rem;
    line-height: initial;    
}

.about-page-intro-block-bigtext span {
    display: block;
}

.about-page-intro-block-bigtext span.front-page-intro-block-bigtext-politicsandart {
    text-align: right;
    width: 100%;
}




@media screen and (max-width: 768px) {

    h1.about-page-title {
        top: 30vh;
        top: calc(var(--vh, 1vh) * 30);
    }

    .about-page-intro-block-bigtext-wrapper {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-page-milestone, .about-page-milestone.about-page-milestone-right, .about-page-about-and-news {
        flex-direction: column;
    }

    .about-page-about {
        margin-bottom: 9rem;
    }
    
    .about-page-news {
        padding-top: 0;
    }

    .about-page-news-image {
        margin-bottom: 1rem;
        }

    .about-page-news-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }

    .about-page-intro-block-bigtext {    
        font-size: 14vw;
    }

    .about-page-phone-mail {
        margin-top: -5rem;
    }
}


/* contact page */

.contact-page-contact-info {
    display: flex;
    justify-content: space-evenly;
    font-weight: 300;
    line-height: 2em;
    width: 100%;
    align-items: center;    
    height: 88vh;
    height: calc(var(--vh, 1vh) * 88);
}

.contact-page-contact-info h3 {;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 1em;
    font-size: 1.2rem;
    vertical-align: middle;
    line-height: 2em;
    margin: 0;
}

.contact-page-contact-info a {
    text-decoration: none;
}

.contacts-page-grid {
    display: grid;
    grid: auto-flow / calc((100% - 100px) / 3) calc((100% - 100px) / 3) calc((100% - 100px) / 3);
    grid-column-gap: 50px;
    grid-row-gap: 100px;
}

.contacts-page-contact img {
    width: 100%;
    height: auto;
    display: block;
}

.contacts-page-contact a {
    text-decoration: none;
}

h3.contact-page-contact-name {
    font-size: 2.4rem;
    padding: 2.4rem 0;
    margin: 0 0 2.4rem 0;
    border-bottom: 1px solid #000;
    word-wrap: break-word;
}

.contacts-page-contact > div {
    margin-bottom: 0;
    word-wrap: break-word;
    font-size: 1.2rem;
}

@media screen and (max-width: 768px) {

    .contacts-page-grid {
        grid: auto-flow / calc(50% - 15px) calc(50% - 15px);
        grid-column-gap: 30px;
        grid-row-gap: 60px;
        font-size: 1.2rem;
    }

    h3.contact-page-contact-name {
        font-size: 2.0rem;
        padding: 2rem 0;
        margin: 0 0 1.4rem 0;
        border-bottom: 1px solid #000;
    }

}

/* projects page */

h1.projects-title {
    font-size:1.5rem;
    margin-top: 20vh;
    margin-top: calc(var(--vh, 1vh) * 20);
    margin-bottom: 1.5rem;
    padding-top: 0;   
}

.projects-filter {
    margin-top: 1rem;
    height: 20rem;
    line-height: initial;        
}

.filter-menu-button {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.filter-menu-button a.arrow-link {
    font-size: 16px;
}

.projects-filter-header {
    position: relative;
    height: 7rem;
}

h2.projects-currentView {
    font-size: 6.0rem;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 1em;
}

.projects-filter-menu {
    margin-top: 4rem;
    position: relative;
    float: right;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 2rem;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.projects-filter-menu a {
    text-decoration: none;
    border-bottom:1px solid #FFF;
    transition: .2s ease all;
}

.projects-filter-menu a:hover {
    border-bottom:1px solid #4EE4FF;
    transition: .2s ease all;
    color:#000;
}

.projects-filter-menu > div {
   display: flex;
   justify-content: flex-end;
   overflow: hidden;   
}

.projects-filter-menu > div > span {
    padding-left:2rem;
}

 .projects-filter-menu a.filter-menu-category-selected {
    border-bottom:1px solid #4EE4FF;
 }


 .projects-filter .projects-filter-menu {       
     width:0;
 }

.projects-filter.filter-menu-init .projects-filter-menu {
    width: auto;
    transition: none;
}

.projects-filter.is-active .projects-filter-menu {
    width:auto;    
}


.projects-column-gutter-sizer { /* used by masonry to space columns */
    width:calc(50 / 982 * 100%);
}

.projects-item-wrapper {
    margin-bottom: 10rem;
}

.projects-item-wrapper img {
    height: auto;
    display: block;
}

.projects-item-wrapper-left {
    float:left; 
    clear:left;   
}

.projects-item-wrapper-right {
    float:right; 
    clear: right;
}

h2.projects-item-headline {
    font-size: 8rem;
    letter-spacing: -.2rem;
    word-wrap: break-word;
    line-height: initial;
    margin-top: 0;
    line-height: .9em;
}

h3.projects-item-title {
    font-size: 1.5rem;
    margin-bottom:5rem;
    margin-top:1.5rem;
    letter-spacing:.03em;
}

.projects-item-categories {
    font-size: 1.2rem;
    margin-bottom:1.5rem;
}

.projects-wrapper {
    margin-top: 10rem;
}

.projects-wrapper a {
    text-decoration: none;
}

.projects-item-wrapper > a {
    text-decoration: none;
    display: block;
    position: relative;
    padding-bottom: 100%;
}

.projects-item-wrapper a img {
    display: block;
    opacity: 1.0;
    transition:.2s ease opacity;
    width: 100%;
    position: absolute;
    height: auto;
}

.projects-item-wrapper a:hover img {
    opacity: .8;
    transition:.2s ease opacity;
}

@media screen and (max-width: 768px) {

    .projects-filter a.arrow-link:after, a.arrow-link span:after {
        transform: rotate(0deg) scale(1) translate(0px, 0px);
        transition: .2s linear transform;
    }

    .projects-filter a.arrow-link:hover:after {
        transform: rotate(0deg) scale(1) translate(0px, 0px);
    }

    .projects-filter a.arrow-link:hover span:after {
        transform: rotate(0deg) scale(1) translate(0px, 0px);
    }

    .projects-filter.filter-menu-init .projects-filter-menu {
        width:calc(100% - 20px);
        transition: none;
    }

    .projects-filter-header {
        position: relative;
        height: 10rem;
    }

    .projects-filter-menu {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        margin: 0;
        float: initial;
        position: fixed;
        z-index: 300;
        top: 0;
        right: 0;
        width:100%;
        height: 100%;
        background-color: #fff;        
        justify-content: flex-end;
        font-size: 1.6rem;
        text-align: left;
    }

    .filter-menu-button {
        z-index:301;
    }

    body.menu-open .projects-filter-menu, body.menu-open .filter-menu-button {
        z-index: 0;
    }

    .projects-filter-menu div {
        display: block;
        height: 40%;
        padding-left:3rem;
    }

    .projects-filter-menu div span {
        display: block;
        margin-bottom: 1rem;
    }

    .projects-filter-menu div span.filter-menu-subcategories-divider {
        display: none;
    }

    .filter-menu-subcategories {
        margin-left: 1rem;
    }

    .projects-item-categories {
        margin-bottom:1rem;
    }

    h1.projects-title {
        margin-top: 30vh;
        margin-top: calc(var(--vh, 1vh) * 30); 
    }

    h2.projects-currentView {
        font-size: 3.0rem;
        line-height: 1em;
        position: relative;
    }

    h2.projects-item-headline {
        font-size: 4rem;
        letter-spacing: -.1rem;
    }

    .projects-column-gutter-sizer {
        width: calc(30 / 342 * 100%);
    }
}

/* single project page */

.project-page-block {
    margin-bottom: 20rem;
    margin-left: auto;
    margin-right: auto;
}

.project-page-header {
    min-height: 20vh;
    min-height: calc(var(--vh, 1vh) * 20);
    position: relative;
}

.project-page-title-wrapper {
    width:calc(982 / 1388 * 100%);
    max-width:1473px;
    margin: 0 auto;    
    z-index: 2;
    position: relative;
}

h2.project-page-title {
    margin: 0;
    padding: 0;    
    font-weight: normal;
    position: absolute;
    top: 20vh;
    top: calc(var(--vh, 1vh) * 20);
    left: 0;
    font-size: 1.6rem;
}

.invert-logo-on-header h2.project-page-title {
    color:#FFF;
}

.project-page-hero-image {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 0;
}

div.project-page-hero-headline {
    margin: 0;
    padding: 30vh 0 5vh;
    padding: calc(var(--vh, 1vh) * 30) 0 calc(var(--vh, 1vh) * 5);
    width: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: left;
}

div.project-page-hero-headline h1 {
    margin: 0;
    padding: 0;
    width: calc(342 / 414 * 100%);
}

.project-page-header img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

h1.project-page-headline {
    font-size: 6vw;
    letter-spacing: -.1vw;    
    font-weight: normal;
    line-height: 1em;
    margin: 20rem 0;
}

/* single project data and description */

.project-page-description-data {
    display: flex;
    align-items: flex-start;
    justify-content:space-between;
    font-weight: 300;
}

ul.project-page-data {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.project-page-data li {
    margin-bottom: 1rem;
}

.project-page-data-label {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 1em;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* single project page single image */

.project-page-block h3 {
    font-size:3rem;
    font-weight: normal;
    line-height: 1.2em;
}

.project-page-block-single-image img {
    width: 100%;
    height: auto;
}

.project-page-block-single-image.edgeToEdge {
    width: 100%;
}

/* single project page adjacent images */

.project-page-block-adjacent-images {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.project-page-block-adjacent-images img {
    width: 100%;
    height: auto;
}

/* single project text-image-pair */

.project-page-block-text-image {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.project-page-block-text-image.project-page-block-text-image-swap {
    flex-direction: row-reverse;
}

.project-page-block-text-image img {
    width: 100%;
    height: auto;
}

.project-page-block-text-image-text {
    font-weight: 300;
}

/* single project large text */

.project-page-block-large-text {
    font-size: 5.5vw;
    letter-spacing: -.1vw;    
    font-weight: normal;
    line-height: 1.1em;
}

/* single project body text */

.project-page-block-body-text {
    font-weight: 300;    
    display: flex;
    justify-content: right;
}

.project-page-block-body-text-text {
    margin-left: auto;    
}

.project-page-imagecaption {
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 1.6em;
}

/* single project page related projects */

.single-project-related-projects-block-title {
    font-size: 3.0rem;
    margin-bottom:6rem;
}

.single-project-block-top-link {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {

    .project-page-description-data {
        flex-direction: column;
    }

    .project-page-description-data div:first-child {
        margin-bottom:4rem;
    }

    h2.project-page-title {
        top: 30vh;
        top: calc(var(--vh, 1vh) * 30);
    }
    
    div.project-page-hero-headline {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        padding: 0;
    }

    h1.project-page-headline {
        font-size: 10vw;
        margin: 5rem 0;    
    }

    .project-page-title-wrapper {
        width:calc(342 / 414 * 100%);
        max-width: none;
    }

    div.project-page-imagecaption.threeColumn {
        width:100%;
    }

    .project-page-block {
        margin-bottom: 6.5rem;
    }

    .project-page-block-adjacent-images {
        flex-direction: column;
    }

    .project-page-block-adjacent-images div:first-child {
        margin-bottom:4rem;
    }

    .project-page-block-text-image div:first-child {
        margin-bottom:4rem;
    }.

    .project-page-block-text-image {
        flex-direction: column;
    }

    .project-page-block-text-image-image {
        margin-bottom: 4rem;
    }

    .project-page-block-large-text {
        font-size: 12vw;
    }

    .project-page-block-text-image.project-page-block-text-image-swap {
        flex-direction: column-reverse;
    }

    .project-page-block-single-image img.edgeToEdge {
        margin-left:calc((414 / 342 * 100% - 100%) / -2);
        margin-right:calc((414 / 342 * 100% - 100%) / -2);
        width: calc(414 / 342 * 100%);
    }

    .single-project-block-top-link {
        top:auto;
        bottom:-6rem;
    }

    h2.related-projects-item-headline {
        font-size: 2rem;
        letter-spacing: -.05px;
    }

    .related-projects-item-wrapper {
        margin-bottom: 5rem;
    }

    h3.projects-item-title.related-projects-item-title {
        margin-top: .8rem;
        margin-bottom:1rem;
    }
}

/* footer */
/*.footer {
    display: flex;
    flex-direction: row;
    width:calc(982 / 1388 * 100%);
    max-width:1473px;
    margin: 0px auto;
    font-size: 12px;
    padding: 10rem 0;
    justify-content: space-between;
}*/

.footer-divider {
    margin:20rem 0 0 0;
    width:50px;
    height:9px;
    background-color: #000;
}

.footer {
    display: grid;
    width:calc(982 / 1388 * 100%);
    max-width:1473px;
    margin: 0px auto;
    font-size: 12px;
    padding: 3rem 0 10rem 0;
    grid-column-gap:5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row;
    line-height: 2em;
    letter-spacing: initial;
}

.footer a {
    text-decoration: none;
}

.footer-item a {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .footer {
        width:calc(342 / 414 * 100%);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-auto-flow: column;    
        grid-row-gap:2rem;
    }

    .footer-menu {
        grid-row-start: span 2;
    }
}


.hamburger:focus {outline:0;}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;  
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #4EE4FF; }

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 2px;
    background-color: #000;
    border-radius: 0px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(9px, 3px, 0) rotate(45deg) scale(0.7, 1); }

.hamburger--arrow.is-active .hamburger-inner::after {
   transform: translate3d(9px, -3px, 0) rotate(-45deg) scale(0.7, 1); 
}

.invert-logo-on-header .hamburger-inner, .invert-logo-on-header .hamburger-inner::before, .invert-logo-on-header .hamburger-inner::after {
    background-color: #FFF;
}

.invert-logo-on-header .header-mobile .hamburger-inner, .invert-logo-on-header .header-mobile .hamburger-inner::before, .invert-logo-on-header .header-mobile .hamburger-inner::after {
    background-color: #000;
}