/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.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
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.5;
}

body {
    background: #fff;
    color: #999;
    padding: 0;
    margin: 0;
    font-family: FuturaBook, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    cursor: auto;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * 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;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Typography
   ========================================================================== */


/*
Font weights:
100 = thin
200 = extra-light
300 = light
400 = normal, book
500 = medium
600 = demi-bold
700 = bold
800 = heavy
900 = black
*/


/*
Nota:
Esta font tiene problemas. Los caracteres salen alineados al tope del
line-height, lo que hace que se vea fuera de centro sin importar el line-height
Tambi�n los caracteres sobrepasan el tope del line-height.

La versi�n anterior que solo ten�amos en woff, no sobrepasa el line-height y
est� mejor posicionada dentro de este, pero los caracteres est�n alineados a
x-height y debajo unos son m�s largos que otros. Las letras son un poco m�s
gruesas (font-weight) y alargadas. A�n as� se ve mejor que la otra que se
pega al tope del line-height.

Mientras tanto:
No rompe espaciados mientras est� declarado el line-height como est� el baseline
ahora, as� evita que rompa espacios verticales sin importar que se cambia a otra
fuente.

Usadas en la versi�n anterior:
src: url("../fonts/fuh.woff") format("woff");
src: url("../fonts/fuw.woff") format("woff");
*/

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

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


/*Prevenir faux bold.*/

b,
strong {
    font-family: 'FuturaHeavy', Helvetica, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-style: normal;
}


/*Aqu� tendr� que haber faux italic porque no est� el estilo italic.*/

i,
em {
    font-family: 'FuturaBook', Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
}


/*ul,ol,dl,input,textarea y el resto heredan font-family del body*/


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

h1,
.h1,
.alpha,
h2,
.h2,
.beta,
h3,
.h3,
.gamma,
h4,
.h4,
.delta,
h5,
.h5,
.epsilon,
h6,
.h6,
.zeta {
    font-family: 'FuturaHeavy', Helvetica, Roboto, Arial, sans-serif;
    font-weight: 800;
    margin: 0;
}


/*1) Por alguna raz�n en esta Futura Heavy sobrepasa el tama�o de letra en los
caracteres como la d, h, l y las tildes en letras en may�sculas.
Es como si estuviera empujada hacia arriba. Por esto line-height es 1.3 y no 1.
No sucede con los dem�s tama�os de headings.*/

h1,
.h1,
.alpha {
    font-size: 3em;
    line-height: 1.3;
    /*1*/
    margin-bottom: 0.5em;
}

h2,
.h2,
.beta {
    font-size: 2.25em;
    line-height: 1.3333333333333333;
    margin-bottom: 0.6666666666666666em;
}

h3,
.h3,
.gamma {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em;
}

h4,
.h4,
.delta {
    font-size: 1.3125em;
    line-height: 1.1428571428571428;
    margin-bottom: 1.1428571428571428em;
}

h5,
.h5,
.epsilon {
    font-size: 1.125em;
    line-height: 1.3333333333333333;
    margin-bottom: 1.3333333333333333em;
}

h6,
.h6,
.zeta {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1.5em;
}

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

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

li {
    margin: 0 0 0.5em 0;
}

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


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

#site-header {
    background-color: #f1f1f1;
    background-image: linear-gradient(to bottom, #fcfcfc, #f1f1f1);
    padding: 4px 8px 0 8px;
    position: relative;
}

.site-header--ex {
    /*min-height: 107px;*/
    background-image: linear-gradient(#dfa625, #fae272);
    background-color: #f9fbf9;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}


/*
Same, diferent methods.

.gradient {
  min-height: 107px;
  background-image: linear-gradient(#dfa625,  #fae272);
  background-color: #f9fbf9;
  background-size: 100% 50%;
  background-repeat: no-repeat;
  border-radius: 9px;
}

.gradient2 {
  min-height: 107px;
  width: 100%;
  background-image: linear-gradient(#dfa625,  #fae272 50%, #f9fbf9 50%);
  border-radius: 9px;
}
*/

#site-header-top {
    display: none;
}

#brand {
    margin: 0;
    line-height: 1;
}

#brand a {
    text-decoration: none;
}

.brand-logo {
    width: 36px;
}

.brand-name {
    width: 225px;
}

.brand-logo,
.brand-name {
    vertical-align: baseline;
}

#brand-slogan {
    display: none;
}

#brand-contact {
    margin: 8px 48px 8px 0;
    text-align: right;
    position: relative;
    z-index: 2;
}

#login-menu {
    display: inline-block;
}

#login-menu-title {
    display: none;
}

#web-selector {
    font-size: 0.8125em;
    width: auto;
    padding: 4px 6px;
    margin: 0;
    height: auto;
}

.header-phone {
    color: #999;
    font-family: FuturaHeavy, sans-serif;
    font-size: 1.125em;
    line-height: 1;
    text-decoration: none;
}

.header-icon {
    width: 1.5em;
    /*text-bottom en vez de middle por el asunto de la futura*/
    vertical-align: text-bottom;
}

.headerlink-contact {
    color: #999;
    text-decoration: none;
    margin-left: 1em;
}

.headerlink-contact span {
    display: none;
}


/*
   Site Navigation / main nav
   ========================================================================== */

#site-nav {
    text-align: right;
    position: relative;
    bottom: 37px;
    right: 8px;
    z-index: 1;
}

#site-nav ul {
    color: #333;
    background-color: #fff;
    list-style-type: none;
    display: none;
    width: 50%;
    margin: 0;
    padding: 24px 0 0 0;
    box-shadow: -4px 4px 10px 0px #eee;
    position: absolute;
    top: 32px;
    right: 0;
}

#site-nav:hover ul {
    display: block;
}

#site-nav li {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}


/*
Esta clase es para los anchors en la lista de navegaci�n.
#site-nav li a = site-nav__link
*/

.site-nav__link {
    color: #333;
    background-color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px 4px;
}


/*hover is the same as active in mobile anyways*/

.site-nav__link:focus,
.site-nav__link:hover {
    color: #fff;
    background-color: #f17300;
}

.site-nav__link:active {
    color: #fff;
    background-color: #eb690a;
}

.menu-icon {
    cursor: pointer;
    background-color: transparent;
    display: inline-block;
    vertical-align: text-bottom;
    border: 2px solid #999;
    border-radius: 2px;
    width: 27px;
    height: 27px;
    position: relative;
}

.menu-icon:before {
    border-bottom: 9px double #999;
    border-top: 3px solid #999;
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    right: 4px;
    top: 4px;
}

#site-nav:hover .menu-icon {
    background-color: #00b0ef;
    border-color: #00b0ef;
}

#site-nav:hover .menu-icon:before {
    background-color: #fff;
    border-color: #00b0ef;
}

#site-nav-second {
    float: right;
    margin-top: 4px;
    position: relative;
    z-index: 3;
}

.header-menu {
    text-align: center;
    color: #666;
    background-color: #fff;
    list-style-type: none;
    display: none;
    width: 50%;
    margin: 0;
    padding-top: 24px;
    position: absolute;
    top: 32px;
    right: 0;
    box-shadow: -4px 4px 10px 1px #bbb;
}

.header-menu ul {
    list-style-type: none;
    padding: 0;
}

#user-greet {
    display: inline-block;
}

#login-menu .header-menu,
#user .header-menu {
    color: #fff;
    width: 150px;
    text-align: left;
}

#login-menu:hover .header-menu,
#user:hover .header-menu {
    display: block;
}

.menu-icon-login {
    background-image: url(../images/ui/ex/socios.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 24px;
    margin-right: 1em;
    vertical-align: text-top;
}

#login-menu:hover .menu-icon-login {
    background-color: #d0d0d0;
}

#user:hover .menu-icon-login {}

.login-menu-option {
    color: #f17300;
    font-family: FuturaHeavy, sans-serif;
    text-decoration: none;
    display: block;
    padding: 8px 4px;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    transition: background-color 0.2s ease;
}

.login-menu-option:focus,
.login-menu-option:hover {
    color: #fff;
    background-color: #f17300;
    text-shadow: none;
}

