@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
@font-face{
    font-family: 'Roboto';
}
html{
    font-size:62.5%;
    font-family: 'Roboto' , sans-serif;
}
*{
    box-sizing:border-box 
}
*:after,*.before{
    box-sizing:border-box 
}
html,body,div,main,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{
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline 
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary,main{
    display:block 
}
*{
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-font-smoothing:subpixel-antialiased;
    -moz-osx-font-smoothing:grayscale 
}
a{
    text-decoration:none 
}
body{
    line-height:1 
}
ol,ul{
    list-style-type:none 
}
table{
    border-collapse:collapse;
    border-spacing:0 
}
caption,th,td{
    text-align:left;
    font-weight:normal 
}
input,textarea{
    -webkit-border-radius:0;
    -moz-border-radius:0 
}
button,input[type="button"]{
    background:0 
}
:required{
    -o-box-shadow:none;
    -ms-box-shadow:none;
    box-shadow:none 
}
em,i{
    font-style:italic 
}
strong,b{
    font-weight:bold 
}
u{
    text-decoration:underline 
}
pre,code{
    font-family:Monaco,Courier,monospace 
}
pre{
    white-space:pre;
    white-space:pre-wrap;
    white-space:pre-line;
    word-wrap:break-word 
}
blockquote,q{
    quotes:"" "" 
}
blockquote:before,blockquote:after{
    content:"" 
}
q:before,q:after{
    content:"" 
}
a{
    cursor:pointer 
}
input[type="submit"],input[type="button"]{
    cursor:pointer 
}
button,label[for]{
    cursor:pointer 
}
img{
    -ms-interpolation-mode:bicubic 
}
html *{
    box-sizing:border-box 
}
body.locked{
    overflow:hidden 
}
a{
    color:currentColor 
}
.about-title,.emoji{
    font-size:calc(24px + 2vw);
    line-height:1.3em 
}
.logo,.subtitle,.about-block p{
    font-size:calc(16px + 0.6vw);
    line-height:1.4em;
    font-weight: 100;
}
.footer{
    font-size:calc(10px + 0.5vw);
    line-height:1.4em 
}
.intro{
    display:-ms-flexbox;
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:white;
    padding:15vh;
    z-index:999999 
}
@media (max-aspect-ratio: 163 / 96){
    .intro{
        padding:9vw 
    }
}
.intro.is-hidden{
    transition:opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity:0;
    pointer-events:none 
}
.intro-text{
    margin:auto 0;
    font-size:11vh;
    line-height:1.2em 
}
@media (max-aspect-ratio: 163 / 96){
    .intro-text{
        font-size:6vw 
    }
}
.intro-line{
    display:block;
    opacity:0;
    animation-name:animateIn;
    animation-duration:2000ms;
    animation-fill-mode:forwards;
    animation-timing-function:ease-out;
    font-weight: 100;
}
.intro-line:nth-child(1){
    animation-delay:500ms 
}
.intro-line:nth-child(2){
    animation-delay:2300ms 
}
.intro-line:nth-child(3){
    animation-delay:4100ms 
}
.intro-line:nth-child(4){
    animation-delay:4100ms 
}
.intro-line:nth-child(5){
    animation-delay:5900ms 
}
@keyframes animateIn{
    to{
        opacity:1 
    }
}
.gallery{
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    width:100vw;
    height:100vh;
    background:black 
}
.logo,.subtitle{
    line-height:10vmin;
    position:absolute;
    top:0;
    left:0;
    right:0;
    text-align:center;
    color:black;
    z-index:9999 
}
.subtitle{
    top:initial;
    bottom:0 
}
@media (hover: none){
    .subtitle{
        display:none 
    }
}
.projects{
    position:relative 
}
.project{
    height:100vh;
    width:100vw;
    background-size:contain;
    background-position:center center;
    background-color:#F2F2F2;
    background-repeat:no-repeat 
}
.project:not(.is-active){
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:0;
    pointer-events:none;
    transition:opacity 300ms ease-out 
}
.btn-prev,.btn-next{
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    z-index:9500;
    outline:none;
    padding:0;
    margin:0;
    border:none 
}
.btn-prev{
    left:0;
    cursor:url("prev.png") 0 0,pointer;
    cursor:url("prev.svg") 0 0,pointer;
    cursor:-webkit-image-set(url("prev.png") 1x, url("prev@2x.png") 2x) 0 0,pointer 
}
.btn-next{
    right:0;
    cursor:url("next.png") 0 0,pointer;
    cursor:url("next.svg") 0 0,pointer;
    cursor:-webkit-image-set(url("next.png") 1x, url("next@2x.png") 2x) 0 0,pointer 
}
.btn{
    border:none;
    margin:0 auto;
    padding:0;
    position:absolute;
    right:0;
    left:0;
    bottom:4.5rem;
    z-index:9999;
    width:2rem 
}
.line{
    display:block;
    width:1.6rem;
    height:2px;
    background:white 
}
.line:first-child{
    transform:translateY(2px) rotate(90deg) 
}
.about{
    padding:0 7.5vw 
}
.about-title{
    padding-top:7.5vw;
    padding-bottom:7.5vw 
}
@media (max-width: 572px){
    .about-title{
        padding-top:15vw;
        padding-bottom:15vw 
    }
}
.about-block{
    display:block;
    margin-bottom:7.5vw 
}
@media (max-width: 572px){
    .about-block{
        margin-left:auto !important;
        margin-right:auto !important;
        width:100% !important;
        margin-bottom:15vw 
    }
    .about-block br{
        display:none 
    }
}
.about-block p:not(:last-child){
    margin-bottom:1em 
}
.about-block a{
    position:relative 
}
.about-block a:after{
    content:"";
    position:absolute;
    bottom:0.08em;
    left:0;
    right:0;
    height:0.08em;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:center center;
    transition:transform 400ms ease-out;
    z-index:-1 
}
.about-block a:hover:after{
    transform:scaleX(1) 
}
.footer{
    color:lightgray;
    text-align:center;
    padding:2.5vw 7.5vw;
    -webkit-font-smoothing:antialiased;
    font-weight: 300;
}
.footer *{
    -webkit-font-smoothing:antialiased 
}
.credits:before{
    content:" · ";
    white-space:pre 
}
@media (max-width: 660px){
    .credits{
        display:block 
    }
    .credits:before{
        display:none 
    }
}
.emoji{
    text-align:center;
    margin-top:7.5vw 
}
.about-title {
    font-weight: 100;
}