@media only screen and (max-width: 1000px){   
   body.home #wrapper, body.int #wrapper, .mceContentBody .int { background: none; padding: 0; border: 0;}
   #head { float: left; width: 90%; height: auto; padding: 5%; background-color: #fdfccc; background-image: url(/img/back_homepage_sm.jpg); background-repeat: no-repeat; background-position: top left; background-size: contain; }
   body.home .logo, body.int .logo { padding: 0; float: none; width: 100%; margin: 0 auto;height: auto; background: none; }
   .logo a { display: block; }
   .logo a img { display: none; }
   .logo span { display: block; text-align: right; text-transform: uppercase; font-family: Georgia, Times, serif; font-weight: 700; color: #5996b2; text-shadow: 2px 2px 2px #FFFFFF; font-size: 40px;  height: auto; line-height: 1; margin-bottom: 10px;}
   
   .player { float: right; width: 66%;  margin: 0 auto; padding: 2%; }
   .player audio { width: 100% !important; }
   
   body.home #nav, body.int #nav { height: auto; background: white; float: left; }
   body.home ul.menu, body.int ul.menu { padding: 0; width: 100%; height: auto; display: flex; }
   ul.menu li { float: none; width: auto; display: inline-flex; padding: 2%;  }
   ul.menu li a { width: 100% !important;  height: auto !important; background: none !important; text-align: center; }
   ul.menu li a span { display: inline-block; text-transform: uppercase; font-weight: 700; font-size: 110%; }
   body.int ul.menu li { float: none; width: auto; display: inline-flex; padding: 2%; }
   
   #mainpackage { width: 90%;  height: auto;  padding: 5%; clear: both; }
   #mainpackage .anythingSlider { width: 100%; height: auto; }
   #mainpackage .anythingSlider .wrapper { width: 100%; position: relative;}
   #mainpackage .anythingSlider ul li { height: auto; width: 90vw; }

   #module3 { width: 90%; padding: 2% 5%; position: relative; clear: both; display: block; text-align: center; -moz-border-radius: 0; -webkit-border-radius: 0; }
   .logo_ddaf { float: none; margin: 0 auto; }
   #module3 span.title { display: block; margin: .5em auto; }
   
   #bottom { width: 90%; padding: 2% 5%; }
   #bottom #module { width: 45%; min-height: auto !important; height: auto !important; float: left; margin: 0 .5% 1em .5%; padding: 2%;  }
   #bottom #module2 { width: 96%; float: left; padding: 2%; background: white; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
   #signup_form table td { display: block; }
   #bottom.second #module, #bottom.second #module2 { width: 100%; text-align: center; background: none; min-height: auto !important; height: auto !important; float: none; margin: 0 0 1em 0; padding: 0; -moz-border-radius: 0; -webkit-border-radius: 0;  }
   
   #content { width: 96%; padding: 2%; min-height: 1px; background-color: #fdfccc; }
   #content .page, .mceContentBody { float: none;  width: 100%; padding: 0; }
   #content .page2 {  float: none; width: 100%; padding: 0; }
      
   #footer { width: 90%; padding: 5%; text-align: center; border-top: 10px #f6e691 solid;}
   #footer .credits { float: none; }
   #footer .link { float: none; padding-bottom: 0;  margin: 1em 0; }   
}

@media only screen and (max-width: 850px){
   #timeline { width: 600px; position: relative; left: -4%; }
   #timeline .anythingSlider {  width: 560px; position: relative; top: 10px; left: 30px; }
   #timeline .anythingSlider .wrapper { width: 560px; overflow: auto;  }
   #timeline .anythingSlider ul li { width: 560px; }
   #timeline .image { width: 560px; }
}


@media only screen and (max-width: 800px){
   ul.menu li a span { font-size: 100%; }
   #mainpackage .description { width: 30%; }
   #mainpackage .image { float: right; width: 50%;  height: auto; position: relative; margin-right: 5%;  }
   #mainpackage .image img { float: none; width: 100%; height: auto; }
   #bottom #module { width: 96%; float: none; margin: 0 0 1em 0;  }
   
   body.news #content .page div { float: none !important; width: 100% !important; clear: both !important; margin-bottom: 2em; }
}


@media only screen and (max-width: 640px){ 
   ul.menu li a span { font-size: 80%; }

   #mainpackage .description { float: none; width: 100%; padding-top: 0; font-size: 16px; line-height: 1.2; text-align: center; }
   #mainpackage .description h2 { font-size: 24px; margin-bottom: .25em; line-height: 1.1; }
   #mainpackage .image { float: none; width: 60%; height: auto; margin: 0 auto; }
   #mainpackage .anythingSlider .arrow { top: 370px; }
   #mainpackage .anythingSlider .back { right: 51%; left: initial; }
   #mainpackage .anythingSlider .forward { left: 51%; }

   #module3 { padding: 5%; }
   #bottom { padding: 5%; }  
   
   #content { width: 90%; padding: 5%; }
   #content img, #content object, #content embed { max-width: 100% !important; height: auto !important;}
   #content iframe { max-width: 100% !important; height: 100% !important;}
   
   #timeline { width: 520px; position: relative; left: -4%; }
   #timeline .anythingSlider {  width: 480px; position: relative; top: 10px; left: 30px; }
   #timeline .anythingSlider .wrapper { width: 480px; overflow: auto;  }
   #timeline .anythingSlider ul li { width: 480px; }
   #timeline .image { width: 480px; }
}


@media only screen and (max-width: 560px) { 
   #timeline { width: 420px; position: relative; left: -4%; }
   #timeline .anythingSlider {  width: 380px; position: relative; top: 10px; left: 30px; }
   #timeline .anythingSlider .wrapper { width: 380px; overflow: auto;  }
   #timeline .anythingSlider ul li { width: 380px; }
   #timeline .image { width: 380px; }
}


@media only screen and (max-width: 440px) { 
   #timeline { width: 360px; position: relative; left: -4%; }
   #timeline .anythingSlider {  width: 320px; position: relative; top: 10px; left: 30px; }
   #timeline .anythingSlider .wrapper { width: 320px; overflow: auto;  }
   #timeline .anythingSlider ul li { width: 320px; }
   #timeline .image { width: 320px; }
}