body {
    background-color: #648EF0;
    font: 100% Verdana;
    margin: 0;
}
aside {
    min-width: 160px;
    max-width: 60%;
    padding: 20px 20px;
    float: left;
    min-height: 600px;
    max-height: 100%;
    color: #FFFFFF;
    background-color: #AFAFAF;
    height:800px;
}
aside p {
    padding: 15px 20px;
    left: 10px;
    border: 4px;
}
article {
    color: #FFFFFF;
    padding:0;
    margin:0;
}
footer {
    clear: both;
    background-color:#AFAFAF;
    text-align: center;
    font-size:85%;
    
    max-height: 100%;
}
footer p {
    padding-top:3%;
}
header {
    text-align: center;
    background-color: #AFAFAF;
    height:200px;
    max-width: 100%;
    max-height: 100%;
}
header h1 {
    color: #FFFFFF;
    font-weight: 900;
    font-size: 2.5em;
    margin: 0 0 1em 0;
    position: relative;
    top: 18px;
    left: 10px;
}
h3, h1 {
    text-align: center;
    color: #FFFFFF;
}
h2 {
    text-align:center;
    color: #FFFFFF;
}
header p {
    color: #FFFFFF;
    font-weight: 900;
    font-size: 1em;
    margin: 2em;
    position:inherit;
    top: 18px;
    left: 10px;
}
img {
    width: 80%
}
.logo {
    max-width: 200px;
    max-height: 100%;
    float: left;
}
.nav {
    color: #FFFFFF;
    font-weight: 900;
    font-size: 2.5em;
    margin: 0 0 1em 0;
    position: inherit;
    top: 12px;
    left: 8px;
}    
nav ul {
    margin:0;
    list-style: none;
}
nav ul li {
    display: inline-block;
    margin: 0 0.35em;
}
nav ul li ul {
    display: none;
}
nav ul li a {
    border-radius: 5px;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.6em 1.2em 0.6em 1.2em;
    background-color: #757575;
    outline:0;
}
p {
    margin-bottom: 1.2em;
    color: #FFFFFF;
    text-align: center;
}
section {
    padding:8%;
    float: right;
    max-width: 65%;
}


@media screen and (min-width:320px) and (max-width:640px){
aside {
    display: none;
}
#dashboard {
    display: none;
}
header {
    max-height:150px;
    background-size:100%;
}
header h1 {
    font-size:1.5em;
}
header nav {
    position:relative;
    top:5px;
    width:100%;
    margin-left:20px;
    margin-bottom:20px;
}
header nav ul {
    position:relative;
    display: none;
}
header nav li {
    margin-bottom: 0px;
    z-index: 1000;
    border-top: 1px solid #FFFFFF;
}
header nav ul li, header nav ul li a {
    width:100%;
    float: none;
    text-align: left;
    color:#483838;
    background-color:#FFFFFF;
}
header nav li:hover ul,
header nav li.hover ul {
    width:100%;
    display: block;
    border-radius:0;
    position: relative;
    left:25px;float: none;
    z-index:1001;
}
.show-menu {
    font-family:Helvetica,Arial, sans-serif;
    text-decoration: none;
    color:#483838;
    background:#b49898;
    text-align: center;
    padding:10px 0;
    position: relative;
    top:-20px;
    display: none;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (max-width:1160px){
    header { max-height:150px;}
    header h1 { font-size:1.5em;}
    nav { position: relative; top:34px; left:-25px;}
    nav ul li a { font-size:90%;}
    section { float: none;}
    aside { float: none; max-width:100%;}
    #dashboard { display: none;}
}
@media screen and (max-width:760px){
    #wrapper {
        padding:0;
        width:auto;}
}
/*For Mobile Devices
@media only screen and (max-width:767px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}
    
 */