/* ------------------------------------------------------------ *\ Vendor \* ------------------------------------------------------------ */ /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(/assets/images/malihu-custom-scrollbar-plugin/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.5)),to(rgba(255,255,255,0))); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)),to(rgba(255,255,255,0))); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); -webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ -webkit-box-shadow: inset 0 0 14px rgba(0,0,0,0.2); box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); -webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } @media(max-width: 640px) { .mCustomScrollBox, .section-map .section__list { max-height: none !important; height: auto !important; } #mCSB_3_scrollbar_vertical { display: none !important; } } /* ---------------------------------------- */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* ------------------------------------------------------------ *\ Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ SCSS Functions \* ------------------------------------------------------------ */ /* example usage*/ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Sprite \* ------------------------------------------------------------ */ * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } template { display: none; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } input[type=text], input[type=button], input[type=tel], input[type=email], input[type=submit], input[type=date], input[type=search], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input::-webkit-input-placeholder { opacity: 1 !important; } input::-moz-placeholder { opacity: 1 !important; } input:-ms-input-placeholder { opacity: 1 !important; } input::-ms-input-placeholder { opacity: 1 !important; } input::placeholder { opacity: 1 !important; } select::-ms-expand { display: none; } select { -webkit-appearance: none; -moz-appearance: none; background-color: transparent; } textarea { border-radius: 0; } input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input::-webkit-input-placeholder { opacity: 1 !important; } input::-moz-placeholder { opacity: 1 !important; } input:-ms-input-placeholder { opacity: 1 !important; } input::-ms-input-placeholder { opacity: 1 !important; } input::placeholder { opacity: 1 !important; } select::-ms-expand { display: none; } select { -webkit-appearance: none; -moz-appearance: none; background-color: transparent; } textarea { border-radius: 0; } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'Walsheim'; src: url("/assets/fonts/GTWalsheimProRegular.woff2?v=2") format("woff2"), url("/assets/fonts/GTWalsheimProRegular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Sofia-Pro'; src: url("/assets/fonts/SofiaPro.woff2") format("woff2"), url("/assets/fonts/SofiaPro.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Walsheim'; src: url("/assets/fonts/GTWalsheimRegular-Oblique.woff2?v=2") format("woff2"), url("/assets/fonts/GTWalsheimRegular-Oblique.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Canvas'; src: url("/assets/fonts/MADECanvas.woff2") format("woff2"), url("/assets/fonts/MADECanvas.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Big-Caslon'; src: url("/assets/fonts/BigCaslon-Medium.woff2") format("woff2"), url("/assets/fonts/BigCaslon-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url("/assets/fonts/Helvetica-Bold.woff2") format("woff2"), url("/assets/fonts/Helvetica-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Walsheim'; src: url("/assets/fonts/GTWalsheimProBold.woff2?v=2") format("woff2"), url("/assets/fonts/GTWalsheimProBold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url("/assets/fonts/Helvetica.woff2") format("woff2"), url("/assets/fonts/Helvetica.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ html { font-size: 10px; } body { min-width: 320px; background: #fff; font-family: Walsheim, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.2; color: #626161; } body.modal-open { overflow: hidden; } body.static { height: 100%; overflow: hidden; } a { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { margin-bottom: calc(1.2em / 2); } .h1, h1 { font-size: 7.8rem; font-family: Canvas, sans-serif; font-weight: 400; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .h1, h1 { font-size: 5.6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .h1, h1 { font-size: 4.4rem; } } .h2, h2 { font-size: 4.9rem; font-family: Canvas, sans-serif; font-weight: 400; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .h2, h2 { font-size: 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .h2, h2 { font-size: 3.3rem; } } .h3, h3 { font-size: 2.2rem; font-family: Big-Caslon, sans-serif; font-weight: 500; /* Tablet */ } @media (max-width: 1023px) { .h3, h3 { font-size: 2.8rem; } } .h4, h4 { font-size: 3.0rem; font-family: Big-Caslon, sans-serif; font-weight: 500; /* Tablet */ } @media (max-width: 1023px) { .h4, h4 { font-size: 2.4rem; } } .h5, h5 { font-size: 2.4rem; font-family: Big-Caslon, sans-serif; font-weight: 500; /* Tablet */ } @media (max-width: 1023px) { .h5, h5 { font-size: 2rem; } } .h6, h6 { font-size: 1.6rem; } p, ul, ol, dl, hr, table, blockquote { margin-bottom: 1.2em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } p { letter-spacing: .045rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { p { line-height: 1.5 !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { p { line-height: 1.68 !important; } } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* sr-only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 767.02px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1023.02px) and (max-width: 1199px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1199.02px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ Lines \* ------------------------------------------------------------ */ .step-line { position: absolute; overflow: hidden; } .step-line-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #EAEAEA; } /* ------------------------------------------------------------ *\ Components \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Article timeline \* ------------------------------------------------------------ */ .article-timeline.active .article__year span { color: #DDBD78; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .step-line { display: none; } } .article-timeline .article__inner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; z-index: 1; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__inner { display: block; } } .article-timeline .article__year { text-align: center; padding: 5.5rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; z-index: 10; } @media (max-width: 1880px) { .article-timeline .article__year { padding: 5rem .5rem; } } @media (max-width: 1399px) { .article-timeline .article__year { padding: 3rem 0; } } @media (max-width: 1023px) { .article-timeline .article__year p { font-size: 13px; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__year { position: static; padding: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); text-align: left; margin: 0 0 20px; } } .article-timeline .article__year--right { right: -13.1rem; } @media (max-width: 1880px) { .article-timeline .article__year--right { right: -9rem; } } @media (max-width: 1399px) { .article-timeline .article__year--right { right: -7rem; } } @media (max-width: 1199px) { .article-timeline .article__year--right { right: -6rem; } } @media (max-width: 1023px) { .article-timeline .article__year--right { right: -3rem; } } .article-timeline .article__year--left { left: -13.1rem; } @media (max-width: 1880px) { .article-timeline .article__year--left { left: -9rem; } } @media (max-width: 1399px) { .article-timeline .article__year--left { left: -7rem; } } @media (max-width: 1199px) { .article-timeline .article__year--left { left: -6rem; } } @media (max-width: 1023px) { .article-timeline .article__year--left { left: -3rem; } } .article-timeline .article__year span { font-size: 10.9rem; font-family: Big-Caslon, sans-serif; letter-spacing: 0.05em; margin-bottom: 1.7rem; display: block; color: #a5a5a5; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } @media (max-width: 1880px) { .article-timeline .article__year span { font-size: 9rem; } } @media (max-width: 1199px) { .article-timeline .article__year span { font-size: 6rem; } } @media (max-width: 1023px) { .article-timeline .article__year span { font-size: 5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__year span { -webkit-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; color: #DDBD78 !important; } } .article-timeline .article__entry { font-family: Walsheim, sans-serif; line-height: 1.86; font-size: 1.4rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__entry { padding-right: 0 !important; } } .article-timeline .article__entry p { margin-bottom: 1.7em; font-size: 1.4rem; } .article-timeline .article__entry h6 { font-family: Big-Caslon, sans-serif; font-size: 1.7rem; line-height: 1.41; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 0; } .article-timeline .article__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .article-timeline .article__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__content { display: block; padding: 0 !important; max-width: 100% !important; margin-left: 0 !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__content img { width: 100% !important; max-width: 100% !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__content + img { margin: 2rem 0 0 !important; width: 100% !important; max-width: 100% !important; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; position: static !important; } } .article-timeline .article__images img + img { margin-top: 40px; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__images img + img { margin-top: 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline .article__images { max-width: 100% !important; } } @media (max-width: 1199px) { .article-timeline .article__content img { width: 100%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline + .article-timeline .article__inner { padding-top: 0; } } .article-timeline--1 .article__inner { padding: 9rem 17.7rem 14rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1399px) { .article-timeline--1 .article__inner { padding-right: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--1 .article__inner { padding: 10rem 0; } } .article-timeline--1 .article__year { left: 5rem; top: 6.5rem; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media (max-width: 1199px) { .article-timeline--1 .article__year { left: 3rem; } } @media (max-width: 1023px) { .article-timeline--1 .article__year { left: 2rem; } } .article-timeline--1 .article__image-item-1 { position: absolute; left: -21.5rem; bottom: -10.3rem; z-index: -1; } @media (max-width: 1399px) { .article-timeline--1 .article__image-item-1 { max-width: 50%; } } .article-timeline--1 .article__entry { max-width: 74%; -webkit-box-flex: 0; -ms-flex: 0 0 74%; flex: 0 0 74%; padding-right: 3.7rem; } @media (max-width: 1399px) { .article-timeline--1 .article__entry { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 1023px) { .article-timeline--1 .article__entry { max-width: 100%; padding-right: 0; } } @media (max-width: 1199px) { .article-timeline--1 .article__content img { width: 40%; } } .article-timeline--1 .article__content { max-width: 57%; -webkit-box-flex: 0; -ms-flex: 0 0 57%; flex: 0 0 57%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 1399px) { .article-timeline--1 .article__content { max-width: 70%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media (max-width: 1023px) { .article-timeline--1 .article__content { display: block; padding-left: 40px; } } .article-timeline--2 .article__inner { padding: 24rem 0 14rem 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .article-timeline--2 .article__inner { padding-top: 10rem; } } .article-timeline--2 .article__entry { max-width: 43%; -webkit-box-flex: 0; -ms-flex: 0 0 43%; flex: 0 0 43%; padding-right: 3.7rem; } @media (max-width: 1023px) { .article-timeline--2 .article__entry { max-width: 100%; } } .article-timeline--2 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--2 .article__content { margin-left: 16.3rem; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .article-timeline--2 .article__content { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (max-width: 1399px) { .article-timeline--2 .article__content { margin-left: 0; } } @media (max-width: 1023px) { .article-timeline--2 .article__content { display: block; } } @media (max-width: 1199px) { .article-timeline--2 .article__content img { max-width: 46%; } } .article-timeline--3 .article__inner { padding: 18rem 0 14rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 1199px) { .article-timeline--3 .article__inner { padding: 6rem 0 6rem 0; } } .article-timeline--3 .article__entry { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .article-timeline--3 .article__entry { width: 100%; min-height: 200px; } } .article-timeline--3 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1023px) { .article-timeline--3 .article__inner { display: block; } } .article-timeline--3 .article__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 35%; -webkit-box-flex: 0; -ms-flex: 0 0 35%; flex: 0 0 35%; margin-left: 27rem; } @media (max-width: 1399px) { .article-timeline--3 .article__content { margin-left: 13rem; } } @media (max-width: 1023px) { .article-timeline--3 .article__content { max-width: 100%; display: block; } } .article-timeline--3 .article__image-item-1 { position: absolute; top: -10rem; right: 10.4rem; z-index: 0; } @media (max-width: 1880px) { .article-timeline--3 .article__image-item-1 { right: 5.4rem; } } @media (max-width: 1399px) { .article-timeline--3 .article__image-item-1 { right: 0; width: 40%; } } @media (max-width: 1023px) { .article-timeline--3 .article__image-item-1 { position: static; margin: 50px 0 0 50px; } } .article-timeline--4 .article__inner { padding: 20rem 0 17.5rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 1199px) { .article-timeline--4 .article__inner { padding: 10rem 0; } } .article-timeline--4 .article__entry { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } @media (max-width: 1023px) { .article-timeline--4 .article__entry { max-width: 100%; } } .article-timeline--4 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1023px) { .article-timeline--4 .article__inner { display: block; } } .article-timeline--4 .article__content { margin-left: 9.7rem; max-width: 75%; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .article-timeline--4 .article__content { margin-left: 0; max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--4 .article__content { max-width: 100%; display: block; padding: 0 20px 0 20px; } } .article-timeline--4 .article__images { max-width: 52%; -webkit-box-flex: 0; -ms-flex: 0 0 52%; flex: 0 0 52%; } .article-timeline--5 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1199px) { .article-timeline--5 .article__inner { padding: 10rem 0; } } .article-timeline--5 .article__entry { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } @media (max-width: 1023px) { .article-timeline--5 .article__entry { max-width: 100%; } } .article-timeline--5 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1199px) { .article-timeline--5 .article__content img { max-width: 50%; } } @media (max-width: 1023px) { .article-timeline--5 .article__content img { margin-top: 20px; } } .article-timeline--5 .article__content { max-width: 69%; -webkit-box-flex: 0; -ms-flex: 0 0 69%; flex: 0 0 69%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 7rem; } @media (max-width: 1399px) { .article-timeline--5 .article__content { margin-right: 0; max-width: 86%; -webkit-box-flex: 0; -ms-flex: 0 0 86%; flex: 0 0 86%; } } @media (max-width: 1023px) { .article-timeline--5 .article__content { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; display: block; padding: 0 40px 0 80px; } } .article-timeline--6 .article__inner { padding: 16rem 0 16.5rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--6 .article__entry { max-width: 36%; -webkit-box-flex: 0; -ms-flex: 0 0 36%; flex: 0 0 36%; } @media (max-width: 1023px) { .article-timeline--6 .article__entry { max-width: 100%; } } .article-timeline--6 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--6 .article__content { margin-left: 12.9rem; max-width: 64%; -webkit-box-flex: 0; -ms-flex: 0 0 64%; flex: 0 0 64%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .article-timeline--6 .article__content { margin-left: 0; max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--6 .article__content { display: block; padding: 0 20px; } } .article-timeline--6 .article__images { max-width: 56%; -webkit-box-flex: 0; -ms-flex: 0 0 56%; flex: 0 0 56%; } .article-timeline--6 .article__image-item-1 { position: absolute; left: -15.5rem; bottom: -10.3rem; z-index: -1; } @media (max-width: 1199px) { .article-timeline--6 .article__image-item-1 { width: 30%; left: -1rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--6 .article__image-item-1 { position: static; } } .article-timeline--7 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1199px) { .article-timeline--7 .article__inner { padding: 10rem 0; } } .article-timeline--7 .article__entry { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } @media (max-width: 1023px) { .article-timeline--7 .article__entry { max-width: 100%; } } .article-timeline--7 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1199px) { .article-timeline--7 .article__content img { max-width: 50%; } } @media (max-width: 1023px) { .article-timeline--7 .article__content img { margin-top: 20px; } } .article-timeline--7 .article__content { max-width: 69%; -webkit-box-flex: 0; -ms-flex: 0 0 69%; flex: 0 0 69%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 2rem; } @media (max-width: 1399px) { .article-timeline--7 .article__content { margin-right: 0; max-width: 86%; -webkit-box-flex: 0; -ms-flex: 0 0 86%; flex: 0 0 86%; } } @media (max-width: 1023px) { .article-timeline--7 .article__content { display: block; } } .article-timeline--8 .article__inner { padding: 17rem 0 7.5rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 1199px) { .article-timeline--8 .article__inner { padding: 10rem 0; } } .article-timeline--8 .article__entry { max-width: 33%; -webkit-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; } @media (max-width: 1023px) { .article-timeline--8 .article__entry { max-width: 100%; margin-bottom: 20px; } } .article-timeline--8 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--8 .article__content { margin-left: 9.7rem; max-width: 59%; -webkit-box-flex: 0; -ms-flex: 0 0 59%; flex: 0 0 59%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1399px) { .article-timeline--8 .article__content { margin-left: 0; max-width: 80%; -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; } } @media (max-width: 1023px) { .article-timeline--8 .article__content { display: block; } } .article-timeline--8 .article__images { max-width: 52%; -webkit-box-flex: 0; -ms-flex: 0 0 52%; flex: 0 0 52%; } .article-timeline--9 .article__inner { padding: 13rem 0 14.5rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .article-timeline--9 .article__entry { max-width: 20%; -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; } @media (max-width: 1880px) { .article-timeline--9 .article__entry { max-width: 30%; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; padding-right: 10px; } .article-timeline--9 .article__entry + img { max-width: 70%; } } @media (max-width: 1023px) { .article-timeline--9 .article__entry { max-width: 100%; } } .article-timeline--9 .article__content { margin-right: -1rem; max-width: 74%; -webkit-box-flex: 0; -ms-flex: 0 0 74%; flex: 0 0 74%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .article-timeline--9 .article__content { margin-right: 0; max-width: 85%; -webkit-box-flex: 0; -ms-flex: 0 0 85%; flex: 0 0 85%; } } @media (max-width: 1023px) { .article-timeline--9 .article__content { display: block; } } @media (max-width: 1199px) { .article-timeline--9 .article__content img { max-width: 50%; } } .article-timeline--10 .article__inner { padding: 10.6rem 0 12rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--10 .article__entry { max-width: 41%; -webkit-box-flex: 0; -ms-flex: 0 0 41%; flex: 0 0 41%; } @media (max-width: 1023px) { .article-timeline--10 .article__entry { max-width: 100%; } } .article-timeline--10 .article__images { margin-left: 5rem; } @media (max-width: 1880px) { .article-timeline--10 .article__images { margin-left: 3rem; } } @media (max-width: 1023px) { .article-timeline--10 .article__images { margin: 2rem 0 0; } } .article-timeline--10 .article__entry img { display: block; margin-top: 9rem; } @media (max-width: 1023px) { .article-timeline--10 .article__entry img { margin-top: 2rem; } } .article-timeline--10 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1023px) { .article-timeline--10 .article__inner { display: block; } } .article-timeline--10 .article__content { max-width: 76%; -webkit-box-flex: 0; -ms-flex: 0 0 76%; flex: 0 0 76%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 20rem; } @media (max-width: 1399px) { .article-timeline--10 .article__content { margin-left: 3rem; } } @media (max-width: 1023px) { .article-timeline--10 .article__content { display: block; } } .article-timeline--10 .article__image-item-1 { position: absolute; left: -15.5rem; bottom: -10.3rem; z-index: -1; } @media (max-width: 1023px) { .article-timeline--10 .article__image-item-1 { position: static; margin: 2rem 0 0 3rem; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } } .article-timeline--11 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .article-timeline--11 .article__entry { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } @media (max-width: 1023px) { .article-timeline--11 .article__entry { max-width: 100%; } } .article-timeline--11 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1199px) { .article-timeline--11 .article__content img { max-width: 50%; } } .article-timeline--11 .article__content { max-width: 66%; -webkit-box-flex: 0; -ms-flex: 0 0 66%; flex: 0 0 66%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 11rem; } @media (max-width: 1199px) { .article-timeline--11 .article__content { margin-right: 0; max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--11 .article__content { display: block; padding-left: 4rem; } } .article-timeline--11 .article__image-item-1 { position: absolute; right: -9.5rem; bottom: -10.3rem; z-index: -1; } @media (max-width: 1880px) { .article-timeline--11 .article__image-item-1 { right: -4.5rem; } } @media (max-width: 1199px) { .article-timeline--11 .article__image-item-1 { right: 0; width: 30%; } } .article-timeline--12 .article__inner { padding: 15rem 0 24rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--12 .article__entry { max-width: 33%; -webkit-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; } @media (max-width: 1399px) { .article-timeline--12 .article__entry { max-width: 37%; -webkit-box-flex: 0; -ms-flex: 0 0 37%; flex: 0 0 37%; } } @media (max-width: 1023px) { .article-timeline--12 .article__entry { max-width: 100%; } } @media (max-width: 1399px) { .article-timeline--12 .article__entry + img { max-width: 400px; } } .article-timeline--12 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--12 .article__content { margin-left: 6rem; max-width: 72%; -webkit-box-flex: 0; -ms-flex: 0 0 72%; flex: 0 0 72%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .article-timeline--12 .article__content { margin-left: 0; max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--12 .article__content { display: block; padding: 0 2rem; } } @media (max-width: 1199px) { .article-timeline--12 .article__content img { max-width: 50%; } } .article-timeline--12 .article__image-item-1 { position: absolute; left: -15.5rem; bottom: -10.3rem; z-index: -1; } @media (max-width: 1199px) { .article-timeline--12 .article__image-item-1 { width: 30%; } } @media (max-width: 1023px) { .article-timeline--12 .article__image-item-1 { left: -5rem; } } .article-timeline--13 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .article-timeline--13 .article__entry { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } @media (max-width: 1023px) { .article-timeline--13 .article__entry { max-width: 100%; } } @media (max-width: 1399px) { .article-timeline--13 .article__entry + img { max-width: 300px; } } .article-timeline--13 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1199px) { .article-timeline--13 .article__content img { max-width: 50%; } } .article-timeline--13 .article__content { max-width: 66%; -webkit-box-flex: 0; -ms-flex: 0 0 66%; flex: 0 0 66%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 11rem; } @media (max-width: 1199px) { .article-timeline--13 .article__content { margin-right: 0; max-width: 80%; -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; } } @media (max-width: 1023px) { .article-timeline--13 .article__content { display: block; } } .article-timeline--13 .article__image-item-1 { position: absolute; right: -9.5rem; bottom: -20.3rem; z-index: -1; } @media (max-width: 1880px) { .article-timeline--13 .article__image-item-1 { right: -4.5rem; } } @media (max-width: 1199px) { .article-timeline--13 .article__image-item-1 { right: 0; width: 30%; } } .article-timeline--14 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--14 .article__entry { max-width: 34%; -webkit-box-flex: 0; -ms-flex: 0 0 34%; flex: 0 0 34%; } @media (max-width: 1023px) { .article-timeline--14 .article__entry { max-width: 100%; } } .article-timeline--14 .article__images { margin-left: 5rem; max-width: 61%; -webkit-box-flex: 0; -ms-flex: 0 0 61%; flex: 0 0 61%; } @media (max-width: 1023px) { .article-timeline--14 .article__images { margin-left: 0; max-width: 100%; } } .article-timeline--14 .article__images img:last-child { display: block; margin-left: auto; } .article-timeline--14 .article__entry img { margin-left: auto; display: block; margin-top: 9rem; } .article-timeline--14 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--14 .article__content { max-width: 79%; -webkit-box-flex: 0; -ms-flex: 0 0 79%; flex: 0 0 79%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -1rem; } @media (max-width: 1023px) { .article-timeline--14 .article__content { display: block; padding: 0 4rem; } } .article-timeline--15 .article__inner { padding: 14.6rem 0 12rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--15 .article__entry { max-width: 40%; -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; } @media (max-width: 1023px) { .article-timeline--15 .article__entry { max-width: 100%; } } .article-timeline--15 .article__images { margin-left: 5rem; max-width: 61%; -webkit-box-flex: 0; -ms-flex: 0 0 61%; flex: 0 0 61%; } @media (max-width: 1023px) { .article-timeline--15 .article__images { margin-left: 0; } } @media (max-width: 1399px) { .article-timeline--15 .article__images img + img { max-width: 400px; } } .article-timeline--15 .article__entry img { margin-left: auto; display: block; margin-top: 9rem; } .article-timeline--15 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--15 .article__content { max-width: 85%; -webkit-box-flex: 0; -ms-flex: 0 0 85%; flex: 0 0 85%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -1rem; } @media (max-width: 1023px) { .article-timeline--15 .article__content { display: block; padding-left: 4rem; } } .article-timeline--16 .article__inner { padding: 15.6rem 0 12rem 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .article-timeline--16 .article__entry { max-width: 44%; -webkit-box-flex: 0; -ms-flex: 0 0 34%; flex: 0 0 44%; } @media (max-width: 1399px) { .article-timeline--16 .article__entry { max-width: 36%; -webkit-box-flex: 0; -ms-flex: 0 0 36%; flex: 0 0 36%; padding-right: 20px; } } @media (max-width: 1199px) { .article-timeline--16 .article__entry { max-width: 47%; -webkit-box-flex: 0; -ms-flex: 0 0 47%; flex: 0 0 47%; } } @media (max-width: 1023px) { .article-timeline--16 .article__entry { max-width: 100%; } } @media (max-width: 1399px) { .article-timeline--16 .article__entry + img { max-width: 500px; } } .article-timeline--16 .article__entry img { margin-left: auto; display: block; margin-top: 9rem; } .article-timeline--16 .article__entry p { margin-bottom: 3.5rem; } @media (max-width: 1199px) { .article-timeline--16 .article__content img { max-width: 50%; } } .article-timeline--16 .article__content { max-width: 85%; -webkit-box-flex: 0; -ms-flex: 0 0 85%; flex: 0 0 85%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -1rem; } @media (max-width: 1199px) { .article-timeline--16 .article__content { max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--16 .article__content { display: block; padding-left: 4rem; } } .article-timeline--16 .article__image-item-1 { position: absolute; left: -15.5rem; bottom: -20.3rem; z-index: -1; } @media (max-width: 1199px) { .article-timeline--16 .article__image-item-1 { width: 30%; left: 0; } } @media (max-width: 1023px) { .article-timeline--16 .article__image-item-1 { bottom: -10.3rem; } } .article-timeline--17 .article__inner { padding: 12.6rem 0 12rem 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1399px) { .article-timeline--17 .article__inner { padding: 12.6rem 0 25rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--17 .article__inner { padding: 12.6rem 0 12rem; } } .article-timeline--17 .article__entry { max-width: 34%; -webkit-box-flex: 0; -ms-flex: 0 0 34%; flex: 0 0 34%; } @media (max-width: 1399px) { .article-timeline--17 .article__entry { padding-right: 20px; } } @media (max-width: 1199px) { .article-timeline--17 .article__entry { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 1023px) { .article-timeline--17 .article__entry { max-width: 100%; } } @media (max-width: 1399px) { .article-timeline--17 .article__entry + img { max-width: 520px; } } .article-timeline--17 .article__entry img { margin-left: auto; display: block; margin-top: 9rem; } .article-timeline--17 .article__entry p { margin-bottom: 3.5rem; } .article-timeline--17 .article__content { max-width: 79%; -webkit-box-flex: 0; -ms-flex: 0 0 79%; flex: 0 0 79%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -1rem; } @media (max-width: 1199px) { .article-timeline--17 .article__content { max-width: 90%; -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; } } @media (max-width: 1023px) { .article-timeline--17 .article__content { display: block; padding-left: 4rem; } } @media (max-width: 1199px) { .article-timeline--17 .article__content img { max-width: 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--17 .article__inner { padding-bottom: 0 !important; } } .article-timeline--17 .article__images { text-align: center; } @media (max-width: 1023px) { .article-timeline--17 .article__images { margin-bottom: 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--17 .article__images { margin-bottom: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article-timeline--simple { display: none; } } .article-timeline strong { font-size: 2rem; color: black; font-weight: inherit; font-family: 'Big-Caslon'; display: inline-block; line-height: 1.4; } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow-y: hidden; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article { display: block; } } .article + .article { margin-top: 17.9rem; /* Large Desktop */ /* Small Desktop */ /* Mobile */ } @media (max-width: 1399px) { .article + .article { margin-top: 10rem; } } @media (max-width: 1199px) { .article + .article { margin-top: 7rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article + .article { padding-top: 6.7rem; margin-top: 6rem; border-top: .1rem solid #DBDBDB; } } .article.article--reversed + .article { margin-top: 16rem; /* Large Desktop */ /* Small Desktop */ } @media (max-width: 1399px) { .article.article--reversed + .article { margin-top: 10rem; } } @media (max-width: 1199px) { .article.article--reversed + .article { margin-top: 7rem; } } .article .h2 { margin-bottom: 1.3rem; text-transform: uppercase; letter-spacing: .4rem; font-family: Canvas, sans-serif; color: #000; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .h2 { font-size: 4rem; color: #2E2E2E; letter-spacing: .3rem; margin-bottom: .2rem; } } .article .h5 { letter-spacing: .14rem; border-bottom: none !important; padding: 0 !important; color: #000 !important; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .h5 { font-size: 1.2rem; font-family: Sofia-Pro, sans-serif; color: #626161 !important; text-transform: none; letter-spacing: .12rem; padding-bottom: 4.3rem; } } .article p { line-height: 1.75; margin-bottom: 12.7rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .article p { margin-bottom: 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article p { font-size: 1.2rem; line-height: 1.9 !important; padding: 0 1.3rem; margin-bottom: 2.9rem; } } .article figure a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .article .article__image { position: relative; max-width: 47.9%; -webkit-box-flex: 0; -ms-flex: 0 0 47.9%; flex: 0 0 47.9%; overflow: hidden; padding-top: 51.2%; background-color: #fff; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .article__image { display: none; padding-top: 91.2%; margin-bottom: 4.4rem; } } .article .article__image:hover figure { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .article .article__image figure { background-position: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } .article .article__content { max-width: 52.1%; -webkit-box-flex: 0; -ms-flex: 0 0 52.1%; flex: 0 0 52.1%; padding: 14.7rem 0 0 18rem; /* Large Desktop */ /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .article .article__content { padding-left: 10rem; } } @media (max-width: 1199px) { .article .article__content { padding-left: 4rem; } } @media (max-width: 1023px) { .article .article__content { padding: 6rem 0 0 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .article__content { max-width: 100%; padding: 0 !important; text-align: center; } } .article .article__content * { max-width: 44.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .article__content * { max-width: 100%; } } .article .article__content .article__image { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .article__content .article__image { display: block; } } .article .article__head { position: relative; padding-bottom: 3.7rem; margin-bottom: 4rem; /* Tablet */ } @media (max-width: 1023px) { .article .article__head { padding-bottom: 2.3rem; margin-bottom: 2rem; } } .article .article__head:after { content: ''; width: 12.6rem; height: .1rem; background-color: #DDBD78; position: absolute; left: 0; top: 100%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article .article__head:after { left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } /* ------------------------------------------------------------ *\ Article--reversed \* ------------------------------------------------------------ */ .article--reversed .article__image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .article--reversed .article__content { padding: 13rem 4rem 0 12.1rem; /* Large Desktop */ /* Small Desktop */ /* Tablet */ } @media (max-width: 1399px) { .article--reversed .article__content { padding: 15rem 10rem 0; } } @media (max-width: 1199px) { .article--reversed .article__content { padding: 15rem 4rem 0; } } @media (max-width: 1023px) { .article--reversed .article__content { padding: 6rem 3rem 0 0; } } /* ------------------------------------------------------------ *\ Article--base \* ------------------------------------------------------------ */ .article--base { display: block; padding: 12.5rem 0; /* Tablet */ } @media (max-width: 1023px) { .article--base { padding: 4rem 0 !important; } } .article--base + .article--base { margin-top: 0 !important; } .article--base .h3 { letter-spacing: .085rem; color: #0F0F0F; } .article--base .article__content p { line-height: 1.88; max-width: 58.9rem; letter-spacing: .09rem; margin-bottom: 7.1rem; /* Tablet */ /* Mobile */ /* Mobile Small */ } @media (max-width: 1023px) { .article--base .article__content p { margin-bottom: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base .article__content p { max-width: 100%; } } @media (max-width: 374px) { .article--base .article__content p { padding: 0; } } .article--base .article__head { padding-bottom: 0; } .article--base .article__head:after { display: none; } .article--base .article__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base .article__inner { display: block; } } .article--base .article__content { padding: 0; padding-top: 13.2rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .article--base .article__content { padding: 4rem 0 2rem; } } @media (max-width: 1023px) { .article--base .article__content { padding: 1rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base .article__content { max-width: 100%; } } .article--base .article__image { max-width: 44%; -webkit-box-flex: 0; -ms-flex: 0 0 44%; flex: 0 0 44%; padding-top: 51.5%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base .article__image { max-width: 100%; padding-top: 70%; } } .article--base .article__image figure { background-position: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base .article__image figure { background-position: top center; } } .article--base-alt { margin-bottom: 10.4rem; } .article--base-alt .article__image { max-width: 43.5%; -webkit-box-flex: 0; -ms-flex: 0 0 43.5%; flex: 0 0 43.5%; padding-top: 41.7%; min-height: 68rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1500px) { .article--base-alt .article__image { max-width: 45%; -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } } @media (max-width: 1199px) { .article--base-alt .article__image { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 1023px) { .article--base-alt .article__image { min-height: 100%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base-alt .article__image { max-width: 100%; padding-top: 70%; } } .article--base-alt .article__content { padding-left: 9.7vw; padding-top: 8.2vw; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1500px) { .article--base-alt .article__content { padding-left: 4rem; } } @media (max-width: 1199px) { .article--base-alt .article__content { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 5rem 4rem; } } @media (max-width: 1023px) { .article--base-alt .article__content { padding: 2rem 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base-alt .article__content { max-width: 100%; } } .article--base-alt .article__content p { line-height: 1.75; max-width: 49.6rem; letter-spacing: .045rem; margin-bottom: 6.6rem; /* Tablet */ /* Mobile */ /* Mobile Small */ } @media (max-width: 1023px) { .article--base-alt .article__content p { margin-bottom: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .article--base-alt .article__content p { max-width: 100%; padding: 0 4rem; } } @media (max-width: 374px) { .article--base-alt .article__content p { padding: 0 3.5rem; } } .article--base-alt .article__head { margin-bottom: 3rem; } /* ------------------------------------------------------------ *\ Bar \* ------------------------------------------------------------ */ .bar { background-color: #F5F5F5; padding: 2.9rem 8.5rem 3.1rem; text-align: right; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .bar { padding: 1.5rem 4rem; } } @media (max-width: 1023px) { .bar { padding: .7rem 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar { padding: 1.2rem 1rem 1.7rem; } } .bar .has-dropdown { /*position: relative; */ /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .has-dropdown { text-align: center; } } .bar .has-dropdown > a { position: relative; z-index: 6; color: #3A3B3B; font-size: 1.3rem; letter-spacing: .25rem; text-transform: uppercase; text-decoration: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .has-dropdown > a { font-size: 1rem; letter-spacing: .2rem; } } .bar .has-dropdown > a > span { margin-right: .3rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .has-dropdown > a > span { margin: 0 .3rem 0 .4rem; } } .bar .has-dropdown > a > span:after { content: ''; width: calc(100% + .5rem); height: .1rem; background-color: #BABAB8; position: absolute; left: -.5rem; bottom: -0.7rem; /* Tablet */ } @media (max-width: 1023px) { .bar .has-dropdown > a > span:after { bottom: -.6rem; left: 0; } } .bar .has-dropdown .ico-dropdown { width: 2rem; height: 2rem; position: relative; margin: -0.4rem -0.3rem 0.5rem 0; } .bar .has-dropdown .ico-dropdown span { position: absolute; height: .2rem; background-color: #DDBD78; width: 1rem; top: 50%; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: .2rem; border-radius: .5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .has-dropdown .ico-dropdown span { width: .8rem; right: .4rem; border-radius: .1rem; } } .bar .has-dropdown .ico-dropdown span + span { width: 1rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: .2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .has-dropdown .ico-dropdown span + span { width: .8rem; left: .3rem; } } .bar .dropdown { position: absolute; right: 0; top: 0; max-width: 40rem; width: 100%; height: 100vh; background-color: #fff; -webkit-box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16); box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16); padding: 14.4rem 3rem 8.7rem 5.2rem; text-align: left; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); z-index: 5; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; /* Tablet */ /* Mobile */ /* Mobile Small */ } @media (max-width: 1023px) { .bar .dropdown { max-width: 35rem; padding: 9.6rem 4rem 8rem 5.6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .dropdown { max-width: 100vw; background-color: #F5F5F5; } } @media (max-width: 374px) { .bar .dropdown { padding: 6rem 3rem 8rem; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .bar .dropdown { min-height: auto; max-width: 100vw; } } .bar .dropdown .h4 { font-size: 2.3rem; margin-bottom: 1.8rem; letter-spacing: .05rem; } .bar .dropdown p { font-size: 1.4rem; letter-spacing: .042rem; line-height: 1.72 !important; } .bar .dropdown .dropdown__head { padding-bottom: 3.6rem; position: relative; margin-bottom: 5.8rem; /* Tablet */ } @media (max-width: 1023px) { .bar .dropdown .dropdown__head { margin-bottom: 4.2rem; padding-bottom: 3.7rem; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .bar .dropdown .dropdown__head { margin-bottom: 2rem; padding-bottom: 2rem; } } .bar .dropdown .dropdown__head:after { content: ''; width: 9rem; height: .1rem; background-color: #BABAB8; position: absolute; left: 0; top: 100%; } .bar .dropdown .dropdown__body { height: 80%; overflow-y: auto; position: relative; display: block; /* Mobile */ } @media (max-height: 850px) and (min-width: 1024px) { .bar .dropdown .dropdown__body { height: 75%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .dropdown .dropdown__body { max-height: 60%; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .bar .dropdown .dropdown__body { max-height: 50%; } } .bar .dropdown .btn-close { display: none; text-decoration: none; /* Mobile */ } .bar .dropdown .btn-close span { margin: 0 1.4rem 0 .6rem; } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .bar .dropdown .btn-close { display: inline-block; position: absolute; left: 50%; bottom: 7%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .dropdown .btn-close { display: inline-block; position: absolute; left: 50%; bottom: 7%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .bar .is-open .dropdown { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .bar .is-open .ico-dropdown { -webkit-transform: rotate(-45deg) translate(0.2rem, -0.2rem); -ms-transform: rotate(-45deg) translate(0.2rem, -0.2rem); transform: rotate(-45deg) translate(0.2rem, -0.2rem); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .is-open .ico-dropdown { -webkit-transform: rotate(-45deg) translate(-0.3rem, -0.1rem); -ms-transform: rotate(-45deg) translate(-0.3rem, -0.1rem); transform: rotate(-45deg) translate(-0.3rem, -0.1rem); } } .bar .is-open .ico-dropdown span { -webkit-transform: none; -ms-transform: none; transform: none; right: .5rem; width: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .is-open .ico-dropdown span { width: 1.2rem; } } .bar .is-open .ico-dropdown span + span { width: 1.5rem; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); left: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .bar .is-open .ico-dropdown span + span { width: 1.2rem; left: .3rem; } } /* ------------------------------------------------------------ *\ Btn-close \* ------------------------------------------------------------ */ .btn-close span { color: #8D8B8B; margin-right: 2rem; font-size: 1.6rem; letter-spacing: 0; line-height: 1.2; display: inline-block; vertical-align: middle; text-transform: none !important; } /* ------------------------------------------------------------ *\ Btn down \* ------------------------------------------------------------ */ .btn-down { width: 2rem; height: 2rem; position: relative; display: inline-block; } .btn-down span { position: absolute; height: .2rem; background-color: #DDBD78; width: 1rem; top: 50%; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: .2rem; border-radius: .5rem; } .btn-down span + span { width: 1rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: .2rem; } .btn-down .line { width: .2rem; height: 2rem; left: 50%; bottom: .6rem; top: auto; -webkit-transform: translate(-50%, 0) rotate(-360deg); -ms-transform: translate(-50%, 0) rotate(-360deg); transform: translate(-50%, 0) rotate(-360deg); -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: .2rem solid #DDBD78; letter-spacing: .3rem; padding: 2.1rem 1rem 1.8rem; min-width: 33rem; text-transform: uppercase; -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; /* Mobile */ } .btn--no-cap { text-transform: initial; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .btn { font-size: 1rem; min-width: 20.4rem; padding: 1.6rem 1rem 1.2rem; letter-spacing: .25rem; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .btn { font-size: 1rem; min-width: 20.4rem; padding: 1.6rem 1rem 1.2rem; letter-spacing: .25rem; } } .btn span { position: relative; display: inline-block; overflow: hidden; overflow: visible; vertical-align: middle; padding-bottom: .2rem; } .btn span:after { content: ''; width: 0; height: .1rem; background-color: #DCBB7C; position: absolute; left: 0; top: calc(100% - .1rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .btn:hover { border-color: #888888; } .btn:hover span:after { width: 100%; } .btn .ico-arrow { margin-left: 0.7rem; margin-right: -0.7rem; } .btn .ico-arrow-right { margin-left: 1.6rem; margin-bottom: .4rem; } .btn .ico-arrow-up { margin-left: 0.6rem; margin-right: -0.6rem; margin-bottom: .4rem; } /* Button small */ .btn--small { padding: 1.6rem 1rem 0.9rem; min-width: 23.7rem; } /* Button x-small */ .btn--x-small { font-size: 1.3rem; padding: 2rem 1rem 1.5rem; min-width: 18.4rem; letter-spacing: .18rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .btn--x-small { font-size: 1.1rem; padding: 1.6rem 1rem 1.5rem; } } /* Button alt */ .btn--alt { font-size: 1.4rem; letter-spacing: .21rem; padding: 2.3rem 1rem 2rem; min-width: 34.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .btn--alt { font-size: 1.2rem !important; padding: 1.9rem 1rem 2rem; letter-spacing: .18rem; } } .btn--dev { min-width: 24.4rem; font-size: 1.5rem; letter-spacing: .22rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .btn--dev { font-size: 1.1rem; min-width: 18rem; letter-spacing: .15rem; } } .btn--gray { border-color: #454545; } /* Btn block */ .btn--block { display: block; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------ *\ Card \* ------------------------------------------------------------ */ .card { padding-top: 90%; position: relative; } .card:hover .card__background a { opacity: .2; } .card .h4 { font-size: 3.2rem; color: #fff; letter-spacing: .2rem; line-height: 1.13; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .card .h4 { font-size: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .card .h4 { font-size: 2.4rem; } } .card .card__background { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-size: cover; } .card .card__background a { width: 100%; height: 100%; background-color: #000; opacity: .47; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .card .card__content { position: absolute; pointer-events: none; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; text-align: center; max-width: 100%; width: 100%; } /* ------------------------------------------------------------ *\ Radio \* ------------------------------------------------------------ */ .checkbox-alt { display: block; position: relative; max-width: 100%; width: 100%; margin: 20px 36px 0 0; text-align: left; padding: 0 2rem 0 3.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .checkbox-alt { padding: 0.2px 2rem 0 3.2rem; } } .checkbox-alt label { padding-left: 6.7rem; position: relative; display: inline-block; font-size: 1.4rem; color: #fff; line-height: 1.3; letter-spacing: .04rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .checkbox-alt label { font-size: 1.2rem; } } .checkbox-alt label:before, .checkbox-alt label:after { content: ''; display: inline-block; width: 3.4rem; height: 3.4rem; border: .2rem solid #DDBD78; border-radius: 50%; position: absolute; left: 0; top: .3rem; } .checkbox-alt label:after { width: 2.2rem; height: 2.2rem; border: none; background-color: #fff; top: .9rem; left: .6rem; opacity: 0; } .checkbox-alt input:checked + label:after { opacity: 1; } .checkbox-alt input { width: 0; height: 0; position: absolute; z-index: 5; opacity: 0; left: 0; top: 0; } /* ------------------------------------------------------------ *\ Checkbox-alt--dev \* ------------------------------------------------------------ */ .checkbox-alt--dev { text-align: left; padding: 0 0 0 3.9rem; display: inline-block; margin-top: 0; } .checkbox-alt--dev label { text-align: left; padding-left: 1.9rem; position: static; text-transform: none; font-size: 1.4rem; letter-spacing: .045rem; color: #626161; line-height: 1.72; } .checkbox-alt--dev label:before, .checkbox-alt--dev label:after { top: -.2rem; } .checkbox-alt--dev label:after { width: 2rem; height: 2rem; top: .5rem; left: .7rem; background-color: #DDBD78; } /* ------------------------------------------------------------ *\ Checkbox \* ------------------------------------------------------------ */ .checkbox { position: relative; display: inline-block; width: 100%; } .checkbox + .checkbox { margin-top: 3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .checkbox + .checkbox { margin-top: 3.3rem; } } .checkbox input { display: inline-block; height: 40px; width: 100%; position: absolute; top: 0; left: 0; right: 0; opacity: 0; z-index: 5; } .checkbox label:before, .checkbox label:after { content: ""; position: absolute; display: inline-block; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); width: 2.3rem; height: 2.3rem; border: .2rem solid #DDBD78; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 20px; } .checkbox label:after { display: inline-block; -webkit-transform: rotate(45deg) translate(0, -50%); -ms-transform: rotate(45deg) translate(0, -50%); transform: rotate(45deg) translate(0, -50%); height: 1.5rem; width: .8rem; border: none; border-bottom: .2rem solid #DDBD78; border-right: .2rem solid #DDBD78; left: .2rem; top: auto; bottom: .1rem; opacity: 0; top: auto; bottom: auto; margin-top: 5px; } .checkbox label { position: relative; text-transform: uppercase; padding-left: 4rem; line-height: 1.5; display: block; display: flex; align-items: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .checkbox label { padding: .4rem 0 .5rem 4.3rem; } } .checkbox input:checked + label:after { opacity: 1; } /* ------------------------------------------------------------ *\ Checkbox--alt \* ------------------------------------------------------------ */ .checkbox--alt { padding-left: 5.8rem; text-align: left; } .checkbox--alt label { text-align: left; padding: 0; position: static; text-transform: none; font-size: 1.4rem; letter-spacing: .045rem; color: #626161; line-height: 1.72; } .checkbox--alt label:before, .checkbox--alt label:after { content: ""; position: absolute; display: inline-block; top: 1rem; left: 0; width: 2.7rem; height: 2.7rem; border: .1rem solid #DDDDDD; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 20px; } .checkbox--alt label:after { display: inline-block; -webkit-transform: rotate(45deg) translate(0, -50%); -ms-transform: rotate(45deg) translate(0, -50%); transform: rotate(45deg) translate(0, -50%); height: 1.5rem; width: .8rem; border: none; border-bottom: .2rem solid #DDBD78; border-right: .2rem solid #DDBD78; left: .4rem; top: .6rem; bottom: .2rem; opacity: 0; margin-top: 0; } /* ------------------------------------------------------------ *\ Checkbox--dev \* ------------------------------------------------------------ */ .checkbox--dev label:after { } /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { background-color: #EDEFED; padding: 21.2rem 0 10rem; position: relative; /* Large Desktop */ /* Tablet */ /* Mobile */ } .container--dealers { padding: 0 !important; } @media (max-width: 1399px) { .container { padding: 20rem 0 10rem; } } @media (max-width: 1023px) { .container { padding: 10rem 0 5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container { padding: 0 0 6rem; } } .container .container__head { width: 100%; position: absolute; left: 0; top: 10.6rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .container .container__head { top: 5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container .container__head { display: none; } } .container .container__head + .section-dev { margin-top: 1.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container .container__head + .section-dev { margin-top: 2.3rem; } } .container .fixed { background-color: #EDEFED; position: fixed; left: 0; width: 100%; padding: 1.6rem 0 1.8rem; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; z-index: 9; border-bottom: .1rem solid #D3D3D3; } .container .fixed .nav-secondary { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; padding-bottom: 0; border-bottom: 0; } .container .container__foot { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container .container__foot { display: block; text-align: center; padding-top: 2.1rem; } } .container .container__foot .btn { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container .container__foot .btn { min-width: 20rem; padding: 1.4rem 1rem 1.2rem; } } /* ------------------------------------------------------------ *\ Container--alt \* ------------------------------------------------------------ */ .container--alt { padding-bottom: 11rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container--alt { padding-bottom: 6.1rem; } } /* ------------------------------------------------------------ *\ Container--dev \* ------------------------------------------------------------ */ .container--dev { padding: 13.2rem 0 11rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container--dev { padding: 0 0 6.1rem; } } .container--dev .container__head { top: 6.6rem; } .container--dev .container__head + .section-dev { margin-top: 9.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container--dev .container__head + .section-dev { margin-top: 2.3rem; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .container--dev .container__head + .section-dev { margin-top: 0; } } /* ------------------------------------------------------------ *\ container--base \* ------------------------------------------------------------ */ .container--base { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container--base { padding: 2rem 0; } } .container--base .container__head + .section-dev { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .container--base .container__head + .section-dev { margin-top: 0; } } /* ------------------------------------------------------------ *\ Features \* ------------------------------------------------------------ */ .features { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* Tablet */ } @media (max-width: 1023px) { .features { margin: 0 -1rem; } } /* ------------------------------------------------------------ *\ Feature \* ------------------------------------------------------------ */ .feature { max-width: 20rem; -webkit-box-flex: 0; -ms-flex: 0 0 20rem; flex: 0 0 20rem; /* Tablet */ } @media (max-width: 1023px) { .feature { max-width: 25%; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 1rem; } } .feature figure { padding-top: 53%; background-size: cover; margin-bottom: 2.7rem; } .feature .h6 { text-transform: uppercase; font-family: Walsheim, sans-serif; letter-spacing: .3rem; } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background-color: #000; color: #F5F5F5; padding: 14.4rem 0 9.2rem; z-index: 2; position: relative; /* Large Desktop */ /* Small Desktop */ /* Mobile */ } @media (max-width: 1399px) { .footer { padding: 10rem 0 7rem; } } @media (max-width: 1199px) { .footer { padding: 6rem 0 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer { padding: 8.1rem 1rem 9rem 2.4rem; } } .footer .h6 { font-size: 1.6rem; text-transform: uppercase; font-weight: 600; letter-spacing: .25rem; font-family: Walsheim, sans-serif; margin-bottom: 2.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .h6 { font-size: 1.5rem; letter-spacing: .06rem; margin-bottom: 2.2rem; } } .footer .footer__inner { padding: 0 9.3rem 0 6.3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* XL desktop */ /* Large Desktop */ /* Small Desktop */ /* Tablet */ } @media (max-width: 1880px) { .footer .footer__inner { padding-right: 6rem; } } @media (max-width: 1399px) { .footer .footer__inner { padding: 0 5.5rem; } } @media (max-width: 1199px) { .footer .footer__inner { padding: 0; } } @media (max-width: 1023px) { .footer .footer__inner { display: block; } } .footer .footer__logo { margin-bottom: 7.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__logo { margin-bottom: 6.6rem; } } .footer__content ul { margin-bottom: 2rem; } .footer .footer__nav { /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .footer .footer__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav { display: block; margin-bottom: 3rem; } } .footer .footer__nav li { list-style-type: none; padding-left: 0rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav li { padding-left: 0; } } /* .footer .footer__nav li:before { content: ''; width: .45rem; height: .86rem; display: inline-block; background-image: url("/assets/images/svg/arrow.svg"); position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); background-repeat: no-repeat; background-size: cover; } */ .footer .footer__nav li + li { margin-top: 2.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav li + li { margin-top: 2rem; } } .footer .footer__nav a { font-size: 1.9rem; letter-spacing: .08rem; text-decoration: none; position: relative; color: #E5E5E5; opacity: .8; /* Small Desktop */ /* Mobile */ } .footer__nav ul { margin-bottom: 3rem; } @media (max-width: 1199px) { .footer .footer__nav a { font-size: 1.8rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav a { font-size: 1.5rem; } } .footer .footer__nav a:after { content: ''; width: 0; height: .1rem; background-color: #fff; position: absolute; left: 0; top: calc(100% - .2rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .footer .footer__nav a:hover:after { width: 100%; } .footer .footer__nav-col { display: inline-block; vertical-align: top; margin-right: 19.2rem; /* XL desktop */ /* Large Desktop */ } @media (max-width: 1880px) { .footer .footer__nav-col { margin-right: 8rem !important; } } @media (max-width: 1399px) { .footer .footer__nav-col { margin-right: 3.5rem !important; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .footer .footer__nav-col { display: block; } } .footer .footer__nav-col + .footer__nav-col { margin-right: 12.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav-col + .footer__nav-col { margin-right: 0 !important; margin-top: 4rem; } } .footer .footer__nav-col:last-child { margin-right: 0; position: relative; padding-bottom: 8.1rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .footer .footer__nav-col:last-child { padding-bottom: 6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__nav-col:last-child { padding-bottom: 0; } } .footer .footer__nav-col:last-child .socials { min-width: 276px; position: absolute; bottom: 0; left: 1.2rem; } @media (max-width: 1023px) { .footer .socials { text-align: center; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .socials { display: block !important; } .footer .socials li { padding: 0 0.8rem !important; } } .footer .footer__aside { padding-top: 11.1rem; /* Tablet */ } @media (max-width: 1023px) { .footer .footer__aside { padding-top: 0; } } .footer .footer__aside .btn { margin-bottom: 3.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__aside .btn { min-width: 100%; margin-bottom: 3.9rem; } } .footer .footer__list-brands { margin: 0 -2.2rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .footer .footer__list-brands { margin: 0 -1rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__list-brands { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 1.2rem; } } .footer .footer__list-brands li { display: inline-block; padding: 0 2.2rem; /* Small Desktop */ } @media (max-width: 1199px) { .footer .footer__list-brands li { padding: 0 1rem; } } .footer .footer__list-brands li img { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__list-brands li img { width: 14.5rem; } } .footer .footer__list-brands li + li img { width: auto; height: 6.5rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .footer .footer__list-brands li + li img { width: auto; height: 6.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__list-brands li + li img { width: auto; height: 4.5rem; } } .footer__apps-title { font-family: Walsheim, sans-serif; margin-bottom: 0; padding-bottom: 0; font-size: 1.5rem; -webkit-font-smoothing: subpixel-antialiased; } .footer__apps { margin-top: 3rem; display: flex; padding: 0 1.5rem; max-width: 490px; margin-left: -1rem; margin-bottom: 1rem; } .footer__apps a { display: inline-block; width: 38%; min-width: 108px; } .footer__apps a:first-of-type { margin-right: 2rem; margin-left: -1rem; } /* ------------------------------------------------------------ *\ Form search \* ------------------------------------------------------------ */ .btn--search { min-width: 0; width: 100%; } .tile__search { height: 100%; } .tile__search > div { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .tile__search .h3 { font-family: 'Big-Caslon' !important; font-size: 2.5rem !important; margin-bottom: 2rem !important; } .form-search { width: 69rem; display: inline-block; margin: 0 auto; /* Small Desktop */ /* Tablet */ } .form-message { background-color: f6f6f6; padding: 2rem 3rem; line-height: 1.6; margin-bottom: 3rem; border-bottom: solid #ddbd78 3px; } .form-message--error { border-bottom: solid #f48888 3px; } @media (max-width: 1199px) { .form-search { width: 50rem; } } @media (max-width: 1023px) { .form-search { width: 40rem; } } .form-search .field { border: none; font-size: 3rem; color: #4D5050; width: 100%; background-color: transparent; /* Tablet */ } @media (max-width: 1023px) { .form-search .field { font-size: 2.4rem; } } .form-search .form__field { width: 100%; padding-bottom: 3rem; border-bottom: 0.1rem solid rgba(1, 7, 7, 0.21); /* Tablet */ } @media (max-width: 1023px) { .form-search .form__field { padding-bottom: 1.5rem; } } .form-search .form__controls { position: relative; } .form-search .form__controls .ico-search { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .form-search .form__label { display: none; } .form-search .form__actions { position: absolute !important; left: -9999px; top: -999999px; opacity: 0; } .form-search .form__btn { min-width: 16.6rem; font-size: 1.4rem; padding: 1rem 1rem .7rem; background-color: transparent; letter-spacing: .2rem; background-color: #fff; /* Tablet */ } @media (max-width: 1023px) { .form-search .form__btn { padding: .5rem 1rem; min-width: auto; } } /* ------------------------------------------------------------ *\ Form-search--mobile \* ------------------------------------------------------------ */ .form-search--mobile { width: 100%; padding: 1.8rem 3.6rem; background-color: #DDBD78; margin-bottom: .3rem; display: none; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .form-search--mobile { display: block; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .form-search--mobile { display: block; } } .form-search--mobile .form__body { position: relative; } .form-search--mobile .form__field { padding-bottom: .3rem; border-bottom: .1rem solid #EAD7AE; } .form-search--mobile .field { font-size: 1.6rem; } .form-search--mobile .form__actions { left: auto; right: 0; top: -.1rem; opacity: 1; } .form-search--mobile .form__btn { background-color: transparent; border: none; padding: 0 .2rem; } .form-search--mobile .ico-arrow-right { width: 1.2rem; height: 1rem; } .form-search--mobile.loaded .search-load { background-color: #fff; overflow-y: auto; position: absolute; width: 100vw; height: 100%; padding-bottom: 2rem; left: 0; top: 6.2rem; bottom: 0; padding: 4rem 1.5rem 20rem; z-index: 81; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form { max-width: 68.5rem; width: 100%; margin: 0 auto; } .form .h2 { color: #fff; font-size: 4.8rem; letter-spacing: .29rem; font-family: Big-Caslon, sans-serif; padding-bottom: 2.4rem; position: relative; display: inline-block; margin-bottom: 4.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .h2 { font-size: 2.6rem; letter-spacing: .15rem; padding-bottom: 1.5rem; margin-bottom: 2.4rem; } } .form .h2:after { content: ''; width: 110%; height: .2rem; background-color: #DDBD78; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .form p { line-height: 1.75; letter-spacing: .05rem; color: #fff; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form p { font-size: 1.3rem; } } .form .form__head { text-align: center; max-width: 54.5rem; margin: 0 auto 5rem; } .form .form__label { display: none; font-size: 1.6rem; font-weight: 700; color: #626161; letter-spacing: .05rem; margin-bottom: 2.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__label { text-align: center; padding: 0 1rem; line-height: 1.38; } } .form .form__label--alt { display: block; } .form .form__label--alt-mobile { padding: 0; } .form .form__field--tablet { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__field--tablet { display: none; } } .form .form__field--mobile { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__field--mobile { display: block; width: 100%; } } .form .form__field + .form__field { margin-top: 4.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__field + .form__field { margin-top: 3.1rem; } } .form .field { width: 100%; height: 5.4rem; padding: 0 2.7rem; color: #626161; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .2rem; border: none; -webkit-box-shadow: inset 0 -.2rem 0 0 #DDBD78; box-shadow: inset 0 -.2rem 0 0 #DDBD78; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background-color: #fff; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .field { font-size: 1.4rem; letter-spacing: .15rem; padding: 0 2.9rem; } } .form .field:focus { -webkit-box-shadow: inset 0 0 0 .2rem #DDBD78; box-shadow: inset 0 0 0 .2rem #DDBD78; } .form .field--textarea { height: 25rem; resize: none; padding-top: 1.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .field--textarea { height: 24.5rem; } } .form .field--textarea-alt { height: 16rem; } .form .form__body { margin-bottom: 7.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__body { margin-bottom: 3.6rem; } } .form .form__foot { text-align: center; max-width: 54.5rem; margin: 0 auto 4.3rem; } .form .form__foot p { margin-bottom: 2.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__foot p { margin-bottom: 2.5rem; } } .form .form__actions { text-align: center; } .form .form__btn { background-color: transparent; color: #fff; min-width: 29.2rem; letter-spacing: .27rem; padding: 2.2rem 1rem 2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__btn { min-width: 100%; padding: 1.7rem 1rem 1.8rem; } } .form .form__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -3.4rem 0; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .form .form__row { margin: 0 -1.5rem -2.3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__row { display: block; } } .form .form__col { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 3.4rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .form .form__col { padding: 0 1.5rem 2.3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__col { max-width: 100%; } } .form .form__content { padding-bottom: 12.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content { padding-bottom: 7.1rem; } } .form .form__content:last-child { padding-bottom: 0; } .form .form__content--alt { position: relative; padding: 13.1rem 0 15.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content--alt { padding: 6.7rem 0 7.9rem; } } .form .form__content--alt > * { position: relative; z-index: 1; } .form .form__content--alt:before { content: ''; width: 100vw; height: 100%; background-color: #F5F5F5; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; pointer-events: none; } .form .form__content--dev { padding: 10rem 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content--dev { padding: 6.2rem 0; } } .form .form__content-head { margin-bottom: 5.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content-head { text-align: center; margin-bottom: 5.9rem; } } .form .form__content-head .h5 { letter-spacing: .15rem; display: inline-block; padding: 0 1.5rem 1.7rem 0; border-bottom: .1rem solid #DDBD78; color: #000; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content-head .h5 { padding-right: 0; font-size: 2.4rem; } } .form .form__content-head .h5 + p { margin-top: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content-head .h5 + p { font-size: 1.6rem; } } .form .form__content--alt .form__content-head { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__content--alt .form__content-head { margin-bottom: 4.8rem; } } .form .form__group + .form__group { margin-top: 8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group + .form__group { margin-top: 5.1rem; } } .form .form__group + .form__group--alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group + .form__group--alt-mobile { margin-top: 5.7rem; } } .form .form__group--alt-mobile + .form__group { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group--alt-mobile + .form__group { margin-top: 6.6rem; } } .form .form__group + .form__group--dev-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group + .form__group--dev-mobile { margin-top: 6.1rem; } } .form .form__group--dev-mobile + .form__group { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group--dev-mobile + .form__group { margin-top: 6.6rem; } } .form .form__group--alt-mobile .form__group-foot { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group--alt-mobile .form__group-foot { padding-top: 3.2rem; } } .form .form__group + .form__group--alt { margin-top: 6.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group + .form__group--alt { margin-top: 5.9rem; } } .form .form__group + .form__group--dev { margin-top: 11rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group + .form__group--dev { margin-top: 6.2rem; } } .form .form__group-title { font-size: 2.4rem; letter-spacing: .14rem; color: #000; margin-bottom: 2.4rem; font-weight: 500; font-family: Big-Caslon, sans-serif; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-title { text-align: center; margin-bottom: 3.3rem; } } .form .form__group-title--alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-title--alt-mobile { margin-bottom: 2.6rem; } } .form .form__group-head { max-width: 60rem; margin-bottom: 5.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-head { text-align: center; margin-bottom: 3.8rem; max-width: 100%; } } .form .form__group-head .form__group-title { margin-bottom: .9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-head .form__group-title { margin-bottom: 1.2rem; } } .form .form__group-head--alt { margin-bottom: 4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-head--alt { margin-bottom: 3.5rem; } } .form .form__group-head--alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-head--alt-mobile { margin-bottom: 2rem; } } .form .form__questionnaire { max-width: 77.5rem; padding: 2.7rem 0 2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__questionnaire { padding: 0px 0 1.5rem 2rem; } } .form .form__questionnaire li { display: inline-block; width: 49%; margin-bottom: 1.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__questionnaire li { display: block; width: 100%; } } .form .form__group-foot { padding-top: 3.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__group-foot { text-align: center; padding-top: 2.8rem; } } .form .form__group-foot a { text-decoration: none; color: #626161; letter-spacing: .05rem; } .form .form__group-foot em { font-style: normal; font-size: 3rem; margin-right: 1.8rem; line-height: 1; vertical-align: bottom; } .form .form__group-foot span { line-height: 3rem; } .form .form__rate { padding-bottom: 2.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate { text-align: center; margin: 0 -1.3rem; padding-bottom: 1.8rem; } } .form .form__rate li { display: inline-block; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate li { width: 18%; } } .form .form__rate .form__rate-body { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate .form__rate-body { max-width: 40rem; margin: 0 auto; } } .form .form__rate-title { color: #626161; letter-spacing: .05rem; font-weight: 700; font-family: Walsheim, sans-serif; margin-bottom: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate-title { margin-bottom: 2.3rem; } } .form .form__rate--alt { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate--alt { margin: 0; padding: 1.7rem 0 0.9rem; } } .form .form__rate--alt .form__rate-title { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate--alt .form__rate-title { margin-bottom: 2rem; line-height: 1.38; } } .form .form__rate--alt .form__rate-body { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate--alt .form__rate-body { max-width: 21.4rem; margin: 0 auto; text-align: left; } } .form .form__rate--alt li { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form .form__rate--alt li { width: auto; } } .form .form__rate--alt li + li { margin-left: 2.3rem; } .form .iti { width: 100%; } .form .iti .iti__flag { background-image: url("/assets/images/temp/flags.png"); -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-filter: grayscale(1); filter: grayscale(1); } @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi) { .form .iti .iti__flag { background-image: url("/assets/images/temp/flags@2x.png"); } } .form .iti .iti__selected-flag { padding: 0 1rem 0 3.6rem; background-color: transparent !important; } .form .iti .iti__selected-dial-code { margin-left: 1.5rem; } .form .iti .iti__arrow { margin-left: 1.1rem; } /* ------------------------------------------------------------ *\ Forms--alt \* ------------------------------------------------------------ */ .form--alt { max-width: 95rem; } .form--alt .form__row + .form__field, .form--alt .form__row + .form__row { margin-top: 3.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__row + .form__field, .form--alt .form__row + .form__row { margin-top: 2.1rem; } } .form--alt .form__field + .form__row, .form--alt .form__field + .form__field { margin-top: 3.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__field + .form__row, .form--alt .form__field + .form__field { margin-top: 2.1rem; } } .form--alt .field { border: .1rem solid #DDDDDD; } .form--alt .form__body { margin-bottom: 5.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__body { margin-bottom: 3.1rem; } } .form--alt .form__foot { max-width: 46.2rem; margin-bottom: 7.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__foot { padding: 0 0 0 2.1rem; margin-bottom: 3.4rem; } } .form--alt .form__checkbox + .form__checkbox { margin-top: 3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__checkbox + .form__checkbox { margin-top: 2.6rem; } } .form--alt .form__btn { color: #454545; border-color: #676767; min-width: 33rem; padding: 1.9rem 1rem 1.7rem; font-size: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__btn { min-width: 100%; padding: 1.6rem 1rem; } } .form--alt .form__actions { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt .form__actions { padding: 0 .7rem; } } /* ------------------------------------------------------------ *\ Form--alt-dev \* ------------------------------------------------------------ */ .form--alt-dev .form__row + .form__field, .form--alt-dev .form__row + .form__row { margin-top: 3.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__row + .form__field, .form--alt-dev .form__row + .form__row { margin-top: 2.1rem; } } .form--alt-dev .form__field + .form__row, .form--alt-dev .form__field + .form__field { margin-top: 3.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__field + .form__row, .form--alt-dev .form__field + .form__field { margin-top: 2.1rem; } } .form--alt-dev .form__field--alt + .form__field, .form--alt-dev .form__field + .form__field--alt { margin-top: 5.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__field--alt + .form__field, .form--alt-dev .form__field + .form__field--alt { margin-top: 4.8rem; } } .form--alt-dev .form__field--alt + .form__field { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__field--alt + .form__field { margin-top: 5.3rem; } } .form--alt-dev .form__row + .form__field--dev { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__row + .form__field--dev { margin-top: 3.5rem; } } .form--alt-dev .form__body { margin-bottom: 6.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__body { margin-bottom: 5.9rem; } } .form--alt-dev .form__foot { max-width: 60rem; margin: 4.8rem auto 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__foot { margin: 2.8rem auto 0; padding: 0 2rem; } } .form--alt-dev .form__foot p { font-size: 1.4rem; letter-spacing: .04rem; margin-bottom: 0; color: #969595; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__foot p { line-height: 1.78 !important; } } .form--alt-dev .form__foot p strong { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .form--alt-dev .form__foot p strong { font-weight: 400; } } /* ------------------------------------------------------------ *\ Grid \* ------------------------------------------------------------ */ .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -1rem -1rem; /* Grid col 1of2 */ /* Grid col 1of3 */ /* Grid col 1of4 */ /* Grid col 1of5 */ /* Grid col alt */ } .grid .grid__col { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; padding: 0 1rem 1rem; } .grid .grid__col--1of2 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .grid .grid__col--1of3 { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } .grid .grid__col--1of4 { max-width: 25%; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .grid .grid__col--1of5 { max-width: 20%; -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; /* Small Desktop */ } @media (max-width: 1199px) { .grid .grid__col--1of5 { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid .grid__col--alt { max-width: 26.66%; -webkit-box-flex: 0; -ms-flex: 0 0 26.66%; flex: 0 0 26.66%; /* Small Desktop */ } @media (max-width: 1199px) { .grid .grid__col--alt { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } } .grid--alt { margin: -6.9rem -3.5rem -9.1rem; /* XL desktop */ /* Tablet */ /* Mobile */ /* Grid col 1of4 */ } @media (max-width: 1880px) { .grid--alt { margin: -6.9rem -2rem -9.1rem; } } @media (max-width: 1023px) { .grid--alt { margin: -3rem -1.5rem -4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--alt { margin: -3rem -.7rem -4rem; } } .grid--alt .grid__col { padding: 6.9rem 3.5rem 0; /* XL desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1880px) { .grid--alt .grid__col { padding: 6.9rem 2rem 0; } } @media (max-width: 1023px) { .grid--alt .grid__col { padding: 3rem 1.5rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--alt .grid__col { padding: 3rem .7rem 0; } } .grid--alt .grid__col--1of4 { /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .grid--alt .grid__col--1of4 { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--alt .grid__col--1of4 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } #search-results .grid--alt .grid__col--1of4 { width: 100%; flex: 1; max-width: none; } } .grid--dev { margin: 0 -2.5rem -2rem; /* Small Desktop */ /* Mobile */ /* Grid col 1of3 */ /* Grid col 1of4 */ } @media (max-width: 1199px) { .grid--dev { margin: 0 -1.5rem -2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--dev { display: block; margin: -6.7rem 0 -5.9rem; } } .grid--dev .grid__col { padding: 0 2.5rem 2rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .grid--dev .grid__col { padding: 0 1.5rem 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--dev .grid__col { padding: 6.7rem 0 5.9rem; } } .grid--dev .grid__col + .grid__col { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--dev .grid__col + .grid__col { border-top: .1rem solid #DBDBDB; } } .grid--dev .grid__col--1of3 { /* small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .grid--dev .grid__col--1of3 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--dev .grid__col--1of3 { max-width: 100%; } } .grid--dev .grid__col--1of4 { /* Large Desktop */ /* small Desktop */ /* Mobile */ } @media (max-width: 1399px) { .grid--dev .grid__col--1of4 { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } } @media (max-width: 1199px) { .grid--dev .grid__col--1of4 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--dev .grid__col--1of4 { max-width: 100%; } } .grid--base { margin: 0 -2rem -2rem; } .grid--base .grid__col { padding: 0 2rem 2rem; } .grid--primary { margin: 0 -3.3rem -2rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--primary { margin: 0 -2rem -2rem; } } @media (max-width: 1023px) { .grid--primary { margin: 0 -1rem -2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--primary { display: block; } } .grid--primary .grid__col { padding: 0 3.3rem 2rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--primary .grid__col { padding: 0 2rem 2rem; } } @media (max-width: 1023px) { .grid--primary .grid__col { padding: 0 1rem 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--primary .grid__col { max-width: 100%; } } .grid--secondary { margin: 0 -5.5rem 0; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--secondary { margin: 0 -3rem 0; } } @media (max-width: 1023px) { .grid--secondary { margin: 0 -2rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--secondary { display: block; margin-bottom: -2.8rem; } } .grid--secondary .grid__col { padding: 0 5.5rem 0; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--secondary .grid__col { padding: 0 3rem 0; } } @media (max-width: 1023px) { .grid--secondary .grid__col { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 2rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--secondary .grid__col { max-width: 100%; padding-bottom: 2.8rem; } } .grid--frame .grid__col:nth-child(n + 2) .tile { position: relative; } .grid--frame .grid__col:nth-child(n + 2) .tile:before { content: ''; width: .1rem; height: calc(100% - 9.1rem); background-color: rgba(1, 7, 7, 0.21); position: absolute; left: -3.7rem; top: 0; /* XL desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1880px) { .grid--frame .grid__col:nth-child(n + 2) .tile:before { left: -2rem; } } @media (max-width: 1023px) { .grid--frame .grid__col:nth-child(n + 2) .tile:before { height: calc(100% - 4rem); left: -1.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--frame .grid__col:nth-child(n + 2) .tile:before { display: none; } } .grid--frame .tile:after { content: ''; width: 100%; height: .1rem; background-color: rgba(1, 7, 7, 0.21); position: absolute; left: 0; top: 100%; } .grid--inline { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /* ------------------------------------------------------------ *\ Grid--default \* ------------------------------------------------------------ */ .grid--default { margin: 0 -2.5rem -5.2rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .grid--default { margin: 0 -1.5rem -3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--default { display: block; margin-bottom: -3.9rem; } } .grid--default .grid__col { padding: 0 2.5rem 5.2rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .grid--default .grid__col { padding: 0 1.5rem 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--default .grid__col { padding-bottom: 3.9rem; } } .grid--default .grid__col--1of4 { /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--default .grid__col--1of4 { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } } @media (max-width: 1023px) { .grid--default .grid__col--1of4 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--default .grid__col--1of4 { max-width: 100%; } } /* ------------------------------------------------------------ *\ Grid--mibile \* ------------------------------------------------------------ */ .grid--mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--mobile { display: block; } } .grid--mobile .grid__col { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--mobile .grid__col { max-width: 100% !important; } } /* ------------------------------------------------------------ *\ grid--type1 \* ------------------------------------------------------------ */ .grid--type1 { margin: 0 -4.2rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .grid--type1 { margin: 0 -3rem; } } @media (max-width: 1023px) { .grid--type1 { margin: 0 -1.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type1 { display: block; margin: -2rem 0; } } .grid--type1 .grid__col { padding: 0 4.2rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .grid--type1 .grid__col { padding: 0 3rem; } } @media (max-width: 1023px) { .grid--type1 .grid__col { padding: 0 1.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type1 .grid__col { max-width: 100%; padding: 2rem 0; } } .grid--type1 .grid__col:nth-child(n+2) { position: relative; } .grid--type1 .grid__col:nth-child(n+2):after { content: ''; width: .1rem; height: 4.5rem; background-color: #D3D3D3; position: absolute; top: .2rem; left: calc(100% - .5rem); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type1 .grid__col:nth-child(n+2):after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); left: 2rem; top: calc(100% - 2rem); } } .grid--type1 .grid__col:last-child:after { display: none; } /* ------------------------------------------------------------ *\ Grid--type2 \* ------------------------------------------------------------ */ .grid--type2 { margin: 0 -6.7rem -18.3rem; /* Large Desktop */ /* Small Desktop */ /* Mobile */ } @media (max-width: 1399px) { .grid--type2 { margin: 0 -4rem -18.3rem; } } @media (max-width: 1199px) { .grid--type2 { margin: 0 -2.5rem -10rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type2 { display: block; } } .grid--type2 .grid__col { padding: 0 6.7rem 18.3rem; /* Large Desktop */ /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .grid--type2 .grid__col { padding: 0 4rem 18.3rem; } } @media (max-width: 1199px) { .grid--type2 .grid__col { padding: 0 2.5rem 10rem; } } @media (max-width: 1023px) { .grid--type2 .grid__col { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type2 .grid__col { max-width: 100%; } } /* ------------------------------------------------------------ *\ Grid--type3 \* ------------------------------------------------------------ */ .grid--type3 { margin: 0 -3rem -8.7rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .grid--type3 { margin: 0 -1.5rem -6rem; } } @media (max-width: 1023px) { .grid--type3 { margin: 0 -1rem -6rem; } } @media (max-width: 530px) { .grid--type3 { display: block; } } .grid--type3 .grid__col { padding: 0 3rem 8.7rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .grid--type3 .grid__col { padding: 0 1.5rem 6rem; } } @media (max-width: 1023px) { .grid--type3 .grid__col { padding: 0 1rem 6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type3 .grid__col { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 530px) { .grid--type3 .grid__col { max-width: 100%; } } .grid--type3 .grid__col:nth-last-child(-n+3) .tile { border-bottom: none; } /* ------------------------------------------------------------ *\ Grid--type4 \* ------------------------------------------------------------ */ .grid--type4 { margin: 0 -3.9rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .grid--type4 { margin: 0 -1.5rem; } } @media (max-width: 1023px) { .grid--type4 { display: block; } } .grid--type4 .grid__col { padding: 0 3.9rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .grid--type4 .grid__col { padding: 0 1.5rem; } } @media (max-width: 1023px) { .grid--type4 .grid__col { max-width: 100%; } } /* ------------------------------------------------------------ *\ Grid--type5 \* ------------------------------------------------------------ */ .grid--type5 { margin: 0 -2.2rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .grid--type5 { margin: 0 -1.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type5 { margin: 0 -.4rem; } } .grid--type5 .grid__col { padding: 0 2.2rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .grid--type5 .grid__col { padding: 0 1.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .grid--type5 .grid__col { padding: 0 .4rem; } } /* ------------------------------------------------------------ *\ Grid Search \* ------------------------------------------------------------ */ .grid--search .tile:after { display: none; } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: fixed; width: 100%; left: 0; top: 0; z-index: 8; z-index: 21; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .header .header__content { background-color: #fff; } .header .header__inner { position: relative; padding: 6.6rem 0 6.3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* Large Desktop */ /* Mobile */ } @media (max-height: 960px) { .header .header__inner { padding: 4rem 0; } } @media (max-width: 1399px) { .header .header__inner { padding: 4rem 0; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .header__inner { padding: 3.1rem 0 3.3rem; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .header__inner { padding: 3.1rem 0 3.3rem; } } .header .header__inner .ico-search { /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .header__inner .ico-search { width: 1.6rem; height: 1.6rem; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .header__inner .ico-search { width: 1.6rem; height: 1.6rem; } } .header .search-btn { display: none; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .search-btn { display: inline-block; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .search-btn { display: inline-block; } } .header .header__logo { position: absolute; top: 49%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .header .header__logo { width: 7rem; height: auto; } } @media (max-width: 850px) { .header .header__logo { width: 6rem; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .header__logo { width: 6rem; top: 3rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .header__logo { width: 6rem; top: 3rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .header .header__navbar { width: 100%; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .header__navbar { position: fixed; width: 100vw; /* top: 13rem; */ top: 8.2rem; background-color: #fff; bottom: 0; z-index: 80; left: 0; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .header__navbar { position: fixed; width: 100vw; top: 13rem; background-color: #fff; bottom: 0; z-index: 80; left: 0; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } } .header .header__navbar-body { /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .header .header__navbar-body { height: calc(100vh - 19.8rem); overflow: hidden; overflow-y: auto; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .header .header__navbar-body { height: calc(100vh - 19.8rem); overflow: hidden; overflow-y: auto; } } .header.is-active { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .header.fixed { -webkit-transform: translate(0) !important; -ms-transform: translate(0) !important; transform: translate(0) !important; } .header.is-open { position: fixed; left: 0; top: 0; height: 100vh; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } .header.is-open .header__navbar { visibility: visible; opacity: 1; } .mob-header__icons { display: none; } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .mob-header__icons { display: block; } } .mob-header__icons .search-btn { display: inline-block; } .mob-header__icons .ico-search { transform: scale(1.2); } .mob-header__icons a { display: inline-block; text-decoration: none; } .mob-header__icons .dealer-btn { margin-right: 2rem; display: inline-block; } /* ------------------------------------------------------------ *\ Header--alt \* ------------------------------------------------------------ */ .header--alt { -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } .header--alt:after { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); /* Tablet */ } @media (max-width: 1023px) { .header--alt:after { -webkit-transform: translateY(54px); -ms-transform: translateY(54px); transform: translateY(54px); } } .header--alt .header__inner { /* mobile */ /* tablet */ } @media (min-width: 1200.02px) { .header--alt .header__inner { overflow: hidden; padding: 0; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; height: 8rem; } } @media (min-width: 1023.02px) { .header--alt .header__inner { height: 12rem; } } .header--alt .nav { /* mobile */ } @media (min-width: 1200.02px) { .header--alt .nav { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; opacity: 0; } } .header--alt .nav a { /* mobile */ } @media (min-width: 1200.02px) { .header--alt .nav a { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; font-size: 0; opacity: 0; } } .header--alt .bar { /* Mobile */ } @media (min-width: 1200.02px) { .header--alt .bar { opacity: 0; height: 0; padding: 0; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } } .header--alt .header__logo { /* mobile */ } @media (min-width: 1200.02px) { .header--alt .header__logo { display: inline-block; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-transform: translate(-50%, -50%) scale(0.72); -ms-transform: translate(-50%, -50%) scale(0.72); transform: translate(-50%, -50%) scale(0.72); } } .header-no-bar .bar { display: none; } /* ------------------------------------------------------------ *\ Hero \* ------------------------------------------------------------ */ .hero .hero__inner { position: relative; height: 100%; overflow: hidden; } .hero h1 { color: #fff; text-transform: uppercase; letter-spacing: .3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero h1 { line-height: 1; } } .hero .hero__content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; max-width: 80rem; width: 100%; text-align: center; } .hero .hero__video { position: absolute; min-width: 101%; min-height: 101%; width: auto; height: auto; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -o-object-fit: cover; object-fit: cover; z-index: 0; } .hero .hero__btn { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 2.9rem; } /* ------------------------------------------------------------ *\ Hero--alt \* ------------------------------------------------------------ */ .hero--alt { padding: 0 4.8rem 4.4rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .hero--alt { padding: 0 2.3rem 2.3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--alt { height: 42vh !important; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .hero--alt { height: 42vh !important; min-height: 25rem; } } .hero--alt .hero__content { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--alt .hero__content { max-width: 15rem; } } .hero--alt .hero__btn { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--alt .hero__btn { display: none; } } /* ------------------------------------------------------------ *\ Hero--video \* ------------------------------------------------------------ */ .wrapper .hero--video { height: auto !important; } .wrapper .hero--video .hero__inner { padding-bottom: 32.85%; } .wrapper .hero--video .hero__inner--about { padding-bottom: 56%; } .video-cta-overlay { position: relative; padding-top: 56.2% !important; } .video-cta-overlay .video-cta-overlay__wrapper { position: absolute; color: white; bottom: 0; left: 0; padding: 0% 7% 5% 7%; display: flex; justify-content: space-between; width: 100%; align-items: flex-end; z-index: 10; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); } .video-cta-overlay .video-cta-overlay__wrapper--movie { height: 100%; display: flex; justify-content: center; align-items: center; background: transparent; padding: 0; } .video-inactive .pause-icon { opacity: 0; transition-duration: 0.5s; } .video-active .play-icon { opacity: 0; transition-duration: 0.5s;; } .pause-icon--hidden { display: none !important; } .video-cta-overlay .video-cta-overlay__wrapper-in { position: relative; width: 100%; } .video-cta-overlay h2 { margin-bottom: 0; font-family: Big-Caslon, sans-serif; } .video-cta-overlay__button { width: 65px; height: 65px; position: absolute; right: 0; bottom: 0; } .video-cta-overlay__wrapper--movie h2 { font-size: 5rem; max-width: 48rem; line-height: 1; } .video-cta-overlay__wrapper--movie .video-cta-overlay__wrapper-in { height: 100%; display: flex; align-items: center; justify-content: center; } .video-cta-overlay__wrapper--movie .video-cta-overlay__button { position: relative; } @media (max-width: 640px){ .video-cta-overlay__button { width: 45px; height: 45px; } } .video-inactive { opacity: 1; transition-duration: 0.3s; } .video-active { opacity: 0; transition-duration: 0.3s; } .video-active:hover { opacity: 1; transition-duration: 0.3s; } .video-cta-overlay img { object-fit: contain; cursor: pointer; position: absolute; } .video-cta-overlay__button:hover { opacity: 0.95; transition-duration: 0.3s; } @media (max-width: 550px) { .video-cta-overlay h2 { font-size: 1.95rem; } } /* ------------------------------------------------------------ *\ Hero--small \* ------------------------------------------------------------ */ .hero--small { height: auto !important; position: relative; padding: 6.6rem 0 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--small { height: 12.9rem !important; } } .hero--small .hero__content { position: static; -webkit-transform: none; -ms-transform: none; transform: none; text-align: center; display: block; max-width: 100%; } .hero--small h1 { font-size: 6.1rem; color: #3C3C3C; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--small h1 { font-size: 3rem; letter-spacing: .12rem; } } .hero--small:after { display: none; } .hero--small-alt { padding-bottom: 1.7rem; } /* ------------------------------------------------------------ *\ Hero--dev \* ------------------------------------------------------------ */ .hero--dev { position: relative; min-height: 90rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .hero--dev { min-height: 40rem; height: 80vh !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev { min-height: 55rem; height: 77vh !important; } } .hero--dev .hero__inner { /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .hero--dev .hero__inner { height: 80vh; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev .hero__inner { min-height: 55rem; height: 77vh !important; } } .hero--dev:after { content: ''; width: 100%; height: 21%; background-color: #fff; position: absolute; bottom: 0; left: 0; z-index: 1; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev:after { height: 27.7%; } } .hero--dev h1 { color: #2E2E2E; text-align: center; margin-top: -2rem; letter-spacing: .6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev h1 { font-size: 4rem; letter-spacing: .3rem; } } .hero--dev img { /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .hero--dev img { width: 44vw; height: auto; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev img { width: 83.5vw; margin-bottom: 3.8rem; } } .hero--dev .hero__content { top: auto; bottom: 2.4rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev .hero__content { bottom: .1rem; } } .hero--dev .hero__content--alt img { margin-bottom: 4.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev .hero__content--alt img { width: 73.5vw; margin-bottom: 6.6rem; } } .hero--dev .hero__content--dev { max-width: 122rem; } .hero--dev .hero__content--dev img { max-width: 52rem; width: 70vw; margin-left: 1rem; margin-bottom: 2.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev .hero__content--dev img { width: 89.5vw; margin-left: 0; margin-bottom: 6.4rem; } } /* ------------------------------------------------------------ *\ Hero--Video \* ------------------------------------------------------------ */ .hero--video-bg h1 { color: #2e2e2e; text-align: center; } .product-title { margin-bottom: 1rem; } .product-subtitle { text-align: center; margin-bottom: 2rem; } .product-subtitle h3 { font-size: 1.6rem; font-family: Sofia-Pro, sans-serif; color: #626161; text-transform: none; letter-spacing: .12rem; padding-bottom: 4.3rem; } .hero--video-bg .hero__inner { position: relative; overflow: visible; margin-bottom: 11rem; } .hero--video-bg .hero--video-bg-wrapper { position: relative; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; position: absolute; overflow: hidden; } .hero--video-bg .hero--video-bg-container { position: relative; padding-bottom: 43%; max-width: none; width: auto; height: 100%; transform: scale(1.3); } @media (orientation: portrait) { .hero--video-bg .hero--video-bg-container { transform: scale(4); } } .hero--video-content { position: relative; z-index: 10; margin: auto; max-width: 104rem; padding-left: 4rem; padding-right: 4rem; display: flex; align-items: flex-end; min-height: 150px; justify-content: center; height: 75vh; max-height: 150vw; } @media (max-width: 640px) { .hero--video-content { height: auto; padding-top: 220px; } } .hero--video-content img { transform: translateY(6rem); max-height: 60rem; } @media (max-width: 640px) { .hero--video-content img { transform: translateY(3rem); } } /* ------------------------------------------------------------ *\ Hero-dev--mobile \* ------------------------------------------------------------ */ .hero--dev-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev-mobile { min-height: 55rem; height: 70.6vh !important; } } .hero--dev-mobile:after { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev-mobile:after { height: 20.9%; } } .hero--dev-mobile .hero__inner { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev-mobile .hero__inner { min-height: 55rem; height: 70.6vh !important; } } /* ------------------------------------------------------------ *\ Hero--base \* ------------------------------------------------------------ */ .hero--dev-base { padding: 0 4.8rem; max-height: 76.9rem; min-height: auto; height: 100%; overflow: hidden; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .hero--dev-base { max-height: 50vh; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--dev-base { padding: 0; } } .hero--dev-base:after { display: none; } /* ------------------------------------------------------------ *\ Hero--Narrow \* ------------------------------------------------------------ */ .hero--narrow-dark { position: relative; height: auto !important; } .hero--narrow-dark h1 { color: white; position: relative; z-index: 10; margin: 0; padding-top: 7.5%; padding-bottom: 7.5%; font-family: Big-Caslon, sans-serif; font-size: 4.5rem; text-transform: capitalize; letter-spacing: 0.1rem; } .hero--narrow-dark img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; object-fit: cover; filter: grayscale(10) brightness(0.5); } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hero--narrow-dark .hero__inner { height: auto !important; min-height: 0 !important; } } /* ------------------------------------------------------------ *\ Floating Text Sections \* ------------------------------------------------------------ */ .fixed-section-boxes { padding-right: 55% !important; } .fixed-section-text-box h2 { margin-bottom: 3rem; } .fixed-section-wrapper { position: relative; } .fixed-section-text-box::after { display: block; width: 95px; position: relative; background-color: #ddbd78; height: 2px; content: ''; margin-top: 11rem; margin-bottom: 11rem; } @media (max-width: 764px) { .fixed-section-text-box::after { margin-top: 6rem; margin-bottom: 6rem; } } .fixed-section-text-box:last-of-type::after { display: none; } .fixed-section-floater { border: solid #ddbd78 2px; padding: 6rem; max-width: 50% !important; } @media (max-width: 764px) { .fixed-section-floater { padding: 4rem; } } .fixed-section-floater h2 { margin-bottom: 3rem; } .fixed-section-floater li { margin-bottom: 1rem; list-style-position: inside; } .fixed-section-floater li p { display: inline; } .fixed-section-floater li:last-of-type { margin-bottom: 0; } .section__content-make-of { padding-top: 7%; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-story .section__content--sticky .section__content-inner { padding-right: 0px !important; } .fixed-section-floater { max-width: 100% !important; } } /* ------------------------------------------------------------ *\ Horizontal Siblings \* ------------------------------------------------------------ */ .horizontal-target.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; bottom: 0; } /* ------------------------------------------------------------ *\ \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ [class*='ico-'] { display: inline-block; vertical-align: middle; position: relative; } [class*='ico-'] img, [class*='ico-'] svg { width: 100%; height: 100%; display: block; } .ico-flag-uk { height: 1.4rem; } .ico-flag-uk img { width: 2.8rem; height: 1.4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ico-flag-france { height: 1.5rem; } .ico-flag-france img { width: 2.3rem; height: 1.5rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ico-facebook { width: 1.2rem; height: 2.2rem; } .ico-youtube { width: 2.9rem; height: 2rem; } .ico-instagram { width: 2.2rem; height: 2.2rem; } .ico-chevron-down { width: 1.24rem; height: .71rem; } .ico-facebook-alt { width: .9rem; height: 1.6rem; } .ico-linkedin-alt { width: 1.6rem; height: 1.6rem; } .ico-gmail-alt { width: 2.6rem; height: 1.6rem; } .ico-mail-alt { width: 2rem; height: 1.6rem; } /* ------------------------------------------------------------ *\ Hero--about \* ------------------------------------------------------------ */ .hero--about { height: auto !important; } .hero--about .hero__inner { height: auto !important; min-height: 0 !important; } .hero--about .hero__inner img { width: 100%; } /* ------------------------------------------------------------ *\ About \* ------------------------------------------------------------ */ .about-bottom-link { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { padding: 10.1rem 0 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro { padding-top: 5rem; } } .intro .intro__inner { max-width: 146.5rem; width: 100%; margin: 0 auto; padding-bottom: 6.8rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__inner { padding-bottom: 5rem; margin-bottom: 0; } } .intro .intro__inner:after { content: ''; width: 170rem; height: .1rem; background-color: #A9A9A9; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } @media (max-width: 1880px) { .intro .intro__inner:after { width: 100%; } } .intro .intro__head { text-align: center; max-width: 56.8rem; width: 100%; margin: 0 auto 8.4rem; } .intro .intro__head small.intro__tags span{ display: inline-block; position: relative; font-size: inherit; color: inherit; margin: 0; letter-spacing: inherit; opacity: inherit; } .intro .intro__head small.intro__tags span:last-of-type { display: none; } .intro .intro__head small, .intro .intro__head span { color: #010707; opacity: .5; font-size: 1.5rem; display: block; margin-bottom: 2.4rem; text-transform: uppercase; letter-spacing: .3rem; } .intro .intro__head small { font-size: 1.2rem; letter-spacing: .25rem; margin-bottom: 0; } .intro .intro__head .intro__title { font-size: 3.8rem; font-weight: 500; color: #000; position: relative; padding-bottom: 4.5rem; margin-bottom: 4.1rem; letter-spacing: .17rem; /* Mobile */ /* Mobile Small */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__head .intro__title { font-size: 3.2rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } } @media (max-width: 374px) { .intro .intro__head .intro__title { font-size: 2.6rem; } } .intro .intro__head .intro__title:after { content: ''; width: 12.6rem; height: .1rem; background-color: #DDBD78; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .intro .intro__head p { line-height: 1.56; margin-bottom: 5.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__head p { margin-bottom: 2.5rem; } } .intro .intro__image { padding-top: 54.6%; background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 15.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__image { margin-bottom: 5rem; } } .intro .intro__body { max-width: 141.7rem; width: 100%; margin: 0 auto 9.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__body { margin-bottom: 4rem; } } .intro .intro__body .intro__body-title { font-size: 2.8rem; color: #000; letter-spacing: .12rem; margin-bottom: 4.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro .intro__body .intro__body-title { margin-bottom: 2.5rem; } } .intro .intro__body p { line-height: 1.75; margin-bottom: 0; } .intro .intro__body p + p { margin-top: 2.8rem; } .intro .intro__foot { text-align: left; max-width: 141.7rem; width: 100%; margin: 0 auto; } .intro .intro__foot-alt { /* max-width: 68.1rem; */ margin-left: auto; margin-right: auto; max-width: 76.1rem; } .intro__body.intro__body--double { max-width: 118.3rem !important; padding-top: 6rem; padding-bottom: 6rem; } @media (max-width: 640px) { .intro__body.intro__body--double { padding-top: 3rem; padding-bottom: 3rem; } } /* ------------------------------------------------------------ *\ Bard Editor \* ------------------------------------------------------------ */ .bard__text { margin-bottom: 2rem; } .bard__text h2 { font-size: 2.8rem; color: #000; letter-spacing: .1rem; margin-bottom: 2rem; font-weight: 500; margin-top: 1rem; font-family: Big-Caslon, sans-serif; margin-top: 3rem; } .bard__video { display: flex; justify-content: center; padding-top: 4rem; padding-bottom: 4rem; max-width: 76.1rem; margin: auto; } .the-edit-image { background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } .product-alt--dev .product__inner.feature-edit-post { align-items: center; } .the-edit-pag-container { width: 100%; display: flex; justify-content: center; align-items: center; } .side-share { position: fixed; right: 0; bottom: 12%; z-index: 1; } .side-share__title { writing-mode: vertical-rl; display: inline-block; display: flex; justify-content: center; align-items: center; text-transform: uppercase; font-family: 'Walsheim'; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 0.5rem !important; line-height: 1; margin-left: -2px; } .side-share__items { display: flex; flex-direction: column; gap: 0.8rem; } .side-share a { display: block; } .side-share img { width: 100%; max-width: 43px; display: block; } @media (max-width: 870px), screen and (max-width: 870px) and (orientation: landscape) { .side-share { display: none; } } /* ------------------------------------------------------------ *\ Intro--alt \* ------------------------------------------------------------ */ .intro--alt { padding: 2.1rem 0 0; } .intro--alt .intro__inner:after { display: none; } .intro--alt .intro__inner--alt { padding-bottom: 11.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__inner--alt { padding-bottom: 6rem; } } .intro--alt .intro__inner--alt:after { display: block; } .intro--alt .intro__image { padding-top: 42.8%; margin-bottom: 8.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__image { margin-bottom: 4rem; padding-top: 60%; } } .intro--alt .intro__image--alt { background-size: cover; background-position: 50% 35%; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .intro--alt .intro__image--alt { background-position: center; } } @media (max-width: 1023px) { .intro--alt .intro__image--alt { padding-top: 60%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__image--alt { background-size: auto 100%; } } .intro--alt .intro__image--alt-dev { width: 100%; max-width: 76.1rem; margin: 9.4rem auto 9.7rem; display: block; padding-top: 0; /* Tablet */ /* Mobile */ } .bard-editor .img-container { max-width: 100%; } @media (max-width: 1023px) { .intro--alt .intro__image--alt-dev { /* padding-top: 45%; */ } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__image--alt-dev { background-size: auto 100%; margin: 4rem 0; } } .intro--alt .intro__head { max-width: 59.8rem; margin: 0 auto 6.1rem; } .intro--alt .intro__head .intro__title { padding-bottom: 4rem; margin-bottom: 3.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__head .intro__title { padding-bottom: 2.5rem; margin-bottom: 2.5rem; } } .intro--alt .intro__head > p { font-size: 2.2rem; line-height: 1.6; letter-spacing: .065rem; margin-bottom: 4.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__head > p { font-size: 1.8rem; } } .intro--alt .intro__head--alt { max-width: 69rem; margin-bottom: 4.6rem; } .intro--alt .intro__head--alt > p { margin-bottom: 4.6rem; } .intro--alt .intro__head--alt span + .socials { margin-top: 5.6rem; } .intro--alt .intro__body { /* max-width: 68.1rem; */ max-width: 76.1rem; margin: 0 auto; } .intro--alt .intro__body p { font-size: 1.8rem; line-height: 1.67; letter-spacing: .055rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__body p { font-size: 1.6rem; } } .intro--alt .intro__body .intro__title { font-size: 2.8rem; color: #000; letter-spacing: .1rem; margin-bottom: 3.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__body .intro__title { font-size: 2.4rem; margin-bottom: 2.5rem; } } .intro--alt .intro__images { /* max-width: 142.4rem; */ margin: 0 auto; padding: 10rem 0 8.1rem; max-width: 101.5rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .intro--alt .intro__images { padding: 7rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__images { padding: 3rem 0; } } .intro--alt .intro__images .intro__image { margin-bottom: 0; padding-top: 87.9%; } .intro--alt .intro__quote { max-width: 76.1rem; margin: 6.2rem auto 8.2rem; border-left: .1rem solid #D8BD81; padding: 0.6rem 3.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__quote { padding: .6rem 0 .6rem 2rem; margin: 4rem 0; } } .intro--alt .intro__quote blockquote { font-size: 2.8rem; color: #000; letter-spacing: .11rem; margin-bottom: 3.8rem; font-weight: 500; font-family: Big-Caslon, sans-serif; line-height: 1.5; margin-bottom: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__quote blockquote { font-size: 2.2rem; } } .intro--alt .intro__foot--alt { padding: 10.7rem 0 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .intro--alt .intro__foot--alt { padding-top: 4rem; } } /* ------------------------------------------------------------ *\ Link internal \* ------------------------------------------------------------ */ .link-internal { display: inline-block; color: inherit; position: relative; overflow: hidden; vertical-align: top; text-decoration: none; } .link-internal:after { content: ''; width: 100%; height: .1rem; background-color: #888888; position: absolute; left: 0; top: calc(100% - .5rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .link-internal:after { top: calc(100% - .2rem); } } .link-internal:hover:after { width: 0; } /* ------------------------------------------------------------ *\ List-alt \* ------------------------------------------------------------ */ .list-alt { list-style-type: none; text-align: center; } .list-alt li + li { margin-top: 1.3rem; } .list-alt .btn { min-width: 100%; } /* ------------------------------------------------------------ *\ List brands \* ------------------------------------------------------------ */ .list-brands { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-brands li { display: inline-block; list-style-type: none; } .list-brands figure { padding-top: 83%; width: 14.2rem; background-size: cover; mix-blend-mode: multiply; /* Tablet */ } @media (max-width: 1023px) { .list-brands figure { width: 13rem; } } /* ------------------------------------------------------------ *\ List-brands--center \* ------------------------------------------------------------ */ .list-brands--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* ------------------------------------------------------------ *\ list dots \* ------------------------------------------------------------ */ .list-dots li { position: relative; list-style-type: none; font-family: Sofia-Pro, sans-serif; letter-spacing: .04rem; line-height: 1.75; max-width: 50.7rem; padding-left: 4rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .list-dots li { max-width: 45rem; } } @media (max-width: 1023px) { .list-dots li { padding-left: 2.6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-dots li { font-size: 1.3rem; left: .02rem; line-height: 1.65 !important; max-width: 100%; } } .list-dots li:before { content: "\2022"; color: #DDBD78; font-weight: bold; display: inline-block; width: 1em; position: absolute; left: .2rem; top: -.4rem; } .list-dots li + li { margin-top: 4.5rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .list-dots li + li { margin-top: 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-dots li + li { margin-top: 2.7rem; } } /* ------------------------------------------------------------ *\ list-inline \* ------------------------------------------------------------ */ .list-inline { padding: 0 8.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -1rem -3rem; /* Large Desktop */ /* Tablet */ } @media (max-width: 1399px) { .list-inline { padding: 0; } } @media (max-width: 1023px) { .list-inline { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .list-inline li { display: inline-block; padding: 0 1rem 3rem; text-align: center; /* Tablet */ } @media (max-width: 1023px) { .list-inline li { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } } .list-inline .h4 { margin-bottom: 4.5rem; color: #0F0F0F; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .list-inline .h4 { font-size: 2.4rem; margin-bottom: 2rem; } } @media (max-width: 1023px) { .list-inline .h4 { font-size: 1.8rem; margin-bottom: 1rem; } } .list-inline .btn { /* Small Desktop */ } @media (max-width: 1199px) { .list-inline .btn { min-width: 15rem; padding: 1rem 1rem .8rem; } } /* ------------------------------------------------------------ *\ list-inline--dev \* ------------------------------------------------------------ */ .list-inline--dev { padding: 0 3.5rem 0 7rem; } /* ------------------------------------------------------------ *\ .list-inline--center \* ------------------------------------------------------------ */ .list-inline--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 -10rem; padding: 0 6.1rem 0 0; /* Large Desktop */ /* Tablet */ } @media (max-width: 1399px) { .list-inline--center { padding: 0; margin: 0 -4rem; } } @media (max-width: 1023px) { .list-inline--center { margin: 0 -2rem; } } .list-inline--center li { padding: 0 10rem; /* Large Desktop */ /* Tablet */ } @media (max-width: 1399px) { .list-inline--center li { padding: 0 4rem; } } @media (max-width: 1023px) { .list-inline--center li { padding: 0 2rem; } } /* ------------------------------------------------------------ *\ List locations \* ------------------------------------------------------------ */ .list-locations li { list-style-type: none; } .list-locations li + li { margin-top: 2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-locations li + li { margin-top: 2.1rem; } } .list-locations a { text-decoration: none; text-transform: uppercase; font-family: Walsheim, sans-serif; font-size: 1.3rem; } .list-locations i { vertical-align: middle; margin: 0 1.6rem .5rem 0; width: 3rem; } .list-locations span { display: inline-block; vertical-align: middle; font-size: 1.3rem; letter-spacing: .25rem; color: #3A3B3B; line-height: 1.2; } /* ------------------------------------------------------------ *\ List products \* ------------------------------------------------------------ */ .list-products { max-width: 118.5rem; width: 100%; margin: 0 auto; } .list-products ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -8rem; /* Large Desktop */ } @media (max-width: 1399px) { .list-products ul { margin: 0 -4rem; } } .list-products li { padding: 0 8rem; display: inline-block; max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; /* Large Desktop */ } @media (max-width: 1399px) { .list-products li { padding: 0 4rem; } } .list-products .tile { width: 100%; } .list-products .tile .tile__image { padding-top: 34%; margin-bottom: 5rem; } .list-products .tile .tile__image figure { background-size: cover; } /* ------------------------------------------------------------ *\ List-specs \* ------------------------------------------------------------ */ .specifications-splitter { margin-top: 113px; margin-bottom: 57px; border: none; border-top: solid #bababa 1px; } .list-specs li { position: relative; list-style-type: none; padding-left: 16.8rem; color: #626161; letter-spacing: .05rem; line-height: 1.75; max-width: 70rem; width: 100%; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .list-specs li { line-height: 1.6; letter-spacing: 0; padding-left: 15.8rem; } } @media (max-width: 1023px) { .list-specs li { padding-left: 0; line-height: 1.7; font-size: 1.4rem; letter-spacing: .04rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-specs li { font-size: 1.3rem; } } .list-specs li:before { content: attr(data-text); font-weight: 700; position: absolute; color: #404040; left: .3rem; top: -.4rem; max-width: 14.5rem; line-height: 1.75; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .list-specs li:before { position: static; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-specs li:before { content: attr(data-text) ": "; letter-spacing: .06rem; } } .list-specs li + li { margin-top: 2.9rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .list-specs li + li { margin-top: 2rem; } } @media (max-width: 1023px) { .list-specs li + li { margin-top: 2.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-specs li + li { margin-top: 2.2rem; } } /* ------------------------------------------------------------ *\ List-specs--alt \* ------------------------------------------------------------ */ .list-specs--alt { margin-left: -.4rem; } .list-specs--alt li + li { margin-top: 3.7rem; } /* ------------------------------------------------------------ *\ Location \* ------------------------------------------------------------ */ .location { padding-left: 5.8rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location { padding-left: 5rem; max-width: 50rem; margin: 0 auto; } } .location .location__content { /* Small Desktop */ } @media (max-width: 1199px) { .location .location__content { position: relative; } } .location p { font-size: 1.4rem; position: relative; padding-right: 10rem; letter-spacing: .04rem; display: inline-block; /* Small Desktop */ } @media (max-width: 1199px) { .location p { position: static; padding-right: 0; } } .location p .location__distance { position: absolute; border: solid #454545 2px; padding: 0.5rem 1.5rem; text-transform: uppercase; font-size: 1rem; font-weight: 300; letter-spacing: .08rem; top: 0; right: .4rem; /* Small Desktop */ } @media (max-width: 1200px) { .location p .location__distance { position: relative; font-size: 1.1rem; padding: 0.25rem 1rem; margin-left: 0.45rem; margin-top: 0.5; margin-bottom: 1rem; display: inline-block; } } .location p a, .location .location__address { word-break: break-word; display: inline-block; font-size: 1.3rem; position: relative; margin-bottom: .8rem; text-decoration: none; width: 100%; padding-bottom: .1rem; } .location p a:hover:after { width: 0; } /* .location p a:after { content: ''; width: 100%; height: .1rem; background-color: #626161; position: absolute; top: 100%; left: 0; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } */ .location .location__pin { width: 3.2rem; height: 4rem; display: inline-block; position: absolute; background-size: initial; background-repeat: no-repeat; background-position: top center; top: .4rem; left: 0; } .location .location__title { color: #000; cursor: pointer; font-size: 2.2rem; letter-spacing: .1rem; margin-bottom: 1.1rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .location .location__title { /* padding-right: 6rem; */ } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location .location__title { font-size: 2rem; } } .location .location__entry { margin-bottom: 2rem; width: 100%; word-break: break-all; } .location .location__btn { padding: 1.2rem 0 .9rem; width: 100%; min-width: 100%; letter-spacing: .08rem; /* Mobile */ } .location .location__btn span { font-size: 1rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location .location__btn { padding: 1rem 0 .7rem; } } .location .location__actions ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -.8rem !important; padding-bottom: 0 !important; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location .location__actions ul { display: block; } } .location .location__actions li { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 .8rem !important; border: none !important; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location .location__actions li { max-width: 100%; } } .location .location__actions li + li { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .location .location__actions li + li { margin-top: 1.2rem; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: inline-block; } .logo--size1 { width: 23rem; height: 7.7rem; border-radius: .6rem; overflow: hidden; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .logo--size1 { width: 12rem; height: auto; } } .logo--size1:hover { opacity: .8; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ------------------------------------------------------------ *\ Dealer Form \* ------------------------------------------------------------ */ .section-map .section__body-head.fixed { margin-top: -10px; } .section-map .nav-secondary { padding-bottom: 0; padding-left: 0; border-bottom: none; } .section-map .fixed { padding: 0; margin-top: -10px; } .section-map .js-nav-secondary.fixed + .section__body-grid { margin-top: 116px; } .no-dealer-button { margin-top: 2rem; margin-right: 3rem; line-height: 1.5; letter-spacing: 0.5px; text-transform: unset; cursor: default; } .search-dealer-reset-btn { appearance: none; border: solid black 1px; margin-left: 48px; padding: 0; align-self: center; text-transform: uppercase; padding: 1.5rem 4rem; font-size: 1.2rem; letter-spacing: 1px; color: #2e2e2e; flex: 1; max-width: 220px; background-color: transparent; } @media (max-width: 1023px) { .no-dealer-button { margin-right: 0; } } /* ------------------------------------------------------------ *\ Map \* ------------------------------------------------------------ */ .map { max-height: 90.3rem; height: 100%; min-height: 90.3rem; position: relative; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .map { min-height: 80rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .map { min-height: 44.2rem; } } .map .map__container { height: 100%; width: 100%; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .map .map__container { min-height: 80rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .map .map__container { min-height: 44.2rem; } } /* ------------------------------------------------------------ *\ Nav secondary \* ------------------------------------------------------------ */ .nav-secondary { padding-bottom: 5.7rem; /* padding-top: 5.7rem; */ padding-left: 2rem; border-bottom: .1rem solid #D3D3D3; } .nav-secondary ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -1rem; } .nav-secondary li { padding: 0 1rem; } .nav-secondary li:last-child { /* Tablet */ } @media (max-width: 1023px) { .nav-secondary li:last-child { display: none; } } .nav-secondary a { text-transform: uppercase; letter-spacing: .25rem; text-decoration: none; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; /* Small Desktop */ /* Tablet */ } .nav-secondary a:after { content: ''; width: 0; height: .1rem; background-color: #DCBB7C; position: absolute; left: 0; top: calc(100% - .1rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .nav-secondary a:hover:after { width: 100%; } @media (max-width: 1199px) { .nav-secondary a { font-size: 1.5rem; letter-spacing: .15rem; } } @media (max-width: 1023px) { .nav-secondary a { font-size: 1.4rem; } } .nav-secondary .current a:after { width: 100%; } .nav-secondary .btn { min-width: 20rem; margin: 0 1.3rem; font-size: 1.3rem; padding: 2.2rem 0 1.9rem; letter-spacing: .26rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .nav-secondary .btn { margin: 0 0 0 1rem; min-width: 18.5rem; } } @media (max-width: 1023px) { .nav-secondary .btn { display: none; } } .nav-secondary--alt { padding-left: 5rem; /* Small Desktop */ } @media (max-width: 1199px) { .nav-secondary--alt { padding-left: 3rem; } } @media (max-width: 1055px) { .nav-secondary--alt { padding-left: 0; } } .nav-secondary--alt a { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; font-size: 1.3rem; padding-left: .8rem; letter-spacing: .22rem; /* Tablet */ } .nav-secondary--alt a:after { left: .8rem; } @media (max-width: 1023px) { .nav-secondary--alt a { padding-left: 0; } } .nav-secondary--alt .btn { -webkit-transition: .2s; -o-transition: .2s; transition: .2s; padding: .9rem 0 .4rem; } /* ------------------------------------------------------------ *\ Nav timeline \* ------------------------------------------------------------ */ .nav-timeline { position: absolute; top: 0; right: 3.3rem; z-index: 21; background: #fff; /*max-height: calc(100vh - 16rem);*/ height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 1880px) { .nav-timeline { right: 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .nav-timeline { display: none; } } .nav-timeline > ul { max-height: calc(100vh - 10rem); overflow-y: auto; overflow-x: hidden; margin: auto; } .nav-timeline a { font-size: 1.2rem; color: #d1d1d1; text-decoration: none; padding: 0.65em 0; display: block; } .nav-timeline a:hover { color: #ddbd78; } .nav-timeline .active a { color: #ddbd78; } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { float: left; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav { float: none !important; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav { float: none !important; } } .nav ul { margin: 0 -2.35rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .nav ul { margin: 0 -1rem !important; } } @media (max-width: 1023px) { .nav ul { margin: 0 -.7rem !important; } } .nav li { display: inline-block; padding: 0 2.35rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .nav li { padding: 0 1rem !important; } } @media (max-width: 1023px) { .nav li { padding: 0 .7rem !important; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav li { display: block; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav li { display: block; } } .nav a { font-size: 1.5rem; color: #575757; letter-spacing: .29rem; text-decoration: none; position: relative; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .nav a { font-size: 1.4rem; letter-spacing: .15rem; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav a { color: #606060; letter-spacing: 0; padding: 1.6rem 3.5rem 1.2rem; display: inline-block; border-bottom: 0.1rem solid rgba(230, 230, 230, 0.4); width: 100%; text-transform: capitalize; font-size: 1.6rem; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } } .no-cap { text-transform: none; } .no-cap::after { display: none; } @media (min-width: 1200px) { .nav a { text-transform: uppercase; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav a { color: #606060; letter-spacing: 0; padding: 1.6rem 3.5rem 1.2rem; display: inline-block; border-bottom: 0.1rem solid rgba(230, 230, 230, 0.4); width: 100%; text-transform: capitalize; font-size: 1.6rem; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } } .nav a span { position: relative; overflow: hidden; display: inline-block; vertical-align: top; padding-bottom: .4rem; } .nav a span:after { content: ''; width: 0; height: .1rem; background-color: #575757; position: absolute; left: 0; top: calc(100% - .1rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .nav a:hover span:after { /* Tablet */ } @media (min-width: 1023.02px) { .nav a:hover span:after { width: 100%; } } .nav .current a { /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .current a { position: relative; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav .current a { position: relative; } } .nav .current a:before { /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .current a:before { content: ''; width: .3rem; height: 3rem; background-color: #DDBD78; position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } } .nav .has-dropdown-basic { position: relative; } @media(max-width: 1200px){ .nav .has-dropdown-basic { overflow: hidden; } } .nav .has-dropdown-basic i { margin: 0 0 .3rem 2rem; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; vertical-align: middle; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .nav .has-dropdown-basic i { margin-left: 1rem; } } @media (max-width: 1023px) { .nav .has-dropdown-basic i { margin: 0 0 1rem .2rem; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .has-dropdown-basic i { margin: 0 0 0.6rem .2rem; } } .nav .has-dropdown-basic:after { content: ''; width: 100%; height: 5rem; position: absolute; left: 0; top: 95%; z-index: 1; cursor: pointer; } @media (min-width: 1025px) { .nav .has-dropdown-basic:hover i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @media (min-width: 1025px) { .nav .has-dropdown-basic:hover .dropdown-basic { left: -1.5rem; opacity: 1; } } .nav .has-dropdown-basic.is-open i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .nav .has-dropdown-basic.is-open .dropdown-basic { left: -1.5rem; opacity: 1; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .has-dropdown-basic.is-open .dropdown-basic { opacity: 1; position: static; } } .nav .dropdown-basic { position: absolute; min-width: 27.2rem; top: calc(100% + 3.1rem); left: -99999rem; background-color: #F5F5F5; padding: 0 3.8rem !important; z-index: 2; opacity: 0; -webkit-transition: opacity .8s; -o-transition: opacity .8s; transition: opacity .8s; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .dropdown-basic { padding: 0 1.5rem !important; } } .nav .dropdown-basic ul { margin: 0; } .nav .dropdown-basic li { padding: 2.5rem 0 !important; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav .dropdown-basic li { padding: .5rem 0 !important; } } .nav .dropdown-basic li + li { border-top: .1rem solid #DBDBDB; } .nav .dropdown-basic a { letter-spacing: .3rem; border-bottom: none; } .nav--alt { float: right; margin-right: 7.6rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .nav--alt { margin-right: 3rem; } } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav--alt { margin-right: 0; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav--alt { margin-right: 0; } } .nav--alt ul { margin: 0 -2.7rem; } .nav--alt li { padding: 0 2rem; } @media(max-width: 1400px) { .nav--alt li { padding: 0 1rem } } .nav--utilities { float: right; /* Mobile */ } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav--utilities { display: none; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav--utilities { display: none; } } .nav--utilities ul { margin: 0 -1.5rem; } .nav--utilities li { padding: 0 0.75rem; } .nav--utilities a:after { display: none; } .nav--utilities a:hover { opacity: .8; } .nav--utilities .ico-pin { display: inline-block; transform: scale(2); } .nav--utilities .dropdown { position: absolute; top: 100%; -webkit-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); left: 0; width: 100%; padding: 6.3rem 0; opacity: 0; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; z-index: -1; /* Tablet */ } @media (max-width: 1023px) { .nav--utilities .dropdown { padding: 3rem 0; } } .nav--utilities .dropdown * { position: relative; z-index: 1; } .nav--utilities .dropdown:after { content: ''; width: 200vw; height: 120%; background-color: #fff; opacity: .99; position: absolute; left: -50vw; top: 0; z-index: 0; } .nav--utilities .dropdown:before { content: ''; width: 200vw; height: .1rem; background-color: #EAEAEA; position: absolute; left: -50vw; top: 0; z-index: 1; } .nav--utilities .dropdown .dropdown__head { text-align: center; position: relative; margin-bottom: 7.1rem; /* Tablet */ } @media (max-width: 1023px) { .nav--utilities .dropdown .dropdown__head { margin-bottom: 3rem; } } .nav--utilities .dropdown .btn-close { position: absolute; right: 0.1rem; top: 0.6rem; letter-spacing: .1rem; } .nav--utilities .dropdown .dropdown__body { padding-bottom: 11.6rem; /* Tablet */ } @media (max-width: 1023px) { .nav--utilities .dropdown .dropdown__body { padding-bottom: 7rem; } } .nav--utilities .dropdown .dropdown__inner { padding-bottom: 10rem; } .nav--utilities .dropdown .dropdown__actions { text-align: center; margin-bottom: 4rem; display: none; } .nav--utilities .dropdown .dropdown__actions .btn { min-width: 24.6rem; padding: 1.9rem 1rem 1.4rem; font-size: 1.4rem; letter-spacing: .3rem; } .nav--utilities .loaded .dropdown__actions { display: block; } .nav--utilities .loaded .form__actions { position: absolute; left: auto; right: .4rem; top: 0; opacity: 1; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .nav--utilities .loaded .form__controls .ico-search { visibility: hidden; } .nav--utilities .is-open .dropdown { opacity: 1; z-index: 4; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav--utilities .mCSB_scrollTools_vertical { background-color: transparent; position: absolute; top: 50%; right: .5rem; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); height: 100%; opacity: .5; } .nav--utilities .mCSB_scrollTools .mCSB_draggerContainer { height: 100%; } .nav--utilities .mCSB_scrollTools .mCSB_dragger { height: auto; } /* ------------------------------------------------------------ *\ Nav Dev \* ------------------------------------------------------------ */ .nav--dev { display: none; margin-top: 20rem; padding: 0 3.6rem 0; margin-bottom: 10rem; /* Mobile */ } @media (max-height: 700px) { .nav--dev { bottom: 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .nav--dev { display: block; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav--dev { display: block; } } .nav--dev a { border-bottom: none; color: #888888; padding: 0; letter-spacing: 0; font-size: 1.5rem; } .nav--dev li + li { margin-top: 1.5rem; } /* ------------------------------------------------------------ *\ Nav buutton \* ------------------------------------------------------------ */ .nav-btn { display: none; width: 1.8rem; height: 1.6rem; position: relative; touch-action: manipulation; cursor: pointer; /* Mobile */ } .nav-btn::before { content: ''; position: absolute; inset: -1.4rem -1.3rem; } @media (max-width: 1200px), screen and (max-width: 812px) and (orientation: landscape) { .nav-btn { display: inline-block; } } @media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 850px) { .nav-btn { display: inline-block; } } .nav-btn span { width: 100%; height: .2rem; background: #DDBD78; position: absolute; left: 0; -webkit-transition: top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s; -o-transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s, -webkit-transform .2s 0s; } .nav-btn span:first-child { top: 0; } .nav-btn span:nth-child(2) { top: .7rem; } .nav-btn span:last-child { top: 1.4rem; } .nav-btn.is-active span { -webkit-transition: background .2s, top .2s, left .2s, opacity .2s, -webkit-transform .2s .25s; transition: background .2s, top .2s, left .2s, opacity .2s, -webkit-transform .2s .25s; -o-transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s; transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s; transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s, -webkit-transform .2s .25s; } .nav-btn.is-active span:first-child { top: 12px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-btn.is-active span:nth-child(2) { opacity: 0; } .nav-btn.is-active span:nth-child(3) { top: 12px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* ------------------------------------------------------------ *\ Pin \* ------------------------------------------------------------ */ .gm-style .gm-style-iw-c { border-radius: 0; background-color: #EDEFED; min-width: 250px !important; padding: 0; } .gm-style .gm-style-iw-t::after { background: #EDEFED; } .gm-ui-hover-effect { width: 4rem !important; height: 4rem !important; margin: 1rem !important; } .gm-ui-hover-effect img { margin: 0 auto !important; width: 3rem !important; height: 3rem !important; } .gm-style-iw-d { overflow: hidden !important; max-height: none !important; } .pin { width: 40rem; padding: 3rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .pin { width: 100%; padding: 2rem; } } .pin .pin__title { display: block; font-size: 2.4rem !important; font-family: Big-Caslon, sans-serif; width: calc(100% - 2rem); margin-bottom: 1.5rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .pin .pin__title { font-size: 2rem; } .pin .pin__entry { margin-bottom: 1.5rem; } } .pin .pin__entry { font-size: 1.8rem; margin-bottom: 2rem; } .pin .pin__entry p { margin-bottom: .5rem; font-family: Walsheim, sans-serif; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .pin .pin__entry p { font-size: 1.4rem; line-height: 1.3 !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .dealer-form-wrapper { flex-basis: 100%; } } .pin .pin__actions ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -.5rem; } .pin .pin__actions li { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; list-style-type: none; padding: 0 .5rem; } .pin .pin__actions .btn { min-width: 100%; padding: 1.2rem 1rem 1rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .pin .pin__actions .btn { padding: 1rem 1rem 0.8rem; } } .pin .pin__actions .btn span { font-family: Walsheim, sans-serif; } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .mfp-content * { background-color: #fff; } .mfp-content .mfp-close { color: #000; right: 0; padding-right: 2rem; cursor: pointer !important; } /* ------------------------------------------------------------ *\ Poster \* ------------------------------------------------------------ */ .poster { max-width: 118.3rem; margin: 0 auto; border-bottom: .1rem solid #A9A9A9; padding: 12.9rem 0; /* Tablet */ /* Mobile */ } .poster:last-of-type { border: none; padding-bottom: 0; } @media (max-width: 1023px) { .poster { max-width: 80vw; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster { padding: 5rem 0; } } .poster:first-child { padding-top: 0; } .poster .poster__title { font-size: 2.8rem; color: #000; letter-spacing: .09rem; margin-bottom: 4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster .poster__title { margin-bottom: 2rem; } } .poster .poster__image { padding-top: 101%; background-size: cover; background-position: center; background-repeat: no-repeat; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .poster .poster__image { min-height: 100%; } } @media (max-width: 1023px) { .poster .poster__image { width: 55.5rem; height: 55.5rem; padding-top: 0; min-height: auto; margin-bottom: 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster .poster__image { width: 100%; padding-top: 100%; height: auto; margin-bottom: 3rem; } } .poster .poster__content { padding-left: 3rem; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; /* Small Desktop */ } @media (max-width: 1199px) { .poster .poster__content { padding: 2rem 0 0; } } .poster .poster__content p { font-size: 1.8rem; line-height: 1.67; letter-spacing: .05rem; max-width: 100%; color: #898989; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster .poster__content p { font-size: 1.6rem; } } /* ------------------------------------------------------------ *\ Poster--alt \* ------------------------------------------------------------ */ .poster--alt { max-width: 76.1rem; padding-bottom: 0; border-bottom: 0; } .poster--alt .poster__content { padding: 0; } .poster--alt .poster__title { margin-bottom: 3.5rem; } .poster--alt p { margin-bottom: 3.6rem; } .poster--alt .poster__widget { margin-bottom: 11.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster--alt .poster__widget { margin-bottom: 0; } } .poster--alt .poster__widget p { color: #504F4F; display: inline-block; vertical-align: middle; margin-bottom: 0; margin-right: 4.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster--alt .poster__widget p { margin-right: 1.5rem; } } .poster--alt .poster__widget ul { display: inline-block; vertical-align: middle; padding-top: .3rem; margin: 0 -1.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster--alt .poster__widget ul { margin: 0 -.5rem; } } .poster--alt .poster__widget ul li { display: inline-block; vertical-align: bottom; padding: 0 1.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .poster--alt .poster__widget ul li { padding: 0 .5rem; } } /* ------------------------------------------------------------ *\ Product-alt \* ------------------------------------------------------------ */ .product-alt { padding: 8.4rem 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt { padding: 4rem 0; } } .product-alt p { line-height: 1.75; } .product-alt .product__title { letter-spacing: .08rem; color: #0F0F0F; margin-bottom: 3rem; } .product-alt .product__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: 156.3rem; margin: 0 auto; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt .product__inner { display: block; } } .product-alt .product__image { max-width: 52.4%; -webkit-box-flex: 0; -ms-flex: 0 0 52.4%; flex: 0 0 52.4%; padding-top: 0; height: 62.4rem; background-size: cover; background-position: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt .product__image { max-width: 100%; height: 30rem; } } .product-alt .product__content { max-width: 65.3rem; padding-top: 4rem; padding-right: 4rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1500px) { .product-alt .product__content { max-width: 45vw; } } @media (max-width: 1399px) { .product-alt .product__content { padding-top: 2rem; } } @media (max-width: 1023px) { .product-alt .product__content { padding-top: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt .product__content { max-width: 100%; padding: 0 0 2rem; } } /* ------------------------------------------------------------ *\ Product-alt--dev \* ------------------------------------------------------------ */ .product-alt--dev { padding: 7.9rem 0 10rem; } .product-alt--dev .product__inner { max-width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product-alt--dev .product__head { text-align: center; margin-bottom: 10.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt--dev .product__head { margin-bottom: 4rem; } } .product-alt--dev .product__head .h2 { font-size: 4.8rem; font-family: Big-Caslon, sans-serif; letter-spacing: .04rem; font-weight: 500; padding: 0 2.5rem 2.4rem; display: inline-block; position: relative; border-bottom: .2rem solid #DDBD78; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt--dev .product__head .h2 { font-size: 3.6rem; padding: 0 0 1rem; } } .product-alt--dev .product__inner { padding: 0 2.5rem; } @media (max-width: 1700px) { .product-alt--dev .product__inner { padding: 0; } } .product-alt--dev .product__content { max-width: 59rem; -webkit-box-flex: 0; -ms-flex: 0 0 59rem; flex: 0 0 59rem; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding-left: 3.3rem; padding-top: 3rem; padding-bottom: 2rem; /* Mobile */ } @media (max-width: 1700px) { .product-alt--dev .product__content { max-width: 45rem; -webkit-box-flex: 0; -ms-flex: 0 0 45rem; flex: 0 0 45rem; } } @media (max-width: 1500px) { .product-alt--dev .product__content { padding: 0 0 0 1rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt--dev .product__content { padding: 0; } } .product-alt--dev .product__image { max-width: calc(100% - 59rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc(100% - 59rem); flex-basis: calc(100% - 59rem); height: auto; padding-top: 35.7%; /* Large Desktop */ /* Mobile */ } @media (max-width: 1700px) { .product-alt--dev .product__image { max-width: calc(100% - 45rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc(100% - 45rem); flex-basis: calc(100% - 45rem); } } @media (max-width: 1399px) { .product-alt--dev .product__image { background-size: 100% auto; background-repeat: no-repeat; background-position: top center; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product-alt--dev .product__image { max-width: 100%; width: 100%; padding-top: 60%; margin-bottom: 2rem; } } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ .product { padding: 6.4rem 0 6.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product { padding: 2.9rem 0 4.4rem; } } .product h1 { letter-spacing: .62rem; color: #2E2E2E; margin-bottom: .5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product h1 { font-size: 4rem; letter-spacing: .32rem; margin-bottom: 0; } } .product p { font-family: Sofia-Pro, sans-serif; color: #626161; letter-spacing: .1rem; margin-bottom: 4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product p { font-size: 1.2rem; margin-bottom: 0; } } .product .product__slider { margin-bottom: 9rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .product .product__slider { padding: 0 1rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product .product__slider { padding: 0; margin-bottom: 4.3rem; } } .product .product__content { text-align: center; } .product .product__btn { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .product .product__btn { display: none; } } /* ------------------------------------------------------------ *\ Progress \* ------------------------------------------------------------ */ .progress { width: 100%; height: .4rem; background-color: #D1CFCC; position: relative; display: none; } .progress .progress__bar { background-color: #DDBD78; height: 100%; width: 0; display: inline-block; position: absolute; left: 0; top: 0; } /* ------------------------------------------------------------ *\ Radio \* ------------------------------------------------------------ */ .radio { display: block; position: relative; max-width: 100%; width: 100%; text-align: left; height: 3rem; padding: 0 2rem 0 0; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .radio { padding-right: 1.3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio { padding: 0.2px 0 0 3.2rem; } } .radio label { padding-left: 5.7rem; display: inline-block; font-size: 1.4rem; color: #626161; line-height: 1.3; letter-spacing: .04rem; padding-top: .7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio label { padding-left: 2.4rem; } } .radio label:before, .radio label:after { content: ''; display: inline-block; width: 2.8rem; height: 2.8rem; border: .2rem solid #707070; border-radius: 50%; position: absolute; left: 0; top: .3rem; } .radio label:after { width: 1.6rem; height: 1.6rem; border: none; background-color: #DDBD78; top: .9rem; left: .6rem; opacity: 0; } .radio input:checked + label:after { opacity: 1; } .radio input { width: 0; height: 0; position: absolute; z-index: 5; opacity: 0; left: 0; top: 0; } /* ------------------------------------------------------------ *\ Radio--alt \* ------------------------------------------------------------ */ .radio--alt:not(.radio--alt-mobile) { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio--alt:not(.radio--alt-mobile) { padding: 4.3rem 0 0; text-align: center; } } .radio--alt label { font-size: 1.8rem; padding-left: 4.8rem; padding-top: .5rem; /* Tablet */ } @media (max-width: 1023px) { .radio--alt label { padding-left: 4rem; } } .radio--alt:not(.radio--alt-mobile) label { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio--alt:not(.radio--alt-mobile) label { padding: 0; } } .radio--alt:not(.radio--alt-mobile) label:before, .radio--alt:not(.radio--alt-mobile) label:after { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio--alt:not(.radio--alt-mobile) label:before, .radio--alt:not(.radio--alt-mobile) label:after { left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } /* ------------------------------------------------------------ *\ Radio--alt-mobile \* ------------------------------------------------------------ */ .radio--alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio--alt-mobile { padding: 0 2rem 0 4.8rem; } } .radio--alt-mobile label { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .radio--alt-mobile label { padding-left: 0; } } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_dragger { background-color: #9F9F9F !important; border-radius: 2rem; } .mCSB_scrollTools { width: .4rem; } .mCSB_draggerRail { opacity: 0; } /* ------------------------------------------------------------ *\ Section-posters \* ------------------------------------------------------------ */ .section-posters { padding: 9rem 0 9.4rem; position: relative; } /* .section-posters:after { content: ''; width: 170rem; height: .1rem; background-color: #A9A9A9; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } */ @media (max-width: 1880px) { .section-posters:after { width: 100%; } } .section-posters .section__foot { padding: 12.9rem 0 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-posters .section__foot { padding-top: 8rem; } } /* ------------------------------------------------------------ *\ Section Alt \* ------------------------------------------------------------ */ .section-alt { padding: 11.5rem 0 16.1rem; background-color: #fff; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .section-alt { padding: 6.9rem 0 5.5rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-alt { background-color: #EDEFED; } .tile__image--base { background-color: #EDEFED; } } .section-alt .section__head { display: none; text-align: center; margin-bottom: 4.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-alt .section__head { display: block; } } .section-alt .section__head .h5 { font-size: 1.8rem; color: #4B4B4B; letter-spacing: .04rem; display: inline-block; border-bottom: .1rem solid #707070; padding: 0 .5rem .8rem; } /* ------------------------------------------------------------ *\ Section-alt--dev \* ------------------------------------------------------------ */ .section-alt--dev { padding-bottom: 8.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-alt--dev { padding-bottom: 6.6rem; } } /* ------------------------------------------------------------ *\ Section-alt--mobile \* ------------------------------------------------------------ */ .section-alt--mobile { position: absolute; left: -9999999px; y: -99999999px; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-alt--mobile { position: static; left: 0; top: 0; } } /* ------------------------------------------------------------ *\ Section-alt Def \* ------------------------------------------------------------ */ .section-alt--def { padding: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-alt--def { padding: 6.9rem 0 6.6rem; } } .section-alt--def .slider__clip { padding: 11.5rem 0 16.1rem; } @media (max-height: 960px) { .section-alt--def .slider__clip { padding: 4.7rem 0 7.2rem; } } @media (max-width: 1399px) { .section-alt--def .slider__clip { padding: 4.7rem 0 7.2rem; } } @media (max-width: 1023px) { .section-alt--def .slider__clip { padding: 0; } } /* ------------------------------------------------------------ *\ Section-articles \* ------------------------------------------------------------ */ .section-articles { padding: 9.9rem 0 14.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles { padding: 6.2rem 0 8.2rem; } } .section-articles .h4 { font-size: 3.3rem; letter-spacing: .075rem; color: #4B4B4B; padding-bottom: 1.7rem; border-bottom: .1rem solid #707070; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles .h4 { font-size: 1.8rem; display: inline-block; letter-spacing: .03rem; padding-bottom: 0.8rem; } } .section-articles .section__head .h5 { font-size: 2.7rem; padding-left: 1rem; letter-spacing: .064rem; padding: 0 0 1.3rem 1rem; border-bottom: .1rem solid #707070; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles .section__head .h5 { font-size: 1.8rem; display: inline-block; letter-spacing: .03rem; padding-bottom: 0.8rem; } } .section-articles .section__head .h5 + .h5 { margin-top: 7.5rem; border-bottom: 0; padding: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles .section__head .h5 + .h5 { margin-top: 5.8rem; } } .section-articles .section__head { display: inline-block; margin-bottom: 6.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles .section__head { margin-bottom: 5.3rem; } } .section-articles .section__inner { padding: 0 7.3rem 0 5.3rem; /* large Desktop */ } @media (max-width: 1399px) { .section-articles .section__inner { padding: 0; } } .section-articles .section__head { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles .section__head { text-align: center; width: 100%; } } /* ------------------------------------------------------------ *\ Section-articles--alt \* ------------------------------------------------------------ */ .section-articles--alt { padding: 7.3rem 0 1.4rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles--alt { padding-top: 5.2rem; padding-bottom: 10rem !important; } } .section-articles--alt .section__inner { padding: 0; } .section-articles--alt .section__head { margin-bottom: 4.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles--alt .section__head { margin-bottom: 4rem; } } .section-articles--alt .section__head--alt { max-width: 64rem; margin-bottom: 7rem; } .section-articles--alt .section__head--alt h2 { font-size: 4.2rem; display: inline-block; font-family: Big-Caslon, sans-serif; color: #4B4B4B; letter-spacing: .09rem; padding-bottom: 1.2rem; border-bottom: .1rem solid #707070; margin-bottom: 5.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles--alt .section__head--alt h2 { font-size: 2.6rem; margin-bottom: 3.5rem; } } .section-articles--alt .section__head--alt br { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-articles--alt .section__head--alt br { display: none; } } .section-articles--alt .section__head--alt p { line-height: 1.75; color: #626161; margin-bottom: 0; } .section-articles--alt .section__head--alt p + p { margin-top: 2.8rem; } .section-articles--pb-alt { padding-bottom: 3.2rem; } .section-articles--pb-alt:after { display: none; } .section-articles--pb-dev { padding-bottom: 2.5rem; } .section-articles--pb-dev:after { display: none; } /* ------------------------------------------------------------ *\ Section-more \* ------------------------------------------------------------ */ .section-articles--more .section__inner::before { width: 100%; height: 2px; display: block; content: ''; background-color: #d9dad9; margin-top: 3rem; margin-bottom: 11rem; } .section-articles--more .grid--dev .grid__col { max-width: none; } @media (max-width: 640px) { .section-articles--more .section__inner::before { display: none } .section-articles--more .grid--dev .grid__col:last-of-type { padding-bottom: 0; } } @media (min-width: 767px) { .section-articles--more .tile__entry { display: none; } } /* ------------------------------------------------------------ *\ Section-default \* ------------------------------------------------------------ */ .section-default { padding: 10.6rem 0 13.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default { padding: 5.4rem 0 6.1rem; } } .section-default .h2 { font-size: 4.8rem; display: inline-block; color: #575757; letter-spacing: .26rem; font-weight: 500; padding: 0 3.2rem 2.2rem; font-family: Big-Caslon, sans-serif; position: relative; /* Mobile */ } .section-default .h2:after { content: ''; width: 100%; height: .2rem; background-color: #DDBD78; position: absolute; left: 50%; top: 100%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .h2:after { width: 70%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .h2 { font-size: 2.9rem; letter-spacing: .2rem; padding: 0 1rem 2.1rem; } } .section-default .h2 + p { margin-top: 5.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .h2 + p { margin-top: 2.8rem; font-size: 1.4rem; line-height: 1.86 !important; } } .section-default p { line-height: 1.75; color: #626161; margin-bottom: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default p { font-size: 1.4rem; line-height: 1.86 !important; } } .section-default p a { font-weight: 700; text-decoration: none; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .section-default p a:hover { color: #000; } .section-default .section__link { font-weight: 700; text-decoration: none; position: relative; padding-bottom: .4rem; overflow: hidden; display: inline-block; vertical-align: middle; line-height: 1; } .section-default .section__link:after { content: ''; width: 100%; height: .1rem; background-color: #575757; position: absolute; left: 0; top: calc(100% - .3rem); -webkit-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .section-default .section__link:hover:after { width: 0; } .section-default p + p { margin-top: 2.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default p + p { margin-top: 2.5rem; } } .section-default .section__head { max-width: 61rem; margin: 0 auto 10.2rem; text-align: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head { margin-bottom: 3.8rem; max-width: 100% !important; } } .section-default .section__head p { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head p { max-width: 100% !important; } } .section-default .section__head--alt { max-width: 51.1rem; margin-bottom: 9.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--alt { margin-bottom: 6rem; } } .section-default .section__head--dev { margin-bottom: 8.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--dev { margin-bottom: 6.3rem; } } .section-default .section__head--primary { margin-bottom: 8.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--primary { margin-bottom: 4rem; } } .section-default .section__head--primary .h2 { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--primary .h2 { line-height: 1.38; padding-bottom: 3.3rem; } .section-default .section__head--primary .h2:after { width: 90%; } } .section-default .section__head--primary .h2 + p { margin-top: 5.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--primary .h2 + p { margin: 2.9rem 0 0; } } .section-default .section__head--primary p { max-width: 51.1rem; margin-left: auto; margin-right: auto; } .section-default .section__head--base { padding-top: .2rem; max-width: 53.1rem; margin: 0 auto 15.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--base { margin-bottom: 8rem; } } .section-default .section__head--base .h2 { line-height: 1.05; padding: 0 3.9rem 3.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--base .h2 { padding: 0 0 3.2rem; line-height: 1.38; } } .section-default .section__head--base .h2 + p { margin-top: 5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--base .h2 + p { margin: 3.1rem -0.6rem 0; } } .section-default .section__head--base p + .btn { margin-top: 6rem; font-size: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__head--base p + .btn { margin-top: 4.1rem; min-width: 100%; font-size: 1.2rem; padding: 1.7rem 1rem 1.8rem; } } .section-default .section__body { padding: 0 1rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-default .section__body { padding: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__body { padding: 0 .8rem; } } .section-default .section__body--dev { max-width: 67.9rem; margin: 0 auto; padding: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__body--dev { margin: 0 -1rem; } } .section-default .section__body--alt { max-width: 76.4rem; margin: 0 auto; padding: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__body--alt { margin: 0 -1.3rem; } } .section-default .section__body--base { max-width: 137.4rem; margin: 0 auto; padding: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__body--base { margin: 0 -1.3rem; } } .section-default .section__form { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__form { margin: 0 -.5rem; } } .section-default .section__title { font-size: 2.8rem; color: #000; letter-spacing: .11rem; margin-bottom: 4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__title { font-size: 2.4rem; letter-spacing: .15rem; margin-bottom: 2.6rem; } } .section-default .section__entry + .section__title { margin-top: 6.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__entry + .section__title { margin-top: 4.2rem; } } .section-default .section__entry + .section__title--alt { margin-top: 6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__entry + .section__title--alt { margin-top: 4.2rem; } } .section-default .section__content { padding-bottom: 9.2rem; position: relative; color: #626161; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__content { text-align: center; padding-bottom: 6.3rem; } } .section-default .section__content:after { content: ''; width: 10rem; height: .2rem; background-color: #DDBD78; position: absolute; bottom: 0; left: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__content:after { left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .section-default .section__content:last-child:after { display: none; } .section-default .section__content + .section__content { margin-top: 9.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__content + .section__content { margin-top: 6.22rem; } } .section-default .section__content--alt { padding-bottom: 7.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__content--alt { padding-bottom: 6rem; } } .section-default .section__content--alt + .section__content--alt { margin-top: 6.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__content--alt + .section__content--alt { margin-top: 5.9rem; } } .section-default .section__list { list-style-type: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list { text-align: left; font-size: 1.4rem; padding-left: 1.7rem; margin-top: 3.8rem; } } .section-default .section__list li { letter-spacing: .044rem; position: relative; line-height: 1.75; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list li { line-height: 1.86; letter-spacing: .04rem; } } .section-default .section__list li:before { content: ''; display: inline-block; margin-right: .6rem; vertical-align: middle; margin-bottom: .4rem; background-color: #626161; font-size: 3rem; width: .4rem; height: .4rem; border-radius: 50%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list li:before { margin: 0 .6rem .7rem 0; width: .2rem; height: .2rem; } } .section-default .section__list li + li { margin-top: 2.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list li + li { margin-top: 2.7rem; } } .section-default p + .section__list { margin-top: 4.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default p + .section__list { margin-top: 4.4rem; } } .section-default .section__list + p { margin-top: 4.9rem; } .section-default .section__list--alt { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--alt { padding-left: .4rem; } } .section-default .section__list--alt li + li { margin-top: .5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--alt li + li { margin-top: 1.3rem; } } .section-default p + .section__list--alt { margin-top: 3.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default p + .section__list--alt { margin-top: 2.4rem; } } .section-default .section__list--alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--alt-mobile { display: inline-block; margin: 0 auto; padding-left: 0; } } .section-default .section__list--alt-mobile li + li { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--alt-mobile li + li { margin-top: .1rem; } } .section-default p + .section__list--dev { margin-top: .9rem; } .section-default .section__list--dev + p { margin-top: 3.6rem; } .section-default .section__list--base { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--base { padding-left: .8rem; } } .section-default .section__list--base li { line-height: 1.38; } .section-default .section__list--base li + li { margin-top: 1.5rem; } .section-default p + .section__list--base { margin-top: 4.5rem; } .section-default .section__list--base + p { margin-top: 8.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default .section__list--base + p { margin-top: 7rem; } } /* ------------------------------------------------------------ *\ Section-default modificators \* ------------------------------------------------------------ */ .section-default--pb-alt { padding-bottom: 12.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pb-alt { padding-bottom: 7.6rem; } } .section-default--pb-base { padding-bottom: 11.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pb-base { padding-bottom: 8.5rem; } } .section-default--pb-dev { padding-bottom: 6.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pb-dev { padding-bottom: 2rem; } } .section-default--pb-clear { padding-bottom: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pb-clear { padding-bottom: 0; } } .section-default--pt-alt-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pt-alt-mobile { padding-top: 4.7rem; } } .section-default--pt-base-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--pt-base-mobile { padding-top: 4.9rem; } } .section__body--home-products .article + .article { margin-top: 11rem; } @media (max-width: 1199px) { .section__body--home-products .article.article--reversed + .article { margin-top: 7rem; } } /* ------------------------------------------------------------ *\ Section-default--alt \* ------------------------------------------------------------ */ .section-default--alt { padding-bottom: 9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--alt { padding: 5.2rem 0 9.3rem; } } .section-default--alt .section__head { max-width: 76rem; margin-bottom: 11.9rem; /* mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--alt .section__head { margin-bottom: 0; } } .section-default--alt .section__head .h2 + p { margin-top: 4.9rem; } .section-default--alt .section__head p + p { /* mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-default--alt .section__head p + p { margin-top: 3.4rem; } } .section-default--alt .section__body { padding: 0; } /* ------------------------------------------------------------ *\ Section-dev \* ------------------------------------------------------------ */ .section-dev { padding: 12.6rem 0 20rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .section-dev { padding: 10rem 0 !important; } } @media (max-width: 1023px) { .section-dev { padding: 6rem 0 !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev { background-color: transparent !important; padding: 0 !important; } } .section-dev p { color: #626161; line-height: 1.75; letter-spacing: .05rem; margin-bottom: 0; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .section-dev p { font-size: 1.4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev p { font-size: 1.3rem; line-height: 1.6 !important; } } .section-dev p + p { margin-top: 2.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev p + p { margin-top: 2.3rem; } } .section-dev .section__toggle-trigger { display: none; font-size: 1.2rem; position: relative; text-transform: uppercase; padding: 2.2rem 2.2rem 2.5rem; /* Mobile */ } .section-dev .section__toggle-trigger:after { content: ''; width: calc(100vw - 4.2rem); height: .1rem; background-color: #D5D5D5; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 0; } .section-dev .section__toggle-trigger a { display: block; position: relative; text-decoration: none; color: #2E2E2E !important; letter-spacing: .2rem; } .section-dev .section__toggle-trigger span { letter-spacing: .18rem; color: #2E2E2E; } .section-dev .section__toggle-trigger i { position: absolute; right: 1rem; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__toggle-trigger { display: block; } } .section-dev .section__toggle-content { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__toggle-content { padding: 4.6rem 0; position: absolute; left: -9999999px; top: -9999999px; } } .section-dev .section__toggle-content--alt { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__toggle-content--alt { padding: 5.5rem 0; } } .section-dev .section__image { height: 40.8vw; background-size: cover; background-position: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__image { height: 85.9vw; background-image: url("/assets/images/temp/img-1.jpg") !important; } } .section-dev .section__image--alt { height: 37.7vw; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__image--alt { display: none; } } .section-dev .section__image--base { margin: -5rem 0 -3.1rem; height: 52.3vw; /* XL desktop */ /* Mobile */ } @media (max-width: 1880px) { .section-dev .section__image--base { margin: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__image--base { height: 86.1vw; } } .section-dev .section__title { color: #0F0F0F; letter-spacing: .1rem; margin-bottom: 3.2rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .section-dev .section__title { margin-bottom: 2.5rem !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__title { font-size: 2.4rem; letter-spacing: .06rem; } } .section-dev .section__title--alt { font-size: 3rem; letter-spacing: .12rem; position: relative; padding: 0 .8rem .8rem .3rem; border-bottom: .1rem solid #707070; display: inline-block; } .section-dev .section__title--dev { margin-bottom: 4.8rem; } .section-dev .section__content { padding-bottom: 22.5rem; /* XL desktop */ /* Large Desktop */ /* Mobile */ } @media (max-width: 1880px) { .section-dev .section__content { padding-bottom: 10% !important; } } @media (max-width: 1399px) { .section-dev .section__content { padding-bottom: 7% !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__content { padding-bottom: 7.8rem !important; } } .section-dev .section__content:last-child { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__content:last-child { padding-bottom: 0 !important; } } .section-dev .section__content--clear { padding: 0; } .section-dev .section__content--clear-mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__content--clear-mobile { padding-bottom: 0 !important; } } .section-dev .section__content--alt { padding-bottom: 13rem; } .section-dev .section__content--pb-dev { padding-bottom: 15.8rem; } .section-dev .section__content--pb-def { padding-bottom: 16.7rem; } .section-dev .section__image + .section__content { padding: 16.8rem 0 0; /* XL desktop */ /* Large Desktop */ /* Mobile */ } @media (max-width: 1880px) { .section-dev .section__image + .section__content { padding-top: 10%; } } @media (max-width: 1399px) { .section-dev .section__image + .section__content { padding-top: 7%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__image + .section__content, .section__content-make-of { padding-top: 7.6rem; } } .section-dev .section__image--dev { width: 81vw; margin: 0 auto; height: 44.7vw; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__image--dev { height: 75.8vw; width: 87.3vw; margin: 1.5rem 0 3.1rem; } } .section-dev .section__image--primary { height: 55.9vw; } .section-dev .section__list { padding: 4rem 0 10.5rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .section-dev .section__list { padding: 1rem 0 6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__list { padding: 0; } } .section-dev .section__features { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__features { display: none; } } .section-dev .section__features .section__title { margin-bottom: 5rem; } .section-dev .section__features--alt { margin-top: 3.3rem; } .section-dev .section__brands { padding: 17.7rem 0 0; max-width: 116.6rem; width: 100%; margin: 0 auto; /* Large Desktop */ /* Small Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-dev .section__brands { padding: 10% 0 0; } } @media (max-width: 1199px) { .section-dev .section__brands { padding: 7% 0 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__brands { display: none; } } .section-dev .section__brands--alt { padding-top: 10.3rem; text-align: center; } .section-dev .section__callout-content { display: inline-block; max-width: 76.2rem width: 100%; margin-right: 9%; vertical-align: middle; /* Large Desktop */ /* Small Desktop */ } @media (max-width: 1399px) { .section-dev .section__callout-content { margin-right: 4%; } } @media (max-width: 1199px) { .section-dev .section__callout-content { max-width: 60rem; } } .section-dev .section__callout-content .section__title { margin-bottom: 3rem; } .section-dev .section__callout-content p { color: #626161; letter-spacing: .05rem; } .section-dev .section__callout .btn { margin-top: .6rem; min-width: 29.7rem; padding: 2.4rem 1rem 1.8rem; letter-spacing: .28rem; letter-spacing: .2rem; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .section-dev .section__callout .btn { margin-top: 2rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__callout .btn { margin-top: 3.1rem; padding: 1.4rem 1rem 1rem; min-width: 100%; } } .section-dev .section__callout .btn span { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev .section__callout .btn span { font-size: 1.1rem; letter-spacing: .16rem; margin-right: -.9rem; } } .section-dev.is-current .section__toggle-content { position: static; left: 0; top: 0; } .section-dev.is-current .section__toggle-trigger i { -webkit-transform: rotate(180deg) translate(0, 50%); -ms-transform: rotate(180deg) translate(0, 50%); transform: rotate(180deg) translate(0, 50%); } .section__slider--mobile { position: relative; display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section__slider--mobile { display: block; width: 100%; overflow: hidden; padding: 5rem 0 0rem; } } /* ------------------------------------------------------------ *\ Section-dev--alt \* ------------------------------------------------------------ */ .section-dev--alt { padding: 14.2rem 0 12rem; } .section-dev--alt .section__title--dev { margin-bottom: 6.8rem; } @media (max-width: 1520px) { .section-dev--alt .section__title--dev { margin: 0 -3.5rem; } } .section-dev--alt .section__title--alt { margin-bottom: 6.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__title--alt { font-size: 2.4rem; } } .section-dev--alt .section__nav { padding: 2.7rem 0 .5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__nav { display: none; } } .section-dev--alt .section__nav--mobile { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__nav--mobile { display: block; padding: 1.1rem 0; } } .section-dev--alt .section__image { margin-top: 14rem; text-align: center; height: auto; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .section-dev--alt .section__image { margin-top: 7rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__image { display: none; } } .section-dev--alt .section__image--dev { width: 100%; display: block; margin: 12rem auto 0; /* Mobile */ } .section-dev--alt .section__image--dev img { width: 86.6vw; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__image--dev { display: none; } } .section-dev--alt .section__body { padding: 5.8rem 0 11.8rem; position: relative; opacity: 0; visibility: hidden; margin-top: 9.7rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .section-dev--alt .section__body { margin-top: 3.9rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__body { padding: 0 0 6.2rem; } } .section-dev--alt .section__body:before { content: ''; width: 75%; height: .1rem; background-color: #A9A9A9; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__body:before { display: none; } } .section-dev--alt .section__body:after { content: ''; width: 74%; height: .1rem; background-color: #A9A9A9; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .section-dev--alt .section__body.visible { -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; opacity: 1; visibility: visible; } .section-dev--alt .section__foot { padding: 9.3rem 0 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__foot { display: none; } } .section-dev--alt .section__foot--mobile { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__foot--mobile { display: block; padding-top: 5.2rem; } } .section-dev--alt .section__foot--mobile .btn--x-small { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--alt .section__foot--mobile .btn--x-small { padding: 1.5rem 1rem 1.2rem; } } .section-dev--alt .section__foot--mobile .btn--x-small span { margin-right: 1rem; } /* ------------------------------------------------------------ *\ Section-dev--base \* ------------------------------------------------------------ */ .section-dev--base { padding: 17.8rem 0 22rem; } .section-dev--base .section__title { font-size: 3.6rem; letter-spacing: .05rem; border-bottom: 0; margin-bottom: 9.6rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--base .section__title { font-size: 2.4rem; } } .section-dev--base .section__body { padding: 0; margin: 0; } .section-dev--base .section__body:before, .section-dev--base .section__body:after { display: none; } .section__body--no-border::before { display: none; } .section__body--no-border::after { display: none; } /* ------------------------------------------------------------ *\ Section--black \* ------------------------------------------------------------ */ .section--black { background-color: #1A1A1A; } .section--black * { /* Mobile */ } @media (min-width: 767.02px) { .section--black * { color: #fff !important; } } /* ------------------------------------------------------------ *\ section-dev--padding-alt \* ------------------------------------------------------------ */ .section-dev--padding-alt { padding: 20.6rem 0 20.2rem; } .section-dev--padding-base { padding: 22.8rem 0 20.9rem; } .section-dev--padding-def { padding: 20.6rem 0 15.5rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-dev--padding-def { padding-bottom: 4rem !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--padding-def { padding-bottom: 0 !important; } } .section-dev--padding-secondary { padding: 15.9rem 0 0; padding-bottom: 0 !important; } .section-dev--padding-default { padding: 19.6rem 0 10rem; } .section-dev--padding-dev { padding: 11.2rem 0 13.9rem; } .section-dev--padding-dev .section__body { margin-top: 9.1rem; padding-bottom: 13.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--padding-dev .section__body { padding-bottom: 6.4rem; } } .section-dev--padding-primary { padding: 17rem 0 6.6rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-dev--padding-primary { padding-bottom: 4rem !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--padding-primary { padding-bottom: 0 !important; } } .section-dev--pb-primary { padding-bottom: 13.8rem; } .section-dev--pt-alt { padding-top: 9.8rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-dev--pt-alt { padding-top: 4rem !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--pt-alt { padding-top: 0 !important; } } .section-dev--pb-alt { padding-bottom: 9.8rem; } .section-dev--pb-dev { padding-bottom: 9rem; /* Large Desktop */ } @media (max-width: 1399px) { .section-dev--pb-dev { padding-bottom: 4rem !important; } } .section-dev--pb-base { padding-bottom: 18.1rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-dev--pb-base { padding-bottom: 4rem !important; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--pb-base { padding-bottom: 0 !important; } } /* ------------------------------------------------------------ *\ Section-dev--last \* ------------------------------------------------------------ */ .section-dev--last.is-current .section__toggle-content { position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--last.is-current .section__toggle-content { padding-bottom: 7.5rem; } } .section-dev--last.is-current .section__toggle-content:after { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-dev--last.is-current .section__toggle-content:after { content: ''; height: .1rem; width: calc(100vw - 7.2rem); background-color: #D5D5D5; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 0; } } /* ------------------------------------------------------------ *\ Section-dev modificators \* ------------------------------------------------------------ */ .section-dev--white { background-color: #fff; } /* ------------------------------------------------------------ *\ Section-form \* ------------------------------------------------------------ */ .section-form { padding: 10.7rem 0 10rem; background-color: #1A1A1A; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-form { padding: 5.5rem 0 7.6rem; } } /* ------------------------------------------------------------ *\ Section-map \* ------------------------------------------------------------ */ .section-map { /* padding: 10.5rem 0 0; */ /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map { /* padding: 5.2rem 0 0; */ } } .section-map .section__title { font-family: Big-Caslon, sans-serif; font-size: 4.8rem; font-weight: 500; position: relative; text-align: center; padding-bottom: 2.5rem; color: #575757; letter-spacing: .28rem; margin-bottom: 8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__title { font-size: 2.9rem; padding-bottom: 2.2rem; letter-spacing: .13rem; margin-bottom: 4.9rem; } } .section__body-head-searching { flex: 1; display: flex; align-items: center; } @media (max-width: 764px) { .section__body-head-searching { flex-direction: column; padding-right: 0; margin-top: 16px; align-items: flex-start; } .section__search { margin-right: 0 !important; } .section__body-head-filtering { margin-top: 20px; } } @media (max-width: 400px) { .section__body-head-radios { flex-direction: column; align-items: flex-start !important; } } .section__body-head-radios h5 { padding-bottom: 5px; width: 160px; text-align: left; } @media (max-width: 640px) { .section__body-head-radios h5 { width: 100%; text-align: left; } } @media (max-width: 640px) { .section-map .fixed { position: relative !important; top: 0 !important; border: none !important; } } .section-map .js-nav-secondary.fixed + .section__body-grid { margin-top: 0 !important; } .section__body-head-searching .current-location { width: 20px; } .filter-disabled { pointer-events: none; opacity: 0.40; } .section__body-head-filtering { display: flex; flex: 1; align-items: center; justify-content: space-between; padding-right: 4rem; } .section__body-head button { appearance: none; border: solid black 1px; align-self: center; text-transform: uppercase; padding: 1.5rem 4rem; font-size: 1.2rem; letter-spacing: 1px; color: #2e2e2e; flex: 1; max-width: 220px; background-color: transparent; } @media (max-width: 764px) { .section__body-head-filtering { margin-top: 0.5rem !important; } .section__body-head button { margin-left: 15px; padding: 0.75rem 2rem; min-width: 100px; flex: inherit; max-width: none; margin-top: 0; } } @media (max-width: 640px) { .section__body-head-filtering button { margin-left: 0; margin-top: 1.5rem; padding: 0.75rem 2.5rem; min-width: 0; flex: inherit; max-width: none; margin-right: 1rem; } } @media (max-width: 1150px) { .section__body-head { flex-direction: column; } .section__body-head-filtering { margin-top: 20px; } } .section__body-head-radios { display: flex; align-items: center; margin-right: 3rem; } .section__body-head-radios-vertical-options { flex-direction: column; justify-items: flex-start; align-items: flex-start !important; } .section__body-head-radios-vertical-options input { margin-right: 8px; } @media (max-width: 640px) { .section__body-head-radios { width: 100%; flex-direction: row; flex-wrap: wrap; margin-right: 0; } .section__body-head-radios > div:first-of-type input { margin-left: 0; } } @media (max-width: 400px) { .section__body-head-radios { margin-right: 0; } } .section__body-head-radios h5 { font-family: Walsheim, sans-serif; margin-bottom: 0; font-weight: 700; font-size: 1.5rem; margin-right: 1.5rem; } @media (max-width: 640px) { .section__body-head-radios h5 { padding-bottom: 1rem; } } .section__body-head-radios label { font-size: 1.75rem; padding: 0 1rem; } @media (max-width: 640px) { .section__body-head-radios label { font-size: 1.5rem; } } .section__body-head-radios > div { padding-right: 24px; } .section__body-head-radios input { width: 15px; height: 15px; appearance: radio; -webkit-appearance: radio; -moz-appearance:radio; margin-right: 0; margin-left: 0; border-radius: 100px; } @media (max-width: 640px) { .section__body-head-radios > div { padding-right: 0; } .section__body-head-radios input { width: 13px; height: 13px; margin-right: 4px; margin-left: 18px; } } .section-map .section__title:after { content: ''; width: 24.6rem; height: .1rem; background-color: #DDBD78; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__title:after { width: 17.7rem; } } .section-map .section__body { max-height: 105.4rem; min-height: 60rem; background-color: #EDEFED; /* Tablet */ } @media (min-width: 1024px) { .section-map .section__body { height: calc(100vh - 272px); max-height: none; min-height: 0; } .section-map .section__body-grid { height: 100%; } .section-map .section__list { max-height: none !important; height: 100%; } .section-map .map { max-height: none !important; min-height: 0 !important; } } @media (max-width: 1023px) { .section-map .section__body { max-height: 100%; } } .section-map .section__body-head { /* padding: 4.9rem 4rem 4.8rem; */ padding: 2.9rem 4rem 2.8rem; max-width: 1600px; margin: auto; display: flex; text-align: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__body-head { padding: 2rem 3.2rem 1.8rem; } } .section-map .section__body-grid:not(.hidden) { display: -webkit-box; display: -ms-flexbox; display: flex; /* Tablet */ } @media (max-width: 1023px) { .section-map .section__body-grid:not(.hidden) { -ms-flex-direction: column; flex-direction: column; } } .section-map .section__aside { max-width: 63.2rem; -webkit-box-flex: 0; -ms-flex: 0 0 63.2rem; flex: 0 0 63.2rem; padding: 4.9rem 1.4rem 6.2rem 4.3rem; background-color: #fff; /* large Desktop */ /* small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .section-map .section__aside { max-width: 50rem; -webkit-box-flex: 0; -ms-flex: 0 0 50rem; flex: 0 0 50rem; } } @media (max-width: 1199px) { .section-map .section__aside { max-width: 40rem; -webkit-box-flex: 0; -ms-flex: 0 0 40rem; flex: 0 0 40rem; padding: 4.9rem 1.4rem 6.2rem; } } @media (max-width: 1023px) { .section-map .section__aside { max-width: 100%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__aside { padding: 3.5rem 0.6rem 6.2rem 3.1rem; } } .section-map .section__content { max-width: calc( 100% - 63.2rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc( 100% - 63.2rem); flex-basis: calc( 100% - 63.2rem); /* large Desktop */ /* small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .section-map .section__content { max-width: calc( 100% - 50rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc( 100% - 50rem); flex-basis: calc( 100% - 50rem); } } @media (max-width: 1199px) { .section-map .section__content { max-width: calc( 100% - 40rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc( 100% - 40rem); flex-basis: calc( 100% - 40rem); } } @media (max-width: 1023px) { .section-map .section__content { max-width: 100%; min-height: 80rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__content { min-height: 44.2rem; } } .section-map .section__list { max-height: 78rem; overflow-y: auto; } .section-map .section__list ul { counter-reset: pin; margin: -3.7rem 0; padding-right: .5rem; padding-bottom: 4rem; } .section-map .section__list li { list-style-type: none; padding: 3.7rem 0 4.2rem; border-bottom: .1rem solid #D3D3D3; } .section-map .section__list li .location .location__pin:before { /* counter-increment: pin; */ /* content: counter(pin); */ content: ' '; color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .section-map .field { width: 100%; height: 5.4rem; padding: 0 2.7rem; color: #626161; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .2rem; border: none; -webkit-box-shadow: inset 0 -.2rem 0 0 #DDBD78; box-shadow: inset 0 -.2rem 0 0 #DDBD78; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background-color: #fff; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .field { font-size: 1.4rem; letter-spacing: .15rem; padding: 0 2.9rem; } } .section-map .field:focus { -webkit-box-shadow: inset 0 0 0 .2rem #DDBD78; box-shadow: inset 0 0 0 .2rem #DDBD78; } .section-map .label { display: none; } .section-map .section__search { width: 100%; display: inline-block; vertical-align: middle; margin-right: 3.5rem; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1450px) { .section-map .section__search { max-width: 80rem; } } @media (max-width: 1199px) { .section-map .section__search { max-width: 70rem; } } @media (max-width: 1023px) { .section-map .section__search { max-width: 50vw; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .section__search { display: block; max-width: 100%; margin-bottom: 1.3rem; } } .section-map .section__btn { text-decoration: none; } .section-map .section__btn span { font-size: 1.4rem; letter-spacing: .04rem; } .section-map .section__btn i { margin-right: 1rem; display: inline-block; margin-bottom: .4rem; } .section-map .mCSB_inside > .mCSB_container { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-map .mCSB_inside > .mCSB_container { margin-right: 14px !important; } } /* ------------------------------------------------------------ *\ Section-news \* ------------------------------------------------------------ */ .section-news { padding: 4.9rem 0 7.7rem; } .section-news .section__inner { max-width: 170rem; margin: 0 auto; } .section-news .section__head { text-align: right; margin-bottom: 5.8rem; } @media (max-width: 530px) { .section-news .section__head .select--alt-dev { max-width: 100% !important; } } .section-news .section__head * { text-align: left; } .section-news .section__title { color: #0F0F0F; letter-spacing: .08rem; } .section-news .section__foot { padding: 5.2rem 0 6.8rem; text-align: center; } .section-news .section__btn { min-width: 22.8rem; padding: 2rem 1rem 1.6rem; } /* ------------------------------------------------------------ *\ Section-news--alt \* ------------------------------------------------------------ */ .section-news--alt { padding: 7.4rem 0 7.7rem; } .section-news--alt .section__head { margin-bottom: 7.4rem; } /* ------------------------------------------------------------ *\ Section-news--dev \* ------------------------------------------------------------ */ .section-news--dev { padding: 8.2rem 0 6.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-news--dev { padding: 5rem 0; } } .section-news--dev .section__title { padding-left: 14rem; /* Tablet */ } @media (max-width: 1023px) { .section-news--dev .section__title { padding-left: 0; } } .section-news--dev .section__head { margin-bottom: 10.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-news--dev .section__head { margin-bottom: 5rem; } } /* ------------------------------------------------------------ *\ Section-simple \* ------------------------------------------------------------ */ .section-simple { padding: 15.3rem 0 19.1rem; text-align: center; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .section-simple { padding: 10rem 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple { padding: 9.1rem 0; } } .section-simple p { line-height: 1.75; margin-bottom: 4.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple p { margin-bottom: 3.2rem; } } .section-simple .section__content { margin: 0 auto; max-width: 52.5rem; } .section-simple .section__content--dev p { color: #010707; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple .section__content--dev p { font-size: 1.4rem; color: #626161; } } .section-simple .section__title { max-width: 28.5rem; margin: 0 auto 5.3rem; padding-bottom: 4rem; position: relative; color: #2E2E2E; letter-spacing: .38rem; line-height: 1.15; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple .section__title { letter-spacing: .27rem; padding-bottom: 3.7rem; margin: 0px auto 3rem; } } .section-simple .section__title:after { content: ''; width: 12.6rem; height: .1rem; background-color: #DDBD78; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 100%; } .section-simple .section__entry { margin: 0 auto; } .section-simple .section__entry p { color: #626161; } /* ------------------------------------------------------------ *\ Section-simple--alt \* ------------------------------------------------------------ */ .section-simple--alt { padding: 9.3rem 0 2.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt { padding: 6.3rem 0 4rem; } } .section-simple--alt .section__head { margin-bottom: 4.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt .section__head { margin-bottom: 3.2rem; } } .section-simple--alt .section__title { font-size: 2.6rem; max-width: 100%; text-transform: none; font-weight: 500; display: inline-block; letter-spacing: .18rem; margin-right: 3.2rem; vertical-align: middle; margin-bottom: 0; padding-bottom: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt .section__title { font-size: 1.7rem; margin-right: 0; letter-spacing: .1rem; margin-bottom: 3.1rem; } } .section-simple--alt .section__title span { margin-right: .3rem; } .section-simple--alt .section__title span + i { margin-right: .2rem; } .section-simple--alt .section__title i + span { margin-right: 0; } .section-simple--alt .section__title:after { display: none; } .section-simple--alt .logo--mini { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt .logo--mini { width: 16%; height: auto; } } .section-simple--alt .btn { margin-top: -.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt .btn { min-width: 95%; padding: 1.4rem 1rem 1.3rem; } } .section-simple--alt .section__entry p { font-size: 1.4rem; line-height: 2; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--alt .section__entry p { font-size: 1.2rem; line-height: 1.83 !important; } } .section-simple--alt .section__entry { max-width: 53.7rem; width: 100%; } /* ------------------------------------------------------------ *\ Section-simple--dev \* ------------------------------------------------------------ */ .section-simple--dev { padding: 2.6rem 0 4.7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev { padding: 0.6rem 0 7.4rem; } } .section-simple--dev .section__content { max-width: 68rem; } .section-simple--dev .section__title { font-size: 1.6rem; font-family: Sofia-Pro, sans-serif; color: #626161; text-transform: none; letter-spacing: .12rem; padding-bottom: 4.3rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .section-simple--dev .section__title { padding-bottom: 2.5rem; margin-bottom: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__title { font-size: 1.2rem; letter-spacing: .08rem; /* Mobile */ } } @media (max-width: 767px) and (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) and (max-width: 767px), screen and (max-width: 767px) and (max-width: 812px) and (orientation: landscape), screen and (max-width: 812px) and (orientation: landscape) and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__title { margin-bottom: 3.6rem; } } .section-simple--dev .section__entry { padding-bottom: 7.2rem; position: relative; margin-bottom: 6rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .section-simple--dev .section__entry { padding-bottom: 2.5rem; margin-bottom: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__entry { padding-bottom: 0; margin-bottom: 3.7rem; } } .section-simple--dev .section__entry:after { content: ''; width: 12.6rem; height: .1rem; background-color: #DDBD78; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 100%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__entry:after { display: none; } } .section-simple--dev .section__entry p { margin-bottom: 0; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__entry p { font-size: 1.3rem; line-height: 1.75 !important; } } .section-simple--dev .section__btn { margin-bottom: 1.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--dev .section__btn { display: none; } } .section-simple--dev .section__foot p { margin-bottom: 4.2rem; } .section-simple--dev .section__foot p span { text-transform: uppercase; color: #707070; letter-spacing: .65rem; display: inline-block; vertical-align: middle; margin-right: .1rem; } .section-simple--dev .section__foot p a { width: 1.8rem; height: 1.8rem; display: inline-block; vertical-align: middle; border-radius: 50%; } .section-simple--dev .section__foot p a + a { margin-left: 1rem; } /* ------------------------------------------------------------ *\ Section-simple--pb-dev \* ------------------------------------------------------------ */ .section-simple--pb-dev { padding-bottom: 16.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-simple--pb-dev { padding-bottom: 7.5rem; } } /* ------------------------------------------------------------ *\ Section-slider \* ------------------------------------------------------------ */ .section-slider { background-color: #1A1A1A; padding: 14.7rem 0 10.2rem; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-slider { display: none; } } /* ------------------------------------------------------------ *\ section-slider--mobile \* ------------------------------------------------------------ */ .section-slider--mobile { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-slider--mobile { display: block; } } /* ------------------------------------------------------------ *\ Section-tiles-alt \* ------------------------------------------------------------ */ .section-tiles-alt { padding: 11rem 0 25.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-tiles-alt { padding: 4rem 0 15rem; } } .section-tiles-alt .section__inner { max-width: 156.1rem; margin: 0 auto; } /* ------------------------------------------------------------ *\ Section timeline \* ------------------------------------------------------------ */ .section-timeline { position: relative; margin: 0 0 20.6rem; padding: 10.9rem 0 0; /* Stuck */ /* Bottom */ } @media (max-width: 1880px) { .section-timeline .shell--large { padding: 0 110px; } } @media (max-width: 1023px) { .section-timeline .shell--large { padding: 0 8.56rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-timeline .shell--large { padding: 0 3.5rem; } } @media (max-width: 1199px) { .section-timeline .shell--large .shell { padding: 0; } } .section-timeline .section__head { padding-left: 5.56rem; max-width: 64.86rem; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-timeline .section__head { padding-left: 0; max-width: 100%; } } .section-timeline .section__title { font-size: 3.6rem; font-family: Big-Caslon, sans-serif; letter-spacing: 0.02em; margin-bottom: 3rem; } .section-timeline .section__head p { line-height: 1.75; } .section-timeline .section__foot { text-align: center; padding-top: 11rem; } .section-timeline .section__foot h2 { font-family: Big-Caslon, sans-serif; color: #ddbd78; letter-spacing: 0.02em; } .section-timeline.stuck .nav-timeline { position: fixed; /*top: 11rem;*/ } .section-timeline.stuck .nav-timeline > ul { margin: auto; } .section-timeline.bottom .nav-timeline { position: absolute; top: auto !important; bottom: 0; } /* ------------------------------------------------------------ *\ Section Modificatiors \* ------------------------------------------------------------ */ .section--gray { background-color: #EDEFED; } /* ------------------------------------------------------------ *\ Select \* ------------------------------------------------------------ */ .select { width: 100%; position: relative; border-radius: 0; } .select:after { content: ''; width: 1.1rem; height: 1.3rem; background-image: url("/assets/images/svg/arrow-down.svg"); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; right: 1.9rem; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: .3s; -o-transition: .3s; transition: .3s; pointer-events: none; } .select select::-ms-expand { display: none; } .select .select__head { position: relative; height: 5.4rem; } .select .select__head select { width: 100%; height: 100%; padding-right: 3.5rem; border-radius: 0; } .select .select__head option { display: none; opacity: 0; } .select .select__overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .select .select__body { position: absolute; left: 0; top: 100%; width: 100%; padding: 3.2rem 3rem; background-color: #F5F5F5; z-index: 10; opacity: 0; visibility: hidden; -webkit-transition: opacity .2s, visibility 0s .4s; -o-transition: opacity .2s, visibility 0s .4s; transition: opacity .2s, visibility 0s .4s; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .select .select__body { padding: 3.3rem 3rem 4rem; } } .select.open:after { -webkit-transform: rotate(180deg) translate(0, 50%); -ms-transform: rotate(180deg) translate(0, 50%); transform: rotate(180deg) translate(0, 50%); } .select.open select { -webkit-box-shadow: none; box-shadow: none; } .select.open .select__body { -webkit-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; visibility: visible; opacity: 1; } /* ------------------------------------------------------------ *\ Select--alt \* ------------------------------------------------------------ */ .select--alt { display: inline-block; max-width: 36rem; -webkit-box-shadow: 0 0 0 .2rem #DCBB7C; box-shadow: 0 0 0 .2rem #DCBB7C; font-size: 1.3rem; /* Tablet */ } @media (max-width: 1023px) { .select--alt { max-width: 25rem; } } .select--alt:after { right: 2.2rem; } .select--alt .select__head { height: 4.7rem; } .select--alt select { padding: 0 2.8rem; letter-spacing: .2rem; border: none; text-transform: uppercase; height: 4.7rem; } .select--alt .select__body { background-color: #fff; -webkit-box-shadow: 0 0 0 .2rem #DCBB7C; box-shadow: 0 0 0 .2rem #DCBB7C; } /* ------------------------------------------------------------ *\ Select--alt-dev \* ------------------------------------------------------------ */ .select--alt-dev { max-width: 30.2rem; } .select--alt-dev .select__head { height: 5.7rem; } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: calc(1678px + 3.5rem * 2); padding-left: 3.5rem; padding-right: 3.5rem; margin: auto; width: 100%; } .shell--large { max-width: calc(1750px + 3.5rem * 2); } @media (min-width: 860px) { .shell--large { padding-left: 4.5rem; padding-right: 4.5rem; } } .shell--small { max-width: calc(1432px + 3.5rem * 2); } .shell--small-1 { max-width: calc(1290px + 3.5rem * 2); } /* Shell Fluid */ .shell--fluid { max-width: none; } /* ------------------------------------------------------------ *\ Section--3D Render \* ------------------------------------------------------------ */ .section__render { align-items: center; margin-top: 10rem; margin-bottom: 0; } @media(max-width: 640px) { .section__render { margin-top: 0; } } .section__render h3 { color: #0F0F0F; max-width: 55rem; margin: auto; } @media(max-width: 640px) { .section__render h3 { margin-top: 3rem; } } .render-container { position: relative; padding-bottom: 80.1% !important; } .render-container iframe{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .render-text p { color: #0F0F0F; line-height: 1.5; } .render-text span { color: #929292; line-height: 1.5; font-weight: bold; } /* ------------------------------------------------------------ *\ Slider-dev \* ------------------------------------------------------------ */ .slider-dev { width: 100%; } .slider-dev .slider__scrollbar { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .slider__scrollbar { display: none; } } .slider-dev .slider__paging { display: none; text-align: center; position: absolute; height: 1.6rem; background-color: transparent; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .slider__paging { display: inline-block; } } .slider-dev .swiper-wrapper { padding-bottom: 8.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .swiper-wrapper { padding-bottom: 6.9rem; } } .slider-dev .swiper-container-horizontal > .swiper-scrollbar { top: auto; bottom: 2rem; left: 3.5rem; height: .2rem; background-color: #D1CFCC; overflow-y: visible; width: calc(100% - 7rem); } .slider-dev .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 .7rem; } } .slider-dev .swiper-pagination-bullet { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .swiper-pagination-bullet { opacity: 1 !important; background-color: #BABAB8; } } .slider-dev .swiper-pagination-bullet-active { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .swiper-pagination-bullet-active { background-color: #DDBD78; position: relative; } .slider-dev .swiper-pagination-bullet-active:after { content: ''; width: 1.6rem; height: 1.6rem; -webkit-box-shadow: 0 0 0 .1rem #DDBD78; box-shadow: 0 0 0 .1rem #DDBD78; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-49%, -49%); -ms-transform: translate(-49%, -49%); transform: translate(-49%, -49%); } } .slider-dev .swiper-scrollbar-drag { position: absolute; left: 0; top: -.3rem; height: .8rem; background-color: #DDBD78; border-radius: 0; } .slider-dev .slider__slide { padding-right: 1.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-dev .slider__slide { padding-right: 0; } } .slider-dev .tile { width: 100%; margin: 0 1rem; /* Large Desktop */ } @media (max-width: 1399px) { .slider-dev .tile { margin: 0; } } /* ------------------------------------------------------------ *\ Slider-dev--alt \* ------------------------------------------------------------ */ .slider-dev--alt .swiper-wrapper { padding-bottom: 11.9rem; } /* ------------------------------------------------------------ *\ Slider-dev--base \* ------------------------------------------------------------ */ .slider-dev--base .slider__slides { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* ------------------------------------------------------------ *\ Slider Dev Def \* ------------------------------------------------------------ */ .slider-dev--def { position: relative; width: 100%; min-height: 485px; margin: auto; } .slider-dev--def .tile { margin: 0; } .slider-dev--def .tile p { padding: 0; } .slider-dev--def .slider__clip { /* position: absolute; top: 0; left: 0; width: 100%; overflow-x: hidden; */ } .slider-dev--def .slider__clip.stuck { position: fixed; top: auto; max-width: calc( 1750px + 3.5rem * 2); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; border-left: 35px solid #fff; border-right: 35px solid #fff; } .slider-dev--def .slider__clip.bottom { position: absolute; top: auto; bottom: 0; overflow-x: visible; /* Tablet */ } @media (max-width: 1023px) { .slider-dev--def .slider__clip.bottom { margin-bottom: 6rem; } } .slider-dev--def .slider__slides-inner { display: -webkit-box; display: -ms-flexbox; display: flex; will-change: transform; margin: 0 -98px 0 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } @media (max-height: 960px) { .slider-dev--def .slider__slides-inner { margin: 0 -57px 0 0; } } @media (max-width: 1399px) { .slider-dev--def .slider__slides-inner { margin: 0 -57px 0 0; } } .slider-dev--def .slider__slide { /* -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 98px 0 0; */ } @media (max-height: 960px) { .slider-dev--def .slider__slide { /* padding: 0 57px 0 0; } */ } @media (max-width: 1399px) { /* .slider-dev--def .slider__slide { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding: 0 57px 0 0; } */ } @media (max-width: 1023px) { /* .slider-dev--def .slider__slide { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } */ } .slider-dev--def .slider__scrollbar { position: relative; top: 0; margin-top: 57px; background: #D1CFCC; height: 2px; /* Tablet */ } @media (max-height: 960px) { .slider-dev--def .slider__scrollbar { margin-top: 20px; } } @media (max-width: 1023px) { .slider-dev--def .slider__scrollbar { margin-bottom: 2rem; } } .slider-dev--def .slider__scrollbar .swiper-scrollbar-drag { width: 135px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .swiper-text-only.slider-dev--def { min-height: 200px !important; } .swiper-text-only h2 { font-size: 2.5rem; } /* .swiper-text-only.slider-dev--def .slider__slide { padding: 0px 50px 0 0; */ } /* .slider-dev--def .slider-small .slider__slide { flex: 0 0 50%; max-width: 50%; } */ /* @media (max-width: 640px) { .slider-dev--def .slider-small .slider__slide { flex: 0 0 0%; max-width: 100%; } } */ .slider-dev--def .slider-small .slider__slides { max-width: 1000px; margin-left: auto; margin-right: auto; } .slider-up-links.slider-dev--def { min-height: 0 !important; } .swiper-scrollbar-drag > .swiper-scrollbar-drag::after { content: ''; background-image: url("/images/svg/arrow-right-gold.svg"); display: block; position: relative; width: 17px; height: 14px; background-size: contain; background-position: center; background-repeat: no-repeat; margin-top: 14px; margin-left: auto; margin-right: 9px; } /* ------------------------------------------------------------ *\ Slider Dev Mobile \* ------------------------------------------------------------ */ .slider-dev--mobile .slick-dots { text-align: center; margin-top: 47px; } .slider-dev--mobile .slick-dots li { display: inline-block; margin: 0 .4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: .1rem solid transparent; position: relative; } .slider-dev--mobile .slick-dots button { width: .8rem; height: .8rem; border-radius: 50%; background-color: #BABAB8; font-size: 0; border: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slider-dev--mobile .slick-dots .slick-active { border-color: #DDBD78; } .slider-dev--mobile .slick-dots .slick-active button { background: #DDBD78; } /* ------------------------------------------------------------ *\ Slider-product \* ------------------------------------------------------------ */ .slider-product .slider__clip { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; /* Tablet */ } @media (max-width: 1023px) { .slider-product .slider__clip { display: block; } } .slider-product.slider-product--legacy .slider__slides { max-width: 57%; -webkit-box-flex: 0; -ms-flex: 0 0 57%; flex: 0 0 57%; padding-top: 30%; position: relative; margin: 0 4.1rem 0 0; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .slider-product.slider-product--legacy .slider__slides { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; margin-right: 2rem; padding-top: 34%; } } @media (max-width: 1023px) { .slider-product .slider__slides { max-width: 100%; margin: 0 0 3rem; padding-top: 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .slider__slides { padding-top: 0; margin-bottom: 3.6rem; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .slider__slides { padding-top: 0; margin-bottom: 3.6rem; } } .slider-product .slider__slides .slider__slide { width: 100% !important; height: 100%; position: absolute; top: 50%; left: 50%; opacity: 0; -webkit-transition: opacity .4s, -webkit-transform .2s; transition: opacity .4s, -webkit-transform .2s; -o-transition: opacity .4s, transform .2s; transition: opacity .4s, transform .2s; transition: opacity .4s, transform .2s, -webkit-transform .2s; -webkit-transform: scale(0.85) translate(-50%, -50%); -ms-transform: scale(0.85) translate(-50%, -50%); transform: scale(0.85) translate(-50%, -50%); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .slider__slides .slider__slide { opacity: 1; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .slider__slides .slider__slide { opacity: 1; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } } .slider-product .slider__slides .is-current { /* Mobile */ } @media (min-width: 767.02px) { .slider-product .slider__slides .is-current { -webkit-transition: opacity .4s .2s, -webkit-transform .2s .2s; transition: opacity .4s .2s, -webkit-transform .2s .2s; -o-transition: transform .2s .2s, opacity .4s .2s; transition: transform .2s .2s, opacity .4s .2s; transition: transform .2s .2s, opacity .4s .2s, -webkit-transform .2s .2s; opacity: 1; -webkit-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (min-device-width: 850px) and (min-device-height: 767px) { .slider-product .slider__slides .is-current { -webkit-transition: opacity .4s .2s, -webkit-transform .2s .2s; transition: opacity .4s .2s, -webkit-transform .2s .2s; -o-transition: transform .2s .2s, opacity .4s .2s; transition: transform .2s .2s, opacity .4s .2s; transition: transform .2s .2s, opacity .4s .2s, -webkit-transform .2s .2s; opacity: 1; -webkit-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); } } .slider-product .slider__slides figure { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center bottom; padding-top: 56.9%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .slider__slides figure { padding-top: 56.9%; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .slider__slides figure { padding-top: 56.9%; } } .slider-product .slider__nav { max-width: 27%; -webkit-box-flex: 0; -ms-flex: 0 0 27%; flex: 0 0 27%; margin: 0 -1rem -1.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .slider-product .slider__nav { max-width: 30%; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; margin: 0 -.5rem -1rem; } } @media (max-width: 1023px) { .slider-product .slider__nav { max-width: 100%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .slider__nav { display: none; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .slider__nav { display: none; } } .slider-product.slider-product--legacy .slider__nav .slider__slide { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; height: 100%; padding: 0 1rem 1.2rem; /* Large Desktop */ /* Tablet */ } @media (max-width: 1399px) { .slider-product .slider__nav .slider__slide { padding: 0 .5rem 1rem; } } @media (max-width: 1023px) { .slider-product .slider__nav .slider__slide { max-width: 10%; -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; } } .slider-product .slider__nav a { display: inline-block; width: 100%; height: 100%; padding-top: 100%; background-size: cover; background-position: center bottom; } .slider-product .slider__paging { text-align: center; display: none; padding-bottom: .1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .slider__paging { padding-top: 10px; margin: 0 -.7rem; display: block; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .slider__paging { margin: 0 -.7rem; display: block; } } .slider-product .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 .7rem; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 .7rem; } } .slider-product .swiper-pagination-bullet { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .swiper-pagination-bullet { opacity: 1 !important; background-color: #BABAB8; } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .swiper-pagination-bullet { opacity: 1 !important; background-color: #BABAB8; } } .slider-product .swiper-pagination-bullet-active { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-product .swiper-pagination-bullet-active { background-color: #DDBD78; position: relative; } .slider-product .swiper-pagination-bullet-active:after { content: ''; width: 1.6rem; height: 1.6rem; -webkit-box-shadow: 0 0 0 .1rem #DDBD78; box-shadow: 0 0 0 .1rem #DDBD78; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-49%, -49%); -ms-transform: translate(-49%, -49%); transform: translate(-49%, -49%); } } @media screen and (orientation: landscape) and (min-device-width: 0px) and (max-device-width: 850px) and (max-device-height: 767px) { .slider-product .swiper-pagination-bullet-active { background-color: #DDBD78; position: relative; } .slider-product .swiper-pagination-bullet-active:after { content: ''; width: 1.6rem; height: 1.6rem; -webkit-box-shadow: 0 0 0 .1rem #DDBD78; box-shadow: 0 0 0 .1rem #DDBD78; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-49%, -49%); -ms-transform: translate(-49%, -49%); transform: translate(-49%, -49%); } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider { position: relative; margin-bottom: -.6rem; } .slider .slider__slide { height: 54.7vw; background-size: cover; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider .slider__slide { height: 85.7vw; } } .slider .slick-dots { display: inline-block; position: absolute; left: 50%; -webkit-transform: translate(-39%, 0); -ms-transform: translate(-39%, 0); transform: translate(-39%, 0); bottom: 5.1rem; margin: 0 -.4rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider .slick-dots { bottom: 3.5rem; } } .slider .slick-dots li { display: inline-block; margin: 0 .4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: .1rem solid transparent; position: relative; } .slider .slick-dots button { width: .9rem; height: .9rem; border-radius: 50%; background-color: #fff; font-size: 0; border: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slider .slick-dots .slick-active { border-color: #DDBD78; } /* ------------------------------------------------------------ *\ Slider--alt \* ------------------------------------------------------------ */ .slider--alt { width: 52.1vw; margin: 0 auto; position: static; /* Small Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1199px) { .slider--alt { width: 60vw; } } @media (max-width: 1023px) { .slider--alt { width: 70vw; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt { width: 72vw; } } .slider--alt .figcaption { position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: opacity 0s; -o-transition: opacity 0s; transition: opacity 0s; color: #fff; font-size: 1.6rem; font-family: Sofia-Pro, sans-serif; letter-spacing: .05rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .figcaption { font-size: 1.4rem; color: #0F0F0F; width: 100%; text-align: center; } } .slider--alt .slick-list { margin: 0 -5rem; overflow: visible; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .slider--alt .slick-list { margin: 0 -3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-list { margin: 0 -1.7rem; } } .slider--alt .slider__slides { height: 34.5vw; padding-bottom: 10rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .slider--alt .slider__slides { min-height: 48rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slider__slides { min-height: 40.7rem; padding-bottom: 8.8rem; } } .slider--alt .slick-cloned, .slider--alt .slick-slide { padding: 3vw 5rem; position: relative; display: inline-block; vertical-align: top; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; /* XL desktop */ /* Large Desktop */ /* Small Desktop */ /* Mobile */ } @media (max-width: 1880px) { .slider--alt .slick-cloned, .slider--alt .slick-slide { padding: 2.5vw 5rem; } } @media (max-width: 1399px) { .slider--alt .slick-cloned, .slider--alt .slick-slide { padding: 2.5rem 5rem; } } @media (max-width: 1199px) { .slider--alt .slick-cloned, .slider--alt .slick-slide { padding: 2.5rem 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-cloned, .slider--alt .slick-slide { padding: 2.9rem 1.7rem; } } .slider--alt .slick-cloned > div, .slider--alt .slick-slide > div { -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } .slider--alt .slick-cloned figure, .slider--alt .slick-slide figure { height: 100%; max-height: 23.5vw; background-size: cover; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .slider--alt .slick-cloned figure, .slider--alt .slick-slide figure { max-height: 100%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-cloned figure, .slider--alt .slick-slide figure { height: 25.7rem; } } .slider--alt .slick-cloned .slider__slide, .slider--alt .slick-slide .slider__slide { height: 23.8vw; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; /* Large Desktop */ } @media (max-width: 1399px) { .slider--alt .slick-cloned .slider__slide, .slider--alt .slick-slide .slider__slide { height: 32rem; } } .slider--alt .slick-cloned .figcaption, .slider--alt .slick-slide .figcaption { opacity: 0; } .slider--alt .slick-current { padding: 0 5rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .slider--alt .slick-current { padding: 0 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-current { padding: 0 1.7rem; } } .slider--alt .slick-current .slider__slide { height: 34.5vw; padding-bottom: 10rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .slider--alt .slick-current .slider__slide { min-height: 48rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-current .slider__slide { min-height: 40.7rem; padding-bottom: 8.8rem; } } .slider--alt .slick-current figure { height: 100%; max-height: 29.25vw; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .slider--alt .slick-current figure { min-height: 38rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-current figure { min-height: 32rem; height: 32rem; } } .slider--alt .slick-current .figcaption { -webkit-transition: opacity 0.4s 1s; -o-transition: opacity 0.4s 1s; transition: opacity 0.4s 1s; opacity: 1; } .slider--alt .slider__slides { position: static; } .slider--alt .slick-next, .slider--alt .slick-prev { position: absolute; position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -57%); -ms-transform: translate(0, -57%); transform: translate(0, -57%); width: 19%; background-color: transparent; border: none; color: transparent; opacity: 0; z-index: 2; height: 24vw; /* Large Desktop */ /* small Desktop */ /* mobile */ } @media (max-width: 1399px) { .slider--alt .slick-next, .slider--alt .slick-prev { width: 17%; -webkit-transform: translate(0, -60%); -ms-transform: translate(0, -60%); transform: translate(0, -60%); } } @media (max-width: 1199px) { .slider--alt .slick-next, .slider--alt .slick-prev { width: 14%; height: 31vw; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-next, .slider--alt .slick-prev { height: 26rem; width: 10%; } } .slider--alt .slick-next { left: auto; right: 0; } .slider--alt .slick-dots { bottom: 15.5rem; -webkit-transform: translate(-45%, 0); -ms-transform: translate(-45%, 0); transform: translate(-45%, 0); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-dots { bottom: 4.8rem; } } .slider--alt .slick-dots button { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-dots button { background-color: #DDBD78; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; opacity: .3; } } .slider--alt .slick-dots .slick-active button { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--alt .slick-dots .slick-active button { opacity: 1; } } /* ------------------------------------------------------------ *\ Slider--mobile \* ------------------------------------------------------------ */ .slider--mobile .slick-track { margin: 0; width: 100% !important; } .slider--mobile .slick-current { margin: 0 -20%; } .slider--mobile .slider__slide { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--mobile .slider__slide { min-width: 100vw; height: 40rem; text-align: center; display: block; } } .slider--mobile figure { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider--mobile figure { width: 40rem; height: 40rem; background-size: cover; display: inline-block; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { margin: 0; margin-top: 3rem; width: 100%; text-align: center; /* Tablet */ /* Mobile */ } @media (max-width: 1023px) { .socials { margin-top: 3rem; text-align: right; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .socials { display: none; } } .socials li { display: inline-block; list-style-type: none; padding: 0 1.35rem !important; } .socials li:before { display: none !important; } .socials a { display: inline-block; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; opacity: 1 !important; } .socials a:hover { opacity: .7 !important; } .socials a:after { display: none; } /* ------------------------------------------------------------ *\ Social--dev \* ------------------------------------------------------------ */ .socials--dev { text-align: left; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .socials--dev { display: block; } } .socials--dev p { display: inline-block; vertical-align: top; text-transform: uppercase; color: #010707; opacity: .65; font-size: 1.2rem; letter-spacing: .18rem; font-weight: 600; margin-right: 1.3rem; padding-top: .4rem; /* Mobile */ /* Mobile Small */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .socials--dev p { margin-right: 1rem; } } @media (max-width: 374px) { .socials--dev p { margin-right: 0; display: block; } } .socials--dev ul { display: inline-block; margin: 0 -.9rem !important; } .socials--dev li { padding: 0 .9rem !important; } .socials--dev-center { text-align: center; } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table { text-align: left; table-layout: fixed; vertical-align: top; } .table table td, .table table td * { vertical-align: top; } .table .select .select__body { text-align: left; } .table .h5 { font-size: 2.1rem; letter-spacing: .08rem; color: #000; /* Small Desktop */ } @media (max-width: 1199px) { .table .h5 { font-size: 1.8rem; } } .table .h3 { font-size: 2.8rem; color: #000; letter-spacing: .1rem; } .table .h6 { color: #404040; font-weight: 700; font-family: Walsheim, sans-serif; line-height: 1.75; } .table .table__image { padding-top: 58.5%; /* width: 63.5%; */ width: 85.5%; background-size: 100% auto; background-position: center; background-color: #fff; background-repeat: no-repeat; margin-left: -1.5rem; /* margin-bottom: 3.5rem; */ } .table .table__image--alt { padding-top: 66.7%; width: 78.2%; background-position: 50% 25%; margin-left: -1rem; } .table .table__btn { min-width: 18.8rem; font-size: 1.3rem; padding: 1.8rem 1rem 1.1rem .8rem; letter-spacing: .18rem; } .table .table__btn .ico-arrow-right { width: 1.2rem; height: 1.2rem; margin-left: .4rem; } .table tr th { padding-right: 2rem; } .table tr:nth-child(2) td { padding-bottom: 3rem; } .table tr:nth-child(n + 3) td { padding: 1.9rem 9rem 1rem 0; /* Large Desktop */ } @media (max-width: 1399px) { .table tr:nth-child(n + 3) td { padding-right: 4rem; } } .table tr:nth-child(n + 3) td:first-child { padding: 1.4rem 2rem 1.5rem 0; } .table tr:nth-child(n + 3) { border-bottom: .1rem solid #D3D3D3; } .table tr td:first-child { width: 21.2%; /* Small Desktop */ } @media (max-width: 1199px) { .table tr td:first-child { width: 18%; } } .table tr td:nth-child(2) { width: 41.3%; /* Tablet */ } @media (max-width: 1023px) { .table tr td:nth-child(2) { width: 41%; } } .table tr td:last-child { padding-right: 2.2rem; /* Large Desktop */ } @media (max-width: 1399px) { .table tr td:last-child { padding-right: 0; } } .table tr:nth-last-child(-n+2) { border-bottom: none; } /* ------------------------------------------------------------ *\ Testimonial \* ------------------------------------------------------------ */ .testimonial { padding: 5.3rem 0 15.1rem; border-top: .1rem solid #D3D3D3; border-bottom: .1rem solid #D3D3D3; height: 100%; position: relative; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .testimonial { padding: 4rem 0 11rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial { padding: 0 0 2rem !important; border-top: none; } } .testimonial blockquote { color: #0F0F0F; font-size: 2.8rem; font-family: Big-Caslon, sans-serif; line-height: 1.25; letter-spacing: .05rem; margin-bottom: 2.1rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .testimonial blockquote { font-size: 2.4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial blockquote { font-size: 1.5rem; font-family: Walsheim, sans-serif; letter-spacing: .03rem; line-height: 1.35; margin-bottom: 1.6rem; } } .testimonial br { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial br { display: none; } } .testimonial p { color: #626161; line-height: 1.25; max-width: 36rem; letter-spacing: .07rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial p { font-size: 1.3rem; letter-spacing: .04rem; padding-right: 7.5rem; } } .testimonial .btn { min-width: 29.7rem; padding: 2.1rem 1rem 1.6rem; letter-spacing: .28rem; position: absolute; left: .4rem; bottom: 7.5rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .testimonial .btn { bottom: 2.8rem !important; min-width: 100%; left: 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial .btn { bottom: 0 !important; position: relative; margin-top: 2rem; } } .testimonial .testimonial__link { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .testimonial .testimonial__link { display: inline-block; position: absolute; right: 0; bottom: 2.1rem; color: #DDBD78; font-size: 1.3rem; letter-spacing: .05rem; text-decoration: none; padding-bottom: .1rem; border-bottom: .1rem solid #DDBD78; } } .slider__testimonials { overflow: visible; } .slider__testimonials .btn { position: relative; bottom: 0 !important; left: 0 !important; max-width: 320px; } .slider__testimonials .swiper-slide { height: auto; max-width: 100%; } .slider__testimonials .testimonial { display: flex; flex-direction: column; text-align: left; border-bottom: none; } .slider__testimonials blockquote { margin-bottom: auto; } .slider__testimonials p { margin-top: 2rem; padding: 0 !important; } .js-slider-swiper-testimonials { position: relative; min-width: 0; } .js-slider-swiper-testimonials .slider__scrollbar { left: 1rem !important; right: 0; } @media (max-width: 1400px) { .js-slider-swiper-testimonials .slider__scrollbar { left: 0rem !important; } } /* ------------------------------------------------------------ *\ Product collection special section \* ------------------------------------------------------------ */ .col-section-special { border-top: .1rem solid #dbdbdb; padding: 9rem 0; } .col-section-special-p-img-mob { display: none; } .col-section-special__wrapper { display: flex; margin: -3rem; } .col-section-special__content { text-align: left; width: 33%; color: black; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 3rem; } .col-section-special__text { max-width: 400px; } .col-section-special__content h3 { border-bottom: solid black 1px; padding-bottom: 5px; display: inline-block; font-size: 2.6rem; padding-left: 0.5rem; padding-right: 0.5rem; } .col-section-special__content h2 { text-transform: uppercase; margin-bottom: 1.5rem; font-size: 3rem; letter-spacing: 1px; } .col-section-special__content h4 { font-size: 1.8rem; margin: 0; } .col-section-special__content p { font-family: Walsheim,sans-serif; font-weight: 400; font-size: 16px; color: #626161; line-height: 1.75; } .col-section-special__underline { width: 90px; height: 1px; display: inline-block; background-color: #dcbf7c; margin: 2.1rem 0 1.3rem; } .col-section-special__img { width: 66%; padding: 3rem; } .col-section-special__img-wrapper { display: flex; background-color: #e4e4e4; } .col-section-special__img img { object-fit: contain; margin-left: auto; max-width: 100%; } .col-section-special__content--mob { display: none; } .col-section-special__content .btn { margin-top: 4rem; color: #626161; width: 27.8rem; min-width: 0; max-width: 100%; } @media (max-width: 1100px) { .col-section-special__img-wrapper { padding: 6rem 3rem 0; } .col-section-special__content, .col-section-special__img { width: 50%; } } @media (max-width: 764px) { .col-section-special__wrapper { flex-direction: column-reverse; margin: -3.5rem; margin-top: 0; } .col-section-special-p-img-mob { display: block; } .col-section-special-p-img-desk { display: none; } .col-section-special { padding-bottom: 9rem; padding-top: 9rem; margin-top: 5rem; } .col-section-special__content { width: 100%; text-align: center; } .col-section-special__underline { width: 40%; } .col-section-special__content--mob { display: block; width: 100%; padding-bottom: 2rem; } .col-section-special__img { width: 100%; } .col-section-special__img-wrapper { display: flex; flex-direction: column; padding: 0; background-color: transparent; } .col-section-special__img img { max-width: 100%; width: 100%; margin: auto; padding: 0; } .col-section-special__text { max-width: none; color: #626161; font-size: 1.2rem; line-height: 1.9!important; padding: 0 1.3rem; } .col-section-special__content--desk h2, .col-section-special__content--desk h3, .col-section-special__content--desk h4, .col-section-special__content--desk .col-section-special__underline { display: none; } .col-section-special__content .btn { margin-left: auto; margin-right: auto; } .col-section-special { background-color: white; padding-top: 0; padding-bottom: 8rem; margin-bottom: -2rem; border-bottom: .1rem solid #dbdbdb; } .col-section-special__content h2 { font-size: 3.5rem; color: #2e2e2e; letter-spacing: .3rem; margin-bottom: .2rem; } .col-section-special__content h4 { font-size: 1.2rem; font-family: Sofia-Pro,sans-serif; color: #626161!important; text-transform: none; letter-spacing: .12rem; } } /* ------------------------------------------------------------ *\ Testimonial--alt \* ------------------------------------------------------------ */ .testimonial--alt { padding-bottom: 15.9rem; } .testimonial--alt .btn { bottom: 6.4rem; } /* ------------------------------------------------------------ *\ Tile-alt \* ------------------------------------------------------------ */ .tile-alt { position: relative; max-width: 41.5rem; padding-bottom: 7.4rem; height: 100%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile-alt { max-width: 50rem; margin: 0 auto; } } .tile-alt p { line-height: 1.75; margin-bottom: 4rem; } .tile-alt .tile__head { position: relative; padding-bottom: 3.4rem; margin-bottom: 3.1rem; padding-right: 7rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile-alt .tile__head { height: initial !important; } } .tile-alt .tile__head:after { content: ''; width: 12.6rem; height: .1rem; background-color: #DDBD78; position: absolute; left: 0; bottom: 0; } .tile-alt .tile__head .h4 { font-size: 2.7rem; letter-spacing: .07rem; color: #0F0F0F; margin-bottom: 1.1rem; } .tile-alt .tile__head .h6 { font-family: Sofia-Pro, sans-serif; font-size: 1.5rem; letter-spacing: .12rem; } .tile-alt .tile__head .tile__head-icon { position: absolute; top: 0; right: .5rem; } .tile-alt .tile__head .tile__head-icon--alt { right: -.4rem; } .tile-alt .tile__head .tile__head-icon--dev { right: 1.2rem; } .tile-alt .tile__btn { position: absolute; left: 0; bottom: 0; min-width: 27.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile-alt .tile__btn { min-width: 100%; } } .tile-alt--dev { max-width: 100%; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile-alt--dev { max-width: 50rem; } } /* ------------------------------------------------------------ *\ Tile-alt--def \* ------------------------------------------------------------ */ .tile-alt--def { max-width: 38rem; padding-bottom: 0; } .tile-alt--def span { color: #010707; opacity: .5; letter-spacing: .25rem; text-transform: uppercase; font-size: 1.2rem; } .tile-alt--def p { line-height: 1.58; margin-bottom: 5rem; } @media (max-width: 1500px) { .tile-alt--def p { margin-bottom: 2rem; } } .tile-alt--def .tile__head { margin-bottom: 3.4rem; padding-bottom: 3.9rem; padding-right: 0; /* Large Desktop */ } @media (max-width: 1500px) { .tile-alt--def .tile__head { margin-bottom: 2rem; padding-bottom: 2rem; } } @media (max-width: 1399px) { .tile-alt--def .tile__head { margin-bottom: 1.2rem; padding-bottom: 1.2rem; } } .tile-alt--def .tile__head span { font-size: 1.5rem; display: block; letter-spacing: .32rem; margin-bottom: 4.9rem; /* Large Desktop */ } @media (max-width: 1500px) { .tile-alt--def .tile__head span { margin-bottom: 2rem; } } @media (max-width: 1399px) { .tile-alt--def .tile__head span { margin-bottom: 1.2rem; } } .tile-alt--def .tile__head .h4 { font-size: 2.4rem; letter-spacing: .1rem; color: #000000; margin-bottom: 0; } .tile-alt--def .tile__btn { position: static; min-width: 22.8rem; /* Large Desktop */ } @media (max-width: 1399px) { .tile-alt--def .tile__btn { padding: 1.5rem 1rem 1.2rem; } } .tile-alt--def .tile__foot { padding-top: 4.2rem; } @media (max-width: 1500px) { .tile-alt--def .tile__foot { padding-top: 2rem; } } /* ------------------------------------------------------------ *\ Tile \* ------------------------------------------------------------ */ .tile { position: relative; padding-bottom: 9.1rem; /* Tablet */ } @media (max-width: 1023px) { .tile { padding-bottom: 4rem; } } .tile:hover figure { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .tile figure { background-size: cover; background-position: center; position: absolute !important; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; z-index: 0; } .tile figure a { position: absolute !important; background-position: center bottom; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-size: cover; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; opacity: 1; z-index: 1; } .tile figure a + a { opacity: 0; z-index: 0; } .tile figure:hover a { opacity: 0; } .tile figure:hover a + a { opacity: 1; } .tile > span { display: block; color: #010707; opacity: .5; font-size: 1.5rem; letter-spacing: .3rem; margin-bottom: 1.8rem; } .tile .h5 { line-height: 1.17; letter-spacing: .09rem; margin-bottom: 1.2rem; } .tile .h3 { font-size: 3.2rem; text-transform: uppercase; letter-spacing: .24rem; margin-bottom: 1rem; padding-left: .3rem; font-family: Canvas, sans-serif; } .tile .h3 + p { font-family: Big-Caslon, sans-serif; font-size: 1.9rem; font-weight: 500; letter-spacing: .11rem; margin-bottom: 3.8rem; /* Tablet */ } @media (max-width: 1023px) { .tile .h3 + p { margin-bottom: 2rem; font-size: 1.6rem; } } .tile p { line-height: 1.59; margin-bottom: 1.6rem; /* Tablet */ } @media (max-width: 1023px) { .tile p { font-size: 1.4rem; } } .tile small { color: #DDBD78; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .23rem; } .tile .tile__image { position: relative; padding-top: 84.5%; overflow: hidden; } .tile .tile__image--base figure { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .tile .tile__image--overlay { padding-top: 88.7%; } .tile .tile__image--overlay a { width: 100%; height: 100%; background-color: #000000; opacity: .47; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .tile .tile__image--overlay a:hover { opacity: .2; } .tile .tile__image + span { margin-top: 3.5rem; /* Tablet */ } @media (max-width: 1023px) { .tile .tile__image + span { margin: 1.5rem 0; } } .tile .tile__image + .tile__content { margin-top: 4.8rem; padding-left: 2.3rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .tile .tile__image + .tile__content { padding-left: 0; } } @media (max-width: 1023px) { .tile .tile__image + .tile__content { margin-top: 2rem; } } .tile .tile__image + .tile__content--alt { padding-left: 0; margin-top: 4.4rem; } .tile .tile__image + .tile__content--alt p { margin-bottom: 0; } .tile .tile__image--overlay + .tile__content--alt { margin-top: 3.3rem; padding-left: 0; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .tile .tile__image--overlay + .tile__content--alt { padding-left: 0; } } @media (max-width: 1023px) { .tile .tile__image--overlay + .tile__content--alt { margin-top: 2rem; } } .tile .tile__image--overlay + .tile__content--alt .h3 { padding-left: 0; } .tile .tile__image--overlay + .tile__content--alt .tile__btn { margin-top: 4.8rem; } .tile .tile__entry { padding-top: 2.2rem; max-width: 44rem; position: relative; margin-top: 2.9rem; } .tile .tile__entry:before { content: ''; width: 30%; height: .1rem; background-color: #DDBD78; position: absolute; left: 0; top: 0; } .tile .tile__entry p { line-height: 1.75; } .tile .tile__entry + .tile__btn { margin-top: 4rem; min-width: 27.8rem; } .tile .tile__entry + .tile__btn--alt { min-width: 32.8rem; } .tile .tile__entry + .tile__btn--dev { width: 100%; /* XL desktop */ } @media (max-width: 1880px) { .tile .tile__entry + .tile__btn--dev { min-width: 27.8rem; } } .tile .tile__entry + .tile__btn--dev em { font-style: normal; /* XL desktop */ } @media (max-width: 1880px) { .tile .tile__entry + .tile__btn--dev em { display: none; } } .tile p + .tile__btn { padding: 1.9rem 1rem 1.1rem; min-width: 24.6rem; /* Tablet */ } @media (max-width: 1023px) { .tile p + .tile__btn { min-width: 100%; } } .tile p + .tile__btn span { font-size: 1.4rem; } /* ------------------------------------------------------------ *\ Tile--base \* ------------------------------------------------------------ */ .tile--base .h5 { color: #000; } .tile--base-alt { height: 100%; padding-bottom: 5rem; position: relative; border-bottom: .1rem solid #A9A9A9; /* Small Desktop */ } .section-news .tile--base-alt { border-bottom: 0; } @media (max-width: 1199px) { .tile--base-alt { padding-bottom: 4rem; } } .tile--base-alt span { letter-spacing: .25rem; margin-bottom: 1.7rem; display: block; } .tile--base-alt small.tile_tags span { display: inline-block; position: relative; font-size: inherit; color: inherit; margin: 0; letter-spacing: inherit; opacity: inherit; } .tile_tags span { margin-right: 0.5rem !important; } .tile--base-alt small.tile_tags span:last-of-type { display: none; } .tile--base-alt br { /* Tablet */ } @media (max-width: 1023px) { .tile--base-alt br { display: none; } } .tile--base-alt .tile__image { padding-top: 71.2%; } .tile--base-alt .tile__body { padding: 3.8rem 2.3rem 0; /* Small Desktop */ } @media (max-width: 1199px) { .tile--base-alt .tile__body { padding: 2rem 1rem 0; } } .tile--base-dark { border-bottom: 0; } .tile--base-dark .tile__image { padding-top: 105%; } .tile--base-dark .tile__body { padding: 3.7rem 2rem 0 0; } .tile--base-dark .tile__body .h5 { color: #fff; } .tile--base-dark .tile__body p, .tile--base-dark .tile__body span { color: #747474; } .tile--base-dark .tile__body span { margin-bottom: 1.9rem; } a.tile__body { text-decoration: none; } /* ------------------------------------------------------------ *\ Tile--alt \* ------------------------------------------------------------ */ .tile--alt { display: inline-block; width: 45rem; padding-bottom: 0; /* Large Desktop */ /* Small Desktop */ /* Tablet */ } @media (max-width: 1399px) { .tile--alt { width: 28vw; } } @media (max-width: 1199px) { .tile--alt { width: 40vw; } } @media (max-width: 1023px) { .tile--alt { width: 35vw; } } .tile--alt + .tile--alt { /* Large Desktop */ } @media (max-width: 1399px) { .tile--alt + .tile--alt { margin-left: 3.5rem; } } .tile--alt .tile__image { padding-top: 46%; margin-bottom: 5.1rem; /* Tablet */ /* Mobile */ } .slider__specifications .tile--alt .tile__image { background-color: #edefed; } .slider__specifications .slider__slide { height: initial !important; } .slider__specifications { align-items: stretch !important; } .slider__specifications .tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; } .slider__specifications .tile .tile__image { width: 100%; } @media (max-width: 1023px) { .tile--alt .tile__image { margin-bottom: 5.1rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--alt .tile__image { padding-top: 52.2%; } } .tile--alt .tile__image figure { background-size: cover; } .tile--alt .tile__image--alt { margin-bottom: 3.9rem; } .tile--alt .tile__image--dev { padding-top: 48.5%; margin-bottom: 6.2rem; } .tile--alt .tile__image--dev figure { background-size: cover; width: calc(100% + 0.6rem); left: -.3rem; } .tile--alt .tile__btn-mobile { display: none; margin-top: 1.9rem; min-width: 18.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--alt .tile__btn-mobile { display: inline-block; } } .tile--alt .h4 { margin-bottom: 2.7rem; color: #0F0F0F; /* large Desktop */ /* Tablet */ } @media (max-width: 1399px) { .tile--alt .h4 { margin-bottom: 1.5rem; } } @media (max-width: 1023px) { .tile--alt .h4 { font-size: 2.9rem; margin-bottom: 1.9rem; } } .tile--alt p { padding: 0 3rem; line-height: 1.75; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .tile--alt p { line-height: 1.6; padding: 0; } } @media (max-width: 1023px) { .tile--alt p { font-size: 1.3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--alt p { line-height: 1.7 !important; } } .tile--alt figure { background-position: bottom center; background-size: auto; background-repeat: no-repeat; mix-blend-mode: multiply; background-size: cover; } .tile--alt .h4 + .btn { margin-top: 1.6rem; } /* ------------------------------------------------------------ *\ Tile--nodificatior \* ------------------------------------------------------------ */ .tile--center { text-align: center; } .tile--clear { padding-bottom: 0; } /* ------------------------------------------------------------ *\ Tile--mobile \* ------------------------------------------------------------ */ .tile--mobile { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile { padding-bottom: 3rem; } } .tile--mobile .tile__image + .tile__content { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile .tile__image + .tile__content { margin-top: .7rem; } } .tile--mobile .h3 { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile .h3 { font-size: 2rem; padding: 0; margin-bottom: .5rem; } } .tile--mobile .h3 + p { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile .h3 + p { font-size: 1.2rem; margin-bottom: 1rem; } } .tile--mobile p + .tile__btn { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile p + .tile__btn { padding: .6rem .7rem .5rem; } } .tile--mobile p + .tile__btn span { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile p + .tile__btn span { font-size: 1rem; letter-spacing: .15rem; } } .tile--mobile .tile__content--base { color: #000 !important; } h2.section__title--similar { font-size: 3.4rem; } /* ------------------------------------------------------------ *\ Tile--mobile-alt \* ------------------------------------------------------------ */ .tile--mobile-alt { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt { text-align: center; padding-bottom: 0; } } .tile--mobile-alt .h3 { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .h3 { font-size: 4rem; color: #2E2E2E; letter-spacing: .26rem; margin-bottom: .2rem; } } .tile--mobile-alt .h3 + p { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .h3 + p { font-size: 1.2rem; font-family: Sofia-Pro, sans-serif; color: #626161 !important; text-transform: none; letter-spacing: .12rem; padding-bottom: 0; font-weight: 400; } } .tile--mobile-alt .tile__image { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__image { display: none; } } .tile--mobile-alt .tile__content--alt { /* Mobile */ } .tile--mobile-alt .tile__content--alt .h3 + p, .tile--mobile-alt .tile__content--alt .h3 { color: #000; } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__content--alt { margin-top: 0 !important; } } .tile--mobile-alt .tile__entry .tile__image { display: none; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__entry .tile__image { display: block; padding-top: 91.5%; margin: 0 auto 3rem; } } .tile--mobile-alt .tile__entry { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__entry { margin-top: 1.9rem; padding-top: 3.2rem; max-width: 100%; } } .tile--mobile-alt .tile__entry:before { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__entry:before { left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 40%; } } .tile--mobile-alt .tile__entry p { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__entry p { font-size: 1.2rem; line-height: 1.9 !important; padding: 0 1.3rem; } } .tile--mobile-alt .tile__entry + .tile__btn { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .tile--mobile-alt .tile__entry + .tile__btn { margin-top: 3rem; min-width: 20.4rem; } } /* ------------------------------------------------------------ *\ Line \* ------------------------------------------------------------ */ .timeline { background-color: #eaeaea; position: absolute; } .timeline--vertical { width: 2px; height: 100%; } .timeline--horizontal { width: 100%; height: 2px; } .timeline--bottom { bottom: 0; } .timeline--right { right: 0; } .timeline--left { left: 0; } .timeline--ver-half { height: 44%; } .timeline--1 { left: 20.7rem; } .timeline--2 { right: 3.3rem; width: 81.3%; } /* ------------------------------------------------------------ *\ video \* ------------------------------------------------------------ */ .video { position: relative; overflow: hidden; background-color: #EDEFED; } .video:hover .ico-play { -webkit-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); } .video .video__poster { display: inline-block; width: 100%; height: 52.1vw; overflow: hidden; position: relative; background-size: cover; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .video .video__poster { height: 95.8vw; } } .video video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -o-object-fit: cover; object-fit: cover; z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .video .ico-play { display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .video .ico-play { width: 3.2rem; height: 3.2rem; } } .video.focus video { opacity: 1; visibility: visible; z-index: 1; } /* ------------------------------------------------------------ *\ Widget-dev \* ------------------------------------------------------------ */ .widget-dev { border: .1rem solid #DDBD78; padding: 7.9rem 7.7rem 8.5rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .widget-dev { padding: 5rem 4rem; } } @media (max-width: 1023px) { .widget-dev { padding: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget-dev { padding: 4rem 2rem; } } .widget-dev p { line-height: 1.75; letter-spacing: .06rem; } .widget-dev .widget__title { font-size: 2.5rem; letter-spacing: .05rem; color: #0F0F0F; margin-top: .3rem; margin-right: -4rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .widget-dev .widget__title { margin-bottom: 3rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget-dev .widget__title { margin-bottom: 2rem; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widget { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget { padding: 0 1.3rem; } } .widget .h4 { font-size: 2.8rem; line-height: 1.25; letter-spacing: .06rem; color: #0F0F0F; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .widget .h4 { font-size: 2.6rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget .h4 { font-size: 1.7rem; font-family: Walsheim, sans-serif; letter-spacing: .03rem; } } .widget p { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget p { font-size: 1.3rem; line-height: 1.54 !important; } } .widget .h4 + p { margin-top: 2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget .h4 + p { margin-top: 1.3rem; } } .widget p + p { margin-top: 3.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget p + p { margin-top: 3.5rem; } } .widget p:nth-child(4) { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget p:nth-child(4) { margin-top: 2rem; } } .widget .widget__inner { padding: 5.3rem 0 4.8rem; border-top: .1rem solid #D3D3D3; border-bottom: .1rem solid #D3D3D3; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget .widget__inner { padding: 3.9rem 0 !important; margin-top: none; border-bottom: .1rem solid #D3D3D3 !important; } } .widget .widget__btn { font-size: 1.3rem; min-width: 17.3rem; margin-top: 2rem; letter-spacing: .2rem; padding: 1.7rem 1rem 1.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widget .widget__btn { margin-top: 3rem !important; min-width: 100%; padding: 1.7rem 1rem 1.8rem; font-size: 1.2rem; letter-spacing: .24rem; } } .widget:nth-child(n + 4) .widget__inner { padding: 5.7rem 0 5.9rem; border-top: none; border-bottom: .1rem solid #D3D3D3; /* Tablet */ } @media (max-width: 1023px) { .widget:nth-child(n + 4) .widget__inner { padding: 5.3rem 0 4.8rem; border-bottom: none; } } .widget:nth-child(n + 4) .widget__btn { margin-top: 3.7rem; /* Tablet */ } @media (max-width: 1023px) { .widget:nth-child(n + 4) .widget__btn { margin-top: 2rem; } } .widget:nth-child(n + 2) .widget__inner { /* Tablet */ } @media (max-width: 1023px) { .widget:nth-child(n + 2) .widget__inner { border-top: none; border-bottom: .1rem solid #D3D3D3; } } /* ------------------------------------------------------------ *\ Widget--dev \* ------------------------------------------------------------ */ .widget--dev .widget__inner { padding-bottom: 6.6rem; } /* ------------------------------------------------------------ *\ Widgets \* ------------------------------------------------------------ */ .widgets { padding-bottom: 12.1rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets { padding-bottom: 3.7rem; } } .widgets .h3 { color: #0F0F0F; letter-spacing: .08rem; margin-bottom: 3.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .h3 { text-align: center; font-size: 2.4rem; letter-spacing: .15rem; margin-bottom: 2.7rem; } } .widgets .widgets__head { margin-bottom: 5.5rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__head { margin-bottom: 1.5rem; } } .widgets .widgets__nav { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__nav { padding: 0 1rem; } } .software-selector { cursor: pointer; } .widgets .widgets__select { cursor: pointer; display: inline-block; max-width: 36rem; -webkit-box-shadow: 0 0 0 .2rem #DCBB7C; box-shadow: 0 0 0 .2rem #DCBB7C; font-size: 1.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__select { height: 5.35rem; -webkit-box-shadow: none; box-shadow: none; border: .1rem solid #DDDDDD; border-bottom: .2rem solid #DCBB7C; max-width: 100% !important; display: block; background-color: #fff; } } .widgets .widgets__select:after { right: 2.2rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__select:after { right: 1.6rem; } } .widgets .widgets__select .select__head { height: 4.7rem; } .widgets .widgets__select select { padding: 0 2.8rem; letter-spacing: .2rem; border: none; text-transform: uppercase; height: 4.7rem; width: calc(100% - 2rem); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__select select { height: 5.35rem; } } .widgets .widgets__select + .widgets__select { max-width: 25.3rem; margin-left: 2.9rem; cursor: pointer; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__select + .widgets__select { margin: 2.2rem 0 0; } } .widgets .widgets__select .select__body { background-color: #fff; -webkit-box-shadow: 0 0 0 .2rem #DCBB7C; box-shadow: 0 0 0 .2rem #DCBB7C; } .widgets .widgets__body { margin: 0 -5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .widgets .widgets__body { margin: 0 -4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__body { display: block; margin: 0; } } .widgets .widgets__col { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; vertical-align: top; padding: 0 5rem; /* Large Desktop */ /* Mobile */ } @media (max-width: 1399px) { .widgets .widgets__col { padding: 0 4rem; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widgets__col { max-width: 100%; padding: 0; } } .widgets .widgets__col .widget .widget__inner { border-bottom: none; } .widgets .widgets__col .widget:last-child .widget__inner { border-bottom: .1rem solid #D3D3D3; } .widgets .widget:last-child .widget__inner { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets .widget:last-child .widget__inner { border-bottom: none !important; } } .widgets__documentation { margin-left: -2rem !important; margin-right: -2rem !important; } .widgets__documentation .docs-grid-item { width: 50%; padding: 0 !important; } .widgets__documentation .widget__inner { border-top: none !important; border-bottom: none !important; } .docs-grid-item { border-top: .1rem solid #D3D3D3; } .docs-grid-item .widget__inner, .widgets--alt .widget.docs-grid-item .widget__inner { padding-left: 2rem !important; padding-right: 2rem !important; } .mixitup-page-list { text-align: center; } .mixitup-page-list button { appearance: none; cursor: pointer; background: transparent; border: none; font-size: 1.75rem; padding: 0rem 0.5rem; } .no-results { display: none; } @media (max-width: 767px) { .widgets__documentation .docs-grid-item { width: 100%; } } /* ------------------------------------------------------------ *\ widgets--alt \* ------------------------------------------------------------ */ .widgets--alt { position: relative; padding: 15rem 0 14.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets--alt { padding: 4.8rem 0 2.6rem; } } .widgets--alt > * { position: relative; z-index: 1; } .widgets--alt .widgets__head { z-index: 2; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets--alt .widgets__head { margin-bottom: 1rem; } } .widgets--alt:after { content: ''; height: 100%; width: 100vw; background-color: #F5F5F5; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; pointer-events: none; } .widgets--alt .widgets__select .select__body { background-color: #fff; } .widgets--alt .widget { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; padding: 0 4.9rem; /* Large Desktop */ /* Tablet */ /* Mobile */ } @media (max-width: 1399px) { .widgets--alt .widget { padding: 0 4rem; } } @media (max-width: 1023px) { .widgets--alt .widget { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets--alt .widget { max-width: 100%; padding: 0 1.3rem; } } .widgets--alt .widget .widget__inner { padding-bottom: 5.9rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .widgets--alt .widget .widget__inner { padding: 4.6rem 0 !important; border-top: none; } } /* ------------------------------------------------------------ *\ legacy product grid \* ------------------------------------------------------------ */ .legacy-collection-grid .tile { height: 100%; display: flex; flex-direction: column; } .legacy-collection-grid .tile__content { flex: 1; display: flex; flex-direction: column; } .legacy-collection-grid .tile__entry { margin-bottom: 4.8rem; } .legacy-collection-grid .tile__btn { margin-top: auto !important; } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { position: relative; min-height: 100vh; overflow: hidden; } /* ------------------------------------------------------------ *\ Wrapper-initial \* ------------------------------------------------------------ */ .wrapper--initial .header { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .wrapper--initial .header .progress { display: block; } .wrapper--initial .header.is-active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* ------------------------------------------------------------ *\ Wrapper--dev \* ------------------------------------------------------------ */ .wrapper--dev .header { padding-bottom: 4rem; } .wrapper--dev .header:after { content: 'LEGACY PRODUCT'; width: 18.2rem; height: 4rem; background-color: #DDBD78; color: #575757; position: absolute; right: 3.7rem; bottom: 1px; -webkit-transition: 100%; -o-transition: 100%; transition: 100%; border-radius: 0 0 .5rem .5rem; text-align: center; padding: 1.4rem 0; font-size: 1.4rem; letter-spacing: .15rem; -webkit-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.16); box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.16); -webkit-transition: 0s; -o-transition: 0s; transition: 0s; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .wrapper--dev .header:after { left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .wrapper--dev .header.is-active { -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } .wrapper--dev .progress { display: block; } .wrapper--dev-alt .progress { display: none; } .wrapper--dev-alt .header { padding-bottom: 0; } .wrapper--dev-alt .header:after { display: none; } .wrapper--dev-base .progress { display: none; } .wrapper--dev-base .bar { display: block; } .wrapper--dev-base .header { padding-bottom: 0; } .wrapper--dev-base .header:after { display: none; } /* ------------------------------------------------------------ *\ Image-single \* ------------------------------------------------------------ */ .image-single { max-height: 75.2rem; height: 39.4vw; background-size: cover; background-position: center; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .image-single { height: 40rem; } } .image-single.image-single--size2 { max-height: 74.1rem; } /* ------------------------------------------------------------ *\ About lower video \* ------------------------------------------------------------ */ .about-low-vid__wrapper { position: relative; padding-bottom: 56%; } .about-low-vid__wrapper iframe { position: absolute; min-width: 101%; min-height: 101%; width: auto; height: auto; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -o-object-fit: cover; object-fit: cover; z-index: 0; } /* ------------------------------------------------------------ *\ Section-story \* ------------------------------------------------------------ */ .section-story { padding: 12.6rem 0 19.5rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .section-story { padding: 12rem 0 10rem; } } @media (max-width: 1023px) { .section-story { padding: 8rem 0; } } .section-story p { line-height: 1.88; letter-spacing: .082rem; margin-bottom: 3rem; } .section-story .section__head { margin-bottom: 5.5rem; } .section-story .section__head span { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .45rem; color: #DDBD78; display: block; margin-bottom: 2.2rem; } .section-story .section__head .section__title { color: #0F0F0F; letter-spacing: .06rem; font-weight: 500; padding-left: .4rem; /* Large Desktop */ } @media (max-width: 1399px) { .section-story .section__head .section__title { padding-left: 0; } } .section-story .section__content p { padding-right: 3rem; /* Tablet */ } @media (max-width: 1023px) { .section-story .section__content p { padding-right: 0; } } .section-story .section__content + .section__content { margin-top: 10.8rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .section-story .section__content + .section__content { margin-top: 5rem; } } @media (max-width: 1023px) { .section-story .section__content + .section__content { margin-top: 1rem; } } .section-story .section__content--sticky + .section__content { margin-top: 15.9rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .section-story .section__content--sticky + .section__content { margin-top: 8rem; } } @media (max-width: 1023px) { .section-story .section__content--sticky + .section__content { margin-top: 4rem; } } .section-story .section__content--sticky + .section__content p { padding-right: 0; } .section-story .section__image--size1 { padding-top: 63%; width: 100%; background-size: cover; background-position: center; } .section-story .section__content--sticky .section__content-inner { padding: 0 31.5rem 0 2.5rem; position: relative; /* Large Desktop */ /* mobile */ } @media (max-width: 1399px) { .section-story .section__content--sticky .section__content-inner { padding: 0 28rem 0 0; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-story .section__content--sticky .section__content-inner { padding: 0; } } .section-story .section__content--sticky .section__entry { max-width: 21.8rem; /* mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .section-story .section__content--sticky .section__entry { max-width: 100%; margin-top: 2rem; } } .section-story .section__content--sticky p { line-height: 1.75; padding-right: 0; letter-spacing: .05rem; } /* ------------------------------------------------------------ *\ Section-widgets-dev \* ------------------------------------------------------------ */ .section-widgets-dev { padding: 20.1rem 0 23.3rem; /* Small Desktop */ /* Tablet */ } @media (max-width: 1199px) { .section-widgets-dev { padding: 10rem 0; } } @media (max-width: 1023px) { .section-widgets-dev { padding: 8rem 0; } } .section-widgets-dev .section__title { margin-bottom: 8.2rem; letter-spacing: .09rem; color: #0F0F0F; } .section-widgets-dev .section__body { padding: 0 2.6rem 0 .2rem; /* Small Desktop */ } @media (max-width: 1199px) { .section-widgets-dev .section__body { padding-right: 0; } } .section-widgets-dev .section__widget + .section__widget { margin-top: 8.2rem; } /* ------------------------------------------------------------ *\ slider-mobile \* ------------------------------------------------------------ */ .slider-mobile .slider__slide { text-align: center; min-width: 80vw; height: 122vw; } .slider-mobile .slider__slide figure { height: 80%; background-size: cover; display: block; } .slider-mobile .slider__slide figcaption { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slider-mobile .slick-current { margin: 0; } /* ------------------------------------------------------------ *\ Slider-news \* ------------------------------------------------------------ */ .slider-news { background-color: #1A1A1A; padding: 7.5rem 0 7.5rem; margin-bottom: 5.8rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news { padding: 5rem 0; margin-bottom: 4rem; } } .slider-news .slider__clip { margin: 0 -.5rem; } .slider-news .slider__slides { position: relative; padding-bottom: 2.3rem; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slider__slides { padding-bottom: 3rem; } } .slider-news .slider__title { font-size: 2.7rem; font-weight: 500; border-bottom: 0.1rem solid #fff; color: #fff; display: inline-block; margin-bottom: 7rem; padding: 0 .5rem 1rem; letter-spacing: .08rem; } .slider-news .slick-list { margin: 0 -3.5rem; /* Small Desktop */ } @media (max-width: 1199px) { .slider-news .slick-list { margin: 0 -2rem; } } .slider-news .slick-slide { padding: 0 3.5rem; /* Small Desktop */ } @media (max-width: 1199px) { .slider-news .slick-slide { padding: 0 2rem; } } .slider-news .slick-dots { display: inline-block; position: absolute; left: 50%; -webkit-transform: translate(-45%, 0); -ms-transform: translate(-45%, 0); transform: translate(-45%, 0); bottom: 0; margin: 0 -.7rem; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .slider-news .slick-dots { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slick-dots { bottom: 0; width: 100%; text-align: center; margin: 0 -.2rem; } } .slider-news .slick-dots li { display: inline-block; margin: 0 .7rem; width: 3rem; height: 3rem; border-radius: 50%; border: .1rem solid transparent; position: relative; /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slick-dots li { width: 2.4rem; height: 2.4rem; margin: 0 .2rem; } } .slider-news .slick-dots button { width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: #fff; font-size: 0; border: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slick-dots button { width: .9rem; height: .9rem; } } .slider-news .slick-dots .slick-active { border-color: #DDBD78; } .slider-news .slick-arrow { position: absolute; font-size: 0px; width: 2rem; height: 2.1rem; display: inline-block; border: none; background-color: transparent; background-image: url("/assets/images/svg/arrow-white.svg"); background-position: center; background-repeat: no-repeat; bottom: 1rem; right: 38.8%; z-index: 4; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .slider-news .slick-arrow { right: 20%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slick-arrow { right: -2.5rem; bottom: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } } .slider-news .slick-prev { right: auto; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); left: 38.8%; /* Small Desktop */ /* Mobile */ } @media (max-width: 1199px) { .slider-news .slick-prev { left: 20%; } } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .slider-news .slick-prev { left: -2.5rem; -webkit-transform: translate(0, -50%) rotate(180deg); -ms-transform: translate(0, -50%) rotate(180deg); transform: translate(0, -50%) rotate(180deg); } } /* ------------------------------------------------------------ *\ Sticky \* ------------------------------------------------------------ */ .sticky .sticky__content--right { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .sticky .sticky__content--right { position: static !important; } } .sticky .sticky__content--right.static { position: absolute; top: -.2rem; right: 1.9rem; left: auto; bottom: auto; } .sticky .sticky__content--right p:last-child { padding-bottom: 0; margin-bottom: 0; } .sticky .sticky__content--right.fixed { position: fixed; top: 0; left: 0; bottom: auto; right: auto; } .sticky .sticky__content--right.absolute-bottom { position: absolute; top: auto; bottom: -.5rem; left: auto; } .sticky .sticky__content--left { /* Mobile */ } @media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .sticky .sticky__content--left { position: static !important; } } .sticky .sticky__content--left.static { position: absolute; top: 0; left: 0; } .sticky .sticky__content--left p:last-child { padding-bottom: 0; margin-bottom: 0; } .sticky .sticky__content--left.fixed { position: fixed; } .sticky .sticky__content--left.absolute-bottom { position: absolute; top: auto; bottom: -.5rem; left: 0 !important; } /* ------------------------------------------------------------ *\ Compare \* ------------------------------------------------------------ */ .compare-table .product_col_1, .compare-table .product_col_2 { display: none; } .compare-table .product_col_1.active, .compare-table .product_col_2.active { display: block; } /* ------------------------------------------------------------ *\ Innovation \* ------------------------------------------------------------ */ .in-sections p { font-size: 1.5rem; line-height: 1.8; } .in-bg { background-color: #f5f5f5; } .in-py { padding-top: 12rem; padding-bottom: 12rem; } @media (max-width: 1200px) { .in-py { padding-top: 6rem; padding-bottom: 6rem; } } .in-my { margin-top: 12rem; margin-bottom: 12rem; } @media (max-width: 1200px) { .in-my { margin-top: 6rem; margin-bottom: 6rem; } } .in-title, .in-title p { font-size: 3rem; color: #000; letter-spacing: .11rem; margin-bottom: 3.8rem; font-weight: 500; font-family: Big-Caslon, sans-serif; line-height: 1.3; } @media (max-width: 1200px) { .in-title, .in-title p { font-size: 2rem; } } .in-sections h2 { margin-bottom: 3rem; } .in-title { margin-bottom: 2rem; } .in-wrapper { max-width: calc(1200px + 3.5rem * 2); padding-left: 3.5rem; padding-right: 3.5rem; margin-left: auto; margin-right: auto; } .in-wrapper--wide { max-width: 1600px; } /* .in-wrapper--narrow { max-width: calc(1400px + 3.5rem * 2); } */ .in-wrapper--tiny { max-width: calc(800px + 3.5rem * 2); } .in-banner { padding-bottom: 40%; background-position: center; background-size: cover; width: 100%; } .in-intro { text-align: center; } .in-intro__title { font-size: 3.8rem; font-weight: 500; color: #000; position: relative; font-family: Big-Caslon, sans-serif; } .in-intro__subtitle { font-size: 1.5rem; position: relative; display: block; font-family: Walsheim, sans-serif; margin: 1rem; letter-spacing: 0.5px; } .in-intro p { font-size: 1.8rem; line-height: 1.8; } .in-intro__subtitle::after { margin: auto; content: ''; width: 93px; left: 0; right: 0; height: 1px; background-color: #ddbd78; display: block; margin-top: 2.5rem; margin-bottom: 3rem; } .in-info-quotes { background-color: #f5f5f5; } .in-info-quotes__columns { display: flex; padding-top: 12rem; padding-bottom: 12rem; } @media (max-width: 1200px) { .in-info-quotes__columns { display: block; padding-top: 6rem; padding-bottom: 6rem; } } .in-info-quotes__image { width: 66%; margin-right: 8rem; background-position: revert; background-size: cover; object-fit: cover; } .in-info-quotes__image--flipped { margin-left: 8rem; } @media (max-width: 1200px) { .in-info-quotes__image { width: 100%; margin-right: 0rem; margin-bottom: 4rem; } .in-info-quotes__image--flipped { margin-left: 0; margin-top: 4rem; } } .in-info-quotes__text { width: 33%; } @media (max-width: 1200px) { .in-info-quotes__text { width: 100%; } } .in-info-quotes__quotes { display: flex; } @media (max-width: 764px) { .in-info-quotes__quotes { display: block; } } .in-info-quotes__quote { width: 50%; padding-left: 4rem; padding-right: 4rem; } @media (max-width: 764px) { .in-info-quotes__quote { width: 100%; padding-left: 0rem; padding-right: 0rem; margin-bottom: 3rem; } } .in-info-quotes__quotes .publication p { font-size: 3rem; color: #000; letter-spacing: .11rem; margin-bottom: 3.8rem; font-weight: 500; font-family: Big-Caslon, sans-serif; line-height: 1.3; margin-bottom: 0; margin-bottom: 2rem; } @media (max-width: 764px) { .in-info-quotes__quotes .publication p { font-size: 2rem; } } .in-text-columns__wrapper { display: flex; margin-left: -4rem; margin-right: -4rem; } @media (max-width: 764px) { .in-text-columns__wrapper { display: block; margin-left: 0; margin-right: 0; } } .in-text-testimonial { margin-bottom: 3rem; } .in-text-columns__col { width: 50%; padding-left: 4rem; padding-right: 4rem; } @media (max-width: 764px) { .in-text-columns__col { width: 100%; padding-left: 0; padding-right: 0; margin-bottom: 3rem; } } .in-large-image { width: 100%; } .in-text-image { display: flex; margin-left: -4rem; margin-right: -4rem; } @media (max-width: 764px) { .in-text-image { display: block; margin-left: 0; margin-right: 0; } } .in-text-image__image, .in-text-image__text { width: 50%; padding-left: 4rem; padding-right: 4rem; } @media (max-width: 764px) { .in-text-image__image, .in-text-image__text { width: 100%; padding-left: 0rem; padding-right: 0rem; margin-bottom: 3rem; } } .in-text-image__image > div { background-size: cover; background-position: center; background-repeat: no-repeat; padding-bottom: 90%; } .in-75-container { max-width: 850px; } .in-hr { opacity: 0.5; } .in-table-grid { } .in-table-grid__row { display: flex; margin: -4rem; } @media (max-width: 764px) { .in-table-grid__row { display: block; margin: 0; } } .in-table-grid__row > div{ width: 50%; padding: 4rem; } @media (max-width: 764px) { .in-table-grid__row > div{ width: 100%; padding: 0; } } .in-mini-paragraph { max-width: 600px; } .in-featured-text { width: 90%; margin-left: auto; margin-right: auto; } @media (max-width: 1200px) { .in-featured-text { margin-top: -3rem; margin-bottom: -3rem; width: 100%; } } .in-allow-padding { padding: 0.1px; } .in-video iframe { width: 100%; } .in-compatible-logos .in-title { text-align: left; } .in-compatible-logos--mobile { display: none; } .in-compatible-logos--desktop { display: block; } @media (max-width: 764px) { .in-compatible-logos--mobile { display: block; } .in-compatible-logos--desktop { display: none; } } .in-expanse-intro__columns { display: flex; margin-left: -6rem; margin-right: -6rem; } @media (max-width: 764px) { .in-expanse-intro__columns { display: block; margin-left: 0; margin-right: 0; } } .in-expanse-intro__text { width: 35%; padding-left: 6rem; padding-right: 6rem; } .in-expanse-intro__image { width: 65%; padding-left: 6rem; padding-right: 6rem; margin-top: 6rem; } @media (max-width: 1200px) { .in-expanse-intro__image, .in-expanse-intro__text { width: 50%; margin-bottom: 3rem; } } @media (max-width: 764px) { .in-expanse-intro__image, .in-expanse-intro__text { width: 100%; padding-left: 0rem; padding-right: 0rem; margin-bottom: 3rem; } } .in-text-center { text-align: center; } /* .in-info-quotes--jitter { margin-left: 4rem; margin-right: 0; } .in-info-quotes--jitter img { margin-bottom: 3rem; } @media (max-width: 1200px) { .in-info-quotes__image--flipped { margin-left: 0; margin-top: 4rem; } */ .section-map .js-nav-secondary.fixed { position: relative !important; top: 0 !important; } .current-location.section__btn { visibility: hidden !important; height: 0; } .wrapper .js-nav-secondary { margin-top: -5px; } .wrapper.wrapper--initial .js-nav-secondary { margin-top: 0; } .section__list.section__list--list { background-color: #ffffff; width: 100%; padding: 48px 0; } .section__list.section__list--list .map-list { display: flex; -webkit-flex: 1; flex: 1; justify-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .section__list.section__list--list .map-list li { width: 33.33333333333333%; border-bottom: none; } @media (max-width: 700px) { .section__list.section__list--list .map-list li { width: 100%; } .section__list.section__list--list .map-list li > .location { border: none !important; padding: 0 !important; } } .section__list.section__list--list .map-list li .location { /*height: 120px !important;*/ padding: 2rem 4.2rem; } .section__list.section__list--list .map-list li .location .location__container { display: flex; -webkit-flex: 1; flex: 1; } .section__list.section__list--list .map-list li .location .location__border { position: absolute; width: calc(100% - 80px); border-bottom: #d3d3d3 1px solid; margin: 5.2rem 0 0 0; height: 1px; } .section__list.section__list--list .map-list li .location__pin { position: relative; margin-right: 24px; width: 48px; } .section__list.section__list--list .map-list li .location__content-box { width: 100%; height: 160px; display: flex; flex-direction: column; justify-content: space-around; } .section__list.section__list--list .map-list li:nth-child(3n-1) .location { border-left: #d3d3d3 1px solid; border-right: #d3d3d3 1px solid; } .section__list.section__list--list .map-list li:last-child .location { border-right: none; } /* Overrides */ .making-of { background-color: black; } .making-of__title { padding-top: 12rem; padding-bottom: 7rem; } .making-of-text, .making-of-text p { color: white; } .making-of-text--title { font-size: 4rem; } .making-of__text { padding-top: 6rem; padding-bottom: 12rem; } .section__image--movie { height: auto !important; } .media-icon-making { object-fit: contain; cursor: pointer; position: absolute; display: flex; align-items: center; gap: 2rem; white-space: nowrap; } .media-icon-making img { position: relative; width: 65px; } @media (max-width: 640px) { .making-of__title { padding-top: 6rem; padding-bottom: 3rem; } .making-of__text { padding-top: 3rem; padding-bottom: 6rem; } }