/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	
	
	/* end reset*/
	
	
	
	
	
	/* default styles (all device widths)*/
	body {
		background-color: lightgrey;
	 	font-family: Helvetica, Arial, sans-serif, grey;
	 	}

	#grid-container {
		width: 80%;
	    max-width: 900px;
		min-width: 500px;
		height: 600px;
		margin: 2% auto;
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas: 
			"header header aside"
			"main main aside"
			"footer footer aside";
		grid-gap: 0;
			}

	 
	#wrapper {
		background-color: lightgrey;
	 	width: 90%;
	 	margin: 5%;
	 	}
	
	header {
		font-size: 1.5em;
		width: 100%;
		margin-bottom: 1.5em;
		margin-top: 3%;
		}
	
	#main  {
		background-image: url(img/bgimg.jpg); 
		width: 100%;
		font-size: 1.2em;
		margin-bottom: 5%;
		}
	
	h1  {
		font-size: 2em;
		font-weight: bold;
		color:#85272A;
		text-align: center;
		padding: 4%;
		}

	h2 {
		font-size:1.5em;
		font-weight: bold;
		color: #85272A;
		text-align: center;
		padding: 4%;
		}

	h3 {
		font-size:1.5em;
		font-weight: bold;
		color:;
		text-align: center;
		padding: 4%;
		}


	
	footer {
		width: 100%; 
		margin-top: 1.5em;
		margin-bottom: 1%;
		clear: both;
		height: 50px;
	}
	
	img {
		display: block;
		width: 100%;
  		max-width:;
	} 
	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #47788F ;
	}
	nav li {
		
		float: left;

	}
	nav li a {
		display: block;
		color: #333;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

	nav li a:hover {
		background-color:  #83A689;
	}

	nav .active {
		background color: yellow;
	}
	p {
		text-indent: 25px;
	}


	
	  	
	.bgimg1 {  
		background-image: url("img/bgimg1.jpg");
		height: 500px;
		float:none; 
		width: 100%;
		margin: 10% 0 10% 0;
		padding-bottom: 0%;
		
		
		}
	
	.bgimg2 { 
		background-image: url("img/bgimg2.jpg");
		height: 500px;
		float:none; 
		width: 100%;
		max-width: 
	    margin: 10% 0 10% 0;
		padding-bottom: 0%;
		 
		}
		
	.bgimg3 { 
		background-image: url("img/bgimg3.jpg");
		height: 500px;
		float:none;
		width: 100%;
		margin: 10% 0 10% 0;
		padding-bottom: 0%;
		
		}
	
	


	/* tablet styles */
	@media only screen and (min-width: 500px) and (max-width: 800px) {
	
	
	 header {
	 	margin-top: 3%;
	 	}
	 	
	 #main  {
		font-size: 1.2em;
		margin-bottom: 3%;
		}
	
	 h1  {
		font-size: 2.2em;
		font-weight: bold;
		}
	 
	 footer {
	 	height: 100px;
	 	margin-bottom: 3%;
	 	}
	 	
	 	
	.bgimg1 { 
	
		background-image: url("bgimg1.jpg");
		max-width: 100%;
		min-height: 300px; 
		float:left; 
		width: 48%;
		margin: 1% 3% 5% 0;
		padding-bottom: 0%;
		}
	
	.bgimg2 { 
		float:right; 
		width: 48%;
		margin: 1% 0% 5% 0;
		padding-bottom: 0%;
		}
		
	.bgimg3 { 
		float:none; 
		width: 48%;
		margin: 1% 0;
		padding-bottom: 0%;
		clear: both;
		}
	
	}
	
	
	
	/* desktop styles */
	@media only screen and (min-width: 801px) {
	

	 header {
	 	margin-top: 3%;
	 	}
	 	
	 #main  {
		font-size: 1.3em;
		margin-bottom: 5%;
		}
		
	h1  {
		font-size: 2.5em;
		font-weight: bold;
		}
		
	 
	 footer {
	 	height: 50px;
	 	margin-bottom: 3% 0% 3% 0%;
	 	}
	
	 .bgimg1 {
	 	
		float:left; 
		width: 31%;
		margin: 0% 3% 3% 0;
		padding-bottom: 0%;
		}
	
	.bgimg2 { 
		float:left; 
		width: 31%;
		margin: 0% 3% 3% 0;
		padding-bottom: 0%;
		}
		
	.bgimg3 { 
		float:right; 
		width: 31%;
		margin: 0% 0% 3% 0;
		padding-bottom: 0%;
		}
	}