@import url('bootstrap.min.css');
@import url('landingbg.css');

html, body
{ 
	height: 100%;
	width: 100%;
}

body{
	font-family:Montserrat,Helvetica,sans-serif;
	font-size:15px;
	background-color: #F3EFE0;
}

h1{font-size:2.143em;font-weight:700}

h2{font-size:1.429em}

h3{font-size:1.300em}

h4{font-size:1.071em}

p{
	font-family:"Varela Round",sans-serif;
	line-height:2em
}

#links p {line-height: 1.5em}

.button-container{
	position:fixed;
	/*top:3%;
	left:5%;
	height:21px;
	width:29px;*/
	width: 95px;
	height: 70px;
	cursor:pointer;
	-webkit-transition:opacity .25s ease;
	transition:opacity .25s ease;
	z-index:200;
}

.button-container:hover{
	opacity:.35;
}

.button-container .groupbars {
	/*height:21px;
	width:29px;*/
}

.button-container span{
	background:#22A39F;
	border:none;
	height:4px;
	width:29px;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:all .35s ease;
	transition:all .35s ease;
	cursor:pointer;
	margin: 20px 30px;
}

.button-container span:nth-of-type(2){top:9px}
.button-container span:nth-of-type(3){top:18px}

.top.active{
	-webkit-transform:translateY(9px) translateX(0) rotate(45deg);
	-ms-transform: translateY(9px) translateX(0) rotate(45deg);
	-moz-transform: translateY(9px) translateX(0) rotate(45deg);
	transform:translateY(9px) translateX(0) rotate(45deg);
	background:#FFF;
}
.middle.active{
	opacity:0;
	background:#FFF;
}
.bottom.active{
	-ms-transform:translateY(-9px) translateX(0) rotate(-45deg);
	-webkit-transform:translateY(-9px) translateX(0) rotate(-45deg);
	-moz-transform: translateY(-9px) translateX(0) rotate(-45deg);
	tranform:translateY(-9px) translateX(0) rotate(-45deg);
	background:#FFF
}

.overlay {
	position:fixed;
	background:#22A39F;
	top:0;
	left:0;
	width:0;
	height:100%;
	opacity:0;
	visibility:hidden;
	-webkit-transition:opacity .35s,visibility .35s,width .35s ease-in-out;
	transition:opacity .35s,visibility .35s,width .35s ease-in-out;
	overflow:hidden;
	z-index:100;
}

.overlay.open{
	opacity:.9;
	visibility:visible;
	width:100%;
}
.overlay nav{
	position:relative;
	height:60%;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	font-size:32px;
	font-family:Montserrat,sans-serif;
	font-weight:400;
	text-align:center;
}
.overlay nav ul{
	list-style:none;
	padding:0;
	margin:0 auto;
	display:inline-block;
	position:relative;
	height:100%;
}
.overlay nav ul li{
	display:block;
	height:20%;
	height:-webkit-calc(100% / 5);
	height:calc(100% / 5);
	min-height:32px;
	position:relative;
	opacity:0;
}
.overlay.open nav ul li{
	-webkit-animation:menuFade .5s ease forwards;
	animation:menuFade .5s ease forwards;
	-webkit-animation-delay:.35s;
	animation-delay:.35s;
}
.overlay.open nav ul li:nth-of-type(2){
	-webkit-animation-delay:.4s;
	animation-delay:.4s;
}
.overlay.open nav ul li:nth-of-type(3){
	-webkit-animation-delay:.45s;
	animation-delay:.45s
}
.overlay.open nav ul li:nth-of-type(4){
	-webkit-animation-delay:.5s;
	animation-delay:.5s
}
.overlay.open nav ul li:nth-of-type(5){
	-webkit-animation-delay:.55s;
	animation-delay:.55s
}
.overlay.open nav ul li:nth-of-type(6){
	-webkit-animation-delay:.55s;
	animation-delay:.55s
}

@-webkit-keyframes menuFade{0%{opacity:0;left:-25%}100%{opacity:1;left:0}}
@keyframes menuFade{0%{opacity:0;left:-25%}100%{opacity:1;left:0}}

.overlay nav ul li a{
	display:block;
	position:relative;
	color:#FFF;
	overflow:hidden;
}
.overlay nav ul li a:hover{
	text-decoration:none;
}
.overlay nav ul li a:after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	-webkit-transform:translateX(-105%);
	-ms-transform:translateX(-105%);
	transform:translateX(-105%);
	height:3px;
	width:100%;
	background:#FFF;
	-webkit-transition:.35s ease;
	transition:.35s ease;
}
.overlay nav ul li a:hover:after{
	-webkit-transform:translateX(0%);
	-ms-transform:translateX(0%);
	transform:translateX(0%);
}