.login-menu-option:active {
    color: #fff;
    background-color: #eb690a;
    text-shadow: none;
}


/*
   Cabecero exclusivo
   ========================================================================== */

.avatar {
    width: 25px;
    height: 25px;
    margin: 0 10px;
    vertical-align: top;
}


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

#site-footer {
    margin-top: 5em;
}

.information-link {
    color: #666;
    text-decoration: none;
    background-color: #eee;
    display: inline-block;
    padding: 0.25em 1em;
    margin-bottom: 1.5em;
}

.information-link:hover {
    color: #fff;
    background-color: #f17300;
}

#otras-marcas {
    text-align: center;
    margin-bottom: 10px;
    background: url(../images/ui/fadeline960.png) no-repeat;
    background-position: 0 76%;
}

#otras-marcas a:link {
    color: #666;
    text-decoration: none;
}

#otras-marcas a:visited {
    color: #666;
    text-decoration: none;
}

#otras-marcas a:hover {
    color: #F17300;
    text-decoration: underline;
}

#footer-index {
    text-align: center;
    background-image: url("../images/ui/bg_footer.png");
    background-size: 640px 1000px;
    background-repeat: repeat-x;
    background-position: bottom;
    padding-top: 1.5em;
    border-top: 1px solid #AAA;
    /*para los que no soportan CSS3*/
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.6);
}

#localization-list {
    font-size: 0.875em;
    text-align: left;
    display: inline-block;
}

#localization-list li img {
    margin-right: 4px;
}

#footer-index {
    color: #666;
}

.row {
    max-width: 63.5em;
}


/*Clase es para contenedor, no directamente la lista*/

.footer-index-list {
    font-size: 0.875em;
    margin-bottom: 1.5em;
}


/*inline-block para que el �cono superpuesto absoluto se mantenga cerca del texto*/

.footer-index-list>h6 {
    margin: 0;
    display: inline-block;
}

.footer-index-list>ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.footer-index-list li a {
    color: inherit;
}

.footer-index-list a {
    text-decoration: none;
}

.footer-index-list a:hover {
    text-decoration: underline;
}


/*�conos en las listas del pie*/

.ico-lista-soltour,
.ico-lista-hoteles {
    position: relative;
}

.ico-lista-soltour:before,
.ico-lista-hoteles:before {
    content: '';
    position: absolute;
    left: -35px;
    top: -6px;
    background-repeat: no-repeat;
}

.ico-lista-soltour:before {
    width: 32px;
    height: 31px;
    /*background-image: url(../images/ui/ico/soltour32.png);*/
    background-size: 32px 31px;
}

.ico-lista-hoteles:before {
    width: 34px;
    height: 28px;
    /*  background-image: url(../images/ui/ico/logo_prince.png);*/
    background-size: 24px;
    margin-left: 8%;
    margin-top: -3%;
}


/* ==========================================================================
   Forms, formularios
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 3px 3px 1px 16px;
    border: solid 1px #d1d1d1;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.099) inset;
    -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.099) inset;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.099) inset;
    -webkit-transition: -webkit-box-shadow 0.25s, border-color 0.25s ease-in-out;
    -moz-transition: -moz-box-shadow 0.25s, border-color 0.25s ease-in-out;
    transition: box-shadow 0.25s, border-color 0.25s ease-in-out;
}

select {
    background: #fff url(../images/ui/expand.png) 96.5% 50% no-repeat;
}

textarea {
    border: 2px solid #e0e0e0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: 0;
    background-color: #fff;
    border-color: #f17300;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
    outline: 0;
    background-color: #fff;
    border-color: #f17300;
}

.fieldrow {
    margin-bottom: 1.5em;
}


/*Los campos ya son redondeados, quitar del lado derecho para el postfix de Foundation*/

.postfix-round input[type="text"] {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

input[type="text"].isDatePicker {
    background-color: #fff;
    background-image: url(../images/ui/ico/pickdate.gif);
    background-position: 96.5% 50%;
    background-repeat: no-repeat;
}


/*Clase modificadora para compactar campos de formulario*/

.form-compact-fields input[type="text"],
.form-compact-fields input[type="email"],
.form-compact-fields input[type="tel"],
.form-compact-fields input[type="password"],
.form-compact-fields input[type="date"],
.form-compact-fields select {
    height: 32px;
    height: 2rem;
    padding: 3px 3px 1px 6px;
    margin: 0;
}


/* Override: Foundation Error Handling*/


/*[data-abide] .error small.error,
[data-abide] .error span.error,
[data-abide] span.error,
[data-abide] small.error {
	background: #c60f13;
	color: #ffffff;
}

span.error, small.error {
	background: #c60f13;
	color: #ffffff;
}

.error label,
.error label.error {
	color: #c60f13;
}
.error small.error {
	background: #c60f13;
	color: #ffffff;
}
.error > label > small {
	background: transparent;
	color: #676767;
}

label.error {
	color: #c60f13;
}*/


/* ==========================================================================
   UI elements / Components
   ========================================================================== */


/*
   Colores para texto
   ========================================================================== */


/*Naranja*/

.text-color-a {
    color: #eb690a;
}


/*Azul*/

.text-color-b {
    color: #006ab3;
}

.text-color-stronger {
    color: #666;
}

.text-error {
    color: #ec3636;
}


/*
   T�tulos
   ========================================================================== */


/*
L�nea horizontal con texto en el centro
Ej: ------- T�tulo -------
Cr�ditos: Pablo Villoslada Puigcerber
http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913
*/

.hr-with-text {
    overflow: hidden;
    text-align: center;
}

.hr-with-text:before,
.hr-with-text:after {
    background-color: #ccc;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.hr-with-text:before {
    right: 0.5em;
    margin-left: -50%;
}

.hr-with-text:after {
    left: 0.5em;
    margin-right: -50%;
}


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

#bradcrumb {
    color: inherit;
    font-size: 0.875em;
}

#breadcrumb>a {
    color: #006ab3;
}

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


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


/*
Clase base para los botones
Nota: ".button" no agregado porque el calendar.js lo utiliza y hacer esto
rompe el calendario. Se puede cambiar el nombre de la clase "button" que utiliza
el calendario pero habr�a que cambiar todos los calendarios.
*/


/*button,*/

.btn {
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    /*font-size: 1em;*/
    font-size: 1rem;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    /*--*/
    margin: 0 0 1.25rem;
    border-radius: 0;
    padding-top: 1rem;
    padding-right: 2rem;
    padding-bottom: 1.0625rem;
    padding-left: 2rem;
    background: #ffa63f;
    border: 0;
    /*button, type=submit*/
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-transition: background-color 0.3s ease 0s;
    -moz-transition: background-color 0.3s ease 0s;
    -ms-transition: background-color 0.3s ease 0s;
    -o-transition: background-color 0.3s ease 0s;
    transition: background-color 0.3s ease 0s;
    zoom: 1;
    *display: inline;
    /*IE<=7*/
}


/*LoVe For HAte*/

.btn:link {
    color: #fff;
}

.btn:visited {
    color: #fff;
}

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

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


/*
Si la especificidad pica alguna vez:
a.btn, a.button { color: #fff; }
a.btn:hover, a.button:hover { text-decoration: none; }
*/


/*Modificador para el tama�o del boton*/


/*.btn--small { padding: 2px 16px; }
.btn--medium { padding: 10px 25px; }
.btn--large { padding: 15px 25px; }
.btn--booking { padding: 20px 150px; }
*/

.btn--extend {
    width: 100%;
}


/*
Bot�n primario con gradiente/degradado de azul a naranja.
*/

.btn--primary,
.btn--primary:link,
.btn--primary:visited {
    color: #fff;
    background: #01c7f8 url("../images/ui/indentedbg.png") repeat-x 0px 0px;
}

.btn--primary:focus,
.btn--primary:hover {
    color: #fff;
    background: #eb690a url("../images/ui/indentedbg.png") repeat-x 0px 100%;
}

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

