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

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Proxima Nova", "proxima-nova", sans-serif;
	font-size: 62.5%;
}
.clearfloat {
	clear: both;
}
img {
	max-width: 100%;
}

a:-webkit-any-link{
text-decoration:none !important;
}

/*--------------------------------------------AnchorTags---------*/

#projects {
	height:80px;
	margin-top:-80px;
}

#student {
	height:80px;
	margin-top:-80px;
}

#mentor {
	height:80px;
	margin-top:-80px;
}

#vids {
	height:80px;
	margin-top:-80px;
}

/*--------------------------------------------COPY CONTAINER---------*/

.copy {
	width:40%;
	height:auto;
	margin: auto;
	margin-bottom:5vh;
	margin-top:5vh;
}


/*-------------------------------------------- TEACHER SECTIONS --------

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }

.list-wrap {
	list-style:none;
	width:40%;
	margin-left:30%;
	margin-top:5%;
	margin-bottom:5%;
}

.list-wrap li {
	text-align: center;
	line-height: 1.6em;
	color: #222222;
	font-size: 2em;
	font-weight: 100;
}

.prof_bold {
	font-size: 1.8em;
	font-weight: 700;
	color: #222222;
	text-align: center;
	line-height:2em;
}
	

.clearfloat {
	clear:both;
}

#profs ul {
	list-style: none;
	margin:0;
	padding:0;
}

#profs li {
	margin:0;
	padding:0;
}

#profs .nav li {
	width:25%;
	height:auto;
	margin:0 auto;
	float:left;
	
}

#profs .nav {
	width:60%;
	margin-left:20%;
	margin:0 auto;
}

#profs .nav li a:link, #profs .nav li a:visited {
	display: block;
}
#profs .nav li a:hover {
	opacity:0.5;
}

#prof_mobile_float {
	height:auto;
}
	
/*--------------------------------------------KNOLL ---------*/

#knoll_container {
	width:1024px;
	margin:0 auto;
}

.knoll_tile {
	width:200px;
	height:200px;
	float:left;
	background-color:#CF181B;
}


.knoll_tile a:hover {
	background-color:#27D1B1;
}

#knollnav {
	padding-bottom:50px;
}

#knoll_mobile {
	height:auto;
	width:100%;
	margin:auto;
	padding-bottom:20%;
}

/*--------------------------------------------GENERAL STRUCTURE---------*/

#contact {
	padding-top: 100px;
}
/*--------------------------------------------VIDEOS---------*/

#video_bg {
	background-color: #222222;
	width:100%;
	padding-top:25px;
}

#video_center {
	width:1024px;
	background-color: #222222;
	margin:0 auto;
	padding-bottom:5%;
}

#left-col {
	width: 490px;
	margin-right: 32px;
	float: left;
}
#right-col {
	width: 490px;
	float: left;
}
.video {
	margin: 50px 0 0 0;
	border: 3px solid #fff;
}
.video-desc {
	background-color: #fff;
	padding: 10px;
	font-size:9px;
}

/* --------------------------------------------------HEADER / LOGOS----- */

header {
	background-image:url(../GFX/DissolveProgress_1.jpg);
	width: 100%;
	height: 100vh;
	background-size: cover;
	position:inherit;
	z-index:9999;

}
#logo-container {
	padding-top: 20%;
}
#logo {
	margin: 0 auto;
	width: 320px;
}

/* ----------------- NEW NAV ------------*/

#nav_logo {
	width:125px;
	height:auto;
	float:left;
	margin-top:20px;
	margin-left:20px;
}

/*--------------------------------------------PROFILES----------*/

#prof_container {
	width:100%;
	height:100vh;
	padding-bottom:5%;
}

.effects {
	float:left;
	width:16.66%;
}
.effects .img {
  position: relative;
  width: 100%;
  overflow: hidden;
  
}
.effects .img:nth-child(n) {  
}
.effects .img:first-child {  
}
.effects .img:last-child {
  margin-right: 0;
  
}
.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}
.img img {
	width:100%;
}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: all 0.2s;
}
a.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3000;
  width: 45px;
  height: 45px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}
a.close-overlay.hidden {
  display: none;
}


/*---LINK TEXT STYLE---*/
a.expand {
  display: block;
  position:relative;
  top:40%;
  z-index: 3000;
  width: 90%;
  padding:5px 3%;
  height: auto;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  color: #fff;
  font-size:1.2vw;
  border:3px solid white;
}


#effect-1 .overlay {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  
}
#effect-1 .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 50%;
  margin: 0 auto -30px auto;
  
}
#effect-1 .img.hover .overlay {
  height: 100%;
  
}

