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

* {
	margin:0;
	padding:0;
	border:0;
}

html { overflow-y: scroll;}
body { background:#222; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}

aside { font-style: italic; font-size: 0.9em;}
h2 { font-family:Georgia, "Times New Roman", Times, serif; font-size:2.8em; line-height: 1.2em; margin-bottom: 10px; font-weight:100; }
h3 { font-family:Georgia, "Times New Roman", Times, serif; font-size:2.8em; line-height: 1.2em; margin-bottom: 10px; font-weight:100; }
p { font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.1em; line-height:1.6em; color: #7f5c36; }

#wrapper {
	width: 1024px;	
	min-width: 310px;
	margin: auto;
	padding: 0;
	box-shadow: 0 0 60px 10px #000;
	}

header {
	height: 60px;
	background: #000;
}
	.langs {
		float: right;
		width: 230px;
		height:60px;
		background:url(../images/header_02.jpg) 0 0 no-repeat;
	}

	.langs ul {
		list-style:none;
	}
		.langs ul li {
			float: right;
			padding: 20px 15px 0 0;
		}
		.langs ul li a {
			display: block;
			border: 1px solid #000;
			height:19px;
			width: 29px;
		}
		.langs ul li a.selected, .langs ul li a:hover {
			border: 1px solid #FFF;
		}
	
#row1 {
	float:left;
	width:100%;
}
	#row1 img {
		width:100%;
	}

#row2 {
	float:left;
	width:90%;
	padding: 40px 5%;
	display:table;
}
	#row2 .photo {
		width: 40%;
		margin-right: 5%;
		float: left;
		text-align:center;

		}
		#row2 .photo img {
			width:80%;
			max-width:359px;
		}
		
	#row2 .text {
		width: 55%;
		float: right;
		min-height:260px;
		display:table;
		}
		#row2 h2 {
			color:#832e00;
		}

.text .center {
	display:table-cell;
	vertical-align:middle;
}

#row3 {
	float:left;
	width:90%;
	padding: 40px 5%;
	background: #151515;
}	
	#row3 .text {
		width: 55%;
		margin-right: 5%;
		float: left;
		color: #bdb5a3;
		min-height:260px;
		display:table;
		}
		#row3 h3 {
			color:#b3884c;
		}
		#row3 p {
			color: #bdb5a3;
		}	
	#row3 .photo {
		width: 40%;
		float: right;
		text-align:center;
		}
		#row3 .photo img {
			width:80%;
			max-width:359px;
		}

#row4 {
	float:left;
	width:90%;
	padding: 40px 5%;
	display:table;
	background:#f4efe8 url(../images/side_03.jpg) 0 0 no-repeat;
}	
	#row4 .text {
		width: 55%;
		float: right;
		min-height:260px;
		display:table;
		}
		#row4 h2 {
			color:#9c681f;
		}
		#row4 p {
			color:#6c6246;
		}

#row5 {
	float:left;
	width:90%;
	padding: 40px 5%;
	background: #d4f2e1;
}	
	#row5 .text {
		width: 55%;
		margin-right: 5%;
		float: left;
		color: #bdb5a3;
		min-height:260px;
		display:table;
		}
		#row5 h3 {
			color:#0d5e2c;
		}
		#row5 p {
			color: #53665a;
		}
	#row5 .photo {
		width: 40%;
		float: right;
		text-align:center;
		}
		#row5 .photo img {
			width:80%;
			max-width:359px;
		}

#row6 {
	float:left;
	width:90%;
	padding: 40px 5%;
	display:table;
	background: #071026;
}
	#row6 .photo {
		width: 40%;
		margin-right: 5%;
		float: left;
		text-align:center;

		}
		#row6 .photo img {
			width:80%;
			max-width:400px;
		}
		
	#row6 .text {
		width: 55%;
		float: right;
		min-height:260px;
		display:table;
		}
		#row6 h2 {
			color:#cca165;
		}
		#row6 p {
			color:#b4b9c4;
		}

#footer {
	float: left;
	width:90%;
	padding: 20px 5%;
	background: #ebe9e6;
}
	#footer p {
		font-family:Arial, Helvetica, sans-serif;
		font-size:11px;
	}
	.col1 {
		width:180px;
		float:left;
	}
	.col2 {
		margin: 0 290px 0 200px;
	}
	.col3 {
		width:270px;
		float:right;
	}
	#footer a {
		color:#1850ad;
		text-decoration: none;
	}
		#footer a:hover {
			text-decoration:underline;
		}

.left {
	float: left;
}
.right {
	float:right;
}

	
/* Media Queries */
@media screen and (max-width: 790px) {
	.col2 {
		float:left;
		clear:both;
		width:100%;
		margin: 20px 0 0 0;
	}
}

@media screen and (max-width: 690px) {
	#row4 {
		background-image:none;
	}
	#row4 .text {
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
	}
}

@media screen and (max-width: 560px) {
	#row2 .photo, #row2 .text, #row3 .text, #row3 .photo, #row5 .text, #row5 .photo, #row6 .text, #row6 .photo {
		float: left;
		clear: both;
		margin: 0; 
		width: 100%;
		}
	h2, h3, p {
		text-align:center;
	}
	#footer p {
		text-align:left;
	}
	.col3, .col1 {
		float:left;
		clear:both;
		width:100%;
		margin: 20px 0 0 0;
	}

}

@media screen and (max-width: 460px) {
	header {
		height:100px;
		text-align: center;
		clear:both;
	}
	header h1 {
		float: none;
		display: block;
		margin: 0 auto;
	}
	header a {
		float: none;
		clear: both;
		display:block;
		text-align:center;
		margin:0 auto;
	}
}