html, body{
	background-color:#000;
}

.bgImage{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-position:center;
	background-size:cover;
	/*background-attachment:fixed;*/
	
	opacity:1;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.grid{
	overflow:hidden;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(191,191,191,1);
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(191,191,191,1);
	box-shadow: inset 0px 0px 0px 1px rgba(191,191,191,1);
	
	mix-blend-mode: multiply;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.box{
	float:left;
	background-color:rgba(0,99,255,.5);

	-webkit-transition: background-color 8000ms;
    -moz-transition: background-color 8000ms;
    -o-transition: background-color 8000ms;
    transition: background-color 8000ms;
	
	-webkit-box-shadow: inset -1px -1px 0px 0px rgba(191,191,191,1);
	-moz-box-shadow: inset -1px -1px 0px 0px rgba(191,191,191,1);
	box-shadow: inset -1px -1px 0px 0px rgba(191,191,191,1);
}

.filled{
	background-color:rgba(0,99,255,.75);
	
	-webkit-transition: background-color 4000ms;
    -moz-transition: background-color 4000ms;
    -o-transition: background-color 4000ms;
    transition: background-color 4000ms;
}

section{
	position:relative;
	
	opacity:1;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

/*.fullHeight{
	position:relative;
}*/

#welcome{
	/*background-color:rgba(0,0,0,.1);*/
}

#about{
	/*background-color:rgba(0,0,0,.2);*/
}

#design{
	/*background-color:rgba(255,255,255,.5);*/
	
	/*height:100vh;*/
}

#research{
	/*background-color:rgba(0,0,0,.1);*/
}

#education{
	/*background-color:rgba(0,0,0,.2);*/
}

#misc{
	/*background-color:rgba(0,0,0,.2);*/
	
	height:100vh;
}

header{
	position:fixed;
	z-index:1;
	width:100%;
	height:60px;
	background-color:rgba(0,0,0,.75);
	
	-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	
	opacity:1;
	
	-webkit-transition: opacity 2000ms;
	-moz-transition: opacity 2000ms;
	-ms-transition: opacity 2000ms;
	-o-transition: opacity 2000ms;
	transition: opacity 500ms;
}

#navHolder{
	height:100%;
	width:60px;
	position:fixed;
	top:0%;
	z-index:1;
}

nav{
	/*height:360px;*/
	position:absolute;
	width:100%;
	top:50%;
	margin-top:-180px;
}

nav a{
	display:block;
	height:60px;
}

nav a .circle{
	width:12px;
	margin-left:24px;
	margin-top:24px;
}

nav a .cls-1 {
	-webkit-transition: fill 250ms;
    -moz-transition: fill 250ms;
    -o-transition: fill 250ms;
    transition: fill 250ms;
 }
 
 nav a:hover .cls-1 {
	fill: #FF9C00;
	
	-webkit-transition: fill 250ms;
    -moz-transition: fill 250ms;
    -o-transition: fill 250ms;
    transition: fill 250ms;
 }

.active .cls-1 {
	fill:#FF9C00;
}

.overlay{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,.9);
}

.thumbnail{
	position:relative;
	background-size:cover;
	opacity:0;
}

.thumbnailOverlay{
	position:absolute;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	mix-blend-mode: multiply;
	
	-webkit-transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -o-transition: background-color 500ms;
    transition: background-color 500ms;
}

.thumbnailTextHolder{
	position:absolute;
	top:50%;
	left:50%;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

#audioControls{
	/*width:60px;*/
	height:60px;
	position:absolute;
	bottom:0%;
	right:0%;
}

.audioControl{
	width:60px;
	height:60px;
	position:absolute;
}

#beats{
	right:180px;
}

#bass{
	right:120px;
}

#fx{
	right:60px;
}

#mute{
	width:60px;
	height:60px;
	position:absolute;
	bottom:0%;
	right:0%;
}

.redClose{
	position:absolute;
	top:0px;
	left:0px;
	width:20px;
	margin-left:20px;
	margin-top:20px;
	
	opacity:1;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.redClose .cls-1{
	fill:#9c0000;
}

#mute #sound{
	position:absolute;
	top:0px;
	left:0px;
	width:20px;
	margin-left:20px;
	margin-top:11px;
}

#mute #sound .cls-1{
	fill:#fff;
	
	-webkit-transition: fill 250ms;
    -moz-transition: fill 250ms;
    -o-transition: fill 250ms;
    transition: fill 250ms;
}

 
#mute:hover #sound .cls-1{
	fill: #FF9C00;
	
	-webkit-transition: fill 250ms;
    -moz-transition: fill 250ms;
    -o-transition: fill 250ms;
    transition: fill 250ms;
 }



