/* Start:/local/js.lib/mCustomScrollbar/jquery.mCustomScrollbar.css?162981218653583*/ /* == 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; -moz-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; -moz-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; -moz-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; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-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(/local/js.lib/mCustomScrollbar/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; -moz-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; -moz-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; -moz-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; -moz-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; -moz-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; -moz-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; -moz-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; -moz-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: -moz-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, 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: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 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: -moz-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, 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: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 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; -moz-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); 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; 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); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 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; -moz-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; -moz-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{ 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; 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{ 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{ 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); 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{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ 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{ 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{ 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); 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; -moz-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); } /* ---------------------------------------- */ /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/banners_main/style.css?16354152587126*/ .mainBannerSlider { position: relative; display: block !important; } .mainBannerSlider .owl-nav { position: relative; } .mainBannerSlider .owl-nav .owl-prev, .mainBannerSlider .owl-nav .owl-next { position: absolute; bottom: calc(100% + 275px); margin-bottom: -20px; font-size: 40px !important; color: black !important; } .mainBannerSlider .owl-nav .owl-prev { right: calc(100% + 20px); } .mainBannerSlider .owl-nav .owl-next { left: calc(100% + 20px); } .mainBannerSlider .owl-dots { position: absolute; bottom: 17px; width: 100%; display: flex; justify-content: center; } .mainBannerSlider .owl-dots .owl-dot { position: relative; display: block; width: 120px; height: 30px; } .mainBannerSlider .owl-dots .owl-dot::before { content: ''; display: block; position: absolute; width: 0%; height: 2px; top: 50%; margin-top: -1px; left: 0px; background-color: white; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 1; } .mainBannerSlider .owl-dots .owl-dot::after { content: ''; display: block; position: absolute; width: 100%; height: 1px; top: 50%; margin-top: -1px; left: 0px; background-color: #CCCCCC; } .mainBannerSlider .owl-dots .owl-dot+.owl-dot { margin-left: 12px; } .mainBannerSlider .owl-dots .owl-dot.active::before { opacity: 1; -webkit-animation-name: sliderTimeline; -moz-animation-name: sliderTimeline; -o-animation-name: sliderTimeline; animation-name: sliderTimeline; -webkit-animation-duration: var(--sliderSpeed); -moz-animation-duration: var(--sliderSpeed); -o-animation-duration: var(--sliderSpeed); animation-duration: var(--sliderSpeed); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes sliderTimeline { 0% { width: 0%; } 100% { width: 100%; } } .mainBanner { overflow: hidden; height: 590px; } .mainBannerItem { position: relative; /*min-height: 590px;*/ height: 590px; padding-left: 115px; padding-top: 80px; padding-bottom: 50px; z-index: 1; } .mainBannerItem .img { position: absolute; height: 100%; width: auto !important; top: 0px; right: 0px; z-index: -1; } .mainBannerSlider.owl-loaded .mainBannerItem .img { display: block; } .mainBannerItem .wrapper { max-width: 420px; } .mainBannerItem .titleContainer+.contentContainer { margin-top: 20px; } .mainBannerItem .info+.buttons { margin-top: 40px; } .mainBannerItem .buttons { display: flex; align-items: center; } .mainBannerItem .buttons [class*="btn"]+.note { margin-left: 20px; } .mainBannerItem .note { display: block; padding-left: 29px; /*padding-top: 16px;*/ padding-right: 36px; /*padding-bottom: 16px;*/ font-size: 16px; line-height: 24px; color: #232323; font-weight: 500; /* background-image: url(/local/templates/mst/img/border.svg); background-position: left top; background-repeat: no-repeat; */ } .mainBannerItem .note.invert { color: white; } @media (min-width: 1681px) { .mainBannerSlider .owl-nav .owl-prev, .mainBannerSlider .owl-nav .owl-next { bottom: calc(100% + 430px); } .mainBannerSlider .owl-dots { bottom: 27px; } .mainBannerItem { height: 730px; padding-left: 142px; padding-top: 166px; } .mainBanner { height: 730px; } } @media (max-width: 1439px) { .mainBannerSlider { max-width: 1170px; width: calc(100vw - 120px); margin-left: auto; margin-right: auto; } .mainBannerItem { padding-left: 80px; } } @media (max-width: 1199px) { .mainBannerSlider { max-width: 992px; } .mainBannerItem { padding-left: 50px; padding-top: 50px; height: 500px; } .mainBanner { height: 500px; } .mainBannerItem .wrapper { max-width: 400px; } .mainBannerItem .img { max-width: 580px; object-fit: cover; object-position: left top; } } @media (max-width: 1085px) { .mainBannerSlider .owl-nav { display: none; } .mainBannerSlider { overflow: hidden; } } @media (max-width: 1023px) { .mainBanner .container { width: 100%; padding: 0px; } .mainBannerSlider { max-width: 100%; width: 100%; } .mainBannerSlider .owl-nav { display: none; } .mainBannerSlider .owl-dots { bottom: 40px; } .mainBannerSlider .owl-dots .owl-dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.6); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; } .mainBannerSlider .owl-dots .owl-dot::before, .mainBannerSlider .owl-dots .owl-dot::after { display: none; } .mainBannerSlider .owl-dots .owl-dot+.owl-dot { margin-left: 12px; } .mainBannerSlider .owl-dots .owl-dot.active { background-color: #026EF9; } .mainBannerSlider .owl-dots .owl-dot.active::before { -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; } .mainBannerItem { min-height: 492px; height: auto; padding-left: 0px; padding-top: 40px; } .mainBanner { height: 492px; } .mainBannerItem .img { max-width: 50%; } .mainBannerItem .wrapper { max-width: 768px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } .mainBannerItem .titleContainer, .mainBannerItem .contentContainer { max-width: 350px; } .mainBannerItem .titleContainer+.contentContainer { margin-top: 14px; } .mainBannerItem .note { /* padding: 8px 21px 14px;*/ padding: 0 21px; font-size: 14px; line-height: 22px; background-size: contain; } .mainBannerItem .info+.buttons { margin-top: 26px; } } @media (max-width: 767px) { .mainBanner .container { max-width: 100%; } .mainBannerItem { overflow: hidden; } .mainBannerItem:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .mainBannerItem .img { width: auto ; max-width: unset; } .mainBannerItem .wrapper { max-width: 480px; width: 100%; position: relative; z-index: 2; } .mainBannerItem .buttons { align-items: flex-start; } } @media (max-width: 767px) { .mainBannerItem .img { width: 100% !important; object-position: center; } } @media (max-width: 374px) { .mainBannerItem .buttons { display: block; } .mainBannerItem .buttons [class*="btn"]+.note { margin-left: 0px; margin-top: 15px; padding: 0; } } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both } .owl-carousel .owl-animated-in { z-index: 0 } .owl-carousel .owl-animated-out { z-index: 1 } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section.list/popular/style.css?16343072052156*/ .categoriesList { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 40px; column-gap: 30px; } .categoryItem { position: relative; z-index: 1; } .categoryItem>a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 7; overflow: hidden; text-indent: 200%; white-space: nowrap; } .categoryItem .img { text-align: center; height: 100px; display: flex; align-items: center; justify-content: center; } .categoryItem .img [class*="icon"] { display: block; margin: 0px auto; font-size: 84px; color: #464F56; text-align: center; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .categoryItem .img+.title { margin-top: 25px; } .categoryItem .title { display: block; font-size: 20px; line-height: 28px; color: #23272D; font-weight: 500; letter-spacing: 0.18px; text-align: center; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .categoryItem:hover .img [class*="icon"] { color: #026EF9; } .categoryItem:hover .title { color: #026EF9; } @media (min-width: 1681px) { .categoriesList { row-gap: 62px; } .categoryItem .img [class*="icon"] { font-size: 115px; } .categoryItem .img+.title { margin-top: 34px; } } @media (max-width: 1023px) { .categoriesList { display: grid; grid-template-columns: repeat(auto-fill, 125px); row-gap: 30px; column-gap: 20px; justify-content: center; } .categoryItem .img [class*="icon"] { font-size: 60px; } .categoryItem .img+.title { margin-top: 20px; } .categoryItem .title { font-size: 15px; line-height: 22px; word-break: break-word; } } @media (max-width: 1199px) { .categoryItem .img [class*="icon"] { font-size: 70px; } } @media (max-width: 767px) { .categoryItem .img+.title { margin-top: 7px; } } @media (max-width: 500px) { .categoryItem .title { font-size: 14px; line-height: 18px; } } .categoriesList .categoryItem svg>* { transition: all 0.3s; } .categoriesList .categoryItem:hover svg>* { fill: #026ef9 !important; } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/home_brands/style.css?16336863572268*/ .catalogSection .categoriesBrands { margin-top: 50px; } .categoriesBrands ul { display: flex; justify-content: space-between; align-items: center; } .categoriesBrands li { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); position: relative; z-index: 1; -webkit-transition: filter 0.3s; -moz-transition: filter 0.3s; -o-transition: filter 0.3s; transition: filter 0.3s; } .categoriesBrands li>a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 7; overflow: hidden; text-indent: 200%; white-space: nowrap; } .categoriesBrands li:hover { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); } .categoriesBrands li img { width: 175px; display: block; } @media (min-width: 1681px) { .categoriesBrands li { width: 239px; flex-shrink: 1; } .categoriesBrands li img { width: 100%; } } @media (max-width: 1439px) { .categoriesBrands li img { width: 147px; } } @media (max-width: 1199px) { .categoriesBrands { display: flex; margin-left: calc((100vw - 992px) / -2); margin-right: calc((100vw - 992px) / -2); overflow-x: scroll; } .categoriesBrands::-webkit-scrollbar { display: none; } .categoriesBrands ul { padding-left: calc((100vw - 992px) / 2); padding-right: calc((100vw - 992px) / 2); } .categoriesBrands li+li { margin-left: 24px; } } @media (max-width: 1023px) { .categoriesBrands { margin-left: calc((100vw - 736px) / -2); margin-right: calc((100vw - 736px) / -2); } .categoriesBrands ul { padding-left: calc((100vw - 736px) / 2); padding-right: calc((100vw - 736px) / 2); } .categoriesBrands li+li { margin-left: 13px; } } @media (max-width: 767px) { .categoriesBrands { margin-left: calc((100vw - 448px) / -2); margin-right: calc((100vw - 448px) / -2); } .categoriesBrands ul { padding-left: calc((100vw - 448px) / 2); padding-right: calc((100vw - 448px) / 2); } } @media (max-width: 767px) and (max-width: 479px) { .categoriesBrands { margin-left: -16px; margin-right: -16px; } .categoriesBrands ul { padding-left: 16px; padding-right: 16px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/home_service/style.css?16336805615790*/ .servicesSection .titleContainer+.contentContainer { margin-top: 60px; } .mainServicesBlock { display: flex; } .mainServicesBlock .leftSide { width: 645px; flex-shrink: 0; } .mainServicesBlock .leftSide+.rightSide { margin-left: 14px; } .mainServicesBlock .rightSide { padding-top: 7px; width: 600px; } .mainServicesBlock .img { position: relative; height: 634px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; overflow: hidden; z-index: 1; } .mainServicesBlock .img img { position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; z-index: -1; } .mainServicesBlock .img img.active { opacity: 1; z-index: 1; } .mainServicesList .mainServiceItem+.mainServiceItem { margin-top: 20px; } .mainServiceItem { position: relative; padding-left: 42px; padding-top: 0px; -webkit-transition: padding-top 0.3s; -moz-transition: padding-top 0.3s; -o-transition: padding-top 0.3s; transition: padding-top 0.3s; } .mainServiceItem::before { content: ''; display: block; position: absolute; top: 0px; right: 0px; width: 0%; height: 1px; background-color: #23272D; -webkit-transition: width 0.5s; -moz-transition: width 0.5s; -o-transition: width 0.5s; transition: width 0.5s; } .mainServiceItem .img { display: none; height: 210px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; overflow: hidden; } .mainServiceItem .img img { width: 100%; height: 100%; object-fit: cover; } .mainServiceItem .head { cursor: pointer; } .mainServiceItem .title { display: block; padding-left: 39px; position: relative; font-size: 24px; line-height: 32px; color: #C2C2C2; font-weight: 600; letter-spacing: 1px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .mainServiceItem .title .num { position: absolute; display: block; top: 0px; left: 0px; } .mainServiceItem .title:hover { color: #080C37; } .mainServiceItem .content { padding-left: 75px; } .mainServiceItem .content .in { padding-top: 10px; padding-bottom: 20px; border-bottom: 1px solid #E0E0E0; } .mainServiceItem .content .text { font-family: "Open Sans"; font-size: 16px; line-height: 24px; color: black; font-weight: normal; letter-spacing: 0.22px; } .mainServiceItem .content .text+.link { margin-top: 20px; } .mainServiceItem.active { padding-top: 20px; } .mainServiceItem.active::before { width: 100%; } .mainServiceItem.active .title { color: #080C37; } @media (min-width: 1681px) { .mainServicesBlock { justify-content: center; } .mainServicesBlock { justify-content: flex-start; } .mainServicesBlock .leftSide { width: 885px; } .mainServicesBlock .img { height: 800px; } .mainServicesList .mainServiceItem+.mainServiceItem { margin-top: 30px; } .mainServiceItem .content .in { padding-bottom: 30px; } .mainServicesBlock .leftSide { flex-grow: 0; } .mainServicesBlock .rightSide { flex-grow: 0; } } @media (max-width: 1439px) { .mainServicesBlock .leftSide { width: 600px; } .mainServiceItem { padding-left: 30px; } } @media (max-width: 1199px) { .mainServicesBlock .leftSide { display: none; } .mainServicesBlock .leftSide+.rightSide { margin-left: 0px; } .mainServicesBlock .rightSide { display: flex; width: 100%; padding-top: 0px; } .mainServicesBlock { margin-left: calc((100vw - 992px) / -2); margin-right: calc((100vw - 992px) / -2); overflow-x: scroll; } .mainServicesBlock::-webkit-scrollbar { display: none; } .mainServicesList { display: flex; padding-left: calc((100vw - 992px) / 2); padding-right: calc((100vw - 992px) / 2); } .mainServicesList .mainServiceItem { width: 282px; flex-shrink: 0; } .mainServicesList .mainServiceItem+.mainServiceItem { margin-left: 30px; margin-top: 0px; } .mainServiceItem { padding-top: 0px; padding-left: 0px; } .mainServiceItem::before { display: none; } .mainServiceItem.active { padding-top: 0px; } .mainServiceItem .img { display: block; } .mainServiceItem .img img { position: static; opacity: 1; } .mainServiceItem .img+.head { margin-top: 16px; } .mainServiceItem .head+.content { margin-top: 10px; } .mainServiceItem .title { padding-left: 0px; font-size: 20px; line-height: 26px; color: #080C37; } .mainServiceItem .title .num { display: none; } .mainServiceItem .content { display: block !important; padding-left: 0px; } .mainServiceItem .content .text { font-size: 14px; } .mainServiceItem .content .in { padding: 0px; border-bottom: none; } } @media (max-width: 1023px) { .mainServicesBlock { margin-left: calc((100vw - 736px) / -2); margin-right: calc((100vw - 736px) / -2); } .mainServicesBlock .mainServicesList { padding-left: calc((100vw - 736px) / 2); padding-right: calc((100vw - 736px) / 2); } .mainServicesList .mainServiceItem { width: 252px; } } @media (max-width: 767px) { .mainServicesBlock { margin-left: calc((100vw - 448px) / -2); margin-right: calc((100vw - 448px) / -2); } .mainServicesBlock .mainServicesList { padding-left: calc((100vw - 448px) / 2); padding-right: calc((100vw - 448px) / 2); } .mainServiceItem .title { font-size: 18px; line-height: 24px; } .mainServiceItem .content .text { font-size: 13px; } } @media (max-width: 767px) and (max-width: 479px) { .mainServicesBlock { margin-left: -16px; margin-right: -16px; } .mainServicesBlock .mainServicesList { padding-left: 16px; padding-right: 16px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section/popular/style.css?1629885258826*/ .catalog-items-wr { background: #F7F6F6; } .catalog-section-wrap { border-top: 2px solid #979797; } .catalog-section .productCard { width: 100%; } @media(max-width: 1600px) and (min-width: 1400px) { .catalog-section-filter { width: 260px !important; } .catalog-element-list { width: calc(100% - 260px) !important; } } @media(max-width: 1023px) { .catalog-items-wr { width: calc(100% + 3rem); margin: 0 -1.5rem; } .catalog-section .productCard { padding-bottom: 0; padding-top: 16px; } .catalog-section .product-item-info-container { margin-bottom: 0; } .catalog-section .productCard .icons { top: 5px; } .catalog-section .productCard .info { margin-bottom: 16px; } .catalog-section .productCard [class*="btnIcon"].md { padding: 8px 10px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.item/bootstrap_v4/style.css?16354135035959*/ .product-item-image-wrapper { position: relative; display: block; width: 100%; transition: all 300ms ease; } .product-item-image-wrapper:hover { } .product-item-container.hover.product-item-scalable-card .product-item-image-wrapper { padding-top: 54%; } .product-item-image-wrapper:hover .product-item-image-alternative { opacity: 1; } .product-item-image-wrapper:hover .product-item-image-original { opacity: 0; } .product-item-image-original, .product-item-image-alternative { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #fff; background-position: center; background-size: contain; background-repeat: no-repeat; transition: opacity 300ms linear; } .product-item-image-original img, .product-item-image-alternative img { position: absolute; width: 100%; height: 100%; object-fit: contain; display: block; left: 0; top: 0; } .product-item-image-original { z-index: 11; } .product-item-image-alternative { z-index: 13; opacity: 0; } .bx-no-touch .product-item-container.hover .product-item-image-original { opacity: 0; } .bx-no-touch .product-item-container.hover .product-item-image-alternative { opacity: 1; } .product-item-big-card .product-item-image-wrapper { margin-bottom: 25px; } /*.wl-hide, .catalog-section .productCard .iconFavourite .wl-hide, .productsSection .productCard .iconFavourite .wl-hide {display: none !important;}*/ .product-item-compare { position: relative; } .productCard { position: relative; /*width: 308px;*/ padding: 50px 15px 20px; } .productCard .icons { position: absolute; top: 24px; right: 15px; z-index: 2; } .productCard .icons > * + * { margin-top: 14px; } .productCard .tags ul { margin: -2px; display: flex; flex-wrap: wrap; } .productCard .tags ul li { padding: 2px; } .productCard .info { margin-top: 20px; } .productCard .info + .buttons { margin-top: 18px; } .productCard .brand { display: block; font-family: "Open Sans"; font-size: 15px; line-height: 24px; color: #232323; letter-spacing: 0.22px; } .productCard .brand + .title { margin-top: 4px; } .productCard .title { display: block; font-size: 16px; line-height: 120%; color: #232323; font-weight: 700; } .productCard .title + .price { margin-top: 8px; } .productCard .price { display: block; font-size: 24px; line-height: 120%; color: #a3abb5; font-weight: 700; letter-spacing: 0.22px; } .productCard .buttons [class*="btn"] + [class*="btn"] { margin-top: 6px; } .productCard .buttons + .options { margin-top: 20px; } .productCard .options { display: flex; justify-content: center; align-items: center; } .productCard .options [class*="btn"] + [class*="btn"], .productCard .options .product-item-compare-container + .btnSimpleIcon { margin-left: 22px; } .productCard .product-item-compare-container { min-height: auto; padding: 0; } .productCard .product-item-compare-container, .productCard .product-item-compare-container + a.btnSimpleIcon, .productCard .product-item-compare-container .btnSimpleIcon.checkbox { line-height: 1; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox .in { cursor: pointer; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox span { color: inherit; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input { position: absolute; left: 0; opacity: 0; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input { cursor: pointer; } .compare-wr__sel { display: none; color: #026EF9; } .compare-wr__sel .icon-chart { position: relative; } /**/ .compare-wr__sel .icon-chart:after { content: ""; position: absolute; right: 0; top: -4px; width: 11px; height: 10px; background: url(/local/templates/mst/images/done.svg) no-repeat center; display: inline-block; background-size: contain; } /* .compare-wr__sel .icon-chart:before { content: ""; display: inline-block; width: 47px; height: 31px; background: url(/local/templates/mst/images/compared.svg) no-repeat center; } */ .productCard .product-item-compare-container .btnSimpleIcon.checkbox .compare-wr { display: flex; justify-content: center; align-items: center; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox:hover span { color: #026EF9; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input:checked + .compare-wr span { color: #026EF9; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input:checked + .compare-wr .compare-wr__nosel { display: none; white-space: nowrap; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input:checked + .compare-wr .compare-wr__sel { display: block; white-space: nowrap; } .productCard .options .form-load.btnSimpleIcon.no-demo, .productCard .options .form-load.btnSimpleIcon.no-demo [class*="icon"] { color: #979797; cursor: default; pointer-events: none; } .wish_wrap a { text-decoration: none; } .wish_wrap a span { display: none; } .product-item-button-container button[disabled="disabled"], .product-item-button-container button[disabled="disabled"]:hover, .buttons .btnIconType1.disabled, .buttons .btnIconType1.disabled:hover { background: #b8d7ff; } /**------------------**/ .productCard .iconFavourite [class*="icon"].wl-hide { opacity: 0; } .productCard .iconFavourite [class*="icon"].full.wl-act { color: #d23838; opacity: 1; z-index: 1; } .productCard .buttons>[class*="btn"] { margin-bottom: 6px; } @media(max-width: 991px) { .productCard .iconFavourite:hover [class*="icon"].wl-act { opacity: 1; } .productCard .iconFavourite:hover [class*="icon"].full.wl-hide { opacity: 0; } } /* End */ /* Start:/bitrix/components/bitrix/catalog.product.subscribe/templates/.default/style.min.css?16287597661413*/ .bx-catalog-subscribe-button{margin-bottom:6px;display:inline-block}.bx-catalog-popup-content{width:90%;max-width:280px}.bx-catalog-subscribe-form-container-label{font-size:13px;color:#5a6c77;padding-bottom:2px}.bx-catalog-subscribe-form-container-input{position:relative}.bx-catalog-subscribe-form-container-input input[type="text"]{display:block;width:100%;font-size:18px;height:38px;margin:0;padding:0 4px;border:1px solid #ccd5db;border-radius:2px;background:#f8fafc;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-catalog-subscribe-form-star-required{color:#d93333}.bx-catalog-subscribe-form-container .bx-captcha{margin-bottom:10px}.bx-catalog-popup-message{font-weight:bold;min-width:240px;margin:0}.bx-catalog-subscribe-alert{background-color:#edf6fc;color:#000;font-size:15px;min-height:45px;text-align:center;padding:12px 40px 12px 60px;position:relative;width:280px}.bx-catalog-subscribe-aligner{display:inline-block;height:45px;margin-left:-1px;vertical-align:middle;width:1px}.bx-catalog-subscribe-alert-text{display:inline-block;vertical-align:middle}.bx-catalog-subscribe-alert-footer{text-align:center}.bx-catalog-subscribe-alert-popup{background-color:#edf6fc!important;border:1px solid #edf6fc!important;border-radius:3px!important;-webkit-box-shadow:0 19px 24px rgba(88,112,118,0.17)!important;box-shadow:0 19px 24px rgba(88,112,118,0.17)!important} /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/home_about/style.css?16345749035911*/ .advantagesSection { background-color: #060606; overflow: hidden; } .advantagesSection .advantagesSectionInner { position: relative; padding-top: 105px; padding-bottom: 70px; } .advantagesSection .titleContainer { max-width: 870px; margin-left: auto; margin-right: auto; } .advantagesSection .titleContainer+.contentContainer { margin-top: 105px; } .advantagesSlider { position: relative; } .advantagesSlider.toBottom .owl-item.active .animatedBlock { -webkit-animation-name: sliderContent; -moz-animation-name: sliderContent; -o-animation-name: sliderContent; animation-name: sliderContent; } .advantagesSlider.toTop .owl-item.active .animatedBlock { -webkit-animation-name: sliderContentReverse; -moz-animation-name: sliderContentReverse; -o-animation-name: sliderContentReverse; animation-name: sliderContentReverse; } .advantagesSlider .owl-item.active .animatedBlock { -webkit-animation-name: sliderContent; -moz-animation-name: sliderContent; -o-animation-name: sliderContent; animation-name: sliderContent; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes sliderContent { 0% { -moz-transform: translateY(-10%) skewX(-2deg); -ms-transform: translateY(-10%) skewX(-2deg); -webkit-transform: translateY(-10%) skewX(-2deg); -o-transform: translateY(-10%) skewX(-2deg); transform: translateY(-10%) skewX(-2deg); opacity: 0; } 100% { -moz-transform: translateY(0%) skewX(0deg); -ms-transform: translateY(0%) skewX(0deg); -webkit-transform: translateY(0%) skewX(0deg); -o-transform: translateY(0%) skewX(0deg); transform: translateY(0%) skewX(0deg); opacity: 1; } } @keyframes sliderContentReverse { 0% { -moz-transform: translateY(10%) skewX(2deg); -ms-transform: translateY(10%) skewX(2deg); -webkit-transform: translateY(10%) skewX(2deg); -o-transform: translateY(10%) skewX(2deg); transform: translateY(10%) skewX(2deg); opacity: 0; } 100% { -moz-transform: translateY(0%) skewX(0deg); -ms-transform: translateY(0%) skewX(0deg); -webkit-transform: translateY(0%) skewX(0deg); -o-transform: translateY(0%) skewX(0deg); transform: translateY(0%) skewX(0deg); opacity: 1; } } .advantagesSlider .owl-dots { position: absolute; top: 46px; right: calc(100% - 3px); display: flex; flex-direction: column; } .advantagesSlider .owl-dots .owl-dot { position: relative; display: block; width: 1px; height: 60px; background-color: #7C7C96; } .advantagesSlider .owl-dots .owl-dot::before { content: ''; display: block; position: absolute; width: 2px; height: 0%; top: 0px; left: -0.5px; background-color: white; } .advantagesSlider .owl-dots .owl-dot.active::before { -webkit-animation-name: sliderDots; -moz-animation-name: sliderDots; -o-animation-name: sliderDots; animation-name: sliderDots; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } .advantagesSlider .owl-dots .owl-dot+.owl-dot { margin-top: 20px; } @keyframes sliderDots { 0% { height: 0%; } 100% { height: 100%; } } .advantagesSlide { padding-left: 113px; padding-right: 180px; height: 538px; display: flex; justify-content: space-between; } .advantagesSlide .leftSide { width: 420px; padding-top: 105px; } .advantagesSlide .rightSide { width: 440px; } .advantagesSlide .img { width: 100%; } .advantagesSlide .img img { width: 100%; } .advantagesSlide .animatedBlock { -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -webkit-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); opacity: 0; } .advantagesSlide .title+.content { margin-top: 24px; } @media (min-width: 1681px) { .advantagesSlider .owl-dots { top: 95px; right: calc(100% - 12px); } .advantagesSlide { justify-content: flex-start; padding-left: 180px; } .advantagesSlide .rightSide { margin-left: 340px; } } @media (max-width: 1439px) { .advantagesSlide { padding-left: 100px; padding-right: 0px; } } @media (max-width: 1199px) { .advantagesSection .advantagesSectionInner { padding-top: 70px; } .advantagesSection .titleContainer+.contentContainer { margin-top: 70px; } .advantagesSlide { padding-left: 50px; height: auto; } .advantagesSlide .leftSide { padding-top: 70px; } .advantagesSlide .rightSide { width: 360px; } } @media (max-width: 1023px) { .advantagesSection .advantagesSectionInner { padding-top: 40px; padding-bottom: 40px; } .advantagesSection .titleContainer+.contentContainer { margin-top: 40px; } .advantagesSlider.owl-carousel { display: block; } .advantagesSlider .item+.item { margin-top: 43px; } .advantagesSlide { padding-left: 0px; flex-direction: column-reverse; align-items: center; max-width: 360px; width: 100%; margin-left: auto; margin-right: auto; } .advantagesSlide .leftSide { width: 100%; padding-top: 0px; margin-top: 20px; } .advantagesSlide .animatedBlock { opacity: 1; -moz-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .advantagesSlide .img { height: 318px; overflow: hidden; } .advantagesSlide .img img { width: 100%; height: 100%; object-fit: contain; } .advantagesSlide .title+.content { margin-top: 14px; } } @media (max-width: 767px) { .advantagesSlide { max-width: 343px; } .advantagesSlide .rightSide { width: 100%; } .advantagesSlide .img { height: 303px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/reviews/style.css?16358503877128*/ .reviewContentSlider .head .img { height: 59px; width: 59px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; } .reviewsSection .titleContainer+.contentContainer { margin-top: 50px; } .reviewsSection .wrapper { padding-left: 3px; padding-right: 112px; display: flex; justify-content: space-between; } .reviewsSection .rightSide, .reviewContentSlider .item { width: 533px; } .reviewsSection .reviewsListSlider { width: 566px; margin-left: -20px; margin-top: -20px; } .reviewsListSlider .itemWrapper { padding: 20px; } .reviewsListSlider .item+.item { margin-top: 20px; } .reviewsListSlider .item.active .reviewListItem { border: 1px solid transparent; -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); } .reviewsListSlider+.sliderNav { margin-top: 10px; margin-left: -20px; display: flex; justify-content: center; align-items: center; } .reviewsListSlider+.sliderNav .owl-prev, .reviewsListSlider+.sliderNav .owl-next { display: block; padding: 0px 6px; font-size: 10px; line-height: 24px; color: #999999; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .reviewsListSlider+.sliderNav .owl-prev:hover, .reviewsListSlider+.sliderNav .owl-next:hover { color: black; } .reviewsListSlider+.sliderNav .owl-prev+.dots, .reviewsListSlider+.sliderNav .owl-next+.dots { margin-left: 6px; } .reviewsListSlider+.sliderNav .dots { display: flex; } .reviewsListSlider+.sliderNav .dots .owl-dot { display: inline-block; padding: 0px 6px; opacity: 0.4; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .reviewsListSlider+.sliderNav .dots .owl-dot span { display: inline-block; font-size: 15px; line-height: 24px; color: black; font-weight: 600; } .reviewsListSlider+.sliderNav .dots .owl-dot.active, .reviewsListSlider+.sliderNav .dots .owl-dot:hover { opacity: 1; } .reviewsListSlider+.sliderNav .dots+.owl-next { margin-left: 6px; } .reviewListItem { display: flex; min-height: 107px; padding: 24px 40px; background-color: white; border: 1px solid #DFDDDD; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 4px 30px transparent; -moz-box-shadow: 0px 4px 30px transparent; box-shadow: 0px 4px 30px transparent; -webkit-transition: border 0.3s, box-shadow 0.3s; -moz-transition: border 0.3s, box-shadow 0.3s; -o-transition: border 0.3s, box-shadow 0.3s; transition: border 0.3s, box-shadow 0.3s; cursor: pointer; } .reviewListItem .img { width: 59px; height: 59px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; } .reviewListItem .img img { width: 100%; height: 100%; object-fit: cover; } .reviewListItem .img+.content { margin-left: 21px; width: calc(100% - 72px); } .reviewListItem .name+.position { margin-top: 4px; } .reviewListItem:hover { border: 1px solid transparent; -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); } .reviewContentBlock .head { display: none; } .reviewContentBlock .head .img { height: 59px; width: 59px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; } .reviewContentBlock .head .img img { width: 100%; height: 100%; object-fit: cover; } .reviewContentBlock .head .img+.data { margin-left: 12px; width: calc(100% - 73px); } .reviewContentBlock .head .name { display: block; } .reviewContentBlock .title+.content { margin-top: 20px; } @media(max-width: 767px) { .reviewContentBlock .title+.content .textContent { max-height: 220px; overflow: hidden; padding-bottom: 50px; position: relative; } .reviewContentBlock .title+.content .textContent:after { content: ""; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)) } } .reviewContentBlock .viewMore { margin-top: 40px; } @media (max-width: 1023px) { .reviewContentBlock .viewMore { margin-top: 25px; } } .reviewContentBlock [class*="btn"] { display: none; } @media (min-width: 1681px) { .reviewsSection .wrapper { justify-content: flex-start; } .reviewsSection .rightSide { margin-left: 180px; max-width: 732px; flex-grow: 1; } .reviewContentSlider .item { width: 732px; } .reviewsSection .reviewsListSlider { width: 772px; } } @media (max-width: 1439px) { .reviewsSection .wrapper { padding-left: 0px; padding-right: 0px; } } @media (max-width: 1199px) { .reviewsSection .titleContainer+.contentContainer { margin-top: 40px; } .reviewsSection .rightSide, .reviewContentSlider .item { width: 500px; } .reviewsSection .reviewsListSlider { width: 450px; } .reviewsListSlider+.sliderNav { margin-top: 0px; } .reviewContentSlider .textBlock+.viewMore { margin-top: 20px; } } @media (max-width: 1023px) { .reviewsSection .wrapper { display: block; margin-left: calc((100vw - 736px) / -2); margin-right: calc((100vw - 736px) / -2); overflow-x: scroll; } .reviewsSection .wrapper::-webkit-scrollbar { display: none; } .reviewsSection .leftSide { display: none; } .reviewsSection .rightSide { display: flex; } .reviewsSection .reviewContentSlider { display: flex; } .reviewContentSlider { width: auto; display: flex; padding-left: calc((100vw - 736px) / 2); padding-right: calc((100vw - 736px) / 2); } .reviewContentSlider .item { flex-shrink: 0; width: 292px; padding: 30px 20px 92px; border: 1px solid #DFDDDD; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; position: relative; } .reviewContentSlider .item .btnFillType2 { position: absolute; left: 20px; width: calc(100% - 40px); bottom: 30px; } .reviewContentSlider .item .head { display: flex; } .reviewContentSlider .item .title { display: none; } .reviewContentSlider .item .title+.content { margin-top: 16px; } .reviewContentSlider .item .viewMore { display: none; } .reviewContentSlider .item [class*="btn"] { display: block; margin-top: 24px; } .reviewContentSlider .item+.item { margin-left: 20px; } .reviewsSection.mainSection>.container { overflow: visible } } @media (max-width: 767px) { .reviewsSection .wrapper { margin-left: calc((100vw - 448px) / -2); margin-right: calc((100vw - 448px) / -2); } .reviewContentSlider { padding-left: calc((100vw - 448px) / 2); padding-right: calc((100vw - 448px) / 2); } } @media (max-width: 767px) and (max-width: 479px) { .reviewsSection .wrapper { margin-left: -16px; margin-right: -16px; } .reviewContentSlider { padding-left: 16px; padding-right: 16px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section/popular_device/style.css?1629885258826*/ .catalog-items-wr { background: #F7F6F6; } .catalog-section-wrap { border-top: 2px solid #979797; } .catalog-section .productCard { width: 100%; } @media(max-width: 1600px) and (min-width: 1400px) { .catalog-section-filter { width: 260px !important; } .catalog-element-list { width: calc(100% - 260px) !important; } } @media(max-width: 1023px) { .catalog-items-wr { width: calc(100% + 3rem); margin: 0 -1.5rem; } .catalog-section .productCard { padding-bottom: 0; padding-top: 16px; } .catalog-section .product-item-info-container { margin-bottom: 0; } .catalog-section .productCard .icons { top: 5px; } .catalog-section .productCard .info { margin-bottom: 16px; } .catalog-section .productCard [class*="btnIcon"].md { padding: 8px 10px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/companies/style.css?16345755131540*/ .clientsSection .titleContainer+.contentContainer { margin-top: 40px; } .clientsBlock .wrapper { padding-bottom: 9px; } .clientsBlock .item { width: 175px; position: relative; z-index: 1; } .clientsBlock .item>a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 7; overflow: hidden; text-indent: 200%; white-space: nowrap; } .clientsBlock .item img { width: 100%; } .clientsBlock .item+.item { margin-left: 15px; } .clientsSlider+.siteSliderNav .owl-prev, .clientsSlider+.siteSliderNav .owl-next { bottom: 25px; } @media (min-width: 1681px) { .clientsSlider+.siteSliderNav .owl-prev, .clientsSlider+.siteSliderNav .owl-next { bottom: 40px; } .clientsBlock .wrapper { padding-bottom: 15px; } .clientsBlock .item { width: 239px; } } @media (max-width: 1439px) { .clientsBlock .item { width: 147px; } } @media (max-width: 1023px) { .clientsSection .titleContainer+.contentContainer { margin-top: 20px; } /* .clientsSlider { max-width: 740px; }*/ .clientsBlock .wrapper { padding-bottom: 0px; } .clientsBlock .item { width: 136px; } .clientsBlock .item+.item { margin-left: 12px; } } @media (max-width: 767px) and (max-width: 479px) { /* .clientsSlider { max-width: 284px; }*/ } /* .clientsBlock .item { padding-bottom: 40%; } .clientsBlock .item img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; }*/ /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/footer_brand/style.css?16351581998147*/ .contactsLogo ul { width: 500px; display: flex; flex-wrap: wrap; justify-content: center; margin: -13px -6.5px; } .contactsLogo ul li { width: 153.5px; margin: 13px 6.5px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .contactsLogo ul li>a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 7; overflow: hidden; text-indent: 200%; white-space: nowrap; } .contactsLogo ul li img { width: 100%; height: auto; } .contactsLogo.animated ul li { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @media(min-width: 1025px) { .contactsLogo ul li:nth-child(1) { -moz-transform: translate(-30px, -30px); -ms-transform: translate(-30px, -30px); -webkit-transform: translate(-30px, -30px); -o-transform: translate(-30px, -30px); transform: translate(-30px, -30px); } .contactsLogo ul li:nth-child(2) { -moz-transform: translate(0px, -30px); -ms-transform: translate(0px, -30px); -webkit-transform: translate(0px, -30px); -o-transform: translate(0px, -30px); transform: translate(0px, -30px); } .contactsLogo ul li:nth-child(3) { -moz-transform: translate(30px, -30px); -ms-transform: translate(30px, -30px); -webkit-transform: translate(30px, -30px); -o-transform: translate(30px, -30px); transform: translate(30px, -30px); } .contactsLogo ul li:nth-child(4) { -moz-transform: translate(-30px, 0px); -ms-transform: translate(-30px, 0px); -webkit-transform: translate(-30px, 0px); -o-transform: translate(-30px, 0px); transform: translate(-30px, 0px); } .contactsLogo ul li:nth-child(6) { -moz-transform: translate(30px, 0px); -ms-transform: translate(30px, 0px); -webkit-transform: translate(30px, 0px); -o-transform: translate(30px, 0px); transform: translate(30px, 0px); } .contactsLogo ul li:nth-child(7) { -moz-transform: translate(0px, 30px); -ms-transform: translate(0px, 30px); -webkit-transform: translate(0px, 30px); -o-transform: translate(0px, 30px); transform: translate(0px, 30px); } .contactsLogo.animated ul li:nth-child(1) { -webkit-animation-name: contactLogo1; -moz-animation-name: contactLogo1; -o-animation-name: contactLogo1; animation-name: contactLogo1; } .contactsLogo.animated ul li:nth-child(2) { -webkit-animation-name: contactLogo2; -moz-animation-name: contactLogo2; -o-animation-name: contactLogo2; animation-name: contactLogo2; } .contactsLogo.animated ul li:nth-child(3) { -webkit-animation-name: contactLogo3; -moz-animation-name: contactLogo3; -o-animation-name: contactLogo3; animation-name: contactLogo3; } .contactsLogo.animated ul li:nth-child(4) { -webkit-animation-name: contactLogo4; -moz-animation-name: contactLogo4; -o-animation-name: contactLogo4; animation-name: contactLogo4; } .contactsLogo.animated ul li:nth-child(6) { -webkit-animation-name: contactLogo6; -moz-animation-name: contactLogo6; -o-animation-name: contactLogo6; animation-name: contactLogo6; } .contactsLogo.animated ul li:nth-child(7) { -webkit-animation-name: contactLogo7; -moz-animation-name: contactLogo7; -o-animation-name: contactLogo7; animation-name: contactLogo7; } } @keyframes contactLogo1 { 0% { -moz-transform: translate(-30px, -30px); -ms-transform: translate(-30px, -30px); -webkit-transform: translate(-30px, -30px); -o-transform: translate(-30px, -30px); transform: translate(-30px, -30px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes contactLogo2 { 0% { -moz-transform: translate(0px, -30px); -ms-transform: translate(0px, -30px); -webkit-transform: translate(0px, -30px); -o-transform: translate(0px, -30px); transform: translate(0px, -30px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes contactLogo3 { 0% { -moz-transform: translate(30px, -30px); -ms-transform: translate(30px, -30px); -webkit-transform: translate(30px, -30px); -o-transform: translate(30px, -30px); transform: translate(30px, -30px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes contactLogo4 { 0% { -moz-transform: translate(-30px, 0px); -ms-transform: translate(-30px, 0px); -webkit-transform: translate(-30px, 0px); -o-transform: translate(-30px, 0px); transform: translate(-30px, 0px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes contactLogo6 { 0% { -moz-transform: translate(30px, 0px); -ms-transform: translate(30px, 0px); -webkit-transform: translate(30px, 0px); -o-transform: translate(30px, 0px); transform: translate(30px, 0px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes contactLogo7 { 0% { -moz-transform: translate(0px, 30px); -ms-transform: translate(0px, 30px); -webkit-transform: translate(0px, 30px); -o-transform: translate(0px, 30px); transform: translate(0px, 30px); } 100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @media (min-width: 1681px) { .contactsLogo ul { width: 820px; margin: -20px -10px; } .contactsLogo ul li { width: 231px; margin: 20px 10px; } } .contactSection { padding-top: 55.5px; padding-bottom: 44.5px; background-color: #F9FAFB; } .contactSection .wrapper { padding-left: 113px; padding-right: 117px; display: flex; justify-content: space-between; } .contactSection .leftSide { padding-top: 122px; } .contactSection .rightSide { width: 420px; } .contactSection .titleContainer span { color: #0C0D3C; } .contactSection .titleContainer+.contentContainer { margin-top: 12px; } .contactSection .contentContainer .info p { color: #0C0D3C; } .contactSection .contentContainer .info+.contactForm { margin-top: 35px; } .contactSection .contactForm { width: 340px; } @media (min-width: 1681px) { .contactSection .wrapper { padding-left: 117px; justify-content: flex-start; } .contactSection .leftSide { padding-top: 67px; } .contactSection .rightSide { padding-top: 10px; margin-left: 150px; width: 430px; flex-shrink: 0; } .contactSection .contactForm { width: 100%; } } @media (max-width: 1439px) { .contactSection .wrapper { padding-left: 60px; padding-right: 60px; } } @media (max-width: 1199px) { .contactSection .wrapper { padding-left: 0px; padding-right: 0px; } } @media (max-width: 1023px) { .contactSection { padding-top: 40px; padding-bottom: 30px; } .contactSection .titleContainer { text-align: center; } .contactSection .titleContainer+.contentContainer { margin-top: 40px; } .contactSection .contentContainer .info+.contactForm { margin-top: 30px; } .contactSection .leftSide { display: none; } .contactSection .rightSide { max-width: 420px; width: 100%; margin-left: auto; margin-right: auto; } .contactSection .contactForm { width: 100%; } } /* End */ /* /local/js.lib/mCustomScrollbar/jquery.mCustomScrollbar.css?162981218653583 */ /* /local/templates/mst/components/bitrix/news.list/banners_main/style.css?16354152587126 */ /* /local/templates/mst/components/bitrix/catalog.section.list/popular/style.css?16343072052156 */ /* /local/templates/mst/components/bitrix/news.list/home_brands/style.css?16336863572268 */ /* /local/templates/mst/components/bitrix/news.list/home_service/style.css?16336805615790 */ /* /local/templates/mst/components/bitrix/catalog.section/popular/style.css?1629885258826 */ /* /local/templates/mst/components/bitrix/catalog.item/bootstrap_v4/style.css?16354135035959 */ /* /bitrix/components/bitrix/catalog.product.subscribe/templates/.default/style.min.css?16287597661413 */ /* /local/templates/mst/components/bitrix/news.list/home_about/style.css?16345749035911 */ /* /local/templates/mst/components/bitrix/news.list/reviews/style.css?16358503877128 */ /* /local/templates/mst/components/bitrix/catalog.section/popular_device/style.css?1629885258826 */ /* /local/templates/mst/components/bitrix/news.list/companies/style.css?16345755131540 */ /* /local/templates/mst/components/bitrix/news.list/footer_brand/style.css?16351581998147 */