::-webkit-scrollbar { 
    display: none;
}
::scrollbar{
    display: none;
}


html {
  font-size: 62.5%; 
    background-color:#111111;}

body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 300;
  font-family: "Kode Mono", Helvetica, Arial, sans-serif;
  color: #ffffff; }


body{
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    
}

h1{
    
    letter-spacing: 0.2rem;
    
    font-size: calc(25px + (80 - 25) * ((100vw - 300px) / (1600 - 300)));
    font-family: Oxanium;
    
}

h2 {
    font-weight: 600;
    letter-spacing: 0.1rem;
    font-size: calc(25px + (55 - 25) * ((100vw - 300px) / (1600 - 300)));
    margin: 0;
	font-family: Oxanium;
}

h3{
    letter-spacing: 0.1rem;
}


h5{
    font-family: Oxanium, sans-serif;
    font-weight: 500;
    font-size: calc(12px + (30 - 25) * ((100vw - 300px) / (1600 - 300)));
}


h6{
    font-size: calc(10px + (35 - 25) * ((100vw - 300px) / (1600 - 300)));
Color: #ACACAC;
}

H2 .libre {
    font-family: Kode Mono, serif;
	font-size: calc(25px + (40 - 25) * ((100vw - 300px) / (1600 - 300)));
    
}


b {
    font-weight: 800;
}

b.libre{
    text-decoration: underline;
}

em{
    color: #ffffff;
    font-size: calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
}



nav{
    padding-top: 6rem;
    width: 90%;
    background-color: #111111;
    font-family: Oxanium, sans-serif;
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 0.2rem;
    margin: auto;
}

nav .left-nav{
        
    text-transform: uppercase;
    float: left;
    display: inline-flex;
    
}


nav .right-nav{
    float: right;
    
}

ul.perma-nav li a{
    font-size: calc(8px + (12 - 8) * ((100vw - 300px) / (1600 - 300)));
}


ul li{
    font-family: Kode Mono;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding-bottom: 7%;
}

ul.perma-nav sup{
    font-family: Kode Mono;
    font-size: calc(8px + (10 - 8) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
    padding-right: 0.5rem;
    display:inline-flex;
    vertical-align:middle;
    top: 0;
}


.about-block-wrapper{
    float: right;
    margin-right: 5%;
    z-index: 999999;
    position: relative;
    background-color: #222222;
    
    animation: fadeInUp 1s;
border-radius: 40px;
box-shadow: 0px 0px 40px 5px rgba(240, 240, 240, 0.2);
    
    
    width: 70%;
    height: 70%;
    max-width: 105rem;
    min-width: 30rem;
    min-height: 30rem;
    max-height: 260rem;
}





.about-block {
    height: 60vw;
    min-height: 30rem;
    max-height: 70rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 8%;
	border: none;
box-shadow: 0px 0px 20px 0px rgba(240, 240, 240, 0.4) inset;
border-radius: 40px;
}


h6{
    margin-top: 2%;
    font-weight: 300;
}

.about-block a:hover{
    text-decoration: none;
}


.footer-content h6 a:hover{
    text-decoration: none;
}


.section-header{
    padding-top: 8%;
}



.main-block{
    padding-top: 15%;
    padding-bottom: 11%;
    height: 100%;
    background-color: #000000;
    float: right;
    margin-top: -5%;
    min-width: inherit;
    width: 80%;
    padding-left: 5%;
    border-radius: 40px;
    
    animation: fadeInUp 1.3s;
}


.left-content {
    width: 15%;
    position: absolute;
    padding-left: 5%;
}



blockquote{
    
    text-transform: uppercase;
    font-weight: 600;
    font-size: calc(10px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
    border-left: solid 2px #ffffff;
    padding-left: 2%;
    letter-spacing: 0.2rem;
    margin-left: 0;
    
}


.scroll-anim {
    position: fixed;
    top: 90%;
    text-align: center;
    animation: scroll alternate infinite ease-in-out 1.5s;
    margin: auto;
}


.scroll-content img{
    animation: fadeInDown 1s ease-in-out;
}


.about-anim{
    animation: about alternate infinite ease-in-out 1.5s;
    width: 10%;
    min-width: 10px;
    max-width: 70px;
}

.footer-content h6 a:hover .about-anim{
    animation: none;
    transition: all 0.2s;
    
}



a.btn:hover .about-anim{
    animation: none;
    transition: all 0.3s;
    
}



.selected-projects{
    width: 90%;
    padding-top: 16%;
}


.work {
    
    padding-bottom: 10%;
     margin-top: -10%;
    
}


.work:nth-child(1){
     margin-top: 0;
}



.work img {
    width: 35%;
    max-width: 1165px;
    filter: blur(6px);
    transition: all .4s ease-in-out;
border-radius: 40px;
box-shadow: 0px 0px 10px 10px #ffffff inset;
    
    
}


.work a:hover img{
    
filter: blur(0px);
 transition: all .4s ease-in-out;
}


.work:nth-child(even){
    flex-direction: row-reverse;
    text-align: right;
}


.work:nth-child(odd){
    flex-direction: row;
    text-align: left;
}


.work:nth-child(even) .label{
    padding-right: 20%;
}





.work:nth-child(odd) .label{
    
    padding-left: 15%;
}






.work a .label b{
    color: #ffffff;
    opacity: 0;
    position: relative;
    z-index: 999;
    transition: all 0.3s ease-in-out 0.3s;
}

.work a:hover .label b{
    animation: fadeIn 0.5s;
    opacity: 1;
}


/*

 .work:nth-child(odd) a .label div h5:before{
    content: "";
  position:absolute;
    z-index: 99;
  width: 32%;
  height: 3vw;
  bottom: 0;
  left: 36%;
  background-color: #f8f8f8;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
    transform-origin: left;
    
}
*/

/*

.work:nth-child(odd) a:hover .label div h5:before{
    visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
    transform-origin: left;
    
}



.work:nth-child(even) a .label div h5:before{
    content: "";
  position:absolute;
    z-index: 99;
  width: 31%;
  height: 3vw;
  bottom: 0;
  right: 36%;
  background-color: #f8f8f8;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
    transform-origin: right;
    
}

*/


/*
.work:nth-child(even) a:hover .label h5:before{
    
    visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
    transform-origin: right;
    
}

*/



.work .label{
    position: relative;
    margin-bottom: -25%;
    z-index: 999999;
}


.work a:hover{
    text-decoration: none;
}




.work:nth-child(odd) .label hr{
    
    width: 25%;
    margin-left: 25%;
    text-align: right;
    display: inline-flex;
    vertical-align: middle;
    margin-right: 2%;
}



.work:nth-child(even) .label hr{
 
    width: 25%;
    margin-right: 20%;
    text-align: left;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 2%;
    
}



.footer{
    margin-top: 10%;
    padding-bottom: 15%;
    background-color: #111111;
    float: right;
    width: 85%;
    
}

.footer-content{
    
    width: 90%;
    
}

.footer h3{
    padding-bottom: 3%;
    font-size: calc(14px + (40 - 14) * ((100vw - 300px) / (1600 - 300)));
}

.footer p {
    font-size: calc(11px + (25 - 11) * ((100vw - 300px) / (1600 - 300)));
    padding-bottom: 3%;
    font-weight: 100;
}

.footer ul li{
    display: inline;
    padding-right: 5%;
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.footer ul{
    padding-top: 4%;
}


.footer p a{
    text-decoration: underline;
}


.footer-content{
    padding-left: 3%;
}

.footer ul li sup img{
    width: 5%;
    padding-right: 0.5rem;
    max-width: 15px;
    display: inline-flex;
    vertical-align: middle;
}



/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #ffffff; 
text-decoration: none;
    position: relative;

}

a:hover {
    color: #acacac;
    text-decoration: none;
}


a:before{
    content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
    transform-origin: left;
}

a:hover:before{
    visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
    transform-origin: left;
}

a.about-links {
    color:#fff !important;
    text-decoration: none;
    font-weight: 500;
}

a.about-links:hover {
    opacity: 0.8;
    text-decoration: none;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: none;}


ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }




/* Project Styles
================================================== */


ul.center-nav {
    display: inline;
    width: 90%;
    text-align: center;
    margin: auto;
}

nav{
    text-align: center;
}

ul.center-nav li {
    text-align: center;
    display: inline-flex;
    padding-left: 2%;
    padding-right: 2%;
}


.project-header{
 
    padding-bottom: 20%;
    
    height: 100%;
    background-color: #111111;
    float: right;
    min-width: inherit;
    width: 85%;
    
    
    
    
}

.project-header h2{
    font-weight: 300;
}

.project-header p{
    font-weight: 400;
    line-height: 1.5rem;
}

.project-header{
    display: inline-flex;
}

.left-col{
    float:left;
    width: 50%;
    
    animation: fadeInUp 0.7s ease-in-out;
}

.right-col{
    width: 40%;
    padding-left: 5%;
    animation: fadeInUp 1.2s ease-in-out;
}

.right-col p{
    font-size: calc(12px + (25 - 12) * ((100vw - 300px) / (1600 - 300))); 
    font-weight: 300;
    line-height: normal;
    margin-top: 1%;
}

.project-header a{
    text-decoration: underline;
}


.project {
    margin-bottom: 10%;
}


.project p{
    padding-top: 2%;
    line-height: 4rem;
}


.project p{
    width: 50%;
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
}


.project i{
    font-family: Libre Baskerville, serif;
    font-size: 0.7vw;
    color: #767676;
    width: 70%;
    position: absolute;
    text-align: center;
}


.project img{
    width: 95%;
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
}

.project a{
    color: #222;
    font-weight: 600;
    font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1600 - 300)));
    text-decoration: underline;
}

