@charset "UTF-8"; /* ------------------ CBEDS_PLUGINS ------------------ */ /* -------------------------------------------------- */ /* Plugins de Roomonline */ .fragment.Booking-HotelList { .design-b { .hotels.items { .open-calendar-compare { margin-top: 10px; display: inline-block; } .unavailable-title { padding:20px; border:1px dashed gray; text-align: center; .sad-face { font-size:80px; margin-bottom:20px; } .sorry { font-size:19px; line-height:19px; } .flexible { font-size:30px; line-height:30px; padding:30px; margin-bottom:10px; } } .list-item { .hotel { font-size:20px; line-height:20px; margin-bottom: 10px; } .offer-real-price { text-decoration: line-through; } .btn.choose-hotel { padding: 10px 12px; } .btn.choose-hotel.mini { min-width:auto; } .score { font-size: 1.6em; font-weight: bold; margin-top: 8%; .amount { font-size:1.3em; } .qualification { margin-left:15px; } } .availability-status { color: #ff9e15; } .date_calendar { font-size: 1em ; margin-bottom: 10px; margin-left: 6px; } } } } } /* Fix carousel slider text on top of img obj */ .generic_slide_plugin.image-type { .container.text-container-ro { position: absolute; top: 0; left: 0; right: 0; } } /* Fragment Booking.RoomList */ body:not(.mobile) .fragment.Booking-RoomList { .sortedRooms .room_group .popup-gallery { @media (max-width: 768px){ margin-bottom: 10px ; } } } .fragment.Booking-RoomList { .design-b { .rooms.items { &.searching_one_room_only { .hab-header { display: none; } } .available_room_count { color: #00a7ba; font-weight: 500; text-align:center; font-size:24px; padding: 30px; } .hab-options { margin-bottom: 5%; position:relative; .comparation-calendar { font-size: 18px; margin:10px 0; position: absolute; top: -35px; } .hab-header { background-color:#acecf2; height: 60px; margin-bottom: 30px; h3 { text-transform: none; font-size:16px; padding-top: 20px; .room_number { background-color: #008792; color: white; padding: 10px 15px; border-radius: 32px; margin-left:4px; } } .stay-dates { display:none; } p.allocations-summary { color: #008792; font-size: 13px; position:absolute; top:50%; right:17px; } p.allocations-summary:before { content: "\f007 "; font-family: FontAwesome; left: 0; font-size: 18px; position: relative; top: 0; } } .sortedRooms { .room_group { .services { h2 { font-family: Ubuntu; text-align: center; margin-bottom: 50px; margin-top: 5px; text-transform: uppercase; font-size: 24px; font-weight: 300; } .children { .child { &.more_about { display: none !important; } .item { .image { display:block; margin-left:auto; margin-right:auto; width: 100px; } .content { height: 90px; h3 { margin-top: 20px; font-size: 16px; text-align: center; text-transform: inherit; } } .footer { display: none; } } } } } &.unavailable { .rate { display:none; } } .room-title-row { .room-name { margin-left:0; margin-top: 5px; font-size: 24px; font-weight: 500; text-decoration: none; margin-bottom: 6px; color:#71c0cc; } .room-is-unavailable { .not-available-title { text-transform: uppercase; color:darkorange; font-weight: bold;margin-right:5px; } .not-available-reason { font-size: 12px; font-weight: 600; } } .room-description { p { font-size:14px; } } .room_see_more { position: relative; padding-left: 25px; display: block; margin-top: 15px; } .room_see_more:before { content: "\f055 "; font-family: FontAwesome; left: 0; font-size: 25px; position: absolute; top: 0; } .room_see_more.active:before { content: "\f056 "; } } .rate { .rate-header { background-color:lightgray; margin-bottom:0; padding:12px 10px; color: #00a7ba; &.active .rate_name:after { content: "\f056"; } .rate_name { font-size: 18px; &:after { content: "\f055"; font-family: FontAwesome; font-size: 18px; margin-left: 10px; } } .offer_conditions { p { font-size: 12px; margin-top: 1%; margin-bottom: 0; } } .availability-message { float:right; font-weight: 500; } } .board-list { padding: 12px 10px; font-size: 18px; .board { cursor:pointer; .daily-price { font-size: 12px; .price-daily { margin-left: 6px; font-size: 12px; font-weight: inherit; } } } .available_rates { margin-top: 10px; } } .offer-real-price { text-decoration: line-through; } .total-price { display:inline; font-size:18px; padding-left:5px; } .select-room { height: 20px; width: 20px; } } } } } .alternative-total-row { .please_select_room { text-align: right; font-size: 1.2em; } } .total-row { .booking-total-price { float: right; background-color: #acecf2; font-size: 22px; width: 201px; padding: 20px; padding-left: 15px; padding-bottom: 20px ; text-transform: none; .total-price { margin-left: 15px; margin-right: 10px; span { font-size: 26px; } } } } .booking-btn-container { .book-now { height:45px ; padding-left: 40px; padding-right: 40px; font-size: 14px; color: white; background-color: #00a7ba; max-width:250px; } } @media (max-width: 768px) { .available_room_count { color: #606060; font-size: 22px; line-height: 22px; } .alternative-total-row { .please_select_room { text-align: center; } } .hab-options { .hab-header { h3 { text-align:left; margin-left:12px; font-weight:normal; .room_number { background-color: transparent; color: #00a7ba; padding: 10px 5px; visibility: visible; padding-top: 5px; font-weight: normal; } } } .sortedRooms { .room_group { .room-title-row { padding: 20px 10px; .room-name { font-size: 20px; color:#00a7ba; } } } } } .total-row { .booking-total-price { background-color: transparent; font-size: 22px; margin-left: 35px; margin-right: 10px; text-transform: none; span { color: #606060; } .total-price { margin-left: 5px; margin-right: 10px; span { font-size: 26px; } } } } .booking-btn-container { position: relative; } } } } } .fragment.Booking-LineForm { .lineform { .inline-hotel-form { .booking_form { .allocations-table { select { width:70px; } } } } } } /* Fragment Booking.LineFormWithPopup2 */ .fragment.Booking-LineFormWithPopup2 { .banda { background: transparent; } select, input[type=text], input[type=number], .btn { height: 50px; } .design-a { .inline-hotel-form { .btn { margin-bottom: 0; color: white; background-color: #00a7ba; } } } .design-b { .inline-hotel-form { .destination_hotel, .date_from, .date_to { width: 100%; } .date_from, .date_to { position: relative; background-position: 300px 14px; background-size: 18px; background-repeat: no-repeat; border: 1px solid #ccc; background-color: white; } .destination_hotel { position: relative; padding-left: 20px; padding-right: 50px; background-position: 295px 10px; background-size: 18px; background-repeat: no-repeat; border: 1px solid #ccc; background-color: white; -webkit-appearance: none; -moz-appearance: none; appearance:none; margin: 0; } @media (max-width: 1400px) { .date_from, .date_to { background-position: 250px 14px; } .destination_hotel { background-position: 250px 10px; } } @media (max-width: 1200px) { .date_from, .date_to { background-position: 205px 14px; } .destination_hotel { background-position: 205px 10px; } } @media (max-width: 992px) { .date_from, .date_to { background-position: 155px 14px; } .destination_hotel { background-position: 195px 10px; } } @media (max-width: 768px) { .date_from, .date_to { background-position: 100px 14px; } .destination_hotel { background-position: 100px 10px; } } .btn { margin-bottom: 0; color: white; } } } .design-c { .inline-hotel-form { background-color: #d6d6d6; .row.fa { padding: 15px; display: block; span:before { font-family: FontAwesome; left: 0; font-size: 18px; position: relative; top: 0; } .output { vertical-align: middle; } .destination_hotel, .dates, .no_hab, .ocupation { position: relative; font-family: Ubuntu; } .destination_hotel { margin-left: -5%; } .destination_hotel:before { content: "\f124 "; } .dates { margin-left: -13%; } .dates:before { content: "\f073 "; padding-left: 0; } .no_hab:before { content: "\f084 "; } .ocupation:before { content: "\f007 "; } @media (max-width: 998px) { .destination_hotel, .dates, .no_hab, .ocupation { margin-left: 3%; } span:before { display:inline-block; margin-right:10px; } } @media (max-width: 1200px) { .destination_hotel, .dates, .no_hab, .ocupation { margin-top: 3%; } /* Para los iconos fa */ span:before { margin-bottom:10px; } } @media (min-width: 1200px) { .is_destination { margin-left: 10%; } } @media (min-width: 1400px) { .destination_hotel { margin-left: 4%; } } } .btn { color: white; line-height: 3em; margin: 0; } .dates { padding-left: 0; } @media (max-width: 768px) { .btn { background-color: transparent; height: 100%; line-height: 3em; position: relative; margin-top: 50px; margin-right: 10px; text-decoration: underline; } } @media (min-width: 768px) { .btn { height: 100%; color: white; margin-top: 40px; margin-right: 10px; } } @media (min-width: 992px) { .btn { height: 5.4em; margin: 0; } .fa { display: inline-block; } .destination_hotel, .dates, .no_hab, .ocupation { text-align: center; display: block; } .destination_hotel:before, .dates:before, .no_hab:before, .ocupation:before { display: block; } } @media (min-width: 1200px) { .btn { height: 4.25em; } .fa { margin-top: 10px; margin-left: 30px; display: inline-block; } .destination_hotel, .destination_hotel:before, .dates, .dates:before, .no_hab, .no_hab:before, .ocupation, .ocupation:before { display: initial; } .dates { padding-left: 0; } } } } .modal { .modal-header { padding-right: 120px; margin-bottom: 30px; button { font-size: 18px; opacity: 1; margin-top: 25px; } span { i { font-size: 30px; margin-left: 5px; } } } .modal-body { input, select { margin-bottom: 10px; } .title p { font-size: 18px; padding-bottom: 5px; } .allocations-table { .room-index { font-size: 18px; padding-bottom: 5px; } } .booking_form { .mandatory_fields { color: lightcoral; font-size: 12px; } .promotion { .book { border-radius: 5px; background-color: lightgrey; color: #000; width: 100%; } .book:hover { background: rgba(0,0,0,0); color: #000; box-shadow: inset 0 0 0 3px #000; } } } } } } .fragment.Booking-ConfirmForm { .design-b { .container { font-family: Ubuntu; .summary { margin-top: 60px; .row { margin-bottom: 40px; h1 { font-family: Ubuntu; text-align: center; font-size: 35px; } .hotel, .dates, .rooms { float: left; font-size: 16px; font-family: Ubuntu; } .hotel:before, .dates:before, .rooms:before { float: left; font-family: FontAwesome; left: 0; font-size: 22px; position: relative; top: 0; color: #00a7ba; margin-right: 10px; } .hotel:before { content: "\f124 "; } .dates:before { content: "\f073 "; } .rooms:before { content: "\f084 "; } } } .items { .hab-options { border-top: 1px solid #9c9b9e; padding: 10px; .list-item { padding-top: 15px; } h3 { padding-top: 10px; padding-left: 10px; font-size: 22px; text-transform: none; text-align: start; font-weight: 500; } .row_room_and_price { .room_name { font-size: 18px; margin-left: -5px; } } .rate_name { //color: #71c0cc; font-size: 16px; } .total { color: #71c0cc; font-size: 24px; font-weight: 500; } .daily-price { //color: #71c0cc; font-size: 14px; } p { font-size: 14px; padding: 5px; } .row_extras { .room-extras { .room_name { font-size: 18px; margin-left: -10px; margin-bottom: 5px; } .add-extra-question { } .add-extra-link { text-transform: uppercase; } } } .room_total_price { .total_room_label { margin-left: 5px; text-transform: uppercase; font-weight: bold; } .real-price { font-size: 30px; } .price-fx { color: #71c0cc; font-size: 24px; font-weight: 500; } .total-price { color: #71c0cc; font-size: 24px; font-weight: 500; } } .extras_wrapper { padding: 2%; background-color: #ececec; .extras { .title_row { margin-bottom: 2%; color: #008792; i { font-size: 25px; opacity: 1; } } .place-extras-here { .extra-item { .extra-image { } .background { background: transparent; .extra-info { color: #00a7ba; line-height: 1em; .name { color: #606060; font-size:16px; } .price { font-size: 18px; float:right; .exchange { font-weight: bold; } } } .btn.book { color:white; background-color: #00a7ba; width: 100px; height: 40px; text-align: center; margin: 0% 20%; margin-bottom: 20% } @media (max-width: 1200px) { .btn.book { margin: 0% 31%; } } @media (max-width: 768px) { .btn.book { margin: 0% 39%; margin-bottom: 10%; } } @media (max-width: 480px) { .btn.book { margin: -5% 29%; } } @media (min-width: 1400px) { .btn.book { margin: 0% 27%; } } @media (max-width: 1400px) { .extra-info .price { margin-top: 10px; display: block; margin-left: 0; float:none; } .extra-info > div { width: 100%; padding-left: 0; padding-right: 0; } } } } } .more_extras { text-align: center; font-size: 15px; .btn.more { background: transparent; margin: 0; padding-bottom: 30px; text-align: center; float:none } .view-more { color: #00a7ba; position: relative; padding-left: 25px; } .view-more:before { color: #00a7ba; content: "\f055 "; font-family: FontAwesome; left: 0; font-size: 25px; position: absolute; top: 0; } .view-less { color: #00a7ba; position: relative; padding-left: 25px; } .view-less:before { color: #00a7ba; content: "\f056 "; font-family: FontAwesome; left: 0; font-size: 25px; position: absolute; top: 0; } } } } } .rooms_ending { border-bottom: 1px solid #9c9b9e; border-top: 1px solid #9c9b9e; vertical-align: middle; p { font-size: 16px; padding: 30px; } .complete-booking-price { float: right; font-size: 16px; padding: 9% 27%; border-left: 1px solid #9c9b9e; .real-price { color: #00a7ba; font-size: 24px; font-weight: 500; } } @media (max-width: 1200px) { .complete-booking-price { padding: 12% 20%; } } @media (max-width: 998px) { .complete-booking-price { padding: 16% 12%; } } } @media (max-width: 768px) { .rooms_ending { border-bottom: 0; .complete-booking-price { padding: 3%; float: left; border-left: 0; } } } } .user_data { margin-top: 8%; h2.section { font-family: Ubuntu; font-size: 36px; } p { margin-top: 3%; font-size: 16px; font-weight: bold; margin-left: 5px; } label { color: #71c0cc; } input.form-control, select.form-control { height: 100%; padding: 20px; } .row { margin: 20px 0; } .btn { width: 100%; color: white; background-color: #00a7ba; text-align: center; padding: 18px; } .promo_row { padding: 0 6%; .promo_code_text { color: #00a7ba; font-weight: bold; padding: 2%; padding-left: 15%; } input.form-control { padding-left: 18px; width: 113%; max-width: 113%; } } .loyalty-container { background-color: #ececec; padding: 20px; margin: 0 -2.7%; a { margin-top: 20px; } } @media (min-width: 1400px) { .promo_row { padding: 0; input.form-control { padding-left: 20px !important; max-width: 100% !important; } } } } @media (max-width: 1200px) { .user_data { h2.section { margin-left: 15px; } p { margin-left: 15px; } .promo_row { padding: 0; input.form-control { padding-left: 20px !important; max-width: 100% !important; } } .loyalty-container { margin: 0 -2.15%; } } } @media (max-width: 998px) { .user_data { .promo_row { .promo_code_text { padding-left: 3%; } } .loyalty-container { input.form-control { margin-bottom: 2%; } } } } @media (max-width: 768px) { .items { .hab-options { .total { display:block; /* Queremos que el precio se muestre sin nada a los lados */ } } } .user_data { .promo_row { .promo_code_text { padding-left: 3%; } } .loyalty-container { margin: 0 -3.15%; input.form-control { margin-bottom: 2%; } } } } .payment_data { background-color: #ececec; h2.section { font-family: Ubuntu; font-size: 36px; } p { margin-top: 3%; font-size: 16px; font-weight: bold; } input.form-control, select.form-control { height: 100%; padding: 20px; } .row { margin: 20px -4px; } .btn { width: 100%; color: white; background-color: #00a7ba; text-align: center; padding: 18px; } label { color: #71c0cc; } .cvc-popup { margin-top:10px; } } @media (max-width: 768px) { .payment_data { input.form-control, select { margin: 2% 0% !important; } } } .sum_and_book { padding: 0% 31%; padding-bottom: 7%; clear:both; margin-top:40px; .complete-booking-price { margin-top: 20px; font-size: 20px; .real-price { color: #00a7ba; font-size: 30px; font-weight: bold; } } @media (max-width: 768px) { .complete-booking-price { text-align: center; } } .btn { width: 100%; color: white; background-color: #00a7ba; text-align: center; padding: 18px; } } @media (max-width: 1200px) { .sum_and_book { padding: 0% 28%; } } @media (max-width: 998px) { .sum_and_book { padding: 0% 20%; } } } } } .fragment.Loyalty-PointsTable { .summary { margin-bottom: 30px; .total { background: transparent; color: #00a7ba; font-weight: 500; font-size: 22px; margin-top: 10px; text-align: center; } .bonus { background: #ececec; font-size: 12px; padding: 12px; line-height: 20px; font-weight: 400; .value { font-size: 18px; float:right; font-weight: bold; } } .extra { background: #acecf2; font-size: 12px; padding: 12px; margin-bottom: 20px; line-height: 20px; font-weight: 400; .value { font-size: 18px; float:right; font-weight: bold; } } @media (max-width: 992px) { .total { text-align: start; } } } .detail { table { width: 100%; thead { tr { .dates { background-color: #d6d6d6; width: 20%; } .concept { background-color: #d6d6d6; } .bonus { background-color: #ececec; width: 18%; } .extra { background-color: #acecf2; width: 18%; } .dates, .concept, .bonus, .extra { padding: 20px; padding-left: 20px; } th { border-bottom: 1px solid #d6d6d6; } } } tbody { tr { .bonus { background-color: #ececec; padding-left: 15%; } .extra { background-color: #acecf2; padding-left: 15%; } td { border-bottom: 1px solid #d6d6d6; padding: 10px; padding-left: 20px; font-size: 13px; } } } } } } @media (min-width: 992px) and (max-width:1200px){ html[lang="de"] .Loyalty-PointsTable .total span { margin-left: -27px; } } /* Fragment Hotel-ReviewsList */ .fragment.Hotel-ReviewsList { .children { .child { .review-comment { a { color: #606060; &:hover { color: #606060; } } } } } } /* Fragment Hotel-ReviewsRoller */ .fragment.Hotel-ReviewsRoller { .children { .child { .description { a { color: #606060; &:hover { color: #606060; } } } } } } /* Fragment Children Roller */ .fragment .roller { margin: 0 50px; .left, .right { display:none; cursor: pointer; position: relative; top: 0; bottom: 0; padding-top: 20%; i { font-size: 40px; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 9; } } .left i { left: -40px; } .right i { right: -40px; } .wrapper { overflow-y: hidden; overflow-x: hidden; white-space: nowrap; .child { width:0; /* Este valor no es importante para nada porque será substituido por javascript */ display:inline-block ; padding-left:10px; padding-right:10px; } } .roller-pagination { display:none; /* Por defecto está oculto. Si queremos usarlo, sobreescribir en site.css */ background-color:black; text-align: center; .pagination-bullets { display: inline-block; .bullet { display:inline-block; width:14px; height:14px; border-radius:7px; background-color:white; margin: 5px 2px; } .bullet.active { background-color:gray; } } } /* Cuando hay mas items que los que caben en una pagina mostrar scroll y las flechas */ &.has_many_items { .left, .right { display:block; } .wrapper { overflow-x: hidden; } } &.design-b { .wrapper { .child { .description { white-space: normal; } } } } &.design-r1 { .left,.right { padding-top: 57%; } } &.design-i { .left,.right { padding-top: 25%; } } @media (max-width: 1005px) { &.design-r1 { .left,.right { padding-top: 110%; } } &.design-i { .left,.right { padding-top: 40%; } } } &.design-d { .element { float: left; .title { white-space: initial; } .subtitle { white-space: initial; } } } @media (max-width: 782px) { margin: 0; &.design-r1 { .left,.right { padding-top: 110%; } } &.design-i { .left,.right { padding-top: 75%; } .left i { left: 15px; color: #acecf2; padding: 20px; background-color: white; } .right i { right: 15px; color: #acecf2; padding: 20px; background-color: white; } } } } .fragment .children { &.design-triple { margin: 0; .child { padding-left:4px; padding-right:4px; } > .left, > .right { position:inherit; } .content { position:relative; overflow:hidden; height:490px; width:100%; background-size:cover; background-repeat: no-repeat; .title_and_subtitle { position:absolute; bottom:0; color: white; padding: 15px; a.title, a.title:hover { color:white; text-decoration: none; font-size: 1.5em; } } } .content.part { height:240px; .title_and_subtitle { top:0; } } .content.part1 { margin-bottom:10px; } } } .popup-Loyalty-Unsubscribe { max-width: 350px; background-color: #ececec; padding: 20px 20px 20px 20px; overflow-x: hidden; h1 { text-align: center; font-family: Ubuntu; font-size: 30px; } p { font-size: 13px; text-align: center; padding-top: 5%; padding-bottom: 5%; } span { color: #00a7ba; } input { padding: 25px; margin: 5px 15px 15px 0; width: 100%; } input[type=checkbox] { width: 5%; margin: 15px 5px 5px 0; } .captcha { padding-top: 50px; padding-bottom: 50px; } button { color: white; background-color: #00a7ba; margin-top: 30px; } } .fragment.GalleryCollage { .no-margin{ margin: 0; } .no-padding { padding: 0; } .carousel-inner .collage-img{ width: 100%; height: 100%; cursor: pointer; } .item>.row{ height: 400px; } .item>.row .col{ height: 100%; } .item .row.second{ height: 50%; } .right.carousel-control { z-index: 2; span { right: 20%; } } .left.carousel-control { z-index: 2; span { left: 20%; } } .collage-img { background-position:center; background-repeat: no-repeat; background-size: cover; position: relative; } .video { .icon_thumbnail { position: absolute; z-index: 1; right: 0; width:60px; height:60px; background:url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fdun70%2Fimages%2Ftriangle-icon-turquesa.png) no-repeat center center; } } .imgs { .icon_thumbnail { position: absolute; z-index: 1; right: 0; width:60px; height:60px; background:url(https://s3-pro.roomonline.es/cobi%2Fmedia%2Fdun70%2Fimages%2Fgaleria.png) no-repeat center center; } } } .new-extra-popup { select, label { font-weight: 400; width:48.5%; } @media (max-width: 768px) { select, label { width: 131%; } } @media (max-width: 480px) { width: 330px; } width: 360px; overflow: hidden; background-color: #ececec; .container { padding: 3% 6%; color: #00a7ba; .new-extra-description { font-size: 16px; text-align: center; padding: 1%; padding-left: 2.5%; padding-bottom: 3%; padding-right: 71%; } .new-extra-quantity { padding: 1%; padding-left: 3.8%; label { select { height: 40px; margin-top: 10px; } } } .new-extra-datepicker { padding: 15px; .show-only-when-picking-date { width: 40%; margin-left: -5px; padding-left: 3%; label { .hasDatepicker { margin-top: 10px; .ui-datepicker { background-color: white; } .ui-widget-header { border: none; background: white;; } .ui-datepicker-prev, .ui-datepicker-next { background: transparent; } .ui-datepicker-prev:hover, .ui-datepicker-next:hover { background: white; border: white; } .ui-datepicker-month, .ui-datepicker-year { float: none; color: #00a7ba; text-transform: uppercase; font-family: Ubuntu; font-size: 15px; } .ui-widget-content { background: white; color: gray; } thead { tr { background-color: #acecf2; } } } } } } .new-extra-rowbutton { padding-right: 71%; button { color: white; background-color: #00a7ba; margin-top: 30px; } } @media (max-width: 1200px) { .new-extra-description { padding-right: 66%; } .new-extra-quantity { select { width: 58.8%; margin-left: 2px; } } .new-extra-rowbutton { padding-right: 67%; } } @media (max-width: 998px) { .new-extra-description { padding-right: 54%; } .new-extra-quantity { padding-left: 5%; select { width: 77%; margin-left: 4px; } } .new-extra-datepicker { .show-only-when-picking-date { padding-left: 4%; } } .new-extra-rowbutton { padding-right: 57%; } } @media (max-width: 768px) { .new-extra-description { padding-right: 3%; } .new-extra-quantity { padding-left: 5%; margin-left: 6%; margin-top: 5%; select { width: 60.9%; margin-left: 4px; } } .new-extra-datepicker { padding: 10%; margin-left: -11px; } .new-extra-rowbutton { padding-right: 0%; } } @media (max-width: 480px) { .new-extra-quantity { margin-left: 0; } .new-extra-datepicker { padding: 0; margin-left: -15px; } } @media (min-width: 1400px) { .new-extra-description { padding-left: 1%; padding-right: 76%; } .new-extra-quantity { padding-left: 3%; select { width: 41%; } } .new-extra-datepicker { padding: 0.4%; } .new-extra-rowbutton { padding-right: 76%; } } } } /* RoomInfoPopup */ @media (max-width: 768px) { .room_info_popup, .hotel_info_popup { img { max-width:100%; } } .room_info_popup .room, .hotel_info_popup .hotel { margin:7px 0; } } /**********************/ /** Calendar compare **/ /**********************/ .calendar.compare { background-color:#FFFFFF; .table-content { overflow-x: scroll; } .calendar.compare { padding:10px; } h1 { font-size:24px; } h2 { font-size:16px; } .comparison-table { border: 1px solid lightgray; overflow-x:scroll; width:100%; tr.header th { background-color:gray; width:25%; color:white; padding:20px; border-right: 1px solid lightgray; } tr { td { width:25%; padding:20px; border:1px solid lightgray; } } .room { color:black } .offer { color:dodgerblue; } .board { background-color:gray; color:white; } .amount { color:orange; } } .back, .forward { font-size:50px; text-align:center; cursor:pointer; } .label { white-space: normal; } .best_price { background-color:lightblue; } .best_price_label { display:none; } .best_price .best_price_label { display:block; } } /* Fragment Booking-Detail */ .fragment.Booking-Detail { .actions { button:hover, button:focus, a:hover, a:focus { color: #FFFFFF; } } } /* Modificar reserva en Voucher */ .modify-booking h3 { text-align: center; } .modify-booking input, .modify-booking select { margin-bottom:15px; } .modify-booking.design-b { .address_parent, .state_parent, .postalcode_parent, .city_parent { display:none; } } /* ----------------------- Fragment: Hotel.Weather --------------------------- */ .fragment.Hotel-Weather { .col-right { padding-left:15px; p { line-height: 19px; font-size: 16px; } } .design-c { .weather-section { display:inline-block; &.weather-icon { margin-right:10px; img { width:2.5em; } } &.weather-temperature { margin-right:10px; font-size: 2.8em; line-height: 40px; vertical-align: middle; } &.weather-destination { font-size: 1.3em; line-height: 1.3em; vertical-align: middle; } } } } /* ----------------------- Fragment Hotel-Faq --------------------------- */ .fragment.Hotel-Faq { background-color:white; .section { .section_name { padding:0; a { display: block; padding: 10px 15px; } } .item { .question { font-weight: bold; } .answer { } } } } .fragment.Image { div.image { min-height:200px; } } /* ---------------- FINAL CBEDS_PLUGINS ---------------- */ /* ----------------- GENERIC_PLUGINS ----------------- */ /*{% load cobi_filters %}*/ .colored-text-content{ z-index: 100; } /* -------------------------------------------------- */ /* ----------------------- LoyaltyPopup --------------------------- */ .loyaltypopup{ input { border: 1px solid #BEBEBE; border-radius: 0; } .btn { padding-top: 7px; padding-bottom: 4px; } .remmind { line-height:20px; margin-left: 7px; } } /* ----------------------- Exclusive Benefits --------------------------- */ .exclusive_benefits_plugin { background-color:white; .title { text-align: center; padding-bottom: 40px; h4 { color: #999999; font-size: 1.6em; } } section { margin-bottom: 50px; .title_item { margin-bottom: 0; margin-left: 100px; font-size: 2em; } .description { margin-left: 100px; font-size: 1.2em; } &:before { background-image: url("/images/tick_ok.png"); background-repeat: no-repeat; float: left; content: ""; display: inline-block; width: 100px; height: 100px; } } .booking_btn { text-align: center; } .btn { background-color: #00b3fd; color: #ffffff; text-transform: uppercase; font-size: 1.2em; padding: 15px 70px; border: none; border-radius: 0; } } /* ----------------------- Fragment Hotel.Rooms --------------------------- */ .fragment.Hotel-Rooms{ .header_list { color: #000099; font-size: 2.2em; } .room-image { width:100%; } .room-name{ margin-top:10px; } } /* ----------------------- Booking search form --------------------------- */ .fragment.Booking-BoxForm { position: absolute; top: 220px; z-index: 100; right: 200px; } .fragment.Booking-BoxForm.collapsed { top:86px; height:62px; position:fixed; overflow:hidden; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75); box-shadow: 0 0 5px 0 rgba(0,0,0,0.75); } .fragment.Booking-BoxForm .collapse-button { float:right; text-decoration:none; } .fragment.Booking-BoxForm .collapse-button:hover { text-decoration:none; } .booking_search_form_container { margin-top: 10px; margin-bottom: 10px; padding: 20px; background-color: #fff; width: 350px; } .booking_search_form_container h3 { text-transform: uppercase; color: #00b3fe; font-weight: bold; font-size: 1.6em; margin-bottom: 18px; } .booking_search_form_container label { color: #757679; font-weight: 400; } .booking_search_form_container .btn { background-color: #00b3fe; padding-top: 15px; padding-bottom: 15px; margin-top: 20px; } .booking_search_form_container .form-control{ border-radius: 0; border-color: #a8a9ad; } .booking_search_form_container .row { margin-left: 0; margin-right: 0; } .booking_search_form_container .benefits_container{ text-align: center; margin-top: 35px; } .booking_search_form_container .benefits_link{ text-transform: uppercase; font-weight: 400; text-decoration: underline; color: #002c62; } .booking_search_form_container .promotion_link{ text-decoration: underline; } .booking_search_form_container .promotion_link, .booking_search_form_container .benefits_container { font-size: 1.05em; color: #002c62; } /* Best Price */ .fragment.Booking-BoxForm .best_price_container { background-color:white; margin:0 -20px -20px -20px; padding:15px; } .fragment.Booking-BoxForm .best_price_container span { position:relative; } .fragment.Booking-BoxForm .best_price_container span:after { content:""; width:32px; height:32px; position:absolute; right:-40px; top:-7px; background-repeat: no-repeat; background-image: url("/images/garden_best_price.png"); background-size:contain; } /* ----------------------- SpecialPopup: Booking BoxForm--------------------------- */ .popup_plugin.booking_box_form { text-transform: uppercase; background-color: blue; display: inline-block; padding: 0 12px; color: white; font-weight: 300; line-height: 41px; } .popup_plugin.booking_box_form:hover { text-decoration:none; } .popup_plugin.booking_box_form i { font-size:23px; margin-right:6px; position: relative; top: 3px; } /* El boxform no será collapsable. Ocultamos boton */ .specialpopup .boxform .collapse-button { display:none ; } /* ----------------------- Fragment: Booking.CurrencySelector --------------------------- */ .fragment.Booking-CurrencySelector { cursor:pointer; } .fragment.Booking-CurrencySelector .fa { font-size:24px; position:relative; top:4px; margin-left:8px; } .fragment.Booking-CurrencySelector ul li { list-style-image:none ; } /* ----------------------- Fragment: PopupGallery --------------------------- */ .gallery-preview.design-a .icon { width: 40px; height: 40px; position: absolute; top: 20px; left: 20px; background-image:url('/images/icono_camara.png'); background-size: cover; background-repeat:no-repeat; } .gallery-preview.design-b div.img-gallery{ height: 300px; width: 100%; margin: auto; background-repeat: no-repeat; background-position: center center; } /* ----------------------- Fragment: Hotel.Menu --------------------------- */ .fragment.Hotel-Menu ul { list-style-type:none; padding-left:0; } .fragment.Hotel-Menu ul li a { padding:10px 15px; border-bottom: 2px solid #cccccc; display:block; text-transform:uppercase; } /* ----------------------- Fragment: Destination.Menu --------------------------- */ .fragment.Destination-Menu ul { list-style-type:none; padding-left:0; } .fragment.Destination-Menu ul li a { padding:10px 15px; border-bottom: 2px solid #cccccc; display:block; text-transform:uppercase; } /* ----------------------- Fragment: Breadcrumbs --------------------------- */ .fragment.Breadcrumbs ul { padding: 0; } .fragment.Breadcrumbs ul li { display: inline; list-style-type: none; text-transform:capitalize; } .fragment.Breadcrumbs ul li:not(:last-child):after { content:" > "; padding-right: 5px; padding-left: 5px; } .fragment.Breadcrumbs ul li:last-child a { font-weight:bold; } .fragment.Breadcrumbs ul li a { font-weight:normal; } /* ----------------------- Fragment Header.Menu --------------------------- */ .fragment.Header-Menu { display:inline-block; } /* ----------------------- Fragment Children --------------------------- */ .children .more_about { margin-top: 40px; text-align: center; } .children .more_about_link:hover { text-decoration:none ; } .fragment.all_clickable .children .item { cursor:pointer; } /* --- Designs ---- */ /* CHILDREN CHILD DESIGN A */ .children .item.design-a { margin-bottom:40px; line-height:20px; margin-bottom:10px; background-color: white; } .children .item.design-a p { word-wrap: break-word; /* Util para palabras muy largas en aleman */ } .children .item.design-a.selected { -webkit-box-shadow: 0 0 20px 5px rgba(181,128,15,0.9); -moz-box-shadow: 0 0 20px 5px rgba(181,128,15,0.9); box-shadow: 0 0 15px 5px rgba(181,128,15,0.9); } .children .item.design-a .image { background-repeat:no-repeat; background-size:cover; background-position:center; } .children .item.design-a .footer a { color: white; } /* CHILDREN CHILD DESIGN B */ .children{ .item.design-b { background-color: white; margin-bottom:40px; margin-left: -10px; margin-right: -10px; .action { position: absolute; bottom: 0; right: 5px; } .left_part { padding-left:0; } .right_part { padding-top: 10px; } .image { background-repeat:no-repeat; background-size:cover; background-position:center; } } .item.design-b.selected { -webkit-box-shadow: 0 0 20px 5px rgba(181,128,15,0.9); -moz-box-shadow: 0 0 20px 5px rgba(181,128,15,0.9); box-shadow: 0 0 15px 5px rgba(181,128,15,0.9); .btn { opacity:0.5; cursor:default; } } } .children .item.design-b.room, .children .item.design-b.feature, .children .item.design-b.element { margin-bottom:10px; } /* CHILDREN CHILD DESIGN C */ .children .item.design-c { margin-top:20px; margin-bottom:30px; width:87%; a:hover { text-decoration:none; } .title { font-size: 30px; color: #002c62; font-weight: 200; } .image { margin-bottom: 10px; } .more { color: #337ab7; text-decoration: none; font-size: 17px; padding: 0 0 13px 15px; border-color: lightgray; border-style: solid; border-width: 0 0 1px 0; } } /* CHILDREN CHILD DESIGN D */ .children .item.design-d { margin-top:20px; margin-bottom:30px; height: 340px; a:hover { text-decoration:none; } .image { margin-bottom: 10px; } .title { font-size: 24px; color: #002c62; font-weight: 200; margin-bottom:5px; } .subtitle * { color: #666666; font-size: 17px; height:44px; } } /* CHILDREN CHILD DESIGN E */ .children .item.design-e { margin-right: 12px; padding-bottom: 50px; a { color:black; &:hover { text-decoration:none; color:black; } } .title { font-size:18px; text-transform:uppercase; } .content { padding:20px; } .footer { text-align:center; span { padding: 8px 40px; background-color:blue; color:white; margin:auto; display:inline-block; } } } /* CHILDREN CHILD DESIGN F */ .children .item.design-f { width: 310px; margin-right: 12px; padding-bottom: 50px; .content { position:relative; height:100% !important; header { position: absolute; width: 100%; text-align: center; } .central { height:310px; background-repeat:no-repeat; background-size:cover; } footer h3 { color:white; margin:0 ; font-size:23px ; text-transform:None; font-weight:600; padding-top:14px; padding-bottom:8px; } footer h4 { color:white; font-weight:normal; > p { font-size:17px; } } footer a { font-weight:bold; color:white; font-size:16px; line-height:40px; i { font-size: 26px; margin-left: 7px; top: 2px; position: relative; } } } } /* CHILDREN CHILD DESIGN G */ .children.design-g{ .child { height:600px; overflow:hidden; } .more_about { width:100%; .more_about_link { display:inline-block; background-color: blue; padding: 1px 30px; color: white; font-size: 17px; text-transform: uppercase; margin-top:0; } } } .children .item.design-g { margin-right: 12px; padding-bottom: 50px; .image_wrap { position:relative; } .overlay { width:50%; height:100%; background-color:rgba(196,94,196,0.7); position:absolute; top:0; left:0; padding:30px; } .hotel_name { color:white; img { max-width:100%; } } .title { font-size:18px; text-transform:uppercase; color:white; } .price { color:white; font-size:50px; .from { font-size:14px; } .currency { font-size:30px; } } .description { height:180px; } .footer { text-align:center; a { padding: 8px 40px; background-color:gray; color:white; margin:auto; display:inline-block; text-transform:uppercase; &:hover { text-decoration:none; color:white; } } } } .children .item.design-g:not(.extended) .extension { display:none; } .children .item.design-g.home{ .overlay { height:80%; } .bottom-overlay { width:100%; height:20%; background-color:rgba(150,150,150,0.7); position:absolute; bottom:0; left:0; padding:10px; } .close_button { position:absolute; right:10px; top:10px; color:white; font-size:40px; z-index:2; } } .children .item.design-g:not(.home) .bottom-overlay { display:none; } .children .item.design-g:not(.home) .close_button { display:none; } /* CHILDREN CHILD DESIGN H */ .children .item.design-h{ .right_part { padding:20px; h2 { text-transform:none; } p { line-height:20px; } } .action { margin-right:10px; a { display:inline-block; padding:3px 30px; } } } /* ------------------------ Fragment Booking.Steps ----------------------------- */ .fragment.Booking-Steps{ .booking_stepper { height: 75px; position: relative; padding-top: 5px; .steps_container { position: absolute; top: 0; width: 100%; div .bstep { font-size: 40px; background-color: #ffffff; height: 65px; width: 65px; display: block; border-radius: 50%; padding-top: 23px; text-align: center; margin-left: auto; margin-right: auto; color: #999999; border: 1px solid #999999; } } .progressbar_container{ .progress { height: 5px; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; background-color: #cccccc; margin-right: 20px; margin-left: 20px; margin-bottom: 0; } } .label_container { padding-bottom: 7px; span { font-size: 19px; color: #d6d6d6; } } } } .fragment.Booking-Steps{ .booking_stepper{ .steps_container{ div:first-child{ .bstep { margin-left: 0; } } } } } .fragment.Booking-Steps{ .booking_stepper{ .steps_container{ div:last-child{ .bstep { margin-right: 0; } } } } } /* ----------------------- Fragment Booking.LineForm --------------------------- */ .fragment.Booking-LineForm{ .fa-calendar { position:absolute; right: 20px; top: 20px; } .container { width:100% !important; } } /* ----------------------- Fragment Booking.ConfirmForm --------------------------- */ .fragment.Booking-ConfirmForm{ .user_data{ label { width:100%; } } .user_data_fields{ padding-top:20px; label { text-align:left; } * { text-align:left; } } } /* ----------------------- Fragment: Gallery (design jssor) --------------------------- */ .fragment.Gallery{ .gallery_jssor { position: relative; margin: 0 auto; top: 0; left: 0; width: 800px; height: 510px; overflow-x: hidden; visibility: hidden; background-color: transparent; .slides { cursor: default; position: relative; top: 0; left: 0; width: 800px; height: 450px; overflow: hidden; } } } /* .jssora05l (normal) .jssora05r (normal) .jssora05l:hover (normal mouseover) .jssora05r:hover (normal mouseover) .jssora05l.jssora05ldn (mousedown) .jssora05r.jssora05rdn (mousedown) */ .fragment.Gallery .jssora05l, .jssora05r { display: block; position: absolute; /* size of arrow element */ width: 100px; height: 60px; cursor: pointer; /*background: url('img/a17.png') no-repeat;*/ overflow: hidden; } .fragment.Gallery .jssora05l { background-position: -10px -40px; } .fragment.Gallery .jssora05r { background-position: -70px -40px; } .fragment.Gallery .jssora05l:hover { background-position: -130px -40px; } .fragment.Gallery .jssora05r:hover { background-position: -190px -40px; } .fragment.Gallery .jssora05l.jssora05ldn { background-position: -250px -40px; } .fragment.Gallery .jssora05r.jssora05rdn { background-position: -310px -40px; } /* jssor slider thumbnail navigator skin 01 css */ /* .jssort01 .p (normal) .jssort01 .p:hover (normal mouseover) .jssort01 .p.pav (active) .jssort01 .p.pdn (mousedown) */ .fragment.Gallery{ .jssort01 { position:absolute; left:0; bottom:0; width:800px; height:61px; .p { position: absolute; top: 0; left: 0; width: 100px; height: 61px; } .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .w { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c { position: absolute; top: 0; left: 0; width: 96px; height: 52px; box-sizing: content-box; } .pav .c { top: 2px; _top: 0; left: 2px; _left: 0; width: 96px; height: 52px; border: #000 0 solid; _border: #fff 2px solid; background-position: 50% 50%; } .p:hover .c { top: 0; left: 0; width: 98px; height: 58px; border: #000 1px solid; background-position: 50% 50%; cursor:pointer; } .p.pdn .c { background-position: 50% 50%; width: 96px; height: 56px; border: #000 2px solid; } } } * html .fragment.Gallery .jssort01 .c, * html .fragment.Gallery .jssort01 .pdn .c, * html .fragment.Gallery .jssort01 .pav .c { /* ie quirks mode adjust */ width /**/: 100px; height /**/: 56px; } /* ----------------------- Fragment Garden.Values --------------------------- */ .fragment.Garden-Values{ .thumbnails{ .element { cursor:pointer; .name { text-transform: uppercase; display:block; padding: 15px 40px; } img { width:80px; height:80px; } } .col-xs-2 { text-align:center; } } .expo { height:300px; background-repeat: no-repeat; background-size:cover; background-position:center; * { color:white; } .name { text-transform: uppercase; text-align:center; } .description { font-size:16px; } p { margin:20px auto; } .plus { margin:auto; display:block; text-align:center; font-size:24px; } .content { padding:30px; z-index:3; position:absolute; width:100%; opacity:0.1; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; transition: opacity 300ms linear; } } } body.tablet .fragment.Garden-Values .expo .content { opacity:1; /* En tablet queremos que el contenido se vea siempre, ya que no hay mouse over */ } .fragment.Garden-Values{ .expo{ .overlay { width:100%; height:100%; background-color:#0da2bd; position:absolute; z-index:2; opacity:0.1; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; transition: opacity 300ms linear; } &:hover{ .content { opacity:1; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; transition: opacity 300ms linear; } .overlay { opacity:0.7; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; transition: opacity 300ms linear; } } } } /* ----------------------- Generic Slider Plugin --------------------------- */ .generic_slide_plugin{ .carousel.fade_in{ .item { -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; } .active.left, .active.right { left:0; opacity:0; z-index:2; } .next, .prev { left:0; opacity:1; z-index:1; } } } .generic_slide_plugin .carousel .carousel-inner > .container > .row { height:100%; } .generic_slide_plugin.image-type .wrapper { display:table; } .generic_slide_plugin.image-type .item { background-size: cover ; } .generic_slide_plugin{ .carousel{ .carousel-inner{ .container{ .row { .central-text-column { height:100%; .wrapper { width: 100%; .cell { display:table-cell } } } } } } .carousel-indicators{ li { position:relative; a { position: absolute; width: 8px; left: 0; height: 8px; } } } } } /* Contact Plugin */ .pop-contact-form-content{ .terms_and_conditions * { display:inline; } } /* Fragment Element.HowToGetThere */ .fragment.Element-HowToGetThere{ .map { width: 100%; height: 250px; } } /* Fragment FilterByTypeRadioButtons */ .fragment.FilterByTypeRadioButtons .filter_button { text-align:center; cursor:pointer; } .fragment.FilterByTypeRadioButtons .filter_button.active .name { font-weight:bold; } /* Fragment Header.MobileMenu */ .fragment.Header-MobileMenu{ .dropdown_content { display: none; margin-bottom: 10px; > div { padding-left: 10px; } } } /* ---------------- FINAL GENERIC_PLUGINS ---------------- */ /********** BUTTONBAR **********/ .buttonbar_plugin{ list-style: none; li{ display: inline-block; } a{ display: inline-block; text-align: center; vertical-align: middle; opacity: 0.7; margin-right: 8px; cursor: default; &:hover{ text-decoration: none; } } a.link{ cursor: pointer; &:hover{ opacity: 1; } } } /*********** FIN BUTTONBAR **********/ /********** ROOM-1250 ************/ /********* Clases para Download plugin *********/ .download_plugin{ .download_plugin_visible{ display: inline-block; background: #ececec; padding: 20px; min-width: 180px; margin-bottom: 10px; .icons{ text-align: right; .lupas{ a.item.icon.view:before{ content: "\f06e"; font-family: FontAwesome; display: inline-block; width: 35px; height: 35px; } } a.icon.download.action-open-popup:before{ content: "\f0ed"; font-family: FontAwesome; display: inline-block; width: 35px; height: 35px; } } } } /********** FIN ROOM-1250 *************/