#landing {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	margin-bottom: 0px;
	padding: 0px;
	opacity: 1;
	
	height: 100%;
}  

.jumbotron .container {
	top: 0%;
	opacity: 0.25;	
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 4;
	-webkit-animation: dropName 3s;  /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;  /* Chrome, Safari, Opera */
	animation: dropName 3s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes dropName {
	0% {
		top: 0%;
		opacity: 0.25;
	}
	100% {
		top: 28%;
		opacity: 1;
	}
}

@keyframes dropName {
	0% {
		top: 0%;
		opacity: 0.25;
	}
	100% {
		top: 28%;
		opacity: 1;
	}
}

.jumbotron .container > * {
 text-align: center; 
 color: #FFFFFF; 
}

.jumbotron .container h1 { 
	padding-bottom: 20px; 
	border-bottom: 2px solid #FFFFFF; 
	border-bottom-color: rgba(255,255,255,0.35); 
	display: inline-block;
}

.jumbotron .layover {
	  background-color: #424041;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 1;
    z-index: 2;
}

.jumbotron .scroll-down
{
	height: 50px;
	width: 50px;
	display: block;
	position: absolute;
	bottom: 0px;
	background-color: #222222;
	text-align: center;
	z-index: 6;
	opacity: 0.7;
	margin: 0px 25px;
}

.jumbotron .scroll-down .glyphicon {
	color: #ffffff;
	font-size: 20px;
	padding-top: 15px;
}


.jumbotron .scroll-down:hover .glyphicon {
	opacity: .7
}

.separator {
	padding: 50px 0px 100px;
}
/** 
 Have a set of rotating images on hover
 **/
.pics {
	margin: 15px auto;
	width: 320px;
	height: 400px;
}
  
.pics img {
	width: 300px;
	box-shadow: 10px 10px 5px #888888;
	cursor: pointer;
}

.pics img.portrait {
	height: 380px;
}

.pics img.landscape {
	height: 225px;
}

#profile p {
	margin: 15px auto;
	max-width: 363px;
}

#profile {
	background-color: #FFFFFF;
}

#contacts {
	background-color: #434242;
	color: #ffffff;
}

#projects .row > div { margin-bottom: 30px; }
#projects figure { 
	position: relative; 
	overflow: hidden; 
	margin: 0px auto;
}
#projects figure h3 { color: #FFF; font-weight: 700; margin-bottom: 10px; }
#projects figure img { width: 410px; }
#projects figure figcaption {
    padding: 20px 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
#projects figure a {
	z-index: 50;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

#projects figure .icon {
	z-index: 75;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 48px;
	height: 48px;
	
}

#projects figure .icon span {
	font-size: 18px;
	line-height: 18px;
	padding: 15px;
	color: #22A39F;
}


#footer p {
	text-align: center;
}

/*links to projects*/
#links ul li.image {
	list-style: none;
}

#links img {
	max-width: 480px;
}
#links li.image p{
	max-width: 480px;
}

/*effects*/
figure.effect {
	background: #22A39F;
	color: #FFF;
	width: 395px;
	height: 375px;
	box-shadow: 10px 10px 5px #888888;
}

