html, body, .site, .page .wrap {
    width: 100%;
    height: 100%;
}

html, body {margin: 0; height: 100%; overflow: hidden}


@font-face {
    font-family: 'diaregular';
    src: url('Fonts/DiaRegular.woff') format('woff');


    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility; 
   -webkit-font-smoothing: antialiased;
}


body {
	font-family: 'diaregular';
	margin: 0;
	font-size: 1vw;
    line-height: .95;
	cursor:default;
	text-width:100;
	background:black;
	}
	
h1 {
/* 	    border-left: 2px solid black; */
	font-family: inherit;
	-webkit-appearance: none;
	font-size: 5.5vw;
	font-weight: 400;
       margin: 0em .2em 0em .18em;
   line-height: 1.1;
 letter-spacing:-.09em;	
  text-rendering: optimizeLegibility; 
-webkit-font-smoothing: antialiased;
}	


h2 {/*  (white) */

color: black;
font-size: 3.5vw;
/* margin-left: .5em; */
line-height: 1;
font-weight: 100;
font-family: 'diaregular';
-webkit-appearance: none;
font-weight: 400;
margin: 0em .2em 0em .25em;
word-spacing: -.02em;
letter-spacing: -.072em;
 text-rendering: optimizeLegibility; 
-webkit-font-smoothing: antialiased;
  
	}

h3 {display:none;
	font-family: 'diaregular';
    font-size: 1vw;
    font-weight: 400;
    margin: 3em .8em;
    line-height: 1.1;
    font-style: normal;
    letter-spacing: -0.0625em;
}

h4 {
	margin: 1em 1em 0em 1em;
	 font-family: 'diaregular';
    font-size: 1.4vw;
      line-height: 1.1;
   
    font-weight: 400;
    letter-spacing: -0.0325em;
    color: white;

    
}


h5 {
	/* width: 100%; */
background-color: black;
letter-spacing: -0.0625em;
/* position: fixed; */
margin: -1.15em .1em .4em .3em;
font-family: 'diaregular';
font-size: 1.3vw;
line-height: 1;
font-weight: 400;
letter-spacing: -0.0325em;
color: white;
position: relative;
z-index: 2;
}

h6 {
	font-size: 2vw;
	letter-spacing: .5em;
	
	
}



.name {
	    border-bottom: none;
	font-family: 'diaregular';
	font-size: 3.5vw;
	font-weight:100;
	color: white;
		  line-height: 1;
	 word-spacing: -.03em;
letter-spacing: -.085em;
 text-rendering: optimizeLegibility; 
-webkit-font-smoothing: antialiased;
/*     border-bottom: .072em solid black; */
/*          margin: 0em 0em 0em 3.3em; */
      
         
/* 	  color:#5E5E5E; */
}

.about1 {
/*
	overflow:auto;
	   position:relative;
	  overflow-y: scroll;
*/
	color: white;
	font-family: 'diaregular';
	font-size: 5.5vw;
	font-weight: 100;
     margin: 0em 0em 0em 0em;
    line-height:1.1 ;
    text-rendering: optimizeLegibility; 
 -webkit-font-smoothing: antialiased;
}	

.about3 {
/*
	overflow:auto;
	   position:relative;
	  overflow-y: scroll;
*/
	    color: white;
	font-family: 'diaregular';
	font-size: 5.5vw;
	font-weight: 100;
     margin: 0em 0em 0em 0em;
    line-height:1.1 ;
     text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased;
   
}	


.about2 {
/*
	overflow:auto;
	   position:relative;
	  overflow-y: scroll;
*/
	
	font-family:  Helvetica,Arial, 'diaregular';
	font-size: 5.5vw;
	font-weight: 100;
     margin: 0em 0em 0em 0em;
    line-height:1.1 ;
    display:none;
   
}	


.about {
	
	font-weight: 100;

	font-family: 'diaregular';

	  line-height: 1;
	font-size: 3.5vw;
		color:white;
  word-spacing: -.02em;
letter-spacing: -.072em;
 text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased;
	
}

