@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

/* =======================================================
   VARIABLES GLOBALES
   ======================================================= */
:root {
  --background-color: #f5b437;
  --text-color: gray;


  --blue: blue;
  --gray: gray;
  --yellow: #f5b437; 
}

img#logoPrincipal { width: 8em; }
img#logo_wingFooter { width: 12em; padding-bottom: 2em; }

@media (min-width: 992px) {
  .colorlib-hotel-1 .hotel-entry .hotel-img { margin-bottom: 0 !important; }
}

span { border: none !important; }
option { color: #000; }
select.col-md-3.form-control { border: 0.1px solid #d3d1cf; height: 3em; }

/* =======================================================
   FORM TOURS
   ======================================================= */
label#colortoursform,
select#tourHotel1, select#cantidadpersonas,
select#tourHotel, select#tourTurno, select#tourAdultos, select#tourNinos, select#tourInfantes,
label#tourTerminos { color: var(--gray); }

label#colortoursform { padding-left: 1.5em; }
input#tourRecogidadelhotel, input#tourTotal { background: #2d2f3f; color: var(--gray); }
.select-items div { color: var(--gray); }
select#deliveryPlace1, #deliveryPlace2, #deliveryDate1, #deliveryDate2, #deliveryTime1, #deliveryTime2 { color: #fff; }
input#tourNombre, input#tourApellido, input#tourEmail, input#tourTelefono, input#tourFecha { color: #fff; font-size: 17px !important; }

/* =======================================================
   MODALES ORIGINALES
   ======================================================= */
.modal-header .close { margin-top: 0; opacity: 1; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); }
.modal-header .modal-title { width: 100%; text-align: center; font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.modal-content { border-radius: 24px !important; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 35px 90px rgba(0,0,0,0.35); overflow: hidden; }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.08); justify-content: center; gap: 0.75rem; }
img#logoTours { width: 10em; }

#modalOW .modal-body, #modalRT .modal-body { padding: 1.5rem; }
#modalOW .modal-body h2, #modalRT .modal-body h2 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.8rem 1rem; margin: 1.25rem 0 0.85rem; }
#modalOW .modal-body label, #modalRT .modal-body label { display: inline-block; margin-bottom: 0.35rem; font-size: 1rem; }
#modalOW .modal-body .form-control, #modalRT .modal-body .form-control { border: 1px solid gray; border-radius: 14px; padding: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: all 0.25s ease; margin-bottom: 1rem; }
#modalOW .modal-body .form-control:focus, #modalRT .modal-body .form-control:focus { border-color: rgba(255,193,79,0.75); box-shadow: 0 0 0 0.2rem rgba(255,193,79,0.18); background: rgba(255,255,255,0.12); }
#modalOW .modal-body select.form-control, #modalRT .modal-body select.form-control { appearance: none; }
#modalOW .modal-body textarea.form-control, #modalRT .modal-body textarea.form-control { min-height: 8rem; }
#modalOW .modal-body input[type="checkbox"], #modalRT .modal-body input[type="checkbox"] { width: auto; margin-right: 0.5rem; }
#modalOW .modal-body input::placeholder, #modalRT .modal-body input::placeholder,
#modalOW .modal-body textarea::placeholder, #modalRT .modal-body textarea::placeholder { color: blue; }

#modalOW .modal-footer .btn, #modalRT .modal-footer .btn { min-width: 180px; border-radius: 14px; padding: 0.95rem 1.3rem; font-weight: 700; letter-spacing: 0.04em; transition: all 0.2s ease; }
#modalOW .modal-footer .btn-primary, #modalRT .modal-footer .btn-primary { background: #f5b437; border: 1px solid rgba(255,209,90,0.55); color: #111; box-shadow: 0 18px 30px rgba(255,170,45,0.22); }
#modalOW .modal-footer .btn-primary:hover, #modalRT .modal-footer .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 36px rgba(255,170,45,0.30); }
#modalOW .modal-footer .btn-outline, #modalRT .modal-footer .btn-outline { border: 2px solid var(--yellow); color: black; }
#modalOW #totalOW, #modalRT #totalRT { border: 1px solid rgba(255,255,255,0.16); text-align: center; font-size: 2rem; font-weight: 700; padding: 1rem 0.85rem; }
#modalOW #resultadoOW, #modalRT #resultadoRT { color: var(--gray); margin-top: 0.75rem; }

