@charset "utf-8";
/* CSS Document */
html{
	font-family:'PTSans-Regular', 'PT Sans', sans-serif;
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	margin: 0;
	padding: 0;
	height:100vh;
	background: rgba(51,51,51,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 12%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(51,51,51,1)), color-stop(12%, rgba(51,51,51,1)), color-stop(100%, rgba(0,0,0,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 12%, rgba(0,0,0,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 12%, rgba(0,0,0,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 12%, rgba(0,0,0,1) 100%);
	background: radial-gradient(ellipse at center, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 12%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000', GradientType=1 );
	max-width:1600px;
		transition: all .5s linear;

}

/* Prepare initial items to fade in */
.loading {
	opacity: 0;
	visibility: hidden;
}

/* Sitewide navigation menu */
#svgNav{
	position:relative;
	display:block;
	fill:#FFF;
	width:94%;
	margin:6px auto;
}
.navElement{
	font-size: calc(7em - 4vw);
	margin:0 0 0 1.2em;
	overflow:hidden;
	float:right;
}
.navElement:hover{
	fill:#2D952D;
}
#sub1{
	color:#FFF;
	position:relative;
	text-align:center;
	width:80%;
	top:-3000px;
	font-size:calc(1em + 2vw);
	margin:0 auto;
	overflow:hidden;
}
#sub2{
	color:#FFF;
	position:relative;
	text-align:center;
	width:80%;
	top:-2000px;
	font-size:calc(1em + 2vw);
	margin:0 auto;
	overflow:hidden;
}

/* Other sitewide styles*/
a {
	color:#87B1DC;
	text-decoration: none;
}
a:hover, .notesLink a:hover{
	color:#3FBF3F;
}

/* Lab, masonry related */
.container{
	width:100%;
	height:100%;
	margin:0 auto;
}
.labCard{
	animation: bounceIn 1s;
}

/* Project story styles */
.projectStory{
	margin:1em 0 1em 5vw;
	width:90vw;
}
.clientLogo{
	margin:0 0 6vw 0;
	width:calc(16em + 3vw);
}
.projectText{
	font-size:calc(.7em + .7vw);
	display:flex;
	flex-wrap:wrap;
	color:#E2DEDA;
}
p{
	width:calc(14em + 8vw);
	color:#E2DEDA;
	margin:0 1vw 2vw 0;
	flex-wrap:wrap;
}
.intro p {
	/*width:27vw;*/
	min-width:230px;
	width:27vw;
	color:#E2DEDA;
	flex-basis:auto;
	padding:0 2vw 0 0;
}
.intro2 {
	flex:1;
}
img{ 
	width:100%;
	height:auto;
	margin-bottom:6vw;
}
.imgGroup{
	font-size: calc(.7em + .5vw);
	max-width:44vw;
	min-width:230px;
	padding-right:1vw;
}

.caption{
	font-size: calc(.7em + .5vw);
	line-height:1.5em;
	margin:4vw 0 .7em 0;
	font-style:italic;
	color:#FFF;
	width:90vw;
}
ul, li{
	list-style-type: none;
}

/* 5-column style */
.fiveInColumn{
	width:15vw;
	height:auto;
	margin-left:2.5vw;
	margin-top:3vw;
	color:#FFF;
}
.fiveInColumn ul{
	font-style:italic;
	color:#999;
}
.fiveInColumn ul li{
	font-style:normal;
	color:#EEE;
}
.caption5small{
	margin-left:2.5vw;
	margin-bottom:-2vw;
	font-size: calc(.5em + .5vw);
	font-style:italic;
}
.leadIn{
	color:#D7DDDF;
	margin-top:4vw;
	margin-left:4%;
	padding-left:.5vw;
	font-size:calc(.5em + 1vw);
	animation: fadeInLeft 1s;
}

/* Modules for the Work page */
.moduleGroup{
	position:relative;
	width:100%;
	height:100%;
	margin:0 3%;
}
#Title{
	font-size:14em;
	fill:#FFF;
}
.titleText{
	font-size : 14vw;
	letter-spacing : -0.46px;
	text-align: center;
	color: #E2DEDA;
}
.subtitleText{
	font-size:calc(4em +10vw);
	line-height: 51px;
	text-align: center;
	color: #E2DEDA;
	margin: 0 auto;
}
.module{
	position:relative;
	display:flex;
	justify-content:left;
	text-align: center;
	overflow:hidden;
	float:left;
	margin:1.5vw;
	max-width:28vw;
	min-width:330px;
	animation: bounceIn 1s;
}
.child{
	margin: auto; 
}
.label{
	position:absolute;
	font-size:calc(.7em + .5vw);
	height:70px;
	width:100%;
	bottom:0;
	/*height:calc(100px + 9vw); */
	padding-top:10px;
	background-color:#000000;
	opacity:.7;
	border:1px solid #000;
	transition: .3s ease;
}