.paragraph {
	
	line-height: 1;
	margin-left: 1.2em;
	
}


.line {
	border-bottom: .2em solid white;
    width: 100%;
    height: 3vw;
    margin-bottom: 5vw;
	}

.text {
	
	letter-spacing: -.072em;
      width: 59vw;
    background-color: black;
  
    /* position: fixed; */
   margin: 3.5vw 2vw 1vw 0vw;
    font-family: 'diaregular';
    font-size: 3.5vw;
    line-height: 1;
    margin-right: 5vw;
    font-weight: normal;
   
    color: white;
    position: relative;
    z-index: 2;
     text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased;

}	

.textsmall {

       width: 58.8vw;
    background-color: black;
    letter-spacing: -0.0625em;
    /* position: fixed; */
    margin: .2em 0em 0em 0em;
    font-family: 'diaregular';
    font-size: 1.2vw;
    line-height: 1;
    font-weight: normal;
    letter-spacing: -0.0325em;
    color: rgb(206, 206, 206);
    position: relative;
    z-index: 2;


}	


.caption {

   width: 18.8vw;
    background-color: black;
    letter-spacing: -0.0625em;
    /* position: fixed; */
    margin: .7em 0em 1.1em 1.3vw;
    font-family: 'diaregular';
    font-size: 1.2vw;
    line-height: 1;
    font-weight: normal;
    letter-spacing: -0.0325em;
    color: rgb(206, 206, 206);
    position: relative;
    z-index: 2;


}	

.annotation {
	
	font-family: 'diaregular';
	font-size: 1.3vw;
	line-height: 1;
	font-weight: 100;
	letter-spacing: -0.0325em;
	color: white;

}



.overviewtitle{
	
	position: relative;
	color: white; 
	margin-left: 0em; 
	position: relative;
	
	margin-left: 0em;
	background: black;
	width: 100%;
	padding-top: .5em;
	margin-top:-.5em;
	 text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased;
}

#bar {
	    position: fixed;
    bottom: 0;
    /* border-bottom: .22vw solid; */
    margin: 0em 0em .3em 0em;

    margin-left: 4vw;

    text-align: right;
       font-weight: 100;
    font-size: 3.5vw;
    /* float: right; */
    right: .65em;
    z-index: 4;
    line-height: .95;
    letter-spacing: -.05em;
    text-align: right; 
	color:white;    

	font-family: Helvetica,Arial,   'diaregular';
}

.overview {
color: rgb(237, 237, 237);
text-align: right;
line-height: 1;
font-size: 3.5vw;
margin: 0em 0em 0em .03em;
width: 22.5vw;
font-weight: 100;

letter-spacing: -0.075em;

}




 .border {
 	margin: 0em 0em 0em 0em;
 }

.two-nav {
	color: rgb(173, 173, 173);
  font-weight: 100;
font-size: 3.5vw;


}


.one-nav {
  font-weight: 100;
font-size: 3.5vw;
color: rgb(173, 173, 173);



}

.wrap {
	margin:  0em 1em 0em 0em;  
		margin-bottom: -1vh;
		 height: 100%;
		    font-weight: 100;
		   
		  
	
	
}

.work {

	font-family: 'diaregular';
	font-size: 5vw;
	font-weight: 100;
     margin: 1em 3em;
    line-height: .7;
    letter-spacing: -0.0625em;
	display: none;	
	
	
}


.photos {
	margin: 3em .8em;
}
  
  html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }
  
  
  
  
  
  

.one{
	margin: 0em 0em 0em -.3em;  overflow: hidden;
/*
	position:relative;
    display: block;
        overflow-y: scroll;
*/
/* 	overflow: hidden; */
    width:48.6%;
    height:100vh;
    background:transparent;
    float:left;
    position:relative;
    text-weight:100;
    
}
.two{
overflow: hidden;
width: 27.2%;
height: 100vh;
background: black;
float: left;
position: relative;
}


