*{margin: 0; padding: 0}

img, video{width: 100%; vertical-align: bottom}
html, body{height: 100%; width: 100%; letter-spacing: 1.5px; font: 400 14px/22px "neue-haas-grotesk-display", sans-serif; background: #f3f3f3; color: #1b1c1e}

.video{position: absolute; right: 0; left: 0; top: 0; bottom: 0; min-height: 100%; object-fit: cover; height: 100vh}

.disable{overflow: hidden}

h1{font: 600 96px/82px balboa, sans-serif; letter-spacing: 1.5px; color: #F2E7D0; text-transform: uppercase; max-width: 500px; margin: 0 auto}

h2{font: 600 64px/66px balboa, sans-serif; letter-spacing: 1px; text-transform: uppercase; position: absolute; transform: rotate(270deg); right: -150px; bottom: 250px; width: 500px}
h2 span{font: 600 22px/22px "neue-haas-grotesk-display", sans-serif; color: #1b1c1e; padding: 0 0 0 10px}

h3{font: 600 50px/54px balboa, sans-serif; letter-spacing: 1px; color: #F2E7D0; text-transform: uppercase; padding: 0 40px 0 70px}
h4{font: 600 34px/40px balboa, sans-serif; letter-spacing: 1px; color: #f2e6cc; text-transform: uppercase; margin: 0 0 20px}

h5{font: 400 16px/20px "neue-haas-grotesk-display", sans-serif; text-transform: uppercase; text-align: right; letter-spacing: 1px}
h5 span{font-weight: 800}

h6{font: 600 16px/20px "neue-haas-grotesk-display", sans-serif; text-transform: uppercase}


p{font: 400 14px/24px "neue-haas-grotesk-display", sans-serif; margin: 0 0 20px}

:after{clear: both; content: ''; display: block}
/*.container{max-width: 1600px; padding: 0 40px; margin: 0 auto}*/

.block-bottom{position: fixed; height: 30px; background: #f7f7f7; width: 100%; z-index: 4; bottom: 0}
.block-right{position: fixed; background: #f7f7f7; width: 30px; z-index: 4; right: 0; height: 100vh}
.block-left{position: fixed; background: #f7f7f7; width: 30px; z-index: 4; height: 100vh}

header{position: fixed; width: 100%; z-index: 3; background: #f7f7f7; transition: 1s}

header .logo{float: left; margin: 20px 0 20px 40px; max-width: 200px}
header .menu{float: right; margin: 0 60px 0 0}

header .menu ul{list-style: none}
header .menu ul li{float: left}
header .menu ul li a{height: 80px; padding: 0 15px; text-decoration: none; display: block; color: #1b1c1e; font: 500 15px/80px "neue-haas-grotesk-display", sans-serif}

/*header .menu ul li a.active{font-weight: 600}*/

nav{background: #F2E7D0; overflow: hidden; opacity: 0; visibility: hidden; height: 100%; position: absolute; width: 100%; z-index: 2}

nav .container{width: 100%; max-width: 1100px; padding: 50px 0 0; margin: 0 auto; display: table; height: calc(100% - 50px)}

.show{opacity: 1; visibility: visible; transition: 1s; height: 100%; overflow-y: scroll; position: fixed}

nav ul{list-style: none; margin-left: -50px}
nav ul li:nth-of-type(odd){float: left; clear: both}
nav ul li:nth-of-type(even){float: right}

nav ul li:nth-of-type(1){margin-left: 0}
nav ul li:nth-of-type(3), nav ul li:nth-of-type(5){margin-left: 100px}
nav ul li:nth-of-type(7){margin-left: -50px}
nav ul li:nth-of-type(2), nav ul li:nth-of-type(4), nav ul li:nth-of-type(6){margin-right: 150px}
nav ul li:nth-of-type(8), nav ul li:nth-of-type(10){margin-right: 30px}

nav ul li:nth-of-type(9), nav ul li:nth-of-type(13){margin-left: 150px}
nav ul li:nth-of-type(12){margin-right: 190px}

nav ul li{position: relative}

nav ul li span{position: absolute; font: normal 500 20px/20px "neue-haas-grotesk-display", sans-serif; text-transform: capitalize; color: #1b1c1e; top: 3px; letter-spacing: .5px}


nav ul li:nth-of-type(1) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 128, 157) 0%, rgb(242, 165, 30) 100%)}
nav ul li:nth-of-type(2) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 165, 30) 0%, rgb(242, 128, 157) 100%)}
nav ul li:nth-of-type(3) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 165, 30) 0%, rgb(23, 98, 167) 100%)}
nav ul li:nth-of-type(4) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 165, 30) 0%, rgb(239, 73, 35) 100%)}
nav ul li:nth-of-type(5) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 165, 30) 0%, rgb(239, 73, 35) 100%)}
nav ul li:nth-of-type(6) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 128, 157) 0%, rgb(239, 73, 35) 100%)}
nav ul li:nth-of-type(7) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 128, 157) 0%, rgb(239, 73, 35) 100%)}
nav ul li:nth-of-type(8) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 231, 208) 0%, rgb(23, 98, 167) 100%)}
nav ul li:nth-of-type(9) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(239, 73, 35) 0%, rgb(242, 165, 30) 100%)}
nav ul li:nth-of-type(10) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(242, 165, 30) 0%, rgb(23, 98, 167) 100%)}
nav ul li:nth-of-type(11) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(23, 98, 167) 0%, rgb(242, 165, 30) 100%)}
nav ul li:nth-of-type(12) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(239, 73, 35) 0%, rgb(242, 165, 30) 100%)}
nav ul li:nth-of-type(13) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(23, 98, 167) 0%, rgb(242, 231, 208) 100%)}
nav ul li:nth-of-type(14) a{color: transparent; background-clip: text !important; background: linear-gradient(90deg, rgb(239, 73, 35) 0%, rgb(242, 128, 157) 100%)}


