/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

:root {
    --amarillo: #eece10;
    --azul: #009ee7;
    --azulcielo: #17c9e1;
    --azulpastel: #ecf8fb;
    --grispastel: #f1f1f1;
    --naranja: #fd9f2e;
    /*ff8100*/
    --main-text-color: #505050;
    --text-muted: #6c757d;
    --grad-azul: linear-gradient(#70c8e0, #59a0ea);
    --grad-naranja: linear-gradient(#f15f06, #fd9f2e);
    --fw-lite: 300;
    --fw-book: 400;
    --fw-bold: 500;
    --fw-heavy: 900;
}

body {
    position: relative;
    cursor: auto;
}


/* ==========================================================================
   Tipography
   ========================================================================== */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/hn-light.woff2') format('woff2'), url('../fonts/hn-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/hn-roman.woff2') format('woff2'), url('../fonts/hn-roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/hn-medium.woff2') format('woff2'), url('../fonts/hn-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/hn-heavy.woff2') format('woff2'), url('../fonts/hn-heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


/* Bad Script - latin */

@font-face {
    font-family: 'Bad Script';
    font-style: normal;
    font-weight: 400;
    src: local('Bad Script Regular'), local('BadScript-Regular'), url(https://fonts.gstatic.com/s/badscript/v7/6NUT8F6PJgbFWQn47_x7pOskzA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
   Baseline
   ========================================================================== */

body {
    font-family: "HelveticaNeue", "Helvetica Neue", -apple-systrem, BlinkMacSystremFont, "Segoe UI", Roboto, Arial, sans-serif, "Apple Color remoji", "Segoe UI remoji", "Segoe UI Symbol";
    font-weight: var(--fw-book);
    line-height: 1.5;
    color: var(--main-text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0 0 1.5rem;
}

h1,
h2,
.h1,
.h2 {
    font-weight: var(--fw-heavy);
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
    font-weight: var(--fw-bold);
}

h1,
.h1 {
    line-height: 1.2;
}

h2,
.h2 {
    line-height: 1.5;
}

h3,
.h3 {
    line-height: 1.7142857143;
}

h4,
.h4 {
    line-height: 1;
}

h5,
.h5 {
    line-height: 1.19047619051;
}

h6,
.h6 {
    line-height: 1.5;
}

p,
blockquote,
dl,
ol,
ul {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

ol,
ul {
    padding-left: 40px;
}

blockquote {
    font-style: italic;
    padding-left: 34px;
    border-left: 6px solid #666;
}

b,
strong {
    font-weight: var(--fw-bold);
    font-style: normal;
}

i,
em {
    font-weight: var(--fw-book);
    font-style: italic;
}


/* Esto es solo para que no rompa la grilla del baseline.
Se rompe si line-height: 1.5 luego de muchos párrafos.*/

small {
    line-height: 1.2rem;
}

hr {
    margin: 1.5rem 0;
}

.font-badscript {
    font-family: 'Bad Script', cursive;
    font-weight: 400;
}


/* ==========================================================================
   Buttons / Botones
   ========================================================================== */

.btn-color {
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background: var(--naranja);
    border: 1px solid transparent;
    transition: background-color 0.3s ease 0s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-derecha {
    cursor: pointer;
    color: #ccc;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background-image: url(/IntegraFlightHotel/Content/home/pag/flecha-drch.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-color 0.3s ease 0s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-left {
    cursor: pointer;
    color: #ccc;
    height: 60px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background-image: url(/IntegraFlightHotel/Content/home/pag/flecha-izq.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-color 0.3s ease 0s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-conflecha {
    position: relative;
    border: 1px solid lightblue;
    background-color: silver;
}

.btn-conflecha-izq::before {
    content: "\276e";
    background-color: blue;
    margin: 0px;
    height: auto;
    padding: 10px 15px;
    border-radius: 10%;
}

.btn-conflecha-der::after {
    content: "\276f";
    background-color: blue;
    margin: 5px;
    height: auto;
    padding: 10px 15px;
    border-radius: 10%;
}

#solecito {
    background: white url("/IntegraFlightHotel/Content/home/pag/sol.svg")no-repeat;
    width: 30px;
    height: 30px;
    margin: 3px;
    position: relative;
    padding-left: 10px;
    /* Equal to width of new image */
}

#avioncito {
    background: white url("/IntegraFlightHotel/Content/home/pag/avion-de-papel-2.svg")no-repeat;
    width: 30px;
    height: 30px;
    margin: 3px;
    position: relative;
    padding-left: 10px;
    /* Equal to width of new image */
}

#palmera {
    background: white url("/IntegraFlightHotel/Content/home/pag/palmera.svg")no-repeat;
    width: 30px;
    height: 30px;
    margin: 3px;
    position: relative;
    padding-left: 10px;
    /* Equal to width of new image */
}

#pelota {
    background: white url("/IntegraFlightHotel/Content/home/pag/pelota-de-playa.svg")no-repeat;
    width: 30px;
    height: 30px;
    margin: 3px;
    position: relative;
    padding-left: 10px;
    /* Equal to width of new image */
}


/* Three image containers (use 25% for four, and 50% for two, etc) */

.columnax {
    float: left;
    width: 33.33%;
    padding: 15px;
}

.centrox {
    float: center;
    width: 7%;
    padding: 0.30rem;
}

.columnaz {
    float: right;
    display: inline-block;
    width: 33.33%;
    padding: 15px;
}


/* Clear floats after image containers */

.rowx::after {
    content: "";
    clear: both;
    display: table;
}


/*Cuando btn se usa en un anchor: LoVe For HAte*/

.btn-color:link {
    color: #fff;
}

.btn-color:visited {
    color: #fff;
}

.btn-color:focus,
.btn-color:hover,
.btn-color:active {
    color: #fff;
    text-decoration: none;
    background-color: #f7800c;
}

.btn-color:active {
    background-color: #eb690a;
    transition: background-color 0s;
}

.btn-color:disabled {
    background-color: #ccc;
}

.btn--primary,
.btn--primary:link,
.btn--primary:visited {
    color: #fff;
}

.btn--primary:focus,
.btn--primary:hover {
    color: #fff;
}

.btn--primary:active {
    color: #fff;
    background-color: #fff;
}

.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
    font-weight: var(--fw-bold);
    color: var(--azul);
    background-color: #fff;
    border-color: var(--azul);
}

.btn--secondary:focus,
.btn--secondary:hover {
    color: #fff;
    background-color: var(--azul);
}

.btn--secondary:active {
    color: #fff;
    background-color: var(--azulcielo);
    transition: background-color 0s ease 0s;
}


/* ==========================================================================
   Badges
   ========================================================================== */

.badge-naranja {
    color: #fff;
    background-color: var(--naranja);
}

.badge-precio {
    font-size: 1.25rem;
    color: #fff;
    background-color: #00cbe3;
    margin: 0;
}

a.badge-naranja:focus,
a.badge-naranja:hover {
    color: #fff;
    background-color: #f15f06;
}

.badge-lang {
    color: #fff;
    background-color: #6c757d;
    vertical-align: text-top;
}

.ofertas-badge {
    font-size: 1rem;
}


/* ==========================================================================
   Íconos
   ========================================================================== */


/* Clase base para pre-posicionar íconos en campos de formulario. */

.ico-prepended {
    padding-left: 2rem;
    background-repeat: no-repeat;
    background-size: 21px;
    background-position: 6px center;
}

.ico-arrive {
    background-image: url(/IntegraFlightHotel/Content/img/ico/arrive.png);
}

.ico-bag {
    background-image: url(/IntegraFlightHotel/Content/img/ico/bag.png);
}

.ico-bed {
    background-image: url(/IntegraFlightHotel/Content/img/ico/bed.png);
}

.ico-date-from {
    background-image: url(/IntegraFlightHotel/Content/img/ico/date-from.png);
}

.ico-date-to {
    background-image: url(/IntegraFlightHotel/Content/img/ico/date-to.png);
}

.ico-depart {
    background-image: url(/IntegraFlightHotel/Content/img/ico/depart.png);
}

.ico-marker {
    background-image: url(/IntegraFlightHotel/Content/img/ico/marker.png);
}

.ico-pax {
    background-image: url(/IntegraFlightHotel/Content/img/ico/pax.png);
}


/* Flag icons */

.ico-flag-ru {
    background-image: url(/IntegraFlightHotel/Content/img/flags/ru.png);
}

.ico-flag-es {
    background-image: url(/IntegraFlightHotel/Content/img/flags/es.png);
}

.ico-flag-pt {
    background-image: url(/IntegraFlightHotel/Content/img/flags/pt.png);
}

.ico-flag-it {
    background-image: url(/IntegraFlightHotel/Content/img/flags/it.png);
}

.ico-flag-eu {
    background-image: url(/IntegraFlightHotel/Content/img/flags/eu.png);
}

.ico-flag-fr {
    background-image: url(/IntegraFlightHotel/Content/img/flags/fr.png);
}


/* Footer nav icons */

.ico-terms {
    background-image: url(/IntegraFlightHotel/Content/img/ico/list.svg);
}

.ico-question {
    background-image: url(/IntegraFlightHotel/Content/img/ico/question.svg);
}

.ico-xmark {
    background-image: url(/IntegraFlightHotel/Content/img/ico/xmark.svg);
}

.ico-users {
    background-image: url(/IntegraFlightHotel/Content/img/ico/users.svg);
}

.ico-telf {
    background-image: url(/IntegraFlightHotel/Content/img/ico/telf.svg);
}


/* Footer social icons */

.ico-whatsapp {
    background-image: url(/IntegraFlightHotel/Content/img/ico/whatsapp.png);
}

.ico-instagram {
    background-image: url(/IntegraFlightHotel/Content/img/ico/instagram.png);
}

.ico-facebook {
    background-image: url(/IntegraFlightHotel/Content/img/ico/facebook.png);
}

.ico-youtube {
    background-image: url(/IntegraFlightHotel/Content/img/ico/youtube.png);
}


/* Footer index icons */

.ico-discount::before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/discount.svg);
}

.ico-flight30::before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/flight30.svg);
}

