/*------------ Art2Fly IBE | www.art2fly.com | Copyright 2024 ------------*/ @import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,400italic,600,700,800,900); /*------------------------------------------------------------------------------- Estilos generales ---------------------------------------------------------------------------------*/ * { margin:0; padding:0; text-decoration:none; list-style:none; outline:none; } html, body { width:100%; height:100%; font:14px/19px 'Open Sans', sans-serif; color:#222;} #header {width:100%;padding: 25px 0;text-align:center;position:relative;} #container {/* padding-top: 180px; */position:relative;background:#f5f5f0;min-width:320px;} main {background-color:#fafafa;} .centre {max-width:1000px;margin:auto;padding:0 50px;position:relative;min-width: 300px;} a img { border:none; } .clear {clear:both;}im .left-align {text-align:left;} .right-align {text-align:right;} .center-align {text-align:center;} .bold {font-weight:700;} .light {font-weight:100;} .small {font-size: .8em;letter-spacing: .4px;text-transform:none;display: block;color: #666;font-weight: normal;margin-top: 5px;} .normal {font-weight:normal;} .color-cliente {color:#a69f88;} del.tarjado {text-decoration: line-through;color: #fdca87;} span.precio_promo {font-size: .8em;color: #999;text-transform: uppercase;line-height: 1;display: block !important;letter-spacing: 0.5px;} /*------------------------------------------------------------------------------- Logo y Breadcrumbs ---------------------------------------------------------------------------------*/ #nav {width:100%;min-width:320px;background-color: white;} #nav .centre {min-height: 100%;background: white;} #nav .logo {-ms-transform:translate(0,-50%); margin: 10px 0;} #nav .logo #logo-promo {display:none} #header h1 { font:700 40px/45px 'Open sans', georgia; color:#FFF; display:inline-block; } #header ul { position:absolute; top:-20px; } #header ul li {float: left;font:600 11px/40px 'Open sans', sans-serif;color: #333;letter-spacing: .8px;text-transform: uppercase;margin: 0 10px;} #header ul li:first-child { margin-left:0px;} #header ul li.bullet {margin:0;} #header ul li.mobile { display:none; } #header ul li a:after { content:""; width:calc(100% - 24px); height:2px; position:absolute; bottom:7px; left:12px; } #header ul li.active a { font-weight:800; opacity:1; } .hover #header ul li:hover a:after { background:rgba(0,0,0,.1); } #header li.encendido {font-weight: 900;} #header li.encendido.bullet {font-weight: normal;} #header li.apagado {color:#999;} #header li.oculto {display:none;} .login_agencia {text-align: right; max-width: 1000px; padding: 10px 50px 0 50px; font-size: 11px; margin: auto;} .login_agencia a { color: initial; text-decoration: underline;} .login_agencia a:hover { color: #aeaa9d;} /*------------------------------------------------------------------------------- Main y content ---------------------------------------------------------------------------------*/ main {font:12.5px/19px 'Open Sans', sans-serif;color:#222;letter-spacing:0.4px;} main .centre { padding:50px; } main .centre:after { content:""; clear:both; display:block; } main h1 { font:100 20px/30px 'Open Sans', sans-serif;letter-spacing:1.2px; text-transform:uppercase; position:relative; } main h2 {font: 100 16px/22px 'Open Sans';text-transform:uppercase;position:relative;letter-spacing: .8px;} main h3 {font: 600 14.5px/20px 'Open Sans', sans-serif;letter-spacing:0.4px;text-transform: none;} main h4 {font: 700 12px/15px 'Open Sans', sans-serif;letter-spacing:0.25px;text-transform:uppercase;} main h5 {font: 700 12px/15px 'Open Sans', sans-serif;letter-spacing:0.25px; text-decoration:underline; } main .condiciones h4 {border-bottom:1px solid #666;margin-bottom:10px;} main p { margin:5px 0 20px 0; letter-spacing:0;} main p a, main p a i, main ul a { font-weight:bold; border-bottom:1px solid #E5E5E5; color:#333; } main hr { margin-bottom:30px; border:1px solid #FFF; border-bottom:1px solid #E5E5E5; } main ul { margin-bottom:30px; } main ul li { list-style:circle; } main ul ul { margin-left:18px; } main .condiciones ul { margin-left:30px; } main .condiciones ul li { list-style:disc; font-size:12.5px; list-style-position:initial; } main .condiciones ol {margin-left: 0;margin-bottom:30px;} main .condiciones ol li {list-style: decimal;font-size:12px;list-style-position:initial;margin: 5px 16px;} main .condiciones ol li ol li {list-style-type: upper-alpha;} main table {width:100%;margin:0 0 25px 0;background: #f5f5f5;border-spacing: 1px;overflow:hidden;position:relative;text-align:left;} main table td {padding: 18px 10px 10px 10px;background: #f5f5f5;font:500 12px/15px 'Open Sans', sans-serif;} main table th {padding: 14px 5px;background: #dedad1;position:relative;} main blockquote { width:40%; margin:0 25px 25px -30px; font:bold 25px/30px 'Open Sans', sans-serif; float:left; } #content { margin:0 0 -38px; } .hover main p a:hover, .hover main p a:hover i, .hover main ul a:hover { color:#000; } .hover main ul.sitemap a:hover { color:#000; } /*------------------------------------------------------------------------------- Botones ---------------------------------------------------------------------------------*/ #content .button { margin-top:30px; margin-bottom:30px; } #content a.button {color:#fff;padding: 0 50px;} .button, form button {h;height: 40px;padding: 0 50px;font: 600 12px/40px 'Open Sans', sans-serif;color:#FFF;letter-spacing: 1.5px;text-align:center;text-transform:uppercase;display:inline-block;border-radius:5px;overflow:hidden;background-color: #aeaa9e;} .button span, form button span { position:relative; display:inline-block; } .button span:before, form button span:before { position:absolute; top:100%; content:attr(data-hover); } form button { padding:0; cursor:pointer; border:none; } input.button {font: 600 10px/40px 'Open Sans', sans-serif;cursor:pointer;color:#fff;width: 100%;padding: 0 20px;border: none;text-align: center;} input.button:disabled, input.button:disabled:hover {cursor:initial;background: #f2f0f0;color: #bab9b8;font-weight: normal;} .button:hover, form button:hover, input.button:hover {background: #726f65;} .button:active, form button:active, input.button:active {background: #b6b1a7;color:#53524B;} .button:hover span, form button:hover span { transform:translateY(-100%); -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); } /*------------------------------------------------------------------------------- Estilos caja de compras (basada en form de contacto) ---------------------------------------------------------------------------------*/ #caja_compra { width:80%; max-width: 300px; border-radius:5px; overflow:hidden; position:absolute; top:20%; right:0; background:rgba(0,0,0,0.5); box-shadow:0 0 1px rgba(0,0,0,.2),0 0 10px rgba(0,0,0,.15); z-index:100;margin:0px; margin-right: calc((100% - 1100px) / 2);} #caja_compra:before { content:""; width:100%; height:100%; position:absolute; top:0; left:0; opacity:.2 !important; } #caja_compra:after { content:""; clear:both; display:block; } #caja_compra * { position:relative; z-index:1; } #caja_compra img { max-width:100%; height:auto; display:block; box-shadow:0 1px 0 rgba(0,0,0,.1); border-radius:5px 5px 0 0; position:relative; z-index:10; } #caja_compra form { padding:20px; padding:27px 0; } #caja_compra .col { width:100%; padding:0 30px; text-align:left; float:left; box-sizing:border-box; } #caja_compra .field { width:100%; margin-bottom:7px; background:#FFF; border-radius:3px; box-shadow:1px 1px 0 rgba(0,0,0,.1); } #caja_compra .field.mandatory:before { content:"\f069"; font-family:FontAwesome; font-size:10px; color:#999; position:absolute; top:10px; left:10px; opacity:.7; } #caja_compra .field.mandatory input { padding-left:28px; } #caja_compra .field.oculto { display:none; } #caja_compra input, #caja_compra textarea, #caja_compra select { width:100%; height:45px; padding:0 15px; font:14px/20px 'Open Sans', sans-serif; letter-spacing:.4px; border:none; box-sizing:border-box; background:none; z-index:2; position:relative; } #caja_compra select { width:58%; padding:0 10px; margin-left:2%; margin-bottom:7px ; background:#FFF; border-radius:3px; box-shadow:1px 1px 0 rgba(0,0,0,.1); float:left; } #caja_compra select:last-child { width:58%; margin:0; margin-left:2%;} #caja_compra .edades {width: 40%; color: white; font-size: 15px; line-height:15px; padding-top:8px; font-family: "Open Sans", arial, sans-serif; float:left;} #caja_compra .check {width: 40%;color: white;font-size: 15px;line-height: 15px;padding-top: 0;font-family: "Open Sans", arial, sans-serif;margin-bottom: 5px;} #caja_compra .edades .rango {color:#CDCBBE; font-size: 11px;} #caja_compra textarea { height:149px; padding:12px 15px; display:block; margin-top:7px;} #caja_compra .field.calendar input { cursor:pointer; } #caja_compra .field i { font-size:16px; color:#CCC; position:absolute; margin-top:14px; right:15px; z-index:1; } #caja_compra button { width:100%; margin:10px 0 20px; font-size:14px; border-radius:3px; } .alert { padding:20px; line-height:20px; text-align:left; } .alert i { font-size:25px; float:left; margin:-2px 15px 0 0; } .alert.success { background:#E9F7E0; border-color:#CAE4C7; } .alert.success i { color:#4A8E53; } .alert.error { background:#FDECEB; } .alert.error i { color:#A3505A; } .alert.validate { background:#FFFADC; } .alert.validate i { color:#C6AE4F; } #caja-compra span.small {margin: 5px auto -10px auto;width: 80%;color: white;text-align: center;line-height: 1.3;} /*------------------------------------------------------------------------------- Date picker caja de compras ---------------------------------------------------------------------------------*/ .ui-datepicker {background: white;margin-top: -10% !important;margin-left: -20% !important;font: 13px/20px 'Open Sans', sans-serif;z-index:999999 !important;box-shadow: 20px 20px 10px rgba(0,0,0,0.6);position:fixed !important;top: 50% !important;left:50% !important;} .ui-datepicker * {position:relative;z-index: 9;} .ui-datepicker:before {content:"";width:100%;height:100%;outline: 9999px solid rgba(0,0,0,.3);position:absolute;top:0;left:0;z-index:1;} .ui-datepicker .ui-datepicker-title {height: 2.2em;line-height: 2.2em !important;} .ui-datepicker select { position:relative; z-index:2; } .ui-datepicker .ui-widget-header {background-image:none !important;background-color: #e9e9e7;z-index: 3;} .ui-datepicker td span, .ui-datepicker td a {text-align:center !important;} .ui-widget-content {background:white !important;} .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background: none !important;background-color: white !important;border: 1px solid grey !important;color: #444242 !important;} .ui-datepicker .ui-state-active,.ui-datepicker .ui-widget-content .ui-state-active, .ui-datepicker .ui-widget-header .ui-state-active {background: none !important;background-color: hsla(54, 100%, 72%, 1) !important;border: 1px solid grey !important;font-weight: bold !important;color: #444242 !important;} /*------------------------------------------------------------------------------- Estilos de otros elementos ---------------------------------------------------------------------------------*/ .ui-tooltip { height:30px; padding:0 10px; font:bold 11px/30px 'Open Sans'; color:red; letter-spacing:.2px; box-shadow:1px 1px 0 rgba(0,0,0,.15); background:#FeFeF9; position:absolute; z-index:999999; border-radius:4px; } .embed-container { position:relative; padding-bottom:56.25%; height:0; max-width:100%; height:auto; } .embed-container iframe, .embed-container object, .embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%; border:none; } .embed-container:before { content:""; width:calc(100% + 10px); height:calc(100% + 10px); border:1px solid #E5E5E5; position:absolute; top:-6px; left:-6px; } label {display: inline-block;width: calc(100% - 50px);font-weight: 600;letter-spacing: 0;} input {border: 1px solid #ddd;border-radius: 0;display: inline-block;padding: 0.3em;vertical-align: middle;width: calc(100% - 100px);max-width: 300px;font-family: Arial,Helvetica;color: #333;margin:0;font-size:100%;height: 22px;} select {border: 1px solid #CCCCCC;border-radius: 0;display: inline-block;font-family: Arial,Helvetica;margin-bottom: 0.25em;margin-top:2px;padding: 0.35em;vertical-align: middle;width: auto;font-size:100%;height:30px;} #condiciones p, #desc-estadia p {font-size:12px; line-height:16px; margin-bottom:15px;} /*--- ICONOS ---*/ .icon {width: auto;height: 30px;font-size: 2em;display: inline-block;margin: 10px 15px 0 15px;border: none;padding: 4px;float: left;} .icon a {width: 300px;height: 300px;zoom: .06;display: inline-block;} /*------------------------------------------------------------------------------- Banner promocional ---------------------------------------------------------------------------------*/ #banner_promocional {width: 100%;box-sizing: border-box;padding: 12px 30px;background: #818180;text-align: center;font-size: .88em;letter-spacing: .2px;line-height: 1.25;color: #fafcfd;} #banner_promocional a {display: inline;text-decoration:none;color: #c6dabd;} #banner_promocional span.codigo {background: white;padding: 0px 2px;color: #ff8800;letter-spacing: .6px;font-size: 1em;margin: 0 2px;} #banner_promocional span.descuento {color: #e45f2e;display: inline-block;} #banner_promocional span.santander {font-weight: 700; color: #d04646;} #banner_promocional span.cyber {color: black;font-weight: 700;font-size: 14px;} #banner_promocional span.small {color: lightgray;} #banner_promocional .condiciones {font-size: 11.5px;line-height: 1.2;display: block;color: rgba(255, 255, 255, .65);font-family: 'open sans';font-weight: 500;letter-spacing: 0.5px;margin-top: 3px;} #banner_promocional #condiciones_promo {margin: 20px; color: #777; font-family: "Open Sans", arial, sans-serif; font-size: 11px;} #banner_promocional #condiciones_promo p {display: block; width: 100%; max-width: 550px; margin: 0 auto;} #banner_promocional #condiciones_promo h4 {text-align: center;} #banner_promocional span.small .codigo {color: grey; font-weight: 600; font-size: 1em;} #imagen_promocional {position: absolute; height:auto; max-height: 104px; z-index: 999; width: 100%; text-align: center;} /*-- BLOQUE PROMOCIONAL PARA USO CYBER --*/ div#sello-cyber {position: absolute;z-index: 99;right: 0;top: 0;zoom: .7;} /*------------------------------------------------------------------------------- Izquierda y derecha - estilos generales pasos 2 al 6 ---------------------------------------------------------------------------------*/ aside { width:auto; padding-left:50px; float:right; } aside.layout2 { margin-top:8px; } .hover aside .nav li a:hover { background:#DDD; } .hover aside .blocktitle a:hover { background:rgba(0,0,0,.12); } aside {width:auto;padding-left: 20px;float:right;text-align:left;margin-top: 1px;} .derecha, .derecha.relative {width: 590px;position:relative;text-align:left;} .derecha.fixed { position:fixed; top:130px; } .derecha.absolute { position:absolute; top:auto !important; bottom:70px; } .derecha h4 {border-bottom:1px solid #999;margin-bottom:10px;} /*------------------------------------------------------------------------------- Loader ---------------------------------------------------------------------------------*/ .loader, .loader:after { border-radius: 50%; width: 8em; height: 8em; } .loader { display: none; margin: auto; font-size: 10px; position: absolute; top: 25%; left: calc(50% - 4em); z-index: 1000; text-indent: -9999em; border-top: 1.1em solid #00000060; border-right: 1.1em solid #00000060; border-bottom: 1.1em solid #00000060; border-left: 1.1em solid #FFFFFF70; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*------------------------------------------------------------------------------- Paso1 ---------------------------------------------------------------------------------*/ #paso1 .mensaje p {font-size: 1.12em;font-weight: 600;color: #444;margin: 0;} #paso1 .ficha_programa {width: 100%;overflow: hidden;margin: 30px 0;background-color: transparent;border: none;position: relative;} #paso1 .titulo_programa h2 {color:#fff;padding: 14px 30px;margin: 0;} #paso1 .titulo_programa {background-color: #a69f88;text-align: left;position: absolute;top: -1px;left: -1px;width: calc(100% + 302px);} #paso1 .img_programa {float:left;width: 30%;height:320px;border: none;border-bottom: 1px solid #ddd;overflow: hidden;position: relative;} #paso1 .img_programa img {width: auto; height: 100%; margin-bottom: -5px; position: relative; left: -100px;} #paso1 .desc_programa {height: 321px;float: left;text-align: left;border: 1px solid #ddd;width: 25%;box-sizing: border-box;padding: 60px 10px 20px 30px;background: white;position: relative;z-index: 9999;font-size: .92em;line-height: 1.4;} #paso1 .desc_programa h3 { margin: 20px; margin-bottom: 0px; line-height: 1.25em; letter-spacing: 0; font-weight: 400; max-width: 300px; font-size: 1em; } #paso1 .desc_programa h4 { letter-spacing: 0; text-transform: none; margin:10px 20px 0px 20px;} #paso1 .desc_programa p { margin:10px 20px; max-width: 300px; font-size: .92em; } #paso1 .desc_programa ul {margin: 2px 0px 10px 15px;max-width: 300px;} #paso1 .desc_programa ul li {list-style: outside;font-size: .9em;line-height: 1.2em;margin-bottom: 5px;} #paso1 .ficha_programa .opciones {width: auto;min-width: 220px;border: none;float: left;text-align: center;} #paso1 .ficha_programa .details {border: none;float: left;height: 319px;width: 220px;border: 1px solid #ddd;border-left: none;background: white;} #paso1 .details .precio {margin: 20px 20px 0 20px;font-size: 1.5em;letter-spacing: 0;font-weight: 100;} #paso1 .details .party {margin: 15px auto;font-size: 0.93em;line-height: 1.3em;font-weight: bold;max-width: 180px;} #paso1 .details .dates {margin: 20px 5px;line-height: 1.5em;font-size: .85em;font-weight: 600;} #paso1 .details .titulo_programa {position: relative;width: calc(100% + 1px);height: 50px;} /*------------------------------------------------------------------------------- Paso2 ---------------------------------------------------------------------------------*/ #paso2 section.hotel {padding-bottom: 10px;margin-bottom: 30px;border-bottom: 1px dashed #bbb;} #paso2 table.caluga-paso2 {width:630px;border: 1px solid #ccc;margin-bottom: 40px;} #paso2 table.caluga-paso2 th {background-color: white;padding: 12px 20px 0px 20px;border-right: 1px solid #eee;} #paso2 table.caluga-paso2 th:last-child, #paso2 table.caluga-paso2 td:last-child {border-right: none;} #paso2 table.caluga-paso2 td, #paso2 table.caluga-paso2 tr:nth-child(odd) td {background-color: white;padding: 5px 5px 12px 20px;border-right: 1px solid #eee;} #paso2 table.caluga-paso2-mobile {display: none;margin: 0 0 30px 0;border: 1px solid #b9b9b8;} #paso2 table.caluga-paso2-mobile td { padding:2px 10px; background-color:#fff;} #paso2 table.caluga-paso2-mobile td.first { padding-top:15px;} #paso2 table.caluga-paso2-mobile td.last { padding-bottom:15px;} #paso2 span.etiqueta {width: 35px; display: inline-block; font-weight: 600; margin-bottom: 1px;} #paso2 table.alt_acomodacion {margin:0; border: 1px solid #ccc;} #paso2 table.alt_acomodacion th {border: 1px solid #8e8b81;padding: 10px 5px 10px 10px;} #paso2 table.alt_acomodacion td {padding:10px 5px 5px 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;} #paso2 table.alt_acomodacion th h4 {line-height:14px;font-size: .95em;border: none;margin: 0;} #paso2 table.alt_acomodacion th.h_precio_total {width: 240px;text-align: center;} #paso2 table.alt_acomodacion td.boton {max-width: 120px;padding: 10px 6px;} #paso2 table.alt_acomodacion td a.button {zoom: .9;padding: 0 25px;} #paso2 table.alt_acomodacion td .button a span { padding: 0 20px;} #paso2 table.alt_acomodacion td.precio {font-size:13.5px; font-weight:600;} #paso2 table.alt_acomodacion th.tarifas-multiples {background: #dedad2;font-weight: 600;line-height: normal;font-size: 10px;text-align: center;padding: 5px;border-color: #aeaa9e;color: #4d3720;letter-spacing: .6px;} #paso2 table.alt_acomodacion td.tarifas-multiples.precio {font-size: 12px;width: 100px;text-align: center;padding: 2px;} #paso2 table.alt_acomodacion td.tarifas-multiples span {display: inline-block;margin: 0;} #paso2 table.alt_acomodacion td.tarifas-multiples input {width: auto;font-size: 12px;position: relative;top: -2px;margin: 0 2px 0 4px;} #paso2 table.alt_acomodacion td {padding:10px 5px 5px 10px;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;} #paso2 table.alt_acomodacion th.tarifas-multiples.no-reembolsable {background: #979693;color: white;font-weight: normal;} #paso2 table.alt_acomodacion td.tarifas-multiples.no-reembolsable {background: white;} #paso2 table.alt_acomodacion_mobile {display:none;} #paso2 table.alt_acomodacion_mobile th, #paso2 table.alt_acomodacion_mobile td {font-size: 1.3em;letter-spacing: normal;line-height: 1.2;padding: 15px;border: 1px solid #ccc;} #paso2 table.alt_acomodacion_mobile th span {font-size: .9em;font-weight: normal;background-color: rgba(255, 255, 255, .4);margin: 2px 0;padding: 2px;display: block;letter-spacing: .4px;} #paso2 table.alt_acomodacion_mobile td.precio {font-size:14px; font-weight:600;} #paso2 table.alt_acomodacion_mobile td.boton {border-top:none;padding-top: 0;} #paso2 table.alt_acomodacion_mobile td.acomodacion {border-bottom-style:dashed;border-bottom: none;padding-bottom: 0;padding-top: 30px;} #paso2 table.alt_acomodacion_mobile span.precio {display: block;font-size: 1.8em;margin: 15px 0;} #paso2 table.alt_acomodacion_mobile td.xs span.precio {font: 700 18px/20px 'Open Sans'; margin-top: 10px; display: inline-block; -bottom: 0;} #paso2 table.alt_acomodacion_mobile td input.button {margin: 10px 0;max-width: 300px;font-size: 1em;height: 4em;} #paso2 table.alt_acomodacion_mobile td input.button, #paso2 table.alt_acomodacion_mobile td input.button:disabled {background-color:#726f65;} #paso2 table.alt_acomodacion_mobile td input.button.version-nr {background-color:#726f65;} #paso2 table.alt_acomodacion_mobile td input.button.version-nr:disabled {background-color:#aeaa9e;} #paso2 table.alt_acomodacion_mobile td input.button a {color:#fff;padding: 0px 30px;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio {width: 50%;/* padding: 20px 2px 2px 2px; */text-align: center;border: none;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio.selected, #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio.selected label, #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio.selected span {color:#444;/* font-weight: 600; */} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio:first-child {border-left:1px solid #ccc;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio:last-child {border-right:1px solid #ccc;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio label {width: auto;display: block;font-weight: normal;font-size: 1em;letter-spacing: normal;line-height: 1.2;color: initial;margin: 0;color: #999;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio input {font-size: 1.4em;width: auto;display: block;margin: 0 auto;line-height: 2em;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio span {font-size: 1.8em;font-weight: 100;display: block;margin: 0;color: #999;} #paso2 table.alt_acomodacion_mobile td.separador {background: #f5f5f0;padding: 2px;line-height: 1em;border: none;} #desc-tarifas {margin: 40px 0;padding-top: 20px;border-top: 1px solid #888;} #desc-tarifas h5 {font-size: 11px;margin: 10px 0 4px 0;line-height: 1;text-decoration: underline;text-transform: uppercase;} #desc-tarifas p {font-size:12px; line-height:16px; margin-bottom:15px;} /*------------------------------------------------------------------------------- Paso3 ---------------------------------------------------------------------------------*/ #paso3 #caluga_resumen table {margin-bottom:5px;} #paso3 td.total {width:180px;} #paso3 input { width:20px} #paso3 label { width:100%; display:inline; text-align:left; color:#222; font-weight:700;} #paso3 table#subtotal_table td {border: 1px solid #ccc;background-color: #f5f5f5;text-align: right;} #paso3 table#total_table td {border: 1px solid #ccc;background-color: #f5f5f5;text-align: right;} #paso3 table#comisiones_table td { border: 1px solid #ccc; background-color: #f5f5f5;} #paso3 #ancillary {position:relative;} #paso3 #ancillary h4 {width: 400px;background-color: #aeaa9e;color: white;padding: 10px;text-transform:none;font-weight:normal;margin:0;border: none;} #paso3 #ancillary h4 span.beneficio {display: block; letter-spacing: 3px;} #paso3 #ancillary h4 span.descuento {font-weight: 600;color: #d2fa27;} #paso3 .ancillary_total span.tarjado, #paso3 .ancillary_total del {color: #888; font-weight:normal;} #paso3 .ancillary_total {color: #222222; font-weight:600;} /******************** accordion styles > mobile text ********************/ #paso3 #Accordion1 {font-family: 'Open Sans'; font-size: 14px; font-weight: normal; color: inherit; text-align:left; } #paso3 a#ui-accordion-Accordion1-header-0, #paso3 a#ui-accordion-Accordion1-header-1, #paso3 a#ui-accordion-Accordion1-header-2 {font-family: 'Open Sans'; font-size: 14px; font-weight: normal; color: inherit; background: none transparent; border: none; border-radius: 0; letter-spacing: inherit; margin: 0; padding: 0; text-align: left; text-decoration: underline;} #paso3 #Accordion1 span.ui-accordion-header-icon.ui-icon {display:none;} div#ui-accordion-Accordion1-panel-0 { background-image: none; background-color: transparent; border: none;line-height: 19px; padding: 0;} /******************** accordion styles > ancillary ********************/ #paso3 #ancillary_table {position:relative;} #paso3 #ancillary span.precio_unitario {position: absolute;width: auto;text-align: right;z-index: 999;top: 4px;right: 10px;font-size: 9px;font-weight:lighter;color: #999;} #paso3 td.accordion2 {border-top:3px solid transparent;} #paso3 td.accordion2 table {margin: 0;border-spacing:0;border-collapse:collapse;} #paso3 td.accordion2 table td {background-color:#f5f5f5;border: 1px solid #ccc;} #paso3 td.accordion2 table td.ancillary_checkbox { border-right:none; } #paso3 td.accordion2 table td.ancillary_select {width: 40px;} #paso3 td.accordion2 table td.ancillary_total {text-align: right;width: 180px;position: relative;} #paso3 td.accordion2 table td.ancillary_total span.precio_unitario {display:inline-block;position: absolute;left: 10px;top: 38%; width: 80px;} #paso3 #ui-accordion-Accordion2-panel-0 { border:0; padding: 0; } #paso3 a#ui-accordion-Accordion2-header-0, #paso3 a#ui-accordion-Accordion2-header-1, #paso3 a#ui-accordion-Accordion2-header-2 { background: none transparent; border: none; border-bottom:1px solid #ddd; border-radius: 0; font:700 13px/15px 'Open Sans', sans-serif; letter-spacing:0.25px; margin:0; padding: 10px 30px; text-align:left;} #paso3 .accordion2 a.ui-state-default, #paso3 .accordion2 a.ui-state-default:link, #paso3 .accordion2 a.ui-state-default:visited {color: #222;text-decoration: none;text-shadow:none;text-decoration: none;text-align: left;padding: .8em .5em .8em 20px;border-radius: 1px;background: whitesmoke;} #paso3 .accordion2 a.ui-state-active, #paso3 .accordion2 a.ui-state-active:link, #paso3 .accordion2 a.ui-state-active:visited {text-decoration:none;background: #f5f5f0;border: none;border-bottom: none;text-align: left;padding-left: 0;font-weight: 600;padding-top: 14px;padding-bottom: 6px;} #paso3 .accordion2 .ui-accordion-content {padding-top:0;padding: 0;border: none;background-color: #f5f5f0 !important;} #paso3 .accordion2 .ui-state-active .ui-icon, .ui-button:active .ui-icon {background-image:url(https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_555555_256x240.png);} #paso3 #ancillary_table select {width: 40px; min-height: 20px; height:auto;} #paso3 .accordion2 a.ui-state-default, #paso3 .accordion2 a.ui-state-default:link, #paso3 .accordion2 a.ui-state-default:visited {color: #616161;background:#e6e3dc;font-family:'Open sans';font-size: 1em;font-weight:600;padding: 10px 5px;text-decoration: underline;} #paso3 .accordion2 .ui-icon, #paso3 .accordion2 .ui-widget-content .ui-icon {background-image: url(https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_555555_256x240.png);} #paso3 .accordion2 a.ui-state-active, #paso3 .accordion2 a.ui-state-active:link, #paso3 .accordion2 a.ui-state-active:visited {text-decoration: none;background: #aeaa9e;color: white;} #paso3 .accordion2 .ui-state-active .ui-icon, .ui-button:active .ui-icon {background-image: url(https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_ffffff_256x240.png);} /*------------------------------------------------------------------------------- Ficha hoteles - pasos 2 y 3 ---------------------------------------------------------------------------------*/ .hotel h2 {font-size: 1.6em;margin: 0px 1px 15px 0;border-bottom: 1px solid #888;font-family: 'Open sans', arial, sans-serif;line-height: 1.2;} .hotel #content {margin:20px 0 0 0;text-align: left;padding-right: 15px;} .hotel .left {width: calc(100% - 610px);float:left;} .hotel p {line-height: 1.5em;margin: 0 0 10px;} .hotel .left p.last {margin-bottom:10px;} .hotel .iconos-hotel {display: none; margin: 0px 0 20px -1px;} .hotel .hotel-icon {width: 18px;height: 18px;display:inline-block;margin: 2px 1px;border: 1px solid #d9dac7;border-radius: 5px;padding: 4px;} .hotel .hotel-icon a {width: 300px;height: 300px;zoom: .06;display: inline-block;} .hotel .mobile_extract {display: none; margin: 5px 0;} .hotel .desktop_fulltext {display: block; margin: 5px 0;} /*-- Magnific Popup paso 2 --*/ .hotel .popup-gallery {text-align:center;margin-top: 1px;} .hotel .popup-gallery a img {width: 8.9%;height: auto;} .hotel .popup-gallery a:nth-child(even) {display: none;} .hotel .popup-gallery a:first-child img {width:100%;} .hotel .popup-gallery a:last-child {display: inline;} /*------------------------------------------------------------------------------- Caluga Resumen - paso 3 en adelante ---------------------------------------------------------------------------------*/ #caluga_resumen table {border-spacing: 0;border: 1px solid #ddd;} #caluga_resumen table td h3 {font-weight:600;font-size: 1.5em;} #caluga_resumen th {padding-left: 20px;} #caluga_resumen td {background-color: #f5f5f5;padding: 5px 10px 5px 20px;font-weight:600;} #caluga_resumen td.normal {font-weight:normal;} #caluga_resumen td.first {padding-top: 20px;font-weight: 600;} #caluga_resumen td.last {padding-bottom: 20px;} #caluga_resumen td h4 {width: 100%;border-bottom:1px solid #999;} #caluga_resumen td.comisiones {padding-top:10px;padding-bottom:10px;border-bottom: 1px dashed #bbbbbb;} #caluga_resumen td.comisiones h3 {font-size: 1em;text-transform: uppercase;line-height: 1.15em;} #caluga_resumen tr.ultima-fila td {padding: 5px 5px 25px 20px;} #caluga_resumen td.total-resumen {padding:15px 10px 15px 20px;color:whitesmoke;font-size: 1em;letter-spacing:1px;background-color: #34445b;} #caluga_resumen td.total-resumen h3 {font-weight:100;} /*------------------------------------------------------------------------------- Paso4 ---------------------------------------------------------------------------------*/ #paso4 #content {margin:0; text-align: left;} #paso4 .left {width: 450px;float:left;} #paso4 aside {width: calc(100% - 500px);} #paso4 .derecha, #paso3 .derecha.relative {width:100%;} #paso4 .derecha.fixed { position:fixed; top:130px; } #paso4 .derecha.absolute { position:absolute; top:auto !important; bottom:70px; } #paso4 .derecha h4 { border-bottom:1px solid #999; margin-bottom:10px; } #paso4 .derecha #datos-pax, #paso4 .derecha #medio-de-pago, #paso4 #pago-parcial, #paso4 .derecha #aceptar-tyc {margin-bottom:40px;} #paso4 td.total {width:180px;} #paso4 #datos-pax table { border-spacing:0; border:none; background:none; margin-top:10px;} #paso4 #datos-pax td {background:none;padding: 2px 0;position: relative;} #paso4 #datos-agencia table { border-spacing:0; border:none; background:none; margin-top:10px;} #paso4 #datos-agencia td {background:none;font-size:14px;padding: 2px 0;} #paso4 #medio-de-pago table, #paso4 #pago-parcial table {border-spacing:0;border:none;background:none;margin-top:10px;margin-bottom: 0;padding-left: 0;} #paso4 #medio-de-pago td.medio-de-pago, #paso4 td.pago-parcial, #paso4 #pago-parcial table td, #paso4 #medio-de-pago table td {background:none;font-size: 1.05em;padding: 3px 0 25px 0;vertical-align:top;line-height: 1.5;} #paso4 select#id_title {width:15%;} #paso4 input#id_fono_pais {width:10%;} #paso4 input#id_fono_ciudad {width:10%;} #paso4 input#id_fp_paypal, #paso4 input#id_fp_tarjeta, #paso4 input#id_fp_santander, #paso4 input#id_fp_mercadopago, #paso4 input#id_deposit, #paso4 input#id_full_payment, #paso4 input#id_fp_khipu, #paso4 input#id_fp_stripe, #paso4 input#id_fp_recepcion {width: 16px;margin-right: 3px;position: relative;top: -1px;} #paso4 label#paypal_label, #paso4 label#card_label, #paso4 label#santander_label {text-align:left;width: 80%;} #paso4 #medio-de-pago div.medio-de-pago {width: 46%;display: inline-block;margin-bottom: 20px;} #paso4 #medio-de-pago div.medio-de-pago:nth-child(even) {margin-left: 7%;} #paso4 #medio-de-pago img.logo-medio-de-pago {display:block;margin-top: 6px;margin-left: 22px;zoom: .8;} #paso4 input#id_full_payment, #paso4 input#id_deposit {width:10%;max-width: 23px;} #paso4 label.pago_parcial {text-align:left;width: 80%;font-weight: bold;} #paso4 #aceptar-tyc a.leer-tyc {text-decoration: underline;display: block;font-style: italic;font-weight: bold;margin: 5px 0 15px 0;color: #1673d7;border: none;} #paso4 label.acepta-tyc {width: calc(100% - 30px);font-weight: 600;color: #333;line-height: 16px;float: left;} #paso4 input.acepta-tyc {width: auto;display:inline-block;float: left;position: relative;top: -3px;margin-right: 5px;margin-bottom: 20px;} #paso4 #aceptar-tyc p {margin-bottom: 5px;} #paso4 select#id_country {width:200px;} /*------------------------------------------------------------------------------- Validar cupon descuento - en paso4 ---------------------------------------------------------------------------------*/ #paso4 label#label-cupon {position: relative;} #paso4 input#cupon {width: 160px;margin-right:5px;} #paso4 a#validar_cupon {display: inline-block;width: auto;padding: 5px 20px;background-color: #ddd;color: #444;text-decoration: none;font-size: .85em;text-align: center;position: relative;border-radius: 20px;border:1px solid #ccc;margin-left: 30px;} #paso4 a#validar_cupon:hover { color:#666; background-color:#eee; border:1px solid #ddd;} #paso4 a#validar_cupon:active { color:#fff; background-color:#999;} #paso4 a#solicitar_cupon {display:inline-block;position: absolute;top: -30px;left: 172px;padding: 4px 7px;background-color:#ddd;border-radius: 40px;text-decoration:none;margin:0 5px;font-size: 11px;} #paso4 a#solicitar_cupon span {display:none;} #paso4 div#mensaje_cupon {font-weight:bold;text-transform:uppercase;font-size: 11.5px;margin-bottom: 10px;} /*-----------------------ESTILOS PROMO SANTANDER-------------------------------*/ #digitos_santander p {font-size: 12.5px;letter-spacing: 0.4px;margin-bottom: 10px;} span#mini {display: inline-block; position: relative; top: -15px; left: 64px; font-size: 10px; font-style: italic;} #paso4 #digitos_mastercard p {margin-bottom:10px;} #paso4 input.digito-santander {display:inline-block;width:8px;margin-right:-1px;font-size: 11px;text-align:center;} #paso4 input#digitos-1-al-4, #paso4 input#digitos-13-al-16 {width:40px;} #paso4 input#digitos-5-al-6 {width:25px;} #paso4 input.digito-santander.x {color:#999;} span.x-santander {font-family:'Open Sans', arial, sans-serif; letter-spacing:2px; font-size:24px; line-height:30px;} a#validar_santander {display: inline-block;padding: 7px 30px 5px;background-color: #ddd;color: #777;text-decoration: none;margin:10px 0;font-size: 10.5px;letter-spacing: .7px;font-weight: 700;border: 1px solid #bbb;border-radius: 13px;text-transform: uppercase;} a#validar_santander:hover {background-color:#eee; color:#666;} a#validar_santander:active {background-color: #fff;color:#333;} #mensaje_santander {color: red; font-size: 12px; font-weight: bold;} /*------------------------------------------------------------------------------- Paso5 ---------------------------------------------------------------------------------*/ #paso5 {max-width:550px;} #paso5 h4 { border-bottom:1px solid #999; margin-bottom:10px; } #paso5 table td {background-color: #f5f5f0;} #paso5 table.info-table td {padding: 0;padding-bottom: 6px;} #paso5 table.info-table td.medio-de-pago {padding-top: 20px;border-top: 1px solid #999;} #paso5 ul { padding-left: 0; margin-left: 20px; margin-top: 10px;} #paso5 ul li { list-style-type: disc;} #paso5 td.precio-final {font-weight: bold;} #paso5 a.button {margin: 10px 0 20px 0;padding: 0 50px;} #paso5 button {margin: 10px 0 20px 0;padding: 0 50px;} /*------------------------------------------------------------------------------- Paso6 ---------------------------------------------------------------------------------*/ #paso6 .left { width:45%; float:left; } #paso6 aside { width:calc(55% - 50px); padding-left:50px; float:right; text-align:left; } #paso6 .derecha { width:100%; position:relative; text-align:left; } #paso6 .derecha h3 { font-size:1.2em; margin-bottom:10px;color:#333;font-weight:600; } #paso6 .derecha h4 { border-bottom:1px solid #999; margin-bottom:10px; } #paso6 .derecha #datos-pax table td {background-color:#f5f5f0;padding: 2px 0px;} #paso6 .derecha #datos-agencia table td {background-color:#f5f5f0;padding: 2px 0px;} #paso6 .derecha #datos-solicitud table td {background-color:#f5f5f0;padding: 2px 0px;} #paso6 .atencion {border: 1px dotted #999; padding: 0; background: white; margin-bottom: 20px;} #paso6 .atencion p {margin: 20px;} /*------------------------------------------------------------------------------- Paso Completar Pago ---------------------------------------------------------------------------------*/ #completar_pago table.tabla_login_agencias {max-width: 600px;margin: 20px auto 0 auto;} #completar_pago table.tabla_login_agencias td {background: #fafafa;padding: 6px 0;} #completar_pago h1 {max-width: 600px; margin: 0 auto; border-bottom: 1px solid #555;} #completar_pago #content {min-height:550px;} #completar_pago table.tabla_login_agencias span.error {margin-left:0; display:block;} /*------------------------------------------------------------------------------- Footer ---------------------------------------------------------------------------------*/ div#powered_by {margin: 40px 0 20px 0; text-align: center; display: block; width: 100%; padding-bottom: 30px;} footer { width:100%; background:#444; position:realtive; bottom:0; z-index:90; } #footer { position:relative; overflow:hidden; } #footer .centre { height:100%; } #footer .centre:after { content:""; display:block; clear:both; } #footer .dark { width:1430px; height:500px; margin-right:-1000px; background:#333; position:absolute; top:0; right:0; z-index:1;opacity: 0.3; } #footer:before {content:"";width:100%;height:100%;background:top left;position:absolute;top:0;left:0;opacity: .4;z-index:2;} #footer .contact.right {float:right; text-align:right;} /* 19.2 - Contact Details */ #footer .contact { width:380px; height:100%; padding:50px 0 50px 50px; font:100 13px/22px 'Open Sans', sans-serif; color:#FFF; letter-spacing:.4px; box-sizing:border-box; position:relative; z-index:2; } #footer .contact .phone { font-weight:600; font-size:14px; letter-spacing:1px; } #footer .contact a { color:#FFF;} #footer .contact i { font-size:18px; margin-right:3px; margin-top:20px;} .hover #footer .contact a:hover { border-color:#999; border-width:2px; } /* 19.3 - Footer Links */ #footerlinks { width:100%; height:70px; font:10px/70px 'Open Sans', sans-serif; color:#FFF; letter-spacing:1.5px; text-align:center; text-transform:uppercase; background:#333; clear:both; } #footerlinks strong { margin-right:12px; font-weight:800; } #footerlinks a { padding:10px 12px; color:#FFF; } #footerlinks a:last-child { padding-right:0; } .hover #footerlinks a:hover { color:#999; } /*------------------------------------------------------------------------------- Estilos loading ---------------------------------------------------------------------------------*/ /* Start by setting display:none to make this hidden. Then we position it in relation to the viewport window with position:fixed. Width, height, top and left speak for themselves. Background we set to 80% white with our animation centered, and no-repeating */ .modal {display: none; position: fixed;z-index: 1000;top: 0;left: 0;height: 100%;width: 100%;background: rgba(110, 105, 100, 0.5) url(/images/ajax-loader.gif) 50% 50% no-repeat;box-shadow: #9c9797 2px 2px 12px;} .modal p {position: absolute;top: 53%;width: 600px;margin-left: calc(50% - 320px);padding: 20px;text-align: center;color: white;font-size: 1.4em;background: #898079;} /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ body.loading .modal {overflow: hidden;} /* Anytime the body has the loading class, our modal element will be visible */ body.loading .modal {display: block;} /*modal para procesar pago de stripe*/ .modal-pagostripe {display: none; position: fixed;z-index: 1000;top: 0;left: 0;height: 100%;width: 100%;background: rgba(110, 105, 100, 0.5) url(/images/ajax-loader.gif) 50% 50% no-repeat;box-shadow: #9c9797 2px 2px 12px;} .modal-pagostripe p {position: absolute;top: 53%;width: 600px;margin-left: calc(50% - 320px);padding: 20px;text-align: center;color: white;font-size: 1.4em;background: #898079;} body.loading-pagostripe .modal-pagostripe {overflow: hidden;} body.loading-pagostripe .modal-pagostripe {display: block;} /*------------------------------------------------------------------------------- Paso1 Reservas ---------------------------------------------------------------------------------*/ .paso1-reservas #nav {position: absolute;background: transparent;z-index: 999;} .paso1-reservas #nav .logo {display:none;} .paso1-reservas #reservar {width: 60%; height: 56px; border-color: transparent; color: #fff; font-size: 16px; font-weight: 100; font-family: "Source sans pro", "Open Sans", sans-serif; margin: 4% 10% 4% 20%; _margin: 20px; line-height: 30px; text-transform: uppercase; letter-spacing: 2px;background-color:#888888;} .paso1-reservas input#reservar:hover {background-color: #c9c9c9;} .paso1-reservas input#reservar:active {color: #aeaeae;background-color: #eff0ee;} .paso1-reservas input.calendario {height:30px;min-width:130px;} .paso1-reservas input {font-size: 12px; padding: 8px; border-radius: 5px; border-color: #ccc; border-width: 1px; color: #666; } .paso1-reservas select {height: auto;font-size: 1em !important;position: relative;top: -2px;} .paso1-reservas select.pasajeros {background-color: white; font-size: 12px; color: #666; width: 70px; height: 30px; line-height: 30px;} .paso1-reservas .celda_ancha {width:90px; padding:5px 10px 5px 30px; text-align:right; line-height:14px; letter-spacing:0.5px;} .paso1-reservas .celda_ancha span {white-space: nowrap;} .paso1-reservas span.edades {font-family: 'Open Sans'; font-size: 11px; color:rgba(189,219,236,1.00); letter-spacing:normal;} .paso1-reservas #nav .centre {min-height: 0; background: white;padding:0 50px;height:auto;background: transparent;} .paso1-reservas .reservas {position: relative;margin: 0px auto;width: 100%;padding:0;padding-bottom: 20px;min-width: 400px;} .paso1-reservas .reservas #wowslider-container1 {height: auto;margin: 0;max-height: 750px;overflow: visible;} .paso1-reservas .reservas #wowslider-container1 .container_ws_images {max-height: 750px;height: auto;overflow: hidden;} .paso1-reservas .reservas #wowslider-container1 .container_ws_images .ws_images {top: -100px;top: 0;} .paso1-reservas .logo-reservas {position: absolute;z-index: 999;display: inline-block;top: 95px;left: calc(50% - 550px);padding: 0;text-align: center;background: rgba(47,35,30,0.6);width: 340px;} .paso1-reservas .logo-reservas img {max-width:70%; margin:10px 0;} .paso1-reservas #banner_promocional {z-index: 9999;position: relative;box-shadow: rgba(0, 0, 0, 0.7) 0 1px 3px;} .paso1-reservas .reservas table#caja-compra {left: calc(50% - 550px);top: 215px;background-color:rgba(47,35,30,0.6);border:none;color:rgba(255,255,255,1.00);font-family: "Source sans pro", "Open Sans", sans-serif;font-size:13px;height:350px;margin: 0;width:340px !important;position: absolute;right: 14%;z-index: 200;max-width: 340px !important;overflow: hidden;} .paso1-reservas .reservas table#caja-compra tr:last-child td {padding-bottom:30px;} .paso1-reservas .oculto {display:none;} .paso1-reservas #anuncio-portada{z-index: 9999;width: calc(90% - 550px);max-width: 900px;height: auto;position: absolute;right: 5%;top: 90px;text-align: center;padding: 10px;} .paso1-reservas #titulo {font: 700 3.6em/1 'open sans',arial,sans-serif;color: white;text-transform: uppercase;text-shadow: rgba(0, 0, 0, .7) 0px 0px 11px;margin-bottom: 20px;} .paso1-reservas #bajada {font: 500 2.2em/1.2 'open sans',arial,sans-serif;color: white;text-shadow: rgba(0, 0, 0, .7) 0px 0px 11px;} .paso1-reservas #footer {font: 600 1em/1.2 'open sans',arial,sans-serif !important;margin:20px 10%;color: #444;} .paso1-reservas #footer a {color: #878787;text-decoration:underline;} .paso1-reservas #footer a:hover {color: #9E9E9E;cursor: pointer;} .paso1-reservas #footer a:active {color: #444;} .paso1-reservas #footer:before {position:relative;opacity: 1;z-index:3;} /*------------------------------------------------------------------------------- Login Agencias ---------------------------------------------------------------------------------*/ #login_AG h1 {text-align: center; font-weight:bold;} #login_AG td.error {color:darkorange; font-size: 12.5px; font-weight: bold; text-align: center;} #login_AG table.tabla_login_agencias { width:100%;max-width:400px;margin:10px auto 100px auto;border: 1px solid #ccc;} #login_AG table.tabla_login_agencias td.first-row {padding: 20px 0 10px 0;} #login_AG table.tabla_login_agencias td.last-row {padding-bottom: 30px;} #login_AG table.tabla_login_agencias td {background-color: white; padding: 10px 5px 2px 20px;} #login_AG table.tabla_login_agencias td.celda_informacion {width:60px; font-weight: bold;} #login_AG table.tabla_login_agencias td.celda_input input {width:90%; height:20px; padding-left:10px; max-width:200px;} #login_AG table.tabla_login_agencias button {width:90%; max-width: 214px;} table.tabla_login_agencias span.error {color: #FF9800;font-weight: bold;margin-left: 104px;} #paso0_AG .left {width: calc(100% - 510px);min-width: 265px;padding-left:40px;float:left;text-align:left;} #paso0_AG aside {width: 440px;padding-left: 30px;float:right;margin-top: 0px;} #paso0_AG .derecha, #paso0_AG .derecha.relative { width: 100%; max-width: 500px;position:relative;text-align:left;} #paso0_AG .derecha h4 { border-bottom:1px solid #999; margin-bottom:10px; } #paso0_AG h1 {font-weight: normal;font-size: 1.3em;margin: 0;color: white;line-height: 1.8em;text-align: center;letter-spacing: 0.8px;} #paso0_AG .derecha .button {margin-bottom:20px;} #paso0_AG table.tabla_reservas_agencias { width: 100%; max-width: 400px; margin: 10px auto 100px auto; background-color: white !important; border: 1px solid #ccc;} #paso0_AG table.tabla_reservas_agencias td.titulo {background-color: #c1bbb0; padding: 10px 0 5px 0;} #paso0_AG table.tabla_reservas_agencias td.first-row {padding-top: 20px;} #paso0_AG table.tabla_reservas_agencias td.last-row {padding-bottom: 30px;} #paso0_AG table.tabla_reservas_agencias td {background-color: white; padding: 10px 5px 2px 20px;} #paso0_AG table.tabla_reservas_agencias td.celda_informacion {width:100px; font-weight: bold;} #paso0_AG table.tabla_reservas_agencias td.celda_input input {width:90%; height:20px; padding-left:10px; max-width:200px;} #paso0_AG table.tabla_reservas_agencias button {width:90%; max-width: 214px;} #paso0_AG .tabla_paso0 td {padding-right: 0;} /*------------------------------------------------------------------------------- Transitions ---------------------------------------------------------------------------------*/ a, input, button, i, #container, #nav, #nav nav li a:after, #featured .nav, .list .item .button, #galleryslider .nav, .list a span, #featured .nav, aside #specials.list .details:before, #slideshow .nav, .feature, .feature .thumb, #rooms.list.grid .item .details .title span, #paso1.list.grid .item .details .title span, #faqs li, #faqs li h2:after {transition:.2s ease;} .button span, button span, #nav .book span, #language, #rooms.list.grid .item .details, #rooms.list.grid .item .details p, #rooms.list.grid .item a, #paso1.list.grid .item .details, #paso1.list.grid .item .details p, #paso1.list.grid .item a, .pinit, #faqs li:before, #faqs li:after, #faqs li h2 { transition:.4s ease !important; } #rooms.list.grid .item .container img, #paso1.list.grid .item .container img, aside #specials.list .item img, .list .item img, .special .img img, article img, .img_programa img { transition:1.2s ease; } /*------------------------------------------------------------------------------- Responsive ---------------------------------------------------------------------------------*/ @media only screen and (max-height:800px) { .derecha.fixed { position:fixed; top:50px; } .derecha.absolute { position:absolute; top:auto; bottom:70px; } } /*----- ANCHO MAX 1500px ------*/ @media only screen and (max-width:1500px) { #header { background-size:auto; } #galleryslider, #galleryslider .caroufredsel_wrapper, #galleryslider img { height:350px !important; } #instagram img { width:20%; } #instagram img:nth-child(6) { display:none; } .footertestimonial i { display:none; } } /*----- ANCHO MAX 1500px ------*/ @media only screen and (max-width:1300px) { #check { width:auto; padding:0 50px; } #check .centre { max-width:none; } .home_ibe #check { width:calc(100% - 100px); padding:0 50px; z-index:50; } #gallerycontainer { padding:40px !important; } #footer .news { margin-top:-45px; } #footer .news .social { width:100%; text-align:center; position:absolute; right:0; top:77px; } #footer .news .social a { margin:0 4px 5px 0; display:inline-block; float:none; } } /*----- ANCHO MAX 1200px ------*/ @media only screen and (max-width:1200px) { aside #specials.list .nav { margin-right:100px; } #paso1 .details .party {margin: 20px 10px;font-size: 1em;} .paso1-reservas #anuncio-portada {top: 60px;width: calc(85% - 340px);} .paso1-reservas .logo-reservas {left:50px;top: 60px;} .paso1-reservas .reservas table#caja-compra {left:50px;top: 155px;} .paso1-reservas .reservas #wowslider-container1 .container_ws_images .ws_images {top: 0px;} } /*----- ANCHO MAX 1100px ------*/ @media only screen and (max-width:1100px) { #paso1 .ficha_programa .details {width:200px;} } /*----- ANCHO MAX 1024px ------*/ @media only screen and (max-width: 1024px) { .paso1-reservas .reservas {margin: 0;width: 100%;padding: 0;} .paso1-reservas #anuncio-portada {width: calc(100% - 480px);} #caja_compra { display:block; position: absolute; top: 20%; margin: 0 calc(50% - 150px); min-width:240px;} #nav nav { width:100%; right:auto; left:0; } #nav nav ul { width:100%; position:absolute; top:60px; left:0; display:none; } #nav nav li { width:100%; float:none; } #nav nav li a { width:100%; height:50px; padding:0; font-weight:800; line-height:50px; text-align:center; color:#FFF; display:block; background:#555; border-bottom:1px solid #424242; } #nav nav li ul li a i { display:none; } #nav nav li:last-child a { border:none;} #nav nav li a:after { display:none; } #nav nav li ul { display:block !important; position:relative; top:auto; border-radius:0; } #nav nav li ul li a, #nav nav li ul li ul li.active a, #nav nav li ul li ul li:last-of-type a { padding:0 !important; background:#484848 !important; border-bottom:1px solid #383838 !important; } #nav nav li ul li ul { left:0; } #language { right:290px; } #featured .nav { opacity:1; bottom:105px; } #check .field select { display:block; } #check .field.select i { display:none; } .list .item .details p { display:none; } #rooms.list.grid .item a { padding:20px !important; } #rooms.list.grid .item img { cursor:default; } #rooms.list.grid .item .details { height:auto !important; position:relative; } #rooms.list.grid .item .details p { display:none; } #rooms.list.grid .item .details .button { margin-left:0; position:relative; bottom:auto !important; left:0; opacity:1; } #rooms.list.grid .item .details .title { font-size:22px; line-height:25px; } #rooms.list.grid .item .details .title span { margin-top:2px; font-size:14px; opacity:1; } #rooms.list.grid .item .details { width:100%; position:relative; background:#EEE; } #rooms.list.grid .item .details:before { opacity:1; background:top left; opacity:.035; } #galleryslider .nav, #slideshow .nav { opacity:1; bottom:50px; } #gallery span { display:none; } #slideshow .nav { opacity:1; bottom:50px; } #footer .news .title span { display:none; } #footer .news .title { width:70px; } #paso1 .ficha_programa {margin-top:0;margin-bottom: 50px;} #paso1 .titulo_programa {width: calc(400% + 10px);} #paso1 .img_programa {width: 50%;height: 290px;overflow: hidden;border: none;} #paso1 .img_programa img {width: 100%;height: auto;left: -40px;} #paso1 .desc_programa {height: 290px;background: rgba(193, 187, 176, .2);width: 50%;padding-right: 5px;} #paso1 .ficha_programa .opciones {width: 100%;background: white;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;border-top: none;clear: both;} #paso1 .ficha_programa .details {width: calc(100% - 2px);border: 1px solid #ddd;border-bottom: none;border-top-style: dashed;height: auto;} #paso1 .ficha_programa .details:first-child {border-top:none;} #paso1 .ficha_programa .details .titulo_programa {display:none;} #paso1 .details .precio {font-size: 1.45em;} #paso1 .details .party {margin: 10px auto;} #paso1 .details .dates {margin:20px 10px;} #content .button {margin: 10px 0 40px 0;} .centre {padding:0 20px;} .centre .logo a img {width: auto;} #nav .logo, #header ul {left: 20px;} #nav .book { right:20px; } #pull { right:200px; } #language { right:249px; } #header .h1 { padding:57px 0 65px; } #header h1 { font-size:30px; line-height:35px; } #header h1 .tagline { padding:10px 30px; } #header ul li { font-size:11px;} #featured .item .details { margin-top:-57px; } #featured .item .title { margin-bottom:15px; } #featured .item .title span { font-size:30px; } #featured .nav, #slideshow .nav { right:0; bottom:20px !important; } #check { margin:0; padding:0 !important; } #check .centre { border-radius:0; } #check button { font-size:11px; border-radius:0; } .home_ibe #check { width:100%; z-index: 50;} main .centre {padding: 40px 20px;} main p { margin:0 0 20px; } main hr { margin-bottom:20px; } main p.credit { margin:0 0 28px; } .login_agencia {padding: 10px 35px 0 35px;} #rooms.list { margin:0 0 30px; } #rooms.list.grid { margin:0 -15px 0; } #content { margin:0 0 -30px; } #galleryslider, #galleryslider .caroufredsel_wrapper, #galleryslider img { height:300px !important; } #galleryslider .nav { bottom:20px !important; right:20px; } #galleryslider { padding-bottom:110px; } #galleryslider .button { bottom:30px; } #video { margin-bottom:30px; } #extras { padding:30px 0; } .list { margin-bottom:30px; } .list .nav { right:20px; } #slideshow { margin-bottom:30px; } #content #slideshow { margin:5px 0 28px; } .tags { margin:30px 0 10px; } aside {padding-left: 10px;} aside #block { margin-bottom:30px; } aside .blocktitle span { font-size:30px; letter-spacing:0; } } /*----- ANCHO MAX 980px ------*/ @media only screen and (max-width:980px) { .paso1-reservas #titulo {font-size: 3em;} .paso1-reservas #bajada {font-size: 2em;} #paso4 a#validar_cupon {margin:10px calc(100% - 120px) 0 0;} #paso4 a#solicitar_cupon {left: 120px;top: -27px;} #paso4 div#mensaje_cupon {padding-left: 0;} } /*----- ANCHO MAX 900px ------*/ @media only screen and (max-width:900px) { .ui-datepicker { width:700px !important; margin-top:-180px !important; margin-left:-350px !important; } .ui-datepicker td span, .ui-datepicker td a { padding:10px 5px; } .list .item a { padding:20px; } .hotel h2 {font-size: 1.6em;} .hotel .left { width: calc(100% - 500px);} .derecha, .derecha.relative {width: 480px;} #paso2 table.alt_acomodacion td.xs .button { zoom: .75;} #footer .centre { padding:0 20px; } #footer .dark { width:1330px; } #footer .contact { width:100%; height:auto; padding:30px 0 30px; text-align:center; float:none; } } /*----- ANCHO MAX 860px ------*/ @media only screen and (max-width:860px) { .logo img {width: 80%; height:auto;} #paso1.list.grid .item { width:100%; } #paso1 .ficha_programa {min-width: 310px;} .img_programa img {width: 100%;height:auto; position: relative;display: block;} #paso1 .desc_programa h3 {margin: 20px 10%;margin-bottom: 0;max-width:80%;line-height: 20px;letter-spacing: 0;} #paso2 table.caluga-paso2 {width:100%;} .hotel .left { width:100%; } aside {width: 100%;padding:0;margin-top: 20px;} .derecha, .derecha.relative { width:100%; padding:0; } section.hotel {margin-bottom: 50px;min-width: 300px;} .hotel h2 {font-size: 1.8em;width: calc(99% + 2px);} .hotel .popup-gallery {text-align:left;} .hotel .popup-gallery a {width: 24.25%;display: inline-block;} .hotel .popup-gallery a:first-child img, .hotel .popup-gallery a img {width: 100%;height: auto;} .hotel .popup-gallery a:nth-child(even) {display: inline-block;} .hotel .popup-gallery a:last-child {display: inline-block;} .hotel .desktop_fulltext {text-align:justify;} #paso2 table.alt_acomodacion td.tarifas-multiples.precio {width:120px;} #paso3 td.accordion2 table td.ancillary_total {width: 180px;text-align: right;} #paso3 #content {width: 94%;/* max-width: 636px; */margin: 20px 0;display:block;} #paso3 .mobile_extract, #paso3 .mobile_extract.all_text {margin: 10px 0;display:block;} #paso3 #slideshow {max-height:240px; overflow:hidden; margin-bottom:20px;} #paso4 .left { width: 80%; margin: 0 10%; } #paso4 #caluga_resumen table {width: 100%; min-width: 320px;} #paso4 aside {width: 80%; padding:0; margin:0 10%; } #paso4 .derecha, #paso4 .derecha.relative { width:100%; padding:0; min-width: 300px; margin:0; } #paso4 label {width:16%; font-size:1em;} #paso4 input {width:79%; font-size:1em;} #paso6 .left { width: 80%; margin: 0 10%; } #paso6 #caluga_resumen table {width: 100%; min-width: 320px;} #paso6 aside {width: 80%; padding:0; margin:0 10%; } #paso6 .derecha, #paso6 .derecha.relative { width:100%; padding:0; min-width: 300px; margin:0; } #paso0_AG .left {width: 100%;clear:both;padding: 0;} #paso0_AG #content {width: 94%;/* max-width: 636px; */margin: 20px 0;display:block;} #paso0_AG .mobile_extract, #paso0_AG .mobile_extract.all_text {margin: 10px 0;display:block;} #paso0_AG #slideshow {max-height:240px; overflow:hidden; margin-bottom:20px;} #paso0_AG aside {width:100%;} #paso0_AG .derecha {margin:0 auto;} #paso0_AG table.tabla_reservas_agencias {margin-bottom:20px;max-width: 500px;} } /*----- ANCHO MAX 800px ------*/ @media only screen and (max-width:800px) { .paso1-reservas #anuncio-portada {text-align:right;} .paso1-reservas #titulo {font-size: 2em;} .paso1-reservas #bajada {font-size: 1.5em;} .paso1-reservas #bajada span {margin-right:0; width:150px;} } /*----- ANCHO MAX 770px ------*/ @media only screen and (max-width:770px) { #paso1 .img_programa img {height:100%;width:auto;} } /*----- ANCHO MAX 700px ------*/ @media only screen and (max-width:700px) { #header ul li {font-size: .7em; margin: 0 5px;} .centre .logo a img {height: auto;} .paso1-reservas .reservas table#caja-compra {height:350px;margin:10px;left: calc(50% - 180px);} .paso1-reservas .logo-reservas {margin:10px;left: calc(50% - 180px);top: 60px;} .paso1-reservas #anuncio-portada{display:none;} #paso2 table.caluga-paso2 th h4 {font-size:11px;} #paso2 table.caluga-paso2 td {padding: 2px 5px 13px 20px;font-size:11px;} #paso2 table.caluga-paso2 th {padding: 10px 20px 0px 20px;} #paso3 .left { width:100%; } #paso3 aside {width: 100%; padding:0;} #paso3 .derecha, #paso3 .derecha.relative { width:100%; padding:0; } #paso3 td.total {width: 150px;} #paso3 td.accordion2 table td.ancillary_total {width: 150px;} .ui-datepicker { width:100% !important; width:calc(100% - 40px) !important; margin-left:20px !important; margin-right:20px !important; left:0 !important; } #paso3 td.accordion2 table td.ancillary_total span.precio_unitario {display:none;} #paso3 #ancillary span.precio_unitario {display: inline-block;top: 5px;width: 100%;right: initial;left: 3px;line-height: 1;text-align: left;} #pop, .promopopup { display:none !important; } #paso0_AG .left { width:100%; } #paso0_AG aside {width: 100%; padding:0;} #paso0_AG .derecha, #paso0_AG .derecha.relative { width:100%; padding:0; } #completar_pago table {min-width:360px;} #completar_pago #content {min-height:400px;} } /*----- ANCHO MAX 630px ------*/ @media only screen and (max-width:630px) { .paso1-reservas .reservas table#caja-compra {left:calc(50% - 170px);height:330px;} .paso1-reservas .logo-reservas {left:calc(50% - 170px);} #paso1 .desc_programa {width: 100%; height: auto; padding-bottom: 10px;} #paso1 .titulo_programa {width: calc(100% + 2px);} #paso1 .img_programa {width: 100%;} #paso1 .img_programa img {width: 100%;height: auto;left: 0;} #content .button {margin-bottom: 25px;} #paso2 table.caluga-paso2 th { padding: 10px 10px 0px 10px;} #paso2 table.caluga-paso2 td {padding-left: 10px;} #paso2 .popup-gallery a:first-child img {width: 100%;} #paso2 .popup-gallery a img {width: 24.25%;} #paso2 table.alt_acomodacion td.tarifas-multiples.precio {width:95px;} #featured .item .details { margin-top:-25px !important; } #featured .item img { width:618px; min-width:100%; } #featured .item .title { display:none !important; } #rooms.list.grid .item { width:100%; } #footer .dark { display:none; } } /*----- ANCHO MAX 569px ------*/ @media only screen and (max-width:569px) { #paso1 .titulo_programa h2 {text-align:center;} #paso2 table.caluga-paso2 {display: none;} #paso2 table.caluga-paso2-mobile {display: table;} #paso2 table.alt_acomodacion {display:none;} #paso2 table.alt_acomodacion_mobile {display:table;margin:0;text-align: center;font-size: 1em;border-spacing:0;border-collapse: separate;} #paso3 #slideshow, #paso3 #content, #paso3 .mobile_extract, #paso3 .mobile_extract.all_text {margin:0;margin-top: 10px;} #paso3 .desktop_fulltext {display: none;} #paso3 .mobile_extract.all_text {margin-bottom:30px;} #paso3 #ancillary h4 {width:calc(100% - 20px);} #paso4 .left {width: 100%; padding:0; margin:0; } #paso4 aside {width: 100%; padding:0; margin:0; } #paso4 .derecha, #paso4 .derecha.relative { width:100%; padding:0; min-width: 320px; margin:0; } #paso4 label {display:block;text-align: left; width:90%; margin:3px 0} #paso4 input {display:block;text-align: left; width:95%;} #paso4 input#id_fono_pais, #paso4 input#id_fono_ciudad, #paso4 input#id_fono_numero {display:inline-block;} #paso4 #medio-de-pago img.logo-medio-de-pago {margin-top:15px; margin-left:0;} #paso4 label#label-cupon {bottom:0;} #paso6 aside {width: 100%; padding:0; margin:0; } #paso6 .derecha, #paso6 .derecha.relative { width:80%; padding:0; min-width: 320px; margin:auto; } } /*----- ANCHO MAX 500px ------*/ @media only screen and (max-width:500px) { #header ul li {display:none;} #header ul li.encendido {display:inline-block; margin-left:0;} #header ul li.encendido.bullet {display:none;} #nav .book { display:none; } #nav nav li.mobile { display:block; } #language { width:34px; text-indent:-9999px; right:65px; } #header h1 .tagline { padding:10px; } main, .footertestimonial p { line-height:21px; } main p { margin:0 0 20px; } main p.last { margin:0 0 10px; } .special .details h2 { font-size:25px; line-height:30px; } .special .details .terms { line-height:17px; } #slideshow .item span { display:none; } .feature { padding-top:30px; } .feature .thumb { display:none; } #container.post .left .button { width:100%; margin:10px 0; padding:0; float:none; } main blockquote { display:none; } #caja_compra select { width:58% !important; } #caja_compra button { font-size:12px; } #contact select { width:100% !important; margin:0 0 7px; } #contact button { font-size:12px; } .recent, .recent a .title { line-height:18px; } #footer .news .title { display:none; } #footer .news form input { width:68%; } #footer .news form button { width:32%; } .ui-datepicker { width:100% !important; margin-left:0 !important; margin-right:0 !important; } .paso1-reservas #nav .centre {padding: 0 calc(50% - 180px);} #paso1 .img_programa {height:220px;} .hotel .left h4 {font-size:1.2em;} .hotel .mobile_extract {display: block;} .hotel .left .mobile_extract p.last {font-size: 1.1em;line-height: normal;margin: 5px 0 20px 0;} .hotel .desktop_fulltext {display: none;} div#sello-cyber {top: -25px;zoom: .5;} } /*----- ANCHO MAX 450px ------*/ @media only screen and (max-width:450px) { #paso2 .popup-gallery a img {width: 24%;} #paso3 #ancillary h4 span.icon{margin: 3% 3px 0 0;} .derecha .button {width: calc(100% - 100px);} #paso6 .left, #paso6 .derecha {width: 100%; margin: 0 auto;} } /*----- ANCHO MAX 410px ------*/ @media only screen and (max-width:410px) { .paso1-reservas #nav .centre {padding: 0 10px;} .paso1-reservas .reservas table#caja-compra, .paso1-reservas .logo-reservas {left:10px;} #paso2 table.alt_acomodacion_mobile td.tarifas-multiples.precio label {width: auto; height: 3em;} } /*----- ANCHO MAX 380px ------*/ @media only screen and (max-width:380px) { main .centre { padding:10px;} #login_AG {padding-top:30px;} #nav .logo, #header ul {left:10px;} .login_agencia {padding: 10px;} .home_ibe #nav { margin-top: 5%;} #paso1 .img_programa {height:190px;} #paso3 #caluga_resumen h3 {font-size:14px;} } /*----- ANCHO MAX 340px ------*/ @media only screen and (max-width:340px) { #caja_compra {zoom:.95;} #paso4 #caluga_resumen table {zoom:.9;} #paso4 .derecha { zoom:.9; margin:auto; } #paso6 #caluga_resumen table {zoom:.9;} #paso6 .derecha { zoom:.9; margin:auto; } }