/*
 * MEDIA QUERIES
 */

/*-------------------------------------------*/
/* Large and up                              */
/*-------------------------------------------*/
@media screen and (min-width: 1000px) {
  .container-main,
  .title-bar,
  .menu-bar,
  .bottom-links,
  .footer {
    max-width: 1200px;
  }

  .cardplayercruises-logo a {
    width: 412px;
    height: 69px;
    background-size: 412px 69px, cover;
    margin: 0;
  }

  .container-content { width: 75%; }
  .container-sideinfo { width: 25%; }
  .brochure_left { width: 75%; }
  .brochure_right { width: 25%; }

  .container-title {
    flex-basis: 100%;
    -webkit-flex-basis: 100%;
    padding: 20px;
    margin: 30px 0 20px;
  }

  .container-title h1 {
    font-size: 3.2em;
    margin-bottom: 0;
    line-height: 1.5em;
  }

  .bottom-links {
    max-width: 900px;
  }

  .bottom-links,
  .brochure_frame {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    justify-content: space-between;
  }

 {
  .bottom-links div {
    width: auto;     /* was 100% (this caused stacking) */
    flex: 1;         /* allow columns to share space */
    text-align: center;
  }
}


  .bottom-links div ul {
    display: block;
  }

  .bottom-links div ul li {
    display: block;
    right: 50%;
  }

  .bottom-links div:nth-of-type(odd) {
    background: none;
  }

  .smallscreen_only { display: none; }
}

/*-------------------------------------------*/
/* Medium and up                             */
/*-------------------------------------------*/
@media screen and (min-width: 761px) {
  .inner_form_fields {
    width: 400px;
    margin: auto;
  }

  .listbox { min-width: unset; }

  html {
    background-image: url(/images/inner-background02.avif);
    background-repeat: no-repeat, no-repeat;
    background-position: top, right;
  }

  .title-bar,
  .menu-bar {
    margin: 10px auto 0;
    position: relative;
  }

  .container-main {
    margin: 0 auto;
    position: relative;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .menu-bar { height: 42px; }

  .title-bar,
  .menu-bar {
    justify-content: space-between;
    align-items: center;
  }

  .container-main,
  .title-bar,
  .menu-bar {
    width: 95%;
    min-width: 675px;
    display: flex;
  }

  .bottom-links {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .brochure_itinerary_image { max-width: initial; }
}

/*-------------------------------------------*/
/* Medium and smaller                        */
/*-------------------------------------------*/
@media screen and (max-width: 984px) {
  .block-views-block-frontpage-carousel-block-1 { display: none; }

  .simple-link { padding: 2px 15px; }

  .container-title {
    margin: 20px 0 0;
    padding: 20px 10px;
  }

  .container-title:has(h1:empty) {
    display: none;
  }

  .cruisedates { display: block; }
}

/*-------------------------------------------*/
/* Small only                                */
/*-------------------------------------------*/
@media screen and (max-width: 760px) {
  .continue_form {
    width: 100%;
    top: 0;
    left: 0;
    border: 0;
    box-shadow: 0;
  }

  .cardplayercruises-logo { margin: 0 auto; }

  .cardplayercruises-logo a {
    width: 340px;
    height: 59px;
    background-size: 340px 59px, cover;
    margin: 0 auto;
  }

  .title-bar {
    width: 340px;
    margin: 20px auto 5px;
  }

  .align_bottom {
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .social-icons { margin: 0 0 3px 1px; }

  .social-icons .s_icon,
  .social-icons .s_icon svg {
    width: 26px;
    height: 25px;
    margin: 0 0 0 5px;
  }

  .inner-padding { padding: 0 20px 20px; }

  .bottom-links div {
    width: 100%;
    flex: initial;
    text-align: center;
  }

  .bottom-links div ul {
    display: block;
    margin-left: calc(50% - 50px);
  }

  .bottom-links div ul li {
    display: block;
    right: 50%;
    margin-top: 20px;
  }

  #main-menu ul { display: none; }
  #main-menu li ul { position: static; }
  #main-menu li ul ul { margin: 0 !important; }

  #main-menu ul,
  #main-menu li {
    float: none;
    max-width: 100%;
    border-right: 0;
  }

  #main-menu a {
    width: 100%;
    padding: 13px 0;
    background: #022c56;
    color: #fff;
    font-weight: bold;
    height: 20px;
    justify-content: center;
  }

  #main-menu a:hover,
  #main-menu li a.active { color: #fff; }

  #main-menu li li a { text-align: center; }

  #main-menu li li li a {
    background: rgb(47, 61, 71);
    border-top-color: #7f7f7f;
  }

  #main-menu a:hover { background: #0099ff; }

  #main-menu li:hover > ul,
  #main-menu li li:hover > ul,
  #main-menu li li li:hover > ul { display: none; }

  .drop-down-toggler {
    display: block;
    width: 190%;
    background: none;
    height: 40px;
  }

  #main-menu li li .drop-down-toggler { top: 5px; }

  #main-menu .nav-toggle {
    display: flex;
    font-weight: bold;
    font-size: 1.3em;
    background: #0099ff;
    align-items: center;
    justify-content: center;
  }

  .flexor {
    display: flex;
    flex-wrap: wrap-reverse;
  }

  .brochure_itinerary_image,
  .list_image {
    margin-left: initial;
    max-width: initial;
    text-align: center;
    display: block;
    width: 100%;
    background: #f3f7fb;
    padding: 25px;
    margin: 10px 0;
  }

  .brochure_itinerary_info { flex-wrap: wrap; }
  .brochure_frame { flex-wrap: wrap; }
  .wrap_div { flex-wrap: wrap; }
  .brochure_itinerary .flexor { flex-wrap: wrap; }

  .brochure_day {
    width: 100%;
    margin-bottom: 5px;
  }

  .brochure_itinerary_details { margin-left: 0; }
  .brochure_itinerary_description { margin-bottom: 5px; }

  .brochure_staterooms_image {
    text-align: center;
    width: 100%;
    margin: 10px;
    background: white;
    padding: 20px;
  }

  .cruise-jump,
  .cruise-finder { width: 100%; }

  .extra-buttons,
  .extra-buttons-right {
    background: #3173b7;
    justify-content: space-around;
  }

  .extra-buttons a {
    border: 0;
    font-weight: bolder;
  }

  .views-field-field-frontpage-slide .field-content { margin: auto; }

  .menu-bar a {
    margin: auto;
    justify-content: center;
  }

  .frontpage_cruisebox a { padding: 20px 0 20px 3px; }

  .email-offers a,
  .phone {
    font-size: 0.95em;
    margin: 0 0 10px;
  }

  .offers { display: flex; }

  .titles h1 { font-size: 1.6em; }
  .titles h2 { font-size: 1.3em; }
  .titles h3,
  .titles h4 { font-size: 1em; }

  .container-title {
    margin: 0;
    padding: 0;
  }
}