@charset "UTF-8"; /* BASE - ========================================================================== */ /* VENDOR - Default fall-backs and external files. ========================================================================== */ /* ========================================================================== Grid ========================================================================== */ /* * Example uses: * *
*
*
*
*
*
* *
*
*
*
*/ /* Grid core ========================================================================== */ /** * Grid container * Must only contain `.grid` or `.grid__cell` components as children. * * 1. Adjustment for child element margins. * 2. Ensure consistent default alignment/ * 3. Remove inter-unit whitespace that appears between `inline-block` child * elements. Work for all non-monospace font-families. If you're using a * monospace base font, you will need to set the `grid` font-family to * `sans-serif` and then redeclare the monospace font on the `grid__cell` * objects. * 4. Protect against WebKit bug with optimizelegibility. */ .grid { display: block; padding: 0; margin: 0 -25px; /* 1 */ text-align: left; /* 2 */ letter-spacing: -0.31em; /* 3 */ text-rendering: optimizespeed; /* 4 */ } .grid.no--gutter { margin: 0 0; } /** * Opera hack */ .opera:-o-prefocus, .grid { word-spacing: -0.43em; /* 3 */ } /** * Child `grid` object adjustments * Used for more complex fixed-fluid hybrid grids. */ .grid > .grid { overflow: hidden; margin-right: 0; margin-left: 0; } /** * Grid units * No explicit width by default. Apply `.unit-x-y` classes. * * 1. Fundamentals of the non-float grid layout mechanism. * 2. Apply grid gutter. * 3. Controls vertical positioning of units. * 4. Keeps content correctly aligned with the grid direction. * 5. Reset text defaults. */ .grid__cell { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; display: inline-block; /* 1 */ margin: 0; padding: 0 25px; /* 2 */ vertical-align: top; /* 3 */ text-align: left; /* 4 */ letter-spacing: normal; /* 5 */ word-spacing: normal; /* 5 */ text-rendering: auto; /* 5 */ } .no--gutter .grid__cell { padding: 0 0; } /* Grid modifiers ========================================================================== */ /** * Modifier: horizontally center all grid units * Allows for automatic unit centering irrespective of the number of * units in the grid. */ .grid--center { text-align: center; } /** * Modifier: align horizontally all grid units to the left */ .grid--left { text-align: left; } /** * Modifier: align horizontally all grid units to the right */ .grid--right { text-align: right; } /* Grid cell modifiers ========================================================================== */ /** * Modifier: horizontally center one unit * Set a specific unit to be horizontally centered. Doesn't affect * any other units. Can still contain a child `grid` object. */ .grid__cell--center { display: block; margin: 0 auto; } /** * Modifier: align horizontally one unit to the left * Set a specific unit to be horizontally on the left. Doesn't affect * any other units. Can still contain a child `grid` object. */ .grid__cell--left { display: block; margin-right: auto; } /** * Modifier: align horizontally one unit to the right * Set a specific unit to be horizontally on the right. Doesn't affect * any other units. Can still contain a child `grid` object. */ .grid__cell--right { display: block; margin-left: auto; } @font-face { font-family: 'icomoon'; src: url("../font/icomoon.eot?uhd4s7"); src: url("../font/icomoon.eot?uhd4s7#iefix") format("embedded-opentype"), url("../font/icomoon.ttf?uhd4s7") format("truetype"), url("../font/icomoon.woff?uhd4s7") format("woff"), url("../font/icomoon.svg?uhd4s7#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-flourish-lefttop:before { content: ""; } .icon-flourish-righttop:before { content: ""; } .icon-flourish-bottomright:before { content: ""; } .icon-flourish-bottomleft:before { content: ""; } .icon-video-play:before { content: ""; } .icon-play-hover:before { content: ""; } .icon-play:before { content: ""; } .icon-arrow-c-bottom:before { content: ""; } .icon-arrow-b-left:before { content: ""; } .icon-arrow-b-right:before { content: ""; } .icon-lock:before { content: ""; } .icon-windows:before { content: ""; } .icon-arrow-a-left:before { content: ""; } .icon-arrow-a-right:before { content: ""; } .icon-arrow-curve-right:before { content: ""; } .icon-trip-advisor:before { content: ""; } .icon-bell:before { content: ""; } .icon-close:before { content: ""; } .icon-location:before { content: ""; } .icon-location-hover:before { content: ""; } .icon-search:before { content: ""; } .icon-social-twitter:before { content: ""; } .icon-social-facebook:before { content: ""; } .icon-social-pinterest:before { content: ""; } .icon-phone:before { content: ""; } .icon-letter:before { content: ""; } .icon-social-instagram:before { content: ""; } /*! jQuery UI - v1.12.1 - 2016-10-19 * http://jqueryui.com * Includes: core.css, datepicker.css * Copyright jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .ui-icon { display: inline-block; vertical-align: middle; margin-top: -.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-datepicker { display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Icons */ .ui-datepicker .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; left: .5em; top: .3em; } /* HELPERS - ========================================================================== */ #main-banner .logo-cliff .context, .offer .context, .accomodation-collection__item .visual-context, .standard-collection__item .visual-context { display: block; overflow: hidden; } .fittings .h2::before, .orangerymenu .h2::before, .rates .h2::before, .rates .h35::before, .article-introduction .h2::before, .btn-cta1::before, .btn-cta2::before, .btn-cta2::after, .btn-cta3::after, .btn-gallery::after, .btn-menu .symbol::after, .btn-scroll::after, .btn-previouspage .text::after, .btn-nextpage .text::after, .master-chh #main-content .layout::after, #main-nav::before, .master-cth #main-nav .inner-border-top::before, .master-cth #main-nav .inner-border-bottom::before, .master-cth #main-nav .inner-border-left::before, .master-cth #main-nav .inner-border-right::before, #main-nav .tales-snippet .center-context::before, .main-nav__menu .primary li::before, .master-cth .main-nav__menu .primary li::before, .main-nav__menu .primary li::after, .ui-buttons .button::after, .book-journey::after, .book-journey .btn-close::before, .book-journey .checkout__book .field__calendar::after, .book-journey .checkout__book .field__night::after, .ui-datepicker::after, .ui-state-highlight::before, .ui-state-active::before, .ui-state-active::after, .contextual--footer.for--mobile .button .icon-phone::after, .cross-sell::before, .cross-sell__item:nth-child(2)::before, .cross-sell__item:nth-child(2)::after, .cross-sell__item .framer .button::after, .cross-sell__item .framer .description::before, .flow-richtext .visual__left--double .framer .description::before, .flow-richtext .visual__right--double .framer .description::before, .footer-simple::after, .offer .framer .description::before, .orangerymenu .super-tabs .button::before, .article-slideshow__controls .btn-previous::after, .article-slideshow__controls .btn-next::after, .article-slideshow__controls .triggers li::after, .search__form .icon-search::after, .search__item .h2::after, .search__pagination .pagination li::after, .master-cth .tales-snippet .number span::before, .master-cth .tales-snippet .number span::after, .tales-snippet .number::before, .tales-snippet .number::after, .tales-popin::before, .tales-slideshow__slide .number::before, .tales-slideshow__slide .number::after, .tales-slideshow__slide .social .button:nth-child(1)::after, .accomodation-splashscreen::before, .accomodation-collection__item .ov-h .buttons .button::after, .standard-newsletter::before, .boilerplate-splashscreen::before, .home-slideshow__slide:last-child .grid__cell::before, .home-slideshow__slide .framer .h5::after, .home-triggers .trigger::before, .home-triggers .trigger::after, .home-quickaccess .title a::after, .gateway-snippet .framer .h5::after, .gateway-slideshow__item .framer .button::after, .gateway-slideshow__item .framer .description::before, .gateway-slideshow__item:nth-child(2)::before, .gateway-slideshow__item:nth-child(2)::after, .standard-splashscreen::before, .standard-splashscreen .framer .h5::after, .article-splashscreen::before, .article-splashscreen .framer .h5::after, .article-quote .author::before, .article-quotetext .quote::before, .article-video .bg::after { content: " "; display: block; } .master-chh #main-nav .cell:nth-child(3) .bg, .cross-sell__item .bg, .footer-simple .bg, .article-slideshow__slide .bg, .accomodation-splashscreen .background, .standard-newsletter .bg, .boilerplate-splashscreen .background, .home-posters .bg, .layout-gateway .background, .layout-gateway .foreground, .gateway-slideshow__item .bg, .gateway-posters .poster, .standard-splashscreen .background, .standard-splashscreen .foreground, .article-splashscreen .background, .article-splashscreen .foreground, .article-video .bg { left: 0; position: absolute; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; height: 100%; width: 100%; } .master-chh #main-nav .cell:nth-child(3) .bg img, .cross-sell__item .bg img, .footer-simple .bg img, .article-slideshow__slide .bg img, .accomodation-splashscreen .background img, .standard-newsletter .bg img, .boilerplate-splashscreen .background img, .home-posters .bg img, .layout-gateway .background img, .layout-gateway .foreground img, .gateway-slideshow__item .bg img, .gateway-posters .poster img, .standard-splashscreen .background img, .standard-splashscreen .foreground img, .article-splashscreen .background img, .article-splashscreen .foreground img, .article-video .bg img { display: none; } .home-slideshow__slide .videobg { height: auto; left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; z-index: 0; } #loading .logo, #loading .h5, .master-cth #main-nav .cell:nth-child(3) .visual, .main-nav__menu, .for--info, .contextual--footer.for--mobile .button .icon-phone::after, .article-slideshow__controls .triggers li::after, .tales-popin .btn-close::before, .tales-slideshow__slide .center-context, .ie10 .accomodation-splashscreen .framer, .ie9 .accomodation-splashscreen .framer, .ie11 .accomodation-splashscreen .framer, .home-slideshow__slide .framer, .standard-splashscreen .framer, .article-splashscreen .framer, .article-video .features { left: 50%; position: absolute; top: 50%; display: block; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #main-content .dummy, .layout-home .dummy { height: 100vh; } .safari.ios10 #main-content .dummy, #main-content .safari.ios10 .dummy, .safari.ios10 .layout-home .dummy, .layout-home .safari.ios10 .dummy, .safari.ios9 #main-content .dummy, #main-content .safari.ios9 .dummy, .safari.ios9 .layout-home .dummy, .layout-home .safari.ios9 .dummy, .safari.ios8 #main-content .dummy, #main-content .safari.ios8 .dummy, .safari.ios8 .layout-home .dummy, .layout-home .safari.ios8 .dummy { height: -webkit-calc(100vh - 25px); height: calc(100vh - 25px); } .btn-booknow, .btn-cta1, .btn-gallery, .btn-menu, .btn-scroll, .btn-play, .btn-play-2, .btn-select, #main-nav .btn-close, .ui-buttons .button, .book-journey .btn-close, .fittings .tabs .button, #main-player .btn-close, .newsletter__form .field__validation, .orangerymenu .super-tabs .button, .orangerymenu .tabs .button, .article-slideshow__controls .btn-previous, .article-slideshow__controls .btn-next, .social .button, .search__form .field__validation, .tales-popin .btn-close, .tales-slideshow__controls .btn-previous, .tales-slideshow__controls .btn-next, .accomodation-splashscreen .buttons .button, .standard-newsletter .box-select .btn-close, .enquiry-form .field__validation, .home-triggers .trigger, .article-video .btn-close { border: 0px none; background: none; padding: 0; } .home-quickaccess .title a::after { -webkit-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1); } .btn-booknow, .description a, #main-nav .btn-close, #main-nav .btn-close .h5, #main-player .btn-close, .orangerymenu .super-tabs .button, .social .button, .tales-popin .btn-close, .accomodation-collection__item .ov-h .buttons .button, .standard-newsletter .box-select .btn-close, .standard-newsletter .box-select .btn-close .h5, .article-video .btn-close { -webkit-transition: color 200ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: color 200ms cubic-bezier(0.645, 0.045, 0.355, 1); } #overlay, .search__status .h6 { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1); } .btn-booknow::before, .btn-gallery::before, .btn-play::before, .btn-play::after, .btn-play-2::before, .btn-previouspage::before, .btn-nextpage::before, .btn-select::after, #main-nav .btn-close::before, .book-journey .btn-close::before, .book-journey .checkout__book .field__calendar::after, .book-journey .checkout__book .field__night::after, .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before, .fittings .tabs .button::before, #main-player .btn-close::before, .orangerymenu .tabs .button::before, .article-slideshow__controls .btn-previous::before, .article-slideshow__controls .btn-next::before, .search__pagination .btn-previous::before, .search__pagination .btn-next::before, .tales-popin .btn-close::before, .tales-slideshow__controls .btn-previous::before, .tales-slideshow__controls .btn-next::before, .standard-newsletter .box-select .btn-close::before, .article-video .btn-close::before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .description, .h6, .newsletter__form .field__check:not(:checked) + label, .newsletter__form .field__check:checked + label, .standard-newsletter .box-select .field__select, .enquiry-form .caret, .enquiry-form .field__radio:not(:checked) + label, .enquiry-form .field__radio:checked + label, .enquiry-form .field__check:not(:checked) + label, .enquiry-form .field__check:checked + label, .enquiry-form .field__libel, .enquiry-form .field__text, .enquiry-form label.error { font-family: "Gill Sans", sans-serif; font-style: normal; font-weight: 400; } .description em, .description i { font-family: "Gill Sans", sans-serif; font-style: italic; font-weight: 400; } .btn-booknow, .btn-cta1, .btn-cta2, .btn-cta3, .btn-gallery, .btn-previouspage, .btn-nextpage, .description b, .description strong, .h5, .h55, .book-journey .checkout__book .field__calendar input, .book-journey .checkout__book .field__night select, .ui-datepicker-calendar thead, .cross-sell__item .framer .button, .fittings .tabs .button, .newsletter__form .field__validation, .offer .title .text, .orangerymenu .tabs .button, .enquiry-form .field__validation, .home-slideshow__slide:last-child .buttons-bottom .button, .gateway-slideshow__item .framer .button, .article-quote .author b, .article-quotetext .author b { font-family: "Gill Sans", sans-serif; font-style: normal; font-weight: 700; } .btn-scroll .text, .contextual-text, .h50, .ui-state-default, .fittings .content .item ul li, .orangerymenu .content .item ul li, .rates .prices .price, .search__form .field__validation { font-family: "Gill Sans Bold", sans-serif; font-style: normal; font-weight: 700; } .btn-select, .h1, .h2, .h25, .main-nav__menu .primary li, .main-nav__menu .secondary li, .ui-datepicker-title, .flow-richtext h1, .flow-richtext h2, .flow-richtext h3, .newsletter__form .field__text, .search__form .field__text, .search__pagination .pagination li, .article-quote .author, .article-quotetext .author { font-family: "Playfair Display", serif; font-style: normal; font-weight: 400; } .h4, .h45, .rates .prices .note, .tales-slideshow__slide .h3, .article-quote .quote, .article-quotetext .quote { font-family: "Playfair Display", serif; font-style: italic; font-weight: 400; } .h3, .h35, .book-journey .checkout__book .label, .master-chh .fittings .tabs .button, .enquiry-form .field__section { font-family: "Playfair Display", serif; font-style: normal; font-weight: 700; } .master-chh .btn-select, .master-chh .h1, .master-chh .h2, .master-chh .h25, .master-chh .flow-richtext h1, .master-chh .flow-richtext h2, .master-chh .flow-richtext h3, .master-chh .article-quote .author, .master-chh .article-quotetext .author { font-family: "freight-display-pro", serif; font-style: normal; font-weight: 300; } .master-chh .description em, .master-chh .description i, .master-chh .h4, .master-chh .h45, .master-chh .search__pagination .pagination li, .master-chh .article-quote .quote, .master-chh .article-quotetext .quote { font-family: "freight-display-pro", serif; font-style: italic; font-weight: 300; } .master-chh .description b, .master-chh .description strong, .master-chh .offer .title .text, .master-chh .rates .prices .price, .master-chh .search__form .field__validation { font-family: "freight-display-pro", serif; font-style: normal; font-weight: 600; } .master-chh .description, .master-chh .h6, .master-chh .fittings .content .item ul li, .master-chh .newsletter__form .field__check:not(:checked) + label, .master-chh .newsletter__form .field__check:checked + label, .master-chh .enquiry-form .caret, .master-chh .enquiry-form .field__radio:not(:checked) + label, .master-chh .enquiry-form .field__radio:checked + label, .master-chh .enquiry-form .field__check:not(:checked) + label, .master-chh .enquiry-form .field__check:checked + label, .master-chh .enquiry-form .field__libel, .master-chh .enquiry-form .field__text, .master-chh .enquiry-form label.error { font-family: "freight-display-pro", serif; font-style: normal; font-weight: 400; } .master-chh .main-nav__menu .primary li { font-family: "freight-display-pro", serif; font-style: italic; font-weight: 400; } .master-chh .h50, .master-chh .search__form .field__text, .accomodation-splashscreen .buttons .button, .accomodation-splashscreen .framer .subtitle { font-family: "freight-sans-pro", sans-serif; font-style: normal; font-weight: 500; } .master-chh .btn-booknow, .master-chh .btn-cta1, .master-chh .btn-cta2, .master-chh .btn-cta3, .master-chh .btn-gallery, .master-chh .btn-scroll .text, .master-chh .btn-previouspage, .master-chh .btn-nextpage, .master-chh .contextual-text, .master-chh .h3, .master-chh .h35, .master-chh .h5, .master-chh .h55, .master-chh .cross-sell__item .framer .button, .master-chh .orangerymenu .content .item ul li, .master-chh .orangerymenu .tabs .button, .accomodation-collection__item .ov-h .buttons .button, .master-chh .enquiry-form .field__section, .master-chh .enquiry-form .field__validation, .master-chh .article-quote .author b, .master-chh .article-quotetext .author b { font-family: "freight-sans-pro", sans-serif; font-style: normal; font-weight: 700; } .master-cth .h6, .master-cth .main-nav__menu .primary li, .master-cth .main-nav__menu .secondary li, .master-cth .ui-datepicker-title, .master-cth .fittings .content .item ul li, .master-cth .flow-richtext h1, .master-cth .flow-richtext h2, .master-cth .flow-richtext h3, .master-cth .newsletter__form .field__check:not(:checked) + label, .master-cth .newsletter__form .field__check:checked + label, .master-cth .newsletter__form .field__text, .master-cth .search__form .field__text, .master-cth .enquiry-form .caret, .master-cth .enquiry-form .field__radio:not(:checked) + label, .master-cth .enquiry-form .field__radio:checked + label, .master-cth .enquiry-form .field__check:not(:checked) + label, .master-cth .enquiry-form .field__check:checked + label, .master-cth .enquiry-form .field__libel, .master-cth .enquiry-form .field__text, .master-cth .enquiry-form label.error, .home-quickaccess .title { font-family: "Gotham Book", sans-serif; font-style: normal; font-weight: 400; } .master-cth .description, .master-cth .description em, .master-cth .description i, .master-cth .h1, .master-cth .h2, .master-cth .h25, .master-cth .h4, .master-cth .h45, .master-cth .article-quote .author, .master-cth .article-quotetext .author { font-family: "Gotham Light", sans-serif; font-style: normal; font-weight: 200; } .master-cth .rates .prices .note, .master-cth .search__pagination .pagination li, .master-cth .article-quote .quote, .master-cth .article-quotetext .quote { font-family: "Gotham Light", sans-serif; font-style: italic; font-weight: 200; } .master-cth .contextual-text, .master-cth .description b, .master-cth .description strong, .master-cth .h50, .master-cth .ui-state-default, .master-cth .rates .prices .price, .master-cth .search__form .field__validation { font-family: "Gotham Medium", sans-serif; font-style: normal; font-weight: 400; } .master-cth .btn-booknow, .master-cth .btn-cta3, .master-cth .btn-gallery, .master-cth .btn-previouspage, .master-cth .btn-nextpage, .master-cth .h3, .master-cth .h35, .master-cth .h5, .master-cth .h55, .master-cth .book-journey .checkout__book .label, .master-cth .book-journey .checkout__book .field__calendar input, .master-cth .book-journey .checkout__book .field__night select, .master-cth .ui-datepicker-calendar thead, .master-cth .cross-sell__item .framer .button, .master-cth .fittings .tabs .button, .master-cth .offer .title .text, .master-chh .orangerymenu .content .item ul li, .master-chh .orangerymenu .tabs .button, .master-cth .enquiry-form .field__section, .master-cth .enquiry-form .field__validation, .master-cth .article-quote .author b, .master-cth .article-quotetext .author b { font-family: "Gotham Bold", sans-serif; font-style: normal; font-weight: 700; } .fittings .h2::before, .orangerymenu .h2::before, .rates .h2::before, .rates .h35::before, .article-introduction .h2::before { background-color: rgba(0, 0, 0, 0.3); float: left; height: 1px; margin: 25px 105px 0 0; width: 45px; } .portrait .fittings .h2::before, .fittings .portrait .h2::before, .portrait .orangerymenu .h2::before, .orangerymenu .portrait .h2::before, .portrait .rates .h2::before, .rates .portrait .h2::before, .portrait .rates .h35::before, .rates .portrait .h35::before, .portrait .article-introduction .h2::before, .article-introduction .portrait .h2::before { margin: 25px 55px 0 0; } .mobile .fittings .h2::before, .fittings .mobile .h2::before, .mobile .orangerymenu .h2::before, .orangerymenu .mobile .h2::before, .mobile .rates .h2::before, .rates .mobile .h2::before, .mobile .rates .h35::before, .rates .mobile .h35::before, .mobile .article-introduction .h2::before, .article-introduction .mobile .h2::before { display: none; } @-webkit-keyframes btnScrollBar { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 49% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } 50% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes btnScrollBar { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center top; } 49% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center top; } 50% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @-webkit-keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* PARTIALS - buttons, figures, typography, etc... ========================================================================== */ .btn-booknow { background-color: #beb57e; color: #000; font-size: 10px; font-size: 0.625rem; height: 42px; letter-spacing: 2px; padding: 0 25px 0 20px; text-align: center; text-transform: uppercase; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .master-chh .btn-booknow { background-color: #6eb9d8; color: #FFF; font-size: 11px; font-size: 0.6875rem; } .master-cth .btn-booknow { background-color: #f9545f; color: #FFF; letter-spacing: 1px; font-size: 10px; font-size: 0.625rem; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-booknow { display: block; line-height: 42px; padding: 0; width: 42px; } } .btn-booknow .text { display: inline-block; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-booknow .text { display: none; } } .btn-booknow::before { color: #FFF; content: ""; display: inline-block; font-size: 15px; margin: 0 12px 0 0; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); vertical-align: middle; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-booknow::before { margin: 0; } } .video--isPlaying .btn-booknow::before, .ui--isMininal .btn-booknow::before, .tales--isOpened .btn-booknow::before { -webkit-transform: translateX(-7px); -ms-transform: translateX(-7px); transform: translateX(-7px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .video--isPlaying .btn-booknow::before, .ui--isMininal .btn-booknow::before, .tales--isOpened .btn-booknow::before { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; } } .video--isPlaying .btn-booknow, .ui--isMininal .btn-booknow, .tales--isOpened .btn-booknow { -webkit-transform: translateX(113px); -ms-transform: translateX(113px); transform: translateX(113px); } .edge .video--isPlaying .btn-booknow, .edge .ui--isMininal .btn-booknow, .edge .tales--isOpened .btn-booknow { -webkit-transform: translateX(112px); -ms-transform: translateX(112px); transform: translateX(112px); } .ie10 .video--isPlaying .btn-booknow, .ie9 .video--isPlaying .btn-booknow, .ie11 .video--isPlaying .btn-booknow, .ie10 .ui--isMininal .btn-booknow, .ie9 .ui--isMininal .btn-booknow, .ie11 .ui--isMininal .btn-booknow, .ie10 .tales--isOpened .btn-booknow, .ie9 .tales--isOpened .btn-booknow, .ie11 .tales--isOpened .btn-booknow { -webkit-transform: translateX(112px); -ms-transform: translateX(112px); transform: translateX(112px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .video--isPlaying .btn-booknow, .ui--isMininal .btn-booknow, .tales--isOpened .btn-booknow { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; } } .video--isPlaying .master-chh .btn-booknow, .ui--isMininal .master-chh .btn-booknow, .tales--isOpened .master-chh .btn-booknow { -webkit-transform: translateX(106px); -ms-transform: translateX(106px); transform: translateX(106px); } .edge .video--isPlaying .master-chh .btn-booknow, .edge .ui--isMininal .master-chh .btn-booknow, .edge .tales--isOpened .master-chh .btn-booknow { -webkit-transform: translateX(105px); -ms-transform: translateX(105px); transform: translateX(105px); } .ie10 .video--isPlaying .master-chh .btn-booknow, .ie9 .video--isPlaying .master-chh .btn-booknow, .ie11 .video--isPlaying .master-chh .btn-booknow, .ie10 .ui--isMininal .master-chh .btn-booknow, .ie9 .ui--isMininal .master-chh .btn-booknow, .ie11 .ui--isMininal .master-chh .btn-booknow, .ie10 .tales--isOpened .master-chh .btn-booknow, .ie9 .tales--isOpened .master-chh .btn-booknow, .ie11 .tales--isOpened .master-chh .btn-booknow { -webkit-transform: translateX(105px); -ms-transform: translateX(105px); transform: translateX(105px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .video--isPlaying .master-chh .btn-booknow, .ui--isMininal .master-chh .btn-booknow, .tales--isOpened .master-chh .btn-booknow { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; } } .video--isPlaying .master-cth .btn-booknow, .ui--isMininal .master-cth .btn-booknow, .tales--isOpened .master-cth .btn-booknow { -webkit-transform: translateX(119px); -ms-transform: translateX(119px); transform: translateX(119px); } .edge .video--isPlaying .master-cth .btn-booknow, .edge .ui--isMininal .master-cth .btn-booknow, .edge .tales--isOpened .master-cth .btn-booknow { -webkit-transform: translateX(118px); -ms-transform: translateX(118px); transform: translateX(118px); } .ie10 .video--isPlaying .master-cth .btn-booknow, .ie9 .video--isPlaying .master-cth .btn-booknow, .ie11 .video--isPlaying .master-cth .btn-booknow, .ie10 .ui--isMininal .master-cth .btn-booknow, .ie9 .ui--isMininal .master-cth .btn-booknow, .ie11 .ui--isMininal .master-cth .btn-booknow, .ie10 .tales--isOpened .master-cth .btn-booknow, .ie9 .tales--isOpened .master-cth .btn-booknow, .ie11 .tales--isOpened .master-cth .btn-booknow { -webkit-transform: translateX(118px); -ms-transform: translateX(118px); transform: translateX(118px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .video--isPlaying .master-cth .btn-booknow, .ui--isMininal .master-cth .btn-booknow, .tales--isOpened .master-cth .btn-booknow { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; } } .btn-booknow:hover { color: #FFF; cursor: pointer; } .btn-cta1 { border: 3px solid #FFF; color: #FFF; display: inline-block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; overflow: hidden; padding: 10px 15px; position: relative; text-transform: uppercase; -webkit-transition: padding 300ms cubic-bezier(0.4, 0, 0.6, 1); transition: padding 300ms cubic-bezier(0.4, 0, 0.6, 1); will-change: padding; } .master-chh .btn-cta1 { font-size: 11px; font-size: 0.6875rem; } .safari .btn-cta1 { background-color: rgba(255, 255, 255, 0); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); } .windows.firefox .btn-cta1 { background-color: rgba(255, 255, 255, 0); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); } .ie .btn-cta1 { background-color: rgba(255, 255, 255, 0); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); transition: background-color 300ms cubic-bezier(0.4, 0, 0.6, 1); } .btn-cta1 .text { color: inherit; position: relative; -webkit-transition: color 375ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 375ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 1; } .btn-cta1::before { left: 50%; position: absolute; top: 50%; background-color: #FFF; -webkit-border-radius: 100%; border-radius: 100%; height: 300px; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: -webkit-transform 375ms cubic-bezier(0.4, 0, 0.6, 1); transition: -webkit-transform 375ms cubic-bezier(0.4, 0, 0.6, 1); transition: transform 375ms cubic-bezier(0.4, 0, 0.6, 1); transition: transform 375ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 375ms cubic-bezier(0.4, 0, 0.6, 1); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 300px; will-change: transform; } .safari .btn-cta1::before { display: none; } .btn-cta1.text__color--lightgold { border-color: #beb57e; } .master-chh .btn-cta1.text__color--lightgold { border-color: #6eb9d8; } .master-cth .btn-cta1.text__color--lightgold { border-color: #f9545f; } .safari .btn-cta1.text__color--lightgold { background-color: rgba(190, 181, 126, 0); } .master-chh .safari .btn-cta1.text__color--lightgold { background-color: rgba(110, 185, 216, 0); } .master-cth .safari .btn-cta1.text__color--lightgold { background-color: rgba(249, 84, 95, 0); } .btn-cta1.text__color--lightgold::before { background-color: #beb57e; } .master-chh .btn-cta1.text__color--lightgold::before { border-color: #6eb9d8; } .master-cth .btn-cta1.text__color--lightgold::before { border-color: #f9545f; } .safari .btn-cta1.text__color--lightgold:hover { background-color: #beb57e; } .master-chh .safari .btn-cta1.text__color--lightgold:hover { background-color: #6eb9d8; } .master-cth .safari .btn-cta1.text__color--lightgold:hover { background-color: #f9545f; } .windows.firefox .btn-cta1.text__color--lightgold:hover { background-color: #beb57e; } .master-chh .windows.firefox .btn-cta1.text__color--lightgold:hover { background-color: #6eb9d8; } .master-cth .windows.firefox .btn-cta1.text__color--lightgold:hover { background-color: #f9545f; } .btn-cta1.text__color--lightgold:hover .text { color: #FFF !important; } .btn-cta1.text__color--darkgold { border-color: #937d2f; } .master-chh .btn-cta1.text__color--darkgold { border-color: #3f93b5; } .master-cth .btn-cta1.text__color--darkgold { border-color: #852f35; } .safari .btn-cta1.text__color--darkgold { background-color: rgba(147, 125, 47, 0); } .master-chh .safari .btn-cta1.text__color--darkgold { background-color: rgba(63, 147, 181, 0); } .master-cth .safari .btn-cta1.text__color--darkgold { background-color: rgba(133, 47, 53, 0); } .windows.firefox .btn-cta1.text__color--darkgold { background-color: rgba(147, 125, 47, 0); } .master-chh .windows.firefox .btn-cta1.text__color--darkgold { background-color: rgba(63, 147, 181, 0); } .master-cth .windows.firefox .btn-cta1.text__color--darkgold { background-color: rgba(133, 47, 53, 0); } .ie .btn-cta1.text__color--darkgold { background-color: rgba(147, 125, 47, 0); } .master-chh .ie .btn-cta1.text__color--darkgold { background-color: rgba(63, 147, 181, 0); } .master-cth .ie .btn-cta1.text__color--darkgold { background-color: rgba(133, 47, 53, 0); } .btn-cta1.text__color--darkgold::before { background-color: #937d2f; } .master-chh .btn-cta1.text__color--darkgold::before { background-color: #3f93b5; } .master-cth .btn-cta1.text__color--darkgold::before { background-color: #852f35; } .safari .btn-cta1.text__color--darkgold:hover { background-color: #937d2f; } .master-chh .safari .btn-cta1.text__color--darkgold:hover { background-color: #3f93b5; } .master-cth .safari .btn-cta1.text__color--darkgold:hover { background-color: #852f35; } .windows.firefox .btn-cta1.text__color--darkgold:hover { background-color: #937d2f; } .master-chh .windows.firefox .btn-cta1.text__color--darkgold:hover { background-color: #3f93b5; } .master-cth .windows.firefox .btn-cta1.text__color--darkgold:hover { background-color: #852f35; } .ie .btn-cta1.text__color--darkgold:hover { background-color: #937d2f; } .master-chh .ie .btn-cta1.text__color--darkgold:hover { background-color: #3f93b5; } .master-cth .ie .btn-cta1.text__color--darkgold:hover { background-color: #852f35; } .btn-cta1.text__color--darkgold:hover .text { color: #FFF !important; } .btn-cta1.text__color--blue { border-color: #6eb9d8; } .safari .btn-cta1.text__color--blue { background-color: rgba(110, 185, 216, 0); } .btn-cta1.text__color--blue::before { background-color: #6eb9d8; } .master-cth .btn-cta1.text__color--blue::before { background-color: #53b7e8; } .safari .btn-cta1.text__color--blue:hover { background-color: #6eb9d8; } .windows.firefox .btn-cta1.text__color--blue:hover { background-color: #6eb9d8; } .btn-cta1.text__color--blue:hover .text { color: #FFF !important; } .btn-cta1.text__color--red { border-color: #f9545f; } .safari .btn-cta1.text__color--red { background-color: rgba(249, 84, 95, 0); } .btn-cta1.text__color--red::before { background-color: #f9545f; } .safari .btn-cta1.text__color--red:hover { background-color: #f9545f; } .windows.firefox .btn-cta1.text__color--red:hover { background-color: #f9545f; } .btn-cta1.text__color--red:hover .text { color: #FFF !important; } .btn-cta1:hover { padding: 10px 22px; } .safari .btn-cta1:hover { background-color: white; padding: 10px 15px !important; } .windows.firefox .btn-cta1:hover { background-color: white; padding: 10px 15px !important; } .ie .btn-cta1:hover { background-color: white; padding: 10px 15px !important; } .btn-cta1:hover .text { color: #937d2f; } .master-chh .btn-cta1:hover .text { color: #3f93b5 !important; } .master-cth .btn-cta1:hover .text { color: #852f35 !important; } .btn-cta1:hover::before, .btn-cta1:hover::after { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .btn-cta2 { color: #FFF; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; padding: 0 0 3px; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .master-chh .btn-cta2 { font-size: 11px; font-size: 0.6875rem; } .btn-cta2::before { left: 0; position: absolute; top: auto; background-color: #beb57e; bottom: 0; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 96%; z-index: 1; } .btn-cta2::after { left: 0; position: absolute; top: auto; background-color: #FFF; bottom: 0; height: 1px; width: 96%; } .btn-cta2:hover { cursor: pointer; color: #beb57e; } .btn-cta2:hover::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn-cta2.text__color--lightgold:before { background-color: #937d2f; } .master-chh .btn-cta2.text__color--lightgold:before { background-color: #3f93b5; } .master-cth .btn-cta2.text__color--lightgold:before { background-color: #852f35; } .btn-cta2.text__color--lightgold::after { background-color: #beb57e; } .master-chh .btn-cta2.text__color--lightgold::after { background-color: #6eb9d8; } .master-cth .btn-cta2.text__color--lightgold::after { background-color: #f9545f; } .btn-cta2.text__color--lightgold:hover { color: #937d2f !important; } .master-chh .btn-cta2.text__color--lightgold:hover { color: #3f93b5 !important; } .master-cth .btn-cta2.text__color--lightgold:hover { color: #852f35 !important; } .btn-cta2.text__color--blue:before { background-color: #3f93b5; } .btn-cta2.text__color--blue::after { background-color: #6eb9d8; } .btn-cta2.text__color--blue:hover { color: #3f93b5 !important; } .btn-cta2.text__color--red:before { background-color: #852f35; } .btn-cta2.text__color--red::after { background-color: #f9545f; } .btn-cta2.text__color--red:hover { color: #852f35 !important; } .btn-cta3 { color: #FFF; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; padding: 0 0 3px; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .master-chh .btn-cta3 { font-size: 11px; font-size: 0.6875rem; } .master-cth .btn-cta3 { font-size: 11px; font-size: 0.6875rem; } .btn-cta3::after { left: 0; position: absolute; top: auto; background-color: #FFF; bottom: 0; height: 1px; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 99%; } .btn-cta3:hover { cursor: pointer; color: #beb57e; } .master-chh .btn-cta3:hover { color: #6eb9d8; } .master-cth .btn-cta3:hover { color: #f9545f; } .btn-cta3.text__color--lightgold::after { background-color: #beb57e; } .master-chh .btn-cta3.text__color--lightgold::after { background-color: #6eb9d8; } .master-cth .btn-cta3.text__color--lightgold::after { background-color: #f9545f; } .btn-cta3.text__color--lightgold:hover { color: #937d2f !important; } .master-cth .btn-cta3.text__color--lightgold:hover { color: #852f35 !important; } .btn-cta3.text__color--lightgold:hover::after { background-color: #937d2f; } .master-chh .btn-cta3.text__color--lightgold:hover::after { background-color: #3f93b5; } .master-cth .btn-cta3.text__color--lightgold:hover::after { background-color: #852f35; } .btn-gallery { color: #beb57e; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; padding: 0 0 3px; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .master-chh .btn-gallery { color: #6eb9d8; font-size: 11px; font-size: 0.6875rem; } .master-cth .btn-gallery { color: #f9545f; font-size: 11px; font-size: 0.6875rem; } .btn-gallery::before { content: ""; font-size: 13px; margin: 0 6px 0 0; position: relative; top: 2px; } .btn-gallery::after { left: 0; position: absolute; top: auto; background-color: #beb57e; bottom: 0; height: 1px; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; } .master-chh .btn-gallery::after { background-color: #6eb9d8; } .master-cth .btn-gallery::after { background-color: #f9545f; } .btn-gallery:hover { cursor: pointer; color: #937d2f; } .master-chh .btn-gallery:hover { color: #3f93b5; } .master-cth .btn-gallery:hover { color: #852f35; } .btn-gallery:hover::after { background-color: #937d2f; } .master-chh .btn-gallery:hover::after { background-color: #3f93b5; } .master-cth .btn-gallery:hover::after { background-color: #852f35; } .btn-menu { height: 12px; display: block; position: relative; top: 15px; width: 125px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-menu { margin: 0 auto; } } .btn-menu .symbol { height: 100%; left: 0; position: relative; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 35px; } .video--isPlaying .btn-menu .symbol, .ui--isMininal .btn-menu .symbol, .tales--isOpened .btn-menu .symbol { left: 8px; width: 25px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-menu .symbol { left: 8px; width: 25px; } } .btn-menu .symbol::after { left: -8px; position: absolute; top: -10px; background-color: #FFF; height: 32px; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 51px; z-index: 0; } .skin--isLight .btn-menu .symbol::after { opacity: 1; } .btn-menu .symbol span { left: 0; position: absolute; top: 0; background-color: #FFF; display: block; height: 1px; opacity: 1; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 400ms cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 400ms cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 400ms cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 400ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 400ms cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); width: 100%; z-index: 1; } .btn-menu .symbol span:nth-child(2) { top: 5px; } .btn-menu .symbol span:nth-child(3) { top: 10px; } .skin--isLight .btn-menu .symbol span, .video--isPlaying .btn-menu .symbol span, .ui--isMininal .btn-menu .symbol span, .tales--isOpened .btn-menu .symbol span { background-color: #000; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .skin--isLight .btn-menu .symbol span, .video--isPlaying .btn-menu .symbol span, .ui--isMininal .btn-menu .symbol span, .tales--isOpened .btn-menu .symbol span { background-color: #FFF; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales--isOpened .btn-menu .symbol span { background-color: #000 !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-menu .symbol span { background-color: #000; } } .btn-menu .h5 { left: 50px; position: absolute; top: -4px; opacity: 1; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), left 400ms cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), left 400ms cubic-bezier(0.77, 0, 0.175, 1); } .skin--isLight .btn-menu .h5 { opacity: 0; } .video--isPlaying .btn-menu .h5, .ui--isMininal .btn-menu .h5, .tales--isOpened .btn-menu .h5 { opacity: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-menu .h5 { display: none; } } .btn-location { display: block; } .btn-location .icon-location { display: inline-block; font-size: 28px; margin: 0 0 0 10px; position: relative; vertical-align: middle; } .btn-location .icon-location::before { opacity: 1; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .btn-location .icon-location::after { left: 0; position: absolute; top: 0; content: ""; display: block; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .btn-location:hover .icon-location::before { opacity: 0; } .btn-location:hover .icon-location::after { opacity: 1; } .btn-scroll { padding: 0 0 30px; position: relative; } .btn-scroll .text { font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; } .master-chh .btn-scroll .text { font-size: 11px; font-size: 0.6875rem; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-scroll .text { font-size: 9px; font-size: 0.5625rem; } } .btn-scroll.text__color--white { color: #FFF; } .btn-scroll.text__color--white::after { background-color: #FFF; } .btn-scroll::after { left: 50%; position: absolute; top: auto; -webkit-animation: btnScrollBar 1000ms 0s infinite normal cubic-bezier(0.645, 0.045, 0.355, 1) backwards; animation: btnScrollBar 1000ms 0s infinite normal cubic-bezier(0.645, 0.045, 0.355, 1) backwards; bottom: 0; height: 20px; margin: 0 0 0 -.5px; width: 1px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-scroll::after { display: none; } } .btn-play { display: block; height: 55px; font-size: 48px; position: relative; width: 48px; } .master-cth .btn-play { height: 48px; } .btn-play::before { content: ""; color: #FFF; opacity: 1; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity; } .master-cth .btn-play::before { content: ""; } .btn-play::after { left: 0; position: absolute; top: 7px; content: ""; color: #FFF; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity; } .btn-play:hover::before { opacity: 0; } .master-cth .btn-play:hover::before { opacity: 1; } .btn-play:hover::after { opacity: 1; } .btn-play-2 { display: block; height: 48px; font-size: 48px; position: relative; width: 48px; } .btn-play-2::before { content: ""; color: #FFF; opacity: .7; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity; } .btn-play-2:hover::before { opacity: 1; } .btn-previouspage, .btn-nextpage { left: 30px; position: absolute; top: 60%; color: #937d2f; font-size: 11px; font-size: 0.6875rem; letter-spacing: 2px; opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); position: fixed; text-transform: uppercase; z-index: 10; } .master-chh .btn-previouspage, .master-chh .btn-nextpage { color: #3f93b5; } .master-cth .btn-previouspage, .master-cth .btn-nextpage { color: #f9545f; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .btn-previouspage, .btn-nextpage { left: 10px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-previouspage, .btn-nextpage { left: 10px; } } .skin--isGold .btn-previouspage, .skin--isGold .btn-nextpage { color: #FFF; } .ui--isMininal .btn-previouspage, .ui--isMininal .btn-nextpage { opacity: 1; } .page--toBottom .btn-previouspage, .page--toBottom .btn-nextpage { opacity: 0 !important; } .btn-previouspage::before, .btn-nextpage::before { left: 0; position: absolute; top: auto; bottom: 0; content: ""; font-size: 20px; } .btn-previouspage .text, .btn-nextpage .text { display: block; left: 7px; padding: 0 0 0 30px; position: relative; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .btn-previouspage .text::after, .btn-nextpage .text::after { left: 30px; position: absolute; top: 15px; background-color: #937d2f; height: 1px; right: 3px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform; } .master-chh .btn-previouspage .text::after, .master-chh .btn-nextpage .text::after { background-color: #3f93b5; } .master-cth .btn-previouspage .text::after, .master-cth .btn-nextpage .text::after { background-color: #852f35; } .btn-previouspage:hover .text::after, .btn-nextpage:hover .text::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn-nextpage { left: auto; right: 40px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .btn-nextpage { right: 25px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-nextpage { right: 25px; } } .btn-nextpage::before { content: ""; left: auto; right: -15px; } .btn-nextpage .text { padding: 0 30px 0 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } .btn-nextpage .text::after { left: 0; right: 30px; } .btn-select { background: none; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #FFF; display: block; font-size: 21px; font-size: 1.3125rem; padding: 0 10px 5px 0; position: relative; text-align: left; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-select { font-size: 14px; font-size: 0.875rem; } } .btn-select::after { position: absolute; right: 0; top: 7px; content: ""; font-size: 20px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .btn-select::after { top: 3px; } } .icon-relais { display: block; } .contextual-text { font-size: 12px; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; } .master-chh .contextual-text { font-size: 11px; font-size: 0.6875rem; } .master-cth .contextual-text { font-size: 12px; font-size: 0.75rem; letter-spacing: 0px; } .description { color: #FFF; font-size: 18px; font-size: 1.125rem; line-height: 1.5; } .master-chh .description { font-size: 17px; font-size: 1.0625rem; letter-spacing: .3px; line-height: 1.7; } .master-cth .description { font-size: 14px; font-size: 0.875rem; line-height: 1.7; } .description a { color: #937d2f; opacity: 1; position: relative; } .master-chh .description a { color: #3f93b5; } .master-cth .description a { color: #f9545f; } .description a:hover { text-decoration: underline; } .master-cth .description em, .master-cth .description i { font-style: italic; } .description b, .description strong { font-size: 16px; font-size: 1rem; } .description p { display: block; margin: 0 0 25px 0; } .description.is--small { font-size: 16px; font-size: 1rem; letter-spacing: 1px; } .master-cth .description.is--small { font-size: 12px; font-size: 0.75rem; } .description.is--smaller { font-size: 12px; font-size: 0.75rem; letter-spacing: 1.5px; } .h5 a, .h55 a, .h6 a { color: inherit; opacity: 1; -webkit-transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .h5 a:hover, .h55 a:hover, .h6 a:hover { opacity: .5; } .h1 { font-size: 65px; font-size: 4.0625rem; line-height: 1.4; } .master-cth .h1 { line-height: 1.2; } @media only screen and (max-height: 780px) { .desktop .h1 { font-size: 50px; font-size: 3.125rem; line-height: 1.2; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .h1 { font-size: 50px; font-size: 3.125rem; line-height: 1.2; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .h1 { font-size: 30px; font-size: 1.875rem; line-height: 1.2; } } .h2 { font-size: 32px; font-size: 2rem; line-height: 1.4; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .h2 { font-size: 28px; font-size: 1.75rem; } } .h25 { font-size: 28px; font-size: 1.75rem; line-height: 1.5; } .h3 { font-size: 30px; font-size: 1.875rem; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .h3 { font-size: 25px; font-size: 1.5625rem; } } .h35 { font-size: 24px; font-size: 1.5rem; } .h4 { font-size: 26px; font-size: 1.625rem; } .master-cth .h4 { font-style: italic; } .h45 { font-size: 18px; font-size: 1.125rem; } .master-cth .h45 { font-style: italic; } .h50 { font-size: 14px; font-size: 0.875rem; letter-spacing: 1.5px; font-weight: 200; text-transform: uppercase; } .master-chh .h50 { letter-spacing: 1px; text-transform: none; } .master-cth .h50 { letter-spacing: 1px; text-transform: none; } .h5 { font-size: 12px; font-size: 0.75rem; text-transform: uppercase; } .master-chh .h5 { letter-spacing: 1px; } .master-cth .h5 { letter-spacing: 1px; } .h55 { font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; } .master-chh .h55 { font-size: 11px; font-size: 0.6875rem; letter-spacing: 1px; } .master-cth .h55 { font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; } .h6 { font-size: 9px; font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase; } .master-chh .h6 { font-size: 11px; font-size: 0.6875rem; letter-spacing: 1px; } .master-cth .h6 { font-size: 11px; font-size: 0.6875rem; letter-spacing: 1px; } .text__color--white { color: #FFF; } .text__color--black { color: #000; } .text__color--loud { color: #252525; } .text__color--light { color: #FFF; opacity: .6; } .master-chh .text__color--light { opacity: 1; } .master-cth .text__color--light { opacity: 1; } .text__color--darklight { color: #000; opacity: .6; } .text__color--greylight { color: #000; opacity: .5; } .text__color--lightgold { color: #beb57e !important; } .master-chh .text__color--lightgold { color: #6eb9d8 !important; } .master-cth .text__color--lightgold { color: #f9545f !important; } .text__color--darkgold { color: #937d2f !important; } .master-chh .text__color--darkgold { color: #3f93b5 !important; } .master-cth .text__color--darkgold { color: #852f35 !important; } .text__color--darkgrey { color: #414141; } .text__color--blue { color: #6eb9d8; } .master-cth .text__color--blue { color: #53b7e8; } .text__color--violet { color: #723961; } .text__color--red { color: #f9545f; } /* FRAMEWORK - header, content, sidebar, and footer components ========================================================================== */ /* Proportional units ========================================================================== */ /* * Specify the proportional width of an object. * Primarily for, but not limited to, use with `.grid__cell` components. * Intentional redundancy build into each set of unit classes. */ .unit-1-2, .unit-2-4, .unit-5-10, .unit-10-20 { width: 50%; } .unit-1-3 { width: 33.33333%; } .unit-2-3 { width: 66.66667%; } .unit-1-4, .unit-5-20 { width: 25%; } .unit-3-4, .unit-15-20 { width: 75%; } .unit-1-10, .unit-2-20 { width: 10%; } .unit-2-10 { width: 20%; } .unit-3-10, .unit-6-20 { width: 30%; } .unit-4-10 { width: 40%; } .unit-6-10 { width: 60%; } .unit-7-10, .unit-14-20 { width: 70%; } .unit-8-10 { width: 80%; } .unit-9-10, .unit-18-20 { width: 90%; } .unit-1-20 { width: 5%; } .unit-3-20 { width: 15%; } .unit-4-20 { width: 20%; } .unit-7-20 { width: 35%; } .unit-8-20 { width: 40%; } .unit-9-20 { width: 45%; } .unit-11-20 { width: 55%; } .unit-12-20 { width: 60%; } .unit-13-20 { width: 65%; } .unit-16-20 { width: 80%; } .unit-17-20 { width: 85%; } .unit-19-20 { width: 95%; } #main-banner { left: 50%; position: absolute; top: 16px; opacity: 1; position: fixed; -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 122px; z-index: 151; } .master-cth #main-banner { top: 30px; } #main-banner.no-transition { -webkit-transition: none; transition: none; } .logo--isEmphasized #main-banner { opacity: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .logo--isEmphasized #main-banner { opacity: 1; } } .video--isPlaying #main-banner, .ui--isMininal #main-banner, .tales--isOpened #main-banner { opacity: 0; } .mainnav--isOpened #main-banner { -webkit-transform: translateX(-50%) translateY(0px) scale(1) !important; -ms-transform: translateX(-50%) translateY(0px) scale(1) !important; transform: translateX(-50%) translateY(0px) scale(1) !important; } .mainnav--isOpened .master-cth #main-banner { opacity: 1; } #main-banner .logo-cliff { display: block; height: 100%; width: 100%; } #main-banner .logo-cliff .text { left: 9999px; position: absolute; top: 9999px; } #main-banner .logo-cliff .visual { display: block; width: 100%; } body { background: #FFF; } .bounce--isDisabled body { overflow: hidden; } #master { height: auto; min-height: 100%; overflow: hidden; position: relative; width: 100%; } #main-content { display: block; height: auto; margin: 0 0 0; position: relative; width: 100%; z-index: 0; } #main-content .the-view { overflow: visible; position: relative; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .page-home #main-content .the-view { height: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .page-home #main-content .the-view { height: 100%; } } #main-content .dummy { overflow: hidden; position: absolute; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .page-home #main-content { height: 100%; position: absolute; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .page-home #main-content { height: 100%; position: absolute; } } .master-chh #main-content .layout::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; border: 30px solid #FFF; position: fixed; pointer-events: none; z-index: 1; } #overlay { left: 0; position: absolute; top: 0; background: rgba(255, 255, 255, 0.9); bottom: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; z-index: 69; } .ie10 #overlay, .ie9 #overlay, .ie11 #overlay { display: none; } .overlay--isActive #overlay { opacity: 1; pointer-events: auto; } .overlay--isActive.ie10 #overlay, .overlay--isActive.ie9 #overlay { display: block; } #loading { left: 0; position: absolute; top: 0; background-color: #FFF; bottom: 0; display: none; right: 0; z-index: 5000; } #loading .logo { width: 200px; } #loading .h5 { padding: 150px 0 0; -webkit-animation: fade 1500ms 0s infinite normal cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation: fade 1500ms 0s infinite normal cubic-bezier(0.215, 0.61, 0.355, 1) forwards; } .page-home #loading { display: block; } .waypoint { height: 0px; width: 100%; } #main-nav { left: 0; position: absolute; top: 0; background: #FFF; bottom: 0; display: block; opacity: 0; position: fixed; pointer-events: none; right: 0; -webkit-transition: opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 60; } .ie10 #main-nav, .ie9 #main-nav, .ie11 #main-nav { display: none; z-index: 40; } #main-nav::before { left: 30px; position: absolute; top: 30px; border: 1px solid #000; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; z-index: 150; } .master-chh #main-nav::before { opacity: 0; } .master-cth #main-nav::before { display: none; } .master-cth #main-nav .inner-border-top, .master-cth #main-nav .inner-border-bottom, .master-cth #main-nav .inner-border-left, .master-cth #main-nav .inner-border-right { background-color: #000; display: block; opacity: .3; z-index: 60; } .master-cth #main-nav .inner-border-top::before, .master-cth #main-nav .inner-border-bottom::before, .master-cth #main-nav .inner-border-left::before, .master-cth #main-nav .inner-border-right::before { left: -40px; position: absolute; top: 0; background: url("../svg/border-flourish-colored.svg") 0 0 no-repeat; display: block; height: 40px; width: 40px; z-index: 60; } .master-cth #main-nav .inner-border-top { left: 55px; position: absolute; top: 15px; height: 1px; right: 55px; } .master-cth #main-nav .inner-border-bottom { left: 55px; position: absolute; top: auto; bottom: 15px; height: 1px; right: 55px; } .master-cth #main-nav .inner-border-bottom::before { left: auto; right: -40px; top: -39px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .master-cth #main-nav .inner-border-left { left: 15px; position: absolute; top: 55px; bottom: 55px; width: 1px; } .master-cth #main-nav .inner-border-left::before { left: -0; bottom: -40px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); top: auto; } .master-cth #main-nav .inner-border-right { position: absolute; right: 15px; top: 55px; bottom: 55px; width: 1px; } .master-cth #main-nav .inner-border-right::before { left: -39px; top: -40px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #main-nav.is--active { opacity: 1; pointer-events: auto; } .ie10 #main-nav.is--active, .ie9 #main-nav.is--active, .ie11 #main-nav.is--active { display: block; z-index: 60; } #main-nav .btn-close { left: 65px; position: absolute; top: 50px; color: #000; font-size: 25px; z-index: 5; } .master-chh #main-nav .btn-close { color: #6eb9d8; } .master-cth #main-nav .btn-close { color: #000; } #main-nav .btn-close::before { content: ""; } #main-nav .btn-close .h5 { left: 40px; position: absolute; top: 7px; letter-spacing: 1px; opacity: 1; } .skin--isLight #main-nav .btn-close .h5 { opacity: 0; } #main-nav .btn-close:hover { color: #937d2f; } .master-chh #main-nav .btn-close:hover { color: #3f93b5; } .master-cth #main-nav .btn-close:hover { color: #f9545f; } #main-nav .btn-close:hover .h5 { color: #937d2f; } .master-chh #main-nav .btn-close:hover .h5 { color: #3f93b5; } .master-cth #main-nav .btn-close:hover .h5 { color: #f9545f; } #main-nav .framer { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; letter-spacing: -0.31em; padding: 30px; vertical-align: middle; width: 100%; } #main-nav .cell { display: inline-block; height: 100%; position: relative; vertical-align: middle; width: 33.33333%; } .master-chh #main-nav .cell { background-color: #eaeaea; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { #main-nav .cell { width: 50%; } } .master-chh #main-nav .cell:nth-child(3) { background-color: transparent; } .master-cth #main-nav .cell:nth-child(3) { background-color: #FFF; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { #main-nav .cell:nth-child(3) { display: none; } } .master-chh #main-nav .icon-relais { position: absolute; right: 40px; top: auto; bottom: 40px; } #main-nav .social { margin: 100px 0; } .master-chh #main-nav .social { left: 50%; position: absolute; top: auto; bottom: 60px; margin: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 60%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { #main-nav .social { margin: 50px 0; } } #main-nav .tales-snippet { display: table; height: 100%; letter-spacing: 0; width: 100%; } #main-nav .tales-snippet .center-context { display: table-cell; position: relative; vertical-align: middle; } #main-nav .tales-snippet .center-context::before { left: 0; position: absolute; top: 14vh; bottom: 14vh; border-left: 1px dashed #000; width: 1px; } .master-cth #main-nav .tales-snippet .center-context::before { display: none; } .main-nav__menu { width: 60%; } .master-cth .main-nav__menu { width: 70%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .main-nav__menu { width: 80%; } } .main-nav__menu .primary { list-style: none; position: relative; } .main-nav__menu .primary li { color: #000; font-size: 22px; font-size: 1.375rem; letter-spacing: 2px; line-height: 1; margin: 0 0 15px; -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .master-chh .main-nav__menu .primary li { font-size: 24px; font-size: 1.5rem; left: 0px; position: relative; -webkit-transition: left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .master-cth .main-nav__menu .primary li { font-size: 20px; font-size: 1.25rem; left: 0px; letter-spacing: 0; margin: 0 0 20px; position: relative; -webkit-transition: left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .main-nav__menu .primary li { font-size: 18px; font-size: 1.125rem; } } .main-nav__menu .primary li a { color: inherit; } .main-nav__menu .primary li::before { background-color: rgba(0, 0, 0, 0.4); display: inline-block; height: 1px; margin: 0 15px 0 0; position: relative; top: -7px; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 5px; } .master-chh .main-nav__menu .primary li::before { display: none; } .master-cth .main-nav__menu .primary li::before { background-color: #FFF; border: 1px solid #f9545f; display: inline-block; height: 3px; margin: 0 15px 0 0; position: relative; top: -4px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 3px; } .main-nav__menu .primary li::after { left: -10px; position: absolute; top: 9px; background-color: #f9545f; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; width: 10px; } .main-nav__menu .primary li:hover { color: #937d2f; } .master-chh .main-nav__menu .primary li:hover { color: #3f93b5; left: 10px; } .master-cth .main-nav__menu .primary li:hover { color: #f9545f; left: 10px; } .main-nav__menu .primary li:hover::before { background-color: #c9be97; width: 35px; } .master-cth .main-nav__menu .primary li:hover::before { background-color: #f9545f; border: 1px solid #f9545f; width: 3px; } .main-nav__menu .primary li:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .main-nav__menu .secondary { list-style: none; margin: 80px 0 0 20px; position: relative; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .main-nav__menu .secondary { margin: 50px 0 0 20px; } } .master-cth .main-nav__menu .secondary { margin-top: 120px; } .main-nav__menu .secondary li { color: #000; font-size: 16px; font-size: 1rem; letter-spacing: 2px; line-height: 1; margin: 0 0 10px; -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .master-cth .main-nav__menu .secondary li { letter-spacing: 0; font-size: 18px; font-size: 1.125rem; } .main-nav__menu .secondary li a { color: inherit; } .main-nav__menu .secondary li:hover { color: #937d2f; } .master-cth .main-nav__menu .secondary li:hover { color: #f9545f; } .for--info { letter-spacing: 0; width: 60%; } .master-chh .for--info { height: 310px; } .ui-framer { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 60; } .ui--framerTop .ui-framer, .video--isPlaying .ui-framer { opacity: 0; } .ie10 .ui-framer, .ie9 .ui-framer, .ie11 .ui-framer { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .ui-framer { position: fixed; left: 15px; right: 15px; } .page-gateway .ui-framer { position: absolute; } } .master-cth .ui-framer { display: none; } .ui-framer-bottom { display: none; } .ie10 .ui-framer-bottom, .ie9 .ui-framer-bottom, .ie11 .ui-framer-bottom { left: 30px; position: absolute; top: auto; background-color: #FFF; bottom: 30px; display: block; height: 1px; right: 30px; opacity: .3; z-index: 60; } .master-cth .ui-framer-bottom { left: 55px; position: absolute; top: auto; background-color: #FFF; bottom: 15px; display: block; height: 1px; right: 55px; opacity: .5; z-index: 60; } .ui--framerTop .ui-framer-bottom, .video--isPlaying .ui-framer-bottom { opacity: 0; } .ui-framer-left { display: none; } .ie10 .ui-framer-left, .ie9 .ui-framer-left, .ie11 .ui-framer-left { left: 30px; position: absolute; top: 30px; background-color: #FFF; bottom: 30px; display: block; right: 30px; opacity: .3; width: 1px; z-index: 60; } .master-cth .ui-framer-left { left: 15px; position: absolute; top: 55px; background-color: #FFF; bottom: 55px; display: block; opacity: .5; width: 1px; z-index: 60; } .ui--framerTop .ui-framer-left { opacity: 0; } .ui-framer-right { display: none; } .ie10 .ui-framer-right, .ie9 .ui-framer-right, .ie11 .ui-framer-right { position: absolute; right: 30px; top: 30px; background-color: #FFF; bottom: 30px; display: block; right: 30px; opacity: .3; width: 1px; z-index: 60; } .master-cth .ui-framer-right { position: absolute; right: 15px; top: 55px; background-color: #FFF; bottom: 55px; display: block; opacity: .5; width: 1px; z-index: 60; } .ui--framerTop .ui-framer-right { opacity: 0; } .ui-framer-top { display: none; } .ie10 .ui-framer-top, .ie9 .ui-framer-top, .ie11 .ui-framer-top { left: 30px; position: absolute; top: 30px; background-color: #FFF; display: block; height: 1px; right: 30px; opacity: .3; z-index: 60; } .master-cth .ui-framer-top { left: 55px; position: absolute; top: 15px; background-color: #FFF; display: block; height: 1px; right: 55px; opacity: .5; z-index: 60; } .ui--framerTop .ui-framer-top { opacity: 0; } .border-tl, .border-tr, .border-bl, .border-br { left: 15px; position: absolute; top: 15px; background: url("../svg/border-flourish.svg") 0 0 no-repeat; display: block; height: 40px; opacity: .7; width: 40px; z-index: 60; } .ui--framerTop .border-tl, .video--isPlaying .border-tl, .ui--framerTop .border-tr, .video--isPlaying .border-tr, .ui--framerTop .border-bl, .video--isPlaying .border-bl, .ui--framerTop .border-br, .video--isPlaying .border-br { opacity: 0; } .border-tr { left: auto; right: 15px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .border-bl { bottom: 15px; top: auto; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .border-br { bottom: 15px; left: auto; top: auto; right: 15px; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .ui-menu { left: 65px; position: absolute; top: 45px; background-color: rgba(255, 255, 255, 0); height: 41px; position: fixed; -webkit-transition: background-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), left 300ms cubic-bezier(0.645, 0.045, 0.355, 1), top 300ms cubic-bezier(0.645, 0.045, 0.355, 1), width 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), left 300ms cubic-bezier(0.645, 0.045, 0.355, 1), top 300ms cubic-bezier(0.645, 0.045, 0.355, 1), width 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 125px; z-index: 149; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .ui-menu { background-color: white; height: 42px; left: 15px !important; top: 30px; width: 41px; } } .mobile .master-cth .ui-menu { left: 46px !important; top: 45px; } .mainnav--isOpened .ui-menu { z-index: 60; } .video--isPlaying .ui-menu, .ui--isMininal .ui-menu, .tales--isOpened .ui-menu { background-color: white; left: 30px; top: 30px; width: 41px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .ui--isMininal .ui-menu { background-color: black; left: 0px !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales--isOpened .ui-menu { background-color: white !important; left: 15px !important; } } .ui-menu:hover { cursor: pointer; } .ui-menu:hover .btn-menu .symbol span:nth-child(1) { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .ui-menu:hover .btn-menu .symbol span:nth-child(2) { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); } .ui-menu:hover .btn-menu .symbol span:nth-child(3) { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .ui-menu:hover .btn-menu .h5 { left: 60px; } .ui-menu.is--disabled { pointer-events: none !important; } .ui-buttons { position: absolute; right: 30px; top: 30px; height: 42px; overflow: hidden; position: fixed; -webkit-transition: right 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: right 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 149; } .master-chh .ui-buttons { right: 50px; top: 50px; } .master-cth .ui-buttons { right: 50px; top: 45px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .ui-buttons { right: 15px; top: 30px; width: 42px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .ui--isMininal .ui-buttons { right: 0px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales--isOpened .ui-buttons { right: 15px !important; } } .ui-buttons .button { margin: 0 20px 0 0; opacity: 1; position: relative; top: 2px; -webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } .mainnav--isOpened .ui-buttons .button { color: #beb57e; } .mainnav--isOpened .master-chh .ui-buttons .button { color: #FFF !important; } .mainnav--isOpened .master-cth .ui-buttons .button { color: #000 !important; } .video--isPlaying .ui-buttons .button, .ui--isMininal .ui-buttons .button, .tales--isOpened .ui-buttons .button, .bookjourney--isOpened .ui-buttons .button { opacity: 0; } .ui-buttons .button::after { left: 0; position: absolute; top: auto; background-color: #FFF; bottom: 0; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; } .mainnav--isOpened .ui-buttons .button::after { background-color: #beb57e; } .mainnav--isOpened .master-chh .ui-buttons .button::after { background-color: #FFF !important; } .ui-buttons .button:hover { cursor: pointer; } .ui-buttons .button:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* MODULES - Re-usable site elements. ========================================================================== */ .book-journey { position: absolute; right: 178px; top: 30px; clip: rect(0, 443px, 42px, 443px); height: 42px; position: fixed; -webkit-transition: clip 400ms cubic-bezier(0.645, 0.045, 0.355, 1), right 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: clip 400ms cubic-bezier(0.645, 0.045, 0.355, 1), right 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 443px; z-index: 9999; } .master-cth .book-journey { right: 206px; top: 45px; } .bookjourney--isOpened .book-journey { clip: rect(0, 443px, 42px, 0px); } .ui--isMininal .book-journey { right: 65px; } .book-journey::after { position: absolute; right: -1px; top: 50%; width: 0; height: 0; border-style: solid; border-width: 9.5px 0 9.5px 9px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .book-journey .btn-close { left: 0; position: absolute; top: 0; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; height: 42px; -webkit-transition: background 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 42px; } .book-journey .btn-close::before { content: ""; font-size: 20px; } .book-journey .btn-close:hover { background-color: white; } .book-journey .checkout__book { height: 100%; left: 43px; position: relative; } .book-journey .checkout__book .label { display: block; font-style: italic; font-size: 14px; font-size: 0.875rem; height: 100%; line-height: 40px; } .master-cth .book-journey .checkout__book .label { font-size: 12px; font-size: 0.75rem; line-height: 42px; } .book-journey .checkout__book .field__calendar { display: block; height: 100%; position: relative; } .book-journey .checkout__book .field__calendar input { background-color: rgba(255, 255, 255, 0); border: 0px none; color: #000; font-size: 12px; font-size: 0.75rem; height: 100%; letter-spacing: 2px; margin: 13px 0 0; text-transform: uppercase; width: 100%; } .book-journey .checkout__book .field__calendar input::-webkit-input-placeholder { color: #000; } .book-journey .checkout__book .field__calendar input::-moz-placeholder { color: #000; } .book-journey .checkout__book .field__calendar input:-ms-input-placeholder { color: #000; } .book-journey .checkout__book .field__calendar input::placeholder { color: #000; } .book-journey .checkout__book .field__calendar::after { position: absolute; right: 10px; top: 17px; color: #000; content: ""; pointer-events: none; } .book-journey .checkout__book .numbernight { left: 10px; position: absolute; top: 0; } .book-journey .checkout__book .field__night { left: 0; position: absolute; top: 0; display: block; height: 100%; width: 100%; } .book-journey .checkout__book .field__night select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: rgba(255, 255, 255, 0); border: 0px none; color: #000; direction: rtl; font-size: 12px; font-size: 0.75rem; height: 40px; left: 0; padding: 0 20px 0 0; letter-spacing: 2px; margin: 1px 0 0; position: relative; width: 100%; } .book-journey .checkout__book .field__night select option { direction: ltr; } .book-journey .checkout__book .field__night::after { position: absolute; right: 10px; top: 17px; color: #000; content: ""; pointer-events: none; } .book-journey .framer { height: 100%; width: 100%; } .book-journey .grid { background-color: rgba(255, 255, 255, 0.8); display: block; float: left; height: 100%; margin: 0 1px 0 0; -webkit-transition: background 600ms linear; transition: background 600ms linear; } .book-journey .grid:nth-child(1) { width: 236px; } .book-journey .grid:nth-child(2) { width: 155px; } .book-journey .grid .grid__cell { padding: 0; position: relative; } .book-journey .grid.is--selected { background-color: white; } .ui-datepicker { background-color: #FFF; -webkit-box-sizing: border-box; box-sizing: border-box; left: auto !important; right: 30px !important; margin: 17px 0 0; padding: 30px 15px; width: 548px !important; } .master-cth .ui-datepicker { right: 50px !important; } .ui-datepicker::after { left: 50%; position: absolute; top: 30px; background-color: #b2b2b2; bottom: 30px; margin: 0 0 0 -.5px; width: 1px; } .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { color: #beb57e; left: 0; height: 30px; width: 30px; } .master-cth .ui-datepicker-prev, .master-cth .ui-datepicker .ui-datepicker-next { color: #f9545f; } .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before { content: ""; font-size: 30px; } .ui-datepicker .ui-datepicker-next { left: auto; right: 0; } .ui-datepicker .ui-datepicker-next::before { content: ""; } .ui-datepicker-title { color: #000; font-size: 21px; font-size: 1.3125rem; letter-spacing: 1px; text-align: center; text-transform: uppercase; } .ui-datepicker-calendar { margin: 10px auto .4em; } .ui-datepicker-calendar thead { color: #000; font-size: 11px; font-size: 0.6875rem; text-transform: uppercase; } .ui-datepicker-calendar tbody td { position: relative; text-align: center; } .ui-state-default { color: #000; display: inline-block; font-size: 11px; font-size: 0.6875rem; padding: 2px; text-transform: uppercase; } .ui-state-highlight::before { left: 8px; position: absolute; top: 1px; background-color: rgba(0, 0, 0, 0.2); height: 19px; width: 22px; z-index: -1; } .ui-state-active { color: #000; } .ui-state-active::before { left: 50%; position: absolute; top: 1px; background-color: #beb57e; height: 19px; margin: 0 0 0 -11px; width: 22px; z-index: -1; } .master-cth .ui-state-active::before { color: #f9545f; } .ui-state-active::after { left: 50%; position: absolute; top: auto; bottom: -1px; width: 0; height: 0; border-style: solid; border-width: 5px 4px 0 4px; border-color: #beb57e transparent transparent transparent; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .master-cth .ui-state-active::after { border-color: #f9545f transparent transparent transparent; } .ui-datepicker-buttonpane { display: none; } .book-journey__options { left: 0; position: absolute; top: 0; background-color: #beb57e; height: 40px; opacity: 0; pointer-events: none; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 548px; z-index: 9999; } .master-cth .book-journey__options { background-color: #f9545f; } .book-journey__options .buttons { height: 100%; position: relative; width: 100%; } .book-journey__options .buttons .cell { display: block; float: left; text-align: center; width: 50%; } .book-journey__options .buttons .cell .h55 { line-height: 40px; } .book-journey__options .buttons .cell .icon-close { font-size: 12px; position: relative; top: 2px; } .book-journey__options .buttons .cell .icon-lock { font-size: 12px; } .book-journey__options.is--active { opacity: 1; pointer-events: auto; } .contextual--footer { left: 30px; position: absolute; top: auto; bottom: 30px; right: 30px; z-index: 50; } .contextual--footer .cell { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 0 30px 0; position: relative; width: 50%; } .contextual--footer .cell:nth-child(1) .h6 { font-size: 10px; font-size: 0.625rem; } .contextual--footer .cell:nth-child(2) { margin-bottom: 15px; text-align: right; top: -5px; } .contextual--footer .cell:nth-child(2) .h6 { display: inline-block; vertical-align: middle; } .contextual--footer.for--mobile { bottom: 40px; opacity: 0; pointer-events: none; text-align: center; -webkit-transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1); } .footer--isShown .contextual--footer.for--mobile { opacity: 1; pointer-events: auto; } .landscape.mobile .contextual--footer.for--mobile { display: none; } .contextual--footer.for--mobile .button { color: #FFF; display: inline-block; height: 35px; line-height: 35px; margin: 0 5px; vertical-align: middle; width: 35px; } .contextual--footer.for--mobile .button a { color: inherit; } .contextual--footer.for--mobile .button .icon-phone { font-size: 15px; position: relative; } .contextual--footer.for--mobile .button .icon-phone::after { border: 1px solid #FFF; -webkit-border-radius: 100%; border-radius: 100%; height: 28px; width: 28px; } .contextual--footer.for--mobile .button .icon-location { font-size: 30px; } .cross-sell { height: 440px; position: relative; width: 100%; z-index: 5; } .cross-sell::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; z-index: 10; } .ie10 .cross-sell::before, .ie9 .cross-sell::before, .ie11 .cross-sell::before { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; content: " "; display: block; right: 0; z-index: 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell { height: 900px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell.for--2 { height: 600px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell.with--tales::after { top: 300px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell .tales-snippet { height: 400px; } .cross-sell .tales-snippet .btn-cta1 { margin: 15px 0 0; } .cross-sell .tales-snippet .visual { width: 30%; } } .cross-sell__item { display: block; float: left; height: 100%; position: relative; width: 33.33333%; } .for--2 .cross-sell__item { width: 50%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .for--2 .cross-sell__item { height: 50%; width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item { height: 33.33333%; width: 100%; } } .cross-sell__item .context { left: 0; position: absolute; top: 120px; bottom: 30px; overflow: hidden; z-index: 1; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .context { top: 30px; } } .ie10 .cross-sell__item .context, .ie9 .cross-sell__item .context, .ie11 .cross-sell__item .context { bottom: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .context { top: 30px; } } .cross-sell__item:nth-child(1) .context { left: 30px; } .ie10 .cross-sell__item:nth-child(1) .context, .ie9 .cross-sell__item:nth-child(1) .context, .ie11 .cross-sell__item:nth-child(1) .context { left: 0; } .cross-sell__item:nth-child(1) .context, .cross-sell__item:nth-child(2) .context { right: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:nth-child(1) .context, .cross-sell__item:nth-child(2) .context { left: 30px !important; } } .cross-sell__item:nth-child(2) .context { left: 0; } .for--2 .cross-sell__item:nth-child(2) .context { right: 30px; } .cross-sell__item:nth-child(2)::before, .cross-sell__item:nth-child(2)::after { left: 0; position: absolute; top: 30px; background-color: #FFF; bottom: 30px; opacity: .3; width: 1px; z-index: 1; } .ie10 .cross-sell__item:nth-child(2)::before, .ie9 .cross-sell__item:nth-child(2)::before, .ie11 .cross-sell__item:nth-child(2)::before, .ie10 .cross-sell__item:nth-child(2)::after, .ie9 .cross-sell__item:nth-child(2)::after, .ie11 .cross-sell__item:nth-child(2)::after { display: none; } .cross-sell__item:nth-child(2)::after { left: auto; right: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:nth-child(2) .fill { right: 0; } } .cross-sell__item:nth-child(3) .context { left: 0; right: 30px; } .ie10 .cross-sell__item:nth-child(3) .context, .ie9 .cross-sell__item:nth-child(3) .context, .ie11 .cross-sell__item:nth-child(3) .context { right: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:nth-child(3) .context { left: 30px !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:nth-child(3) .fill { right: 0; } } .cross-sell__item .fill { left: 0; position: absolute; top: auto; background-color: rgba(255, 255, 255, 0.9); bottom: 0; height: 100%; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); width: 100%; will-change: transform; z-index: 0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .fill { -webkit-transition: none 0s !important; transition: none 0s !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .fill { right: 30px; -webkit-transition: none 0s !important; transition: none 0s !important; -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); width: auto; } } .cross-sell__item .framer { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: 0 30px; position: relative; -webkit-transform: translateY(140%); -ms-transform: translateY(140%); transform: translateY(140%); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .framer { position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .framer { position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } } .cross-sell__item .framer .button { color: #937d2f; font-size: 10px; font-size: 0.625rem; display: inline; letter-spacing: 2px; margin: 0 0 0 55px; padding: 0 0 3px; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .master-chh .cross-sell__item .framer .button { color: #3f93b5; } .master-cth .cross-sell__item .framer .button { color: #852f35; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .framer .button { color: #FFF; margin: 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .framer .button { color: #FFF; margin: 0; } } .cross-sell__item .framer .button::after { left: 0; position: absolute; top: 13px; background-color: rgba(147, 125, 47, 0.7); height: 1px; width: 100%; z-index: 0; } .master-chh .cross-sell__item .framer .button::after { background-color: rgba(63, 147, 181, 0.7); } .master-cth .cross-sell__item .framer .button::after { background-color: rgba(133, 47, 53, 0.7); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .framer .button::after { background-color: #FFF; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .framer .button::after { background-color: #FFF; } } .cross-sell__item .framer .h35, .cross-sell__item .framer .description { margin: 0 0 30px; -webkit-transition: color 400ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 400ms cubic-bezier(0.215, 0.61, 0.355, 1); } .cross-sell__item .framer .description { color: #000; font-size: 16px; font-size: 1rem; height: 50px; overflow: hidden; opacity: 0; padding: 0 0 0 55px; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item .framer .description { color: #FFF; opacity: .7; padding: 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item .framer .description { color: #FFF; opacity: .7; padding: 0; } } .cross-sell__item .framer .description::before { left: -55px; position: absolute; top: 12px; background-color: black; display: block; height: 1px; position: relative; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 35px; } .cross-sell__item:hover .h35 { color: #000; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item:hover .button { color: #000; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:hover .button { color: #000; } } .cross-sell__item:hover .description { opacity: 1; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item:hover .description { color: #000; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:hover .description { color: #000; } } .cross-sell__item:hover .framer { cursor: pointer; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .cross-sell__item:hover .framer { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .cross-sell__item:hover .framer { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .cross-sell__item:hover .fill { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .fittings { margin: 150px 0 150px; position: relative; z-index: 1; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings { margin: 0 0 80px; } } .fittings .content { display: block; margin: 40px 0 0 150px; position: relative; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .content { margin: 20px 0 0; } } .fittings .content .item { display: none; position: relative; } .fittings .content .item.is--active { display: block; } .fittings .content .item ul { list-style: none; overflow: hidden; width: 60%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .content .item ul { width: 100%; } } .fittings .content .item ul li { color: #414141; display: block; float: left; font-size: 11px; font-size: 0.6875rem; letter-spacing: .5px; margin: 0 0 20px; padding-left: 16px; text-transform: uppercase; width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .master-chh .fittings .content .item ul li { font-size: 14px; font-size: 0.875rem; text-transform: none; } .master-cth .fittings .content .item ul li { font-size: 14px; font-size: 0.875rem; text-transform: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .content .item ul li { float: none; margin: 0 0 5px; width: 100%; } } .fittings .content .item ul li::before { color: inherit; content: "-"; font-size: 15px; margin: 0; position: absolute; top: 1px; left: 0; line-height: 10px; } .master-chh .fittings .content .item ul li::before { top: 4px; } .fittings .h2 { margin: 0 0 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .h2 { margin: 0 0 20px; } } .fittings .tabs { list-style: none; margin: 0 0 0 150px; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .tabs { letter-spacing: -.31em; margin: 0; } } .fittings .tabs .button { cursor: pointer; color: #000; font-size: 11px; font-size: 0.6875rem; letter-spacing: 1px; margin: 0 70px 0 0; padding: 10px 0; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .fittings .tabs .button { display: inline-block; font-size: 10px; font-size: 0.625rem; margin: 0; width: 33.33333%; } } .fittings .tabs .button::before { left: 50%; position: absolute; top: auto; bottom: -45px; content: ""; font-size: 30px; opacity: 0; -webkit-transform: rotate(90deg) translateX(-60%); -ms-transform: rotate(90deg) translateX(-60%); transform: rotate(90deg) translateX(-60%); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .fittings .tabs .button.is--active { color: #937d2f; } .master-chh .fittings .tabs .button.is--active { color: #3f93b5; } .master-cth .fittings .tabs .button.is--active { color: #852f35; } .fittings .tabs .button.is--active::before { opacity: 1; -webkit-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); } .flow-content { background: url("../img/common/pattern.png") left top repeat; margin: 100vh 0 0; overflow: hidden; padding: 88px 0 0; position: relative; z-index: 10; } .master-chh .flow-content { background: #FFF; } .master-cth .flow-content { background: #FFF; } .ios7 .flow-content { margin: 0 0 0; } .flow-fit { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 0 90px 100px; padding: 50px 60px 50px 50px; width: 60%; } .master-chh .flow-fit { margin: 0 0 90px 0; width: 100%; } .master-cth .flow-fit { margin: 0 0 90px 0; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-fit { margin-left: auto; margin-right: auto; padding: 0; width: 100%; } } .flow-fit.module { padding: 0 100px 0 50px; margin: 0 0 0 100px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .flow-fit.module { margin: 0 0 0 100px; padding: 0 100px 0 0; width: 60%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-fit.module { margin-left: auto; margin-right: auto; padding: 0; width: 100%; } } .flow-framer { margin: 0 auto; max-width: 1024px; position: relative; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .flow-framer { max-width: 90%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-framer { max-width: 78%; } } .flow-framer.image { margin-top: 70px; margin-bottom: 70px; } .flow-richtext h1 { font-size: 32px; font-size: 2rem; line-height: 1.4; margin: 0 0 25px 0; } .flow-richtext h2 { font-size: 24px; font-size: 1.5rem; line-height: 1.4; margin: 0 0 25px 0; } .flow-richtext h3 { font-size: 18px; font-size: 1.125rem; line-height: 1.4; margin: 0 0 25px 0; } .flow-richtext .visual__left, .flow-richtext .visual__right { margin: 90px 0 0; width: 100%; } .flow-richtext .visual__left:before, .flow-richtext .visual__left:after, .flow-richtext .visual__right:before, .flow-richtext .visual__right:after { content: " "; /* 1 */ display: table; /* 2 */ } .flow-richtext .visual__left:after, .flow-richtext .visual__right:after { clear: both; } .flow-richtext .visual__left .framer, .flow-richtext .visual__right .framer { width: 80%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left .framer, .flow-richtext .visual__right .framer { width: 100%; } } .flow-richtext .visual__left .h35, .flow-richtext .visual__right .h35 { font-size: 18px; font-size: 1.125rem; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left .grid__cell, .flow-richtext .visual__right .grid__cell { width: 100%; } } .flow-richtext .visual__left img, .flow-richtext .visual__right img { display: block; margin: 0 0 0 auto; width: auto; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .flow-richtext .visual__left img, .flow-richtext .visual__right img { width: 150px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left img, .flow-richtext .visual__right img { margin: 0 0 25px !important; width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left, .flow-richtext .visual__right { margin: 45px 0 0; } } .flow-richtext .visual__right .grid .grid__cell { float: right; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__right .grid .grid__cell { float: none; } } .flow-richtext .visual__left .framer { margin: 0 0 0 auto; } .flow-richtext .visual__left img { margin: 0; } .flow-richtext .visual__left--double, .flow-richtext .visual__right--double { margin: 0 auto 90px; position: relative; width: 95%; } .flow-richtext .visual__left--double:before, .flow-richtext .visual__left--double:after, .flow-richtext .visual__right--double:before, .flow-richtext .visual__right--double:after { content: " "; /* 1 */ display: table; /* 2 */ } .flow-richtext .visual__left--double:after, .flow-richtext .visual__right--double:after { clear: both; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double, .flow-richtext .visual__right--double { margin: 0 auto 45px; width: 80%; } } .flow-richtext .visual__left--double .content, .flow-richtext .visual__right--double .content { -webkit-box-sizing: border-box; box-sizing: border-box; float: right; padding: 0 25px; width: 50%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double .content, .flow-richtext .visual__right--double .content { float: none !important; width: 100% !important; } } .flow-richtext .visual__left--double .framer, .flow-richtext .visual__right--double .framer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 50px 0 80px; width: 70%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double .framer, .flow-richtext .visual__right--double .framer { padding: 0 !important; width: 100% !important; } } .flow-richtext .visual__left--double .framer .description::before, .flow-richtext .visual__right--double .framer .description::before { background: #6eb9d8; display: block; float: left; height: 1px; margin: 0 10px 0 0; position: relative; top: 15px; width: 30px; } .master-cth .flow-richtext .visual__left--double .framer .description::before, .master-cth .flow-richtext .visual__right--double .framer .description::before { background: #f9545f; top: 12px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double .framer, .flow-richtext .visual__right--double .framer { margin: 0; width: 100%; } } .flow-richtext .visual__left--double .visuals, .flow-richtext .visual__right--double .visuals { display: block; float: left; margin: 100px 0 0; position: relative; width: 50%; } .flow-richtext .visual__left--double .visuals.front_large .visual-large, .flow-richtext .visual__right--double .visuals.front_large .visual-large { z-index: 1; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double .visuals, .flow-richtext .visual__right--double .visuals { float: none !important; margin: 0 0 20px !important; width: 100% !important; } } .flow-richtext .visual__left--double .visuals .visual-large, .flow-richtext .visual__left--double .visuals .visual-small, .flow-richtext .visual__right--double .visuals .visual-large, .flow-richtext .visual__right--double .visuals .visual-small { margin: 0; position: relative; width: 100%; } .flow-richtext .visual__left--double .visuals .visual-large:hover, .flow-richtext .visual__right--double .visuals .visual-large:hover { z-index: 5; } .flow-richtext .visual__left--double .visuals .visual-small, .flow-richtext .visual__right--double .visuals .visual-small { left: 100px; margin: -150px 0 0 auto; width: 40%; } .flow-richtext .visual__left--double .visuals .visual-small:hover, .flow-richtext .visual__right--double .visuals .visual-small:hover { z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .flow-richtext .visual__left--double .visuals .visual-small, .flow-richtext .visual__right--double .visuals .visual-small { left: 0 !important; margin: -50px 0 0 auto !important; width: 30% !important; z-index: 5 !important; } } .flow-richtext .visual__right--double .framer { margin: 0 0 0 auto; padding: 0 150px 0 0px; width: 70%; } .flow-richtext .visual__right--double .visuals { float: right; } .flow-richtext .visual__right--double .visuals.front_large .visual-large { z-index: 1; } .flow-richtext .visual__right--double .visuals .visual-large { margin: 0 0 0 auto; } .flow-richtext .visual__right--double .visuals .visual-large:hover { z-index: 5; } .flow-richtext .visual__right--double .visuals .visual-small { left: -100px; margin: -150px 0 0 0; } .flow-richtext .visual__right--double .visuals .visual-small:hover { z-index: 5; } .flow-richtext ol, .flow-richtext ul { margin: 0 0 25px 15px; } .flow-richtext ol li, .flow-richtext ul li { margin: 0 0 5px; padding: 0 0 0 5px; position: relative; } .flow-richtext img { display: block; margin: 30px 0; width: 100%; } .flow-richtext p { display: block; margin: 0 0 25px 0; } .flow-richtext strong { font-size: 16px; font-size: 1rem; } .flow-richtext .description { margin: 0 0 25px 0; } .footer-simple { height: 450px; position: relative; width: 100%; z-index: 10; } .footer-simple .bg { z-index: 1; } .footer-simple::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; border: 30px solid #FFF; border-top: 0px none; pointer-events: none; z-index: 1; } #main-player { left: 0; position: absolute; top: 0; background-color: #000; height: 100vh; opacity: 0; pointer-events: none; right: 0; -webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 149; } .ie10 #main-player, .ie9 #main-player, .ie11 #main-player { display: none; } #main-player .btn-close { position: absolute; right: 30px; top: 72px; background-color: #FFF; color: #000; font-size: 20px; height: 42px; line-height: 20px; width: 42px; z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { #main-player .btn-close { top: 30px; } } #main-player .btn-close::before { content: ""; } #main-player .btn-close:hover { color: #937d2f; } .master-chh #main-player .btn-close:hover { color: #6eb9d8; } .master-cth #main-player .btn-close:hover { color: #f9545f; } #main-player .embed { left: 0; position: absolute; top: 0; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; width: 100%; z-index: 3; } .video--isPlaying #main-player { pointer-events: auto; opacity: 1; } .video--isPlaying.ie10 #main-player, .video--isPlaying.ie9 #main-player { display: block; } .newsletter__form { display: block; margin: 0 0 0; position: relative; width: 100%; } .newsletter__form .field__check + label a { color: inherit; text-decoration: underline; } .newsletter__form .field__check:not(:checked), .newsletter__form .field__check:checked { left: -9999px; position: absolute; } .newsletter__form .field__check:not(:checked) + label, .newsletter__form .field__check:checked + label { cursor: pointer; font-size: 14px; font-size: 0.875rem; margin: 0; padding-left: 30px; position: relative; } .newsletter__form .field__check:not(:checked) + label { color: rgba(255, 255, 255, 0.8); } .newsletter__form .field__check:not(:checked) + label::before, .newsletter__form .field__check:checked + label::before { left: 0; position: absolute; top: 0; background-color: transparent; border: 1px solid #FFF; -webkit-border-radius: 1px; border-radius: 1px; content: ''; height: 13px; width: 13px; } .newsletter__form .field__check.error:not(:checked) + label::before, .newsletter__form .field__check.error:checked + label::before { border: 1px solid #ff0000; } .newsletter__form .field__check:not(:checked) + label::after, .newsletter__form .field__check:checked + label::after { left: 5px; position: absolute; top: 5px; border: 1px solid transparent; background: #FFF; content: ''; color: #FFF; height: 3px; width: 3px; -webkit-transition: all 200ms; transition: all 200ms; } .newsletter__form .field__check:not(:checked) + label::after { opacity: 0; filter: alpha(opacity=0); } .newsletter__form .field__check:checked + label::after { opacity: 1; filter: alpha(opacity=100); } .newsletter__form .field__check:checked + label { color: #FFF; } .newsletter__form .field__text { background: none; -webkit-border-radius: 0px; border-radius: 0px; border-top: 0px none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #FFF; font-size: 21px; font-size: 1.3125rem; padding: 0 0 5px; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; } .master-cth .newsletter__form .field__text { font-size: 16px; font-size: 1rem; } .newsletter__form .field__text:-webkit-autofill { -webkit-text-fill-color: #FFF !important; -webkit-box-shadow: 0 0 0 1000px black inset !important; } .newsletter__form .field__text::-webkit-input-placeholder { color: #FFF; } .newsletter__form .field__text::-moz-placeholder { color: #FFF; } .newsletter__form .field__text:-ms-input-placeholder { color: #FFF; } .newsletter__form .field__text::placeholder { color: #FFF; } .newsletter__form .field__text.error { border-bottom: 1px solid #ff0000; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .newsletter__form .field__text { font-size: 15px; font-size: 0.9375rem; } } .newsletter__form .field__validation { background: rgba(255, 255, 255, 0); -webkit-border-radius: 0px; border-radius: 0px; border: 3px solid #FFF; color: #FFF; display: block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; padding: 10px 35px; text-transform: uppercase; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .newsletter__form .field__validation:hover { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: white; color: #937d2f; } .master-chh .newsletter__form .field__validation:hover { color: #6eb9d8; } .master-cth .newsletter__form .field__validation:hover { color: #f9545f; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .newsletter__form .field__validation { top: 0; } } .search__status { padding: 10px 0 0; -webkit-transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } .for--loading .search__status, .for--success .search__status { border-color: #937d2f; } .for--error .search__status { border-color: #BE0013; } .search__status .h6 { opacity: 0; } .for--error .search__status .h6 { opacity: 1; } .offer { position: relative; } .offer .framer { left: 0; position: absolute; top: auto; background-color: #FFF; -webkit-box-sizing: border-box; box-sizing: border-box; bottom: 30px; right: 60px; padding: 30px 30px 45px; text-align: left; z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .offer .framer .h4 { font-size: 20px; font-size: 1.25rem; } } .offer .framer .description { letter-spacing: 0; margin: 0 0 15px; } .offer .framer .description::before { background-color: rgba(0, 0, 0, 0.6); height: 1px; margin: 20px 0; width: 35px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .offer .framer .description::before { margin: 8px 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .offer .framer { bottom: 0; padding: 20px; } } .offer .title { position: absolute; right: -10px; top: auto; background-color: #beb57e; bottom: -50px; margin: 0; padding: 70px 20px 10px; z-index: 0; } .master-chh .offer .title { background-color: #3f93b5; } .master-cth .offer .title { background-color: #f9545f; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .offer .title { bottom: -35px; } } .offer .title .text { display: inline-block; font-size: 16px; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .offer .title .text { font-size: 12px; font-size: 0.75rem; } } .offer .visual { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 0 0 auto; padding: 0 0 0 30px; position: relative; width: 100%; z-index: 1; } .orangerymenu { margin: 150px 0 150px; position: relative; z-index: 1; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu { margin: 0 0 80px; } } .orangerymenu .visual { position: absolute; right: 0; top: 0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .orangerymenu .visual { display: none; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .visual { display: none; } } .orangerymenu .framer { padding: 0 330px 0 150px; position: relative; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .orangerymenu .framer { padding: 0 330px 0 50px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .orangerymenu .framer { padding: 0 100px 0 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .framer { padding: 0; } } .orangerymenu .content { display: block; margin: 40px 0 0 0; position: relative; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .content { margin: 20px 0 0; } } .orangerymenu .content .grid__cell { margin-bottom: 30px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .content .grid__cell { width: 100%; } } .orangerymenu .content .grid__cell .h50 { margin: 0 0 5px; } .orangerymenu .content .item { display: none; position: relative; } .orangerymenu .content .item.is--active { display: block; } .orangerymenu .content .item ul { list-style: none; overflow: hidden; width: 60%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .content .item ul { width: 100%; } } .orangerymenu .content .item ul li { color: #414141; display: block; float: left; font-size: 11px; font-size: 0.6875rem; letter-spacing: .5px; margin: 0 0 20px; padding-left: 16px; text-transform: uppercase; width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .content .item ul li { float: none; margin: 0 0 5px; width: 100%; } } .orangerymenu .content .item ul li::before { color: inherit; content: "-"; font-size: 15px; margin: 0; position: absolute; top: 1px; left: 0; line-height: 10px; } .orangerymenu .content .subitem { display: none; position: relative; } .orangerymenu .content .subitem.is--active { display: block; } .orangerymenu .h2 { margin: 0 0 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .h2 { margin: 0 0 20px; } } .orangerymenu .super-tabs { list-style: none; margin: 70px 0; width: 100%; } .orangerymenu .super-tabs .button { margin: 0 70px 0 0; position: relative; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .super-tabs .button { margin: 0 30px 0 0; } } .orangerymenu .super-tabs .button::before { left: 0; position: absolute; top: auto; background-color: #937d2f; bottom: -3px; height: 4px; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; } .master-chh .orangerymenu .super-tabs .button::before { background-color: #3f93b5; } .master-cth .orangerymenu .super-tabs .button::before { background-color: #852f35; } .orangerymenu .super-tabs .button.is--active { color: #937d2f; } .master-chh .orangerymenu .super-tabs .button.is--active { color: #3f93b5; } .master-cth .orangerymenu .super-tabs .button.is--active { color: #852f35; } .orangerymenu .super-tabs .button.is--active::before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .orangerymenu .tabs { list-style: none; margin: 0 0 50px; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .tabs { letter-spacing: -.31em; } } .orangerymenu .tabs .button { cursor: pointer; color: #000; font-size: 11px; font-size: 0.6875rem; letter-spacing: 1px; margin: 0 40px 0 0; padding: 10px 0; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .orangerymenu .tabs .button { display: inline-block; font-size: 10px; font-size: 0.625rem; margin: 0; width: 33.33333%; } } .orangerymenu .tabs .button::before { left: 50%; position: absolute; top: auto; bottom: -45px; content: ""; font-size: 30px; opacity: 0; -webkit-transform: rotate(90deg) translateX(-60%); -ms-transform: rotate(90deg) translateX(-60%); transform: rotate(90deg) translateX(-60%); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .orangerymenu .tabs .button.is--active { color: #937d2f; } .master-chh .orangerymenu .tabs .button.is--active { color: #3f93b5; } .master-cth .orangerymenu .tabs .button.is--active { color: #852f35; } .orangerymenu .tabs .button.is--active::before { opacity: 1; -webkit-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); } .rates { background: url("../img/common/pattern-gold.gif") left top repeat; padding: 150px 0; } .master-chh .rates { background: #723961; } .master-cth .rates { background: #852f35; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .rates { padding: 50px 0; } } .rates .description { letter-spacing: 0; } .rates .h2, .rates .h35 { margin: 0 0 50px; } .master-chh .rates .h35::before { opacity: 0; } .master-cth .rates .h35::before { opacity: 0; } .rates a { color: #ffffff; } .rates .framer { letter-spacing: -.31em; margin: 0 0 0 150px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .rates .framer { margin: 0; } } .rates .framer .cell { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; width: 50%; } .rates .framer .cell:nth-child(1) { padding: 0 50px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .rates .framer .cell { margin: 0 0 25px; width: 100%; } } .rates .prices { margin: 30px 0 0; } .rates .prices .description { border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 0 0 15px; } .rates .prices .note { color: #000; font-size: 14px; font-size: 0.875rem; letter-spacing: 0; padding: 15px 0 0; } .master-chh .rates .prices .note { color: #FFF; } .master-cth .rates .prices .note { color: #FFF; } .rates .prices .price { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #FFF; font-size: 12px; font-size: 0.75rem; letter-spacing: 0; padding: 15px 0; text-transform: uppercase; } .article-slideshow { margin: 150px 0 150px 0; position: relative; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-slideshow { margin-left: auto; margin-right: auto; width: 90%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-slideshow { margin-bottom: 80px; margin-left: auto; margin-right: auto; width: 100%; } } .article-slideshow .flow-framer { height: 100%; } .article-slideshow .framer { height: 80vh; max-height: 600px; position: relative; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-slideshow .framer { height: 300px; } } .article-slideshow__collection { height: 100%; position: relative; width: 100%; } .article-slideshow__slide { left: 0; position: absolute; top: 0; height: 100%; width: 100%; } .article-slideshow__slide.disabled { visibility: hidden; } .article-slideshow__slide.enabled { visibility: visible; } .article-slideshow__controls { left: 0; position: absolute; top: 0; bottom: 0; pointer-events: none; width: 100%; z-index: 10; } .article-slideshow__controls .btn-previous, .article-slideshow__controls .btn-next { display: block; height: 50px; margin: -25px 0 0; opacity: 1; position: absolute; pointer-events: auto; top: 50%; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 50px; } .article-slideshow__controls .btn-previous::before, .article-slideshow__controls .btn-next::before { color: rgba(255, 255, 255, 0.6); display: block; font-size: 20px; position: relative; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 1; } .article-slideshow__controls .btn-previous::after, .article-slideshow__controls .btn-next::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.3); height: 100%; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; } .article-slideshow__controls .btn-previous:hover::after, .article-slideshow__controls .btn-next:hover::after { background-color: rgba(0, 0, 0, 0.6); } .article-slideshow__controls .btn-previous.is--disabled, .article-slideshow__controls .btn-next.is--disabled { opacity: 0; } .article-slideshow__controls .btn-previous { left: 0; } .article-slideshow__controls .btn-previous::before { content: ""; } .article-slideshow__controls .btn-previous:hover::before { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } .article-slideshow__controls .btn-next { right: 0; } .article-slideshow__controls .btn-next::before { content: ""; } .article-slideshow__controls .btn-next:hover::before { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .article-slideshow__controls .triggers { left: 30px; position: absolute; top: auto; display: none; bottom: 20px; pointer-events: none; z-index: 10; } .master-chh .article-slideshow__controls .triggers { display: block; } .article-slideshow__controls .triggers li { cursor: pointer; float: left; height: 50px; pointer-events: auto; position: relative; width: 50px; } .article-slideshow__controls .triggers li::after { border: 1px solid #FFF; background-color: rgba(255, 255, 255, 0); -webkit-border-radius: 100px; border-radius: 100px; height: 5px; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .article-slideshow__controls .triggers li:hover::after { background-color: rgba(255, 255, 255, 0.5); } .article-slideshow__controls .triggers li.is--active::after { background-color: white; } .article-slideshow__features { height: 100px; margin: 30px 0 0 47px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-slideshow__features .grid__cell { display: block; width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-slideshow__features { height: auto; margin: 30px 0 0; } } .article-slideshow__features .social { float: right; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-slideshow__features .social { float: none; margin: 15px auto; width: 140px; } } .social { overflow: hidden; position: relative; } .social .button { color: #beb57e; display: block; float: left; font-size: 25px; margin: 0 20px 0 0; position: relative; } .master-chh .social .button { color: #6eb9d8; } .master-cth .social .button { color: #f9545f; } .social .button.icon-social-instagram { margin-right: 25px; } .social .button.icon-social-pinterest { font-size: 30px; margin-left: -5px; top: -4px; } .social .button:hover { cursor: pointer; color: #937d2f; } .master-chh .social .button:hover { color: #3f93b5; } .master-cth .social .button:hover { color: #852f35; } .search { position: relative; } .master-chh .search { margin: 0 auto; top: 15%; width: 60%; } .search__form { display: block; position: relative; width: 100%; } .search__form .icon-search { position: absolute; right: 0; top: 0; font-size: 22px; } .search__form .icon-search::after { left: -6px; position: absolute; top: auto; background-color: transparent; bottom: -6px; height: 1px; padding: 0 5px 0 0; width: -webkit-calc(100% + 6px); width: calc(100% + 6px); } .search__form .field__text { background: none; -webkit-border-radius: 0; border-radius: 0; border-top: 0px none; border-bottom: 1px solid #000; color: #937d2f; font-size: 16px; font-size: 1rem; letter-spacing: 1px; padding: 0 0 6px; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; } .master-chh .search__form .field__text { border-bottom: 1px solid #6eb9d8; color: #3f93b5; font-size: 14px; font-size: 0.875rem; } .master-cth .search__form .field__text { color: #f9545f; font-size: 20px; font-size: 1.25rem; } .search__form .field__text:-webkit-autofill { -webkit-text-fill-color: #FFF !important; -webkit-box-shadow: 0 0 0 1000px #FFF inset !important; } .search__form .field__text::-webkit-input-placeholder { color: #000; } .search__form .field__text::-moz-placeholder { color: #000; } .search__form .field__text:-ms-input-placeholder { color: #000; } .search__form .field__text::placeholder { color: #000; } .master-chh .search__form .field__text::-webkit-input-placeholder { color: #6eb9d8; } .master-chh .search__form .field__text::-moz-placeholder { color: #6eb9d8; } .master-chh .search__form .field__text:-ms-input-placeholder { color: #6eb9d8; } .master-chh .search__form .field__text::placeholder { color: #6eb9d8; } .search__form .field__validation { position: absolute; right: 0; top: 9px; display: block; font-size: 12px; font-size: 0.75rem; opacity: 0; text-transform: uppercase; } .search__status { padding: 10px 0 0; -webkit-transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } .for--loading .search__status, .for--success .search__status { border-color: #937d2f; } .master-chh .for--loading .search__status, .master-chh .for--success .search__status { border-color: #3f93b5; } .for--error .search__status { border-color: #BE0013; } .search__status .h6 { opacity: 0; } .for--error .search__status .h6 { opacity: 1; } .search__item { margin: 0 0 100px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .search__item { margin: 0 0 50px; } } .search__item .h2 { margin: 0; padding: 0 !important; } .search__item .h2::after { background-color: rgba(0, 0, 0, 0.5); height: 1px; margin: 30px 0 40px; width: 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .search__item .h2::after { margin: 15px 0 20px; } } .search__item .framer { display: block; left: 0; position: relative; } .search__item .framer .content { display: block; } .search__item .framer .content .btn-cta1 { margin: 40px 0 0; } .search__item .framer .visual { left: -150px; position: absolute; top: 0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .search__item .framer .visual { display: none; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .search__item .framer .visual { display: none; } } .search__pagination { overflow: hidden; position: relative; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .search__pagination { width: 140%; } } .search__pagination .btn-previous, .search__pagination .btn-next { color: #000; display: inline-block; opacity: 1; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); vertical-align: middle; } .search__pagination .btn-previous::before, .search__pagination .btn-next::before { content: ""; font-size: 20px; } .search__pagination .btn-previous:hover, .search__pagination .btn-next:hover { opacity: .5; } .search__pagination .btn-next::before { content: ""; } .search__pagination .pagination { display: inline-block; list-style: none; margin: 0 20px; } .search__pagination .pagination li { color: #000; display: inline-block; font-size: 18px; font-size: 1.125rem; margin: 0 15px; position: relative; opacity: 1; padding: 0 0 5px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .search__pagination .pagination li { margin: 0 5px; } } .search__pagination .pagination li a { color: inherit; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .search__pagination .pagination li a:hover { opacity: .5; } .search__pagination .pagination li::after { left: 50%; position: absolute; top: auto; bottom: 0; background-color: #937d2f; display: none; height: 1px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 200%; } .master-chh .search__pagination .pagination li::after { background-color: #3f93b5; } .master-cth .search__pagination .pagination li::after { background-color: #852f35; } .search__pagination .pagination li.is--active { color: #937d2f; } .master-chh .search__pagination .pagination li.is--active { color: #3f93b5; } .master-cth .search__pagination .pagination li.is--active { color: #852f35; } .search__pagination .pagination li.is--active::after { display: block; } .search__pagination .pagination li.is--active a { color: inherit; } .search__pagination .pagination li.is--active a:hover { opacity: 1; } .tales-snippet { letter-spacing: 0; text-align: center; width: 100%; } .tales-snippet .btn-cta1 { margin: 35px 0 0; } .cross-sell .tales-snippet img { max-height: 200px; } .tales-snippet .number { font-size: 16px; font-size: 1rem; position: relative; } .tales-snippet .number span { left: 50%; position: absolute; top: 0; display: block; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .master-cth .tales-snippet .number span::before, .master-cth .tales-snippet .number span::after { left: -34px; position: absolute; top: 9px; background-color: #FFF; border: 1px solid #f9545f; display: inline-block; height: 3px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 3px; } .master-cth .tales-snippet .number span::after { left: 26px; } .tales-snippet .number::before { left: 50%; position: absolute; top: 11px; background-color: #beb57e; height: 1px; margin: 0 0 0 -60px; width: 30px; } .master-chh .tales-snippet .number::before { background-color: #6eb9d8; } .master-cth .tales-snippet .number::before { background-color: #f9545f; } .tales-snippet .number::after { left: 50%; position: absolute; top: 11px; background-color: #beb57e; height: 1px; margin: 0 0 0 30px; width: 30px; } .master-chh .tales-snippet .number::after { background-color: #6eb9d8; } .master-cth .tales-snippet .number::after { background-color: #f9545f; } .tales-popin { left: 0; position: absolute; top: 0; background: url("../img/common/pattern.png") left top repeat; height: 100vh; opacity: 0; pointer-events: none; position: fixed; right: 0; -webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 149; } .ie10 .tales-popin, .ie9 .tales-popin, .ie11 .tales-popin { display: none; } .tales-popin::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 60; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-popin::before { left: 15px; right: 15px; } } .tales-popin .btn-close { position: absolute; right: 30px; top: 72px; background-color: #FFF; color: #000; font-size: 20px; height: 42px; line-height: 20px; width: 42px; z-index: 5; } .tales-popin .btn-close::before { content: ""; } .tales-popin .btn-close:hover { color: #937d2f; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-popin .btn-close { right: 15px; top: 72px; } } .tales--isOpened .tales-popin { pointer-events: auto; opacity: 1; } .tales--isOpened.ie10 .tales-popin, .tales--isOpened.ie9 .tales-popin { display: block; } .tales-slideshow { left: 30px; position: absolute; top: 30px; bottom: 30px; overflow: hidden; right: 30px; } .tales-slideshow__collection { height: 100%; position: relative; width: 100%; } .tales-slideshow__slide { left: 0; position: absolute; top: 0; height: 100%; width: 100%; } .tales-slideshow__slide .btn-cta1 { display: block; margin: 50px auto 0; padding: 5px 50px; pointer-events: none; width: 50px; } .tales--isOpened .tales-slideshow__slide .btn-cta1 { pointer-events: auto; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__slide .btn-cta1 { margin: 10px auto 0; } } .tales-slideshow__slide .center-context { text-align: center; width: 68%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__slide .center-context { height: 80vh; padding: 0 0 20px; overflow: scroll; width: 90%; -webkit-overflow-scrolling: touch; } } .tales-slideshow__slide .description { margin: 20px 0; } .tales-slideshow__slide .h4 { font-size: 24px; font-size: 1.5rem; } .tales-slideshow__slide .number { font-size: 16px; font-size: 1rem; position: relative; } .tales-slideshow__slide .number::before { left: 50%; position: absolute; top: 11px; background-color: #beb57e; height: 1px; margin: 0 0 0 -110px; width: 80px; } .tales-slideshow__slide .number::after { left: 50%; position: absolute; top: 11px; background-color: #beb57e; height: 1px; margin: 0 0 0 30px; width: 80px; } .tales-slideshow__slide .social { display: inline-block; margin: 0 auto; } .tales-slideshow__slide .social .button { position: relative; } .tales-slideshow__slide .social .button:nth-child(1)::after { position: absolute; right: -10px; top: 0; background-color: #beb57e; height: 100%; width: 1px; } .tales-slideshow__slide .social .button:last-child { margin: 0; } .tales-slideshow__slide .visual { margin: 30px 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__slide .visual { display: block; margin: 15px auto; width: 50%; } } .tales-slideshow__slide.disabled { visibility: hidden; } .tales-slideshow__slide.enabled { visibility: visible; } .tales-slideshow__controls { left: 50%; position: absolute; top: 0; bottom: 0; display: none; pointer-events: none; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80%; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__controls { width: 100%; } } .tales--isOpened .tales-slideshow__controls { display: block; } .tales-slideshow__controls .btn-previous, .tales-slideshow__controls .btn-next { display: block; height: 50px; margin: -25px 0 0; opacity: 1; position: absolute; pointer-events: auto; top: 50%; -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 50px; } .tales-slideshow__controls .btn-previous::before, .tales-slideshow__controls .btn-next::before { color: #937d2f; display: block; font-size: 60px; position: relative; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 1; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__controls .btn-previous::before, .tales-slideshow__controls .btn-next::before { font-size: 40px; } } .tales-slideshow__controls .btn-previous.is--disabled, .tales-slideshow__controls .btn-next.is--disabled { opacity: 0; } .tales-slideshow__controls .btn-next { left: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__controls .btn-next { left: -14px; } } .tales-slideshow__controls .btn-next::before { content: ""; } .tales-slideshow__controls .btn-next:hover::before { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } .tales-slideshow__controls .btn-previous { right: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .tales-slideshow__controls .btn-previous { right: -14px; } } .tales-slideshow__controls .btn-previous::before { content: ""; } .tales-slideshow__controls .btn-previous:hover::before { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } /* PAGES ========================================================================== */ .layout-accomodation .flow-content { padding: 50px 0 0; } .layout-accomodation .dummy-size { left: 0; position: absolute; top: -1px; position: fixed; pointer-events: none; width: 100vw; } .accomodation-splashscreen { background-color: #000; bottom: 0; left: 0; position: fixed; top: 0; right: 0; z-index: 1; } .ios7 .accomodation-splashscreen { height: 500px; position: relative; } .accomodation-splashscreen::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-splashscreen::before { position: fixed; left: 15px; right: 15px; } } .accomodation-splashscreen .btn-scroll { left: 50%; position: absolute; top: auto; bottom: 60px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 11; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-splashscreen .btn-scroll { bottom: 25px; width: 100%; } } .accomodation-splashscreen .buttons { display: block; font-size: 0; } .accomodation-splashscreen .buttons .button { background: rgba(255, 255, 255, 0); -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.3); color: #FFF; display: inline-block; font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; margin: 0 10px; padding: 7px 15px; text-transform: uppercase; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .accomodation-splashscreen .buttons .button:hover { background: white; color: #000; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-splashscreen .buttons .button { margin-bottom: 15px; } } .accomodation-splashscreen .buttons .btn-reset { display: block; margin: 15px 0 0; } .accomodation-splashscreen .background { opacity: 0; -webkit-transition: opacity 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 600ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 1; } .accomodation-splashscreen .background.is--active { opacity: 1; } .accomodation-splashscreen .fill { left: 0; position: absolute; top: 0; background-color: #000; bottom: 0; opacity: 0; pointer-events: none; right: 0; z-index: 9999; } .accomodation-splashscreen .framer { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-splashscreen .framer { padding: 0 50px; } } .landscape.mobile .accomodation-splashscreen .framer { padding: 0 70px; } .accomodation-splashscreen .framer .h1 { font-size: 42px; font-size: 2.625rem; margin: 15px 0 25px; } .accomodation-splashscreen .framer .h1 strong { border-bottom: 1px solid #FFF; font-weight: 300; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-splashscreen .framer .h1 { font-size: 30px; font-size: 1.875rem; } } .accomodation-splashscreen .framer .subtitle { font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; opacity: .6; } .accomodation-splashscreen .framer .step { display: none; } .accomodation-splashscreen .framer .step.is--active { display: block; } .accomodation-collection { margin: 0 0 0; position: relative; width: 100%; } .accomodation-collection .grid { margin: 0 -20px; padding: 0; } .accomodation-collection .grid__cell { padding: 0 20px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-collection .grid__cell { width: 100%; } } .accomodation-collection__item { margin: 0 0 20px; position: relative; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .accomodation-collection__item { margin: 0 0 20px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .accomodation-collection__item { margin: 0 0 20px; } } .accomodation-collection__item .ov-h { padding: 50px 0; text-align: center; } .accomodation-collection__item .ov-h .buttons { display: block; font-size: 0; margin: 10px 0; } .accomodation-collection__item .ov-h .buttons .button { color: #6eb9d8; display: inline-block; font-size: 12px; font-size: 0.75rem; letter-spacing: 1px; padding: 0 10px 0 5px; text-transform: uppercase; } .accomodation-collection__item .ov-h .buttons .button::after { background-color: #d1d1d1; height: 13px; display: inline-block; margin: 0 0 0 13px; position: relative; top: 2px; width: 1px; } .accomodation-collection__item .ov-h .buttons .button:hover { color: #3f93b5; } .accomodation-collection__item .ov-h .buttons .button:last-child::after { display: none; } .accomodation-collection__item .visual { display: block; -webkit-transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); will-change: transform; width: 100%; } .accomodation-collection__item:hover .visual { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .standard-newsletter { position: relative; width: 100%; } .standard-newsletter::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter::before { left: 15px; right: 15px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; content: " "; display: block; right: 0; z-index: 1; } } .standard-newsletter .bg { z-index: 1; } .standard-newsletter .ov-h { height: 450px; left: 150px; position: relative; width: 45%; z-index: 4; } .standard-newsletter .ov-h .step { display: none; position: relative; } .standard-newsletter .ov-h .step.is--active { display: table-cell; vertical-align: middle; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .standard-newsletter .ov-h { left: 0; margin: 0 auto; width: 80%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .ov-h { left: 0; margin: 0 auto; width: 80%; } } .standard-newsletter .ov-h .h2 { line-height: 1.2; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .ov-h .h2 { font-size: 17px; font-size: 1.0625rem; } .standard-newsletter .ov-h .h2 br { display: none; } } .standard-newsletter .box-select { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; display: none; right: 0; z-index: 5; } .standard-newsletter .box-select .btn-close { left: 370px; position: absolute; top: 40px; color: #FFF; font-size: 18px; z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .box-select .btn-close { left: 240px; top: 280px; } } .standard-newsletter .box-select .btn-close::before { content: ""; } .standard-newsletter .box-select .btn-close .h5 { left: 40px; position: absolute; top: 7px; letter-spacing: 1px; opacity: 1; } .skin--isLight .standard-newsletter .box-select .btn-close .h5 { opacity: 0; } .standard-newsletter .box-select .btn-close:hover { color: #937d2f; } .standard-newsletter .box-select .btn-close:hover .h5 { color: #937d2f; } .standard-newsletter .box-select .field__select { left: 150px; position: absolute; top: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0px none; bottom: 30px; display: block; background-color: #FFF; color: rgba(0, 0, 0, 0.4); font-size: 18px; padding: 10px; width: 200px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .box-select .field__select { bottom: auto; left: 30px; top: 270px; } } .standard-newsletter .box-select.is--active { display: block; } .standard-newsletter .newsletter__form { display: table; height: 450px; } .standard-newsletter .context-form { margin: 30px 0 0; } .standard-newsletter .step-1 .cell { position: relative; } .standard-newsletter .step-1 .cell:nth-child(2) { margin: 15px 0 0; } .standard-newsletter .step-1 .field__text { width: -webkit-calc(100% - 115px); width: calc(100% - 115px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .step-1 .field__text { font-size: 14px; } } .standard-newsletter .step-1 .field__validation { position: absolute; right: 0; top: auto; bottom: 0px; } .standard-newsletter .step-2 .description { margin: 20px 0 0; opacity: .8; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .step-2 .description { font-size: 14px; font-size: 0.875rem; } } .standard-newsletter .step-2 .grid { margin: 0 -15px; } .standard-newsletter .step-2 .grid .grid__cell { margin-bottom: 20px; padding: 0 15px; position: relative; } .standard-newsletter .step-2 .field__validation { display: inline-block; position: relative; } .layout-boilerplate .flow-content { margin: 0 0 0; padding: 0; } .layout-boilerplate .contextual { display: none; } .layout-boilerplate .offer { margin: 50px 0 0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .layout-boilerplate .offer { margin: 50px auto 0; width: 50%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-boilerplate .offer { margin: 0 auto 0; width: 250px; } } .boilerplate-splashscreen { background-color: #000; height: 60vh; left: 0; position: fixed; top: 0; right: 0; z-index: 1; } .ios7 .boilerplate-splashscreen { height: 500px; position: relative; } .boilerplate-splashscreen::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: -1px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } .master-chh .boilerplate-splashscreen::before { border-color: #d1d1d1; opacity: 1; } .master-cth .boilerplate-splashscreen::before { opacity: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .boilerplate-splashscreen::before { position: fixed; left: 15px; right: 15px; } } .boilerplate-splashscreen .background { z-index: 1; } .boilerplate-splashscreen .fill { left: 0; position: absolute; top: 0; background-color: #000; bottom: 0; opacity: 0; pointer-events: none; right: 0; z-index: 9999; } .boilerplate-introduction { background: url("../img/common/pattern.png") left top repeat; margin: 60vh 0 0; position: relative; z-index: 10; } .master-chh .boilerplate-introduction { background: #FFF; } .master-cth .boilerplate-introduction { background: #FFF; } .ios7 .boilerplate-introduction { margin: 0; } .boilerplate-introduction .ov-h { border-box: box-sizing; overflow: visible !important; padding: 0 0 5px 100px; position: relative; top: -100px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .boilerplate-introduction .ov-h { padding: 0 0 5px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .boilerplate-introduction .ov-h { padding: 0 0; } } .boilerplate-introduction .cell { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; float: left; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .boilerplate-introduction .cell { float: none; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .boilerplate-introduction .cell { float: none; } } .boilerplate-introduction .cell:nth-child(1) { background: url("../img/common/pattern.png") left top repeat; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 35px 50px 50px 50px; position: relative; width: 65%; } .master-chh .boilerplate-introduction .cell:nth-child(1) { background: #FFF; } .master-cth .boilerplate-introduction .cell:nth-child(1) { background: #FFF; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .boilerplate-introduction .cell:nth-child(1) { padding: 50px 50px 50px 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .boilerplate-introduction .cell:nth-child(1) { padding: 30px; width: 100%; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .boilerplate-introduction .cell:nth-child(1) { width: 100%; } } .boilerplate-introduction .cell .h2 { padding: 0 0 45px; } .boilerplate-introduction .cell:nth-child(2) { padding: 150px 0 0; text-align: center; width: 35%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .boilerplate-introduction .cell:nth-child(2) { display: block; padding: 0; width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .boilerplate-introduction .cell:nth-child(2) { display: block; padding: 0; width: 100%; } } .boilerplate-introduction .cell:nth-child(2) .tales-snippet { margin: 0 auto; width: 180px; } .enquiry-form { display: block; width: 100%; } .enquiry-form p { margin: 0; } .enquiry-form .caret { color: #000; font-size: 14px; font-size: 0.875rem; opacity: .8; } .enquiry-form .grid__cell.unit-1-1 { margin-bottom: 35px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .enquiry-form .grid__cell.unit-1-2, .enquiry-form .grid__cell.unit-2-4, .enquiry-form .grid__cell.unit-5-10, .enquiry-form .grid__cell.unit-10-20, .enquiry-form .grid__cell.unit-1-4, .enquiry-form .grid__cell.unit-5-20 { margin-bottom: 10px; width: 100%; } } .enquiry-form .field__radio + label a { color: inherit; text-decoration: underline; } .enquiry-form .field__radio + label .text { display: inline-block; vertical-align: top; } .enquiry-form .field__radio:not(:checked), .enquiry-form .field__radio:checked { left: -9999px; position: absolute; } .enquiry-form .field__radio:not(:checked) + label, .enquiry-form .field__radio:checked + label { cursor: pointer; font-size: 18px; font-size: 1.125rem; margin: 0; padding-left: 30px; position: relative; } .enquiry-form .field__radio:not(:checked) + label { color: #252525; } .enquiry-form .field__radio:not(:checked) + label::before, .enquiry-form .field__radio:checked + label::before { left: 0; position: absolute; top: 0; background-color: #e7e7e7; border: 1px solid #beb57e; -webkit-border-radius: 100%; border-radius: 100%; content: ''; height: 18px; width: 18px; } .master-chh .enquiry-form .field__radio:not(:checked) + label::before, .master-chh .enquiry-form .field__radio:checked + label::before { border: 1px solid #6eb9d8; } .master-cth .enquiry-form .field__radio:not(:checked) + label::before, .master-cth .enquiry-form .field__radio:checked + label::before { border: 1px solid #f9545f; } .enquiry-form .field__radio:not(:checked) + label::after, .enquiry-form .field__radio:checked + label::after { left: 2px; position: absolute; top: 2px; -webkit-border-radius: 100%; border-radius: 100%; border: 1px solid transparent; background: #beb57e; content: ''; color: #FFF; height: 14px; width: 14px; -webkit-transition: all 200ms; transition: all 200ms; } .master-chh .enquiry-form .field__radio:not(:checked) + label::after, .master-chh .enquiry-form .field__radio:checked + label::after { background: #6eb9d8; } .master-cth .enquiry-form .field__radio:not(:checked) + label::after, .master-cth .enquiry-form .field__radio:checked + label::after { background: #f9545f; } .enquiry-form .field__radio:not(:checked) + label::after { opacity: 0; filter: alpha(opacity=0); } .enquiry-form .field__radio:checked + label::after { opacity: 1; filter: alpha(opacity=100); } .enquiry-form .field__radio:checked + label { color: #252525; } .enquiry-form .field__check + label a { color: inherit; text-decoration: underline; } .enquiry-form .field__check + label .text { display: inline-block; vertical-align: top; } .enquiry-form .field__check:not(:checked), .enquiry-form .field__check:checked { left: -9999px; position: absolute; } .enquiry-form .field__check:not(:checked) + label, .enquiry-form .field__check:checked + label { cursor: pointer; font-size: 18px; font-size: 1.125rem; margin: 0; padding-left: 30px; position: relative; } .enquiry-form .field__check:not(:checked) + label { color: #252525; } .enquiry-form .field__check:not(:checked) + label::before, .enquiry-form .field__check:checked + label::before { left: 0; position: absolute; top: 0; background-color: #e7e7e7; border: 1px solid #beb57e; -webkit-border-radius: 1px; border-radius: 1px; content: ''; height: 18px; width: 18px; } .master-chh .enquiry-form .field__check:not(:checked) + label::before, .master-chh .enquiry-form .field__check:checked + label::before { border-color: #6eb9d8; } .master-cth .enquiry-form .field__check:not(:checked) + label::before, .master-cth .enquiry-form .field__check:checked + label::before { border-color: #f9545f; } .enquiry-form .field__check:not(:checked) + label::after, .enquiry-form .field__check:checked + label::after { left: 2px; position: absolute; top: 2px; border: 1px solid transparent; background: #beb57e; content: ''; color: #FFF; height: 14px; width: 14px; -webkit-transition: all 200ms; transition: all 200ms; } .master-chh .enquiry-form .field__check:not(:checked) + label::after, .master-chh .enquiry-form .field__check:checked + label::after { background: #6eb9d8; } .master-cth .enquiry-form .field__check:not(:checked) + label::after, .master-cth .enquiry-form .field__check:checked + label::after { background: #f9545f; } .enquiry-form .field__check:not(:checked) + label::after { opacity: 0; filter: alpha(opacity=0); } .enquiry-form .field__check:checked + label::after { opacity: 1; filter: alpha(opacity=100); } .enquiry-form .field__check:checked + label { color: #252525; } .enquiry-form .field__section { color: #937d2f; font-size: 20px; font-size: 1.25rem; } .master-chh .enquiry-form .field__section { color: #6eb9d8; } .master-cth .enquiry-form .field__section { color: #f9545f; } .enquiry-form .field__libel { color: #252525; display: inline-block; font-size: 18px; font-size: 1.125rem; vertical-align: middle; width: 100px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .enquiry-form .field__libel { margin: 0 0 5px; width: 100%; } } .enquiry-form .field__text { background-color: #e7e7e7; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #beb57e; color: #252525; display: inline-block; font-size: 18px; font-size: 1.125rem; padding: 12px 10px; position: relative; width: -webkit-calc(100% - 120px); width: calc(100% - 120px); } .master-chh .enquiry-form .field__text { border-color: #6eb9d8; } .master-cth .enquiry-form .field__text { border-color: #f9545f; } .enquiry-form .field__text::-webkit-input-placeholder { color: rgba(37, 37, 37, 0.5); } .enquiry-form .field__text::-moz-placeholder { color: rgba(37, 37, 37, 0.5); } .enquiry-form .field__text:-ms-input-placeholder { color: rgba(37, 37, 37, 0.5); } .enquiry-form .field__text::placeholder { color: rgba(37, 37, 37, 0.5); } .enquiry-form .field__text.full--width { width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .enquiry-form .field__text { width: 100%; } } .enquiry-form .field__validation { background: rgba(147, 125, 47, 0); -webkit-border-radius: 0px; border-radius: 0px; border: 3px solid #937d2f; color: #937d2f; display: block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; padding: 10px 35px; text-transform: uppercase; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .master-chh .enquiry-form .field__validation { background: rgba(63, 147, 181, 0); border-color: #3f93b5; color: #3f93b5; } .master-cth .enquiry-form .field__validation { background: rgba(133, 47, 53, 0); border-color: #852f35; color: #852f35; } .enquiry-form .field__validation:hover { background: #937d2f; color: white; } .master-chh .enquiry-form .field__validation:hover { background: #3f93b5; } .master-cth .enquiry-form .field__validation:hover { background: #852f35; } .enquiry-form label.error { color: #BE0013; font-size: 12px; font-size: 0.75rem; display: block; margin: 10px 20px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .enquiry-form label.error { margin: 10px 0 0 0; } } .enquiry-form .for--field__text label.error { float: right; } .enquiry-form .field__text.error { border-color: #BE0013; } .enquiry-form .field__radio.error:not(:checked) + label::before, .enquiry-form .field__radio.error:checked + label::before, .enquiry-form .field__check.error:not(:checked) + label::before, .enquiry-form .field__check.error:checked + label::before { border-color: #BE0013; } .enquiry-form .for--date { margin: 0 -5px; } .enquiry-form .for--date .grid__cell { padding: 0 5px; } .enquiry-form .for--date .field__text { text-align: center; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-home { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-home .btn-play { /*display: none;*/ } } .layout-home .btn-scroll { left: 50%; position: absolute; top: auto; bottom: 60px; opacity: 1; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } .layout-home .btn-scroll.is--hidden { opacity: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-home .btn-scroll { display: none; } } .layout-home .dummy { position: relative !important; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-home .dummy { height: 100%; } } .layout-home .logo-cth { left: 50%; position: absolute; top: 150px; margin: 0 0 0 -75px; width: 150px; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-home .logo-cth { display: none; } } .home-slideshow { left: 0; position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; } .home-posters { left: 0; position: absolute; top: 0; height: 100%; width: 100%; z-index: 0; } .home-posters .bg { background-color: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100%; opacity: 0; visibility: hidden; width: 100%; z-index: 0; } .home-posters .bg.is--playing { opacity: 1; visibility: visible; } .home-posters .bg.is--next { opacity: 1; visibility: visible; z-index: 1; } .desktop .master-cal .home-posters .bg:nth-child(1) { background-image: none !important; } .home-slideshow__collection { height: 100%; position: relative; width: 100%; z-index: 0; } .home-slideshow__slide { left: 0; position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; } .tablet .home-slideshow__slide .videobg, .mobile .home-slideshow__slide .videobg { display: none; } .home-slideshow__slide:nth-child(1) .framer { height: auto; padding: 0 0 75px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:nth-child(1) .framer { padding: 0; } } .home-slideshow__slide:last-child .brand { height: 50px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide:last-child .brand { height: auto; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .brand { font-size: 12px !important; height: auto; margin: 0 0 5px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .description { margin: 0 !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .grid { margin: 0 25px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide:last-child .grid__cell { padding: 0 15px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .grid__cell { padding: 0 0; width: 100%; } } .landscape.mobile .home-slideshow__slide:last-child .grid__cell { padding: 0 10px; width: 33.33333%; } .home-slideshow__slide:last-child .grid__cell::before { border-top: 1px solid rgba(255, 255, 255, 0.6); margin: 35px 0 25px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .grid__cell::before { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 15px 0 10px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .grid__cell br { display: none; } } .home-slideshow__slide:last-child .buttons { margin: 75px 0 0; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .buttons { display: none; } } .home-slideshow__slide:last-child .buttons .btn-cta1 { display: inline-block; left: 0; margin: 0 20px; position: relative; -webkit-transform: none; -ms-transform: none; transform: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .buttons .btn-cta1 { margin-bottom: 10px; } } .home-slideshow__slide:last-child .buttons-bottom { left: 0; position: absolute; top: auto; bottom: -40px; width: 100%; } .landscape.mobile .home-slideshow__slide:last-child .buttons-bottom { bottom: 0; margin: 30px 0 0; position: relative; } .home-slideshow__slide:last-child .buttons-bottom .button { background-color: #FFF; color: #000; display: inline-block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; margin: 0 20px; padding: 5px; text-transform: uppercase; } .home-slideshow__slide:last-child .framer { height: auto !important; padding: 0 0 0; width: 900px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide:last-child .framer { width: 60vw; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .home-slideshow__slide:last-child .framer { width: 80vw; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .framer { width: 80vw; } } .home-slideshow__slide:last-child .framer .is--long { height: 80px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide:last-child .framer .is--long { height: 120px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide:last-child .framer .is--long { display: none; } } .home-slideshow__slide .framer { height: 35vh; text-align: center; width: 40%; } @media only screen and (max-height: 780px) { .desktop .home-slideshow__slide .framer { height: 40vh; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide .framer { width: 70%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer { width: 75%; } } .home-slideshow__slide .framer .blast { display: inline-block; position: relative; } .home-slideshow__slide .framer .btn-cta1 { left: 50%; position: absolute; top: auto; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide .framer .btn-cta1 { left: 0; margin: 15px 0 0; position: relative; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer .btn-cta1 { left: 0; margin: 0 0 0; position: relative; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .home-slideshow__slide .framer .btn-play { margin: 0 auto; opacity: .6; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .home-slideshow__slide .framer .btn-play { margin: 0 auto 10px; } } .home-slideshow__slide .framer .description { font-size: 16px; font-size: 1rem; margin: 5px 0 20px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer .description { font-size: 15px; font-size: 0.9375rem; } } .home-slideshow__slide .framer .h5 { display: inline-block; position: relative; } .home-slideshow__slide .framer .h5::after { background-color: rgba(255, 255, 255, 0.5); height: 1px; margin: 35px auto; width: 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer .h5::after { margin: 15px auto; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer .h5 { display: none; } } .home-slideshow__slide .framer .logo { display: block; margin: 0 auto; width: 150px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-slideshow__slide .framer .logo { display: none; } } .home-slideshow__slide.disabled { visibility: hidden; } .home-slideshow__slide.enabled { visibility: visible; } @media only screen and (max-height: 780px) { .desktop .home-slideshow__slide:nth-child(1) .framer .h5::after { margin: 15px auto; } .desktop .home-slideshow__slide:nth-child(1) .framer .logo { width: 130px; } } .home-triggers { position: absolute; right: 31px; top: 50%; overflow: hidden; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); width: 25px; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-triggers { right: 15px; } } .home-triggers .trigger { display: block; height: 4px; margin: 0 0 10px; position: relative; width: 100%; } .home-triggers .trigger::before { position: absolute; right: 0; top: 50%; background-color: rgba(255, 255, 255, 0.5); height: 1px; margin-top: -.5px; -webkit-transition: right 400ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: right 400ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 10px; } .home-triggers .trigger::after { position: absolute; right: -20px; top: 50%; background-color: #FFF; height: 4px; margin-top: -2px; -webkit-transition: right 400ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: right 400ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 20px; } .home-triggers .trigger.is--active::before { right: -10px; } .home-triggers .trigger.is--active::after { right: 0; } .home-triggers .trigger:last-child { margin: 0; } .home-quickaccess { left: 50%; position: absolute; top: auto; bottom: 70px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-quickaccess { bottom: 20px; width: 80%; } } .home-quickaccess .description { font-size: 13px; font-size: 0.8125rem; } .home-quickaccess .title { color: rgba(255, 255, 255, 0.6); font-size: 40px; font-size: 2.5rem; line-height: 1.2; margin: 0 0 15px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .home-quickaccess .title { font-size: 25px; font-size: 1.5625rem; } } .home-quickaccess .title a { color: white; font-style: italic; opacity: 1; position: relative; } .home-quickaccess .title a::after { left: 0; position: absolute; top: auto; background: rgba(255, 255, 255, 0.5); bottom: 0; height: 2px; width: 100%; } .home-quickaccess .title a:hover::after { background: white; } .layout-gateway { left: 0; position: absolute; top: 0; height: 100vh; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .layout-gateway { bottom: 0; height: auto; position: fixed; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-gateway { bottom: 0; height: auto; position: relative; } } .layout-gateway .background { z-index: 0; } .layout-gateway .foreground { pointer-events: none; z-index: 9999; } .ie10 .layout-gateway .foreground, .ie9 .layout-gateway .foreground, .ie11 .layout-gateway .foreground { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-gateway .foreground { display: none; } } .layout-gateway .btn-scroll { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-gateway .btn-scroll { display: block; margin: 0 auto; position: relative; top: 35px; } } .gateway-snippet { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; height: 50%; padding: 30px 30px 0; position: relative; width: 100%; z-index: 9999; } .ie10 .gateway-snippet, .ie9 .gateway-snippet, .ie11 .gateway-snippet { display: block; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-snippet { display: block; height: 100vh; } } .ios7 .gateway-snippet { height: 500px; } .gateway-snippet .framer { display: table-cell; position: relative; margin: 0 auto; padding: 0 0 30px; text-align: center; vertical-align: bottom; } .ie10 .gateway-snippet .framer, .ie9 .gateway-snippet .framer, .ie11 .gateway-snippet .framer { display: block; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-snippet .framer { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-snippet .framer .h3 { font-size: 22px; font-size: 1.375rem; } } .gateway-snippet .framer .description { margin: 5px auto 20px; width: 40%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .gateway-snippet .framer .description { font-size: 16px; font-size: 1rem; width: 60%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-snippet .framer .description { font-size: 16px; font-size: 1rem; width: 80%; } } .gateway-snippet .framer .btn-play { margin: 0 auto; } .gateway-snippet .framer .h5 { display: inline-block; } .gateway-snippet .framer .h5::after { background-color: rgba(255, 255, 255, 0.5); height: 1px; margin: 35px auto; width: 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-snippet .framer .h5::after { margin: 15px auto; } } .gateway-slideshow { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; height: 50%; padding: 0 30px 30px; position: relative; width: 100%; z-index: 3; } .ie10 .gateway-slideshow, .ie9 .gateway-slideshow, .ie11 .gateway-slideshow { display: block; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow { display: block; height: auto; padding: 0 0 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; content: " "; display: block; right: 0; z-index: 0; } } .gateway-slideshow__collection { border-top: 1px solid rgba(255, 255, 255, 0.3); display: table; height: 100%; width: 100%; } .gateway-slideshow__item { display: table-cell; height: 100%; letter-spacing: 0; overflow: hidden; padding: 0 0 0; position: relative; width: 33.33333%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item { display: block; padding: 50px 50px 100px; width: 100%; } } .gateway-slideshow__item .fill { left: 0; position: absolute; top: 0; background-color: rgba(255, 255, 255, 0.9); height: 100%; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); width: 100%; will-change: transform; z-index: -1; } .ie10 .gateway-slideshow__item .fill, .ie9 .gateway-slideshow__item .fill, .ie11 .gateway-slideshow__item .fill { display: none; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .gateway-slideshow__item .fill { -webkit-transition: none 0s !important; transition: none 0s !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .fill { display: none; } } .gateway-slideshow__item .bg { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .bg { display: block; z-index: -1; } } .gateway-slideshow__item .framer { left: 50px; position: absolute; top: auto; bottom: 50px; display: block; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1); right: 50px; z-index: 1; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .framer { -webkit-box-sizing: border-box; box-sizing: border-box; bottom: 0; left: 0; padding: 30px 0 0; position: relative; right: 0; } } .gateway-slideshow__item .framer .button { color: #FFF; font-size: 10px; font-size: 0.625rem; display: inline; letter-spacing: 2px; margin: 0 0 0 55px; padding: 0 0 3px; position: relative; text-transform: uppercase; -webkit-transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .gateway-slideshow__item .framer .button { margin: 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .framer .button { margin: 0; } } .gateway-slideshow__item .framer .button::after { left: 0; position: absolute; top: 13px; background-color: white; height: 1px; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; z-index: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .framer .button { color: #beb57e; } .gateway-slideshow__item .framer .button::after { background-color: #beb57e; } .master-chh .gateway-slideshow__item .framer .button::after { background-color: #6eb9d8; } .master-cth .gateway-slideshow__item .framer .button::after { background-color: #f9545f; } } .gateway-slideshow__item .framer .h35, .gateway-slideshow__item .framer .description { -webkit-transition: color 400ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 400ms cubic-bezier(0.215, 0.61, 0.355, 1); } .gateway-slideshow__item .framer .description { font-size: 16px; font-size: 1rem; margin: 30px 0; padding: 0 0 0 55px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .gateway-slideshow__item .framer .description { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100px; overflow: hidden; padding: 0 30px 0 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .framer .description { -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; margin: 10px 0; padding: 0; } } .gateway-slideshow__item .framer .description::before { left: -55px; position: absolute; top: 12px; background-color: rgba(255, 255, 255, 0.5); display: block; height: 1px; position: relative; -webkit-transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 35px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item .framer .description::before { display: none; } } .gateway-slideshow__item:nth-child(2)::before, .gateway-slideshow__item:nth-child(2)::after { left: 0; position: absolute; top: 0; background-color: #FFF; height: 100%; opacity: .3; width: 1px; } .ie10 .gateway-slideshow__item:nth-child(2)::before, .ie9 .gateway-slideshow__item:nth-child(2)::before, .ie11 .gateway-slideshow__item:nth-child(2)::before, .ie10 .gateway-slideshow__item:nth-child(2)::after, .ie9 .gateway-slideshow__item:nth-child(2)::after, .ie11 .gateway-slideshow__item:nth-child(2)::after { height: 1000px; } .gateway-slideshow__item:nth-child(2)::after { left: auto; right: 0; } .gateway-slideshow__item:hover .button { color: #937d2f; } .master-chh .gateway-slideshow__item:hover .button { color: #3f93b5; } .master-cth .gateway-slideshow__item:hover .button { color: #852f35; } .gateway-slideshow__item:hover .button::after { background-color: rgba(147, 125, 47, 0.7); } .master-chh .gateway-slideshow__item:hover .button::after { background-color: rgba(63, 147, 181, 0.7); } .master-cth .gateway-slideshow__item:hover .button::after { background-color: rgba(133, 47, 53, 0.7); } .gateway-slideshow__item:hover .h35, .gateway-slideshow__item:hover .description { color: #000; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .gateway-slideshow__item:hover .h35, .gateway-slideshow__item:hover .description { color: #FFF; } } .gateway-slideshow__item:hover .description { opacity: 1; } .gateway-slideshow__item:hover .description::before { background-color: black; } .gateway-slideshow__item:hover .framer { cursor: pointer; } .desktop .gateway-slideshow__item:hover .framer { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .gateway-slideshow__item:hover .fill { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .ie10 .gateway-slideshow__item:hover .fill, .ie9 .gateway-slideshow__item:hover .fill, .ie11 .gateway-slideshow__item:hover .fill { display: block; } .gateway-posters { left: 0; position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; } .gateway-posters .poster { opacity: 0; will-change: opacity; } .layout-standard .tales-snippet { margin: 0 0 40px; } .layout-standard .dummy-size { left: 0; position: absolute; top: -1px; position: fixed; pointer-events: none; width: 100vw; } .standard-splashscreen { background-color: #000; bottom: 0; left: 0; position: fixed; top: 0; right: 0; z-index: 1; } .ios7 .standard-splashscreen { height: 500px; position: relative; } .standard-splashscreen::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } .master-cth .standard-splashscreen::before { opacity: 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen::before { position: fixed; left: 15px; right: 15px; } } .standard-splashscreen .btn-scroll { left: 50%; position: absolute; top: auto; bottom: 60px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 11; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .btn-scroll { bottom: 25px; width: 100%; } } .standard-splashscreen .buttons { margin-left: 60px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .buttons { margin-left: 0px; } } .standard-splashscreen .buttons .btn-cta1 { margin-right: 10px; margin-bottom: 10px; } .standard-splashscreen .background { z-index: 1; } .standard-splashscreen .fill { left: 0; position: absolute; top: 0; background-color: #000; bottom: 0; opacity: 0; pointer-events: none; right: 0; z-index: 9999; } .standard-splashscreen .foreground { pointer-events: none; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .foreground { display: none; } } .standard-splashscreen .foreground.for--wedding { background-position: 0 0; left: -5px; } .standard-splashscreen .framer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 100px; width: 99%; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .framer { padding: 0 50px; } } .landscape.mobile .standard-splashscreen .framer { padding: 0 70px; } .standard-splashscreen .framer .description { margin: 50px 0 30px 60px; width: 40%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .framer .description { font-size: 15px; font-size: 0.9375rem; margin: 10px 0 20px 0; width: 100%; } } .standard-splashscreen .framer .h5 { display: block; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .framer .h5 { display: none; } } .standard-splashscreen .framer .h5::after { border-top: 1px solid rgba(255, 255, 255, 0.5); height: 1px; margin: 35px 0; width: 50px; } @media only screen and (max-height: 780px) { .desktop .standard-splashscreen .framer .h5::after { margin: 10px 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-splashscreen .framer .h5::after { margin: 10px 0; } } .standard-introduction { margin: 0 0 200px; position: relative; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-introduction { margin: 0 0 80px; z-index: 10; } } .standard-introduction .ov-h { left: 100px; position: absolute; top: auto; background: url("../img/common/pattern.png") left top repeat; border-box: box-sizing; bottom: -100px; padding: 50px 50px 5px; right: 100px; } .master-chh .standard-introduction .ov-h { background: #FFF; } .master-cth .standard-introduction .ov-h { background: #FFF; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .standard-introduction .ov-h { left: 50px; right: 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-introduction .ov-h { bottom: 0; left: 0; padding: 0; position: relative; right: 0; } } .standard-introduction .ov-h .cell { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; float: left; width: 50%; } .standard-introduction .ov-h .cell:nth-child(1) { padding-right: 25px; } .standard-introduction .ov-h .cell:nth-child(2) { padding-left: 25px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-introduction .ov-h .cell:nth-child(2) { margin: 25px 0 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-introduction .ov-h .cell { float: none; padding: 0 !important; width: 100%; } } .standard-introduction .visual { display: block; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-introduction .visual { margin: 0 0 25px; } } .standard-collection { margin: 0 0 0; position: relative; width: 100%; } .standard-collection .grid { margin: 0 -50px; padding: 0; } .standard-collection .grid__cell { padding: 0 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-collection .grid__cell { width: 100%; } } .standard-collection__item { margin: 0 0 200px; position: relative; width: 100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .standard-collection__item { margin: 0 0 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-collection__item { margin: 0 0 50px; } } .standard-collection__item .ov-h { left: -1px; position: absolute; top: auto; background: url("../img/common/pattern.png") left top repeat; border-box: box-sizing; bottom: -100px; padding: 30px 30px 5px 1px; right: 100px; } .master-chh .standard-collection__item .ov-h { background: #FFF; } .master-cth .standard-collection__item .ov-h { background: #FFF; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .standard-collection__item .ov-h { bottom: 0; position: relative; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-collection__item .ov-h { bottom: 0; position: relative; } } .standard-collection__item .ov-h .btn-cta3 { margin: 0 0 0 10px; } .standard-collection__item .ov-h .description { font-size: 16px; font-size: 1rem; margin: 20px 0 0 10px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .standard-collection__item .ov-h .description { font-size: 14px; font-size: 0.875rem; } } .standard-collection__item .visual { display: block; -webkit-transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); will-change: transform; width: 100%; } .standard-collection__item:hover .visual { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .standard-newsletter { position: relative; width: 100%; } .standard-newsletter::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter::before { left: 15px; right: 15px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; content: " "; display: block; right: 0; z-index: 1; } } .standard-newsletter .bg { z-index: 1; } .standard-newsletter .ov-h { height: 450px; left: 150px; position: relative; width: 45%; z-index: 4; } .standard-newsletter .ov-h .step { display: none; position: relative; } .standard-newsletter .ov-h .step.is--active { display: table-cell; vertical-align: middle; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .standard-newsletter .ov-h { left: 0; margin: 0 auto; width: 80%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .ov-h { left: 0; margin: 0 auto; width: 80%; } } .standard-newsletter .ov-h .h2 { line-height: 1.2; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .ov-h .h2 { font-size: 17px; font-size: 1.0625rem; } .standard-newsletter .ov-h .h2 br { display: none; } } .standard-newsletter .box-select { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); bottom: 0; display: none; right: 0; z-index: 5; } .standard-newsletter .box-select .btn-close { left: 370px; position: absolute; top: 40px; color: #FFF; font-size: 18px; z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .box-select .btn-close { left: 240px; top: 280px; } } .standard-newsletter .box-select .btn-close::before { content: ""; } .standard-newsletter .box-select .btn-close .h5 { left: 40px; position: absolute; top: 7px; letter-spacing: 1px; opacity: 1; } .skin--isLight .standard-newsletter .box-select .btn-close .h5 { opacity: 0; } .standard-newsletter .box-select .btn-close:hover { color: #937d2f; } .standard-newsletter .box-select .btn-close:hover .h5 { color: #937d2f; } .standard-newsletter .box-select .field__select { left: 150px; position: absolute; top: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0px none; bottom: 30px; display: block; background-color: #FFF; color: rgba(0, 0, 0, 0.4); font-size: 18px; padding: 10px; width: 200px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .box-select .field__select { bottom: auto; left: 30px; top: 270px; } } .standard-newsletter .box-select.is--active { display: block; } .standard-newsletter .newsletter__form { display: table; height: 450px; } .standard-newsletter .context-form { margin: 30px 0 0; } .standard-newsletter .step-1 .cell { position: relative; } .standard-newsletter .step-1 .cell:nth-child(2) { margin: 15px 0 0; } .standard-newsletter .step-1 .field__text { width: -webkit-calc(100% - 115px); width: calc(100% - 115px); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .step-1 .field__text { font-size: 14px; } } .standard-newsletter .step-1 .field__validation { position: absolute; right: 0; top: auto; bottom: 0px; } .standard-newsletter .step-2 .description { margin: 20px 0 0; opacity: .8; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .standard-newsletter .step-2 .description { font-size: 14px; font-size: 0.875rem; } } .standard-newsletter .step-2 .grid { margin: 0 -15px; } .standard-newsletter .step-2 .grid .grid__cell { margin-bottom: 20px; padding: 0 15px; position: relative; } .standard-newsletter .step-2 .field__validation { display: inline-block; position: relative; } .article-splashscreen { background-color: #000; bottom: 0; left: 0; position: fixed; top: 0; right: 0; z-index: 1; } .ios7 .article-splashscreen { height: 500px; position: relative; } .article-splashscreen::before { left: 30px; position: absolute; top: 30px; border: 1px solid #FFF; bottom: 30px; right: 30px; opacity: .3; pointer-events: none; -webkit-transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 2; } .master-chh .article-splashscreen::before { border-color: #d1d1d1; opacity: 1; } .master-cth .article-splashscreen::before { display: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen::before { position: fixed; left: 15px; right: 15px; } } .article-splashscreen .btn-cta1 { margin: 40px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .btn-cta1 { margin: 20px 0 0; } } .article-splashscreen .btn-scroll { left: 50%; position: absolute; top: auto; bottom: 60px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 11; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .btn-scroll { bottom: 25px; width: 100%; } } .article-splashscreen .background { z-index: 1; } .article-splashscreen .fill { left: 0; position: absolute; top: 0; background-color: #000; bottom: 0; opacity: 0; pointer-events: none; right: 0; z-index: 9999; } .article-splashscreen .foreground { pointer-events: none; z-index: 10; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .foreground { display: none; } } .article-splashscreen .framer { -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; width: 40%; z-index: 5; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .framer { width: 80%; } } .article-splashscreen .framer .btn-play { margin: 20px auto 25px; opacity: .6; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .framer .btn-play { display: none; } } .article-splashscreen .framer .description { margin: 15px 0 0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-splashscreen .framer .description { font-size: 16px; font-size: 1rem; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .framer .description { font-size: 15px; font-size: 0.9375rem; padding: 0 20px; } } .article-splashscreen .framer .h5 { display: block; } .article-splashscreen .framer .h5::after { border-top: 1px solid rgba(255, 255, 255, 0.5); height: 1px; margin: 35px auto; width: 50px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-splashscreen .framer .h5::after { margin: 10px auto; } } .landscape.mobile .article-splashscreen .framer .h5 { display: none; } .article-introduction { margin: 0 0 50px; position: relative; width: 100%; z-index: 1; } .article-introduction .h2 { margin: 0 0 98px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-introduction .h2 { margin: 0 0 50px; } } .article-introduction .ov-h { border-box: box-sizing; padding: 0 0 5px 100px; position: relative; top: -100px; margin-bottom: -160px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-introduction .ov-h { padding: 0 0 5px 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-introduction .ov-h { padding: 0; top: 0; margin-bottom: 0; } } .article-introduction .ov-h .cell { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; float: left; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-introduction .ov-h .cell { float: none; } } .article-introduction .ov-h .cell:nth-child(1) { -webkit-box-sizing: border-box; box-sizing: border-box; background: url("../img/common/pattern.png") left top repeat; padding: 50px 50px 50px 50px; width: 65%; } .master-chh .article-introduction .ov-h .cell:nth-child(1) { background: #FFF; } .master-cth .article-introduction .ov-h .cell:nth-child(1) { background: #FFF; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-introduction .ov-h .cell:nth-child(1) { padding: 50px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-introduction .ov-h .cell:nth-child(1) { padding: 20px; width: 100%; } } .article-introduction .ov-h .cell:nth-child(2) { padding: 120px 0 0; text-align: center; width: 35%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-introduction .ov-h .cell:nth-child(2) { padding: 120px 0; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-introduction .ov-h .cell:nth-child(2) { padding: 20px; width: 100%; } } .article-introduction .ov-h .cell:nth-child(2) .btn-gallery { margin: 0 0 50px; } .article-introduction .ov-h .cell:nth-child(2) .tales-snippet { margin: 0 auto; width: 180px; } .article-introduction .visual { display: block; width: 100%; } .article-quote { margin: 0 0 100px; position: relative; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quote .grid__cell { display: block; width: 100%; } } .article-quote .author { color: #000; font-size: 21px; font-size: 1.3125rem; } .article-quote .author b { display: block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; width: 70%; } .article-quote .author::before { background-color: rgba(0, 0, 0, 0.3); height: 1px; margin: 25px 70px 20px 0; width: 45px; } .article-quote .flow-framer { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; padding: 0 0 0 140px; table-layout: fixed; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-quote .flow-framer { padding: 0 0 0 100px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quote .flow-framer { padding: 0; } } .article-quote .quote { color: #937d2f; font-size: 32px; font-size: 2rem; line-height: 1.3; } .master-chh .article-quote .quote { color: #3f93b5; } .master-cth .article-quote .quote { color: #f9545f; font-size: 25px; font-size: 1.5625rem; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-quote .quote { font-size: 22px; font-size: 1.375rem; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quote .quote { font-size: 16px; font-size: 1rem; line-height: 1.4; } } .article-quote .visual { display: block; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quote .visual { margin: 0 auto 30px; width: 60%; } } .article-quotetext { left: -120px; letter-spacing: -.31em; margin: 70px 0; position: relative; width: 650px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-quotetext { left: 0; width: 100%; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-quotetext { width: 120%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quotetext { left: 0; margin: 20px 0; width: 100%; } } .article-quotetext .author { color: #000; display: inline-block; font-size: 18px; font-size: 1.125rem; letter-spacing: 0; padding: 10px 0 0; position: relative; vertical-align: top; width: 150px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-quotetext .author { width: 30%; } } .article-quotetext .author b { display: block; font-size: 10px; font-size: 0.625rem; letter-spacing: 2px; margin: 20px 0 0; text-transform: uppercase; width: 70%; } .article-quotetext .quote { color: #937d2f; display: inline-block; font-size: 32px; font-size: 2rem; letter-spacing: 0; line-height: 1.3; position: relative; width: 500px; } .master-chh .article-quotetext .quote { color: #3f93b5; } .master-cth .article-quotetext .quote { color: #f9545f; font-size: 25px; font-size: 1.5625rem; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-quotetext .quote { width: 70%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-quotetext .quote { font-size: 15px; font-size: 0.9375rem; line-height: 1.5; margin: 15px 0 0; width: 100%; } } .article-quotetext .quote::before { left: -30px; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.3); height: 100%; margin: 0; width: 1px; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 800px) and (max-device-width: 1280px), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { .article-quotetext .quote { font-size: 22px; font-size: 1.375rem; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { .article-quotetext .quote { font-size: 18px; font-size: 1.125rem; } } .article-video { height: auto; margin: 0 0 90px; overflow: hidden; width: 100%; } .article-video .bg { height: 70vh; max-height: 700px; } .article-video .bg::after { left: 0; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.6); height: 100%; width: 100%; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-video .bg { height: 300px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-video { margin: 0 0 80px; } } .article-video .btn-close { position: absolute; right: 0; top: 0; background-color: #FFF; color: #000; font-size: 20px; height: 42px; opacity: 0; line-height: 20px; pointer-events: none; width: 42px; z-index: 5; } .article-video .btn-close::before { content: ""; } .article-video .btn-close:hover { color: #937d2f; } .article-video .embed { height: 70vh; max-height: 700px; opacity: 0; position: relative; -webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-video .embed { height: 300px; } } .article-video .features { opacity: 1; text-align: center; } .article-video .features .btn-play { margin: 0 auto; } .article-video .features .h2 { margin: 20px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-video .features .h2 { font-size: 18px; font-size: 1.125rem; } } .article-video .flow-framer { height: 100%; position: relative; } .master-chh .article-video .flow-framer { max-width: 9999px; width: 95%; } .article-video .social { float: right; margin: 30px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-video .social { float: none; margin: 15px auto; width: 140px; } } .article-video.is--playing .btn-close { opacity: 1; pointer-events: auto; } .article-video.is--playing .embed { opacity: 1; filter: alpha(opacity=100); } .article-video.is--playing .features { opacity: 0; filter: alpha(opacity=0); pointer-events: none; } .article-book { margin: 50px 0; position: relative; width: 100%; } .article-book .h45 { font-size: 21px; font-size: 1.3125rem; display: inline-block; margin: 0 20px 0 0; padding: 3px 0 0; vertical-align: top; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-book .h45 { margin: 0 0 15px; } } .landscape.mobile .article-book .h45 { margin: 0 20px 0 0; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .article-book { margin: 20px 0; } } .layout-results .boilerplate-splashscreen { height: 390px; } .layout-results .boilerplate-introduction { margin: 390px 0 0; } .ios7 .layout-results .boilerplate-introduction { margin: 0; } .layout-results .boilerplate-introduction .h2 { padding: 0 0 5px; } .layout-results .boilerplate-introduction .cell:nth-child(1) { padding-right: 80px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-results .boilerplate-introduction .cell:nth-child(1) { padding-right: 30px; } } .layout-results .flow-content { margin: 0 0 0; padding: 0; } .layout-results .offer { margin: 50px 0 0; } .layout-results .search { margin: 50px 0 80px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) { .layout-results .search { margin: 25px 0 40px; } } .iphone .layout-results .search .icon-search { top: 2px; } /*# sourceMappingURL=chh-front.css.map */