.ico-sea::before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/sea.svg);
}

.ico-globe::before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/globe.svg);
}

.ico-confirm::before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/confirm.svg);
}

.ico-solbahia:before {
    background-image: url(/IntegraFlightHotel/Content/img/ico/solbahia.png) !important;
}


/* Íconos en los listados de ofertas */

.ico-rating-star {
    background-image: url(/IntegraFlightHotel/Content/img/ico/star.svg);
}

.ico-camera {
    background-image: url(/IntegraFlightHotel/Content/img/ico/cam.svg);
}

.ico-css-inf::after {
    content: "i";
    color: orange;
    font-size: 1.5rem;
    font-weight: var(--fw-book);
    font-family: monospace;
    line-height: 1;
    text-align: center;
    border: 2px solid orange;
    border-radius: 50%;
    display: inline-block;
    vertical-align: super;
    width: 1.5rem;
    height: 1.5rem;
}


/* Íconos localiza tu reserva */

.ico-curreuro {
    background-image: url("/IntegraFlightHotel/Content/img/ico/currencyeuro.svg")
}

.ico-infbubble {
    background-image: url("/IntegraFlightHotel/Content/img/ico/infbubble.svg")
}

.ico-not {
    background-image: url("/IntegraFlightHotel/Content/img/ico/not.svg")
}

.ico-print {
    background-image: url("/IntegraFlightHotel/Content/img/ico/print.svg")
}

.ico-support {
    background-image: url("/IntegraFlightHotel/Content/img/ico/support.svg")
}

.loca-toc__item:hover .ico-curreuro {
    background-image: url("/IntegraFlightHotel/Content/img/ico/currencyeuro_blue.svg")
}

.loca-toc__item:hover .ico-infbubble {
    background-image: url("/IntegraFlightHotel/Content/img/ico/infbubble_blue.svg")
}

.loca-toc__item:hover .ico-not {
    background-image: url("/IntegraFlightHotel/Content/img/ico/not_blue.svg")
}

.loca-toc__item:hover .ico-print {
    background-image: url("/IntegraFlightHotel/Content/img/ico/print_blue.svg")
}

.loca-toc__item:hover .ico-support {
    background-image: url("/IntegraFlightHotel/Content/img/ico/support_blue.svg")
}

.ico-locanav {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
}

.loca-toc__item.nav-link {
    color: var(--main-text-color);
    padding: 0.5rem;
}

.loca-toc__item.nav-link:hover {
    color: #000;
}

.ico-css-locaedit {
    border-radius: 50%;
    background-color: #c5c5c5;
}

.loca-toc__item:hover .ico-css-locaedit {
    background-image: var(--grad-azul);
}


/*
   Enlaces con protocolo para teléfonos (tel:)
   ========================================================================== */

.tel-link::before {
    content: "\260e";
    color: var(--main-text-color);
    margin-right: 0.5em;
}


/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
    color: inherit;
    font-size: 0.875em;
    margin: 1.5rem 0;
    background: transparent;
    border: 0;
}

.breadcrumb a {
    color: #979797;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    text-decoration: underline;
}


/* ==========================================================================
   Listados y estilos de lista
   ========================================================================== */

.list-banded-rows li:nth-of-type(odd) {
    background-color: #f1f1f1;
}

.list-banded-rows li {
    padding: 6px 10px;
    border-bottom: 1px solid #ccc;
}

.lista-origenes .nav-item,
.lista-origenes li,
.lista-opciones-oferta .nav-item,
.lista-opciones-oferta li {
    margin: 0 1rem 1rem 0;
}

.list-bullet-orange,
.list-counter-orange {
    list-style: none;
}

.list-bullet-orange {
    padding: 0 0 0 1rem;
}

ol.list-counter-orange li,
ul.list-bullet-orange li {}

ol.list-counter-orange li::before,
ul.list-bullet-orange li::before {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: var(--naranja);
    display: inline-block;
    margin-left: -1rem;
}

ul.list-bullet-orange li::before {
    content: "\2022";
    width: 1rem;
}

ol.list-counter-orange li::before {
    content: counter(li);
    width: 2rem;
    margin-right: 1rem;
    text-align: right;
}

