@charset "UTF-8"; /*************/ /**CÓDIGO THEME.CSS CON VARIABLE COLOR DEL CMS**/ /*************/ $color1: #000000; $color2: #000000; $color3: #000000; $color4: #000000; $color5: #000000; $color6: #000000; $color7: #000000; $color8: #000000; $color9: #000000; .btn { background-color: $color5; color: white; border-radius: 0; font-size: 1.2em; line-height: 1.2em; width: 100%; padding: 10px 12px; margin-bottom: 10px; text-transform:uppercase; } @media (min-width:1400px){ .container{ width: 1380px; } } /* MAIN FONT */ .main a {color:$color2;} a:hover, .main a:hover{color:$color5;} /* BOOKING CONFIRMATION - EXTRAS */ /////////CONDITION.THEME/////////// body, html { min-width:0 !important; background-color: $color1; } /* Al pasar por encima de un menu desplegable, enseñar el contenido */ .header_expansible_link:hover > .submenu_wrap { display:block; } #CookielawBanner { z-index: 99999999 !important; } /* CALENDAR*/ body.calendar{ .calendar-day { background-color: #ededed; padding: 2px 6px; border: 3px solid white; line-height: 1.4em; color: white; } .calendar-day.status-unavailable { background-color: #707070; color: white; } .calendar-day.status-offer { background-color: #41e0dc; color: white; } .calendar-day.status-latest { background-color: #000000; color: white; } .note.note-normal span.icon { background-color: #ededed; } .note.note-unavailable span.icon { background-color: #707070; } .note.note-latest span.icon { background-color: #000000; } .note.note-offer span.icon { background-color: #41e0dc !important; } } /* ---------------------- Generic_plugins variable colors ---------------------- */ .children .more_about_link { font-size:31px; line-height: 31px; color:$color1; } /** Primasud 04/12 site 65**/ /**************************************************************************/ @font-face { font-family: gillsans; src: url("https://static.roomonline.es/tipografias/GillSans.woff2"), url("https://static.roomonline.es/tipografias/GillSans.ttf"); font-weight: normal; } @font-face { font-family: "gillsans-bold"; src: url("https://static.roomonline.es/tipografias/GillSans-Bold.woff2"), url("https://static.roomonline.es/tipografias/GillSans-Bold.ttf"); font-weight: bold; } $textshadow: 3px 3px 2px rgba(0, 0, 0, 0.3); $color_imgs: #FFF; $color_1: #41e0dc; //Turquesa $color_1o: darken($color_1, 15%); //Turquesa oscuro $color_1oo: #0B5351; //Turquesa más oscuro $color_2: #4c4c4c; //Gris $color_2cal: rgba(76, 76, 76, 0.1); $color_2t: rgba(76, 76, 76, 0.8); $color_2hover: lighten($color_2, 15%); //Provisional $color_3: #676767; $color_3t: rgba(103, 103, 103, 0.7); $fuenteComun: "gillsans", sans-serif; $fuenteComunBold: "gillsans-bold", sans-serif; b, strong { font-family: $fuenteComun; } a:hover, a:focus { color: $color_1; text-decoration: none; } .sweet-alert .sa-confirm-button-container button { background: $color_2 !important; &:hover, &:focus, &:active { background: $color_1o !important; box-shadow: none; } } .cmslanguageselector_plugin{ .lang.active a{ font-weight: 400; } } #CookielawBanner { a:last-of-type { color: $color_1; &:hover, &:focus { text-decoration: underline; } } a:first-of-type { background-color: $color_2; border-color: $color_2; border-radius: 15px; margin-left: 10px; } } .ui-state-error { background: transparent; color: #555; } .calendar.internal{ .content-container.container { width: 98% !important; } } body.calendar{ h3 { color: $color2; font-size: initial; } th { text-align: center; color: $color3; font-size: 12px; } div.month { line-height: 32px !important; margin-bottom: 0; // background: $color_1oo; background: $color_1; border-left: solid 3px #FFF; border-right: solid 3px #FFF; } .weekdays{ th { background-color: $color_2; border: solid 3px #FFF; padding: 10px; } } .calendar-day { color: $color_2; } } .btn.search-this-dates { margin-bottom: 0; border-radius: 10px; padding-left: 15px; padding-right: 15px; background: $color_2; transition: background 0.2s; &:hover, &:focus { background: $color_1o; } &:active { box-shadow: none; } } body, html { min-width: 0 !important; background-color: #fff; line-height: 1em; font-family: $fuenteComun; } .mod_children { padding-top: 90px; padding-bottom: 50px; >.row { margin: 0; >.col-xs-12 { padding: 0; } } .row.children.design-generic { margin-left: -15px; margin-right: -15px; .child.col-xs-12 { padding-left: 15px; padding-right: 15px; transition: opacity 0.3s; &:hover { opacity: 0.6; } a { display: none; } .name { color: $color_1; text-align: center; font-size: 18px; margin-bottom: 10px; } .aux_field_2 { line-height: 200%; overflow: hidden; color: $color_2; font-size: 16px; height: 40px; } } img { width: 100%; margin-bottom: 30px; } } h2 { margin-bottom: 30px; } } .mod_tituloDesc { padding-top: 60px; h1 { margin-bottom: 40px; } p { margin-top: 30px; line-height: 200%; font-size: 18px; } &.mod_padBottom { padding-bottom: 70px; } .plugin_link { padding-left: 50px; display: block; padding-top: 5px; a { color: $color_2; text-decoration: underline; &:hover, &:focus { color: $color_1; } } } } .mod_tituloDesc.mod_simple h1 { text-align: left; } .popup-gallery { margin-bottom: 0; .img-gallery { transition: opacity 0.2s; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } &:hover .img-gallery { opacity: 0.6; } } /*HOME*/ .home{ .migas{ display: none; } h2 { margin-top: 50px; } } .calendar .inline-hotel-form { .btn { margin-top: 3px; background: $color_2; border-radius: 13px; font-weight: normal; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } &.offer-calendar-form .btn.book { top: -11px; position: relative; margin: 0; } } .inline-hotel-form{ .fa.icon-calendar-from, .fa.icon-calendar-to { font-size: 18px; padding-top: 2px; padding-left: 2px; color: $color_2; } } .ex-container label { color: $color_2; text-transform: capitalize; height: 1.4em; } .ui-datepicker { .ui-datepicker-prev, .ui-datepicker-next { top: 2px; border-radius: 4px !important; &:after { font-family: "FontAwesome"; color: #FFF; text-align: center; display: block; line-height: 28px; font-size: 20px; position: relative; top: -1px; } &.ui-state-hover { background: darken($color_1o, 15%); border-color: darken($color_1o, 15%); // top: 1px; } span { display: none; } } .ui-datepicker-prev:after { content: "\f104"; } .ui-datepicker-next:after { content: "\f105"; } th { background-color: $color_2; color: #fff; } } .allocations-container th { color: $color_2 ; font-weight: 700; font-size: 0.8em; } .ui-state-default { height: 35px; text-align: center; padding: 9px; border: 0; background: none; } div #children_536017 { margin-bottom: 50px; margin-top: -34px; } .children .item.design-h .right_part { padding: 0 15px !important; } .restauracio.col-xs-6 { margin-bottom: 30px; } .container.informacio { .col-xs-12 { padding-left: 15px; padding-right: 15px; } h2 { font-weight: bold; margin-bottom: 30px; line-height: 150%; } p { line-height: 250%; font-size: 18px; } } body, html { min-width: 0 !important; background-color: #fff; } .plugin_picture img { width: 50%; margin-bottom: 20px; } .header-wrap { margin-bottom: 10px; width: 100%; z-index: 101; top: 0; } .btn:hover, .btn:focus { color: #FFF; } p { font-family: $fuenteComun; font-size: 16px; color: $color_2; } h1 { font-family: $fuenteComun; font-size: 50px; text-align: center; color: $color_1; font-weight: bold; } .body { font-family: $fuenteComun; } h1.tslider { font-family: $fuenteComun; color: #fff; font-size: 70px; text-align: left; } h1.tslider2 { font-family: $fuenteComun; color: #fff; font-size: 70px; text-transform: lowercase; text-align: left; } h2 { font-family: $fuenteComun; font-size: 35px; text-align: center; color: $color_1; font-weight: bold; } .offer_list h2 { text-align: left; } h3 { font-family: $fuenteComun; font-size: 18px; font-weight: bold; color: $color_1; } a { font-size: 16px; font-family: $fuenteComun; } a, .main a { color: #ffffff; } .fragment.Name h1 { text-transform: uppercase; } /*---------CABECERA-----*/ .telfcont { text-align: center; img { width: 10%; margin-right: 20px; } h2 { text-align: center; margin-top: 0; } h3 { color: #000000; } p { text-align: center; } a { color: $color_2; &:hover, &:focus { color: $color_1; } } ul { padding-left: 0; list-style: none; margin-bottom: 0; } } .bg14_header .bg14_logo { padding: 5px 0; max-width: 80%; transition: opacity 0.2s; &:hover, &:focus { opacity: 0.6; } } header.bg14_header.desktop.hotel .top .cabecera_principal { height: 130px; position: fixed; width: 100vw; z-index: 101; top: 0; background: #fff; > .row { margin: 0 auto; @media (min-width: 992px) { width: 940px; } @media (min-width: 1200px) { width: 1140px; } @media (min-width: 1400px) { width: 1380px; } } } .cabecera_mobile { position: fixed; width: 100%; z-index: 101; top: 0; background: #fff; } .sliderPrincipal { padding-top: 60px; @media(min-width: 992px) { padding-top: 130px; } .generic_slide_plugin{ margin-bottom: -30px; } } header.bg14_header.desktop.hotel .top { .menu-corporativo { a { padding-right: 15px; color: $color_2; font-family: $fuenteComun; font-size: 16px; } a, button#dropdownLanguage { &:hover, &:focus { color: $color_1; span, span.caret:before { color: $color_1; } } &:active { box-shadow: none; } } .cmslanguageselector_plugin { button#dropdownLanguage { width: 62px; } .dropdown-menu { width: auto; min-width: 70px; .lang:not(.active) a:hover { background: #FFF; color: $color_1 !important; } } } .plugin_link{ a:after{ color: #fff; margin-left: 15px; content: "|"; font-size: 34px; font-weight: normal; border-right: solid 1px $color_2; position: relative; top: 3px; } } } } header.bg14_header.desktop.hotel .top .menu-mobile .dropdown-menu { width: auto; min-width: 70px; li { padding-left: 0; a { padding-left: 0; padding-right: 0; background: transparent; } &:not(.active) a { &:hover, &:focus { color: $color_1 !important; } } } } .menu-hotel .navbar-nav li div a { text-transform: uppercase; color: #fff; font-family: $fuenteComun; font-size: 16px; padding-right: 15px; } .hotelm { text-align: right; } header.bg14_header.desktop.hotel .linea { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; font-weight: bold; font-size: 16px; padding-right: 25px; } header.bg14_header.desktop.hotel .desktop.col-xs-12 .linea:after { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; font-weight: bold; font-size: 16px; } .bg14_header.desktop.col-xs-12 .linea.top a:after { text-transform: uppercase; font-size: 14px; color: $color_2; position: absolute; top: -2px; right: -12px; } button#dropdownLanguage { &.active { box-shadow: none; } span { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; font-weight: lighter; font-size: 16px; margin-top: 0; display: flex; top: 0; } } .bg14_header .top .cmslanguageselector_plugin #dropdownLanguage .caret:before { content: "\f107"; font-family: "FontAwesome"; position: absolute; width: 10px; height: 10px; color: $color_2; display: inline-block; right: 6px; top: 6px; font-size: 25px; font-weight: bold; } .generic-logo-hotel { padding: 0; z-index: 1; img { padding: 0 !important; max-height: none !important; } } .menu-corporativo { padding: 11px 0 0; margin-top: 20px; } header.bg14_header.desktop.hotel{ .top{ .menu-corporativo-sec { margin-top: 20px; display: flex; justify-content: flex-end; a { padding-left: 0; padding-right: 0; margin-right: 0; color: $color_2; &:hover{ color: $color_1 } } } } } /*****Cabecera y logo********/ .fragment.Header-Menu{ display: inline-block; margin-top: 7px; .header_expansible_link{ &:after { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; margin-left: 20px; margin-right: 20px; content: "|"; position: relative; bottom: 2px; } } } /*****teléfono********/ .menu-corporativo .popup_plugin.market_telephone :before { content: "\f095"; font-family: FontAwesome; margin-right: 13px; color: $color_2; font-size: 24px; position: relative; top: 3px; left: 2px; } .popup_plugin.market_telephone p.mobile1 { &:hover { color: $color_1; &:before { color: $color_1; } } &:after { color: #fff; margin-left: 15px; content: "|"; font-size: 34px; font-weight: normal; border-right: solid 1px $color_2; position: relative; top: 3px; } } a.popup_plugin.market_telephone { font-family: FontAwesome; display: inline-block; color: $color_2; font-weight: lighter; } /*****contacto, reserva********/ header.bg14_header.desktop.hotel{ .top{ a.contactpopup_plugin { color: $color_2; font-weight: lighter; margin-right: 0; text-transform: capitalize; padding-top: 50px; &:after{ color: #fff; margin-left: 10px; content: "|"; font-size: 28px; font-weight: 500; border-right: solid 1px $color_2; position: relative; top: 3px; } &:nth-last-child(4) { padding-left: 40px; margin-left: 6px; background: url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fprimasud.roomonline.es%2Fimages%2Fmail.png) no-repeat 0 43px; padding-bottom: 10px; &:hover, &:focus { background-image: url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fprimasud.roomonline.es%2Fimages%2Fmail-a.png); } } } a.mybooking_plugin { color: $color_2; margin-right: 0; text-transform: uppercase; &:after{ color: #fff; margin-left: 15px; content: "|"; font-size: 28px; font-weight: lighter; border-right: solid 1px $color_2; position: relative; top: 3px; } } } } .mypopup { align-items: center; overflow: inherit !important; height: auto !important; border-radius: 5px; padding: 15px; font-family: $fuenteComun; .btn.btn-primary{ margin-top: 10px; margin-bottom: 0; } .error{ display: none; } .loading{ display: none; } button.mfp-close{ margin: -15px; color: white; background: black; border-radius: 100px; font-size: 30px; width: 30px; height: 30px; border: solid 2px; opacity: inherit; line-height: 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6); &:hover{ background-color: $color_1o; } } input.form-control{ width: 250px !important; } .pop-contact-form-content{ label { font-size: 14px; margin-top: 15px; } .btn { background-color: $color_2; border-radius: 13px; margin-top: 20px; transition: background 0.2s; &:hover, &:focus { background: $color_1o; } &:active { box-shadow: none; } } } #booking_canceled { display: flex; align-items: center; p { margin-bottom: 0; } } .pop-contact-form-content { input[type=checkbox] { width: 14px; height: 15px !important; margin-top: 0; vertical-align: middle; &+span { font-size: 12px; } &+span p { font-size: 12px; } } form p.requiered-fields { font-size: 1em; margin-top: 15px; } .terms_and_conditions { margin-top: 10px; margin-bottom: 5px; } input { border-radius: 3px; height: 28px; width: 100%; border: 1px solid rgb(169, 169, 169); } } } header.bg14_header.desktop.hotel{ .linea:after { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; font-size: 16px; content: "|"; margin-left: 7px; } } .inline-hotel-form.offer-calendar-form{ span.guests{ font-size: 9px; } } .browser-chrome{ .ui-widget { font-size: 1.111em; } } .ui-widget-header { border: 1px solid $color_1oo; background: $color_2 none repeat-x scroll 50% 50%; } .room th { padding-top: 20px; } .submenu_wrap.as_grid .container { width: auto !important; padding: 10px 5px 10px 15px; } .submenu_wrap .fa { border: 2px solid #999; float: right; padding: 5px; font-size: 8px; color: #999; cursor: pointer; } .inline-hotel-form .toggle-allocations .caret { margin-top: 8px; position: absolute; right: 5px; display: none; } /*****Formulari********/ .browser-firefox .pop-contact-form-content .h3+p { margin-bottom: 0; padding-top: 20px; } /*--------------Ventajas---------------*/ .fragment.Footer-ExclusiveBenefits { .lista_ventajas{ margin-top: 50px; .col { width: 25%; float: left; text-align: center; .imagen { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; width: 40%; } } .texto { font-family: $fuenteComun; font-size: 14px; padding-bottom: 30px; margin-top: 15px; line-height: 120%; } } } } /*--------------ofertes--------------*/ .mod_childrenHome { padding-bottom: 90px; .fragment.FeaturedOffers .row.design-generic { height: 350px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; .components_capa { height: 170px; background: $color_2t; position: absolute; bottom: 0; width: 100%; padding-top: 20px; * { color: #FFF; text-align: center; } .name { font-size: 18px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; } .short_description { padding-left: 55px; padding-right: 55px; height: 60px; margin-bottom: 10px; } .price_from { width: 80%; text-align: right; font-size: 16px; } .currency { font-size: 16px; display: inline-block; } .offer-data { position: absolute; margin-right: 20px; padding-bottom: 15px; bottom: 0; right: 0; .child-item-link { text-decoration: underline; &:hover { color: $color_1; } } } } } } .home .generic_slide_plugin .item { .wrapper { width: 800px; max-width: 100%; margin: 0 auto; .text_slide { p { font-size: 48px; color: $color_imgs; text-shadow: $textshadow; text-align: right; &:first-child { margin-bottom: 30px; } } } } } /*--------------footer---------------*/ .main-footer{ background: $color_3; padding-bottom: 0; top: 0; p, span a { line-height: 200%; margin-bottom: 0; } h3 { font-size: 18px; margin-top: 20px; font-weight: bold; margin-bottom: 20px; } .buttonbar_plugin li a { .fa { font-size: 26px; color: $color_2; margin-top: 13px; transition: color 0.2s; } &:hover, &:focus { background: $color_1o !important; transition: background 0.3s; .fa { color: #FFF; } } } .container.pie-enlaces { border-top: solid 3px #fff; padding-top: 30px; padding-bottom: 20px; margin-top: 30px; p { color: #FFF; } a.contactpopup_plugin { background: none; font-size: 16px; background-size: 0; margin-right: 0; line-height: 200%; } .lineaseaparacion { width: auto; height: 2px; display: block; background-color: #fff; margin-bottom: 15px; } } .buttonbar_plugin{ padding-left: 0; margin-bottom: 100px; li a { opacity: 1 ; } } .container.sliderb .row { margin-top: 40px; } } .pie-enlaces2{ .plugin_link{ display: block; } } .informacio { margin-top: 100px; text-align: center; } /*--------------destino/hotel--------------*/ .fragment.Hotel-Weather { p { color: #000; line-height: 190% !important; margin-bottom: 0; } border: solid $color_2 3px; border-radius: 30px; padding: 15px 15px; margin-left: 50px; width: 70%; margin-top: 45px; > .row { display: flex; align-items: center; .col-right p { text-align: left; font-size: 14px; margin-top: 0; } } } .fragment.Breadcrumbs { display: none; margin-top: 30px; margin-left: 50px; ul li:last-child a { color: $color_1 !important; } ul li a { color: $color_2; font-size: 14px; &:hover, &:focus { color: $color_1; } } } .top .submenu_wrap.as_list { margin-top: 10px; min-width: 200px; .container { position: absolute; min-width: 150px; margin-top: 4px; min-height: 100px; box-shadow: 0 4px 6px 0 rgba(50, 50, 50, 0.5); background: #FFF; padding: 15px 10px 10px; li { margin-right: 0; } } } /*--------------Mallorca Ofertas--------------*/ .design-j { .child { padding: 60px 0; } .child:nth-last-child(2) { border-bottom: none; } .image { width: 95%; } .right_part { width: 50%; h2 { color: $color_1; font-size: 38px; text-align: left; margin-bottom: 20px; text-transform: capitalize; } h3 { color: $color_2; margin-top: 20px; text-transform: unset; } } .left_part { width: 50%; } .btn { background: $color_2; font-size: 18px; color: #FFF; padding: 14.5px 30px 11.5px; width: auto; border-radius: 15px; margin-top: 50px; text-decoration: none; transition: background 0.2s; &:hover, &:focus { background: $color_1o; } &:active { box-shadow: none; } } } /*--------------Hotel-------------*/ .page-hotel, .page-destination { .AuxField1 h3 { margin-top: 35px; padding-left: 50px; } .fragment.Files{ .enlace_descarga { border-top: 0; margin: 0 auto; max-width: 100%; padding-left: 50px; &:hover, &:focus { color: $color_1; } .icon { left: calc(38% - 92px); } .filename { margin-left: 10px; } .pull-left { line-height: 120%; float: none !important; vertical-align: middle; } .filename { margin-left: 0; margin-right: 0; display: inline-block; width: calc(100% - 55px); line-height: 120%; } } } .fragment.GalleryCollage{ margin-top: 20px; margin-bottom: 50px; .item>.row { height: 600px; .collage-img { transition: opacity 0.2s; &:hover { opacity: 0.6; } } } .carousel-control { display: none; } .imgs{ .icon_thumbnail { position: absolute; z-index: 1; right: 10px; top: 10px; width: 73px; height: 73px; background: url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fprimasud.roomonline.es%2Fimages%2Ficono_camara.png) no-repeat center center; opacity: 0.8; cursor: pointer; &:hover { opacity: 0.5; } } } .row.no-margin.second { padding-top: 15px; padding-left: 15px; .col-xs-6.no-padding.col.imgs:nth-child(2) { padding-left: 15px !important; } } .row.second { padding-left: 15px; } } .fragment.Hotel-Address{ text-align: left; .localUbicacion { margin-left: 10%; .localUbicacion-icono, .localUbicacion-direccion { display: table-cell; vertical-align: middle; padding-top: 25px; padding-bottom: 25px; } .localUbicacion-direccion { color: $color_2; padding-left: 35px; font-size: 21px; line-height: 130%; } } } .fragment.Hotel-Phone { font-weight: bold; font-size: 21px; color: $color_2; font-family: $fuenteComun; text-align: center; margin-top: 60px; &:before { content: "\f095"; font-family: FontAwesome; margin-right: 13px; color: $color_2; font-size: 40px; position: relative; top: 8px; } } .opinio { padding-top: 40px; padding-bottom: 50px; h3 { margin-bottom: 25px; } .fragment.Hotel-OpinionsBody { text-align: center; width: 100%; justify-content: center; display: flex; } } } /*---------SERVICIOS-----*/ .main-lista2 { p { line-height: 170% !important; } ul{ columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style: none; padding-left: 0; li { line-height: 150%; background: url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fprimasud.roomonline.es%2Fimages%2Fcheck.png) no-repeat 0 -3px; padding-left: 35px; color: $color_2; font-size: 16px; margin-bottom: 15px; } } .fragment { margin-left: 20px; } } .mod_galeriaTexto { padding-top: 80px; } .bg14_header.hotel .top_menu>li>div.header_expansible_link { text-transform: uppercase; color: $color_2; font-family: $fuenteComun; font-size: 16px; display: block; @media (min-width: 992px) { margin-top: -10px; padding-bottom: 10px; } &:hover, &:focus { color: $color_1; } } /*---------HABITACIONS-----*/ .page-rooms{ .main-lista2 { .fragment { margin-top: 20px; } ul { margin-top: 30px; } .child { padding: 60px 0; border-bottom: solid 2px $color_2; .right_part { h2 { color: $color_1; text-align: left; text-transform: capitalize; } p { line-height: 150%; } a { display: block; pointer-events: none; } } } .child:nth-last-child(2) { border-bottom: none; } .pull-right.action{ display: none; } } } .page-rooms .item { .components_group__content { padding: 0 1rem; } @media (min-width: 768px) { display: flex; .components_group { &__image { padding-right: 1rem; flex-basis: 50%; } &__content { padding-left: 0 0 0 1rem; flex-basis: 50%; } } } .name { color: $color_1; text-transform: capitalize; font-size: 1.8rem; font-weight: bold; margin-bottom: 1rem; line-height: 110%; @media (max-width: 767px) { margin-top: 3rem; font-size: 1.5rem; } } } .container.full-width-important { width: 100% !important; } .modal-backdrop.in { z-index: 1; } .pop-contact-form-content { max-width: 350px !important; margin: -10px 16px; } /*---------afegit menu en linea-----*/ .menu-secundario.col-xs-7 { text-align: right; padding-left: 0; padding-right: 15px; } /*--------------suscripcion---------------*/ .suscripcio { p { font-size: 18px; font-family: $fuenteComun; font-weight: bold; color: #fff; margin-top: 15px; } .terms { input { margin: 0 3px 0 0; vertical-align: middle; } .terms_text { vertical-align: middle; color: #FFF; font-size: 14px; a { line-height: 150%; } } } } .subscription_plugin .newsletter-subscription .input-group input { height: 50px; color: #000000; } .newsletter-subscription .input-group-addon .btn { border: 0; background-color: #58585a; color: #fff; border-bottom-right-radius: 8px; border-top-right-radius: 8px; border-width: 10px 0; height: 50px; padding: 5px 20px 3px 20px; font-size: 16px; text-transform: capitalize; transition: background 0.2s; &:hover, &:focus { background: $color_1o; } &:active { box-shadow: none; } } .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } /*--------------menu hotel---------------*/ .bg14_header{ background-color: #fff; background-position: left bottom; box-shadow: none; .bg14_menu { margin-top: 0; } .top{ a{ margin-right: 0; } } .top_menu>li{ padding: 0; } .bg14_logo { position: absolute; } } /*--------------menu desti, enmig---------------*/ .fragment.Header-HotelsAndDestinations{ .header_expansible_link:last-child { margin-right: 0; top: -1px; } } /*--------------menu mobile---------------*/ .mod_ofertes .offer-data { position: relative; margin-right: 0; padding-bottom: 0; bottom: 0; right: 0; } /*--------------menu desplegable mobile---------------*/ .authenticate_wrapper { display: none; } .booking_form .form-control{ border-radius: 0; } /*--------------Pasos reserva---------------*/ /*--------------Paso 3---------------*/ .open>.dropdown-menu { display: block; right: 0; width: 300px; text-align: center; } .ex-container { .col-sm-8 { display: flex; width: 100%; justify-content: center; } } body, html { min-width: 0 !important; background-color: #fff; line-height: 1em; font-family: $fuenteComun; } .calendar .inline-hotel-form .btn { margin-top: 3px; background: $color_2; border-radius: 13px; font-weight: normal; } body.calendar.internal{ .allocations-container { position: absolute !important; bottom: 40px; background-color: #f1f1f2; box-shadow: 3px 6px 10px 0 rgba(157, 157, 156, 0.6); border-radius: 0 0 10px 10px; .ex-container{ th { color: $color_2 !important; } } } div#ui-datepicker-div { z-index: 2 !important; } } .ui-state-default { height: 35px; text-align: center; padding: 9px; border: 0; background: none; } /*--------------Reserva Resum---------------*/ /*--------------menu mobile fix---------------*/ .mobmenu{ padding: 0 25px; a { padding: 0; color: #000; } .top_menu.nav.navbar-nav { margin: 0; } .fragment.Header-Menu{ .top_menu { >li { padding: 5px; margin-top: 25px; float: none; } .submenu_wrap.as_list li:not(:last-child) { margin-bottom: 15px; } } } .header_expansible_link a:after { display: none; } .plugin_link { display: block; margin: 37px 10px 0; text-transform: uppercase; } > span:first-child{ margin-top: 0; } } .menuppal.is_active { transform: translate3d(0, 0, 0); padding: 12%; overflow: auto; } .mobile_menu_button { position: absolute; transform: translate3d(0, 0, 0); transition: transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98); z-index: 1002; cursor: pointer; user-select: none } .menuppal { background-color: rgba(255, 255, 255, 0.95); bottom: 0; height: 100%; left: 0; overflow-y: scroll; position: fixed; top: 0; transform: translate3d(0, -100%, 0); transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s; width: 100%; z-index: 400; } /*Arreglo slider*/ body:not(.is_editing) .top.headerfixed+* { padding-top: 124px; } /*****menu hamburguesa*****/ .container.menu-mobile.menuppal{ .right.col-xs-12 .cmslanguageselector_plugin { float: right; margin-top: -10px; padding-bottom: 10px; &:hover, &:focus { #dropdownLanguage { box-shadow: none; .label, .caret:before { color: $color_1; } } } button { background-color: transparent !important; } } } .container.menu-mobile.menuppal.is_active { top: 60px; .plugin_link.link_miReserva { display: block; text-align: right; line-height: 1em; a { padding-right: 10px; color: #000; text-transform: uppercase; &:after { content: "|"; font-size: 16px; position: relative; bottom: 1px; margin-left: 20px; } &:hover, &:focus { color: $color_1; } } } } /*****datepicker****/ .ui-datepicker{ border-bottom-right-radius: 0; border-bottom-left-radius: 0 !important; .ui-state-default { color: $color_2; } .ui-state-highlight, .ui-state-hover, .ui-state-active { background: $color_1; border-color: $color_1; } .ui-datepicker-header, .ui-datepicker-calendar thead th { background: $color_1oo; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui-datepicker-calendar thead { border-bottom: solid 8px #F2F2F2; } } /****select idioma****/ .open>.dropdown-menu { margin-left: 0; } .dropdown-menu>li.lang>a { font-weight: bold; text-transform: uppercase; text-align: center; } /*****calendario búsqueda*****/ .inline-hotel-form .allocations-container { .allocations-table>[class*="col"] { width: auto; margin-left: 45%; } td { width: 90px; } label { font-size: 14px; text-align: center; } select { margin-left: auto; margin-right: auto; } #id_no_hab { margin-left: 5px; } } .calendar.internal{ .row.top-form, .ex-row, .footer-form{ background-color: #fff; } } .footer-form{ .inline-hotel-form{ input.hasDatepicker { width: 95%; display: block; border-radius: 3px !important; line-height: 1.8em !important; height: 1.8em !important; } input { height: 1.8em; border-radius: 3px; } } } .calendar.internal{ .inline-hotel-form{ .toggle-allocations:hover{ color: #000 !important; } .ex-container .col-sm-4 { float: right !important; } button.btn.book { margin-top: 1px; border-radius: 10px; } .toggle-allocations { background: rgba(0, 0, 0, 0) url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fdc-79%2Fimages%2Fdesplegable_abajo22.png) no-repeat 96% center; background-size: 5%; background-color: #fff; -webkit-appearance: none; border-radius: 3px !important; width: 60% !important; margin-left: -70px; margin-top: 20px !important; } } } .inline-hotel-form.offer-calendar-form #allocations select { border-radius: 0; width: auto; color: #000; } body.calendar.internal{ .allocations-container { bottom: 110px; background-color: #fff; } select.select_adults, select.select_children { width: 90%; } } /*****iconos proceso reserva*****/ /************Galería*****************/ .mod_galeria { padding-top: 60px; padding-bottom: 50px; h2 { margin-bottom: 40px; } .col-xs-12 { p { text-align: center; font-weight: bold; font-size: 18px; height: 55px; padding-top: 10px; overflow: hidden; } &:nth-child(3n+1) { padding-right: 25px; } &:nth-child(3n+2) { padding-left: 15px; padding-right: 15px; } &:nth-child(3n+3) { padding-left: 25px; } } } /****************Lugares de interés***********************/ .mod_comoLlegar { padding-top: 40px; .col-xs-12 { padding-left: 15px; padding-right: 15px; } h2 { margin-bottom: 30px; } .selector { width: 600px; max-width: 100%; margin-left: auto; margin-right: auto; select { float: left; width: 49%; margin-right: 1%; height: 50px; &:hover, &:focus { opacity: 0.6; } } a { width: 49%; margin-left: 1%; height: 50px; padding-top: 15px; background: $color_2; border: none; border-radius: 5px; } } .fragment.Element-HowToGetThere .map { height: 400px; } } /**************************************************************************/ /**RESPONSIVE MAX**/ /**************************************************************************/ @media (max-width: 1399px) { .inline-hotel-form .allocations-container { .allocations-table>[class*="col"] { width: auto; margin-left: 42%; } } .bg14_header.hotel .menu-corporativo-sec .top_menu>li { >div.header_expansible_link { font-size: 14px; &:after { margin-left: 10px; margin-right: 10px; } a { font-size: 14px; } } } .fragment.Hotel-Weather { width: 75%; } } @media (max-width: 992px) { .mod_tituloDesc .col-xs-12 { padding-left: 15px; padding-right: 15px; } .mod_childrenHome { padding: 0; .row { margin: 0; } [class*="col-"] { padding-left: 0; padding-right: 0; } } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic { height: 350px; margin-bottom: 20px; .components_capa { height: 170px; } } .mod_children { .row.children.design-generic { img { width: 50%; float: left; padding-right: 10px; } img+div { width: 50%; float: left; padding-left: 10px; h3 { padding-right: 35px; } p { display: none; } } .child.col-xs-12 { .components { overflow: hidden; display: flex; align-items: center; .name { text-align: left; padding-left: 20px; padding-right: 35px; } &:after { content: "\f054"; font-family: "FontAwesome"; font-size: 40px; color: $color_3; position: absolute; right: 15px; top: calc(50% - 15px); } } .aux_field_2 { display: none; } } } } } h3 { font-size: 16px; } .bg14_header .top { padding: 0 0; } .bg14_header.hotel .second_stripe { display: none; } body:not(.is_editing) .header-wrap.headerfixed.big+* { padding-top: 57px !important; } body:not(.is_editing) .header-wrap.headerfixed+* { padding-top: 59px !important; } a h2 { font-size: 24px !important; } .bg14_header .top .picturebanner-link img { height: auto; width: auto; max-width: 100%; margin-top: 0; } .bg14_header .top .col-xs-2 { padding: 0; } .bg14_header{ .top{ .mobile_menu_button { color: $color_2; line-height: 60px; background: $color_2; height: 60px; display: inline-block; padding-left: 0; margin-right: 0; width: 100%; a { width: 100%; display: block; position: relative; color: transparent !important; } } } } .plugin_link.mobile_menu_button a { &:before { content: "\f0c9"; font-family: "FontAwesome"; font-size: 30px; color: #FFFFFF; position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 0; } &:hover:before, &:focus:before { color: $color_1; } } .mobiltelf { padding: 0; .popup_plugin.market_telephone { margin-left: 0; background-color: #fff; color: $color_2; height: 60px; line-height: 60px; width: 50%; float: left; margin-right: 0; text-align: center; background-image: url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fprimasud.roomonline.es%2Fimages%2Ftel-m.png); background-repeat: no-repeat; background-size: 40px 40px; background-position: right 12px center; &:hover { opacity: 0.6; } } } .bg14_header{ .top{ .container.full-width-important.hidden-md.hidden-lg.hidden-xl{ .booking-header-phone-button { margin-top: 0; margin-bottom: 0; height: 60px; line-height: 33px; width: 50%; text-align: center; padding-left: 10px; padding-right: 10px; border-style: none; background: $color_2; &:hover, &:focus { i { color: $color_1; } } span { display: none; } i { display: inline-block; font-size: 26px; margin-top: 7px; } } } } } @media (max-width: 992px) { .bg14_header .top .col-xs-6 { padding-left: 0; .picturebanner-link { padding: 0; display: block; background: white; margin: 0; height: 60px; &:hover, &:focus { opacity: 0.6; } } } } @media (max-width: 991px) { .mod_galeria { .col-xs-12 { p { text-align: center; font-weight: bold; font-size: 16px; height: 65px; } &:nth-child(2n+1) { padding-left: 15px; padding-right: 10px; } &:nth-child(2n+2) { padding-left: 10px; padding-right: 15px; } } } .fragment.Header-Menu .header_expansible_link:after { content: none; } h1 { font-size: 32px; } h2 { font-size: 24px; } .home h2 { margin-top: 20px; } .container.informacio h2 { margin-bottom: 15px; } .suscripcio, .pie-enlaces2 { &:first-of-type { padding-right: 20px; } &:last-of-type { padding-left: 20px; } } .fragment.Hotel-Weather { margin-left: 0; margin-right: 0; width: 100%; .col-right { padding-left: 5px; padding-right: 0; } } } @media (max-width: 991px) { .form_popup { margin-top: 50px; margin-bottom: 40px; } } @media (max-width: 768px) { .mod_ofertes .col-xs-12 { padding-left: 0; padding-right: 0; } .design-j{ .left_part { width: 100%; padding-left: 0; padding-right: 0; } .child { border-bottom: none; padding: 40px 0; } .right_part { width: 100%; padding-left: 15px; padding-right: 15px; h2 { font-size: 18px; text-align: center; margin-top: 30px; } } .btn { font-size: 15px; color: #FFF; padding: 15px 20px; width: auto; border-radius: 15px; margin-left: 0 !important; } .image { width: 100%; } } .col-xs-offset-6 { width: 100%; margin-left: 0; margin-right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ex-container .pull-right { float: none !important; margin-top: 40px; } .text_slide p { text-align: center !important; line-height: 2em; margin: 0; } .main-lista2 .LongDescription { width: 87%; } .weather { padding-top: 20px; padding-left: 5px; padding-right: 5px; } .fragment.Hotel-Weather { width: 230px; margin: 0 auto; padding: 15px 5px; } .page-hotel, .page-destination { .fragment.AuxField1, .fragment.Files { width: 300px; max-width: 100%; margin-left: auto; margin-right: auto; .enlace_descarga, h3 { padding-left: 15px; padding-right: 15px; } } .fragment.AuxField1 { text-align: center; padding-left: 0; +.plugin_link { text-align: center; padding-left: 15px; padding-right: 15px; } } } .cont_galeria .col-xs-12 { padding-left: 0; padding-right: 0; } .premi.col-xs-4 { width: 100%; } .adres.col-xs-6 { width: 100%; } .main-lista{ .fragment.LongDescription{ h2 { text-align: center; font-size: 18px; font-weight: bold; } ul li { font-size: 14px; } } } .opinio h2 { text-align: center; font-size: 18px; } .fragment.Hotel-Address{ width: 100%; display: flex; justify-content: center; } .localUbicacion-direccion { padding-left: 0; font-size: 16px; } .fragment.Hotel-Phone { font-size: 16px; margin-top: 25px; } .localUbicacion-icono img { max-width: 70%; } .mod_children { .row.children.design-generic .child.col-xs-12 { .components:after { right: 20px; font-size: 30px; } } } .restauracio { width: 100%; padding-left: 0; padding-right: 0; } .mod_tituloDesc p { line-height: 150%; font-size: 16px; } .mod_children .main-lista2 { h3 { text-align: center; margin-top: -23px; } ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; list-style: none; padding-left: 0; padding-bottom: 55px; } .fragment { margin-left: 20px; } } .habitaciones{ .main-lista2 { padding-left: 0; padding-right: 0; .fragment { margin-left: 0; .design-h{ .left_part { width: 100%; padding-left: 0; padding-right: 0; .popup-gallery { margin-bottom: 40px; } } .right_part { width: 100%; p { line-height: 200%; } ul li { font-size: 14px; background-position: 0; margin-bottom: 5px; padding-top: 5px; padding-bottom: 3px; } } } } } } .design-h .right_part h2 { text-align: center; } .room_list{ h1 { text-align: center; } .fragment.Hotel-Name { text-align: center; } h2 { text-align: center; } } .ex-container .col-sm-8 { flex-direction: column; .ex-container .col-sm-6 { margin-top: 0; } } .col-xs-6.text-right { text-align: center; } .ex-container .pull-right { float: none !important; margin-top: 40px; } .allocations-container tr.room th { padding-right: 0 !important; } .inline-hotel-form.offer-calendar-form label { font-size: 0.6em; } .inline-hotel-form.offer-calendar-form #allocations select { height: 25px; border-radius: 0; font-size: 12px; width: auto; } .main-footer { .Palma, .pie-enlaces2:first-of-type { padding-left: 15px; } .suscripcio, .pie-enlaces2:last-of-type { padding-right: 15px; } } } /*--------------Paso 3 mobile---------------*/ /*--------------calendario mobile---------------*/ @media (max-width: 767px) { .generic_slide_plugin .carousel .carousel-inner .container .row .central-text-column .wrapper { padding-left: 50px; padding-right: 50px; } .mod_galeria { padding-top: 40px; h2 { margin-bottom: 20px; } .col-xs-12 { padding-bottom: 20px; p { font-size: 16px; height: auto; } &:nth-child(2n+1) { padding-left: 15px; padding-right: 15px; } &:nth-child(2n+2) { padding-left: 15px; padding-right: 15px; } } } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic .components_capa .short_description { height: 60px; } .informacio { height: 501px; } .children.design-g .child .item img.image { height: 300px; margin-top: 23px; padding-top: 23px; } .children .item.design-g .overlay { width: 100%; } .Palma { text-align: center; } .children.design-g .child { width: 100%; } .suscripcio, .pie-enlaces2 { text-align: center; &:first-of-type, &:last-of-type { padding-left: 15px; padding-right: 15px; } } .ex-container .pull-right button { height: 39px !important; width: 91% !important; margin: 14px !important; } .inline-hotel-form .toggle-allocations { margin-left: 13px !important; margin-top: 21px !important; } .inline-hotel-form .fa.icon-calendar-from { padding-top: 4px; padding-left: 0; } .inline-hotel-form label { font-size: 0.7em; } .ex-container label { height: 21px !important; margin-top: 2px; margin-bottom: -2px; } .child col-xs-4 { width: auto; } .informacio .lista_ventajas .col { width: 50% !important; height: 200px; text-align: center; } .lineaseaparacion { width: 50%; height: 2px; display: block; background-color: #fff; margin: 0 auto; } footer { p, a { margin-top: 10px; text-align: center; } } .footer { width: auto; } } @media (max-width: 599px) { .col-xs-12 .col-md-3 { width: 208px; } } @media (max-width: 375px) { .cms_plugin.cms_plugin-525317 h2 { font-size: 27px !important; margin-bottom: -3px; } .body-content .carousel-inner .central-text-column .wrapper .text_slide p span { font-size: 38px !important; } } @media (max-width:370px) { .subscription_plugin .newsletter-subscription .input-group input { width: 168px !important; } } @media (max-width:360px) { .subscription_plugin .newsletter-subscription .input-group input { width: 100% !important; } .newsletter-subscription .input-group-addon .btn { padding: 7px 6px 3px 6px !important; } } @media (max-width: 350px) { .inline-hotel-form .toggle-allocations { margin-top: 9px !important; } } /**************************************************************************/ /**RESPONSIVE MIN**/ /**************************************************************************/ @media (max-width: 320px) and (min-width: 426px) { a .toggle-allocations .btn .btn-default { margin-top: 22px !important; } .calendar .inline-hotel-form .btn { margin-top: 10px !important; } } @media (min-width: 350px) and (max-width: 425px) { .calendar.internal.tablet .inline-hotel-form .toggle-allocations { margin-top: 22px !important; margin-left: -15px !important; } .row.allocations-table .allocations { margin-left: 15px !important; } } @media (min-width: 681px) and (max-width: 783px) { .inline-hotel-form:not(.offer-calendar-form) .col-sm-8 .toggle-allocations { margin-left: 20px !important; } .container .inline-hotel-form.offer-calendar-form { margin-left: 25px; } .container .inline-hotel-form:not(.offer-calendar-form) .pull-right .btn.book { margin-right: 44px !important; } } /***FOOTER RESPONSIVE***/ @media (min-width: 767px) { .suscripcio .form-group { width: 90%; } } @media (max-width: 768px) and (min-width: 310px) { .suscripcio .form-group { width: 100%; } .suscripcio p { text-align: center; } } @media (max-width: 1024px) and (min-width: 767px) { .suscripcio .form-group { width: 100%; margin: auto !important; } } @media (min-width: 767px) and (max-width: 1023px) { .newsletter-subscription .input-group-addon .btn { padding: 7px 6px 3px 6px !important; } } @media (min-width: 768px) { .container.habitaciones .main-lista2 { ul { -moz-columns: 1 !important; -webkit-columns: 1 !important; columns: 1 !important; } } } @media (max-width: 768px) and (min-width: 426px) { .container.habitaciones .main-lista2 ul { -moz-columns: 2 !important; -webkit-columns: 2 !important; columns: 2 !important; } } @media (min-width: 800px) { .col-sm-9.central-text-column span { font-size: 150%; } } @media (min-width: 1024px) and (max-width: 2560px) { .opinio h2 { font-size: 25px !important; } } /**WEATHER**/ @media (min-width: 769px) and (max-width: 1440px) { .weather.col-xs-3 { margin-top: 148px; margin-left: 0; } } @media (min-width: 1441px) { .weather.col-xs-3 { margin-top: 110px; margin-left: 0; } } @media (min-width:1600px) and (-ms-high-contrast: active), (min-width:1600px) and (-ms-high-contrast: none) { body.destination-31 .body-content .container-top-slider { position: absolute; left: 12%; } } @media (max-width:1600px) and (-ms-high-contrast: active), (max-width:1600px) and (-ms-high-contrast: none) { body.destination-31 .body-content .container-top-slider { position: absolute; left: 5%; } } @media (max-width: 992px) { body:not(.is_editing) .top.headerfixed+* { padding-top: 60px; } } @media (max-width: 768px) and (min-width: 610px) { .container.menu-mobile.menuppal.is_active .right.col-xs-12 { margin-top: -45px; } } /****texto slider****/ @media (min-width: 800px) { .col-sm-9.central-text-column span { line-height: 1em; } } @media (max-width: 1023px) { .col-sm-9.central-text-column { width: auto; } } @media (max-width: 1439px) { header.bg14_header.desktop.hotel .top a { font-size: 15px; } .menu-corporativo-sec { margin-top: 40px; } } @media (max-width: 320px) { .modal-content { width: 100%; } #ui-datepicker-div { left: 10px !important; } .col-xs-12.col-md-6.kids_ages_container { margin-left: 20px; } .col-xs-10.kids_ages { width: 50%; margin-left: 26px; } .inline-hotel-form.offer-calendar-form .col-sm-8 .toggle-allocations.btn.btn-default { margin: 0 !important; width: 100% !important; margin-top: 15px !important; margin-left: -20px !important; } body.calendar .calendar-day>div { padding: 2px 1.5px; } .footer-form .inline-hotel-form input.hasDatepicker { font-size: 12px; } .inline-hotel-form.offer-calendar-form .ex-container .col-xs-2 { font-size: 12px; } .inline-hotel-form.offer-calendar-form{ .fa.fa-calendar.icon-calendar-to, .fa.fa-calendar.icon-calendar-from{ font-size: 14px; } } } @media (max-width: 425px) { .modal-content { width: 100%; padding: 10px; } .col-xs-10.kids_ages { width: 50%; margin-left: 26px; } .col-xs-12.col-md-6.kids_ages_container { margin-left: 26px; } .calendar.internal .inline-hotel-form .toggle-allocations { width: 90% !important; margin-left: -15px !important; } .calendar.internal .inline-hotel-form.offer-calendar-form { .ex-container { .col-sm-8 .toggle-allocations { margin-left: -20px !important; width: 105% !important; } .col-sm-4 .btn.book { margin-right: 0 !important; } } } .main-lista .fragment.LongDescription ul { font-size: 16px; columns: 1 !important; -moz-columns: 1 !important; -webkit-columns: 1 !important; list-style: none; padding-left: 10px !important; } } @media (max-width: 768px) and (min-width: 425px) { .calendar.internal .inline-hotel-form .toggle-allocations { width: 90% !important; margin-left: -44px !important; } .calendar.internal .inline-hotel-form.offer-calendar-form .ex-container { .col-sm-8 { width: 60%; .toggle-allocations { margin-left: -20px !important; } } .col-sm-4 { width: 40%; .pull-right { margin: 0; .btn.book { top: -22px; } } } } } @media (max-width: 1024px) { .calendar.internal{ .inline-hotel-form{ .toggle-allocations { margin-left: -46px; width: 70%; } button.btn.book { margin-right: -55px; width: auto; } } } .inline-hotel-form.offer-calendar-form{ .col-sm-5 .ex-container { margin-left: 20px; } .col-sm-7 .ex-container { margin-left: -75px; } } .page-offers{ .container.mod_ofertes{ .fragment.Children{ .design-j{ .right_part{ a.btn { margin-left: -55px; } } } } } } .home .generic_slide_plugin .item .wrapper .text_slide { p:first-child, p:last-child { font-size: 38px; text-align: center; } } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic { height: 300px; .components_capa { height: 150px; .short_description { padding-left: 15px; padding-right: 15px; height: 40px; p { font-size: 14px; } } } } } @media (max-width: 2560px) { .calendar .inline-hotel-form { margin-left: 0 !important; } .calendar.internal{ .inline-hotel-form{ button.btn.book { margin-right: 10px; width: auto; } .toggle-allocations { margin-left: -70px; width: 60%; } } .inline-hotel-form.offer-calendar-form{ .col-sm-7 .ex-container { margin-left: 0; } } } } .browser-iexplorer.calendar.internal .offer-calendar-form .col-sm-5 .col-sm-8 {/*ROOM-1377*/ display: block; .toggle-allocations { margin-left: 0; margin-top: 0 !important; } } @media (max-width: 784px) { .home .generic_slide_plugin .item { .wrapper { .text_slide { p:first-child, p:last-child { margin-bottom: 0; font-size: 28px; line-height: 1em; } } .left.carousel-control span, .right.carousel-control span { top: 38%; } } } .carousel.slide .carousel-control span { top: 35%; } } /**** botón reserva****/ @media (max-width: 480px) { .mod_children .row.children.design-generic { img { padding-right: 5px; } img+div { padding-left: 5px; h3 { font-size: 14px; } } } .mod_comoLlegar { .selector { select, a { width: 100%; margin-left: 0; margin-right: 0; } select { margin-bottom: 10px; } } } } @media (max-height: 600px) { .browser-firefox .menuppal.is_active { height: 85%; box-shadow: 0 2px 5px grey; } } @media (max-width: 400px) { .calendar.internal .inline-hotel-form.offer-calendar-form { .ex-container { .col-sm-8 .toggle-allocations { width: 108% !important; } } } } @media (max-width: 300px) { .calendar.internal .inline-hotel-form.offer-calendar-form { .ex-container { .col-sm-8 .toggle-allocations { width: 110% !important; } } } } @media (max-width: 1200px) and (min-width: 992px) { header.bg14_header.desktop.hotel{ .top{ .menu-corporativo{ a{ padding-right: 0; } } } } } /****** Site Data ******/ /*Provisional, evitar que placeholders se superpongan*/ #cms_toolbar .cms_structure .cms_dragarea { position: static; } /*********404**********/ .page-element-f{ .container{ margin-top: 5%; h2{ font-size: 55px; margin-bottom: 20px; @media (min-width: 1199px){ width: 80%; } @media (max-width: 514px){ font-size: 20px; } } p{ margin: 10% 0; font-size: 18px; @media (min-width: 1199px){ width: 80%; } @media (max-width: 514px){ font-size: 14px; } span{ font-weight: bold; font-size: 35px; margin-bottom: 20px; line-height: 1em; @media (max-width: 514px){ font-size: 18px; } } } .col-xs-9, .col-xs-3{ @media (max-width: 992px){ width: 100%; text-align: center; } } .ShortDescription{ .imagen{ img{ margin: 0 20% 0 15%; @media (min-width: 993px) and (max-width: 1500px){ //float: right; //margin: 0; } @media (max-width: 992px){ margin: 10%; width: 50%; } } } } .LongDescription{ text-align: center; @media (min-width: 992px) and (max-width: 1199px){ margin-left: 20%; } a{ background: #4C4C4C; color: #fff; border-radius: 5px; padding: 5px 40px; &:hover{ background: #77777A; } } } } } .Booking-Form { .mod_booking-box { background: #f1f1f2; box-shadow: 3px 3px 10px 0 rgba(157, 157, 156, 0.6); border-radius: 10px; height: 102px; &.reserva-fijo{ @media (min-width: 992px) { position: fixed; top: 130px; z-index: 3; width: 960px; } @media (min-width: 1200px){ width: 1160px; } @media (min-width: 1400px){ width: 1370px; } } form.main-container { max-width: 100%; height: 102px; } .main-data, .more-data { i:before { color: $color2; font-size: 16px; } } .cont_button{ height: 37px; button{ background-color: $color_2; color: $color_imgs; height: 37px; &:hover{ background-color: $color_1o; } } } .one_hotel .main-data { .input-like{ label { width: 100%; &:after { font-size: 43px; position: absolute; right: 15px; top: 35px; cursor: pointer; } } input { padding-left: 6px; font-size: 15px; color: $color_2; font-family: $fuenteComun; cursor: pointer; } i:before { content: none; } } .input-like, .cont_input, .allocations { -webkit-appearance: none; border-radius: 13px; height: 37px; width: 90%; border: 1px solid $color_2; margin: 0 auto; } .input-like, .cont_input { label { font-size: 14px; color: $color_2; font-weight: 600; font-family: $fuenteComun; } } .cont_input input { font-size: 14px; text-align: left; padding-left: 6px; } .input-like.where { border-radius: 5px; label { &:after { content: "\f107"; font-family: "FontAwesome"; color: $color_2; } } } .input-like.when { border-radius: 13px; label { &:after { content: "\f073"; font-family: "FontAwesome"; font-size: 18px; color: $color_2; } } } .input-like.allocations { label { &:after { content: "\f107"; font-family: "FontAwesome"; color: $color_2; } } } .select-like { margin-top: calc(38px - 3px); left: 62px; .cont_list { .ages-list .age .pseudo-select li.visible:hover{ background: #B3B3B3; color: $color_imgs; } } &.pick-pax { margin-left: 27%; @media (max-width: 1399px) { margin-left: 24%; } @media (max-width: 1199px) { margin-left: 20%; } } .cont_list .ages-list .age .pseudo-select { background-color: $color_imgs; @media (min-width: 992px) { padding: 2px 0; } } } } .container-sub.cont_button { width: 195px; margin: 0 auto; height: 42px; position: relative; top: -3px; button { border-radius: 16px; font-weight: normal; font-size: 16px; text-transform: uppercase; height: 42px; @media (max-width: 991px) { height: 50px !important; } } } } .moreinfo { display: none; } } .browser-iexplorer { .Booking-Form { text-align: center; .mod_booking-box { form.main-container{ @media (min-width: 992px) { display: flex; } } .main-data { text-align: left; .input-like, .cont_input { margin: 0 5px; max-width: 352px; text-align: left; @media (max-width: 1399px) { width: calc(30% - 4px); } @media (max-width: 991px) { max-width: 100%; margin: 25px 0; } } .select-like{ left: 84px; &.pick-pax{ top: 75px; @media (max-width: 991px) { top: 221px; } @media (max-width: 767px) { top: 165px; } .cont_list ul.ages-list > li.age .pseudo-select li{ padding: 5px 0; } } } } } } } @media (max-width: 991px) { .mfp-container { padding: 0; } .booking_form_popup { box-shadow: 0 5px 15px rgba(0,0,0,.5); .mod_booking-box.collapsed { .collapsable { display: block; } } .mod_booking-box { background: $color_imgs; border-radius: 0; height: auto; box-shadow: none; form.main-container.one_hotel { grid-template-columns: 1fr; height: auto; .main-data { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; .input-like, .cont_input{ display: block; border: none; margin: 15px 0; height: auto; width: 100%; input{ border: 1px solid #ccc; height: 50px; } label{ position: relative; top: 0; margin-bottom: 10px; font-size: 18px; font-weight: 300; } } .select-like{ &.pick-pax{ margin-top: calc( (2 * 76px) + 31px); position: absolute; min-width: 240px; @media (max-width: 767px) { margin-top: calc( (2 * 89px) + 31px); grid-row: none; margin-left: 0; left: 0; } } } .input-like{ &.where{ display: none; } &.when{ label:after{ top: 42px; font-size: 15px; color: $color_1o; } } &.allocations{ label:after{ top: 32px; font-size: 15px; } } } } } .container-sub.cont_button{ width: 100%; height: 50px; margin-top: 15px; border-radius: 16px; } } .mfp-close{ right: 20px; top: 20px; } } } @media (min-width: 768px) { .booking_form_popup { .Booking-Form{ max-width: 600px; margin: 0 auto; } } } .daterangepicker { z-index: 1050; } header.bg14_header.desktop.hotel .action-open-booking-popup{ background: $color_2; height: 60px; width: 100%; display: block; text-align: center; a{ display: inline-block; text-decoration: none; font-size: 0; width: 50%; height: 60px; color: $color_imgs; &:hover{ color: $color_1o; } &:before{ content: "\f133"; font-family: "fontawesome"; font-size: 26px; position: relative; top: 24px; } } } //Suscripción footer cmsforms .suscripcio{ h3{ color: $color_imgs; } .cms-form{ position: relative; input{ margin-bottom: 10px; } input[type=email]{ height: 50px; border-bottom-left-radius: 8px; border-top-left-radius: 8px; padding: 6px 12px; max-width: 279px; width: 100%; border: none; background-color: $color_imgs; } a{ font-weight: 100; margin-left: 5px; } input[type=checkbox]{ position: relative; top: 2px; } .submitbutton{ background-color: #58585a; color:$color_imgs; border-bottom-right-radius: 8px; border-top-right-radius: 8px; border:none; height: 50px; padding: 5px 20px 3px 20px; font-size: 16px; text-transform: uppercase; transition: background 0.2s; &:hover{ background-color: $color_1o; } } form{ display: flex; flex-direction: row; flex-wrap: wrap; @media (max-width: 399px) { justify-content: center; } .field.email{ width: 60%; order: 1; @media (max-width: 1199px) { width: 59%; } @media (max-width: 767px) { width: 60%; text-align: right; input { max-width: 100%; } } @media (max-width: 399px) { width: 55%; } } .field.subscribe_accepted { order: 3; @media (max-width: 767px) { width: 100%; } } button{ order: 2; @media (max-width: 767px) { width: 40%; } } } } } .mod_ofertes { padding-top: 4rem; @media(max-width: 767px) { padding-top: 3rem; } } .mod_ofertes .item { margin-bottom: 8rem; @media(max-width: 767px) { margin-bottom: 6rem; } .components_group__content { padding: 0 1rem; } img { height: 30rem; width: 100%; object-fit: cover; } @media (min-width: 768px) { display: flex; .components_group { &__image { padding-right: 1rem; flex-basis: 50%; } &__content { padding-left: 0 0 0 1rem; flex-basis: 50%; } } } .name { color: $color_1; text-transform: capitalize; font-size: 2.2rem; font-weight: bold; margin-bottom: 1rem; line-height: 110%; @media (max-width: 767px) { margin-top: 3rem; font-size: 1.2rem; text-align: center; } } .link { margin-top: 5rem; text-align: right; margin-right: 15%; @media (max-width: 767px) { text-align: center; margin-right: 0; } } .link a { background-color: $color_2; text-transform: uppercase; font-size: 1.2rem; font-weight: 400; height: 3.1rem; align-items: center; padding: 0 2.5rem; border-radius: 10px; line-height: 100%; display: inline-flex; transition: background-color .2s; &:hover { color: $color_imgs; background-color: $color_1o; } } }