@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Open+Sans"); /*************/ /**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 */ a, .main a {color:$color2;} a:hover, .main a:hover{color:$color5;} /* ---------------------------- HEADER ------------------------- */ .bg14_header { background-color: $color1; /* COLOR */ background-position: left bottom; box-shadow: 0 0 10px 0 rgba(152,152,152,0.75); } .bg14_header .top { background-color: $color3; color: $color1; /* COLOR */ text-transform: uppercase; padding: 0 5px; } .bg14_header .top a { color:$color6; /* COLOR */ margin-right: 10px; padding: 0 5px } .bg14_header .bottom { color: $color4; margin-top: 10px; } .bg14_header .bottom a { color: $color4; text-decoration:none; margin: 0 5px; } /* SUBMENU_WRAP (antes DROPDOWN LIST) */ .submenu_wrap a, .submenu_wrap a:hover { color:$color2; text-decoration:none; } .top .submenu_wrap a, .top .submenu_wrap a:hover{ color: $color6; } .submenu_wrap > div { color: #999; background-color: $color6; } .submenu_wrap.topMenu > div { background-color: rgba(0, 0, 0, .75); color: $color6; box-shadow:none; } /* SECOND STRIPE */ .bg14_header.chain .second_stripe .destination_link:hover { color:$color2; } .schedule-top-buttons > table tr td > a { color: $color6;} /* MY RESERVE */ .bg14_header.chain .first_stripe .mybooking_plugin{ height:55px; display:table-cell; vertical-align: bottom; padding:10px 10px 5px 10px; color: $color6; background-color: $color7; text-align:center; } /* CONTACT */ .bg14_header.chain .first_stripe .telephone{ color: $color4; position: relative; top: 26px; } /* CHECK IN */ .bg14_header.chain .first_stripe .checkin { display: table-cell; height:55px; background-color: #81B214; padding:10px 10px 5px 10px; margin:0; color: $color6; vertical-align: bottom; text-align:center; } /* LANGUAGE */ .bg14_header.chain .first_stripe .cmslanguageselector_plugin { height:55px; display:table-cell; background-color: transparent; vertical-align:bottom; color: $color4; } .bg14_header.chain .first_stripe .cmslanguageselector_plugin #dropdownLanguage span{ background-color: transparent !important; color: $color4; } .bg14_header.chain .first_stripe .cmslanguageselector_plugin #dropdownLanguage .caret{ background-color: transparent !important; border-top-color: $color4 !important; } /* Newsletter y partners */ .newsletter.active, .partners.active { background-color: $color2; } #newsletter_popup button { color:white; background-color: $color5; border-radius:0; } /* MENU DEL HEADER */ .bg14_menu .semitransparent { background-color: $color1; /* COLOR */ opacity:1; width:100%; height:40px; position: absolute; border-width:2px 0 0 0; border-color: $color4; border-style:solid; } ul.top_menu li > a, ul.top_menu li > div { /*Campomar, Es reco, Primasud, Puerto Antilla*/ color: $color4; /* COLOR */ } /* SLIDER */ .top-slider-in ul.controls li { display: block; list-style: none; list-style-type: none; margin: 0 2px; padding: 0; border: 1px solid silver; float: left; width: 15px; height: 15px; background-color: $color1; /* COLOR */ opacity: 0.6; } /* LANGUAGE SELECTOR */ .cmslanguageselector_plugin .lang.active a { color: $color4; font-weight:400; } .cmslanguageselector_plugin .lang a { font-weight:normal; color: $color5; background-color: transparent; text-transform: uppercase; text-decoration: none; } /* BANDA INFERIOR */ .banda_inferior { background-color: $color1; padding-top: 10px; } /* FOOTER */ .main-footer .footer-top { /*Atlantis*/ background-color: $color3; /* COLOR */ padding: 10px 0 6px 0; } .main-footer .footer-top, .main-footer .footer-top a { /*Atlantis*/ padding-right:10px; color: $color6; /* COLOR */ } /* Subscription plugin */ .newsletter-subscription .input-group-addon .btn { border:0; background-color: $color5; color: $color1; /* COLOR */ border-radius:0; border-width:2px 0; border-color: $color5; border-style:solid; padding: 7px 20px 3px 20px; } /* MENU */ .bg14_menu .top_menu > li > a, .bg14_menu .top_menu > li > div.header_expansible_link { text-decoration: none; background-color: transparent; padding: 0; color: $color4; } .bg14_menu .top_menu li.active a { color: $color2; } .submenu_white .top_menu .child.selected a { color: $color2; /* color */ } /* searchBookingForm */ .searchBookingForm .btn.book { text-transform:uppercase; border-radius:0; color: white; background-color: $color5; padding: 2px 40px; } /* Selector tipo de viaje (ver todos, puentes y festivos, familias, parejas) */ .children_filter_form label { margin-right:18px; font-size: 18px; text-transform:uppercase; vertical-align: middle; padding-left: 5px; font-weight:300; color: $color2; } .children_filter_form span.selected { color: $color2; } /* Form Buscar Hotel */ .search-hotel input[type="text"]{ border-radius:0; text-align:left; color: $color4; font-size: 1em; } .search-hotel input[type="number"]{ color: $color4; font-size: 1em; } .allocations-table select { color: $color4; } /* BOOKING SEARCH RESULTS */ .hab-options .show_more { width:100%; text-align:right; border-width:1px 0 0 0; border-color: $color5; border-style:solid; padding-top:5px; color: $color5; cursor:pointer; margin-top:10px; font-size:0.9em; } .hab-options .show_more i { color: $color5; } .allocations-container { top:inherit; padding-top:10px; padding-bottom:5px; background: none; background-color: $color3; } .book .items .room-item .availability-message { display:inline-block; font-size: 0.8em; color: $color5; } .search-results-banner { margin-bottom: 22px !important; background-color: $color6; } .search-results-banner .sidebar { background-color: $color6; } .search-results-banner .main-content { text-transform: uppercase; background-color: $color3; /* COLOR */ } .search-results-banner .main-content h1, .search-results-banner .main-content ul li, .search-results-banner .main-content ul li span, .search-results-banner .main-content ul li strong { color: $color6; } .info_tipos_regimenes { background-color: $color5; border:0; border-radius:4px; color:white; display:inline-block; padding: 3px 15px; } /* Barra */ .toggle-allocations, .inline-hotel-form .toggle-allocations:hover{ color: $color4 !important; } /****************************** CALENDAR *************************/ body.calendar h3 { color: $color2; font-size: initial;} body.calendar th { text-align: center; color: $color3; font-size: 12px; } body.calendar .month, body.calendar .main .month * { text-align: center; background-color: $color3; color: white; line-height: 35px; margin-bottom: 7px; } body.calendar .weekdays, body.calendar .weekdays th { background-color: $color4; } /* BOOKING CONFIRMATION - EXTRAS */ .book.complete .extra-popup .btn, .book.complete .extras .extra-item .btn { background-color: $color3; font-size:1em; line-height:1em; text-align: left; margin: 5px 0 0 0; width: 100%; } .book.complete .extra-popup .btn { background-color: $color5; padding: 5px 10px; margin: 5px 0 0 0 !important; } .book.complete .highlight.extra-info, .book.complete .highlight.extra-info * { color: $color5; } /* SEARCH FORM STYLE */ .search-form .sidebar .block { background-color: $color6; margin: 0 -5px 10px; padding: 0 5px 5px; } .search-form .content { background-color: $color6; } .search-form h2 { color: $color5; margin-left: -5px; margin-right: -5px; margin-bottom: 10px; padding: 5px 10px; } .link_conditions p a{ color: $color4 !important; } /*HD HOTELS*/ h2.entry-title:hover a{ text-decoration:none; color: $color6; } /* ------- ZINNIA ------- */ .zinnia #sidebar > div > h3{ padding:10px 5px; background-color: $color2; color: $color6; } .zinnia #sidebar > #widget-calendar > .calendar > tbody td a { color: $color5; } .zinnia .post.short .continue-reading{ color: $color2; } /* ----------------------- Discover Plugin --------------------------- */ .discover_plugin .content { background-color: $color1; } /* ----------------------- Exclusive Benefits --------------------------- */ .exclusive_benefits_plugin section { color: $color1; } .exclusive_benefits_plugin section {/*Sirenis*/ color: $color1; } .full-width-important { width: 100% !important; max-width: 100%; } /* Color 5 */ .plugin_link.colored.color5 { background-color: $color5; color: $color6; } .plugin_link.colored.color5 a {color: $color6;} .plugin_link.colored.color5 a:hover { color: $color3; } /////////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; } /* SUBMENU_WRAP (antes DROPDOWN LIST) */ .submenu_wrap.as_list .container { width:auto !important; padding: 10px 5px 10px 15px; } .submenu_wrap .fa.fa-chevron-up.fa-x2 { display:none; /* Como header_element_children_trigger es HOVER, No mostrar el botón de cerrar */ } /* BANDA*/ .banda { width:100%; z-index:3; position: relative; background-color:$color3; } #CookielawBanner { z-index: 99999999 !important; } /* Step2. Mostrar o el boton Reservar al lado de cada habitacion */ .book.rooms .list-item.room-item.selected ~ button {display: inherit;} /* CALENDAR*/ body.calendar .calendar-day { background-color: #46949d; padding: 2px 6px; border: 0; line-height: 1.4em; color: white; } body.calendar .calendar-day.status-unavailable { background-color: #77777a; color: white; } /*body.calendar .calendar-day.status-offer { background-color: #fdd68e; color: white; }*/ body.calendar .calendar-day.status-latest { background-color: #000000; color: white; } body.calendar .note.note-normal span.icon { background-color: #46949d; } /*body.calendar .note.note-unavailable span.icon { background-color: #77777a; }*/ body.calendar .note.note-latest span.icon { background-color: #000000; } body.calendar .note.note-offer span.icon { background-color: #fdd68e !important; } /* ---------------------- Colored Text & Animation (CMSColoredTextPlugin) ---------------------- */ .contact-maps .custom-colored-text .imageAndText, .custom-colored-text { height: 100%;} .custom-colored-text .colored-text-bg{ background-color: #000000; opacity:0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } /* ---------------------- Generic_plugins variable colors ---------------------- */ .exclusive_benefits_plugin .title h3 { color: $color1; font-size: 2.5em; } .children .more_about_link { font-size:31px; line-height: 31px; color:$color1; } /* CHILDREN CHILD DESIGN A */ .children .item.design-a .content { color:$color4; padding: 10px 10px 0 10px; height: 199px; overflow: hidden; text-overflow: ellipsis; } .children .item.design-a .footer { background-color: $color5; padding:10px; } /* CHILDREN CHILD DESIGN B */ .children .item.design-b .action .btn { background-color:$color5; color:white; } /* CHILDREN CHILD DESIGN F */ .children .item.design-f .content header span { background-color:$color4; font-size: 18px; display: inline-block; color: white; width: 70%; padding: 10px; text-transform:uppercase; font-weight:300; } .children .item.design-f .content footer { background-color: $color1; width: 100%; height: 200px; text-align: left; padding: 10px 20px; } .children .item.design-f .content footer h4.third { color: $color4; } /* ------------------------ Fragment Booking.Steps ----------------------------- */ .fragment.Booking-Steps .booking_stepper .steps_container div .bstep.active { color: $color4; border: 1px solid $color4; } .fragment.Booking-Steps .booking_stepper .steps_container div .bstep.active.solid { color: #fff; background-color:$color4; border: 1px solid $color4; } .fragment.Booking-Steps .booking_stepper .progressbar_container .progress-bar { box-shadow: none; background-color: $color4; } .fragment.Booking-Steps .booking_stepper .label_container span.active { color: $color4; } /*************/ /**FIN CODIGO *********************************************************************/ /*************/ /**************************************************************************/ /** Club Cala Romaní **/ /**************************************************************************/ @font-face { font-family: 'Open Sans'; src: url('https://fonts.googleapis.com/css?family=Open Sans'); } @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; } @font-face { font-family: "ROL-normal"; src: url("https://static.roomonline.es/tipografias/ROL-normal.otf"), url("https://static.roomonline.es/tipografias/ROL-normal.otf"); font-weight: bold; } $textshadow: 3px 3px 2px rgba(0, 0, 0, 0.3); $color_imgs: #FFF; //amarillo $color_1: #ffb81c; /*$color_1o: darken($color_1, 15%);*/ //Azul oscuro $color_2: #00005e; //Azul $color_2b: #06038d; //Gris $color_3: #77777a; $color_2hover: lighten($color_2, 15%); //Rojo $color_4: #e4002b; //Gris claro $color_5: #f1f1f2; $fuenteComun: "Open Sans"; $fuenteComunBold: "Open Sans", bold; $fuenteComunLight: "Open Sans"; b, strong { font-family: $fuenteComun; } strong { font-weight: 600; } p { color: $color_3; 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_1 !important; box-shadow: none; } } #CookielawBanner { a:last-of-type { //color: $color_2; font-weight: 600; &:hover, &:focus { text-decoration: underline; color: $color_1; font-weight: 600; } } a:first-of-type { background-color: $color_2; border-color: $color_2; border-radius: 5px; margin-left: 10px; &:hover{ background-color: $color_1; border-color: $color_1; } } .btn{ padding: 5px 15px; color: #fff; } } .mypopup{ align-items: center; #booking_canceled { display: flex; align-items: center; p { margin-bottom: 0; } } } .ui-state-error { background: transparent; color: #555; } .rooms.items.container #no_element_available_top { display: none !important; } .calendar.internal .content-container.container { width: 98% !important; } body.calendar div.month { line-height: 32px !important; margin-bottom: 0; background: $color_3; border-left: solid 3px #FFF; border-right: solid 3px #FFF; a { color: $color_3; } span { font-weight: bold; color: $color_2 !important; text-transform: uppercase; } } body.calendar .weekdays th { background-color: $color_2; padding: 10px; } body.calendar .note.note-normal span.icon { background-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_1; } &:active { box-shadow: none; } } body, html { min-width: 0 !important; background-color: #fff; line-height: 1em; font-family: $fuenteComun; } body.calendar .calendar-day { background-color: $color_2; color: white; } .mod_children { >.row { margin: 0; >.col-xs-12 { padding: 0; } } .row.children.design-generic { margin-left: -15px; margin-right: -15px; margin-bottom: 100px; .child.col-xs-12 { padding-left: 15px; padding-right: 15px; transition: opacity 0.3s; &:hover { opacity: 0.6; } h1 { display: none; /*Provisional hasta que se arregle ese fragment.*/ } a { display: none; } .name { color: $color_2; text-align: center; font-size: 18px; margin-bottom: 30px; font-weight: 600; margin-top: 30px; } .aux_field_2 { line-height: 200%; color: $color_2; font-size: 16px; } } img { width: 100%; } } h2 { margin-bottom: 40px; margin-top: 100px; } } .mod_tituloDesc { .first_info{ .ShortDescription{ p{ line-height: 2.5em; text-align: left; } } } padding-top: 60px; h1 { margin-bottom: 40px; width: 65%; } p { margin-top: 30px; line-height: 200%; font-size: 16px; color: $color_3; text-align: center; } &.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 { width: 100%; } .popup-gallery { margin-bottom: 0; .img-gallery { transition: opacity 0.2s; } &:hover .img-gallery { opacity: 0.6; } } /*HOME*/ .home h2 { margin-top: 100px; margin-bottom: 70px; } .home #generic_slide_1400 p { color: #fff !important; } .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 { margin: 15px; } } select.offer_calendar_room.form-control { font-size: 10px; } .inline-hotel-form .fa.icon-calendar-from, .inline-hotel-form .fa.icon-calendar-to { font-size: 18px; padding-top: 2px; padding-left: 2px; color: $color_2; cursor: pointer; position: absolute; right: 15%; top: 20px; margin-top: 7px; } .ex-container label { color: $color_2; text-transform: capitalize; height: 1.4em; } body.calendar.internal { p.label_right, p.label_left { font-weight: bold; font-size: 11px; color: $color_3; } .allocations-container { position: absolute !important; background-color: #F1F1F2; z-index: 8; } } body.calendar .calendar-day.status-unavailable { background-color: rgba(119, 119, 122, 0.6); color: white; } body.calendar th { color: #fff; } .ui-datepicker { .ui-datepicker-prev, .ui-datepicker-next { top: 2px; border-radius: 4px !important; &:after { color: $color_2; text-align: center; display: block; line-height: 28px; font-size: 20px; position: relative; top: -1px; } &.ui-state-hover { background: darken($color_3, 15%); border-color: darken($color_3, 15%); } span { display: none; } } .ui-datepicker-prev:after { content: "^"; font-family: ROL-normal; } .ui-datepicker-next:after { content: "_"; font-family: ROL-normal; } th { span { color: $color_2; } } } .allocations-container th { color: $color_2 !important; } .ui-state-default { height: 35px; text-align: center; padding: 9px; border: 0; background: none; } .mod_childrenHorizontal { /*En home y destinos*/ > .row { margin: 0; > .col-xs-12 { padding: 0; } } .row.children.design-generic { margin-left: -15px; margin-right: -15px; @media (min-width: 768px) { margin: 0; } .child.col-xs-12 { @media (min-width: 992px) { padding-left: 10px; padding-right: 10px; } @media (min-width: 1200px) { padding-left: 20px; padding-right: 20px; } } .components_imagen .image { width: 100%; background-size: cover; background: no-repeat 50%; } .components_contenido { padding: 25px; @media (min-width: 992px) { padding: 0; } .name, .price_from { text-align: center; margin-top: 30px; margin-bottom: 20px; color: $color_2; font-size: 18px; font-weight: bold; } .short_description { @media (min-width: 992px) { height: 220px; } @media (min-width: 1200px) { height: 200px; } @media (min-width: 1400px) { height: 150px; } p { font-size: 12px; line-height: 150%; @media (min-width: 480px) { font-size: 14px; line-height: 200%; } @media (min-width: 992px) { font-size: 16px; line-height: 175%; } } } .link { @media (min-width: 768px) { margin-bottom: -15px; } a.child-item-link { margin: 0 auto; } } } } &.conLink { .child.col-xs-12 { transition: opacity 0.3s; &:hover { opacity: 0.6; } @media (min-width: 768px) and (max-width: 991px) { float: none; max-width: 450px; margin: 0 auto; } .item.design-generic { @media (min-width: 768px) { box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.2); } .components_contenido { @media (min-width: 992px) { padding: 0 25px; } } } } } } /***LISTADO HABITACIONES***/ .book .items .room-item .select-board-code { margin-bottom: 6px; border-radius: 5px; height: 25px; margin-right: 0; option { margin-bottom: 5px; } } input[type=radio] { float: left; margin-right: 5px; } .body-rooms { .mod_tituloDesc{ .fragment.Name{ h1{ text-align: center; padding-left: 0; } } } } /*****/ div #children_536017 { margin-bottom: 50px; margin-top: -34px; } .home .migas { display: none; } .children .item.design-h .right_part { padding: 0 50px !important; p { color: $color_3; line-height: 2em; span { font-size: 16px !important; color: $color_3 !important; font-family: $fuenteComun; line-height: 1.5em; } } } .restauracio.col-xs-6 { margin-bottom: 30px; } .container.informacio { .contingut { padding-bottom: 20px; } .col-xs-12 { padding-left: 15px; padding-right: 15px; } h1{ padding-bottom: 50px; padding-top: 100px; } h2 { font-weight: bold; margin-bottom: 30px; line-height: 150%; } p { line-height: 250%; font-size: 16px; text-align: center; color: $color_3; } } @media (max-width: 768px) { .container.informacio{ p{ text-align: left; } h1{ padding-top: 25px; margin-bottom: 0 !important; } } } /****PROCESO DE RESERVA****/ .booking-process.book{ .Booking-ConfirmForm{ .darkbox{ .ex-container{ .row-fluid{ .col-sm-2{ display: block !important; width: auto; } } } } } } .select.form-control.select-board-code+.pull-right { padding-top: 3px; } .booking_form .form-control { border-radius: 4px; } .booking-process .fragment.Booking-Steps .booking_stepper .steps_container div .bstep { border-radius: 10px; color: rgba(0, 0, 94, 0.3) !important; border: 1px solid rgba(0, 0, 94, 0.3); } .fragment.Booking-Steps .booking_stepper .label_container span { color: rgba(0, 0, 94, 0.3) !important; } .fragment.Booking-Steps .booking_stepper .label_container span.active { color: $color_3 !important; } .fragment.Booking-Steps .booking_stepper .progressbar_container .progress { background-color: rgba(0, 0, 94, 0.3); } @media (max-width: 768px) { .fragment.Booking-Steps { display: none; } .row_room_and_price, .row_pax, .row_board { display: none; } .rooms.items { border-top: none !important; } .booking-process { .room_list { padding-top: 0; .Hotel-Name strong { padding: 10px; } .summary { padding: 25px; margin-top: 30px; } .room_total_price { padding: 30px !important; } } .Booking-ConfirmForm { .user_data { border-top: none !important; } } } } @media (max-width: 989px) { .Booking-ConfirmForm{ .summary{ padding: 15px; } .hab-options.hab-1{ padding: 15px; } } .book.complete{ .extras{ .extra-item{ height: 165px; } } } } /**************************************************************************/ /**INICIO sitedata**/ /**************************************************************************/ /*--------------ESTILOS GENERALES---------------*/ #cms_toolbar .cms_structure .cms_dragarea { position: static; } body, html { min-width: 0 !important; background-color: #fff; } span { font-family: $fuenteComun !important; color: $color_3 ; } .plugin_picture img { width: 50%; margin-bottom: 20px; } .header-wrap { margin-bottom: 0px; width: 100%; z-index: 101; top: 0; } .btn:hover, .btn:focus { color: #FFF; } p { font-family: $fuenteComun; font-size: 16px; color: $color_2; font-weight: 400; } h1 { font-family: $fuenteComun; font-size: 45px; text-align: center; color: $color_2; font-weight: 600; } .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: 30px; text-align: center; color: $color_2; font-weight: 600; } .offer_list h2 { text-align: left; } h3 { font-family: $fuenteComun; font-size: 18px; font-weight: 600; color: $color_1; } a { font-size: 16px; font-family: $fuenteComun; } a, .main a { color: #ffffff; } .fragment.Name h1 { text-transform: uppercase; } .my_booking_popup .btn { background: $color_2; border-radius: 4px; width: 100%; transition: background 0.2s; line-height: 0.5em; height: 30px; margin-top: 10px; &:hover, &:focus { background: $color_1; border-color: $color_1; } &:active { box-shadow: none; } } /*---------CABECERA-----*/ .telfcont { text-align: center; img { width: 10%; margin-right: 20px; } h2 { text-align: center; font-size: 22px !important; &:before{ content: "s"; font-family: ROL-normal; padding-right: 15px; text-transform: none; } } h3, h4 { color: $color_3; font-weight: bold; } a { color: $color_3; font-weight: bold; &:hover, &:focus { color: $color_1; } } ul { padding-left: 0; list-style: none; margin-bottom: 0; } } .cap { margin-top: 20px; } .bg14_header .bg14_logo { height: 85px; transition: opacity 0.2s; z-index: 1000; &:hover, &:focus { opacity: 0.6; } } header.bg14_header.desktop.hotel .top .cabecera_principal { height: 92px; position: fixed; width: 100vw; z-index: 101; background: #fff; @media (min-width: 992px){ box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3); } > .row{ margin: 0 auto; @media (min-width: 992px){ width: 940px; } @media (min-width: 1200px){ width: 1140px; } @media (min-width: 1400px){ width: 1380px; } } } header.bg14_header.desktop.hotel .top a { text-transform: uppercase; color: $color_3; font-family: $fuenteComun; font-size: 16px; } .mypopup{ .pop-friends-content.loyalty-container{ .is-friend{ padding: 10px; p{ color: $color_3; } a{ color: $color_2; &:hover{ color: $color_1 } } } } } header.bg14_header.desktop.hotel .top { .menu-corporativo .link-mybooking a { font-size: .9rem; text-transform: none; &::before { content: "\f0f2"; font-family: fontAwesome; } } .menu-corporativo { //margin-left: -36px; padding-top: 14px; .bienvenidaMenu{ p{ float:left; margin-left: -40%; padding-top: 14px; font-size: 11px; color: $color_3; line-height: 2em; a{ font-size: 11px; } } } .loyaltypopup_plugin{ text-transform: capitalize; color: $color_2; font-weight: 600; font-size: 14px; &:before{ content: 'v'; color: $color_2; font-family: Rol-normal; text-transform: none; padding: 5px; font-size: 24px; } &:hover{ color: $color_1; } &:hover:before{ color: $color_1; } } a, button#dropdownLanguage { &:hover, &:focus { //font-weight: 600; //color: $color_1; span, span.caret:before { color: $color_3; } } &:active { box-shadow: none; } } .cmslanguageselector_plugin { .caret { display: none !important; } .dropdown-menu { min-width: 135px; @media (max-width: 1103px) and (min-width: 992px){ left:-42px; } .lang:not(.active) a:hover { background: #FFF; color: $color_3 !important; } } } } } header.bg14_header.desktop.hotel .top .menu-mobile .dropdown-menu { width: auto; min-width: 100px; 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_3; font-family: $fuenteComun; font-weight: 400; font-size: 10px; margin-top: 0; display: flex; line-height: 2em; top: 0; } } .generic-logo-hotel { padding: 0; img{ max-height: none !important; } } header.bg14_header.desktop.hotel .top .menu-corporativo-sec { text-align: right; //margin-left: 18px; a { padding-left: 0; padding-right: 0; margin-right: 0; } span.plugin_link{ position: relative; bottom: 14px; font-weight: bold; &:after{ color: $color_3; margin-left: 5px; margin-right: 5px; content: "."; position: relative; bottom: 4px; font-size: 35px; } } } /*****Cabecera y logo********/ .menu-corporativo-sec .fragment.Header-HotelsAndDestinations { position: relative; bottom: 14px; font-weight: bold; &:hover{ a{ color: $color_1; } } } .menu-corporativo{ ul.cmslanguageselector_plugin{ li.dropdown{ #dropdownLanguage{ padding: 4px 0 !important; } } } } header.bg14_header.desktop.hotel .top .menu-corporativo-sec { .plugin_link.sports { position: relative; bottom: 14px; font-weight: bold; a { &:hover, &:focus { color: $color_3; } } } .plugin_link.sports:after { text-transform: uppercase; color: $color_2; font-family: "Ubuntu"; margin-left: 5px; margin-right: 5px; content: "."; position: relative; bottom: 4px; font-size: 35px; } } button#dropdownLanguage span.label:before { content: "\f0ac"; font-family: FontAwesome; font-size: 16px; margin-right: 4px; //line-height: 1.5em; @media (max-width: 991px){ content: none; } } header.bg14_header.desktop.hotel .top .mobmenu1 { .plugin_link.sports_mobile { a { display: block; padding: 15px 20px 15px; font-weight: 300; } } .fragment.Header-HotelsAndDestinations { bottom: 0; width: 100%; border-top: solid 1px #707070; padding: 15px; a { &:hover, &:focus { color: $color_1; } } } } .fragment.Header-Menu .header_expansible_link:after { text-transform: uppercase; color: $color_3; font-family: $fuenteComun; margin-left: 5px; margin-right: 5px; content: "."; position: relative; bottom: 4px; font-size: 35px; } /*****teléfono********/ p.mobile1 { color: $color_3; font-size: 10px; } .menu-corporativo .popup_plugin.market_telephone :before { content: "s"; font-family: ROL-normal; text-transform: none; margin-right: 13px; color: $color_3; font-size: 20px; position: relative; top: 3px; left: 8px; } .popup_plugin.market_telephone p.mobile1 { &:hover { &:before { color: $color_3; } } } a.popup_plugin.market_telephone { font-family: FontAwesome; display: inline-block; color: $color_3 !important; font-weight: lighter; &:hover{ opacity: 0.8; } } /*****contacto, reserva********/ .pop-contact-form-content .btn { background-color: $color_2; border-radius: 4px; margin-top: 20px; transition: background 0.2s; height: 36.55px; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } .pop-contact-form-content { font-family: $fuenteComun; label { margin-top: 15px; margin-bottom: 10px; color: $color_3; } } header.bg14_header.desktop.hotel .top a.mybooking_plugin { color: $color_3; margin-right: 0; font-size: 10px; font-weight: 400; &:hover{ opacity: 0.8; } } .mypopup { font-family: $fuenteComun; } .inline-hotel-form { margin-top: 10px; background-color: #f1f1f2; } .col-xs-12 .Booking-Form { position: relative; top: -30px; } .Booking-Form .mod_booking-box.reserva-fijo { position: fixed; top: 92px; width: 1370px; z-index: 1; } .inline-hotel-form select, .inline-hotel-form input[type=text], .inline-hotel-form button, .inline-hotel-form input[type=number] { width: 55%; display: block; border-radius: 10px; padding: 0 2px; line-height: 1.8em; height: 2.8em; } .Booking-LineForm .lineform input, .Booking-LineForm .lineform select, .Booking-LineForm .lineform a.toggle-allocations { border: 1px solid $color_3; border-radius: 5px; background-color: #fff; color: $color_3; font-size: 14px; display: block; //padding: 8px ; height: 30px !important; width: 91%; max-width: 96%; } .browser-iexplorer .Booking-LineForm .lineform input { padding-top: 6px !important; } .inline-hotel-form label { display: block; font-size: 0.8em; line-height: 18px; white-space: nowrap; width: 100%; overflow: hidden; color: $color_2; font-family: $fuenteComun; text-transform: capitalize !important; } .Booking-LineForm a.toggle-allocations span.guests { font-family: $fuenteComun; color: $color_3; float: left; font-size: 14px; line-height: 2em; } .search-hotel input[name="promo_code"] { background-color: white !important; font-weight: 500; color: #333333 !important; border: 1px solid $color_2; width: 100%; } .Booking-LineForm .lineform button.btn { font-size: 16px; margin-top: 23px; color: #fff; text-align: center; background-color: $color_2; padding-top: 1px !important; border-radius: 5px; font-family: $fuenteComun; transition: background 0.2s; height: 30px; line-height: 1px; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } .allocations-table select { color: $color_2 !important; background-color: #fff !important; background-size: 26% !important; } .allocations-container th { font-weight: 700; font-size: 0.8em; } .room th { padding-top: 20px; } .allocations-container label { font-weight: normal; } .allocations-container { color: $color_2; background: #f1f1f2; border-radius: 0 0 10px 10px; } .submenu_wrap>div { color: $color_3 !important; background-color: #f1f1f2; } .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; } .inline-hotel-form .select .caret { margin-top: 8px; position: absolute; right: 5px; display: none; } .mypopup.booking_form_popup { padding: 0; border-radius: 10px; select, input:not([type="checkbox"]), textarea { border: none; height: 100%; } input::placeholder { opacity: 1; } } .mod_booking-box { padding: 0; background: #f1f1f2; border-radius: 10px; box-shadow: 3px 3px 10px 4px rgba(157, 157, 156, 0.6); font-size: 1.125rem; form [class*=action] { display: block; } @media(max-width: 991px) { box-shadow: none; } #booking_process_form { max-width: none; grid-column-gap: 1rem; padding: 3.2rem 1.5rem .8rem; @media (max-width: 991px) { padding-bottom: 1.3rem; } @media (max-width: 415px) { .cont_button { width: 100%; } } } .select-like, .input-like, .cont_input, .cont_button, .cont_button button { border-radius: 6px !important; height: 35px; } &.collapsed form.main-container.one_hotel .select-like.pick-pax { margin-top: 32px; margin-left: 29% !important; @media (max-width: 767px) { margin-top: 2.3rem; width: 100%; .cont_list { width: 20rem; } } @media(max-width: 599px) { margin-top: 7.8rem; } @media (max-width: 479px) { grid-row: 2/3; margin-top: 2.3rem; } } .main-data { grid-column-gap: 1rem; grid-template-rows: 35px 0; } .input-like label, .cont_input label { color: $color_2; font-size: 1rem; text-transform: none; @media(min-width: 1200px) { top: -20px; } } i::before { color: $color_2; } .input-like.when, .input-like.allocations { background-repeat: no-repeat; background-position: 97% center; i { display: none; } @media(max-width: 991px) { padding-right: 2rem; font-size: 12px; } } .input-like.when { background-image: url(images/calendar_romani.png); } .input-like.allocations { background-image: url(images/flecha_romani.png); } // .input-like.when i { // right: .3rem; // &::before { // content: "X" !important; // font-family: ROL-normal !important; // font-size: 1.8rem; // } // } // .input-like.allocations i { // right: .3rem; // &::before { // content: "+"; // font-family: ROL-normal; // font-size: 1.2rem; // } // } input, .cont_input input { font-size: 1rem; text-transform: uppercase; padding-left: 1.2rem; } .cont_input input { text-align: left; } .cont_button button { color: $color_imgs; background-color: $color_2; font-size: 1.125rem; text-transform: uppercase; font-weight: normal; &:hover { background-color: $color_1; opacity: 1; } } &.collapsed .cont_button { @media(max-width: 767px) { display: block; } } } .cabecera_mobile { .col_telfMob { > a, > span { display: flex; align-items: center; } a.action-open-popup, span.action-open-booking-popup { padding: 0 12px; } span.mobile_menu_button a { padding: 0 3px; } @media(max-width: 599px) { a.action-open-popup { padding-right: 6px; } a.action-open-booking-popup { padding-left: 6px; } span.mobile_menu_button a { padding: 0; } } } .action-open-booking-popup { a { display: none; } &::before { content: "X"; font-family: Rol-normal; font-size: 40px; } } } .mod_booking-box form.main-container.one_hotel .main-data { grid-template-rows: auto; .cont_input { @media(max-width: 767px) { display: flex; } } @media (min-width: 600px) { grid-template-columns: repeat(3,1fr); } @media(max-width: 599px) { grid-template-columns: repeat(1,1fr); } } .mod_booking-box .moreinfo { display: none; } .daterangepicker { z-index: 1050; } .cabecera_mobile .action-open-booking-popup { a { display: none; } &::before { content: "X"; font-family: Rol-normal; font-size: 40px; } } /*****Formulari********/ .pop-friends-content { .authenticate{ .container{ .col-xs-6{ .col-xs-4.no-padding{ width: 100%; } .col-xs-8{ width: 100%; } } } } .remmind{ color: $color_3; font-size: 12px; &:hover{ color: $color_1; } } .h4{ color: $color_2; font-weight: 600; } .services{ p{ margin-top: 10px; } border-right: 1px solid $color_2; padding-right: 15px; .registry{ font-size: 14px; text-align: left; strong{ color: $color_3; a{ display: inline-block; color: $color_2; font-size: 14px; padding-top: 5px; &:hover{ color: $color_1; } } } } .text-center{ .btn{ width: auto; float: none; } } } .btn { background-color: $color_2; border-color: $color_2; height: 30px; border-radius: 5px; font-size: 16px; color: #fff; line-height: 1em; &:hover { background-color: $color_1; border-color: inherit; } } } select.destination_hotel.form-control { font-family: $fuenteComun; color: #555; background-size: 5%; } Select.destination_hotel.form-control:after { content: "\f107"; font-family: FontAwesome; float: right; } .booking_search_form_container { width: 500px; border-radius: 0; .row { margin-left: -5px; margin-right: -5px; } } span.verifyNum { font-weight: lighter !important; } .booking_search_form_container label { color: $color_2; font-weight: bold; padding-bottom: 5px; font-size: 16px; } .booking_search_form_container .form-control { border-radius: 10px; } .booking_search_form_container button { background-color: $color_2 !important; padding-top: 7px !important; padding-bottom: 15px !important; margin-top: 20px; border-radius: 10px; height: 39px; transition: background 0.2s; margin-bottom: 20px; &:hover, &:focus { background: $color_1 !important; border-color: $color_1; } &:active { box-shadow: none; } } .ui-widget-header { border: 1px solid #fff !important; background: #fff none repeat-x scroll 50% 50% !important; } .ui-icon, .ui-widget-content .ui-icon { background-image: none !important; } .booking_search_form_container input[name="promo_code"] { background-color: white !important; font-weight: 500; color: #333333 !important; border: 1px solid $color_2; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none !important; font-size: 13px; line-height: 2em; width: 34px; } .booking_search_form_container .allocations-container #allocations>div>div { font-weight: 300; } .booking_search_form_container .allocations-container .room>div:first-child div { margin-top: 10px; color: #757679; margin-bottom: 5px; } .booking_search_form_container .allocations-container .room label { font-weight: 100 !important; margin-bottom: -15px; margin-left: 5px; } .booking_search_form_container .allocations-container .room>div:first-child div { color: $color_2; margin-bottom: 5px; font-weight: 700; } /*--------------Ventajas---------------*/ .fragment.Footer-ExclusiveBenefits { p { margin-top: 20px; padding: 10px; text-align: center; line-height: 200%; } } .informacio .lista_ventajas .col { width: 25%; float: left; text-align: center; } .informacio .lista_ventajas .col .imagen { justify-content: center; } .informacio .lista_ventajas .col .imagen img { align-self: center; width: 50%; } .informacio .lista_ventajas .texto { font-family: $fuenteComun; font-size: 14px; padding-bottom: 30px; //margin-top: 15px; line-height: 120%; font-weight: 600; } .lista_ventajas { margin-top: 50px; .texto { color: $color_3; } } @media (max-width: 420px) { .informacio{ p{ padding: 15px; } .lista_ventajas{ .col{ width: 100% !important; } } } } @media (max-width: 768px) { .informacio{ p{ padding: 15px; } .lista_ventajas{ .col{ width: 50%; } } } } /*--------------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_2; position: absolute; bottom: 0; width: 100%; padding-top: 20px; * { color: #FFF !important; 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: 100%; float: left; text-align: right; padding-right: 20px; font-size: 16px; } .price { text-align: right; } .currency { font-size: 16px; display: none; } .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 .main .generic_slide_plugin .text-container-ro .central-text-column .wrapper .text_slide .cajaIntro, .page-destination .generic_slide_plugin .text-container-ro .central-text-column .wrapper .text_slide .cajaIntro { border: solid 2px #FFF; border-radius: 20px; width: 483.54px; display: inline-block; text-align: center; padding: 25px 15px; } .home { .cajaIntro { h2 { color: white; margin-top: 0; margin-bottom: 32px; text-transform: capitalize; } p { text-align: left !important; } } } .home { .generic_slide_plugin { .item { .text-container-ro{ .wrapper{ display: table; } .central-text-column{ .wrapper{ margin: 0 auto; } } } .wrapper { width: 800px; max-width: 100%; margin: 25px auto; display: block; .text_slide { span { font-size: 70px; color: $color_imgs; text-shadow: $textshadow; //text-align: right; font-weight: 600; display: block; padding: 10px 0; line-height: 1em; } } } } } } @media (max-width: 768px){ .home{ .generic_slide_plugin{ .item{ .wrapper{ span{ font-size: 25px !important; padding: 10px 20px !important; } } } } } } .home .main .generic_slide_plugin .text-container-ro .central-text-column .wrapper { width: 50% !important; background-color: rgba(0, 0, 94, 0.3); float: left; } .home .main .generic_slide_plugin .text-container-ro .central-text-column .text_slide .cajaIntro p { font-size: 16px ; color: #fff; padding-right: 30px; padding-left: 30px; font-weight: 400; } .home .main .generic_slide_plugin .text-container-ro, .page-destination .generic_slide_plugin .text-container-ro { width: 100% !important; } .home .main .generic_slide_plugin .text-container-ro .central-text-column { padding-left: 0; } .home .main .generic_slide_plugin .text-container-ro .central-text-column .wrapper .text_slide { padding: 0 220px 0 5px; text-align: right !important; } .left.carousel-control, .right.carousel-control { //display: none; background: none; opacity: 0.8; span:before{ content: none; } } .home .left.carousel-control{ span:before{ content: "^"; font-family: Rol-normal; top: calc(50% - 40px); color: $color_imgs; } } .home .right.carousel-control{ span:before{ content: "_"; font-family: Rol-normal; top: calc(50% - 40px); color: $color_imgs; } } /*--------------footer---------------*/ .foot_newsletter.col-xs-9 { width: 65%; padding-left: 20%; } .foot_newsletter, .suscripcio { height: 115px; display: flex; flex-direction: column; justify-content: center; } .suscripcio { ul { margin-bottom: 0; } @media (max-width: 817px) { height: 60px; } } .container.sliderb { //padding-top: 30px; //padding-bottom: 30px; background-color: rgba(0, 0, 94, 0.7); width: 100%; @media (max-width: 817px){ height: auto; padding-top: 0; padding-bottom: 30px; } .terms { color: #fff; padding-left: 10%; //width: 90%; [type="checkbox"] { position: relative; top: 2px; } } } ul.buttonbar_plugin.botons a:hover { background-color: $color_1 !important; } .buttonbar_plugin li .fa:hover { color: #fff; } .main-footer .foot_newsletter.col-xs-12 { margin-top: 20px; } form.newsletter-subscription .terms { a:hover, a:focus { color: #fff; text-decoration: underline; } } .buttonbar_plugin li .fa { font-size: 22px; color: rgba(0, 0, 94, 0.7); top: -5px; } .general_info { border-top: 2px solid #fff; margin-top: 25px; strong { color: #fff; font-weight: bold; padding-right: 35px; } p { padding-top: 25px; } } @media (max-width: 887px) and (min-width: 818px) { .buttonbar_plugin a { margin-right: 3px !important; } } .adres.col-xs-5 { margin: 20px 0 20px 0; } .lineaseaparacion { width: auto; height: 2px; display: block; background-color: #fff; margin-bottom: 25px; margin-top: 25px; } .main-footer { padding-bottom: 0; top: 0 !important; } .foot_newsletter .form-group { width: 68%; margin-top: 10px; margin-bottom: 0; .input-group { width: 100%; } } .container.pie-enlaces { text-align: center; padding-top: 30px; padding-bottom: 30px; width: 100%; background-color: rgba(0, 0, 94, 1); span.plugin_link a{ padding-right: 10px; font-size: 14px; } span, strong { color: #fff !important; font-size: 14px; } .contactpopup_plugin{ font-size: 14px; padding-right: 10px; @media (max-width: 768px){ line-height: 2em; padding-right: 0; } } } .buttonbar_plugin li a { opacity: 1 !important; cursor: pointer; } @media (max-width: 768px) { .main-footer { .container.pie-enlaces { span.plugin_link a { font-size: 14px; padding: 15px; line-height: 2em; } } } } /*--------------destino/hotel--------------*/ .fragment.Hotel-Weather p { color: $color_3; line-height: 1.5em; margin-bottom: 0; margin-top: 0; } .fragment.Hotel-Weather { border: solid $color_2 3px; border-radius: 30px; padding: 15px 15px; //margin-left: 50px; width: 312px; height: 131px; margin-top: 40px; .AuxField1{ p{ font-size: 25px; color: $color_2; } } } .weather { .fragment.Children { .design-generic { width: 100%; display: grid; margin-left: 35%; .child.col-xs-12.col-sm-12.col-md-4.col-lg-4.col-xl-4:before { content: '\f111'; font-family: FontAwesome; font-size: 6px; color: rgba(119, 119, 122, 1); } .components { padding-bottom: 5px; .name { margin-top: -15px; margin-left: -25px; color: $color_3; } .link { a.child-item-link { display: none; } } } } } } .page-element-a,.page-element-c { .fragment.Children{ .children.design-generic{ .components_info{ h4{ color: $color_2; font-size: 25px; font-weight: 600; &:before{ content: "Ü" ; font-family: ROL-normal; color: $color_2; font-size: 35px; margin-right: 5px; } } } } } .mod_tituloDesc{ .fragment.Name{ h1{ width: 100%; } } } .fragment.Children { p { line-height: 2em; color: $color_3; font-size: 16px; } } } .page-destination{ .mod_doble{ .weather.col-xs-4{ .fragment.Hotel-Weather{ .destination_name{ color: $color_2 !important; font-size: 20px; font-weight: 600; margin-top: 0; } } } } } .page-hotel { .mod_doble { .weather.col-xs-4 { padding-left: 7%; .fragment.AuxField1{ p{ color: $color_2; font-weight: 600; font-size: 25px; //padding-left: 45%; } } span { a { padding-left: 25%; text-decoration: none; font-size: 25px; font-weight: 600; line-height: 25px; } } a.enlace_descarga:before { content: "\f1c1"; font-family: FontAwesome; color: $color_2; font-size: 30px; } } } .container.mod_children { .LongDescription { margin-top: 80px; } .components { p { line-height: 1.5em; padding-bottom: 30px; } } } } .fragment.Hotel-Weather .col-left { width: 30%; } .fragment.Hotel-Weather .col-right { width: 60%; .destination_name{ color: $color_2; font-weight: 600; font-size: 25px; } } .fragment.Hotel-Weather .col-right p { text-align: left; font-size: 14px; } @media (max-width: 492px){ .page-hotel{ .weather{ .fragment.Files{ a.enlace_descarga{ text-align: center; } } } } } @media (max-width: 768px){ .page-hotel, .page-destination{ .fragment.Name{ h1{ margin: 0; } } .first_info{ width: 100%; padding: 25px; } .weather{ width: 100%; padding-left: 0 !important; .fragment.Hotel-Weather{ display: none; } .fragment.Files{ a.enlace_descarga{ padding-left: 5%; } } } .main-lista{ .fragment.LongDescription{ ul{ padding: 20px; li{ padding-left: 0 !important; &:before{ font-size: 20px; } } } } } } } @media (max-width: 1023px) { .page-hotel, .page-destination{ .fragment.Name{ h1{ width: 100%; } } .first_info{ width: 100%; } .weather{ width: 100%; .fragment.Hotel-Weather{ display: none; } .AuxField1{ p{ font-size: 18px !important; text-align: center; padding-left: 0 !important; } } .fragment.Files{ .filename{ font-size: 12px; } } } .main-lista{ .LongDescription{ h2{ font-size: 18px !important; text-align: center !important; margin-top: 0 !important; } li{ padding-left: 0 !important; } } } } } @media (max-width: 1200px){ .page-hotel, .page-destination{ .mod_opinion{ .premi{ h2{ width: 100%; text-align: center !important; margin-bottom: 20px; } p{ padding: 15px; float: none; img{ width: 20%; } } } } } } @media (max-width: 1500px){ .page-hotel, .page-destination{ .fragment.Hotel-Weather{ width: auto; margin-left: 0; } } } .weather h1 { font-size: 16px; color: #666666; } .destino { margin-top: 30px; } .listadointeres { padding-left: 30%; .listado { li { color: $color_3; font-size: 16px; line-height: 1.5em; } } } .interes { text-align: center; margin-top: 30px; margin-bottom: 20px; color: $color_2; } .fragment.Breadcrumbs { margin-top: 20px; margin-left: 50px; a { font-weight: lighter; } } .fragment.Breadcrumbs ul li:last-child a { color: $color_1; font-weight: 600; } .fragment.Breadcrumbs ul li a { color: $color_3; font-size: 13px; font-weight: 600; &:hover, &:focus { color: $color_1; } } .top .submenu_wrap.as_list { margin-top: 10px; margin-left: 45px; padding-top: 0; z-index: 5; .container { position: absolute; min-width: 150px; margin-top: 14px; min-height: 100px; box-shadow: 0 4px 6px 0 rgba(50, 50, 50, 0.5); background: rgba(250, 250, 250, 0.9); padding: 15px 10px 10px; margin-left: -50px; li { margin-right: 0; } } } @media (max-width: 540px) { .weather .fragment.Children .design-generic .col-xs-12 { width: 26% !important; margin-left: 22px !important; } .book.rooms .list-item.room-item.selected~button { width: 100%; } } @media (max-width: 682px) { .weather .fragment.Children .design-generic .col-xs-12 { width: 22%; margin-left: 70px; } } @media (max-width: 768px) { .weather .fragment.Children .design-generic { display: inline-block; width: 100%; display: contents; .col-xs-12 { width: 20%; margin-left: 90px; } .name { margin-left: 10px !important; } } .mod_tituloDesc { p{ margin-top: 0; } .plugin_link { padding-left: 0; } } .page-destination .mod_doble .weather.col-xs-4 span a { padding-left: 0 !important; } } @media (max-width: 1024px) { .page-destination .mod_doble .weather.col-xs-4 span a { padding-left: 12%; } .weather .fragment.Children .design-generic { width: auto; } .weather .fragment.Children .design-generic .components .name { margin-left: 0; } } @media (max-width: 1399px) and (min-width: 1200px) { .page-destination .mod_doble .weather.col-xs-4 span a { padding-left: 20%; font-size: 20px; } } /*--------------Mallorca Ofertas--------------*/ .page-offers{ .offers.mod_tituloDesc{ padding-bottom: 50px; h1{ width: 100%; @media (max-width: 768px){ //margin-bottom: 0; } } } .mod_childrenVertical{ margin-top: 100px; .design-generic{ .components{ .components_contenido{ .name{ color: $color_2; font-size: 30px; font-weight: 600; } } } } @media (max-width: 768px){ padding-bottom: 0; margin-top: 20px; .components_contenido{ .name{ font-size: 18px !important; } .price_from{ font-size: 18px !important; } } } } } .design-j .child { border-bottom: solid 3px $color_2; } .design-j .child:nth-last-child(2) { border-bottom: none; } .children .item.design-j .image { width: 95%; } .design-j .child { padding: 60px 0; } .design-j .right_part { h2 { color: $color_2; font-size: 38px; text-align: left; margin-bottom: 20px; text-transform: capitalize; } h3 { color: $color_2; margin-top: 20px; text-transform: unset; } } .col-xs-offset-6 { margin-right: 0; } .design-j .btn { background: $color_2; font-size: 18px; color: #FFF; padding: 14.5px 30px 11.5px; width: auto; border-radius: 15px; margin-top: 135%; text-decoration: none; transition: background 0.2s; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } .design-j .left_part { width: 50%; } .design-j .right_part { width: 50%; } /*--------------Hotel-------------*/ .page-hotel, .page-destination { .AuxField1 h3 { margin-top: 35px; text-align: center; color: $color_2; font-size: 20px; padding-left: 32px; } .fragment.Files .enlace_descarga { border-top: 0; margin: 0 auto; max-width: 100%; //padding-left: 20%; padding-top: 0; line-height: 2em; &:hover, &:focus { color: $color_1; } } } .enlace_descarga { border-top: none; } .enlace_descarga { .pull-left { line-height: 120%; float: none !important; vertical-align: middle; } .filename { margin-left: 9px; margin-right: 0; display: inline-block; font-size: 15px; font-weight: 400; } } .fragment.GalleryCollage .item>.row { height: 600px; .collage-img { transition: opacity 0.2s; &:hover { opacity: 0.6; } } } .fragment.GalleryCollage .carousel-control { display: none; } .main-lista .fragment.LongDescription h2 { color: $color_2; font-size: 35px; text-align: left; padding-left: 3%; } .main-lista .fragment.LongDescription { padding: 60px 0 40px; } .main-lista .fragment.LongDescription ul { columns: 2; list-style: none; padding-left: 0; } .main-lista .fragment.LongDescription ul li { line-height: 150%; padding-left: 40px; padding-bottom: 5px; color: $color_3; font-size: 16px; &:before{ content: 'H'; color: $color_2; font-family: ROL-normal; font-size: 30px; padding: 5px; } } .main-lista .fragment.LongDescription ul { margin-top: 20px; } .fragment.GalleryCollage { margin-top: 10%; } .fragment.Hotel-Address .localUbicacion-icono, .fragment.Hotel-Address .localUbicacion-direccion, .fragment.Hotel-Address .coordenadas-icono, .fragment.Hotel-Address .coordenadas { display: inline-block; vertical-align: middle; padding-top: 25px; padding-bottom: 25px; color: $color_3; padding-left: 5px; font-size: 16px; line-height: 1.5em; } .fragment.Hotel-Address .coordenadas{ margin-right: -30%; } .fragment.Hotel-Address .coordenadas-icono{ margin-left: 30%; } .localUbicacion-icono, .coordenadas-icono{ img { width: 45px; height: 49px; } } .localUbicacion2{ display: inline-block; padding-left: 25%; } .localUbicacion { margin-left: 10%; width: 100%; display: inline; } .fragment.Hotel-Address .localUbicacion-direccion span { color: $color_3 !important; padding-left: 35px; font-size: 21px !important; line-height: 130%; } .fragment.Hotel-Adress { text-align: left; } .fragment.Hotel-Phone { font-size: 16px; color: $color_3 !important; font-family: $fuenteComun; text-align: center; margin-top: 35px; padding-left: 10%; } .fragment.Hotel-Phone:before { content: "s"; font-family: ROL-normal; margin-right: 13px; color: $color_3; font-size: 40px; position: relative; top: 8px; } .opinio { padding-top: 40px; padding-bottom: 50px; h3 { margin-bottom: 25px; } } .mod_opinion{ margin-top: 30px; margin-bottom: 50px; h2{ font-weight: 600; } .premi{ p{ display: inline-block; color: $color_3; padding-top: 20px; padding-bottom: 20px; line-height: 2em; img{ width: 50%; } } } } @media (max-width: 456px){ .page-hotel { .adres.col-xs-7 { .localUbicacion{ margin-left: 23% !important; } } } } @media (max-width: 684px) { .page-hotel { .adres.col-xs-7 { width: 100%; } } } @media (max-width: 768px) { .page-hotel { .fragment.Hotel-Phone { margin-top: 15px; } } } @media (max-width: 992px){ .page-hotel{ .adres.col-xs-7{ .localUbicacion{ display: inline-block; width: auto; margin-left: 0; } .localUbicacion2{ display: inline-block; padding-left: 0; } .adres.col-xs-5{ width: 100%; .fragment.Hotel-Phone{ padding-left: 0; } } } } } @media (max-width: 1200px){ .mod_opinion{ .premi{ width: 100%; } h2{ width: 15%; } } } .fragment.Hotel-OpinionsBody { text-align: center; width: 100%; justify-content: center; display: flex; } .fragment.GalleryCollage .imgs .icon_thumbnail { position: absolute; z-index: 1; right: 10px; top: 10px; width: 45px; height: 45px; background: url(https://s3-pro.roomonline.es/cobi/media/primasud.roomonline.es/images/icono_camara.png) no-repeat center center; opacity: 0.8; cursor: pointer; &:hover { opacity: 0.5; } } .fragment.Hotel-Map>div>div { height: 533px !important; } /*---------SERVICIOS-----*/ /*---------SERVICIOS mobile-----*/ @media (max-width: 768px) { .page-element { .mod_galeriaTexto { .restauracio.col-xs-4 { width: 100%; } .main-lista2 { width: 100%; padding: 20px; } } } } /*---------GASTRONOMIA-----*/ .main-lista2 { p { line-height: 170%; } h3 { color: $color_2; font-size: 26px; } h4 { color: $color_2; font-size: 20px; margin-top: 30px; padding-left: 50px; background-image: url(https://s3-pro.roomonline.es/cobi/media/primasud.roomonline.es/images/horas.png); background-repeat: no-repeat; background-position: left -3px; } ul li { line-height: 1.5em; padding-left: 35px; color: $color_3; font-size: 16px; margin-bottom: 3px; background-size: 25px; margin-bottom: 12px; } li:before { font-family: ROL-normal; content: "\H"; color: $color_2; font-size: 18px; margin-left: -25px; padding-right: 5px; } .fragment { margin-left: 20px; } } .main-lista3 { margin-top: 53px; margin-bottom: 50px; } .main-lista3 ul li { line-height: 150%; background: url(https://s3-pro.roomonline.es/cobi/media/primasud.roomonline.es/images/check.png) no-repeat -6px -7px; padding-left: 40px; padding-bottom: 5px; color: $color_2; font-size: 16px; text-align: left; } .main-lista2 ul { columns: 2; list-style: none; padding-left: 0; li { overflow: hidden; } } .main-lista3 ul { columns: 1; list-style: none; padding-left: 0; } .mod_galeriaTexto { padding-top: 100px; h2 { margin-bottom: 40px; } } .titol { padding-top: 60px; margin-bottom: 40px; } .bg14_header.hotel .top_menu>li>div.header_expansible_link { text-transform: uppercase; color: $color_3; font-family: $fuenteComun; font-weight: bold; font-size: 16px; display: block; margin-top: -10px; padding-bottom: 10px; &:hover, &:focus { color: $color_1 !important; } li a { color: $color_3; } a { &:hover, &:focus { color: $color_1; } } .submenu_wrap.as_list { li { a:hover { color: $color_1; } } } } .fragment.Header-Menu { display: inline-block; margin-top: 10px; .header_expansible_link{ a{ color: $color_1; } } } .page-rooms .item .right_part .action { display: none; } .page-rooms .main-lista2 ul { margin-top: 40px; } .fragment.GalleryCollage .item .row.no-margin.second { padding-top: 15px; padding-left: 15px; } .fragment.GalleryCollage .item .row.second { padding-left: 15px; } .fragment.GalleryCollage .item .row.no-margin.second .col-xs-6.no-padding.col.imgs:nth-child(2) { padding-left: 15px !important; } .Booking-LineForm .lineform select { height: auto; &:hover { opacity: 0.6; } } select.destination_hotel.form-control { background-color: #fff !important; } /*---------HABITACIONS-----*/ .page-rooms, .page-root-offers{ .fragment.Children{ .design-generic{ .components_contenido{ .name{ color: $color_2; font-weight: 600; font-size: 30px; line-height: 1em; } .short_description{ p{ color: $color_3; font-weight: 400; } } } } } } .page-root-offers{ .container.informacio{ margin-top: 0; h1{ margin-top: 50px; margin-bottom: 50px; } .texto{ p{ margin-bottom: 50px; color: $color_3; } } } .mod_descripcion{ margin-top: 70px; } } .page-rooms{ .mod_descripcion{ .fragment.Name{ h1{ margin-top: 50px; margin-bottom: 50px; }} .fragment.Hotel-RoomsDescription{ margin-top: 20px; margin-bottom: 20px; p{ text-align: center; color: $color_3; line-height: 2em; margin-bottom: 50px; } } } .mod_childrenVertical{ margin-top: 50px; } @media (max-width: 768px){ .mod_childrenVertical{ margin-top: 0; } .fragment.Children{ .design-generic{ .child{ padding-bottom: 0; } .components_contenido{ .name{ font-size: 18px; } li:before{ font-size: 20px; } } } } .mod_descripcion{ .fragment.Name{ h1{ margin-top: 20px; margin-bottom: 20px; font-size: 20px; } } .destipalma{ padding: 25px; p{ text-align: left !important; } } } } @media (max-width: 992px){ .fragment.Children{ .design-generic{ .child{ border-bottom: none; } } } } } .gallery-preview.design-a .icon { width: 50px; left: 85%; background-size: 55px; opacity: 0.5; } .design-h .child { padding: 70px 0 70px 0; } .design-h .right_part { h2 { color: $color_2; text-align: left; text-transform: capitalize; } } .page-rooms { .contingutcenter { p { span { font-size: 16px; font-family: $fuenteComun; color: $color_3; } } } } .page-rooms .child { border-bottom: solid 2px $color_2; } .page-rooms .child:nth-last-child(2) { border-bottom: none; } .page-rooms .item .right_part a { display: block; pointer-events: none; } .bg14_header.hotel .second_stripe { background-color: $color_2; padding-top: 0; } body:not(.is_editing) .header-wrap.headerfixed.big+* { padding-top: 111px; } .container.full-width-important { width: 100% !important; } .bg14_header .mobile_menu { display: none; } .select.destination_hotel.form-control:after { content: "\f107"; color: $color_2; font-family: "FontAwesome"; font-size: 40px; font-weight: bold; margin-left: 28px; } .main-footer { span.terms_text a { font-size: 12px; } p, span a { line-height: 10px; margin-bottom: 0; font-size: 14px; } } .main-footer .pie-enlaces2:last-of-type span a { display: block; } .fragment.Booking-LineFormWithPopup2 { .modal { .modal-body { .booking_form{ .mandatory_fields{ display: none; } } .title { p { text-align: center; } } .hasDatepicker:after { font-family: ROL-normal; content: 'X'; color: $color_2; } } } } .modal-dialog { margin: 0; } .modal-header { border-bottom: none; } .pop-contact-form-content { max-width: 350px !important; margin: -10px 16px; } /*---------afegit menu en linea-----*/ .fragment.Header-HotelsAndDestinations .header_expansible_link:first-child { display: none; margin-right: 30px; } .fragment.Header-HotelsAndDestinations .header_expansible_link:first-child:after { margin-left: 33px; } .weather .fragment.Hotel-Name p { font-size: 16px; color: #666666; } .bg14_header.hotel .second_stripe { background-color: $color_2; padding-top: 85px; } .menu-secundario.col-xs-7 { text-align: right; padding-left: 0; padding-right: 15px; } .service-icon { width: 100%; display: flex; justify-content: center; } .service-name { text-align: center; } .serveis img { height: auto; } .serveis .child.col-xs-3 { padding: 35px; height: 150px; } .fragment.Services { margin-top: 50px; margin-bottom: 50px; } .border-bottom { margin-left: 25%; border-right: 1px solid $color_2; position: absolute; height: 80%; margin-top: 37px; float: left; } .border-bottom2 { margin-left: 50%; border-right: 1px solid $color_2; position: absolute; height: 80%; margin-top: 37px; float: left; } .border-bottom3 { margin-left: 75%; border-right: 1px solid $color_2; position: absolute; height: 80%; margin-top: 37px; float: left; } .border-top { border-top: 1px solid $color_2; margin-top: 37px; } .border { margin-top: -237px; width: 100%; } .bg14_header .top { background-color: #fff !important; padding: 0; .fragment.Slider{ padding-top: 50px; @media (min-width: 992px) { padding-top: 85px; } } } /*--------------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: 34px; color: #000000; background-color: #FFF; } .newsletter-subscription .input-group-addon .btn { border: 0; background-color: $color_2; color: #fff; border-bottom-right-radius: 8px; border-top-right-radius: 8px; border-width: 10px 0; height: 34px; padding: 5px 20px 3px 20px; font-size: 10px; text-transform: uppercase; transition: background 0.2s; &:hover, &:focus { background: $color_1; } &: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: 10px; border-top-left-radius: 10px; } /*--------------menu hotel---------------*/ .bg14_header .bg14_menu { margin-top: 0; } .bg14_header .top a { margin-right: 0; } .bg14_menu .top_menu>li { padding: 0; } .bg14_logo { position: absolute; } .bg14_header { background-color: #fff; background-position: left bottom; box-shadow: none; } .fragment.Booking-Lineform { margin-top: 50px; } /*--------------menu desti, enmig---------------*/ .fragment.Header-Menu a { margin-right: 9px; padding: 0; } .fragment.Header-HotelsAndDestinations .header_expansible_link:last-child { margin-right: -5px; @media (max-width: 1210px){ top: -2px; } a:hover{ color: $color_1; } } .browser-firefox .fragment.Header-HotelsAndDestinations .header_expansible_link:last-child { margin-right: 0; } /*--------------menu mobile---------------*/ .menu-mobile{ .right{ padding-top: 10px; } button#dropdownLanguage span{ line-height: 1em; font-size: 10px; text-transform: capitalize; &:after{ content: '+'; color: $color_2; text-transform: none; font-family: ROL-normal; font-size: 10px; margin-left: 5px; } } } .cmslanguageselector_plugin{ .dropdown{ span.label:hover{ opacity: 0.8; } } } .cabecera_mobile .col_telfMob .fragment.Booking-LineFormWithPopup2 .inline-hotel-form > .row > [class*=col-]{ display: none; } .cabecera_mobile .col_telfMob .fragment.Booking-LineFormWithPopup2 .inline-hotel-form > .row > [class*=col-]:last-child{ display: block; width: 100%; } .cabecera_mobile{ p.btn.btn-primary.booking-header-phone-button{ display: none; } } .bg14_header .top .mobmenu .dropdown_content a { padding: 10px 0 10px 25px; display: block; margin-right: 0; font-size: 14px; text-transform: initial !important; } a.link_dropdown:after { content: "\f107"; font-family: FontAwesome; float: right; } .Booking-LineForm .lineform a.toggle-allocations { background-color: #fff !important; } .Booking-LineForm .lineform a.toggle-allocations:after { content: '+'; font-family: ROL-normal; float: right; padding: 5px; line-height: 1em; &:hover { opacity: 0.6; } &:active { box-shadow: none; } } .mod_ofertes .offer-data { position: relative; margin-right: 0; padding-bottom: 0; bottom: 0; right: 0; } /*--------------menu desplegable mobile---------------*/ .right.col_lineaReserva.col-xs-12{ background-color: $color_2; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; text-transform: uppercase; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-top: 0; &:hover{ background-color: $color_1; } span{ // padding-top: 6px; // padding-bottom: 6px; display: flex; width: 100%; height: 100%; a{ color: $color_imgs !important; font-weight: 400; font-size: 20px; flex-basis: 100%; display: flex; align-items: center; justify-content: center; } } } .fragment.Booking-LineFormWithPopup2 .modal-dialog .modal-content { margin-top: 10px; .modal-body { .container { padding-left: 0; padding-right: 0; hr { display: none; } } .loyalty_user_layout{ p.h4{ padding: 5px 10px; font-size: 15px !important; } p{ padding: 5px 10px; font-size: 12px !important; } } .row.promotion{ padding-top: 10px; } } } .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .date_from_parent::after, .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .date_to_parent::after{ content: "X"; font-family: Rol-normal; color: $color_2; font-size: 30px; position: absolute; top: 15px; right: 23px; pointer-events: none; } .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .destination_hotel_parent::after, .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .search-form::after, .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .adults_select::after, .fragment.fragment.Booking-LineFormWithPopup2 .modal .modal-dialog .modal-body .children_select::after{ content: "+"; font-family: Rol-normal; font-size: 12px; position: inherit; right: 15px; pointer-events: none; color: #77777a; top: -42px; float: right; } .line_dropdown a.remember_popup_link, .fragment.Booking-LineFormWithPopup2 form div:nth-child(4) a{ color: $color_2 !important; padding: 5px 10px; margin-bottom: 15px; &:hover{ color: $color_1 !important; } } .menu-mobile.menuppal.is_active { .plugin_link.reservar_menu_mob { background: $color_2; font-size: 18px; display: block; color: #FFF; text-align: center; padding-bottom: 20px; padding-top: 20px; padding-left: 0; padding-right: 0; margin-right: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; a { color: #fff !important; } } } .fragment.Booking-LineFormWithPopup2 .design-c .inline-hotel-form { width: 100%; .btn:hover { color: $color_1; } .col-xs-8.col-sm-9{ display: none; } .col-xs-4.col-sm-3{ width: 100%; } } .fragment.Booking-LineFormWithPopup2 .modal .modal-body .container .title p { color: $color_2; } .fragment.Booking-LineFormWithPopup2 .modal div[class^="col-"] { padding-left: 7px; padding-right: 7px; select{ -webkit-appearance: none !important; } } .fragment.Booking-LineFormWithPopup2 .modal.design-a .nights { width: 100%; margin-bottom: 2%; } .fragment.Booking-LineFormWithPopup2 .modal .modal-body .container .hasDatepicker { margin-bottom: 2%; } .fragment.Booking-LineFormWithPopup2 .modal-dialog .lineform_popup .room-index { display: block; margin-bottom: 5px; color: $color_2; } .authenticate_wrapper { display: none; } .fragment.Booking-LineFormWithPopup2 .modal .modal-body .container .btn { background: $color_2 !important; font-size: 18px; color: #FFF; border-radius: 4px; transition: background 0.2s; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } .fragment.Booking-LineFormWithPopup2 { .modal { .modal-body { top: 25px; margin-bottom: 25px; .booking_form { .promotion { .book { border-radius: 5px; background-color: $color_2; color: #fff; &:hover{ background-color: $color_1; box-shadow: none; color: $color_imgs; } } } } } } } .fragment.Booking-LineFormWithPopup2 .modal-dialog .modal-header { padding-top: 5px; padding-right: 20px; .close span { font-size: 15px; color: $color_2 !important; opacity: 1; margin-top: 25px; &:hover, &:focus { color: $color_1; } } } hr { border-top: none; } .fragment.Booking-LineFormWithPopup2 .modal-dialog .modal-header .close i { font-size: 35px; margin-left: 5px; } .banda.search-hotel.lineform.design-a.hidden-xs.hidden-sm { position: fixed; z-index: 400; } @media (min-width: 768px) { .fragment.Booking-LineFormWithPopup2{ .modal{ .modal-dialog{ width: 450px; margin: 30px auto; } } } } /*--------------Pasos reserva---------------*/ @media (max-width: 992px) { .lineform.design-c{ .inline-hotel-form { margin-top: 10px; background-color: $color_imgs !important; } } .container.form_popup.hidden-lg.hidden-md{ padding-top: 51px; .col-xs-12{ padding-left: 0; padding-right: 0; background-color: $color_2; color: #FFF; margin-right: 0; text-decoration: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; text-align: center; } .book_modify{ a{ line-height: 55px; display: flex; justify-content: center; &:hover{ color: $color_1; } } } } } .fa-calendar:before { content: "X" !important; font-family: ROL-normal !important; color: $color_2; font-size: 23px; line-height: 0.7em; } .book.rooms .booking-total-price span { color: $color_3 !important; } .book.rooms .booking-total-price span.price.exchange{ color: $color_2 !important; margin-left: 10px; font-weight: 400; } .book.rooms .list-item.room-item.selected~button { display: none; } .popover { h2, h3 { font-size: 18px; } } .popover-content { li { margin-bottom: 5px; } .pull-right:not(.btn) { color: $color_1 !important; padding-left: 10px; &:hover, &:focus { color: $color_2 !important; } } } .modify-booking { form>h4 { padding-left: 5px; padding-right: 5px; } .btn { margin-left: 5px; margin-right: 5px; } } .bookpopup { position: fixed; z-index: 400; } span.total-price.complete-booking-price { color: $color_2 !important; .price.real-price { color: $color_2 !important; } } .titulo_busqueda { margin-top: 150px; h1, h2 { text-align: left; font-size: 24px; margin-bottom: 5px; display: none; } } .modif_form { margin-top: 40px; } .booking-process.book *:not(.fa) { font-family: $fuenteComun; } .bookiing-process .darkbox .ex-container .col-sm-2{ display: block; } #generic_slide_1430 { padding-top: 100px; } .modif_form { margin-top: 0; } .booking-process.book .fragment.Booking-CurrencySelector strong { font-weight: bold; color: $color_3; } .booking-process.book .fragment.Booking-CurrencySelector .title { font-size: 18px; color: $color_3; } .fragment.Booking-Steps .booking_stepper .label_container span.active { color: $color_2 !important; } .fragment.Booking-Steps .booking_stepper .steps_container div .bstep.active.solid { background: $color_2; color: #FFF !important; border: solid 1px $color_2; } .fragment.Booking-Steps .booking_stepper .steps_container div .bstep.active { border: solid 1px $color_2; color: $color_2 !important; } .fragment.Booking-Steps .booking_stepper .progressbar_container .progress-bar { background: $color_2; } .fragment.Booking-CurrencySelector { cursor: pointer; text-align: right; margin-bottom: 20px; } .booking-process.book .sortedRooms .room-name { color: $color_2; font-weight: 400; font-size: 18px; margin-top: 20px; margin-bottom: 15px; line-height: 130%; text-transform: capitalize; &:hover{ color: $color_1; } } .booking-process .btn.book-now, //.book.complete .extras .extra-item .background .btn, .booking-process .btn.complete-book { transition: background 0.2s; &:hover { background: $color_1; } } .booking-process.book .sortedRooms .room-item.selected { .fa, *, span { color: $color_2 !important; } } .sortedRooms .room_group.row .col-xs-12.col-sm-6 input[type=radio] { content: ""; display: inline-block; width: 14px; height: 14px; background-color: #fff; border: 1px solid $color_2; border-radius: 12px; vertical-align: middle; margin-top: 3px; cursor: pointer; } .sortedRooms .room_group.row .col-xs-12.col-sm-6 input[type=radio]:checked:before { content: "."; color: $color_2; font-size: 0; line-height: 15px; border-radius: 49px; padding: 3px; background-color: $color_2; margin-left: 4px; position: relative; top: -10px; } .booking-process.book .list-item.room-item .col-xs-12 { padding-left: 10px; @media (min-width: 991px) { &.col-sm-6 { &:first-child { width: 40%; } &:last-child { width: 60%; } } } } .booking-process.book .hab-options { h2, h2 strong { font-size: 28px; font-weight: 600; } .list-item.room-item>.row>[class*="col-"] { padding-left: 0; } .col-sm-3.section { margin-top: 10px; } h3.section { margin-top: 40px; } .gallery-preview.design-a .icon { left: 80%; } } .booking-process.book .sortedRooms .room-item .availability-message { display: block; margin-left: 0; color: $color_2; font-weight: bold; } .booking-process .btn.book-now { background-color: $color_2; font-family: $fuenteComun; border-radius: 5px; } .booking-process.book.rooms .room_group button { font-size: 16px; } .booking-process.book .total-row .price { font-family: $fuenteComun; font-size: 30px; color: $color_2; font-weight: bold; } .book .items .room-item .daily-price .price-daily { font-size: 19px; } .book .items .total-row .col-sm-6:first-child { display: none; } .book.rooms .booking-total-price { width: 100%; text-align: center !important; } .booking-btn-container .col-xs-push-10 { left: 0 !important; } .rooms.items.container .row.booking-btn-container { justify-content: center; display: flex; width: 100%; } .booking-process.book .sortedRooms .room_group:first-child { padding-top: 0; } .booking-process.book .sortedRooms .room_group { padding-top: 40px; padding-bottom: 40px; margin-bottom: 0; } .room_list { padding-left: 15px; padding-right: 15px; padding-top: 5%; } .room_list h1 { font-size: 36px; text-align: left; margin-top: 30px; color: #666666; } .room_list h2 { font-size: 30px; text-align: left; } .room_list .fragment.Hotel-Name p { font-size: 28px !important; color: $color_1; margin-bottom: 0; } .booking-process.book .sortedRooms .room-item * { font-size: 16px; display: inline-block; } .fragment.Booking-Steps { margin-top: 40px; } .booking-process.book { .titulo_busqueda { margin-top: 0; h1 { display: none; } } } @media (max-width: 991px) { .booking-process{ .cont_tituloReserva{ padding: 30px 15px 100px; .list-item > .col-xs-12:last-child{ width: 100%; padding-top: 15px; } } .top { .fragment.Slider { padding-top: 0; } } } } /*--------------Paso 3---------------*/ .book.complete .extras { padding-top: 40px; display: block; * { color: $color_2; } .title { font-weight: 400; } .extra-item .background { >div, >p { padding: 5px; height: 28px; &.name { margin-top: 10px; font-size: 18px; } } .extra-image { height: 200px; } .btn { height: 50px; color: $color_2; //background: $color_2; background-color: transparent; border-radius: 10px; text-align: center; } } } .book.complete .extra-popup { *:not(.btn) { color: $color_2; } .name { margin-top: 5px; margin-bottom: 5px; font-weight: bold; } .btn { background: $color_2; &:hover, &:focus { background: $color_1; } } .close_popup { top: 5px; right: 5px; &:hover { opacity: 0.8; } } } .booking-process.book .Booking-ConfirmForm strong { font-weight: bold; } .form-group{ input.enterVerify{ width: 48%; @media (max-width: 560px) { width: 100%; } } .form-control { font-weight: normal; height: 30px; } } .open>.dropdown-menu { display: block; right: 0; width: 100px; text-align: center; } .booking-process.book .Booking-ConfirmForm .room_total_price { padding: 15px; margin-top: 10px; .text-right { color: $color_3; span { color: $color_2; } } span.total_room_label { font-weight: 600; margin-left: -14px; color: $color_2; } } .booking-process.book .Booking-ConfirmForm .room_total_price .total-price { .real-price { font-weight: bold; font-size: 28px; } .price-fx-info { color: $color_1; } } .list-item.room-item { margin-top: 35px; .pull-right{ display: inline-block; } } .book.complete .total-price a { margin-left: 10px; } .booking-process.book .Booking-ConfirmForm .user_data { border-top: solid 1px $color_3; padding: 50px 0; margin-top: 50px; } .book .Booking-RoomList .room-item .open-calendar .fa { color: $color_2; margin-left: 10px; &:hover:before { color: $color_1; } } .booking-process { .room_list { .Hotel-Name { strong { color: $color_2; } span { color: $color_2 !important; } } } .fragment.Breadcrumbs{ display: none; } } .Booking-ConfirmForm { .user_data_fields { label { color: $color_3 !important; } } .summary { line-height: 2.5em; padding-top: 30px; padding-bottom: 30px; } .rooms.items { border-top: 1px solid $color_3; .room_name { span { color: $color_2 !important; } } .row_cancellation{ p.room_cancellation{ color: $color_3; margin-top: 5px; font-size: 10px; } } .row_board{ .col-xs-12{ span{ font-size: 16px; } } } .row_pax{ padding-bottom: 10px; } } .row_room_and_price { .text-right { color: $color_3 !important; span { color: $color_3; } } } .row_pax .col-xs-12 { color: $color_3 !important; } .row_board .col-xs-12 { color: $color_3 !important; } .row_cancellation .col-xs-12 { color: $color_3 !important; font-size: 12px !important; } } .booking-process.book .Booking-ConfirmForm .user_data .section { margin-left: 17px; } .darkbox { #id_pay_at_hotel, #id_pay_now { display: block; } input[type=radio]+label { background-image: none; display: none !important; } } .booking-process.book .Booking-ConfirmForm .user_data .section+p { margin-top: 15px; margin-left: 18px; } .booking-process.book .Booking-ConfirmForm .rooms.items>.row-fluid>.col-sm-12 { border-top: solid 1px $color_3; padding-top: 25px !important; padding-bottom: 30px !important; margin-top: 50px; margin-bottom: 50px; } .booking-process.book .Booking-ConfirmForm .rooms.items>.row-fluid h2.section { margin-top: 25px; text-align: center; } .booking-process.book .Booking-ConfirmForm .rooms.items>.row-fluid h2.section .real-price { font-size: 36px; } .darkbox { background-color: #fff !important; } .darkbox a { color: #aaa; } .ex-container { .col-sm-8 { display: flex; width: 100%; justify-content: center; } } .booking-process.book .Booking-ConfirmForm .rooms.items>.row-fluid p { margin-top: 30px; text-align: center; } .require_offers, .link_conditions { width: 445px; max-width: 100%; margin: 0 auto; [type="checkbox"] { vertical-align: middle; margin-top: 0; margin-bottom: 2px; } } .darkbox a.cvc-popup { color: $color_2; &:hover { color: $color_1; } } .fragment.Booking-ConfirmForm .link_conditions a { color: $color_2 !important; font-size: 14px; &:hover { color: $color_1; } } .booking-process .btn.complete-book { background-color: $color_2; border-radius: 5px; margin-right: auto; margin-left: auto; margin-top: 30px; float: none !important; display: block; } /*--------------calendario---------------*/ body.calendar th { color: #fff; } body.calendar div.month { line-height: 32px !important; margin-bottom: 0; background-color: rgba(241, 241, 242, 0.3); color: $color_2; font-family: $fuenteComun; } body.calendar { table { border-collapse: inherit; } } body.calendar .weekdays th { padding: 5px; } 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; } .ex-container label { color: $color_2; } .allocations-container .ex-container th { color: $color_2 !important; } body.calendar.internal .allocations-container { position: absolute !important; bottom: 40px; background-color: #f1f1f2; } body.calendar .calendar-day.status-disabled { background-color: rgba(241, 241, 242, 0.3); //color: GrayText; } body.calendar .calendar-day.status-unavailable { color: white; } body.calendar .calendar-day.status-offer { color: white; background-color: $color_1; } body.calendar .calendar-day>div { //border: none !important; //border-radius: 2px; padding: 10px; } body.calendar .calendar-day.selected > div{ border-color: transparent !important; padding: 10px; } .ui-state-default { height: 35px; text-align: center; padding: 9px; border: 0; background: none; } /*--------------Reserva Resum---------------*/ .fa-print { font: normal normal normal 14px/1 FontAwesome; font-size: 30px; text-rendering: auto; width: 3%; margin-right: 25px !important; } .fa.fa-3 { font-size: 30px; margin-top: 5px !important; &:hover, &:focus { cursor: pointer; opacity: 0.6; } } .actions { display: flex; justify-content: center; margin-top: 40px; margin-bottom: 40px; } .popover .btn { border-radius: 13px; background: $color_2; border: none; &:hover, &:focus { background: $color_1; } } .bono .container p{ margin: 0; } .bono .actions .btn { display: inline-block; max-width: 25%; background: $color_2; border-radius: 13px; display: flex; justify-content: center; transition: background 0.2s; &:hover, &:focus { background: $color_1; } &:active { box-shadow: none; } } .bono .actions .save-as { font-weight: normal; font-size: 1.2em; background: $color_2; width: 25%; color: #fff; padding-top: 14px; padding-bottom: 14px; text-transform: uppercase; border-radius: 13px; text-align: center; &:hover, &:focus { background: $color_1; } } .bono .actions>* { margin: 0 5px; } .bookin_resum { margin-top: 150px; } .actions img { display: none; } /*--------------menu mobile fix---------------*/ @media (max-width: 768px) { .booking_search_form_container { width: auto; } } .bg14_header .top .menu_mob .btn_list { padding: 10px 0 0; } .effect { border-bottom: solid 1px $color_3; } .Header-MobileMenu .link_miReserva a, .Header-MobileMenu .btn_list .effect a { display: block; padding: 15px 20px 14px !important; font-size: 18px; margin-right: 0; } .Header-MobileMenu { .hotel_name { display: none; } } .mobmenu .fragment.Header-MobileMenu .top_menu { >li { padding: 9px; margin-top: 5px; float: none; border-bottom: 1px solid $color_3; } .submenu_wrap.as_list li:not(:last-child) { margin-bottom: 15px; } } .mobmenu.col-xs-12 { .top_menu.nav.navbar-nav { margin: 0; width: 100%; } } .mobmenu1.col-xs-12 { padding: 0 10px; span.ofertas_mob{ a{ display: block; padding: 15px 20px 14px !important; font-size: 18px; margin-right: 0; } } .Header-HotelsAndDestinations { .header_expansible_link { padding: 0; } } } .modal-backdrop.in { //position: initial; z-index: auto; opacity: 0.8; } .menuppal.is_active { transform: translate3d(0, 0, 0); overflow: auto; top: 74px; } .menuppal { background-color: rgba(255, 255, 255, 0.95); bottom: 0; height: 100%; left: 0; overflow-y: scroll; position: fixed; top: 0; transform: translate3d(0px, -100%, 0); transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s; width: 100%; z-index: 100; } /**************************************************************************/ /**FIN sitedata**/ /**************************************************************************/ /*Arreglo slider*/ body:not(.is_editing) .top.headerfixed+* { padding-top: 85px; } @media (max-width: 992px) { body:not(.is_editing) .top.headerfixed + *{ padding-top: 35px; } } /****************************************************/ /*****menu hamburguesa*****/ .container.cabecera_mobile{ z-index: 101; position: fixed; background: #fff; box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3); width: 100% !important; top: 0; .col_telfMob{ padding-right: 15px; display: flex; flex-direction: row; float: none; align-items: center; justify-content: flex-end; height: 50px; padding-top: 5px; .plugin_link.mobile_menu_button.active{ a:before{ content: "©"; font-family: Rol-normal; font-size: 40px; color: $color_3; line-height: 1em; } } .popup_plugin.market_telephone{ height: 20px; text-transform: none !important; &:before{ content: "s"; font-family: ROL-normal; color: #77777a; font-size: 35px; position: relative; } } } } .mobmenu { .fragment.Header-Menu { display: block; margin-top: 35px; line-height: 2.5em; } } .container.menu-mobile.menuppal .right.col-xs-12 .cmslanguageselector_plugin { float: right; padding-bottom: 10px; &:hover, &:focus { #dropdownLanguage { box-shadow: none; .label, .caret:before { color: $color_1; } } } } .container.menu-mobile.menuppal .right.col-xs-12 .mybooking_plugin { float: right; font-weight: 200; } .container.menu-mobile.menuppal .cmslanguageselector_plugin #dropdownLanguage { background-color: transparent !important; padding: 7px 10px 4px !important; } header.bg14_header .top a.mybooking_plugin:before { content: "\f0f2"; font-family: FontAwesome; margin-right: 9px; color: $color_3; font-size: 15px; } .container.menu-mobile.menuppal.is_active { top: 50px; width: 100%; .right { span.bienvenidaMenu{ float: none; position: absolute; padding: 8px; margin-left: 15px; p{ font-size: 16px !important; color: $color_3; } } } .plugin_link.link_miReserva { display: block; text-align: right; padding-top: 9px; a { padding-right: 10px; border-bottom: none; &:hover, &:focus { color: $color_1; } } } .caret { display: none !important; } .mobmenu1{ a.club_menu_mobile{ color: $color_2; display: block; padding: 15px 20px 14px; margin-right: 0; border-bottom: solid 1px $color_3; border-top: solid 1px $color_3; } } } .bg14_header { .top { .mobmenu { .header_expansible_link { color: $color_3 !important; } .Header-Menu { .top_menu>li { float: none; padding: 9px; margin-top: 15px; border-bottom: 1px solid $color_3; } } } } } /****my booking****/ .mypopup .my_booking_popup { form>div { margin-bottom: 10px; text-align: center; color: $color_3; } label { padding-top: 5px; padding-bottom: 5px; font-weight: 100; } .error { overflow: hidden; span { display: block; margin-bottom: 10px; line-height: 120%; } a { color: $color_2; text-decoration: underline; font-size: 18px; &:hover, &:focus { text-decoration: none; } } } } .mypopup .my_booking_popup input[type=text] { width: 100%; height: 30px; margin-top: 5px; } /****contacto****/ .mypopup .pop-contact-form-content { p.h3{ color: $color_2; font-weight: 600; } .terms_and_conditions { margin-top: 10px; margin-bottom: 5px; span { a { color: $color_3; font-size: 12px; } a:hover { color: $color_2; } } } input { border-radius: 5px; height: 28px; width: 100%; border: 0.5px solid $color_3; color: $color_3; } select { border-radius: 5px; border: 0.5px solid $color_3; color: $color_3; height: 28px; } textarea { border-radius: 5px; border: 0.5px solid $color_3; color: $color_3; } } .mypopup .pop-contact-form-content select:after { content: '\f107'; } .mypopup .pop-contact-form-content input[type=checkbox] { width: 14px; height: 15px !important; margin-top: 0; vertical-align: middle; &+span { font-size: 12px; color: $color_3; } &+span p { font-size: 12px; color: $color_3; } } .mypopup .pop-contact-form-content form p.requiered-fields { font-size: 1em; margin-top: 15px; } /*****datepicker****/ .ui-corner-all { border-bottom-right-radius: 0; border-bottom-left-radius: 0 !important; } .ui-widget-content .ui-state-default { color: $color_3; background: none; } .ui-widget-content { .ui-state-highlight, .ui-state-hover, .ui-state-active { background: $color_2 ; color: $color_imgs; border-radius: 20px; line-height: 2em; font-size: 13px; } } .ui-datepicker-calendar thead th { background: $color_imgs; } .ui-datepicker td span, .ui-datepicker td a { text-align: center !important; } /****select idioma****/ .open>.dropdown-menu { padding-right: 7px; } .dropdown-menu>li.lang>a { font-weight: bold; } /****precio €****/ .booking-process .room_list .fragment.Booking-CurrencySelector .open>.dropdown-menu { left: unset; } .browser-iexplorer .booking-process .room_list .fragment.Booking-CurrencySelector .open>.dropdown-menu { left: 78%; } /****menú****/ /*****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, .calendar.internal .ex-row, .calendar.internal .footer-form { background-color: #fff; padding: 0 !important; } .footer-form .inline-hotel-form input.hasDatepicker { width: 95%; display: block; border-radius: 3px !important; line-height: 1.8em !important; height: 1.8em !important; } .footer-form .col-xs-2 input { height: 1.8em; border-radius: 3px; } .calendar.internal .inline-hotel-form .toggle-allocations { margin-left: 5px; background: rgba(0, 0, 0, 0) url(https://s3-pro.roomonline.es/cobi/media/dc-79/images/desplegable_abajo22.png) no-repeat 96% center; background-color: rgba(0, 0, 0, 0); background-size: auto auto; background-size: 5%; background-color: #fff; border-radius: 3px !important; width: 60% !important; margin-top: 20px !important; } .calendar.internal .inline-hotel-form .ex-container .col-sm-4 { float: right !important; } .calendar.internal .inline-hotel-form button.btn.book { margin-top: 1px; border-radius: 5px; height: 29px; line-height: 2px; } .inline-hotel-form.offer-calendar-form #allocations select { border-radius: 0; width: auto; } .inline-hotel-form.offer-calendar-form { .ex-row { .col-sm-7 { display: none; } .ex-container { .row { width: 240%; } .col-sm-8 { display: none; } } } } body.calendar.internal .allocations-container { bottom: 70px; background-color: #fff; } body.calendar.internal .allocations-container select.select_adults, body.calendar.internal .allocations-container select.select_children { width: 90%; } /*****iconos proceso reserva*****/ .book .items .room-item.unavailable .board { &:after { content: "\f05a"; font-family: "FontAwesome"; font-weight: normal; // color: red; font-size: 15px; margin-left: 8px; vertical-align: top; } &:hover { color: lighten(#C45556, 15%) !important; cursor: pointer !important; } } .booking-process.book .sortedRooms .room-name { &:after { content: "\f05a"; font-family: "FontAwesome"; font-weight: normal; // color: red; font-size: 15px; margin-left: 8px; vertical-align: top; text-decoration: none; } } .booking-process.book .sortedRooms .room-name { text-decoration: none; } /****tu reserva****/ .mypopup .my_booking_popup p.h3 { font-size: 22px; padding-top: 9px; color: $color_2 !important; } /****llámanos****/ .mypopup .telfcont p { text-align: center; color: $color_3; } .mypopup{ .specialpopup.menumobile{ .telfcont{ h2{ margin-top: 10px !important; } } } } .mypopup .telfcont h2 { margin-top: 5px; margin-bottom: 15px; } /**edad niños BookingLineForm**/ .children_select { display: table-cell !important; } td.children_ages_container { float: left; margin-left: -2px; } /************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: 15px; overflow: hidden; color: $color_2 !important; } &:nth-child(3n+3) { padding-left: 4px; } } } @media (max-width: 992px) { .mod_galeria .col-xs-12:nth-child(3n+3) { padding-left: 5px; } } /****************Lugares de interés***********************/ .mod_comoLlegar { padding-top: 40px; padding-left: 0; padding-right: 0; .col-xs-12 { padding-left: 15px; padding-right: 15px; } h2 { margin-bottom: 30px; } .selector { max-width: 100%; margin-left: 35%; margin-right: auto; select { float: left; width: auto; margin-right: 1%; height: 30px; &:hover, &:focus { opacity: 0.6; } } a { width: 130px; margin-left: 1%; height: 30px; padding-top: 15px; background: $color_2; border: none; border-radius: 5px; line-height: 2px; font-size: 14px; &:hover, &:focus { background-color: $color_1; } a:hover { background-color: $color_1; } } @media (max-width: 768px){ .selector.form-group{ width: 100%; margin-left: 0; select{ width: 100%; float: none; } a.btn{ width: 100%; margin-top: 20px; } } } } .fragment.Element-HowToGetThere .map { height: 533px; } a.btn.btn-primary.route_details { background-color: $color_2; width: 10%; border-radius: 5px; margin-left: 45%; height: 50px; margin-top: 20px; padding-top: 15px; border-color: #46949d; } } /***********aviso legal***********/ .page-element-d { .fragment.Name { h1 { text-align: center; padding-bottom: 60px; padding-left: 0; width: 100%; } } h2{ text-align: left; font-size: 16px; font-weight: 600; } h4 { color: $color_2; } p{ margin-bottom: 40px; text-align: left; } ul { padding-top: 20px; } li { line-height: 30px; font-family: $fuenteComun; color: $color_3; font-size: 12px; } } @media (max-width: 992px) { .room_list { padding-bottom: 40px; .fragment.Hotel-Name p { font-size: 18px !important; } .Booking-CurrencySelector { display: none; } } .booking-process.book .sortedRooms .room_group:first-child { padding-top: 40px; } .bg14_header .top .picturebanner-link img { height: 45px; width: auto; max-width: 100%; margin-top: 5px; } .menu-mobile.menuppal.is_active a { color: $color_3 ; } .plugin_link.mobile_menu_button a:before { content: "\f0c9"; font-family: "FontAwesome"; font-size: 30px; color: $color_3; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; } h1 { font-size: 35px; } h2{ margin-top: 50px ; margin-bottom: 30px ; } } /***RESPONSIVE***/ @media (max-width: 320px) { .booking-process .room_list .room_total_price { padding: 15px !important; } } @media (max-width: 456px) { .foot_newsletter { form { input { width: auto; } } } .booking_search_form_container { a.toggle-allocations:after { margin-left: 90px; line-height: 0em; } } .adres.col-xs-5 { width: 100%; float: none; } .adres.col-xs-7 { .localUbicacion2{ width: 100%; } } .fragment.Hotel-Phone { text-align: center; padding-left: 0; padding-bottom: 20px; } .book .items .room-item .select-board-code { font-size: 12px; width: 100%; } .booking-process .darkbox .ex-container { padding-left: 10px; padding-right: 10px; width: 95%; } .design-j .btn { padding: 10px 10px; width: auto; border-radius: 5px; margin-left: -10px !important; font-size: 14px; } .children .item.design-h .right_part { padding: 0 20px !important; } } @media (max-width: 768px) { .booking-process.book .Booking-ConfirmForm [class*="col-"] { justify-content: center; } .foot_newsletter{ .newsletter_box{ p{ //width: 100%; text-align: center; font-size: 14px !important; } h2{ text-align: center; font-size: 20px; float: none; } } } } @media (max-width: 768px) { .container.pie-enlaces{ span.plugin_link{ display: block; } .general_info{ span{ padding: 5px; } } } .carousel-control.left, .carousel-control.right { display: none; } .main .generic_slide_plugin.image-type { display: none; } .page-offers { .fragment.Children { .col-xs-4.left_part { padding-left: 0; padding-right: 0; } } .design-j .child { padding: 20px 0; } .children .item.design-j .image { width: 100%; } .design-j .right_part h2 { text-align: center; font-size: 18px; margin-top: 30px; } .design-j .btn { padding: 10px 10px; width: auto; border-radius: 5px; font-size: 14px; } } h1 { font-size: 20px; width: 100% !important; } h2 { font-size: 18px; text-transform: uppercase; } p, h4, li { font-size: 12px !important; } .foot_newsletter { .form-group { width: auto; } } .fragment.Hotel-Address .localUbicacion-direccion { font-size: 14px; } .container.habitaciones { .col-xs-6 { width: 100%; } } .page-rooms .child { border-bottom: none; } .children .item.design-h .right_part h2 { font-size: 20px; text-align: center; padding-bottom: 20px; padding-top: 20px; } .main-lista2 ul li { background-size: 23px; } .contingutcenter { text-align: left; padding: 20px; } .main-lista2 .fragment { margin-left: 0; } .main-lista2 { h3 { text-align: center; } h4 { font-size: 20px !important; background-position: left -3px; } } .fragment.LongDescription { .gastronomia>p span { font-family: $fuenteComun; font-size: 16px; color: $color_3; } } .restauracio.col-xs-6 { width: 100%; padding-right: 0; padding-left: 0; } .page-element-a { .main-lista2.col-xs-6 { width: 100%; padding: 15px; } } .page-element-c{ .mod_tituloDesc{ h1{ width: 100%; } .ShortDescription{ p{ padding: 25px; } } } .mod_comoLlegar{ > .row{ margin: 0; } .selector.form-group{ margin-left: 0; select.form-control{ width: 100%; } a{ width: 100%; margin-top: 10px; margin-left: 0; } } } } .destipalma { text-align: left; } .mod_galeriaTexto { padding-right: 0; padding-left: 0; h2 { font-size: 26px; } } .mod_galeria { .col-xs-12 { p { font-size: 20px !important; height: 60px; } .fragment.AuxField1 { display: none; } } } .page-destination { .weather.col-xs-4 { width: 100%; .plugin_link { text-align: center; } } } .calendar.internal .inline-hotel-form .ex-container .col-sm-4 { float: left !important; margin-left: 25%; } .calendar.internal .content-container.container { padding: 7px; } .design-h .child { padding: 40px 0 40px 0; } } @media (max-width: 817px) { .mod_children { padding: 0; .row.children.design-generic { margin-right: 0; margin-left: 0; .child.col-xs-12 { padding-right: 0; padding-left: 0; .aux_field_2 { padding: 15px; } } } h2 { padding-top: 40px; } } .foot_newsletter.col-xs-9 { width: 100% !important; padding-right: 5%; } .destipalma.col-xs-12 { margin-top: -30px; padding: 15px; } .contingut { padding: 15px; margin-top: -40px; } .home { .generic_slide_plugin { .carousel-control{ background: none; &:hover{ background: none; } } .item { .wrapper { .text_slide { p { font-size: 30px !important; //text-align: center; } } } } } .informacio { margin-top: 50px; .lista_ventajas .col { width: 50%; height: 200px; text-align: center; .texto { font-size: 14px; } } } .contingut h2 { display: none; } body p, h4 { font-size: 14px !important; } #generic_slide_1427 { display: none; } .mod_galeria .col-xs-12:nth-child(3n+1) { padding-right: 0; } } .suscripcio.col-xs-3 { width: 100%; padding-right: 40px; padding-left: 10px; text-align: center; padding-top: 15px; } .general_info.col-xs-12 { p { text-align: center; display: grid; line-height: 25px; } strong { padding-right: 0; } } .page-element-d .fragment.Name h1 { padding-bottom: 20px; } .mod_childrenHome [class*="col-"] { padding-left: 0; padding-right: 0; padding-top: 20px; } .cont_galeria .col-xs-12 { padding-left: 0; padding-right: 0; } .main-lista2 .design-h .left_part { padding-right: 0; padding-left: 0; width: 100%; } .main-lista2 { padding-left: 0; padding-right: 0; } .mod_ofertes .fragment.Children .child { .left_part { width: 100%; } .right_part { width: 100%; padding: 15px; } } } @media (max-width: 991px) { .bg14_header .top { padding: 0 0; .col-xs-2 { padding: 0; } col-xs-6 { padding: 0; .picturebanner-link { padding: 0; display: block; background: white; margin: 0; height: 60px; } } .mobile_menu_button a { position: relative; color: transparent !important; } .mobiltelf.col-xs-4 { padding: 0; .popup_plugin.market_telephone:before { content: "\f095"; font-family: FontAwesome; font-size: 30px; } .popup_plugin.market_telephone { margin-left: 0; background-color: #fff; color: #4c4c4c; height: 60px; display: inline-block; line-height: 60px; width: 50%; float: left; margin-right: 0; text-align: center; padding-left: 30px; } } .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: 0; padding-right: 0; border-style: none; background-color: #fff; color: $color_3; span { display: none; } .fa-calendar-o:before { font-size: 30px; } } } } .fragment.Header-Menu .header_expansible_link:after { display: none; } .booking-process { .btn.book-now { width: auto; } .header-wrap{ margin-bottom: 2px; } } } @media (max-width: 1200px) { .foot_newsletter.col-xs-9 { padding-left: 5%; } } @media (min-width: 400px) and (max-width: 768px) { .foot_newsletter { .form-group { width: 100%; } } } @media (min-width: 768px) { .fragment.Hotel-Phone { font-size: 16px; color: $color_3 !important; font-family: $fuenteComun; padding-left: 15%; } .adres.col-xs-5 { width: 100%; float: none; } } /****ofertas responsive****/ @media (max-width: 768px) { .page-root-offers{ .children{ .row.design-generic{ .components_contenido{ .name{ font-size: 16px; } .price_from{ font-size: 16px; } } } } } } @media (max-width: 480px) { .row.children.design-j { .col-xs-offset-6 { margin-left: 25%; margin-right: 25%; } } } @media (max-width: 768px) { .row.children.design-j { .col-xs-offset-6 { margin-left: 30%; } .btn { margin-top: 50%; } .child { border: none; } } .container { width: auto; } } .fa-calendar:before { content: '\f133'; font-family: FontAwesome; } /****Proceso reserva mobile****/ .booking-process .booking_box_form{ display: none; } @media (max-width: 540px) { .booking-process .body-content .room_list h2 { display: none; } .booking-process.book .Booking-ConfirmForm .rooms.items>.row-fluid>.col-sm-12 { border-top: none; margin-top: 0; padding-top: 0 !important; padding-bottom: 0; margin-bottom: 0; } .list-item .extras .title { font-size: 14px !important; } .row.room_total_price .total_room_label { padding: 0 !important; } .booking-process .Booking-ConfirmForm .text-right { font-size: 14px; } .booking-process.book .Booking-ConfirmForm .room_total_price .total-price .real-price { font-size: 16px; span { font-size: 16px; } } .booking-process.book .Booking-ConfirmForm .room_total_price .text-right{ font-size: 14px; } .booking-process .room_list .room_total_price { .col-xs-6 { width: auto; } } .gallery-preview.design-a .icon { left: 80%; } } @media (max-width: 768px) { .booking-process { .body-content { .generic_slide_plugin { display: none; } .inline-hotel-form .row>div { font-size: 11px; } .inline-hotel-form { .btn { font-size: 15px; } } .booking-total-price { span { font-size: 20px; } } .booking-btn-container { .col-xs-push-10 { width: 100%; text-align: center; } } .room_list { h2 { font-size: 25px; } .Hotel-Name { margin-top: 0; } p strong { font-size: 18px; line-height: 2em; } } } .darkbox { .ex-container { width: 100%; padding-left: 5px; padding-right: 5px; } } .Booking-ConfirmForm { .user_data { margin-top: 0 !important; p{ font-size: 18px !important; font-weight: 600; } } .text-right { font-size: 16px; } .list-item { margin-top: 0; padding-top: 0; } .user_data_fields { [class*="col-"] { label { color: $color_3; } } } } } .booking_box_form { display: none !important; } } /*****Pag mi reserva*****/ .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content{ width: 95%; } .mod_descripcion.mod_misReservas{ form{ overflow-x: auto; } margin-top: 100px; .Loyalty-BookingList{ padding: 15px; .table{ input.btn.btn-success{ background-color: $color_2; border-radius: 5px; border-color: transparent; } } } } .bono .search-hotel{ display: block; } /****EXTRAS****/ .list-item { .room-extras { .highlight.extra-info { font-size: 17px; .name { font-size: 17px; font-weight: bold; } .total { font-size: 18px; font-weight: bold; position: absolute; right: 40px; } .remove-extra { position: absolute; right: 5px; font-size: 18px; } } } .extras { padding-top: 90px; .extra-image { width: 40%; height: 135px !important; border-radius: 5px; float: left; margin-right: 20px; } .extra-item { padding-right: 70px; margin-bottom: 40px; margin-top: 20px; background { background-color: transparent !important; position: relative; margin-bottom: 15px; overflow: hidden; } } .clearfix { display: none; } .name { font-weight: 600 !important; } p.description, span.price, span.exchange{ font-weight: 600; color: $color_3; font-size: 15px; } p.description{ padding: 5px; } .title { font-size: 1em; font-weight: 600; line-height: 110%; padding-bottom: 20px; } span.view-more, span.view-less { font-size: 16px; line-height: 2.5em; } span.view-more:after, span.view-less:after { content: " \f107"; font-family: FontAwesome; } span.view-more:hover, span.view-less:hover { font-weight: 600; } .btn.book { position: absolute; display: contents; } .btn.book:hover { font-weight: 600; } .btn.book:before { content: "\f067"; font-size: 14px; font-family: FontAwesome; } .btn.more { background: transparent; } } } .book.complete.browser-iexplorer .extras .extra-item .background .btn{ position: relative; width: 22%; display: inline-table; margin: 0; text-align: left; } @media (max-width: 767px) { .list-item { .extras { .title { font-size: 18px; width: 100%; padding: 5%; } } } .fragment.GalleryCollage .item>.row .collage-img { height: 300px; } .fragment.GalleryCollage .item>.row { height: 300px; } } @media (max-width: 768px) and (min-width: 320px) { .list-item { .extras { .extra-image { width: 37%; } .extra-item { padding-right: 0; } .title { font-size: 18px; padding: 5%; } } } .row.room_total_price .col-xs-6.text-right { text-align: right; width: auto; float: right; top: 5px; } .row.room_total_price .total_room_label { //padding: 66px; line-height: 2em; font-size: 16px; color: $color_2; } .rooms.items h2.section { margin: 24px; font-size: 20px; } .require_offers, .link_conditions { padding-left: 10px; } .calendar.internal .inline-hotel-form .toggle-allocations { margin-left: 5px !important; width: 90% !important; } .booking-process.book{ .hab-options{ .list-item.room-item > .row > [class*="col-"]{ padding-left: 8px; width: 50%; } .row_cancellation{ width: 100%; .col-xs-12{ width: 100% !important; } p.room_cancellation{ width: 100%; } } } } } @media (max-width: 992px){ .bg14_header{ .Booking-Form{ .mod_booking-box.reserva-fijo{ width: 940px; } } } .ex-container .col-sm-8 { width: auto !important; justify-content: left; } } @media (max-width: 1199px){ .Booking-Form{ .mod_booking-box.reserva-fijo{ width: 960px !important; } } .bg14_header { .top { .cabecera_principal { .text-left.menu-corporativo-sec { .header_expansible_link { &:last-child { margin-right: 0; line-height: 1.5em; } a { font-size: 12px; } } } .text-right.menu-corporativo { margin-left: 1%; } } } } } @media (max-width: 1366px) { .Booking-Form .mod_booking-box.reserva-fijo { width: 1170px; } .ex-container .col-sm-8 { width: 66.6%; justify-content: left; } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic .components_capa .short_description { padding-right: 0; } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic { margin-right: 15px; margin-left: 15px; } .bg14_header.desktop.hotel{ .top{ .menu-corporativo-sec{ //margin-left: 65px !important; margin-top: 0; } .text-right.menu-corporativo{ padding: 0; width: 100%; padding-top: 15px; } } } } @media (max-width: 1399px) { .inline-hotel-form .allocations-container { .allocations-table>[class*="col"] { width: auto; margin-left: 42%; } } .home .main .generic_slide_plugin .text-container-ro .central-text-column .wrapper .text_slide .cajaIntro { margin-left: 22%; } .booking-process.book .sortedRooms .room-name { margin-top: 0; } .bg14_header.hotel .menu-corporativo-sec .top_menu>li { >div.header_expansible_link { font-size: 16px; a { font-size: 16px; } } } .children .item.design-a p { font-size: 14px; } span.total-comission { padding-left: 200px; } } @media (max-width: 1210px) { .bg14_header.hotel .menu-corporativo-sec .top_menu > li { > div.header_expansible_link { font-size: 12px; } } .Header-HotelsAndDestinations{ .header_expansible_link{ font-size: 12px; } } } @media (max-width: 1024px) { span.total-comission { padding-left: 100px; } .home .generic_slide_plugin .item .wrapper .text_slide { p:first-child, p:last-child { font-size: 38px; //text-align: center; } } } /******/ @media (max-width: 480px){ .booking-process.step3 .darkbox{ padding-left: 0 !important; } } @media (max-width: 991px) and (min-width: 768px) { .booking-process.step3 .darkbox { padding-left: 19.5% !important; } .booking-process .container{ width: auto; } .booking-process .generic_slide_plugin{ display: none; } } @media (max-width: 1199px) and (min-width: 1024px) { .booking-process.step3 .darkbox { padding-left: 26.5% !important; } } @media (max-width: 1399px) { .booking-process.step3 .darkbox { padding-left: 30.6%; } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic .components_capa .short_description { padding-left: 0; padding-right: 0; } .mod_childrenHome .fragment.FeaturedOffers .row.design-generic .components_capa { height: 180px; } } @media (min-width: 1400px) { .booking-process.step3 .darkbox { margin-left: 456px; margin-right: 456px; } .fragment.Booking-ConfirmForm .design-a .col-sm-12.no-padding .darkbox .col-sm-8 { width: 100%; } } @media (min-width: 1399px) { .mod_childrenHome .fragment.FeaturedOffers .row.design-generic { margin-left: 25px; margin-right: 25px; } } @media (max-width: 768px) and (min-width: 481px) { .booking-process.step3 .darkbox { padding-left: 0; padding-bottom: 20px; } .booking-process.step3 .darkbox table { margin-left: 17px; } } /****galería + short.desc por children****/ .booking-cancelled .text table:nth-child(4) tr:first-child td p, .booking-cancelled .text table:nth-child(6) tr td:nth-child(2) p, .booking-cancelled .text table:nth-child(8) tr:nth-child(1) td p { color: #ffffff !important; } .restauracio { .row.item.design-generic { display: flex; cursor: auto; } .components_image { padding-right: 30px; width: 50%; img { width: 100%; } } .components_info { width: 50%; padding-bottom: 25px; padding-left: 40px; .name { font-weight: 600; font-size: 30px; line-height: 32px; color: $color_2; padding-bottom: 25px; } } .fragment.Children { .child { padding-bottom: 50px; margin-top: 30px; } } .gastronomia { ul { columns: 2; list-style: none; padding-left: 0; li { line-height: 1.5em; padding-left: 35px; color: #707070; font-size: 16px; background-size: 25px; margin-bottom: 12px; } li:before { font-family: ROL-normal; content: "\H"; color: $color_2; font-size: 18px; margin-left: -25px; padding-right: 5px; } } } } @media (max-width: 992px) { .restauracio { .row.item.design-generic { display: block; } .components_image { width: 100%; padding-right: 0; img { width: 100%; } } .components_info { padding: 20px; width: 100%; .name{ text-align: center; font-size: 20px; } } .gastronomia { ul { columns: 1; } } } } /***ROOM-885***/ .mypopup { padding: 5px 15px; border-radius: 4px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); overflow: inherit !important; .my_booking_popup input[type=text] { width: 100% !important; } .telfcont h2 { margin-top: 0; } .pop-contact-form-content{ width:430px; input[type=checkbox]+span{ color: #77777A; font-size: 12px; } input[type=checkbox]{ width: 14px; height: 15px !important; margin-top: 0; vertical-align: middle; } .terms_and_conditions{ margin-top: 10px; margin-bottom: 5px; span a{ color: #77777A; font-size: 12px; } span a:hover{ color: #46949d; } } input[type=text], input[type=email], select{ border-radius: 5px; border: 0.5px solid #77777A; color: #707070; height: 28px; display: block; width: 100%; margin: 5px 0; padding: 4px 6px; } p.requiered-fields{ font-size: 1em; margin-top: 15px; } .btn{ height: 36.55px; } } .mfp-close { background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/cruz.png"); background-position: 50% 50%; background-size: contain; height: 33px; width: 33px; color: transparent; opacity: 1; top: -16px; right: -16px; } .mfp-close:hover, .mfp-close:focus{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/cruz_ahover.png"); } .error{ padding-bottom: 20px !important; margin-top: 40px !important; display: none; } } #find_booking{ width: 260px; height: 270px; .btn{ margin-top: 16px; } label { padding-top: 5px; padding-bottom: 5px; font-weight: 100; } p.h3{ font-size: 22px !important; padding-top: 9px; font-weight: bold; } form > div { margin-bottom: 10px; text-align: center; color: #77777A; } } ////////////////////////////// .mod_childrenHorizontal { /*En home y destinos*/ > .row { margin: 0; > .col-xs-12 { padding: 0; } } .row.children.design-generic { margin-left: -15px; margin-right: -15px; margin-bottom: -70px; @media (min-width: 768px) { margin: 0; } @media(max-width: 768px){ .design-generic{ .components_contenido{ .name, .price_from{ font-weight: 600; font-size: 18px; } } } } .child.col-xs-12 { padding: 0 0 50px 0; @media (min-width: 992px) { padding-left: 10px; padding-right: 10px; } @media (min-width: 1200px) { padding-left: 20px; padding-right: 20px; } } .components_contenido { padding: 25px; @media (min-width: 992px) { padding: 0; } .name, .price_from , span{ text-align: center; margin-top: 30px; margin-bottom: 20px; color: $color_2; font-size: 18px; font-weight: bold; text-transform: uppercase; } .short_description { @media (min-width: 992px) { height: 220px; } @media (min-width: 1200px) { height: 200px; } @media (min-width: 1400px) { height: 150px; } p { font-size: 12px; line-height: 150%; color: $color_3; font-weight: 400; @media (min-width: 480px) { font-size: 14px; line-height: 200%; } @media (min-width: 992px) { font-size: 16px; line-height: 175%; } } } .link { @media (min-width: 768px) { margin-bottom: -15px; } a.child-item-link { margin: 0 auto; } } } } &.conLink { .child.col-xs-12 { transition: opacity 0.3s; &:hover { opacity: 0.6; } @media (min-width: 768px) and (max-width: 991px) { float: none; max-width: 450px; margin: 0 auto; } .item.design-generic { @media (min-width: 768px) { box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.1); } .components_contenido { @media (min-width: 992px) { padding: 0 25px; } } } } } } .mod_childrenHorizontal, .mod_childrenVertical { .link { a.child-item-link { background: $color_2; color: #fff; text-transform: uppercase; width: 200px; height: 35px; line-height: 34px; display: block; text-align: center; border-radius: 5px; &:hover, &:focus { text-decoration: none; background: $color_1; } } } .price_from { color: $color_2; font-size: 18px; font-weight: bold; } } @media (min-width: 1024px){ .mod_childrenHorizontal { .row.children.design-generic { .components_contenido { .price_from{ margin-bottom: 15%; } } } } } .mod_childrenVertical { /*En habitaciones*/ .child { padding-bottom: 50px; padding-left: 0; padding-right: 0; @media (min-width: 992px) { padding-top: 70px; padding-bottom: 70px; border-bottom: solid 2px $color_2; &:nth-last-child(2) { border-bottom: 0; } } .item.design-generic { display: flex; flex-direction: column; @media (min-width: 992px) { flex-direction: row; } } .components_imagen { @media (min-width: 992px) { width: 50%; padding-right: 10px; } @media (min-width: 1200px) { width: 40%; } } .components_contenido { padding: 20px 15px 0; position: relative; @media (min-width: 768px) { padding-left: 0; padding-right: 0; } @media (min-width: 992px) { text-align: left; padding: 0 0 0 30px; width: 50%; } @media (min-width: 1200px) { width: 60%; } .name { margin-bottom: 30px; margin-top: 10px; color: $color_2; font-size: 30px; font-weight: 600; @media (max-width: 991px) { text-align: center; } } p { text-align: left; line-height: 2em; color: #77777a; font-weight: 400; } .price_from{ font-size: 30px; } ul { list-style: none; columns: 2; padding-left: 0; li { color: $color_3; font-size: 14px; //line-height: 1em; margin-bottom: 15px; padding-left: 30px; @media (min-width: 992px) { font-size: 16px; } &::before { content: "H"; font-family: ROL-normal, serif; color: $color_2; font-size: 32px; margin-left: -30px; padding-right: 5px; position: relative; top: 3px; } } } .price_from { margin-top: 25px; margin-bottom: 25px; text-align: center; bottom: 30px; } .link { text-align: center; bottom: 0; .offer_link { display: inline-block; } } @media (min-width: 992px) { .price_from, .link { position: absolute; right: 0; width: 250px; } } } @media (max-width: 992px){ .components_contenido{ padding: 25px; ul{ li{ line-height: 1.5em; } } } } } } /////Bienvenida club////// .page-element-f{ text-align: center; .fragment.ShortDescription{ @media (max-width: 768px){ margin-bottom: -50px; p{ text-align: left; } } } .mod_botonesUsuario{ a{ color: $color_imgs; background-color: $color_2; font-size: 22px; font-weight: bold; border-radius: 5px; padding: 15px 25px; display: inline-block; &:hover{ background-color: $color_1; } } } .mod_datosPersonales.mod_descripcion{ text-align: center; margin-top: 70px; margin-bottom: 70px; h3 { margin-bottom: 25px; } form{ .field { margin-bottom: 15px; .title { color: #77777A; margin-bottom: 5px; display: none; } input{ border-radius: 5px; border: 0.5px solid #77777A; color: #707070; padding: 4px 10px; width: 300px; max-width: 100%; height: 40px; &::placeholder { font-size: 14px; opacity: 0.8; } } } .recaptcha_wrapper { display: inline-block; } button.submitbutton{ font-size: 16px; font-weight: bold; border-radius: 5px; border: transparent; box-shadow: none; width: 160px; height: 45px; color: #fff; padding: 10px 12px; text-transform: uppercase; background-color: $color_2; display: block; margin: 1rem auto 0; &:hover{ background-color: $color_1; } } } } } /*********404**********/ .page-element-g{ .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: $color_2; color: #fff; border-radius: 5px; padding: 5px 40px; &:hover{ background: #FFB81C; } } } } } /////Landing////// .tablet_landing{ margin-top: 50px; .tablet_logo{ text-align: center; .fragment.Header-HotelLogo{ height: 150px; img{ position: relative; } } .cmslanguageselector_plugin{ .lang{ @media (max-width: 500px){ line-height: 50px; } a{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/2020/03/23/16/59/50/ES.png"); margin: 0 15px; background-repeat: no-repeat; } &:nth-child(2) a{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/2020/03/24/07/51/41/UK.png"); background-repeat: no-repeat; } &:nth-child(3) a{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/2020/03/24/07/51/56/DE.png"); background-repeat: no-repeat; } &:nth-child(4) a{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/2020/03/24/07/52/07/FR.png"); background-repeat: no-repeat; } &:nth-child(5) a{ background-image: url("https://s3-pro.roomonline.es/cobi/media/www.clubcalaromani.com/images/2020/03/24/07/52/46/IT.png"); background-repeat: no-repeat; } a{ color: transparent; font-size: 0; padding: 15px 23px; } } } } .tablet_content{ margin-top: 50px; .cms-form{ h3{ font-family: "Open Sans"; font-size: 30px; text-align: center; color: $color_2; font-weight: 600; padding-bottom: 30px; padding-top: 15px; } .field.name, .field.email{ text-align: center; margin-bottom: 25px; .title{ font-family: "Open Sans"; font-size: 18px; color: $color_3; padding-bottom: 15px; } } input{ border-radius: 10px; border: 1px solid #bebebe; width: 480px; height: 40px; padding: 10px; @media (max-width: 500px){ width: 100%; } } input::placeholder{ color: transparent; } input[type=checkbox]{ border-radius: 5px; border: 1px solid $color_3; width: 13px; height: 13px; } .check{ width: 480px; margin: 0 auto; padding-left: 25px; @media (max-width: 500px){ width: 100%; } .field{ display: flex; height: 20px; margin-bottom: 10px; label{ font-weight: normal; color: #77777A; cursor: auto; input{ margin-right: 5px; } a{ color: #77777A; cursor: pointer; font-size: 14px; &:hover{ color: #ffb81c; } } } /*.help{ margin-top: 4px; padding-left: 10px; font-size: 12px; color: $color_3; text-align: left; }*/ } } button.submitbutton{ margin: 30px auto 0; width: auto; font-size: 16px; font-weight: 400; border-radius: 5px; background: $color_2; display: block; margin-bottom: 50px; padding: 10px 50px; color: $color_imgs; border: 0; text-transform: uppercase; &:hover{ background-color: $color_1; } } } } } ////Nuevos cmsform //Botón contacto header.bg14_header.desktop.hotel .contact-button { display: inline-block; a { color: #77777a; font-weight: 400; margin-right: 0; text-transform: capitalize; padding-top: 47px; font-size: 10px; &::before { content: "("; font-family: Rol-normal; font-size: 20px; display: inline-block; vertical-align: -3px; margin-right: 4px; position: relative; bottom: 0; } } } //Form contacto abierto .mypopup { h3, .hotel-name { color: $color_2; } h3 { font-size: 1.5rem; margin-top: 1rem; } .hotel-name { font-size: 1.2rem; margin-bottom: 1.5rem; } .field:not(.hotel-name) { color: #77777a; margin-bottom: .8rem; .title { margin-bottom: .5rem; font-size: .9rem; } &.required:not(.conditions) .title::after { content: " *"; } } select, input:not([type="checkbox"]), textarea { width: 100%; border-radius: 5px; border: solid 1px; height: 2rem; padding: 0 .5rem; } input::placeholder, textarea::placeholder { opacity: 0; } textarea { height: 3rem; padding-top: .5rem; } .field.subscribe_accepted, .field.conditions { margin-bottom: 1rem; label, label a{ font-weight: normal; display: flex; align-items: center; font-size: .9rem; } label a { color: $color_3; &:hover { color: #46949d; } } label input { margin-top: 0; margin-right: .3rem; } } .submitbutton { background-color: $color_2; border: none; color: #fff; width: 100%; border-radius: 5px; height: 2.5rem; margin: 1rem 0; transition: background-color .2s; &:hover { background-color: $color_1; } } .extra_message { font-size: .9rem; } } //Formulario newsletter .foot_newsletter, .suscripcio { height: 250px; } .suscripcio { @media (max-width: 991px) { height: 100px; } } .news-button { h3, form { width: 40rem; max-width: 100%; @media (max-width: 991px) { margin-left: auto; margin-right: auto; } } h3 { color: #fff; font-weight: normal; font-size: 1rem; padding-left: .5rem; } form { display: grid; width: 40rem; max-width: 100%; grid-template-rows: 2.5rem; grid-template-columns: 3fr 1fr; grid-row-gap: 1rem; } .field.email { grid-row: 1 / 2; grid-column: 1 / 2; .widget, input { height: 100%; border: none; } } .field.email input { background-color: #fff; width: 100%; border-radius: 10px 0 0 10px; padding: 0 .5rem; } .submitbutton { grid-row: 1 / 2; grid-column: 2 / 3; border-radius: 0 10px 10px 0; background-color: $color_2; color: #fff; font-size: .8rem; text-transform: uppercase; line-height: 100%; border: none; &:hover { background-color: $color_1; } } .recaptcha_wrapper { grid-row: 3 / 4; @media (max-width: 411px) { grid-column: 1 / -1; margin: 0 auto; } } .subscribe_accepted { grid-row: 2 / 3; grid-column: 1 / -1; padding: 0 .5rem; label { color: #fff; font-weight: normal; } input { margin-right: .3rem; } } } .suscripcio ul.buttonbar_plugin.botons { li:not(:last-child) { margin-right: 10px; } a { height: 50px !important; width: 50px !important; display: flex; align-items: center; justify-content: center; i.fa { font-size: 25px; } } } //Alta registro usuario .club_form { padding-bottom: 4rem; padding-left: 15px; padding-right: 15px; h3 { color: $color_2; font-size: 2rem; margin-bottom: 3rem; text-align: center; } } .club_form form { //Ajustar repactcha en responsive overflow: hidden; .field { margin-bottom: 1.5rem; } .title { margin-bottom: .5rem; } select, input:not([type="checkbox"]) { height: 2rem; width: 100%; border-radius: 5px; border: solid 1px $color_3; padding: 0 .5rem; &::placeholder { opacity: 0; } } .field.conditions, .field.subscribe_accepted { flex-basis: 100%; margin-bottom: .5rem; } .conditions a { color: $color_3; font-weight: normal; &:hover { color: $color_1; } } .conditions label { margin-bottom: 0; } .conditions, .subscribe_accepted label { display: flex; align-items: center; input { margin-top: 0; margin-right: .3rem; } } .conditions a, .subscribe_accepted label { font-weight: normal; color: $color_3; font-size: 1rem; } .submitbutton { background-color: $color_2; color: #fff; height: 3rem; width: 10rem; border: none; border-radius: 5px; display: block; margin: 25px auto 0; } .recaptcha_wrapper { margin-top: 1rem; @media (max-width: 560px) { margin-left: 50%; transform: translateX(-50%); } } } form [class*="action"] { display: none; } @media (min-width: 561px) { .input-fields--group { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; } .club_form { padding-bottom: 5rem; form { .submitbutton { margin: 0 0 0 10%; position: relative; display: inline-block; top: -35px; } } } } @media (min-width: 768px) { .club_form form .submitbutton { margin: 0 0 0 15%; } } @media (min-width: 992px) { .club_form form { width: 50vw; margin: 0 auto; .submitbutton { margin: 0 0 0 8%; } } } @media (min-width: 1200px) { .club_form form .submitbutton { margin: 0 0 0 15%; } } .mod_datosPersonales.mod_descripcion, .page-element-e .formulario { .recaptcha_wrapper { display: inline-block; } } form .recaptcha_wrapper { @media (max-width: 411px) { transform: scale(.8); } }