ol.list-counter-orange li {
    counter-increment: li;
}


/* Resaltar los emails en la lista de emails de contacto */

.contact-emails a[href^="mailto:"] {
    font-weight: var(--fw-bold);
}


/* ==========================================================================
   Calendario
   ========================================================================== */

.btn--cal {
    background-color: #adadad;
}

.calendario-booking {
    width: 100%;
    margin-bottom: 1.5rem;
}

.calendario-booking caption {
    color: var(--azul);
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    caption-side: bottom;
}

.calendario-booking th {
    color: #adadad;
    font-size: 1rem;
    font-weight: var(--fw-book);
    border: 0;
}

.calendario-booking thead th {
    vertical-align: bottom;
}

.calendario-booking td {
    padding: 0;
    width: 70px;
    height: 48px;
}


/*Un div adentro del td para habilitar position:relative*/

.calendario-booking div {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #e5e5e5;
    background-color: var(--grispastel);
}

.calendario-booking a {
    text-decoration: none;
}


/*
- mesCalendario: El nombre del mes en el calendario.

- diaCalendario: es el número del día en el calendario.

- FechaSeleccionada: Es la fecha que se ha seleccionado y se está mostrando.

- FechaConOferta: Casilla que pertenece al mes, tiene diaCalendario (muestra el
número del día en el calendario) y tiene oferta disponible, (muestra un precio).

- FechaSinOferta: Es una casilla que pertenece al mes y tiene el
diaCalendario presente, pero no tiene oferta disponible (no sale precio).

- FechaVacia: Es la casilla que no tiene fecha porque pertenece a otro mes.
*/

.mesCalendario {
    font-weight: var(--fw-bold);
}

.diaCalendario {
    color: #adadad;
    font-size: 0.55rem;
    position: absolute;
    left: 4px;
    top: 4px;
}

.FechaSeleccionada div {
    color: #fff;
    background-color: var(--azul);
}

.FechaSeleccionada .diaCalendario {
    color: #fff;
}

.FechaConOferta div {
    color: #adadad;
    background-color: #fff;
}

.FechaSinOferta {
    color: #adadad;
    background-color: var(--grispastel);
}

.FechaSinOferta .diaCalendario {
    color: #adadad;
}

.FechaVacia {
    /*background-color: transparent;*/
}

.FechaSeleccionada a,
.FechaConOferta a {
    display: block;
    width: 100%;
    height: 100%;
}

.FechaSeleccionada:hover a,
.FechaConOferta:hover a {
    color: #444;
    background-color: var(--azulpastel);
}

.FechaSeleccionada:hover div,
.FechaConOferta:hover div {
    border-color: var(--azul);
}

.FechaConOferta:hover .diaCalendario,
.FechaSeleccionada:hover .diaCalendario,
.FechaSeleccionada:hover .PrecioFecha,
.FechaConOferta:hover .PrecioFecha {
    color: #444;
}


/*Precio en la fecha; precio de esa fecha; precio para esa fecha.*/

.PrecioFecha {
    color: #444;
    text-decoration: none;
}


/*Puede aparecer como el único precio en el calendario*/

.PrecioFechaSeleccionada {
    color: #fff;
}

.FechaSeleccionada:hover .PrecioFechaSeleccionada {
    color: #444;
}

.PrecioFecha,
.PrecioFechaSeleccionada {
    font-size: 0.9rem;
    font-weight: var(--fw-bold);
    position: absolute;
    bottom: 0;
    right: 4px;
}


/*
Precio total sin descuento
Nota: recomendable usar la etiqueta <s> para el precio tachado.
La etiqueta <s> le mantiene el valor semántico de que es un precio
relevante pero que ya no aplica.
1: Para poder agregar un line-through con un estilo diferente.
*/

.precio-total-sin-dto {
    color: #999;
    font-size: 1em;
    text-decoration: none;
    /*1*/
    line-height: 1.5;
    position: relative;
}

.precio-total-sin-dto:after {
    content: "";
    border-bottom: 1px solid #f00;
    width: 60px;
    height: 2px;
    position: absolute;
    right: 12px;
    bottom: 10px;
    transform: rotate(-10deg);
}


/* ==========================================================================
   Mensajes
   ========================================================================== */

.noencontro {
    color: var(--main-text-color);
    text-align: center;
    background-color: var(--grispastel);
    padding: 8px;
    border: 1px solid #eee;
    margin: 1.5em 0;
}


/* ==========================================================================
   Paginador
   ========================================================================== */

.paginador {
    text-align: center;
    max-width: 825px;
    margin: 1.5em auto 0.2em auto;
}

.paginador-tit {
    font-size: 1.125rem;
}

.paginador-nav {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.paginador-nav .btn {
    font-size: 0.875rem;
    padding: 1.375rem 2px;
}


/* ==========================================================================
   Banner flotante llamada y whatsapp
   ========================================================================== */


/*
1) Hacer que el sticker esté por encima de todo.
*/

#llamanos-sticker {
    position: -webkit-sticky;
    position: sticky;
    bottom: 1rem;
    z-index: 100;
    /* 1 */
}

.llamanos-sticker-enlace {
    display: block;
    width: 100%;
    height: 74px;
}

.llamanos-md {
    background-color: transparent;
    background-image: url(/IntegraFlightHotel/Content/images/es/llama-escribe.png);
    background-size: 222px 148px;
    background-repeat: no-repeat;
    width: 222px;
    height: 148px;
}

.llamanos-xs-wa,
.llamanos-xs-tlf {
    color: #fff;
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    background-repeat: no-repeat;
}

.llamanos-xs-wa {
    background-color: #38a743;
    background-size: 38px;
    background-position: 4px 10px;
}

.llamanos-xs-tlf {
    background-color: #ec872b;
    padding: 0.5rem 4px 0.5rem 2rem;
    background-size: 32px;
    background-position: 2px 16px;
}

.llamanos-xs-wa small,
.llamanos-xs-tlf small {
    font-weight: var(--fw-book);
}

.llamanos-xs-wa:hover,
.llamanos-xs-tlf:hover {
    color: #fff;
    text-decoration: underline;
}


/* ==========================================================================
   Tablas
   ========================================================================== */


/* Se utiliza en pasos para reserva. Trabaja en conjunto con
.table y .table-borderless de Bootstrap. */

.table-style-1 th {
    color: var(--naranja);
}

.table-style-1 th,
.table-style-1 td {
    border-right: 1px solid #9f9f9f;
}

.table-style-1 th:last-child,
.table-style-1 td:last-child {
    border-right: 0;
}


/* Se utiliza en página calendario */

.table-style-2 {
    font-size: 0.875rem;
    width: 100%;
    border: 1px solid #e5e5e5;
    margin-bottom: 1.5rem;
}

.table-style-2 caption {
    caption-side: top;
    color: var(--main-text-color);
}

.table-style-2 th,
.table-style-2 td {
    color: #505050;
    padding: 0.75rem;
}

.table-style-2 th {
    font-weight: var(--fw-bold);
    vertical-align: top;
    border: 1px solid #fff;
    border-top-color: #e5e5e5;
    background-color: #fff;
}