.twomobile {
	display:none;
}

.threemobile {
		display:none;
	}

.three{
	margin: 0em 0em 4em 0em;
   width:24%;
    height:100vh;
    background:black;
    float:left;
    position:relative;
    display: block;
        overflow-y: scroll;


}

.mobile {
	
	 position:relative;
	display: none;
	  overflow-y: scroll;
}

.pages {
	color: white;
	font-size: 1vw;
	width: 100%;
	margin-top: -3.6em;
	    margin: 0vw 0vw 0vw 1.1vw;
/* 	border: 1px solid red; */
}


.pagesmobile {
		display: none:
	}


/* FOOTER */

.footer, .footer2 {
	  text-rendering: optimizeLegibility; 
-webkit-font-smoothing: antialiased;
	display:block;
	width: 50%;
    background-color: black;
	letter-spacing: -0.0625em;
   position:fixed;
bottom:0;
font-family: 'diaregular';
	font-size: 3.5vw;
	font-weight: 100;
	    color; black;
/* 		margin: 0em 0em -.5em 0em;  */
    line-height: 1;
      padding: .2em 0em .059em .28em;
       letter-spacing:-.07em;
     text-decoration: none;
     
     

}

.footermobile {
	display:none;
	}




/* INDIVIDUAL PAGES */

.iot {
	text-weight:100;
border-bottom: .06em solid rgb(173, 173, 173);
	
	
}



.cls, .fom, .soex, .linkedin, .zymergen, .apple {
		text-weight:100;
	border-bottom: .06em solid rgb(173, 173, 173);
}

.staircase {
		text-weight:100;
border-bottom: .06em solid rgb(173, 173, 173);
}

.ybca {
		text-width:100;
border-bottom: .06em solid rgb(173, 173, 173);
}

.dichotomy {
		text-width:100;
border-bottom: .06em solid rgb(173, 173, 173);
}

.synthesize{
		text-width:100;
	border-bottom: .06em solid rgb(173, 173, 173);
	
}

.ampithemia {
		text-width:100;
	border-bottom: .06em solid rgb(173, 173, 173);
}

.misc {
		text-width:100;
border-bottom: .06em solid rgb(173, 173, 173);
}

.sfmoma2 {
		text-width:100;
	
}


.summer {
		text-width:100;
border-bottom: .06em solid rgb(173, 173, 173);
}





.staircase .ybca .cls .iot .dichotomy .synthesize  .ampithemia .misc .summer {
	border-bottom: none;
		text-weight:100;
		
	
}










.two .two-nav >  > a{
    text-decoration:none;
    
}

.two .two-nav > a:active, .two .two-nav >  a:hover, .two .two-nav  > a:focus {
   	color: white;
	text-decoration: none;
	margin-bottom: 1.5em;
	border-bottom: .06em solid white;
	  text-rendering: optimizeLegibility; 
-webkit-font-smoothing: antialiased;
}



.one .one-nav >  > a{
    text-decoration:none;
    color:  rgb(173, 173, 173);
}


.one .one-nav > a:active, .one .one-nav >  a:hover, .one .one-nav  > a:focus {
   	color: white;
	text-decoration: none;
	margin-top: -.8em;
	border-bottom: .07em solid black;
}

a:link {
color: rgb(173, 173, 173);
text-decoration: none;
    border-bottom: .06em solid rgb(173, 173, 173);
	

}

a:visited {
	color: inherit;
	text-decoration: none;

}

a:hover {
	color: white;
	text-decoration: none;
	margin-bottom: 1.5em;
	border-bottom: .06em solid white;
	cursor: pointer;
}

a:active {
	
	    color: white;
	margin-bottom: 1.5em;
	border-bottom: .06em solid white;

	
}


