
/* Structure */
#wrapper {	
		max-width:1440px;
		width:100%;
		Margin:auto;
		position:relative;
		
		}

div#header{
	position:relative;
	height:120px;}

#header img.logo{
	position:absolute;
	left:10px;
	bottom:13px;
	margin-top:10px;
	}

#header p#nav{
	font-family: "InterFace", Helvetica, sans-serif;
	font-size:16px;
	position:absolute;
	right:10px;
	bottom:10px;
	}
	
#about{
	width:1440px;
	height:750px;
	font-family: "InterFace", Helvetica, sans-serif;
	}
	
#about h{
	position:absolute;
	height:50px;
	top:10px;
	left:10px;
	width:660px;
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:26px;
	color:#000000;
	text-align:left;
	background:red;
	margin:0px;
	
	}
	
#about p{
	position:absolute;
	height:350px;
	top:10px;
	left:10px;
	width:660px;
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:19px;
	color:#000000;
	text-align:left;
	background:red;
	margin:0 120px 0 0;
	}
	
#about p#details{
	position:absolute;
	right:10px;
	width:660px;
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:19px;
	color:#000000;
	text-align:left;
	background:red;
	margin:0px;
	}
	

	

div#infoBlock {
	position: absolute;
	bottom: 17%;
	left: 12%;
	max-width: 30%;
	padding-bottom: 0;
	background: transparent;
	/* overflow: hidden;*/	
}	

p.title{
	font-family: "InterFace", Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:1px;
	font-size:12px;
	line-height:normal;
	color:#A9A9A9;
	margin:0px;
	padding:0px;
	}
	
p.project{
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:18px;
	line-height:normal;
	color:#1A1A1A;
	margin:0px;
	padding:0px;
	}
	
.light{font-family: "InterFace light", Helvetica, sans-serif;}
	
.number{color:#00AEFF;}
		
.black{color:#000000;}

.italic{
	font-family: "InterFace", Helvetica, sans-serif;
	font-size:14px;
	line-height:normal;
	text-transform:lowercase;
	}
		
.regular{
  	font-family: "InterFace", Helvetica, sans-serif;
	font-size:16px;
	font-weight:regular;
	padding:0 0 20px 0;
  	}
  	

	
#footer{
	
	max-width:1440px;
	margin-top:10px;
	width:100%;
	height:50px;
	color: #333333;
	
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	}
	
#location{
	
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:17px;
	width:30%;
	float:left;

	}
	
#contact{
	
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:17px;
	width:70%;
	float:right;
	text-align:right;

	}
	
	
	#text{
	
	max-width:1440px;
	margin-top:10px;
	width:100%;
	height:auto;
	color: #333333;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	}
	
#lefttext{
	
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:17px;
	width:47%;
	float:left;
	text-align:left;
	margin-right:5px;

	}
	
#righttext{
	
	font-family: "InterFace light", Helvetica, sans-serif;
	font-size:17px;
	width:47%;
	float:right;
	text-align:left;
	

	}
ul li{
	
	font-style:normal
	text-align:right;
	font-family:"InterFace light", Helvetica, sans-serif;
	font-size:17px;
	text-decoration:none;
	color:#333333;
	display:inline-block;
	padding-left:20px;

	
}
	
 unvisited link 
a:link {
    color: #000000;
}

/* visited link */
a:visited {
    color: #000000;
}

/* mouse over link */
a:hover {
    color: #000000;
}

/* selected link */
a:active {
    color: #000000;
}

a[href^="mailto:"]

{ 
  font-family: "InterFace light", Helvetica, sans-serif;
  color: black;
  font-size: 16px;
}

	
/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 1680px) {
		#wrapper {	
		width:100%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */	
	}   /* End of 1680 */
	 
/* All Mobile Sizes (devices and browser) */             
	@media only screen and (max-width: 1440px) {
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	}   /* End of 1440 */
	
	/* All Mobile Sizes (devices and browser) */   
	@media only screen and (max-width: 1140px) {
		#wrapper {	
		width:100%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	}   /* End of 1224 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 1140px) {
		
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}

		/* Style adjustments for viewports that meet the condition */
	}   /* End of 1224 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 1024px) {
		
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	}   /* End of 1024 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 768px) {
		#wrapper {	
	width:90%;
	Margin:auto;
	position:relative;
	}
	
	#header img.logo{
	width:auto;
	margin:auto;
	margin-top:10px;
	}

	#header p#nav{
	width:auto;
	margin:auto;
	margin-top:10px;
	}
		
	#location{
	width:100%;
	margin:auto;
	text-align:center;
	}
	
	#contact{
	width:100%;
	margin:auto;
	}
	
	ul li{
	text-align:center;
	display:block;
}

div#infoBlock {
	display:none;
	margin:auto;
	max-width: 100%;
	text-align:center;
	padding-bottom: 0;	
}	
		/* Style adjustments for viewports that meet the condition */
	}   /* End of 768 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 568px) {
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	}   /* End of 568 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 480px) { 
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	} 	/* End of 480 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 356px) { 
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	} 	/* End of 356 */
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 320px) { 
		#wrapper {	
		width:90%;
		Margin:auto;
		position:relative;}
		/* Style adjustments for viewports that meet the condition */
	} 	/* End of 320 */