.table-style-2 td {
    vertical-align: top;
    border: 2px solid #fff;
}

.table-style-2 tbody tr {
    background-color: var(--azulpastel);
}


/*Con líneas intercaladas*/

.table-style-2--striped tbody tr:nth-of-type(even) {
    background-color: #fff;
}


/* Asegurar que se muestre el borde con color en la primera columna. */

.table-style-2 th:first-child,
.table-style-2 td:first-child {
    border-left-color: #e5e5e5;
    border-left-width: 1px;
}


/* Asegurar que se muestre el borde con color en la última columna. */

.table-style-2 th:last-child,
.table-style-2 td:last-child {
    border-right-color: #e5e5e5;
    border-right-width: 1px;
}


/* Asegurar que se muestre el borde con color en la última fila. */

.table-style-2 tbody tr:last-child td,
.table-style-2 tbody tr:last-child th {
    border-bottom-color: #e5e5e5;
    border-bottom-width: 1px;
}


/* Asegurar que se muestre el borde con color en la primera fila em la primera
celda. Solo aplica cuando la tabla está en formato vertical:
con th y td en misma fila. */

.table-style-2 tbody tr:first-child th+td {
    border-top-color: #e5e5e5;
    border-top-width: 1px;
}


/* ==========================================================================
   jQuery Expander - Expandir contenido
   ========================================================================== */

.expand-content {
    display: block;
    overflow: hidden;
}

.crm_more_trigger {
    color: var(--main-text-color);
    background-color: var(--grispastel);
    font-size: 2rem;
    line-height: 0.25;
    text-align: center;
    display: block;
    height: 1.5rem;
    position: relative;
}

.crm_more_trigger:before {
    content: "";
    background-image: linear-gradient(to top, #fff, transparent);
    width: 100%;
    height: 5rem;
    position: absolute;
    bottom: 1.5rem;
    left: 0;
}


/* ==========================================================================
   jQuery Accordion Tabs
   ========================================================================== */


/*
Basado en el "accordion tabs" creado por Brad Frost.
http://codepen.io/bradfrost/full/dlwBD
http://bradfrost.github.io/this-is-responsive/patterns.html
*/


/*Estilos base para el acordeón.*/

.tab {
    cursor: pointer;
    position: relative;
    outline: 0;
    padding: 0;
    margin: 0;
}

.tab:after {
    content: '+';
    font-size: 1em;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}


/*.tab.active { background: transparent; }*/

.tab.active:after {
    content: '-';
}

.panel {
    overflow: hidden;
}

.js .panel {
    max-height: 0;
    height: 0;
}

.js .panel.active {
    max-height: 100%;
    height: 100%;
}


/* Agregar estilos con el tema de la web. Donde se vaya a usar el acordeón,
usarlo con esta clase como contenedora para que salga con el estilo de esta
web.*/

.custom-accordion .tab {
    font-size: 1.5rem;
    line-height: 1;
    padding-right: 1rem;
    margin: 1.5rem 0;
}

.tab:after {
    color: var(--naranja);
    font-weight: var(--fw-heavy);
    font-size: 2rem;
}


/* ==========================================================================
   Datos touroperador
   ========================================================================== */

#toperador {
    color: inherit;
    font-family: monospace;
    background-color: #f6f6f6;
    text-align: left;
    padding: 8px;
    border: 2px solid #e0e0e0;
    margin: 1.5em auto;
}


/*
Estilos para diferenciar data y su valor (data:value)
<span> es la data y value obtiene el color heredado.
Ej: <span>Nombre:</span> Valor
*/

#toperador span {
    color: #999;
    font-size: 12px;
    text-align: right;
    background-color: #fff;
    display: inline-block;
    width: 135px;
    padding: 4px 0;
    border-bottom: 1px solid #f6f6f6;
}


/* ==========================================================================
   Ekomi reviews
   ========================================================================== */

.ekomi-widget-container #ekw68 {
    margin: 0 auto;
}

#ekw68 {
    max-width: 960px !important;
    width: 100% !important;
    float: none !important;
}

#ekw68 .review-section {
    width: 334px !important;
    padding-right: 16px !important;
}

@media screen and (max-width: 991px) {
    #ekw68 {
        width: 100% !important;
        max-width: 960px;
    }
    #ekw68 .review-section {
        width: 334px !important;
        padding-right: 16px !important;
    }
}

@media screen and (max-width: 768px) {
    #ekw68 {
        width: 100% !important;
    }
    #ekw68 .stars-rating {
        width: 175px !important;
        padding-left: 20px !important;
    }
    #ekw68 .rating-section {
        width: 275px !important;
    }
    #ekw68 .review-section {
        width: 100% !important;
        padding-right: 0 !important;
    }
}


/* ==========================================================================
   Animaciones
   ========================================================================== */

@keyframes highlight {
    from {
        background-color: yellow;
    }
    to {
        background-color: white;
    }
}


/* ==========================================================================
   Cabecero / Site Header
   ========================================================================== */

.site-header {
    margin-bottom: 1.5rem;
}


/* Site Navigation / Menu / Botonera
   ========================================================================== */

.site-header {
    background: linear-gradient(#00cce7, #009cf2);
}

.site-header__phone {
    color: #fff;
    font-size: 1.125rem;
    font-weight: var(--fw-lite);
    text-decoration: none;
    display: inline-block;
    margin-right: 4px;
}

.site-header__phone i {
    font-size: 80%;
    color: var(--amarillo);
}

.site-header__phone:hover {
    color: #fff;
    text-decoration: underline;
}

.site-header__phone .ico-whatsapp {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-color: transparent;
    background-position: center;
}

.site-navbar .container {
    padding: 0
}

.navbar-brand {
    margin-right: 0;
}

.site-navbar__brand,
.site-navbar__brand-logo {
    vertical-align: middle;
    display: inline-block;
}

.site-navbar__brand-logo {
    max-width: 42px;
    width: 100%;
    height: auto;
}

.site-navbar__brand-name,
.site-navbar__brand-slogan {
    color: #fff;
    font-style: italic;
    line-height: 1;
    display: block;
}

.site-navbar__brand-name {
    font-weight: var(--fw-bold);
    font-size: 1rem;
}

.site-navbar__brand-slogan {
    font-weight: var(--fw-lite);
    font-size: 0.875rem;
}

.site-navbar .nav-link {
    font-weight: var(--fw-lite);
    font-size: 1rem;
}


/*Para recordar el orden en que deben ir estas pseudo-clases: LoVe For HAte*/

.site-navbar .nav-link:link {
    color: #fff;
}

.site-navbar .nav-link:visited {
    color: #fff;
}

.site-navbar .nav-link:focus,
.site-navbar .nav-link:hover,
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .nav-link:active {
    color: #fff;
    text-decoration: none;
}

.site-navbar .nav-item {
    text-align: center;
    border-bottom: 3px solid transparent;
}

.site-navbar .nav-item:hover {
    border-bottom: 3px solid #fd9f2e;
}

#web-select .badge {
    vertical-align: text-top;
}

#web-select.dropdown-toggle::after {
    margin-left: 0;
}