#modalOW .modal-body label[for], #modalRT .modal-body label[for] { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.96rem; margin-bottom: 1rem; }
#modalOW .modal-body input[type="checkbox"], #modalRT .modal-body input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: #f9d76c; margin-right: 0.6rem; }
#modalOW .modal-body a, #modalRT .modal-body a { color: #f9d76c; text-decoration: none; transition: color 0.2s ease; }
#modalOW .modal-body a:hover, #modalRT .modal-body a:hover { text-decoration: underline; }

#modalOW .modal-body form, #modalRT .modal-body form { width: 100%; display: grid; gap: 0.95rem; max-width: 600px; margin: 0 auto; }
#modalOW .modal-body .form-control, #modalRT .modal-body .form-control { width: 100%; box-sizing: border-box; }
@media screen and (min-width: 992px) {
  #modalOW .modal-body form, #modalRT .modal-body form { grid-template-columns: 1fr; gap: 1rem; justify-items: center; }
}
@media screen and (max-width: 991px) {
  #modalOW .modal-body form, #modalRT .modal-body form { grid-template-columns: 1fr; justify-items: center; }
}

/* =======================================================
   GOOGLE TRANSLATE
   ======================================================= */
div#google_translate_element { position: fixed; top: 0; right: 1em; z-index: 999; }
.goog-te-gadget-simple { background-color: transparent !important; border: none !important; font-size: 1.5em !important; }
img.goog-te-gadget-icon { display: none; }
.goog-te-menu-value span { color: #fff !important; text-transform: uppercase; }
.goog-te-gadget { font-size: 10px !important; padding-top: 0.3em !important; }
.goog-te-gadget:hover { background: #cc0828; transition: 0.6s; }
img#facebook, img#instagram { width: 2.5em; }
.goog-te-menu-value img { display: none; }
img.goog-te-gadget-icon { background-image: none !important; }

/* =======================================================
   BASE
   ======================================================= */
body {
  font-family: "Quicksand", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #595959;
  background: #fff;
}

#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.offcanvas #page { overflow: hidden; position: absolute; }
.offcanvas #page:after {
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0,0,0,0.7);
  content: "";
}