.btn--vermapa {
    font-family: FuturaHeavy, sans-serif;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    background-image: url(../images/ui/ico/vermapa.png);
    background-repeat: no-repeat;
    background-size: 36px;
    background-position: left center;
    padding: 0.5em 1em 0.5em 2.875em;
    margin: 0;
}


/*Descuento*/

.btn--dto {
    text-transform: uppercase;
    background-color: #ffa63f;
    padding: 12px;
    margin: 0 0 1.5em 0;
    -webkit-transition: all 0.50s ease;
    -moz-transition: all 0.50s ease;
    -ms-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;
    transition: all 0.50s ease;
    -webkit-animation: moonlight 1s linear 0s infinite alternate;
    -moz-animation: moonlight 1s linear 0s infinite alternate;
    -ms-animation: moonlight 1s linear 0s infinite alternate;
    -o-animation: moonlight 1s linear 0s infinite alternate;
    animation: moonlight 1s linear 0s infinite alternate;
}

.btn--dto:hover {
    color: #fff;
    background-color: #eb690a;
}


/*Hacer un bot�n (button, [type=submit]) transparente, solo texto*/

.ghost-btn {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}


/*Para contrarestar la cascada de la clase .btn de aqu�
y as� poder remover el padding.*/

.prefix,
.postfix {
    padding: 0;
}


/*
   Labels
   ========================================================================== */

.label {
    color: #fff;
    background-color: #00b0ef;
    display: inline-block;
    padding: 0.5em;
}


/*
   Panel / call out
   ========================================================================== */

.callout {
    color: #666;
    display: block;
    background-color: #f1f1f1;
    border: 1px solid #e6e6e6;
    padding: 8px;
    margin: 0 0 21px 0;
    border-radius: 2px;
}


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

.msgbox {
    color: #fff;
    text-align: center;
    background-color: #01c7f8;
    padding: 8px;
    margin: 21px 0;
    border: 1px solid #01b7e4;
    border-radius: 4px;
}

.msgbox p {
    margin: 0;
}

.msgbox a,
.msgbox a:link,
.msgbox a:visited {
    color: #fff;
    font-size: 0.875em;
    text-decoration: underline;
}

.msgbox a:visited {
    color: #fffffe;
}

.msgbox a:hover {
    color: #ffd589;
}

.msgbox--error {
    background-color: #fe4e50;
    border-color: #f00;
}

.msgbox--warning {
    background-color: #ffd500;
    border-color: #eec80a;
}

.msgbox--success {
    background-color: #a6c82a;
    border-color: #7e9720;
}

.msgbox--success a:hover {
    color: #ffcf76;
}


/*
   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;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 0.5em;
}


/*.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%;
}


/*Estilos para el acorde�n con el tema de la web. Donde se vaya a usar el
acorde�n, usarlo con esta clase para que salga con los colores/tema de esta
web.*/

.custom-accordion .tab {
    color: #999;
    background-color: #efefef;
    font-size: 1.5em;
    line-height: 1em;
    margin: 1em 0 0 0;
}

.tab:after {
    padding: 6px;
}

.tab img {
    margin-right: 4px;
}

.custom-accordion .panel {
    padding: 0;
}

.custom-accordion .panel.active {
    padding: 1em 0.5em;
}


/*Contrarestar alg�n reset por ah� si lo hubiere.*/

.panel ol,
.panel ul {
    margin: 1em 0;
    padding: 0 0 0 2em;
}

.panel p:last-child {
    margin-bottom: 0;
}


/*
   Expandir contenido
   ========================================================================== */

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

.crm_more_trigger {
    color: #444;
    line-height: 1;
    text-align: center;
    background-color: #f6f6f6;
    display: block;
    padding: 0 4px;
    position: relative;
}

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


/*
   L�nea divisora con sombra y tama�o din�mico
   ========================================================================== */


/*
C�mo usar
Ejemplo para el cabecero en pantallas Medium:
#site-header .divshade {
	Tama�o
	width: 84%;

	Posicionamiento
	top: 50%;
	right: 0;

	Usar como sea necesario, se recomiendo que se quede en el fondo
	para que no moleste.
	z-index: 0;
}
*/


/*Contenedor. Si no esta dentro del contenedor, no funcionar�.*/

.divshade {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
}


/*centro de la linea, preparada para el sidefade*/

.divshade-inner {
    background-image: url("../images/ui/fadeline.png");
    background-position: 0px 0px;
    background-repeat: repeat-x;
    margin: 0 30px;
    height: 29px;
}


/* Linea con los extremos difuminados */

.divshade:before {
    background-image: url("../images/ui/fadeline.png");
    background-position: 100% -30px;
    width: 30px;
    height: 29px;
    right: 0px;
    position: absolute;
    top: 0px;
    content: '';
}

.divshade:after {
    background-image: url("../images/ui/fadeline.png");
    background-position: 0 -30px;
    width: 30px;
    height: 29px;
    left: 0px;
    position: absolute;
    top: 0px;
    content: '';
}


/*Para cuando se usa solo, debe estar bajo este contenedor para que se comporte como un hr*/

.divshadeContainer {
    position: relative;
    min-height: 30px;
    margin: 2em 0 0 0;
}


/*modificadores, casos de uso*/


/*Es posible usar una clase (o id) modificadora, por simplicidad este
selector est� anidado*/

#site-header .divshade {
    width: 96%;
    /*fallback*/
    width: calc( 100% - 16px);
    top: 46px;
}


/*
   Buscador interno
   ========================================================================== */

#buscador {
    margin: 0 auto 2em auto;
}

.buscador__tab {
    font-family: FuturaHeavy, sans-serif;
    font-size: 1.5em;
    color: #fff;
    text-transform: uppercase;
    background-image: url(../images/ui/ico/viajes.png);
    background-color: #00b0ef;
    background-repeat: no-repeat;
    background-position: 2% 50%;
    background-size: 36px;
    padding: 8px 52px;
    margin: 0;
}

.buscador__panel {
    background-color: #f6f6f6;
    background-image: url(../images/ui/fadeline695.png);
    background-position: 50% 72%;
    background-repeat: no-repeat;
    padding: 4px;
}

#buscador-paq {
    margin-bottom: 1.5em;
}

#destino optgroup {
    color: #fff;
    background-color: #f79a0e;
}


/*inherits font-weight bold*/

#destino option {
    color: #666;
    background-color: #fff;
}

#destino .pais {
    color: #000;
    background-color: #f6f6f6;
}


/*Cuando exista una campa�a con un nombre demasiado largo*/

#selectCampanias {
    max-width: 170px;
}

.btn--buscadorint {
    font-family: FuturaHeavy, sans-serif;
    padding: 12px 32px;
    margin: 0;
}


/* ==========================================================================
   Ofertas
   ========================================================================== */


/*
	�rea titular de la secci�n ofertas
*/


/*Pa�s de la oferta*/


/*TODO deber�a ser titulo-oferta para poderlo usar m�s general en campanyas*/

.pais-oferta {
    color: #f17300;
}


/*Foto del pa�s de la  oferta*/

.pais-oferta-img {
    text-align: center;
    margin-bottom: 1.5em;
}

.pais-oferta-img img {
    display: inline-block;
}


/*Descripci�n del pa�s de la oferta*/

.pais-oferta-descripcion {
    font-size: 0.875em;
    text-align: justify;
    margin-bottom: 1.5em;
}


/*Or�genes*/


/*ToDo el bold hace un faux bold pero se ve mejor en chrome que poner la futuraheavy*/

#otros-origenes span {
    color: #ec3636;
    font-weight: bold;
}

#otros-comb span {
    font-family: FuturaHeavy, sans-serif;
    text-transform: uppercase;
}

.lista-origenes,
.lista-comb {
    list-style-type: none;
    padding: 0;
}

.lista-origenes li,
.lista-comb li {
    display: inline-block;
    margin-bottom: 0.5em;
}

.lista-origenes-opcion,
.lista-comb-opcion {
    color: #eb690a;
    font-size: 0.875em;
    text-decoration: none;
    background-color: #e9e9e9;
    display: block;
    padding: 4px;
    border-left: 5px solid #00b0ef;
    margin-right: 0.5em;
}