a.staircase.active {
	border-bottom: .06em solid white;
	    color: white;
}
a.iot.active {
	border-bottom: .06em solid white;
	    color: white;
}
a.cls.active {
border-bottom: .06em solid white;
	    color: white;
}
a.ybca.active {
border-bottom: .06em solid white;
	    color: white;
}
a.dichotomy.active {
	border-bottom: .06em solid white;
	    color: white;
}
a.synthesize.active {
	border-bottom: .06em solid white;
	    color: white;
}
a.ampithemia.active {
	border-bottom: .06em solid white;
	    color: white;
}
a.misc.active {
border-bottom: .06em solid white;
	    color: white;
}

a.fom.active {
border-bottom: .06em solid white;
	    color: white;
}

a.soex.active {
border-bottom: .06em solid white;
	    color: white;
}

a.linkedin.active {
border-bottom: .06em solid white;
	    color: white;
}

a.zymergen.active {
border-bottom: .06em solid white;
	    color: white;
}

a.apple.active {
border-bottom: .06em solid white;
	    color: white;
}

a.summer.active {
border-bottom: .06em solid white;
	    color: white;
}



#clslogo {
	display:none;
	    margin-top: 5vh;
}

#ymgmap {
	display:none;
	margin-top: 5%;
	width: 80%;
	margin-left: 10%;
}


#di {
	display:none;
	    margin-top: 13vh;
}

#ss {
	display:none;
	width: 80%;
	margin-left: 10%;
	    margin-top: 15%;
}

#book {
	display:none;
	width: 80%;
	    margin-top: 10vh;
	margin-left: 10%;
}

#romanhelix {
	display:none;
	width: 80%;
	   
	margin-left: 10%;
}

#euclidb {
	display:none;
	width: 90%;
	     margin-top: 20vh;  
	margin-left: 5%;
}

#flower {
	display:none;
    width: 100%;
    margin-top: 10vh;
    margin-left: -2%;
}

#enter {
	display:none;
    width: 110%;
    margin-top: 12vh;
    margin-left: -8%;
}

#i {
	display:none;
    width: 90%;
    margin-top: 8vh;
    margin-left: 5%;
}

#z {
	display:none;
    width: 110%;
    margin-top: 8vh;
    margin-left: -5%;
}

#book2 {
		display:none;
    width: 100%;
    margin-top: 11vh;
	    
}

#bubble {
	display:none;
}

#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10, #b11, #b12, #b13, #b14, #b15, #b16, #b17, #b18, #b19, #b20 {
	position: fixed;
	z-index: 10;
}

#b1 {
    top: 91vh;
    margin-left: -7vw;
    width: 5%;
    z-index: 10;
}
#b2 {
	    top: 87vh;
    margin-left: -21vw;
    width: 7%;
    z-index: 10;
}
#b3 {
	    top: 20vh;
    margin-left: -16vw;
    width: 5%;
    z-index: 10;
}
#b4 {
	    top: 60vh;
    margin-left: -6vw;
    width: 8%;
    z-index: 10;
}
#b5 {
	    top: 53vh;
    margin-left: -19vw;
    width: 6%;
    z-index: 10;	
}
#b6 {
	     top: 0vh;
    margin-left: -24vw;
    width: 4%;
    z-index: 10;	
}
#b7 {
	    top: 56vh;
    margin-left: -16vw;
    width: 5%;
    z-index: 10;	
}
#b8 {
	    top: 5vh;
    margin-left: -9vw;
    width: 6%;
    z-index: 10;	
}
#b9 {
	top: 80vh;
    margin-left: -18vw;
    width: 4%;
    z-index: 10;
}
#b10 {
	top: 48vh;
    margin-left: -8vw;
    width: 3%;
    z-index: 10;	
}
#b11 {
    top: 32vh;
    margin-left: -20vw;
    width: 3%;
    z-index: 10;
}
#b12 {
	    top: 16vh;
    margin-left: -31vw;
    width: 6%;
    z-index: 10;	
}

