/* Start:/local/templates/mst/fonts/GrandisExtended/stylesheet.css?17296921756232*/ @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-LightItalic.eot'); src: local('Grandis Extended Light Italic'), local('GrandisExtended-LightItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-LightItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-LightItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-LightItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Thin.eot'); src: local('Grandis Extended Thin'), local('GrandisExtended-Thin'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Thin.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Thin.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Thin.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Black.eot'); src: local('Grandis Extended Black'), local('GrandisExtended-Black'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Black.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Black.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Black.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Light.eot'); src: local('Grandis Extended Light'), local('GrandisExtended-Light'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Light.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Light.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Light.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Medium.eot'); src: local('Grandis Extended Medium'), local('GrandisExtended-Medium'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Medium.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Medium.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Medium.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-MediumItalic.eot'); src: local('Grandis Extended Medium Italic'), local('GrandisExtended-MediumItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-MediumItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-MediumItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-MediumItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Regular.eot'); src: local('Grandis Extended Regular'), local('GrandisExtended-Regular'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Regular.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Regular.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Regular.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BoldItalic.eot'); src: local('Grandis Extended Bold Italic'), local('GrandisExtended-BoldItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BoldItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BoldItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-RegularItalic.eot'); src: local('Grandis Extended Regular Italic'), local('GrandisExtended-RegularItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-RegularItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-RegularItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-RegularItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-RegularItalic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-ThinItalic.eot'); src: local('Grandis Extended Thin Italic'), local('GrandisExtended-ThinItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-ThinItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-ThinItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-ThinItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Bold.eot'); src: local('Grandis Extended Bold'), local('GrandisExtended-Bold'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Bold.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Bold.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Bold.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Grandis Extended'; src: url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BlackItalic.eot'); src: local('Grandis Extended Black Italic'), local('GrandisExtended-BlackItalic'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BlackItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BlackItalic.woff2') format('woff2'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BlackItalic.woff') format('woff'), url('/local/templates/mst/fonts/GrandisExtended/GrandisExtended-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } /* End */ /* Start:/local/js.lib/mCustomScrollbar/jquery.mCustomScrollbar.css?172969217552497*/ /* == 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; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ 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; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.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); } .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; } .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; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; } /* 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; } .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; } .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; } .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); } .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); } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); } .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); } /* ---------------------------------------- */ /* 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_new/style.css?172969217512313*/ .mainBannerSlider { position: relative; display: block !important; background: #000; } .mainBanner{ position: relative; } .mainBanner .swiper-button-prev, .mainBanner .swiper-button-next { position: absolute; top: 0; width: 80px; height: 100%; font-size: 40px !important; color: black !important; font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mainBanner .swiper-button-prev:after { content: "\e90e"; font-family: 'icomoon' !important; } .mainBanner .swiper-button-prev { left: 80px; transform: translateX(-100%); } .mainBanner .swiper-button-next:after { content: "\e90d"; font-family: 'icomoon' !important; } .mainBanner .swiper-button-next { right: 80px; transform: translateX(100%); } .mainBannerSlider .swiper-pagination { position: absolute; bottom: 17px; padding-left: 55px; padding-right: 55px; width: 100%; display: flex; justify-content: center; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom { position: relative; display: block; width: 120px; height: 30px; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom::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 .swiper-pagination .swiper-pagination-bullet-custom::after { content: ''; display: block; position: absolute; width: 100%; height: 1px; top: 50%; margin-top: -1px; left: 0px; background-color: #CCCCCC; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom + .swiper-pagination-bullet-custom { margin-left: 12px; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom.swiper-pagination-bullet-custom-active::before { opacity: 1; -webkit-animation-name: sliderTimeline; -moz-animation-name: sliderTimeline; -o-animation-name: sliderTimeline; animation-name: sliderTimeline; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; -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; } .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 .swiper-pagination { 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) { .mainBanner .swiper-button-prev, .mainBanner .swiper-button-next { width: 60px; font-size: 30px; } .mainBannerSlider .swiper-pagination { padding-left: 35px; padding-right: 35px; } .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) { .mainBanner .swiper-button-prev, .mainBanner .swiper-button-next { display: none; } .mainBannerSlider { overflow: hidden; } } @media (max-width: 1023px) { .mainBanner .container { width: 100%; padding: 0px; } .mainBannerSlider { max-width: 100%; width: 100%; } .mainBanner .swiper-button-prev, .mainBanner .swiper-button-next { display: none; } .mainBannerSlider .swiper-pagination { bottom: 40px; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom { 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 .swiper-pagination .swiper-pagination-bullet-custom::before, .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom::after { display: none; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom + .swiper-pagination-bullet-custom { margin-left: 12px; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom.swiper-pagination-bullet-custom-active { background-color: #026EF9; } .mainBannerSlider .swiper-pagination .swiper-pagination-bullet-custom.swiper-pagination-bullet-custom-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: 991px) { .mainBannerSlider .swiper-pagination { padding-left: 30px; padding-right: 30px; } } @media (max-width: 767px) { .mainBannerSlider .swiper-pagination { padding-left: 15px; padding-right: 15px; } .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; } } /*custom_part*/ .mainBanner { margin-bottom: 50px; } .mainBanner__item { position: relative; height: 440px; padding: 62px 55px; display: flex; align-items: center; background: #000; } .mainBanner .item img { object-fit: cover; object-position: right bottom; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .mainBanner__title { font-family: 'Grandis Extended'; font-style: normal; font-weight: 500; font-size: 36px; line-height: 36px; margin-bottom: 20px; text-transform: uppercase; color: #FFFFFF; } .mainBanner__info { position: relative; z-index: 1; max-width: 570px; } .mainBanner__title span { color: #007BFA; } .mainBanner__text { font-family: 'Grandis Extended'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; color: #FFFFFF; margin-bottom: 40px; } .mainBanner__link { cursor: pointer; background-color: #026EF9; position: relative; padding: 15px 18px 15px 50px; border-radius: 5px; display: inline-block; font-family: 'Gilroy'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 14px; transition: background-color .3s; letter-spacing: 1px; text-transform: uppercase; color: #FFFFFF; } .mainBanner__link:hover { background-color: #0B51AA; } .mainBanner__link:before { width: 24px; height: 24px; position: absolute; left: 18px; top: calc(50% - 12px); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(/local/templates/mst/components/bitrix/news.list/banners_main_new/images/cat.svg); content: ''; } .mainBanner { height: 440px; } @media (min-width: 1681px) { .mainBanner__item { height: 600px } .mainBannerSlider .swiper-pagination { bottom: 27px; } .mainBanner { height: 600px; } } @media (max-width: 1680px) { .mainBanner__title { font-size: 32px; line-height: 32px; } .mainBanner { margin-bottom: 35px; } .mainBanner__info { max-width: 450px; } } @media (max-width: 1199px) { .mainBanner__title { font-size: 26px; line-height: 29px; } .mainBanner__item { padding: 42px 35px; } .mainBanner__info { max-width: 380px; } } @media (max-width: 991px) { .mainBanner { height: auto } .mainBanner__img { position: relative; height: 260px; overflow: hidden; } .mainBanner .item img { width: auto; left: auto; right: 0 } .mainBanner__item { background-color: #0c0c0c; padding: 0; display: block; height: auto } .mainBanner__info { max-width: 600px; padding: 65px 30px; } .mainBannerSlider .swiper-pagination { bottom: 30px; } .mainBanner__title { margin-bottom: 10px } .mainBanner__text { margin-bottom: 30px; line-height: 20px; } } @media (max-width: 767px) { .mainBanner__info { padding: 30px 15px 65px 15px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section.list/front_popular/style.css?17296921752156*/ .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/promotions_main/style.css?1729692175111*/ .countdown-acd__outer { position: absolute; left: 0; bottom: 0; margin: 0; padding: 24px; } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/front_home_brands/style.css?17296921752314*/ .brandSection .contentContainer { margin-top: 40px; } @media (min-width: 1681px) { .brandSection.mainSection { margin: 130px 0; } } .frontBrandsSection .titleContainer + .contentContainer { margin-top: 40px; } .frontBrandsBlock .wrapper { padding-bottom: 0; margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); } .frontBrandsBlock .item { width: 175px; position: relative; z-index: 1; } .frontBrandsBlock .owl-item { display: flex; align-items: center; justify-content: center; background-color: #EBF0F7; padding: 15px; border-radius: 5px; transition: box-shadow .3s; } .frontBrandsBlock .owl-stage { display: flex; } .frontBrandsBlock .owl-carousel .owl-stage-outer { padding: 30px 0; } .frontBrandsBlock .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; } .frontBrandsBlock .item img { width: 100%; object-fit: contain; } .frontBrandsBlock .item + .item { margin-left: 15px; } .frontBrandsSlider + .siteSliderNav .owl-prev, .frontBrandsSlider + .siteSliderNav .owl-next { bottom: 55px; } .frontBrandsSection .titleContainer { position: relative; } .frontBrandsSection .moreLink { text-align: center; margin-top: 20px; } .frontBrandsSection .siteTabs .tabContent { padding-top: 0; } @media (any-hover: hover),(hover: hover) and (pointer: fine) { .frontBrandsBlock .owl-item:hover { box-shadow: 0px 0px 30px rgba(25, 123, 178, 0.3); } } @media (min-width: 1681px) { .frontBrandsSlider + .siteSliderNav .owl-prev, .frontBrandsSlider + .siteSliderNav .owl-next { bottom: 60px; } .frontBrandsBlock .item { width: 239px; } } @media (max-width: 1439px) { .frontBrandsBlock .item { width: 147px; } } @media (max-width: 1023px) { .frontBrandsSection .titleContainer + .contentContainer { margin-top: 20px; } .frontBrandsBlock .item { width: 136px; } .frontBrandsBlock .item + .item { margin-left: 12px; } .frontBrandsSection .siteTabs .tabContent { padding-top: 10px; } } /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section/front_popular/style.css?1729692175826*/ .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?172969217521146*/ .product-item-image-wrapper { position: relative; display: block; width: 100%; transition: all 300ms ease; } .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; } .product-item-compare { position: relative; } .productCard .options [class*="btn"] + [class*="btn"], .productCard .options .product-item-compare-container + .btnSimpleIcon { margin-left: 22px; } .productCard .sec { position: absolute; top: 22px; left: 15px; max-width: calc(100% - 60px); z-index: 2; font-size: 14px; color: #a7b0b8; } .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; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox .compare-wr { display: flex; justify-content: center; align-items: center; } @media (hover: hover) { .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 { display: none; opacity: 0; } .productCard .iconFavourite [class*="icon"].full.wl-act { color: #026EF9; opacity: 1; z-index: 1; } .productCard .iconFavourite [class*="icon"].wl-act:hover { opacity: 1; } .productCard .buttons > [class*="btn"] { margin-bottom: 6px; } @media (max-width: 1023px) { .productCard .sec { position: static; display: block; width: auto; max-width: 100%; font-size: 14px; margin-top: 4px; margin-bottom: 4px; } } @media (max-width: 991px) { .productCard .iconFavourite:hover [class*="icon"].wl-act { opacity: 1; } .productCard .iconFavourite:hover [class*="icon"].full.wl-hide { opacity: 0; } } .productCard .type { display: block; font-family: "Open Sans"; font-size: 14px; line-height: 24px; color: #a7b0b8; } /**/ .medsyst-card, .medsyst-card.productCard { padding: 12px 12px 8px; border-radius: 6px; background: #FFF; transition: box-shadow .3s; position: relative; display: flex; flex-direction: column; height: 100%; overflow: visible; } html body .productSlider.owl-carousel { z-index: 2; } html body .productSlider.owl-carousel .owl-item { flex-direction: row; } html body .productSlider.owl-carousel { overflow: visible; } html body .productSlider.owl-carousel:before, html body .productSlider.owl-carousel:after { content: ''; width: 100vw; height: 100%; top: 0; background: #fff; position: absolute; z-index: 1; } html body .productSlider.owl-carousel:before { left: 100%; } html body .productSlider.owl-carousel:after { right: 100%; } .productSlider .product-item-container, .productSlider .owl-item .item { height: 100%; } .productSlider .owl-item .item { width: 100%; } @media (hover: hover) { .medsyst-card:hover { box-shadow: 0px 0px 30px 0px rgba(25, 123, 178, 0.30); z-index: 6; } } .medsyst-card.medsyst-card-stock-out .medsyst-card__top, .medsyst-card.medsyst-card-stock-out .medsyst-card__middle, .medsyst-card.medsyst-card-stock-out .medsyst-card__bottom { filter: grayscale(1); } .product-item-container { background: transparent !important; } .medsyst-card__top { position: relative; margin-bottom: 24px; } .medsyst-card__img { position: relative; display: block; overflow: hidden; } .medsyst-card__img:before { content: ''; display: block; padding-top: 115%; } .medsyst-card__img img { display: block; position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 80%; max-height: 80%; transform: translateX(100%); opacity: 0; } .medsyst-card__img img:first-child { transform: translateX(0px); opacity: 1; } @media not all and (hover: hover) { .medsyst-card__img img { transition: .3s; } } .medsyst-card__img-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .medsyst-card__img-dots-item { border-radius: 4px; background-color: rgba(95, 95, 95, 0.20); width: 6px; height: 6px; margin-left: 4px; margin-right: 4px; } .medsyst-card__img-dots-item--active { background-color: #5F5F5F; } .medsyst-card__img-overlay { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: flex; flex-wrap: wrap; } .medsyst-card__img-overlay-item { flex-grow: 1; } .medsyst-card__title { color: #232323; font-size: 20px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: 1px; margin-bottom: 8px; display: block; hyphens: auto; } .medsyst-card__chars { position: absolute; top: calc(100% - 12px); width: 100%; left: 0; padding: 12px 12px 12px; background-color: #fff; border-radius: 0 0 6px 6px; opacity: 0; transition: .3s; visibility: hidden; } @media (hover: hover) { .medsyst-card:hover .medsyst-card__chars { opacity: 1; box-shadow: 0px 19px 20px 0px rgba(25, 123, 178, 0.20); visibility: visible; } .brand-ap-list:hover { z-index: 5; position: relative; } } .medsyst-card__chars-item { margin-bottom: 4px; display: flex; justify-content: space-between; background-image: url("/local/templates/mst/images/dots.svg"); background-position: left 14px; background-repeat: repeat-x; } .medsyst-card__chars-item:last-child { margin-bottom: 0; } .medsyst-card__chars-item-char, .medsyst-card__chars-item-val { color: #232323; font-family: Open Sans; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } .medsyst-card__chars-item-val { text-align: right; padding-right: 0; padding-left: 4px; } .medsyst-card__chars-item-char span, .medsyst-card__chars-item-val span { background-color: #fff; } .medsyst-card__chars-item-char span { padding-right: 4px; } .medsyst-card__chars-item-val span { padding-left: 4px; } .medsyst-card__labels { position: absolute; left: 0; bottom: 14px; width: 100%; } .medsyst-card__fav { position: absolute; right: 12px; top: 12px; z-index: 1; } @media (hover: hover) { .medsyst-card.productCard .iconFavourite [class*="icon"].wl-act:hover { color: #026EF9; } } .medsyst-card .iconFavourite { position: relative; display: block; width: 24px; height: 24px; cursor: pointer; } .medsyst-card .iconFavourite [class*="icon"] { position: absolute; top: 0px; left: 0px; display: block; font-size: 24px; color: #232323; opacity: 1; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .medsyst-card .iconFavourite [class*="icon"] { transition: color .3s ease; } @media (hover: hover) { .medsyst-card .iconFavourite [class*="icon"].wl-act:hover { color: #026EF9; } } .medsyst-card .iconFavourite [class*="icon"].full { color: #026EF9; opacity: 0; z-index: 1; } .medsyst-card .iconFavourite.active [class*="icon"], .medsyst-card .iconFavourite:hover [class*="icon"] { opacity: 0; } .medsyst-card .iconFavourite.active [class*="icon"].full, .medsyst-card .iconFavourite:hover [class*="icon"].full, .medsyst-card .iconFavourite.active:hover [class*="icon"] { opacity: 1; } .medsyst-card .iconFavourite.active:hover [class*="icon"].full { opacity: 0; } .medsyst-card .iconRemove [class*="icon"] { -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } @media (hover: hover) { .medsyst-card .iconRemove:hover [class*="icon"] { color: #026EF9; } } .medsyst-card .iconFavourite [class*="icon"].wl-hide { opacity: 0; } .medsyst-card .iconFavourite [class*="icon"].full.wl-act { color: #026EF9; opacity: 1; z-index: 1; } .medsyst-card .buttons > [class*="btn"] { margin-bottom: 6px; } @media (max-width: 991px) { .medsyst-card .iconFavourite:hover [class*="icon"].wl-act { opacity: 1; } .medsyst-card .iconFavourite:hover [class*="icon"].full.wl-hide { opacity: 0; } } .medsyst-card__price { color: #232323; font-size: 32px; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: 1px; } .medsyst-card.productCard .currentPrice, .medsyst-card.productCard .currentRassrochkaPrice { color: #232323; display: block; font-size: 32px; font-weight: 600; } .medsyst-card.productCard .currentRassrochkaPrice span.month_text { margin-left: 0; } .medsyst-card.productCard .price { display: block; } .medsyst-card.productCard .currentPrice span, .medsyst-card.productInfo .price .currentPrice span, .medsyst-card.productCard .currentRassrochkaPrice span.from_text { color: #232323; font-size: 32px; font-weight: 600; } .medsyst-card.productCard .currentPrice--empty { color: #979797; font-weight: 600; } .medsyst-card.productCard .oldPrice { margin-left: 0; font-size: 18px; font-weight: 600; } .medsyst-card__bottom { margin-top: auto; padding-top: 16px; z-index: 1; position: relative; } .medsyst-card__bottom-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; } .medsyst-card-stock-out .medsyst-card__bottom-row { flex-wrap: nowrap; } .medsyst-card__bottom-row:first-child { padding-bottom: 4px; } .medsyst-card__bottom-row > .product-item-info-container { flex-grow: 1; padding-top: 4px; padding-bottom: 4px; padding-right: 4px; } .medsyst-card__bottom-row > a { flex-grow: 1; margin-right: 4px; } .medsyst-card [class*="btnFill"][class*="Type2"][data-form="choose_analogue"] { background-color: #686868; } .medsyst-card__ico { display: flex; align-items: center; padding-top: 4px; padding-bottom: 4px; } .medsyst-card .btnSimpleIcon { position: relative; } .medsyst-card .btnSimpleIcon [class*="icon"] { margin-right: 0; } .medsyst-card .btnSimpleIcon input { position: absolute; left: 0; opacity: 0; } .medsyst-card__ico-item { padding-left: 8px; padding-right: 8px; position: relative; cursor: pointer; } .medsyst-card__ico-item-popup { position: absolute; font-family: Open Sans; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; border-radius: 10px; background: #FFF; box-shadow: 0px 0px 30px 0px rgba(178, 178, 178, 0.30); padding: 8px 12px; width: auto; opacity: 0; visibility: hidden; transition: .3s; right: 0; bottom: calc(100% + 10px); color: #000; white-space: nowrap; } .medsyst-card__ico-item-popup:after { content: ''; left: 0; height: 10px; bottom: -10px; width: 100%; position: absolute; } .medsyst-card__ico-item-popup:before { content: ''; position: absolute; display: block; right: 10px; top: 100%; width: 0px; height: 0px; border-top: 10px solid #ffffff; border-left: 10px solid transparent; border-right: 10px solid transparent; } .medsyst-card__ico-item-popup > span { color: #232323 !important; } .medsyst-card__ico-item-popup > span:last-child { display: none; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input:checked ~ .medsyst-card__ico-item-popup > span:first-child { display: none; } .productCard .product-item-compare-container .btnSimpleIcon.checkbox input:checked ~ .medsyst-card__ico-item-popup > span:last-child { display: block; } .servicesSection ~ [id^="comp_"] { position: relative; z-index: 1; } @media (hover: hover) { .medsyst-card__ico-item:hover { z-index: 1; } .medsyst-card__ico-item:hover .medsyst-card__ico-item-popup { opacity: 1; visibility: visible; } } .medsyst-card__tags { margin-bottom: 8px; } .medsyst-card.product-item .promotion-tags, .medsyst-card.productCard .tags { position: relative; } .medsyst-card.product-item .promotion-tags { z-index: 2; } .medsyst-card .promotion-tag-list__btn { border-radius: 8px; top: 1px; } .medsyst-card .promotion-tags--active .promotion-tag-list__btn { transform: none; } .medsyst-card .promotion-tag-list__btn:before { transition: transform .3s; } .medsyst-card .promotion-tag-list__btn:before { background-image: url(/local/templates/mst/images/tagplus.svg); } .medsyst-card .promotion-tags--active .promotion-tag-list__btn:before { transform: rotate(45deg); } .owl-carousel .owl-item .medsyst-card .tics__item img { width: auto; } .owl-carousel .owl-item .medsyst-card img { width: auto; } .medsyst-card .compare-wr span { vertical-align: middle; } .medsyst-card .icon-demo { width: 24px; height: 24px; } .medsyst-card .icon-demo:before, .medsyst-card .icon-demo:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity .3s; } .medsyst-card .icon-demo:before { content: ''; background-image: url(/local/templates/mst/images/easel.svg); } .medsyst-card .icon-demo:after { content: ''; background-image: url(/local/templates/mst/images/easel-b.svg); opacity: 0; } .medsyst-card .icon-demo:hover:before { opacity: 0; } .medsyst-card .icon-demo:hover:after { opacity: 1; } .medsyst-card .tics { position: static; margin-top: 0; margin-bottom: 4px; } .medsyst-card.productCard .tags { z-index: 5; } .medsyst-card [class*="btnIcon"].md, .medsyst-card [class*="btnFill"].md { border-radius: 8px; } .devicesSection.mainSection > .container, .devicesSection > .container, .productsSection > .container, .productsSection.mainSection > .container { overflow: visible; } .advantagesSection.mainSection { position: static; } .product-item-button-container--order { text-align: center; height: 44px; line-height: 44px; } .product-item-button-container--order span { color: #979797; font-size: 18px; font-style: normal; font-weight: 500; line-height: 155.556%; } .catalog-section .medsyst-card.productCard { overflow: visible; } @media (hover: none) { .productSlider .medsyst-card__img-dots, .productSlider .medsyst-card__img-overlay, .productSlider .medsyst-card__img img { display: none !important; } .productSlider .medsyst-card__img img:first-child { display: block !important; } } /*____________________________*/ @media (max-width: 1439px) { .medsyst-card.productCard .currentPrice, .medsyst-card.productCard .currentRassrochkaPrice { font-size: 22px; } .medsyst-card.productCard .currentPrice span, .medsyst-card.productInfo .price .currentPrice span, .medsyst-card.productCard .currentRassrochkaPrice span.from_text { font-size: 22px; } .medsyst-card__bottom-row > .product-item-info-container { width: 100%; padding-right: 0; } .medsyst-card-stock-out .medsyst-card__bottom-row { flex-wrap: wrap; } .medsyst-card__bottom-row > a { margin-right: 0; } .medsyst-card__title { font-size: 18px; } .medsyst-card__chars, .medsyst-card__ico-item-popup { display: none; } } @media (max-width: 1199px) { .medsyst-card [class*="btnFill"].md { font-size: 13px; } } @media (max-width: 1023px) { .product-item-wr .medsyst-card .cardPrice { padding: 0; } .medsyst-card.productCard .tags { inset: 0 !important; } .medsyst-card__labels { display: flex; flex-direction: column; } .medsyst-card__promtags { order: 1; } .medsyst-card__tags { margin-bottom: 0; order: 2; } .medsyst-card .productTag { line-height: 20px; } .product-item-button-container--order { height: 38px; line-height: 38px; } .medsyst-card.productCard .currentPrice, .medsyst-card.productCard .currentRassrochkaPrice { font-size: 18px; } .medsyst-card.productCard .currentPrice span, .medsyst-card.productInfo .price .currentPrice span, .medsyst-card.productCard .currentRassrochkaPrice span.from_text { font-size: 18px; } .medsyst-card__top { margin-bottom: 16px; } } @media (max-width: 767px) { .medsyst-card.productCard .currentPrice, .medsyst-card.productCard .currentRassrochkaPrice { font-size: 16px; } .medsyst-card.productCard .currentPrice span, .medsyst-card.productInfo .price .currentPrice span, .medsyst-card.productCard .currentRassrochkaPrice span.from_text { font-size: 16px; } .medsyst-card.productCard .oldPrice { color: #C2C2C2; font-size: 14px; } .medsyst-card__title { font-size: 16px; } .medsyst-card, .medsyst-card.productCard { padding: 8px 8px 4px; } } @media (max-width: 479px) { .productSlider .medsyst-card__bottom-row > .product-item-info-container { width: auto; } .productSlider .medsyst-card-stock-out .medsyst-card__bottom-row { flex-wrap: nowrap; } } @media (max-width: 360px) { .product-item-wr { width: 100%; } .medsyst-card__bottom-row > .product-item-info-container { width: auto; } .medsyst-card-stock-out .medsyst-card__bottom-row { flex-wrap: nowrap; } } /* End */ /* Start:/local/templates/mst/components/bitrix/news.list/home_about/style.css?17296921756155*/ .advantagesSection { background-color: #060606; overflow: hidden; } .advantagesSlider .swiper-slide { height: auto !important; } .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; } } #home-about .swiper-pagination-bullets { position: absolute; /*top: 46px;*/ right: calc(100% - 3px); display: flex; flex-direction: column; } #home-about .swiper-pagination-bullets .swiper-pagination-bullet { position: relative; display: block; width: 1px; height: 60px; background-color: #7C7C96; } #home-about .swiper-pagination-bullets .swiper-pagination-bullet::before { content: ''; display: block; position: absolute; width: 2px; height: 0%; top: 0px; left: -0.5px; background-color: white; } #home-about .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-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; } #home-about .swiper-pagination-bullets .swiper-pagination-bullet+.swiper-pagination-bullet { 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) { #home-about .swiper-pagination-bullets { /*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 { display: block !important; } .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/home_reviews/style.css?17296921757218*/ /*home-reviews*/ .home-reviews { position: relative; margin-bottom: 90px; } .home-title { text-align: center; display: block; font-size: 45px; line-height: 55px; color: #232323; font-weight: 500; letter-spacing: 1px; margin-top: 100px; margin-bottom: 25px; } @media (max-width: 1199px) { .home-title { font-size: 26px; line-height: 34px; margin-bottom: 15px; } } .home-reviews .swiper { padding: 20px; margin: -20px; } .home-reviews .swiper .swiper-wrapper { gap: 30px; } .home-reviews .swiper.swiper-initialized .swiper-wrapper { gap: initial; } .home-reviews .swiper .swiper-slide { flex: 0 0 auto; width: calc((100% / 3) - (60px / 3)); height: auto; } .home-reviews-item { background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 25px; height: 100%; } .home-reviews-item-header { display: flex; align-items: center; margin-bottom: 10px; } .home-reviews-item-header-logo { flex: 0 0 auto; width: 80px; height: 80px; border: 1px solid #EBF0F7; border-radius: 100%; padding: 5px; display: flex; align-items: center; justify-content: center; margin-right: 25px; } .home-reviews-item-header-logo img { display: block; max-width: 100%; } .home-reviews-item-header-info { } .home-reviews-item-header-info-name { font-family: 'Gilroy'; font-weight: 500; font-size: 20px; line-height: 28px; color: #232323; } .home-reviews-item-header-info-position { font-weight: 400; font-size: 16px; line-height: 26px; color: #979797; } .home-reviews-item-text { margin-left: 105px; } .home-reviews-item-text-wrap { font-weight: 400; font-size: 16px; line-height: 26px; color: #232323; margin-bottom: 15px; } .home-reviews-item-text-more { display: none; font-weight: 500; font-size: 16px; line-height: 28px; color: #026EF9; } .home-reviews-item-link { margin-left: 105px; } .home-reviews-item-link a { font-family: 'Gilroy'; font-weight: 400; font-size: 16px; line-height: 28px; color: #232323; text-decoration: underline; display: flex; gap: 15px; align-items: center; } .home-reviews-item-link a svg { flex: 0 0 auto; width: 22px; } .home-reviews-detail-overlay { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .home-reviews-detail { display: none; position: fixed; left: 0; bottom: 0; background: #FFFFFF; box-shadow: 0px 0px 30px rgba(178, 178, 178, 0.3); border-radius: 10px 10px 0px 0px; z-index: 1010; width: 100%; height: 60vh; padding: 30px 15px 20px 15px; } .home-reviews-detail-close { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; position: absolute; right: 10px; top: 10px; } .home-reviews-detail-header { display: flex; align-items: center; margin-bottom: 10px; } .home-reviews-detail-header-logo { flex: 0 0 auto; width: 60px; height: 60px; border: 1px solid #EBF0F7; border-radius: 100%; padding: 5px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .home-reviews-detail-header-logo img { display: block; max-width: 100%; } .home-reviews-detail-header-info-name { font-family: 'Gilroy'; font-weight: 500; font-size: 16px; line-height: 24px; color: #232323; } .home-reviews-detail-header-info-position { font-weight: 400; font-size: 12px; line-height: 16px; color: #979797; } .home-reviews-detail-text { overflow: auto; } .home-reviews-detail-text-wrap { font-weight: 400; font-size: 12px; line-height: 20px; height: auto; overflow: hidden; position: relative; min-height: 100%; color: #232323; } .home-reviews-detail.active { display: flex; flex-direction: column; } .home-reviews-detail-overlay.active { display: block; } .home-reviews-btn{ text-align: center; } @media (max-width: 1199px) { .home-reviews { margin-bottom: 35px; } } @media (max-width: 767px) { .home-reviews .swiper .swiper-slide { width: auto; max-width: 250px; height: 100%; } .home-reviews-item { padding: 15px; } .home-reviews-item-header { margin-bottom: 15px; /*align-items: flex-start;*/ } .home-reviews-item-header-logo { width: 60px; height: 60px; margin-right: 15px; } .home-reviews-item-header-info-name { font-size: 16px; line-height: 24px; } .home-reviews-item-header-info-position { font-size: 12px; line-height: 16px; } .home-reviews-item-text { /*display: none;*/ margin-left: 0; } .home-reviews-item-text-wrap { font-weight: 400; font-size: 12px; line-height: 20px; height: 140px; overflow: hidden; position: relative; min-height: 100%; margin-bottom: 15px; } .home-reviews-item-text-wrap::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } .home-reviews-item-text-more { display: block; } .home-reviews-item-link { margin-top: 15px; margin-left: 0; } } .home-slider-scrollbar { height: 4px; background: #EBF0F7; border-radius: 8px; margin-bottom: 25px; } .home-slider-scrollbar .swiper-scrollbar-drag { height: 4px; background: #026EF9; border-radius: 8px; cursor: pointer; } .home-slider-navigation { display: flex; gap: 15px; position: absolute; z-index: 1; right: 0; top: -63px; } .home-slider-navigation .home-slider-navigation-next, .home-slider-navigation .home-slider-navigation-prev { width: 32px; height: 32px; background: url("/local/templates/mst/img/so-slider-navigation.svg") center center no-repeat; cursor: pointer; } .home-slider-navigation .home-slider-navigation-next { transform: rotate(180deg); } @media (max-width: 1199px) { .home-slider-navigation { top: -50px; } } /*\home-reviews*/ /* End */ /* Start:/local/templates/mst/components/bitrix/catalog.section/popular_device/style.css?1729692175826*/ .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?17296921751562*/ .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%; object-fit: contain; } .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?172969217510010*/ .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; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; -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; } @media (any-hover: hover),(hover: hover) and (pointer: fine) { .contactsLogo ul li:hover { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); } } .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/templates/mst/fonts/GrandisExtended/stylesheet.css?17296921756232 */ /* /local/js.lib/mCustomScrollbar/jquery.mCustomScrollbar.css?172969217552497 */ /* /local/templates/mst/components/bitrix/news.list/banners_main_new/style.css?172969217512313 */ /* /local/templates/mst/components/bitrix/catalog.section.list/front_popular/style.css?17296921752156 */ /* /local/templates/mst/components/bitrix/news.list/promotions_main/style.css?1729692175111 */ /* /local/templates/mst/components/bitrix/news.list/front_home_brands/style.css?17296921752314 */ /* /local/templates/mst/components/bitrix/catalog.section/front_popular/style.css?1729692175826 */ /* /local/templates/mst/components/bitrix/catalog.item/bootstrap_v4/style.css?172969217521146 */ /* /local/templates/mst/components/bitrix/news.list/home_about/style.css?17296921756155 */ /* /local/templates/mst/components/bitrix/news.list/home_reviews/style.css?17296921757218 */ /* /local/templates/mst/components/bitrix/catalog.section/popular_device/style.css?1729692175826 */ /* /local/templates/mst/components/bitrix/news.list/companies/style.css?17296921751562 */ /* /local/templates/mst/components/bitrix/news.list/footer_brand/style.css?172969217510010 */