.lista-origenes-opcion:focus,
.lista-comb-opcion:focus,
.lista-origenes-opcion:hover,
.lista-comb-opcion:hover {
    color: #fff;
    background-color: #eb690a;
    text-decoration: none;
}

.noencontro {
    color: #fe4e50;
    text-align: center;
    background-color: #f6f6f6;
    padding: 8px;
    border: 1px solid #eee;
    margin: 1.5em 0;
}

.showcase {
    margin-bottom: 1.5em;
}


/*
   Presentaci�n de ofertas
   ========================================================================== */


/*
En dos tama�os: small y large
Large para paises
Small para mostrar ofertas de un pa�s, por ejemplo los hoteles de La Romana.
*/

.oferta-s,
.oferta-l {
    background-color: #e9e9e9;
    width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.oferta-s {
    text-align: left;
    max-width: 220px;
}

.oferta-l {
    text-align: center;
    max-width: 300px;
}


/*Para agregar margen de separaci�n debajo*/

.oferta-s-container,
.oferta-l-container {
    margin-bottom: 1.5em;
}

.oferta-l_title,
.oferta-s_title {
    color: #eb690a;
    text-align: center;
    margin: 0 0 0.5em 0;
}


/* Las ofertas s y l contienen las siguientes partes: */

.oferta-img {
    display: block;
    position: relative;
    overflow: hidden;
    background-image: url(../images/ui/imagenrota.png);
    background-repeat: no-repeat;
    background-color: #e9e9e9;
    background-position: center top;
}

.oferta-l>.oferta-img {
    max-width: 300px;
    max-height: 120px;
}


/*Height fija para forzar que siempre tengan la misma altura en
pantallas peque�as*/

.oferta-s>.oferta-img {
    max-width: 220px;
    height: 110px;
}

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


/* Soporte im�genes deprecadas: mostrar centradas */

.oferta-img>img[width="100"],
.oferta-img>img[width="154"],
.oferta-img>embed[width="154"] {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.oferta-img>img[width="100"] {
    width: 100px;
    height: 62px
}

.oferta-img>img[width="154"] {
    width: 154px;
    height: 96px
}

.oferta-img>embed[width="154"] {
    width: 154px;
    height: 96px
}

.oferta-destino {
    min-height: 60px;
    padding: 0.5em 0.2em;
}


/*Title: Ciudad u hotel en combinados*/

.oferta-destino__title {
    font-size: 1em;
}


/*Title's side note: isla a la que pertenece la ciudad*/

.oferta-destino__title-note {
    font-size: 0.875em;
    line-height: 1;
}


/*Subtitle: el hotel de la ciudad en ofertas*/

.oferta-destino__subtitle {
    color: #eb690a;
    font-size: 0.875em;
}

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

.oferta-l .oferta-destino__title {
    margin-bottom: 0.5em;
}

.oferta-detalle {
    list-style-type: none;
    width: 100%;
    padding: 0;
}

.oferta-s-container .oferta-detalle,
.oferta-combinado .oferta-detalle {
    font-size: 0.875em;
}

.oferta-s-container .oferta-detalle {
    max-width: 220px;
    margin: 0.5em auto 0 auto;
}

.oferta-l-container .oferta-detalle {
    font-size: 1em;
    line-height: 1;
}

.oferta-detalle_precio {
    color: #eb690a;
    font-size: 1.5em;
    line-height: 1;
    text-align: left;
}


/*Porque llegan en min�sculas desde la DB*/

.oferta-detalle_regimen-hotel {
    text-transform: capitalize;
}

.oferta-detalle_precio,
.oferta-detalle_regimen-hotel {
    font-family: FuturaHeavy, Helvetica, Roboto, Arial, sans-serif;
}


/*Botones de ofertas*/

.oferta-s-btn,
.oferta-combinado-btn,
.oferta-l-btn {
    font-family: FuturaHeavy, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin: 0;
}

.oferta-s-btn,
.oferta-combinado-btn {
    padding: 0.5em 0.75em;
}

.oferta-l-btn {
    padding: 0.5em 1.5em;
}


/*Ofertas combinados*/

.oferta-combinado {
    margin: 2em auto;
}

.oferta-combinado_tit {
    color: #eb690a;
    font-family: FuturaHeavy, sans-serif;
    font-size: 1em;
    margin: 0;
}

.oferta-combinado_tit,
.oferta-combinado_info .oferta-detalle {
    text-align: center;
}

.oferta-combinado .oferta-destino__title {
    font-family: FuturaBook, sans-serif;
}

.oferta-combinado .oferta-detalle-estadia {
    font-size: 0.875em;
}


/*
	Oferta Zona
*/

.oferta-zona {
    margin-bottom: 1.5em;
    min-height: 360px;
}

.oferta-zona__caption {
    color: #fff;
    line-height: 1.5;
    text-align: right;
    background-color: #00b0ef;
    padding-right: 1em;
}

.oferta-zona__destinos {
    background-color: #f1f1f1;
}

.oferta-zona__destinos li {
    margin: 0;
}

.oferta-zona__item {
    color: #666;
    display: block;
    padding: 4px;
    border-bottom: 1px solid #f6f6f6;
}

.oferta-zona__item:hover {
    background-color: #eb690a;
}

.oferta-zona__destino {
    font-size: 0.875em;
    display: inline-block;
    width: 65%;
}

.oferta-zona__precio {
    font-family: FuturaHeavy, sans-serif;
    color: #eb690a;
    text-align: right;
    display: inline-block;
    width: 35%;
}

.oferta-zona__destino,
.oferta-zona__precio {
    vertical-align: middle;
}

.oferta-zona__item:hover .oferta-zona__destino,
.oferta-zona__item:hover .oferta-zona__precio {
    color: #fff;
}


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

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

.paginador-tit {
    color: #fff;
    font-size: 1.125em;
    text-transform: uppercase;
    background-color: #00b0ef;
    display: block;
    padding: 0.3125em 2em;
    margin: 0 0 1em 0;
}

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

.paginador-nav:after,
.paginador-nav:before {
    color: #f17300;
    font-family: FuturaHeavy, sans-serif;
    position: absolute;
    top: 3px;
    /*ver problema con la futura*/
}

.paginador-nav:before {
    content: "<<";
    left: -21px;
}

.paginador-nav:after {
    content: ">>";
    right: -21px;
}

.paginador-nav .btn {
    font-size: 0.875em;
    max-width: 170px;
    padding: 5px;
    margin: 0;
}

.paginador-pos {
    font-size: 0.875em;
    display: inline-block;
}


/*
   Videos
   ========================================================================== */


/*Foundation 5's solution to make videos responsive.*/

.flex-video {
    height: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    padding-bottom: 67.5%;
    padding-top: 1.5625rem;
    position: relative;
}

.flex-video.widescreen {
    padding-bottom: 56.34%;
}

.flex-video.vimeo {
    padding-top: 0;
}

.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}


/* ==========================================================================
   Lateral
   ========================================================================== */

.lateral-seccion {
    font-size: 0.875em;
    max-width: 220px;
    margin: 0 auto 1.5em auto;
    border-bottom: 7px solid #eee;
}


/*
	Cuando es un cabecero con texto
*/

.lateral-seccion-cabecero {
    color: #999;
    font-size: 1.125em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #eee;
    display: block;
    padding: 1em;
    position: relative;
}


/*Si es anchor*/

a.lateral-seccion-cabecero:hover {
    color: #fff;
    background-color: #f17300;
    -webkit-transition: color, background-color 0.4s ease;
    -moz-transition: color, background-color 0.4s ease;
    -ms-transition: color, background-color 0.4s ease;
    -o-transition: color, background-color 0.4s ease;
    transition: color, background-color 0.4s ease;
}

.lateral-seccion-cabecero img {
    position: absolute;
    top: 25%;
    right: 1em;
}

.lateral-seccion-cabecero span {
    width: 80%;
}


/*
	Cuando el cabecero es solo una imagen con o sin enlace
*/

.lateral-seccion-banner {
    background-color: #f6f6f6;
}

.lateral-seccion-banner,
.lateral-seccion-banner>img {
    display: block;
    margin: 0 auto;
}


/*Mapa del lateral*/

.mapa-lat {
    display: block;
    width: 220px;
    margin: 0 auto;
}

.lateral-fila {
    color: #999;
    text-decoration: none;
    background-color: #fff;
    display: block;
    padding: 5px;
}

.lateral-fila:nth-of-type(odd) {
    background: #f6f6f6;
}

.lateral-fila:hover {
    color: #fff;
    text-decoration: none;
    background-color: #f17300;
    -webkit-transition: background-color .4s linear;
    -moz-transition: background-color .4s linear;
    -ms-transition: background-color .4s linear;
    -o-transition: background-color .4s linear;
    transition: background-color .4s linear;
}

.lateral-oferta,
.lateral-oferta-precio {
    display: inline-block;
    vertical-align: middle;
}

.lateral-oferta {
    color: #999;
    width: 70%;
}

.lateral-oferta-precio {
    color: #eb690a;
    font-family: FuturaHeavy;
    text-align: right;
    width: 27%;
}

.lateral-fila:hover .lateral-oferta,
.lateral-fila:hover .lateral-oferta-precio {
    color: inherit;
}


/* ==========================================================================
   Detalle Reserva
   ========================================================================== */

#info-reserva {
    margin-bottom: 5em;
}