#b13 {
    top: 88vh;
    margin-left: -24vw;
    width: 3%;
    z-index: 10;
}
#b14 {
    top: 46vh;
    margin-left: -10vw;
    width: 3%;
    z-index: 10;	
}
#b15 {
    top: 31vh;
    margin-left: -26vw;
    width: 6%;
    z-index: 10;	
}
#b16 {
    top: 65vh;
    margin-left: -28vw;
    width: 6%;
    z-index: 10;	
}
#b17 {
    top: 33vh;
    margin-left: -2vw;
    width: 2%;
    z-index: 10;
}

#b18 {
	    top: 12vh;
    margin-left: -16vw;
    width: 8%;
    z-index: 10;	
}
#b19 {
	    top: 59vh;
    margin-left: -17vw;
    width: 6%;
    z-index: 10;	
}
#b20 {
	    top: 63.5vh;
    margin-left: -26vw;
    width: 3%;
    z-index: 10;	
}






/* MOBILE */


@media screen and (max-width:1025px) {
	
	
	#mobilewrap {
		margin:0;
		width: 100%;
    height: 100%;
	}
	

	.site {
	display:none;
	}

	.twomobile {
	display: block;
    overflow: hidden;
    width: 100%;
    /* height: 10vh; */
    background-color: black;
    color: white;
    float: left;
    position: fixed;
    z-index: 2;
/*         top: initial; */
    bottom: 15vw ;
    
    line-height: .9;
/*     padding: .25em .4em .15em; */
   
		
	}
	
	
	.threemobile {
	display: none;
/*     top: 0vh; */
    width: 100%;
    height: 65%;
    background-color: black;
    color: white;
    /* float: left; */
    z-index: 1;
  
    position: relative;
    overflow-y: scroll;
/*         bottom: 0vh; */

		
	}
	
	.one{
		display: none;
	overflow: hidden;
    width:100%;
    display:block;
    height:30vh;
    background:black;
    overflow-x: hidden;
    float:left;
    position:relative;
    text-weight:100;
    
}



	.pagesmobile {
	display: none;
	color: white;
	font-size: 1vw;
	width: 100%;
	height: 50vh;
	margin-top: -3.6em;
	margin: 0em 1em 1em 1em;

}

.wrap {
	display: none;
}

.two{
	display: none;
	overflow: hidden;
   width:100%;
    height:30vh;
    color: rgb(237, 237, 237);
    float:left;
    position:relative;
   
}


.three{
	display: none;
   width:0%;
    height:20vh;
    background:black;
    width: 100%;
    float:left;
    position:relative;
    
        overflow-y: scroll;
}

.mobile {
	display: block;
margin-top: 0;
	       position: relative;
   
    z-index: 0;
	height: 77vh;
	  overflow-y: scroll;
	  
}

h1 {
	
    font-size: 15.2vw;
    color: white;
    margin: .1em .1em;
    line-height: .9;
    letter-spacing: -.08em;
}	

.footer {
	display: none;
	
	
}


h2 {/*  (white) */
	
	font-family: 'diaregular';
  font-size: 16vw;
    color: white;
    margin: 0em;
    line-height: .9;
    letter-spacing: -.08em;

}	

.two-nav {
	display:none;
    font-weight: 100;
    font-size: 9vw;
    line-height: .9;
    color: rgb(173, 173, 173);
    letter-spacing: -.075em;
    /* margin-left: 0.2em; */
    margin: -.2em 0em .3em .23em;
    /* margin-bottom: .2em; */
    margin-top: -;
}


.about3 {
    font-family: 'diaregular';
    font-size: 16vw;
    color: rgb(147, 147, 147);
    line-height: .9;
    letter-spacing: -.08em;
/*
    margin-left: -0.07em;
    margin: -.1em -.1em;
*/
}

h3 {display:none;
	font-family: 'diaregular';
    font-size: 10vw;
    font-weight: 100;
    margin: 3em .8em;
    line-height: 1.1;
    font-style: normal;
    letter-spacing: -0.0625em;
}