/*nav ul li:nth-of-type(1) a{color: transparent; background-clip: text !important; background: linear-gradient(180deg, rgb(240, 87, 66) 0%, rgb(181, 39, 19) 100%)}*/


nav ul li:nth-of-type(1) span, nav ul li:nth-of-type(2) span, nav ul li:nth-of-type(4) span, nav ul li:nth-of-type(6) span, nav ul li:nth-of-type(9) span, nav ul li:nth-of-type(11) span, nav ul li:nth-of-type(12) span, nav ul li:nth-of-type(13) span, nav ul li:nth-of-type(14) span{margin:0}
nav ul li:nth-of-type(3) span, nav ul li:nth-of-type(7) span{margin:0 0 0 -15px}
nav ul li:nth-of-type(5) span, nav ul li:nth-of-type(8) span, nav ul li:nth-of-type(10) span{margin:0 0 0 -25px}



nav ul li a{text-decoration: none; font: 600 150px/125px balboa, sans-serif; color: #1b1c1e; text-transform: uppercase; position: relative; float: left; background-clip: text !important; -webkit-background-clip: text !important}

main{padding: 0 0 30px}

.about{background-color:hsla(2,0%,100%,1); background-image: radial-gradient(at 47% 74%, hsla(215,81%,33%,1) 0px, transparent 50%), radial-gradient(at 49% 13%, hsla(0,95%,47%,1) 0px, transparent 50%), radial-gradient(at 90% 15%, hsla(36,85%,54%,1) 0px, transparent 50%), radial-gradient(at 90% 15%, hsla(36,85%,54%,1) 0px, transparent 50%), radial-gradient(at 0% 2%, hsla(39,59%,87%,1) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(39,59%,87%,1) 0px, transparent 50%), radial-gradient(at 84% 83%, hsla(344,81%,72%,1) 0px, transparent 50%), radial-gradient(at 84% 83%, hsla(344,81%,72%,1) 0px, transparent 50%), radial-gradient(at 74% 50%, hsla(344,81%,72%,1) 0px, transparent 50%); min-height: 100vh}

.about .container{padding: 200px 40px; width: calc(100% - 80px); display: table; height: calc(100vh - 200px); max-width: 1220px; margin: 0 auto}

.about .container .indent{position: relative; max-width: 650px; margin: 0 auto}

.about .container .blurb{position: absolute; max-width: 350px; bottom: -70px; left: 340px}
.about .container .blurb p{font: 500 16px/20px "neue-haas-grotesk-display", sans-serif; color: #f7f7f7}

.showreel{height: 100vh; width: 100%; text-align: center; display: table; position: relative}
.cell{display: table-cell; vertical-align: middle; width: 100%}


.contact{position: absolute; right: 70px; top: -120px; width: calc(100% - 120px)}

.profile{background: #F2E7D0}
.profile .info{position: absolute; right: 0; bottom: 30px; width: 50%}
.profile .info .photo{max-width: 380px; float: right; margin: 0 150px 0 0}

.profile .bio{float: left; width: 50%; height: calc(100vh - 50px); display: table; padding: 50px 0 0}


.socials{padding: 10px 0 0}
.socials ul{list-style: none}
.socials ul li a{display: block; text-decoration: none; color: #1b1c1e; text-align: right}

.slider .slick-arrow{display: block; height: 90px; width: 90px; position: absolute; right: -120px; bottom: 30px; z-index: 1; background: #fff url(assets/icon-menu-prev.svg) no-repeat; border: 0; text-indent: -9999px; cursor: pointer}
.slider .slick-next{right: -220px; background: #fff url(assets/icon-menu-next.svg) no-repeat}


.portfolio:nth-of-type(even) .slider .slick-arrow{display: block; height: 90px; width: 90px; position: absolute; left: -220px; bottom: 30px; z-index: 1; background: #fff url(assets/icon-menu-prev.svg) no-repeat; border: 0; text-indent: -9999px; cursor: pointer}
.portfolio:nth-of-type(even) .slider .slick-next{right: auto; left: -120px; background: #fff url(assets/icon-menu-next.svg) no-repeat}



.slider .slick-dots{list-style: none; bottom: 30px; position: absolute; width: 100%; text-align: center}
.slider .slick-dots li{display: inline-block}
.slider .slick-dots li button{font-size: 0; height: 10px; width: 10px; background: black; border-radius: 10px; margin: 0 5px; cursor: pointer; border: 0; opacity: 0.3}
.slider .slick-dots li.slick-active button{opacity: 1}

.portfolio{position: relative; background: #f3f3f3; margin: 0 auto; width: calc(100% - 60px)}
.slider{float: right; width: 75%}

.description{width: calc(25% - 60px); position: absolute; bottom: 140px; padding: 0 0 0 30px}
.description .title{transform: rotate(-90deg); width: 340px; float: right; margin: 0 -150px 160px 0; position: relative; top: 0}
.description p{text-align: right; clear: both}


.portfolio:nth-of-type(odd) .slider{float: left}
.portfolio:nth-of-type(odd) .description{right: 30px}
.portfolio:nth-of-type(odd) .description .title{margin: 0 0 160px -150px; float: left}
.portfolio:nth-of-type(odd) .description p{text-align: left}


.extras{background: #fff; min-height: 100vh; text-align: center}
.extras .container{width: calc(100% - 80px); display: table; max-width: 600px; margin: -50px auto 0; height: 100vh}
.extras p{font: 400 16px/24px "neue-haas-grotesk-display", sans-serif}


footer{color: #F2E7D0; background: #1b1c1e; padding: 20px; display: none}

footer .fineprint .tafensw{float: left; width: 30%}
footer .fineprint .tafensw img{max-width: 300px}

footer .fineprint .copyright{float: right; width: 70%; text-align: right}
footer .fineprint .copyright ul{list-style: none; float: right}
footer .fineprint .copyright ul li{float: left; height: 25px; line-height: 25px; margin: 12px 0; border-left: 1px solid #F2E7D0; padding: 0 10px}
footer .fineprint .copyright ul li:first-child{border: 0; padding-left: 0}
footer .fineprint .copyright ul li a{color: #F2E7D0; text-decoration: none}


#lean_overlay{position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; display: none}

.popup{display: none; width: 100%}
.popup img{width: 100%}
.popup-container{position: relative; overflow-y: scroll; height: 100vh}
.popup-wrapper{position: relative; background: #FCF3E1}

.showreel .popup-container{padding: 0 100px; background: rgba(0,0,0,0.8)}
.showreel .popup-wrapper{max-width: 1600px; margin: 100px auto}

.close{position: absolute; z-index: 1; color: #fff; bottom: -40px; left: 0; right: 0; margin: 0 auto; cursor: pointer}


@media(max-height: 999px) or (max-width: 1399px){
    nav .container{max-width: 1000px}
    nav ul{margin-left: 0}
    nav ul li a {font: 600 130px/110px balboa, sans-serif}
    nav ul li span{font: normal 500 18px/18px "neue-haas-grotesk-display", sans-serif}
    nav ul li:nth-of-type(12){margin-right: 135px}
}

@media(max-height: 899px)  or (max-width: 1299px){
    nav .container{max-width: 900px}
    nav ul li a {font: 600 115px/100px balboa, sans-serif}
    nav ul li span{font: normal 500 14px/14px "neue-haas-grotesk-display", sans-serif}
    
    nav ul li:nth-of-type(3) span, nav ul li:nth-of-type(7) span{margin:0 0 0 -10px}
    nav ul li:nth-of-type(5) span, nav ul li:nth-of-type(8) span, nav ul li:nth-of-type(10) span{margin:0 0 0 -15px}
    
}

@media(max-height: 899px) or (max-width: 1199px){
    nav .container{max-width: 800px}
    nav ul li a {font: 600 100px/82px balboa, sans-serif}
    nav ul li span{font: normal 500 14px/14px "neue-haas-grotesk-display", sans-serif}
/*    nav ul li:nth-of-type(12){margin-right: 135px}*/
}




@media(max-width: 1399px) or (max-height: 799px){

/*    nav ul li a{font: 600 130px/110px balboa, sans-serif}*/
    
    .profile .info .photo{max-width: 300px}
    h3{font: 600 38px/38px balboa, sans-serif; padding: 0 30px 0 60px}
/*    h6{width: 58%}*/
    
}

@media(max-width: 1199px){
    
    h6{text-align: right}
    
    .slider{float: none !important; width: 100%}
    .description{width: calc(100% - 60px); position: relative; bottom: 0; padding: 20px 0 20px 30px; min-height: 300px}
    .description p{text-align: left; position: absolute; width: calc(100% - 150px)}
    
    .portfolio:nth-of-type(odd) .description {right: 0}
    .portfolio:nth-of-type(odd) .description p{right: 40px}
    
    .description .title{top: 160px}
    
/*    .slider .slick-prev{right: 110px; bottom: -210px}*/
    
    .portfolio:nth-of-type(odd) .slider .slick-prev{right: auto; left: 110px; bottom: -210px}
    .portfolio:nth-of-type(odd) .slider .slick-next{right: auto; left: 210px; bottom: -210px}
    
    .portfolio:nth-of-type(even) .slider .slick-prev{left: auto; right: 210px; bottom: -210px}
    .portfolio:nth-of-type(even) .slider .slick-next{left: auto; right: 110px; bottom: -210px}
}

@media(max-width: 1023px){
    
    h3{padding: 0 60px}
    
    nav .container{max-width: 300px; padding: 120px 20px 60px}
    nav ul li a{font: 600 100px/84px balboa, sans-serif}
    
    nav ul li:nth-of-type(7){margin-left: 0}
    
    .about{background-color:hsla(2,0%,100%,1); background-image: radial-gradient(at 11% 83%, hsla(215,81%,33%,1) 0px, transparent 50%), radial-gradient(at 11% 14%, hsla(0,95%,47%,1) 0px, transparent 50%), radial-gradient(at 90% 15%, hsla(36,85%,54%,1) 0px, transparent 50%), radial-gradient(at 88% 84%, hsla(344,81%,72%,1) 0px, transparent 50%); min-height: 100vh}

    
    .profile .info{width: 100%; position: relative; min-height: 100vh}
    .profile .info .photo{position: absolute; right: 0; bottom: 0}
    .contact{top: auto; bottom: 420px}  
    
    .profile .bio{width: 100%; float: none; max-width: 100%; height: auto; min-height: 100vh}

}

@media(max-width: 767px){
    
    h1{font: 600 38px/38px balboa, sans-serif}
    h2{font: 600 54px/56px balboa, sans-serif}
    

    
    .about .container .indent{max-width: 350px}
    
    .about .container{padding: 140px 40px 100px; height: auto}
    .about .container .blurb{position: relative; max-width: 350px; bottom: 0; left: 0; margin: 50px auto}
    
    nav .container{max-width: 300px; padding: 120px 20px}
    nav ul li a{font: 600 80px/70px balboa, sans-serif}
    
    nav ul li:nth-of-type(1), nav ul li:nth-of-type(3), nav ul li:nth-of-type(5){margin-left: 20px}
    nav ul li:nth-of-type(2), nav ul li:nth-of-type(4), nav ul li:nth-of-type(6){margin-right: 40px}
    nav ul li:nth-of-type(9), nav ul li:nth-of-type(13){margin-left: 40px}
    nav ul li:nth-of-type(12){margin-right: 50px}    

    .description{min-height: 300px}
    .description .title{top: 60px}
    
    .portfolio:nth-of-type(2n+1) .description .title{top: 70px}
    
    h6{width: 75%}
    
    footer{font: 400 12px/22px "neue-haas-grotesk-display", sans-serif}
    footer .fineprint .tafensw{float: none; width: 100%; margin: 0 0 20px}
    footer .fineprint .copyright{float: none; width: 100%; text-align: left}
    footer .fineprint .copyright ul{float: none}
    footer .fineprint .copyright ul li:nth-child(3){display: none}
    
    .showreel .popup-container{padding: 0 40px}
}

@media(max-width: 599px){

    header{background: #fff}
    .block-right, .block-left{width: 20px; background: #fff}
    .block-bottom{height: 20px; background: #fff}
    
    .description{width: calc(100% - 40px); padding: 20px; margin: -40px 0 0}
    .description .title{top: 110px}
    
    .portfolio:nth-of-type(2n+1) .description .title{top: 110px}
    
    header .logo{margin: 23px 0 22px 5px; max-width: 160px}
    header .menu{margin: 0 20px 0 0}
    header .menu ul li:first-child{display: none}
    header .menu ul li a{padding: 0 10px; font-size: 13px}
    
    h2{right: -190px; bottom: 230px}
    
    h3{padding: 0 40px; font: 600 34px/34px balboa, sans-serif}
    
    
    
    .profile .bio{min-height: 650px}
    
    
    .profile .info{min-height: 650px}
    .profile .info .photo{right: 0; bottom: 0; margin: 0 90px -10px 0; max-width: 220px}
    .contact{bottom: 380px; right: 40px; width: calc(100% - 80px)}
    
    .portfolio{width: calc(100% - 40px)}
    
    .description .title{float: right; margin: 0; position: relative; right: -155px}
    .description p{position: relative; width: calc(100% - 60px); float: left}
    .portfolio:nth-of-type(odd) .description .title{margin: 0; right: -155px; float: right}
    .portfolio:nth-of-type(odd) .description p{right: auto}
    
    nav .container{max-width: 200px; padding: 120px 0 60px; height: calc(100% - 180px)}
    nav ul li a{font: 600 54px/50px balboa, sans-serif}
    nav ul li:nth-of-type(14){margin-right: 30px}
    
    nav ul li:nth-of-type(3) span, nav ul li:nth-of-type(7) span{margin:0 0 0 -5px}
    nav ul li:nth-of-type(5) span, nav ul li:nth-of-type(8) span, nav ul li:nth-of-type(10) span{margin:0 0 0 -5px}
    
    .showreel .popup-container{padding: 100px 20px 0}
    
}