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, Helvetica, 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 slow 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%;
	}
}