@charset "UTF-8";
/* CSS Document */

* {	/*--make all to 0 as default--*/
	padding: 0;
	margin: 0;
	outline:none;
}

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

html, body {
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

@font-face {
    font-family: 'apercubold';
    src: url('fonts/apercu_bold-webfont.eot');
    src: url('fonts/apercu_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/apercu_bold-webfont.woff2') format('woff2'),
         url('fonts/apercu_bold-webfont.woff') format('woff'),
         url('fonts/apercu_bold-webfont.ttf') format('truetype'),
         url('fonts/apercu_bold-webfont.svg#apercubold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercumedium';
    src: url('fonts/apercu_medium-webfont.eot');
    src: url('fonts/apercu_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/apercu_medium-webfont.woff2') format('woff2'),
         url('fonts/apercu_medium-webfont.woff') format('woff'),
         url('fonts/apercu_medium-webfont.ttf') format('truetype'),
         url('fonts/apercu_medium-webfont.svg#apercumedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercuregular';
    src: url('fonts/apercu-webfont.eot');
    src: url('fonts/apercu-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/apercu-webfont.woff2') format('woff2'),
         url('fonts/apercu-webfont.woff') format('woff'),
         url('fonts/apercu-webfont.ttf') format('truetype'),
         url('fonts/apercu-webfont.svg#apercuregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family:'apercuregular', sans-serif;
	width:100%;
	height: 100%;
	background-color: #F4F4F4;
	margin:0;
	font-size:1em;
	font-weight:regular;
    text-align: left;		
}

h1 {
	font-family:'apercuregular', sans-serif;
	font-size:80px;	
	font-weight:normal;
	line-height:1;
	padding-bottom:5%;
}

h2 {
	font-family:'apercumedium', sans-serif;
	font-size:60px;
	font-weight:normal;	
}

h3 {
	font-size:40px;
	font-weight:normal;
	font-family:'apercumedium', sans-serif;	
}

#description {
	font-family:'apercuregular', sans-serif;
	font-weight:regular;
	width:70%;	
}

p.large {
	font-size:30px;
}

p.small {
	font-size:20px;
}

p.credit {
	font-size:18px;
	width:100%;
	text-align:center;
	float:left;
	padding-top:3%;
}

a {
	text-decoration: none;
	font-weight:normal;
    background-image: linear-gradient(to right, blue 75%, blue 75%);
    background-position: 0 1.07em;
    background-repeat: repeat-x;
    background-size: 8px 2px;	
    color:#000;
}

a:hover {
   	cursor:pointer; 
	width: 100%;
}

.tags {
	font-size:12px;
	letter-spacing:4px;
	font-weight:400;
	text-transform:uppercase;
	padding-bottom:3%
}


a:visited {
	color:#000;
}

h2 a:hover {
   	cursor:pointer; 	
}

img {
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

video {
	vertical-align:bottom;	
}

#intro {
	z-index:1;
	letter-spacing:-1px;
	font-family: 'apercubold', sans-serif;
	font-weight:normal;	
	color:#000;
	height:95vh; 
    -webkit-animation: fadein 2s, rise 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s, rise 1s; /* Firefox < 16 */
        -ms-animation: fadein 2s, rise 1s; /* Internet Explorer */
         -o-animation: fadein 2s, rise 1s; /* Opera < 12.1 */
            animation: fadein 2s, rise 1s;        
 	position:relative; 
	cursor: -webkit-image-set(url('images/cursor.png') 1x,url('images/cursor_2x.png') 2x) 8 16,auto;
	background: url('images/slab.svg') no-repeat center center;
	background-size: auto 60%;
	
}

#intro h1 {
	top:31%;
	padding-left:6%;
  	position:absolute;
    text-align:center;
    width:88%;
    font-size:100px;
    z-index:1;
    animation-delay:3s;
    font-weight:100;
    font-family:'apercuregular', sans-serif;
    -webkit-animation: fadein 2s, rise 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s, rise 1s; /* Firefox < 16 */
        -ms-animation: fadein 2s, rise 1s; /* Internet Explorer */
         -o-animation: fadein 2s, rise 1s; /* Opera < 12.1 */
            animation: fadein 2s, rise 1s;        
}

#intro p.small {
	width:100%;
	top:33%;
	padding-left:10%;	
    -webkit-animation: rise 0.5s;
    text-align:left;
    position:absolute;
}

#project_intro {
	padding-top:15%;
	padding-bottom:10%;	
	width:60%;
	height:200px;
	padding-left:20%;
	padding-right:20%;      
 	position:relative;
 	top:0px; 
 	text-align:center;
 	-webkit-animation: fadein 2s, rise 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s, rise 1s; /* Firefox < 16 */
        -ms-animation: fadein 2s, rise 1s; /* Internet Explorer */
         -o-animation: fadein 2s, rise 1s; /* Opera < 12.1 */
            animation: fadein 2s, rise 1s; 
}

#project_intro h3 {
	top:0px;
	text-align: center;
	
}

#intro a h1:hover {
	cursor: -webkit-image-set(url('images/cursor.png') 1x,url('images/cursor_2x.png') 2x) 8 16,auto
	text-decoration:none;
}

header {
	font-size:20px;
	z-index:3;
	width:88%;
	padding:6%;
	padding-bottom:2%;
	padding-top:2%;
	position:fixed;
	-webkit-transition: top 0.4s ease-in-out;  /* Safari, Chrome and Opera > 12.1 */
       -moz-transition: top 0.4s ease-in-out;  /* Firefox < 16 */
        -ms-transition: top 0.4s ease-in-out;  /* Internet Explorer */
         -o-transition: top 0.4s ease-in-out;  /* Opera < 12.1 */
            transition: top 0.4s ease-in-out;                  
    top:0px;
    
}

header img {
	height: 15px;
    padding-right: 4px;
}

header a {
    background-image: none;
    text-decoration:none;
    color:#000;
}

.header_progress {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: none;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 2px;
  background: #F4F4F4;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 2px;
  background: #FFA6B9;
  width: 0%;
}

.nav-up {
    top: -80px;
}

.nav-down-light {
	background-color:#F4F4F4;
	color:#000;
    -webkit-animation: dropdown 0.5s ease-in-out;  /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: dropdown 0.5s ease-in-out;  /* Firefox < 16 */
        -ms-animation: dropdown 0.5s ease-in-out;  /* Internet Explorer */
         -o-animation: dropdown 0.5s ease-in-out;  /* Opera < 12.1 */
            animation: dropdown 0.5s ease-in-out; 
            opacity:1;

}

.nav-down-dark {
	color:#fff;	
	position:absolute;
}

.nav-down-dark a {
	color:#fff;
}

#info {
	float:right;
}

#content {
	padding-left:6%;
	padding-right:6%;            
    padding-bottom:4%; 
    padding-top:1%; 
    top:0px;
    margin-top:-5%; 
    z-index:3; 
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;           		
}


.block_large {
 	-webkit-animation: rise 0.5s;  /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: rise 0.5s;  /* Firefox < 16 */
        -ms-animation: rise 0.5s;  /* Internet Explorer */
         -o-animation: rise 0.5s;  /* Opera < 12.1 */
            animation: rise 0.5s;   
	float:left;
	padding-top:2%;
}

.block_small_left {
	width:49%;
	z-index:2;
	margin-right:2%;
	margin-top:2%;	
	position:relative;
	float:left;	
	display:block;	
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
}

.block_small_right {
	text-align: center;
	z-index:2;	
	width:49%;
	margin-top:2%;
	position:relative;
	float:right;	
	min-height:10%;	
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;		

}

.block_small_left a {
	background-image:none;
	background-size:0px;
}

.block_small_right a {
	background-image:none;
}


.block_large img {
	width:100%;	
   vertical-align:bottom;	
}

.block_small_left img {
	width:100%;
	background: url('images/empty_state.svg') no-repeat center center;
	background-size: 100%;	
	background-color:#000;
   vertical-align:bottom;	
}

.block_small_right img {
	width:100%;
	background: url('images/empty_state.svg') no-repeat center center;
	background-size: 100%;	
	background-color:#000;	
   vertical-align:bottom;		
}

.block_large video {
	width:100%;
}

.block_small_left video {
	width:100%;
}

.block_small_right video {
	width:100%;
}

.block_large iframe {
	width:100%;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_large {
    float: left;
    width: 100%;
    padding-top: 2%;
}

.video_small_left {
    float: left;
    width: 49%;
    padding-top: 2%;
}

.video_small_right {
    float: right;
    width: 49%;
    padding-top: 2%;
}

#description {
	padding:15%;
	text-align:center;
	font-size:25px;
	float:left;
	color:#000;
}

#credits {
	padding-top:3%;
}

#credits p {
	display:inline;
	padding:3%;
}

.hover_state {
	z-index:2;
	text-align:center;	
	color:#fff;
	opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    float:left;   
    cursor: -webkit-image-set(url('images/cursor_plus.png') 1x,url('images/cursor_plus_2x.png') 2x) 8 16,auto;
}

video {
	z-index:1;
	opacity:1;
}

.hover_state h3 {
	text-align:center;
	padding-top:30%;
	line-height:1;
	padding-bottom:2%;
	padding-left:2%;
	padding-right:2%;
	
}

.hover_state:hover {
	opacity:1;
	-webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in; 
    /* background: url('images/slab.svg') no-repeat center center; */
  	background-size: 200px; 	
  	background-color: rgba(0,0,0,1);    
}

#contact {
	height:350px;
	padding-top:200px;
	padding-bottom:3%;
	text-align:center;	
	position:relative;
	float:left;
	width:100%;		
}

#contact a {
	color:#000;	
}

#contact a:hover{
	background-image: linear-gradient(to right, #FFA6B9 75%, #FFA6B9 75%);
}

#social_icons {
	padding-top:3%;
	background-image: none;
}

.social_icon {
	padding:1%;
    transition: fill 0.3s ease;	
}

.social_icon:hover {
	fill:blue;
	background-image: none;
}

#social_icons a {
	text-decoration:none;
	background-image: none;	
}

#social_icons a:hover {
	text-decoration:none;
	background-image: none;	
}

#footer {
	padding-bottom:2%;
	text-align:center;
	float:left;
	width:100%;
}

.underline {
  background-image: linear-gradient(to right, blue 75%, blue 75%);
  background-position: 0 1.07em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}


ul.nav li {
	display: inline-block;
	cursor:pointer;
	position:relative;
}

.nav {
	float:right;
}

.nav a {
	margin-left:30px;
}


        /* Style for overlay and box */
        
        #about_intro img {
        	animation: rotation 2s infinite linear;
        }
         
        #about_intro {
        	width:100%;
        	text-align:center;
        	height:95vh;
			position:relative;		
			color:#fff;
        }
        
        #about_intro h1 {
        	top:40%;
			padding-left:6%;
  			position:absolute;
    		text-align:center;
    		width:88%;
    		letter-spacing:-2px;
    		-webkit-animation: fadein 2s, rise 1s; /* Safari, Chrome and Opera > 12.1 */
      		   -moz-animation: fadein 2s, rise 1s; /* Firefox < 16 */
        		-ms-animation: fadein 2s, rise 1s; /* Internet Explorer */
                 -o-animation: fadein 2s, rise 1s; /* Opera < 12.1 */
                    animation: fadein 2s, rise 1s; 
		}
        
        #about_text {
        	margin-top:-12%;
        	width:70%;
        	margin-left:15%;
        	color:#fff;
        	padding-bottom:15%;
    		-webkit-animation: fadein 2.5s, rise 2s; /* Safari, Chrome and Opera > 12.1 */
      		   -moz-animation: fadein 2.5s, rise 2s; /* Firefox < 16 */
        		-ms-animation: fadein 2.5s, rise 2s; /* Internet Explorer */
                 -o-animation: fadein 2.5s, rise 2s; /* Opera < 12.1 */
                    animation: fadein 2.5s, rise 2s;         	
        }
        		
        #about_text h3 {
        	padding-bottom:6%;
        	color:#fff;
        }
                
        a.activator {
            cursor:pointer;
        }
        
        .overlay{
            background-color: #000;
            color:#fff;
            opacity:1;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:5;
            float:left;
            overflow-y: scroll;
            position:fixed;
            cursor: -webkit-image-set(url('images/cursor_close.png') 1x,url('images/cursor_close_2x.png') 2x) 8 16,auto;
            
        }
        
        #about_text a {
			text-decoration:none;
			background-image: none;	
			fill:#fff;
			color:#FFA6B9;
		}

#archive {
	float:left;
	position:static;
	width:100%;
	text-align:center;
	z-index:10;
}

#archive h3 {
	padding-bottom:3%;
	padding-top:3%;
	border-bottom:1px solid #D6D6D6;
	z-index:10;
} 

#archive h3 a{
	background-image:none;
	color:#000;
	z-index:10;
}

#next-prev {
	float:left;
	width:100%;
	text-align:center;
	padding-top:6%;
	padding-bottom:6%;
	border-bottom:1px solid #D6D6D6;	
}

#next-prev h3 {
	padding-bottom:0%;
	padding-top:0%;
} 

#next-prev .tags {
	padding-bottom:1%;
	padding-top:0%;
}

#next-prev img {
	height:20px;
	padding-left:10px;
} 

#next-prev h3 a{
	background-image:none;
	color:#000;
} 
 
#animation_wrapper {
	float:left;
	position:absolute;
}
 
#lottie {
            background-color:yellow;
            height:100%;
            width:100%;
            text-align: center;
            opacity: 1;
            top:0%;
            z-index:0;
}

       
/* Style for overlay and box end*/  

