body{
		background-color: #e2e9f5;
		font-size: 13px; 
		color: dimgrey; 
		line-height: 1.2;}

a{text-decoration: none;color: dimgrey;}
a.line{color: blue; text-decoration: underline;}
h1, h2, h3, h4, h5{color: #000;}
h1{font-size: 1.2em;}
h2{font-size: 1.1em;}

.content{
		background-color: #bbcce9;
		position: absolute;
		right: 50%;
		width: 70%;
		margin-right: -35%;}
	

		
img {	width: 100%;}

nav{
		position: absolute;
		width: 100%;
		line-height: 2;
		font-size: 20px;}

ul.nav{
		text-align: center;
		list-style-type: none;}

li.nav{
		float: left;
		width: 23.5%;}

li.nav a:hover{
		background-color: #e2e9f5;}
	
.active{background-color: #e2e9f5;}

hr{margin-top: 80px;width: 90%;}
	
iframe{float: right; margin: 0 0 5px 5px}

section{
		padding: 90px 6% 120px 6%;}

footer{
		position: relative;
		padding: 10px 0;
		text-align: center;
		background-color: #a8bee3;}
		
#contact{
		width: 60%;
		background-color: #a8bee3;
		padding: 5px;}
		
@media all and (max-width:1100px){
.content{
		right: 50%;
		width: 800px;
		margin-right: -400px;}
}

@media all and (max-width:850px){
	
body{font-size: 0.9em;}
				
h1,h2,h3,h4,h5,h6{
				font-size: 0.9em;}
				p{padding: 2px;}
				.content{left: 0px;
					width: 100%;}
				ul.nav{text-align: left;}
				li.nav{clear: both;width: 50%;}
				hr{width: 0px;}
				iframe{width: 50%;}
		#contact{
		width: 90%;
		background-color: #a1b8e0;
		padding: 5px;}
}



@media (orientation: portrait){
	.content{
		left: 0px;
		width: 100%;}
	ul.nav{text-align: left;}
	li.nav{clear: both;width: 50%;}
	hr{width: 0px;}
	iframe{width: 50%;}
	#contact{
		width: 90%;
		background-color: #a1b8e0;
		padding: 5px;}
}