@import url(http://fonts.googleapis.com/css?family=Play:400,700);
body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, Futura, sans-serif;
	font-size: 14px;
	background-repeat: repeat-x;
	background-color: hsla(0,0%,100%,1.00);
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(49,39,131,1.00) 93.26%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(49,39,131,1.00) 93.26%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(49,39,131,1.00) 93.26%);
	background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(49,39,131,1.00) 93.26%);
}
h1, h2, h3{font-family: 'Play', sans-serif; color: #312783; font-weight: 700;}
img{max-width: 100%; height: auto;} 
header, nav, main, aside, footer {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding:0.5em 2em ;
}
#wrapper {
	width: 960px;
	margin: auto;
	background-color: hsla(247,55%,90%,1.00);
	-webkit-box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.82);
	box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.82);
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(185,180,217,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(185,180,217,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(185,180,217,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(185,180,217,1.00) 100%);
}
nav, main, aside {
	float: left;
	text-align: justify;
}
nav {
	width: 20%;
}
main {
	width: 80%;

}
aside {
	width: 20%;
}
header {
	background-color: hsla(248,55%,89%,1.00);
	padding: 0.2em 1em;
	-webkit-box-shadow: 0px 2px 2px 0 hsla(245,5%,50%,1.00);
	box-shadow: 0px 2px 2px 0 hsla(245,5%,50%,1.00);
	background-image: -webkit-linear-gradient(90deg,rgba(234,231,252,1.00) 0%,rgba(215,211,242,1.00) 49.74%,rgba(255,255,255,1.00) 80.83%,rgba(167,164,191,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(234,231,252,1.00) 0%,rgba(215,211,242,1.00) 49.74%,rgba(255,255,255,1.00) 80.83%,rgba(167,164,191,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(234,231,252,1.00) 0%,rgba(215,211,242,1.00) 49.74%,rgba(255,255,255,1.00) 80.83%,rgba(167,164,191,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(234,231,252,1.00) 0%,rgba(215,211,242,1.00) 49.74%,rgba(255,255,255,1.00) 80.83%,rgba(167,164,191,1.00) 100%);
}
footer {
	clear: both;
	text-align: center;
	padding: 1em;
	background-color: hsla(248,33%,78%,1.00);
}
/*nav Links Navigation etc.*/
nav ul {
	list-style: none;
	padding: 0;
}
nav li a {
	display: block;
	padding: 0.5em;
	/* [disabled]background-color: #FFFFFF; */
	text-decoration: none;
	color: hsla(247,36%,23%,1.00);
	border-top: 1px solid #33626A;
}
nav li a:hover {
	background-color: #FFFFFF;
}
nav li a:active {
	background-color: #E0E0E0;
}
.center {
	text-align: center;
}
.center img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 12px;
	background-color: #F8F2E6;
	-webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.45);
	box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.45);
}

@media only screen and (max-width: 1024px) {
#wrapper {
	width: 100%;
}
nav {
	width: 20%;
}
main {
	width: 80%;
}
aside {
	width: 100%;
}
}

@media only screen and (max-width: 600px) {
nav {
	width: 100%;
}
main {
	width: 100%;
}
}