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



body {
	min-width:20em;
	font-size: 1em;
	border:0;
	margin:0;
	padding:0;
	font-family: pragmatica-web, sans-serif; 
	font-weight:400;
	text-align:center;
	background-color: white;

}



.sans {
	font-family: pragmatica-web, sans-serif; 
	font-size:.75em;
	line-height: 1.5em;
	font-weight:400;
	font-style: normal; 

}

.sanslightlarge {
	font-family: pragmatica-web, sans-serif; 
	font-weight:200;
	font-size:2.25em;

}

.sanslightmedium {
	font-family: pragmatica-web, sans-serif; 
	font-weight:200;
	font-size:1em;
	line-height: 1.5em;

}


.serif {
	font-family: "Times New Roman", Times, serif;
	font-size:.75em;
}

.serifitalic {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size:1em;
}

.seriflargeitalic {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size:2.2em;	
}

.serifallcaps{
	font-family: "Times New Roman", Times, serif;
	font-style: italic; 
	font-size:1em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight:700;
}


.header {
	font-family: "Times New Roman", Times, serif;
	text-transform: uppercase;
	letter-spacing: .3ex;
	font-style: italic;
	color: #FFF;
	font-size: 90%;
	text-align: center;
	} 

.header a:link { color:#fff; text-decoration:none;}
.header a:visited { color:#fff; text-decoration:none;}
.header a:hover { color:#808080; text-decoration:none;}



a:link {
	color:#83c624;
	text-decoration:none;	
}     


a:visited {
	color:#83c624;
	text-decoration:none;
} 


a:hover {
	color:#dcddde;	
	text-decoration:none;
} 


a:active {
	color:#dcddde;
	text-decoration:none;
} 

a img { border: none; }

a img:hover { opacity:0.4;}
a img:active { opacity:0.4;}

hr {
	border:3px solid black;
}


/* 
*****************************************
 */
#center{	
	min-width:20em;
	max-width:68em;
	margin: 0 auto;
	overflow:visible;
	text-align:left;

}

#container{ 
	height:auto;
	max-width:65em;
	background-color: #fff;
	margin:0 auto 0 auto;
	padding:1.5em;
	position:relative;
	border-top:1px solid #ebebec;
	top:5em;
	overflow:hidden; 

}

	 
 #headerblock{
	height:5em;
	width:100%;max-width:68em;
	position: fixed;
	background-color: white;
	z-index:6;
	border-bottom:1px solid #ebebec;


}


 #headerblockfull{
	height:27em;
	width:100%; 
	position: absolute;
	top:5em;
	left:0;
	background-image:url('assets/images/hash.png');
	z-index:-1;	

}


 #headerblockfull2{
	height:5em;
	width:100%; 
	position: fixed;
	top:0em;
	left:0;
	background-color: white;
	z-index:0;	
		border-bottom:1px solid #ebebec;


}



.name{
	font-family: "Times New Roman", Times, serif;
	text-transform: uppercase;
	letter-spacing: .35ex;
	font-style: italic;
	font-size: 110%;
	padding: 1.6em 0 1.6em 1.5em;
	text-align: left;
	width:13em;
	position: absolute;
	left:0em;
	top:0em;
	overflow: hidden;
	}

	.name a:link { color:#474747; text-decoration:none;}	
	.name a:hover {	color:#83c624; text-decoration:none;}	
	.name a:visited { color:#474747;text-decoration:none;} 

#mainimg {
	height: auto; 
	width:100%; max-width:68em;
	position: fixed;
	top:5em;
	background-color: #fff;
}

#mainimgspacer {
	height: auto; 
	width:100%; max-width:68em;
	position: relative;
	top: 5em;

}


.fade {
margin-top: 
opacity :
}

#mainimg img{
	width:100%;

}

#copycontainer{
	padding:1.5em 0 2em 0 ;
	width:100%;
	overflow:hidden; 
	margin: 0 auto;
	border-bottom:1px solid #ebebec;

}


#projectinfo{
	width:57.589286%;
	overflow:hidden; 
	float: left;
	

}

.projecttitle {
	font-family: pragmatica-web, sans-serif; 
	font-weight:200;
	font-size:1.75em;
	padding: 0 0 1em .21428571em;
	width:100%;	min-width: 9em;
	float:left;

}

#project {
	padding:2em 0;
	margin: 0em 0 0 0;
	width:100%;
	height: auto;
	overflow:hidden; 
		border-bottom:1px solid #ebebec;



}
	