.hidden{
	opacity:0;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-ms-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.displayNone{
	display: none;
}

.blackness{
	position:fixed;
	width:100%;
	height:100vh;
	background-color:#000;
	top:0px;
	left:0px;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){	
	#navTrigger{
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		top:0%;
		right:0%;
	}

	#navTrigger #hamburger{
		width:24px;
		margin-left:18px;
		margin-top:20px;
	}
	
	#navTrigger .cls-1{
		fill: #fff;
	}
	
	#navHolder{
		background-color:rgba(255,255,255,.75);
		right:-60px;
		
		-webkit-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		-moz-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}
	
	#navHolder.show{
		right:0%;
		
		-webkit-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		-moz-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition: right 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		
		-webkit-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.25);
		box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.25);
	}
	
	#navTriggerClose{
		display:block;
		width:60px;
		height:60px;
		position:absolute;
		top:0%;
		right:0%;
		background-color:#fff;
	}
	
	#navTriggerClose .cls-1{
		fill:#000;
	}
	
	#navTriggerClose #close{
		width:20px;
		margin-left:20px;
		margin-top:20px;
	}
	
	nav a .cls-1 {
		fill: #000;
	}
	
	#rotateToLandscape{
		display:none;
	}
	
	#welcome.fullHeight{
		height:100vh;
	}
	
	#design{
		padding-top:50%;
		padding-bottom:0%;
	}
	
	.thumbnail{
		padding-top:100%;
		margin-bottom:50%;
	}
	
	#mute{
		/*background-color: #fff;*/
		display: none;
	}
	
	#mute #sound .cls-1{
		fill:rgba(0,0,0,1);
	}
	
	/*#beats{
		display:none;
	}
	
	#bass{
		display:none;
	}
	
	#fx{
		display:none;
	}*/
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
	#mute{
		display:none;
	}
}

/* TABLET / DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px){
	.bgImage{
		/*background-attachment:fixed;*/
	}
	
	#navTrigger{
		display:none;
	}
	
	#navHolder{
		right:0%;		
	}
	
	#navTriggerClose{
		display:none;
	}
	
	nav a .cls-1 {
		fill: #fff;
	}
	
	#rotateToPortrait{
		display:none;
	}
	
	.fullHeight{
		height:100vh;
	}
	
	#design{
		padding-top:16.667%;
		padding-bottom:16.667%;
	}
	
	.thumbnail{
		width:33.33%;
		padding-top:33.33%;
	}
	
	.ds_TD_0{
		margin-left:0%;
	}
	
	.ds_TD_1{
		margin-left:33.33%;
	}
	
	.ds_TD_2{
		margin-left:66.667%;
	}
}

@media only screen and (max-width: 1024px){
	.thumbnailOverlay{
		background-color:rgba(0,99,255,.75);
	}
	
	.thumbnailTextHolder.hidden{
		opacity:1;
	}
}

@media only screen and (min-width: 1025px){
	
	.bgImage{
		background-attachment:fixed;
		/*background-size:100%;*/
	}
	
	.thumbnail{
		/*cursor: pointer;*/
	}
	
	.thumbnailOverlay{
		background-color:rgba(0,99,255,.25);
	}
	
	.dark{	
		background-color:rgba(0,0,0,.75);
		-webkit-transition: background-color 500ms;
		-moz-transition: background-color 500ms;
		-o-transition: background-color 500ms;
		transition: background-color 500ms;
	}
}

@media only screen and (min-width: 768px) and (orientation: landscape){
	#rotateToLandscape{
		display:none;
	}
}

@media only screen and (min-width: 768px) and (orientation: portrait){
	#navHolder{
		display:none;
	}
	
	#rotateToLandscape{
		display:block;
	}
	
	#toLandscapeHolder{
		width:240px;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-140px;
		margin-left:-120px;
	}
	
	#toLandscape{
		width:120px;
		height:120px;
		display:block;
		margin-left:60px;
		margin-bottom:20px;
	}
	
	#toLandscape .cls-1 {
		fill: none;
	}
	
	#toLandscape .cls-2 {
		fill: #fff;
	}
}

@media only screen and (max-width: 767px) and (orientation: landscape){
	#navTrigger{
		display:none;
	}
	
	#navHolder{
		display:none;
	}
	
	#rotateToPortrait{
		display:block;
	}
	
	#toPortraitHolder{
		width:160px;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-65px;
		margin-left:-80px;
	}
	
	#toPortrait{
		width:80px;
		height:80px;
		display:block;
		margin-left:40px;
		margin-bottom:10px;
	}
	
	#toPortrait .cls-1 {
		fill: none;
	}
	
	#toPortrait .cls-2 {
		fill: #fff;
	}
}

@media only screen and (max-width: 767px) and (orientation: portrait){
	#rotateToPortrait{
		display:none;
	}
}