/* reset browser styles */
html, body, div, span, 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%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */
html { 
  background: url(images/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  background-color: rgb(255,255,255);
  border: 3px solid rgb(75,75,75);
  box-shadow: 0 0 15px 5px rgba(44,82,100,.75);
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  
}

#container{
	margin: 0 auto;
	max-width: 80%;
	text-align: center;
	display: inline-block;
	background-color: #FFF;
}
.content {
  max-width: 90%;
  margin: auto;
}

aside {
  float: left;
  margin: 0 1.5%;
  width: 90%;
  background-color: #FFF;
}

p {
 font-size: 1.25em;
}


h1 {
 font-size: 2.75em;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-weight: normal;
 text-align:center;
 letter-spacing: 1px;
 color: rgb(133,161,16);
 text-transform: uppercase;
 background-color: rgb(226,235,180);
 padding: 5px 15px 2px 15px;
 margin: 0 -15px 20px -15px;
}
h2 {
 font-size: 1.5em;
 font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
 color: rgb(156,27,31);
 border-top: 2px dotted rgb(141,165,22);
 border-bottom: 2px dotted rgb(141,165,22);
 padding-top: 5px;
 padding-bottom: 5px;
 margin: 15px 0 5px 0;
 overflow: hidden;
 }
 #content {
	float: left;
	padding: 3%;
	width: 90%;
	background-color: #fff;
}
.center {
margin: auto;
width: 80em;
}



/*.sidebar {
 width: 30%;
 float: right;
 margin: 10px;
 background-color: rgb(250,235,199);
 padding: 10px 20px; 
 border: 1px dotted rgb(252,101,18); 
 border-top: 20px solid rgb(252,101,18);
 border-radius: 10px;
 box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
.sidebar h2 {
 border: none;
 margin-top: 0;
 padding: 0;
}*/
/* Navigation
--------------------------------------------- */

/*.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	header {
		text-align: center;
	}

	nav {
		text-align: center;
	}

	#aside {
		width: 60%;
		padding: 3%;	
	}



}

@media all and (max-width : 330px) {

	topnav ul li {
		display:block;
		width: 94%;
	}

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}