@media only screen and (max-width: 1340px){
   .wrap { width: 100% !important; }
   .content { width: 96%; padding: 3% 2%; }
   .content img, .content object, .content embed, .content #main iframe { max-width: 100% !important; height: auto !important;}

   #intro { height: 450px; background-size: cover; background-position: center center; }
   
   #id { width: 100%; margin: 0; }
   #id h1 { margin: 0 0 0 2%; }
}

@media only screen and (max-width: 1060px){
   header { height: 70px; border-top: 0; }
   header #logo { height: 50px; }
   header #logo img { height: 50px; }
   
   #hero { top: 70px;  margin-bottom: 70px; width: 96%; height: auto; }
   #overlay {     background-size: 100% 500px; background-position: top center;}
   .slide { height: 500px; }
   #stay-in-touch { position: relative; width: 100%; margin: 0; bottom: 0; background: #eee; }
   #feed article { width: 44%; }
   #intro { height: 400px; }
   
   h1 { font-size: 2.4em; }
   h2 { font-size: 2.0em; }
   h3 { font-size: 1.75em; }
   h4 { font-size: 1.4em; }

   nav { top: 10px; }
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; }
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   nav ul#menu li#top-menu  > a {  }
   nav ul#menu li#top-menu  > a:hover {  }
   nav ul#social{ display: none; }
   
   .photo.folder, .photo.page  { margin-top: -60px; } 
   .photo.folder img, .photo.page img { width: auto; height:200px !important; } 

   #id { height: 50px; padding-top: 70px; border-bottom: 5px #2d8c02 solid; background-position: right 70px; background-size: auto 50px;}
   #id h1 { line-height: 55px; }
   #signup form { width: 100%; }
   #signup h1 { font-size: 2em; }
   
   footer { top: 0; width: 90% }
   footer .contact { font-size: 13px; width: 100%; float: none; text-align: center; }
   footer .connect { font-size: 16px; width: 100%; float: none;  text-align: center; margin: 1em 0; }
}

@media only screen and (max-width: 800px){ 
   .slide { height: 400px; }
   #overlay { background-size: 100% 400px; }

}

@media only screen and (max-width: 640px){ 
   h1 { font-size: 2.0em; }
   h2 { font-size: 1.75em; }
   h3 { font-size: 1.5em; }
   h4 { font-size: 1.3em; }
   
   .slide { height: 300px; }
   #overlay { background-size: 100% 300px; }
   #intro .text { width: 80%; padding: 0 10%; }

   #id { background-position: 200px 70px; }
   .photo.folder img, .photo.page img { width: auto; height:150px !important; } 
   
   .left, .right { float: none; width: 90%; margin: 0 0 1em 0; padding: 5%; }
   ul.folder-list { margin: 1em 0; }
   ul.folder-list li { background: #eee; padding: 2% 3%; width: 100%; left: -3%; position: relative; }
   ul.folder-list li a { margin: 5px; }
   .form input, .form select, .form textarea { background: #eee; }
   
   article img, article object, article embed, article iframe { max-width: 100% !important; height: auto !important;}
   p img, p object, p embed, p iframe { max-width: 100% !important; height: auto !important;}
}

@media only screen and (max-width: 560px){
   .content { display: -webkit-box; display: -moz-box;display: box;-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; }
   .content > div#intro { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; }
   .content > div#signup { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; }
   
   #id h1 { font-size: 20px; font-weight: 300; }
   #id .chevron::before { font-size: 16px; margin: -2px 5px 0; }
   
   .slide { height: 250px; }
   #overlay { background-size: 100% 250px; }

   #feed article { float: none; width: 90%; height: auto; padding: 5%; margin: 1% 0; }
   #stay-in-touch h1, #signup h1 { font-size: 26px; }
   .signup .button  { top: 5px;  }
   .photo.folder, .photo.page  { margin: 0 0 1em 0;  width: 100%; float: none;  border: 0;} 
   .photo.folder img, .photo.page img { width: 100% !important; height: 50% !important; } 

}

@media only screen and (max-width: 400px){
   h1 { font-size: 1.8em; }
   h2 { font-size: 1.5em; }
   h3 { font-size: 1.3em; }
   h4 { font-size: 1.1em; }
   
   .slide { height: 200px; }
   #overlay { background-size: 100% 200px; }

   #stay-in-touch h1, #signup h1 { font-size: 22px; }

}