a { color: #000; transition: 0.5s; }
a:hover, a:active, a:focus { color: #cc0929; outline: none; text-decoration: none; }
p { margin-bottom: 20px; }
h1, h2, h3, h4, h5, h6, figure { color: #000; font-family: "Quicksand", Arial, sans-serif; font-weight: 400; margin: 0 0 20px 0; }
::-webkit-selection { color: var(--text-color); background: var(--background-color); }
::-moz-selection { color: var(--text-color); background: var(--background-color); }
::selection { color: var(--text-color); background: var(--background-color); }

/* =======================================================
   HEADER
   ======================================================= */
.colorlib-nav { margin: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0 auto; }
@media screen and (max-width: 768px) { .colorlib-nav { margin: 0; } }
.colorlib-nav .top-menu { padding: 40px 30px; }
@media screen and (max-width: 768px) { .colorlib-nav .top-menu { padding: 28px 1em; } }
.colorlib-nav #colorlib-logo { font-size: 24px; margin: 0; padding: 0; text-transform: uppercase; font-weight: 600; }
.colorlib-nav #colorlib-logo a { position: relative; color: #fff; }
@media screen and (max-width: 768px) { .colorlib-nav .menu-1 { display: none; } }
.colorlib-nav ul { padding: 0; margin: 8px 0 0 0; }
.colorlib-nav ul li { padding: 0; margin: 0; list-style: none; display: inline; font-weight: 400; }
.colorlib-nav ul li a { text-transform: uppercase; position: relative; font-size: 18px; padding: 30px 12px; color: #fff; transition: 0.5s; }

.colorlib-nav ul li.has-dropdown { position: relative; }
.colorlib-nav ul li.has-dropdown .dropdown {
  width: 140px; box-shadow: 0px 14px 33px -9px rgba(0,0,0,0.75); z-index: 1002;
  visibility: hidden; opacity: 0; position: absolute; top: 40px; left: 0; text-align: left;
  background: #000; padding: 20px; border-radius: 4px; transition: 0s;
}
.colorlib-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%; left: 40px; border: solid transparent; content: " "; height: 0; width: 0;
  position: absolute; pointer-events: none; border-bottom-color: #000; border-width: 8px; margin-left: -8px;
}
.colorlib-nav ul li.has-dropdown .dropdown li { display: block; margin-bottom: 7px; }
.colorlib-nav ul li.has-dropdown .dropdown li:last-child { margin-bottom: 0; }
.colorlib-nav ul li.has-dropdown .dropdown li a { padding: 2px 0; display: block; color: #999; line-height: 1.2; text-transform: none; font-size: 17px; letter-spacing: 0; }
.colorlib-nav ul li.has-dropdown .dropdown li a:hover { color: #fff; }
.colorlib-nav ul li.has-dropdown:hover a, .colorlib-nav ul li.has-dropdown:focus a { color: #ee1a21; }

.colorlib-nav ul li.btn-cta a { padding: 30px 0px !important; color: #fff; }
.colorlib-nav ul li.btn-cta a span { background: var(--background-color); padding: 4px 10px; display: inline-block; transition: 0.3s; border-radius: 100px; }
.colorlib-nav ul li.btn-cta a:hover span { box-shadow: 0px 14px 20px -9px rgba(0,0,0,0.75); }

.colorlib-nav ul li.active > a { color: #fff !important; font-weight: 900; padding-top: 0.2em; padding-bottom: 0.3em; border: 2px solid #fbfbfb; }
.colorlib-nav ul li.active > a:hover { background: #cc0828; border: 1px solid #cc0828; }
.colorlib-nav ul li:hover { background: var(--background-color); padding-bottom: 0.6em; padding-top: 0.7em; transition: 0.6s; }
.colorlib-nav ul li.active > a:after { opacity: 1; transform: translate3d(0,0,0); }

/* Mobile toggle */
.colorlib-nav-toggle {
  position: absolute; right: 0px; top: 65px; z-index: 21; padding: 6px 0 0 0;
  display: none; height: 44px; width: 44px; border-bottom: none !important;
}
@media screen and (max-width: 768px) { .colorlib-nav-toggle { display: block; } }
.colorlib-nav-toggle i { position: relative; display: inline-block; width: 25px; height: 2px; background: #fff; transition: all .2s ease-out; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after { content: ''; width: 25px; height: 2px; background: #fff; position: absolute; left: 0; transition: all .2s ease-out; }
.colorlib-nav-toggle i::before { top: -7px; }
.colorlib-nav-toggle i::after { bottom: -7px; }
.colorlib-nav-toggle.active i { background: transparent; }
.colorlib-nav-toggle.active i::before { top: 0; transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after { bottom: 0; transform: rotateZ(-45deg); }

/* =======================================================
   HERO
   ======================================================= */
#colorlib-hero {
  height: 500px;
  background: linear-gradient(135deg, rgba(8,11,20,0.85) 0%, rgba(18,29,55,0.78) 60%, rgba(8,12,24,0.88) 100%), url(../images/loader.gif) no-repeat center center;
  background-size: cover;
  width: 100%;
  float: left;
  z-index: 0;
}
#colorlib-hero .flexslider { border: none; z-index: 1; margin-bottom: 0; }
#colorlib-hero .flexslider .slides li { background-repeat: no-repeat; background-size: cover; background-position: center; height: 650px; position: relative; }
#colorlib-hero .flexslider .flex-control-nav { bottom: 5em; z-index: 1000; }
@media screen and (max-width: 768px) { #colorlib-hero .flexslider .flex-control-nav { bottom: 6em; } }
#colorlib-hero .flexslider .flex-control-nav li a { background: #fff; opacity: 0.5; width: 12px; height: 12px; cursor: pointer; }
#colorlib-hero .flexslider .flex-control-nav li a.flex-active { background: #cc0828; }
#colorlib-hero .flexslider .flex-direction-nav { display: none; }
#colorlib-hero .flexslider .slider-text { display: table; opacity: 0; height: 650px; z-index: 9; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner { display: table-cell; vertical-align: middle; height: 650px; padding: 2em; }
@media screen and (max-width: 768px) { #colorlib-hero .flexslider .slider-text > .slider-text-inner { text-align: center; } }
#colorlib-hero .flexslider .slider-text > .slider-text-inner h1 { margin-bottom: 0; color: #fff !important; font-size: 35px; line-height: 1.3; font-weight: 900; }
@media screen and (max-width: 768px) { #colorlib-hero .flexslider .slider-text > .slider-text-inner h1 { font-size: 28px; } }
#colorlib-hero .flexslider .slider-text > .slider-text-inner h2 { color: #fff; font-size: 24px; line-height: 1.5; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 3px; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #fff; padding: 20px 30px !important; border: none; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn.btn-learn { background: var(--background-color); color: var(--text-color); }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn:hover { background: #000 !important; }
@media screen and (max-width: 480px) { #colorlib-hero .flexslider .slider-text > .slider-text-inner .btn { width: 100%; } }

/* =======================================================
   SECCIONES GENERALES
   ======================================================= */
.colorlib-light-grey { background: #fafafa; }
#colorlib-hotel, .colorlib-tour, .colorlib-wrap, #colorlib-contact, #colorlib-intro,
#colorlib-testimony, #colorlib-blog, #colorlib-amenities, #colorlib-subscribe, #colorlib-footer {
  width: 100%; display: block; float: left; padding: 3em 0; clear: both;
}
@media screen and (max-width: 768px) {
  #colorlib-hotel, .colorlib-tour, .colorlib-wrap, #colorlib-contact, #colorlib-intro,
  #colorlib-testimony, #colorlib-blog, #colorlib-amenities, #colorlib-subscribe, #colorlib-footer {
    padding: 5em 0;
  }
}
.colorlib-services { padding: 3em !important; }
@media screen and (max-width: 768px) { .colorlib-services { padding: .5em !important; } }
.bg-primary-color { background: var(--background-color); }
.bg-primary-color p { color: var(--text-color) !important; }

/* =======================================================
   BUSCADOR
   ======================================================= */
#colorlib-reservation { clear: both; z-index: 1; }
#colorlib-reservation .search-wrap {
  width: 100%; float: left; display: block; position: relative; z-index: 9;
  margin-top: -3em !important; padding: 28px 30px 32px;
  background-color: white;
}
#colorlib-reservation .booknow { margin-top: 5px; display: block; }
#colorlib-reservation .booknow h2, #colorlib-reservation .booknow span { color: #fff; }
#colorlib-reservation .booknow h2 { text-transform: uppercase; font-size: 24px; margin-bottom: 20px; }
#colorlib-reservation .booknow span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

#colorlib-reservation .nav-tabs { border-bottom: 0; padding-bottom: 5px; margin-bottom: 22px; }
#colorlib-reservation .nav-tabs li {
  padding: 0; margin-right: 8px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; font-size: 16px !important;
  transition: all .25s ease;
}
#colorlib-reservation .nav-tabs li a { padding: 15px 22px !important; color: rgba(255,255,255,0.84); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
#colorlib-reservation .nav-tabs li a:after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px;
  height: 3px; width: 0; background: rgba(249,180,44,0.9); border-radius: 3px;
  transition: width .28s cubic-bezier(.2,.9,.2,1);
}
#colorlib-reservation .nav-tabs li:hover a:after,
#colorlib-reservation .nav-tabs li.active a:after { width: 60%; }
#colorlib-reservation .nav-tabs li:hover { background: rgba(249,180,44,0.08); border-color: rgba(249,180,44,0.18); transform: translateY(-1px); }
#colorlib-reservation .nav-tabs li.active { background: rgba(249,180,44,0.14) !important; border-color: rgba(249,180,44,0.35) !important; }
#colorlib-reservation .nav-tabs li.active a { color: #fff !important; }
@media screen and (max-width: 768px) {
  #colorlib-reservation .nav-tabs { margin-left: 10px; }
  #colorlib-reservation .nav-tabs li { font-size: 13px !important; }
  #colorlib-reservation .nav-tabs li a { padding: 10px !important; }
}

/* Formulario */
.colorlib-form label { display: block; margin-bottom: 0.45rem; color: gray; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.colorlib-form .form-control {
  height: 60px; font-size: 18px; appearance: none;
  background: white; border: 1px solid gray;
  border-radius: 14px; color: blue; backdrop-filter: blur(8px);
  transition: all .25s ease;
}
.colorlib-form .form-control:hover { border-color: var(--blue); }
.colorlib-form .form-control:focus {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -6px 14px rgba(249,180,44,0.04), 0 0 0 0.35rem rgba(249,180,44,0.12);
  border-color: rgba(249,180,44,0.75); outline: none;
}
.colorlib-form .form-control::placeholder { color: var(--blue); }
.colorlib-form .form-group { margin-bottom: 16px; }
.colorlib-form .form-group .form-field { position: relative; }
.colorlib-form .form-group .form-field .icon {
  position: absolute; top: 50%; transform: translateY(-50%); right: 20px;
  color: blue;
}
.colorlib-form .form-group .form-field .form-control { padding-right: 50px; }
.colorlib-form textarea.form-control { height: inherit; resize: vertical; }
.colorlib-form .btn-block {
  margin-top: 20px; padding: 20px 22px !important; font-size: 16px; color: #111;
  background: #f9b400; border: none; border-radius: 14px;
}

/* =======================================================
   SERVICES & CARDS
   ======================================================= */
.services { padding: 7em 2em; }
.services .icon {
  margin: 0 auto 20px; background: #f7f7f7; width: 120px; height: 120px;
  display: table; border-radius: 50%;
}
.services .icon i { display: table-cell; vertical-align: middle; height: 120px; font-size: 60px; color: #00BBF0; }

.service-card {
  position: relative; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
  border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(4,8,20,0.45);
  transition: all .28s cubic-bezier(.2,.9,.2,1); overflow: hidden;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 36px 80px rgba(4,8,20,0.55); }
.service-card .thumb { border-radius: 12px; overflow: hidden; position: relative; }
.service-card .thumb:after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
}
.service-card h3 { font-weight: 700; font-size: 1.05rem; margin-top: 12px; margin-bottom: 8px; color: #fff; letter-spacing: .02em; }
.service-card p { color: rgba(255,255,255,0.78); line-height: 1.5; margin-bottom: 12px; }
.service-card .icon { color: rgba(249,180,44,0.95); font-size: 1.45rem; background: rgba(249,180,44,0.06); padding: 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.service-card .badge-featured { position: absolute; top: 12px; right: 12px; background: rgba(249,180,44,0.95); color: #111; padding: 6px 10px; border-radius: 12px; font-weight: 700; font-size: 0.75rem; }
.service-card .btn { background: linear-gradient(135deg, #f9b400, #ffd35b); color: #111; border-radius: 14px; padding: 10px 16px; box-shadow: 0 12px 28px rgba(249,180,44,0.14); border: none; transition: all .18s ease; }
.service-card .btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(249,180,44,0.18); }
.service-card { opacity: 0; transform: translateY(12px); }
.service-card.visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.2,1); }
.service-card:focus-within { outline: none; box-shadow: 0 0 0 6px rgba(249,180,44,0.08); }

.aside-stretch { background: #00BBF0; }
.aside-stretch:after { position: absolute; top: 0; right: 100%; bottom: 0; content: ''; width: 360%; background: #00BBF0; }
@media screen and (max-width: 768px) { .aside-stretch { background: transparent; } .aside-stretch:after { display: none; } }

/* =======================================================
   TOURS & HOTELS
   ======================================================= */
.tour-wrap { width: 100%; float: left; padding: 0; margin: 0; }
.tour-wrap .tour-entry { width: 25%; float: left; position: relative; height: 250px; z-index: 0; padding: 0; }
@media screen and (max-width: 768px) { .tour-wrap .tour-entry { width: 50%; } }
@media screen and (max-width: 480px) { .tour-wrap .tour-entry { width: 100%; } }
.tour-wrap .tour-entry .tour-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 250px; display: block; z-index: 1; transition: 0.3s; }
.tour-wrap .tour-entry .desc { position: absolute; bottom: 0; left: 0; right: 0; z-index: -1; padding: 15px; }
.tour-wrap .tour-entry .desc h2 { font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
.tour-wrap .tour-entry .desc .city { display: block; color: #b3b3b3; margin-bottom: 5px; }
.tour-wrap .tour-entry .desc .price { color: #000; font-size: 20px; }
.tour-wrap .tour-entry .desc .star { margin-bottom: 0; font-size: 12px; color: #b3b3b3; }
.tour-wrap .tour-entry .desc .star span i { color: var(--background-color); }
@media screen and (max-width: 768px) {
  .tour-wrap .tour-entry .desc { z-index: 2; }
  .tour-wrap .tour-entry .desc h2 { color: #fff; }
  .tour-wrap .tour-entry .desc .city, .tour-wrap .tour-entry .desc .star { color: #e6e6e6; }
  .tour-wrap .tour-entry .desc .price { color: #fff; background: #00BBF0; padding: 4px 7px; }
}
.tour-wrap .tour-entry:hover .tour-img { top: -55%; }
@media screen and (max-width: 768px) { .tour-wrap .tour-entry:hover .tour-img { top: 0; } }

.f-tour { width: 100%; float: left; }
.f-tour .f-tour-img { display: block; height: 210px; margin-bottom: 30px; position: relative; box-shadow: inset 0px -195px 142px -79px rgba(0,0,0,0.49); }
.f-tour .f-tour-img .desc { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 20px; }
.f-tour .f-tour-img .desc h3 { font-size: 16px; color: #fff; margin-bottom: 10px; }
.f-tour .desc h3, .f-tour .desc h4 { text-transform: uppercase; }
.f-tour .desc ul { margin-bottom: 30px; }
.f-tour .desc ul li { list-style: none; margin-bottom: 10px; }
.f-tour .desc ul li a { color: #999; }
.f-tour .desc ul li a:hover { color: #000; }

.wrap-division { padding-right: 2em; }
@media screen and (max-width: 768px) { .wrap-division { padding-right: 0; } }

.tour { display: block; margin-bottom: 4em; border: 1px solid #ccc; border-radius: 14px; padding: 14px; }
.tour .tour-img { height: 240px; margin-bottom: 20px; display: block; position: relative; }
.tour .tour-img .price { position: absolute; bottom: 0; left: 0; background: #eeeeee; padding: 8px 12px; margin: 0; color: var(--blue); }
.tour .tour-img .price span { font-size: 16px; font-weight: 500; }
.tour .desc { display: block; }
.tour .desc h2 { font-size: 20px; text-transform: uppercase; margin-bottom: 10px; }
.tour .desc h2 a { color: #000; }
.tour .desc .city { display: block; color: #b3b3b3; margin-bottom: 5px; }
.tour .desc .star { margin-bottom: 15px; font-size: 12px; color: #b3b3b3; }
.tour .desc .star span i { color: var(--background-color); }

/* =======================================================
   HOTEL ENTRY
   ======================================================= */
.hotel-entry { margin-bottom: 3em; }
.hotel-entry .hotel-img { height: 280px; display: block; margin-bottom: 20px; position: relative; }
.hotel-entry .hotel-img .price { position: absolute; bottom: 0; left: 0; background: #cc0828; color: #fff; padding: 8px 12px; }
.hotel-entry .desc h3 { margin-bottom: 10px; }
.hotel-entry .desc h3 a { color: #000; }
.hotel-entry .desc .place { color: #b3b3b3; font-size: 12px; display: block; margin-bottom: 15px; }
.hotel-entry .desc .star { margin-bottom: 10px; font-size: 12px; color: #b3b3b3; }
.hotel-entry .desc .star span i { color: var(--background-color); }

/* =======================================================
   ROOMS & TESTIMONIALS
   ======================================================= */
.room-wrap { display: block; margin-bottom: 4em; }
.room-wrap h2 { font-size: 20px; text-transform: uppercase; }
.room-wrap .price span { font-size: 20px; color: #00BBF0; }
.room-wrap .price small { font-size: 14px; }
.room-wrap .desc { padding: 20px 0 0 0; }
.room-wrap .day-tour { display: block; margin-bottom: 20px; color: #b3b3b3; }
.room-img { display: block; height: 300px; }

.testimony { position: relative; width: 100%; }
.testimony .img-user { background-size: cover; background-position: center; width: 120px; height: 120px; display: block; margin: 0 auto; border-radius: 50%; }
.testimony .user { display: block; margin-top: 10px; font-size: 20px; margin-bottom: 10px; }
.testimony small { display: block; margin-bottom: 20px; font-size: 14px; color: #999; }
.testimony blockquote { padding: 0; margin: 0 0 20px; border: none; }
.testimony blockquote p { color: #000; font-size: 16px; }

/* =======================================================
   BLOG
   ======================================================= */
article { width: 100%; float: left; margin-bottom: 2em; }
article .blog-img { height: 400px; width: 100%; float: left; }
article .desc { padding: 3em; width: 95%; float: left; margin-top: -7em; z-index: 1; background: #fff; }
article .desc h2 a { color: #000; }
article .desc .meta span { margin-right: 10px; }
article .desc .meta span a { color: #ccc; }

.blog-flex { display: flex; flex-wrap: wrap; width: 100%; padding: 0 !important; }
.blog-flex .f-entry-img, .blog-flex .blog-entry { width: 50%; display: inline-block; }
@media screen and (max-width: 768px) { .blog-flex .f-entry-img, .blog-flex .blog-entry { width: 100%; } }
.blog-flex .f-entry-img { background-size: cover; background-position: left center; display: flex; flex-wrap: wrap; }
.blog-entry { padding: 3em 4em; }
@media screen and (max-width: 768px) { .blog-entry { padding: 4em 1em; } }

.blog-post { margin-bottom: 2.5em; display: block; position: relative; }
.blog-post .desc { padding-left: 110px; }
.blog-post .desc h3 { font-weight: 400; font-size: 24px; line-height: 30px; margin-bottom: 10px; }
.blog-post .desc span { font-size: 13px; color: #333; }
.blog-post .img { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-size: cover; background-position: center; border: 4px solid #fff; border-radius: 50%; }

/* =======================================================
   IMAGENES BACKGROUND
   ======================================================= */
.f-tour-img, .room-img, .tour-img, .intro-img, .amenities-img, .blog-img, .hotel-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* =======================================================
   TABS
   ======================================================= */
.tab-pane { padding: 1.5em 0; transition: 0.3s; }
.nav-tabs { border: none; transition: 0.3s; }
.nav-tabs li { font-size: 20px; }
@media screen and (max-width: 768px) { .nav-tabs li { font-size: 12px; } }
.nav-tabs li a { border: none !important; background: transparent; }
.nav-tabs li a:first-child { padding-left: 0; }
.nav-tabs li.active a { color: var(--text-color) !important; background: transparent !important; border: 1px solid red; }

/* =======================================================
   ABOUT FLEX
   ======================================================= */
.about-flex { display: flex; flex-wrap: wrap; width: 100%; }
.about-flex .col-one-forth { width: 25%; padding: 7em 4em 7em 0; }
.about-flex .col-three-forth { width: 75%; padding: 7em 4em; }
.about-flex .col-one-forth, .about-flex .col-three-forth { display: inline-block; }
@media screen and (max-width: 768px) {
  .about-flex .col-one-forth, .about-flex .col-three-forth { width: 100%; padding: 4em 1em; }
}
.about-flex .aside-stretch { position: relative; }
.about-flex .about { text-align: right; }
@media screen and (max-width: 768px) { .about-flex .about { text-align: left; } }
.about-flex .about h2 { color: #fff; text-transform: uppercase; margin-bottom: 2em; }
@media screen and (max-width: 768px) { .about-flex .about h2 { color: #000; } }
.about-flex .about ul { list-style: none; }
.about-flex .about ul li { margin-bottom: 8px; }
.about-flex .about ul li a { color: #fff; }
@media screen and (max-width: 768px) { .about-flex .about ul li a { color: #000; } }

/* =======================================================
   CONTACT
   ======================================================= */
.contact-info-wrap { margin-bottom: 3em; }
.contact-info-wrap p a { color: #000; }
.contact-info-wrap p span { padding-right: 10px; }
.contact-info-wrap p span i { font-size: 20px; color: #000; }
@media screen and (max-width: 768px) { .padding-bottom { margin-bottom: 30px; } }

/* =======================================================
   FORMULARIOS
   ======================================================= */
.form-control { box-shadow: none; border: none; font-size: 14px !important; font-weight: 400; border-radius: 0; }
.form-control:focus, .form-control:active { box-shadow: none; border: 1px solid rgba(0,0,0,0.8); }
input[type="text"] { height: 50px; }
.form-group { margin-bottom: 30px; }
.form-group .btn-modify { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 13px; padding: 10px 15px; }

.colorlib-social-icons { margin: 0; padding: 0; }
.colorlib-social-icons li { margin: 0; padding: 0; list-style: none; display: inline-block; }
.colorlib-social-icons li a { display: inline-block; color: #fff; padding: 0 10px; }
.colorlib-social-icons li a i { font-size: 20px; }

.colorlib-heading { margin-bottom: 5em; }
.colorlib-heading h2 { font-size: 34px; margin-bottom: 20px; line-height: 1.5; color: #000; position: relative; }

/* =======================================================
   SUBSCRIBE
   ======================================================= */
#colorlib-subscribe { background-size: cover; background-position: center; position: relative; color: #fff; }
#colorlib-subscribe .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; font-weight: 700; }
#colorlib-subscribe .colorlib-heading { margin-bottom: 0; }
#colorlib-subscribe .colorlib-heading h2 { color: #000 !important; font-size: 34px; }
#colorlib-subscribe .colorlib-heading p { font-size: 18px; color: #000; }

.qbstp-header-subscribe .form-group { position: relative; width: 60%; }
@media screen and (max-width: 480px) { .qbstp-header-subscribe .form-group { width: 100%; } }
.qbstp-header-subscribe .form-group input::placeholder { color: blue; }
.qbstp-header-subscribe #email { font-size: 18px; width: 100%; padding-right: 3em; border: 1px solid #cb0828; background: #fff; color: #333 !important; }
.qbstp-header-subscribe button { position: absolute; top: 0; right: -4px; border-radius: 0; background: #cb0828; color: #fff; border: none; padding: 14px; }

/* =======================================================
   FOOTER
   ======================================================= */
#colorlib-footer { background: blue; color: white; }
#colorlib-footer .colorlib-footer-links { padding: 0; margin: 0; }
@media screen and (max-width: 768px) { #colorlib-footer .colorlib-footer-links { margin-bottom: 30px; } }
#colorlib-footer .colorlib-footer-links li { padding: 0; margin: 0 0 10px; list-style: none; display: block; }
#colorlib-footer .colorlib-footer-links li a { color: rgba(255,255,255,0.6); text-decoration: none; }
#colorlib-footer .colorlib-footer-links li a:hover { text-decoration: underline; }
#colorlib-footer .colorlib-social-icons li a:first-child { padding-left: 0; }
#colorlib-footer h4 { margin-bottom: 30px; font-size: 20px; color: #fff; }

/* =======================================================
   MAP
   ======================================================= */
#map { width: 100%; height: 500px; position: relative; }
@media screen and (max-width: 768px) { #map { height: 200px; } }

/* =======================================================
   OFFCANVAS
   ======================================================= */
#colorlib-offcanvas {
  position: absolute; z-index: 1901; width: 270px; background: transparent; top: 0; right: 0;
  padding: 75px 40px 40px; overflow-y: auto; display: none;
  transform: translateX(270px); transition: 0.5s;
}
@media screen and (max-width: 768px) { #colorlib-offcanvas { display: block; } }
.offcanvas #colorlib-offcanvas { transform: translateX(0); }
#colorlib-offcanvas a { color: #fff; }
#colorlib-offcanvas a:hover { color: rgba(255,255,255,0.8); }
#colorlib-offcanvas ul { padding: 0; margin: 0; font-size: 1.5em; }
#colorlib-offcanvas ul li { padding: 0; margin: 0; list-style: none; }
#colorlib-offcanvas ul li > ul { padding-left: 20px; display: none; }
#colorlib-offcanvas ul li.offcanvas-has-dropdown > a { display: block; position: relative; }
#colorlib-offcanvas ul li.offcanvas-has-dropdown > a:after {
  position: absolute; right: 0; font-family: 'icomoon'; content: "\e92d"; font-size: 20px; color: rgba(255,255,255,0.2); transition: 0.5s;
}
#colorlib-offcanvas ul li.offcanvas-has-dropdown.active a:after { transform: rotate(-180deg); }

/* =======================================================
   GO TO TOP
   ======================================================= */
.gototop { position: fixed; bottom: 20px; right: 20px; z-index: 999; opacity: 0; visibility: hidden; transition: 0.5s; }
.gototop.active { opacity: 1; visibility: visible; }
.gototop a { width: 50px; height: 50px; display: table; background: var(--background-color); color: var(--text-color); text-align: center; border-radius: 4px; }
.gototop a i { height: 50px; display: table-cell; vertical-align: middle; }
.gototop a:hover, .gototop a:active, .gototop a:focus { text-decoration: none; outline: none; }

/* =======================================================
   PAGINATION
   ======================================================= */
.pagination li { margin: 2px; }
.pagination li a { color: #000; background: #fff; border-radius: 0; margin: 2px; }
.pagination li a:first-child { border-radius: 2px; }
.pagination li a:hover, .pagination li a:focus { background: var(--background-color); color: var(--text-color); border: 1px solid var(--background-color); }
@media screen and (max-width: 768px) { .pagination li a { padding: 7px 15px; } }
.pagination li.active a { border: 1px solid var(--background-color); background: var(--background-color); color: #000; }

/* =======================================================
   BOTONES
   ======================================================= */
.btn { margin: 0 4px 4px 0; font-size: 16px; font-weight: 400; border-radius: 14px; transition: 0.5s; padding: 8px 20px; }
.btn.btn-md { padding: 8px 20px !important; }
.btn.btn-lg { padding: 18px 36px !important; }
.btn:hover, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }

.btn-primary { background: var(--background-color); color: white !important; border: 1px solid var(--background-color); }

.btn.with-arrow { position: relative; }
.btn.with-arrow i { visibility: hidden; opacity: 0; position: absolute; right: 0; top: 50%; margin-top: -8px; transition: 0.2s; }
.btn.with-arrow:hover { padding-right: 50px; }
.btn.with-arrow:hover i { visibility: visible; opacity: 1; right: 18px; color: #fff; }

/* =======================================================
   UTILIDADES
   ======================================================= */
.row-pb-lg { padding-bottom: 6em !important; }
.row-pb-md { padding-bottom: 4em !important; }
.row-pb-sm { padding-bottom: 2em !important; }
.nopadding { padding: 0 !important; margin: 0 !important; }
.colorlib-loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat #fff; }
.js .animate-box { opacity: 0; }
.overlay { background: none !important; }
.colorlib-hotel-index .container .row .col-md-12 .animate-box .owl-carousel .owl-controls { display: none; }
.owl-item.active { padding-bottom: 2em; }