html, body {
    height: 100%;
    margin:0;
    font-family:"ApercuMono";
    -webkit-font-smoothing: antialiased;
    }

#top-nav {
    text-align:right;
    float:right;
    width:100%;
    min-height:10%;
    font-size:.9em;
    font-family:"ApercuMono";
    padding-top:5px;
    margin-bottom:-5px;
    }

li {
    float:right;
    margin:0 2% 0 1%;
    list-style:none;
   font-size:.9em;
   }

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

#top-nav li a {
	-webkit-transition: all .2s ease-in-out;
  	-moz-transition: all .2s ease-in-out;
  	transition: all .2s ease-in-out;
	font-family:"ApercuMono";
	padding-bottom:1px;
	border-bottom:1px solid white;
	}
	
#top-nav li a:hover {
	padding-bottom:4px;
	border-bottom: 1px solid black;
	}

img {
    max-width:100%;
    margin: 4% 0 4% 0;
    }
    
video {
    max-width:100%;
    margin: 4% 0 4% 0;
    }

.padding { 
	padding:8% 10% 10% 10%;
	}

#left {
    width:50%;
    height:100%;
    overflow:hidden;
    position:fixed;
    }

#left-copy {
	height:65%;
	}

#left-navigation {
	height:100%;
    }

#right {
    float:right;
    width:50%;
    height:100%;
    }

#right-spacer {
	height:55%;
	}


H1 {
    font-size:3.2em;
    line-height:.9em;
    margin:10% 0 10% 0;
    font-weight:normal;}

p {
    width:90%;
    max-width:460px;
    font-size:1.25em;
    line-height:1.4em;
    margin:0 0 5% 0;
    }

p a {
	-webkit-transition: all .1s ease-in-out;
  	-moz-transition: all .1s ease-in-out;
  	transition: all .1s ease-in-out;
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid #000;
    }
    
p a:hover {
	padding-bottom:4px;
	}

p.small {
    width:90%;
    max-width:none;
    font-size:.9em;
    line-height:1.6em;
    margin:0 0 2% 0;
    }

.project {
	margin:0 0 16% 0;
	}

.buttons a {
	padding:5px 10px;
	display:inline-block;
	background-color:rgba(255, 255, 255, 0.5);
	border-radius:3px;
	border-bottom:0px;
	margin-bottom:5px;
	}
	
.buttons a:hover {
	padding-bottom:5px;
	border-bottom: 0px solid black;
	background-color:rgba(255, 255, 255, 0.8);
	}
	
.buttons a.active {
	background-color:rgba(255, 255, 255, 1);
	}


html.fadeSiteOut {
	animation:  fadeSiteOut 0.4s ease forwards; /* [2] */
	}

@keyframes fadeSiteOut { /* [2] */
    from   { opacity: 1; }
    to     { opacity: 0; }
	}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0; 
 -webkit-animation:fadeIn ease-in 1; 
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 -webkit-animation-fill-mode:forwards;
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 -webkit-animation-duration:.4s;
 -moz-animation-duration:.4s;
 animation-duration:.4s;
 }
 
.fade-in.one {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
 }
 
.fade-in.two {
-webkit-animation-delay: 0.15s;
-moz-animation-delay:0.15s;
animation-delay: 0.15s;
 }
 
.fade-in.three {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
animation-delay: .3s;
 }



@media (min-width: 1800px), (max-height:900px) {
    #left-copy {
    max-height:58%;}
  
    #right-spacer {
    max-height:48%;}
  
}


@media (max-height:700px) {
   	H1 {
    margin:3% 0 6% 0;}
  
	p {
    margin:0 0 3% 0;}
    
    #left-copy {
    max-height:54%;}
  
    #right-spacer {
    max-height:44%;}

}

  
@media (max-width: 890px) {
  
	#top-nav {
    min-height:64px;
    }

	.padding {
    padding:5%;
    }
 	 
	#left {
    width:100%;
    height:auto;
	position:relative;
	}
      
	#left-navigation {
    padding-top: 30px;
	}
  
	#right {
    width:100%;
    height:auto;
    clear:both;
    float:none;
    }
  
	#right-spacer {
  	padding:0px;
  	}
  	
	#right-projectscroll {
  	padding-top:50px;
  	}

	p {
    margin:0 0 6% 0;
    }
      
	H1 {
    margin:20% 0 10% 0;
    }

	li {
    margin:5px 8vw 0 0;
    }
       
}