@import url(https://fonts.googleapis.com/css?family=Lato);


/* STRUCTURE */

#pagewrap {
  padding: 0;
  width: 95%;
  max-width: 1080px;
  margin: 20px auto;
  margin-top: 0;
  padding-top: 0.3%;
  background-color: #e9dcaf;
 }


header {
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0;

 }

div.menubar {
  background-color: #8099db;
  width: 98%;
  margin: 0.5%;
  margin-top: 0;
  padding: 0.5%;
  text-align: center; 
  color: white;	
  font-size: 1em;
  font-weight: bold;
  line-height: 1.8;
 }

div.header {
  width: auto;
  height: auto;
  padding: 2%;
  background-color: #e9dcaf;
 }

#content {
  width: 84%;
  margin: auto;
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 3%;
  padding-top: 2%;
  background-color: #ffffff;
  min-height: 200px;
  box-shadow: 0 0 20px #777777;
 }

div.leftframe {
  width: 37%;
  display: inline-block;	
  vertical-align: top;
  margin-right: 2%;
  margin-bottom: 2%;
  font-size: 0.9em;
  text-align: center;
 }	

div.rightframe {
  width: 60%;
  display: inline-block;	
  vertical-align: top;
  margin-bottom: 2%;
 }	

div.lefthome {
  width: 40%;
  display: inline-block;	
  vertical-align: top;
  margin-right: 2%;
  margin-bottom: 5%;
  font-size: 0.9em;
  text-align: center;
 }	

div.righthome {
  width: 56%;
  display: inline-block;	
  vertical-align: top;
  margin-bottom: 5%;
  text-align: left;
 }	

footer {
  clear: both;
  text-align: center;
  width: 96%;
  margin-top: 3%;
  padding: 2%;
  padding-top: 0;
  line-height: 2;
 }

div.slideshow {
  width: 100%;
  height: 200%;
  margin-top: 3%;	
  margin-bottom: 2%;
  box-shadow: 0 0 3px #777777;
 }

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 1280px or less */
@media screen and (max-width: 1280px) {


}



/* for 980px or less */
@media screen and (max-width: 980px) {

  header {
   width: 99.5%;  
  }

  div.menubar {
    padding-right: 1%;
    padding-bottom: 2%;
   }

}

/* for 800px or less */
@media screen and (max-width: 800px) {

  #content {

   }

}



/* for 720px or less */
@media screen and (max-width: 720px) {


}


/* for 480px or less */
@media screen and (max-width: 480px) {


 #pagewrap {
  width: 100%;
 }

#content {
  width: 92%;
  margin: auto;
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 2%;
  padding-top: 2%;
  background-color: #ffffff;
  min-height: 200px;
  box-shadow: 0 0 10px #777777;
 }



div.leftframe {
  width: 32%;
  display: inline-block;	
  vertical-align: top;
  margin-right: 2%;
 }	

div.rightframe {
  width: 60%;
  display: inline-block;	
  vertical-align: top;
 }	

div.lefthome {
  width: 80%;
  margin-bottom: 1%;  
 }	

div.righthome {
  width: 97%;
  margin-bottom: 15%;
 }	


}