@charset "UTF-8";



/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}

/* ----------------- Website background and general text colour ----------------- */
body{
	
	color: #f5aeb5;
	background-color:#ffffff;
	
}

a{
	color:#536b76;
	text-decoration:none;
}

a:hover{
	color:#f5aeb5;
}

p{
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:97%;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:1%;
	color:#536b76;
	
	
}


/* ----------------- Wrapper - keeps all content in the center of page -----------------  */
.wrapper{
	margin:auto;
	width:100%;
	height:auto;
	
}


.img{
	
	padding: 25px 0% 5px 40%;
	
}

.img2{
	
	padding: 0px 30% 0px 0%;
	
}
#top{
	height:40px;
}

#container{
	height:880px;
	background-image: url(../images/antdesign_main.jpg);
	background-repeat: no-repeat;
	background-position: 80% 0%;
	background-attachment: fixed;
	background-color: #f8f5f0;
	color: #536b76;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:2% auto 2& auto;
}



hr{
	height:1px;
	width:100%;
	background-color:#536b76;
	margin:1% 0;
}

main{
	width:50%;
	margin:0% auto 0 auto;
	padding:0% 0 2% 0;
	 
}

header{
	width:50%;
	margin:0% auto 0 auto;
	padding:10% 0 2% 0;
	 
}

header h1{
	font-family:'Inconsolata', ;
	text-align:center;
	font-size:170%;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:10px;
	margin-top:15%;
	color:#536b76;
	text-shadow: 0 1px 1px #c1c1c1;
}




header h2{
	font-family:'Inconsolata', ;
	text-align:center;
	font-size:120%;
	font-weight:normal;
	letter-spacing:1px;
	margin-top:1%;
	color:#243c48;
	text-shadow: 0 1px 1px #e9e8e8;
}
	
	
	header h3{
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:100%;
	font-weight:normal;
	margin-top:1%;
	color:#548b39;
}

.clearfix {
	float: none;
	clear: both;
}



#footer h3{
	margin:1% 0 1% 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:90%;
	font-weight:normal;
	text-align:center;
	color:#536b76;
	text-shadow: 0 1px 1px #c1c1c1;
}

#footer p{
	margin:1% 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:80%;
	font-weight:normal;
	text-align:center;
	color:#536b76;
	text-shadow: 0 1px 1px #c1c1c1;
}

footer{
	margin:2% 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:60%;
	font-weight:normal;
	text-align:center;
	color:#536b76;
	text-shadow: 0 1px 1px #c1c1c1;
	
}


.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  background: rgba(24, 30, 30, 0.2);
  width: 100%;
  height: 100%;
}


#bottom h3{
	
	margin:1% 0 3% 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight:normal;
	text-align:center;
	color:#548b39;
	text-shadow: 0 1px 1px #c1c1c1;
	
}

#bottom p{
	
	background-repeat: no-repeat;
	background-position: 80% 0%;
	background-attachment: fixed;
	background-color: #f8f5f0;
	margin:2% 0 3% 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:97%;
	font-weight:normal;
	text-align:center;
	color:#2d2d2d;
	text-shadow: 0 1px 1px #c1c1c1;
	height:40px;
	padding:2% 0px 0px 0px;
}

/* -- Make the highlight colours pretty -- */
::selection      { background:#f38094; color:#FFF;}
::-moz-selection  { background:#f38094; color:#FFF;}




/* ---------------------- RESPONSIVE STUFF ----------------------- */


@media only screen and (max-width: 1279px) {
	.wrapper{
		width:90%;
	}
	
}




@media only screen and (max-width: 1024px) {
	.wrapper{
		width:90%;
	}
	
	header h1{
		font-size:100%;
		color:#fff;
		padding: 10% 0% 0% 0%;
	}
	
	header h2{
		font-size:100%;
	}
	
	.img2{
		padding: 0% 0% 0% 0%;
	}
	
	.img{
		padding:0% 0% 0% 0%;
	}
		
}	

@media only screen and (max-width: 860px) {
	header h1{
		font-size:100%;
		color:#fff;
	}
	
	header h2{
		font-size:100%;
	}
	
	.img2{
		display:none;
	}
	
	.img{
		padding:0% 0% 0% 20%;
	}
	
	main{
		width:100%;
		
	}
	
}

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

	header h1{
		font-size:80%;
		
		color:#fff;
	}
	
	header h2{
		font-size:80%;
		color:#000;
	}


	#container{
		width:70%;
	}
	
	.img2{
		display:none;
	}
	
	img{
		
		width: 100%; height: auto; 
	}
	
	main{
		width:100%;
		
	}
	
}

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

	header h1{
		font-size:80%;
		
		color:#fff;
	}
	
	header h2{
		font-size:80%;
		color:#000;
	}


	#container{
		width:100%;
	}
	
	.img2{
		display:none;
	}
	
	img{
		
		width: 100%; height: auto; 
	}
	
	main{
		width:100%;
		
	}
	
}

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

	header h1{
		font-size:100%;
		margin-top:14%;
		
		color:#000;
	}
	
	header h2{
		font-size:100%;
		color:#000;
		margin-top:14%;
	}
	
	#container{
		width:100%; height: 70%;
		
	}
	
	.img2{
		display:none;
	}
	
	img{
		padding:3% 0% 0% 0%;
		width: 100%; height: auto; 
	}
	
	.wrapper{
		width:95%;
	}
	
	main{
		width:100%;
		
	}
	

}