.ficha-oferta {
    background-color: #e9e9e9;
    margin-bottom: 1.5em !important;
}

.ficha-oferta-detalle {
    list-style: none;
    font-size: 0.875em;
    padding: 0.25em;
    margin: 0;
}

.ficha-oferta-precio {
    color: #eb690a;
    font-family: FuturaHeavy, sans-serif;
    font-weight: 800;
    font-size: 1.5em;
    line-height: 1;
}

.reserva-section-title {
    color: #fa9c3f;
    text-transform: uppercase;
    background-color: #f6f6f6;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 6px 0 6px 42px;
    margin-bottom: 0.25em;
}


/*Para facilitar su reutilizaci�n, la clase base para el elemento debe contener
las dem�s propieades de background. Ver .reserva-section-title, que ya tiene
las bases para posicionarlo y entre otras.*/

.ico-alt {
    background-image: url(../images/ui/ico/alt.png);
}

.ico-pagos {
    background-image: url(../images/ui/ico/pagos.png);
}

.ico-flechaizq {
    background-image: url(../images/ui/ico/flechaizq.png);
}

.ico-datavuelos {
    background-image: url(../images/ui/ico/vueloscirc.png);
}

.reserva-section-container {
    background-color: #f6f6f6;
    padding: 0.5em;
    margin-bottom: 1.5em;
}


/*Informaci�n del hotel*/

#panel5 h4 {
    margin: 6px 0;
}


/*Informaci�n del destino*/

#panel6 img {
    float: left;
    margin: 0 4px 4px 0;
}

.detalle-transporte {
    margin-bottom: 1.5em;
}

.detalle-transporte img {
    width: 1.5em;
    height: auto;
}

.detalle-transporte table {
    text-align: center;
    border: 1px solid #fff;
    width: 100%;
}

.detalle-transporte caption {
    text-align: left;
    line-height: 1.5;
}

.detalle-transporte th {
    font-size: 0.8125em;
    background-color: #fff;
    font-weight: bold;
    border-bottom: 0;
    padding: 2px 10px;
}

.detalle-transporte td {
    font-size: 0.875em;
    padding: 2px;
    border: 1px solid #fff;
}

#make-reserva {
    font-size: 1.5em;
    padding: 1em 0;
}


/*
	Reservar Combinados
*/

.hoteles-combinado__title {
    color: #fa9c3f;
    background-color: #efefef;
    padding: 4px;
}

.hoteles-combinado__hotel {
    margin: 1.1428em 0;
}

.hoteles-combinado__hotel a {
    color: #999;
    text-decoration: none;
}

.hoteles-combinado__hotel a:hover {
    color: #fa9c3f;
    text-decoration: underline;
}

.hoteles-combinado__img {
    float: left;
    margin: 0 6px 4px 0;
}


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

.calendario {
    color: #000;
    width: 100%;
    text-align: center;
    /*table specific styles*/
    border-collapse: separate;
    border-spacing: 7px 5px;
    margin-bottom: 1.5em;
}

.calendar-nav {
    margin-bottom: 1em;
}

.btn--cal {
    background-color: #00b0ef;
    padding: 8px;
    margin: 0;
}

.calendario th {
    border-bottom: 1px solid #999;
}

.calendario td {
    width: 70px;
    height: 41px;
}


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

.calendario div {
    position: relative;
    width: 100%;
    height: 100%;
}

.calendario 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-size: 1.5em;
    line-height: 1.5;
    font-weight: bold;
}


/*Se especifica el color para el d�a porque est� dentro de un anchor, haciendo
que herede el color de este.*/

.diaCalendario {
    color: #333;
    font-size: 0.75em;
    text-align: right;
    position: absolute;
    right: 4px;
    bottom: 0;
}

.FechaSeleccionada {
    color: #fff;
    background-color: #f17300;
}

.FechaSeleccionada .diaCalendario {
    color: #fff;
}

.FechaConOferta {
    color: #333;
    background-color: #f1f1f1;
}

.FechaSinOferta {
    color: #999;
    background-color: #f6f6f6;
}

.FechaVacia {
    background-color: transparent;
}

.FechaSeleccionada:hover,
.FechaConOferta:hover {
    color: #fff;
    background-color: #00b0ef;
}

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

.FechaSeleccionada:hover a,
.FechaConOferta:hover a {
    color: #fff;
}

.FechaConOferta:hover .diaCalendario {
    color: inherit;
}

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

.FechaSinOferta .diaCalendario {
    color: #999;
}


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

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


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

.PrecioFechaSeleccionada {
    color: #fff;
}

.PrecioFecha,
.PrecioFechaSeleccionada {
    font-family: FuturaHeavy, sans-serif;
    font-size: 0.875em;
    font-weight: 800;
}


/*
   Tablas cotizacion reserva
   ========================================================================== */

.data-vuelos,
.data-cotizacion-reserva {
    font-size: 0.8125em;
    text-align: left;
    margin: 0 auto 1.5em auto;
    border: 1px solid #fefefe;
}

.data-vuelos th,
.data-cotizacion-reserva th {
    background-color: #fefefe;
    font-weight: bold;
    border-bottom: 0;
    padding: 5px 10px 5px 10px;
}

.data-vuelos td,
.data-cotizacion-reserva td {
    padding: 8px 10px 8px 10px;
    border: 1px solid #fefefe;
}

.data-cotizacion-reserva {
    width: 100%;
}


/*
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);
}


/*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;
}


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


/*Moonlight glow*/

@-webkit-keyframes moonlight {
    from {
        -webkit-box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
        box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
    }
    to {
        -webkit-box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
        box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
    }
}

@-moz-keyframes moonlight {
    from {
        -moz-box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
        box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
    }
    to {
        -moz-box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
        box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
    }
}

@-ms-keyframes moonlight {
    from {
        -ms-box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
        box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
    }
    to {
        -ms-box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
        box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
    }
}

@-o-keyframes moonlight {
    from {
        -o-box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
        box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
    }
    to {
        -o-box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
        box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
    }
}

@keyframes moonlight {
    from {
        box-shadow: 0px 0px 10px #fff, inset 0 0 0px #fff;
    }
    to {
        box-shadow: 0 0px 70px #fff, inset 0 0 70px #fff;
    }
}


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


/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}


/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
 * 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;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


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

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}