.module:hover .label {
	opacity:1;
	border:1px solid #333;
}

.module:hover{
	box-shadow:1px 1px 60px rgba(200, 200, 200, 1);
}
.thumbDescription{
	color:#FFFFFF;
	margin:2px 1em 0 1em;
	text-align:center;
}
.notes{
	clear:both;
	width:80vw;
	color:#E2DEDA;
	padding:0 0 0 5vw;
}
.notesLink a{
	margin:0 0 0 5vw;
	width:80vw;
	color:#E2DEDA;
	transform: translate(0px, 50px);
	color:#FFF;
	text-decoration:none;
	font-size:calc(.7em + .7vw);
}
.noteSubHead{
	font-size:calc(.7em + .7vw);
	font-weight:700;
	color:#E2DEDA;
	width:80vw;
	margin-top:2vw;
	margin-left:5vw;
	margin-bottom:2vw;
}
.noteDate {
	font-size:calc(.5em + .7vw);
	color:#9F9E9D;
	font-style:italic;
	width:100%;
	margin-left:1vw;
}
.bounce{
	animation: bounceIn .75s;
}
/* Uncategorized styles */
.tumblr {
	width:100px;
	margin:0 0 0 3.5vr;
}
.pat{
	width:400px;
	margin-left: 20vw;
}

@media (min-width: 425px){
	.aboutText{
		font-size:calc(.7em + .7vw);
		color:#E2DEDA;
		width:40vw;
		margin-left:39vw;
		margin-top:2vw;
	}
	#aboutGraphic{
		position:absolute;
		top:19vw;
		left:5vw;
		width:30vw;
		animation: bounceIn 1s;
	}
}
@media (max-width: 424px){
	.aboutText{
		font-size:calc(.7em + .7vw);
		color:#E2DEDA;
		width:80vw;
		margin-left:0vw;
		margin-top:2vw;
	}
	#aboutGraphic{
		position:relative;
		top:8vw;
		left:0vw;
		width:60vw;
		animation: bounceIn 1s;
	}
}

/* Transition definitions*/
@keyframes bounceIn {
  0% {
	transform: translate(-500px, 0px) scale(1.1); 
	 opacity: 0;
  }
  10% {
	transform: translate(20px, 0px) scale(.92);
  }
  20% {
	transform: translate(-10px, 0px) scale(1.07); 
  }		  
  30% {
	transform: translate(5px, 0px) scale(.94);
  }
  40% {
	transform: translate(-2px, 0px)scale(1.04); 
	opacity: 1;
  }		
  50% {
	transform: translate(1px, 0px) scale(.96);
  }
  60% {
	transform: translate(0px, 0px)scale(1.02); 
  }		
	70% {
	transform: translate(0px, 0px) scale(.98);
  }
  80% {
	transform: translate(0px, 0px)scale(1.01); 
  }	
  90% {
	transform: translate(0px, 0px)scale(.99); 
  }	
  100% {
	transform: scale(1);
  }
}

@keyframes fadeDownOut {
	0%{
		transform: translate(0px, 0px);
		opacity:1;
	}
	100%{
		transform: translate(200px, 0px) scale(.1);
		opacity:0;
	}
}	

@keyframes lowerLabel {
	0%{
		transform: translate(0, 0);
		opacity:.7;
	}
	50%{
		transform: translate(0, 30px);
		opacity:.7;
	}
	100%{
		transform: translate(0, 100px);
		opacity:.7;
	}
}

@keyframes fadeInLeft {
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}