@charset "UTF-8";
:root {
      
      --CTA-red: #C1354E;
      --primary-green: #759A8A;
      --secondary-green: #B0BF3F;
      --sand: #D9CDBF;
      --biege: #F2E6D8;
      --terracota: #A6431F;
      --dark-brown: #52464B;
      --light-gray: #d4d9df;
      --main-blue: #5182ad;
      --secondary-blue: #22c0e8;
      --header-font: 'Roboto Condensed', sans-serif;
      --nav-green: #9fb4ab;
      --accent-gray: #e5e5e5;
    }
    p, li, .strong-text, table, strong {
      color: var(--dark-brown);
      font-size: 90%;
    }
    a {
      text-decoration: none;
    }
    input[type=text],
    input[type=email],
    co-form textarea,
    .mytextarea {
      outline: none;
      border: 1px solid var(--sand);
    }
    input[type=text]:focus,
    input[type=email]:focus,
    .mytextarea:focus,
    .co-form textarea:focus {
      border: 1px solid var(--secondary-blue);
      box-shadow: none;
    }
    .alert {
      font-size:90%;
    }
      h1, h2, h3, h4, h5 {
          font-family: var(--header-font);
          color: var(--dark-brown);
          font-size: 150%;
      }
     h2 span {
      display: block;
      font-size: 80%;
    }
    .cr-logo {
      background-image: url("../images_2024/cr-logo.svg");
      height: 30px;
      width: 179px;
      background-repeat: no-repeat;
    }
    /* - - - btn - - - */
    .mybtn {
      padding: 0.5rem 0.8rem;
      background: var(--CTA-red);
      border: none;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      position: relative;
      display: inline-block;
    }
    .mybtn:hover{
      background: #7d2232;
    }
    .mybtn:disabled,
    .mybtn[disabled=disabled] {
      cursor: not-allowed;
      pointer-events: none;
      background: #db8a99;
    }
    .mybtn::after {
      content: '';
      display: block;
      width: 1.5em;
      height: 1.5em;
      position: absolute;
      left: calc(50% - 0.75em);
      top: calc(50% - 0.75em);
      border: 0.2em solid white;
      border-right-color: transparent;
      border-radius: 50%;
      animation: loader-animation 0.7s linear infinite;
      opacity: 0;
    }

    @keyframes loader-animation {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .mybtn.loading {
      color: transparent;
    }

    .mybtn.loading::after {
      opacity: 1;
    }
    /* - -  end btn - - - */
    .container {
      max-width: 1200px;
    } 
    /*- - - home - - -*/
    .home-jumbo {
      background-image: url("../images_2024/chacchoben-jumbo.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -23px;
    }
    .home-jumbo h1 {
      color: white;
      font-size: 3rem;
      text-shadow: 0px 0px 5px rgba(0,0,0,0.53);
    }
    .home-jumbo h1 span {
      display: block;
      font-size: 1.5rem;
      text-align: center;
      text-transform: uppercase;
    }
    .home-article {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    .highlight {
      padding: 1rem;
      border: solid 1px var(--secondary-blue);
      border-radius: 8px;
    }
    .highlight-list {
      list-style-image: url('../images_2024/check-lg.svg');
      padding-inline-start: 5px;
    }
    .card-effect {
      overflow: hidden;
      position: relative;
    }
    .card-effect:after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(255,255,255,0.3);
      opacity: 0;
      transition: opacity .2s;
    }
    .card-effect img {
      transition: transform .2s;
      width: 100%;
    }
    .card-effect:hover img {
      transform: scale(1.1);
    }
    .card-effect .tag {
      position: absolute;
      font-family: 'Open Sans', sans-serif;
      top: 15px;
      left: 15px;
      background: #fbcc00;
      padding: 8px 12px;
      color: #0b1726;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      z-index: 1;
      border-radius: 5px;
    }
    .tour-link {
      text-transform: uppercase;
    }
    .card-body h5 {
      font-size: 1.2rem;
    }
    .normal-link {
      color: var(--dark-brown);
      transition: transform .3s ease-out;
      display: inline-block;
    }
    .normal-link:hover {
      transform: translate(3px, 0);
    }
    .tour-cards .card-footer {
      background-color: #ffffff;
      border: none;
    }
    /*- - - end home - - -*/
    /* - - -  tour pages - - - */
    .hidden {
      display: none;
    }
    /* - - -  end tour pages - - - */
    /* - - - - - Radio  - - - - */
    .options {
      /*
      width: 100%;
      margin: 20px auto;
      background: white;
      border: 1px solid #adadad;
      border-radius: 10px;
      */
    }
    .options input[type=radio],
    .co-options input[type=radio]{
      display: none;
    }
    .options .active-label,
    .options label:focus,
    .options label:hover,
    .co-options .active-label,
    .co-options label:focus,
    .co-options label:hover{
      border: solid 2px var(--secondary-blue);
    }

    .options label:active,
    .options input:checked + label,
    .co-options label:active,
    .co-options input:checked + label{


      border: solid 2px var(--primary-green);
      background-color: white;
    }

    .options .active-label:before,
    /*.options label:focus:before,
    .options label:hover:before,*/
    .options label:active:before,
    .options input:checked + label:before,
    .co-options .active-label:before,
    .co-options label:active:before,
    .co-options input:checked + label:before{ 
      border-color: green;
    }
    .options label:focus:before,
    .options label:hover:before,
    .co-options label:focus:before,
    .co-options label:hover:before{
      border-color: var(--secondary-blue);
    }
    /** Make those labels sexy */
    .options label,
    .co-options label{
      cursor: pointer;
      display: block;
      padding: 15px 0 15px 28px;
      position: relative;
      border: solid 2px var(--biege);
      background: var(--biege);
      whitespace: no-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-transition: all .15s ease;
      transition: all .15s ease;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 95%;
      /* This is the radio fake dot basically */
    }
    .co-options label {
      border-color: var(--light-gray);
      background: #ffffff;
      font-size: 90%;
      padding: 0.8rem 1rem 0.8rem 2rem;
      margin-bottom: 0.8rem;
    }
    .options label span {
      display: block;
      font-size: 70%;
      color: gray;
    }
    .options label:before,
    .co-options label:before{
      content: "";
      position: absolute;
      left: 7px;
      top: 18px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: white;
      border: .1rem solid #adadad;
    }
    /*  How it should look when checked */
    .options input:checked + label:before,
    .co-options input:checked + label:before{
      border: none;
      background: var(--primary-green);
    }
    /* How it should look when disabled  */
    .options input:disabled + label,
    .co-options input:disabled + label{
      background: #efefef;
      color: rgba(0, 0, 0, 0.7);
      cursor: not-allowed;
      border-color: #efefef;
    }
    .options input:disabled + label:hover,
    .co-options input:disabled + label:hover{
      border-color: #efefef;
    }
    .options input:disabled + label:before,
    .co-options input:disabled + label:before{
      border-color: #efefef;
      background: white;
    }
    /* - - - - -  end radio - - - - - - */
  
    /* - - - - - - CONTACT - - - - - -*/
    .contact-card {
      background-color: var(--sand);
    }
    .address {
      padding: 2rem;
    }
    /* - - - - - - END CONTACT - - - - - -*/
    /* - - - - -  FIND US - - - - - */
    .jumbotron {
      height: 60vh;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 4rem;
      margin-top: -23px;
    }
    .jumbotron h1 {
      color:#ffffff;
      font-size: 3em;
      text-shadow: 1px 1px 10px #000000;
    }
    .jumbo-find {
      background-image: url("../images_2024/temple-24-about.jpg");
    }
    .jumbo-about {
      background-image: url("../images_2024/chacchoben-palace-jumbo.jpg");
    }
    .info {
      padding: 1rem;
      background-color: #e7f3fe;
      border-left: 6px solid #2196F3;
      border-radius: 10px;
      color: #0b466d;
    }
    /* - - - - END FIND US - - - - */
    /* - - - - history - - - - */
    .my-card {
      border: solid 1px #E2E1E1;
      border-radius: 10px;
      box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
    }
    .my-card:hover {
      box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2);
    }
    .my-card h3 {
      font-size: 1.2rem;
    }
    .my-card img {
      border-radius: 10px 0 0 10px;
    }
    @media (max-width: 992px) {
    .my-card img {
        border-radius: 10px 10px 0 0;
    }
    }
    /* - - - - End History - - - */
    /* - - - - - - NAVBAR - - - - - -*/
    
    .navbar {
      box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 20px -20px;
      background-color: #fff;
    }
    .nav-item {
      margin-right: .5rem;
      transition:all 0.4s ease-in-out;
    }
    .nav-item:hover,
    .nav-link[aria-expanded=true] {
      background-color: #a74424; /*var(--accent-gray);*/
      border-radius: 5px;
      color: white!important;
    }
    .nav-link:hover {
      color: white!important;
    }
    .nav-link[aria-expanded=true] {
      border-radius: 5px 5px 0 0;
    }
    .dropdown-menu {
      background-color: #a74424;/*var(--accent-gray);*/
      border-radius: 0 5px 5px 5px;
      margin-top: -2px!important;
      border: none!important;
    }  
    .nav-link,
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-right: 1rem;
      padding-left: 1rem;
      font-weight: 600;
      font-family: var(--header-font);
      letter-spacing: 0.5px;
      color: var(--dark-brown);
    }
    .dropdown-item {
      color: white;
    }
    .dropdown-item:hover {
      background-color: rgba(255,255,255, 0.3);
      color: white;/*var(--dark-brown);*/
    }
    /* navbar dropdown caret & animation */
    .dropdown-toggle::after{
       content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
       border: none;
       width: 10px;
       height: auto;
       margin-left: 0.4rem;
       vertical-align: middle;
       transition: 0.5s;
      }
    .dropdown-toggle.show::after,
    .dropdown-toggle:hover::after {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 384 512"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
    }
    .dropdown-toggle.show::after {
      transform: rotate(180deg);
      transition: 0.5s;
    }
    /* end navbar dropdown caret & animation */
    /*--- hamburguer ----*/
    .icon-bar {
      width: 22px;
      height: 2px;
      background-color: #a74424;
      display: block;
      transition: all 0.2s;
      margin-top: 4px
    }
    .navbar-toggler {
      border: none;
      background: transparent !important;
    }
    .navbar-toggler:focus,
    .navbar-toggler:active {
      box-shadow: none;
    }
    .navbar-toggler[aria-expanded=true] .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }
    .navbar-toggler[aria-expanded=true] .middle-bar {
      opacity: 0;
    }
    .navbar-toggler[aria-expanded=true] .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }
    .navbar-toggler.collapsed .top-bar {
      transform: rotate(0);
    }
    .navbar-toggler.collapsed .middle-bar {
      opacity: 1;
    }
    .navbar-toggler.collapsed .bottom-bar {
      transform: rotate(0);
    }
    /* ----- end hamburguer ---- */

    @media (max-width: 992px) {
      /* navbar */
        .dropdown-menu {
          border-radius: 0;
        }
      .nav-item:hover {
        border-radius: 0;
        background-color: #a74424;
      }
      .dropdown-menu.show {
        background-color: #a74424;
      }
      .nav-link.dropdown-toggle.show {
        background-color: #a74424;
      }
        
        .nav-link[aria-expanded=true] {
          background-color: #a74424;/*#ffffff;*/
          border-radius: 0;
        }
      
        
      /* end navbar */
    }
    /* - - - - - - END NAVBAR - - - - - -*/
    
      footer {
        min-height: 100px;
        /*border-top: solid 2px var(--terracota);*/
        padding:30px 0 20px 0;
        background-color: var(--biege);
      }
      .footer-bottom {
        background: var(--primary-green);
        padding:15px 0;
        font-size:12px;
        color:#ffffff;
        }
        .footer-bottom a {
        text-decoration: none;
        color: #ffffff;
        }
        .footer-bottom a:hover{
        text-decoration: underline;
        }
      footer h5 {
        font-size: 1.1rem;
        color: var(--dark-brown);
      }
    footer a{
        text-decoration: none;
      }
        footer li a{
        color: var(--dark-brown);
        font-size: 90%;
        padding: 2px 0px;
        display: block;
        transition:all 0.4s ease-in-out;
      }
        footer li a:hover{
        color: var(--main-blue);
      }
      /* - - - hero - - - */
      .hero {
          width: 100%;
          height: 400px;
          background-size: cover;
          position: relative;
          margin-bottom:15px;
          border-radius: 15px;
      }
      .hero.cr-hero, .hero.kr-hero, .hero.me-hero,
      .hero.ce-hero, .hero.dr-hero {
          background-repeat:no-repeat;
          background-position:center bottom;
      }
      .hero.cr-hero {
          background-image: url("../images_2024/chacchoben-temple-24-800.jpg");
      }
      .hero.me-hero {
          background-image: url("../images_2024/mayan-experience-hosts-800.jpg");
      }
      .hero.kr-hero {
          background-image: url("../images_2024/kohunlich-acropolis-800.jpg");
      }
      .hero.dr-hero {
          background-image: url("../images_2024/dzibanche-temple-two-800.jpg");
      }
      .hero.ce-hero {
          background-image: url("../images_2024/bacalar-lagoon-kayak-800.jpg");
      }
      .hero.be-hero {
          background-image: url("../images_2024/bacalar-explorer-4-800.jpg");
      }
      .hero.mf-hero {
          background-image: url("../images_2024/maya-home-800.jpg");
      }
      .hero.crp-hero {
          background-image: url("../images_2024/chacchoben-temple-two-800.jpg");
      }
      .hero-caption {
          background: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .8));
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 80px;
          padding: 15px;
          border-radius: 0 0 15px 15px;
      }
      .hero-caption h1{
        font-size:1.6rem;
        color: #ffffff;
        text-align: center;
      }
      /* - - - end hero --- */
    
      /* line icon divider */
      .line-icon {
        box-sizing: border-box;
        position:relative;
        text-align: center;
        background-image: url("../../images_2024/kin-green.svg");
        background-repeat: no-repeat;
        background-position: center center;
        font-size:0;
        height: 40px;
    }
    .line-icon::before, .line-icon::after {
        box-sizing: border-box;
        width: 40%;
        height: 1px;
        border-top: 1px solid #9fb4ab;
        display: inline-block;
        content:'';
        margin-left: 5%;
        margin-right: 5%;
        position:relative;
          top: 50%;
        -moz-transform: translatey(-50%);
        -ms-transform: translatey(-50%);
        -o-transform: translatey(-50%);
        -webkit-transform: translatey(-50%);
        transform: translatey(-50%);
    }
      /* end line icon divider */
      .img-effect {
          overflow: hidden;
          border-radius: 15px;
          margin-bottom: 1.5rem;
      }
      .img-effect img {
          transition: transform .2s;
          width: 100%;
      }
      .img-effect:hover img {
          transform: scale(1.1);
      }
    /* time line */
    .timeline {
        position: relative;
        margin: 0 15px;
        border-left: 3px dotted var(--light-gray);
        padding: 7px 30px;
    }
    .timeline > span {
        position: absolute;
        width: 16px;
        height: 16px;
        text-align: center;
        border-radius: 100%;
        left: -10px;
        top: 0;
        background: #ffffff;
        border: solid 4px #22c0e8;
    }
    .timeline .green {
      border: solid 4px var(--secondary-green);
    }
    .timeline:last-child > span {
        border: solid 4px red;
        left: -7px;
    }
    .timeline div {
        font-weight: bold;
        margin-top:-10px;
    }
    .timeline p {
        margin-top: 0px;
    }
    .timeline:last-child {
        border: none;
    }
    /* end timeline */

    .list-no {
      list-style-image: url('../images_2024/x-lg.svg');
      padding-inline-start: 20px;
    }
    .list-yes {
      list-style-image: url('../images_2024/check-lg.svg');
      padding-inline-start: 20px;
    }
    .list-info {
      /*list-style-image: url('../images_2024/check2-all.svg');*/
      padding-inline-start: 15px;
    }
    .list-info li {
      margin-bottom: 0.2rem;
    }
    .list-info li::marker {
      color: var(--main-blue);
    }
    .bi-tag {
      color: darkorange;
    }
    /* booking form */
    .booking-form {
      /*background-color: #f3ece4;*/
      background-color: var(--sand);
      border-radius: 10px;
      margin-bottom: 2rem;
    }
    .booking-form-header {
      background-color: var(--sand);
      border-radius: 10px 10px 0 0;
      padding: 1.2rem 1rem 0.3rem 1rem;
    }
    .booking-form-header h2,
    .booking-form-content h2,
    .checkout h2 {
      font-size: 1.1rem;
      text-transform: uppercase;
      text-align: center;
      font-weight: 900;
      font-family: inherit;
      /*color: var(--dark-brown);*/
      margin-bottom: 0;
      /*letter-spacing: 1px;*/
      
      color: transparent;
      background: var(--dark-brown);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      text-shadow: 0px 1px 1px rgba(255,255,255,0.2);
    }
    .booking-form-content h2,
    .checkout h2 {
      font-size: 0.9rem;
      padding: .5rem 1rem .8rem 1rem;
    }
    .booking-form-content {
      padding: 1rem;
    }
    .category {
      border-radius: 8px;
      padding: .5rem .8rem;
      background-color: var(--biege);
      margin-bottom: .8rem;
      
    }
    .cat-description {
      font-family: var(--header-font);
      font-size: 1.1rem;
    }
    .form-request {
      padding: 0.5rem 0.8rem;
      font-size: 95%;
    }
    .form-border-bottom {
      border-bottom: solid 2px var(--sand);
    }
    .form-border-right {
      border-right: solid 2px var(--sand);
    }
    /* end booking form */
    /* number spinner */
    .stepper-container {
      position: relative;
    } 
    .stepper {
      position: absolute;
      transform: translate(0, -50%);
      top: 50%;
      right: 0;
      display: flex;
      background-color: white;
      border-radius: 45px;
      border: 2px solid var(--sand);
    }
    input[type="number"] {
      -moz-appearance: textfield;
      text-align: center;
      font-size: 1.1rem;
      border: none;
      outline: none;
      background-color: white;
      width: 40px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    .stepper button {
      color: var(--dark-brown);
      border: none;
      background-color: #ffffff;
      font-size: 1.5rem;
      cursor: pointer;
      font-weight: 600;
    }
    .stepper button:focus,
    .stepper button:hover {
      color: var(--secondary-blue);
    }
    .decrement {
      padding: 3px 10px 3px 10px;
      border-radius: 45px 0 0 45px;
    }
    .increment {
      padding: 3px 10px 3px 10px;
      border-radius: 0 45px 45px 0;
    }
   /* end number spinner */
   /* - tour request form --*/
   .request-form label,
   .co-form label {
      font-size: 90% !important;
      font-weight: 500;
      margin-bottom: -8px !important;
    }
    .request-form input[type=text],
    .request-form input[type=email],
    .co-form input[type=text],
    .co-form input[type=email],
    .co-form textarea {
      outline: none;
      border: 1px solid var(--light-gray);
    }
    .request-form input[type=text]:focus,
    .request-form input[type=email]:focus,
    .co-form input[type=text]:focus,
    .co-form input[type=email]:focus,
    .co-form textarea:focus {
      shadow: none;
      border: 1px solid var(--secondary-blue);
    }
   /* - -  end tour req form -- */
   /* tour pages */
   .sub-text {
      display: block;
      font-size: 55%;
      text-transform: uppercase;
      font-weight: bolder;
      letter-spacing: 1px;
    }
    .tour-banner {
      padding: 15px 15px 0px 15px;
      border-radius: 10px;
      border: 1px solid var(--secondary-blue)
    }
    .price-icon::before,
    .duration-icon::before,
    .language-icon::before {
      background-image: url('../images_2024/dollar.png');
      background-size: 25px 25px;
      background-repeat: no-repeat;
      display: inline-block;
      height: 25px;
      width: 25px; 
      vertical-align: -25%;
      margin-right: 6px;
      content: '';
    }
    .duration-icon::before {
      background-image: url('../images_2024/duration.png');
    }
    .language-icon::before {
      background-image: url('../images_2024/language.png');
    }

    .savings {
      border: solid 1px green;
      padding: 8px 15px;
      border-radius: 8px;
      color: var(--dark-brown);
    }
    .savings-text {
      font-size: 90%;
    }
    .fees {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fees::before {
      background-image: url('../images_2024/savings.png');
      background-size: 35px 35px;
      background-repeat: no-repeat;
      height: 35px;
      width: 35px; 
      vertical-align: -15%;
      margin-right: 6px;
      content: '';
    }
    /* end tour pages */
   /* - - - checkout and confirmation - - - */
   .checkout h2 {
      text-align: left;
      padding-left: 0;
    }
    .co-table tr:not(:last-child) {
      border-bottom: solid 1px var(--light-gray);
    }
    .co-table td {
      padding-left: 0;
    }
    .summary {
      border: solid 1px var(--light-gray);
      border-radius: 8px;
      padding: 0.5rem 0.8rem;
    }
    .selection td {
      padding-left: 0;
    }
    .selection td span {
      font-size: 75%;
      color: gray;
      display: block;
      text-transform: uppercase;
    }
    .checkout hr {
      color: #000;
      border-top: 3px solid #000;
      margin: 0;
    }
    .co-options span,
    .co-options strong {
      font-size: 95%;
    }
    .co-options ul {
      list-style-position: inside;
      padding-left: 0;
    }
    .co-options hr {
      border-top: 1px solid #000;
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
    .terms {
      --size: 1.2rem;
      --background: #fff;
      /*font-size: var(--size);*/
      margin-top: 0;
      margin-bottom: 1.2rem;
    }
    .terms *,
    .terms *::after,
    .terms *::before {
      box-sizing: border-box;
    }
    .terms input[type="checkbox"] {
      visibility: hidden;
      display: none;
    }
    .terms .checkbox-label {
      width: var(--size);
    }
    .terms .checkbox-label:before {
      content: ' ';
      display: block;
      height: var(--size);
      width: var(--size);
      position: absolute;
      top: calc(var(--size) * 0.125);
      left: 0;
      background: var(--background);  
    }
    .terms .checkbox-label:after {
      content: ' ';
      display: block;
      height: var(--size);
      width: var(--size);
      border: calc(var(--size) * .14) solid #000;
      transition: 200ms;
      position: absolute;
      top: calc(var(--size) * 0.125);
      left: 0;
      background: var(--background);  
    }
    .terms .checkbox-label:after {
      transition: 100ms ease-in-out;
    }
    .terms .checkbox-input:checked ~ .checkbox-label:after {
      border-top-style: none; 
      border-right-style: none;
      -ms-transform: rotate(-45deg); /* IE9 */
      transform: rotate(-45deg);
      height: calc(var(--size) * .5);
      border-color: green;
    }
    .terms .checkbox {
      position: relative;
      display: flex;
      /*cursor: pointer;*/
      /* Mobile Safari: */
      -webkit-tap-highlight-color: rgba(0,0,0,0);   
    }
    .terms .checkbox-label:after:hover,
    .terms .checkbox-label:after:active {
       border-color: green; 
    }
    .terms .checkbox-label {
      margin-right: calc(var(--size) * 0.45);
    }
    .pmt-options {
      padding-bottom: -1rem!mportant;
    }
    .pmt-options ul {
      padding: 0;
      margin: 0;
    }
    .pmt-options li.clickable{
      list-style:none;
      border: solid 2px lightgray;
      border-radius: 8px;
      margin-bottom: 0.8rem;
    }

    .pmt-options li.clickable h3 {
      padding: 1rem 1rem 0.5rem 1rem;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 600;
    }
    .pmt-options li.clickable:hover,
    .pmt-options li.clickable:focus {
      border: solid 2px var(--secondary-blue);
    }
    .pmt-options li.restricted {
      list-style:none;
      border-radius: 8px;
      margin-bottom: 0.8rem;
      background: #efefef;
      color: rgba(0, 0, 0, 0.7);
      cursor: not-allowed;!important
      border-color: #efefef;
    }
    .pmt-options li.restricted h3 {
      padding: 1rem;
      font-size: 1.1rem;
      font-weight: 600;
    }
    .pmt-box {
      display: none;
      background: white;
      border-radius: 8px;
    }
    .divider {
      border-top: solid 1px var(--light-gray);
      margin-bottom: 0.5rem;
    }
    .pmt-btn {
      padding: 1rem;
    }
    .paypal,
    .ccard {
      position: relative;
    }
    .paypal::after {
      content: url('/images_2024/paypal-3.svg');
      width: 60px;
      height: 24px;
      position: absolute;
      right: 1rem;
      top: 15%;
    }
    .ccard::after {
      content: url('/images_2024/cards2.svg');
      width: 100px;
      height: 13px;
      position: absolute;
      right: 1rem;
      top: 30%;
    }
    .cc-btn {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    /* reposition price summary on small screen */
    @media only screen and (max-width: 768px) {
      .summary {
        border: none;
        padding: 0;
      }
    }
    /* end reposition on small screen */
   
   /* - - - end checkout and confirmation - - - */

   /* -- costa-maya-tours --*/
   .tour-img-round {
      border-radius: 10px;
    }
    
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .check-list {
      display: grid;
      gap: .1rem;
      padding-left: 0;
    }
    /* adds gap between the list items*/
    .check-list li {
      display: grid;
      grid-template-columns: 1.5rem auto;
    }
    /* set margins between custom bullet and li text */
    .check-list li::before {
      content: url("../images_2024/check2-square.svg");
    }
    .tour-label-txt {
      font-size: 80%;
      text-transform: uppercase;
      font-weight: 300;
    }
    .bi-star-fill {
      color: darkorange;
      height: 10px;
      width: 10px;
    }
   /* -- end costa-maya-tours -- */

   /* FAQ */
  .faq-container {
    margin: 2rem auto 2rem auto;
    max-width: 500px;
  }
  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    transform: scale(.7) !important;
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2322c0e8' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  }
  .accordion-button:not(.collapsed) {
    background-color: white; 
    color: var(--secondary-blue);
    border-bottom: solid 1px var(--secondary-blue);
    border-radius: 0 !important;
  }
  .accordion-button:focus {
    box-shadow: none;
    outline: none; 
    border-bottom: solid 1px var(--secondary-blue);
    color: var(--secondary-blue);
    border-radius: 0 !important;
   }
   .accordion-button:last-child,
   .accordion-button:last-child:focus {
     border-radius: 0 !important;
   }
   .accordion-button {
     border-bottom: solid 1px gray;
     margin-bottom: 3px;
   }
   .accordion-item {
     border: none;
   }
   .accordion-item .card-body {
     padding-left: 1rem;
     padding-right: 1rem;
   }  
   /* end FAQ */

   /* my reservation */
    .mid-screen {
    min-height: 60vh;
    }
    .panel-container {
      min-width: 300px;
      max-width: 500px;
      padding: 15px;
      border-radius: 8px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }
    /* end my reservation */
    
    /* tablet styles */
    @media (max-width: 992px) {
      /* navbar */
        .dropdown-menu {
          background-color: #ffffff;
        } 
        .nav-link[aria-expanded=true] {
          background-color: red;/*#ffffff;*/
        }
      /* end navbar */
      .jumbotron {
        height: 25vh;
        margin-bottom: 2rem;
      }
      .my-card img {
          border-radius: 10px 10px 0 0;
      }
    }
    
   /* mobile styles */
      @media only screen and (max-width: 479px) {
        
      /* footer on mobile */ 
        .ftr-content{
          display:none;
      }
      .active .ftr-content{
        display:inline;
      }
      .ftr h5 {
          border-bottom:1px dotted var(--sand);
          cursor:pointer;
          font-weight: normal;
          text-transform: uppercase;
          font-size: .9rem;
      }
      .ftr h5:after {
          content:"\203A";
          color:white; 
          width:20px;
          height:20px;
          line-height: 15px;
          background:var(--sand);
          display:inline-block;
          text-align:center;
          float:right;
      }
      .active.ftr h5:after {
          content:"\2039";
          background:var(--sand);
      }
      /* end footer on mobile */ 
      h1, h2, h3, h4, h5 {
          font-size: 130%;
      }  
      .hero-caption h1 {
        font-size: 120%;
      }
      .jumbotron {
        height: 30vh;
        margin-bottom: 2rem;
      }
      .jumbotron h1 {
        font-size: 1.8rem;
        text-align: center;
      }
      .jumbo-find {
      background-image: url("../images_2024/temple-24-about-sm.jpg");
      }
      .jumbo-about {
      background-image: url("../images_2024/chacchoben-palace-jumbo-sm.jpg");
      }
   }
   /* end mobile */