/* ==========================================================================
   Site Footer / Pie
   ========================================================================== */

.site-footer {
    color: #fff;
    height: calc(100% - 800px);
    background: linear-gradient(#00cce7, #009cf2);
    margin-top: -90px;
    position: relative;
}

.site-footer::before {
    content: "";
    background-color: #00cce7;
    height: 275px;
    width: 250px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: -56px;
    left: 0;
    right: 0;
    z-index: -1;
}


/* Footer nav
   ========================================================================== */

.footer-nav {
    margin: 1.75rem 0;
}

.footer-nav__item {
    font-size: 1.125rem;
    font-weight: var(--fw-lite);
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    min-height: 80px;
    margin: 1rem;
}

.footer-nav__item-link {
    color: #fff;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    background-size: 42px;
    padding: 1.75rem 1rem 1rem 58px;
    height: 100%;
}

.footer-nav__item-link:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--naranja);
}


/* Footer index
   ========================================================================== */

.footer-index__item {
    max-width: 200px;
    width: 100%;
    margin: 0 2.0625rem;
    position: relative;
}

.footer-index__item::before {
    content: "";
    width: 32px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: 32px;
    position: absolute;
    left: -36px;
    top: -6px;
}

.footer-index__title {
    color: var(--amarillo);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    margin: 0;
    min-height: 36px;
}

.footer-index__list {
    color: #fff;
    padding-left: 0;
    list-style: none;
}

.footer-index__list a {
    color: #fff;
}

.footer-index__list a:hover {
    color: #fff;
}

.footer-web-select__item {
    color: #fff;
    font-size: 1rem;
}

.footer-web-select__item {
    padding: 0 0 0 2rem;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left center;
}


/* Footer footnote
   ========================================================================== */

.footer-footnote {
    margin: 1rem;
}

.footer-footnote::after,
.footer-footnote::before {
    content: "";
    height: 42px;
    margin: 1rem 0;
    display: block;
    background-size: auto 42px;
    background-repeat: no-repeat;
    background-position: center;
}

.footer-footnote::after {
    background-image: url(/IntegraFlightHotel/Content/img/brands-banner.png);
}

.footer-footnote::before {
    background-image: url(/IntegraFlightHotel/Content/img/cert-banner.png);
}


/* Footer social networks
   ========================================================================== */

.footer-social .nav-link {
    color: #fff;
    font-size: 2.5rem;
}

.footer-social .nav-link:hover {
    background-color: var(--naranja);
}

.footer-social-icon {
    width: 64px;
    height: 64px;
    background-color: transparent;
    background-size: 42px 42px;
    background-repeat: no-repeat;
    background-position: center;
}

.footer-social-icon:hover {
    background-color: var(--naranja);
}


/* Footer UNICEF collab
   ========================================================================== */

.unicef-collab {
    font-size: 1.3125rem;
    font-weight: var(--fw-lite);
    text-align: center;
    margin-top: 1.5rem;
}

.unicef-collab img {
    height: 62px;
}


/* ==========================================================================
   Hero Area
   ========================================================================== */


/*
Clase base del área héroe.

Notas:
max-height: 415px; en las páginas internas

Este elemento está diseñado para ser usado justo después del cabecero.

1) Esto es para compensar el margen del cabecero/botonera, que no sea
visible el margen de separación.
2) Para que el banner de la llamada no tape el buscador en pantallas pequeñas,
se incrementa su posición en el z-index.
*/

.hero-area {
    margin-top: -1.5rem;
    /*1*/
    background-color: #fff;
    /*2*/
    /*z-index: 100;*/
    /*2*/
}


/*
   Clase modificadora para el buscador interno
   ========================================================================== */

