@font-face{font-family:tui;src:url(../../../fonts/tuitype-webfont.eot);src:url(../../../fonts/tuitype-webfont.eot?#iefix) format('embedded-opentype'),url(../../../fonts/tuitype-webfont.woff) format('woff'),url(../../../fonts/tuitype-webfont.ttf) format('truetype'),url(../../../fonts/tuitype-webfont.svg#webfont) format('svg');font-display:swap } @font-face{font-family:icons;src:url(../../../fonts/icons-webfont.eot);src:url(../../../fonts/icons-webfont.eot?#iefix) format('embedded-opentype'),url(../../../fonts/icons-webfont.woff) format('woff'),url(../../../fonts/icons-webfont.ttf) format('truetype'),url(../../../fonts/icons-webfont.svg#webfont) format('svg');font-display:swap } @font-face{font-family:tui-light;src:url(../../../fonts/TUITypeLt_LATN_W_Rg.eot);src:url(../../../fonts/TUITypeLt_LATN_W_Rg.eot?#iefix) format('embedded-opentype'),url(../../../fonts/TUITypeLt_LATN_W_Rg.woff) format('woff'),url(../../../fonts/TUITypeLt_LATN_W_Rg.ttf) format('truetype');font-display:swap } @font-face{font-family:tui-light-bold;src:url(../../../fonts/TUITypeLt_LATN_W_Bd.eot);src:url(../../../fonts/TUITypeLt_LATN_W_Bd.eot?#iefix) format('embedded-opentype'),url(../../../fonts/TUITypeLt_LATN_W_Bd.woff) format('woff'),url(../../../fonts/TUITypeLt_LATN_W_Bd.ttf) format('truetype');font-display:swap } @font-face{font-family:icons-v2;src:url(../../../fonts/icons-v2/fonts/icons.eot?55kzd9);src:url(../../../fonts/icons-v2/fonts/icons.eot?55kzd9#iefix) format('embedded-opentype'),url(../../../fonts/icons-v2/fonts/icons.woff?55kzd9) format('woff'),url(../../../fonts/icons-v2/fonts/icons.ttf?55kzd9) format('truetype'),url(../../../fonts/icons-v2/fonts/icons.svg?55kzd9#icons) format('svg');font-weight:400;font-style:normal;font-display:swap } @font-face{font-family:proxima;src:url(../../../fonts/ProximaNovaSoft-Regular.eot);src:url(../../../fonts/ProximaNovaSoft-Regular.eot?#iefix) format('embedded-opentype'),url(../../../fonts/ProximaNovaSoft-Regular.woff) format('woff');font-weight:400;font-display:swap }#new-holiday-finder, #search-panel { background: rgb(229, 9, 110) !important; } #new-holiday-finder p.title { color: rgb(255, 255, 255); background: rgb(229, 9, 110) !important; } #new-holiday-finder .mobile-mega-menu ul li a { color: rgb(229, 9, 110) !important; } #new-holiday-finder .button { padding-top: 0px; background: rgb(222, 227, 233) !important; } #new-holiday-finder .button span.edit-search-button { color: rgb(51, 51, 51) !important; } #header-nav #logo-section .travel-tools > li a, #header-nav i.caret.blue, #header-nav span.caret.blue { color: rgb(229, 9, 110) !important; } #header-nav #menu-section .mega .mega-title .caret.close, #header-nav #menu-section .mega .mega-title a, #header-nav .mega div.container ul.blocktype > li.clinks a { color: rgb(92, 116, 145) !important; } #header-nav .mega div.container ul.blocktype > li.clinks.viewAll a { color: rgb(229, 9, 110) !important; } #search-panel .form-container .button-container .button { border-radius: 3px; background: rgb(222, 227, 233) !important; color: rgb(76, 76, 76) !important; font-size: 17px !important; } #search-panel .form-container .field .input-container .list-icon, #search-panel .form-container .field .select .arrow, #search-panel .form-container .field input[type="text"] { color: rgb(92, 116, 145) !important; } #search-panel .date-picker .title .select-block .radio, #search-panel .room-picker .wrapper .title .select-block .radio { border: 1px solid rgb(92, 116, 145) !important; } #search-panel .date-picker .title .select-block .radio.active, #search-panel .room-picker .wrapper .title .select-block .radio.active { background: rgb(92, 116, 145) !important; } #search-panel .date-picker .content .month-navigator a.next, #search-panel .date-picker .content .select span::after, #search-panel .date-picker .content a.prev, #search-panel .room-picker .wrapper .content .month-navigator a.next, #search-panel .room-picker .wrapper .content .select span::after, #search-panel .room-picker .wrapper .content a.prev { color: rgb(92, 116, 145); } #search-panel .auto-complete .btn a, #search-panel .auto-complete ul li a, #search-panel .date-picker .content .calendar table td.avail i, #search-panel .room-picker .wrapper .content .calendar table td.avail i, #search-panel .search-room-overlay .room-picker .room-overlay-btns a { color: rgb(92, 116, 145); } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { box-sizing: border-box; position: relative; min-height: 1px; } .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 { float: left; } .col-xl-7 { width: 58.3333%; } .carousel .viewport > ul.things::after, .carousel .viewport > ul.things::before, .content-width::after, .content-width::before, .section-heading::after, .section-heading::before, .select.custom-options .scroll::after, .select.custom-options .scroll::before { display: table; content: ""; } .carousel .viewport > ul.things::after, .content-width::after, .section-heading::after, .select.custom-options .scroll::after { clear: both; } @keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } #footer * { font-family: tui-light, Arial, sans-serif; } #footer #call-us { font-family: tui, Arial, sans-serif; line-height: 100%; padding: 0px 20px; } #footer #call-us .content-width { border-top: 1px solid rgb(235, 233, 226); padding: 16px 0px; } #footer #call-us .caret { background: rgb(92, 116, 145); width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 2px; font-size: 16px; float: left; font-family: icons; } #footer #call-us h2 { float: left; font-size: 24px; padding: 7px 0px 0px 10px; } #footer #call-us h2 span { font-size: 20px; text-transform: none; } #footer #call-us h2 span a { font-size: 24px; } #footer #holidayextras p a, #footer #terms p a { padding: 6px 0px; font-size: 15px; break-inside: avoid-column; display: inline-block; width: 194px !important; color: rgb(92, 116, 145) !important; } #footer #call-us { display: none; } .d-blue { color: rgb(10, 43, 96); } .mega { position: absolute; left: 0px; z-index: 2; background: rgb(255, 255, 255); width: 100%; height: 0px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px; transition: height 0.3s ease 0.2s; } .mega .caret.close { position: absolute; top: 0px; right: 0px; font-size: 24px; line-height: 100%; display: inline-block; width: 60px; height: 44px; cursor: pointer; text-align: center; padding-top: 16px; } .mega a { display: inline-block; height: auto; color: rgb(52, 172, 180); font-family: "droid sans", tui, Arial, sans-serif; font-size: 15px; } .mega div.inner { width: 100%; padding: 50px 20px 20px; position: absolute; bottom: 0px; } .mega div.container { width: 25%; float: left; height: 100%; position: relative; } .mega div.container .title { color: rgb(0, 0, 0); font-size: 17px; font-family: "droid sans", tui, Arial, sans-serif; padding-bottom: 5px; } .mega div.container.collections { width: 50%; overflow: hidden; } .mega div.container ul { height: auto; } #new-holiday-finder { background: rgb(114, 206, 213); color: rgb(255, 255, 255); font-family: tui, Arial, sans-serif; font-size: 18px; line-height: 100%; height: auto; padding: 0px 20px; position: relative; } #new-holiday-finder .title span { width: 0px; height: 0px; border-style: solid; border-width: 6px; border-color: rgb(255, 255, 255) transparent transparent; display: inline-block; position: relative; top: 2px; left: 3px; } #new-holiday-finder .scroll { width: calc(100% - 180px); height: 60px; float: left; overflow: hidden; margin-right: 10px; } #new-holiday-finder ul { cursor: pointer; height: 100%; } #new-holiday-finder ul li { float: left; padding: 19px 0px 0px 10px; } #new-holiday-finder ul li:first-child { padding-left: 0px; } #new-holiday-finder ul li:last-child { padding-right: 10px; } #new-holiday-finder span { color: rgb(10, 43, 96); } #new-holiday-finder .button { text-shadow: none; color: rgb(255, 255, 255); width: 170px; margin-top: 10px; cursor: pointer; font-size: 20px !important; } #new-holiday-finder .button span.edit-search-button { font-family: tui-light; font-size: 18px; color: rgb(255, 255, 255) !important; } #new-holiday-finder .mobile-mega-menu { position: absolute; top: 45px; left: 0px; right: 0px; background: rgb(255, 255, 255); padding: 2px 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px; transition: transform 0.3s ease; transform: translateY(-500px); } #new-holiday-finder .mobile-mega-menu ul { overflow: hidden; } #new-holiday-finder .mobile-mega-menu ul li { float: left; width: 50%; padding: 0px; } #new-holiday-finder .mobile-mega-menu ul li a { display: block; border-bottom: 1px solid rgb(235, 233, 226); padding: 10px 0px; font-size: 17px; } #new-holiday-finder .mobile-mega-menu ul li:nth-child(2n+1) a { margin-right: 5px; } #new-holiday-finder .mobile-mega-menu ul li:nth-child(2n) a { margin-left: 5px; } #search-panel { background: rgb(82, 188, 235); position: relative; } #search-panel.holiday-search-panel { display: block; } #search-panel div.search-panel-mask { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.4; } #search-panel .form-wrapper { padding: 0px 16px; } #search-panel .form-container { padding: 20px 0px; } #search-panel .form-container .col { float: left; } #search-panel .form-container .field { float: left; margin-right: 8px; font-size: 16px; } #search-panel .form-container .field .label { color: rgb(255, 255, 255); white-space: nowrap; margin-bottom: 5px; } #search-panel .form-container .field .input-container { position: relative; } #search-panel .form-container .field .input-container .list-icon { position: absolute; top: 0px; right: 0px; padding: 10px 10px 10px 0px; color: rgb(92, 116, 145); } #search-panel .form-container .field .input-container .list-icon i { padding-right: 3px; } #search-panel .form-container .field .input-container .arrow-droplist, #search-panel .form-container .field .select-container .arrow-droplist { position: absolute; left: 8px; top: 38px; color: rgb(255, 255, 255); display: none; } #search-panel .form-container .field input[type="text"] { background: rgb(255, 255, 255); height: 40px; box-shadow: rgba(0, 0, 0, 0) 0px 2px 0px; transition: box-shadow 0.3s ease; font-family: tui-light, Arial, sans-serif; color: rgb(136, 136, 136); padding: 0px 40px 0px 10px; font-size: 16px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0px; } #search-panel .form-container .field input[type="text"]::-webkit-input-placeholder { color: rgb(136, 136, 136); } #search-panel .form-container .field .select-container { width: 100%; position: relative; } #search-panel .form-container .field .select { background: rgb(255, 255, 255);  height: 40px; box-shadow: none; width: 100%; } #search-panel .form-container .field .select .select-text, #search-panel .form-container .field .select .text { font-size: 16px; line-height: 40px; height: 40px; padding: 0px 0px 0px 10px; width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #search-panel .form-container .field .select .arrow { float: right; color: rgb(92, 116, 145); font-size: 11px; line-height: 40px; height: 40px; border: none; text-align: center; } #search-panel .form-container .field .select select { height: 40px; } #search-panel .form-container .field .select select option { color: rgb(102, 102, 102); } #search-panel .form-container .field.from, #search-panel .form-container .field.where { width: calc(50% - 8px); } #search-panel .form-container .field.where input[type="text"] { padding-right: 60px; width: 100%; } #search-panel .form-container .field.date, #search-panel .form-container .field.duration { width: calc(50% - 8px); } #search-panel .form-container .field .input-container .select, #search-panel .form-container .field .input-container input[type="text"], #search-panel .form-container .field .input-container select, #search-panel .form-container .field .select-container .select, #search-panel .form-container .field .select-container input[type="text"], #search-panel .form-container .field .select-container select { border-radius: 3px; } #search-panel .form-container .field .input-container .search-icon, #search-panel .form-container .field .select-container .search-icon { padding: 12px 8px; } #search-panel .form-container .field .input-container .search-icon.arrow, #search-panel .form-container .field .select-container .search-icon.arrow { padding: 3px; font-size: 8px; line-height: 38px; height: auto; } #search-panel .form-container .button-container { float: left; margin-top: 25px; width: 50%; vertical-align: bottom; } #search-panel .form-container .button-container .button { width: 100%; position: relative; height: 40px !important; } #search-panel .form-container .button-container .button .search-panel-spinner { position: absolute; border: 2px solid transparent; border-radius: 5px; cursor: pointer; left: calc(50% - 15px); top: calc(50% - 18px); } #search-panel .form-container .button-container .button .search-panel-spinner::before { content: ""; box-sizing: border-box; position: absolute; top: -30%; width: 30px; height: 30px; border-radius: 50%; border-width: 1px; border-style: solid; border-color: rgb(0, 119, 221) rgb(204, 204, 204) rgb(204, 204, 204); border-image: initial; animation: searchPanelSpinner 0.6s linear infinite; } @keyframes searchPanelSpinner { 100% { transform: rotate(360deg); } } #search-panel.loaded div.search-panel-mask { display: none; } #search-panel.loaded .button-container .button { color: rgb(255, 255, 255); } #search-panel.loaded .button-container .button .search-panel-spinner { display: none; } #search-panel .auto-complete { font-size: 15px; } #search-panel .auto-complete .btn { border: 1px solid rgb(215, 210, 195); padding: 10px; display: none; } #search-panel .auto-complete .btn a { text-transform: uppercase; cursor: pointer; font-size: 14px; } #search-panel .date-picker, #search-panel .room-picker { position: absolute; top: 50px; width: 275px; z-index: 11; } #search-panel .date-picker .wrapper, #search-panel .room-picker .wrapper { background: rgb(255, 255, 255); border-right: 1px solid rgb(215, 210, 195); border-bottom: 1px solid rgb(215, 210, 195); border-left: 1px solid rgb(215, 210, 195); border-image: initial; border-top: none; position: relative; } #search-panel .date-picker .wrapper .title, #search-panel .room-picker .wrapper .title { padding: 5px 10px; border-bottom: 1px solid rgb(215, 210, 195); } #search-panel .date-picker .wrapper .title .select-block, #search-panel .room-picker .wrapper .title .select-block { text-transform: none; font-size: 15px; padding-left: 30px; } #search-panel .date-picker .wrapper .title .select-block .radio, #search-panel .room-picker .wrapper .title .select-block .radio { width: 18px; height: 18px; top: 11px; left: 0px; font-size: 12px; font-family: icons-v2 !important; } #search-panel .date-picker .wrapper .title .select-block .radio::after, #search-panel .room-picker .wrapper .title .select-block .radio::after { content: ""; } #search-panel .date-picker .wrapper .content, #search-panel .room-picker .wrapper .content { padding: 10px; } #search-panel .date-picker .wrapper .content .month-navigator, #search-panel .room-picker .wrapper .content .month-navigator { font-size: 0px; } #search-panel .date-picker .wrapper .content .month-navigator a.next, #search-panel .date-picker .wrapper .content .month-navigator a.prev, #search-panel .room-picker .wrapper .content .month-navigator a.next, #search-panel .room-picker .wrapper .content .month-navigator a.prev { display: inline-block; width: 35px; vertical-align: middle; text-align: center; font-size: 15px; line-height: 40px; } #search-panel .date-picker .wrapper .content .month-navigator .select, #search-panel .room-picker .wrapper .content .month-navigator .select { display: inline-block; width: calc(100% - 70px); vertical-align: middle; text-align: center; font-size: 16px; } #search-panel .date-picker .wrapper .loading, #search-panel .room-picker .wrapper .loading { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(255, 255, 255); } #search-panel .date-picker .wrapper .loading .spinner, #search-panel .room-picker .wrapper .loading .spinner { position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; } #search-panel .hint-strap { height: 48px; line-height: 48px; padding: 0px; width: auto; margin-top: 0px; box-shadow: rgba(0, 0, 0, 0.18) -1.7px 1px 5px 0px; background: rgb(238, 241, 244); display: none; } #search-panel .hint-strap .clear-btn { display: inline-block; width: 100px; vertical-align: top; } #search-panel .hint-strap a { color: rgb(76, 76, 76); } #search-panel .hint-strap .child-age { text-align: right; display: inline-block; width: calc(100% - 120px); } #search-panel .hint-strap .child-age > div { border-left: 1px solid rgb(9, 42, 94); padding: 0px 10px; display: inline-block; } #search-panel.selected .hint-strap { display: block; } #search-panel .form-container { padding: 20px 0px; } #search-panel .form-container .col.one { width: 40%; } #search-panel .form-container .col.two { width: 34%; } #search-panel .form-container .col.three { width: 26%; } #search-panel .form-container .button-container { width: calc(100% - 116px); } #search-panel.rooms-included .form-container .field.pax { width: calc(50% - 8px); margin-right: 8px; } #search-panel.rooms-included .form-container .button-container { width: 50%; margin-top: 25px; } #search-panel.rooms-included .form-container .col.one { width: calc(38% - 6px); } #search-panel.rooms-included .form-container .col.two { width: calc(32% + 38px); } #search-panel.rooms-included .form-container .col.three { width: calc(30% - 32px); } .default-dropdown .select-label { font-size: 16px; white-space: nowrap; color: rgb(9, 42, 94); } .default-dropdown .select { width: 100%; height: 40px; border: 1px solid rgb(215, 210, 195); border-radius: 3px; box-shadow: none; line-height: 36px; background: rgb(255, 255, 255); } .default-dropdown .select select { height: 100%; } .default-dropdown .select option { font-size: 16px; } .default-dropdown .select .select-text { padding: 0px 0px 0px 16px; color: rgb(0, 0, 0); font-size: 16px; } .default-dropdown .select .arrow-down { float: right; height: 100%; text-align: center; font-size: 6px; width: auto; padding: 0px 16px 0px 0px; border: none; line-height: 40px; color: rgb(46, 169, 224); } .drop-list.pax-drop-list { font-family: tui-light, Arial, sans-serif !important; } .drop-list.pax-drop-list .pax-wrapper { font-size: 0px; padding-top: 24px; } .drop-list.pax-drop-list .content-width { padding: 0px 20px 20px; box-sizing: border-box; } .drop-list.pax-drop-list .content-width .wrapper { padding: 0px 16px; width: auto; max-width: 1016px; } .drop-list.pax-drop-list .content-width .wrapper .title { padding: 16px 0px; } .drop-list.pax-drop-list .content-width .wrapper .title h3 { color: rgb(0, 0, 0); padding: 0px; font-size: 16px !important; font-family: proxima-light-bold !important; } .drop-list.pax-drop-list .select .arrow-down { color: rgb(229, 9, 110); } .drop-list.pax-drop-list .children-container { width: 144px; } .drop-list.pax-drop-list .heading-text, .drop-list.pax-drop-list .select-label { line-height: 22px; margin-bottom: 3px; color: rgb(0, 0, 0); } .drop-list.pax-drop-list .content-width .pax-content { overflow: hidden; } .drop-list.pax-drop-list .rooms-combination { width: 33.33%; display: inline-block; vertical-align: top; } .drop-list.pax-drop-list .rooms-combination .default-dropdown { width: 75%; padding-right: 8px; } .drop-list.pax-drop-list .pax-combination { width: 66.66%; display: inline-block; vertical-align: top; } .drop-list.pax-drop-list .pax-combination .select { background: rgb(253, 253, 252); } .drop-list.pax-drop-list .rooms-wrapper.hide-room-text .rooms-title { display: none; } .drop-list.pax-drop-list .rooms-wrapper.hide-room-text .pax-list { padding: 0px 0px 24px; } .drop-list.pax-drop-list .rooms-title span { display: inline-block; vertical-align: middle; } .drop-list.pax-drop-list .rooms-title span.room-text { padding-left: 8px; } .drop-list.pax-drop-list .rooms-title span.room-count { padding-left: 7px; } .drop-list.pax-drop-list .rooms { width: 50%; display: inline-block; box-sizing: border-box; vertical-align: top; } .drop-list.pax-drop-list .rooms:nth-child(2n+1) { padding-right: 8px; } .drop-list.pax-drop-list .pax-list { padding: 16px 0px 24px; } .drop-list.pax-drop-list .rooms-title { padding: 0px 8px; background: rgb(238, 241, 244); } .drop-list.pax-drop-list .rooms-title h3 { line-height: 48px; color: rgb(92, 116, 145); font-size: 18px !important; } .drop-list.pax-drop-list .pax-select { width: 64px; padding-left: 16px; display: inline-block; } .drop-list.pax-drop-list .pax-select .select-text { padding-left: 8px; } .drop-list.pax-drop-list .pax-select .arrow-down { padding-right: 8px; } .drop-list.pax-drop-list .pax-select:first-child { padding-left: 0px; } .drop-list.pax-drop-list .pax-select:nth-child(2n+1) { padding-left: 0px; } .drop-list.pax-drop-list .heading-text { font-size: 16px; color: rgb(0, 0, 0); } .drop-list.pax-drop-list .children-overlay, .drop-list.pax-drop-list .children-overlay .pax-select { padding-top: 16px; } .drop-list.pax-drop-list .button-container { padding: 8px 0px; } .drop-list.pax-drop-list .error-msg-block { padding-bottom: 20px; display: none; } .drop-list.pax-drop-list .room-specific-info { display: none; font-size: 16px; padding: 16px 16px 16px 0px; box-sizing: border-box; } .drop-list.pax-drop-list .room-specific-info .info { background: rgb(242, 242, 242); padding: 16px; } .date-picker { position: absolute; top: 50px; width: 275px; z-index: 11; } @keyframes searchPanelSpinner { 100% { transform: rotate(360deg); } } .drop-list { position: absolute; z-index: 1001; left: 0px; width: 100%; overflow: hidden; font-family: tui-light, Arial, sans-serif; } .drop-list .arrow { color: rgb(255, 255, 255); position: relative; top: 8px; } .drop-list .content-width { padding-bottom: 20px; min-width: 283px; max-width: 1048px; background: rgb(229, 9, 110) !important; } .drop-list .content-width.full-width { max-width: none !important; } .drop-list .content-width .wrapper { overflow: hidden; max-width: 1008px; padding: 10px 20px; background: rgb(255, 255, 255); width: calc(100% - 80px); margin: auto; position: relative; min-height: 120px; } .drop-list .content-width .wrapper .loading { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 10000; background: rgba(255, 255, 255, 0.7); } .drop-list .content-width .wrapper .loading .spinner { position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; } .drop-list .content-width .title { padding: 10px 0px; border-bottom: 1px solid rgb(235, 233, 226); } .drop-list .content-width .title > h3 { width: calc(100% - 30px); display: inline-block; } .drop-list .content-width .title a.close { float: right; font-size: 16px; color: rgb(92, 116, 145) !important; } .drop-list .content-width .title a.close i { line-height: 28px; } .drop-list .content-width .button-container { border-top: 1px solid rgb(235, 233, 226); height: auto; padding-top: 6px; } .drop-list .content-width .button-container .btn { width: 50%; float: left; } .drop-list .content-width .button-container .btn a { line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(92, 116, 145) !important; } .drop-list .content-width .button-container .btn:last-child { text-align: right; } .drop-list .content-width .pax-content { max-height: calc(100vh - 243px); } #search-panel.rooms-included .hint-strap .child-age { visibility: hidden; } #search-panel .form-wrapper { padding: 0px 16px; } #search-panel .form-wrapper .form-container { padding: 14px 0px 15px; } #search-panel .error-msg-block { padding: 20px; background: rgb(255, 255, 255); color: rgb(255, 37, 37); } #search-panel .duration .default-dropdown .select select { z-index: 1; } #search-panel .duration .default-dropdown .select .select-text { color: rgb(102, 102, 102); } .blue { color: rgb(92, 116, 145); } .white { color: rgb(255, 255, 255); } .fl { float: left; } p a { font-size: 15px; } p.title { font-size: 16px; font-family: tui-light, Arial, sans-serif; text-transform: uppercase; } span.radio { border: 1px solid rgb(92, 116, 145); } .button { background: rgb(92, 116, 145); color: rgb(255, 255, 255); transition: background 0.3s ease; } .select-block { padding: 9px 10px 9px 40px; font-family: tui-light, Arial, sans-serif; text-transform: uppercase; position: relative; transition: background 0.3s ease; } .select-block .radio { position: absolute; top: 9px; left: 10px; font-size: 16px; line-height: 17px; text-transform: none; } .select-block .radio.check { border-radius: 0px; } h2 { text-transform: none; color: rgb(0, 0, 0); font-family: proxima, arial, sans-serif !important; } .content.collections-landing { font-family: tui-light, Arial, sans-serif; line-height: 1.4; margin: 0px; background: rgb(238, 241, 244); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .content.collections-landing h1, .content.collections-landing h2, .content.collections-landing h3, .content.collections-landing h4, .content.collections-landing h5, .content.collections-landing h6 { text-transform: uppercase; font-weight: 400; line-height: 1.2; margin-bottom: 2rem; } .content.collections-landing h1:first-child, .content.collections-landing h2:first-child, .content.collections-landing h3:first-child, .content.collections-landing h4:first-child, .content.collections-landing h5:first-child, .content.collections-landing h6:first-child { margin-top: 0px; } .content.collections-landing h2 { font-family: tui-light, Arial, sans-serif; margin-bottom: 1.5rem; margin-top: 1rem; color: rgb(0, 0, 0); font-size: 1.375rem !important; } .content.collections-landing h2 .by-tui { font-weight: 600; font-family: proxima-light-bold, arial, sans-serif !important; } .content.collections-landing .wrapper h2 { margin-bottom: 0.5rem; } .content.collections-landing p { margin: 1rem 0px; font-family: tui-light, Arial, sans-serif; } .content.collections-landing .products-section { padding-top: 2.5rem; position: relative; z-index: 2; } .content.collections-landing .products-section { padding-bottom: 1.5rem; } #hero-banner { position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; } #hero-banner::after { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ""; z-index: 1; background: rgba(92, 116, 145, 0.8); } #hero-banner .site-header { color: rgb(255, 255, 255); padding: 2.5rem 0px; position: relative; z-index: 2; } #hero-banner .site-header .container { width: calc(100% - 1rem); } #hero-banner .site-header .container h1 { margin-bottom: 1rem; line-height: 1.2; color: rgb(255, 255, 255); font-weight: 600; text-transform: none; font-size: 1.875rem !important; font-family: proxima-light-bold, arial, sans-serif !important; } #hero-banner .site-header .container .intro-text { font-size: 1.25rem; margin: 0px; line-height: 1.2; } #hero-banner::after, #hero-banner::before { background: rgba(92, 116, 145, 0.6); } #hero-banner .site-header .container { width: calc(100% - 2rem); } #hero-banner .site-header .container h1 { font-size: 2.5rem !important; } .products-section { background-color: rgb(226, 243, 254); } .products-section .wrapper header { width: calc(100% - 1rem); max-width: 65.5em; } .products-section .wrapper header p { margin: 0px 0px 1.5rem; font-size: 1.125rem; line-height: 1.22; color: rgb(0, 0, 0); } .products-section .wrapper .product-cards { position: relative; } .products-section .wrapper .product-cards .products { display: flex; flex-wrap: nowrap; overflow-x: auto; } .products-section .wrapper .product-cards .products .product { background: rgb(255, 255, 255); flex: 0 0 auto; width: calc(83.3333% - 1rem); margin: 0px 0.5rem 2.5rem 0px; } .products-section .wrapper .product-cards .products .product:first-child { margin-left: 0.5rem; } .products-section .wrapper .product-cards .products .product .product-container { position: relative; } .products-section .wrapper .product-cards .products .product .product-container .pseudo-container { position: absolute; width: 100%; height: 100%; top: 0px; bottom: 0px; } .products-section .wrapper .product-cards .products .product .image-container { position: relative; overflow: hidden; } .products-section .wrapper .product-cards .products .product .image-container::before { display: block; content: ""; width: 100%; padding-top: 50%; } .products-section .wrapper .product-cards .products .product .image-container img { width: 100%; height: auto; display: block; max-width: 100%; border: 0px; top: -50%; min-width: 100%; min-height: 100%; position: absolute; left: -50%; margin: auto; bottom: -50%; right: -50%; } .products-section .wrapper .product-cards .products .product .product-text { padding: 0.5rem; } .products-section .wrapper header { width: calc(100% - 2rem); } .products-section .wrapper .product-cards .products .product { margin-right: 1rem; width: calc(41.6667% - 2rem); } .products-section .wrapper .product-cards .products .product:first-child { margin-left: 1rem; } .products-section .wrapper .product-cards .products .product .product-text { padding: 1rem; } .products-section .wrapper .product-cards { width: calc(100% - 2rem); } .products-section .wrapper .product-cards .product-scroll { overflow: hidden; } .products-section .wrapper .product-cards .products { margin: 0px auto; flex-wrap: wrap; } .products-section .wrapper .product-cards .products .product { margin-bottom: 1rem; width: calc(33.3333% - 0.68rem); } .products-section .wrapper .product-cards .products .product:first-child { margin-left: 0px; } .products-section .wrapper .product-cards .products .product:nth-child(3n) { margin-right: 0px; } .modal, .select > span.text, a, div, h1, h2, h3, h4, h5, html body, input[type="number"], input[type="text"], li, p, table, ul { font-family: proxima, arial, sans-serif !important; } h1 { font-size: 28px !important; } h2 { font-size: 20px !important; } h3 { font-size: 22px !important; } h4 { font-size: 18px !important; } #footer #utility ul.follow-us li.icon a, .accomm-ratings .official-rating ul li, i.caret, ul.social-icons li.icon a { font-family: icons !important; } .button { font-size: 15px !important; } #header-nav { border-bottom: 1px solid rgb(235, 233, 226); background: rgb(255, 255, 255) !important; font-family: proxima, arial, sans-serif !important; } #header-nav #logo-section { background: rgb(255, 255, 255) !important; } #header-nav #logo-section #toggle span { background: rgb(229, 9, 110) !important; } #header-nav #logo-section #mobile-account, #header-nav #logo-section #mobile-shortlist { color: rgb(92, 116, 145); } #header-nav #logo-section .travel-tools > li { margin-left: 15px !important; } #header-nav #logo-section .travel-tools > li a { font-size: 14px; color: rgb(52, 172, 180); font-family: proxima, arial, sans-serif !important; } #header-nav #menu-section #the-main-menu li .caret, #header-nav #menu-section #the-main-menu li a { color: rgb(229, 9, 110) !important; } .mega a { font-family: proxima, arial, sans-serif !important; font-size: 16px !important; color: rgb(52, 172, 180) !important; } .mega div.inner::after { content: ""; position: absolute; top: -1px; left: 0px; right: 0px; border-top: 1px solid rgb(235, 233, 226); } .mega div.container .title { font-family: proxima, arial, sans-serif !important; } #nav-mobile, #nav-mobile #sub-level-nav, #nav-mobile #top-level-nav { background: rgb(255, 255, 255) !important; } #nav-mobile #sub-level-nav .text, #nav-mobile #top-level-nav .text { font-family: proxima, arial, sans-serif !important; color: rgb(229, 9, 110) !important; } #nav-mobile #sub-level-nav h4, #nav-mobile #top-level-nav h4 { color: rgb(229, 9, 110) !important; border-bottom: 1px solid rgb(235, 233, 226) !important; } #nav-mobile #sub-level-nav ul li, #nav-mobile #top-level-nav ul li { border-bottom: 1px solid rgb(235, 233, 226) !important; } #nav-mobile #sub-level-nav ul li .caret.next, #nav-mobile #sub-level-nav ul li .caret.prev, #nav-mobile #top-level-nav ul li .caret.next, #nav-mobile #top-level-nav ul li .caret.prev { color: rgb(249, 91, 164) !important; } * { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: 0px 0px; } body, html { height: 100%; background: rgb(242, 242, 242); text-shadow: rgba(0, 0, 0, 0.004) 1px 1px 1px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } @-webkit-keyframes bounce { 0% { transform: translateY(-40px); } 20% { transform: translateY(-16px); } 60% { transform: translateY(-6px); } 10%, 40%, 80% { transform: translateY(0px); } } @keyframes bounce { 0% { transform: translateY(-40px); } 20% { transform: translateY(-16px); } 60% { transform: translateY(-6px); } 10%, 40%, 80% { transform: translateY(0px); } } @-webkit-keyframes bounceInUp { 60%, 75%, 90%, 0%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0px, 300px, 0px); } 60% { opacity: 1; transform: translate3d(0px, -20px, 0px); } 75% { transform: translate3d(0px, 10px, 0px); } 90% { transform: translate3d(0px, -5px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } @keyframes bounceInUp { 60%, 75%, 90%, 0%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0px, 300px, 0px); } 60% { opacity: 1; transform: translate3d(0px, -20px, 0px); } 75% { transform: translate3d(0px, 10px, 0px); } 90% { transform: translate3d(0px, -5px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes spin-close { 100% { transform: rotate(0deg); } } @keyframes spin-close { 100% { transform: rotate(0deg); } } @-webkit-keyframes spin-open { 100% { transform: rotate(-90deg); } } @keyframes spin-open { 100% { transform: rotate(-90deg); } } .c::after, .c::before, .carousel .viewport > ul.things::after, .carousel .viewport > ul.things::before, .content-width::after, .content-width::before, .section-heading::after, .section-heading::before, .select.custom-options .scroll::after, .select.custom-options .scroll::before { display: table; content: ""; } .c::after, .carousel .viewport > ul.things::after, .content-width::after, .section-heading::after, .select.custom-options .scroll::after { clear: both; } .b, .cb, .modal .window, .modal .window .modal-content, .modal .window > .title { box-sizing: border-box; } .lowercase { text-transform: none !important; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .tui-light { font-family: tui-light, Arial, sans-serif; } h1, h2, h3, h4, h5 { font-weight: 400; text-shadow: rgba(0, 0, 0, 0.004) 1px 1px 1px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; font-family: proxima, arial, sans-serif !important; } h1 { line-height: 34px; } h2 { line-height: 24px; text-transform: uppercase; } h3 { line-height: 28px; } h4 { line-height: 23px; } p { font-size: 15px; line-height: 21px; } .standard, p a { font-size: 16px; } label { font-size: 14px; } i { font-style: normal; } a { color: rgb(229, 9, 110); text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); -webkit-font-smoothing: antialiased !important; } a[href^="tel"]:hover, a[href^="tel"]:link, a[href^="tel"]:visited { text-decoration: none; color: rgb(102, 102, 102); } ul { list-style: none; } .hide, .mobile { display: none !important; } .nomobile, .show { display: block !important; } html body { overflow-x: hidden; font-family: tui-light, Arial, sans-serif; } a, button, input { } body { font-family: Helvetica, Arial, sans-serif; color: rgb(102, 102, 102); text-size-adjust: 100%; box-sizing: border-box; } .content-width { margin: 0px auto; min-width: 283px; max-width: 1048px; height: 100%; } .position-container, .viewport-width { position: relative; } i.caret, span.caret { display: inline-block; font-family: icons; } i.caret.state, span.caret.state { font-size: 14px; } i.caret.state::after, span.caret.state::after { content: "n"; } i.caret.account::after, span.caret.account::after { content: "c"; } i.caret.close::after, i.caret.erase::after, span.caret.close::after, span.caret.erase::after { content: "y"; } i.caret.back::after, i.caret.prev::after, span.caret.back::after, span.caret.prev::after { content: "l"; } i.caret.forward::after, i.caret.next::after, span.caret.forward::after, span.caret.next::after { content: "k"; } i.caret.star::after, span.caret.star::after { content: "N"; } i.caret.call::after, span.caret.call::after { content: "{"; } i.caret.blue, span.caret.blue { color: rgb(92, 116, 145); } i.caret.white, span.caret.white { color: rgb(255, 255, 255) !important; } .text-center { text-align: center; } @-webkit-keyframes loader { 0% { background-color: rgb(255, 255, 255); } 100% { background-color: transparent; } } @keyframes loader { 0% { background-color: rgb(255, 255, 255); } 100% { background-color: transparent; } } @-webkit-keyframes loader-grey { 0% { background-color: rgb(169, 169, 169); } 100% { background-color: transparent; } } @keyframes loader-grey { 0% { background-color: rgb(169, 169, 169); } 100% { background-color: transparent; } } @-webkit-keyframes loader-dark-blu { 0% { background-color: rgb(9, 42, 94); } 100% { background-color: transparent; } } @keyframes loader-dark-blu { 0% { background-color: rgb(9, 42, 94); } 100% { background-color: transparent; } } .spinner { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 100px; } .spinner span { position: absolute; display: inline-block; width: 16px; height: 16px; border-radius: 50px; background: 0px 0px; transform: translateZ(0px); animation-name: loader; animation-duration: 1.04s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease; } .spinner span:nth-child(1) { top: 0px; left: 50%; margin-left: -8px; animation-delay: 0.38s; } .spinner span:nth-child(2) { top: 13px; left: 71px; animation-delay: 0.52s; } .spinner span:nth-child(3) { top: 50%; right: 0px; margin-top: -8px; animation-delay: 0.65s; } .spinner span:nth-child(4) { top: 72px; left: 71px; animation-delay: 0.78s; } .spinner span:nth-child(5) { bottom: 0px; left: 50%; margin-left: -8px; animation-delay: 0.91s; } .spinner span:nth-child(6) { top: 72px; left: 13px; animation-delay: 1.04s; } .spinner span:nth-child(7) { top: 50%; left: 0px; margin-top: -8px; animation-delay: 1.17s; } .spinner span:nth-child(8) { top: 13px; left: 13px; animation-delay: 1.3s; } .spinner.m { transform: scale(0.75); } .spinner.grey span { animation-name: loader-grey !important; } .button { box-sizing: border-box; display: inline-block; color: rgb(102, 102, 102); text-transform: uppercase; text-align: center; background: rgb(228, 228, 228); border-radius: 3px; border-bottom: 1px solid rgba(0, 0, 0, 0.18); -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); -webkit-appearance: none; transition: background 0.3s ease; line-height: 42px; padding: 0px 15px; font-family: proxima, arial, sans-serif !important; height: 45px !important; } html.dj_webkit .button { line-height: 42px; } .select { box-sizing: border-box; display: inline-block; position: relative; height: 30px; background: rgb(227, 227, 227); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px; color: rgb(102, 102, 102); text-shadow: rgb(255, 255, 255) 1px 1px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } .select > span { box-sizing: border-box; height: 30px; } .select > span.text { float: left; padding: 7px 10px 0px; font-size: 15px; } .select > span.arrow { float: left; width: 30px; border-left: 1px solid rgb(211, 211, 211); position: relative; } .select select { position: absolute; top: 0px; left: 0px; opacity: 0; width: 100%; height: 30px; background: rgb(255, 255, 255); } .radio { box-sizing: border-box; display: inline-block; font-family: icons; border-radius: 30px; width: 21px; height: 21px; border: 1px solid rgb(92, 116, 145); line-height: 18px; text-align: center; cursor: pointer; background: rgb(255, 255, 255); color: rgb(255, 255, 255); transition: all 0.3s ease-in-out; } .radio::after { content: "z"; } .radio.active { color: rgb(255, 255, 255); background: rgb(92, 116, 145); border: 1px solid rgb(92, 116, 145); } .auto-complete { position: absolute; z-index: 10; transform: translateZ(10px); width: 100%; background: rgb(255, 255, 255); border: 1px solid rgb(112, 203, 244) !important; } .scroll { transform: translateZ(0px); } .std-wrapper .content-width { width: calc(100% - 32px); } .nodesktop { display: none !important; } a[href^="tel"]:hover, a[href^="tel"]:link, a[href^="tel"]:visited { text-decoration: none; color: rgb(102, 102, 102); } #page { width: 100%; height: 100%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 10px 5px; position: relative; z-index: 99; } #page::after, #page::before { display: table; content: ""; } #page::after { clear: both; } #page .page-mask { display: none; background: 0px 0px; width: 100%; height: 100%; } .structure { background: rgb(242, 242, 242); } .structure > div { max-width: 1048px; margin: 0px auto; box-sizing: border-box; } .structure > div.full-width { max-width: 100%; } .structure .left-menu { width: 0px; } .structure #page { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px; } .structure #page.full-width { max-width: 100%; } .structure #page .page-container.full-width.content-width { max-width: 100% !important; } .structure #page .page-container.full-width.content-width .content { background: rgb(255, 255, 255); } .icon-v2, [class*=" icon-v2"], [class^="icon-v2"] { speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-family: icons-v2 !important; } .icon-backprev::before { content: ""; } .icon-close::before { content: ""; } .icon-forwardnext::before { content: ""; } .icon-left::before { content: ""; } .icon-right::before { content: ""; } .icon-state-up::before { content: ""; } .icon-down::before { content: ""; } .icon-TUI_Room2::before { content: ""; } .icon-TUI_AirplaneDeparture::before { content: ""; } .icon-TUI_Calendar::before { content: "�"; } .icon-TUI_Close::before { content: ""; } .icon-TUI_Confirm::before { content: "�"; } .icon-TUI_GroupOfPeople::before { content: ""; } .icon-TUI_Phone::before { content: ""; } .icon-TUI_Pin::before { content: ""; } .icon-TUI_SinglePerson::before { content: ""; } .icon-TUI_Star_noSpace::before { content: ""; } .modal, .select > span.text, a, div, h1, h2, h3, h4, h5, html body, input[type="number"], input[type="text"], li, p, table, ul { font-family: proxima, arial, sans-serif !important; } h1 { font-size: 28px !important; } h2 { font-size: 20px !important; } h3 { font-size: 22px !important; } h4 { font-size: 18px !important; } #footer #utility ul.follow-us li.icon a, .accomm-ratings .official-rating ul li, i.caret, ul.social-icons li.icon a { font-family: icons !important; } .button { font-family: proxima, arial, sans-serif !important; font-size: 15px !important; } #header-nav { border-bottom: 1px solid rgb(235, 233, 226); background: rgb(255, 255, 255) !important; font-family: proxima, arial, sans-serif !important; } #header-nav #logo-section { background: rgb(255, 255, 255) !important; } #header-nav #logo-section #toggle span { background: rgb(229, 9, 110) !important; } #header-nav #logo-section #mobile-account, #header-nav #logo-section #mobile-shortlist { color: rgb(92, 116, 145); } #header-nav #logo-section .travel-tools > li { margin-left: 15px !important; } #header-nav #logo-section .travel-tools > li a { font-size: 14px; color: rgb(52, 172, 180); font-family: proxima, arial, sans-serif !important; } #header-nav #menu-section #the-main-menu li .caret, #header-nav #menu-section #the-main-menu li a { color: rgb(229, 9, 110) !important; } .mega a { font-family: proxima, arial, sans-serif !important; font-size: 16px !important; color: rgb(52, 172, 180) !important; } .mega div.inner::after { content: ""; position: absolute; top: -1px; left: 0px; right: 0px; border-top: 1px solid rgb(235, 233, 226); } .mega div.container .title { font-family: proxima, arial, sans-serif !important; } #nav-mobile, #nav-mobile #sub-level-nav, #nav-mobile #top-level-nav { background: rgb(255, 255, 255) !important; } #nav-mobile #sub-level-nav .text, #nav-mobile #top-level-nav .text { font-family: proxima, arial, sans-serif !important; color: rgb(229, 9, 110) !important; } #nav-mobile #sub-level-nav h4, #nav-mobile #top-level-nav h4 { color: rgb(229, 9, 110) !important; border-bottom: 1px solid rgb(235, 233, 226) !important; } #nav-mobile #sub-level-nav ul li, #nav-mobile #top-level-nav ul li { border-bottom: 1px solid rgb(235, 233, 226) !important; } #nav-mobile #sub-level-nav ul li .caret.next, #nav-mobile #sub-level-nav ul li .caret.prev, #nav-mobile #top-level-nav ul li .caret.next, #nav-mobile #top-level-nav ul li .caret.prev { color: rgb(249, 91, 164) !important; } * { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: 0px 0px; } body, html { height: 100%; background: rgb(242, 242, 242); text-shadow: rgba(0, 0, 0, 0.004) 1px 1px 1px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } @-webkit-keyframes bounce { 0% { transform: translateY(-40px); } 20% { transform: translateY(-16px); } 60% { transform: translateY(-6px); } 10%, 40%, 80% { transform: translateY(0px); } } @keyframes bounce { 0% { transform: translateY(-40px); } 20% { transform: translateY(-16px); } 60% { transform: translateY(-6px); } 10%, 40%, 80% { transform: translateY(0px); } } @-webkit-keyframes bounceInUp { 60%, 75%, 90%, 0%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0px, 300px, 0px); } 60% { opacity: 1; transform: translate3d(0px, -20px, 0px); } 75% { transform: translate3d(0px, 10px, 0px); } 90% { transform: translate3d(0px, -5px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } @keyframes bounceInUp { 60%, 75%, 90%, 0%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0px, 300px, 0px); } 60% { opacity: 1; transform: translate3d(0px, -20px, 0px); } 75% { transform: translate3d(0px, 10px, 0px); } 90% { transform: translate3d(0px, -5px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } @keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes popout { 0% { transform: scale(1); } 80% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spin-close { 100% { transform: rotate(0deg); } } @keyframes spin-close { 100% { transform: rotate(0deg); } } @-webkit-keyframes spin-open { 100% { transform: rotate(-90deg); } } @keyframes spin-open { 100% { transform: rotate(-90deg); } } .c::after, .c::before, .carousel .viewport > ul.things::after, .carousel .viewport > ul.things::before, .content-width::after, .content-width::before, .section-heading::after, .section-heading::before, .select.custom-options .scroll::after, .select.custom-options .scroll::before { display: table; content: ""; } .c::after, .carousel .viewport > ul.things::after, .content-width::after, .section-heading::after, .select.custom-options .scroll::after { clear: both; } .b, .cb { box-sizing: border-box; } .lowercase { text-transform: none !important; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .droid, .tui-light { font-family: tui-light, Arial, sans-serif; } label { font-size: 14px; } i { font-style: normal; } ul { list-style: none; } .hide, .mobile { display: none !important; } .nomobile, .show { display: block !important; } a, button, input { } body { font-family: Helvetica, Arial, sans-serif; color: rgb(102, 102, 102); text-size-adjust: 100%; box-sizing: border-box; } .content-width { margin: 0px auto; min-width: 283px; max-width: 1048px; height: 100%; } .position-container, .viewport-width { position: relative; } i.caret.state { font-size: 14px; } i.caret.state::after { content: "n"; } i.caret.account::after { content: "c"; } i.caret.close::after, i.caret.erase::after { content: "y"; } i.caret.back::after, i.caret.prev::after { content: "l"; } i.caret.forward::after, i.caret.next::after { content: "k"; } i.caret.star::after { content: "N"; } i.caret.call::after { content: "{"; } i.caret.blue { color: rgb(92, 116, 145); } i.caret.white { color: rgb(255, 255, 255); } .text-center { text-align: center; } @-webkit-keyframes loader { 0% { background-color: rgb(255, 255, 255); } 100% { background-color: transparent; } } @keyframes loader { 0% { background-color: rgb(255, 255, 255); } 100% { background-color: transparent; } } .spinner { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 100px; } .spinner span { position: absolute; display: inline-block; width: 16px; height: 16px; border-radius: 50px; background: 0px 0px; transform: translateZ(0px); animation-name: loader; animation-duration: 1.04s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease; } .spinner span:nth-child(1) { top: 0px; left: 50%; margin-left: -8px; animation-delay: 0.38s; } .spinner span:nth-child(2) { top: 13px; left: 71px; animation-delay: 0.52s; } .spinner span:nth-child(3) { top: 50%; right: 0px; margin-top: -8px; animation-delay: 0.65s; } .spinner span:nth-child(4) { top: 72px; left: 71px; animation-delay: 0.78s; } .spinner span:nth-child(5) { bottom: 0px; left: 50%; margin-left: -8px; animation-delay: 0.91s; } .spinner span:nth-child(6) { top: 72px; left: 13px; animation-delay: 1.04s; } .spinner span:nth-child(7) { top: 50%; left: 0px; margin-top: -8px; animation-delay: 1.17s; } .spinner span:nth-child(8) { top: 13px; left: 13px; animation-delay: 1.3s; } .spinner.m { transform: scale(0.75); } .select { box-sizing: border-box; display: inline-block; position: relative; height: 30px; background: rgb(227, 227, 227); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px; color: rgb(102, 102, 102); text-shadow: rgb(255, 255, 255) 1px 1px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } .select > span { box-sizing: border-box; height: 30px; } .select > span.text { float: left; padding: 7px 10px 0px; font-size: 15px; } .select > span.arrow { float: left; width: 30px; border-left: 1px solid rgb(211, 211, 211); position: relative; } .select select { position: absolute; top: 0px; left: 0px; opacity: 0; width: 100%; height: 30px; background: rgb(255, 255, 255); } .radio { box-sizing: border-box; display: inline-block; font-family: icons; border-radius: 30px; width: 21px; height: 21px; border: 1px solid rgb(92, 116, 145); line-height: 18px; text-align: center; cursor: pointer; background: rgb(255, 255, 255); color: rgb(255, 255, 255); transition: all 0.3s ease-in-out; } .radio::after { content: "z"; } .radio.active { color: rgb(255, 255, 255); background: rgb(92, 116, 145); border: 1px solid rgb(92, 116, 145); } .auto-complete { position: absolute; z-index: 10; transform: translateZ(10px); width: 100%; background: rgb(255, 255, 255); } .scroll { transform: translateZ(0px); } .navigation { display: none; } .page-mask { cursor: pointer; z-index: 10001 !important; } .nodesktop { display: none !important; } #header-nav #menu-section #the-main-menu li { height: 21px; } #page { width: 100%; height: 100%; background: rgb(255, 255, 255); box-shadow: transparent 0px 0px 3px 3px; position: relative; z-index: 99; } #page .page-mask { display: none; background: 0px 0px; width: 100%; height: 100%; } .structure { background: rgb(242, 242, 242); } .structure > div { max-width: 1048px; margin: 0px auto; box-sizing: border-box; } .structure .left-menu { width: 0px; } .structure #page { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px; } .structure #page .navi-structure { overflow-x: hidden; } .icon-v2.caret { line-height: inherit; font-size: 12px; font-family: icons-v2 !important; } .icon-v2.caret::after { content: "" !important; } #header-nav { font-family: tui, Arial, sans-serif; height: 110px; padding: 0px 20px; color: rgb(255, 255, 255); position: relative; z-index: 5007; } #header-nav #logo-section { float: left; width: 100%; height: 32px; overflow: visible; margin: 10px 0px 28px; position: relative; z-index: 103; } #header-nav #logo-section #logo { float: left; position: relative; overflow: hidden; background: url("https://www.firstchoiceprjuat.co.uk/cdn/test/ST3/static/_ui/mobile/th/images/logo/tui-globals-sprite.png") 0px -304px / 165px 342px no-repeat; margin-top: 10px; width: 165px; height: 40px; } #header-nav #logo-section #logo > a { display: block; width: 100%; height: 100%; } #header-nav #logo-section .travel-tools { float: right; } #header-nav #logo-section .travel-tools li { display: inline-block; margin-left: 20px; position: relative; } #header-nav #logo-section .travel-tools li a { font-family: tui; color: rgb(52, 172, 180); } #header-nav #logo-section .travel-tools li:first-child { margin-left: 0px; } #header-nav #logo-section .travel-tools li.account-booking-menu { position: relative; } #header-nav #logo-section .travel-tools-options { position: absolute; top: 26px; left: -50px; z-index: 3; width: 200px; height: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px; overflow: hidden; transition: height 0.3s ease; } #header-nav #logo-section .travel-tools-options .inner { position: absolute; bottom: 0px; left: 0px; width: 100%; } #header-nav #logo-section .travel-tools-options .inner .arrow { width: 0px; height: 0px; border-style: solid; border-width: 0px 9px 9px; border-color: transparent transparent rgb(255, 255, 255); display: block; position: relative; left: 50%; margin-left: -9px; } #header-nav #logo-section .travel-tools-options .inner ul { background: rgb(255, 255, 255); padding: 2px 10px; } #header-nav #logo-section #shortl { width: auto; height: auto; position: absolute; font-size: 20px; right: 50px; top: 13px; color: rgb(255, 255, 255); } #header-nav #logo-section #shortl .icon-v2.star { font-size: 20px; } #header-nav #logo-section #shortl span { display: none; } #header-nav #logo-section #shortl span.count { display: inline-block; background: rgb(229, 9, 110); padding: 1px 3px; font-size: 12px; position: absolute; top: -7px; left: 11px; margin: 0px; line-height: 1; border-radius: 2px; } #header-nav #logo-section #toggle span { display: block; height: 4px; width: 25px; position: absolute; left: 11px; border-radius: 2px; opacity: 1; transition: all 0.3s ease 0.15s; } #header-nav #logo-section #toggle span:first-child { top: 11px; } #header-nav #logo-section #toggle span:nth-child(2) { top: 20px; } #header-nav #logo-section #toggle span:last-child { top: 29px; } #header-nav #logo-section #mobile-account, #header-nav #logo-section #mobile-shortlist, #header-nav #logo-section #toggle { display: none; line-height: 100%; text-align: center; cursor: pointer; font-size: inherit; } #header-nav #logo-section #mobile-account { position: relative; } #header-nav #logo-section #mobile-account::after { content: ""; position: absolute; top: 10px; left: 23px; z-index: 1; width: 6px; height: 6px; border-radius: 40px; background: rgb(0, 255, 0); box-shadow: rgb(0, 209, 0) 0px 1px 0px; transition: all 0.3s ease; opacity: 0; } #header-nav #menu-section #the-main-menu { height: 40px; } #header-nav #menu-section #the-main-menu li { float: left; padding-right: 16px; } #header-nav #menu-section #the-main-menu li a { display: block; color: rgb(255, 255, 255); line-height: 100%; font-size: 20px; font-weight: 700; padding-bottom: 3px; float: left; font-family: tui; } #header-nav #menu-section #the-main-menu li a:active, #header-nav #menu-section #the-main-menu li a:hover, #header-nav #menu-section #the-main-menu li a:link, #header-nav #menu-section #the-main-menu li a:visited { text-decoration: none; } #header-nav #menu-section #the-main-menu li a span { display: none; } #header-nav #menu-section #the-main-menu li:last-child { padding-right: 0px; } #header-nav #menu-section #the-main-menu li.has-mega a { margin-right: 2px; } #header-nav #menu-section #the-main-menu li.has-mega .caret.state { transition: opacity 0.3s ease; opacity: 1; font-size: 12px; } #header-nav #menu-section .mega { top: 108px; } #header-nav #menu-section .mega .mega-title { border-bottom: 1px solid rgb(235, 233, 226); position: relative; padding-bottom: 20px; margin-bottom: 18px; } #header-nav #menu-section .mega .mega-title h3 { color: rgb(0, 0, 0); display: inline-block; margin: 0px 4px 0px 0px; text-transform: none; font-size: 24px; } #header-nav #menu-section .mega .mega-title .caret.close { top: -15px; right: -20px; font-size: 16px; } #header-nav #menu-section .mega div.inner { padding: 20px; } #header-nav #menu-section .mega div.container .links-block:not(:first-child) { padding-top: 44px; } #header-nav .shadow { display: none; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1); position: absolute; left: 0px; bottom: 0px; z-index: 1; } #page { overflow: visible; padding-top: 0px; } #nav-mobile { display: none; position: fixed; top: 0px; left: -260px; height: 100%; background: rgb(114, 206, 213); overflow: hidden; font-family: tui, Arial, sans-serif; width: 260px !important; } #nav-mobile #top-level-nav { width: 100%; height: 100%; transition: transform 0.1s ease; z-index: 1; } #nav-mobile #sub-level-nav { width: 100%; height: 100%; transition: all 0.4s ease; z-index: 0; } #nav-mobile #sub-level-nav, #nav-mobile #top-level-nav { background: rgb(82, 188, 235); position: absolute; overflow: hidden; opacity: 0; transform: translate3d(30px, 0px, 0px); } #nav-mobile #sub-level-nav .level-container, #nav-mobile #top-level-nav .level-container { padding: 0px 10px; } #nav-mobile #sub-level-nav h4, #nav-mobile #top-level-nav h4 { box-sizing: border-box; height: 50px; text-align: center; font-size: 19px; line-height: 50px; } #nav-mobile #sub-level-nav ul, #nav-mobile #top-level-nav ul { overflow-x: hidden; overflow-y: auto; } #nav-mobile #sub-level-nav ul li, #nav-mobile #top-level-nav ul li { box-sizing: border-box; height: 40px; line-height: 40px; } #nav-mobile #sub-level-nav ul li .text, #nav-mobile #top-level-nav ul li .text { float: left; height: 100%; color: rgb(255, 255, 255); font-family: tui, Arial, sans-serif; font-size: 16px; text-transform: uppercase; user-select: none; } #nav-mobile #sub-level-nav ul li .caret, #nav-mobile #top-level-nav ul li .caret { color: rgba(255, 255, 255, 0.6); text-transform: none !important; } #nav-mobile #sub-level-nav ul li .caret.prev, #nav-mobile #top-level-nav ul li .caret.prev { padding-right: 4px; float: left; font-size: 12px; } #nav-mobile #sub-level-nav ul li .caret.next, #nav-mobile #top-level-nav ul li .caret.next { padding-left: 4px; float: right; font-size: 12px; } #nav-mobile #sub-level-nav ul li a, #nav-mobile #top-level-nav ul li a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); font-size: 17px; display: block; height: 100%; } .caIcon { font-size: 20px; right: 20px; top: 13px; position: absolute; color: rgb(255, 255, 255); z-index: 104; width: auto; height: auto; } .caIcon span.initials { text-align: center; right: -13px; padding: 1px 3px; font-size: 12px; line-height: 1; top: -7px; position: absolute; border-radius: 2px; background: rgb(229, 9, 110); color: rgb(255, 255, 255); width: auto; height: auto; } i.caret { display: inline-block; font-family: icons; } #new-holiday-finder { background: rgb(222, 227, 233); color: rgb(255, 255, 255); font-family: tui, Arial, sans-serif; font-size: 18px; line-height: 100%; height: auto; padding: 0px 20px; position: relative; } #new-holiday-finder .title { font-size: 18px; font-family: tui-light-bold; } #new-holiday-finder .title span { width: 0px; height: 0px; border-style: solid; border-width: 6px; border-color: rgb(255, 255, 255) transparent transparent; display: inline-block; position: relative; top: 2px; } #new-holiday-finder .back-to-search-btn, #new-holiday-finder .scroll { width: calc(100% - 180px); height: 60px; float: left; overflow: hidden; } #new-holiday-finder ul { cursor: pointer; height: 100%; color: rgb(255, 255, 255); width: 100% !important; } #new-holiday-finder ul li { float: left; padding: 19px 0px 0px 10px; } #new-holiday-finder ul li:first-child { padding-left: 0px; } #new-holiday-finder ul li:last-child { padding-right: 10px; } #new-holiday-finder span { color: rgb(10, 43, 96); } #new-holiday-finder .button { float: right; background: rgb(1, 149, 159); text-shadow: none; color: rgb(255, 255, 255); width: 170px; margin-top: 10px; cursor: pointer; } #new-holiday-finder .button span.edit-search-button { font-size: 18px; } #new-holiday-finder .mobile-mega-menu { position: absolute; top: 45px; left: 0px; right: 0px; background: rgb(255, 255, 255); padding: 2px 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px; z-index: 1; transition: transform 0.3s ease; } #new-holiday-finder .mobile-mega-menu ul { overflow: hidden; } #new-holiday-finder .mobile-mega-menu ul li { float: left; width: 50%; padding: 0px; } #new-holiday-finder .mobile-mega-menu ul li a { display: block; border-bottom: 1px solid rgb(235, 233, 226); padding: 10px 0px; color: rgb(52, 172, 180); font-size: 17px; text-transform: uppercase; } #new-holiday-finder .mobile-mega-menu ul li:nth-child(2n+1) a { margin-right: 5px; } #new-holiday-finder .mobile-mega-menu ul li:nth-child(2n) a { margin-left: 5px; } #header-nav #logo-section .travel-tools.fcTopnavigtion .travel-tools-options a, #header-nav #logo-section .travel-tools.fcTopnavigtion li a, #header-nav #logo-section .travel-tools.fcTopnavigtion li i.caret.blue { color: rgb(229, 9, 110); } .blue { color: rgb(92, 116, 145); } .white { color: rgb(255, 255, 255); } .fl { float: left; } span.radio { border: 1px solid rgb(92, 116, 145); } .select-block { padding: 9px 10px 9px 40px; font-family: tui-light, Arial, sans-serif; text-transform: uppercase; position: relative; transition: background 0.3s ease; } .select-block .radio { position: absolute; top: 9px; left: 10px; font-size: 16px; line-height: 17px; text-transform: none; } .select-block .radio.check { border-radius: 0px; } .navigation { display: none !important; } .navigation.showNav { display: block !important; } #site-HOLIDAYS .collections { display: block; } .mega { position: absolute; left: 0px; z-index: 2; background: rgb(255, 255, 255); width: 100%; height: 0px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px; transition: height 0.3s ease 0.2s; } .mega .caret.close { position: absolute; top: 0px; right: 0px; font-size: 24px; line-height: 100%; display: inline-block; width: 60px; height: 44px; cursor: pointer; text-align: center; padding-top: 16px; } .mega a { display: inline-block; height: auto; } .mega div.inner { width: 100%; padding: 50px 20px 20px; position: absolute; } .mega div.container { width: 25%; float: left; height: 100%; position: relative; } .mega div.container .title { color: rgb(0, 0, 0); font-size: 17px; padding-bottom: 5px; margin: 0px; } .mega div.container.collections { width: 50%; overflow: hidden; display: none; } .mega div.container ul { height: auto; } .mega div.container ul.blocktype > li.clinks { float: none; width: 100%; padding: 0px; } .mega div.container ul.blocktype > li.clinks:last-child a { padding-bottom: 0px; } .mega div.container ul.blocktype > li.clinks.viewAll a { color: rgb(229, 9, 110) !important; } .mega div.container ul.blocktype > li.clinks a { display: inline-block; font-size: 15px; color: rgb(52, 172, 180); padding: 10px 0px; height: auto; line-height: 100%; margin-right: 20px; } .mega div.container ul.blocktype > li.clinks a span { color: rgb(153, 153, 153); } .mega div.container ul.blocktype > li.clinks:last-child { padding-bottom: 0px; } .mega div.container ul.blocktype { width: calc(100% - 30px); height: 100%; position: relative; } .mega div.container.collections ul.blocktype { width: calc(100% - 104px); } .country-selector-div { width: auto; transition: height 1s; overflow-x: auto; overflow-y: hidden; } #new-holiday-finder .mobile-mega-menu { transform: translateY(-1000px); } #new-holiday-finder .title span { left: 7px; } .cookie { background-color: rgb(0, 0, 0); opacity: 0.85; padding: 10px 18px; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 200; min-height: 31px; } .cookie p { color: rgb(194, 194, 194); font-size: 12px; margin: 0px 38px 0px 0px; padding-right: 10px; min-height: 35px; line-height: 17px; } .cookie a { line-height: 42px; padding: 0px 6px; font-size: 12px; height: 38px !important; } .cookie .button { padding: 0px 16px; }#search-panel .tuiglobalHeaderCnt .form-container .field input[type=text]{box-sizing:border-box;}