.projectdetails {
	font-family: pragmatica-web, sans-serif; 
	font-size:.75em;
	line-height: 1.5em;
	font-weight:400;
	width: 18.5em;	
	margin:.5em; 
	float:left;
}

.projectcopy {
	font-family: pragmatica-web, sans-serif; 
	font-size:.75em;
	line-height: 1.5em;
	font-weight:400;
	margin:.5em; 
	float:left;
}


#full{
	padding:3.125% 6.25%;
	overflow: hidden;

}


#half{
	padding:3.125% 6.25%;
}


.half{
	width:46.923077%;	
	padding: 1.5384616%;
	height: auto;
	float: left;
}

#halfcenter{
	width:46.923077%;	min-width: 18em;
	margin: 0 Auto;
	height: auto;
}

.full{
	width:96.923077%;	min-width: 18em; max-width:63em;
	padding: 1.5384616%;
	height: auto;
	float: left;
}

.third{
	width:30.096154%; max-width:63em;
	padding: 1.5384616%;
	height: auto;
	float: left;
}


.threequarter{
	width:66.071429%;	min-width: 18em;
	margin: 1.5384615%;
	height: auto;
	float: left;
}

.five{
	width:57.27272727%; max-width:31.5em;
	margin: 1.5384616%;
	height: auto;
	float: left;
}

.three{
	width:37.272727%; max-width:20.5em;
	margin: 1.5384616%;
	height: auto;
	float: left;
}	

nav{ 
width:100%;
float:right
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}
	
	
nav ul {
	background: white; 
	padding: 0 0;
	margin: 0;
	list-style: none;
	position: relative;
	display: inline-table;
	width:100%;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
	
	
nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #ffffff;
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 0px 0px;
		color: #ffffff; text-decoration: none;

	}
	
nav ul ul {
	background: #ffffff; border-radius: 0px; padding: 0;
	position: relative; top: 5em;
	width:100%; right:0;
				border:1px solid #ebebec;
}


	nav ul ul li {
		float: left; 
		position: relative;
		width:25%;

	}
		nav ul ul li a {
			padding: 0em 0em;
			color: #fff;
			border:1px solid #ebebec;

		}	
			nav ul ul li a:hover {
				background: #6d6d6d;
				opacity:0.4;
				filter:alpha(opacity=40); 
			}
			
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

.info{
	width:4em;
	height:2em;
	color: #FFF;
	margin:1.5em 0 1.5em 0;
	position:absolute;
	right:12em;
	top:0em;
	background-image: url('assets/nav/info.png');
	background-repeat:no-repeat; 
}

.info:hover{
	width:4em;
	height:2em;
	background-image: url('assets/nav/info_hover.png');
	background-repeat:no-repeat; 
}



#drawernav {
	width:4em;
	height:2em;
	margin:2em 0 1em 0;
	float: right;	
}

a.drawernav{
	width:4em;
	height:2em;
	margin:1.5em 0 1.5em 0;
	position:absolute;
	right:8em;
	top:0em;
	background-image: url('assets/nav/drawer.png');
	background-repeat:no-repeat; 
	border-left:1px solid #ebebec;


}

.drawernav:hover{
	width:4em;
	height:2em;
	color: #FFF; 
	background-image: url('assets/nav/drawer_hover.png');
	background-repeat:no-repeat; 
}


#arrowleft {
	width:4em;
	height:2em;
	float: right;	
}


.arrowleft{
	width:4em;
	height:2em;
	margin:1.5em 0 1.5em 0;
	position:absolute;
	right:4em;
	top:0em;
	background-repeat:no-repeat; 
	background-repeat:no-repeat;
	border-left:1px solid #ebebec;
 	background-image: url('assets/nav/arrowleft.png');


}

.arrowleft:hover{
	width:4em;
	height:2em;
	background-repeat:no-repeat; 
	background-image: url('assets/nav/arrowleft_hover.png');

}


#arrowright {
	width:4em;
	height:2em;
	float: right;	
}


.arrowright{	
	width:4em;
	height:2em;
	margin:1.5em 0 1.5em 0;
	position:absolute;
	right:0em;
	top:0em;
	background-repeat:no-repeat; 
	background-repeat:no-repeat;
	border-left:1px solid #ebebec;
	background-image: url('assets/nav/arrowright.png');
}


.arrowright:hover{	
	width:4em;
	height:2em;
	background-image: url('assets/nav/arrowright_hover.png');
	background-repeat:no-repeat; 
}

.thumb{
	width:100%;
	}

.thumb2{
	width:49.5%;
	}
	
	
