/* CSS LAYOUT STARTS */

		body{
			color: #fff;
			font: 1em 'Source Sans Pro', sans-serif;
			text-align: left;
		}
	
/*     MEDIA QUERIES     */

/* FOR MOBILE DEVICES WITH A MAXIMUM OF 760PX WIDTH */
	
	@media screen and (max-width: 760px) {
		#content{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: minmax(35px, auto);
			grid-gap: 10px;
			max-width: 960px;
			margin: 0 auto;
			grid-template-areas: 
				"header header header header"
				"main main main main"
				"main main main main"
				"article article article article"
				"footer footer footer footer"
				"section section section section"
				"aside aside aside aside"
				"nav nav nav nav"
				"nav nav nav nav";
		}	
	}	
		
/* FOR LARGE SCREEN WITH A MINIMUM OF 760PX WIDTH */

	@media screen and (min-width: 760px){
		#content{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: minmax(35px, auto);
			grid-gap: 10px;
			max-width: 960px;
			margin: 0 auto;
			grid-template-areas: 
				"header header header header"
				"main main section section"
				"main main nav nav"
				"aside aside nav nav"
				"article article footer footer";
		}
	}
		
		#content > *{
			padding: 10px;
		}
		
/* PROPERTIES OF ALL OF THE BLOCKS OF THE GRID */		
		
		header{
			grid-area: header;
			background: #2eb2ff;
		}
		
		#header img{
			width: 100%;
			align-content: left;
		}
		
		main{
			grid-area: main;
			background: #fff;
		}
		
		#main img{
			align-content: center;
			width: 100%;	
		}
		
		section{
			grid-area: section;
			background: #ff00c3;
		}
		
		#section p{
			font: 1em 'Source Sans Pro', sans-serif;
			text-align: center;
			color: #000;
		}
		
		aside{
			grid-area: aside;
			background: #0ffb00;
		}
		
		#aside p{
			font: 1em 'Source Sans Pro', sans-serif;
			text-align: center;
			color: #000;
		}
		
		nav{
			grid-area: nav;
			background: #fff;
			border: 0px;
			border-color: #000;
			border-style: solid;
			overflow-y: scroll;
			overflow-x: hidden;
			max-height: 300px;
		}
		
		article{
			grid-area: article;
			background: #fff;
			border-top: 1px;
			border-top-color: #000;
			border-top-style: solid;
		}		
		
		#article p{
			font: 1em 'Source Sans Pro', sans-serif;
			text-align: center;
			vertical-align: bottom;
			color: #000;
			padding: 0px;
			margin-top: 10px;
			font-weight: bold;
				}
		
		footer{
			grid-area: footer;
			background: #fff;
			border-top: 1px;
			border-top-color: #000;
			border-top-style: solid;
			text-align: center;
		}
		
		
/* ACCORDION NAVIGATION */

.accordion {
	width: 100%;
	padding: 0;
	margin-top: 5px;
	list-style: none;
}

.accordion-header {
	display: block;
	padding: 10px 15px;
	background: #fff;
	border-top: 1px;
	border-top-color: #000;
	border-top-style: solid;
	border-left: 1px;
	border-left-color: #000;
	border-left-style: solid;
	font-family: 'Nunito Semibold';
	font: 1em 'Source Sans Pro', sans-serif;
	color: #3bbced;
	text-decoration: none;
	text-align: left;
	font-size: 1.2em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	margin-bottom: 5px;
}

.accordion-header:hover {
	background: #2eb2ff;
	border-top: 1px;
	border-top-color: #000;
	border-top-style: solid;
	border-left: 1px;
	border-left-color: #000;
	border-left-style: solid;
	border-right: 1px;
	border-right-color: #000;
	border-right-style: solid;
	border-bottom: 1px;
	border-bottom-color: #000;
	border-bottom-style: solid;
	font: 1em 'Source Sans Pro', sans-serif;
	color: #fff;
	text-decoration: none;
	text-align: left;
	font-size: 1.2em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	margin-bottom: 5px;
	
}

.accordion-content p {
	margin: 0 0 15px 0;
	font-family: 'Nunito Semibold';
	font: 1em 'Source Sans Pro', sans-serif;
	color: #000;
	text-align: justify;
}

.accordion-content {
	padding: 0;
	height: 0;
	overflow: hidden;
}

.accordion-content:target {
	height: auto;
	padding: 15px;
}