.hero-area--buscadorint {
    background-image: url(/IntegraFlightHotel/Content/img/hero-bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    position: relative;
}


/*
1) No es 50px porque hay un bug en Chrome (marzo 2019) que si es 50px o 51px
(también pasa con otros tamaños), pone una línea transparente como si tuviera
margin-bottom:1px. No pasa en FFox ni Edge.
*/

.hero-area--buscadorint::after {
    content: "";
    width: 100%;
    height: 52px;
    /*1*/
    background: linear-gradient(transparent, #fff);
    position: absolute;
    left: 0;
    bottom: 0;
}


/*
   Clase modificadora para la home
   ========================================================================== */

.hero-area--home {
    position: relative;
}


/*
   Clase modificadora para localiza tu reserva
   ========================================================================== */

.hero-area--loca {
    background-image: url(/IntegraFlightHotel/Content/img/hero-bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center bottom;
    position: relative;
    margin-bottom: 1.5rem;
}


/* ==========================================================================
   Buscador Interno
   ========================================================================== */

.buscador {
    color: #333;
    padding-top: 1rem;
    padding-bottom: 2rem;
    /* Prevenir que el .hero-area::after no se le pose encima */
    position: relative;
    z-index: 100;
}

.buscador-tabs {
    margin-bottom: 4px;
}

button.buscador__tab {
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.buscador__tab,
.buscador__panel {
    background-color: rgba(210, 220, 230, 0.8);
}

.buscador__tab {
    text-align: center;
    padding: 8px 0;
    font-size: 0.8rem;
    margin-right: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.buscador__tab:last-child {
    margin-right: 0;
}

.buscador__tab:disabled {
    color: #333;
}

.buscador__tab.isSelected {
    background-color: #fff;
}

.buscador__panel {
    padding-top: 1rem;
}

.buscador__panel label {
    font-size: 0.8rem;
}

.btn--buscadorint {
    font-weight: var(--fw-bold);
    width: 100%;
    padding: 9px 0;
    margin-top: 1rem;
}

.buscador .form-control {
    font-weight: var(--fw-bold);
    border: 0;
}


/* ==========================================================================
   Secciones de ofertas
   ========================================================================== */

.seccion-oferta:nth-of-type(even) {
    /*background-color: var(--azulpastel);*/
}

.seccion-oferta {
    padding: 0 0 0 0;
    border: 1px solid #ddd;
}

.seccion-oferta .nav-tabs .nav-item.show .nav-link,
.seccion-oferta .nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom-color: #fff;
}

.seccion-oferta:nth-child(even) .nav-tabs .nav-item.show .nav-link,
.seccion-oferta:nth-child(even) .nav-tabs .nav-link.active {
    /*border-bottom-color: var(--azulpastel);*/
}

.nav-tabs .seccion-oferta__titulo {
    font-size: 1.5rem;
    font-weight: var(--fw-heavy);
}

.seccion-oferta__subtitulo {
    font-size: 1.125rem;
    display: block;
}

.seccion-oferta__descripcion {
    font-family: 'Bad Script', cursive;
    font-size: 1.125rem;
    font-weight: 400;
}


/* ==========================================================================
   Contenedores de ofertas / producto
   ========================================================================== */


/*
También conocido como "tarjeta de producto", es la forma en que se muestra una
oferta.

Tamaños ofertas: small y large
- small: ofertas de un país, hoteles de un destino
- large: para países, combinados, circuitos...

También pueden usarse arbitrariamente para destacar o simple ajuste de tamaño
pero debe tenerse en cuenta que las imágenes de los países, combinados,
circuitos y entre otros son de mayor tamaño que la de los hoteles.

Tamaños de imagen de legado
Nuevos tamaños de imagen:
- Small: 265x120
- Large: 350x140

las ofertas tienen las siguientes partes:

.oferta-s,
.oferta-l {
	.oferta-img,
	.oferta-img-frame,
	.oferta-destino {
		.oferta-destino__title,
		.oferta-destino__subtitle,
		.oferta-destino__title-note,
	},
	.oferta-precio,
	.oferta-detalle {
		regimen-hotel,
		estadía,
		nota de precio total por persona,
		nota de dónde sale el vuelo de la oferta,
		.oferta-detalle_gallery,
		.oferta-detalle_rating
	}
}
*/

.ofertas-container-grid,
.ofertas-container-carousel {
    margin-bottom: 1rem;
}


/* El margin no puede estar aquí porque owl lo usa para calcular el width  al ejecutarse.
dejado aquí como nota:
.ofertas-container-carousel .owl-item { margin-right: 10px; } */


/* Loading spinner */

.promo-slider::before,
.ofertas-container-carousel::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border: 0.25em solid #17a2b8;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}


/* Esconder las ofertas hasta que carguen para prevenir FOUC del owl
y mostrar el loading spinner. */

.promo-slider,
.ofertas-container-carousel {
    max-height: 2rem;
    overflow: hidden;
}


/* Mostrar las ofertas y esconder el loading spinner cuando cargue el owl. */

.promo-slider.owl-loaded::before,
.ofertas-container-carousel.owl-loaded::before {
    display: none;
}


/*
1) Este valor debe ser cualquiera siempre y cuando sea
mayor al tamaño resultante de una .oferta-s u .oferta-l
*/

.ofertas-container-carousel.owl-loaded {
    max-height: 500px;
    /* 1 */
    overflow: visible;
    transition: max-height 1s ease;
}

.promo-slider.owl-loaded {
    max-height: 962px;
    /* 1 */
    overflow: visible;
    transition: max-height 1s ease;
}

.oferta-s,
.oferta-l {
    color: var(--main-text-color);
    text-align: left;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.oferta-s {
    max-width: 265px;
    width: 265px;
}

.oferta-l {
    max-width: 350px;
    width: 290px;
}


/*
Cuando el elemento de oferta es hijo de un owl-carousel, hay que especifivar
el tamaño porque owl-carousel se pone width:auto lo que hace a width:100%
nulo en oferta-s.
*/


/*.ofertas-container-carousel .oferta-s {
	width: 265px;
}*/

.oferta-img {
    display: block;
    overflow: hidden;
    background-image: url(/IntegraFlightHotel/Content/img/oferta-img.png);
    background-repeat: no-repeat;
    background-color: #e9e9e9;
    background-position: center top;
    background-size: cover;
}

.oferta-img img {
    width: 100%;
}


/* Hacer que el enlace englobe todo el elemento que lo contiene
(la oferta, la tarjeta de producto). Selector incluye el anchor
intencionalmente para que así solo aplique cuando sea usada con
este elemento.*/

a.oferta-img::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.oferta-s .oferta-img {
    height: 120px;
}

.oferta-l .oferta-img {
    height: 116px;
}


/*Rectángulo que hace de marco horizontal inferior para la imagen.*/

.oferta-img-frame {
    width: 100%;
    height: 18px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 10px 30px -7px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease 0s;
}

.oferta-precio {
    color: #fff;
    background-color: #ffa018;
    line-height: 1;
    top: 77px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 16px;
    transition: background-color 0.2s ease 0s;
    animation-name: precios;
    animation-duration: 4s;
}

.oferta-r .oferta-precio {
    top: 40px;
    position: relative;
}

#ancho {
    width: 33.33%;
    margin-bottom: 0.2rem;
}

#alto {
    margin-bottom: 0.2rem;
}

#altope {
    margin-top: -60px;
}

#caribetop {
    margin-top: 35px;
}

#altomas {
    margin-bottom: 4rem;
}

.va-middle {
    vertical-align: middle;
}

#recomendada {
    top: 60px;
}

#izquierda {
    margin-right: 10px;
    margin-left: -5px;
}

#circuitos {
    top: 40px;
}

.oferta-s .oferta-precio {
    font-size: 0.6rem;
    width: 70px;
    height: 70px;
    padding-top: 18px;
    bottom: -18px;
}

.oferta-l .oferta-precio {
    font-size: 0.8rem;
    width: 84px;
    height: 84px;
    padding-top: 24px;
    bottom: -26px;
}

@keyframes precios {
    /*from {background-color: yellow;}
  to {background-color: red;}*/
}

.oferta-l .oferta-precio b,
.oferta-s .oferta-precio b {
    display: block;
}


/* Con el elemento <b> porque este tiene font-weight: bold ya aplicado y no
tiene valor semántico, solo muestra texto en bold. Así no hay que agregar
la propiedad font-weight: bold (que sería el valor de 500 en el contexto de
este proyecto) a la regla.*/

.oferta-l .oferta-precio b {
    font-size: 1.5rem;
}

.oferta-s .oferta-precio b {
    font-size: 1.3125rem;
}

.oferta-destino {
    margin-bottom: 4px;
    min-height: 3rem;
}

.oferta-destino__title {
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
}

.oferta-destino__precio {
    font-size: 0.80rem;
    font-weight: var(--fw-bold);
}

.oferta-recomendadas__precio {
    font-size: 0.90rem;
    font-weight: var(--fw-bold);
    padding-bottom: 5px;
}

.oferta-destino__subtitle,
.oferta-destino__title-note {
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
}

#margenlimpio {
    top: 20px;
}

.oferta-destino__title,
.oferta-destino__subtitle,
.oferta-destino__title-note {
    line-height: 1;
    margin-bottom: 0;
}

.oferta-detalle {
    padding: 18px 4px 4px;
}

.oferta-detalle ul {
    line-height: 1.2;
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.oferta-detalle__gallery,
.oferta-detalle__rating {
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    position: absolute;
    right: 0;
}


/* Esta clase trabaja en conjunto con .ico-camera,
haciendo de clase modificadora */

.oferta-detalle__gallery {
    top: 4px;
    background-size: 30px 25px;
    width: 40px;
    height: 25px;
}


/* Esta clase trabaja en conjunto con .ico-rating-star,
haciendo de clase modificadora */

.oferta-detalle__rating {
    bottom: 0;
    vertical-align: top;
    width: 40px;
    height: 40px;
    background-size: 40px;
    /* Está pensada para tener texto como contenido,
	por eso las propiedades de texto. */
    color: #fff;
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 44px;
    text-align: center;
}

.oferta-s:hover .oferta-precio,
.oferta-l:hover .oferta-precio {
    background-color: #00cbe3;
}

.oferta-s:hover .oferta-img-frame,
.oferta-l:hover .oferta-img-frame {
    background-color: #ffa018;
}


/* Ofertas en grilla */

.ofertas-container-grid .oferta-s {
    margin: 0 0 3rem 0;
}


/* Ofertas de combinados */

.oferta-combinado .oferta-s {
    width: 100%;
}

.oferta-combinado .oferta-s .oferta-img {
    height: 90px;
}

.oferta-combinado .oferta-destino__title {
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
}

.oferta-combinado .oferta-detalle li {
    margin-bottom: 1rem;
}

.oferta-combinado__title {
    font-size: 1.3125rem;
}


/* ==========================================================================
   Detalle Oferta (Calendario)
   ========================================================================== */

.btn--cal {
    font-size: 1rem;
}

.btn-vermapa {
    color: var(--main-text-color);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    display: inline-block;
}


/* ==========================================================================
   Detalle - Pasos reseva - booking
   ========================================================================== */

.section-title-style-1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333;
    padding-bottom: 4px;
}

