header, 
nav, 
footer {
   display: block;
}
/***********************************************/
 
body {
    
 background-image: url("bg.jpg");
 background-color: #ffffff;
 font-size: 100%;
 font-family: 'Raleway', sans-serif;
}
 
span.top
{
 font-size: 1.6em;
}
#wrapper {
    max-width: 960px;
    margin: 0px auto;
    background-color: #FFFFFF;
   // margin-top: 20px;
    padding: 20px;
}
 
header {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
//    margin-bottom: 20px;
}
 
#content {
    width: 100%;
    //height: 520px;
    background-color: #ffffff;
    float: right;
    margin-bottom: 20px;
}
 
nav {
   width: 17%;
   height: 520px;
   float: left;
   background-color: #FACC2E;
//   margin-bottom: 20px;
}
 
footer {
    clear: both;
    width: 100%;
  //  height: 50px;
    background-color: #74c697; 
  //  margin-bottom: 20px;

}
div.footer

{
padding-left:50px;

}

@media screen and (max-width:800px)
{
   font-size: 3em
   nav
   {
       width: 100%
   }
   
   #content
   {    margin-top: 10px;
       font-size: 2.2em;
   }
   footer
   {
      font-size: 2.2em;
   }
}



@media screen and (max-width:650px)
{
span.top
{
 font-size: 1.3em;
}


   font-size: 1.5em
   nav
   {
       width: 100%
   }
   
   #content
   {    margin-top: 10px;
       font-size: 2.5em;
   }
   footer
   {
      font-size: 2.0em;
   }
}