html { font-family: sans-serif; /* 1 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } a { margin: 0; padding: 0; vertical-align: baseline; background: transparent; text-decoration: none; color: #666; outline: none; } table { border-collapse: collapse; border-spacing: 0; } td, td img { vertical-align: top; } input, select, button, textarea { margin: 0; font-size: 100%; color: #666; } input, button, textarea { -webkit-appearance: none; } input[type="checkbox"] { vertical-align: bottom; } input[type="radio"] { vertical-align: text-bottom; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } /* --------------- /reset.css --------------- */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } body { position: relative; color: #000; text-align: left; font: 62.5%/1.2em Verdana, sans-serif; background: #fff; } label, input[type="button"], input[type="submit"], button { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; cursor: pointer; outline: none; } input[type="text"], textarea { outline: none; -webkit-appearance: none; } input[type="text"]:focus, textarea:focus { outline: none; } html, body { height: 100%; padding: 0; margin: 0; } @font-face { font-family: 'cera_pro'; src: url("../fonts/cera-pro-bold-webfont.eot"); src: url("../fonts/cera-pro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/cera-pro-bold-webfont.woff2") format("woff2"), url("../fonts/cera-pro-bold-webfont.woff") format("woff"), url("../fonts/cera-pro-bold-webfont.ttf") format("truetype"), url("../fonts/cera-pro-bold-webfont.svg#cera_probold") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: 'cera_pro'; src: url("../fonts/cera-pro-medium-webfont.eot"); src: url("../fonts/cera-pro-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/cera-pro-medium-webfont.woff2") format("woff2"), url("../fonts/cera-pro-medium-webfont.woff") format("woff"), url("../fonts/cera-pro-medium-webfont.ttf") format("truetype"), url("../fonts/cera-pro-medium-webfont.svg#cera_promedium") format("svg"); font-weight: 500; font-style: normal; } /* == 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; -webkit-border-radius: 16px; 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; -webkit-border-radius: 16px; 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, .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(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); -webkit-border-radius: 1px; 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); -webkit-border-radius: 1px; 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); -webkit-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 1px; 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); -webkit-border-radius: 2px; 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); -webkit-border-radius: 2px; 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); -webkit-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 2px; 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: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); 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: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); 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 { -webkit-border-radius: 16px; 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 { -webkit-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 5px; 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); } /* ---------------------------------------- */ /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; 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; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [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; } .icon { font-size: 10px; } .icon:before { content: ' '; vertical-align: middle; display: inline-block; background-image: url("../img/general/svg-sprite.svg"); background-repeat: no-repeat; -webkit-background-size: 30.3em 125.9em; background-size: 30.3em 125.9em; } .no-svg .icon:before { background-image: url("../img/general/svg-sprite.png"); } .icon.arrow-right:before { background-position: 0em 0em; width: 4.8em; height: 4.8em; } .icon.call_button:before { background-position: 0em -4.8em; width: 11.5em; height: 11.5em; } .icon.callback_EN:before { background-position: 0em -16.3em; width: 10.73em; height: 11.5em; } .icon.callback_RU:before { background-position: 0em -27.8em; width: 11.5em; height: 11.5em; } .icon.callback_UK:before { background-position: 0em -39.3em; width: 11.5em; height: 11.5em; } .icon.close:before { background-position: 0em -50.8em; width: 2em; height: 2em; } .icon.facebook:before { background-position: 0em -52.8em; width: 3em; height: 3em; } .icon.insta:before { background-position: 0em -55.8em; width: 3em; height: 3em; } .icon.male-hands:before { background-position: 0em -58.8em; width: 25.4em; height: 19.547900000000002em; } .icon.mobile-phone-pic:before { background-position: 0em -78.4em; width: 30.3em; height: 30.320999999999998em; } .icon.poool:before { background-position: 0em -108.8em; width: 6em; height: 3em; } .icon.scroll_dots:before { background-position: 0em -111.8em; width: 0.6em; height: 7.875em; } .icon.scroll_drop:before { background-position: 0em -119.7em; width: 4.6em; height: 6.2em; } html { height: 100%; } body { font-family: 'cera_pro', sans-serif; font-weight: 500; color: #fff; min-height: 100%; height: 100%; overflow: hidden; background-color: #0d4841; min-width: 320px; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { body { overflow: hidden; } } input, button, a { -webkit-appearance: none; outline: none; } input:hover, input:active, input:focus, button:hover, button:active, button:focus, a:hover, a:active, a:focus { outline: none; } input:after, button:after, a:after { outline: none; } .pull-right { float: right; } .pull-left { float: left; } .text-center { text-align: center; } .text-right { text-align: right; } @media only screen and (max-width: 767px) { .mobile-hide { display: none !important; } } .mobile-show { display: none; } @media only screen and (max-width: 767px) { .mobile-show { display: block; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .out { overflow: hidden; } } @media only screen and (max-width: 767px) { .out { overflow: hidden; } } .btn { -webkit-border-radius: 30px; border-radius: 30px; text-transform: uppercase; font-size: 18px; line-height: 20px; color: #767d87; width: -webkit-calc(1440px / 6); width: calc(1440px / 6); display: inline-block; text-align: center; padding: 20px 10px 20px; letter-spacing: 0.6px; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 500; background: #e1f0f5; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNlMWYwZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzllOGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -webkit-gradient(linear, left top, right top, color-stop(60%, #e1f0f5), color-stop(100%, #c9e8f2)); background: -webkit-linear-gradient(left, #e1f0f5 60%, #c9e8f2 100%); background: -o-linear-gradient(left, #e1f0f5 60%, #c9e8f2 100%); background: -webkit-gradient(linear, left top, right top, color-stop(60%, #e1f0f5), to(#c9e8f2)); background: linear-gradient(to right, #e1f0f5 60%, #c9e8f2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f0f5', endColorstr='#c9e8f2', GradientType=1); } .btn_type2 { background: none; border: 2px solid #fff; color: #fff; -webkit-border-radius: 30px; border-radius: 30px; -webkit-transition: background .3s ease; -o-transition: background .3s ease; transition: background .3s ease; } .btn_type2:hover { background: #fff; color: #0d4841; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .btn { padding: 13px 10px 14px; width: -webkit-calc(1024px / 6); width: calc(1024px / 6); font-size: 16px; line-height: 18px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .btn { padding: 10px 10px 10px; width: -webkit-calc(1024px / 6); width: calc(1024px / 6); font-size: 16px; line-height: 18px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .btn { padding: 10px 10px 10px; width: -webkit-calc(1024px / 6); width: calc(1024px / 6); font-size: 16px; line-height: 18px; } } @media only screen and (max-width: 767px) { .btn { font-size: 12px; line-height: 14px; width: 136px; padding: 12px 10px 12px; } } .grid { top: 0; bottom: 0; width: 100%; position: absolute; z-index: 2; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .grid_animation { z-index: 0; } .grid_animation .grid-col:after { display: none; } .grid_animation .transition-start, .transition-end .grid_animation { z-index: 99; } .grid-col { width: -webkit-calc(1440px / 6); width: calc(1440px / 6); height: 100%; position: relative; overflow: hidden; } .grid-col:first-child:after { display: none; } .grid-col:after { position: absolute; top: 0; left: 0; height: 100%; width: 1px; content: ''; background-color: rgba(241, 241, 241, 0.2); -webkit-transition: height .3s ease; -o-transition: height .3s ease; transition: height .3s ease; } .grid-col:before { content: ""; top: 0; bottom: 0; left: 0; display: block; position: absolute; width: 0; background: #061e1c; } .grid-col_left { width: -webkit-calc((100% - 1440px) / 2); width: calc((100% - 1440px) / 2); } .grid-col_right { width: -webkit-calc((100% - 1440px) / 2); width: calc((100% - 1440px) / 2); } .loader-screen .grid-col:after { height: 0; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .grid-col { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .grid-col_left { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } .grid-col_right { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .grid-col { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .grid-col_left { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } .grid-col_right { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .grid-col { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .grid-col_left { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } .grid-col_right { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } } @media only screen and (max-width: 767px) { .grid-col { width: -webkit-calc(100% - 148px); width: calc(100% - 148px); } .grid-col_left { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } .grid-col_right { width: -webkit-calc((100% - 1024px) / 2); width: calc((100% - 1024px) / 2); } } .transition-start .grid_animation { z-index: 99; } .transition-start .grid-col:before { width: 100%; -webkit-transition-property: width; -o-transition-property: width; transition-property: width; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .transition-end .grid_animation { z-index: 99; } .transition-end .grid-col:before { width: 100%; -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); -webkit-transition-property: width, -webkit-transform; transition-property: width, -webkit-transform; -o-transition-property: transform, width; transition-property: transform, width; transition-property: transform, width, -webkit-transform; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .transition-start .grid_animation .grid-col:nth-child(1):before { -webkit-transition-delay: 0.03s; -o-transition-delay: 0.03s; transition-delay: 0.03s; } .transition-start .grid_animation .grid-col:nth-child(2):before { -webkit-transition-delay: 0.06s; -o-transition-delay: 0.06s; transition-delay: 0.06s; } .transition-start .grid_animation .grid-col:nth-child(3):before { -webkit-transition-delay: 0.09s; -o-transition-delay: 0.09s; transition-delay: 0.09s; } .transition-start .grid_animation .grid-col:nth-child(4):before { -webkit-transition-delay: 0.12s; -o-transition-delay: 0.12s; transition-delay: 0.12s; } .transition-start .grid_animation .grid-col:nth-child(5):before { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; } .transition-start .grid_animation .grid-col:nth-child(6):before { -webkit-transition-delay: 0.18s; -o-transition-delay: 0.18s; transition-delay: 0.18s; } .transition-start .grid_animation .grid-col:nth-child(7):before { -webkit-transition-delay: 0.21s; -o-transition-delay: 0.21s; transition-delay: 0.21s; } .transition-start .grid_animation .grid-col:nth-child(8):before { -webkit-transition-delay: 0.24s; -o-transition-delay: 0.24s; transition-delay: 0.24s; } .transition-start .grid_animation .grid-col:nth-child(9):before { -webkit-transition-delay: 0.27s; -o-transition-delay: 0.27s; transition-delay: 0.27s; } .transition-end .grid_animation .grid-col:nth-child(1):before { -webkit-transition-delay: 0.03s; -o-transition-delay: 0.03s; transition-delay: 0.03s; } .transition-end .grid_animation .grid-col:nth-child(2):before { -webkit-transition-delay: 0.06s; -o-transition-delay: 0.06s; transition-delay: 0.06s; } .transition-end .grid_animation .grid-col:nth-child(3):before { -webkit-transition-delay: 0.09s; -o-transition-delay: 0.09s; transition-delay: 0.09s; } .transition-end .grid_animation .grid-col:nth-child(4):before { -webkit-transition-delay: 0.12s; -o-transition-delay: 0.12s; transition-delay: 0.12s; } .transition-end .grid_animation .grid-col:nth-child(5):before { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; } .transition-end .grid_animation .grid-col:nth-child(6):before { -webkit-transition-delay: 0.18s; -o-transition-delay: 0.18s; transition-delay: 0.18s; } .transition-end .grid_animation .grid-col:nth-child(7):before { -webkit-transition-delay: 0.21s; -o-transition-delay: 0.21s; transition-delay: 0.21s; } .transition-end .grid_animation .grid-col:nth-child(8):before { -webkit-transition-delay: 0.24s; -o-transition-delay: 0.24s; transition-delay: 0.24s; } .transition-end .grid_animation .grid-col:nth-child(9):before { -webkit-transition-delay: 0.27s; -o-transition-delay: 0.27s; transition-delay: 0.27s; } .section { width: 100%; height: 100vh; position: relative; z-index: 1; overflow: hidden; display: none; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-color: #0d4841; } .section_main, .section_404 { background-image: url("../img/general/main-bg.jpg"); } .section_more { background-image: url("../img/general/more-bg.jpg"); } .section_product { background: #0d4841; } .section_product .wrap { position: absolute; left: 50%; top: 0; bottom: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .section_product .wrap__i { position: absolute; width: 100%; top: 50%; z-index: 2; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .section_contacts { background: #00201a; } .section_contacts .wrap { padding-top: 11%; } .section_bottle .product-img { bottom: auto; top: 51%; right: -62px; } .section_water .product-img { bottom: auto; top: 51%; right: -102px; } .section_service .product-img { bottom: auto; top: 46%; right: 50px; } .section.section_active { display: block; } .section_more .wrap { position: absolute; left: 50%; top: 0; bottom: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .section_more .wrap__i { position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .section_contact-form { background-image: url("../img/general/contact-bg.jpg"); } .section_contact-form .wrap { position: absolute; left: 50%; top: 0; bottom: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .section_contact-form .wrap__i { position: absolute; width: 100%; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .section_contact-form .right { padding-left: -webkit-calc(1440px / 6); padding-left: calc(1440px / 6); } .section_contact-form .right:before, .section_contact-form .right:after { display: table; content: ""; } .section_contact-form .right:after { clear: both; } .lt-ie8 .section_contact-form .right { zoom: 1; } .section_contact-form .contact-form { float: right; max-width: -webkit-calc(1440px / 3); max-width: calc(1440px / 3); margin-right: 40px; } .section_contact-form .form-title { font-size: 72px; line-height: 74px; font-weight: 400; text-transform: uppercase; padding-bottom: 90px; } .section_contact-form .close-more-section { right: 38px; top: -45px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .section_contact-form .form-title { font-size: 50px; line-height: 54px; padding-bottom: 20px; } .section_contact-form .right { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } .section_contact-form .right .contact-form { padding-top: 100px; padding-right: 0; max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } .section_contact-form .close-more-section { top: 40px; } .section_bottle .product-img { right: -28px; } .section_bottle .product-img img { width: -webkit-calc(1024px / 2.5); width: calc(1024px / 2.5); } .section_water .product-img { right: 19px; } .section_water .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } .section_service .product-img { right: 10px; } .section_service .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section_contact-form .form-title { font-size: 50px; line-height: 54px; padding-bottom: 20px; } .section_contact-form .right { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } .section_contact-form .right .contact-form { padding-top: 100px; padding-right: 0; max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } .section_contact-form .close-more-section { top: 40px; } .section_bottle .product-img { right: -28px; } .section_bottle .product-img img { width: -webkit-calc(1024px / 2.5); width: calc(1024px / 2.5); } .section_water .product-img { right: 19px; } .section_water .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } .section_service .product-img { right: 10px; } .section_service .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section_contacts .wrap { padding-top: 7%; } .section_contact-form .form-title { font-size: 50px; line-height: 54px; padding-bottom: 20px; } .section_contact-form .right { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } .section_contact-form .right .contact-form { padding-top: 100px; padding-right: 0; max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } .section_contact-form .close-more-section { top: 40px; } .section_bottle .product-img { right: -28px; } .section_bottle .product-img img { width: -webkit-calc(1024px / 2.5); width: calc(1024px / 2.5); } .section_water .product-img { right: 19px; } .section_water .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } .section_service .product-img { right: 10px; } .section_service .product-img img { width: -webkit-calc(1024px / 3); width: calc(1024px / 3); } } @media (max-height: 1090px) { .section_contacts .wrap { padding-top: 7%; } .section#water-more .close-more-section { top: 15%; } } @media (max-height: 1000px) { .section_contacts .wrap { padding-top: 7%; } } @media (max-height: 900px) { .section_contacts .wrap { padding-top: 7%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .section { display: none; height: 100vh; } .more-sections .section_contact-form { display: block; } .section_main { min-height: 100vh; } .section .wrap, .section .wrap__i { position: relative; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); top: auto; left: auto; bottom: auto; } .section_bottle .product-img { width: 50%; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: 50px; } .section_bottle .product-img img { max-width: 100%; } .section_water .product-img { width: 45%; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: 50px; } .section_water .product-img img { max-width: 100%; } .section_contact-form .close-more-section { right: 5px; } } @media only screen and (max-width: 767px) { .section { height: 100vh; display: none; } .section_main, .section_404 { background-image: url("../img/general/main-bg-mob.jpg"); } .section .wrap, .section .wrap__i { position: relative; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); top: auto; left: auto; bottom: auto; } .section .wrap__i { padding-top: 65px; } .section .product-img { z-index: 5; } .more-sections .section_contact-form { display: block; } .section_contact-form { background: #00201a; } .section_contact-form .wrap__i { min-height: 100vh; } .section_contact-form .contact-form { float: none; max-width: 100%; margin-top: 35px; } .section_contact-form .form-title { font-size: 28px; line-height: 30px; padding-bottom: 10px; } .section_contact-form .close-more-section { top: 80px; right: 20px; padding: 0; } .section_contact-form .right { padding-left: 0; } } @media (max-width: 767px) and (min-width: 375px) { .section_main, .section_404 { background-image: url("../img/general/main-bg-mob-640.jpg"); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { body.show-contact-form { overflow: hidden; } body.show-contact-form .section_contact-form { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; opacity: 1; visibility: visible; } body.show-contact-form .section_contact-form .right { padding-left: 0; } body.show-contact-form .section_contact-form .contact-form { margin-right: 10px; } body.show-contact-form .svg-drop-container { padding-left: 23px; } } @media only screen and (max-width: 767px) { .touchevents .out { height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } .ios .out { height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } .ios .read-more { bottom: 125px; } body.show-contact-form { overflow: hidden; } body.show-contact-form .section_contact-form { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; opacity: 1; visibility: visible; } body.show-contact-form .section_contact-form .right { padding-left: 0; } body.show-contact-form .section_contact-form .contact-form { margin-right: 10px; } body.show-contact-form .svg-drop-container { padding-left: 23px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { html.show-contact-form { height: 100%; overflow: hidden; } } @media only screen and (max-width: 767px) { html.show-contact-form { height: 100%; overflow: hidden; } } .wrap { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 20px; position: relative; z-index: 3; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .wrap { max-width: 1024px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .wrap { max-width: 1024px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .wrap { max-width: 1024px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .wrap { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 100vh; } } @media only screen and (max-width: 767px) { .wrap { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; padding-left: 15px; padding-right: 15px; } } .header { position: absolute; left: 0; right: 0; top: 50px; z-index: 999; } .header .logo { float: left; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .header { top: 25px; } .header .logo img { width: 120px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .header { top: 25px; } .header .logo img { width: 120px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .header { top: 25px; } .header .logo img { width: 120px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .header { overflow: hidden; top: 25px; } .header .logo img { width: 120px; } .header .wrap { min-height: 1px; display: block; } } @media only screen and (max-width: 767px) { .header { top: 0; } .header .wrap { padding-top: 25px; } .header .logo { z-index: 100; position: relative; } .header .logo img { width: 120px; } } .main-nav { padding-left: 240px; padding-top: 5px; } .main-nav li { float: left; list-style: none; padding: 0 0; width: -webkit-calc(1440px / 6); width: calc(1440px / 6); } .main-nav a { text-transform: uppercase; color: #fff; font-weight: 500; font-size: 24px; line-height: 26px; position: relative; } .main-nav a.section-control_js:hover:after { width: 100%; } .main-nav a:after { content: ""; position: absolute; left: 0; width: 0; top: 100%; height: 2px; -webkit-transition: width .3s ease; -o-transition: width .3s ease; transition: width .3s ease; background: white; } .main-nav .drop-container li a:hover:after { width: 100%; } .main-nav .drop-container li a:after { content: ""; position: absolute; left: 0; width: 0; top: 100%; height: 2px; -webkit-transition: width .3s ease; -o-transition: width .3s ease; transition: width .3s ease; background: white; } @media (max-width: 1600px) { .main-nav { padding-left: 168px; padding-top: 4px; } .main-nav li { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .main-nav a { font-size: 20px; line-height: 22px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .main-nav { padding-left: 168px; padding-top: 4px; } .main-nav li { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .main-nav ul { margin-right: -50px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .main-nav { padding-left: 168px; padding-top: 4px; } .main-nav li { width: -webkit-calc(1024px / 6); width: calc(1024px / 6); } .main-nav ul { margin-right: -50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .main-nav { padding-left: 152px; } .main-nav ul { margin-right: -50px; } } @media only screen and (max-width: 767px) { .main-nav { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: rgba(13, 72, 62, 0.93); padding-left: 0; z-index: 90; padding-top: 99px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s ease, visibility .3s ease; -o-transition: opacity .3s ease, visibility .3s ease; transition: opacity .3s ease, visibility .3s ease; } .mobile-nav-active .main-nav { opacity: 1; visibility: visible; } .main-nav ul { padding-left: 15px; padding-bottom: 40px; } .main-nav li { width: auto; display: block; float: none; padding-bottom: 18px; } .main-nav .lang-list { margin-left: -15px; margin-right: -15px; } .main-nav .lang-list li { display: inline-block; padding: 0 15px 0; } .main-nav .copy { right: 15px; display: block; bottom: 14px; } } .side-nav { position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .side-nav ul { list-style: none; } .side-nav li { float: none; list-style: none; padding: 0 0 90px; } .side-nav li:last-child { padding-bottom: 0; } .side-nav a { text-transform: uppercase; color: #fff; font-weight: 500; font-size: 24px; line-height: 26px; } @media (max-width: 1500px) { .side-nav { padding-left: 20px; } } @media (max-height: 800px) { .side-nav li { padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .side-nav { display: none; } } @media only screen and (max-width: 767px) { .side-nav { display: none; } } .svg-drop-container { max-width: -webkit-calc(1440px / 2); max-width: calc(1440px / 2); text-align: center; float: left; width: 100%; } @media (max-width: 1600px) { .svg-drop-container { max-width: -webkit-calc(1024px / 4); max-width: calc(1024px / 4); padding-left: 15%; } .svg-drop-container svg { max-width: 100%; } } @media only screen and (max-width: 767px) { .svg-drop-container { display: none; } } .drop-draw path { stroke-width: 2px; stroke: #fff; } .drop-container { position: relative; } .drop-container:hover .drop { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .drop-container:hover .drop li { opacity: 1; } .drop-container:hover .drop li:nth-child(1) { -webkit-transition-delay: 0.01s; -o-transition-delay: 0.01s; transition-delay: 0.01s; } .drop-container:hover .drop li:nth-child(2) { -webkit-transition-delay: 0.02s; -o-transition-delay: 0.02s; transition-delay: 0.02s; } .drop-container.active .drop { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); position: relative; } .drop-container.active .drop li { opacity: 1; } .drop-container.active .drop li:nth-child(1) { -webkit-transition-delay: 0.01s; -o-transition-delay: 0.01s; transition-delay: 0.01s; } .drop-container.active .drop li:nth-child(2) { -webkit-transition-delay: 0.02s; -o-transition-delay: 0.02s; transition-delay: 0.02s; } .drop-container .drop { position: absolute; left: 0; top: 100%; padding-top: 44px; -webkit-transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease; transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease; -o-transition: transform .3s ease, visibility .3s ease, opacity .3s ease; transition: transform .3s ease, visibility .3s ease, opacity .3s ease; transition: transform .3s ease, visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease; opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); visibility: hidden; } .drop-container .drop li { padding-bottom: 10px; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0; } @media (max-width: 1440px) { .drop-container .drop { padding-top: 25px; } } .main-logo { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 46px; margin-left: 14px; -webkit-transition: -webkit-transform .3s ease .3s; transition: -webkit-transform .3s ease .3s; -o-transition: transform .3s ease .3s; transition: transform .3s ease .3s; transition: transform .3s ease .3s, -webkit-transform .3s ease .3s; z-index: 5; } .bottle-show .main-logo { -webkit-transform: translate(-50%, -140%); -ms-transform: translate(-50%, -140%); transform: translate(-50%, -140%); } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .bottle-show .main-logo { -webkit-transform: translate(-50%, -145%); -ms-transform: translate(-50%, -145%); transform: translate(-50%, -145%); } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .main-logo { margin-top: 0; } .bottle-show .main-logo { -webkit-transform: translate(-50%, -105%); -ms-transform: translate(-50%, -105%); transform: translate(-50%, -105%); } } @media (max-height: 1090px) { .bottle-show .main-logo { -webkit-transform: translate(-50%, -160%); -ms-transform: translate(-50%, -160%); transform: translate(-50%, -160%); } } @media (max-height: 800px) { .main-logo { margin-top: 0; } .bottle-show .main-logo { -webkit-transform: translate(-50%, -105%); -ms-transform: translate(-50%, -105%); transform: translate(-50%, -105%); } } @media (max-height: 760px) { .main-logo { margin-top: -60px; } } @media only screen and (max-width: 767px) { .main-logo { margin: -30px auto 0; width: 140px; } .main-logo img { max-width: 100%; } } .read-more { position: absolute; left: 50%; bottom: 45px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #fff; font-size: 14px; line-height: 16px; text-align: center; display: block; z-index: 99; } .read-more span { display: block; padding-bottom: 18px; } .read-more .icon { margin: 0 auto; } .read-more .icon.scroll_drop { position: absolute; left: 8px; top: 0; } .bottle-show .read-more { opacity: 0; visibility: hidden; -webkit-transition: opacity .3s ease, visibility .3s ease; -o-transition: opacity .3s ease, visibility .3s ease; transition: opacity .3s ease, visibility .3s ease; } @media (max-height: 800px) { .read-more { bottom: 15px; } } @media only screen and (max-width: 767px) { .read-more { font-size: 13px; bottom: 85px; } .read-more span { padding-bottom: 0; } .read-more .icon { font-size: 4px; } .read-more .icon.scroll_drop { font-size: 4px; left: 22px; top: 8px; } } .drop-icon-container { margin: 0 auto 23px; position: relative; width: 62px; min-height: 30px; } @media only screen and (max-width: 767px) { .drop-icon-container { margin-bottom: 0; padding-bottom: 0; min-height: 20px; } } .dots { margin-top: 15px; margin-bottom: 0; margin-left: 2px; } .dots .dot { width: 4px; height: 4px; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; margin: 7px auto 7px; } @media only screen and (max-width: 767px) { .dots .dot { width: 2px; height: 2px; margin: 5px auto 5px; } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(30px); -khtml-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 60% { -webkit-transform: translateY(15px); -khtml-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -khtml-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(30px); -khtml-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 60% { -webkit-transform: translateY(15px); -khtml-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } } .bounce { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } .main-bottle { position: absolute; left: 50%; top: 100%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: -webkit-transform .3s ease .3s; transition: -webkit-transform .3s ease .3s; -o-transition: transform .3s ease .3s; transition: transform .3s ease .3s; transition: transform .3s ease .3s, -webkit-transform .3s ease .3s; z-index: 5; text-align: center; } .bottle-show .main-bottle { -webkit-transform: translate(-50%, -80%); -ms-transform: translate(-50%, -80%); transform: translate(-50%, -80%); } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .main-bottle img { width: 60%; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .main-bottle img { width: 50%; } } @media (max-height: 1000px) { .bottle-show .main-bottle { -webkit-transform: translate(-50%, -70%); -ms-transform: translate(-50%, -70%); transform: translate(-50%, -70%); } } @media (max-height: 800px) { .main-bottle img { width: 50%; } } .copy { position: absolute; right: 98px; bottom: 18px; letter-spacing: 0.1px; font-size: 12px; line-height: 14px; z-index: 20; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .copy { right: 66px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .copy { right: 66px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .copy { right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .copy { right: 15px; } } @media only screen and (max-width: 767px) { .copy { display: none; } } .back-call { position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); right: 120px; z-index: 99; margin-top: 40px; } .contact-active .back-call { display: none; } .page404 .back-call { display: none; } @media (max-width: 1600px) { .back-call { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .back-call { position: fixed; right: 15px; bottom: 100px; top: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @media only screen and (max-width: 767px) { .back-call { z-index: 999; bottom: 39px; position: fixed; right: 18px; top: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .back-call i { font-size: 5.4px; } } .product-wrapper, .inner { padding-left: -webkit-calc(1440px / 6); padding-left: calc(1440px / 6); } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .product-wrapper, .inner { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .product-wrapper, .inner { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .product-wrapper, .inner { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } .section_contacts .product-wrapper, .section_contacts .inner { padding-left: -webkit-calc(1024px / 6); padding-left: calc(1024px / 6); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .product-wrapper, .inner { padding-left: 0; width: 100%; } .section_contacts .product-wrapper, .section_contacts .inner { padding-left: 0; } } @media only screen and (max-width: 767px) { .product-wrapper, .inner { padding-left: 0; width: 100%; margin-top: 0; } .section_contacts .product-wrapper, .section_contacts .inner { padding-left: 0; } } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .section_more_bottle .inner { padding-left: 0; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section_more_bottle .inner { padding-left: 0; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section_more_bottle .inner { padding-left: 0; } } .section_more_service .wrap__i { height: 500px; width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } .product-wrapper { margin-top: 55px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .product-wrapper { margin-top: 0; } } @media only screen and (max-width: 767px) { .product-wrapper { margin-top: 0; margin-bottom: 40px; } } .product-title, .section-title { font-size: 160px; line-height: 164px; font-weight: 700; text-transform: uppercase; margin-bottom: 33px; position: relative; z-index: 2; letter-spacing: 11px; margin-left: -11px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .product-title, .section-title { font-size: 120px; line-height: 130px; margin-bottom: 6px; margin-left: -8px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .product-title, .section-title { font-size: 100px; line-height: 110px; margin-bottom: 0; margin-left: -8px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .product-title, .section-title { font-size: 100px; line-height: 110px; margin-bottom: 0; margin-left: -8px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .product-title, .section-title { font-size: 96px; line-height: 104px; } } @media only screen and (max-width: 767px) { .product-title, .section-title { font-size: 40px; line-height: 44px; margin-left: 0; margin-bottom: 14px; letter-spacing: 2px; } .section_contacts .product-title, .section_contacts .section-title { margin-bottom: 35px; } } .product-description { position: relative; z-index: 2; max-width: 1200px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .product-description p, .product-description li { font-size: 16px; line-height: 19px; letter-spacing: 1.1px; font-weight: 500; padding-bottom: 21px; } .product-description p strong, .product-description li strong { font-weight: 700; } .product-description ul { padding-bottom: 10px; } .product-description li { list-style: none; padding-bottom: 10px; padding-left: 20px; position: relative; } .product-description li:before { content: ""; background: url("../img/general/drop_marker.svg") no-repeat; width: 9px; height: 12px; display: block; position: absolute; -webkit-background-size: cover; background-size: cover; left: 0; top: 6px; margin-right: 16px; } .product-description .aside { padding-bottom: 25px; max-width: 722px; width: 60%; } .product-description .right { width: 40%; } .product-description_mob { display: none; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .product-description p, .product-description li { font-size: 14px; line-height: 17px; } .product-description li:before { top: 4px; } .product-description .aside { width: 58%; } .product-description .right { width: 42%; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .product-description p, .product-description li { font-size: 14px; line-height: 17px; padding-bottom: 15px; } .product-description li:before { top: 4px; } .product-description .aside { width: 46%; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .product-description p, .product-description li { font-size: 12px; line-height: 15px; padding-bottom: 10px; } .product-description li:before { top: 4px; } .product-description .aside { width: 46%; } } @media (max-height: 800px) { .product-description p, .product-description li { font-size: 12px; line-height: 15px; padding-bottom: 10px; } .product-description li:after { top: 4px; } .product-description .aside { width: 58%; } .product-description .right { width: 42%; } } @media (max-height: 760px) { .product-description .right { width: 41%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .product-description .aside { width: 50%; } .product-description .right { width: 50%; } .product-description p, .product-description li { font-size: 14px; line-height: 18px; } } @media only screen and (max-width: 767px) { .product-description { display: none; } .section_more .product-description { display: block; height: 60vh; overflow-y: hidden; margin-top: 15px; } .product-description .aside { width: 100%; padding-bottom: 0; } .product-description .right { display: none; } .product-description p, .product-description li { font-size: 13px; line-height: 17px; padding-bottom: 14px; } .product-description .btn-row { padding-bottom: 5px; } .product-description.product-description_mob { display: block; } } .section-description__i { padding-bottom: 21px; } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section-description__i { padding-bottom: 5px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section-description__i { padding-bottom: 5px; } } @media (max-height: 800px) { .section-description__i { padding-bottom: 5px; } } @media only screen and (max-width: 767px) { .section-description__i { padding-bottom: 15px; } } .section-descroption__inform { padding-bottom: 50px; } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section-descroption__inform { padding-bottom: 15px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section-descroption__inform { padding-bottom: 15px; } } @media (max-height: 800px) { .section-descroption__inform { padding-bottom: 15px; } } .section-num { position: absolute; left: -43px; top: -63px; letter-spacing: 53px; font-size: 754px; line-height: 756px; color: #061e1c; z-index: 1; font-weight: 700; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .section-num { left: -29px; font-size: 515px; line-height: 526px; top: -27px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section-num { left: -26px; font-size: 480px; line-height: 500px; top: -24px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section-num { left: -26px; font-size: 480px; line-height: 500px; top: -24px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .section-num { font-size: 442px; line-height: 454px; letter-spacing: 3px; } } @media only screen and (max-width: 767px) { .section-num { font-size: 380px; line-height: 386px; letter-spacing: 0; left: -80px; top: -25px; } } .detail-info { max-width: 400px; float: right; text-align: right; padding-right: 30px; font-size: 16px; line-height: 18px; margin-bottom: 75px; } .detail-info p { letter-spacing: 0.8px; } .detail-info a { color: #fff; position: relative; display: inline-block; } .detail-info a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #fff; -webkit-transition: opacity .3s ease, visibility .3s ease; -o-transition: opacity .3s ease, visibility .3s ease; transition: opacity .3s ease, visibility .3s ease; } .detail-info a:hover:after { opacity: 0; visibility: hidden; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .detail-info { padding-right: 40px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .detail-info { max-width: 320px; padding-right: 40px; } } @media (max-width: 1400px) { .section_service .detail-info { max-width: 320px; padding-right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .detail-info { display: none; } } @media only screen and (max-width: 767px) { .detail-info { display: none; } } .product-img { position: absolute; bottom: -100px; right: 0; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .product-img img { width: -webkit-calc(1024px / 2.1); width: calc(1024px / 2.1); } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .product-img img { width: -webkit-calc(1024px / 2.1); width: calc(1024px / 2.1); } } @media only screen and (max-width: 767px) { .product-img { position: relative; bottom: auto !important; top: auto !important; right: auto !important; } .product-img img { max-width: 220px; display: block; margin: 0 auto; } } .about-company { max-width: 722px; padding-bottom: 65px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .about-company { padding-bottom: 40px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .about-company { padding-bottom: 40px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .about-company { padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .about-company { display: none; } } @media (max-height: 760px) { .about-company { padding-bottom: 30px; } } .about-company__i { background: url("../img/general/swirl.jpg") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover; padding: 30px 45px; } .about-company__i p { margin: 0; font-size: 16px; line-height: 18px; font-weight: 400; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .about-company__i { padding: 25px 30px; } .about-company__i p { font-size: 14px; line-height: 16px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .about-company__i { padding: 25px 30px; } .about-company__i p { font-size: 14px; line-height: 16px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .about-company__i { padding: 25px 30px; } .about-company__i p { font-size: 14px; line-height: 16px; } } @media only screen and (max-width: 767px) { .about-company__i { padding: 21px 20px 13px; } .about-company__i p { font-size: 13px; line-height: 17px; } } .address { max-width: -webkit-calc(1440px / 3); max-width: calc(1440px / 3); width: 100%; } .address p { color: #fff; font-size: 18px; line-height: 20px; } .address a { color: #fff; font-size: 18px; line-height: 20px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .address { max-width: -webkit-calc(1024px / 2); max-width: calc(1024px / 2); } .address p { font-size: 14px; line-height: 16px; } .address a { font-size: 14px; line-height: 16px; } .address .address__i { max-width: 380px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .address { max-width: -webkit-calc(1024px / 2); max-width: calc(1024px / 2); } .address p { font-size: 14px; line-height: 16px; } .address a { font-size: 14px; line-height: 16px; } .address .address__i { max-width: 380px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .address { max-width: -webkit-calc(1024px / 2); max-width: calc(1024px / 2); } .address p { font-size: 14px; line-height: 16px; } .address a { font-size: 14px; line-height: 16px; } .address .address__i { max-width: 310px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .address { max-width: -webkit-calc(1024px / 2); max-width: calc(1024px / 2); } .address .address__i { max-width: 310px; } } @media only screen and (max-width: 767px) { .address { width: 100%; max-width: 100%; padding-bottom: 10px; } .address p, .address a { font-size: 13px; line-height: 16px; padding-bottom: 0; } } .contact-form { width: 100%; } .contact-form.contact-form_success .contact-form__i { display: none; } .contact-form.contact-form_success .success-text { display: block; } .contact-form .btn-row { padding-top: 50px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .contact-form { max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } .contact-form .btn-row { padding-top: 25px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .contact-form { max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } .contact-form .btn-row { padding-top: 25px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .contact-form { padding-top: 20px; max-width: -webkit-calc(1024px / 3); max-width: calc(1024px / 3); } } @media (max-height: 760px) { .contact-form .form-control { padding: 7px 15px; } .contact-form .btn-row { padding-top: 13px; } } @media only screen and (max-width: 767px) { .contact-form .btn-row { padding-top: 20px; padding-bottom: 35px; } .section_contacts .contact-form { display: none; } } .section_contacts .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .row .contact-form__i { max-width: -webkit-calc(1440px / 3); max-width: calc(1440px / 3); width: 100%; } @media only screen and (max-width: 767px) { .section_contacts .row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .address-about { padding-bottom: 25px; } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .address-about { padding-bottom: 10px; } } @media only screen and (max-width: 767px) { .address-about { padding-bottom: 20px !important; } } .address-item { padding-bottom: 25px; } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .address-item { padding-bottom: 10px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .address-item { padding-bottom: 10px; } } @media only screen and (max-width: 767px) { .address-item { padding-bottom: 15px; } } .socials { padding-top: 15px; } .socials ul { margin-left: -10px; margin-right: -10px; } .socials ul:before, .socials ul:after { display: table; content: ""; } .socials ul:after { clear: both; } .lt-ie8 .socials ul { zoom: 1; } .socials li { list-style: none; padding: 0 10px; float: left; } .socials a { display: block; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .socials { padding-bottom: 40px; } } @media only screen and (max-width: 767px) { .socials { position: absolute; left: 15px; bottom: -25px; } } .inp { margin-bottom: 15px; } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .inp { margin-bottom: 5px; } } .form-control { background: none; border-bottom: 2px solid #fff; -webkit-border-radius: 0; border-radius: 0; padding: 12px 15px; border-top: none; border-left: none; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 16px; line-height: 18px; color: #fff; -webkit-transition: border-color .3s ease; -o-transition: border-color .3s ease; transition: border-color .3s ease; } .form-control:focus::-moz-placeholder, .form-control:focus:-moz-placeholder, .form-control:focus::-webkit-input-placeholder { opacity: 0; } .form-control:focus::placeholder, .form-control:focus:-moz-placeholder, .form-control:focus::-webkit-input-placeholder { opacity: 0; } .form-control:-moz-placeholder, .form-control::-webkit-input-placeholder { color: #fff; } .form-control.error { border-bottom-color: #de0005; } input::-webkit-input-placeholder { color: #fff; } input::-moz-placeholder { color: #fff; } input:-ms-input-placeholder { color: #fff; } input::-ms-input-placeholder { color: #fff; } input::placeholder { color: #fff; } input:focus::-webkit-input-placeholder { opacity: 0; } input:focus::-moz-placeholder { opacity: 0; } input:focus:-ms-input-placeholder { opacity: 0; } input:focus::-ms-input-placeholder { opacity: 0; } input:focus::placeholder { opacity: 0; } .map { position: absolute; left: 0; right: 0; height: 40vh; background: #316b65; z-index: 1; } .map:after { content: ""; position: absolute; left: 0; right: 0; height: 23px; display: block; background: #00201a; bottom: 0; } @media only screen and (max-width: 767px) { .map { height: 160px; } } .section_contacts .wrap { z-index: 5; position: relative; } @media only screen and (max-width: 767px) { .section_contacts { padding-bottom: 50px; position: relative; } .section_contacts .inner { margin-top: 45px; } .section_contacts .section-title { margin-bottom: 60px; } } .bottle-specs { max-width: 860px; margin-top: 23px; } .bottle-specs h3 { color: #afdded; font-weight: 500; font-size: 22px; line-height: 24px; padding-bottom: 16px; letter-spacing: 3px; } .bottle-specs h4 { font-style: italic; font-weight: 500; font-size: 18px; line-height: 20px; padding-bottom: 25px; } .bottle-specs li { font-size: 12px; line-height: 14px; font-weight: 500; padding-bottom: 1px; letter-spacing: 0.5px; list-style: none; position: relative; padding-left: 15px; display: block; } .bottle-specs li:before { content: ""; background: url("../img/general/drop_marker.svg") no-repeat; width: 7px; height: 10px; display: block; -webkit-background-size: cover; background-size: cover; left: 0; top: 4px; margin-right: 16px; position: absolute; } .bottle-specs li strong { font-weight: 700; } .bottle-specs ul { padding-bottom: 10px; } .bottle-specs p { font-size: 12px; line-height: 14px; padding-bottom: 20px; } .bottle-specs .col { width: 56%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 50px; float: left; } .bottle-specs .col:last-child { width: 44%; padding-right: 0; } .bottle-specs .col:last-child h3 { padding-bottom: 32px; font-size: 20px; } .bottle-specs .table-wrap h3 { text-align: center; } .bottle-specs .row { padding-bottom: 50px; } .bottle-specs .row:last-child { padding-bottom: 0; } .bottle-specs table { border-collapse: separate; } .bottle-specs table tr:first-child td { -webkit-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; border-top: 2px solid #afdded; } .bottle-specs table tr:first-child td:first-child { -webkit-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; border-right: 2px solid #afdded; } .bottle-specs table tr:last-child td:first-child { -webkit-border-radius: 0 0 0 10px; border-radius: 0 0 0 10px; } .bottle-specs table tr:last-child td:last-child { -webkit-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0; } .bottle-specs table td { border-top: none; border-bottom: 2px solid #afdded; border-right: 2px solid #afdded; font-size: 12px; line-height: 14px; padding: 11px 14px 12px; text-align: center; } .bottle-specs table td:first-child { border-left: 2px solid #afdded; text-align: left; } @media (max-height: 760px) { .bottle-specs .row { padding-bottom: 10px; } } .row:before, .row:after { display: table; content: ""; } .row:after { clear: both; } .lt-ie8 .row { zoom: 1; } .row p { padding-bottom: 15px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .row p { padding-bottom: 5px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .row p { padding-bottom: 5px; } } @media only screen and (max-width: 767px) { .row p { padding-bottom: 0; } } @media (max-height: 760px) { .row .address p { padding-bottom: 5px; } } .close-more-section { right: 18px; top: 24%; text-transform: uppercase; color: #fff; position: absolute; font-weight: 500; font-size: 18px; line-height: 20px; padding-left: 38px; margin-top: 3px; letter-spacing: 1.2px; z-index: 99; } .close-more-section span { position: relative; } .close-more-section span:after { content: ""; position: absolute; bottom: 0; left: -8px; right: 0; color: #fff; } .close-more-section .icon { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .section_more_bottle .close-more-section { top: 12%; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .section_more_bottle .close-more-section { top: 12%; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .section_more_bottle .close-more-section { top: 12%; } } @media only screen and (max-width: 767px) { .close-more-section { right: -3px; top: 85px; } .close-more-section span { display: none; } } .post-title { font-weight: 500; font-size: 18px; line-height: 20px; letter-spacing: 3px; text-transform: uppercase; padding-bottom: 60px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .post-title { padding-bottom: 40px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .post-title { padding-bottom: 20px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .post-title { padding-bottom: 10px; } } .post_cols { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .post p { font-size: 16px; line-height: 16px; font-weight: 500; } .post h3 { font-weight: 500; font-size: 18px; line-height: 20px; padding-bottom: 16px; letter-spacing: 3px; text-transform: uppercase; } .post h4 { font-style: italic; font-weight: 500; font-size: 18px; line-height: 20px; padding-bottom: 25px; } .post li { font-size: 16px; line-height: 20px; font-weight: 500; padding-bottom: 1px; letter-spacing: 0.5px; list-style: none; padding-left: 15px; position: relative; display: block; } .post li:before { content: ""; background: url("../img/general/drop_marker.svg") no-repeat; width: 7px; height: 10px; display: block; -webkit-background-size: cover; background-size: cover; left: 0; top: 7px; position: absolute; margin-right: 16px; } .post li strong { font-weight: 700; } .post ul { padding-bottom: 70px; } @media (max-width: 1600px) { .post ul { padding-bottom: 15px; } .post p, .post li { font-size: 14px; line-height: 16px; } .post li:before { top: 5px; } } @media (max-width: 1280px) { .post ul { padding-bottom: 15px; } .post p, .post li { font-size: 12px; line-height: 14px; } .post li:before { top: 4px; } } @media (max-height: 800px) { .post p, .post li { font-size: 12px; line-height: 14px; } .post li:before { top: 4px; } } .water-specs .col { float: left; width: 65%; -webkit-box-sizing: border-box; box-sizing: border-box; } .water-specs .col:first-child { width: 35%; padding-right: 30px; } .water-specs .title { text-align: center; padding-bottom: 30px; } .water-specs .title h3 { font-weight: 500; font-size: 18px; line-height: 20px; padding-bottom: 5px; text-transform: uppercase; } .water-specs table { width: 100%; } .water-specs table td { border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px; line-height: 18px; padding: 3px 15px 2px; vertical-align: middle; } .water-specs table td:first-child { text-align: left; } @media (max-width: 1440px) { .water-specs table td { font-size: 14px; line-height: 16px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .water-specs table td { font-size: 12px; line-height: 14px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .water-specs table td { font-size: 12px; line-height: 14px; } } @media (max-height: 800px) { .water-specs table td { font-size: 12px; line-height: 14px; padding: 3px 5px 3px; vertical-align: middle; } } @media (max-height: 760px) { .water-specs table td { font-size: 12px; line-height: 14px; padding: 0 3px; vertical-align: middle; } } @media (max-height: 800px) { .water-specs { margin-top: 50px; } } @media (max-height: 760px) { .water-specs .title { padding-bottom: 15px; } .water-specs .row p { padding-bottom: 5px; } } .minerals-list { padding-bottom: 50px; } .minerals-list ul { margin-left: -15px; margin-right: -15px; } .minerals-list ul:before, .minerals-list ul:after { display: table; content: ""; } .minerals-list ul:after { clear: both; } .lt-ie8 .minerals-list ul { zoom: 1; } .minerals-list li { float: left; padding: 0 15px; list-style: none; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .minerals-list ul { margin-left: -5px; margin-right: -5px; } .minerals-list li { padding: 0 5px; } } @media (max-width: 1439px) { .minerals-list { padding-bottom: 25px; } .minerals-list li { padding: 0 2px; } } @media (max-width: 1100px) { .minerals-list { display: none; } } .mineral-info { background: #105654; border: 3px solid #fff; text-align: center; -webkit-border-radius: 25px; border-radius: 25px; height: 70px; width: 74px; display: table-cell; vertical-align: middle; } .mineral-info p { padding-bottom: 0; text-transform: uppercase; font-size: 12px; line-height: 14px; width: 100%; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .mineral-info { height: 61px; width: 65px; -webkit-border-radius: 20px; border-radius: 20px; } } .plus { font-size: 38px; line-height: 74px; } .continue { position: absolute; text-transform: uppercase; color: #fff; font-weight: 500; font-size: 18px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); top: 100%; left: -webkit-calc(1440px / 3); left: calc(1440px / 3); margin-left: -15px; cursor: pointer; margin-top: -36px; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .continue { margin-left: -11px; margin-top: -26px; left: -webkit-calc(1024px / 3); left: calc(1024px / 3); font-size: 16px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .continue { margin-left: -11px; margin-top: -26px; left: -webkit-calc(1024px / 3); left: calc(1024px / 3); font-size: 16px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .continue { margin-left: -11px; margin-top: -26px; left: -webkit-calc(1024px / 3); left: calc(1024px / 3); font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .continue { display: none; } } @media only screen and (max-width: 767px) { .continue { display: none; } } .btn-row { position: relative; } #circularG { position: relative; width: 68px; height: 68px; margin: auto; } .circularG { position: absolute; background-color: #0d4841; width: 16px; height: 16px; border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; animation-name: bounce_circularG; -o-animation-name: bounce_circularG; -ms-animation-name: bounce_circularG; -webkit-animation-name: bounce_circularG; -moz-animation-name: bounce_circularG; animation-duration: 0.908s; -o-animation-duration: 0.908s; -ms-animation-duration: 0.908s; -webkit-animation-duration: 0.908s; -moz-animation-duration: 0.908s; animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-direction: normal; -o-animation-direction: normal; -ms-animation-direction: normal; -webkit-animation-direction: normal; -moz-animation-direction: normal; } #circularG_1 { left: 0; top: 27px; animation-delay: 0.338s; -o-animation-delay: 0.338s; -ms-animation-delay: 0.338s; -webkit-animation-delay: 0.338s; -moz-animation-delay: 0.338s; } #circularG_2 { left: 7px; top: 7px; animation-delay: 0.454s; -o-animation-delay: 0.454s; -ms-animation-delay: 0.454s; -webkit-animation-delay: 0.454s; -moz-animation-delay: 0.454s; } #circularG_3 { top: 0; left: 27px; animation-delay: 0.57s; -o-animation-delay: 0.57s; -ms-animation-delay: 0.57s; -webkit-animation-delay: 0.57s; -moz-animation-delay: 0.57s; } #circularG_4 { right: 7px; top: 7px; animation-delay: 0.686s; -o-animation-delay: 0.686s; -ms-animation-delay: 0.686s; -webkit-animation-delay: 0.686s; -moz-animation-delay: 0.686s; } #circularG_5 { right: 0; top: 27px; animation-delay: 0.802s; -o-animation-delay: 0.802s; -ms-animation-delay: 0.802s; -webkit-animation-delay: 0.802s; -moz-animation-delay: 0.802s; } #circularG_6 { right: 7px; bottom: 7px; animation-delay: 0.908s; -o-animation-delay: 0.908s; -ms-animation-delay: 0.908s; -webkit-animation-delay: 0.908s; -moz-animation-delay: 0.908s; } #circularG_7 { left: 27px; bottom: 0; animation-delay: 1.024s; -o-animation-delay: 1.024s; -ms-animation-delay: 1.024s; -webkit-animation-delay: 1.024s; -moz-animation-delay: 1.024s; } #circularG_8 { left: 7px; bottom: 7px; animation-delay: 1.14s; -o-animation-delay: 1.14s; -ms-animation-delay: 1.14s; -webkit-animation-delay: 1.14s; -moz-animation-delay: 1.14s; } @keyframes bounce_circularG { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.3); transform: scale(0.3); } } @-webkit-keyframes bounce_circularG { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.3); } } .loader-screen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; } .loader-screen .circular { position: absolute !important; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99999; } .lines-draw .loader-screen .grid-col:after { height: 100%; } .lines-draw .grid .grid-col:nth-child(1):after { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .lines-draw .grid .grid-col:nth-child(2):after { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .lines-draw .grid .grid-col:nth-child(3):after { -webkit-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .lines-draw .grid .grid-col:nth-child(4):after { -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .lines-draw .grid .grid-col:nth-child(5):after { -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } .lines-draw .grid .grid-col:nth-child(6):after { -webkit-transition-delay: 1.8s; -o-transition-delay: 1.8s; transition-delay: 1.8s; } .lines-draw .grid .grid-col:nth-child(7):after { -webkit-transition-delay: 2.1s; -o-transition-delay: 2.1s; transition-delay: 2.1s; } .lines-draw .grid .grid-col:nth-child(8):after { -webkit-transition-delay: 2.4s; -o-transition-delay: 2.4s; transition-delay: 2.4s; } .lines-draw .grid .grid-col:nth-child(9):after { -webkit-transition-delay: 2.7s; -o-transition-delay: 2.7s; transition-delay: 2.7s; } .success-text { display: none; margin-top: -16px; } .success-text .row:before, .success-text .row:after { display: table; content: ""; } .success-text .row:after { clear: both; } .lt-ie8 .success-text .row { zoom: 1; } .success-text p { font-size: 16px; line-height: 18px; font-weight: 400; padding-bottom: 0; } .success-text p strong { font-size: 85px; line-height: 86px; } .success-text p.success-text__title { padding-bottom: 65px; text-transform: uppercase; } .success-text .item { display: inline-block; width: -webkit-calc(1440px / 6); width: calc(1440px / 6); float: left; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .success-text p { font-size: 14px; line-height: 16px; } .success-text p strong { font-size: 66px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .success-text p { font-size: 14px; line-height: 16px; } .success-text p strong { font-size: 66px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .success-text p { font-size: 14px; line-height: 16px; } .success-text p strong { font-size: 66px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .success-text .item { width: auto; display: inline-block; float: none; } .success-text .item:first-child { padding-right: 20px; } } @media only screen and (max-width: 767px) { .success-text p strong { font-size: 40px; line-height: 42px; } .success-text p.success-text__title { padding-bottom: 25px; } .success-text .item { display: block; padding-bottom: 25px; } } .text-404 { text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .text-404 p { text-transform: uppercase; font-size: 36px; line-height: 38px; padding-bottom: 30px; } .text-404 p:last-child { padding-bottom: 0; } .text-404 p strong { font-size: 72px; line-height: 74px; } @media only screen and (max-width: 767px) { .text-404 { width: 280px; } .text-404 p { font-size: 14px; line-height: 16px; } .text-404 p strong { font-size: 24px; line-height: 26px; } } .tablet-portrait { display: none; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .tablet-portrait { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; background: #061e1c; text-align: center; } } .tablet-portrait .tablet-portrait__i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 550px; width: 100%; } .tablet-portrait .ico { padding-bottom: 20px; } .tablet-portrait p { font-size: 18px; line-height: 20px; padding-bottom: 20px; } .tablet-portrait p strong { font-size: 24px; line-height: 28px; } .mobile-landscape { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; background: #061e1c; text-align: center; } @media only screen and (max-width: 767px) and (orientation: landscape) { .mobile-landscape { display: block; } } .mobile-landscape .mobile-landscape__i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 550px; width: 100%; } .mobile-landscape .ico { padding-bottom: 20px; } .mobile-landscape .icon { font-size: 5px; } .mobile-landscape p { font-size: 14px; line-height: 20px; padding-bottom: 20px; } .mobile-landscape p strong { font-size: 18px; line-height: 28px; } .mobile-nav-btn { height: 24px; width: 30px; position: absolute; right: 15px; top: 37px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 999; } .mobile-nav-btn:after { content: ""; position: absolute; display: block; bottom: -1px; left: 0; right: 0; height: 3px; background: #fff; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .mobile-nav-btn:before { content: ""; position: absolute; display: block; top: 0; left: 0; right: 0; background: #fff; height: 3px; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .mobile-nav-btn span { position: absolute; top: 50%; height: 3px; background: #fff; margin-top: -1px; display: block; left: 0; right: 0; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .mobile-nav-active .mobile-nav-btn:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 11px; } .mobile-nav-active .mobile-nav-btn:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); bottom: 10px; } .mobile-nav-active .mobile-nav-btn span { opacity: 0; } .gallery { position: relative; } .gallery .prev-slide, .gallery .next-slide { display: block; width: 48px; height: 48px; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; margin-top: -24px; } .gallery .prev-slide { left: 20px; } .gallery .prev-slide .icon { -webkit-transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .gallery .next-slide { right: 20px; } .gallery .icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gallery__i { max-width: -webkit-calc(1920px / 2); max-width: calc(1920px / 2); margin: 0 auto; padding: 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .gallery__i img { width: 100%; display: block; } .gallery__i .slick-arrow { position: absolute; opacity: 0; visibility: hidden; } @media only screen and (min-width: 1422px) and (max-width: 1600px) { .gallery__i { width: 684px; } } @media only screen and (min-width: 1281px) and (max-width: 1421px) { .gallery__i { width: 684px; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { .gallery__i { width: 684px; } } .short-description .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } /* fix iOS bug not displaying 100vh correctly */ /* ipad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { .section-more .section_active { height: 768px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .section-more .section_active { height: 1024px; } } /* iphone5 */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { .section-more .section_active { height: 320px; } } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { .section-more .section_active { height: 568px; } } /* iPhone 4 */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { .section-more .section_active { height: 320px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { .section-more .section_active { height: 480px; } }