/*--------------------------------------------------- CONTACT ------ */

#location {
	height:30vh;
	margin-bottom: 5%;
	margin-left: 5%;
}

#location-marker {
	background-image:url(../GFX/location-marker.png);
	background-size:cover;
	margin: 0 auto;
	height: auto;
	width: 20%;
}

/*---------------------------------------------SPAN CLASSES---------*/
.black {
	color: #222;
}
.white {
	color: #fff;
}

.bold {
	font-weight: 700;
}
/*---------------------------------------------TYPE---------*/
#location p {
	margin-top: 10px;
}
p {
	text-align: center;
	line-height: 1.6em;
	color: #222222;
	font-size: 2em;
	font-weight: 100;
	display:block;
}
h1 {
	text-align:center;
	font-weight:700;
	font-size:2em;
}
h2 {
	font-size: 3em;
	font-weight: 700;
	color: #222222;
	text-align: center;
	margin-top:25px;
	margin-bottom:25px;
	display:block;
}
h3 {
	font-size: 3em;
	color: #222222;
	font-weight: 700;
	text-align: center;
	margin:0 auto;
	margin-top: 50px;
	display:block;
}
h4 {
	color: #222;
	font-size: 1.4em;
}

.thesis_hover {
	padding-top:15px;
	padding-bottom:15px;
	padding-left:10px;
	padding-bottom:10px;
}

/* ---------------------------------------------------- FOOTER ----- */

#sponsors {
	padding-top: 100px;
	background-color: #222222;
	text-align: center;
}
#sponsors img {
	margin: 20px;
	margin-top: 70px;
}
iframe {
	width: 100%;
}
.arrow-mobile {
	display: none;
}

#mobile-nav{
	display: none;
}
/*----------------------------------------------------MOBILE THESIS PROJECTS------*/
.thesis_projects_mobile {
	width:95vw;
	height:15vh;
	background-color:#222222;
	margin-bottom:5vh;
}

#thesis-mobile {
	display:none;
}

/*-----------------------------------------------------QUERIES--------------*/
@media only screen and (min-width : 1025px) {
	 #mobile-nav {
		 display:none;
	 }
	 #knoll_mobile {
		display:none;
	}
	#foo {
		display:none;
	}
	#prof_mobile_float {
		display:none;
	}
 }

@media only screen and (max-width : 1024px) {
	 #mobile-nav {
		 display:none;
	 }
	 .copy {
		width:80%;
		height:auto;
		margin-bottom:3vh;
		margin-top:3vh;
	}
	#prof_container {
		width:90%;
		height:auto;
		margin: auto;
		margin-bottom:15%;
		margin-top:5vh;
	}
	#knoll_mobile {
		display:none;
	}
	#foo {
		display:none;
	}
	#left-col {
		width: 90%;
		float:none;
		margin-left:5%;
	}
	#right-col {
		width: 90%;
		float: none;
		margin-left:5%;
	}
	#video_center {
		width:100%;
	}
	.effects {
		width:33.3%
	}
	a.expand {
		width:90%;
		font-size:2.5vw;
	}
	.list-wrap {
		width:80%;
		margin-left:10%;
		margin-bottom:3vh;
		margin-top:3vh;
	}
	#prof_mobile_float {
		display:none;
	}

 }
 @media only screen and (max-width : 768px) {
	 #main-nav {
		 display:none;
	 }
	 #mobile-nav{
		display: block;
		width: 100%;
	}
	 #logo-container {
		 display:none;
	 }
	 #knolln {
		 display:none;
	 }
	.copy {
		width:80%;
		height:auto;
		margin-bottom:3vh;
		margin-top:3vh;
	}
	#return-to-top p {
		padding-top:40%;
	}
	#knoll_mobile {
		display:inline;
	}
	#prof {
		width:80%;
	}
	a.expand {
		width:90%;
		font-size:4vw;
		padding:5px 0.5%;
	}
	.list-wrap {
		width:80%;
		margin-left:10%;
		margin-bottom:3vh;
		margin-top:3vh;
	}
	#prof_mobile_float {
		display:inline;
	}
	#profs .nav li {
		width:50%;
	}
 }
 @media only screen and (max-width : 320px) {
	 #main-nav {
		 display:none;
	 }
	 #logo-container {
		 display:none;
	 }
	  #knolln {
		 display:none;
	 }
	#knoll_mobile {
		display:inline;
	}
	#foo {
		display:inline;
	}
	.effects {
		width:50%
	}
	#prof_mobile_float {
		display:inline;
	}
	#profs .nav li {
		width:50%;
	}
 }