@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

body {
	font-family: 'Waiting for the Sunrise', cursive;
	letter-spacing:0;
	color:#666;
}

.fLeft {
	float:left;
	padding:0 25px 15px 0;
}
	

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

.gridContainer {
	width: 990px;
	margin: 0px auto 0 auto;
}


/* TOP NAV MENU */
	#textNav {
		width:525px;
		margin: 0 auto 0 auto;
		padding: 20px 0 150px 0;
		display:block;
	}
	
	#textNav img {
		width:125px;
	}

	.textNavLogo {
		float:left;
	}
	
	.textNavLinks {
		float:left;
		display:inline;
		margin:0;
		padding:40px 0 0 0;
		width:200px;
	 	font-size:18pt;
		font-weight:bold;
		letter-spacing: 0.07em;
		text-transform:uppercase;
		text-align:center;
	}
	
	.textNavLinks a {
		text-decoration:none;
		color:#666;
	}
	

	.textNavLinks a:hover {
		text-decoration:none;
		color:#e28525;
	}
	
/* HOME PAGE */

.circleDiv {
	float:left;
	padding:15px;
}

.circleDivM {
	display:none;
	float:left;
	padding:15px;
}

.circleDivOrange {
       position: absolute;
       width:300px;
       overflow: hidden;
	   opacity:0;
    }
	
.circleDivOrangeTitle {
       position: absolute;
	   top:100px;
	   width:300px;
	   text-align:center;
       color:#FFF;
	   font-family: 'Vollkorn', serif;
    }
	
.circleDivOrangeTitle h1 {
	   font-size:33px;
	   line-height:35px;
	   padding:25px 0 0 0;
	   margin:0;
}

.circleDivOrangeTitle h3 {
	   font-size:33px;
	   line-height:35px;
	   padding:0;
	   margin:0;
}

.circleDivOrangeTitle h2 {
	font-family: 'Waiting for the Sunrise', cursive;
	letter-spacing:.08em;
	   font-size:21px;
	   text-transform:uppercase;
	   padding:0;
	   margin:0;
}
	
.circleDiv img {
	width:300px;
	height:300px;
}

.circleDivM img {
	width:300px;
	height:300px;
}

/* Contact page */

.contactPage {
	width:98%;
}

.leftCol {
	float:left;
	padding:0 0 250px 0;
	width:40%;
}

.leftCol img {
	width:90%;
}

.rightCol {
	border-top:1px dotted #e28525;
	border-bottom:1px dotted #e28525;
	padding:0 0 20px 0;
	position: relative;
	float:right;
	width:60%;
}

.contactPage h1 {
	font-family: 'Vollkorn', serif;
	font-weight: normal;
	color:#666;
	font-size:22px; 
	line-height:32px;
}

.contactPage p {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size:14px;
	line-height:26px;
}

.contactPage a {
	color:#e28525;
	text-transform:none;
	font-size:15px;
}



.emailCursive {
font-family: 'Waiting for the Sunrise', cursive; letter-spacing:.02em; font-size:16px;
line-height:30px;
text-transform:uppercase;
letter-spacing:.03em;
}

.icons {
	float:left;
	padding:0 15px 0 0;
	width:40px;
}


/* Project page video */
.videoBoxContainer {
		width:100%;
		max-width:990px;
		margin: 10px auto 0 auto;
	}

.videoBox {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 5px;
		height: 0;
	}
	
.videoBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
.videoCreditsBox {
	float:left;
	width:78%;
	border-right:1px dotted #e28525;
	margin:10px 0 10px 0;
	padding:0 15px 0 0;
	text-transform:uppercase;
}

.roleDesc {
	float:left;
	padding:5px 10px 5px 5px;
	margin-right:10px;
	font-size:16px;
	font-weight: bold;
	border-right:1px dotted #e28525;
}

.videoCreditsBox h1 {
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:16px;
	font-weight: bold;
	padding:5px;
	margin:0;
}

.videoCreditsBox h2 {
	border-top:1px dotted #e28525;
	letter-spacing: 0;
	text-transform:none;
	font-size:42px;
	line-height:48px;
	color:#666;
	font-family: 'Vollkorn', serif;
	margin:0;
	padding:15px 0 0 0;
}

.videoCreditsBox p {
	border-bottom:1px dotted #e28525;
	font-size:15px;
	line-height:20px;
	font-family: Helvetica, Arial, sans-serif;
	color:#666;
	text-transform:none;
	margin:0;
	padding:1px 10px 15px 5px;
}


.arrowBox {
	float:right;
	width:17%;
	padding-top:30px
}

.arrowBox a:hover {
	opacity:.5;
	}

.arrowText{
	text-align:center;
	text-transform:uppercase;
	font-size:16px;
	font-weight:bold;
	padding-bottom:5px;
}

.arrowL {
	float:left;
	width:47%;
}

.arrowR {
	float:right;
	width:47%;
}




/* Tablet Layout: 481px to 900px. Inherits styles from: Mobile Layout. */

@media only screen and (max-width: 750px) {

.gridContainer {
	width: 660px;
	margin: 0px auto 0 auto;
}

.circleDivM {
	display:block;
}

.contactPage p {
	font-size:15px;
	line-height:25px;
	padding:3px 0;
}

.videoCreditsBox {
	width:67%;
}

.arrowBox {
	width:25%;
	padding-top:40px;
}

}

@media only screen and (max-width : 550px) {
.leftCol {
	width:100%;
	text-align:center;
	padding:0 20px 10px 0px;
}

.rightCol {
	width:100%;
	padding-bottom:0;
}

.emailCursive {
font-size:18px;
}

.icons {
	padding:8px 15px 20px 0;
	width:50px;
}

}

@media only screen and (max-width : 480px) {
	
.gridContainer {
	width: 320px;
}

#textNav {
		width:320px;
		margin: 0 auto 0 auto;
		padding: 5px 0 5px 0;
		display:block;
	}
	
	#textNav img {
		width:100px;
	}

	.textNavLogo {
		float:left;
		padding-right:10px;
	}
	
	.textNavLinks {
		padding:30px 0 0 0;
		width:100px;
	 	font-size:16pt;
		letter-spacing:0;
	}

.circleDivOrange {
       width:145px;
    }
	
.circleDiv img {
	width:145px;
	height:145px;
}

.circleDivM img {
	width:145px;
	height:145px;
}

.circleDivOrangeTitle {
       position: absolute;
	   width:145px;
	   top:45px;
	   left: 0px;
    }
	
.circleDivOrangeTitle h1 {
	   font-size:18px;
	   line-height:20px;
	   padding:15px 0 0 0;
	   margin:0;
}

.circleDivOrangeTitle h3 {
	   font-size:18px;
	   line-height:20px;
	   padding:0;
	   margin:0;
}

.circleDivOrangeTitle h2 {
	font-family: 'Waiting for the Sunrise', cursive;
	letter-spacing:.08em;
	   font-size:14px;
	   text-transform:uppercase;
	   padding:0;
	   margin:0;
}
	
.linkMobile {
	padding-right:30px;
}
	
.circleDiv {
	float:left;
	padding:5px;
}

.circleDivM {
	display:block;
	padding:5px;
}

.contactPage a {
	font-size:17px;
}

.icons {
	width:55px;
	padding-right:18px;
}

.videoCreditsBox {
	float:none;
	width:99%;
	padding:0;
	border-left: none;
	border-right: none;
}

.videoCreditsBox h2 {
	font-size:28px;
	line-height:36px;
}

.arrowBox {
	float:none;
	margin:0 auto;
	width:165px;
	padding-top:5px
}



}