h4 {
	margin: 1em 1em 0em 1em;
	 font-family: 'diaregular';
    font-size: 1.4vw;
      line-height: 1.1;
   
    font-weight: 100;
    letter-spacing: -0.0325em;
    color: white;

    
}



.name {
	
	
    font-size: 16vw;
    color: white;
    margin: .1em .1em;
    line-height: .9;
   
    letter-spacing: -.08em;
        border-bottom: .22vw solid #ededed;
         
/* 	  color:#5E5E5E; */
}

.about {
	
    line-height: inherit;
    font-size: inherit;
    color: white;
    
    margin: 0em 0 0em 0em;
    letter-spacing: inherit;
}




.text {
    width: 96%;
    background-color: black;
    letter-spacing: -0.0625em;
    /* position: fixed; */
    margin: .36em;
    font-family: 'diaregular';
    font-size: 9vw;
    line-height: .9;
    margin-right: 5vw;
    font-weight: normal;
    letter-spacing: -0.0325em;
    color: white;
    position: relative;
    z-index: 2;
}

.textsmall {
    width: 95.8vw;
    background-color: transparent;
    letter-spacing: -0.0625em;
    /* position: fixed; */
    margin: -.5em 0em 0em 0em;
    font-family: 'diaregular';
    font-size: 3vw;
    line-height: 1;
    font-weight: normal;
    letter-spacing: -0.0325em;
    color: rgb(206, 206, 206);
    position: relative;
    z-index: 2;}
    
    
.caption {
    width: 28.8vw;
  
    font-size: 2vw;
    line-height: 1;

}    




.work {

	font-family: 'diaregular';
	font-size: 10vw;
	font-weight: 100;
     margin: 0em;
	float: right;
    letter-spacing: -0.0625em;
	display: block;	
	
}



.about1 {
	
	    margin-bottom: 2vw;
	
	color: rgb(147, 147, 147);
	font-size: 16vw;
	letter-spacing: -.09em;

}	

.footermobile {
	display:block;
	width: 100%;
    background-color: black;
	letter-spacing: -0.0625em;
   position:fixed;
bottom:0;
font-family: 'diaregular';
	font-size: 2vw;
	font-weight: 100;
/* 		margin: 0em 0em -.5em 0em;  */
    line-height: .9;
        padding: .2em 0.8em .2em;
       letter-spacing: -0.0625em;
           z-index: 2;	

}



a:link {
color: white;
text-decoration: none;
    border-bottom: .06em solid inherit;
	

}

a:visited {
	color: white;
	text-decoration: none;

}

a:hover {
	color: white;
	text-decoration: none;
	margin-bottom: 1.5em;
	border-bottom: .06em solid white;
	cursor: pointer;
}

a:active {
	
	    color: white;
	margin-bottom: 1.5em;
	border-bottom: .06em solid white;

	
}



.two .two-nav > a:active, .two .two-nav >  a:hover, .two .two-nav  > a:focus {
   	color: white;
	text-decoration: none;
	margin-bottom: 1.5em;
	border-bottom: .07em solid white;
}

.two-nav:active{}
color:white;
}

a.staircase:active {
	border-bottom: .07em solid white;
	    color: white;
}
a.iot:active {
	border-bottom: .07em solid white;
	    color: white;
}
a.cls:active {
	border-bottom: .07em solid white;
	    color: white;
}
a.ybca.active {
	border-bottom: .07em solid white;
	    color: white;
}
a.dichotomy.active {
	border-bottom: .07em solid white;
	    color: white;
}
a.synthesize.active {
	border-bottom: .07em solid white;
	    color: white;
}
a.ampithemia.active {
	border-bottom: .07em solid white;
	    color: white;
}
a.misc.active {
	border-bottom: .07em solid white;
	    color: white;
}

a.summer.active {
	border-bottom: .07em solid white;
	    color: white;
}


}