.section-title-style-1__mark {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.3125;
    text-align: center;
    background-color: var(--azul);
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.booking-indicador-pasos .list-group-item {
    font-weight: var(--fw-bold);
    /*background-color: var(--azulpastel);*/
    border-color: var(--azulpastel);
    margin-right: 0.25rem;
    border-radius: 0;
    padding: 0.375rem 1.125rem;
}

.booking-indicador-pasos .list-group-item.active {
    background-color: var(--naranja);
    border-color: var(--naranja);
    border-left-color: #fff;
    border-right-color: #fff;
}

.booking-indicador-pasos .list-group-item:first-child {
    border-radius: 0;
}

.booking-indicador-pasos .list-group-item:last-child {
    margin-right: 0;
}

.booking-precio-total {
    color: var(--naranja);
    font-weight: var(--fw-heavy);
}

.booking-descripcion-seguro {
    /*background-color: var(--azulpastel);*/
    padding: 0.5rem;
    margin-left: 1rem;
}

.booking-seguros-fieldset label {
    font-weight: var(--fw-bold);
}

.booking-pasos-locata-lg {
    color: var(--naranja);
    font-size: 1.25rem;
    line-height: 1.19047619051;
}

.booking-oferta-preview-img {
    max-height: 150px;
    overflow: hidden;
}


/* Cabecero con color de fondo */

.header-bg-primary {
    color: #fff;
    background-color: var(--azul);
    text-align: center;
    padding: 0.5rem;
}

.header-bg-secondary {
    color: var(--main-text-color);
    background-color: #f8f9fa;
    padding: 0.5rem;
}


/*
   Localiza tu reserva
   ========================================================================== */

.loca-finder-panel {
    background-color: #c1e0f5;
    padding: 1rem;
}

.loca-finder-title {
    font-size: 1.3125rem;
    font-weight: var(--fw-bold);
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 4px;
    display: inline-block;
}

.loca-finder-btn {
    font-size: 1.25rem;
    padding: 0.6875rem;
}

.loca-notification p {
    margin-bottom: 1rem;
}


/* ==========================================================================
   Helper classes / Utilites
   ========================================================================== */

.toOrangeOnHover:hover {
    color: var(--naranja) !important;
}

.bg-inf {
    background-color: var(--azulpastel);
}

.text-callout {
    background-color: var(--azulpastel);
    padding: 0.5rem;
}

.panel-gray {
    background-color: var(--grispastel);
    padding: 1rem;
}

.panel-gray-trans {
    background-color: rgba(210, 220, 230, 0.8);
    padding: 1rem;
}

.text-uppercase-firstletter::first-letter {
    text-transform: uppercase;
}

.text-color-a {
    color: var(--naranja);
}

.img-extend {
    overflow: hidden;
    height: 100%;
}

.img-extend>img {
    width: 100%;
    height: auto;
}

.focus-highlight:focus {
    outline: 0;
    animation: highlight 5s ease-out;
}


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    /* 1 */
}


/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/* ==========================================================================
   Overrides - Custom styles
   ========================================================================== */


/* Aquí se declaran los overrides a componentes de terceros. Así se agregan de
último a la cascada y el override se cumple. */


/*
   Bootstrap
   ========================================================================== */

.badge {
    font-weight: var(--fw-bold);
}


/*
   Owl Carousel custom styles
   ========================================================================== */

.ofertas-container-carousel.owl-carousel .owl-nav button.owl-prev,
.ofertas-container-carousel.owl-carousel .owl-nav button.owl-next {
    background-color: #f1f1f1;
    color: #00ddeb;
    font-size: 2rem;
    line-height: 1;
    padding: 10px !important;
    position: absolute;
    top: 50px;
    opacity: 0.9;
    border: 1px solid #fff;
}

.ofertas-container-carousel .owl-nav button.owl-prev {
    left: -10px;
}

.ofertas-container-carousel .owl-nav button.owl-next {
    right: -10px;
}


/* Para los listados de ofertas, mostrar siempre las flechas de navegación
aunque no haya a dónde navegar. */

.ofertas-container-carousel.owl-carousel .owl-nav.disabled {
    display: block !important;
}

.nav-tabs {
    margin-bottom: 1.5rem;
}

.seccion-oferta .nav-tabs .nav-link.active {
    color: var(--main-text-color);
}

.seccion-oferta .nav-tabs .nav-link {
    color: var(--text-muted);
}


/*
	Owl Carousel dots
*/

.owl-custom.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px;
}

.owl-custom.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-custom.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.owl-custom.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.owl-custom.owl-theme .owl-dots .owl-dot.active span,
.owl-custom.owl-theme .owl-dots .owl-dot:hover span {
    background: #869791;
}


