/* Start:/local/templates/jewelry/fonts/Montserrat/stylesheet.css?17522400728367*/ @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BlackItalic.svg#Montserrat-BlackItalic') format('svg'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Bold.svg#Montserrat-Bold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ThinItalic.svg#Montserrat-ThinItalic') format('svg'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-LightItalic.svg#Montserrat-LightItalic') format('svg'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBold.svg#Montserrat-ExtraBold') format('svg'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-BoldItalic.svg#Montserrat-BoldItalic') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Black.svg#Montserrat-Black') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Italic.svg#Montserrat-Italic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-SemiBoldItalic.svg#Montserrat-SemiBoldItalic') format('svg'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Medium.svg#Montserrat-Medium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-MediumItalic.svg#Montserrat-MediumItalic') format('svg'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Light.svg#Montserrat-Light') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLight.svg#Montserrat-ExtraLight') format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraLightItalic.svg#Montserrat-ExtraLightItalic') format('svg'); font-weight: 200; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-ExtraBoldItalic.svg#Montserrat-ExtraBoldItalic') format('svg'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.eot'); src: url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.woff2') format('woff2'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.woff') format('woff'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype'), url('/local/templates/jewelry/fonts/Montserrat/Montserrat-Thin.svg#Montserrat-Thin') format('svg'); font-weight: 100; font-style: normal; } /* End */ /* Start:/local/templates/jewelry/fonts/SberSansText/stylesheet.css?1752240072570*/ /* Generated by ParaType (http://www.paratype.com)*/ /* Font SB Sans Text: Copyright © ParaType, 2019. All rights reserved.*/ @font-face { font-family: 'SBSansTextRegular'; src: url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.eot'); src: url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.woff2') format('woff2'), url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.woff') format('woff'), url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.ttf') format('truetype'), url('/local/templates/jewelry/fonts/SberSansText/SBSansText-Regular.svg#SBSansText-Regular') format('svg'); font-weight: normal; font-style: normal; } /* End */ /* Start:/local/templates/jewelry/fonts/SberSansDisplay/stylesheet.css?1752240072614*/ /* Generated by ParaType (http://www.paratype.com)*/ /* Font SB Sans Display Semibold: Copyright © ParaType, 2019. All rights reserved.*/ @font-face { font-family: 'SBSansDisplaySemibold'; src: url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.eot'); src: url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.eot?#iefix') format('embedded-opentype'), url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.woff2') format('woff2'), url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.woff') format('woff'), url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.ttf') format('truetype'), url('/local/templates/jewelry/fonts/SberSansDisplay/SBSansDisplay-SemiBold.svg#SBSansDisplay-Semibold') format('svg'); font-weight: normal; font-style: normal; } /* End */ /* Start:/local/templates/jewelry/styles.css?17522400712817*/ /* RESET */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #RESET */ h1 { color: #232323; } b, strong { font-weight: 700; } i { font-style: italic; } .sber-font { font-family: 'SBSansTextRegular'; } .VueCarousel-pagination { position: absolute; bottom: 25px; } .VueCarousel-navigation-button { height: 45px; width: 45px; } .VueCarousel-navigation-next { background: url(/assets/images/interface/ico_nav_next.png) center / cover no-repeat; right: 55px !important; } .VueCarousel-navigation-prev { background: url(/assets/images/interface/ico_nav_prev.png) center / cover no-repeat; left: 55px !important; } @media screen and (max-width: 767px) { /*---------------*/ .VueCarousel-dot-container[data-v-438fd353] { margin: 0 auto !important; } .VueCarousel-dot[data-v-438fd353] { margin-top: 0 !important; width: 7px !important; height: 7px !important; padding: 5px !important; } .VueCarousel-pagination { bottom: 5px; } .VueCarousel-navigation-button { height: 30px; width: 30px; } .VueCarousel-navigation-next { right: 40px !important; } .VueCarousel-navigation-prev { left: 40px !important; } .VueCarousel-slide { /* height: 300px; */ height: 100%; } .VueCarousel-slide > div { height: 100%; } .VueCarousel-slide > div img { width: 100%; height: 100%; object-fit: cover; } /*---------------*/ .sale-order-payment-change-pp .sale-order-payment-change-pp-company { margin-bottom: 0; width: 100%; padding-left: 0; } /*---------------*/ } /* End */ /* Start:/local/templates/jewelry/template_styles.css?175224007124646*/ :root { font-size: 14px; } html, body { display: flex; flex-direction: column; flex: auto; min-height: 100%; font-family: 'Montserrat', sans-serif; color: #444444; } h1, h2, h3, h4, h5, h6 { color: #222222; margin: 1em 0; line-height: 1.25; text-align: center; } h1, h2, h3 { font-weight: 500; } h1 { font-weight: 300; font-size: 1.75em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } h4 { font-size: 1.125em; font-weight: 400; } p { margin: 0 0 10px; } ul { margin-left: 20px; list-style-type: disc; } li { padding-bottom:10px; } img { max-width: 100%; height: auto; } input { font-size: 1rem; } input[type="checkbox"] { background: #ffffff; border: 1px solid #e4e4e4; width: 1.7em; height: 1.7em; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; border-radius: 2px; outline: none; } input[type="radio"] { width: 1.3em; height: 1.3em; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; border-radius: 1em; border: 1px solid #e4e4e4; outline: none; margin: 0.2em; } input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="checkbox"]:active, input[type="radio"]:hover, input[type="radio"]:focus, input[type="radio"]:active { z-index: 1; -webkit-box-shadow: inset 0 0 2px 0px #dd3f55; -moz-box-shadow: inset 0 0 2px 0px #dd3f55; box-shadow: inset 0 0 2px 0px #dd3f55; border-color: rgba(221, 63, 85, 0.25); border-width: 1px; } input[type="checkbox"]:checked { border-width: 1px; background-color: #ffffff; background-image: url(/local/templates/jewelry/images/check-solid.svg); background-position: 50% 50%; background-size: 12px 12px; background-repeat: no-repeat; outline: none; } input[type="radio"]:checked { background: #dd3f55; border: 1px solid #ffffff; -webkit-box-shadow: 0 0 1.5px 0px #cccccc; -moz-box-shadow: 0 0 1.5px 0px #cccccc; box-shadow: 0 0 1.5px 0px #cccccc; } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: static; margin-left: 0; margin-top: 0; margin: 0 10px 0 0; } /*-------------*/ .body-ovh { overflow: hidden; } /*-------------*/ .l-page { display: flex; flex-direction: column; flex: auto; min-width: 320px; height: 100%; overflow: hidden; background-color: #ffffff; } .l-content, .l-header, .l-footer { position: relative; z-index: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 15px; } .l-header, .l-footer { flex: 0 0 auto; } /*---------------*/ .l-header { z-index: 2; padding-top: 48px; } .l-header.header--show { z-index: 0; } .l-header .header__mside { position: fixed; z-index: -1; top: 0; bottom: 0; left: -100%; display: block; padding: 0; width: 100%; opacity: 0; background-color: rgba(228, 228, 228, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .l-header .header__mside--show { z-index: 1; opacity: 1; left: 0; background-color: rgba(0, 0, 0, .22); transition: background-color 1.2s; } .l-header .header__mside--show .b-region { top: 43px; left: 21px; margin-left: 0; } .l-header .header__mside--show .b-header-links { top: 18px; left: 20px; } .l-header .header__mside--show .bx-basket-block { display: block; width: 100%; } .l-header .header__msidebg { position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; display: none; background-color: #f7f7f7; } .l-header .header__mside--show .header__msidebg { display: block; } .l-header .header__logo { overflow: hidden; margin: 0 auto 21px; } .l-header .header__static { margin: 0 -30px 1.5rem; padding: 0 30px; border-bottom: 1px solid #ededed; } .l-header .header__mside-off { position: absolute; z-index: 1; top: 18px; right: 30px; } .l-header .header__mside-off:before { content: url(/local/templates/jewelry/images/ico_close.svg); } .l-header .header__msidewrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px 30px; overflow-x: hidden; overflow: auto; height: calc(100% - 80px); margin-top: 80px; display: flex; flex-direction: column; } .l-header .header__msidewrap > noindex { order: 2; } .l-header .header__info { margin-bottom: 17px; } .l-header .header__aut { margin-bottom: 16px; } .l-header .header__search { position: relative; margin-top: 10px; } .l-header .b-tel--scroll { display: none; } /* ------------------ */ .l-header--fixed { transform: translateY(-125%); position: fixed; z-index: 2; top: 0; left: 0; right: 0; background: #fff; transition: transform 0.3s ease-in-out; } .l-header--scroll { transform: translateY(0); position: fixed; width: 100vw; min-width: 100%; background: #fff; top: 0; } .l-header--scroll .header__logo { max-width: 88px; } .l-header--scroll .header__static { max-width: 1240px; margin: 0 auto; } .l-header--scroll .header__mside:before { bottom: 0; } .l-header--scroll .b-region, .l-header--scroll .b-header-links, .l-header--scroll .b-topmenu { display: none; } .l-header--scroll .b-show-catalogmenu { top: 35px; left: 15px; } .l-header--scroll .b-search.b-search--head .search__group { padding: 10px 0; } .l-header--scroll .b-search.b-search--head .search__group:hover { padding-top: 10px; padding-bottom: 10px; } .l-header--scroll .b-search.b-search--head .search__group img { height: 23px; width: 23px; } .l-header--scroll .b-tel { display: none; } .l-header--scroll .b-tel--scroll { display: flex; } .l-header--scroll .b-tel--scroll p:first-child { margin-top: 2px; } .l-header--scroll .b-tel--scroll img { margin: 0 15px 0 0 } .l-header--scroll .bx-basket-block .ico-profile{ /* margin-left: 0; */ } .l-header--scroll .b-yandex-search { display: none; } /*---------------*/ .l-content { z-index: 1; flex: 1 0 auto; padding-bottom: 2em; line-height: 1.32; } .l-page--catalog .l-content { padding-bottom: 0; } /*---------------*/ .l-footer { z-index: 0; } .l-footer { position: relative; } .l-footer, .l-footer:before, .l-footer:after { border-top: 1px solid #ededed; background-color: #f7f7f7; } .l-footer:before, .l-footer:after { content: ''; display: block; position: absolute; top: -1px; width: 100%; width: calc(50vw - 635px); height: 100%; pointer-events: none; } .l-footer:before { right: 100%; } .l-footer:after { left: 100%; } .l-footer .footer__contacts, .l-footer .footer_menu { display: inline-block; padding: 30px 0 20px 0; vertical-align: top; } .l-footer .footer_menu { display: none; width: 880px; padding-right: 20px; } .l-footer .footer__contacts { width: 100%; text-align: center; } .l-footer .footer__tel, .l-footer .footer__tel a { font-size: 20px; color: inherit; } .l-footer .footer__tel { margin: -.2em 0; margin-bottom: 10px; } .l-footer .footer__email, .l-footer .footer__email a { color: inherit; font-size: 13px; text-decoration: none; } .l-footer .footer__email a:hover { text-decoration: underline; } .l-footer .footer__socnet {} .l-footer .footer__info { position: relative; z-index: 1; border-top: 1px solid #ededed; align-items: center; color: #444444; font-size: 13px; } .l-footer .footer__info, .l-footer .footer__info:before, .l-footer .footer__info:after { border-top: 1px solid #ededed; background-color: #f7f7f7; } .l-footer .footer__info:before, .l-footer .footer__info:after { content: ''; display: block; position: absolute; top: -1px; width: 100%; width: calc(50vw - 620px); height: 100%; pointer-events: none; } .l-footer .footer__info:before { right: 100%; } .l-footer .footer__info:after { left: 100%; } .l-footer .footer__info a { color: inherit; text-decoration: none; } .l-footer .footer__copyrigt, .l-footer .footer__privacy-policy, .l-footer .footer__dev { flex: 0 0 auto; font-size: inherit; color: inherit; text-align: center; padding: 20px 0; } .l-footer .footer__privacy-policy { flex: 1 1 auto; padding: 0 20px; text-align: center; } .l-footer a:hover, .l-footer a:focus, .l-footer a:active { text-decoration: underline; } /*---------------*/ .g-contentPopup {} .g-contentPopup .l-content { z-index: 5; } /*---------------*/ /*---------------*/ .b-logo { max-width: 100px; max-height: 67px; } .b-logo img { max-height: 100%; } /**/ .b-show-mside, .b-show-catalogmenu, .b-show-sidefilter { position: absolute; top: 18px; display: inline-block; border: none; background-color: transparent; outline-color: transparent; font-weight: 600; font-size: 16px; color: #222222; cursor: pointer; z-index: 0; } .b-up { width: 50px; height: 50px; background: url(/assets/images/interface/ico_nav_prev.png) 0 0 no-repeat; background-size: cover; transform: rotate(90deg); position: absolute; position: fixed; bottom: 148px; z-index: 1; right: auto; left: 20px; bottom: 20px; } .b-show-catalogmenu { color: #dd3f64; } .b-show-mside, .b-show-catalogmenu { left: 22px; } .b-show-catalogmenu { display: none; } .b-show-sidefilter { right: 20px; } .b-show-sidefilter:before, .b-show-mside:before, .b-show-catalogmenu:before { content: ''; display: inline-block; width: 1.6em; margin-right: .4em; vertical-align: middle; text-align: left; } .b-show-mside:before, .b-show-catalogmenu:before { background: url(/local/templates/jewelry/images/burger.svg) 0 0 no-repeat; background-size: cover; width: 16px; height: 16px; margin-top: -3px; } .b-show-sidefilter:before { content: url(/local/templates/jewelry/images/ico_filter.svg); } .b-show-catalogmenu { display: none; } /*----------------*/ .b-sidefilter { display: none; } /*---------------*/ .l-content {} .l-content .content__fside, .l-content .content__sidebar { position: fixed; z-index: -1; top: 0; bottom: 0; left: -100%; display: block; padding: 0; width: 100%; opacity: 0; background-color: rgba(228, 228, 228, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .l-content .content__fside--show, .l-content .content__sidebar--show { z-index: 20; opacity: 1; left: 0; background-color: rgba(0, 0, 0, .22); transition: background-color 1.2s; } .l-content .content__fsidebg, .l-content .content__sidebar-bg { display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: #f7f7f7; } .l-content .content__fside-off, .l-content .content__sidebar-off { position: absolute; z-index: 1; top: 18px; right: 30px; } .l-content .content__fside-off:before, .l-content .content__sidebar-off:before { content: url(/local/templates/jewelry/images/ico_close.svg); } .l-content .content__fidewrap, .l-content .content__sidebarwrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px 30px; overflow: auto; height: calc(100% - 50px); margin-top: 50px; } /*-------------*/ .b-tel { font-size: 16px; font-weight: 600; margin: .2em 0; } .b-tel a { display: inline-block; border-bottom: 1px dashed transparent; text-decoration: none; line-height: 0.9; color: #222222; } .b-tel a:hover, .b-tel a:focus, .b-tel a:active { border-bottom: 1px dashed #9c9c9c; text-decoration: none; } .b-tel img { margin: 0 10px 0 0; vertical-align: middle; } .b-tel > P { margin-bottom: 14px; } /*----------*/ .b-btn, .b-btn:link, .b-btn:visited { display: inline-block; padding: 13px; width: 180px; height: auto; font-size: 14px; font-weight: 600; border: 2px solid #dd3f55; background: transparent; border-radius: 60px; text-align: center; cursor: pointer; } .b-btn, .b-btn:link, .b-btn:visited { color: #dd3f55; background: transparent; text-decoration: none; outline: none; } .b-btn:hover, .b-btn:focus, .b-btn:active { color: #ffffff; background: #dd3f55; text-decoration: none; } .b-btn[disabled], .b-btn[disabled]:link, .b-btn[disabled]:visited { background: transparent; color: #717171; border-color: #d7d7d7; cursor: progress; cursor: not-allowed; } .b-btn--no, .b-btn--no:link, .b-btn--no:visited { border: none; padding: 5px 0; width: auto; } .b-btn--no:hover, .b-btn--no:focus, .b-btn--no:active { color: #dd3f55; background: transparent; text-decoration: underline; } .b-cols.b-cols--two { line-height: 1.72; } .b-cols.b-cols--two p { margin-bottom: 1.72em; } .popup-window-buttons { margin-right: -10px; } .popup-window-buttons .b-btn { margin-bottom: .5rem; margin-right: 10px; } .main-callback-form { margin-bottom: 30px; } .main-callback-form .main-callback-inner { display: flex; justify-content: center; position: relative; } .main-callback-form h2, .contacts-form-callback h2 { text-align: center; margin-top: 0; } .main-callback-form .main-callback-left input, .main-callback-form .main-callback-right textarea { background-color: #F7F7F7; margin-bottom: 30px; display: block; border: none; padding: 10px 13px; width: 100%; } .main-callback-form .main-callback-left input:last-child { margin: 0; } .main-callback-form .main-callback-right textarea { height: 100%; font: 15px Arial; resize: none; padding-bottom: 0; } .main-callback-form .main-callback-left { margin-right: 15px; max-width: 300px; width: 100%; } .main-callback-form .main-callback-right { margin-left: 30px; max-width: 300px; width: 100%; height: 139px; } .main-callback-form .main-callback-btn { text-align: center; } .main-callback-form .main-callback-btn input, .contacts-form-callback .contacts-callback-btn input { background-color: #CEA575; margin-top: 30px; text-align: center; padding: 10px 20px; border: none; color: #fff; transition: color 0.2s linear; cursor: pointer; text-transform: uppercase; font-size: 13px; font-weight: 700; } .main-callback-form .main-callback-btn input:hover, .contacts-form-callback .contacts-callback-btn input:hover { color: #000; transition: color 0.2s linear; } .contacts-form-callback input { background-color: #F7F7F7; margin-bottom: 30px; display: block; border: none; padding: 10px 13px; width: 100%; } .contacts-form-callback .contacts-callback-btn input { width: auto; margin: 0 auto; } .contacts-form-inner { margin: 0 auto; width: 30% } .contacts-form-success, .main-callback-errors, .contacts-form-errors { margin-top: 20px; text-align: center; } .main-callback-success { text-align: center; } .main-callback-form .main-callback-btn-inner { display: flex; justify-content: center; align-items: center; } .main-callback-form .main-consent-link, .contacts-form-callback .contacts-consent-link { margin-top: 30px; margin-left: 20px; font-size: 13px; font-weight: 500 } .contacts-form-callback .contacts-consent-link { text-align: center; margin: 15px 0 0 0; } .main-callback-form .main-consent-link a, .contacts-form-callback .contacts-consent-link a { color: #CEA575; text-decoration: underline; } .news-list { display: flex; flex-wrap: wrap; margin: 40px -10px 0; } .news-item { display: flex; flex-direction: column; flex: 1 1 380px; max-width: 380px; margin: 0 10px 76px; line-height: 1.6; color: #000; } .news-list img.preview_picture { margin: 0; object-fit: cover; height: 235px; } .news-item .news-link { font-size: 22px; color: #222222; text-decoration: none; margin-top: 23px; line-height: 1.3; text-align: center; } .news-item .news-link:hover { text-decoration: underline; } .b-delivery {} .b-delivery .delivery__top { margin-bottom: 10px; } .b-delivery .delivery__calc { color: #ff0022; } .b-advantages { margin-bottom: 120px; } .b-advantages h2 { margin-bottom: 55px; } .b-advantages .advantages__wrap { display: flex; justify-content: space-between; flex-wrap: wrap; } .b-advantages .advantages__item { display: flex; flex-direction: column; width: 16.66%; align-items: center; } .b-advantages .advantages__image { display: flex; margin-bottom: 20px; } .b-advantages .advantages__text { font-size: 16px; text-align: center; max-width: 160px; } .b-advantages--catalog { margin-bottom: 70px; } .b-advantages--catalog .advantages__item { width: 33.33%; margin-bottom: 20px; } .b-advantages--catalog .advantages__text { max-width: 160px; } .b-advantages--detail { padding-top: 20px; position: relative; margin-bottom: 70px; } .b-advantages--detail h2 { margin-bottom: 40px; width: fit-content; } .b-advantages--detail::before { content: ""; position: absolute; height: 1px; background: #dddddd; width: 100vw; top: 20px; left: calc(-50vw + 50%); } /* -------------------- */ .b-carousel-news { } .b-carousel-news .glide__track { max-width: 890px; } .b-carousel-news .news-list { display: flex; flex-wrap: nowrap; margin: 0; width: 100%; } .b-carousel-news .news-item { display: flex; flex-direction: column; flex: 1 1 100%; max-width: 100%; margin: 0; line-height: 1.6; color: #000; } .b-carousel-news .news-item .news-link { text-align: start; } .b-carousel-news .glide .glide__arrow { position: absolute; top: -15px; bottom: 0; z-index: 910; display: block; margin-top: -29px; width: 100%; width: 45px; height: 45px; background: url(/assets/images/interface/ico_nav_next.png) no-repeat; background-size: 45px auto !important; background-position: 50% 50%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 30px; border: 0px; box-shadow: none; } .b-carousel-news .glide .glide__arrow--left { background-image: url(/assets/images/interface/ico_nav_prev.png); } .b-carousel-news .glide .glide__arrow--right { background-image: url(/assets/images/interface/ico_nav_next.png); } .b-carousel-news .glide .glide__arrow--left{ right: 70px; left: auto; } .b-carousel-news .glide .glide__arrow--right{ right:0px; } .b-carousel-news .glide .glide__arrow--left:active, .b-carousel-news .glide .glide__arrow--left:hover, .b-carousel-news .glide .glide__arrow--right:active, .b-carousel-news .glide .glide__arrow--right:hover { opacity: .6; } /* ------------------------ */ .b-accordion .accordion__item { margin-bottom: 5px; } .b-accordion .accordion__header { padding: 10px; cursor: pointer; position: relative; border: 1px solid #d4d4d4; font-size: 18px; padding: 19px 12px; font-weight: 600; } .b-accordion .accordion__header::before { content: "+"; position: absolute; top: calc(50% - 16px); right: 16px; display: flex; align-items: center; justify-content: center; text-align: center; width: 32px; font-size: 32px; font-weight: 300; height: 32px; color: #dd3f64; border: 1px solid #d4d4d4; } .b-accordion .accordion__content { display: none; font-size: 15px; padding: 20px 12px 15px; } .b-accordion .accordion__header.active::before { content: "-"; display: block; line-height: 0.55; font-size: 45px; } .custom-lazy:not(.loaded) { width: 64px !important; height: 64px !important; position: relative; top: calc(50% - 32px); left: calc(50% - 32px); } @media screen and (max-width: 1240px) { .news-item { max-width: 47%; } } @media screen and (max-width: 767px) { .main-callback-form .main-callback-inner { align-items: center; flex-direction: column; } .main-callback-form .main-callback-right { margin: 20px 0 0 0; } .main-callback-form .main-callback-left { margin-right: 0; } .contacts-form-callback input, .main-callback-form .main-callback-left input, .main-callback-form .main-callback-right textarea { width: auto; min-width: 236px; } .main-callback-form .main-callback-left, .main-callback-form .main-callback-right { max-width: 100%; width: auto; } .contacts-form-inner { width: 100%; } .contacts-form-callback input { width: auto; margin: 0 auto 30px; } .main-callback-form .main-callback-btn-inner { flex-direction: column; } .main-callback-form .main-consent-link { margin: 15px 0 0 0; text-align: center; } .news-item { max-width: 100%; } .news-list img.preview_picture { height: 100%; } .b-yandex-reviews { margin: 0 -20px; } .bx-hdr-profile { display: flex; justify-content: space-between; } .l-header .header__aut { position: absolute; left: 17px; top: 55px; width: calc(100% - 34px); z-index: 1 !important; } /*---------------*/ .catalog-cart__item .sber-credit-wrap { top: 0; left: 0; } .catalog-cart__item .sber-credit-wrap img { max-width: 40px; } .b-advantages .advantages__item { width: calc(50% - 10px); margin-bottom: 20px; } .b-advantages .advantages__text { font-size: 14px; } } .grecaptcha-badge { opacity: 0; } .b-yandex-reviews { display: flex; justify-content: center; background: #f7f7f7 ; border: 1px solid #e4e4e4; padding: 20px; } .b-yandex-reviews .yandex-reviews__inner { width: 100%; max-width:560px; height:800px; overflow:hidden; position:relative; } /* ------------------- */ .b-inner-tabs { } .b-inner-tabs .inner-tabs__flex { display: flex; } .b-inner-tabs .inner-tabs__item { padding: 19px; border: 1px solid transparent; border-bottom: none; cursor: pointer; font-weight: 600; } .b-inner-tabs .inner-tabs__content { display: none; } .b-inner-tabs .inner-tabs__item--active { background: #f7f7f7 ; border: 1px solid #e4e4e4; border-bottom: none; } .b-inner-tabs .inner-tabs__content--active { display: block; } .b-inner-tabs h2 { display: none; } .b-rating { display: flex; font-size: 25px; line-height: 0.7; } .b-rating .rating__body { position: relative; } .b-rating .rating__body::before { display: block; content: "★★★★★"; color: #cdcdcd; } .b-rating .rating__active { position: absolute; width: 0; height: 100%; top: 0; left: 0; overflow: hidden; } .b-rating .rating__active::before { content: "★★★★★"; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #dd3f55; word-wrap: normal; } .b-rating .rating__items { display: flex; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .b-rating .rating__item { flex: 0 0 20%; height: 100%; opacity: 0; margin: 0; } .b-rating.rating__set .rating__active, .b-rating.rating__set .rating__item { cursor: pointer; } .b-rating.rating_sending { opacity: 0.2; } /* End */ /* Start:/local/templates/jewelry/css/template_tablet.css?175224007110753*/ @media screen and (min-width: 768px){ :root { font-size: 15px; } h1, h2, h3, h4, h5, h6 { text-align: left; } h1 { font-size: 30px; } h2 { font-size: 22px; font-size: 2rem; } .l-header .header__static { margin-bottom: 40px; } .l-header .header__msidewrap { max-width: 340px; } .l-header .header__msidebg { max-width: 340px; border: 1px solid #ededed; -webkit-box-shadow: 0 0 20px #bfbfbf; box-shadow: 0 0 20px #bfbfbf; } .l-header .header__mside-off { left: 300px; right: auto; } .l-header .header__mside { display: block; position: static; opacity: 1; overflow: visible; } .l-header .header__mside:before { content: none; position: relative; display: block; width: 100vw; border-top: 1px solid #ededed; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); left: 50%; max-width: 100vw; } .l-header .header__msidebg { position: absolute; max-width: none; -webkit-box-shadow: none; box-shadow: none; background: none; border: none; } .l-header .header__mside-off { display: none; } .l-header .header__msidewrap { max-width: none; margin-top: 0; padding: 0; overflow: visible; height: auto; } .l-header .header__info, .l-header .header__aut { position: absolute; top: 64px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .l-header .header__aut { top: 108px; right: 30px; display: block; width: 355px; margin: 0; text-align: right; } .l-header .header__aut .bx-basket-block { text-align: right; min-width: 30%; display: block; margin-left: auto; padding-right: 0; max-width: 100%; margin-top: 10px; } .l-header .header__info { right: 30px; top: 28px; } .l-header .header__search { position: absolute; top: -62px; right: -7px; margin-top: 0; } .l-header .header__aut .bx-basket-block .basket-block__empty-cart { font-size: 14px; font-weight: bold; padding-right: 13px; } .l-header .b-catalogmenu { max-height: 500px; overflow-y: scroll; overflow-x: hidden; } .l-header .b-catalogmenu::-webkit-scrollbar { width: 5px; } .l-header .b-catalogmenu::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.3); } .l-header .b-catalogmenu::-webkit-scrollbar-thumb { background: #dd3f64; border-radius: 10px; } /* --------------------- */ .l-header--scroll { max-height: 100%; } .l-header--scroll .header__info { top: 15px; right: 180px; } .l-header--scroll .header__static { margin-bottom: 0; } .l-header--scroll .header__logo { max-width: 88px; margin-bottom: 0; } .l-header--scroll .header__aut { width: 180px; top: 45px; right: 40px; } .l-header--scroll .bx-basket-block { width: 100%; } .l-header--scroll .b-mainmenu { max-width: 450px; top: 30px; } .l-header--scroll .b-catalogmenu { top: 118px; max-height: 500px; overflow-y: scroll; overflow-x: hidden; } .l-header--scroll .b-show-sidefilter { top:40px; } .l-header--scroll .b-show-catalogmenu { top: 40px; left: 22px; } /* ------------------ */ .l-content .content__fidewrap, .l-content .content__sidebarwrap { max-width: 340px; } .l-content .content__fsidebg, .l-content .content__sidebar-bg { max-width: 340px; border-right: 1px solid #e4e4e4; -webkit-box-shadow: 0 0 20px #bfbfbf; box-shadow: 0 0 20px #bfbfbf; } .l-content .content__fside-off, .l-content .content__sidebar-off { right: auto; left: 293px; } /*----------------*/ .b-show-mside { display: none; } .b-show-catalogmenu { display: inline-block; top: 70px; padding: 14px 10px; } .b-show-sidefilter { left: 182px; right: auto; display: inline-block; top: 70px; padding: 14px 10px; } /*----------------*/ .l-footer .footer__contacts { display: block; width: auto; text-align: left; } .l-footer .footer__tel, .l-footer .footer__tel a { font-size: 20px; } .l-footer .footer__tel { margin: -.2em 0; margin-bottom: 10px; } .l-footer .footer__email, .l-footer .footer__email a { color: inherit; font-size: 13px; text-decoration: none; } .l-footer .footer__email a:hover { text-decoration: underline; } .l-footer .footer__socnet {} .l-footer .footer__info { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 0; } .l-footer .footer__info, .l-footer .footer__info:before, .l-footer .footer__info:after { border-top: 1px solid #ededed; background-color: #f7f7f7; } .l-footer .footer__info:before, .l-footer .footer__info:after { content: ''; display: block; position: absolute; top: -1px; width: 100%; width: calc(50vw - 620px); height: 100%; pointer-events: none; } .l-footer .footer__info:before { right: 100%; } .l-footer .footer__info:after { left: 100%; } .l-footer .footer__info a { color: inherit; text-decoration: none; } .l-footer .footer__copyrigt, .l-footer .footer__privacy-policy, .l-footer .footer__dev { text-align: left; padding: 0; } .l-footer .footer__privacy-policy { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 20px; text-align: center; display: flex; flex-direction: column; row-gap: 15px; } .l-footer a:hover, .l-footer a:focus, .l-footer a:active { text-decoration: underline; } .l-footer .footer__tel, .l-footer .footer__email { padding-right: 50%; } .l-footer .footer__socnet { position: relative; } .b-socnetbar { position: absolute; top: -90px; right: 0; text-align: right; } /*--------------------------*/ .b-pay { display: flex; justify-content: center; align-items: center; } /*--------------------------*/ .product-item-detail-short-card-fixed .product-item-detail-short-card-content-container { display: none; } .product-item-detail-tabs-container-fixed { display: none; } .b-mainmenu > li { padding: 1px 3px 6px !important; } } .product-item-detail-tabs-container-fixed { display: none; } @media screen and (min-width: 768px) and (max-width: 1239px) { .l-footer { margin: 0; padding: 0 60px; position: relative; } .product-item-detail-tabs-container-fixed { display: none; } .b-tel { margin: 40px 0 11px; } .product-item-detail-slider-image img { height: auto!important; } /* ----------------- */ .b-detail-back { left: 20px; } /* -------------------- */ .b-carousel-news { margin-bottom: 40px; } .b-carousel-news .glide__track { max-width: 100%; } .b-carousel-news .glide .glide__arrow { top: -19px; } } @media screen and (max-width: 767px) { .l-page--catalog .l-footer { margin: 0 -30px; position: relative; } .l-header { padding-top: 0; } .l-header--scroll .header__logo, .l-header .header__logo { margin-bottom: 0; max-width: 50px; margin-right: 20px; margin-top: 10px; } .l-header .header__static { padding: 0; height: 130px; } .l-header--scroll { padding: 0; } .l-header--scroll .header__static { height: 85px; } .b-show-mside { left: 10px; font-size: 14px; } .b-show-sidefilter { right: auto; left: 145px; font-size: 14px; } .bx-basket-block .ico-basket { max-width: 25px; } .bx-basket-block.bx-basket-block--cart .basket-count { top: -7px; left: 16px; } .bx-hdr-profile .bx-basket-block { width: 40%; } .bx-hdr-profile .bx-basket-block--cart { display: flex; justify-content: flex-end; } .bx-hdr-profile .basket-block__empty-cart { display: none; } .bx-basket-block img.ico-profile { margin: 0 10px; } /* ----------------- */ .b-news--advice {} .b-news--advice .news__item { display: flex; flex-direction: column; align-items: center; } /* ----------------- */ .b-detail-back { left: 20px; } /* ----------------------------- */ .b-catalog-tab--detail { margin-bottom: 0; padding-bottom: 0; } .b-catalog-tab--detail h2 { margin-bottom: 0; } /* ----------------------------- */ .b-carousel-news { padding-bottom: 100px; } .b-carousel-news .glide__track { max-width: 100%; } .b-carousel-news .glide .glide__arrow--left, .b-carousel-news .glide .glide__arrow--right { top: auto; bottom: -90px; } .b-carousel-news .glide .glide__arrow--left { left: calc(50% - 55px); } .b-carousel-news .glide .glide__arrow--right { right: calc(50% - 55px); } } @media screen and (max-width: 768px) { .bx-red .btn.btn-default { font-size: 12px; } } @media screen and (max-width: 460px) { div.news-detail img.detail_picture { width: auto; max-width: 100%; margin: 15px auto 10px; display: block; } } /* End */ /* Start:/local/templates/jewelry/css/template_desktop.css?175224007110119*/ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ @media screen and (min-width: 1240px){ :root { font-size: 15px; } h1 { font-size: 36px; font-size: 2.4rem; } h2 { font-size: 30px; font-size: 2rem; } /*-------------*/ .body-ovh { overflow: visible; } /*-------------*/ .l-header, .l-content, .l-footer { width: 100%; max-width: 1240px; margin: 0 auto; } .l-header { padding: 0 30px; } .l-header .header__static { position: relative; padding-top: 10px; z-index: 1; border: none; margin-bottom: 0; display: flex; flex-direction: column; } .l-header .header__mside { background: none; -webkit-transition: none; -o-transition: none; transition: none; } .l-header .header__mside:before { content: ''; } .l-header .header__static:after { content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -50vw; display: block; width: 100vw; border-bottom: 1px solid #ededed; display: none; } .l-header .header__logo { max-width: 155px; max-height: 105px; margin-bottom: 15.7px; } .l-header .header__catalog { padding: 0 30px 0 0; } .l-header .header__info, .l-header .header__aut { top: 64px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .l-header .header__aut { right: 43px; top: 65px; } .l-header .header__info { right: 250px; top: 70px; } .l-header .header__search { position: absolute; right: 20px; top: 150px; } /* ------------------- */ .l-header--scroll { max-height: 86px; } .l-header--scroll .header__info { top: 30px; right: 180px; } .l-header--scroll .header__aut { width: 190px; top: 45px; } .l-header--scroll .header__aut .bx-basket-block { margin-top: 0; } .l-header--scroll .header__logo { max-width: 88px; } .l-header--scroll .header__search { right: 195px; top: 47px; z-index: 9999; } .l-header--scroll .b-search.b-search--head .search__group:hover { padding-right: 0; max-width: 300px; } .l-header--scroll .b-catalogmenu { top: 85px; max-height: 500px; overflow-y: scroll; overflow-x: hidden; } .l-header--scroll .b-catalogmenu::-webkit-scrollbar { width: 5px; } .l-header--scroll .b-catalogmenu::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.3); } .l-header--scroll .b-catalogmenu::-webkit-scrollbar-thumb { background: #dd3f64; border-radius: 10px; } /*----------------*/ .l-footer .footer__contacts, .l-footer .footer_menu { display: inline-block; padding: 50px 0 40px 0; } .l-footer .footer__contacts { width: 230px; text-align: right; } .l-footer .footer__tel, .l-footer .footer__tel a { font-size: 20px; } .l-footer .footer__tel { margin: -.2em 0; margin-bottom: 10px; } .l-footer .footer__email, .l-footer .footer__email a { color: inherit; font-size: 13px; text-decoration: none; } .l-footer .footer__email a:hover { text-decoration: underline; } .l-footer .footer__socnet {} .l-footer .footer__info { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 0; } .l-footer .footer__info, .l-footer .footer__info:before, .l-footer .footer__info:after { border-top: 1px solid #ededed; background-color: #f7f7f7; } .l-footer .footer__info:before, .l-footer .footer__info:after { content: ''; display: block; position: absolute; top: -1px; width: 100%; width: calc(50vw - 620px); height: 100%; pointer-events: none; } .l-footer .footer__info:before { right: 100%; } .l-footer .footer__info:after { left: 100%; } .l-footer .footer__info a { color: inherit; text-decoration: none; } .l-footer .footer__copyrigt, .l-footer .footer__privacy-policy, .l-footer .footer__dev { text-align: left; padding: 0; } .l-footer .footer__privacy-policy { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 20px; text-align: center; display: flex; justify-content: center; column-gap: 15px; } .l-footer a:hover, .l-footer a:focus, .l-footer a:active { text-decoration: underline; } .l-footer .footer__tel, .l-footer .footer__email { padding-right: 0; } .l-footer .footer__socnet { position: static; } .l-footer .footer__pay img { margin-right: 20px; } .l-footer .footer__pay img:last-child { margin-right: 0; } .b-socnetbar { position: static; top: auto; right: auto; } /*----------------*/ .l-content { padding-top: 10px; } .l-content .content__fside { position: relative; opacity: 1; max-width: 100%; margin-top: -40px; margin-bottom: 20px; padding: 0; top: auto !important; left: auto; right: auto; z-index: 0; overflow: visible; } .l-content .content__fside-off { display: none; } .l-content .content__fsidebg { position: absolute; display: block; background: #f7f7f7; width: 100vw; max-width: none; z-index: -1; left: 50%; margin-left: -50vw; -webkit-box-shadow: none; box-shadow: none; } .l-content .content__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: center; align-content: center; width: 100%; overflow: hidden; } .l-content .content__sidebar, .l-content .content__crop { position: relative; padding: 0; -webkit-box-flex: .1; -ms-flex: .1 1 auto; flex: .1 1 auto; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 0; } .l-content .content__crop { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 20px; } .l-content .content__sidebar { left: auto; width: 260px; max-width: 260px; min-width: 260px; margin: 0 20px 25px 0; padding: 18px; background-color: transparent; opacity: 1; } .l-content .content__sidebar-bg { position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-right: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } .l-content .content__sidebarwrap { padding: 1px; height: auto; width: auto; margin: 0; overflow: visible; } .l-content .content__fside-off, .l-content .content__sidebar-off { display: none; } .l-content .content__fidewrap { max-width: none; margin-top: 0; padding: 0; overflow: visible; } /*----------------*/ .b-show-sidefilter { display: none; } .b-show-catalogmenu { top: 129px; padding: 24px 15px; } /*----------------*/ .b-cols { color: #444444; line-height: 1.6; margin: 35px 0 60px; } .b-cols > p, .b-cols > div, .b-cols > ul, .b-cols > ol { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -moz-page-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; } .b-cols p { padding-bottom: 1em; } .b-cols--two { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-rule: 1px solid transparent; -moz-column-rule: 1px solid transparent; column-rule: 1px solid transparent; } .bx-hdr-profile { padding: 0px 0 0; white-space: nowrap; display: flex; flex-direction: column; } /*------------------------------------*/ .b-pay { justify-content: flex-end; } .b-socnet .socnet__item--zen { margin-right: 0 !important; } } .sber-credit-wrap { width: 45px; position: absolute; top: -17px; left: -20px; z-index: 14; } .VueCarousel-inner > div:first-child { order: 1; } /* End */ /* Start:/local/templates/jewelry/fancybox/jquery.fancybox.css?17522400714895*/ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/local/templates/jewelry/fancybox/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('/local/templates/jewelry/fancybox/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('/local/templates/jewelry/fancybox/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('/local/templates/jewelry/fancybox/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/local/templates/jewelry/fancybox/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('/local/templates/jewelry/fancybox/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /* End */ /* Start:/local/templates/jewelry/fancybox/jquery.fancybox-thumbs.css?1752240071735*/ #fancybox-thumbs { position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 8050; } #fancybox-thumbs.bottom { bottom: 2px; } #fancybox-thumbs.top { top: 2px; } #fancybox-thumbs ul { position: relative; list-style: none; margin: 0; padding: 0; } #fancybox-thumbs ul li { float: left; padding: 1px; opacity: 0.5; } #fancybox-thumbs ul li.active { opacity: 0.75; padding: 0; border: 1px solid #fff; } #fancybox-thumbs ul li:hover { opacity: 1; } #fancybox-thumbs ul li a { display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none; } #fancybox-thumbs ul li img { display: block; position: relative; border: 0; padding: 0; max-width: none; } /* End */ /* Start:/assets/js/glide_3/css/glide.core.min.css?1752240341823*/ .glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{/*overflow:hidden*/position: relative; z-index: 1;}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl} /* End */ /* Start:/assets/js/glide_3/css/glide.theme.min.css?17522403411293*/ .glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing} /* End */ /* Start:/mailhu-scrollbar/jquery.mCustomScrollbar.css?175224007253583*/ /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(/mailhu-scrollbar/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ /* End */ /* Start:/local/templates/jewelry/components/bitrix/sale.basket.basket.line/basket_obraz/style.css?17522400717431*/ .bx-basket { } .bx-basket-block { position: relative; display: inline-block; vertical-align: top; padding-bottom: 5px; white-space: nowrap; font-size: 14px; width: 50%; margin-right: -.275em; /* overflow: hidden; */ vertical-align: middle; } .bx-basket-block .basket-count { display: flex; align-items: center; justify-content: center; background: #dd3f64; width: 16px; height: 16px; border-radius: 16px; position: absolute; top: 0; left: 36px; font-size: 10px; font-weight: bold; color: #fff; } .bx-basket-block.text-center { text-align: center; } .bx-basket-block > .fa { position: absolute; top: 3px; left: 0; width: 12px; color: #97a1ab; } .bx-basket-block .ico { display: inline-block; margin-right: 8px; vertical-align: middle; height: auto; width: 40px; position: relative; } .bx-basket-block .name { overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 32px); display: inline-block; vertical-align: middle; } .bx-basket-block .logout { position: absolute; display: none; right: -28px; background: linear-gradient(270deg, rgb(247, 247, 247) 73%, rgba(247, 247, 247, 0) 100%); margin-right: 0; padding: 0 .8em 0 .3em; top: .2em; } .bx-basket-block:hover .logout, .bx-basket-block:focus .logout { display: inline-block; } .bx-basket-block .logout img { max-width: 1em; } .bx-basket-block .ico-profile { width: 22px; margin: 0 15px; } .bx-basket-block .ico-basket { width: 40px; } .bx-basket-block a { margin-right: 0em; font-size: 12px; color: #222222; font-weight: 300; text-decoration: none; } .bx-basket-block a:hover span, .bx-basket-block a:focus span, .bx-basket-block a:active span { text-decoration: none; } .bx-basket-block a > span { vertical-align: middle; display: inline-block; } /*FIXED BASKET*/ @media (min-width: 768px) { .bx-basket-fixed { position: fixed; z-index: 998; overflow: hidden; padding-top: 10px; width: 200px; border: 1px solid #f0f0f0; border-radius: 1px; background: #fff; box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15); } .bx-basket-fixed.top { top: 10px } .bx-basket-fixed.right { right: 10px } .bx-basket-fixed.bottom { bottom: 10px } .bx-basket-fixed.left { left: 10px } .bx-basket-fixed.bx-max-height { top: 10px; bottom: 10px; } } @media (max-width: 767px) { .bx-basket-fixed { position: fixed; right: 0; bottom: 0; left: 0; z-index: 998; overflow: hidden; padding-top: 10px; border: 1px solid #f0f0f0; border-radius: 1px; background: #fff; box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15); } .bx-basket-item-list { display: none; } /*.bx-basket-fixed */ .bx-basket-block .logout { background: none; right: -40px; top: 5px; } } .bx-basket-fixed .bx-basket-block { margin-left: 10px; } .bx-basket-item-list { position: relative; overflow: hidden; padding-bottom: 20px; border-top: 1px solid #f7f7f7; } .bx-opener .bx-basket-item-list { padding-bottom: 75px; } .bx-max-height .bx-basket-item-list { position: absolute; right: 0; bottom: 0; left: 0; } .bx-closed .bx-basket-item-list { overflow: hidden; height: 20px; } .bx-basket-item-list-action { position: absolute; right: 0; bottom: 0; left: 0; z-index: 120; padding: 3px 0; height: 20px; background: #f7f7f7; color: #4f4f4f; vertical-align: middle; text-align: center; font-size: 12px; line-height: 14px; cursor: pointer; } .bx-basket-item-list-button-container { position: absolute; right: 0; bottom: 20px; left: 0; padding: 10px 0; border-top: 1px solid #f7f7f7; background: #fff; text-align: center; } .bx-basket-item-list-container { overflow-y: auto; max-height: 100% } .bx-basket-item-list-item { position: relative; margin-bottom: 15px; padding-top: 15px; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #f7f7f7; } .bx-basket-item-list-container .bx-basket-item-list-item:last-child { margin-bottom: 0; border-bottom: none; } .bx-basket-item-list-item-status { margin: 0 10px 20px; padding: 3px; border-radius: 3px; background: #ebebeb; text-align: center; white-space: normal; font-weight: bold; font-size: 12px; line-height: 16px; } .bx-basket-item-list-item-img { position: relative; padding-bottom: 5px; text-align: center; } .bx-basket-item-list-item-img img { max-width: 90px; height: auto; border: 1px solid #e6e6e6; } .bx-basket-item-list-item-name { padding-bottom: 5px; } .bx-basket-item-list-item-name a { font-size: 13px; line-height: 16px; } .bx-basket-item-list-item-remove { position: absolute; top: -7px; right: 10px; width: 20px; height: 20px; opacity: .5; cursor: pointer; transition: 250ms linear all; } .bx-basket-item-list-item-remove:after, .bx-basket-item-list-item-remove:before { position: absolute; top: 50%; left: 50%; display: block; width: 10px; height: 2px; border-radius: 1px; background-color: #333; content: ''; transform: translate(-50%, -50%); } .bx-basket-item-list-item-remove:after { -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .bx-basket-item-list-item-remove:before { -webkit-transform: translate(-50%, -50%) rotate(135deg); -moz-transform: translate(-50%, -50%) rotate(135deg); -ms-transform: translate(-50%, -50%) rotate(135deg); -o-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } .bx-basket-item-list-item-remove:hover { opacity: .7; } .bx-basket-item-list-item-price-block { padding-bottom: 5px; font-size: 12px; } .bx-basket-item-list-item-price { display: inline-block; margin-right: 5px; } .bx-basket-item-list-item-price-old { display: inline-block; margin-right: 5px; color: #b0b0b0; text-decoration: line-through } .bx_cart_login_top .bx-hdr-profile { line-height: 1.44em; } @media screen and (min-width: 1240px){ .bx-basket-block a { margin-right: 0; } .bx-basket-block { width: auto; max-width: 53%; padding: 5px 0; } .bx-basket-block:first-child { padding-right: 20px; } .bx-basket-block i { display: inline-block; width: 2.2em; text-align: center; } .bx-basket-block--cart i { width: 45px; position: relative; } .bx-basket-block .logout { top: 50%; margin-top: -0.75em; background: linear-gradient(270deg, rgb(255, 255, 255) 73%, rgba(247, 247, 247, 0) 100%); } .bx-basket-block .logout img { max-width: 1.3em; } .bx-basket-block .basket-count { left: 30px; top: -4px; line-height: 21px; } } /* End */ /* Start:/local/templates/jewelry/components/bitrix/menu/main_menu/style.css?17522400711879*/ .b-mainmenu { list-style:none; margin: 0 -20px; padding:0; border-top: 1px solid #ededed; position: relative; /*IE bug*/ order: 1; } .b-mainmenu > li { padding: 17px 30px; border-bottom: 1px solid #ededed; } .b-mainmenu > li a { font-size: 15px; color:#222222; font-weight: 600; text-decoration:none; } .b-mainmenu > li a:visited { color:#222222; } .b-mainmenu > li a:hover, .b-mainmenu > li a:active, .b-mainmenu > li a:focus { color:#dd3f55; text-decoration: none; } .b-mainmenu > li a.selected:link, .b-mainmenu > li a.selected:visited, .b-mainmenu > li a.selected:active, .b-mainmenu > li a.selected:hover { color:#dd3f55; text-decoration: none; } @media screen and (min-width:768px){ .b-mainmenu { position: absolute; top: 24px; left: 30px; margin: 0; border: none; transform: translateY(-50%); /* white-space: nowrap; */ } .b-mainmenu > li { display: inline-block; padding: 4px 9px; border: none; } .b-mainmenu > li a { font-size: 13px; font-weight: 300; color: #999999; } .b-mainmenu > li a:link, .b-mainmenu > li a:visited { color: #222222; } .b-mainmenu > li a:hover, .b-mainmenu > li a:active, .b-mainmenu > li a:focus, .b-mainmenu > li a.selected:link, .b-mainmenu > li a.selected:visited, .b-mainmenu > li a.selected:active, .b-mainmenu > li a.selected:hover { color: #dd3f64; } } @media screen and (min-width:1239px){ .b-mainmenu { top: 90px; left: 30px; max-width: 400px; } /* --------------------- */ .l-header--scroll .b-mainmenu { top: 30px; } } @media screen and (max-width:1239px) { .b-region { top: 30px; left: 30px; } } /* End */ /* Start:/local/templates/jewelry/components/bitrix/menu/catalog_menu/style.css?17522400718590*/ /**/ .b-catalogmenu-wrap { display: none; } .b-catalogmenu { list-style:none; margin: 0 -20px; padding:0; border-top: 1px solid #ededed; position: relative; /*IE bug*/ } .b-catalogmenu a { display: inline-block; } .b-catalogmenu > li { padding: 9px 30px; border-bottom: 1px solid #ededed; } .b-catalogmenu > li:last-child { border-color: transparent; } .b-catalogmenu > li a { font-size: 15px; color:#222222; font-weight: 400; text-decoration:none; } .b-catalogmenu > li a:visited { color:#222222; } .b-catalogmenu > li a:hover, .b-catalogmenu > li a:active, .b-catalogmenu > li a:focus { color:#dd3f55; text-decoration: none; } .b-catalogmenu > .root-item-selected > a, .b-catalogmenu > .root-item > a { font-weight: 600; } .b-catalogmenu .root-item-selected > a:link, .b-catalogmenu .root-item-selected > a:visited, .b-catalogmen .root-item-selected > a:active, .b-catalogmenu .root-item-selected > a:hover, .b-catalogmenu .item-selected > a:link, .b-catalogmenu .item-selected > a:visited, .b-catalogmenu .item-selected > a:active, .b-catalogmenu .item-selected > a:hover { color:#dd3f55; text-decoration: none; } .b-catalogmenu .level-1, .b-catalogmenu .level-2, .b-catalogmenu .level-3, .b-catalogmenu .level-4 { display: none; } .b-catalogmenu .root-item > a, .b-catalogmenu .level-1 li > a, .b-catalogmenu .level-2 li > a { margin: 8px 0; } .b-catalogmenu li.parent { position: relative; } .b-catalogmenu > li.parent > a { margin-right: 1.9em; } .b-toggle-child { position: absolute; right: 0; top: 5px; display: inline-block; width: 1.5em; height: 1em; background: transparent; text-align: right; } .root-item-selected > .b-toggle-child { right: 30px; } .b-toggle-child svg { transform: rotateZ(180deg); } .b-toggle-child--open svg { transform: rotateZ(0); color: #dd3f55; } .level-1 .b-toggle-child svg { padding: 0 2px; width: 11px; } .root-item > .b-toggle-child { right: 30px; top: 17px; } .b-catalogmenu .level-2 { margin-left: 1em; } @media screen and (min-width: 768px) { .b-catalogmenu-wrap { content: ''; position: fixed; z-index: 900; top: 0; left: 0; right: 0; bottom: 0; display: block; background-color: rgba(0,0,0,.1); opacity: 0; cursor: pointer; } .b-catalogmenu { margin: 0 -30px; position: absolute; z-index: 1; top: 137px; left: 30px; display: none; width: 198px; border: 1px solid #edeede; border-width: 0 1px 1px; background: #ffffff; } .b-catalogmenu:before { content: none; position: absolute; left: 0; top: -64px; display: block; width: 100%; height: 64px; border: 0 solid #ededed; border-width: 0 1px; pointer-events: none; } .b-catalogmenu li a { margin: 0; font-size: 14px; display: block; margin: -17px -30px; padding: 17px 20px; } .b-catalogmenu .root-item > a, .b-catalogmenu .root-item-selected > a { margin: -17px -30px; padding: 17px 30px; } .b-catalogmenu li.parent { position: static; position: relative; } .b-catalogmenu li.parent > a { margin: -17px -30px; } .b-catalogmenu .level-1 > .item-selected > a:link, .b-catalogmenu .level-1 > .item-selected > a:visited, .b-catalogmenu .level-1 > .item-selected > a:active, .b-catalogmenu .level-1 > .item-selected > a:hover, .b-catalogmenu .level-1 > li > a { font-weight: 600; } .b-catalogmenu .level-1 .parent > a:link, .b-catalogmenu .level-1 .parent > a:visited, .b-catalogmenu .level-1 .parent > a:active, .b-catalogmenu .level-1 .parent > a:hover, .b-catalogmenu .level-1 .parent > a { font-weight: 600; } .b-catalogmenu ul.level-1 li { display: inline-block; width: 100%; padding: 0 5px; box-sizing: border-box; } .b-catalogmenu ul.level-1 li a:active, .b-catalogmenu ul.level-1 li a:hover, .b-catalogmenu ul.level-1 li a:focus { color: #dd3f55; } .b-catalogmenu .level-1 li > a, .b-catalogmenu .level-2 li > a, .b-catalogmenu .level-3 li > a, .b-catalogmenu .level-4 li > a { padding: 0; margin: 0 0 10px 0; } .b-catalogmenu .level-2 li > a { font-size: 12px; } .b-catalogmenu > li { padding: 17px 30px; } .b-catalogmenu > li li.parent { display: inline-block; margin-bottom: 15px; } .b-catalogmenu > li li.parent { display: block; /* -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -moz-page-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; */ width: 50%; } .b-catalogmenu > .root-item-selected > a, .b-catalogmenu > .root-item > a { font-weight: 400; } .b-catalogmenu > .root-item-selected, .b-catalogmenu .root-item:hover, .b-catalogmenu .root-item:focus { background-color: #dd3f55; border-color: #dd3f55; } .b-catalogmenu--visiable { display: block; } .b-catalogmenu .root-item-selected > a:link, .b-catalogmenu .root-item-selected > a:visited, .b-catalogmen .root-item-selected > a:active, .b-catalogmenu .root-item-selected > a:hover, .b-catalogmenu .item-selected > a:link, .b-catalogmenu .item-selected > a:visited, .b-catalogmenu .item-selected > a:active, .b-catalogmenu .item-selected > a:hover { font-weight: 400; } .b-catalogmenu .root-item-selected > a:link, .b-catalogmenu .root-item-selected > a:visited, .b-catalogmen .root-item-selected > a:active, .b-catalogmenu .root-item-selected > a:hover, .b-catalogmenu > li a:hover, .b-catalogmenu > li a:active, .b-catalogmenu > li a:focus, .b-catalogmenu > li:hover > a { color: #ffffff; } .b-catalogmenu .b-toggle-child { display: none; } .b-catalogmenu .level-1, .b-catalogmenu .level-2, .b-catalogmenu .level-3, .b-catalogmenu .level-4 { position: absolute; left: 100%; left: 100%; top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #ffffff; } .b-catalogmenu li:hover .level-1, .b-catalogmenu .level-2, .b-catalogmenu .level-3, .b-catalogmenu .level-4 { display: block !important; } .b-catalogmenu li:hover .level-1.hidden-important { display: none !important; } .b-catalogmenu .level-2, .b-catalogmenu .level-3, .b-catalogmenu .level-4 { position: static; } .b-catalogmenu .level-1 { margin-left: 0; /* width: 1040px; */ /* height: 100%; */ width: 100%; min-width: 460px; max-height: 550px; height: auto; max-width: 568px; /* max-width: calc(100vw - 200px); */ padding: 20px; border: 1px solid #ededed; overflow-x: auto; overflow-y: hidden; } .b-catalogmenu .scroll-box { width: 100%; height: 100%; } .b-catalogmenu .scroll-box .box { /* -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; */ /* -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-rule: 1px solid transparent; -moz-column-rule: 1px solid transparent; column-rule: 1px solid transparent; -webkit-column-width: 180px; -moz-column-width: 180px; column-width: 180px; max-height: 500px; */ display: flex; flex-wrap: wrap; width: 100%; margin: 0 -5px; } .b-catalogmenu .level-1 a { display: inline-block; width: auto; } } @media screen and (min-width:1240px) { .b-catalogmenu { top: 185px; left: 30px; } .b-catalogmenu:before { content: none; } /* ------------------- */ .l-header--scroll .b-catalogmenu:before { content: none; } } /******************* EXTERNAL SCROLLBAR *******************/ .mCSB_scrollTools .mCSB_draggerRail { background-color: #dd3f55; } /* End */ /* Start:/local/templates/jewelry/components/bitrix/news.list/region/style.css?17522400715977*/ .l-header .header__aut { z-index: -1; } .b-region { position: absolute; top: 35px; left: 37px; margin-top: 10px; /* position: relative; */ width: max-content; z-index: 1; } .b-region-contact .region__letter { display: none; } .b-region-contact .region-list__title { display: none; } .b-region .region-contact__question { font-weight: bold; font-size: 11px; margin-bottom: 10px; } .b-region .region-contact__btns { margin-right: -15px; display: flex; align-items: center; justify-content: space-between; } .b-region .region-contact__btns p { margin: 0; } .b-region .region-close { padding: 7px 10px; border: 1px solid #dd3f55; background-color: #dd3f55; border-radius: 30px; color: #fff; cursor: pointer; } .b-region .region-close:hover { background-color: #fff; color: #111; } .b-region .region-contact__wraps p .region-choose:link, .b-region .region-contact__wraps p .region-choose:visited { padding: 5px 10px; border: 1px solid #dd3f55; background-color: #fff; border-radius: 30px; text-decoration: none; color: #111; } .b-region .region-contact__wraps p .region-choose:hover { background-color: #dd3f55; color: #fff; } /*--------------------------*/ .b-header-links { display: flex; position: absolute; top: 30px; left: 50%; margin-left: -400px; column-gap: 27px; } .b-header-links .header-links__item--vk, .b-header-links .header-links__item--zen { max-width: 23px; } /*--------------------------*/ .b-region-contact { position: absolute; width: 210px; background-color: #fff; border: 1px solid #cbcbcb; cursor: default; position: absolute; top: calc(100% + 20px); left: calc(50% + 26px); transform: translateX(-50%); text-align: left; font-size: 10px; z-index: 10; } .region-contact__wraps { padding: 10px 10px 16px 11px; } .region-contact__wraps::before, .region-contact__wraps::after { content: ''; position: absolute; left: calc(50% - 20px); top: -20px; border: 10px solid transparent; border-bottom: 10px solid #cbcbcb; } .region-contact__wraps::after { border-bottom: 10px solid white; top: -19px; } .region-cross { position: absolute; color: #cbcbcb; right: 9px; top: 4px; cursor: pointer; font-size: 15px; } .fancy-region .fancybox-skin { padding: 0!important; } .fancy-region.fancybox-opened .region-list__inside { /* margin: -15px; */ } .region-choose { text-decoration: none; } .region-list__title { padding: 30px; background-color: #f4f4f4; text-decoration: none; font-size: 24px; color: #070707; } .region-list__title span { display: inline-block; max-width: calc(100% - 75px); } .b-region-list-ul { padding: 30px; max-width: 100%; width: 870px; columns: 4; font-size: 14px; } .b-region-list-ul .region__column { margin-bottom: 20px; display: flex; overflow: hidden; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; break-inside: avoid-column; } .b-region-list-ul .region__letter { width: 22px; color: #dd3f55; font-weight: bold; } .b-region-list-ul .region__column-wrap { width: calc(100% - 22px); } .b-region-list-ul .region__column a:link, .b-region-list-ul .region__column a:visited { margin-bottom: 10px; display: block; text-decoration: none; color: #000; } .b-region-list-ul .region__column a:hover { color: #dd3f55; } .b-region-list-ul .region__column a:hover::after { margin-left: 10px; content: '\2714'; } .fancy-region .fancybox-close { background: url(/images/fancy-close.png)!important; width: 27px; height: 26px; top: 29px; right: 25px; } .b-region-city { width: max-content; /* max-width: 100px; overflow: hidden; white-space: nowrap; background: #fff; */ } .b-region-city:hover { max-width: none; } .header__mside--show .b-region-city { max-width: none; background: transparent; } .b-region-city a:link, .b-region-city a:visited { color: #222222; font-weight: bold; } .b-region-city::before { content: ''; margin-right: 10px; background: url(/images/map-icon.png)!important; display: inline-block; vertical-align: middle; width: 11px; height: 16px; } @media screen and (max-width: 1240px) { .b-region-list-ul { width: 700px; columns: 3; } .b-header-links { top: 40px; left: 140px; margin-left: 0; } /*--------------------------*/ .b-header-links { column-gap: 15px; } } @media screen and (max-width: 980px) { .b-region-list-ul { width: 500px; columns: 2; } } @media screen and (max-width: 599px) { .b-region-list-ul { padding: 20px 10px 10px; margin: auto; columns: 1; width: 140px; } .b-region-list-ul .region__column { margin-bottom: 10px; display: flex; } .b-region-contact { left: 0; transform: translateX(0%); } .region-contact__wraps::before, .region-contact__wraps::after { left: 20px; } .b-region-list-ul .region__column-wrap { width: auto; } .region-list__title { padding: 10px; font-size: 18px; text-align: center; } .region-contact__wraps { display: none; } /* .b-region-list.fixed { position: fixed; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; display: block!important; background-color: #f7f7f7; }*/ .b-region-contact { display: none; } .b-region { margin-left: 6px; } .fancy-region .fancybox-close { top: 5px; right: 5px; } .b-header-links { column-gap: 10px; } } /* End */ /* Start:/local/templates/jewelry/components/bitrix/menu/top_menu/style.css?17522400713196*/ .b-topmenu { display: none; } .b-topmenu { list-style:none; margin: 0 -30px; padding:0; border-top: 1px solid #ededed; position: relative; /*IE bug*/ } .b-topmenu > li { padding: 17px 30px; position: relative; border-bottom: 1px solid #ededed; } .b-topmenu > li a { font-size: 15px; color:#222222; font-weight: 600; text-decoration:none; } .b-topmenu > li a:visited { color:#222222; } .b-topmenu > li a:hover, .b-topmenu > li a:active, .b-topmenu > li a:focus { color:#dd3f55; text-decoration: none; } .b-topmenu > li a.selected:link, .b-topmenu > li a.selected:visited, .b-topmenu > li a.selected:active, .b-topmenu > li a.selected:hover { color:#dd3f55; text-decoration: none; } @media screen and (min-width:1240px){ .b-topmenu { display: flex; flex-wrap: wrap; justify-content: space-around; border: none; margin: 0 -10px; padding: 17px 0 9px 0; } .b-topmenu > li { display: inline-block; flex: 0.1 1 auto; padding: 9px 15px 9px 15px; /* padding: 26px 6px 24px 6px; */ border: none; text-align: center; } .b-topmenu > li:nth-child(2) { display: none; } .b-topmenu > li:first-child { padding-left: 160px; } /* .b-topmenu > li:nth-child(8) { padding-left: 100px; } */ .b-topmenu > li a { font-size: 14px; font-weight: bold; white-space: nowrap; } .b-topmenu .root-item, .b-topmenu .root-item-selected { position: relative; } .b-topmenu .root-item-selected:before { content: ''; position: absolute; top: -25px; left: 20%; right: 20%; display: block; border-top: 2px solid #dd3f55; opacity: 0; transition: left .2s, right .2s, opacity .45s; } .b-topmenu .root-item-selected, .b-topmenu .root-item:hover, .b-topmenu .root-item:focus { outline-color: transparent; } .b-topmenu .root-item-selected:before, .b-topmenu .root-item:hover:before, .b-topmenu .root-item:focus:before { left: -1px; right: -1px; opacity: 1; display: none; } .b-topmenu > li > ul { position: absolute; z-index: 1; bottom: 1px; left: -15px; display: none; min-width: 200px; max-width: 440px; padding: 10px 0; border: 1px solid #ededed; transform: translateY(100%); text-align: left; background-color: #ffffff; overflow: hidden; } .b-topmenu > li:hover > ul, .b-topmenu > li:focus > ul { display: block; } .b-topmenu > li > ul > li { padding: 6px 15px; } .b-topmenu > li a:hover, .b-topmenu > li a:active, .b-topmenu > li a:focus, .b-topmenu > li a.root-item-selected { color: #999999; } .b-topmenu li ul ul { display: none; } .b-topmenu > li ul a:hover, .b-topmenu > li ul a:active, .b-topmenu > li ul a:focus, .b-topmenu > li ul .item-selected a { color: #dd3f55; } } /* End */ /* Start:/local/templates/jewelry/components/bitrix/menu/bottom_menu/style.css?17522400711869*/ .b-btm-menu { list-style:none; margin: 0 -30px; padding:0; border-top: 1px solid #ededed; position: relative; /*IE bug*/ } .b-btm-menu > li { padding: 17px 30px; border-bottom: 1px solid #ededed; } .b-btm-menu > li a { font-size: 15px; color:#222222; font-weight: 600; text-decoration:none; } .b-btm-menu > li a:visited { color:#222222; } .b-btm-menu > li a:hover, .b-btm-menu > li a:active, .b-btm-menu > li a:focus { color:#dd3f55; text-decoration: none; } .b-btm-menu > li a.selected:link, .b-btm-menu > li a.selected:visited, .b-btm-menu > li a.selected:active, .b-btm-menu > li a.selected:hover { color:#dd3f55; text-decoration: none; } @media screen and (min-width:1240px){ .b-btm-menu { position: static; margin: 0; border: none; -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-rule: 1px solid transparent; -moz-column-rule: 1px solid transparent; column-rule: 1px solid transparent; -webkit-column-width: 180px; -moz-column-width: 180px; column-width: 180px; } .b-btm-menu > li { display: inline-block; width: 100%; padding: 4px 18px; border: none; } .b-btm-menu > li a { font-size: 13px; font-weight: 400; color: #444444; } .b-btm-menu > li a:link, .b-btm-menu > li a:visited { color: #444444; } .b-btm-menu > li a:hover, .b-btm-menu > li a:active, .b-btm-menu > li a:focus, .b-btm-menu > li a.selected:link, .b-btm-menu > li a.selected:visited, .b-btm-menu > li a.selected:active, .b-btm-menu > li a.selected:hover { color: #999999; } } /* End */ /* Start:/local/components/bitrix/eshop.socnet.links/templates/cosnet/style.css?17522400711314*/ .b-socnetbar { margin: 10px 0; } .b-socnetbar .socnetbar__title { color: #c3c3c3; text-transform: uppercase; font-size: 12px; margin-bottom: 9px; font-weight: 600; } .b-socnet { margin-top: 35px; } .b-socnet ul { padding: 0; margin: 0; display: block; } .b-socnet ul li { display: inline-block; width: 40px; vertical-align: middle; } .b-socnet ul li a { display: inline-block; border-bottom: none; } .b-socnet ul li a:before { content: ''; width: 25px; height: 25px; display: block; background-size: cover; background-repeat: no-repeat; } .b-socnet ul li a.vk:before { content: ''; background-image: url('/local/templates/jewelry/images/icons/vk-footer.svg'); } .b-socnet ul li a.wa:before { background-image: url('/images/wa.png'); } .b-socnet ul li a.zen:before { background-image: url('/local/templates/jewelry/images/icons/zen-footer.svg'); } .b-socnet ul li a.in:before { background-image: url('/local/templates/jewelry/images/ico_cos_inst.png'); } .b-socnet ul li a:hover {opacity: .5;} .b-socnet .socnet__item--vk, .b-socnet .socnet__item--zen { max-width: 23px; margin-left: 17px; } .b-socnet .socnet__item--zen { margin-right: 8px; } /* End */ /* Start:/local/templates/jewelry/css/template_ie.css?1752240071524*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ input[type="checkbox"]::-ms-check { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Good browsers :) */ opacity:0; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1240px) { .l-content .content__crop { width: 0; } } /* End */ /* /local/templates/jewelry/fonts/Montserrat/stylesheet.css?17522400728367 */ /* /local/templates/jewelry/fonts/SberSansText/stylesheet.css?1752240072570 */ /* /local/templates/jewelry/fonts/SberSansDisplay/stylesheet.css?1752240072614 */ /* /local/templates/jewelry/styles.css?17522400712817 */ /* /local/templates/jewelry/template_styles.css?175224007124646 */ /* /local/templates/jewelry/css/template_tablet.css?175224007110753 */ /* /local/templates/jewelry/css/template_desktop.css?175224007110119 */ /* /local/templates/jewelry/fancybox/jquery.fancybox.css?17522400714895 */ /* /local/templates/jewelry/fancybox/jquery.fancybox-thumbs.css?1752240071735 */ /* /assets/js/glide_3/css/glide.core.min.css?1752240341823 */ /* /assets/js/glide_3/css/glide.theme.min.css?17522403411293 */ /* /mailhu-scrollbar/jquery.mCustomScrollbar.css?175224007253583 */ /* /local/templates/jewelry/components/bitrix/sale.basket.basket.line/basket_obraz/style.css?17522400717431 */ /* /local/templates/jewelry/components/bitrix/menu/main_menu/style.css?17522400711879 */ /* /local/templates/jewelry/components/bitrix/menu/catalog_menu/style.css?17522400718590 */ /* /local/templates/jewelry/components/bitrix/news.list/region/style.css?17522400715977 */ /* /local/templates/jewelry/components/bitrix/menu/top_menu/style.css?17522400713196 */ /* /local/templates/jewelry/components/bitrix/menu/bottom_menu/style.css?17522400711869 */ /* /local/components/bitrix/eshop.socnet.links/templates/cosnet/style.css?17522400711314 */ /* /local/templates/jewelry/css/template_ie.css?1752240071524 */