/* X-Large Desktop styling */
@media (max-width: 2400px) {
	h1 {font-size:100px;}
	h2 {font-size:80px;}
	h3 {font-size:50px;}
	header {font-size:24px;} 
	header img {height:17px;}	
	#description {font-size:30px; line-height:1.3}
	.tags {font-size:16px;}
	#project_intro {width:80%; padding-left:10%; padding-right:10%; padding-top:15%; padding-bottom:15%;}
	#next-prev img {height:26px;}
}

/* Large Desktop styling */
@media (max-width: 1400px) {
	h1 {font-size:100px;}
	h2 {font-size:60px;}
	h3 {font-size:40px;}
	header {font-size:20px;} 
	header img {height:15px;}
	.tags {font-size:12px;}
	#description {font-size:24px; line-height:1.3}
	#project_intro {width:60%; padding-left:20%; padding-right:20%; padding-top:15%; padding-bottom:15%;}
	#animation_wrapper {width:43%; height:75%; top:15%; left:51%;}
	#next-prev img {height:20px;}
}

/* Tablet styling */
@media (max-width: 1024px) {
	h1 {font-size:100px;}
	h2 {font-size:50px;}
	h3 {font-size:30px;}
	#content {margin-top:-10%; padding-left: 4%; padding-right: 4%;} 	
	header {width:92%; padding:4%;}
	#intro h1 {font-size:90px; padding-left: 4%}
	#next-prev img {height:18px;}	
}
	
/* Mobile styling large */
@media (max-width: 768px) {
	h1 {font-size:100px;}
	h2 {font-size:40px;}
	h3 {font-size:30px;}		
	#intro {background-size: auto 60%;}
	#intro h1 {padding-left:3%; padding-right:none; top:40%;}	
	.block_small_right {width:100%}
	.block_small_left {width:100%}	
	#description {padding:5%; padding-top:20%; padding-bottom:20%; width:90%; font-size:20px; line-height:1.3}
	#animation_wrapper {width:70%; height:75%; top:15%; left:15%}	
	#project_intro {width:90%; padding-left:5%; padding-right:5%; padding-top:30%; padding-bottom:30%;}
	#content {margin-top:-10%; padding-left: 4%; padding-right: 4%;} 
	#contact {padding-left:0%;}
	#intro h1 {font-size:70px; padding-left: 4%}
	.hover_state:hover {opacity:0}	
	#next-prev img {height:18px;}
}

/* Mobile styling small */
@media (max-width: 420px) {
	h1 {font-size:80px;}
	h2 {font-size:30px; font-weight:normal}
	h3 {font-size:30px; font-weight:normal;}	
	header {font-size:18px; padding-top:4%; padding-bottom:4%;} 
	#intro {height:100vh; font-family: 'apercubold', sans-serif; font-weight:normal; color:#000; background-size: auto 35%; top:-40px;}
	#intro h1 {font-size:50px; padding-left:3%; padding-right:none; top:40%;}
	.block_small_right {width:100%}
	.block_small_left {width:100%}
	#footer {padding-bottom:4%;}
	#footer p {font-size:16px}
	#about_intro {height:60vh; top:10%;}
	#about_text {margin-left:4%; padding:2%; padding-top:40%; width:90%; padding-bottom:40%}
	#contact {padding-top:250px;}
	#social_icons img {padding:3%}
	#description {padding:5%; width:90%; padding-top: 30%; padding-bottom: 30%;}
	#animation_wrapper {width:80%; height:75%; top:15%; left:10%}
	#lottie {width: 150%; height: 90%; top: -5%; overflow:hidden;}
	#project_intro {padding-bottom:30%;}
	#content {margin-top:-25%;}
	header a img {height: 13px; padding-right: 4px;}
	#archive h3 {padding-bottom:5%;padding-top:5%;}
	#next-prev {padding-bottom:15%;padding-top:15%;}
	#credits {padding-top:5%;}
	#credits p {display:block;padding:3%;}
	.nav-down-dark img {height:13px; padding-right:4px;}
}

@media (max-width: 320px) {
	h1 {font-size:30px;}
	h2 {font-size:25px; font-weight:normal}
	h3 {font-size:23px; font-weight:normal;}
}

/* Keyframes */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes rise{
  0% {
      transform: translate(0px,-40px);
  }
  100% {
      transform: translate(0px,0px);
  }
}

@-webkit-keyframes dropdown{
  0% {
      transform: translate(0px,-100px);
      opacity:0;
  }
  100% {
      transform: translate(0px,0px);
      opacity:1;
  }
}

@keyframes rotation {
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}