*{margin: 0; border: 0; padding: 0; outline: 0}
body{background: #000001; color: #fff; font: 18px/32px 'aaux_nextmedium'; letter-spacing: 0.5px}
img{max-width: 100%; vertical-align: bottom}
video{max-width: 100%; vertical-align: bottom}

span{color: #fff200}

h1{font: 80px/88px 'nasalizationregular'; text-transform: uppercase; margin: 20px 0}
h2{font: 34px/44px 'nasalizationregular'; margin: 0 0 20px}
h3{font: 28px/38px 'nasalizationregular'; text-transform: uppercase; margin: 0 0 20px}
h4{font: 26px/34px 'nasalizationregular'; margin: 0 0 40px}
h5{font: 18px/30px 'nasalizationregular'}

p{margin: 0 0 20px}

.disable{overflow: hidden}

.p1{position: absolute; top: 40%; width: 100%; margin: 0 auto; text-align: right; left: 0; right: 0; max-width: 1200px}
.p2{position: absolute; top: 30%; width: 100%; margin: 0 auto; left: -150px; right: 0; max-width: 1200px}
.p3{position: absolute; bottom: 0; height: 100px; overflow: hidden; width: 100%; margin: 0 auto; left: 0; right: 0; max-width: 600px; text-align: right}

.internal{background: url(assets/plus-small.svg) center left no-repeat; padding: 0 0 0 60px !important; height: 60px; display: inline-block}


.spotify{position: fixed; bottom: 40px; left: 40px; z-index: 1; background: #eee; padding: 5px; border-radius: 4px; width: 230px}
.spotify a{text-decoration: none}
.spotify img{float: left; width: 50px; border-radius: 3px}

.spotify div{margin: 0 10px; display: block; float: left; width: 140px}

.spotify span{color: #000; float: left}
.spotify .heading{font: 16px/22px 'aaux_nextbold'; padding: 5px 0 0}
.spotify .description{font: 12px/16px 'aaux_nextmedium'}

.container{margin: 0 auto; position: relative; padding: 0 40px}
.container:after{clear: both; display: block; content: ''}

header{position: fixed; top: 0; width: 100%}
header .container{padding-top: 30px}
header .logo{max-width: 220px; float: left}
header .button{float: right; margin: 10px 0 0; position: relative; z-index: 8; height: 80px; width: 80px}

header .button .menu{position: absolute; display: block}
header .button .close{position: absolute; display: none}

header .button.active .menu{display: none}
header .button.active .close{display: block}


header .name{float: left; margin: 30px 0 0 60px}
header .name h4{margin: 0; float: left}

header .links{float: right; margin: 25px 25px 0 0}
header .links ul{list-style: none}
header .links ul li{float: left; transform: rotate(-30deg); margin: 0 10px}

header .links ul li a{font: 16px/32px 'nasalizationregular'; text-decoration: none; color: #fff; padding: 5px 0; display: block; transition: 0.5s}

header .links ul li a:hover{color: #fff200; transition: 0.5s}
header .links ul li.current a{color: #fff200}


main{background: #000; position: relative; margin: 160px 0 0}

.intro{background: #fff200; color: #000}
.intro .left{float: left; width: 70%}
.intro .right{float: right; width: 25%; padding: 200px 5% 0 0; max-width: 320px}
.intro .right p{font: 20px/34px 'nasalizationregular'; margin: 0 0 40px}
.intro .right a{background: url('assets/plus-small-black.svg') left center no-repeat; height: 60px; display: inline-block; padding: 0 0 0 60px; font: 16px/58px 'nasalizationregular'; text-decoration: none; color: #000; position: relative; left: -15px}
/*.intro .right a:hover{width: 180px; transition: 0.5s}*/
.intro .right a:after{position: absolute; width: 0; height: 2px; content: ''; background: #000001; left: 60px; top: 42px; transition: 0.3s ease}

.intro .right a:hover:after{width: calc(100% - 60px); transition: 0.3s ease}


.about{padding: 150px 0; color: #fff; background: url('assets/b1.jpg') center -100px no-repeat}
.about .container{text-align: center}
.about p{font: 20px/34px 'aaux_nextmedium'; max-width: 600px; margin: 0 auto 20px}
.about p:nth-of-type(2){max-width: 350px}
.about a{font: 16px/58px 'nasalizationregular'; color: #fff; text-decoration: none; padding: 0 5px; transition: 0.5s}
.about a:hover{color: #fff200; transition: 0.5s}

.showcase{text-align: center; padding: 0 0 40px}
.showcase .container{max-width: 1200px}

.gallery{background: url(assets/b1.jpg) center -100px}
.gallery main{background: url(assets/b1.jpg) center -250px}

.profiles{margin: 50px auto; text-align: center}
.profiles ul{list-style: none; margin: 60px 0 0}
.profiles ul li{width: calc(25% - 60px); float: left; margin: 0 30px 40px}
.profiles ul li a{display: block; text-align: center; text-decoration: none; color: #fff; transition: 0.5s}
.profiles ul li a:hover{color: #fff200; transition: 0.5s}

.profiles ul li img{width: 100%}

.profiles ul li a .photo{position: relative}

.profiles ul li a .photo .initial{position: absolute; opacity: 1; transition: 0.5s}
.profiles ul li a:hover .photo .initial{opacity: 0; transition: 0.5s}

.profiles ul li a .name{font: 16px/28px 'nasalizationregular'; display: block; margin: 20px 0 0}
.profiles ul li a .name div{display: inline}

nav .collapse{position: absolute; z-index: 11; top: 40px; right: 40px}

nav .half .links{position: absolute; bottom: 45px}

nav .half:nth-of-type(1) ul{list-style: none; font-size: 14px; line-height: 22px}
nav .half:nth-of-type(1) ul li{float: left; border-right: 1px solid #939598; padding: 0 10px}
nav .half:nth-of-type(1) ul li:last-child{border: 0}
nav .half:nth-of-type(1) ul li a{color: #939598; text-decoration: none; transition: .5s}
nav .half:nth-of-type(1) ul li a:hover{color: #fff200; transition: .5s}

nav .half .social{position: absolute; bottom: 40px; right: 60px}
nav .half .social ul li{border: 0; padding: 0}

nav{position: fixed; top: 0; width: 100%; height: 100vh; z-index: 6; opacity: 0; visibility: hidden; transition: 0.5s}
nav .half{width: 65%; height: 100%; float: left; background: #000001; text-align: center}
nav .half:nth-of-type(2){background: #fff200; text-align: left; width: 35%}

.show{opacity: 1; visibility: visible; transition: 0.5s}

nav .half:nth-of-type(2) ul{list-style: none; margin: 0 0 0 -20px}
nav .half:nth-of-type(2) ul li{transform: rotate(-30deg); clear: both; max-width: 200px}
nav .half:nth-of-type(2) ul li a{font: 16px/32px 'nasalizationregular'; text-decoration: none; color: #000001; padding: 5px 0; display: block; position: relative; float: left}
nav .half:nth-of-type(2) ul li:last-child a{font-weight: bold}

nav .half:nth-of-type(2) ul li a:after{position: absolute; width: 0; height: 2px; content: ''; background: #000001; left:0; top: 35px; transition: 0.3s ease}

nav .half:nth-of-type(2) ul li:hover a:after{width: 100%; transition: 0.3s ease}

.table{display: table; height: 100%; width: 100%}
.cell{display: table-cell; vertical-align: middle; padding: 0 60px; position: relative}

.project{padding: 100px 60px; background: #fff; color: #000001}
.project p{max-width: 800px}

footer{position: fixed; bottom: 0; width: 100%; height: 100px; z-index: 5; display: none}

footer ul{list-style: none; position: absolute; margin: 30px 0 0; display: none; z-index: 6}
footer ul li{float: left; transform: rotate(-30deg); margin: 0 10px}
footer ul li a{font: 16px/32px 'nasalizationregular'; text-decoration: none; color: #fff; padding: 5px 0; display: block}
footer ul li.current a{color: #fff200}

.profile main .container{padding: 0}

.view-profile{background: url(assets/plus.svg) center left no-repeat; padding: 0 0 0 80px; float: left; height: 60px; text-decoration: none; color: #fff; margin: -10px 0 0 10px; font: 16px/54px 'nasalizationregular'; transition: 0.5s}
.view-profile:hover{color: #fff200; transition: 0.5s}

.view{width: calc(100% - 80px); text-align: right; position: absolute; bottom: -80px}
.view a{width: 190px; display: inline-block; white-space: nowrap; overflow: hidden; margin: 0 0 -10px}
.view a span{float: left; font: 16px/74px 'nasalizationregular'; width: 0;
overflow: hidden; transition: 0.5s}
.view a span.preview, .view:hover a span{width: 105px; transition: 0.5s}

aside{color: #fff; height: 100vh; width: 100%; max-width: 1300px; z-index: 5; display: none}
aside .container{background: #939598; margin: 0 40px; padding: 80px 80px 50px}


aside .close{position: absolute; right: 40px; top: 40px; transform: rotate(45deg); cursor: pointer}


aside .left{float: left; width: 25%}
aside .left img{width: 100%}
aside .left .brand img{max-height: 180px; margin: 40px auto}


aside .right{float: right; width: 66.66%}

aside .right ul{list-style: none; margin: 60px 0 0}
aside .right ul li{width: 46%; float: left; margin-right: 4%}

aside .contact{clear: both}
aside .contact ul{list-style: none}
aside .contact ul li{float: left; width: calc(33.33% - 35px)}

aside .contact ul li a{color: #fff; text-decoration: none; position: relative; transition: 0.5s}
aside .contact ul li a:hover{color: #fff200; transition: 0.5s}

aside .contact ul li{background: url(assets/phone.svg) center left no-repeat; padding: 0 0 0 35px}
aside .contact ul li:first-child{background: url(assets/email.svg) center left no-repeat}
aside .contact ul li:nth-child(3){background: url(assets/web.svg) center left no-repeat}

.references{height: 80px; padding: 0 0 100px}

.references .links{float: left}
.references .links ul{list-style: none; font-size: 14px; line-height: 22px; padding: 15px 0}
.references .links ul li{float: left; border-right: 1px solid #939598; padding: 0 10px}
.references .links ul li:last-child{border: 0}
.references .links ul li a{color: #939598; text-decoration: none; transition: .5s}
.references .links ul li a:hover{color: #fff200; transition: .5s}

.references .social{float: right}
.references .social ul{list-style: none; padding: 10px 0}
.references .social ul li{float: left}

.acknowledgements .container{max-width: 420px; padding: 80px 40px 160px}
.acknowledgements ul{list-style: none; float: left; width: 50%; margin: 80px 0 0}
.acknowledgements ul li{color: #fff200}

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

@media(max-width: 1699px){
    .intro .right{padding: 150px 2.5% 0}   
}

@media(max-width: 1549px){
    .intro .right{padding: 120px 2.5% 0}   
}

@media(max-width: 1399px){
    .intro .right{padding: 80px 2.5% 0}
    .intro .right p{margin: 0 0 20px}
    .intro .right p{font: 16px/30px 'nasalizationregular'}
}

@media(max-width: 1199px){
    .profiles ul li{width: calc(33.33% - 60px)}
    
    .intro .left{width: 60%}
    .intro .right{width: 35%; padding: 30px 2.5% 0}
    
     header .links{display: none}
    
    footer{display: block}
    footer ul{display: block}
    
    footer{background: #000}
    .view{bottom: -90px}
    
    .view-profile{display: none}
    
    
}

@media(max-width: 1023px){
    
    .cell{padding: 0 20px}
    
    nav .half{width: 55%}
    nav .half:nth-of-type(1) ul li{padding: 0 5px}
    
    nav .half:nth-of-type(2){width: 45%}
    
    nav .half .links{bottom: 90px}
    nav .half .social{right: auto; left: 20px}
    
/*    header .name{display: none}*/
    
   
    
    
}

@media(max-width: 999px){
    .profiles ul li{width: calc(50% - 60px)}
    
    aside{top: 0 !important; background: #939598}
    
    aside .container{padding: 100px 40px; margin: 0}
    aside .close{right: 20px; top: 20px}
    
    aside .right ul{margin: 0}
    
    aside .contact ul li{width: calc(100% - 35px)}
    
    .intro .right{float: none; width: 100%; padding: 60px 0 0}
    .intro .right p{margin: 0 0 20px; font: 20px/34px 'nasalizationregular'}
/*    .intro .right a{width: 180px}*/
    
    .intro .left{float: none; width: 100%}
    
    .p1{top: 55%}
    .p2{top: 45%}
    
}

@media(max-width: 767px){
    
    .profile main{padding: 0 0 100px}
    
    nav .half:nth-of-type(1){display: none}
    nav .half:nth-of-type(2){width: 100%}
    
    .cell{padding: 0 40px}
    
/*
    header .links{display: none}
    
    footer ul{display: block}
    
    footer{background: #000}
    .view{bottom: -90px}
*/
    
    aside{height: 100vh; overflow: scroll}
    aside .close{position: fixed}
    
    aside .left{float: none; width: 100%; max-width: 375px}
    aside .right{float: none; width: 100%}
    aside .right ul li{float: none; width: 100%; margin-right: 0}
    
}

@media(max-width: 699px){
    
    .spotify{bottom: 0; left: 0; width: 100%; border-radius: 0; height: 70px}
    .spotify img{margin: 10px}
    .spotify div{padding: 10px 0}
    
    .container{padding: 0 20px}
    
    .acknowledgements .container{padding: 80px 20px 160px}
    
    .profiles .container{padding: 0 5px}
    .profiles ul li{width: calc(50% - 20px); margin: 0 10px 40px}
    .profiles ul li a .photo{border-radius: 50px}
    .profiles ul li a .name div{display: block}
    
    .project{padding: 60px 20px}
        
    .view{width: calc(100% - 40px)}
    
    nav .collapse{right: 20px}
    
    .p1{top: 65%}
    .p2{top: 35%}
    .p3{max-width: 300px; bottom: -50px}
    
    .view a span{font-size: 0}
    
    .references{padding: 0 0 140px}
    
    header .name{display: none}
}

@media(max-width: 599px){
    .references .links{float: none; height: 50px}
    .references .links ul li:first-child{display: none}
    .references .social{float: none; padding: 0 0 50px}
}

@media(max-width: 499px){
    .view{margin: 0 0 0 20px}
    header .button{margin: 10px -20px 0}
    aside .container{padding: 100px 20px}
    aside .close{right: 0; top: 0}
    .about h3 span{display: block}
    nav .collapse{right: 0}
    footer ul li{margin: 0}
}

@media(max-height: 799px){
    nav .half:nth-of-type(2) ul {height: 80vh; overflow: scroll}
}

@media(max-height: 849px) and (min-width: 769px){
    aside{top: 20px !important}
}

@media(max-height: 799px) and (min-width: 769px){
    aside{top: 0 !important; height: 100vh; overflow: scroll}
    #lean_overlay{background: #939598; opacity: 1 !important}
}