body, html {
    margin: 0;
    padding: 0;
    width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100%;
    font-family: open-sans, sans-serif;
    font-style: normal;
    color: #000000;
    font-size: 22px;
}
  
.jarallax {
      position: relative;
      z-index: 0;
      height: 70vh;
}

.jarallax_video {
      position: relative;
      z-index: 0;
      height: 85vh;
}
    
.jarallax > img {
      position: absolute;
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
       z-index: -1;
}

.menu {
      background-color: #fff;
      color: #000;
      top: 0;
      height: 80px;
      width: 100%;
}
  
#menu__toggle {
      opacity: 0;
}

.menu__btn {
      display: flex; 
      align-items: center;
      position: relative;
      width: 36px;
      height: 26px;
      cursor: pointer;
      z-index: 0;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
      display: block;
      position: absolute;
      width: 100%;
      height: 6px;
      background-color: #3197CC;
}

.menu__btn > span::before {
      content: '';
      top: -10px;
}

.menu__btn > span::after {
      content: '';
      top: 10px;
}

.menu__box {
      display: none;
      position: fixed;
      right: 0;
      top: 0;
      width: 30%;
      height: auto;
      margin: 0;
      padding: 80px 0;
      list-style: none;
      text-align: left;
      background-color: rgba(49, 151, 204, 0.8);
      z-index: 9;
}

.menu__item {
      display: block;
      padding: 12px 24px;
      color: #fff !important;
      font-size: 20px;
      font-weight: 600;
      text-decoration: none !important;
}
  
.menu__box a:hover {
      text-decoration: underline !important;
}
  
#menu__toggle:checked ~ .menu__btn > span {
      transform: rotate(45deg);
}

#menu__toggle:checked ~ .menu__btn > span::before {
      top: 0;
      transform: rotate(0);
}

#menu__toggle:checked ~ .menu__btn > span::after {
      top: 0;
      transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
      visibility: visible;
      right: 0;
}
  
.close {
      right: 20px;
      top: 70px;
      width: 32px;
      height: 32px;
      opacity: 0.8;
}
    
.close:hover {
      opacity: 1;
}
    
.close:before, .close:after {
      position: absolute;
      left: 15px;
      content: ' ';
      height: 33px;
      width: 2px;
      background-color: #fff;
}
    
.close:before {
      transform: rotate(45deg);
}
    
.close:after {
      transform: rotate(-45deg);
}

label {
      margin-bottom: 0 !important; 
}

.close_overlay_aruba img,
.close_overlay_barbados img,
.close_overlay_bay img {
      top: -18px;
      right: -18px;
      width: 17px;
      height: 17px;
      position: absolute;
}

.font_bold {
      font-weight: 700;
}

.call_button {
      background-color: #3197CC;
      color: #fff;
      padding: 10px 20px;
      width: fit-content;
}

.text-rot {
      color: #cc3300;
}

#aruba30,
#antigua_30,
#barbados30 {
      opacity: 0;
}


.overlay img {
      max-height: 200px;
      object-fit: cover;
}

.overlay {
      font-size: 14px;
}

.call_button a {
      color: #fff;
      text-decoration: none;
}

.call_button a:hover {
      color: #fff;
      text-decoration: underline;
}

.section_swiper {
      overflow: hidden;
}

.swiper_2 img {
      border: 1px solid transparent;
      border-radius: 50%;
}

.swiper_text {
      background-color: #3197CC;
      color: #fff;
      padding: 20px;
      width: 80%;
      margin: 0 auto;
      position: relative;
      top: -20px;
}

.call_button_img {
      border: 1px solid #3197CC;
}

.swiper-wrapper {
      height: auto !important;
}

.call_button_img:hover {
      border: 4px solid #3197CC;
}

.overlay {
      background-color: #3197CC;
      color: #fff;
      display: none;
      position: absolute;
      z-index: 1;
}

@media only screen and (max-width: 761px) {
      .menu__box {
            width: 80%;
      }

      .h2, h2 {
            font-size: 1rem !important;
      }

      .h4, h4 {
            font-size: 0.95rem !important;
      }

      body {
            font-size: 18px;
      }

      .h5, h5 {
            font-size: 0.8rem !important;
      }

      .overlay {
            font-size: 14px;
      }

      .barbados30,
      .barbados50,
      #aruba path,
      #aruba-2 path,
      #antigua_50 path,
      #antigua_30 path {
            fill: #cc3517 !important;
      }

      .header_mouse {
            width: 20px !important;
      }
}

.header_mouse {
      position: absolute;
      width: 30px;
      height: auto !important;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      text-align: center;
      -webkit-animation: mouse-wheel 0.6s linear infinite;
      -moz-animation: mouse-wheel 0.6s linear infinite;
      animation: mouse-wheel 0.6s linear infinite;
}

    
    @-webkit-keyframes mouse-wheel{
       0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
    
      100% {
        opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
      }
    }
    @-moz-keyframes mouse-wheel {
      0% { bottom: 40px; }
      25% { bottom: 42px; }
      50% { bottom: 43px;}
      75% { bottom: 42px;}
      100% { bottom: 40px;}
    }
    @-o-keyframes mouse-wheel {  
      0% { bottom: 40px; }
      25% { bottom: 42px; }
      50% { bottom: 43px;}
      75% { bottom: 42px;}
      100% { bottom: 40px;}
    }
    @keyframes mouse-wheel {
      0% { bottom: 40px; }
      25% { bottom: 42px; }
      50% { bottom: 43px;}
      75% { bottom: 42px;}
      100% { bottom: 40px;}
    }
    
    @-webkit-keyframes mouse-scroll {
    
      0%   { opacity: 0;}
      50%  { opacity: .5;}
      100% { opacity: 1;}
    }
    @-moz-keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }
    @-o-keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }
    @keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }