@media only screen and (max-width: 1400px){
  html {font-size: 12px}
  section#corals .blurb {width: 47%}
}

@media only screen and (max-width: 1024px){
  html {font-size: 14px; height: auto !important; width: 100% !important; background-color: #000}
  h1.logo {display: block; width: 100%; height: 60px; background: transparent url(../images/mobile-logo.png) 50% 50% no-repeat; background-size: auto 100%; position: fixed; z-index: 9999; top: 50px; left: 0; text-indent: -9999em}
  .specials {}
  .section-group {position: relative; height: 1080px}
    .section-group section {height: 100% !important}
    
  section .blurb {position: relative; top: 300px !important; height: auto; z-index: 2000; text-align: center; width: 60% !important; left: 20% !important}
    
  section p:last-child {margin-bottom: 100px}
  span.scroll-cta {display: none}
  
  .element {display: none}
  .tablet .element-tablet {display: block}
  
  .background-image {display: none}
  
  section {display: none}
  section.active {display: block}
  
  nav {display: none}
  
  a.res-menu-link {display: block}
  .res-menu {display: block}
  .res-menu.active {bottom: 0; opacity: 1}
  
  section#contact {background: transparent url(../elements/tablet/back-fish.jpg) 50% 0 no-repeat}
  section#contact .sections {padding-top: 200px}
  section#contact .section {}
  section#contact address * {color: #fff !important}
  section#contact .gmap {}
}

@media only screen and (max-width: 800px){
  .sections > .section {float: none; width: 100% !important}
  section#contact {left: 0; margin-left: 0}
}

@media only screen and (max-width: 768px){
  
}

@media only screen and (max-width: 568px){
  html {font-size: 11px}
  h1.logo {background-size: 70% auto; top: 20px}
  .specials {display: none}
  .section-group {height: 1080px}
    section .blurb {top: 288px !important}
      section .blurb h2 {margin-bottom: 20px}
  
  .phone .element-tablet {display: none}
  .phone .element-mobile {display: block}
  
  a.res-menu-link {top: 90px}
  
  section#contact {background: transparent url(../elements/mobile/back-fish.jpg) 0 0 no-repeat}
  section#contact .sections {padding-top: 100px}
  section#contact .sections .gmap {display: none}
}

@media only screen and (max-width: 320px){
  .section-group {height: 720px}
  section .blurb {width: 80% !important; left: 10% !important; top: 200px !important}
}