/* Start:/bitrix/templates/new_ninel_template/template_styles.css?17875657946718*/ body { overflow-x: hidden; } .page-caption { padding-bottom: 20px; } .page-caption .breadcrumbs { height: auto; } .product-slider-block .swiper-arrows { z-index: 1; } .footer-widgets { margin-top: 50px; } .widgets-wrapper { display: block; padding: 10px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widgets-wrapper.widget-instagram { width: 100%; min-width: 320px; margin-top: 11px; } .stogram { border: 1px solid #E7EAEF; } .stogram-header { border-bottom: 1px solid #E7EAEF; background: #FFF; padding-left: 30px; padding-right: 25px; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; display: flex; align-items: center; } .stogram-logo { margin-right: 15px; width: 40px; height: 28px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAMAAAAkyw3kAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABmUExURQAAADU1Nf39/UxMTCYmJikpKSgoKHd3dwAAAP///3d3d/Ly8mxsbNnZ2S8vL5iYmIiIiO/v77i4uLS0tDg4OGRkZKGhoSwsLN7e3qampisrK8HBwfv7+/Hx8dfX1y0tLf7+/kJCQhpN1vIAAAAJdFJOUwD///////9vBoIiW3YAAADdSURBVDjLxZTbDoMgEES9jCiK4gXvWtv//8my+mLMmvLQpvMAJJxAZpnF89wE7ydgnIZ+L2Alej9M4xswUdiZyGqnoRIWVCh0ngVyV5DluoDiwBjFIE9al6FAzIAp9Jl7bK9FI2XAEPlOVE1ZNpWcsa05Qgb0kRFXG7Jh6uf8kBl8BpxAPmqg7boWqMkRegYUgu41GOncEaaykxAMiMjuNGgPLy0aO0a4A0t0B9ih/A7ocrWzGefyXApOa77glyck8U94CQWJD8U1ZlLexMw5uO6tcDTX9Lm5/vYBvAE0rBKc48CSPwAAAABJRU5ErkJggg=='); } .stogram-logo, .stogram-profile__name { overflow: hidden; text-indent: -999px; display: inline-block; vertical-align: middle; } .stogram-profile__avatar { display: inline-block; vertical-align: middle; } .stogram-profile__name { margin-left: 15px; width: 169px; height: 28px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKkAAAAcCAMAAAAtDG/bAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURQAAAAD6+vr6Sij6+vrZdvr6+nbZ+kr6+vr6b3nI+vr6APr6anbO+vrWdXXW+njG+l76+nfH+vr6KPr6XvrRXtq1eGe18fq/b3XJ+vr6Z/rHd2/6+nD0+siodvq8SnWq0cikedmtdrrX7m/l+vpgKMqmeGnf+sijd0q8+nmy03iw3mr6+nfR+nmsz/XCeHiszu/Bed64dnPe+l7R+nDW+vrNc3rE8/rIeXat+ui9eJEoKF5e+nez0W+q0Hefx72ienPN+nmnzNyzd/q9ZyiR+nfH7+W6ecz6+r7y+vrRd+GyanOtzfrocMiZavrGeHmkyPLj02+q5XmBltO2efrec8TT45+2vpmZdfrlb5d5ed6weOrq8vryvvr68ni14PrOds+seXjG8bLhavr6+suCJiZhqoImJiYmJmEmJmGq5mEmYSaCyyZTo+aqYSd8viczaPr68005LKpgJ1uq3ycsOSwmJt+qYU2j2KNNJt+jVJZCJipWhzUoJk1bbmhNOSwsYaqCaPP6+lszJiYmLGEsKtKWQCZClt+3dU8oQi4qMHNPLkdHhMV+KlQoLGGx5ihut+y3bmGq3yYmUiYmYSYogp1NLKpbM4luW1uCqubYvs/f7MuCR51uTcWCQPrjp/r63E1of1uWvk0sMzNHWyYmMyYvVClHgqd1TTlNaG6dvkdbbr58RylAgoJAJny+839oTd/6+r58KVSj3EAmV4LL+tijUIYpLKrj+iYmbumxaEczWyYzW7FhJiaCxXWCgkeCy4JNMl4mW5ZQM3Wq2DNUfDNHTVtuiYJbMyYzR2hNR3xUOdjm82hHMzNNglQmVFuWsWEmQDMsYd+xaCxHdaPY81szM5bL7N+qaCw5TfPfy2iCsSYmQPO+fPrzy/rLgm51sW637G5bRzMsVILF7DNoscuCLCYsYW4sLL6WW0czJlSJxSYzlsWWaDMzaE1NOUCW0rGjYSZhsUczaHwsJr7z+iyJyyYmfE11o7FuLFuWxZZNVGGqt7duJoJhMyYsiSZKnXrqw9AAAABjdFJOUwACHRGb4JsdVu4CR5uMjMQsqREsLMQ7Vow7qVZimx2U7pvgVhG2Qf0d4LZHqe62xO6bfyxicfvum8QRLKlWqftx4Kk7Eanu4OCpR3FiR8Tu4Fbu4H/g4IxW4Lbg4ODEm+7ER6+vEkAAAAONSURBVFjDY2AgF6SksmMRZXrzMv21ND59HGmZDPQFWF0aceiVMYMKI11cyj01n498l1bmCBDSh+FSom1EA8LTKHCpZEUxA8kuJdpGasY+Rxon6S4dkHQ66tKBc6lQQl1p8wpdZlItFFJ9WJN+45YasgtYMjgZxBsK05es0oIrFVGvK01fvFIMh0s50tIhIBvI4ZKdXpheskAeJqm4via9pFaTEexS0wM/jRm4DLueCKCaJKJwEqTKEeoDNDekpCYd+h7IwOC1vJ4H1aXtu/Q1GLhEm/ZDi0e9qwtPJyffXJ7PQzhMLZuO2LgwCAX3ToTUB6urvRkZ5FTvs4PU/P6VCBb1WZuJYpLbohmzGpMLZs65LAFzKbIbUqr/Qkzj2ggpC2Eu3ddtAhaX6jWDOLTjcTIIFMxepkzQpbMPQ7xnsFkHRE1YI4OkprMPVvq2aSOZtPPRtWQIuHSRhwHTDSnpedAw8+zgR3bpJEGIMFdPPyg2uKs2Qc25u3YTQZdawQvY96Ag3ZONrGYKrLb128yDMIm3ZR3UguSCudjckALjAd1SjOxSmAcYJkwBBcjOb19gBrXmqBGdo1I+AlUxFe1FVgPngBIi3KTWnA0wC5LnXeDHdEPKP5gPmYqykV0KiyIG88lsDAxCf/IaYebc2WFEtEtzwaqePuNBUlOMphxsEjCc4A5Nnl9UjukGJAtTslHzPsznWUCXcmxDGHQP5HSCLlXxDY9c/64UGrNLNZkxy1Nkl/JmbEG4NDkFFJpobiDWpbAiCARu8xN0qdOpktqgsNDoMogq0wPpu6HFJw6XshzcjuxSsBCZLuUkoeQHlkpKrGCQC1MV1ZW+Ow6fS7Oo5tJMElya2+YOcSjrVoQqw67micTGfg/5sc+05yvxLmUqKoc6NHYjkiqmH6CsiMOl3FWZSDmqopyBXJfCSmmiXAp0DNSlMZ+RVUmBSmwcLkUtpc7pkO/SkOcPiHapZAUsTLd2IquKP8iD26UoJT+4siHTpQxl9a5QAVELQum0co0H2KEG3R9AqpisoYUrqL7G5VKgBVegLi2D1NfkupTheudCYDNKTvb4UkFCLhUuAuX9gBdvJcB5n2PbDFtGYFPskwQDHpcytC86D2mhnHVgoMil4BZY+tFj8syE21JMCmfSm1f4s0PrKEVgExDWXsTtUgZne2Cz8sQCO2YGbC4dBaOA3L4UUmMgPZu2dgEAwECtY5aNAGUAAAAASUVORK5CYII='); } .stogram-follow-button { margin-left: auto; display: block; text-indent: -999px; overflow: hidden; margin-top: 11px; width: 105px; height: 30px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAeCAMAAAAYe8BxAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAGJUExURUKU8Hmx9EyY8////3mx9Xmw9Hmx9AAAAHmx9Xmy9Jrl/v///vPl+P/u+uP///P//////UyY+uPY80zF/LuY89LF80zY/f/4/OP7/5qY89L4/22Y8+j//1yh81uh80yY+Lvu/0yk95Tb/W2++v/7/f/1+4/i/WKY8/nr+Yni/UyY916i823B+/P7/1ee87De+vPu+sHR8//y+0yY9eje93ik8+7//0yY9GK7+Uy0+kyx+vn//0yk+WK7+o+Y8+Pu/szF9N37/37Y/fn//v/7/omY9NLI8+P4/qux9OPb97bo/eje+NfR85ri/ZSY+niY84mY823I+9Ly/v/y+ra+9bDr/u74/8fB9JrF/N3//2KY9Ojb9n7e/XiY+pSY80y++t3V9Uy7+0yY+X7R/Oj7/0zB/PPy/Nf7/7C085Tb/NLF9Ey++0zY/N31/tfI8/ny+5Tl/ru0+omk89Ly/0yY9uPb+Jqk87vI98zr/ZSr87vu/vP7/oOx9NfO86vo/pqY+kyx+8Gx8+PY9CMsDicAAAAKdFJOUxnZ///N09MAz9en1ZucAAABsklEQVRIx+3X11LCQBQG4HWPirAEUNFEiNIEFDsWUOy999577723J3ezwCg4DNyw4zicizCZZPfL+RNSkAqlF+JkV2EWUiFUhnlUGUJZmE+loSJOUhHCvColpaTYkgaCpU2+RPLoMlf/PyXfwSzA7j5de6VpCjhbx2LNwRqDETdKdOGfBPCOr50AFLcHt4rzoUOstVcAGfbZ9WxEHKmzq87skMQCjK1Ctk6RBIzzg9L1IxiMTZI4bataPb6pb5Hpbmx7OAwNGaovr9loKDHnx5U8JgUpJS/YY9JGS51dbQZjKTkNj7LSDn9KmwtTY/SnSU5EYgPZzO/yZ5R0IWkpp0xPy3//FIBvCZQsd0KtbW0nkF64pzzsMnxESW3iLZXO2a6WPfHuOaKnRtm7ohPcymzLZD1+T9hFlPPkbG3uKHFHSkAOlQiPGsR+W9WoznnpkH5KLbKwOEMGzOU1zR3O1gQkdvlUP1hMwb+y+PYtad3sApzoA6juGQnA2VVkenPYNqiH7l4XLOGY0q+ymFjkGiXL5N73+Empp8bfkfi9hWVwktQIVXKBKhF9M8/k8AWgRqovUSdQ9hd7y+wAAAAASUVORK5CYII='); } .stogram-gallery { text-align: center; padding: 10px 0; background: #FAFAFA; } .map-block .show-list-button { bottom: 125px !important; } @media screen and ( max-width: 1100px ) { .stogram-profile__name { width: 100%; height: auto; margin-top: 5px; background-size: 100% auto; background-repeat: no-repeat; } .stogram-follow-button { margin-top: 0; } .stogram-gallery { min-height: 105px; } .stogram-gallery > a > img { width: 100%; padding: 0 25px; box-sizing: border-box; } .stogram { min-height: 202px; } } /* START HACK KERCH */ footer div.grid-row div:nth-child(3) > ul.footer-nav, footer div.grid-row div:nth-child(4) > ul.footer-nav{ margin-top: 0; } .product-list-caption.visible-mobile .h1 { display: none !important; } .card-block .text.top, .card-block .card-form{ filter: blur(5px); } /* End */ /* Start:/bitrix/templates/new_ninel_template/css/common.css?1725624710280979*/ @charset "utf-8"; /* cyrillic-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoC1CzjvWyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoC1CzjtGyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoC1CzjvmyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoC1CzjsGyNPYZvgw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCs6KVjbNBYlgoKcg72nU6AF7xm.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCs6KVjbNBYlgoKew72nU6AF7xm.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCs6KVjbNBYlgoKcQ72nU6AF7xm.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCs6KVjbNBYlgoKfw72nU6AFw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoCjC3jvWyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoCjC3jtGyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoCjC3jvmyNPYZvg7UI.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(/bitrix/templates/new_ninel_template/fonts/4iCv6KVjbNBYlgoCjC3jsGyNPYZvgw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /** **************** Reset default styles **************** **/ html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace,monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { font-size: 60%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } textarea { overflow: auto; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } input[type="email"], input[type="text"], textarea { -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } input::-ms-clear { display: none; } textarea::-ms-clear { display: none; } input[type="password"]::-ms-reveal { display: none; } details, menu { display: block; } template { display: none; } [hidden] { display: none; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; padding: 0; margin: 0; } p { margin: 0; } form { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } * { outline: none!important; -webkit-font-smoothing: subpixel-antialiased; } /** *сверху и снизу заголовка динаковое разстояние **/ .product-list-inner-page .page-caption { margin-bottom: -30px; } /** **************** Plugins styles **************** **/ /** * Swiper customization **/ .swiper-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -7px; } .swiper-pagination .swiper-pagination-bullet { height: 20px; width: 20px; position: relative; background: none; opacity: 1; border-radius: 0; } .swiper-pagination .swiper-pagination-bullet:before { -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; height: 6px; width: 6px; content: ''; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #999; background-clip: content-box; border: 2px solid transparent; border-radius: 50%; margin: auto; } .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; opacity: 0.99; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { opacity: 0.5; } .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):active { opacity: 0.3; } } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { background-color: transparent; border-color: #999; } .swiper-button-prev, .swiper-button-next { height: 12px !important; width: 35px !important; position: relative; -webkit-appearance: none; -moz-appearance: none; outline: none !important; resize: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 !important; margin: 0 !important; background: none; border: none; color: transparent !important; font-size: 0 !important; cursor: pointer; } .swiper-button-prev:before, .swiper-button-next:before, .swiper-button-prev:after, .swiper-button-next:after { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; height: 2px; width: 8px; content: ''; display: block; position: absolute; top: calc(50% - 1px); background: #999; } .swiper-button-prev:before, .swiper-button-next:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .swiper-button-prev:after, .swiper-button-next:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .swiper-button-prev:hover:before, .swiper-button-next:hover:before, .swiper-button-prev:hover:after, .swiper-button-next:hover:after { background-color: #20a7cf; } } .swiper-button-prev:before, .swiper-button-prev:after { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; left: 12px; } .swiper-button-next:before, .swiper-button-next:after { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; right: 12px; } .swiper-arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .swiper-arrows .swiper-button-prev, .swiper-arrows .swiper-button-next { position: relative; top: auto; left: auto; right: auto; margin: 0; } .swiper-arrows .swiper-button-next { border-left: 1px solid #e7e5ed; } .swiper-nav { position: absolute; left: 50%; bottom: 0; z-index: 100; background: rgba(255, 255, 255, 0.9); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; height: 42px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .swiper-nav .swiper-button-prev, .swiper-nav .swiper-button-next, .swiper-nav .swiper-pagination { position: relative; top: auto; left: auto; right: auto; } body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute!important; top: -9999px; visibility: hidden; } .fancybox-container { -webkit-backface-visibility: hidden; height: 100%; left: 0; outline: none; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-transform: translateZ(0); transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { -webkit-box-sizing: border-box; box-sizing: border-box; } .fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: #1e1e1e; opacity: 0; -webkit-transition-duration: inherit; -o-transition-duration: inherit; transition-duration: inherit; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); -o-transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { opacity: 0.9; -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar { direction: ltr; opacity: 0; position: absolute; -webkit-transition: opacity 0.25s ease, visibility 0s ease 0.25s; -o-transition: opacity 0.25s ease, visibility 0s ease 0.25s; transition: opacity 0.25s ease, visibility 0s ease 0.25s; visibility: hidden; z-index: 99997; } .fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar { opacity: 1; -webkit-transition: opacity 0.25s ease 0s, visibility 0s ease 0s; -o-transition: opacity 0.25s ease 0s, visibility 0s ease 0s; transition: opacity 0.25s ease 0s, visibility 0s ease 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { -webkit-backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; -o-transition-property: transform,opacity; transition-property: transform,opacity; transition-property: transform,opacity,-webkit-transform; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide:before { content: ""; display: inline-block; font-size: 0; height: 100%; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous { display: block; } .fancybox-slide--image { overflow: hidden; padding: 44px 0; } .fancybox-slide--image:before { display: none; } .fancybox-slide--html { padding: 6px; } .fancybox-content { background: #fff; display: inline-block; margin: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); -webkit-backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; -o-transition-property: transform,opacity; transition-property: transform,opacity; transition-property: transform,opacity,-webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: -webkit-zoom-out; cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: -webkit-zoom-in; cursor: zoom-in; } .fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content { cursor: -webkit-grab; cursor: grab; } .fancybox-is-grabbing .fancybox-content { cursor: -webkit-grabbing; cursor: grabbing; } .fancybox-container [data-selectable=true] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content, .fancybox-slide--video .fancybox-content { height: 100%; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background: #fff; } .fancybox-iframe, .fancybox-video { background: transparent; border: 0; display: block; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .fancybox-iframe { left: 0; position: absolute; top: 0; } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } .fancybox-button { background: rgba(30, 30, 30, 0.6); border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: relative; -webkit-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; vertical-align: top; visibility: inherit; width: 44px; } .fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #ccc; } .fancybox-button:hover { color: #fff; } .fancybox-button:focus { outline: none; } .fancybox-button.fancybox-focus { outline: 1px dotted; } .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; outline: none; } .fancybox-button div { height: 100%; } .fancybox-button svg { display: block; height: 100%; overflow: visible; position: relative; width: 100%; } .fancybox-button svg path { fill: currentColor; stroke-width: 0; } .fancybox-button--fsenter svg:nth-child(2), .fancybox-button--fsexit svg:first-child, .fancybox-button--pause svg:first-child, .fancybox-button--play svg:nth-child(2) { display: none; } .fancybox-progress { background: #ff5268; height: 2px; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; z-index: 99998; } .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #ccc; cursor: pointer; opacity: 0.8; padding: 8px; position: absolute; right: -12px; top: -44px; z-index: 401; } .fancybox-close-small:hover { color: #fff; opacity: 1; } .fancybox-slide--html .fancybox-close-small { color: currentColor; padding: 10px; right: 0; top: 0; } .fancybox-slide--image.fancybox-is-scaling .fancybox-content { overflow: hidden; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small { display: none; } .fancybox-navigation .fancybox-button { background-clip: content-box; height: 100px; opacity: 0; position: absolute; top: calc(50% - 50px); width: 70px; } .fancybox-navigation .fancybox-button div { padding: 7px; } .fancybox-navigation .fancybox-button--arrow_left { left: 0; left: env(safe-area-inset-left); padding: 31px 26px 31px 6px; } .fancybox-navigation .fancybox-button--arrow_right { padding: 31px 6px 31px 26px; right: 0; right: env(safe-area-inset-right); } .fancybox-caption { background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.85)), color-stop(50%, rgba(0, 0, 0, 0.3)), color-stop(65%, rgba(0, 0, 0, 0.15)), color-stop(75.5%, rgba(0, 0, 0, 0.075)), color-stop(82.85%, rgba(0, 0, 0, 0.037)), color-stop(88%, rgba(0, 0, 0, 0.019)), to(transparent)); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent); background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent); bottom: 0; color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 75px 44px 25px; pointer-events: none; right: 0; text-align: center; z-index: 99996; } @supports (padding:max(0px)) { .fancybox-caption { padding: 75px 44px 25px 44px; } } .fancybox-caption--separate { margin-top: -50px; } .fancybox-caption__body { max-height: 50vh; overflow: auto; pointer-events: all; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } .fancybox-loading { -webkit-animation: a 1s linear infinite; animation: a 1s linear infinite; background: transparent; border: 4px solid #888; border-bottom-color: #fff; border-radius: 50%; height: 50px; left: 50%; margin: -25px 0 0 -25px; opacity: 0.7; padding: 0; position: absolute; top: 50%; width: 50px; z-index: 99999; } @-webkit-keyframes a { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes a { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .fancybox-animated { -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1); -o-transition-timing-function: cubic-bezier(0, 0, 0.25, 1); transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } .fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous { opacity: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; -webkit-transform: rotate(-1turn); -ms-transform: rotate(-1turn); transform: rotate(-1turn); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; -webkit-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); } .fancybox-fx-tube.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); } @media (max-height: 576px) { .fancybox-slide { padding-left: 6px; padding-right: 6px; } .fancybox-slide--image { padding: 6px 0; } .fancybox-close-small { right: -6px; } .fancybox-slide--image .fancybox-close-small { background: #4e4e4e; color: #f2f4f6; height: 36px; opacity: 1; padding: 6px; right: 0; top: 0; width: 36px; } .fancybox-caption { padding-left: 12px; padding-right: 12px; } @ supports (padding:max(0px)) { .fancybox-caption { padding-left: 12px; padding-right: 12px; } } } .pic-container img { width: 1000px; } .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px; min-width: 130px; padding: 0 15px; text-decoration: none; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:link, .fancybox-share__button:visited { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0; outline: none; padding: 10px 15px; width: 100%; } .fancybox-thumbs { background: #ddd; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px; position: absolute; right: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs__list { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x .fancybox-thumbs__list { overflow: hidden; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track { background: #fff; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs__list a { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0, 0, 0, 0.1); background-position: 50%; background-repeat: no-repeat; background-size: cover; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs__list a:before { border: 6px solid #ff5268; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 99991; } .fancybox-thumbs__list a:focus:before { opacity: 0.5; } .fancybox-thumbs__list a.fancybox-thumbs-active:before { opacity: 1; } @media (max-width: 576px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs__list a { max-width: calc(100% - 10px); } } .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: 0; direction: ltr; } .mCSB_container { overflow: hidden; width: auto; height: auto; } .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container { margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } .mCSB_scrollTools { position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } .mCSB_scrollTools .mCSB_draggerContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { position: relative; width: 4px; height: 100%; margin: 0 auto; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; } .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; } .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } .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; } .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } .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; 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; 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; 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; } .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } .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 { 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; margin-left: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } .mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar { -webkit-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #e7e5ed; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #20a7cf; 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_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp { background-image: url(/bitrix/templates/new_ninel_template/css/mCSB_buttons.png); background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; } .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #20a7cf; } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail { 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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger { height: 14px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px; } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px; } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0; } .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, .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 { width: 16px; height: 16px; margin: -1px 0; } .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, .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 { width: 4px; } .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, .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 { height: 16px; width: 16px; margin: 0 -1px; } .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, .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 { height: 4px; 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; } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.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-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.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; } .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; } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%); } .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px; } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px; } .mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail { border-radius: 16px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555; } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.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; } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { border-radius: 7px; } .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical { right: 1px; } .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical { -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal { bottom: 1px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 5px; -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } .mCS-3d-thick-dark.mCSB_scrollTools { -webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.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; } .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical { right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px; } .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical { left: 0; right: auto; } .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px; } .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; } .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0; } .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, .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 { width: 12px; } .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, .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 { 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; } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .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; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.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-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.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-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0; } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-2-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-3-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-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255, 255, 255, 0.2); -webkit-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0, 0, 0, 0.2); } .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .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.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .select2-container { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0!important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px!important; overflow: hidden!important; padding: 0!important; position: absolute!important; width: 1px!important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; padding: 1px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid #000 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role="group"] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled="true"] { color: #999; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: #fff; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -o-linear-gradient(top, #fff 50%, #eee 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), to(#eee)); background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eee), to(#ccc)); background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -o-linear-gradient(top, #fff 0%, #eee 50%); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #eee)); background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -o-linear-gradient(top, #eee 50%, #fff 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eee), to(#fff)); background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role="group"] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled="true"] { color: gray; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: #fff; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /** * Swiper 5.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 3, 2020 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; -o-transition-property: transform, height; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } /* 3D Effects */ .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms opacity; -o-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; -o-transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; -o-transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; -o-transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /** **************** Common styles **************** **/ /** **************** Common styles **************** **/ html { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); height: 100%; overflow: auto; } body { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); min-width: 320px; background: #fff; color: #333; font-family: 'Ubuntu', sans-serif; } .wrapper { position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); max-width: 100vw; min-width: 320px; width: 100%; } .content-container, .content-row { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; max-width: 1360px; width: calc(100% - 20px * 2); } .content-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } main { position: relative; padding: 37px 0 50px; } .tabs-block { display: none; } @media (max-width: 1299px) { main { padding-top: 85px; } } h1, .h1 { font-weight: normal; font-size: 24px; margin-bottom: 24px; } /** **************** Grid **************** **/ .grid-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: -10px; margin-right: -10px; } .grid-row .col-xs-1, .grid-row .col-sm-1, .grid-row .col-md-1, .grid-row .col-lg-1, .grid-row .col-1, .grid-row .col-xs-2, .grid-row .col-sm-2, .grid-row .col-md-2, .grid-row .col-lg-2, .grid-row .col-2, .grid-row .col-xs-3, .grid-row .col-sm-3, .grid-row .col-md-3, .grid-row .col-lg-3, .grid-row .col-3, .grid-row .col-xs-4, .grid-row .col-sm-4, .grid-row .col-md-4, .grid-row .col-lg-4, .grid-row .col-4, .grid-row .col-xs-5, .grid-row .col-sm-5, .grid-row .col-md-5, .grid-row .col-lg-5, .grid-row .col-5, .grid-row .col-xs-6, .grid-row .col-sm-6, .grid-row .col-md-6, .grid-row .col-lg-6, .grid-row .col-6, .grid-row .col-xs-7, .grid-row .col-sm-7, .grid-row .col-md-7, .grid-row .col-lg-7, .grid-row .col-7, .grid-row .col-xs-8, .grid-row .col-sm-8, .grid-row .col-md-8, .grid-row .col-lg-8, .grid-row .col-8, .grid-row .col-xs-9, .grid-row .col-sm-9, .grid-row .col-md-9, .grid-row .col-lg-9, .grid-row .col-9, .grid-row .col-xs-10, .grid-row .col-sm-10, .grid-row .col-md-10, .grid-row .col-lg-10, .grid-row .col-10, .grid-row .col-xs-11, .grid-row .col-sm-11, .grid-row .col-md-11, .grid-row .col-lg-11, .grid-row .col-11, .grid-row .col-xs-12, .grid-row .col-sm-12, .grid-row .col-md-12, .grid-row .col-lg-12, .grid-row .col-12 { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; max-width: 100%; } .grid-row > div { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; max-width: 100%; } .grid-row .col-12 { width: 100%; } .grid-row .col-11 { width: 91.66666667%; } .grid-row .col-10 { width: 83.33333333%; } .grid-row .col-9 { width: 75%; } .grid-row .col-8 { width: 66.66666667%; } .grid-row .col-7 { width: 58.33333333%; } .grid-row .col-6 { width: 50%; } .grid-row .col-5 { width: 41.66666667%; } .grid-row .col-4 { width: 33.33333333%; } .grid-row .col-3 { width: 25%; } .grid-row .col-2 { width: 16.66666667%; } .grid-row .col-1 { width: 8.33333333%; } .grid-row .col-offset-12 { margin-left: 100%; } .grid-row .col-offset-11 { margin-left: 91.66666667%; } .grid-row .col-offset-10 { margin-left: 83.33333333%; } .grid-row .col-offset-9 { margin-left: 75%; } .grid-row .col-offset-8 { margin-left: 66.66666667%; } .grid-row .col-offset-7 { margin-left: 58.33333333%; } .grid-row .col-offset-6 { margin-left: 50%; } .grid-row .col-offset-5 { margin-left: 41.66666667%; } .grid-row .col-offset-4 { margin-left: 33.33333333%; } .grid-row .col-offset-3 { margin-left: 25%; } .grid-row .col-offset-2 { margin-left: 16.66666667%; } .grid-row .col-offset-1 { margin-left: 8.33333333%; } .grid-row .col-offset-0 { margin-left: 0%; } @media (max-width: 1299px) { .grid-row .col-lg-12 { width: 100%; } .grid-row .col-lg-11 { width: 91.66666667%; } .grid-row .col-lg-10 { width: 83.33333333%; } .grid-row .col-lg-9 { width: 75%; } .grid-row .col-lg-8 { width: 66.66666667%; } .grid-row .col-lg-7 { width: 58.33333333%; } .grid-row .col-lg-6 { width: 50%; } .grid-row .col-lg-5 { width: 41.66666667%; } .grid-row .col-lg-4 { width: 33.33333333%; } .grid-row .col-lg-3 { width: 25%; } .grid-row .col-lg-2 { width: 16.66666667%; } .grid-row .col-lg-1 { width: 8.33333333%; } .grid-row .col-lg-offset-12 { margin-left: 100%; } .grid-row .col-lg-offset-11 { margin-left: 91.66666667%; } .grid-row .col-lg-offset-10 { margin-left: 83.33333333%; } .grid-row .col-lg-offset-9 { margin-left: 75%; } .grid-row .col-lg-offset-8 { margin-left: 66.66666667%; } .grid-row .col-lg-offset-7 { margin-left: 58.33333333%; } .grid-row .col-lg-offset-6 { margin-left: 50%; } .grid-row .col-lg-offset-5 { margin-left: 41.66666667%; } .grid-row .col-lg-offset-4 { margin-left: 33.33333333%; } .grid-row .col-lg-offset-3 { margin-left: 25%; } .grid-row .col-lg-offset-2 { margin-left: 16.66666667%; } .grid-row .col-lg-offset-1 { margin-left: 8.33333333%; } .grid-row .col-lg-offset-0 { margin-left: 0%; } } @media (max-width: 1023px) { #tempresult { color: #333; } .grid-row .col-md-12 { width: 100%; } .grid-row .col-md-11 { width: 91.66666667%; } .grid-row .col-md-10 { width: 83.33333333%; } .grid-row .col-md-9 { width: 75%; } .grid-row .col-md-8 { width: 66.66666667%; } .grid-row .col-md-7 { width: 58.33333333%; } .grid-row .col-md-6 { width: 50%; } .grid-row .col-md-5 { width: 41.66666667%; } .grid-row .col-md-4 { width: 33.33333333%; } .grid-row .col-md-3 { width: 25%; } .grid-row .col-md-2 { width: 16.66666667%; } .grid-row .col-md-1 { width: 8.33333333%; } .grid-row .col-md-offset-12 { margin-left: 100%; } .grid-row .col-md-offset-11 { margin-left: 91.66666667%; } .grid-row .col-md-offset-10 { margin-left: 83.33333333%; } .grid-row .col-md-offset-9 { margin-left: 75%; } .grid-row .col-md-offset-8 { margin-left: 66.66666667%; } .grid-row .col-md-offset-7 { margin-left: 58.33333333%; } .grid-row .col-md-offset-6 { margin-left: 50%; } .grid-row .col-md-offset-5 { margin-left: 41.66666667%; } .grid-row .col-md-offset-4 { margin-left: 33.33333333%; } .grid-row .col-md-offset-3 { margin-left: 25%; } .grid-row .col-md-offset-2 { margin-left: 16.66666667%; } .grid-row .col-md-offset-1 { margin-left: 8.33333333%; } .grid-row .col-md-offset-0 { margin-left: 0%; } } @media (max-width: 767px) { .catalog_banner { width: calc( 100% + 40px ) !important; margin: 0 -20px -20px; } .grid-row .col-sm-12 { width: 100%; } .grid-row .col-sm-11 { width: 91.66666667%; } .grid-row .col-sm-10 { width: 83.33333333%; } .grid-row .col-sm-9 { width: 75%; } .grid-row .col-sm-8 { width: 66.66666667%; } .grid-row .col-sm-7 { width: 58.33333333%; } .grid-row .col-sm-6 { width: 50%; } .grid-row .col-sm-5 { width: 41.66666667%; } .grid-row .col-sm-4 { width: 33.33333333%; } .grid-row .col-sm-3 { width: 25%; } .grid-row .col-sm-2 { width: 16.66666667%; } .grid-row .col-sm-1 { width: 8.33333333%; } .grid-row .col-sm-offset-12 { margin-left: 100%; } .grid-row .col-sm-offset-11 { margin-left: 91.66666667%; } .grid-row .col-sm-offset-10 { margin-left: 83.33333333%; } .grid-row .col-sm-offset-9 { margin-left: 75%; } .grid-row .col-sm-offset-8 { margin-left: 66.66666667%; } .grid-row .col-sm-offset-7 { margin-left: 58.33333333%; } .grid-row .col-sm-offset-6 { margin-left: 50%; } .grid-row .col-sm-offset-5 { margin-left: 41.66666667%; } .grid-row .col-sm-offset-4 { margin-left: 33.33333333%; } .grid-row .col-sm-offset-3 { margin-left: 25%; } .grid-row .col-sm-offset-2 { margin-left: 16.66666667%; } .grid-row .col-sm-offset-1 { margin-left: 8.33333333%; } .grid-row .col-sm-offset-0 { margin-left: 0%; } } @media (max-width: 499px) { .grid-row .col-xs-12 { width: 100%; } .grid-row .col-xs-11 { width: 91.66666667%; } .grid-row .col-xs-10 { width: 83.33333333%; } .grid-row .col-xs-9 { width: 75%; } .grid-row .col-xs-8 { width: 66.66666667%; } .grid-row .col-xs-7 { width: 58.33333333%; } .grid-row .col-xs-6 { width: 50%; } .grid-row .col-xs-5 { width: 41.66666667%; } .grid-row .col-xs-4 { width: 33.33333333%; } .grid-row .col-xs-3 { width: 25%; } .grid-row .col-xs-2 { width: 16.66666667%; } .grid-row .col-xs-1 { width: 8.33333333%; } .grid-row .col-xs-offset-12 { margin-left: 100%; } .grid-row .col-xs-offset-11 { margin-left: 91.66666667%; } .grid-row .col-xs-offset-10 { margin-left: 83.33333333%; } .grid-row .col-xs-offset-9 { margin-left: 75%; } .grid-row .col-xs-offset-8 { margin-left: 66.66666667%; } .grid-row .col-xs-offset-7 { margin-left: 58.33333333%; } .grid-row .col-xs-offset-6 { margin-left: 50%; } .grid-row .col-xs-offset-5 { margin-left: 41.66666667%; } .grid-row .col-xs-offset-4 { margin-left: 33.33333333%; } .grid-row .col-xs-offset-3 { margin-left: 25%; } .grid-row .col-xs-offset-2 { margin-left: 16.66666667%; } .grid-row .col-xs-offset-1 { margin-left: 8.33333333%; } .grid-row .col-xs-offset-0 { margin-left: 0%; } } .grid-row.gutter-40 { margin-left: -20px; margin-right: -20px; } .grid-row.gutter-40 > div { padding-left: 20px; padding-right: 20px; } .grid-row.gutter-30 { margin-left: -15px; margin-right: -15px; } .grid-row.gutter-30 > div { padding-left: 15px; padding-right: 15px; } /** **************** Tabs js styles **************** **/ .js-tabs { overflow: hidden; } .js-tab:not(.selected) { display: none; } /** **************** Common forms style **************** **/ /** * Clear default form styles **/ .header-search-form button, .card-form button, .catalog-filter button, .product-detail-form button, .header-search-form input, .card-form input, .catalog-filter input, .product-detail-form input, .header-search-form select, .card-form select, .catalog-filter select, .product-detail-form select, .header-search-form textarea, .card-form textarea, .catalog-filter textarea, .product-detail-form textarea { -webkit-appearance: none; -moz-appearance: none; outline: none !important; resize: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .header-search-form button::-ms-clear, .card-form button::-ms-clear, .catalog-filter button::-ms-clear, .product-detail-form button::-ms-clear, .header-search-form input::-ms-clear, .card-form input::-ms-clear, .catalog-filter input::-ms-clear, .product-detail-form input::-ms-clear, .header-search-form select::-ms-clear, .card-form select::-ms-clear, .catalog-filter select::-ms-clear, .product-detail-form select::-ms-clear, .header-search-form textarea::-ms-clear, .card-form textarea::-ms-clear, .catalog-filter textarea::-ms-clear, .product-detail-form textarea::-ms-clear { display: none; } /** * Checkbox **/ .checkbox { color: #999; display: inline-block; font-size: 14px; cursor: pointer; } .checkbox input { display: none; } .checkbox input:checked + .checkbox-label:after { opacity: 1; } .checkbox .checkbox-label { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; position: relative; display: inline-block; vertical-align: baseline; padding-left: 30px; color: #333; } .checkbox .checkbox-label:before, .checkbox .checkbox-label:after { content: ''; display: block; top: 50%; left: 8px; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; } .checkbox .checkbox-label:before { height: 16px; width: 16px; margin: -8px; background: #fff; border: 1px solid #e7e5ed; } .checkbox .checkbox-label:after { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; height: 8px; width: 8px; margin: -4px; background: #20a7cf; opacity: 0; } .checkbox .checkbox-label:not(:last-child) { margin-right: 5px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .checkbox:hover .checkbox-label { color: #20a7cf; } } /** * Default form **/ .form .input { position: relative; margin-bottom: 25px; } .form input[type="email"], .form input[type="text"], .form input[type="password"], .form input[type="tel"], .form select, .form textarea { background-color: #fff; border: 1px solid #fecc00; height: 56px; padding: 0 20px; text-align: left; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .form textarea { height: 150px; } .form .submit-row { text-align: center; } /** **************** Layout **************** **/ /** * Buttons **/ .button { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; position: relative; z-index: 1; display: inline-block; background: #fecc00; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 19px 20px; color: #333; cursor: pointer; font-size: 16px; text-align: center; white-space: nowrap; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .button:hover { background-color: rgba(254, 204, 0, 0.5); } } /** * Spoiler toggle button **/ .spoiler-toggle { cursor: pointer; } .spoiler-toggle:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; content: ''; display: inline-block; vertical-align: middle; margin-left: 7px; } .open .spoiler-toggle:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /** * Menu button **/ .menu-button { height: 14px; width: 16px; position: relative; display: block; cursor: pointer; } .menu-button:before { content: ''; display: block; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; background: rgba(255, 255, 255, 0.1); } .menu-button span { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 2px; width: 100%; position: absolute; top: calc(50% - 1px); left: 0; background: #683b46; } .menu-button span:nth-child(1) { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .menu-button span:nth-child(2) { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .menu-button span:nth-child(3) { -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } .menu-button.cross span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .menu-button.cross span:nth-child(2) { width: 0; opacity: 0; } .menu-button.cross span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .menu-button:hover span { background-color: #fecc00; } } /** * Social network links **/ .social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-links a { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .social-links a:hover { opacity: 0.5; } .social-links a:active { opacity: 0.3; } } .header-menu .social-links a { width: 55px !important; padding: 10px; box-sizing: border-box; } .social-links a + a { margin-left: 50px; } /** * Scroll up button **/ .scroll-up-button { height: 74px; width: 74px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: block; background: #20a7cf; } .scroll-up-button.fixed.hidden { opacity: 0; } .scroll-up-button.in-footer { display: none; position: relative; margin: -45px 0 45px; } .scroll-up-button.mobile { display: none; position: relative; margin: 0 auto; } .scroll-up-button.fixed { position: fixed; bottom: 0; right: 0; z-index: 10; } .scroll-up-button:before { width: 7.46px; height: 19px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -127.56px -91.72px no-repeat; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: block; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .scroll-up-button:hover { background-color: #66c7e3; } .scroll-up-button:hover:before { -webkit-animation: upArrow 0.7s; animation: upArrow 0.7s; } } @media (max-width: 1499px) { .scroll-up-button.fixed { display: none; } .scroll-up-button.in-footer { display: block; } } @media (max-width: 1023px) { .scroll-up-button.in-footer { display: none; } .scroll-up-button.mobile { display: block; } } /** * Show-more-link **/ .show-more-link { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; display: inline-block; font-size: 14px; border-bottom: 3px solid #fecc00; white-space: nowrap; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .show-more-link:hover { color: #20a7cf; } } /** * Product label **/ .product-label-container .label { /* файл /bitrix/templates/new_ninel_template/css/common.css */ display: block; float: left; clear: left; background: #f61456; /* Для черной пятницы */ /* background: #000000; */ /* border: 2px solid #f61456; */ /* Для черной пятницы */ color: #fff; font-size: 10px; padding: 2px 5px; } .product-label-container .label.new { background-color: #7b3097; /* Для черной пятницы */ /* border: 2px solid #f61456; */ /* Для черной пятницы */ } .product-label-container .label + .label { margin-top: 2px; } .product-label-container .label.payment { color: #683b46; background-color: #fecc00; } /** * Select2 customization **/ .select2-container { z-index: 100000; } .select2-container--form-select *, .select2-container--sort-select * { outline: none !important; } .select2-container--form-select .mCSB_scrollTools, .select2-container--sort-select .mCSB_scrollTools { right: 5px !important; } .select2-container--form-select .select2-search--dropdown, .select2-container--sort-select .select2-search--dropdown { padding: 0; } .select2-container--form-select .select2-search--dropdown .select2-search__field, .select2-container--sort-select .select2-search--dropdown .select2-search__field { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: none; border-top: 1px solid #fecc00; border-bottom: 1px solid #fecc00; height: 56px; padding: 0 20px; -webkit-appearance: none; -moz-appearance: none; outline: none !important; resize: none; } .select2-container--form-select .select2-search--dropdown .select2-search__field::-ms-clear, .select2-container--sort-select .select2-search--dropdown .select2-search__field::-ms-clear { display: none; } .select2-container--form-select .select2-results__option--highlighted[aria-selected], .select2-container--sort-select .select2-results__option--highlighted[aria-selected] { color: #20a7cf; } .select2-container--form-select .select2-selection--single { background-color: #fff; border: 1px solid #fecc00; -webkit-box-sizing: border-box; box-sizing: border-box; height: 56px; } .select2-container--form-select .select2-selection--single .select2-selection__rendered { line-height: 56px; font-size: 14px; padding: 0 40px 0 20px; } .select2-container--form-select .select2-selection--single .select2-selection__arrow { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -27.72px -115.12px no-repeat; display: block; position: absolute; right: 15px; top: 50%; } .select2-container--form-select.select2-container--open .select2-selection--single .select2-selection__arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .select2-container--form-select .select2-dropdown { background-color: #fff; border: 1px solid #fecc00; border-radius: 0; } .select2-container--form-select .select2-dropdown.select2-dropdown--above { border-bottom: none; } .select2-container--form-select .select2-dropdown.select2-dropdown--below { border-top: none; } .select2-container--form-select .select2-results { max-height: 300px; padding: 10px 0; overflow: auto; } .select2-container--form-select .select2-results__option { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; font-size: 14px; padding: 10px 20px; } /* sort select */ .select2-container--sort-select { width: auto !important; } .select2-container--sort-select .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; } .select2-container--sort-select .select2-selection--single .select2-selection__rendered { color: #333; position: relative; padding-left: 11px; padding-right: 10px; } .select2-container--sort-select .select2-selection--single .select2-selection__arrow { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; display: block; position: absolute; top: calc(50% - 2px); right: 0; } .select2-container--sort-select.select2-container--open .select2-selection--single .select2-selection__arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .select2-container--sort-select .select2-dropdown { position: relative; left: 50%; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e7e5ed; margin-left: -130px; padding: 25px 20px; width: 260px !important; border-radius: 0; } .select2-container--sort-select .select2-dropdown:before { content: ''; position: absolute; left: calc(50% - 4px); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; } .select2-container--sort-select .select2-dropdown.select2-dropdown--above { border-bottom: 3px solid #fecc00; margin-top: -15px; } .select2-container--sort-select .select2-dropdown.select2-dropdown--above:before { bottom: -9px; border-top: 8px solid #fecc00; } .select2-container--sort-select .select2-dropdown.select2-dropdown--below { border-top: 3px solid #fecc00; margin-top: 15px; } .select2-container--sort-select .select2-dropdown.select2-dropdown--below:before { top: -9px; border-bottom: 8px solid #fecc00; } .select2-container--sort-select .select2-results__option { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; padding: 0; font-size: 14px; } .select2-container--sort-select .select2-results__option + .select2-results__option { margin-top: 24px; } /** * mCustomScrollbar customization **/ .mCSB_scrollTools { width: 4px; } .mCSB_scrollTools .mCSB_draggerRail { width: 4px; border-radius: 0; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; border-radius: 0; } .mCS-yellow.mCSB_scrollTools .mCSB_draggerRail { background-color: #e7e5ed; } .mCS-yellow.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fecc00; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #20a7cf; } .mCS-yellow.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fecc00; } .mCS-yellow.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-yellow.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fecc00; } .mCS-blue.mCSB_scrollTools .mCSB_draggerRail { background-color: #e7e5ed; } .mCS-blue.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #20a7cf; } .mCS-blue.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #20a7cf; } .mCS-blue.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-blue.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #20a7cf; } /** * Fancybox customization **/ .fancybox-button { background: transparent; } .fancybox-button svg path { fill: #ccc !important; stroke: #ccc !important; } .fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar { mix-blend-mode: difference; } /** * Footer **/ .footer-widgets { background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/pattern.png?6dbee8e5008426c1c0973eaffa5bf6d3); padding: 30px 0; } .footer-widgets .widget { background: #fff; border: 1px solid #e7e5ed; margin: 20px 0; } .footer-widgets .widget > img { width: 100%; } @media (max-width: 499px) { .footer-widgets { display: none; } } footer { background: #fff; padding: 45px 0; position: relative; z-index: 1; } footer .col { width: 20%; } footer .footer-nav-title { margin-bottom: 20px; font-size: 14px; text-transform: uppercase; } footer .footer-nav-title a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .footer-nav-title a:hover { color: #20a7cf; } } footer .footer-nav { font-size: 14px; color: #999; } footer .footer-nav a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .footer-nav a:hover { color: #20a7cf; } } footer .footer-nav li + li { margin-top: 20px; } footer .contacts-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: end; align-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } footer .phone { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; display: inline-block; margin-bottom: 40px; font-size: 21px; white-space: nowrap; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .phone:hover { color: #20a7cf; } } footer .mail { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; display: inline-block; margin-bottom: 45px; color: #20a7cf; font-size: 13px; text-transform: uppercase; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .mail:hover { opacity: 0.5; } footer .mail:active { opacity: 0.3; } } footer .mobile-nav-col { display: none; border-top: 1px solid #e7e5ed; border-bottom: 1px solid #e7e5ed; width: 100%; } footer .mobile-nav-col + .mobile-nav-col { border-top: none; } footer .mobile-nav-col a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .mobile-nav-col a:hover { color: #20a7cf; } } footer .mobile-nav-col .mobile-nav-title { display: block; padding: 15px 0; font-size: 14px; text-transform: uppercase; } footer .mobile-nav-col .mobile-nav-title.spoiler-title { position: relative; } footer .mobile-nav-col .mobile-nav-title.spoiler-title:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; content: ''; position: absolute; top: calc(50% - 2px); right: 0; } footer .mobile-nav-col.open .spoiler-title:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } footer .mobile-nav-col .footer-nav { padding: 5px 0 15px; -webkit-columns: 2; -moz-columns: 2; columns: 2; } footer hr { border-top: 1px solid #e7e5ed; border-bottom: 0; margin: 45px 10px 45px; width: 100%; } footer .copy-col { color: #999; font-size: 13px; line-height: 22px; width: calc(100% - 301px); } footer .copy-col strong { font-weight: normal; color: #333; } footer .copy-col a { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; color: #20a7cf; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .copy-col a:hover { opacity: 0.5; } footer .copy-col a:active { opacity: 0.3; } } footer .dev-col { text-align: right; width: 300px; } footer .developer { display: inline-block; white-space: nowrap; color: #999; } footer .developer .oxbox { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; color: #333; font-size: 13px; white-space: nowrap; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .developer .oxbox:hover { color: #20a7cf; } } footer .developer .oxbox:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 30px; height: 30px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/oxbox.svg) no-repeat; content: ''; display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); margin-left: 10px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { footer .developer .oxbox:hover:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } @media (max-width: 1023px) { footer { padding: 25px 0 0; } footer .col { margin-bottom: 25px; width: 50%; } footer .nav-col { display: none; } footer .mobile-nav-col { display: block; } footer .contacts-col { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; margin-top: 20px; width: 100%; } footer .phone { font-size: 21px; margin-bottom: 20px; } footer .mail { background-color: #fecc00; margin-bottom: 20px; padding: 10px; color: #333; } footer hr { display: none; } footer .copy-col, footer .dev-col { margin-bottom: 25px; text-align: center; width: 100%; } } @media (max-width: 499px) { footer { border-top: 1px solid #e7e5ed; } } /** * Header **/ header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; height: 100px; background: #fff; border-bottom: 1px solid #e7e5ed; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 2; width: 100%; } header:before { height: 1px; width: 100vw; content: ''; position: absolute; top: 50%; z-index: -1; background: #e7e5ed; } header .content-row { position: relative; z-index: 1; margin-left: 0; margin-right: 0; } header .content-row:before { content: ''; position: absolute; top: 0; right: -20px; bottom: 0; left: -20px; z-index: -1; background: #fff; } header .menu-button { margin-right: 25px; } header .logo { height: 62.56px; display: block; margin-right: 62px; margin-left: -2px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } header .header-nav { position: relative; z-index: 1; -ms-flex-item-align: start; align-self: flex-start; white-space: nowrap; margin-right: auto; } header .header-nav a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; display: block; line-height: 65px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { header .header-nav a:hover { color: #20a7cf; } } header .header-nav li.selected > a { cursor: default; color: #20a7cf; } header .header-nav > ul > li > a { font-size: 16px; } header .header-nav > ul > li > ul { font-size: 14px; } header .header-nav > ul > li > a, header .header-nav > ul > li > ul > li > a { position: relative; } header .header-nav > ul > li > a:before { -webkit-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; height: 3px; width: 0; content: ''; display: block; position: absolute; bottom: -2px; left: 0; z-index: 2; background: #fecc00; } header .header-nav li:hover > a:before, header .header-nav li.selected > a:before { width: 100%; } header .header-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } header .header-nav > ul li:not(:hover) ul { display: none; } header .header-nav > ul { position: relative; } header .header-nav > ul > li:not(:first-child) { padding-left: 31px; } header .header-nav > ul > li:not(:last-child) { padding-right: 31px; } header .header-nav > ul > li > ul { position: absolute; left: 0; top: 100%; width: 100%; } header .header-nav > ul > li > ul > li:not(:first-child) { padding-left: 16px; } header .header-nav > ul > li > ul > li:not(:last-child) { padding-right: 16px; } header .header-nav > ul > li > ul { position: absolute; left: 0; top: 100%; } header .header-nav > ul > li > ul li:before { content: ''; position: absolute; top: 0; right: -100vw; bottom: 0; left: -100vw; z-index: -1; background: #fff; } header .header-nav > ul > li > ul > li > ul { display: block !important; padding-bottom: 20px; } header .header-nav > ul > li > ul > li > ul > li { padding-bottom: 20px; color: #999; } header .header-nav > ul > li > ul > li > ul > li > a { line-height: normal; } header .store-link { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; color: #683b46; font-size: 16px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { header .store-link:hover { opacity: 0.5; } header .store-link:active { opacity: 0.3; } } header .city-link { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; font-size: 14px; white-space: nowrap; margin-left: 52px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { header .city-link:hover { opacity: 0.5; } header .city-link:active { opacity: 0.3; } } header .city-link .name { border-bottom: 3px solid #fecc00; } header .search-form-container { margin-left: 52px; } /** * Header mobile menu **/ .header-menu { -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; position: fixed; top: 55px; right: 0; bottom: 0; left: 0; z-index: 100; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .header-menu .scroll-container { height: calc(100% - 55px); width: 100%; overflow: auto; } .header-menu .tabs { border-bottom: 1px solid #e7e5ed; margin-bottom: 25px; } .header-menu .bottom-row { height: 55px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; border: 1px solid #e7e5ed; } .header-menu .bottom-row .col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; padding: 0 20px; width: 100%; } .header-menu .bottom-row .col + .col { border-left: 1px solid #e7e5ed; } .header-menu .bottom-row .col.social-links-col { padding: 0; height: 100%; -ms-flex-negative: 0; flex-shrink: 0; width: 150px; } .header-menu .phone { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; color: #683b46; font-size: 16px; white-space: nowrap; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .header-menu .phone:hover { opacity: 0.5; } .header-menu .phone:active { opacity: 0.3; } } .header-menu .social-links { height: 100%; width: 100%; } .header-menu .social-links a { height: 100%; width: 100%; margin: 0 !important; } .header-menu .social-links a + a { border-left: 1px solid #e7e5ed; } .header-menu .scroll-container, .header-menu .bottom-row { -webkit-transition: opacity 0.8s ease; -o-transition: opacity 0.8s ease; transition: opacity 0.8s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .header-menu .nav { -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .header-menu:not(.open) { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .header-menu:not(.open) .scroll-container, .header-menu:not(.open) .bottom-row { opacity: 0; } .header-menu:not(.open) .nav { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); opacity: 0; } @media (max-width: 499px) { .header-menu .social-links a + a { margin-left: 20px; } } /** * Header desktop view **/ @media (min-width: 1280px) { header .menu-container, header .store-link { display: none; } } /** * Header mobile view **/ @media (max-width: 1299px) { header .header-nav > ul > li:not(:last-child) { padding-right: 25px; } } @media (max-width: 1279px) { header { height: 55px; position: fixed; top: 0; left: 0; right: 0; } header .tabs-block { display: block; } header .content-row { -ms-flex-wrap: wrap; flex-wrap: wrap; } header .logo { height: 42.56px; margin-right: auto; } header .header-nav { display: none; } header .city-link { display: none; } header .store-link { display: block; } header .header-content > .social-links { display: none !important; } } /** * Search form in header **/ .header-search-form { position: relative; z-index: 2; } .header-search-form label { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, 0.01); } .header-search-form input[type="text"] { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 28px; width: 0; position: absolute; top: 0; bottom: 0; right: 50%; background: #fff; border: 1px solid #e7e5ed; border-radius: 14px; margin: auto; font-size: 14px; } .header-search-form input[type="text"]:focus { border-color: #fecc00; } .header-search-form input[type="text"]:focus + label + .submit { border-color: #fecc00; } .header-search-form:hover input[type="text"], .header-search-form input[type="text"]:focus { padding: 0 20px; width: 200px; } .header-search-form:hover label, .header-search-form input[type="text"]:focus + label { opacity: 0; z-index: -1; } .header-search-form .submit { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 35px; width: 35px; position: relative; background: #fff; border: 1px solid #e7e5ed; border-radius: 50%; cursor: pointer; } .header-search-form .submit:before { width: 27.56px; height: 27.72px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -127.56px -36px no-repeat; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .header-search-form .submit:hover { background-color: #fecc00; border-color: #fecc00; } } /** * Text content **/ .text-content { font: normal 16px/1.625 'Ubuntu', sans-serif; } .text-content h1 { color: #333; font-weight: 300; font-size: 2.5em; text-align: center; margin-bottom: 0.9em; } .text-content h2, .text-content h3, .text-content h4 { font-size: 1em; color: #333; margin-bottom: 0.7em; } .text-content p { margin-bottom: 1.6em; } .text-content table { border-collapse: collapse; margin-bottom: 2em; width: 100%; } .text-content table th, .text-content table td { border: 1px solid #e7e5ed; font-size: 16px; padding: 25px 35px; } .text-content table th { color: #999; font-weight: normal; text-align: left; } .text-content table td { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; color: #333; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .text-content table tr:hover td { color: #999; } } .text-content ul > li, .text-content ol > li { position: relative; margin-bottom: 1.7em; padding-left: 50px; } .text-content ul > li:before { height: 2px; width: 30px; content: ''; display: block; position: absolute; left: 0; top: 0.7em; background: #fecc00; } .text-content ol { counter-reset: listCounter; } .text-content ol > li:before { counter-increment: listCounter; content: counter(listCounter) '.'; position: absolute; top: 0; left: 0; color: #fecc00; } @media (max-width: 767px) { .text-content h1 { font-size: 1.3125em; } } .action-text-content { color: #999; } .action-text-content strong { font-weight: normal; color: #333; } /** * Text in page bottom with spoiler **/ .bottom-text .text-content-container { position: relative; margin-bottom: 10px; } .bottom-text .text-content-container:after { height: 100%; width: 100%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ''; z-index: 2; position: absolute; bottom: 0; left: 0; background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(rgba(255, 255, 255, 0))); background: -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0)); background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0)); } .bottom-text .text-content { font: normal 13px/1.61538462 'Ubuntu', sans-serif; color: #999; } .bottom-text .text-content h1, .bottom-text .text-content h2, .bottom-text .text-content h3, .bottom-text .text-content h4 { color: #333; font-weight: 500; font-size: 14px; margin-bottom: 10px; } .bottom-text .text-content p { margin-bottom: 18px; } .bottom-text .spoiler-open, .bottom-text .spoiler-close { display: inline-block; color: #20a7cf; font-size: 13px; text-transform: uppercase; } .bottom-text .spoiler-close { display: none; } .bottom-text.open .text-content-container:after { height: 0; opacity: 0; } .bottom-text.open .spoiler-close { display: inline-block; } .bottom-text.open .spoiler-open { display: none; } /** * Responsive tables **/ .text-content .stacktable.large-only { display: table; } .text-content .stacktable.small-only { display: none; } .text-content .st-key { width: 50%; text-align: right; } .text-content .st-val { width: 50%; } @media (max-width: 767px) { .text-content .stacktable.small-only { display: none; } } /** **************** Components **************** **/ /** * Breadcrumbs **/ .breadcrumbs { margin-bottom: 30px; color: #999; font-size: 12px; line-height: 14px; } .breadcrumbs a { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; color: #20a7cf; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .breadcrumbs a:hover { opacity: 0.5; } .breadcrumbs a:active { opacity: 0.3; } } .breadcrumbs li { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; } .breadcrumbs li:not(:last-child) { margin-right: 14px; } .breadcrumbs li:not(:last-child):after { height: 2px; width: 2px; display: block; content: ''; position: absolute; top: 7px; right: -7px; background: #fecc00; margin: -1px; } /** * Product card **/ .product-card { position: relative; z-index: 1; background: #fff; margin: 7px auto; } .product-card:before { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ''; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; z-index: -1; border: 1px solid #e7e5ed; opacity: 0; } .product-card > a { display: block; } .product-card .product-image-container { position: relative; z-index: 1; overflow: hidden; margin-bottom: 15px; } .product-card .product-image-container img { display: block; position: relative; z-index: 1; width: 100%; } .product-card .product-image { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: no-repeat 50% 50%; background-size: cover; } .product-card .product-image.hover { opacity: 0; z-index: 3; } .product-card .product-label-container { position: absolute; left: 0; bottom: 0; z-index: 10; } .product-card .price-block { margin-bottom: 12px; } .product-card .price { position: relative; font-size: 16px; } .product-card .price.old { color: #999; font-size: 14px; } .product-card .price.old:after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #f61456; } .product-card .price + .price { margin-left: 10px; } .product-card .size { display: -webkit-box; display: -ms-flexbox; display: flex; color: #999; font-size: 12px; font-weight: 300; } .product-card .size li:not(:last-child) { padding-right: 5px; margin-right: 5px; border-right: 1px solid #e7e5ed; } .product-card:hover .product-image-container .product-image.hover { opacity: 1; } .main-slider .pic-container img { max-width: 100%; height: auto; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .product-card .size { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; opacity: 0; } .product-card:hover:before { opacity: 1; } .product-card:hover .size { opacity: 1; } } /** * Article card **/ .article-card { display: block; position: relative; z-index: 1; height: 240px; overflow: hidden; } .article-card .image { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .article-card .image:before { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; content: ''; position: absolute; top: 0; right: 0; bottom: -100%; left: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #683b46), to(transparent)); background: -o-linear-gradient(bottom, #683b46 50%, transparent); background: linear-gradient(to top, #683b46 50%, transparent); } .article-card .card-content { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; position: absolute; right: 35px; bottom: 30px; left: 35px; color: #fff; } .article-card .title { position: relative; font: 500 21px/26px 'Ubuntu', sans-serif; padding-right: 70px; } .article-card .title .icon { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; height: 50px; width: 50px; position: absolute; right: 0; top: calc(50% - 25px); background: #fecc00; border-radius: 50%; } .article-card .title .icon:before { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 0; width: 0; content: ''; position: absolute; top: calc(50% - 10px); left: calc(50% - 5px); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .article-card:hover .image { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .article-card:hover .image:before { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .article-card:hover .card-content { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .article-card:hover .title .icon { background-color: #fff; } .article-card:hover .title .icon:before { border-left-color: #fecc00; } } @media (max-width: 1023px) { .article-card .card-content { right: 20px; left: 20px; } .article-card .title { font-size: 18px; } } /** * Action card **/ .action-card { display: block; position: relative; padding: 0 25px; } .action-card .image-container { position: relative; overflow: hidden; margin: 0 -25px 30px; } .action-card .image-container img { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; display: block; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .action-card .title { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; font-size: 40px; font-weight: 300; margin-bottom: 17px; } .action-card .title strong { font-weight: normal; } .action-card .text { font-size: 16px; line-height: 26px; margin-bottom: 17px; } .action-card .date { color: #683b46; font-size: 16px; margin-top: 30px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .action-card:hover .image-container img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .action-card:hover .title { color: #20a7cf; } } @media (max-width: 1023px) { .action-card .image-container { margin-bottom: 25px; } .action-card .title { font-size: 21px; margin-bottom: 8px; } .action-card .text { font-size: 14px; margin-bottom: 8px; } .action-card .date { font-size: 14px; margin-top: 20px; } } @media (max-width: 499px) { .action-card { padding: 0; } .action-card .image-container { margin-left: 0; margin-right: 0; } } /** * Common slider elements **/ .slick-slider, .slick-slider * { outline: none !important; } /* Pagination */ .slick-dots { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -7px; } .slick-dots li { height: 20px; width: 20px; position: relative; } .slick-dots li:before { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 6px; width: 6px; content: ''; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #fff; background-clip: content-box; border: 2px solid transparent; border-radius: 50%; margin: auto; } .slick-dots li button { display: none; } .slick-dots li.slick-active:before { background-color: transparent; border-color: #fff; } .slick-dots li:not(.slick-active) { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .slick-dots li:not(.slick-active):hover { opacity: 0.5; } .slick-dots li:not(.slick-active):active { opacity: 0.3; } } /* Arrows */ .slick-arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } .slick-arrow { height: 12px; width: 35px; position: relative; -webkit-appearance: none; -moz-appearance: none; outline: none !important; resize: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; background: none; border: none; color: transparent; font-size: 0; cursor: pointer; } .slick-arrow:before, .slick-arrow:after { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; height: 2px; width: 8px; content: ''; display: block; position: absolute; top: calc(50% - 1px); background: #999; } .slick-arrow:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .slick-arrow:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .slick-arrow:hover:before, .slick-arrow:hover:after { background-color: #20a7cf; } } .slick-prev:before, .slick-prev:after { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; left: 12px; } .slick-next { border-left: 1px solid #e7e5ed; } .slick-next:before, .slick-next:after { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; right: 12px; } /* Slider navigation */ .slick-nav { position: absolute; left: 50%; bottom: 0; z-index: 100; background: rgba(255, 255, 255, 0.9); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; height: 42px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .slick-nav .slick-prev { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .slick-nav .slick-next { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; border-left: none; } .slick-nav .slick-dots { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .slick-nav .slick-dots li:before { background-color: #999; } .slick-nav .slick-dots li.slick-active:before { background-color: transparent; border-color: #999; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .slick-nav .slick-dots li:not(.slick-active):hover { opacity: 1; } .slick-nav .slick-dots li:not(.slick-active):hover:before { background-color: #20a7cf; } } /** * Page caption **/ .page-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 28px; } .page-caption h1, .page-caption .h1, .page-caption .breadcrumbs { margin-bottom: 0; } .page-caption .breadcrumbs { margin-left: auto; margin-top: 12px; } @media (max-width: 767px) { .page-caption { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -30px; } .page-caption h1:not(.visible-desktop) + .breadcrumbs, .page-caption .h1:not(.visible-desktop) + .breadcrumbs { margin-bottom: 25px; } .page-caption .breadcrumbs { -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: -20px; margin-right: -20px; padding-left: 0; padding-right: 0; width: calc(100% + 20px * 2); -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; border-bottom: 1px solid #e7e5ed; margin-top: 0; color: #333; font-size: 18px; text-align: center; } .page-caption .breadcrumbs li:not(:nth-last-child(-n+2)), .page-caption .breadcrumbs li:last-child { /* display: none !important; */ } .page-caption .breadcrumbs li:nth-last-child(-n+2) { position: relative; width: 100%; } .page-caption .breadcrumbs li:nth-last-child(-n+2) a { display: block; padding: 15px; color: #333; } .page-caption .breadcrumbs li:nth-last-child(-n+2):after { display: none; } .page-caption .breadcrumbs li:nth-last-child(-n+2):before { width: 30px; height: 20px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db); content: ''; display: block; position: absolute; top: 35%; left: 20px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); background-size: 100% 100%; } } /** * Product slider **/ .product-slider-block { margin-bottom: 40px; position: relative; } .product-slider-block .block-title { font: 300 21px 'Ubuntu', sans-serif; margin-right: 85px; margin-bottom: 20px; } .product-slider-block .product-slider { position: relative; margin: 0 -10px; padding: 0 10px; overflow: hidden; } .product-slider-block .swiper-arrows { position: absolute; top: 10px; right: 0; } @media (max-width: 1299px) { .product-slider-block .product-slider { overflow: visible; padding: 0 50px; margin: 0; } } /** * Article list **/ .article-list .list-title { font: 300 21px 'Ubuntu', sans-serif; margin-bottom: 25px; } .article-list .article-card { margin-bottom: 20px; } /** * Article list **/ .action-list .action-card { margin-bottom: 73px; } @media (max-width: 1023px) { .action-list .action-card { margin-bottom: 50px; } } /** * Tabs block **/ .tabs-block { position: relative; } .tabs-block .tabs-nav { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #e7e5ed; } .tabs-block .tabs-nav-item { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-preferred-size: 100%; flex-basis: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 3px solid transparent; height: 56px; padding: 18px; color: #683b46; font-size: 16px; } .tabs-block .tabs-nav-item + .tabs-nav-item { border-left: 1px solid #e7e5ed; } .tabs-block .tabs-nav-item.selected { border-bottom-color: #fecc00; } .tabs-block .nav { font-size: 14px; color: #683b46; padding: 0 20px 10px; } .tabs-block .nav a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .tabs-block .nav a:hover { color: #20a7cf; } } .tabs-block .nav .selected > a, .tabs-block .nav .selected > span, .tabs-block .nav .selected { color: #20a7cf; cursor: default; } .tabs-block .nav a, .tabs-block .nav span { display: inline-block; margin-bottom: 24px; } .tabs-block .nav ul { color: #333; padding-left: 20px; } .tabs-block .nav .title { position: relative; } .tabs-block .nav .title:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; content: ''; position: absolute; top: calc(50% - 2px); right: 0; } .tabs-block .nav .open .title:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .tabs-block .tab { padding-top: 25px; } .tabs-block .tab .nav { color: #333; } /** * Modal **/ .modal-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; display: none; } .modal-container .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(51, 51, 51, 0.4); } .modal { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; background: #fff; max-width: 500px; margin: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .modal:not(.open) { -webkit-transform: scale(0.001); -ms-transform: scale(0.001); transform: scale(0.001); opacity: 0.01; } .modal .modal-content-title { height: 55px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #e7e5ed; padding: 0 20px; color: #683b46; font-size: 16px; } .modal .modal-content-title .icon-back { width: 9px; height: 13px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -2px -115.12px no-repeat; display: block; } .modal .modal-content-title .icon-close { height: 15px; width: 15px; display: block; position: relative; } .modal .modal-content-title .icon-close:before, .modal .modal-content-title .icon-close:after { height: 2px; width: 20px; content: ''; display: block; position: absolute; top: 50%; left: 50%; background: #683b46; margin: -1px -10px; } .modal .modal-content-title .icon-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modal .modal-content-title .icon-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .modal .scroll-container { max-height: calc(100vh - 55px - 40px); max-height: calc(var(--vh, 1vh) * 100 - 55px - 40px); overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px 20px; font-size: 14px; } @media (max-width: 767px) { .modal-container .overlay { top: 0; } .modal { top: auto; bottom: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .modal .scroll-container { max-height: calc(100vh - 55px); max-height: calc(var(--vh, 1vh) * 100 - 55px); } } .modal .value-list { margin: -15px 0; } .modal .value-list li { padding: 15px 0; } .modal .value-list li .next-link { position: relative; display: block; margin: -15px 0; padding: 15px 0; } .modal .value-list li .next-link:after { width: 7px; height: 5px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; content: ''; position: absolute; right: 0; top: calc(50% - 2px); display: block; } .modal .value-list li .link { display: block; margin: -15px 0; padding: 15px 0; width: 100%; } .modal .value-list li .link.selected { color: #20a7cf; } .modal .value-list li + li { border-top: 1px solid #e7e5ed; } .modal .text-content table tr:first-child th, .modal .text-content table tr:first-child td { border-top: none; } .modal .text-content table tr:last-child th, .modal .text-content table tr:last-child td { border-bottom: none; } .modal .text-content table th:first-child, .modal .text-content table td:first-child { border-left: none; } .modal .text-content table th:last-child, .modal .text-content table td:last-child { border-right: none; } .modal .text-content table th { color: #683b46; } .modal .text-content table th, .modal .text-content table td { text-align: center; } .modal .link-order { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; opacity: 0.99; font-size: 14px; border: 0; cursor: default; } .modal .link-order.js-modal-open { cursor: pointer; border-bottom: 3px solid #e7e5ed; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .modal .link-order.js-modal-open:hover { opacity: 0.5; } .modal .link-order.js-modal-open:active { opacity: 0.3; } } .modal .link-order-size { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; border-bottom: 3px solid #fecc00; font-size: 14px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .modal .link-order-size:hover { opacity: 0.5; } .modal .link-order-size:active { opacity: 0.3; } } .catalog-filter-modal .scroll-container { max-height: calc(100vh - 310px); max-height: calc(var(--vh, 1vh) * 100 - 310px); } .catalog-filter-modal .row { height: 55px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #e7e5ed; } .catalog-filter-modal .row .col { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; } .catalog-filter-modal .row .col + .col { border-left: 1px solid #e7e5ed; } .catalog-filter-modal .filter-reset, .catalog-filter-modal .filter-apply { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; font-size: 14px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .catalog-filter-modal .filter-reset:hover, .catalog-filter-modal .filter-apply:hover { opacity: 0.5; } .catalog-filter-modal .filter-reset:active, .catalog-filter-modal .filter-apply:active { opacity: 0.3; } } .catalog-filter-modal .filter-reset { border-bottom: 3px solid #e7e5ed; } .catalog-filter-modal .filter-apply { border: 0; border-bottom: 3px solid #fecc00; padding: 0; font-family: 'Ubuntu', sans-serif; background: #fff; } .product-buy-modal .value-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product-buy-modal .value-list .button { margin-left: 20px; width: 120px; } .product-buy-modal .comment, .product-buy-modal .shop-info { margin: 30px 0; } .product-buy-modal .comment:first-child, .product-buy-modal .shop-info:first-child { margin-top: 15px; } .product-buy-modal .comment:last-child, .product-buy-modal .shop-info:last-child { margin-bottom: 15px; } .product-buy-modal .comment + .comment, .product-buy-modal .shop-info + .comment, .product-buy-modal .comment + .shop-info, .product-buy-modal .shop-info + .shop-info { margin-top: 0; } .product-buy-modal .comment { color: #999; font-size: 12px; text-align: center; } .product-buy-modal .shop-info { text-align: center; } .product-buy-modal .shop-info strong { font-weight: normal; color: #683b46; } .product-buy-modal .shop-info p { margin-bottom: 10px; } /** * Pagination **/ .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; margin-bottom: 60px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .pagination a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .pagination a:hover { color: #20a7cf; } } .pagination .pagination-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #e7e5ed; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 65px; padding: 20px 20px; text-align: center; white-space: nowrap; } .pagination .pagination-item + .pagination-item { margin-left: -1px; } .pagination .pagination-item:after { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: #fecc00; opacity: 0; } .pagination .pagination-item.load_more { color: #20a7cf; cursor: pointer; } .pagination .pagination-item.current { color: #20a7cf; cursor: default; } .pagination .pagination-item.current:after { opacity: 1; } .pagination .pagination-item.show-more { color: #20a7cf; padding-left: 48px; padding-right: 48px; -ms-flex-negative: 0; flex-shrink: 0; } .pagination .pagination-item.page { border-left: none; border-right: none; min-width: 70px; } .pagination .pagination-item.to-begin:before, .pagination .pagination-item.prev:before, .pagination .pagination-item.next:before, .pagination .pagination-item.to-end:before { content: ''; display: inline-block; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .pagination .pagination-item.to-begin:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: 90deg; } .pagination .pagination-item.prev:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: 90deg; } .pagination .pagination-item.next:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: -90deg; } .pagination .pagination-item.to-end:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: -90deg; } @media (max-width: 1299px) { .pagination .pagination-item { padding: 15px 20px !important; min-width: 0; } .pagination .pagination-item.page:not(.current) { display: none; } } @media (max-width: 499px) { .pagination { -ms-flex-wrap: wrap; flex-wrap: wrap; } .pagination .pagination-item:not(.load_more) { -ms-flex-preferred-size: 20%; flex-basis: 20%; min-width: auto; width: 20%; margin-bottom: -1px; } .pagination .pagination-item.load_more { margin-bottom: 20px; width: calc(100% - 5px); } } /** **************** Pages **************** **/ /** * Main page **/ @media (min-width: 1300px) { .main-page header { border-bottom: none; } } .main-page main { padding-top: 0; } @media (max-width: 1299px) { .main-page main { padding-top: 55px; } } .main-page .categories-tabs-block { -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: -20px; margin-right: -20px; padding-left: 0; padding-right: 0; width: calc(100% + 20px * 2); } .main-page .categories-tabs-block .tabs-nav-item { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 1300px) { .main-page .categories-tabs-block { display: none; } } /** * Promo slider on main page **/ .promo-slider { background: #333; color: #fff; margin-bottom: 40px; } .promo-slider:not(.slick-initialized) { visibility: hidden; } .promo-slider .slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; height: 420px; overflow: hidden; padding-bottom: 60px; } .promo-slider .slide.banner-slide .image { background: #fecc00; } .promo-slider .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .promo-slider .image img { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; right: 0; bottom: 0; max-height: 100%; max-width: 80%; } .promo-slider .text-container { height: 100%; width: 48%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 35px 50px; } .promo-slider .title { font: 300 48px/1.14583333 'Ubuntu', sans-serif; margin-bottom: 35px; } .promo-slider .waves { overflow: hidden; max-width: 332px; } .promo-slider .waves:before { height: 32px; width: 1000px; content: ''; display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' width='50' height='32'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='matrix(.58824 0 0 1.20906 1 .887)' gradientUnits='userSpaceOnUse' y2='12.5' x2='510' y1='12.5' id='a'%3E%3Cstop stop-color='%230ff' offset='0'/%3E%3Cstop stop-color='%2329abe2' offset='.5'/%3E%3Cstop stop-color='%230ff' offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 1.491c12.499 0 12.499 29.018 25 29.018S37.498 1.49 50 1.49' stroke-miterlimit='10' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0; -webkit-animation: moveWave 10s linear infinite; animation: moveWave 10s linear infinite; } .promo-slider .date { font-size: 16px; margin-top: auto; } .promo-slider .slick-dots { position: absolute; left: 50px; bottom: 35px; } @media (min-width: 768px) { .promo-slider .slide:not(.slick-current) .image img { opacity: 0; -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); } } @media (max-width: 1299px) { .promo-slider .text-container { padding: 25px 20px; } .promo-slider .title { font-size: 34px; } .promo-slider .slick-dots { left: 20px; bottom: 20px; } } @media (max-width: 1023px) { .promo-slider .waves { display: none; } .promo-slider .text-container { height: auto; width: 100%; } .promo-slider .title { margin-bottom: 8px; } .promo-slider .image img { max-width: 100%; } } @media (max-width: 767px) { .promo-slider { -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: -20px; margin-right: -20px; padding-left: 0; padding-right: 0; width: calc(100% + 20px * 2); background: none; color: #333; } .promo-slider .slide { height: auto; padding: 0; } .promo-slider .image { height: 295px; position: relative; } .promo-slider .image img { max-width: none; } .promo-slider .title { font-size: 21px; } .promo-slider .slick-dots { left: 0; right: 0; bottom: calc(100% - 295px + 10px); margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /** * Promo banner on main page **/ .promo-banner { display: block; position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; height: 420px; margin-bottom: 40px; overflow: hidden; } .promo-banner .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); background-color: #fecc00; } .promo-banner .image img { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; right: 0; bottom: 0; max-height: 100%; } .promo-banner .text-container { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; font: 300 36px/1.11111111 'Ubuntu', sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 35px 50px; -webkit-transform: translateZ(0); transform: translateZ(0); } .promo-banner .text-container strong { font-size: 48px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .promo-banner:hover .image img { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } .promo-banner:hover .text-container { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } @media (max-width: 1299px) { .promo-banner .text-container { padding: 25px 20px; font-size: 21px; } .promo-banner .text-container strong { font-size: 34px; } } @media (max-width: 767px) { .promo-banner { display: none; } } /** * Site sections on main page **/ .site-section-block { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: end; align-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 275px; background: 50% 50% no-repeat #fff; background-size: cover; margin-bottom: 40px; } .site-section-block .image { position: absolute; top: 0; right: -15px; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .site-section-block .title { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; background: #fff; margin: 0 25px -20px; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 20px 35px; font-size: 21px; line-height: 1; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .site-section-block:hover .title { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } @media (max-width: 767px) { .site-section-block { height: 225px; } .site-section-block .title { font-size: 16px; } } /** * Actions slider on main page **/ .action-slider { margin-bottom: 40px; } .action-slider .slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-line-pack: end; align-content: flex-end; position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; height: 590px; padding-bottom: 40px; overflow: hidden; } .action-slider .slide .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); background: 50% 50% no-repeat; background-size: cover; } .action-slider .slide .text-container { background: #f3f4f8; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 235px; max-width: 440px; padding: 30px 38px; width: 100%; } .action-slider .slide .title { font: normal 26px/1.35714286 'Ubuntu', sans-serif; margin-bottom: 35px; } .action-slider .slide .text { color: #999; font-weight: 300; font-size: 19px; } .main-page .action-slider .slide .text { line-height: 31px; } .action-slider .slick-dots { position: absolute; right: 35px; bottom: 35px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) and (min-width: 768px) { .action-slider:hover .image { -webkit-transform: scale(1.02) rotate(0.01deg); -ms-transform: scale(1.02) rotate(0.01deg); transform: scale(1.02) rotate(0.01deg); } } @media (min-width: 768px) { .action-slider .slide .text-container { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .action-slider .slide:not(.slick-current) .text-container { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } @media (max-width: 767px) { .action-slider .slide { display: block; height: auto; } .action-slider .slide .image { height: 225px; width: 100%; position: relative; margin-bottom: 25px; } .action-slider .slide .text-container { padding: 0; min-height: auto; max-width: none; } .action-slider .slide .title { font-size: 21px; margin-bottom: 8px; } .action-slider .slide .text { font-size: 14px; } .action-slider .slick-dots { left: 0; right: 0; bottom: calc(100% - 225px + 10px); margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /** * Articles slider on main page **/ .article-slider { margin-bottom: 40px; } .article-slider .slide { position: relative; z-index: 1; height: 453px; overflow: hidden; } .article-slider .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background-repeat: no-repeat; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .article-slider .text-container { background: #fecc00; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; max-width: 100%; width: 100%; position: absolute; bottom: 0; opacity: 0.95; } .article-slider .title { font: normal 26px/1.35714286 'Ubuntu', sans-serif; font-weight: 100; padding: 30px 40px 30px; display: block; } .article-slider .category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; background: #683b46; padding: 15px 40px; font-size: 18px; } .article-slider .category:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 19px; height: 7.44px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -86.56px -102.56px no-repeat; content: ''; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .article-slider .slick-dots { position: absolute; left: 35px; top: 35px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) and (min-width: 768px) { .article-slider:hover .image { -webkit-transform: scale(1.02) rotate(0.01deg); -ms-transform: scale(1.02) rotate(0.01deg); transform: scale(1.02) rotate(0.01deg); } .article-slider:hover .category:after { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } @media (min-width: 768px) { .article-slider .slide .text-container, .article-slider .slide .title { transition: opacity, -webkit-transform 0.3s ease; -webkit-transition: opacity, -webkit-transform 0.3s ease; -o-transition: opacity, transform 0.3s ease; transition: opacity, transform 0.3s ease; transition: opacity, transform 0.3s ease, -webkit-transform 0.3s ease; } .article-slider .slide .title { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; } .article-slider .slide:not(.slick-current) .text-container, .article-slider .slide:not(.slick-current) .title { opacity: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } } @media (max-width: 767px) { .article-slider .slide { height: auto; } .article-slider .image { position: relative; height: 232px; } .article-slider .text-container { margin: 0; max-width: 100%; position: relative; } .article-slider .title { font-size: 21px; padding: 20px; } .article-slider .category { padding: 20px; } .article-slider .slick-dots { left: 0; right: 0; top: auto; bottom: calc(100% - 232px + 10px); margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /** * Card block on main page **/ .card-block { position: relative; z-index: 1; height: 453px; padding: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; } .card-block .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; background: no-repeat 50% 50%; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); overflow: visible; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/card-bg.png) 50% 50% no-repeat #20a7cf; background-size: 100% 100%; } .card-block .image img { position: absolute; top: -15px; right: -15px; max-width: 90%; max-height: 100%; } .card-block .title { font: normal 48px/1.14583333 'Ubuntu', sans-serif; margin-bottom: 30px; } .card-block .text { font: normal 18px/1.55555556 'Ubuntu', sans-serif; } .card-block .title, .card-block .text.top { max-width: 230px; width: 50%; } .card-block .text.top { height: 140px; margin-bottom: 10px; overflow: hidden; } .card-block .card-form { margin-bottom: 12px; } .card-block .card-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card-block .card-form input[type="text"] { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; background: none; border: none; color: #66c7e3; font: 500 38px 'Ubuntu', sans-serif; letter-spacing: 0.2em; margin-right: 8px; width: 225px; } .card-block .card-form input[type="text"]::-webkit-input-placeholder { color: #66c7e3; } .card-block .card-form input[type="text"]:-ms-input-placeholder { color: #66c7e3; } .card-block .card-form input[type="text"]::-moz-placeholder { color: #66c7e3; } .card-block .card-form input[type="text"]::-ms-input-placeholder { color: #66c7e3; } .card-block .card-form input[type="text"]::placeholder { color: #66c7e3; } .card-block .card-form input[type="text"]:focus { color: #fff; } .card-block .card-form button[type="submit"] { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; width: 23px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.png?dd6f6d74107f7b15c6bf85a79e76de93) -375px 0px no-repeat; border: none; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .card-block .card-form button[type="submit"]:hover { opacity: 0.5; } .card-block .card-form button[type="submit"]:active { opacity: 0.3; } } @media (max-width: 767px) { .card-block { height: auto; padding: 0; margin-bottom: 60px; } .card-block .image { position: relative; height: 230px; margin: 0 0 25px; } .card-block .title { position: absolute; top: 20px; left: 20px; width: 50%; font-size: 28px; } .card-block .text { color: #333; } .card-block .text.top { max-width: none; height: auto; width: 100%; } .card-block .card-form input[type="text"]:focus { color: #20a7cf; } } /** * Catalog side navigation **/ .catalog-nav { margin-bottom: 80px; } .catalog-nav a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .catalog-nav a:hover { color: #20a7cf; } } .catalog-nav a.active, .catalog-nav .active > a, .catalog-nav .active > span { color: #20a7cf; cursor: default; } .catalog-nav > li { -webkit-column-break-inside: avoid; page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } .catalog-nav > li + li { margin-top: 80px; } .catalog-nav > li > a, .catalog-nav > li > span { font-weight: 500; font-size: 18px; } .catalog-nav > li > ul { margin-top: 30px; font-size: 14px; } .catalog-nav > li > ul > li { color: #999; } .catalog-nav > li > ul > li + li { margin-top: 24px; } .catalog-nav > li > ul > li > a, .catalog-nav > li > ul > li > span { color: #333; margin-right: 5px; } .catalog-nav > li > ul > li > ul { margin-top: 23px; margin-left: 20px; } .catalog-nav > li > ul > li > ul > li + li { margin-top: 24px; } .catalog-list-categories-nav { padding: 0 0 30px; color: #999; font-size: 14px; } .catalog-list-categories-nav li { border-bottom: 1px solid #e7e5ed; border-top: 1px solid #e7e5ed; padding: 10px; } .catalog-list-categories-nav li + li { border-top: none; } .catalog-list-categories-nav a { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .catalog-list-categories-nav a:hover { color: #20a7cf; } } /** * Product list **/ .product-list-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-line-pack: end; align-content: flex-end; margin-bottom: 22px; } .product-list-caption .product-list-title, .product-list-caption .h1, .product-list-caption .h1 { margin-bottom: 0; } .product-list-title { margin-bottom: 22px; font-weight: 500; font-size: 18px; color: #683b46; } .product-list .product-card { margin-bottom: 58px; } @media (max-width: 499px) { .product-list { margin-bottom: 40px; } .product-list .grid-row { margin-left: -20px; margin-right: -20px; } .product-list .product-card { margin: 0 0 20px; } .product-list .product-card .product-image-container { margin-left: -9px; margin-right: -9px; } } /** * Desktop filter and sort **/ .catalog-filter-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 15px -10px; } .catalog-filter-container .filter-col, .catalog-filter-container .sort-col { margin: 15px 0; padding: 0 10px; } /* Catalog filter */ .catalog-filter, .catalog-sort { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; color: #999; font-size: 14px; } .catalog-filter .item, .catalog-sort .item { color: #333; position: relative; margin: -15px 0; padding: 15px 11px; } .catalog-filter .item:hover .item-content, .catalog-sort .item:hover .item-content { display: block; } .catalog-filter .item .item-title, .catalog-sort .item .item-title { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; position: relative; display: inline-block; cursor: pointer; font-size: 14px; white-space: nowrap; } .catalog-filter .item .item-title:after, .catalog-sort .item .item-title:after { width: 17px; height: 14px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db); content: ''; display: block; position: absolute; top: calc(50% - 7px); right: -15px; background-size: 100% 100%; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .catalog-filter .item .item-title:hover, .catalog-sort .item .item-title:hover { color: #20a7cf; } } .catalog-filter .item .item-content, .catalog-sort .item .item-content { display: none; position: absolute; top: 100%; left: calc(50% - 130px); z-index: 100; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e7e5ed; border-top: 3px solid #fecc00; padding: 25px 20px; width: 260px; } .catalog-filter .item .item-content:before, .catalog-sort .item .item-content:before { content: ''; position: absolute; top: -9px; left: calc(50% - 4px); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fecc00; } .catalog-filter .item .scroll-container, .catalog-sort .item .scroll-container { max-height: 180px; overflow: hidden; } .catalog-filter .item .value-list li + li, .catalog-sort .item .value-list li + li { margin-top: 24px; } .catalog-filter .item .submit-row, .catalog-sort .item .submit-row { border-top: 1px solid #e7e5ed; margin-top: 25px; padding-top: 20px; } .catalog-filter .item .submit-button, .catalog-sort .item .submit-button { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; border: none; background: none; display: inline-block; margin: 0; padding: 0; border-bottom: 3px solid #fecc00; font-size: 14px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .catalog-filter .item .submit-button:hover, .catalog-sort .item .submit-button:hover { opacity: 0.5; } .catalog-filter .item .submit-button:active, .catalog-sort .item .submit-button:active { opacity: 0.3; } } .price-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .price-filter label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .price-filter label + label { margin-left: 10px; } .price-filter input { height: 30px; width: 100%; border: 1px solid #e7e5ed; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; margin-left: 5px; padding: 0 5px; color: #20a7cf; font-size: 12px; } .price-filter input:focus { border-color: #fecc00; } /** * Product list page **/ .product-list-page .catalog-nav-col, .product-list-inner-page .catalog-nav-col { padding-top: 5px; width: 20%; } .product-list-page .catalog-list-col, .product-list-inner-page .catalog-list-col { width: 80%; } @media (max-width: 767px) { .product-list-page .catalog-nav-col, .product-list-inner-page .catalog-nav-col { display: none; } .product-list-page .catalog-list-col, .product-list-inner-page .catalog-list-col { width: 100%; } } .product-list-inner-page .mobile-filter-button { -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; position: relative; display: inline-block; margin-right: 10px; cursor: pointer; font-size: 14px; white-space: nowrap; } .product-list-inner-page .mobile-filter-button:after { width: 17px; height: 14px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db); content: ''; display: block; position: absolute; top: calc(50% - 7px); right: -15px; background-size: 100% 100%; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .product-list-inner-page .mobile-filter-button:hover { color: #20a7cf; } } @media (min-width: 768px) { .product-list-inner-page .visible-mobile { display: none; } } @media (max-width: 767px) { .product-list-inner-page .visible-desktop { display: none; } .product-list-caption .h1:after { transition: -webkit-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 17px; height: 14px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db); content: ''; display: inline-block; vertical-align: middle; margin-left: 7px; background-size: 100% 100%; } .product-list-caption .h1.not-arrow:after { display: none; } } /** * Product detail page **/ .product-detail-page .left-col { width: 67%; } .product-detail-page .right-col { width: 33%; max-width: 370px; } .product-detail-page .page-caption h1, .product-detail-page .page-caption .h1 { font-weight: 300; font-size: 21px; } .product-detail-page .page-caption h1 strong, .product-detail-page .page-caption .h1 strong { font-weight: normal; } .product-detail-page .product-detail-slider { margin-bottom: 30px; position: relative; z-index: 1; overflow: hidden; } .product-detail-page .product-detail-slider .back-link { width: 9px; height: 13px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -2px -115.12px no-repeat; display: block; position: absolute; left: 0; top: 0; margin: 20px; z-index: 100; } .product-detail-page .product-detail-slider .product-label-container { position: absolute; right: 0; top: 0; z-index: 100; } .product-detail-page .product-detail-slider .product-label-container .label { font-size: 14px; padding: 3px 10px; } .product-detail-page .product-detail-slider .slide { background: 50% 50% no-repeat; background-size: cover; height: auto; width: 50%; } .product-detail-page .product-detail-slider .slide img { display: block; position: relative; z-index: 1; width: 100%; height: auto; } .product-detail-page .product-detail-text-content { font: normal 14px/1.85714286 'Ubuntu', sans-serif; color: #999; margin-bottom: 35px; } .product-detail-page .product-detail-info { margin-bottom: 35px; } .product-detail-page .product-detail-info .buy-count { margin-bottom: 18px; color: #999; font-size: 14px; font-weight: 300; } .product-detail-page .product-detail-info .price-block { margin-bottom: 22px; } .product-detail-page .product-detail-info .price-block .price { display: inline-block; vertical-align: baseline; position: relative; font-size: 36px; white-space: nowrap; } .product-detail-page .product-detail-info .price-block .price + .price { margin-left: 25px; } .product-detail-page .product-detail-info .price-block .price.old { color: #999; font-size: 24px; } .product-detail-page .product-detail-info .price-block .price.old:after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #f61456; } .product-detail-page .product-detail-info .link { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; color: #20a7cf; font-size: 14px; display: block; margin: 0 15px 12px 0; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .product-detail-page .product-detail-info .link:hover { opacity: 0.5; } .product-detail-page .product-detail-info .link:active { opacity: 0.3; } } .product-detail-page .product-detail-info .link.outer:after { width: 11px; height: 11px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.png?dd6f6d74107f7b15c6bf85a79e76de93) -375px -35px no-repeat; content: ''; display: inline-block; vertical-align: middle; margin-left: 7px; } .product-detail-page .product-detail-info hr { border: none; border-bottom: 1px solid #e7e5ed; margin: 26px 0; } .product-detail-page .product-detail-info .colors-block .block-title { margin-bottom: 17px; font-size: 14px; color: #999; } .product-detail-page .product-detail-info .colors-block .item { height: 63px; width: 46px; display: inline-block; background: 50% 50% no-repeat; background-size: cover; border: 1px solid #e7e5ed; margin: 8px 8px 0 0; } .product-detail-page .product-detail-info .colors-block .item.selected { cursor: default; border-color: #20a7cf; } .product-detail-page .product-detail-info .colors-block .item:not(.selected) { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .product-detail-page .product-detail-info .colors-block .item:not(.selected):hover { opacity: 0.5; } .product-detail-page .product-detail-info .colors-block .item:not(.selected):active { opacity: 0.3; } } .product-detail-page .product-detail-info .features-block { font-size: 13px; color: #999; } .product-detail-page .product-detail-info .features-block .item { display: inline-block; margin: 0 15px 12px 0; white-space: nowrap; } .product-detail-page .product-detail-info .features-block strong { font-weight: normal; color: #333; } .product-detail-page .buy-product-block .select-container { margin-bottom: 25px; } .product-detail-page .buy-product-block .select-container select { width: 100%; } .product-detail-page .buy-product-block .button-container { margin-bottom: 25px; position: relative; z-index: 1; } .product-detail-page .buy-product-block .size-select-container { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .product-detail-page .buy-product-block .size-select-container .select2-container { visibility: hidden; } .product-detail-page .buy-product-block .size-select-container select { height: 100%; width: 100%; } .product-detail-page .buy-product-block .order-button { width: 100%; text-align: left; } .product-detail-page .product-slider-block { margin-bottom: 55px; } @media (min-width: 768px) { .product-detail-page .visible-mobile { display: none; } .product-detail-page .product-detail-slider .back-link { display: none; } } @media (max-width: 767px) { .product-detail-page .visible-desktop { display: none; } .product-detail-page .left-col, .product-detail-page .right-col { max-width: 100%; width: 100%; } .product-detail-page .product-detail-slider { margin-left: -20px; margin-right: -20px; margin-top: -30px; } .product-detail-page h1, .product-detail-page .h1 { font-size: 22px; } .product-detail-page .product-detail-info .price-block .price { font-size: 34px; } .product-detail-page .product-detail-info .price-block .price.old { font-size: 21px; } } @media (max-width: 499px) { /* .product-detail-page .product-detail-slider { margin-left: -120px; } .product-detail-page .product-detail-slider .slick-nav { margin-left: 50px; } .product-detail-page .product-detail-slider .back-link { left: 100px; } */ .product-detail-page .product-detail-slider .slide { margin: 0; width: calc(100vw - 100px); } } /** * Map page **/ .map-page main { padding: 0; } @media (max-width: 1299px) { .map-page main { padding-top: 55px; } } .map-page .footer-widgets, .map-page footer { /* display: none; */ } .map-block { position: relative; box-sizing: border-box; display: flex; justify-content: space-between; height: calc(100vh - 65px * 2); width: 100%; } .map-block .hide-list-button { height: 56px; width: 56px; display: block; position: relative; background: #fecc00; margin-left: 10px; flex-shrink: 0; flex-grow: 0; } .map-block .hide-list-button:before, .map-block .hide-list-button:after { height: 2px; width: 20px; content: ''; display: block; position: absolute; top: 50%; left: 50%; background: #683b46; margin: -1px -10px; } .map-block .hide-list-button:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .map-block .hide-list-button:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .map-block .show-list-button { position: absolute; right: 0; bottom: 50px; left: 0; z-index: 2; margin: 0 auto; width: 250px; text-align: center; } .map-block .map { height: 100%; width: 100%; position: relative; z-index: 1; } .map-block .shop-list-container { height: 100%; width: 415px; position: relative; z-index: 3; background: #fff; box-sizing: border-box; padding: 0 30px 30px; max-width: 100vw; flex-shrink: 0; } .map-block .shop-list-container .list-caption { display: flex; height: 85px; box-sizing: border-box; padding: 18px 0; } .map-block .shop-list-container .list-caption select { width: 100%; } .map-block .shop-list-container .scroll-container { height: calc(100% - 85px); overflow: auto; } .map-block .city-list-item .city-name { transition: color 0.3s ease; cursor: pointer; position: relative; display: block; font-size: 18px; color: #683b46; border-bottom: 1px solid #e7e5ed; padding: 30px 0; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .map-block .city-list-item .city-name:hover { color: #20a7cf; } } .map-block .city-list-item .city-name:after { transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; width: 7px; height: 5px; background: url(/bitrix/templates/new_ninel_template/css/../img/sprite.svg?a92ece011b86d937656e7c84a42303db) -38.72px -115.12px no-repeat; content: ''; display: block; position: absolute; top: calc(50% - 2px); right: 10px; } .map-block .city-list-item .shop-list { transition: opacity 0.3s ease; } .map-block .city-list-item:not(.open) .shop-list { opacity: 0; } .map-block .city-list-item.open .city-name:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .map-block .shop-list-item .shop-address { display: block; position: relative; padding: 28px 0 28px 28px; font-size: 14px; } .map-block .shop-list-item .shop-address:before { height: 10px; width: 10px; content: ''; position: absolute; top: calc(50% - 5px); left: 0; box-sizing: border-box; border-radius: 50%; background: #fecc00; } .map-block .shop-list-item .shop-info { padding-bottom: 10px; } .map-block .shop-list-item .shop-info-item { font-size: 14px; line-height: 22px; color: #999; } .map-block .shop-list-item .shop-info-item + .shop-info-item { margin-top: 20px; } .map-block .shop-list-item .shop-info-item strong { font-weight: normal; color: #333; } @media (max-width: 1299px) { .map-block { height: calc(100vh - 55px); } .map-block .shop-list-container { padding: 0 20px 20px; } } @media (min-width: 1024px) { .map-block .hide-list-button, .map-block .show-list-button { display: none !important; } } @media (max-width: 1023px) { .map-block .shop-list-container { transition: all 0.3s ease; position: absolute; top: 0; right: 0; } .map-block .shop-list-container:not(.open) { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } /** * 404 error page **/ .not-found-page .page-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .not-found-page .page-content .title { font: 300 40px/1.375 'Ubuntu', sans-serif; margin-bottom: 20px; text-align: center; } .not-found-page .page-content .subtitle { font: 300 16px/1.625 'Ubuntu', sans-serif; margin-bottom: 40px; text-align: center; } .not-found-page .picture-404 { height: 315px; width: 758px; margin: 0 auto 50px; position: relative; } .not-found-page .picture-404 .layer { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .not-found-page .picture-404 .layer.num { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-num.png?032f1ae2d7b6d76c033d08f85d7f57cf); } .not-found-page .picture-404 .layer.shoulders { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-shoulders.png?1db137f47a41332a99cfa7a745864381); } .not-found-page .picture-404 .layer.zero { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-zero.png?58b4652285ffd2e77589eb47c370868e); } @media (max-width: 1023px) and (min-width: 768px) { .not-found-page .picture-404 { -webkit-transform: scale(0.9) !important; -ms-transform: scale(0.9) !important; transform: scale(0.9) !important; } } @media (max-width: 767px) { .not-found-page .picture-404 { height: 116px; width: 280px; } .not-found-page .picture-404 .layer.num { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-num-sm.png?4bed4379818b1e7a2552ae883e2b3aee); } .not-found-page .picture-404 .layer.shoulders { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-shoulders-sm.png?7b360f5f6a36eea181aff79129f0ac36); } .not-found-page .picture-404 .layer.zero { background-image: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/404-zero-sm.png?c13b228a521ad90525885ba54e95fb58); } } @media (max-width: 499px) { .not-found-page .page-content .title { font-size: 28px; } } .not-found-page .footer-widgets { display: none; } /** * Text page **/ .text-page .page-content .text-content { margin: 0 0 35px; } .text-page .page-content .text-content img { display: block; margin-bottom: 30px; width: 100%; } @media (min-width: 1024px) { .text-page .page-content { max-width: 810px; margin: 0 auto; padding: 0 50px; } .text-page .page-content .text-content img { margin-left: -50px; margin-right: -50px; width: calc(100% + 100px); } } .text-page .more-link-block { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; opacity: 0.99; position: relative; display: block; border: 1px solid #e7e5ed; color: #20a7cf; font-size: 16px; padding: 38px 120px 38px 50px; } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .text-page .more-link-block:hover { opacity: 0.5; } .text-page .more-link-block:active { opacity: 0.3; } } .text-page .more-link-block:before, .text-page .more-link-block:after { content: ''; display: block; position: absolute; top: 50%; right: 60px; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .text-page .more-link-block:before { height: 30px; width: 30px; background: #20a7cf; border-radius: 50%; } .text-page .more-link-block:after { width: 9px; height: 13px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/sprite.svg?a92ece011b86d937656e7c84a42303db) -139.02px -91.72px no-repeat; } /** **************** Animation **************** **/ .wrapper { -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } /** * Load animation **/ body:not(.loaded) .wrapper { opacity: 0; } /** * CSS Animation keyframes **/ @-webkit-keyframes moveWave { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes moveWave { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes upArrow { from, to { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateY(5px); transform: translateY(5px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes upArrow { from, to { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateY(5px); transform: translateY(5px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .owl-height { -webkit-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none; } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; cursor: hand; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { display: none; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } .no-js .owl-carousel { display: block; } .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(/bitrix/templates/new_ninel_template/css/owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } .slider-continer { height: auto; margin: 0 auto; margin-bottom: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 1360px; width: calc(100% - 20px * 2); } .main-slider { vertical-align: middle; width: 100%; position: relative; } .main-slider .owl-nav .owl-prev::before{ content: "‹"; } .main-slider .owl-nav .owl-next::before{ content: "›"; } .slider:after { content: ""; clear: both; display: block; } .slider .slide-element { float: left; } .slider .slide-element.w25 { width: 266px; } .slider .slide-element.w50 { width: 532px; } .slider .slide-element.w75 { width: 798px; } .slider .slide-element .pic-container { position: relative; overflow: hidden; display: block; width: 100%; } .slider .slide-element .pic-container img { width: 100%; top: 0px; right: 0px; } .slider .slide-element .pic-container .label { display: inline-block; position: absolute; left: 10px; bottom: 10px; padding: 0px 12px; text-transform: uppercase; font-size: 15px; line-height: 32px; } .main-slider .slide .text-container { height: 94px; font-size: 20px; font-weight: 400; line-height: 94px; background-color: #FFF; text-transform: uppercase; text-align: left; padding: 0px 20px; color: #2F2941; } .slider .slide-element .text-container span { vertical-align: middle; line-height: 26px; display: inline-block; font-weight: normal; } .slider .slide-element .text-container span.blue { color: #09A9C9; } .main-slider .owl-nav { position: absolute; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width: 100%; z-index: 1; } .main-slider .owl-nav div { position: absolute; width: 12px; height: 24px; overflow: hidden; font-size: 24px; line-height: 24px; color: #FFF; } .main-slider .owl-nav div:hover { color: #F6D431; } .main-slider .owl-nav div:before { line-height: 24px; font-size: 36px; height: 24px; position: absolute; bottom: 2px; } .main-slider .owl-nav .owl-prev { top: -256px; left: 14px; } .main-slider .owl-nav .owl-next { top: -256px; right: 14px; } .main-slider .slider { margin: 0 auto; } .related-section { margin: 25px 0 50px 0; } .related-title { color: #DA5A72; font-weight: 500; margin-bottom: 15px; line-height: 36px; } ul.pink-point li { padding-left: 13px; line-height: 26px; position: relative; font-size: 13.5px; } ul.pink-point li::before { position: absolute; content: "\00B7"; color: #DA5A72; left: 1px; font-size: 20px; line-height: 3px; top: 10px; } .bonus.round { margin-top: 75px; background: url('/bitrix/templates/new_ninel_template/images/bonus.png') no-repeat center top; } .round { margin: 34px 0px 75px 0; } .credit.round ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .credit.round ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 72px; max-width: 209px; position: relative; } .credit.round ul li .circle { width: 133px; height: 133px; border-radius: 100%; border: 2px solid #09A9C9; text-align: center; color: #DA5A72; font-size: 65px; line-height: 133px; margin: 0 auto 15px auto; } .credit.round ul li::after { content: "+"; position: absolute; color: #BDBDBD; right: 25px; top: 40%; font-size: 45px; margin-top: -23px; } .credit.round ul li:last-child::after { content: ""; } .credit.round ul li .text { text-align: center; text-transform: uppercase; color: #09A9C9; padding: 0px 10px; } .circle .number { font-weight: 500; } .circle .percent { font-weight: 100; margin-left: -0.26em; } .credit.round ul li .text { text-align: center; text-transform: uppercase; color: #09A9C9; padding: 0px 10px; } .block-title { display: block; margin-bottom: 5px; color: #09A9C9; font-size: 26px; font-weight: 400; line-height: 26px; } .partners-bank { padding: 20px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .partners-bank li { display: block; float: left; width: 25%; padding-left: 1px; position: relative; text-align: center; line-height: 94px; } .partners-bank li img { display: inline-block; vertical-align: middle; } .partners-bank li::after { display: block; background-color: #09A9C9; content: ""; width: 1px; top: 0px; right: 0px; bottom: 0px; position: absolute; } .section_text-with-image { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; color: #161616; margin-bottom: 75px; } .section_text-with-image > div { width: 50%; } .section_text-with-image .img-container img { width: 100%; display: block; } .section_text-with-image .text-container.right { padding-left: 35px; } .section_text-with-image .text-container { padding-top: 48px; } .section_text-with-image > div { width: 50%; } .section-title { margin-top: 0; margin-bottom: 26px; font-size: 30px; line-height: 1; color: #09A9C9; font-weight: normal; } .pink { color: #DA5A72; } .section_equipment .equipment-tabs__images, .section_equipment .equipment-tabs__items { visibility: visible; } #modal-filter-common .value-list li a:after { display: none; } [name="sort_catalog"] li > a[selected="selected"] { color: #20a7cf; } .header-nav ul > li > ul { width: 100%; } @media screen and (max-width: 650px) { .credit.round ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .credit.round ul li { margin: 15px auto; padding-right: 0; } .credit.round ul li::after { content: ""; } .partners-bank li { width: 100%; } .partners-bank li::after { display: none; } } /* media. max-width 650px */ @media screen and (max-width: 450px) { .slider-continer { width: 100%; } .main-slider { width: 100%; } .slider:after { content: ""; clear: both; display: block; } .slider .slide-element { height: auto; float: left; } .slider .slide-element.w25 { width: 320px; } .slider .slide-element.w50 { width: 320px; } .slider .slide-element.w75 { width: 320px; } .slider .slide-element .pic-container .label { display: inline-block; position: absolute; left: 10px; bottom: 10px; padding: 0px 12px; text-transform: uppercase; font-size: 15px; line-height: 32px; } .slider .slide-element .text-container { height: 59px; font-size: 16px; line-height: 62px; background-color: #FFF; font-weight: bold; text-transform: uppercase; text-align: left; padding: 0px 20px; color: #2F2941; } .slider .slide-element .text-container span { vertical-align: middle; line-height: 19px; display: inline-block; } .slider .slide-element .text-container span.blue { color: #09A9C9; } .slider .owl-nav { position: absolute; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width: 100%; } .slider .owl-nav div { position: absolute; width: 12px; height: 24px; overflow: hidden; font-size: 24px; line-height: 24px; color: #FFF; } .slider .owl-nav div:hover { color: #F6D431; } .slider .owl-nav div:before { line-height: 24px; font-size: 36px; height: 24px; position: absolute; bottom: 2px; } .slider .owl-nav .owl-prev { top: -148px; left: 14px; } .slider .owl-nav .owl-next { top: -148px; right: 14px; } } /* media. max-width 450px */ /** **************** UI **************** **/ /** * Custom scrollbar **/ * { outline: none; scrollbar-color: #fecc00 #fff; scrollbar-width: thin; } *scrollbarbutton { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } *::-webkit-scrollbar { width: 4px; height: 4px; } *::-webkit-scrollbar-thumb { background-color: #fecc00; border-radius: 4px; } *::-webkit-scrollbar-track { background-color: #fff; width: 2px; } /** * Text input **/ .text-input { position: relative; } .text-input input { -webkit-transition-property: border-color, color; -o-transition-property: border-color, color; transition-property: border-color, color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; height: 56px; width: 100%; -webkit-appearance: none; -moz-appearance: none; outline: none !important; resize: none; background: #fff; border: 1px solid #e7e5ed; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 20px; color: #683b46; font: normal 14px 'Ubuntu', sans-serif; } .text-input input::-webkit-input-placeholder { color: #999; } .text-input input::-moz-placeholder { color: #999; } .text-input input:-ms-input-placeholder { color: #999; } .text-input input:-moz-placeholder { color: #999; } .text-input input::-ms-clear { display: none; } .text-input input:focus { border-color: #fecc00; } /** * File input **/ .file-input { display: block; position: relative; margin-top: 28px; margin-bottom: 40px !important; } .file-input .remove-file { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; opacity: 0.99; height: 24px; width: 24px; position: absolute; top: 0; right: 0; display: block; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .file-input .remove-file:hover { opacity: 0.5; } .file-input .remove-file:active { opacity: 0.3; } } .file-input .remove-file:before, .file-input .remove-file:after { height: 2px; width: 16px; content: ''; position: absolute; top: calc(50% - 1px); left: calc(50% - 8px); background: #f61456; } .file-input .remove-file:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .file-input .remove-file:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .file-input.empty .remove-file { visibility: hidden; } .file-input .file-label-container { display: block; position: relative; cursor: pointer; font-size: 14px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; color: #999; } .file-input .file-label-container span { display: block; margin-bottom: 5px; } .file-input .file-label-container .file-label { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; opacity: 0.99; display: block; position: relative; margin-bottom: 23px; color: #20a7cf; font-weight: 500; text-transform: uppercase; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .file-input .file-label-container .file-label:hover { opacity: 0.5; } .file-input .file-label-container .file-label:active { opacity: 0.3; } } .file-input .file-label-container .file-label:before { height: 18px; width: 20px; content: ''; display: inline-block; vertical-align: middle; background: url("https://ninel.ru/bitrix/templates/new_ninel_template/images/attach.svg?1") no-repeat 0 0; margin-right: 5px; } .file-input .file-label-container * { pointer-events: none; } .file-input input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } /** * Input wrapper **/ .input-wrapper { position: relative; margin-bottom: 14px; } /** * Submit wrapper **/ .submit-wrapper { text-align: center; } .submit-wrapper .button { max-width: 340px; margin: 0 auto; width: 100%; } /** * Form validation **/ .input-wrapper { position: relative; } .input-wrapper label.error { color: #f61456; font-size: 13px; line-height: 14px; white-space: nowrap; } .input-wrapper.error input, .input-wrapper.error textarea { border-color: #f61456; } /** * Keyframes **/ @-webkit-keyframes sizeError { from { border-color: #e7e5ed; background-color: rgba(254, 254, 254, 1); } 15% { border-color: #fe3c00; background-color: rgba(254, 0, 0, 0.1); } to { border-color: #e7e5ed; background-color: rgba(254, 254, 254, 1); } } @keyframes sizeError { from { border-color: #e7e5ed; background-color: rgba(254, 254, 254, 1); } 15% { border-color: #fe3c00; background-color: rgba(254, 0, 0, 0.1); } to { border-color: #e7e5ed; background-color: rgba(254, 254, 254, 1); } } /** **************** Layout **************** **/ /** **************** Cards **************** **/ /** * Vacancy card **/ .vacancy-card { display: block; position: relative; z-index: 1; border: 1px solid #e7e5ed; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 45px 60px; margin-bottom: 20px; } .vacancy-card > a:not(.button) { display: block; } .vacancy-card:before { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: -1; border: 3px solid #fecc00; opacity: 0; } .vacancy-card .name { font-size: 21px; margin-bottom: 20px; } .vacancy-card .text-content { margin-bottom: 40px; font-size: 18px; color: #999; } .vacancy-card .text-content ul li { margin-bottom: 8px; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .vacancy-card:hover:before { opacity: 1; } } @media (max-width: 499px) { .vacancy-card { padding: 20px; } } /** **************** Forms **************** **/ /** * Job city form **/ .job-city-form .select2-container { margin-bottom: 15px; width: 100% !important; } .job-city-form .button { width: 100%; } /** * Vacancy form **/ .vacancy-form { max-width: 340px; margin: 0 auto; padding: 30px; } @media (max-width: 499px) { .vacancy-form { padding: 0; max-width: none; } } /** **************** Pages **************** **/ /** * About page banner **/ .about-page-banner { position: relative; z-index: 1; margin-bottom: 35px; } .about-page-banner img { display: block; width: 100%; } /** * About page text **/ .about-page-text { max-width: 855px; margin: 0 auto; } .about-page-text .text-content-caption { font-size: 21px; line-height: 1.9047619; margin-bottom: 40px; } .about-page-text .text-content { color: #999; line-height: 2.25; } .about-page-text .text-content h1, .about-page-text .text-content h2, .about-page-text .text-content h3, .about-page-text .text-content h4, .about-page-text .text-content h5 { color: #333; font-weight: normal; font-size: 21px; line-height: 1.9047619; margin-bottom: 0; } .about-page-text .text-content h1 + h1, .about-page-text .text-content h2 + h1, .about-page-text .text-content h3 + h1, .about-page-text .text-content h4 + h1, .about-page-text .text-content h5 + h1, .about-page-text .text-content h1 + h2, .about-page-text .text-content h2 + h2, .about-page-text .text-content h3 + h2, .about-page-text .text-content h4 + h2, .about-page-text .text-content h5 + h2, .about-page-text .text-content h1 + h3, .about-page-text .text-content h2 + h3, .about-page-text .text-content h3 + h3, .about-page-text .text-content h4 + h3, .about-page-text .text-content h5 + h3, .about-page-text .text-content h1 + h4, .about-page-text .text-content h2 + h4, .about-page-text .text-content h3 + h4, .about-page-text .text-content h4 + h4, .about-page-text .text-content h5 + h4, .about-page-text .text-content h1 + h5, .about-page-text .text-content h2 + h5, .about-page-text .text-content h3 + h5, .about-page-text .text-content h4 + h5, .about-page-text .text-content h5 + h5 { margin-top: 40px; } .about-page-text .text-content a { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; opacity: 0.99; color: #20a7cf; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .about-page-text .text-content a:hover { opacity: 0.5; } .about-page-text .text-content a:active { opacity: 0.3; } } .about-page-text .button { min-width: 260px; } /** * About page brands **/ .about-page-brands { margin: 30px 0; } .about-page-brands .brand { position: relative; z-index: 1; display: block; border: 1px solid #e7e5ed; margin-bottom: 20px; width: 100%; } .about-page-brands .brand img { -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; -o-transition-property: filter, opacity; transition-property: filter, opacity; transition-property: filter, opacity, -webkit-filter; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 70%; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.7; } .about-page-brands .brand:before { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: -1; border: 3px solid #fecc00; opacity: 0; } .about-page-brands .brand:after { content: ''; display: block; padding-bottom: 100%; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .about-page-brands .brand:hover:before { opacity: 1; } .about-page-brands .brand:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1; } } /** * Job page banner **/ .job-page-banner { position: relative; z-index: 1; background: 100% 50% no-repeat; background-size: cover; margin-bottom: 70px; } .job-page-banner .banner-image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: no-repeat 50% 50%; background-size: cover; } .job-page-banner .banner-content { max-width: 550px; padding: 90px 85px 90px; } .job-page-banner .title { font-size: 48px; font-weight: 300; line-height: 1.20833333; margin-bottom: 30px; } @media (max-width: 1299px) { .job-page-banner .title { font-size: 40px; } } @media (max-width: 767px) { .job-page-banner .title { font-size: 28px; } } .job-page-banner .text { font-size: 19px; color: #999; margin-bottom: 30px; } .job-page-banner .buttons { margin-top: 75px; margin-bottom: -20px; } .job-page-banner .buttons .button { min-width: 254px; margin-right: 17px; text-align: left; margin-bottom: 20px; } @media (max-width: 1023px) { .job-page-banner .banner-image { position: relative; margin-bottom: 30px; height: 36vw; } .job-page-banner .banner-content { padding: 0; } .job-page-banner .buttons { margin-top: 0; } .job-page-banner .buttons .button { min-width: 0; } } @media (max-width: 499px) { .job-page-banner .buttons .button { width: 100%; } } /** * Job page text **/ .job-page-text { max-width: 855px; margin: 0 auto; } .job-page-text .title { font-size: 21px; margin-bottom: 60px; } .job-page-text .text-content h1, .job-page-text .text-content h2, .job-page-text .text-content h3, .job-page-text .text-content h4, .job-page-text .text-content h5 { font-weight: 500; font-size: 16px; margin-bottom: 12px; } /** * Product detail page **/ .product-detail-info .size-block { margin-bottom: 25px; } .product-detail-info .size-block .block-label { color: #999; margin-bottom: 10px; } .product-detail-info .size-block .scroll-container { overflow: auto; width: 100%; } .product-detail-info .size-block .sizes { display: -webkit-box; display: -ms-flexbox; display: flex; } .product-detail-info .size-block .sizes.highlighted .size { animation-name: sizeError; animation-duration: 2s; } .product-detail-info .size-block .size { -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #e7e5ed; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 5px 5px 0; min-width: 52px; min-height: 40px; padding: 5px; white-space: nowrap; } .product-detail-info .size-block .size:last-child { margin-right: 0; } .product-detail-info .size-block .size.selected { cursor: default; border-color: #fecc00; background-color: #fecc00; color: #fff; } .product-detail-info .size-block .size.disabled { cursor: default; color: #e7e5ed; opacity: 0.9; } @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0) { .product-detail-info .size-block .size:not(.selected):not(.disabled):hover { color: #fecc00; } } .product-detail-info .check-store-button, .product-detail-info .buy-button { margin-bottom: 25px; width: 100%; text-align: left; } .js-spoiler{ margin-bottom: -30px; } .mobile-menu .js-spoiler{ margin-bottom: 0; } [ data-video ] { position: relative; cursor: pointer; } [ data-video ] img { filter: blur( 5px ); } [ data-video ]:after { content: "►"; font-size: 54px; color: #fff; text-shadow: 0 0 10px rgba( 0,0,0, 0.25 ); position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 10000; margin: auto; } #video-detail { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; justify-content: center; align-items: center; z-index: 1000; background: rgba( 0,0,0, 0.75 ); } #video-detail.active { display: flex; } #video-detail video { max-width: 95%; max-height: 95%; } .fancybox-slide--video { display: flex; } .fancybox-slide--video .fancybox-content { display: none !important; } .fancybox-slide--video video { max-width: 95%; max-height: 95%; margin: auto; } .catalog_banner { width: 100%; padding-bottom: 15px; } .catalog_banner * { width: 100%; } .mCSB_container > .mCustomScrollBox > .mCSB_5_scrollbar { display: none !important; } @media { .product-list-caption.visible-mobile .h1 { margin-bottom: 15px; margin-top: 20px; } } @media (max-width: 499px){ .product-list { margin-bottom: 50px; }} .breadcrumbs_box{ display: flex; justify-content: flex-end; } .bx-breadcrumb-item span{ color: #999; } .bx-breadcrumb i { color: #fecc00; } .bx-breadcrumb-item > a > span{ color: #20a7cf; } /* End */ /* Start:/bitrix/templates/new_ninel_template/css/styles.css?16469282985141*/ header .content-row { justify-content: flex-start !important; } header .search-form-container { margin-left: auto !important; } a.not-active{ pointer-events: none !important; cursor: default !important; } .page-caption .breadcrumbs { height: 50px; } .catalog-nav > li > ul > li > ul { display: none; } .catalog-nav > li > ul > li.selected > ul { display: block; } .product-slider .slick-track { backface-visibility: hidden; } .product-detail-page .product-detail-slider .label { clear: right } .product-detail-page .product-detail-slider .label.discount, .product-detail-page .product-detail-slider .label.bestprice { float: right; } .product-label-container .label.payment { display: none; } .product-slider-block .block-title { color: #333; } .catalog-filter-modal { max-height: calc( 100% - 100px ) } .clear-filter { margin-top: 3px; margin-left: 25px; border-bottom: 3px solid #999; } .new-date { text-align: center } .select2-container { z-index: 1 } .vacancy-card.no-hover { border: none; } .vacancy-card.no-hover:before { display: none; } .text-content a { color: #20a7cf; } .vacancy-card .text-content { font: normal 16px/1.625 'Ubuntu', sans-serif; color: #000; } #modal-size-table-step-1, #modal-size-table-step-2, #modal-size-table-step-3 { max-height: 90%; } .tabs-block .nav .title::after { display: none; } #validate-phone-code p { text-align: center; } #validate-phone-code .input__inner { display: flex; justify-content: center; margin-top: 15px; } .or, #putToBasket, .basket-container, .product-detail-info > .basket__features { display: none !important; } #putToBasket, #putToBasket_allready, #putToBasket_full { margin-bottom: 15px; } #putToBasket_allready, #putToBasket_full { color: #fff; background: #20a7cf; } #putToBasket.empty, #getAvailable.empty { cursor: default; background: #e7e6ee; pointer-events: none; } .header-search-form input[ type="text" ] { width: 150px !important; } .header-search-form input[ type="text" ]:hover { width: 150px; } .basket .price.old { display: inline; float: right; } .form-order .promotional-code button { max-width: 135px; } .input-point { padding: 0; overflow: hidden; max-height: 0; -webkit-transition: all 0.6s cubic-bezier(0, 1, 0, 1); -o-transition: all 0.6s cubic-bezier(0, 1, 0, 1); transition: all 0.6s cubic-bezier(0, 1, 0, 1); } .input-point.visiable { max-height: 1000px; -webkit-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; } .input-delivery.visiable { overflow: visible !important; } .suggestions-suggestions svg, [ ifilter="postamat" ] { display: none; } #checkout-error { color: #f44336 } .basket__item_empty { opacity: 0.5 } #checkout-form .basket__btn.disabled, #checkout-form .basket__btn[ disabled ].disabled { cursor: default; background: #e7e6ee; pointer-events: none; } #checkout-form .basket__btn[ disabled ] { cursor: pointer; background-color: #fecc00; pointer-events: auto; } #sms-resend-button { display: block; margin: 15px auto; } .js-form-sms .input-code-item.error { background: #FFC1C1; border: 1px solid #FF5151; } .js-modal-container.loader { background-image: url( /upload/preloader.svg); background-repeat: no-repeat; background-position: center; } .basket__item .basket__item-name a { color: #333; } #delivery-mailtext { color: #999; display: none; } #delivery-mailtext.open { display: block; } .button-empty { margin-top: 15px; } .product-detail-info .size-block { margin-bottom: 10px; } #putToBasket, #getAvailable { margin-bottom: 0; } .or { margin: 7px auto; display: block; text-align: center; color: #999; } #IML_logoPlace, #IML_separator, #IML_mark, #IML_title .IML_mark, #IML_head { display: none; } #IML_citySearcher { width: 100%; height: 25px; display: block; margin: 15px 0; padding: 0 10px; border: 1px solid #fecc00; box-sizing: border-box; } #IML_listOfCities, #IML_listOfCities .jspContainer, #IML_listOfCities .jspPane, #IML_pvz { width: 100%; } #IML_title { border: 0; } #IML_wrapper p { padding: 5px 15px; } .page-banner-with-text .small-text.black { color: #000 } .online_payment_hide { display: none; } @media (max-width: 1299px) { .pagination .pagination-item { padding: 15px 20px !important; min-width: 0; } .pagination .pagination-item.page:not(.current) { display: none; } } @media (max-width: 767px) { .page-caption { margin-bottom: 10px; } .js-modal-container .product-buy-modal.js-modal { height: calc( 100% - 100px ); } .product-detail-page .size-block { margin-bottom: 15px; } .product-detail-page .modal .scroll-container { height: calc(100% - 75px); max-height: 500px; } .mobile-menu { display: block; } .registration-block .banner { height: 250px; } .header-search-form input[type="text"] { width: 0 !important; } .header-search-form:hover input[type="text"] { width: 170px !important; } .basket .price.old { float: none; } .form-order .basket__total button { max-width: none; } } @media (max-width: 398px) { header .logo { margin-right: 15px !important; } } /* End */ /* Start:/bitrix/templates/new_ninel_template/css/custom.css?169400312743613*/ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ @charset "utf-8"; #lotery { width: 75px; display: block; position: fixed; bottom: 25px; right: 25px; z-index: 10000; } #lotery img { width: 100%; height: 100%; } @media (max-width: 499px) { #lotery { width: 65px; } } /** * Акция */ .competition { max-width: 1115px; width: 100%; margin: 0 auto; padding-bottom: 30px; } .competition__head-images { display: flex; justify-content: space-between; min-height: 625px; } .competition__head { position: relative; margin-bottom: 30px; } .competition__head img { width: 100%; object-fit: cover; max-height: 625px; } .competition__head-images img:first-child { max-width: 55%; } .competition__head-images img:last-child { max-width: 45%; } .competition__head-name { color: #ff4190; text-align: center; font-size: 75px; font-weight: 700; position: absolute; bottom: 40px; left: 0; max-width: 55%; width: 100%; } .competition__head-name span { display: block; font-size: 105px; line-height: 100%; margin-bottom: -20px; } .competition__form-inner { display: flex; justify-content: space-between; align-items: center; } .competition__form-inner input { border: 1px solid #d0ced5; border-radius: 50px; max-width: calc(25% - 10px); width: 100%; height: 55px; padding: 0 20px; outline: transparent; font-size: 21px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: transparent; box-shadow: none; box-sizing: border-box; } .competition__form-inner input:focus { border-color: #ff4190; } .competition__form-inner input::placeholder { font-size: 21px; color: #5f5f5f; text-align: center; } .competition__form-inner button { cursor: pointer; height: 55px; max-width: calc(25% - 20px); width: 100%; background-color: #fff343; color: #ff4190; display: flex; align-items: center; justify-content: center; border-radius: 50px; border: none; font-weight: 700; font-size: 21px; padding: 0; outline: transparent; transition: all 0.3s; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .competition__form-inner button:hover { opacity: 0.7; } } @media (max-width: 1120px) { .competition__form { padding: 0 15px; } } @media (max-width: 1023px) { .competition__head-name { bottom: 35px; font-size: 55px; } .competition__head-images { min-height: 540px; max-height: 540px; } .competition__head-name span { font-size: 80px; margin-bottom: -6px; } .competition__form-inner input::placeholder { font-size: 18px; } .competition__form-inner input { font-size: 18px; } .competition__form-inner button { font-size: 18px; } } @media (max-width: 767px) { .competition__form-links { order: 10; } .competition__form-inner > .checkbox-container { order: 9; } .competition__head-name { font-size: 45px; } .competition__head-name span { font-size: 65px; } .competition__head-images { max-height: 450px; min-height: 450px; } .competition__head-images img:first-child { max-width: 100%; } .competition__head-name { max-width: 100%; } .competition__head-images img:last-child { display: none; } .competition__form-inner input::placeholder { font-size: 16px; } .competition__form-inner input { font-size: 16px; } .competition__form-inner button { font-size: 16px; } .competition__form-inner { flex-direction: column; } .competition__form-inner input { max-width: 350px; margin-bottom: 15px; } .competition__form-inner button { max-width: 350px; } } #modal-code .js-form-sms > .input__inner { display: flex; } #preload_front_main_slider, #preload_main_product_sliders { width: 100%; } #preload_front_main_slider.loading, #preload_main_product_sliders.loading { height: 350px; margin-bottom: 50px; background: #f9f9f9; } header { z-index: 101; } .search-form { position: relative } #search-preloader { width: 100%; max-width: 350px; position: absolute; top: 56px; left: 0; right: 0; padding: 15px 20px; margin: 0; display: none; opacity: 0; transition: 0.5s; border: 1px solid #e7e5ed; box-sizing: border-box; background: #fff; z-index: 100; } #search-preloader.active { opacity: 1; display: block; } @media (max-width: 767px) { #search-preloader { max-width: 100%; } .basket .price-block { text-align: left; display: flex; } .main-slider .pic-container img { width: 100% !important; } } #search-preloader .link { width: 100%; display: block; padding: 7px 0; } #search { width: 50px; height: 50px; display: block; } #search * { box-sizing: border-box; } #search label { padding: 15px; cursor: pointer; transition: 0.5s; border-radius: 50%; } .header-search-form:hover label { opacity: 1 !important; z-index: 1 !important; background-color: #fecc00; border-color: #fecc00; } .header-search-form .submit::before { display: none; } #modal-shop-select .available .link-order { color: #fecc00; } .card-block .image { background: #20a7cf; } .card-block .title, .card-block .text.top { max-width: 350px } .footer-nav { margin-top: 20px; } .swiper-button-prev, .swiper-button-next { height: 22px !important; width: 55px !important; } header .menu-button { width: 45px; height: 45px; margin-right: 0; } .menu-button span { width: 16px; } #basket-count { width: auto; height: auto; background: #f61456; border-radius: 5px; color: #fff; padding: 1px 3px; position: absolute; top: 0; right: -7px; } .basket-container { position: relative; border: 0 !important; } .header-search-form .submit { width: 50px; height: 50px; border: 0; } .basket__item-img { max-width: 100px; min-width: 70px; max-height: 125px; } .basket .price-block { width: 85px; text-align: right; } #cart-preloader { width: 550px; position: absolute; top: 82px; right: 0; padding: 15px; display: none; opacity: 0; transition: 0.5s; border: 1px solid #e7e5ed; background: #fff; } #cart-preloader.open { display: block; opacity: 1; } #cart-preloader .basket__total-price { margin-top: 25px; } #cart-preloader .price-sale { display: none; } header { transition: 0.25s; } header.drop-down { top: -55px; } .header-menu { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .suggestions-wrapper, .suggestions-suggestions { max-width: 100%; } .basket-page footer { display: none } .form-order__input label.error { display: none !important; } /** * Page banner * */ .page-banner { margin-bottom: 45px; } .page-banner img { display: block; width: 100%; } #flat { margin-right: 14px; } /** * Page banner with text * */ .page-banner-with-text { position: relative; z-index: 1; background: 100% 50% no-repeat; background-size: cover; margin-bottom: 50px; } .page-banner-with-text .banner-image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: no-repeat 50% 50%; background-size: cover; } .page-banner-with-text .banner-content { padding: 70px 60px; } .page-banner-with-text .small-text { color: #999; font-size: 19px; line-height: 1.36842105; margin-bottom: 32px; } .page-banner-with-text .text { font-size: 21px; line-height: 1.23809524; } .fil0 { fill: #693B46; } header .logo { margin-right: 30px } .input-delivery__inner .input-wrapper:nth-child(2) { max-width: 100% !important; } #house, #flat, #postal_code { max-width: 142px !important; width: 142px !important; } #postal_code { max-width: 143px !important; width: 143px !important; } .suggestions-wrapper { max-width: 455px; } #delivery-mailtext.open { width: 100%; color: #f61456; } .product-list-caption.visible-mobile { flex-direction: column; justify-content: flex-start; align-items: flex-start; } .product-list-caption.visible-mobile .h1 { margin-bottom: 15px; } #modal-shop-select .link-order, #modal-shop-select .not-available .link-order-size { color: #683b46; } #modal-shop-select .not-available.with-quantity .link-order-size-empty, #modal-shop-select .not-available.no-quantity .link-order-size-order { display: none; } #modal-shop-select .link-order-size { width: auto; min-width: 128px; text-align: right; margin-left: 50px; } #modal-shop-select .link-order { width: 150px; text-align: right; margin-left: 50px; } .product-list-inner-page .page-caption { margin-bottom: 0; } @media (max-width: 767px) { .price-block { width: auto; text-align: left; } .page-banner-with-text .banner-image { position: relative; margin-bottom: 30px; height: 36vw; } .product-detail-page .product-detail-slider { margin-top: -38px; } .page-banner-with-text .banner-content { padding: 0; } .input-delivery__inner .input-wrapper:nth-child(3), .input-delivery__inner .input-wrapper:nth-child(4), .input-delivery__inner .input-wrapper:nth-child(5) { max-width: 31% !important; width: 31% !important; } #house, #flat, #postal_code { max-width: 100% !important; width: 100% !important; } } /** * Text content additional styles * */ .text-content h2 { font-size: 21px; font-weight: normal; } .text-content a { -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; cursor: pointer; color: #20a7cf; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .text-content a:hover { color: #fecc00; } } .text-content .small-text { font-size: 13px; } @media (max-width: 767px) { .text-content .stacktable.large-only { display: none; } .text-content .stacktable.small-only { display: table; } } .blue-text { color: #20a7cf; } .red-text { color: #f61456; } .grey-text { color: #999; } .violet-text { color: #683b46; } /** * Modal additional styles * */ .modal-container * { -webkit-box-sizing: border-box; box-sizing: border-box; } .modal-text-content { color: #999; max-width: 350px; margin: 0 auto; padding: 40px; } .modal-sms .scroll-container { padding: 40px 43px; } .modal-text-content.modal-content-code { max-width: 305px; padding: 0; } .modal-text-content span { color: #333; } .modal-title { font-size: 21px; color: #72474f; margin-bottom: 20px; } .input__inner { margin-bottom: 20px; } .input-code-item { border: 1px solid #fecc00; width: 66px; height: 50px; font-size: 28px; text-align: center; margin-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .input-code-item:last-child { margin-right: 0; } .input-code-item:focus::-webkit-input-placeholder { color: transparent; } .input-code-item:focus::-moz-placeholder { color: transparent; } .input-code-item:focus:-ms-input-placeholder { color: transparent; } .input-code-item:focus::-ms-input-placeholder { color: transparent; } .input-code-item:focus::placeholder { color: transparent; } .input-code-item:focus { background-color: #fff5cc; color: #683b46; } .input-code-item.full { background-color: #fff5cc; color: #683b46; } .modal-content-code p { margin-bottom: 18px; } .modal-text-content p:last-child { margin-bottom: 0; } .modal-text-btn.disabled { cursor: default; background-color: #e7e5ed; } .modal-text-btn { color: #683b46; border: none; background-color: #fecc00; cursor: pointer; padding: 20px 85px; } .modal.modal-sms { max-width: 390px; } @media (max-width: 764px) { .modal-sms .scroll-container { padding: 40px 20px; } .modal-text-btn { width: 100%; padding: 20px 77px; } } @media (max-width: 499px) { .modal-text-content { padding: 0; } } /** * Text content carousel * */ @media (min-width: 1300px) { .col-8 .text-content-carousel .swiper-container { margin-left: -29%; margin-right: -29%; } } .text-content-carousel { margin-bottom: 80px; } .text-content-carousel .carousel-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-content-carousel .swiper-arrows { margin-bottom: 0.7em; } .text-content-carousel .carousel-item { position: relative; display: block; color: #333; margin-bottom: 45px; } .text-content-carousel .carousel-item .item-picture { height: 320px; width: 100%; background: 50% 50% no-repeat; background-size: cover; } .text-content-carousel .carousel-item .item-caption { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; position: absolute; left: 30px; right: 30px; bottom: -45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #f3f4f8; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 150px; padding: 20px; color: #999; font-size: 14px; text-align: center; } .text-content-carousel .carousel-item .item-caption .title { -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; color: #333; font-size: 18px; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .text-content-carousel a.carousel-item:hover .item-caption { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } .text-content-carousel a.carousel-item:hover .item-caption .title { color: #20a7cf; } } /** * Buttons * */ .ask-button { min-width: 254px; text-align: left; } /** * FAQ * */ .faq-item { margin-bottom: 30px; } /** * Banner with card form * */ .card-block-banner .card-block { height: auto !important; } .card-block-banner .card-block .title, .card-block-banner .card-block .text.top { max-width: 400px; } .card-block-banner .card-block .title { margin-bottom: 23px; } .card-block-banner .card-block .text.top { min-height: 93px; } .card-block-banner .card-block .image img { max-height: none; right: 0; } .card-block-banner .result-text { position: absolute; top: 48px; left: calc(50% + 20px); width: 48%; font-size: 16px; line-height: 1.75; } .card-block-banner .result-text .result-text-title { font-size: 21px; font-weight: 500; margin-bottom: 28px; } .card-block-banner .result-text p { margin-bottom: 28px; } .card-block-banner .result-text strong { font-weight: 500; } .promotional-code { margin-bottom: 5px !important; } .promotional-coupons { margin-bottom: 40px; display: flex; } .promotional-coupon { margin-right: 7px; } .clear-coupon { color: #f44336 !important; } @media (min-width: 1300px) { .card-block-banner .card-block { padding: 60px 0; } .card-block-banner .result-text { top: 68px; } } input { font-size: 16px; } @media (min-width: 768px) { .card-block-banner { background: -webkit-gradient(linear, left top, right top, from(#1496bd), to(#30b1d7)); background: -o-linear-gradient(left, #1496bd, #30b1d7); background: linear-gradient(to right, #1496bd, #30b1d7); margin-bottom: 40px; } .card-block-banner .card-block .image { background: none; } } @media (max-width: 767px) { .card-block-banner .card-block { margin-bottom: 30px; } .card-block-banner .card-block .title { display: none; } .card-block-banner .card-block .text.top { min-height: 0; } .card-block-banner .result-text { color: #333; position: relative; top: auto; left: auto; width: 100%; margin-top: 30px; } } /** * Article list page * */ .article-list { margin-bottom: 40px; } .article-list .show-more-button { display: block; margin: 0 auto; max-width: 440px; width: 100%; } .article-list-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .article-list-caption .title { font-size: 21px; font-weight: 300; margin-right: auto; } .article-list-caption .filter-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -15px; } .article-list-caption .filter-container .catalog-sort { margin: 10px 15px; } @media (max-width: 1023px) { .article-list-caption { -ms-flex-wrap: wrap; flex-wrap: wrap; } .article-list-caption .title { margin-bottom: 20px; width: 100%; } .article-list-caption .filter-container { -ms-flex-wrap: wrap; flex-wrap: wrap; } } /** * Button mods * */ .button.grey { -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; border: 1px solid #e7e5ed; background: #fff; color: #20a7cf; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .button.grey:hover { border-color: #fecc00; } } @media (hover), (min-width: 0 \0), (min--moz-device-pixel-ratio: 0) { .service .text-content table tr:hover td { color: #333333 !important; } } .cooperation-page p:nth-child(3) { color: #8c8888; } .care-page p { color: #8c8888; } .care-page p:first-child { color: #333333; } .care-pag h2 { margin-bottom: 0; } /** * Page important * */ .important h2, .important p { color: #683b46; } .important p { margin-bottom: 0 !important; } .important p:last-child { margin-bottom: 1.6em !important; } /** * Page video * */ .page-video { text-align: center; margin-bottom: 45px; } .page-video iframe { margin: 0 auto; max-width: 905px; width: 100% !important; } .care-page p { text-align: justify; } @media (max-width: 767px) { .page-video iframe { height: 320px; } } /** * Page basket * */ .basket-container { cursor: pointer; margin-left: 25px; } .basket-container svg { width: 25px; height: 25px; } .basket-container { width: 49px; height: 49px; border-radius: 50%; border: 1px solid #e7e5ed; display: flex; justify-content: center; align-items: center; } .basket-container.active { border: 0; background-color: #fecc00; } .basket-page * { -webkit-box-sizing: border-box; box-sizing: border-box; } .basket .text-content { width: 100%; } .basket h2 { color: #683b46; } .basket__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .basket__item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; position: relative; } .basket__item.no-stock { padding: 0 15px; opacity: 0.75; background: #efefef; } .basket__item.no-stock .delete { right: 10px; } .basket__item-rmcomment { font-size: 12px; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .basket__item:hover .delete { opacity: 1; } } .delete { cursor: pointer; position: absolute; right: 0; top: 0; width: auto; opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .delete-icon { width: 9px; height: 9px; display: inline-block; /* margin-left: 5px; */ } .delete span { color: #f61456; font-size: 12px; } .delete-icon:before, .delete-icon:after { position: absolute; content: " "; height: 9px; width: 2px; right: 0; background-color: #f61456; } .delete-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .delete-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .basket__box:last-child { position: -webkit-sticky; position: sticky; top: 10px; height: 100%; } .basket__box:first-child { max-width: 940px; width: 100%; margin-right: 33px; } .basket__item-img { background-position: center; background-repeat: no-repeat; background-size: cover; width: 78px; margin-right: 15px; } .basket__item-name { margin-bottom: 18px; } .basket__item-text { width: 100%; padding: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .basket__item-text { border-bottom: 1px solid #e7e5ed; } .basket__item-list { color: #999; font-size: 12px; line-height: 14px; } .basket__item-list span { color: #333333; } .basket__item-list li { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; } .basket__item-list li:not(:last-child) { margin-right: 20px; } .basket__item-list li:not(:last-child):after { height: 2px; width: 2px; display: block; content: ""; position: absolute; top: 7px; right: -10px; background: #fecc00; margin: -1px; } .basket .price.old { color: #06c5e7; font-size: 16px; font-weight: 400; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .basket .price.old:hover + .price-sale { visibility: visible; opacity: 1; } } .basket .price-block { position: relative; } .basket .price.old:after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #f61456; } .basket .price { position: relative; font-size: 21px; display: block; font-weight: 500; } .price-sale { width: 200px; padding: 10px; margin-left: auto; margin-right: 50px; padding-left: 15px; border-left: 3px solid #06c5e7; } .price-sale__info { font-size: 14px; color: #999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .price-sale .price-sale__sum { color: #000; padding-top: 5px; } .price-sale__text { margin-top: 7px; margin-right: 15px; line-height: 18px; } .basket__total { padding: 25px; border: 1px solid #06c5e7; } .basket__total .basket .price { font-size: 26px; } .basket__total-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #e7e5ed; margin-bottom: 20px; } .basket__total-products { font-size: 14px; color: #999; margin-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .basket__total-products .price { font-size: 14px; } .basket__total-methods { color: #999; margin-bottom: 15px; } .basket__total-methods span { color: #333; display: block; } .basket__btn { color: #683b46; background-color: #fecc00; font-size: 16px; width: 100%; height: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; } .basket__btn:disabled { cursor: default; background-color: #e7e5ed; } .basket__features { margin-top: 20px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e7e5ed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .basket__features-item { font-size: 14px; color: #683b46; text-align: center; } .basket__features img { height: 35px; } .custom-checkbox-inner { font-size: 14px; } .custom-checkbox, .custom-radio { position: absolute; z-index: -1; opacity: 0; } .custom-checkbox + label, .custom-radio + label { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: pre; position: relative; } .custom-checkbox + label::before, .custom-radio + label::before { content: ""; display: inline-block; width: 28px; height: 28px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 50%; margin-right: 17px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .custom-checkbox + label::before { width: 18px; height: 18px; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .custom-checkbox:not(:disabled):not(:checked) + label:hover::before, .custom-radio:not(:disabled):not(:checked) + label:hover::before { border-color: #b3d7ff; } } .custom-checkbox:not(:disabled):active + label::before { background-color: #b3d7ff; border-color: #b3d7ff; } .custom-checkbox:checked + label::before, .custom-radio:checked + label::before { border-color: #06c5e7; background-color: #06c5e7; } .custom-radio:checked + label::after, .custom-checkbox:checked + label::after { cursor: pointer; content: ""; position: absolute; width: 10px; height: 10px; left: 9px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } .custom-checkbox:checked + label::after { width: 6px; height: 6px; left: 6px; } .custom-radio:disabled + label::before { background-color: #e9ecef; } .basket__banner { width: 100%; } .basket__banner { margin-bottom: 10px; } .basket__banner img { display: block; width: 100%; margin-bottom: 10px; } .promotional-code { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; } .promotional-code input { height: 50px; max-width: 310px; width: 100%; padding: 15px 10px 15px 20px; border: 1px solid #dededf; border-right: none; } .promotional-code input::placeholder { font-weight: 300; font-family: "Ubuntu", sans-serif; color: #999; opacity: 1; } .promotional-code button { height: 50px; cursor: pointer; max-width: 240px; width: 100%; padding: 15px 10px 15px 10px; border: none; background-color: #fecc00; color: #683b46; -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } @media (hover), (min-width: 0\0), (min--moz-device-pixel-ratio: 0) { .promotional-code button:hover { background-color: rgba(254, 204, 0, 0.5); } } .form-order__input input { color: #333333; padding: 15px 10px 15px 20px; border: 1px solid #d3d3d3; height: 50px; } .form-order input::placeholder { color: #999999; font-family: "Ubuntu", sans-serif; font-weight: 300; opacity: 1; } #city { display: block; max-width: 455px; width: 100%; } #street { max-width: 455px; width: 100%; margin-right: 6px; } #house { max-width: 80px; width: 100%; margin-right: 14px; } #flat { max-width: 115px; width: 100%; } .form-order-radio { margin-bottom: 15px; } .form-order__input { padding: 5px 0 30px; } .online-sale { color: #999; font-size: 14px; display: block; margin-left: 48px; margin-bottom: 10px; } .radio-sale { margin-bottom: 0; } .form-order__input-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 10px; } #name, #surname, #mail, #tel { max-width: 457px; width: 100%; } #tel::-webkit-input-placeholder { font-size: 0; } #tel::-moz-placeholder { font-size: 0; } #tel:-ms-input-placeholder { font-size: 0; } #tel::-ms-input-placeholder { font-size: 0; } #tel::placeholder { font-size: 0; } #name, #surname { margin-bottom: 16px; display: inline-block; } .form-order__text { font-size: 14px; color: #999; margin-bottom: 25px; } .form-order__text span { color: #f61456; } .input-placeholder { max-width: 457px; width: 100%; position: relative; height: 50px; } .input-placeholder input:valid + .placeholder { display: none; } .placeholder { position: absolute; pointer-events: none; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 20px; margin: auto; font-weight: 300; font-family: "Ubuntu", sans-serif; color: #999; } .placeholder span { color: #f61456; } .form-order button { max-width: 335px; width: 100%; } .input-delivery { padding: 0; overflow: hidden; max-height: 0; -webkit-transition: all 0.6s cubic-bezier(0, 1, 0, 1); -o-transition: all 0.6s cubic-bezier(0, 1, 0, 1); transition: all 0.6s cubic-bezier(0, 1, 0, 1); } .input-delivery__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 5px 0 15px; } .input-delivery__inner .input-wrapper:nth-child(1) { width: 100%; } .input-delivery__inner .input-wrapper:nth-child(2) { max-width: 455px; width: 100%; margin-right: 14px; } .input-delivery.visiable { max-height: 1000px; -webkit-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; } .swiper-container-advice { width: 100%; } .swiper-container-advice .col-sm-12 { padding: 0 !important; } .swiper-arrows-advice { position: absolute !important; top: 10px; right: 0; } .article-list .list-title { margin-right: 85px; } .article-list { position: relative; } input:not([type="checkbox"]):not([type="radio"]), textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } #tel { border-radius: 0; } header:before { width: 100%; } .buy-product-block .button.disabled { background: #999; color: #fff; opacity: 0.5; cursor: default; } .submit-button.empty { cursor: default; background: #e7e6ee; pointer-events: none; } .pagination-item.page { border: 1px solid #e7e5ed !important; } .pagination .pagination-item.page:not(.current) { display: block !important; } .wrapper { overflow: visible; } .basket-container .empty { display: block; } .basket-container .full { display: none; } .basket-container.active .empty { display: none; } .basket-container.active .full { display: block; } .header-search-form input[type="text"] { width: 200px; padding: 0 20px; } .basket-container svg { animation: swing 10s infinite ease; } .order__inner { padding-top: 35px; padding-bottom: 35px; text-align: center; } .order__img svg { height: 245px; } .order__img svg g { fill: #fecc00; } .order__title { color: #06c5e7; font-size: 72px; margin-bottom: 10px; } .order__text .button { max-width: 265px; width: 100%; color: #683b46; } .order__text { color: #333333; } .order__text p { margin-bottom: 45px; } .order__text p:first-child { font-size: 21px; margin-bottom: 12px; } .order__text p:last-child { margin-bottom: 45px; } .order__text .button:hover { color: #683b46; } .order__text .phone { display: block; font-size: 21px; color: #17c9e9; margin-bottom: 25px; } .order__text .phone:hover { color: #17c9e9; opacity: 0.7; } .order__text-error p { margin-bottom: 12px; } .card-block .card-form input[type="text"] { font-size: 33px; letter-spacing: 0; width: 300px; padding: 0; } #modal-size-table-step-1, #modal-size-table-step-2, #modal-size-table-step-3 { overflow: hidden; } .pagination .pagination-item.to-begin:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: 90deg; } .pagination .pagination-item.prev:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: 90deg; } .pagination .pagination-item.next:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: -90deg; } .pagination .pagination-item.to-end:before { width: 25px; height: 15px; background: url(https://ninel.ru/bitrix/templates/new_ninel_template/images/arrow.svg?a92ece011b86d937656e7c84a42303db) no-repeat; background-size: 100% 100%; rotate: -90deg; } /** * Фиксация меню при скролле */ @media ( min-width: 767px ) { .menu-fixed .catalog-nav-col { position: fixed; top: 37px; } .menu-fixed .catalog-list-col { margin-left: 20%; } } /* @media. min-width: 767px */ @keyframes swing { 10% { transform: rotate(-9deg); } 20% { transform: rotate(9deg); } 30% { transform: rotate(0); } } @media (max-width: 1299px) { .basket-container svg { width: 20px; height: 20px; } .basket-container { width: 35px; height: 35px; } } @media (max-width: 1170px) { .basket__inner { -ms-flex-wrap: wrap; flex-wrap: wrap; } .basket__box:first-child { margin-right: 0; max-width: 100%; margin-bottom: 30px; } .basket__box { width: 50%; max-width: 50%; } .wrapper { overflow: hidden !important; } #name, #surname, #mail, #tel { max-width: 535px; } .input-placeholder { max-width: 535px; } } @media (max-width: 900px) { #name, #surname, #mail, #tel { margin-bottom: 0; } .basket__getting .basket__btn { display: none; } .basket__box:first-child { margin-bottom: 0; } .form-order__input-info { padding: 0; } .form-order__text { margin-bottom: 16px; } .delete { opacity: 1; } #city { margin-bottom: 0; } } @media (max-width: 767px) { .basket__item-name { margin-bottom: 15px; } .basket .price-block { margin-top: 15px; } .price-sale { margin-left: 0; margin-bottom: 15px; padding: 0; order: 1; border-left: 0; border-top: 3px solid #06c5e7; } .order__img svg { height: 190px; } .order__title { font-size: 60px; } .header-search-form input[type="text"] { width: 0; padding: 0; } .header-search-form:hover input[type="text"], .header-search-form input[type="text"]:focus { padding: 0 15px; width: 170px; } body.fixed { position: fixed !important; width: 100%; overflow: hidden; } .basket__item-list li:not(:last-child):after { display: none; } .input-delivery__inner .input-wrapper:nth-child(2) { max-width: 100%; margin-right: 0; } .input-delivery__inner .input-wrapper:nth-child(3) { max-width: 49%; width: 100%; } .input-delivery__inner .input-wrapper:nth-child(4) { max-width: 49%; width: 100%; } #house, #flat { max-width: 100%; } .input-delivery__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .basket__item-text { padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .basket__item-list li { display: block; } .basket .price { display: inline-block; font-size: 14px; } .basket .price.old { font-size: 12px; margin-left: 7px; } .basket__item-list li:not(:last-child) { margin-right: 0; margin-bottom: 10px; } .basket__item-name { font-size: 14px; } .price-block { margin-top: 4px; margin-bottom: 4px; } .basket__item { margin-bottom: 15px; } .promotional-code button { max-width: 140px; } .custom-radio + label::before { width: 20px; height: 20px; } .custom-radio:checked + label::after { width: 6px; height: 6px; left: 7px; } .online-sale { margin-left: 38px; } .basket__features img { height: 30px; } .basket__total-price { padding-bottom: 0; } .basket__total-price .price { font-size: 18px; } .basket__total { padding: 0; border: none; } .basket__total { font-size: 14px; } .basket__box { width: 100%; } .basket__total .basket__btn { margin-bottom: 15px; } .custom-checkbox + label::before, .custom-radio + label::before { margin-right: 7px; } #street { margin-right: 0; } .input-delivery.visiable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #city, #street { max-width: 100%; } .basket__box { width: 100%; max-width: 100%; } .basket__box:last-child { margin-top: 20px; } .basket__total-price h2 { font-size: 18px; } } @media (max-width: 450px) { .big-h1 { font-size: 18px; } } @media (max-width: 350px) { .card-block .card-form input[type="text"] { font-size: 30px; width: 248px; } .custom-checkbox + label { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .terms-link { margin-left: 25px; } .custom-checkbox:checked + label.terms-label::after { top: 11px; } .custom-checkbox:checked + label::after { left: 6px; } } .main-slider { overflow: hidden; } .main-slider .slide .text-container { line-height: 24px; padding-top: 25px; } .filter-active { margin-bottom: 45px; display: flex; flex-wrap: wrap; } .filter-active_item { font-size: 14px; color: #fff; padding: 7px 15px; margin-top: 15px; margin-right: 15px; background: #333; } .filter-active_item-close { padding-left: 15px; margin-left: 15px; cursor: pointer; border-left: 1px solid #fff; } .header-menu .social-links a svg, footer .social-links a svg { width: 25px; height: 25px; } /* баннер в категориях */ .banner_category{ display: block; background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 50px; } .banner_category img { width: 100%; } @media (max-width: 768px) { .banner_category{ margin-bottom: 10px; margin-top: 20px; } } #mCSB_1_container #mCSB_1_scrollbar_vertical > .mCSB_draggerContainer { opacity: 0 !important; } @media (max-width: 767px){ .action-slider .slide .text-container { background: none !important } } @media screen and (max-width: 450px){ .slider-continer { width: 100%; margin-bottom: 0 !important; } } /* End */ /* /bitrix/templates/new_ninel_template/template_styles.css?17875657946718 */ /* /bitrix/templates/new_ninel_template/css/common.css?1725624710280979 */ /* /bitrix/templates/new_ninel_template/css/styles.css?16469282985141 */ /* /bitrix/templates/new_ninel_template/css/custom.css?169400312743613 */