.inlineb {
    display: inline-block;
    zoom: 1;
    *display: inline;
    /*IE7*/
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

ul.nobullets {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.nospacing {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}


/* Alinear verticalmente elementos inline/inline-block */

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

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

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


/*Control de texto*/


/*TODO: txt or text? mejor tener uno solo.
P�gina de la versi�n anterior utilizan txt, hay que cambiarlo en todas.
O cambiar a que sean as�: textUppercase, textUppercaseFirstLetter, textC*/

.txt-center,
.text-center {
    text-align: center;
}

.txt-justify,
.text-justify {
    text-align: justify;
}

.txt-left,
.text-left {
    text-align: left;
}

.txt-right,
.text-right {
    text-align: right;
}

.txt-uppercase,
.text-uppercase {
    text-transform: uppercase;
}

.txt-capitalize,
.text-capitalize {
    text-transform: capitalize;
}

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

.text-lowercase {
    text-transform: lowercase;
}

.text-small {
    font-size: 80%;
}

.text-larger {
    font-size: 120%;
}


/*Miscelaneos*/

.filter-grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}


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


/*
	Small screens
*/

@media only screen {
    /* Define mobile styles */
}


/*
	Custom: Small (and high density devices that translate to) 320 and 360px.
	Creada porque foundation no toma estos dispositivos en cuenta directamente.
*/

@media only screen and (max-width: 360px) {
    /*
	  Cabecero
	*/
    #brand-contact {
        margin: 8px 40px 8px 0;
    }
    .headerlink-contact span {
        display: inline-block;
    }
    #site-nav-second {
        display: none;
    }
    /*
		Ofertas
	*/
    /*Porque hay fotos peque�as que no cubren toda el �rea y causa
	 que se vea la imagen de fondo (que es para cuando no ha cargado la imagen).*/
    .oferta-s>.oferta-img {
        max-height: 70px;
        background-size: cover;
    }
    /*Para que la grilla no se deforme con facilidad en pantallas peque�as*/
    .oferta-s>.oferta-destino {
        min-height: 75px;
    }
    /*
		Combinados
	*/
    /*Override foundation's grid system*/
    .oferta-combinado {
        margin: 2em auto;
        padding: 0 !important;
    }
    .oferta-combinado .column,
    .oferta-combinado .columns {
        padding: 0 1px 0 0 !important;
    }
    .oferta-combinado .oferta-s>.oferta-destino {
        min-height: 50px;
    }
    .oferta-combinado .oferta-destino__title {
        font-size: 0.8125em;
    }
    .oferta-combinado_tit,
    .oferta-combinado-btn {
        font-size: 0.875em;
    }
    /*Reserva/calendario*/
    .detalle-transporte table {
        font-size: 0.875em;
    }
}

@media only screen and (max-width: 384px) {
    /*
		Cabecero
	*/
    #login-menu {
        display: none;
    }
}


/*Foundation's small breakpoint*/

@media only screen and (max-width: 40em) {
    /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    /*
		Buscador Interno
	*/
    #buscador {
        height: 52px;
        overflow: hidden;
        transition: height 0.5s ease;
    }
    #buscador:hover {
        height: 571px;
    }
}


/*
	Medium screens
*/

@media only screen and (min-width: 40.063em) {
    /* min-width 641px, medium screens */
    /*
		Cabecero
	*/
    #site-header-top {
        display: block;
        width: 100%;
        height: 42px;
        background: url(../images/temas/default/top.png) repeat-x left bottom;
        position: relative;
    }
    #site-header {
        border-radius: 18px;
        height: 100px;
    }
    .site-header--ex {
        border-radius: 9px;
    }
    .brand-logo {
        width: 90px;
        position: absolute;
        top: -20px;
    }
    .brand-logo--tnavidad {
        width: 105px;
        top: -40px;
        left: 0;
    }
    .brand-name {
        margin-left: 100px;
    }
    #brand-contact {
        margin-right: 0;
    }
    .headerlink-contact {
        margin-left: 0;
    }
    .headerlink-contact span {
        display: inline-block;
    }
    .header-icon {
        width: 30px;
    }
    .menu-icon {
        display: none;
    }
    #site-nav {
        margin: 0.5em auto 1em auto;
        position: static;
    }
    #site-nav ul {
        width: 100%;
        display: block;
        padding: 0;
        margin: 0;
        position: static;
        box-shadow: none;
    }
    #site-nav li {
        display: inline-block;
        border-top: 2px solid #d2d2d2;
        width: 14.28%;
        vertical-align: top;
        transition: color 0.5s ease;
    }
    /*Tama�o para los botones por cantidad de items*/
    /*es, it y pt heredan { width: 14.28%; } inicial para 7 items*/
    #site-nav li:lang(fr),
    #site-nav li:lang(ro) {
        width: 16.66%;
    }
    #site-nav li:lang(en) {
        width: 20%;
    }
    .site-nav__link {
        color: #999;
        font-family: FuturaHeavy, sans-serif;
        padding: 4px;
        transition: color 0.5s ease;
    }
    #site-nav li:hover {
        border-color: #f17300;
    }
    .site-nav__link:focus,
    .site-nav__link:hover {
        color: #f17300;
        background-color: #fff;
    }
    .site-nav__link:active {
        color: #eb690a;
        background-color: #fff;
    }
    #site-header .divshade {
        width: 84%;
        top: 50%;
        right: 0;
        z-index: 0;
    }
    .header-menu {
        top: 27px;
    }
    /*
		Buscador Interno
	*/
    #buscador {
        height: auto;
        margin: 1em auto 2em auto;
    }
    .buscador__tab {
        text-align: center;
        background-position: 50% 25%;
        padding: 52px 0 0 0;
    }
    .buscador__panel {
        font-size: 0.875em;
        background-position: 50% 80%;
    }
    .buscador__tab,
    .buscador__panel {
        height: 95px;
    }
    .buscador__panel input[type="text"],
    .buscador__panel select {
        font-size: 0.875em;
        line-height: 1.4;
        margin: 0;
        height: 24px;
    }
    /*Para que se vean igual*/
    .buscador__panel input[type="text"] {
        padding: 3px 2px 1px 4px;
    }
    .buscador__panel select {
        padding: 3px 0 1px 0;
    }
    .buscador__panel label {
        color: inherit;
    }
    #buscador-paq {
        margin-bottom: 16px;
    }
    /*override and reset to default*/
    #buscador-tipo label,
    #buscador-tipo input,
    #buscador-tipo select {
        display: inline-block;
    }
    #buscador-tipo input[type="text"],
    #buscador-tipo select {
        width: auto;
    }
    /*
		Buscador hotel
	*/
    .buscador-hotel__panel input[type="text"],
    .buscador-hotel__panel select {
        font-size: 0.875em;
        line-height: 1.4;
        margin: 0;
        height: 24px;
    }
    /*Para que se vean igual*/
    .buscador-hotel__panel input[type="text"] {
        padding: 3px 2px 1px 4px;
    }
    .buscador-hotel__panel select {
        padding: 3px 0 1px 0;
    }
    /*
		Ofertas
	*/
    .pais-oferta-img {
        float: left;
        margin: 0;
        padding: 0 0.5em 1em 0;
    }
    .oferta-l {
        text-align: left;
    }
    .oferta-destino {
        padding: 0.5em;
    }
    .oferta-s-container .oferta-detalle {
        font-size: 1em;
    }
    /*Para posicionar el btn a la derecha*/
    .oferta-s-btn-container {
        text-align: right;
    }
    /*Para que solo aplique para este caso*/
    .oferta-s-btn-container .oferta-s-btn {
        display: inline-block;
    }
    .oferta-l-btn {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    /*
		Combinados
	*/
    .oferta-combinado {
        margin: 0 0 1.5em 0;
    }
    .oferta-combinado_tit,
    .oferta-combinado_info .oferta-detalle {
        text-align: left;
    }
    /*
		Paginador
	*/
    .paginador-direccion {
        display: inline-block;
    }
    .paginador-posicion,
    .paginador-nav .btn {
        font-size: 1em;
    }
    .paginador-nav .btn {
        padding: 5px 10px;
    }
    /*
		Reserva
	*/
    .ficha-oferta-detalle {
        font-size: 1em;
        padding: 0.5em;
    }
    .ficha-oferta-img {
        margin-top: 1em;
    }
    #panel6 img {
        float: none;
        margin: 0;
    }
    .detalle-transporte img {
        width: 28px;
        height: auto;
    }
    /*
		Pie
	*/
    #otras-marcas {
        background-position: 0 73%;
    }
    #footer-index {
        text-align: left;
        background-size: 960px 250px;
    }
    #footer-index-ofertas {
        background: 40px 16px no-repeat url("../images/ui/fadeline695.png");
    }
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
}