/* ==========================================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


/* Bootstrap's breakpoints
Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
    /*
		Site nav
	*/
    .site-navbar__brand,
    .site-navbar__brand-logo {
        vertical-align: top;
    }
    .site-navbar__brand-logo {
        max-width: 75px;
    }
    .site-navbar__brand {
        margin-top: 26px;
        margin-left: 4px;
    }
    .site-navbar__brand-name {
        font-weight: var(--fw-bold);
        font-size: 1.25rem;
    }
    /*
		Site footer
	*/
    /* Footer nav */
    .footer-nav__item {
        font-size: 1rem;
        width: 136px;
        min-height: 144px;
        margin: 1rem 2.0625rem;
        position: relative;
    }
    .footer-nav__item::before,
    .footer-nav__item::after {
        content: "";
        width: 1px;
        height: 86%;
        background-color: #fff;
        position: absolute;
        top: 7%;
    }
    .footer-nav__item::before {
        left: -2.0625rem;
    }
    .footer-nav__item::after {
        right: -2.0625rem;
    }
    .footer-nav__item-link {
        text-align: center;
        background-position: center 25px;
        background-size: 50px;
        padding: 80px 1rem 1rem 1rem;
    }
    .footer-nav__item:first-child .footer-nav__item-link {
        background-size: 42px;
    }
    /* Footer index */
    .footer-index__item {
        width: 160px;
        margin: 1rem 2.0625rem;
        position: relative;
    }
    /*
		Hero area buscador interno
	*/
    .hero-area--buscadorint {
        background-position: center -230px;
    }
    /*
		Listados de ofertas
	*/
    .oferta-l {
        width: 350px;
    }
    .oferta-l .oferta-img {
        height: 140px;
    }
    /*
		Booking - Solicitud de reserva
	*/
    .booking-indicador-pasos .list-group-item {
        font-size: 1.3125rem;
    }
    .booking-pasos-locata-lg {
        font-size: 2.5rem;
        line-height: 1.2;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    /*
		Site header
	*/
    .navbar {
        padding-top: 0;
    }
    .site-header__phone {
        font-size: 1.3125rem;
        margin-right: 1rem;
    }
    /*
		Secciones de ofertas
	*/
    .nav-tabs .seccion-oferta__titulo {
        font-size: 2rem;
    }
    .seccion-oferta__subtitulo {
        display: inline-block;
    }
    /*
		Site Footer
	*/
    .footer-footnote {
        position: relative;
        margin: 1rem 0;
        padding: 0 1.5rem;
    }
    .footer-footnote::after,
    .footer-footnote::before {
        width: 207px;
        position: absolute;
        top: 0;
    }
    .footer-footnote::before {
        left: -185px;
    }
    .footer-footnote::after {
        right: -185px;
    }
    /*
		Home hero area
	*/
    .hero-area--home {
        min-height: 450px;
    }
    .buscador--home {
        max-width: 250px;
        width: 100%;
        position: absolute;
        top: 5%;
        left: 5%;
    }
    .owl-custom.owl-theme .owl-dots {
        text-align: right;
        margin-right: 3rem;
    }
    /*
		Ofertas en grilla
	*/
    .ofertas-container-grid .oferta-s {
        margin: 0 0 3rem 0;
    }
    /*
		Ofertas de combinados
	*/
    .oferta-combinado .oferta-s .oferta-img {
        height: 120px;
    }
    /*
		Owl Carousel navs
	*/
    .ofertas-container-carousel .owl-nav button.owl-prev {
        left: -30px;
    }
    .ofertas-container-carousel .owl-nav button.owl-next {
        right: -30px;
    }
    /*
		Buscador Interno
	*/
    .btn--buscadorint {
        margin: 0;
    }
    /*
		Localiza tu reserva
	*/
    .loca-finder {
        padding: 2rem 0;
    }
    .ico-locanav {
        width: 80px;
        height: 80px;
        background-size: 80px;
    }
    .loca-toc__item.nav-link {
        padding: 0.5rem 1rem;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    /*
		Site nav
	*/
    .site-navbar__brand-logo {
        max-width: 64px;
    }
    .site-navbar__brand {
        margin-top: 19px;
        margin-left: 0;
    }
    #web-select {
        padding-right: 0;
    }
    #web-select .fas {
        font-size: 0.875rem;
    }
    #web-select span {
        font-size: 0.75rem;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 6px;
        padding-right: 6px;
    }
    /*
		Site footer
	*/
    /* Footer nav */
    .footer-nav__item {
        width: 136px;
    }
    /* Remover bordes que no deben salir en este tamaño */
    .footer-nav__item::before,
    .footer-nav__item:first-child::before,
    .footer-nav__item:last-child::after {
        width: 0;
    }
    /* Footer index */
    .footer-index__item {
        width: 136px;
    }
    /* Footer footnote */
    .footer-footnote {
        padding: 0 4.5rem;
    }
    .footer-footnote::after,
    .footer-footnote::before {
        margin: 0;
    }
    .footer-footnote::before {
        left: -140px;
    }
    .footer-footnote::after {
        right: -140px;
    }
    /* Footer social */
    .footer-social .nav-link {
        margin: 0 1rem;
    }
    /*
		Ofertas en grilla
	*/
    .ofertas-container-grid .oferta-s {
        margin: 0 44px 3rem 0;
    }
    /*
		Hero area buscador interno
	*/
    .hero-area--buscadorint {
        background-position: center -170px;
    }
    /*
		Buscador interno
	*/
    .buscador {
        padding: 25px 0 50px 0;
    }
    /*
		Calendario
	*/
    .calendario-booking td {
        height: 54px;
    }
    /*
		Localiza tu reserva
	*/
    .loca-finder {
        padding: 54px 0;
    }
    .loca-finder-btn {
        padding: 0.6875rem 1rem;
    }
    .loca-toc__item.nav-link {
        padding: 0.5rem 2rem;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    /*
		Site nav
	*/
    .navbar-brand {
        margin-right: 1rem;
    }
    .site-navbar .nav-link {
        font-size: 1.125rem;
    }
    /*.navbar-expand-lg .navbar-nav .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}*/
    /* === Botonera flotante debajo del cabecero */
    .site-navbar .navbar-nav {
        background-color: rgba(0, 156, 242, 0.8);
        width: 100%;
        justify-content: center;
        position: absolute;
        top: 77.5px;
        left: 0;
    }
    .site-header {
        margin-bottom: 3.5rem;
    }
    /* Compensar el cambio de margen */
    .hero-area {
        margin-top: -3.5rem;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* === Fin Botonera flotante debajo del cabecero */
    #web-select .fas {
        font-size: 1.125rem;
    }
    #web-select span {
        font-size: 1rem;
    }
    /*
		Home hero area
	*/
    .hero-area--home {
        min-height: 550px;
        margin-top: -3.5rem;
    }
    .buscador--home {
        max-width: 350px;
    }
    /*
		Site footer
	*/
    /* Footer nav */
    .footer-nav__item {
        font-size: 1.25rem;
        width: 160px;
    }
    /* Footer index */
    .footer-index__item {
        width: 160px;
    }
    /* Footer note */
    .footer-footnote::before {
        left: -140px;
    }
    .footer-footnote::after {
        right: -140px;
    }
    /*
		Listados de producto (ofertas)
	*/
    .oferta-s .oferta-img {
        min-height: 120px;
    }
    /*
		Ofertas en grilla
	*/
    .ofertas-container-grid .oferta-s {
        margin: 0 12px 3rem 0;
    }
    /*
		Owl Carousel navs
	*/
    .ofertas-container-carousel .owl-nav button.owl-prev,
    .ofertas-container-carousel .owl-nav button.owl-next {
        border: 0;
        opacity: 1;
    }
    .ofertas-container-carousel .owl-nav button.owl-prev {
        left: -60px;
    }
    .ofertas-container-carousel .owl-nav button.owl-next {
        right: -60px;
    }
    /*
		Hero area buscador interno
	*/
    .hero-area--buscadorint {
        background-position: center -250px;
    }
    /*
		Buscador interno
	*/
    .buscador {
        padding: 100px 0;
    }
    /*
		Localiza tu reserva
	*/
    .hero-area--loca {
        min-height: 424px;
    }
    .ico-locanav {
        width: 100px;
        height: 100px;
        background-size: 100px;
    }
    .loca-toc__item.nav-link {
        padding: 2.625rem;
    }
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
								   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
	 * Don't show links that are fragment identifiers,
	 * or use the `javascript:` pseudo protocol
	 */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
	 * Printing Tables:
	 * http://css-discuss.incutio.com/wiki/Printing_Tables
	 */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}

.unicef-collab {
    display: flex;
    justify-content: center;
}

.unicef-collab img {
    height: 62px;
    margin-top: -12px;
    margin-left: 8px;
}