@media only screen and (max-width: 1300px){
   .wrap { width: 100%; }
   #content { width: auto; padding: 2em; }
   header .button { right: 1em; }
   #hero { background-position: center center; }

   #intro, #faq, section#dash_intro, section#secondary_text, section#to_do { font-size: 120%; }
   #hero .wrap, #intro .wrap, #faq .wrap, section#dash_intro .wrap, section#secondary_text .wrap, section#to_do .wrap { width: 96%; }
   footer { width: 90%; margin: 0 auto; font-size: 90%; }
}


@media only screen and (max-width: 1020px){ 
  .checkin-options {float: none !important; width: 100% !important;}
}

@media only screen and (max-width: 800px) {
   header { height: 82px; }
   #logo img { height: 72px; }
   nav#main { position: absolute; right: 0; top: 14px;}
   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 {  }
   
   header .button { top: 19px; right: 19px; font-size: 18px; height: 44px; line-height: 44px; padding: 0 20px; }
   #interior.dashboard header .button { display: none; }
   
   #hero, #hero .wrap { height: calc(60vh - 80px); min-height: 400px; }
   #hero .wrap { width: 90%; }
   #hero .text { width: 100%; text-align: left; font-size: 120%; bottom: 2em; }
   
   #intro .wrap, #faq .wrap, section#dash_intro .wrap, section#secondary_text .wrap, section#to_do .wrap { width: 90%; }
   
   section#to_do li { width: 50%; }
   section#to_do li a { height: 92%; }
   
   #paid-for { font-size: 100%; margin: 0 1em; }
   #content { width: auto; padding: 1em; }
   
   
}

@media only screen and (max-width: 680px) { 
   #content { font-size: 90%; line-height: 1.4; }
   #intro, #faq, section#dash_intro, section#secondary_text, section#to_do { font-size: 100%; }
}

@media only screen and (max-width: 520px) { 
   #hero .text { font-size: 100%; bottom: 1em; }
   .button { font-size: 18px; height: 44px; line-height: 44px; padding: 0 20px; }
   #hero .button { margin: .25em 0; }

   section#to_do li { width: 100%; height: auto; margin: .5em 0; }
   section#to_do li a { height: 92%; padding: 4%;}
   section#to_do li a span { position: relative; top: initial; left: initial; margin-right: initial; transform: translate(0,0); }
   section#to_do li a span p { margin: 0; }
}