/*
	Large screens
*/

@media only screen and (min-width: 64.063em) {
    /* min-width 1025px, large screens */
    /*
		Cabecero
	*/
    #brand {
        margin-left: 57px;
    }
    .brand-logo--tnavidad {
        width: 125px;
        top: -42px;
        left: 22px;
    }
    #login-menu-title {
        font-size: 0.875em;
        display: inline-block;
        vertical-align: bottom;
    }
    #brand-slogan {
        color: #f17300;
        font-family: FuturaHeavy, sans-serif;
        font-style: italic;
        text-align: left;
        width: 27%;
        margin: 16px 0 0 160px;
    }
    #brand-contact {
        font-size: 1.125em;
        margin-right: 0;
        width: 55%;
    }
    #brand-slogan,
    #brand-contact {
        vertical-align: top;
        display: inline-block;
    }
    /*
		Buscador Interno
	*/
    #buscador {
        margin: 2em auto 3em auto;
    }
    .buscador__tab {
        text-align: left;
        background-position: 90% 50%;
        padding: 32px 47px 0 14px;
        height: 95px;
    }
    /*
		Combinados
	*/
    /*Para contener el bot�n*/
    .oferta-combinado_info {
        position: relative;
        min-height: 170px;
    }
    .oferta-combinado-btn {
        width: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}


/*
	Reviews
*/

.review-single {
    margin: 20px 0;
}

.review-profile-picture {
    height: 50px;
    width: auto;
    border-radius: 50%;
}

.review-rating {
    padding-right: 10px;
}

.review-single h6 {
    margin: 0;
}


/*
	Stars
*/

.no-margin {
    margin: 0;
}

.big-star {
    background: url(../images/ui/big_rating.png);
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 5px 0;
    position: relative;
}

.big-rating {
    position: absolute;
    color: #fff;
    top: 42%;
    left: 36%;
    font-size: 1.2em;
}

.star {
    background: url("../images/ui/stars_rating.png") repeat-x;
    display: inline-block;
    font-size: 0;
    height: 21px;
    line-height: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 110px;
    margin: 5px 0;
}

.star-rating {
    background: url("../images/ui/stars_rating.png") repeat-x;
    background-position: 0 100%;
    float: left;
    height: 21px;
    display: block;
}

.star-rating:not([data-rating]),
.star-rating[data-rating="0"] {
    width: 0%;
}

.star-rating[data-rating="1"] {
    width: 20%;
}

.star-rating[data-rating="2"] {
    width: 40%;
}

.star-rating[data-rating="3"] {
    width: 60%;
}

.star-rating[data-rating="4"] {
    width: 80%;
}

.star-rating[data-rating="5"] {
    width: 100%;
}

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
}


/*
	XLarge screens
*/

@media only screen and (min-width: 90.063em) {
    /* min-width 1441px, xlarge screens */
}

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
    /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
}


/*
	XXLarge screens
*/

@media only screen and (min-width: 120.063em) {
    /* min-width 1921px, xxlarge screens */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(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;
        /* Black prints faster: http://www.sanbeiji.com/archives/953 */
        color: #000 !important;
        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,
    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;
    }
    img {
        max-width: 100% !important;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*---------------------Nuevo css------------------------*/

.llamanos12pd {
    position: absolute;
    top: 6%;
    right: 77px;
    height: 141px;
}

.llamanos12Verano {
    height: 141px;
    position: absolute;
    top: -53px;
    right: 77px;
    z-index: 100;
}

img.noolvidedesc {
    position: absolute;
    top: 43px;
    right: -23px;
    height: 160px;
}

img.noolvidedesc2 {
    position: absolute;
    height: 138px;
    top: 178px;
    left: 0;
}

img.fijarimg {
    position: fixed;
    top: 33%;
    right: -28px;
    z-index: 200;
}

p.oferta-img1 img {
    position: absolute !important;
    top: -17px;
    right: -16px;
}

img.paso1 {
    position: absolute;
    top: 437px;
    right: 500px;
}

img.paso2 {
    position: absolute;
    top: -25px;
    left: -247px;
    margin-top: 10px;
}

@media screen and (max-width: 641px) {
    img.noolvidedesc {
        position: absolute;
        top: 67px;
        left: -55px;
    }
    .img.paso2 {
        visibility: hidden;
    }
    .llamanos12Verano {
        height: 101px;
        position: absolute;
        top: 94px;
        right: 20px;
    }
    .llamanos12pd {
        visibility: hidden;
    }
    p.oferta-img1 {
        visibility: hidden;
    }
}

.llamadaYwhatsapp,
.llamadawhatsappex {
    position: absolute;
    top: -42px;
    right: 0;
}

.call-center {
    position: absolute;
    right: 5px;
    top: 67%;
    z-index: 400;
    cursor: pointer;
    transition: all 2s;
}

.fixed {
    position: fixed;
    right: 5px;
    top: 65%;
    z-index: 400;
    cursor: pointer;
    transition: all 1.3s 2s;
}

.attContacto {
    position: absolute;
    top: -12px;
    left: -186px;
}

.attContacto_EX {
    position: absolute;
    top: -12px;
    left: 134px;
}

img.sello {
    position: absolute !important;
    top: 2px !important;
    right: -15px !important;
    width: 80px !important;
}

.WhatsAppDTPT {
    position: absolute;
    top: -10px;
    right: 84px;
}

@media screen and (max-width: 40.625em) {
    .llamadaYwhatsapp,
    .llamadawhatsappex,
    .WhatsAppDTPT {
        visibility: hidden;
    }
    .call-center {
        width: 150px;
    }
}

@media screen and (max-width: 386px) {
    .attContacto {
        top: -19px;
    }
}

.protecion_datos {
    display: flex;
    list-style: none;
    justify-content: space-around;
    flex-flow: wrap row;
}

.seguro_gratis img {
    width: 110px;
    margin-top: -13px;
    transform: translate(-12px, 6px);
}

@media screen and (max-width: 640px) {
    .seguro_gratis img {
        width: 100%;
        margin-top: -13px;
        transform: translate(-2px, 6px);
        height: 64px;
    }
}


/*------------------------------------------------------
                    ToolTip
-------------------------------------------------------*/

a.tooltip {
    position: relative;
}

a.tooltip:hover {
    text-decoration: none;
}

a.tooltip:after {
    content: attr(tip);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 1.2em;
    color: #fff;
    width: 200px;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #f17300;
    background: -webkit-linear-gradient(#f17300, #f17300);
    background: -moz-linear-gradient(#f17300, #f17300);
    background: -o-linear-gradient(#f17300, #f17300);
    background: -ms-linear-gradient(#f17300, #f17300);
    background: linear-gradient(#f17300, #f17300);
    -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .65);
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .65);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .65);
    position: absolute;
    top: 27px;
    left: -10px;
    display: none;
    text-align: center;
}

a.tooltip:before {
    z-index: 1000;
    position: absolute;
    content: "";
    top: 15px;
    left: 0px;
    border-right: 7px transparent solid;
    border-left: 7px transparent solid;
    display: none;
}

a.tooltip:hover {
    z-index: 1000;
    position: relative;
    color: #8325f7;
}

a.tooltip:hover:after {
    display: block;
}

a.tooltip:hover:before {
    display: block;
}


/*----------------------------------------------------------------
                Fin toolTip
------------------------------------------------------------------*/

.seguro_detalle {
    position: relative;
    top: 78px;
    left: -4px;
}

.seguro_detalle img {
    width: 153px;
}

.seguro_combinado img {
    width: 105px;
    margin-left: -8px;
    margin-bottom: 10px;
    margin-top: -11px;
}

.seguro_combinado_detalle {
    position: relative;
    left: -169px;
    top: 54px;
}

.seguro_combinado_detalle img {
    width: 153px;
}

a.tooltip.seguro_combinado_detalle.seguro_circuito_detallePT {
    top: 42px;
    left: -176px;
}

@media screen and (max-width: 370px) {
    .ajustable img {
        width: 100px !important;
    }
    .seguro_combinado_detalle {
        position: relative;
        left: -41px;
        top: 77px;
    }
    a.seguro_circuito_detalle {
        position: relative;
        left: -40px !important;
        top: 78px !important;
    }
    a.tooltip.seguro_combinado_detalle.seguro_circuito_detallePT {
        position: relative;
        left: -3px !important;
        top: 43px !important;
    }
    a.tooltip.seguro_combinado_detalle.seguro_circuito_detallePT img {
        width: 140px;
    }
    a.tooltip.seguro_combinado_detalle.seguro_combinado_detallePT {
        top: 78px;
        left: -44px;
    }
    a.tooltip.seguro_combinado_detalle.seguro_combinado_detalleES {
        left: -39px;
        top: 79px;
    }
}

@media screen and (min-width: 375px) and (max-width: 450px) {
    .seguro_combinado_detalle {
        position: relative;
        left: -36px;
        top: 54px;
    }
    a.tooltip.seguro_combinado_detalle.seguro_circuito_detallePT {
        left: -45px;
        top: 41px;
    }
    a.tooltip.seguro_combinado_detalle.seguro_combinado_detallePT {
        left: -36px;
    }
}

@media screen and (max-width: 750px) {
    .seguro_combinado_detalle {
        left: -23px;
        top: 54px;
    }
    a.tooltip.seguro_combinado_detalle.seguro_circuito_detallePT {
        top: 42px;
        left: -31px;
    }
}

.icon {
    font-size: 52px;
    padding: 1px 7px;
    margin-bottom: -20px;
}

a.icon_whatsapp:hover {
    background-color: #189D0E;
    border-radius: 10px 10px;
    color: #fff !important;
}

a.icon_instagram:hover {
    background-color: magenta;
    border-radius: 10px 10px;
    color: #fff !important;
}

a.icon_facebook:hover {
    background-color: #006AB9;
    border-radius: 10px 10px;
    color: #fff !important;
}

a.icon_youtube:hover {
    background-color: #FF0000;
    border-radius: 10px 10px;
    color: #fff !important;
}

#clima {
    border-left: 2px solid #d1d1d1;
    padding-left: 9px;
    border-right: 2px solid #d1d1d1;
    padding-right: 15px;
}

#social {
    padding-left: 15px;
    text-decoration: none !important;
    cursor: default;
}

@media screen and (max-width:389px) {
    #social {
        margin-left: 109px;
        margin-right: 108px;
    }
}

svg.svg-inline--fa.fa-whatsapp.fa-w-14,
svg.svg-inline--fa.fa-instagram.fa-w-14,
svg.svg-inline--fa.fa-facebook-square.fa-w-14,
svg.svg-inline--fa.fa-youtube.fa-w-18 {
    display: flex;
    justify-content: center;
    padding: 6px;
}
/*nav.secondary-nav  a.secondary-nav__item{
    padding-bottom: 10px;
    padding-top: 10px;
}*/

/*CSS de wigwt*/
.ekomi-widget-container{
    padding-top: 5px;
    display: flex;
    justify-content: center;
}
@media screen and (min-width: 800px){

.contenedor #ekw68 {
    height: 70px !important;}
.contenedor #ekw68 .seal-section {
       height: 69px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 80px !important;
    padding-left: 6px !important;
    padding-top: 10px;
}
.contenedor #ekw68 p.crating-text{
    margin-bottom:4px  !important;
}
.contenedor #ekw68 .stars-rating p{
    text-align: center  !important;
}
.contenedor #ekw68 .stars-rating {
    margin: 0  !important;
    padding: 0  !important;
    width: 145px  !important;
    padding-left: 1px  !important;
}
.contenedor #ekw68 .cname{
    margin-bottom: 0 !important;
    width: 158px !important;
}
.contenedor #ekw68 .rating-section, #ekw68 .seal-section, #ekw68 .stars-rating {
   
    height: 74px !important;
}