figure.effect img {
	width: -webkit-calc(100% + 10px);
	width: calc(100% + 10px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	-moz-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/*figure.effect:hover img,*/
figure.touched img {
	opacity: 0.1;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect figcaption {
	text-align: left;
}

figure.effect h3, figure.effect p.subhead {
	position: relative;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	-moz-transition: opacity 0.35s, -moz-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect p.subhead{
	padding-bottom: 10px;
	line-height: 22px;
}

figure.effect span.icon {
	opacity: 0;
	background: none repeat scroll 0% 0% #ffffff;
}

figure.effect span.icon span {
	opacity: 0;
}

/*figure.effect:hover h3, 
figure.effect:hover p.subhead,*/
figure.touched h3, 
figure.touched p.subhead {
	opacity: 1;
}

/*Rewrite*/
figure.effect p.subhead:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	-moz-transition: -moz-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	-moz-transform: translate3d(-100%,0,0);	
	transform: translate3d(-100%,0,0);
}

/*figure.effect:hover p.subhead:after,*/
figure.touched p.subhead:after {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


figure.effect p.projectsum {
	opacity: 0;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	-moz-transform: translate3d(100%,0,0);	
	transform: translate3d(100%,0,0);
}

/*figure.effect:hover p.projectsum,*/
figure.touched p.projectsum {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

figure.effect span.icon {
	opacity:0;
	transition: opacity 2.35s;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

/*figure.effect:hover span.icon,*/
figure.touched span.icon {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

figure.effect span.icon span {
	opacity: 0;
	transition: opacity 2.35s;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

/*figure.effect:hover span.icon span, */
figure.touched span.icon span {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

/*Target Publications*/
#publications p:target, #patents div.highlight {
	background-color: #DDEEFF;
	font-weight: bold;
}

@media (min-width : 320px) and (max-width : 480px) {

	.button-container {
    	/*top: 3%;
    	left: 5%;*/
    	height: 55px;
    	width: 70px;
    	cursor: pointer;
    	transition: opacity 0.25s ease 0s;
	}
	
	.button-container .groupbars {
		/*height:21px;
		width:29px;*/
	}
	
	.button-container span {
		margin: 15px 15px;
	}
	
	/* Background that fits the media page*/
	/* more padding between text and the 3 bars*/
	/* the project figures should be smaller and fit the iphone without issues */
	#projects figure h3 { font-size: 16px; font-weight: 500; margin-bottom: 5px; width: 225px; }
	#projects figure img { width: 300px; }
	#projects figure figcaption {
    	padding: 0px 17px;
  	}
  	#projects figure .icon span {
    	font-size: 14px;
  	}
	figure.effect {
		width: 290px;
		height: 277px;
	}
	figure.effect p.subhead{
		font-size: 12px;
		line-height: 20px;
	}
	
	figure.effect p.projectsum {
		font-size: 12px;
		line-height: 20px;
	}
	
	.jumbotron .scroll-down {
		width: 50px;
		height: 50px;
		margin: 0px 10px;
	}
	
	.jumbotron .scroll-down .glyphicon {
		padding-top: 12.5px;
		font-size: 20px;
	}
	#links img {
		max-width: 275px;
	}
	#links video {
		max-width: 275px;
	}
	#links li.image p {
		max-width: 265px;
	}
		
}

@media (min-width: 481px) and (max-width : 760px) {
	.separator {
		padding: 50px 55px 100px;
	}
	
	.jumbotron .scroll-down {
		width: 50px;
		height: 50px;
		margin: 0px 15px;
	}
	
	.jumbotron .scroll-down .glyphicon {
		padding-top: 12.5px;
		font-size: 20px;
	}
	#links img {
		max-width: 360px;
	}
	#links video {
		max-width: 360px;
	}
	#links li.image p{
		max-width: 350px;
	}
}

@media (min-width: 768px){

	.overlay nav{height:65%;font-size:40px}
	.overlay nav ul li{
		display:block;
		height:20%;
		height:-webkit-calc(100% / 5);
		height:calc(100% / 5);
		min-height:40px;
		position:relative;opacity:0
	}
	.button-container{
		height:75px;
		width:100px;
		/*top:3%;
		left:2%;*/
	}
	
	.button-container .groupbars {
		/*height:27px;
		width:35px;*/
	}
	
	.button-container span {height:5px; width: 35px; }
	.button-container span:nth-of-type(2){top:11px}
	.button-container span:nth-of-type(3){top:22px}
	.top.active{
		-webkit-transform:translateY(11px) translateX(0) rotate(45deg);
		-ms-transform:translateY(11px) translateX(0) rotate(45deg);
		-moz-transform:translateY(11px) translateX(0) rotate(45deg);
		transform:translateY(11px) translateX(0) rotate(45deg);
		background:#FFF
	}
	.bottom.active{
		-ms-transform:translateY(-11px) translateX(0) rotate(-45deg);
		-webkit-transform:translateY(-11px) translateX(0) rotate(-45deg);
		-moz-transform:translateY(-11px) translateX(0) rotate(-45deg);
		tranform:translateY(-11px) translateX(0) rotate(-45deg);
		background:#FFF;
	}

}

@media(min-width:1200px)
{

	.overlay nav{height:70%;font-size:50px}
	.overlay nav ul li{
		display:block;
		height:20%;
		height:-webkit-calc(100% / 5);
		height:calc(100% / 5);
		min-height:50px;
		position:relative;
		opacity:0
	}
	.overlay nav ul li a:after{
	height:4px
	}
}