/*
    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/



@media
only screen and                                         (max-width: 959px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 959px),
only screen and (min-resolution: 192dpi)            and (max-width: 959px) {
  ul.nice-menu a {
    font-size: 0.88888em;
  }


  div.view-world-ocean-exhibits .view-content,
  div.view-ocean-space-listings.view-display-id-page_1 .view-content {
    grid-template-columns: repeat(3, 1fr);
  }


}






/**************************************************************************/
/* Any screen 768px or narrower */
@media
only screen and                                         (max-width: 767px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px),
only screen and (min-resolution: 192dpi)            and (max-width: 767px) {
  ul.nice-menu a {
    font-size: 0.8333em;
  }


  #main-inner {
    flex-wrap: wrap;
  }

  .sidebar-right #content,
  .sidebar-left #content,
  .two-sidebars #content,
  #sidebar-left,
  #sidebar-right {
    width: 100%;
  }

  body.admin-menu {
    padding-top: 65px !important;
  }

  #block-menu-menu-login-account-menu {
    /* height: auto; */
    padding: 5px 0;
  }

  #block-block-7,
  #search-box {
    display: none;
  }


  div.view-world-ocean-exhibits .view-content,
  div.view-ocean-space-listings.view-display-id-page_1 .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .view-world-ocean-exhibits-gallery .view-content,
  .view-ocean-space-listings-gallery .view-content {
    grid-template-columns: repeat(2, 1fr);
  }

}











/* The nav menu block at the top, for mobile only */
#block-menu_block-2 {
  display: block;
}
#block-menu_block-2 h2 {
  display: none;
}


/* We use 639 because that is what our responsive-nav JS uses */
@media
only screen and                                         (max-width: 639px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 639px),
only screen and (min-resolution: 192dpi)            and (max-width: 639px) {
  /* collapse into the mobile menu */
  #nice-menu-1 {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    zoom: 1;
  }
  #nice-menu-1.opened {
    max-height: 9999px;
  }
  .nav-toggle {
    display: block;
  }
  #page #nice-menu-1 > li {
    font-size:16px;
    line-height:22px;
    text-align:center;
    display:block;
    width:100%;
    border:0;
  }
  #page #nice-menu-1 > li a {
    border:0;
    padding:5px 0;
    text-align:center;
    border-bottom:1px solid #38312f;
    display:block;
    width:100%;
  }

  /* The nav menu block at the top, for mobile only */
  #block-menu_block-2 {
    display: block;
  }
  #block-menu_block-2 h2 {
    display: none;
  }

  /* The nav menu block in the right sidebar for desktop / larger  */
  #block-menu_block-1,
  #block-menu_block-3 {
    display: none;
  }

  body.node-type-radio div.right,
  body.node-type-radio div.left {
    float: none;
    overflow: hidden;
    width: 100%;
    text-align: left;
  }

  body.node-type-radio .field-field-mp3-image {
    float: none;
  }

  .sm2_plst_cck-outer ul.playlist li.player-box .inside-box {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }



  /* Make front page bottom section "programs & services" hide images since they are too big */
  #node-2 .content tr,
  #node-2 .content td {
    display: block;
  }

  #node-2 .content td img {
    display: none;
  }
  #node-2 .content td p {
    margin:0;
    padding: 0;
  }


  div.view-world-ocean-exhibits .view-content,
  div.view-ocean-space-listings.view-display-id-page_1 .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .view-world-ocean-exhibits-gallery .view-content,
  .view-ocean-space-listings-gallery .view-content {
    grid-template-columns: 1fr;
  }
}




/* Any screen 479px or smaller */
@media
only screen and                                         (max-width: 479px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 479px),
only screen and (min-resolution: 192dpi)            and (max-width: 479px) {
  div.view-world-ocean-exhibits .view-content,
  div.view-ocean-space-listings.view-display-id-page_1 .view-content {
    grid-template-columns: 1fr;
  }
}