.contenedor #ekw68 .sseal {
       width: 61px !important;
    height: 69px !important;
    padding-top: 10px;
}
.contenedor #ekw68 .rating-section, #ekw68 .quote-section {
    width: 242px !important;
}

.contenedor #ekw68 .stars-grey {
    margin-bottom: 9px  !important;
}
.contenedor #ekw68 .rating-figures {
    font-size: 19px  !important;}
.contenedor #ekw68 .quote-box {
    height: 51px  !important;
    width: 158px !important;
    }
.contenedor #ekw68 .quote-section{
        padding-top: 0px !important;
         width: 164px !important;
         height:68px !important;
    }

.contenedor #ekw68 .review-section {
     margin: 0 !important; 
     padding: 0 !important; 
     height: 0 !important; 
     padding-right: 0 !important; 
     padding-bottom: 0 !important; 
     overflow: hidden;
    width: 154px !important;
    height: 55px !important;
    padding-top: 17px !important;
    padding-left: 8px !important;
    margin-top: 7px !important;
    font-weight: bold;
}
.contenedor  .review-section{
    width: 103px !important;
    padding-left: 9px !important;
    padding-top: 16px !important;
    }
.contenedor #ekw68 .qcontent {
    width: 140px !important;
}
.contenedor #ekw68 .other-links{
    width: 160px !important;
}
div.widget_pie{
    padding-top: 20px;
}
.widget_pie>#ekw68{
   width: 809px;
   height: 131px;
}

.widget_pie>#ekw68 .seal-section{
   /* margin-top: 11px;
    padding-left: 30px;*/
}
.widget_pie>#ekw68 .quote-section {
    padding-top: 13px !important;
}
div.widget_pie>#ekw68 .review-section{
    padding: 45px 11px 0 25px !important;
    font-weight: bold;
    width: 241px;
}
div.widget_pie>#ekw68 p.crating-text{
    margin-bottom: 10px;
    margin-top: -3px;
}
div.widget_pie>#ekw68 .rev {
   /* margin-left: 40px !important;*/
    font-weight: bold;
}
div.widget_pie>#ekw68 .sseal {
    margin-top: 7px;
    margin-left: 5px;
    width: 90px;
    height: 85px;
}
#widget-container.contenedor_fr>#ekw68 .review-section{    text-align: start;}
div.widget_pie.contenedor_fr>#ekw68 .rev{
    overflow-y: scroll;
}
#widget-container.widget_pieFR>#ekw68 .review-section{
     padding-top: 0px !important;
    overflow: scroll;
}
}
a.excursion_gratis{
    display: inline-block;
    margin-top: 7px;
    transform: translateY(-108px);
    margin-bottom: -27px;

}
a.excursion_gratis.excursion_paso1{
    margin-top: -26px;
}
#precio-sliderRomaCaribe.sliderVuelo_dirrecto{
   right: 84% 
}
div.ekomi_logo{
    display: flex;
    justify-content: center;
    margin-top: 9px;
}
.FIN{
    color:#00ff;
}
.logo_hoteles_amigos{
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    margin-bottom: -65px;
        margin-top: 20px;
}
.logo_hoteles_amigos p{
    font-size: 21px;
    font-weight: bold;
    color: #000;
    margin-bottom: 0;
}
.logo_hoteles_amigos img{
    width: 235px;
}
@media screen and (max-width: 800){
   .logo_hoteles_amigos p{
    margin-top: 20px;
   } 
}

/*------------Modal Con css---------------*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
     z-index: 1000;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;

}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.botones_modal{
    display: flex;
    justify-content: flex-end;
}
.botones_modal button{
    margin-right: 5px;
}
input#esconder{
    visibility: hidden;
}
.unicef{a:link:#000;font-weight: bold;width:90px;height:40px;}
.unicef1{a:link:#000;font-weight: bold; width:180px;height:40px;}
div.footer-index-list .img_costa_crucero{
    width: 50px;
    margin-right: 7px;
}
div.footer-index-list .costa_crucero{
    margin-left: 63px;
}
div.footer-index-list h6{
  display: inline-block;
    margin-top: -12px;
}