.project video{
    width: 95%;
}

.half-size{
    width: 50% !important;
}


/* ANIMATIONS ==================================================*/




@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
  }
}



@keyframes about {
  0% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(15px);
  }
}





@keyframes fadeInUp {
  from {
    /*opacity: 0;*/
    transform: translate3d(0, 70%, 0);
  }

  to {
    /*opacity: 1;*/
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}


@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}



@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}




@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 100%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}





@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}



@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}




/* Media Queries
==================================================*/


@media (max-width: 400px) {
    
    
    
    
}






@media (max-width: 550px) {
    


    
}




@media (max-width: 750px) {
    
    .main-block{
        width: 90%;
    }
    
    .about-block-wrapper{
    }
    
    
    .work .label{
    margin-bottom: -35%;
}
    

    ul.perma-nav b{
        display: none;
    }

    
    .footer{
        width: 95%;
    }
    
    
    .scroll-anim{
        display: none;
    }
    
    .section-header{
    padding-top: 15%;
}
    
    .project p{
    width: 90%;
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
    line-height: 2rem;
}
    
    ul.center-nav b{
        display: none;
    }
    
    
    .project-header{
        display: block;
        float: none;
        margin-left: 10%;
    }
    
    .project-header .left-col{
        
        width: 90%;
        
    }
    
    .project-header .right-col{
        padding-left: 0;
        width: 90%;
    }
    
    
    
    html.touch *:hover {
    pointer-events: none !important;
}
    
    
    
    .work:nth-child(odd) a:hover .label div h5:before{
    visibility: hidden;
    
}
    
    
   .work:nth-child(even) a:hover .label div h5:before{
    visibility: hidden;
    
}
    
    
    .work a .label b{
    visibility: hidden;
    
}
    
    

    
}
    




    
}

/*
@media (min-width: 1200px) {

        .main-block{
        width: 80%;
    }
}
*/