#tag{
	width:96.923077%;
	margin:0 auto;
	padding:1em;
	border-bottom:1px solid #ebebec;
	font-size:1em;
	text-align: center;

}
.tag2{
	margin:0 auto;
	padding:1em 12em;
	border-bottom:1px solid #ebebec;
	font-weight:200;
	text-align: center;

}


.tagtitle{ 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size:1.25em;
	text-align: center;}


#group{overflow:hidden; width:100%;}


.marks{ margin: 0 auto; width:100%;}

/* 
**************ABOUT***************************
 */
#aboutmecontainer {
	width: 86.99187%; max-width:61.5em;
	top:0px;
	margin: 4em 6.504065% 6.504065% 6.504065%;
	background-color: #FFF;

}


.aboutheader {
	width:20em;
	margin: 0 61.682243% 2.8037388% 0;
	height: auto;
	float: left;
}


.about4L {
	width:20em;
	margin: 0 13.5607478% 2.8037388% 0;
	height: auto;
	float: left;
}

.about{
	width:38.317757%; max-width:20.5em;
	margin: 3em 0;
	height: auto;
	float: left;
}	

.aboutfull{
	width:100%; min-width:9.5em ;
	margin: 0
	height: auto;
	float: left;
}	


.abouthalf {
	width:45.714286%; min-width:9.5em;
	margin: 0;
	height: auto;
	float: left;
}

#socialmedia {
	width:6em;
	height:2em;
	position: relative;
	float: left;
	padding: 1em 90% 2em 0;

}

#linkedin {
	width:2em;
	height:2em;
	position: relative;
	float: left;
	padding: 0em 1em 0 0;

}
	
.linkedin {
	width:2em;
	height:2em;
	background-image: url('assets/linkedin.jpg');
	
}	

.linkedin:hover {
	width:2em;
	height:2em;
	background-image: url('assets/linkedinhover.png');

}
#instagram {
	width:2em;
	height:2em;
	position: relative;
	float: left;
	padding: 0em 1em 0 0;

}	
.instagram {
	width:2em;
	height:2em;
	background-image: url('assets/instagram.png');
	
}	

.instagram:hover {
	width:2em;
	height:2em;
	background-image: url('assets/instagramhover.png');

}

#footnote {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size:.75em;
	margin: 0 0 4em 0;
	width:90%;
	float:left;

}

/* 
*************mediaquerysmall****************************
 */

@media screen and (max-width:660px ) {
	 
 #headerblock{
	height:4em;
	}
	
.name{
	font-size: 1em;
	padding: 1.5em 0 1.5em 1.5em;
	text-align: left;
	position: absolute;
	left:0em;
	top:0em;
	overflow: hidden;
	}
	
.arrowright{	
	left:-80em;
	margin: 1em 0 1em 0;
	}

.arrowleft{	
	left:-80em;
	}

.info{
	Right:4em;
	margin: 1em 0 1em 0;}

a.drawernav {
	Right:0em;
	margin: 1em 0 1em 0;
	}


#center{
	width:100%
	overflow:hidden;
}

#mainimg {
	top:4em;
	}
#mainimgspacer {
	top:4em;
	}

#container{ 
	top:4em;
	}

#copycontainer {
	padding: 0em 0 1em 0;
	}
}

/* 
*************mediaquerymedium portrait****************************
 */

@media screen and (max-width:660px) and (orientation:portrait){

 #headerblockfull{
	height:0em;
	}
.thumb2{
	width:100%;
	}
	
	

.half{
	width:96.923077%;	min-width: 18em;
	padding: 1.5384616%;
	height: auto;
	float: left;
	}

.third{
	width:96.923077%;	min-width: 18em;
	padding: 1.5384616%;
	height: auto;
	float: left;
	}

.nav ul ul li {
	width:50%;
	}

.tagtitle{ 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size:1.25em;
	text-align: center;}
	
.sanslightmedium{
	font-size: .8em;
	}
}

/* 
*************mediaquerymediumlandscape****************************
 */

@media screen and (max-width:600px) and (orientation:landscape) {
	 
	 
 #headerblock{
	height:4em;
	position: absolute;
	}
	
.name{
	font-size: 1em;
	padding: 1.5em 0 1.5em 1.5em;
	text-align: left;
	position: absolute;
	left:0em;
	top:0em;
	overflow: hidden;
	}
	
.arrowright{	
	left:-80em;
	margin: 1em 0 1em 0;
	}

.arrowleft{	
	left:-80em;
	}

.info{
	Right:4em;
	margin: 1em 0 1em 0;
	}

a.drawernav {
	Right:0em;
	margin: 1em 0 1em 0;
	}


#center{
	width:100%
	overflow:hidden;
	}