header,section {
	background: #28546c;
	margin: 0 0.5% 10px 0.5%;
	padding: 0.5%;
}

section {margin-bottom: 50px;}

footer p {
	text-align:center;
	font-size: 0.8em;
}

footer {
	width: 100%;
	height:40px;
	background:#fff;
	
	position: fixed;
	bottom: 0px;
	left: 0px;
}
 
 body {
	 font-family: Arial, Helveticia, sans-serif;
	 font-size: 100%;
 }
 
 h1{
	 color: #6d8fa2;
	 font-size: 2.5em;
	 text-shadow: 4px 4px 4px #042436;
	 /*Horizontal shadow, vertical shadow, blur distance, color of the shadow */
 }
 
 h2 { 
 color: #6d8fa2;
 font-size: 1.875em; 
 text-shadow:4px 4px 4px #042436;
 
 }
 p {font-size: 0.875em;}
 
 figure#sec-fig img{
	 transform: rotate(5deg);
	 margin-bottom: 10px;
 }
 
 img{
	 border: 1px solid #808080;
	 max-width: 100%;
	 height: auto;
 }
 
 figure{ text-align: center;}
 
 figure#as-fig img.rotate{
	 transition: all 1.16s ease-in-out;
	 /*ease-in-out specifies a transition effect with a low start and end */ 
 }
 
 figure#as-fig img.rotate:hover {
	 transform: rotate(180deg);
	 opacity: 0.5;
 }
 
 @media screen and (max-width: 750px){
	 header, nav, section {
		 
	 background-image: linear-gradient(#e5e5e5, #b2b2b2) ;
	 }
	 
 }
 
 @media screen and (max-width: 480px) {
	 
	 header, nav, section {
		background: #e2b900;
	 }
	 
	footer {
		background: #fff; 
		
	 }
	 
	 section {
		 width:   98%;
	 }
 }
 @media screen and (max-width: 330px) {
	 
	 header, nav, section{
		 background: #00ff7f;
	 }
	 
	 footer{
		 background: #fff;
	 }
	 section{
		 width: 98%;
	 }
	 
 }