*, *:after, *:before { box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif /* 1 */; -ms-text-size-adjust: 100% /* 2 */; -webkit-text-size-adjust: 100% /* 2 */; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block /* 1 */; vertical-align: baseline /* 2 */; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit /* 1 */; font: inherit /* 2 */; margin: 0 /* 3 */; } fieldset { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button /* 2 */; cursor: pointer /* 3 */; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box /* 1 */; padding: 0 /* 2 */; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield /* 1 */; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } legend { border: 0 /* 1 */; padding: 0 /* 2 */; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } blockquote { margin: 0; } article { line-height: 1.6; } article p, article ul, article ol, article table { margin-bottom: 10px; } article ul, article ol { padding-left: 40px; } article ul { list-style-type: disc; } article ul ul, article ul ol { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } article ol { list-style-type: decimal; } article ol ol, article ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } article code { padding: 0.2rem 0.5rem; margin: 0 0.2rem; font-size: 90%; white-space: nowrap; background: #f1f1f1; border: 1px solid #e1e1e1; border-radius: 4px; } article pre code { display: block; padding: 1rem 1.5rem; white-space: pre; } article p { margin-top: 0; } article img { margin-top: 0 !important; margin-left: 0 !important; } article a { color: #1eaedb; text-decoration: underline; -webkit-transition: all 0.25s ease-in-out 0.05s; transition: all 0.25s ease-in-out 0.05s; } article a:hover { color: #0fa0ce; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } article table { width: 100%; } article table td, article table th { border: 1px solid #555; padding: 0.5rem; text-align: left; } article table td:last-child, article table th:last-child { padding-right: 0; } article table th { font-weight: bold; } article hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #e1e1e1; } article blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; } article h1, article h2, article h3, article h4, article h5, article h6 { margin-top: 0; margin-bottom: 1rem; font-weight: 300; } article h1 { font-size: 3rem; line-height: 1.2; } article h2 { font-size: 2rem; line-height: 1.25; } article h3 { font-size: 1.8rem; line-height: 1.3; } article h4 { font-size: 1.6rem; line-height: 1.35; } article h5 { font-size: 1.4rem; line-height: 1.5; } article h6 { font-size: 1.2rem; line-height: 1.6; } @font-face { font-family: 'GothamProRegular'; src: url("../fonts/GothamPro/GothamProRegular/GothamProRegular.eot"); src: url("../fonts/GothamPro/GothamProRegular/GothamProRegular.eot?#iefix") format('embedded-opentype'), url("../fonts/GothamPro/GothamProRegular/GothamProRegular.woff") format('woff'), url("../fonts/GothamPro/GothamProRegular/GothamProRegular.woff2") format('woff2'), url("../fonts/GothamPro/GothamProRegular/GothamProRegular.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothamProMedium'; src: url("../fonts/GothamPro/GothamProMedium/GothamProMedium.eot"); src: url("../fonts/GothamPro/GothamProMedium/GothamProMedium.eot?#iefix") format('embedded-opentype'), url("../fonts/GothamPro/GothamProMedium/GothamProMedium.woff") format('woff'), url("../fonts/GothamPro/GothamProMedium/GothamProMedium.woff2") format('woff2'), url("../fonts/GothamPro/GothamProMedium/GothamProMedium.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothamProBold'; src: url("../fonts/GothamPro/GothamProBold/GothamProBold.eot"); src: url("../fonts/GothamPro/GothamProBold/GothamProBold.eot?#iefix") format('embedded-opentype'), url("../fonts/GothamPro/GothamProBold/GothamProBold.woff") format('woff'), url("../fonts/GothamPro/GothamProBold/GothamProBold.woff2") format('woff2'), url("../fonts/GothamPro/GothamProBold/GothamProBold.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothamProLight'; src: url("../fonts/GothamPro/GothamProLight/GothamProLight.eot"); src: url("../fonts/GothamPro/GothamProLight/GothamProLight.eot?#iefix") format('embedded-opentype'), url("../fonts/GothamPro/GothamProLight/GothamProLight.woff") format('woff'), url("../fonts/GothamPro/GothamProLight/GothamProLight.woff2") format('woff2'), url("../fonts/GothamPro/GothamProLight/GothamProLight.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Neumann'; src: url("../fonts/Neumann/Neumann.eot"); src: url("../fonts/Neumann/Neumann.eot?#iefix") format('embedded-opentype'), url("../fonts/Neumann/Neumann.woff") format('woff'), url("../fonts/Neumann/Neumann.woff2") format('woff2'), url("../fonts/Neumann/Neumann.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProLight'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProLight/PFDinDisplayProLight.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProLight/PFDinDisplayProLight.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProLight/PFDinDisplayProLight.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProLight/PFDinDisplayProLight.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProRegular'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProRegular/PFDinDisplayProRegular.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProRegular/PFDinDisplayProRegular.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProRegular/PFDinDisplayProRegular.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProRegular/PFDinDisplayProRegular.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProMedium'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProMedium/PFDinDisplayProMedium.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProMedium/PFDinDisplayProMedium.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProMedium/PFDinDisplayProMedium.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProMedium/PFDinDisplayProMedium.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProBold'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProBold/PFDinDisplayProBold.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProBold/PFDinDisplayProBold.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProBold/PFDinDisplayProBold.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProBold/PFDinDisplayProBold.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProBlack'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProBlack/PFDinDisplayProBlack.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProBlack/PFDinDisplayProBlack.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProBlack/PFDinDisplayProBlack.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProBlack/PFDinDisplayProBlack.ttf") format('ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFDinDisplayProItalic'; src: url("../fonts/PFDinDisplayPro/PFDinDisplayProItalic/PFDinDisplayProItalic.eot"); src: url("../fonts/PFDinDisplayPro/PFDinDisplayProItalic/PFDinDisplayProItalic.eot?#iefix") format('embedded-opentype'), url("../fonts/PFDinDisplayPro/PFDinDisplayProItalic/PFDinDisplayProItalic.woff") format('woff'), url("../fonts/PFDinDisplayPro/PFDinDisplayProItalic/PFDinDisplayProItalic.ttf") format('ttf'); font-weight: normal; font-style: normal; } @media (min-width: 320px) { html { font-size: 13.837837837837839px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 370px) { html { font-size: 16px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 410px) { html { font-size: 17.72972972972973px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 480px) { html { font-size: 12.387096774193548px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 560px) { html { font-size: 14.451612903225806px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 620px) { html { font-size: 16px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 960px) { html { font-size: 10.5px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 1200px) { html { font-size: 12px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 1600px) { html { font-size: 16px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } @media (min-width: 1900px) { html { font-size: 19px; } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { width: 100%; } } .actionBox { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } .actionBox.showed, .actionBox.noAction { -webkit-animation: actionBox 1s both 0.0s; animation: actionBox 1s both 0.0s; } .actionBox.actionBox--onlyFade { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .actionBox.actionBox--onlyFade.showed, .actionBox.actionBox--onlyFade.noAction { -webkit-animation: actionBox--onlyFade 1s both 0.0s; animation: actionBox--onlyFade 1s both 0.0s; } @-webkit-keyframes actionBox { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes actionBox { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes actionBox--onlyFade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes actionBox--onlyFade { 0% { opacity: 0; } 100% { opacity: 1; } } .hide { display: none !important; } .error { color: #f00; } .blur { filter: blur(6px); } .circleBg, .about__decor, .advantagesBlock__decor--1, .card__decor--1, .catalog__decor--1, .catalog__decor--3, .contacts__decor, .contactsBlock__decor--1 { background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-size: 20px 20px; background-position: 20px 20px; } .circleBgSmall, .advantagesBlock__decor--2, .contacts__decor--2, .contactsBlock__decor--2, .contactsBlock__decor--3, .feedback__decor, .formPopup__decor, .thanksPopup__decor { background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-size: 1em 1em; background-position: 0 0; } .button, .buttonWhite, .about__steps-item-buttonWhite, .about__steps-item-button, .catalogBlock__list-item-back-button, .contactsBlock__card-back-button, .topBlock__buttonWhite, .topBlock__button, .form__buttonWhite, .form__button, .thanksPopup__buttonWhite, .thanksPopup__button, .goodItem__back-button { min-width: 200px; display: inline-block; position: relative; background-color: transparent; padding: 29px 50px 27px 50px; -webkit-transition: 0.4s; transition: 0.4s; -ms-flex-negative: 0; flex-shrink: 0; border: none; outline: none; box-shadow: none; margin: 0; color: #171717; font-size: 0.875rem; text-transform: uppercase; line-height: 1; text-align: center; white-space: nowrap; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; } .button:before, .buttonWhite:before, .about__steps-item-buttonWhite:before, .about__steps-item-button:before, .catalogBlock__list-item-back-button:before, .contactsBlock__card-back-button:before, .topBlock__buttonWhite:before, .topBlock__button:before, .form__buttonWhite:before, .form__button:before, .thanksPopup__buttonWhite:before, .thanksPopup__button:before, .goodItem__back-button:before, .button:after, .buttonWhite:after, .about__steps-item-buttonWhite:after, .about__steps-item-button:after, .catalogBlock__list-item-back-button:after, .contactsBlock__card-back-button:after, .topBlock__buttonWhite:after, .topBlock__button:after, .form__buttonWhite:after, .form__button:after, .thanksPopup__buttonWhite:after, .thanksPopup__button:after, .goodItem__back-button:after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; border-top: 1px solid #171717; border-bottom: 1px solid #171717; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; } .button:before, .buttonWhite:before, .about__steps-item-buttonWhite:before, .about__steps-item-button:before, .catalogBlock__list-item-back-button:before, .contactsBlock__card-back-button:before, .topBlock__buttonWhite:before, .topBlock__button:before, .form__buttonWhite:before, .form__button:before, .thanksPopup__buttonWhite:before, .thanksPopup__button:before, .goodItem__back-button:before { left: 0; border-left: 1px solid #171717; } .button:after, .buttonWhite:after, .about__steps-item-buttonWhite:after, .about__steps-item-button:after, .catalogBlock__list-item-back-button:after, .contactsBlock__card-back-button:after, .topBlock__buttonWhite:after, .topBlock__button:after, .form__buttonWhite:after, .form__button:after, .thanksPopup__buttonWhite:after, .thanksPopup__button:after, .goodItem__back-button:after { right: 0; border-right: 1px solid #171717; } .button .text, .buttonWhite .text, .about__steps-item-buttonWhite .text, .about__steps-item-button .text, .catalogBlock__list-item-back-button .text, .contactsBlock__card-back-button .text, .topBlock__buttonWhite .text, .topBlock__button .text, .form__buttonWhite .text, .form__button .text, .thanksPopup__buttonWhite .text, .thanksPopup__button .text, .goodItem__back-button .text { display: block; position: relative; } .button .text:before, .buttonWhite .text:before, .about__steps-item-buttonWhite .text:before, .about__steps-item-button .text:before, .catalogBlock__list-item-back-button .text:before, .contactsBlock__card-back-button .text:before, .topBlock__buttonWhite .text:before, .topBlock__button .text:before, .form__buttonWhite .text:before, .form__button .text:before, .thanksPopup__buttonWhite .text:before, .thanksPopup__button .text:before, .goodItem__back-button .text:before { content: ''; position: absolute; width: 6px; height: 6px; background-color: #171717; right: 100%; top: 50%; margin-top: -3px; margin-right: 15px; -webkit-transition: 0.4s; transition: 0.4s; } .button .text:after, .buttonWhite .text:after, .about__steps-item-buttonWhite .text:after, .about__steps-item-button .text:after, .catalogBlock__list-item-back-button .text:after, .contactsBlock__card-back-button .text:after, .topBlock__buttonWhite .text:after, .topBlock__button .text:after, .form__buttonWhite .text:after, .form__button .text:after, .thanksPopup__buttonWhite .text:after, .thanksPopup__button .text:after, .goodItem__back-button .text:after { content: ''; position: absolute; top: -100%; left: 0; right: 0; width: 1px; height: 80px; margin: auto; background-color: #171717; visibility: hidden; opacity: 0; } .d-mobile .button:active, .d-mobile .buttonWhite:active, .d-mobile .about__steps-item-buttonWhite:active, .d-mobile .about__steps-item-button:active, .d-mobile .catalogBlock__list-item-back-button:active, .d-mobile .contactsBlock__card-back-button:active, .d-mobile .topBlock__buttonWhite:active, .d-mobile .topBlock__button:active, .d-mobile .form__buttonWhite:active, .d-mobile .form__button:active, .d-mobile .thanksPopup__buttonWhite:active, .d-mobile .thanksPopup__button:active, .d-mobile .goodItem__back-button:active { background-color: #171717; color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; } .d-mobile .button:active .text:before, .d-mobile .buttonWhite:active .text:before, .d-mobile .about__steps-item-buttonWhite:active .text:before, .d-mobile .about__steps-item-button:active .text:before, .d-mobile .catalogBlock__list-item-back-button:active .text:before, .d-mobile .contactsBlock__card-back-button:active .text:before, .d-mobile .topBlock__buttonWhite:active .text:before, .d-mobile .topBlock__button:active .text:before, .d-mobile .form__buttonWhite:active .text:before, .d-mobile .form__button:active .text:before, .d-mobile .thanksPopup__buttonWhite:active .text:before, .d-mobile .thanksPopup__button:active .text:before, .d-mobile .goodItem__back-button:active .text:before { background-color: #fff; } .buttonWhite, .buttonWhiteWhite, .about__steps-item-buttonWhiteWhite, .about__steps-item-buttonWhite, .catalogBlock__list-item-back-buttonWhite, .contactsBlock__card-back-buttonWhite, .topBlock__buttonWhiteWhite, .topBlock__buttonWhite, .form__buttonWhiteWhite, .form__buttonWhite, .thanksPopup__buttonWhiteWhite, .thanksPopup__buttonWhite, .goodItem__back-buttonWhite, .catalogBlock__list-item-back-button, .contactsBlock__card-back-button, .goodItem__back-button { color: #fff; font-size: 1rem; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; } .buttonWhite:before, .buttonWhiteWhite:before, .about__steps-item-buttonWhiteWhite:before, .about__steps-item-buttonWhite:before, .catalogBlock__list-item-back-buttonWhite:before, .contactsBlock__card-back-buttonWhite:before, .topBlock__buttonWhiteWhite:before, .topBlock__buttonWhite:before, .form__buttonWhiteWhite:before, .form__buttonWhite:before, .thanksPopup__buttonWhiteWhite:before, .thanksPopup__buttonWhite:before, .goodItem__back-buttonWhite:before, .catalogBlock__list-item-back-button:before, .contactsBlock__card-back-button:before, .goodItem__back-button:before, .buttonWhite:after, .buttonWhiteWhite:after, .about__steps-item-buttonWhiteWhite:after, .about__steps-item-buttonWhite:after, .catalogBlock__list-item-back-buttonWhite:after, .contactsBlock__card-back-buttonWhite:after, .topBlock__buttonWhiteWhite:after, .topBlock__buttonWhite:after, .form__buttonWhiteWhite:after, .form__buttonWhite:after, .thanksPopup__buttonWhiteWhite:after, .thanksPopup__buttonWhite:after, .goodItem__back-buttonWhite:after, .catalogBlock__list-item-back-button:after, .contactsBlock__card-back-button:after, .goodItem__back-button:after { border-color: #fff; } .buttonWhite .text:before, .buttonWhiteWhite .text:before, .about__steps-item-buttonWhiteWhite .text:before, .about__steps-item-buttonWhite .text:before, .catalogBlock__list-item-back-buttonWhite .text:before, .contactsBlock__card-back-buttonWhite .text:before, .topBlock__buttonWhiteWhite .text:before, .topBlock__buttonWhite .text:before, .form__buttonWhiteWhite .text:before, .form__buttonWhite .text:before, .thanksPopup__buttonWhiteWhite .text:before, .thanksPopup__buttonWhite .text:before, .goodItem__back-buttonWhite .text:before, .catalogBlock__list-item-back-button .text:before, .contactsBlock__card-back-button .text:before, .goodItem__back-button .text:before, .buttonWhite .text:after, .buttonWhiteWhite .text:after, .about__steps-item-buttonWhiteWhite .text:after, .about__steps-item-buttonWhite .text:after, .catalogBlock__list-item-back-buttonWhite .text:after, .contactsBlock__card-back-buttonWhite .text:after, .topBlock__buttonWhiteWhite .text:after, .topBlock__buttonWhite .text:after, .form__buttonWhiteWhite .text:after, .form__buttonWhite .text:after, .thanksPopup__buttonWhiteWhite .text:after, .thanksPopup__buttonWhite .text:after, .goodItem__back-buttonWhite .text:after, .catalogBlock__list-item-back-button .text:after, .contactsBlock__card-back-button .text:after, .goodItem__back-button .text:after { background-color: #fff; } @media screen and (min-width: 1200px) { .button, .buttonWhite, .about__steps-item-buttonWhite, .about__steps-item-button, .catalogBlock__list-item-back-button, .contactsBlock__card-back-button, .topBlock__buttonWhite, .topBlock__button, .form__buttonWhite, .form__button, .thanksPopup__buttonWhite, .thanksPopup__button, .goodItem__back-button { padding: 29px 50px 27px 50px; } .button:hover, .buttonWhite:hover, .about__steps-item-buttonWhite:hover, .about__steps-item-button:hover, .catalogBlock__list-item-back-button:hover, .contactsBlock__card-back-button:hover, .topBlock__buttonWhite:hover, .topBlock__button:hover, .form__buttonWhite:hover, .form__button:hover, .thanksPopup__buttonWhite:hover, .thanksPopup__button:hover, .goodItem__back-button:hover { cursor: pointer; background-color: #171717; color: #fff; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .button:hover:before, .buttonWhite:hover:before, .about__steps-item-buttonWhite:hover:before, .about__steps-item-button:hover:before, .catalogBlock__list-item-back-button:hover:before, .contactsBlock__card-back-button:hover:before, .topBlock__buttonWhite:hover:before, .topBlock__button:hover:before, .form__buttonWhite:hover:before, .form__button:hover:before, .thanksPopup__buttonWhite:hover:before, .thanksPopup__button:hover:before, .goodItem__back-button:hover:before { left: -20px; -webkit-transition: all 0.5s 0.2s; transition: all 0.5s 0.2s; opacity: 0; } .button:hover:after, .buttonWhite:hover:after, .about__steps-item-buttonWhite:hover:after, .about__steps-item-button:hover:after, .catalogBlock__list-item-back-button:hover:after, .contactsBlock__card-back-button:hover:after, .topBlock__buttonWhite:hover:after, .topBlock__button:hover:after, .form__buttonWhite:hover:after, .form__button:hover:after, .thanksPopup__buttonWhite:hover:after, .thanksPopup__button:hover:after, .goodItem__back-button:hover:after { right: -20px; -webkit-transition: all 0.5s 0.2s; transition: all 0.5s 0.2s; opacity: 0; } .button:hover .text:before, .buttonWhite:hover .text:before, .about__steps-item-buttonWhite:hover .text:before, .about__steps-item-button:hover .text:before, .catalogBlock__list-item-back-button:hover .text:before, .contactsBlock__card-back-button:hover .text:before, .topBlock__buttonWhite:hover .text:before, .topBlock__button:hover .text:before, .form__buttonWhite:hover .text:before, .form__button:hover .text:before, .thanksPopup__buttonWhite:hover .text:before, .thanksPopup__button:hover .text:before, .goodItem__back-button:hover .text:before { background-color: #fff; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .button:hover .text:after, .buttonWhite:hover .text:after, .about__steps-item-buttonWhite:hover .text:after, .about__steps-item-button:hover .text:after, .catalogBlock__list-item-back-button:hover .text:after, .contactsBlock__card-back-button:hover .text:after, .topBlock__buttonWhite:hover .text:after, .topBlock__button:hover .text:after, .form__buttonWhite:hover .text:after, .form__button:hover .text:after, .thanksPopup__buttonWhite:hover .text:after, .thanksPopup__button:hover .text:after, .goodItem__back-button:hover .text:after { -webkit-animation: sword 0.8s; animation: sword 0.8s; } } @media screen and (min-width: 1600px) { .button, .buttonWhite, .about__steps-item-buttonWhite, .about__steps-item-button, .catalogBlock__list-item-back-button, .contactsBlock__card-back-button, .topBlock__buttonWhite, .topBlock__button, .form__buttonWhite, .form__button, .thanksPopup__buttonWhite, .thanksPopup__button, .goodItem__back-button { padding: 31px 70px 29px 70px; } } @-webkit-keyframes sword { 0% { top: -100px; visibility: hidden; opacity: 0; } 20% { visibility: visible; opacity: 1; } 100% { top: 100px; visibility: hidden; opacity: 0; } } @keyframes sword { 0% { top: -100px; visibility: hidden; opacity: 0; } 20% { visibility: visible; opacity: 1; } 100% { top: 100px; visibility: hidden; opacity: 0; } } .buttonLine, .contactsBlock__feedback-caption, .footer__callback, .header__callback { position: relative; display: block; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1; white-space: nowrap; text-transform: uppercase; padding-bottom: 5px; } .buttonLine:after, .contactsBlock__feedback-caption:after, .footer__callback:after, .header__callback:after { content: ''; position: absolute; width: 100%; height: 1px; background-color: #171717; left: 50%; bottom: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: 0.4s; transition: 0.4s; } @media screen and (min-width: 1200px) { .buttonLine:hover, .contactsBlock__feedback-caption:hover, .footer__callback:hover, .header__callback:hover { cursor: pointer; } .buttonLine:hover:after, .contactsBlock__feedback-caption:hover:after, .footer__callback:hover:after, .header__callback:hover:after { width: 0%; } } .buttonMore, .buttonMoreWhite, .advantagesBlock__linkWhite, .advantagesBlock__link, .card__similar-linkWhite, .card__similar-link, .catalogBlock__linkWhite, .catalogBlock__link, .catalogBlock__list-item-button, .contacts__link .textWhite, .contacts__link .text, .contacts__map .balloon__linkWhite, .contacts__map .balloon__link { display: inline-block; position: relative; background-color: transparent; -webkit-transition: 0.4s; transition: 0.4s; -ms-flex-negative: 0; flex-shrink: 0; border: none; outline: none; box-shadow: none; margin: 0; color: #171717; font-size: 0.625rem; text-transform: uppercase; line-height: 1; white-space: nowrap; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; } .buttonMore:before, .buttonMoreWhite:before, .advantagesBlock__linkWhite:before, .advantagesBlock__link:before, .card__similar-linkWhite:before, .card__similar-link:before, .catalogBlock__linkWhite:before, .catalogBlock__link:before, .catalogBlock__list-item-button:before, .contacts__link .textWhite:before, .contacts__link .text:before, .contacts__map .balloon__linkWhite:before, .contacts__map .balloon__link:before { pointer-events: none; content: ''; position: absolute; width: 0%; height: 1px; background-color: #171717; right: 0; top: 100%; margin-top: 5px; -webkit-transition: 0.4s; transition: 0.4s; -webkit-transition-delay: 0s; transition-delay: 0s; display: none; } .buttonMore:after, .buttonMoreWhite:after, .advantagesBlock__linkWhite:after, .advantagesBlock__link:after, .card__similar-linkWhite:after, .card__similar-link:after, .catalogBlock__linkWhite:after, .catalogBlock__link:after, .catalogBlock__list-item-button:after, .contacts__link .textWhite:after, .contacts__link .text:after, .contacts__map .balloon__linkWhite:after, .contacts__map .balloon__link:after { pointer-events: none; content: ''; position: absolute; width: 100%; height: 1px; background-color: #171717; left: 100%; top: 50%; margin-left: 10px; -webkit-transition: 0.4s; transition: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; display: none; } .buttonMore .text, .buttonMoreWhite .text, .advantagesBlock__linkWhite .text, .advantagesBlock__link .text, .card__similar-linkWhite .text, .card__similar-link .text, .catalogBlock__linkWhite .text, .catalogBlock__link .text, .catalogBlock__list-item-button .text, .contacts__link .textWhite .text, .contacts__link .text .text, .contacts__map .balloon__linkWhite .text, .contacts__map .balloon__link .text { display: block; position: relative; } .buttonMore .text:before, .buttonMoreWhite .text:before, .advantagesBlock__linkWhite .text:before, .advantagesBlock__link .text:before, .card__similar-linkWhite .text:before, .card__similar-link .text:before, .catalogBlock__linkWhite .text:before, .catalogBlock__link .text:before, .catalogBlock__list-item-button .text:before, .contacts__link .textWhite .text:before, .contacts__link .text .text:before, .contacts__map .balloon__linkWhite .text:before, .contacts__map .balloon__link .text:before { content: ''; position: absolute; width: 4px; height: 4px; background-color: #171717; right: 100%; top: 50%; margin-top: -2px; margin-right: 5px; display: none; } .buttonMoreWhite, .buttonMoreWhiteWhite, .advantagesBlock__linkWhiteWhite, .advantagesBlock__linkWhite, .card__similar-linkWhiteWhite, .card__similar-linkWhite, .catalogBlock__linkWhiteWhite, .catalogBlock__linkWhite, .catalogBlock__list-item-buttonWhite, .contacts__link .textWhiteWhite, .contacts__link .textWhite, .contacts__map .balloon__linkWhiteWhite, .contacts__map .balloon__linkWhite, .catalogBlock__list-item-button { color: #fff; } .buttonMoreWhite:before, .buttonMoreWhiteWhite:before, .advantagesBlock__linkWhiteWhite:before, .advantagesBlock__linkWhite:before, .card__similar-linkWhiteWhite:before, .card__similar-linkWhite:before, .catalogBlock__linkWhiteWhite:before, .catalogBlock__linkWhite:before, .catalogBlock__list-item-buttonWhite:before, .contacts__link .textWhiteWhite:before, .contacts__link .textWhite:before, .contacts__map .balloon__linkWhiteWhite:before, .contacts__map .balloon__linkWhite:before, .catalogBlock__list-item-button:before, .buttonMoreWhite:after, .buttonMoreWhiteWhite:after, .advantagesBlock__linkWhiteWhite:after, .advantagesBlock__linkWhite:after, .card__similar-linkWhiteWhite:after, .card__similar-linkWhite:after, .catalogBlock__linkWhiteWhite:after, .catalogBlock__linkWhite:after, .catalogBlock__list-item-buttonWhite:after, .contacts__link .textWhiteWhite:after, .contacts__link .textWhite:after, .contacts__map .balloon__linkWhiteWhite:after, .contacts__map .balloon__linkWhite:after, .catalogBlock__list-item-button:after { background-color: #fff; } .buttonMoreWhite .text:before, .buttonMoreWhiteWhite .text:before, .advantagesBlock__linkWhiteWhite .text:before, .advantagesBlock__linkWhite .text:before, .card__similar-linkWhiteWhite .text:before, .card__similar-linkWhite .text:before, .catalogBlock__linkWhiteWhite .text:before, .catalogBlock__linkWhite .text:before, .catalogBlock__list-item-buttonWhite .text:before, .contacts__link .textWhiteWhite .text:before, .contacts__link .textWhite .text:before, .contacts__map .balloon__linkWhiteWhite .text:before, .contacts__map .balloon__linkWhite .text:before, .catalogBlock__list-item-button .text:before { background-color: #fff; } @media screen and (min-width: 370px) { .buttonMore:before, .buttonMoreWhite:before, .advantagesBlock__linkWhite:before, .advantagesBlock__link:before, .card__similar-linkWhite:before, .card__similar-link:before, .catalogBlock__linkWhite:before, .catalogBlock__link:before, .catalogBlock__list-item-button:before, .contacts__link .textWhite:before, .contacts__link .text:before, .contacts__map .balloon__linkWhite:before, .contacts__map .balloon__link:before, .buttonMore:after, .buttonMoreWhite:after, .advantagesBlock__linkWhite:after, .advantagesBlock__link:after, .card__similar-linkWhite:after, .card__similar-link:after, .catalogBlock__linkWhite:after, .catalogBlock__link:after, .catalogBlock__list-item-button:after, .contacts__link .textWhite:after, .contacts__link .text:after, .contacts__map .balloon__linkWhite:after, .contacts__map .balloon__link:after { display: block; } .buttonMore .text:before, .buttonMoreWhite .text:before, .advantagesBlock__linkWhite .text:before, .advantagesBlock__link .text:before, .card__similar-linkWhite .text:before, .card__similar-link .text:before, .catalogBlock__linkWhite .text:before, .catalogBlock__link .text:before, .catalogBlock__list-item-button .text:before, .contacts__link .textWhite .text:before, .contacts__link .text .text:before, .contacts__map .balloon__linkWhite .text:before, .contacts__map .balloon__link .text:before { display: block; } } @media screen and (min-width: 767px) and (min-height: 600px) { .buttonMore, .buttonMoreWhite, .advantagesBlock__linkWhite, .advantagesBlock__link, .card__similar-linkWhite, .card__similar-link, .catalogBlock__linkWhite, .catalogBlock__link, .catalogBlock__list-item-button, .contacts__link .textWhite, .contacts__link .text, .contacts__map .balloon__linkWhite, .contacts__map .balloon__link { font-size: 1rem; } .buttonMore:after, .buttonMoreWhite:after, .advantagesBlock__linkWhite:after, .advantagesBlock__link:after, .card__similar-linkWhite:after, .card__similar-link:after, .catalogBlock__linkWhite:after, .catalogBlock__link:after, .catalogBlock__list-item-button:after, .contacts__link .textWhite:after, .contacts__link .text:after, .contacts__map .balloon__linkWhite:after, .contacts__map .balloon__link:after { margin-left: 25px; } .buttonMore .text:before, .buttonMoreWhite .text:before, .advantagesBlock__linkWhite .text:before, .advantagesBlock__link .text:before, .card__similar-linkWhite .text:before, .card__similar-link .text:before, .catalogBlock__linkWhite .text:before, .catalogBlock__link .text:before, .catalogBlock__list-item-button .text:before, .contacts__link .textWhite .text:before, .contacts__link .text .text:before, .contacts__map .balloon__linkWhite .text:before, .contacts__map .balloon__link .text:before { width: 6px; height: 6px; margin-top: -3px; margin-right: 15px; } } @media screen and (min-width: 1200px) { .buttonMore:hover, .buttonMoreWhite:hover, .advantagesBlock__linkWhite:hover, .advantagesBlock__link:hover, .card__similar-linkWhite:hover, .card__similar-link:hover, .catalogBlock__linkWhite:hover, .catalogBlock__link:hover, .catalogBlock__list-item-button:hover, .contacts__link .textWhite:hover, .contacts__link .text:hover, .contacts__map .balloon__linkWhite:hover, .contacts__map .balloon__link:hover { cursor: pointer; } .buttonMore:hover:after, .buttonMoreWhite:hover:after, .advantagesBlock__linkWhite:hover:after, .advantagesBlock__link:hover:after, .card__similar-linkWhite:hover:after, .card__similar-link:hover:after, .catalogBlock__linkWhite:hover:after, .catalogBlock__link:hover:after, .catalogBlock__list-item-button:hover:after, .contacts__link .textWhite:hover:after, .contacts__link .text:hover:after, .contacts__map .balloon__linkWhite:hover:after, .contacts__map .balloon__link:hover:after { width: 0%; -webkit-transition-delay: 0s; transition-delay: 0s; } .buttonMore:hover:before, .buttonMoreWhite:hover:before, .advantagesBlock__linkWhite:hover:before, .advantagesBlock__link:hover:before, .card__similar-linkWhite:hover:before, .card__similar-link:hover:before, .catalogBlock__linkWhite:hover:before, .catalogBlock__link:hover:before, .catalogBlock__list-item-button:hover:before, .contacts__link .textWhite:hover:before, .contacts__link .text:hover:before, .contacts__map .balloon__linkWhite:hover:before, .contacts__map .balloon__link:hover:before { width: 100%; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } } @media screen and (min-width: 1600px) { .buttonMore, .buttonMoreWhite, .advantagesBlock__linkWhite, .advantagesBlock__link, .card__similar-linkWhite, .card__similar-link, .catalogBlock__linkWhite, .catalogBlock__link, .catalogBlock__list-item-button, .contacts__link .textWhite, .contacts__link .text, .contacts__map .balloon__linkWhite, .contacts__map .balloon__link { font-size: 1.125rem; } } .social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social__item { 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; margin-right: 15px; } .social__item svg { -webkit-transition: 0.4s; transition: 0.4s; fill: #424242; width: 30px; height: 30px; } .social__item:last-of-type { margin-right: 0; } .social__item:hover { cursor: pointer; } .social__item:hover svg { fill: #171717; } .loader { pointer-events: none; width: 3.125rem; height: 3.125rem; -webkit-animation: rotate 0.75s 0s linear infinite; animation: rotate 0.75s 0s linear infinite; } .loader svg { width: 100%; height: 100%; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .spinner { will-change: opacity, transform; pointer-events: none; position: relative; width: 42px; height: 42px; -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .spinner__item { position: absolute; background-color: #424242; width: 10px; height: 10px; border-radius: 50%; -webkit-animation: bounce_circularG 1.1s infinite; animation: bounce_circularG 1.1s infinite; } .spinner__item:nth-child(1) { left: 0; top: 17px; -webkit-animation-delay: 0.41s; animation-delay: 0.41s; } .spinner__item:nth-child(2) { left: 4px; top: 4px; -webkit-animation-delay: 0.55s; animation-delay: 0.55s; } .spinner__item:nth-child(3) { top: 0; left: 17px; -webkit-animation-delay: 0.69s; animation-delay: 0.69s; } .spinner__item:nth-child(4) { right: 4px; top: 4px; -webkit-animation-delay: 0.83s; animation-delay: 0.83s; } .spinner__item:nth-child(5) { right: 0; top: 17px; -webkit-animation-delay: 0.97s; animation-delay: 0.97s; } .spinner__item:nth-child(6) { right: 4px; bottom: 4px; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .spinner__item:nth-child(7) { left: 17px; bottom: 0; -webkit-animation-delay: 1.24s; animation-delay: 1.24s; } .spinner__item:nth-child(8) { left: 4px; bottom: 4px; -webkit-animation-delay: 1.38s; animation-delay: 1.38s; } @-webkit-keyframes bounce_circularG { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounce_circularG { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .thanks-popup .fancybox-bg { background: rgba(0,0,0,0.8) !important; } .thanks-popup .fancybox-slide > div { padding: 0; margin: 0; cursor: auto; overflow: visible; } .thanks-popup .fancybox-slide:hover { cursor: url("../img/general/close-white.svg"), default; } .thanks-popup .fancybox-close-small { right: 50%; width: 35px; height: 35px; top: -45px; margin-right: -17.5px; } .thanks-popup .fancybox-close-small:after { content: ''; top: 0; right: 0; background-color: transparent; background-image: url("../img/general/close-white.svg"); background-size: 100% 100%; width: 100%; height: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .thanks-popup .fancybox-close-small { right: 0; } } @media screen and (min-width: 1200px) { .thanks-popup .fancybox-close-small { display: none; } } .simple-popup .fancybox-bg { background: rgba(0,0,0,0.8) !important; } .simple-popup .fancybox-slide > div { padding: 0; margin: 0; } .simple-popup .fancybox-close-small { right: 50%; width: 35px; height: 35px; top: -45px; margin-right: -17.5px; } .simple-popup .fancybox-close-small:after { content: ''; top: 0; right: 0; background-color: transparent; background-image: url("../img/general/close-white.svg"); background-size: 100% 100%; width: 100%; height: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .simple-popup .fancybox-close-small { right: 0; } } @media screen and (min-width: 1200px) { .simple-popup .fancybox-close-small { display: none; } } @-webkit-keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } html { font-size: 16px; } html, body { width: 100%; height: auto; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; cursor: default; color: #171717; letter-spacing: 0.03em; -webkit-overflow-scrolling: touch; } a { color: inherit; text-decoration: none; } ul, li { padding: 0; margin: 0; } img { max-width: 100%; max-height: 100%; vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: 'Neumann', Helvetica, Arial, sans-serif; font-weight: normal; margin: 0; } strong, b { font-weight: normal; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; } i { font-weight: normal; font-style: normal; font-family: 'PFDinDisplayProItalic', Helvetica, Arial, sans-serif; } input:focus, textarea:focus, select:focus, button:focus, a:focus { outline: none; } input, textarea, select { cursor: pointer; } button { border-radius: 0; } article { font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.3; } @media screen and (min-width: 1200px) { article { font-size: 1rem; } } @media screen and (min-width: 1600px) { article { font-size: 1.125rem; } } article img { float: left; padding-right: 2.5rem; padding-bottom: 0.625rem; } article hr { margin: 35px 0; border-color: #171717; } article h1, article h2, article h3, article h4, article h5, article h6 { font-family: 'Neumann', Helvetica, Arial, sans-serif; text-transform: uppercase; margin-bottom: 25px; } article h1 { font-size: 1.375rem; } article h2 { font-size: 1.25rem; } article h3 { font-size: 1.125rem; } article h4, article h5, article h6 { font-size: 1rem; } article strong, article b { font-weight: normal; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; } article i { font-weight: normal; font-style: normal; font-family: 'PFDinDisplayProItalic', Helvetica, Arial, sans-serif; } article a { -webkit-transition: 0.2s; transition: 0.2s; border-bottom: 1px dashed rgba(0,0,0,0.5); } article a:hover { border-color: transparent; } article ul, article ol { padding: 0; padding-left: 1em; margin-bottom: 1em; } article ul:last-child, article ol:last-child { margin-bottom: 0; } article ul li, article ol li { margin-bottom: 0.3em; } article ul li:last-child, article ol li:last-child { margin-bottom: 0; } article ul li { list-style-type: square; } article ol { counter-reset: list 0; } article ol li { list-style-type: none; } article ol li:before { counter-increment: list; content: counter(list) '. '; color: inherit; } article p { margin-bottom: 1.5625rem; } article p:last-child { margin-bottom: 0; } article table { width: 80%; font-size: 0.875rem; } article table td, article table th { color: #000; background-color: #ececec; border: 2px solid #fff; padding: 0.75rem; vertical-align: middle; } article table th { text-align: center; } .page { width: 100%; min-height: 100vh; position: relative; overflow: hidden; } .content { position: relative; z-index: 3; width: 100%; height: 100%; min-height: 100vh; margin-top: 100px; } .page--main .content { margin-top: 0; } .page--card .content { margin-top: 100px; } @media screen and (min-width: 767px) and (min-height: 600px) { .content { margin-top: 140px; } .page--card .content { margin-top: 120px; } } @media screen and (min-width: 1200px) { .page--card .content { margin-top: 100px; } } @media screen and (min-width: 1600px) { .content { margin-top: 190px; } .page--card .content { margin-top: 120px; } } @media screen and (min-width: 1900px) { .page--card .content { margin-top: 140px; } } .container, .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { position: relative; margin-left: auto; margin-right: auto; } .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { padding-left: 30px; padding-right: 30px; } @media screen and (min-width: 1200px) { .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { padding-left: 100px; padding-right: 100px; } } @media screen and (min-width: 1900px) { .box__inner, .card__similar, .catalog__title-inner, .catalog__content, .catalogBlock__header, .contacts__inner, .contactsBlock, .form--callbackSimple .form__inner { padding-left: 190px; padding-right: 190px; } } .box__title, .about__top-title, .about__docs-title, .about__promo-title, .about__steps-title, .about__steps-item-title, .card__list-item-title, .card__similar-title, .catalog__title, .catalogBlock__title, .contacts__title, .contacts__map .balloon__title, .contactsBlock__title, .contactsBlock__feedback-title, .topBlock__title, .topBlock__subtitle, .feedback__title, .feedback__contacts-title, .form--callbackSimple .form__title, .formPopup__title, .thanksPopup__title, .goodItem__title, .menu__list-link { position: relative; line-height: 1.4; font-family: 'Neumann', Helvetica, Arial, sans-serif; text-transform: uppercase; } .box__decor, .topBlock__decor { pointer-events: none; z-index: -1; position: absolute; background-repeat: no-repeat; background-position: center center; background-size: cover; } .selectric-wrapper { position: relative; cursor: pointer; } .selectric-responsive { width: 100%; } .selectric { border: 1px solid #ddd; background: #f8f8f8; position: relative; overflow: hidden; } .selectric .label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 2.375rem 0 0.625rem; font-size: 0.75rem; line-height: 2.375rem; color: #444; height: 2.375rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric .button { display: block; position: absolute; right: 0; top: 0; width: 2.375rem; height: 2.375rem; line-height: 2.375rem; background-color: #f8f8f8; color: #bbb; text-align: center; font: 0/0 a; *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial; } .selectric-focus .selectric { border-color: #aaa; } .selectric-hover .selectric { border-color: #c4c4c4; } .selectric-hover .selectric .button { color: #a2a2a2; } .selectric-hover .selectric .button:after { border-top-color: #a2a2a2; } .selectric-open { z-index: 9999; } .selectric-open .selectric { border-color: #c4c4c4; } .selectric-open .selectric-items { display: block; } .selectric-disabled { opacity: 0.5; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-hide-select { position: relative; overflow: hidden; width: 0; height: 0; } .selectric-hide-select select { position: absolute; left: -100%; } .selectric-hide-select.selectric-is-native { position: absolute; width: 100%; height: 100%; z-index: 10; } .selectric-hide-select.selectric-is-native select { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; z-index: 1; box-sizing: border-box; opacity: 0; } .selectric-input { position: absolute !important; top: 0 !important; left: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important; } .selectric-temp-show { position: absolute !important; visibility: hidden !important; display: block !important; } .selectric-items { display: none; position: absolute; top: 100%; left: 0; background: #f8f8f8; border: 1px solid #c4c4c4; z-index: -1; box-shadow: 0 0 0.625rem -0.375rem; } .selectric-items .selectric-scroll { height: 100%; overflow: auto; } .selectric-above .selectric-items { top: auto; bottom: 100%; } .selectric-items ul, .selectric-items li { list-style: none; padding: 0; margin: 0; font-size: 0.75rem; line-height: 1.25rem; min-height: 1.25rem; } .selectric-items li { display: block; padding: 0.625rem; color: #666; cursor: pointer; } .selectric-items li.selected { background: #e0e0e0; color: #444; } .selectric-items li.highlighted { background: #d0d0d0; color: #444; } .selectric-items li:hover { background: #d5d5d5; color: #444; } .selectric-items .disabled { opacity: 0.5; cursor: default !important; background: none !important; color: #666 !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-items .selectric-group .selectric-group-label { font-weight: bold; padding-left: 0.625rem; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none; color: #444; } .selectric-items .selectric-group.disabled li { opacity: 1; } .selectric-items .selectric-group li { padding-left: 1.5625rem; } /*! jQuery UI - v1.12.1 - 2017-10-15 * http://jqueryui.com * Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif * Copyright jQuery Foundation and other contributors; Licensed MIT */ .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .ui-icon { display: inline-block; vertical-align: middle; margin-top: -.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; font-size: 100%; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px .4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { padding: .4em 1em; display: inline-block; position: relative; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Support: IE <= 11 */ overflow: visible; } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2em; box-sizing: border-box; text-indent: -9999px; white-space: nowrap; } /* no icon support for input elements */ input.ui-button.ui-button-icon-only { text-indent: 0; } /* button icon element(s) */ .ui-button-icon-only .ui-icon { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: .4em 1em; } /* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup { vertical-align: middle; display: inline-block; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-controlgroup .ui-controlgroup-label { padding: .4em 1em; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } /* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input { /* Support: IE8 only, Android < 4.4 only */ width: 75%; width: calc( 100% - 2.4em ); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: .12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-checkboxradio-disabled { pointer-events: none; } .ui-datepicker { z-index: 104 !important; width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; background: transparent; border: none; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; /* font-weight: bold; */ border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Icons */ .ui-datepicker .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; left: .5em; top: .3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0; } .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: .222em 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 2em; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget.ui-widget-content { /*border: 1px solid #ffe498;*/ border: none; box-shadow: inset 0 0 0 2px #ffe498; } .ui-widget-content { border: 1px solid #000; background: #ffffff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { /*border: 1px solid #ffd96b;*/ border: none; background: transparent; color: #000; font-family: 'RobotoLight', sans-serif; /*font-weight: bold;*/ } .ui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, /* We use html here because we need a greater specificity to make sure disabled works properly when clicked or hovered */ html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { /*border: 1px solid #000;*/ border: none; background: #fff; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { /*border: 1px solid #000;*/ border: none; background: #ffe49896; /*font-weight: normal;*/ /*color: #fff;*/ } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { /*border: 1px solid #000;*/ border: none; background: #ffe498; font-weight: normal; color: #000; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { /*border: 1px solid #000;*/ border: none; background: #fff; color: #000; } .ui-state-checked { /*border: 1px solid #dad55e;*/ border: none; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-datepicker-today .ui-state-highlight { background: #ffe49896; font-family: 'RobotoBold', sans-serif; /*font-weight: bold;*/ } .ui-datepicker-today .ui-state-active { /*border: 1px solid #000;*/ border: none; background: #ffe498; font-weight: normal; color: #000; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { /* background-image: url("../img//plugins/ui/ui-icons_444444_256x240.png"); */ } .ui-widget-header .ui-icon { /* background-image: url("../img/general/arrow_left.svg"); */ } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon { cursor: pointer; /* background-image: url("../img//plugins/ui/ui-icons_555555_256x240.png"); */ } .ui-state-active .ui-icon, .ui-button:active .ui-icon { /* background-image: url("../img//plugins/ui/ui-icons_ffffff_256x240.png"); */ } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { /* background-image: url("../img//plugins/ui/ui-icons_777620_256x240.png"); */ } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { /* background-image: url("../img//plugins/ui/ui-icons_cc0000_256x240.png"); */ } .ui-button .ui-icon { /* background-image: url("../img//plugins/ui/ui-icons_777777_256x240.png"); */ } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-image: url("../img/general/arrow.svg"); background-size: 100% 100%; background-position: center center; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-image: url("../img/general/arrow.svg"); background-size: 100% 100%; background-position: center center; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { box-shadow: 0px 0px 5px #666666; } @charset "UTF-8"; .fancybox-enabled { /* overflow: hidden;*/ } .fancybox-enabled body { overflow: visible; height: 100%; } .fancybox-is-hidden { position: absolute; top: -9999px; left: -9999px; visibility: hidden; } .fancybox-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99993; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } /* Make sure that the first one is on the top */ .fancybox-container ~ .fancybox-container { z-index: 99992; } .fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fancybox-outer { overflow-y: auto; -webkit-overflow-scrolling: touch; } .fancybox-bg { background: #1e1e1e; opacity: 0; -webkit-transition-duration: inherit; transition-duration: inherit; -webkit-transition-property: opacity; transition-property: opacity; -webkit-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: 1; -webkit-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-infobar, .fancybox-toolbar, .fancybox-caption-wrap { position: absolute; direction: ltr; z-index: 99997; opacity: 0; visibility: hidden; -webkit-transition: opacity .25s, visibility 0s linear .25s; transition: opacity .25s, visibility 0s linear .25s; box-sizing: border-box; } .fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar, .fancybox-show-caption .fancybox-caption-wrap { opacity: 1; visibility: visible; -webkit-transition: opacity .25s, visibility 0s; transition: opacity .25s, visibility 0s; } .fancybox-infobar { top: 0; left: 50%; margin-left: -79px; } .fancybox-infobar__body { display: inline-block; width: 70px; line-height: 44px; font-size: 13px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; text-align: center; color: #ddd; background-color: rgba(30, 30, 30, 0.7); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; } .fancybox-toolbar { top: 0; right: 0; } .fancybox-stage { overflow: hidden; direction: ltr; z-index: 99994; -webkit-transform: translate3d(0, 0, 0); } .fancybox-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; outline: none; white-space: normal; box-sizing: border-box; text-align: center; z-index: 99994; -webkit-overflow-scrolling: touch; display: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-property: opacity, -webkit-transform; -webkit-transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .fancybox-slide::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--previous, .fancybox-slide--current, .fancybox-slide--next { display: block; } .fancybox-slide--image { overflow: visible; } .fancybox-slide--image::before { display: none; } .fancybox-slide--video .fancybox-content, .fancybox-slide--video iframe { background: #000; } .fancybox-slide--map .fancybox-content, .fancybox-slide--map iframe { background: #E5E3DF; } .fancybox-slide--next { z-index: 99995; } .fancybox-slide > div { display: inline-block; position: relative; padding: 24px; margin: 44px 0 44px; border-width: 0; vertical-align: middle; text-align: left; background-color: #fff; overflow: auto; box-sizing: border-box; } .fancybox-slide .fancybox-image-wrap { position: absolute; top: 0; left: 0; margin: 0; padding: 0; border: 0; z-index: 99995; background: transparent; cursor: default; overflow: visible; -webkit-transform-origin: top left; transform-origin: top left; background-size: 100% 100%; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-can-zoomOut .fancybox-image-wrap { cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-image-wrap { cursor: zoom-in; } .fancybox-can-drag .fancybox-image-wrap { cursor: -webkit-grab; cursor: grab; } .fancybox-is-dragging .fancybox-image-wrap { cursor: -webkit-grabbing; cursor: grabbing; } .fancybox-image, .fancybox-spaceball { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--iframe .fancybox-content { padding: 0; width: 80%; height: 80%; max-width: calc(100% - 100px); max-height: calc(100% - 88px); overflow: visible; background: #fff; } .fancybox-iframe { display: block; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; background: #fff; } .fancybox-error { margin: 0; padding: 40px; width: 100%; max-width: 380px; background: #fff; cursor: default; } .fancybox-error p { margin: 0; padding: 0; color: #444; font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; } .fancybox-close-small { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; outline: none; background: transparent; z-index: 10; } .fancybox-close-small:after { content: '×'; position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; font: 20px/30px Arial,"Helvetica Neue",Helvetica,sans-serif; color: #888; font-weight: 300; text-align: center; border-radius: 50%; border-width: 0; background: #fff; -webkit-transition: background .25s; transition: background .25s; box-sizing: border-box; z-index: 2; } /* .fancybox-close-small:focus:after { outline: 1px dotted #888; } .fancybox-close-small:hover:after { color: #555; background: #eee; } */ .fancybox-slide--iframe .fancybox-close-small { top: 0; right: -44px; } .fancybox-slide--iframe .fancybox-close-small:after { background: transparent; font-size: 35px; color: #aaa; } .fancybox-slide--iframe .fancybox-close-small:hover:after { color: #fff; } /* Caption */ .fancybox-caption-wrap { bottom: 0; left: 0; right: 0; padding: 60px 30px 0 30px; background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; } .fancybox-caption { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.4); font-size: 14px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #fff; line-height: 20px; -webkit-text-size-adjust: none; } .fancybox-caption a, .fancybox-caption button, .fancybox-caption select { pointer-events: all; } .fancybox-caption a { color: #fff; text-decoration: underline; } /* Buttons */ .fancybox-button { display: inline-block; position: relative; margin: 0; padding: 0; border: 0; width: 44px; height: 44px; line-height: 44px; text-align: center; background: transparent; color: #ddd; border-radius: 0; vertical-align: top; outline: none; } .fancybox-button[disabled] { cursor: default; pointer-events: none; } .fancybox-infobar__body, .fancybox-button { background: rgba(30, 30, 30, 0.6); } .fancybox-button:hover:not([disabled]) { color: #fff; background: rgba(0, 0, 0, 0.8); } .fancybox-button::before, .fancybox-button::after { content: ''; pointer-events: none; position: absolute; background-color: currentColor; color: currentColor; opacity: 0.9; box-sizing: border-box; display: inline-block; } .fancybox-button[disabled]::before, .fancybox-button[disabled]::after { opacity: 0.3; } .fancybox-button--left::after, .fancybox-button--right::after { top: 18px; width: 6px; height: 6px; background: transparent; border-top: solid 2px currentColor; border-right: solid 2px currentColor; } .fancybox-button--left::after { left: 20px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .fancybox-button--right::after { right: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .fancybox-button--left { border-bottom-left-radius: 5px; } .fancybox-button--right { border-bottom-right-radius: 5px; } .fancybox-button--close::before, .fancybox-button--close::after { content: ''; display: inline-block; position: absolute; height: 2px; width: 16px; top: calc(50% - 1px); left: calc(50% - 8px); } .fancybox-button--close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .fancybox-button--close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* Navigation arrows */ .fancybox-arrow { position: absolute; top: 50%; margin: -50px 0 0 0; height: 100px; width: 54px; padding: 0; border: 0; outline: none; background: none; z-index: 99995; opacity: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .25s; transition: opacity .25s; } .fancybox-arrow::after { content: ''; position: absolute; top: 28px; width: 44px; height: 44px; background-color: rgba(30, 30, 30, 0.8); background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=); background-repeat: no-repeat; background-position: center center; background-size: 24px 24px; } .fancybox-arrow--right { right: 0; } .fancybox-arrow--left { left: 0; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .fancybox-arrow--right::after, .fancybox-arrow--left::after { left: 0; } .fancybox-show-nav .fancybox-arrow { opacity: 1; } .fancybox-show-nav .fancybox-arrow[disabled] { opacity: 0.3; } /* Loading indicator */ .fancybox-slide > .fancybox-loading { border: 6px solid rgba(100, 100, 100, 0.4); border-top: 6px solid rgba(255, 255, 255, 0.6); border-radius: 100%; height: 50px; width: 50px; -webkit-animation: fancybox-rotate .8s infinite linear; animation: fancybox-rotate .8s infinite linear; background: transparent; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 99999; } @-webkit-keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* Transition effects */ .fancybox-animated { -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1); transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } /* transitionEffect: slide */ .fancybox-fx-slide.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity: 0; } .fancybox-fx-slide.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); opacity: 0; } .fancybox-fx-slide.fancybox-slide--current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } /* transitionEffect: fade */ .fancybox-fx-fade.fancybox-slide--previous, .fancybox-fx-fade.fancybox-slide--next { opacity: 0; -webkit-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; } /* transitionEffect: zoom-in-out */ .fancybox-fx-zoom-in-out.fancybox-slide--previous { -webkit-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); opacity: 0; } .fancybox-fx-zoom-in-out.fancybox-slide--next { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; } .fancybox-fx-zoom-in-out.fancybox-slide--current { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } /* transitionEffect: rotate */ .fancybox-fx-rotate.fancybox-slide--previous { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); opacity: 0; } .fancybox-fx-rotate.fancybox-slide--next { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0; } .fancybox-fx-rotate.fancybox-slide--current { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } /* transitionEffect: circular */ .fancybox-fx-circular.fancybox-slide--previous { -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); opacity: 0; } .fancybox-fx-circular.fancybox-slide--next { -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); opacity: 0; } .fancybox-fx-circular.fancybox-slide--current { -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); opacity: 1; } /* transitionEffect: tube */ .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: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } /* Styling for Small-Screen Devices */ @media all and (max-width: 800px) { .fancybox-infobar { left: 0; margin-left: 0; } .fancybox-button--left, .fancybox-button--right { display: none !important; } .fancybox-caption { padding: 20px 0; margin: 0; } } /* Fullscreen */ .fancybox-button--fullscreen::before { width: 15px; height: 11px; left: calc(50% - 7px); top: calc(50% - 6px); border: 2px solid; background: none; } /* Slideshow button */ .fancybox-button--play::before, .fancybox-button--pause::before { top: calc(50% - 6px); left: calc(50% - 4px); background: transparent; } .fancybox-button--play::before { width: 0; height: 0; border-top: 6px inset transparent; border-bottom: 6px inset transparent; border-left: 10px solid; border-radius: 1px; } .fancybox-button--pause::before { width: 7px; height: 11px; border-style: solid; border-width: 0 2px 0 2px; } /* Thumbs */ .fancybox-thumbs { display: none; } .fancybox-button--thumbs { display: none; } @media all and (min-width: 800px) { .fancybox-button--thumbs { display: inline-block; } .fancybox-button--thumbs span { font-size: 23px; } .fancybox-button--thumbs::before { width: 3px; height: 3px; top: calc(50% - 2px); left: calc(50% - 2px); box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; } .fancybox-thumbs { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 220px; margin: 0; padding: 5px 5px 0 0; background: #fff; word-break: normal; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; box-sizing: border-box; z-index: 99995; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 220px; } .fancybox-thumbs > ul { list-style: none; position: absolute; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; font-size: 0; } .fancybox-thumbs > ul > li { float: left; overflow: hidden; max-width: 50%; padding: 0; margin: 0; width: 105px; height: 75px; position: relative; outline: none; border: 5px solid transparent; border-top-width: 0; border-right-width: 0; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; } li.fancybox-thumbs-loading { background: rgba(0, 0, 0, 0.1); } .fancybox-thumbs > ul > li > img { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; max-width: none; max-height: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-thumbs > ul > li:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 2px; border: 4px solid #4ea7f9; z-index: 99991; opacity: 0; -webkit-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); } .fancybox-thumbs > ul > li.fancybox-thumbs-active:before { opacity: 1; } } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 100px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 1;} .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; /*filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; */} .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; } /* .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } */ .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: #f28a00; } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); 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:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); 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:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ /** * Swiper 4.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2018 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 1, 2018 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .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; transition-property: transform; transition-property: transform, -webkit-transform; 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-free-mode > .swiper-wrapper { -webkit-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; 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; 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: -webkit-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: -webkit-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: -webkit-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: -webkit-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)); } /* IE10 Windows Phone 8 Fixes */ .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-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); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-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; 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: #007aff; } .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%); 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; 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%); 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; 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; 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: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-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-bullet-active { background: #ffffff; } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, 0.25); } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #ffffff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000000; } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, 0.25); } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #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 */ .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%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-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; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-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; 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; 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; 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; } .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } .box--about { padding-top: 0; padding-bottom: 35px; } .box--about .box__inner { padding-left: 0; padding-right: 0; } @media screen and (min-width: 960px) { .box--about .box__inner { padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1200px) { .box--about .box__inner { padding-left: 100px; padding-right: 100px; } } @media screen and (min-width: 1900px) { .box--about .box__inner { padding-left: 190px; padding-right: 190px; } } .box--about .feedback { margin-top: 0; } @media screen and (min-width: 767px) and (min-height: 600px) { .box--about { padding-bottom: 100px; } } @media screen and (min-width: 960px) { .box--about .feedback { margin-top: 190px; } } @media screen and (min-width: 1200px) { .box--about { padding-top: 40px; padding-bottom: 100px; } } @media screen and (min-width: 1600px) { .box--about { padding-bottom: 160px; } } .about { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about__decor { pointer-events: none; z-index: -1; position: absolute; } .about__decor--1 { width: 188px; height: 188px; top: 50%; left: 100%; margin-top: -94px; margin-left: 36px; display: none; } @media screen and (min-width: 1200px) { .about__decor--1 { display: block; } } .about__decor--2 { width: 100px; height: 100px; top: 100%; left: 0; margin-top: 30px; display: none; } @media screen and (min-width: 1200px) { .about__decor--2 { display: block; } } @media screen and (min-width: 1600px) { .about__decor--2 { width: 188px; height: 188px; } } .about__decor--3 { z-index: 2; width: 100px; height: 100px; top: -50px; right: -66.66666666666667px; background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-size: 1em 1em; background-position: 0 0; } @media screen and (min-width: 370px) { .about__decor--3 { right: 0; } } @media screen and (min-width: 960px) { .about__decor--3 { z-index: -1; width: 188px; height: 188px; top: -156.66666666666669px; right: -75.2px; background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-size: 20px 20px; background-position: 20px 20px; } } .about__decor--4 { width: 188px; height: 188px; left: -188px; top: 50%; margin-top: -94px; display: none; } @media screen and (min-width: 1600px) { .about__decor--4 { display: block; } } .about__decor--5 { width: 188px; height: 188px; bottom: -156.66666666666669px; right: -75.2px; display: none; } @media screen and (min-width: 960px) { .about__decor--5 { display: block; } } .about__top { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } @media screen and (min-width: 960px) { .about__top { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .about__top-left { padding: 0 30px; position: relative; width: 100%; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media screen and (min-width: 960px) { .about__top-left { padding: 0; width: 50%; } } .about__top-right { width: 100%; padding: 0; padding-top: 30px; position: relative; } .about__top-right:before { content: ''; position: absolute; background-color: #f3f3f3; bottom: 0; left: 0; width: 55px; height: 85%; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__top-right { padding-top: 40px; } } @media screen and (min-width: 960px) { .about__top-right { width: 50%; } } @media screen and (min-width: 1200px) { .about__top-right { padding: 0; padding-left: 55px; } } @media screen and (min-width: 1600px) { .about__top-right { padding-left: 85px; } .about__top-right:before { width: 85px; } } .about__top-title { font-size: 1.0625rem; line-height: 1.3; position: relative; } .about__top-title:first-letter { font-size: 1.5rem; } .about__top-title:after { content: ''; position: absolute; z-index: 2; width: 115%; height: 1px; left: 100%; top: 60%; margin-left: 40px; background-color: #8c8c8c; display: none; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__top-title { font-size: 1.5rem; } .about__top-title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .about__top-title { font-size: 1.875rem; } .about__top-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .about__top-title { font-size: 1.5625rem; } .about__top-title:after { display: block; } .about__top-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .about__top-title { font-size: 2.1875rem; } .about__top-title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .about__top-title { font-size: 2.8125rem; } .about__top-title:first-letter { font-size: 3.75rem; } } .about__top-text { width: 100%; margin-top: 20px; font-size: 1.125rem; line-height: 1.3; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; color: #353535; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__top-text { margin-top: 25px; width: 80%; } } @media screen and (min-width: 1600px) { .about__top-text { font-size: 1.25rem; } } .about__top-slider { position: relative; z-index: 5; } .about__top-slider-item { background-color: #fff; } @media screen and (min-width: 960px) { .about__top-slider-item { background-color: #f3f3f3; } } .about__top-slider-img-wrapp { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 270px; overflow: hidden; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__top-slider-img-wrapp { height: 412px; } } @media screen and (min-width: 960px) { .about__top-slider-img-wrapp { height: 312px; } } @media screen and (min-width: 1200px) { .about__top-slider-img-wrapp { height: 312px; } } @media screen and (min-width: 1600px) { .about__top-slider-img-wrapp { height: 460px; } } .about__top-slider-img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .about__top-slider-caption { width: 100%; height: 55px; 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; padding-left: 0; } @media screen and (min-width: 1200px) { .about__top-slider-caption { width: 65%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-left: 70px; } } @media screen and (min-width: 1600px) { .about__top-slider-caption { height: 80px; padding-left: 90px; } } .about__top-slider-caption-inner { font-size: 0.875rem; line-height: 1.3; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b1b1b1; letter-spacing: 0.03em; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__top-slider-caption-inner { font-size: 1rem; } } @media screen and (min-width: 960px) { .about__top-slider-caption-inner { font-size: 0.875rem; } } .about__top-slider-pagination { position: absolute; z-index: 2; left: 0; bottom: 55px; width: 70px; height: 70px; background-color: #f3f3f3; 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; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; text-align: center; font-family: 'Neumann', Helvetica, Arial, sans-serif; line-height: 70px; font-size: 0.875rem; display: none; } .about__top-slider-pagination .swiper-pagination-current { font-size: 1.25rem; } @media screen and (min-width: 1200px) { .about__top-slider-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1600px) { .about__top-slider-pagination { bottom: 80px; width: 90px; height: 90px; } .about__top-slider-pagination .swiper-pagination-current { font-size: 1.5rem; } } .about__top-slider-nav { width: 100%; position: absolute; right: 0; bottom: 55px; z-index: 2; height: 65px; 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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 1200px) { .about__top-slider-nav { width: 160px; height: 55px; right: 0; bottom: 0; } } @media screen and (min-width: 1600px) { .about__top-slider-nav { height: 80px; } } .about__top-slider-button-prev, .about__top-slider-button-next { width: 65px; height: 100%; 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; outline: none; } .about__top-slider-button-prev svg, .about__top-slider-button-next svg { -webkit-transition: 0.4s; transition: 0.4s; width: 22px; height: 22px; fill: rgba(3,3,3,0.5); } @media screen and (min-width: 960px) { .about__top-slider-button-prev, .about__top-slider-button-next { width: 80px; } } @media screen and (min-width: 1200px) { .about__top-slider-button-prev:hover, .about__top-slider-button-next:hover { cursor: pointer; } .about__top-slider-button-prev:hover svg, .about__top-slider-button-next:hover svg { fill: #030303; } } @media screen and (min-width: 1600px) { .about__top-slider-button-prev, .about__top-slider-button-next { width: 100px; } .about__top-slider-button-prev svg, .about__top-slider-button-next svg { width: 28px; height: 28px; } } .about__top-slider-button-prev { background-color: #fff; } @media screen and (min-width: 960px) { .about__top-slider-button-prev { background-color: #f3f3f3; } } @media screen and (min-width: 1200px) { .about__top-slider-button-prev { background-color: transparent; } } .about__top-slider-button-next { background-color: #fff; } @media screen and (min-width: 960px) { .about__top-slider-button-next { background-color: #f3f3f3; } } @media screen and (min-width: 1200px) { .about__top-slider-button-next { background-color: #fff; } } .about__article { width: 100%; padding: 25px 30px; position: relative; margin-top: 30px; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 1.125rem; line-height: 1.3; text-align: center; color: #171717; } .about__article:after, .about__article:before { content: ''; position: absolute; width: 157px; height: 1px; background-color: #bbb; } .about__article:before { top: 0; left: 50%; margin-left: -78.5px; } .about__article:after { bottom: 0; right: 50%; margin-right: -78.5px; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__article { width: 90%; margin-top: 60px; } } @media screen and (min-width: 960px) { .about__article { width: 65%; padding: 25px 0; } .about__article:after, .about__article:before { background-color: #565656; margin: 0; } .about__article:after:before, .about__article:before:before { left: -78.5px; } .about__article:after:after, .about__article:before:after { right: -78.5px; } } @media screen and (min-width: 1200px) { .about__article { width: 45%; } .about__article:after, .about__article:before { width: 232px; } .about__article:before { top: 0; left: -116px; } .about__article:after { bottom: 0; right: -116px; } } @media screen and (min-width: 1600px) { .about__article { font-size: 1.1875rem; padding: 45px 0; } } .about__docs { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-top: 30px; padding: 0 30px; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__docs { margin-top: 60px; } } @media screen and (min-width: 960px) { .about__docs { padding: 0; margin-top: 90px; } } .about__docs-title { width: 100%; text-align: left; font-size: 1.0625rem; line-height: 1.3; position: relative; } .about__docs-title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__docs-title { text-align: center; font-size: 1.5rem; } .about__docs-title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .about__docs-title { font-size: 1.875rem; } .about__docs-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .about__docs-title { font-size: 1.5625rem; } .about__docs-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .about__docs-title { font-size: 2.1875rem; } .about__docs-title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .about__docs-title { font-size: 2.8125rem; } .about__docs-title:first-letter { font-size: 3.75rem; } } .about__docs-list { position: relative; width: 100%; margin-top: 20px; padding: 0 35px; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__docs-list { margin-top: 60px; } } @media screen and (min-width: 960px) { .about__docs-list { padding: 0 80px; } } @media screen and (min-width: 1200px) { .about__docs-list { padding: 0; } } @media screen and (min-width: 1600px) { .about__docs-list { margin-top: 90px; } } .about__docs-item { position: relative; width: 100%; } @media screen and (min-width: 1200px) { .about__docs-item:hover .about__docs-img { opacity: 1; } .about__docs-item:hover .about__docs-img:before { opacity: 1; height: 50px; } .about__docs-item:hover .about__docs-caption { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .about__docs-img { position: relative; will-change: opacity, transform; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; height: 80px; 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; padding: 0 5px; -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s; opacity: 1; } .about__docs-img:before { will-change: opacity; content: ''; position: absolute; top: 100%; left: 50%; margin-top: 10px; height: 0; width: 1px; background-color: #000; -webkit-transition: 0.4s; transition: 0.4s; opacity: 0; display: none; } @media screen and (min-width: 960px) { .about__docs-img { height: 100px; } } @media screen and (min-width: 1200px) { .about__docs-img { opacity: 0.7; } .about__docs-img:before { display: block; } } @media screen and (min-width: 1600px) { .about__docs-img { height: 136px; } } .about__docs-caption { will-change: opacity, transform; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: 0.4s; transition: 0.4s; -webkit-transition-delay: 0s; transition-delay: 0s; margin-top: 20px; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; line-height: 1.3; text-align: center; font-size: 0.875rem; } @media screen and (min-width: 480px) { .about__docs-caption { font-size: 1rem; } } @media screen and (min-width: 1200px) { .about__docs-caption { text-align: left; margin-top: 70px; opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } } .about__docs-list-prev, .about__docs-list-next { position: absolute; height: 100%; top: 0; width: 65px; 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; outline: none; padding: 0; } .about__docs-list-prev.swiper-button-disabled, .about__docs-list-next.swiper-button-disabled { opacity: 0.5; pointer-events: none; } .about__docs-list-prev svg, .about__docs-list-next svg { -webkit-transition: 0.4s; transition: 0.4s; width: 22px; height: 22px; fill: rgba(3,3,3,0.5); } @media screen and (min-width: 960px) { .about__docs-list-prev, .about__docs-list-next { width: 80px; } } @media screen and (min-width: 1200px) { .about__docs-list-prev, .about__docs-list-next { padding-top: 50px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .about__docs-list-prev.swiper-button-disabled, .about__docs-list-next.swiper-button-disabled { opacity: 0; } .about__docs-list-prev:hover, .about__docs-list-next:hover { cursor: pointer; } .about__docs-list-prev:hover svg, .about__docs-list-next:hover svg { fill: #030303; } } @media screen and (min-width: 1600px) { .about__docs-list-prev, .about__docs-list-next { padding-top: 68px; width: 100px; } .about__docs-list-prev svg, .about__docs-list-next svg { width: 28px; height: 28px; } } .about__docs-list-prev { left: 0; right: auto; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media screen and (min-width: 1200px) { .about__docs-list-prev { left: auto; right: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .about__docs-list-next { right: 0; left: auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 1200px) { .about__docs-list-next { right: auto; left: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .about__promo { width: 100%; margin-top: 30px; padding: 0 30px; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__promo { margin-top: 40px; } } @media screen and (min-width: 960px) { .about__promo { padding: 0; } } .about__promo-title { width: 100%; text-align: left; font-size: 1.0625rem; line-height: 1.3; } .about__promo-title span:first-child { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__promo-title { text-align: center; font-size: 1.5rem; } .about__promo-title span:first-child { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .about__promo-title { font-size: 1.875rem; } .about__promo-title span:first-child { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .about__promo-title { font-size: 1.5625rem; } .about__promo-title span:first-child { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .about__promo-title { font-size: 2.1875rem; } .about__promo-title span:first-child { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .about__promo-title { font-size: 2.8125rem; } .about__promo-title span:first-child { font-size: 3.75rem; } } .about__promo-list { width: 100%; margin-top: 20px; 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; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__promo-list { margin-top: 60px; } } @media screen and (min-width: 1600px) { .about__promo-list { margin-top: 90px; } } .about__promo-item { width: 20vw; height: 66px; 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; margin-bottom: 17px; } @media screen and (min-width: 480px) { .about__promo-item { width: 16.666666666666668vw; height: 80px; } } @media screen and (min-width: 960px) { .about__promo-item { width: 12.5vw; height: 100px; margin-bottom: 30px; } } @media screen and (min-width: 1200px) { .about__promo-item { width: 11vw; } .about__promo-item:hover .about__promo-img { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } } @media screen and (min-width: 1600px) { .about__promo-item { width: 200px; height: 136px; } } .about__promo-img { will-change: opacity, transform; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; 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; padding: 0 5px; -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .about__steps { width: 100%; margin-top: 30px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__steps { margin-top: 60px; } } @media screen and (min-width: 1600px) { .about__steps { margin-top: 100px; } } .about__steps-title { text-align: left; font-size: 1.0625rem; line-height: 1.3; position: relative; } .about__steps-title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__steps-title { text-align: center; font-size: 1.5rem; } .about__steps-title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .about__steps-title { font-size: 1.875rem; } .about__steps-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .about__steps-title { font-size: 1.5625rem; } .about__steps-title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .about__steps-title { font-size: 2.1875rem; } .about__steps-title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .about__steps-title { font-size: 2.8125rem; } .about__steps-title:first-letter { font-size: 3.75rem; } } .about__steps-inner { margin-top: 30px; width: 100%; position: relative; } @media screen and (min-width: 1200px) { .about__steps-inner { margin-top: 190px; } } @media screen and (min-width: 1600px) { .about__steps-inner { width: 80%; } } .about__steps-list { width: 100%; } .about__steps-item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about__steps-item:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about__steps-item:nth-child(2n+2) .about__steps-count { left: auto; right: 0; } .about__steps-item:nth-child(2n+2) .about__steps-item-left { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .about__steps-item:nth-child(2n+2) .about__steps-item-right { padding-left: 0; } .about__steps-item:nth-child(2n+2) .about__steps-item-right:after { display: none; } @media screen and (min-width: 1200px) { .about__steps-item:nth-child(2n+2) .about__steps-item-right:after { display: block; } } .about__steps-item:nth-child(2n+2) .about__steps-item-right:before { display: none; } .about__steps-item:nth-child(3n+3) .about__steps-count { top: auto; bottom: 0; } .about__steps-item:nth-child(3n+3) .about__steps-item-left { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .about__steps-item:first-child { background-color: #f3f3f3; } @media screen and (min-width: 960px) { .about__steps-item:first-child { background-color: transparent; } } .about__steps-item:last-child .about__steps-item-right:before { bottom: auto; top: 100%; } @media screen and (min-width: 960px) { .about__steps-item { height: 430px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .about__steps-item:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .about__steps-item:nth-child(2n+2) .about__steps-item-right { padding-left: 0; } .about__steps-item:hover .about__steps-img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } } @media screen and (min-width: 1600px) { .about__steps-item:nth-child(2n+2) .about__steps-item-right { padding-left: 75px; } } .about__steps-item-left { width: 100%; height: auto; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 30px; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__steps-item-left { padding: 40px 30px; } } @media screen and (min-width: 960px) { .about__steps-item-left { width: 50%; height: 100%; padding: 0 75px; } } .about__steps-item-right { position: relative; width: 100%; background-color: #f3f3f3; } .about__steps-item-right:before, .about__steps-item-right:after { content: ''; position: absolute; z-index: -1; background-color: #f3f3f3; width: 100%; } .about__steps-item-right:before { height: 90px; left: 0; bottom: 100%; display: none; } .about__steps-item-right:after { left: 0; top: -90px; height: 100%; border: 90px solid #f3f3f3; box-sizing: content-box; border-right: 0; border-left: 0; display: none; } @media screen and (min-width: 960px) { .about__steps-item-right { width: 50%; } } @media screen and (min-width: 1200px) { .about__steps-item-right:before { display: block; } } .about__steps-item-inner { width: 100%; height: auto; overflow: hidden; } .about__steps-item-inner .mCSB_container { margin-right: 10px; } .about__steps-item-inner .mCSB_scrollTools { background: #e1e1e1; } .about__steps-item-inner .mCSB_scrollTools_vertical { width: 1px; } .about__steps-item-inner .mCSB_scrollTools .mCSB_dragger_bar { width: 1px; background-color: #424242; } @media screen and (min-width: 1200px) { .about__steps-item-inner { height: 50%; } } .about__steps-item-title { font-size: 1.125rem; line-height: 1.3; } @media screen and (min-width: 1600px) { .about__steps-item-title { font-size: 1.5rem; } } .about__steps-item-text { margin-top: 20px; font-size: 1.125rem; line-height: 1.3; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; } @media screen and (min-width: 1600px) { .about__steps-item-text { font-size: 1.25rem; } } .about__steps-item-button { margin-top: 20px; } .about__steps-img-wrapp { position: relative; width: 100%; height: 200px; overflow: hidden; } @media screen and (min-width: 767px) and (min-height: 600px) { .about__steps-img-wrapp { height: 300px; } } @media screen and (min-width: 960px) { .about__steps-img-wrapp { height: 350px; } } @media screen and (min-width: 1200px) { .about__steps-img-wrapp { width: 430px; height: 430px; } } .about__steps-img { will-change: transform; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 2s; transition: -webkit-transform 2s; transition: transform 2s; transition: transform 2s, -webkit-transform 2s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .about__steps-count { position: absolute; z-index: 2; width: 100px; height: 100px; background-color: #f3f3f3; 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; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; text-align: center; font-family: 'Neumann', Helvetica, Arial, sans-serif; line-height: 100px; font-size: 1.5rem; display: none; } .about__steps-count .current { font-size: 1.875rem; } @media screen and (min-width: 960px) { .about__steps-count { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.5rem; } .about__steps-count .current { font-size: 1.875rem; } } @media screen and (min-width: 1600px) { .about__steps-count { font-size: 1.875rem; } .about__steps-count .current { font-size: 2.5rem; } } .advantagesBlock { padding-left: 0; margin-top: 100px; height: auto; position: relative; } @media screen and (min-width: 767px) and (min-height: 600px) { .advantagesBlock { margin-top: 100px; } } @media screen and (min-width: 960px) { .advantagesBlock { margin-top: 130px; } } @media screen and (min-width: 1200px) { .advantagesBlock { margin-top: 130px; height: 70vh; padding-left: 150px; } } @media screen and (min-width: 1200px) and (max-height: 700px) { .advantagesBlock { height: 100vh; } } @media screen and (min-width: 1600px) { .advantagesBlock { padding-left: 218px; height: 78vh; } } @media screen and (min-width: 1900px) { .advantagesBlock { padding-left: 318px; height: 88vh; } } .advantagesBlock__decor { pointer-events: none; z-index: -1; position: absolute; } .advantagesBlock__decor--1 { width: 188px; height: 188px; top: -150px; left: 50px; } .advantagesBlock__decor--2 { width: 129px; height: 82px; top: 20px; right: 30px; display: block; } @media screen and (min-width: 767px) and (min-height: 600px) { .advantagesBlock__decor--2 { height: 188px; width: 125.33333333333333px; } } @media screen and (min-width: 960px) { .advantagesBlock__decor--2 { width: 188px; height: 188px; } } @media screen and (min-width: 1200px) { .advantagesBlock__decor--1 { left: 50px; } .advantagesBlock__decor--2 { display: none; } } @media screen and (min-width: 1600px) { .advantagesBlock__decor--1 { left: 111px; } } .advantagesBlock__inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 960px) { .advantagesBlock__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width: 1200px) { .advantagesBlock__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .advantagesBlock__left { width: 100%; height: 53vh; min-height: 300px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } @media screen and (min-width: 960px) { .advantagesBlock__left { width: 100%; height: 53vh; } } @media screen and (min-width: 1200px) { .advantagesBlock__left { width: 72%; height: 100%; } } .advantagesBlock__right { position: relative; width: 100%; height: auto; padding-left: 0; } @media screen and (min-width: 960px) { .advantagesBlock__right { width: 100%; height: auto; padding-left: 0; } } @media screen and (min-width: 1200px) { .advantagesBlock__right { width: 28%; height: 100%; padding-left: 45px; } } .advantagesBlock__info { position: absolute; z-index: 2; left: 0; width: 100%; height: 100px; top: -100px; padding: 0px 30px; text-align: center; background-color: #fff; text-transform: uppercase; color: #b3b3b3; 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; font-size: 1rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .advantagesBlock__info { height: 100px; top: -100px; } } @media screen and (min-width: 960px) { .advantagesBlock__info { height: 130px; top: -130px; font-size: 1.25rem; } } @media screen and (min-width: 1200px) { .advantagesBlock__info { font-size: 1rem; padding: 40px 55px; top: 0; width: auto; height: auto; } } .advantagesBlock__wrapp { position: absolute; z-index: 3; top: 25%; right: 100%; width: 474px; height: 474px; 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; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); display: none; } @media screen and (min-width: 960px) { .advantagesBlock__wrapp { display: none; } } @media screen and (min-width: 1200px) { .advantagesBlock__wrapp { display: -webkit-box; display: -ms-flexbox; display: flex; } } .advantagesBlock__link-wrapp { height: 90px; width: 324px; background-color: #f3f3f3; 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; } .advantagesBlock__link-wrapp:hover { cursor: pointer; } .advantagesBlock__link-wrapp:hover .advantagesBlock__link:after { width: 0%; -webkit-transition-delay: 0s; transition-delay: 0s; } .advantagesBlock__link-wrapp:hover .advantagesBlock__link:before { width: 100%; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } @media screen and (min-width: 1200px) { .advantagesBlock__link-wrapp { height: 90px; width: 324px; } } @media screen and (min-width: 1600px) { .advantagesBlock__link-wrapp { height: 128px; width: 474px; } } .advantagesBlock__link { font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; pointer-events: none; } .advantagesBlock__link:after { width: 120%; } .advantagesBlock__list { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 105%; z-index: 2; overflow: hidden; } @media screen and (min-width: 960px) { .advantagesBlock__list { height: 105%; } } @media screen and (min-width: 1200px) { .advantagesBlock__list { height: 100%; } } .advantagesBlock__list-item { position: absolute; z-index: 3; width: 28px; height: 28px; background-color: rgba(23,23,23,0.7); border-radius: 50%; 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; -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } .advantagesBlock__list-item .icon { will-change: transform; 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; -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .advantagesBlock__list-item svg { fill: #fff; width: 10px; height: 10px; -webkit-transition: 0.4s; transition: 0.4s; } .advantagesBlock__list-item:before { display: block; position: absolute; content: ''; width: 140%; height: 140%; top: -20%; left: -20%; border-radius: 100%; border: 2px solid #fff; -webkit-transition: border-color 1s cubic-bezier(0.23, 1, 0.32, 1); transition: border-color 1s cubic-bezier(0.23, 1, 0.32, 1); } .advantagesBlock__list-item:after { position: absolute; content: ''; width: 1px; height: 0; left: 50%; top: 120%; background-color: #171717; display: block; -webkit-transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); } .advantagesBlock__list-item.active { cursor: pointer; background-color: rgba(255,255,255,0.7); } .advantagesBlock__list-item.active svg { fill: #000; } .advantagesBlock__list-item.active .icon { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .advantagesBlock__list-item.active:before { border-color: #171717; -webkit-animation: pulsate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: pulsate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .advantagesBlock__list-item.active:after { -webkit-transition: height 1.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: height 1.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; height: 53vh; } @media screen and (min-width: 370px) { .advantagesBlock__list-item { width: 38px; height: 38px; } .advantagesBlock__list-item svg { width: 12px; height: 12px; } } @media screen and (min-width: 960px) { .advantagesBlock__list-item { -webkit-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } .advantagesBlock__list-item:after { display: block; } } @media screen and (min-width: 1200px) { .advantagesBlock__list-item { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .advantagesBlock__list-item:after { display: none; } .advantagesBlock__list-item:hover { cursor: pointer; background-color: #fff; } .advantagesBlock__list-item:hover svg { fill: #000; } .advantagesBlock__list-item:hover .icon { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .advantagesBlock__list-item:hover:before { border-color: #171717; -webkit-animation: pulsate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: pulsate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } } .advantagesBlock__content { padding-top: 30px; padding-bottom: 30px; width: 100%; height: 100%; height: auto; overflow: hidden; } .advantagesBlock__content .mCSB_container { margin-right: 0; } .advantagesBlock__content .mCSB_scrollTools { background: #e1e1e1; } .advantagesBlock__content .mCSB_scrollTools_vertical { width: 2px; right: auto; left: -24px; } .advantagesBlock__content .mCSB_scrollTools .mCSB_dragger_bar { width: 2px; background-color: #424242; } @media screen and (min-width: 767px) and (min-height: 600px) { .advantagesBlock__content { padding-top: 40px; } } @media screen and (min-width: 960px) { .advantagesBlock__content { height: auto; padding-bottom: 30px; } } @media screen and (min-width: 1200px) { .advantagesBlock__content { height: 100%; padding: 0; padding-top: 15px; } } .advantagesBlock__content-item { width: 100%; display: none; padding: 0 30px; } .advantagesBlock__content-item article { font-size: 1.125rem; } .advantagesBlock__content-item article p, .advantagesBlock__content-item article ul, .advantagesBlock__content-item article ol, .advantagesBlock__content-item article table, .advantagesBlock__content-item article h1, .advantagesBlock__content-item article h2, .advantagesBlock__content-item article h3, .advantagesBlock__content-item article h4, .advantagesBlock__content-item article h5, .advantagesBlock__content-item article h6 { width: 100%; } .advantagesBlock__content-item article p { margin: 0.5em 0; } .advantagesBlock__content-item article h1, .advantagesBlock__content-item article h2, .advantagesBlock__content-item article h3, .advantagesBlock__content-item article h4, .advantagesBlock__content-item article h5, .advantagesBlock__content-item article h6 { font-size: 1.375rem; line-height: 1.3; } .advantagesBlock__content-item article hr { position: relative; left: -30px; width: 50%; } @media screen and (min-width: 767px) and (min-height: 600px) { .advantagesBlock__content-item article p, .advantagesBlock__content-item article ul, .advantagesBlock__content-item article ol, .advantagesBlock__content-item article table, .advantagesBlock__content-item article h1, .advantagesBlock__content-item article h2, .advantagesBlock__content-item article h3, .advantagesBlock__content-item article h4, .advantagesBlock__content-item article h5, .advantagesBlock__content-item article h6 { width: 75%; } } @media screen and (min-width: 960px) { .advantagesBlock__content-item { padding: 0 30px; } .advantagesBlock__content-item article hr { left: -30px; width: 50%; } } @media screen and (min-width: 1200px) { .advantagesBlock__content-item { padding: 0; } .advantagesBlock__content-item article h1, .advantagesBlock__content-item article h2, .advantagesBlock__content-item article h3, .advantagesBlock__content-item article h4, .advantagesBlock__content-item article h5, .advantagesBlock__content-item article h6 { font-size: 1.375rem; } .advantagesBlock__content-item article hr { left: 0; width: 100%; } } @media screen and (min-width: 1600px) { .advantagesBlock__content-item article h1, .advantagesBlock__content-item article h2, .advantagesBlock__content-item article h3, .advantagesBlock__content-item article h4, .advantagesBlock__content-item article h5, .advantagesBlock__content-item article h6 { font-size: 1.875rem; } } .box--card .form--callbackSimple { position: absolute; top: 100%; left: 0; width: 100%; } .card { margin-top: 0; margin-bottom: 0; } @media screen and (min-width: 960px) { .card { margin-top: 25px; } } @media screen and (min-width: 1200px) { .card { margin-bottom: 100px; } } @media screen and (min-width: 1600px) { .card { margin-top: 35px; margin-bottom: 160px; } } .card__decor { pointer-events: none; z-index: -1; position: absolute; } .card__decor--1 { width: 140px; height: 140px; top: 50%; right: 24px; margin-top: -70px; display: none; } @media screen and (min-width: 1200px) { .card__decor--1 { display: block; } } @media screen and (min-width: 1600px) { .card__decor--1 { right: 54px; width: 188px; height: 188px; margin-top: -94px; } } @media screen and (min-width: 1900px) { .card__decor--1 { right: 74px; } } .card__list { width: 100%; padding-top: 0; position: relative; } @media screen and (min-width: 960px) { .card__list { padding-top: 54px; } } .card__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 100%; height: auto; } .card__list-item:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .card__list-item:nth-child(odd) .card__list-item-column--text { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .card__list-item:first-child { position: relative; } .card__list-item:first-child:before { pointer-events: none; position: absolute; z-index: -1; content: ''; background-color: #f3f3f3; height: 54px; width: 414px; top: -54px; left: 30px; display: none; } .card__list-item:first-child .card__list-item-column--text { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .card__list-item:first-child .card__list-item-text-wrapp { padding-right: 30px; width: 100%; } .card__list-item:last-child { margin-top: 3px; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 960px) { .card__list-item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 450px; } .card__list-item:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .card__list-item:first-child:before { left: 30px; display: block; } .card__list-item:first-child .card__list-item-text-wrapp { width: 68%; padding-right: 0; } .card__list-item:last-child { height: 300px; margin-top: 0; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 1200px) { .card__list-item { height: 550px; } .card__list-item:first-child:before { left: 100px; } .card__list-item:last-child { height: 400px; } } @media screen and (min-width: 1600px) { .card__list-item { height: 600px; } .card__list-item:last-child { height: 500px; } .card__list-item:first-child:before { height: 94px; } .card__list-item:first-child .card__list-item-text-wrapp { width: 65%; } } @media screen and (min-width: 1900px) { .card__list-item { height: 700px; } .card__list-item:first-child:before { left: 190px; } .card__list-item:last-child { height: 575px; } } .card__list-item-column { position: relative; width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__list-item-column--text .card__list-item-text-wrapp { padding: 30px; } @media screen and (min-width: 960px) { .card__list-item-column { width: 50%; height: 100%; } .card__list-item-column--text .card__list-item-text-wrapp { padding: 0 30px; } } @media screen and (min-width: 1200px) { .card__list-item-column--text .card__list-item-text-wrapp { padding: 0 50px; } } @media screen and (min-width: 1600px) { .card__list-item-column--text .card__list-item-text-wrapp { padding: 0 90px; } } .card__list-item-line { position: absolute; top: 0; left: 30px; height: 120px; width: 1px; background-color: #171717; display: none; } @media screen and (min-width: 960px) { .card__list-item-line { display: block; } } @media screen and (min-width: 1200px) { .card__list-item-line { left: 50px; height: 170px; } } @media screen and (min-width: 1600px) { .card__list-item-line { left: 90px; } } @media screen and (min-width: 1900px) { .card__list-item-line { height: 215px; } } .card__list-item-img-wrapp { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 41vh; min-height: 303px; overflow: hidden; margin-right: 3px; } .card__list-item-img-wrapp:last-child { margin-right: 0; } .card__list-item-img-wrapp--1 { height: 53vh; } .card__list-item-img-wrapp--6 { display: block; } @media screen and (min-width: 767px) and (min-height: 600px) { .card__list-item-img-wrapp { height: 55vh; } .card__list-item-img-wrapp--1 { height: 53vh; } } @media screen and (min-width: 960px) { .card__list-item-img-wrapp { height: 100%; } .card__list-item-img-wrapp--1, .card__list-item-img-wrapp--2, .card__list-item-img-wrapp--3, .card__list-item-img-wrapp--4, .card__list-item-img-wrapp--5 { height: 100%; } .card__list-item-img-wrapp--6 { display: none; } } @media screen and (min-width: 1200px) { .card__list-item-img-wrapp:hover .card__list-item-img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } } .card__list-item-img { will-change: transform; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 2s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 2s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .card__list-item-decor { width: 50%; height: 100%; background-color: #f3f3f3; display: none; } .card__list-item-decor .card__list-item-img-wrapp { margin-top: 3px; } @media screen and (min-width: 960px) { .card__list-item-decor { display: block; } } .card__list-item-title { font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0.06em; } @media screen and (min-width: 767px) and (min-height: 600px) { .card__list-item-title { font-size: 1.5rem; } } @media screen and (min-width: 1600px) { .card__list-item-title { font-size: 2.1875rem; } } @media screen and (min-width: 1900px) { .card__list-item-title { font-size: 2.5rem; } } .card__list-item-subtitle { margin-top: 10px; font-size: 1.125rem; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; line-height: 1.3; color: #4c4c4c; letter-spacing: 0.03em; } @media screen and (min-width: 767px) and (min-height: 600px) { .card__list-item-subtitle { letter-spacing: 0.08em; } } @media screen and (min-width: 1600px) { .card__list-item-subtitle { font-size: 1.25rem; } } .card__list-item-text-wrapp { width: 100%; height: auto; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; overflow: hidden; } .card__list-item-text-wrapp .card__list-item-line { top: auto; bottom: -60px; left: 50%; } @media screen and (min-width: 960px) { .card__list-item-text-wrapp { width: 50%; height: 100%; } } @media screen and (min-width: 1200px) { .card__list-item-text-wrapp .card__list-item-line { top: auto; bottom: -85px; left: 50%; } } .card__list-item-text { font-size: 1.125rem; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; line-height: 1.3; color: #4c4c4c; margin-top: 20px; padding-top: 20px; position: relative; } .card__list-item-text:after { content: ''; position: absolute; left: 0; top: 0; width: 130px; height: 1px; background-color: #171717; } .card__list-item-text:first-child { margin: 0; padding: 0; } .card__list-item-text:first-child:after { display: none; } @media screen and (min-width: 960px) { .card__list-item-text { margin-top: 38px; padding-top: 38px; } } @media screen and (min-width: 1600px) { .card__list-item-text { margin-top: 68px; padding-top: 68px; font-size: 1.25rem; } } .card__feedback { margin-top: 0; } @media screen and (min-width: 960px) { .card__feedback { margin-top: 80px; } } @media screen and (min-width: 1600px) { .card__feedback { margin-top: 160px; } } .card__similar { margin-top: 60px; } @media screen and (min-width: 1600px) { .card__similar { margin-top: 130px; } } .card__similar-title { font-size: 1.0625rem; line-height: 1.3; } @media screen and (min-width: 767px) and (min-height: 600px) { .card__similar-title { font-size: 1.5rem; } } @media screen and (min-width: 1200px) { .card__similar-title { font-size: 1.5625rem; } } @media screen and (min-width: 1600px) { .card__similar-title { font-size: 1.875rem; } } .card__similar-list { margin-top: 20px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .card__similar-list-item { width: 100%; margin-right: 0; margin-bottom: 25px; } .card__similar-list-item:nth-child(n) { margin-right: 0; } .card__similar-list-item .goodItem__top { height: 250px; } @media screen and (min-width: 370px) { .card__similar-list-item { width: 49%; margin-right: 2%; margin-bottom: 25px; } .card__similar-list-item:nth-child(n) { margin-right: 2%; } .card__similar-list-item:nth-child(2n+2) { margin-right: 0; } .card__similar-list-item .goodItem__top { height: 170px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .card__similar-list { margin-bottom: 55px; } .card__similar-list-item .goodItem__top { height: 250px; } } @media screen and (min-width: 960px) { .card__similar-list-item { width: 23.875%; margin-right: 1.5%; margin-bottom: 50px; } .card__similar-list-item:nth-child(n) { margin-right: 1.5%; } .card__similar-list-item:nth-child(4n+4) { margin-right: 0; } .card__similar-list-item .goodItem__top { height: 216px; } } @media screen and (min-width: 1600px) { .card__similar-list { margin-top: 50px; } .card__similar-list-item .goodItem__top { height: 316px; } } .card__similar-link-wrapp { margin-top: 20px; 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; display: none; } @media screen and (min-width: 1200px) { .card__similar-link-wrapp { display: -webkit-box; display: -ms-flexbox; display: flex; } } .catalog { padding-bottom: 40px; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog { padding-bottom: 100px; } } .catalog__decor { pointer-events: none; z-index: 1; position: absolute; } .catalog__decor--1 { width: 100px; height: 100px; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; display: none; } @media screen and (min-width: 960px) { .catalog__decor--1 { display: block; } } @media screen and (min-width: 1200px) { .catalog__decor--1 { width: 188px; height: 188px; margin-left: -94px; margin-top: -94px; } } .catalog__decor--2 { width: 1px; height: 80px; background-color: #171717; left: 30px; bottom: -40px; display: none; } @media screen and (min-width: 1200px) { .catalog__decor--2 { height: 80px; left: 100px; bottom: -40px; display: block; } } @media screen and (min-width: 1600px) { .catalog__decor--2 { height: 125px; bottom: -62.5px; } } @media screen and (min-width: 1900px) { .catalog__decor--2 { left: 190px; bottom: -40px; } } .catalog__title { font-size: 1.0625rem; line-height: 1.3; } .catalog__title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__title { font-size: 1.5rem; } .catalog__title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .catalog__title { font-size: 1.875rem; } .catalog__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .catalog__title { font-size: 1.5625rem; } .catalog__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .catalog__title { font-size: 2.1875rem; } .catalog__title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .catalog__title { font-size: 2.8125rem; } .catalog__title:first-letter { font-size: 3.75rem; } } .catalog__article { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: auto; } @media screen and (min-width: 960px) { .catalog__article { height: 500px; } } @media screen and (min-width: 1600px) { .catalog__article { height: 647px; } } .catalog__article-right { position: relative; z-index: 2; width: 100%; height: 300px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__article-right { width: 100%; height: 450px; } } @media screen and (min-width: 960px) { .catalog__article-right { width: 45%; height: 100%; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .catalog__article-top { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 30px 25px 30px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__article-top { padding: 20px 30px 40px 30px; } } @media screen and (min-width: 960px) { .catalog__article-top { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: 55%; height: 50%; padding: 0; padding-left: 30px; } } @media screen and (min-width: 1200px) { .catalog__article-top { padding-left: 100px; } } @media screen and (min-width: 1900px) { .catalog__article-top { padding-left: 190px; } } .catalog__article-bottom { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 25px 30px; background-color: #f3f3f3; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__article-bottom { padding: 40px 30px; } } @media screen and (min-width: 960px) { .catalog__article-bottom { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: 55%; height: 50%; padding: 0; padding-left: 30px; } } @media screen and (min-width: 1200px) { .catalog__article-bottom { padding-left: 100px; } } @media screen and (min-width: 1900px) { .catalog__article-bottom { padding-left: 190px; } } .catalog__article-text { width: 100%; font-size: 1.125rem; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; line-height: 1.3; } .catalog__article-text b { font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__article-text { width: 65%; } } @media screen and (min-width: 1600px) { .catalog__article-text { font-size: 1.25rem; } } .catalog__article-img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .catalog__content { padding-top: 30px; width: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__content { padding-top: 60px; } } @media screen and (min-width: 960px) { .catalog__content { padding-top: 130px; } } .catalog__list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .catalog__list-item { width: 100%; margin-right: 0; margin-bottom: 25px; } .catalog__list-item:nth-child(n) { margin-right: 0; } @media screen and (min-width: 370px) { .catalog__list-item { width: 49%; margin-bottom: 25px; } .catalog__list-item:nth-child(n) { margin-right: 2%; } .catalog__list-item:nth-child(2n+2) { margin-right: 0; } } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__list-item { margin-bottom: 55px; } } @media screen and (min-width: 960px) { .catalog__list-item { width: 32.333333333333336%; } .catalog__list-item:nth-child(n) { margin-right: 1.5%; } .catalog__list-item:nth-child(3n+3) { margin-right: 0; } } .catalog__pagination { margin-top: 20px; 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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__pagination { margin-top: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .catalog__pagination-left, .catalog__pagination-right { 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; } .catalog__pagination-left svg, .catalog__pagination-right svg { -webkit-transition: 0.4s; transition: 0.4s; width: 24px; height: 24px; fill: rgba(3,3,3,0.5); } .catalog__pagination-left:hover, .catalog__pagination-right:hover { cursor: pointer; } .catalog__pagination-left:hover svg, .catalog__pagination-right:hover svg { fill: #171717; } .catalog__pagination-left { padding-right: 60px; } .catalog__pagination-right { padding-left: 60px; } .catalog__pagination-list { 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; } .catalog__pagination-list-item { font-size: 1rem; line-height: 1; padding: 0 8px; -webkit-transition: 0.4s; transition: 0.4s; } .catalog__pagination-list-item.active { pointer-events: none; font-size: 1.875rem; } .catalog__pagination-list-item:hover { cursor: pointer; color: rgba(3,3,3,0.5); } .catalog__feedback { margin-top: 40px; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalog__feedback { margin-top: 80px; } } .catalogBlock { margin-top: 25px; position: relative; overflow: hidden; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalogBlock { margin-top: 60px; } } @media screen and (min-width: 960px) { .catalogBlock { margin-top: 60px; } } @media screen and (min-width: 1200px) { .catalogBlock { margin-top: 130px; } } @media screen and (min-width: 1600px) { .catalogBlock { margin-top: 150px; } } .catalogBlock__decor { background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-size: 1em 1em; background-position: 0 0; pointer-events: none; z-index: -1; position: absolute; top: 0; width: 188px; height: 188px; right: -144.6153846153846px; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalogBlock__decor { background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-size: 20px 20px; background-position: 20px 20px; right: -15px; } } @media screen and (min-width: 1200px) { .catalogBlock__decor { top: 85px; } } .catalogBlock__header { 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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .catalogBlock__title { font-size: 1.0625rem; } .catalogBlock__title span { display: block; } .catalogBlock__title span:last-of-type { font-size: 1.0625rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalogBlock__title { font-size: 1.5rem; } .catalogBlock__title span:last-of-type { font-size: 1.5rem; } } @media screen and (min-width: 960px) { .catalogBlock__title { font-size: 1.875rem; } .catalogBlock__title span:last-of-type { font-size: 1.875rem; } } @media screen and (min-width: 1200px) { .catalogBlock__title { font-size: 1.875rem; } .catalogBlock__title span:last-of-type { font-size: 1.4375rem; } } @media screen and (min-width: 1600px) { .catalogBlock__title { font-size: 2.5rem; } .catalogBlock__title span:last-of-type { font-size: 1.875rem; } } @media screen and (min-width: 1900px) { .catalogBlock__title { font-size: 3.125rem; } .catalogBlock__title span:last-of-type { font-size: 2.3125rem; } } .catalogBlock__link { display: none; } @media screen and (min-width: 960px) { .catalogBlock__link { display: none; } } @media screen and (min-width: 1200px) { .catalogBlock__link { display: inline-block; } } .catalogBlock__inner { margin-top: 25px; width: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalogBlock__inner { margin-top: 60px; } } @media screen and (min-width: 1200px) { .catalogBlock__inner { margin-top: 60px; } } @media screen and (min-width: 1600px) { .catalogBlock__inner { margin-top: 90px; } } .catalogBlock__list { width: 100%; min-height: 600px; height: 80vh; 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-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 1200px) { .catalogBlock__list { height: 80vh; } } @media screen and (min-width: 1200px) and (max-height: 700px) { .catalogBlock__list { height: 100vh; } } @media screen and (min-width: 1600px) { .catalogBlock__list { height: 100vh; } } .catalogBlock__list-item { overflow: hidden; 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; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 50%; position: relative; background-color: #171717; border: 1px solid #fff; -webkit-transition: 0.4s; transition: 0.4s; } .catalogBlock__list-item:nth-child(1) { height: 25%; } .catalogBlock__list-item:nth-child(2) { height: 40%; } .catalogBlock__list-item:nth-child(3) { height: 35%; } .catalogBlock__list-item:nth-child(4) { height: 35%; } .catalogBlock__list-item:nth-child(5) { height: 25%; } .catalogBlock__list-item:nth-child(6) { height: 30%; } .catalogBlock__list-item:nth-child(7) { height: 10%; } @media screen and (min-width: 767px) and (min-height: 600px) { .catalogBlock__list-item { width: 50%; border: 2px solid #fff; } .catalogBlock__list-item:nth-child(1) { height: 25%; } .catalogBlock__list-item:nth-child(2) { height: 40%; } .catalogBlock__list-item:nth-child(3) { height: 35%; } .catalogBlock__list-item:nth-child(4) { height: 35%; } .catalogBlock__list-item:nth-child(5) { height: 25%; } .catalogBlock__list-item:nth-child(6) { height: 30%; } .catalogBlock__list-item:nth-child(7) { height: 10%; } } @media screen and (min-width: 960px) { .catalogBlock__list-item { width: 33.333333333333336%; border: none; border-top: 1px solid #fff; border-right: 1px solid #fff; } .catalogBlock__list-item:nth-child(1) { height: 30%; } .catalogBlock__list-item:nth-child(2) { height: 70%; } .catalogBlock__list-item:nth-child(3) { height: 55%; } .catalogBlock__list-item:nth-child(4) { height: 45%; } .catalogBlock__list-item:nth-child(5) { height: 40%; } .catalogBlock__list-item:nth-child(6) { height: 50%; } .catalogBlock__list-item:nth-child(7) { height: 10%; } } @media screen and (min-width: 1200px) { .catalogBlock__list-item:hover { cursor: pointer; } .catalogBlock__list-item:hover .catalogBlock__list-item-img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .catalogBlock__list-item:hover .catalogBlock__list-item-back { opacity: 1; visibility: visible; } .catalogBlock__list-item:hover .catalogBlock__list-item-button:after { width: 0%; -webkit-transition-delay: 0s; transition-delay: 0s; } .catalogBlock__list-item:hover .catalogBlock__list-item-button:before { width: 100%; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } } .catalogBlock__list-item-img { will-change: transform; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .catalogBlock__list-item-back { will-change: opacity; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; 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; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,0.7); -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .catalogBlock__list-item-back-button { -ms-flex-negative: 0; flex-shrink: 0; } .catalogBlock__list-item-button { font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; pointer-events: none; } .contacts { padding-top: 0; padding-bottom: 35px; } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts { padding-bottom: 0; } } @media screen and (min-width: 1200px) { .contacts { padding-top: 40px; } } .contacts__decor { pointer-events: none; z-index: -1; position: absolute; } .contacts__decor--1 { width: 188px; height: 188px; top: 50%; left: 0; margin-top: -94px; margin-left: -125.33333333333333px; display: none; } @media screen and (min-width: 1200px) { .contacts__decor--1 { display: block; } } @media screen and (min-width: 1900px) { .contacts__decor--1 { margin-left: -62.666666666666664px; } } .contacts__decor--2 { display: block; width: 188px; height: 188px; top: -62.666666666666664px; right: -125.33333333333333px; } @media screen and (min-width: 370px) { .contacts__decor--2 { right: -94px; top: -94px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts__decor--2 { right: -30px; } } @media screen and (min-width: 1200px) { .contacts__decor--2 { display: none; } } .contacts__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -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; overflow: hidden; } @media screen and (min-width: 1200px) { .contacts__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .contacts__left { width: 100%; } @media screen and (min-width: 1200px) { .contacts__left { width: auto; } } .contacts__center { position: relative; width: 100%; background-color: transparent; padding: 25px 0px; overflow: hidden; } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts__center { width: 50%; padding: 35px 0px 55px 0px; } } @media screen and (min-width: 1200px) { .contacts__center { padding: 55px 30px; width: 35%; background-color: #f3f3f3; } } @media screen and (min-width: 1900px) { .contacts__center { width: 30%; } } .contacts__right { width: 100%; background-color: #f3f3f3; position: relative; padding-top: 40px; } .contacts__right:before, .contacts__right:after { content: ''; position: absolute; background-color: #f3f3f3; width: 100%; height: 100%; top: 0; display: block; } .contacts__right:before { left: 100%; } .contacts__right:after { right: 100%; } .contacts__right .form--callback .form__label--button { padding-top: 0; background-color: transparent; } .contacts__right .form--callback .form__label--button:before, .contacts__right .form--callback .form__label--button:after { display: none; } @media screen and (min-width: 1200px) { .contacts__right { padding-top: 0; background-color: transparent; width: 35%; } .contacts__right:before, .contacts__right:after { display: none; } } .contacts__title { font-size: 1.0625rem; line-height: 1.3; position: relative; } .contacts__title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts__title { font-size: 1.5rem; } .contacts__title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .contacts__title { font-size: 1.875rem; } .contacts__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .contacts__title { font-size: 1.5625rem; } .contacts__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .contacts__title { font-size: 2.1875rem; } .contacts__title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .contacts__title { font-size: 2.8125rem; } .contacts__title:first-letter { font-size: 3.75rem; } } .contacts__list-item { font-size: 1.125rem; line-height: 1; margin-bottom: 15px; } .contacts__list-item:last-child { margin-bottom: 0 !important; } .contacts__list-item .icon { -ms-flex-negative: 0; flex-shrink: 0; 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; margin-right: 16px; } .contacts__list-item .icon svg { -webkit-transition: 0.4s; transition: 0.4s; fill: #e1e1e1; width: 35px; } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts__list-item { margin-bottom: 20px; } } @media screen and (min-width: 1200px) { .contacts__list-item:hover .icon svg { fill: #c1c1c1; } } @media screen and (min-width: 1600px) { .contacts__list-item { margin-bottom: 25px; font-size: 1.25rem; } } .contacts__address { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; line-height: 1.1; } .contacts__address svg { height: 35px; } .contacts__link { display: block; margin-top: 15px; padding-left: 51px; } .contacts__link .text { font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 1.125rem; color: #707070; text-transform: none; -webkit-transition: 0.4s; transition: 0.4s; } .contacts__link .text:after, .contacts__link .text:before { background-color: #777; } .contacts__link:hover { cursor: pointer; } .contacts__link:hover .text { color: #171717; } .contacts__time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; } .contacts__time svg { height: 25px; } .contacts__phone { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'PFDinDisplayProBlack', Helvetica, Arial, sans-serif; -webkit-transition: 0.4s; transition: 0.4s; } .contacts__phone svg { height: 22px; } .contacts__phone:hover { color: #424242; } .contacts__mail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; -webkit-transition: 0.4s; transition: 0.4s; } .contacts__mail svg { height: 24px; } .contacts__mail:hover { color: #424242; } .contacts__social { padding-left: 51px; } .contacts__social .social__item svg { width: 40px; height: 40px; } @media screen and (min-width: 1200px) { .contacts__social .social__item svg { width: 30px; height: 30px; } } .contacts__map { margin-top: 0; width: 100%; height: 400px; position: relative; background-color: #f3f3f3; display: none; } @media screen and (min-width: 767px) and (min-height: 600px) { .contacts__map { display: block; } } @media screen and (min-width: 960px) { .contacts__map { height: 588px; } } @media screen and (min-width: 1200px) { .contacts__map { margin-top: 100px; height: 500px; } } @media screen and (min-width: 1200px) and (max-height: 700px) { .contacts__map { height: 400px; } } @media screen and (min-width: 1600px) { .contacts__map { height: 588px; } } .contacts__map .spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); pointer-events: none; } .contacts__map .balloon { position: absolute; width: 300px; background-color: #fff; overflow: hidden; border-radius: 23px; box-shadow: 0 13px 12px 0 rgba(0,0,0,0.1); } @media screen and (min-width: 1600px) { .contacts__map .balloon { width: 450px; } } @media screen and (min-width: 1900px) { .contacts__map .balloon { width: 500px; } } .contacts__map .balloon > ymaps { width: 100% !important; height: 100% !important; } .contacts__map .balloon__layout { padding: 40px 20px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; min-height: 200px; } @media screen and (min-width: 1600px) { .contacts__map .balloon__layout { min-height: 280px; } } .contacts__map .balloon__title { text-align: center; font-size: 1.0625rem; line-height: 1.3; } @media screen and (min-width: 1600px) { .contacts__map .balloon__title { font-size: 1.5rem; } } @media screen and (min-width: 1900px) { .contacts__map .balloon__title { font-size: 1.75rem; } } .contacts__map .balloon__subtitle { width: 100%; margin-top: 13px; text-align: center; font-size: 1rem; line-height: 1.1; color: #828282; } @media screen and (min-width: 1600px) { .contacts__map .balloon__subtitle { width: 70%; font-size: 1.125rem; } } .contacts__map .balloon__link { margin-top: 35px; } .contacts__map .balloon__link:after { width: 200%; } .contacts__map .balloon__close { position: absolute; z-index: 10; top: 0; right: 22px; color: #424242; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 2.8125rem; } .contacts__map .balloon__close:hover { cursor: pointer; } .contacts__map .balloon .arrow { width: 0px; height: 0px; } .contacts__map [class*="ymaps-2"][class*="-map-bg"] { position: relative; } .contacts__map [class*="ymaps-2"][class*="-map-bg"]:before { content: ''; position: absolute; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.33); } .contacts__map [class*="ymaps-2"][class*="-ground-pane"] { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(100%); } .contactsBlock { margin-top: 0; margin-bottom: 25px; overflow: hidden; position: relative; background-color: #f3f3f3; padding-top: 40px; height: auto; } .contactsBlock:before { content: ''; position: absolute; background-color: #fff; width: 100%; height: 139px; top: 0; left: 0; display: none; } @media screen and (min-width: 767px) and (min-height: 600px) { .contactsBlock { padding-top: 40px; margin-top: 20px; margin-bottom: 50px; } } @media screen and (min-width: 960px) { .contactsBlock { margin-top: 40px; padding-top: 60px; } .contactsBlock:before { display: none; } } @media screen and (min-width: 1200px) { .contactsBlock { margin-bottom: 130px; margin-top: 60px; padding-right: 0; padding-top: 139px; height: 777px; } .contactsBlock:before { display: block; } } @media screen and (min-width: 1600px) { .contactsBlock { height: 87vh; } } @media screen and (min-width: 1900px) { .contactsBlock { height: 97vh; } } @media screen and (min-width: 2000px) { .contactsBlock { height: 70vh; } } .contactsBlock__decor { pointer-events: none; z-index: 1; position: absolute; } .contactsBlock__decor--1 { width: 270px; height: 270px; top: -90px; right: -180px; display: none; } .contactsBlock__decor--2, .contactsBlock__decor--3 { width: 300%; z-index: 3; bottom: 0; height: 50%; display: block; } .contactsBlock__decor--2 { left: 100%; } .contactsBlock__decor--3 { right: 100%; } @media screen and (min-width: 1200px) { .contactsBlock__decor--1 { display: block; } .contactsBlock__decor--2, .contactsBlock__decor--3 { display: none; } } .contactsBlock__inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 960px) { .contactsBlock__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width: 1200px) { .contactsBlock__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .contactsBlock__left { width: 100%; height: auto; } @media screen and (min-width: 960px) { .contactsBlock__left { width: 100%; height: auto; } } @media screen and (min-width: 1200px) { .contactsBlock__left { width: 30%; height: 100%; } } .contactsBlock__right { position: relative; padding: 0; width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (min-width: 960px) { .contactsBlock__right { width: 100%; height: auto; padding: 0; } } @media screen and (min-width: 1200px) { .contactsBlock__right { padding: 0; padding-left: 70px; width: 70%; height: 100%; } } @media screen and (min-width: 1600px) { .contactsBlock__right { padding-left: 108px; } } @media screen and (min-width: 1900px) { .contactsBlock__right { width: 70%; } } @media screen and (min-width: 2000px) { .contactsBlock__right { width: 62%; } } .contactsBlock__title { font-size: 1.1875rem; text-align: center; line-height: 1.3; padding: 0; background-color: transparent; position: relative; } .contactsBlock__title:before { content: ''; position: absolute; top: 0; right: 100%; width: 100%; height: 100%; background-color: #fff; display: none; } .contactsBlock__title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .contactsBlock__title { font-size: 1.5rem; } .contactsBlock__title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .contactsBlock__title { font-size: 1.875rem; } .contactsBlock__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .contactsBlock__title { text-align: left; padding: 33px 70px 33px 0; font-size: 1.5625rem; background-color: #fff; } .contactsBlock__title:before { display: block; } .contactsBlock__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .contactsBlock__title { padding: 33px 100px 46px 0; font-size: 2.1875rem; } .contactsBlock__title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .contactsBlock__title { padding: 33px 33px 46px 0; font-size: 2.8125rem; } .contactsBlock__title:first-letter { font-size: 3.75rem; } } .contactsBlock__form { padding-top: 20px; } @media screen and (min-width: 1200px) { .contactsBlock__form { padding-top: 40px; } } @media screen and (min-width: 1600px) { .contactsBlock__form { padding-top: 70px; } } .contactsBlock__column { 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; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .contactsBlock__column--1 { width: 56%; display: none; } .contactsBlock__column--2 { position: relative; top: auto; right: auto; width: 100%; height: auto; background-color: #fff; } @media screen and (min-width: 1200px) { .contactsBlock__column--1 { display: -webkit-box; display: -ms-flexbox; display: flex; } .contactsBlock__column--2 { top: -22%; right: 0; width: 44%; height: 122%; } } .contactsBlock__card { overflow: hidden; display: none; width: 100%; position: relative; z-index: 2; background-color: #fff; border: 35px solid #fff; border-bottom: 0; } .contactsBlock__card:hover { cursor: pointer; } .contactsBlock__card:hover .contactsBlock__card-img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .contactsBlock__card:hover .contactsBlock__card-back { opacity: 1; visibility: visible; } .contactsBlock__card--1 { height: 565px; } .contactsBlock__card--2 { width: 100%; height: 300px; } .contactsBlock__card--3 { height: 245px; border-bottom: 35px solid #fff; border-left: none; } @media screen and (min-width: 960px) { .contactsBlock__card { display: none; } } @media screen and (min-width: 1200px) { .contactsBlock__card { display: block; } .contactsBlock__card--1 { height: 565px; } .contactsBlock__card--2 { width: 100%; height: 300px; } .contactsBlock__card--3 { height: 245px; } } @media screen and (min-width: 1600px) { .contactsBlock__card--1 { height: 665px; } .contactsBlock__card--2 { width: 80%; height: 385px; } .contactsBlock__card--3 { height: 345px; } } .contactsBlock__card-img { will-change: transform; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .contactsBlock__card-back { will-change: opacity; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; 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; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,0.7); -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .contactsBlock__card-back-button { -ms-flex-negative: 0; flex-shrink: 0; } .contactsBlock__feedback { background-color: #f3f3f3; width: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; 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: center; -ms-flex-pack: center; justify-content: center; padding: 40px 0; position: relative; } .contactsBlock__feedback:before, .contactsBlock__feedback:after { content: ''; position: absolute; z-index: 1; width: 300%; top: 0; height: 100%; background-color: #fff; display: block; } .contactsBlock__feedback:before { left: 98%; } .contactsBlock__feedback:after { right: 98%; } @media screen and (min-width: 767px) and (min-height: 600px) { .contactsBlock__feedback { padding: 40px; } .contactsBlock__feedback:before { left: 100%; } .contactsBlock__feedback:after { right: 100%; } } @media screen and (min-width: 1200px) { .contactsBlock__feedback { width: 100%; padding: 0 25px; } .contactsBlock__feedback:before, .contactsBlock__feedback:after { display: none; } } @media screen and (min-width: 1900px) { .contactsBlock__feedback { padding: 0 40px; } } .contactsBlock__feedback-title { font-size: 1.1875rem; line-height: 1; padding-bottom: 20px; text-align: center; position: relative; z-index: 2; } @media screen and (min-width: 1200px) { .contactsBlock__feedback-title { font-size: 1rem; padding-bottom: 20px; text-align: center; } } @media screen and (min-width: 1600px) { .contactsBlock__feedback-title { font-size: 1.125rem; padding-bottom: 30px; text-align: left; } } .contactsBlock__feedback-inner { position: relative; z-index: 2; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contactsBlock__feedback-left { 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; } .contactsBlock__feedback-center { padding: 0; } @media screen and (min-width: 1200px) { .contactsBlock__feedback-center { padding: 0; } } @media screen and (min-width: 1600px) { .contactsBlock__feedback-center { padding: 0 20px; } } .contactsBlock__feedback-right { 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: end; -ms-flex-pack: end; justify-content: flex-end; } .contactsBlock__feedback-caption { letter-spacing: 0.05em; text-transform: none; color: #8d8d8d; display: none; pointer-events: none; } .contactsBlock__feedback-caption:after { background-color: #8d8d8d; } @media screen and (min-width: 1200px) { .contactsBlock__feedback-caption { display: none; } } @media screen and (min-width: 1600px) { .contactsBlock__feedback-caption { display: block; } } .contactsBlock__feedback-link { -webkit-transition: 0.25s; transition: 0.25s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; line-height: 1; margin-bottom: 15px; } .contactsBlock__feedback-link .icon { 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; } .contactsBlock__feedback-link svg { fill: #171717; width: 14px; height: 14px; } .contactsBlock__feedback-link .text { margin-left: 7px; } .contactsBlock__feedback-link:last-child { margin-bottom: 0 !important; } @media screen and (min-width: 1200px) { .contactsBlock__feedback-link { margin-bottom: 15px; } .contactsBlock__feedback-link:hover { color: #424242; } } @media screen and (min-width: 1600px) { .contactsBlock__feedback-link { margin-bottom: 20px; } } .topBlock { width: 100%; height: auto; overflow: hidden; background-color: #f3f3f3; padding-top: 100px; } @media screen and (min-width: 370px) { .topBlock { padding-top: 100px; } } @media screen and (min-width: 480px) { .topBlock { padding-top: 100px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock { padding-top: 120px; } } @media screen and (min-width: 960px) { .topBlock { padding-top: 120px; height: auto; background-color: #f3f3f3; } } @media screen and (min-width: 1200px) { .topBlock { padding: 0; height: 100vh; background-color: transparent; } } .topBlock__inner { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 960px) { .topBlock__inner { height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width: 1200px) { .topBlock__inner { height: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .topBlock__decor { top: 0; left: 0; width: 100%; height: 100%; display: none; } .topBlock__decor--2 { will-change: opacity; opacity: 0; z-index: 1; -webkit-transition: opacity 1s cubic-bezier(0.71, 0.05, 0.29, 0.9); transition: opacity 1s cubic-bezier(0.71, 0.05, 0.29, 0.9); } .topBlock__decor--2.light { opacity: 1; } @media screen and (min-width: 960px) { .topBlock__decor { display: none; } } @media screen and (min-width: 1200px) { .topBlock__decor { display: block; } } .topBlock__left { position: relative; width: 100%; height: auto; 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; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 30px; padding-bottom: 20px; } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__left { padding-bottom: 20px; } } @media screen and (min-width: 960px) { .topBlock__left { width: 100%; padding: 0 30px; padding-bottom: 45px; } } @media screen and (min-width: 1200px) { .topBlock__left { width: 55%; height: 100%; padding: 0; padding-left: 45px; } } @media screen and (min-width: 1600px) { .topBlock__left { width: 55%; padding-left: 100px; } } @media screen and (min-width: 1900px) { .topBlock__left { width: 57%; padding-left: 160px; } } .topBlock__right { position: relative; width: 100%; height: auto; } @media screen and (min-width: 960px) { .topBlock__right { width: 100%; } } @media screen and (min-width: 1200px) { .topBlock__right { width: 45%; height: 100%; } } @media screen and (min-width: 1600px) { .topBlock__right { width: 45%; } } @media screen and (min-width: 1900px) { .topBlock__right { width: 43%; } } .topBlock__wrapp { position: relative; z-index: 2; } .topBlock__wrapp--desktop .topBlock__text { display: none; } .topBlock__wrapp--mobile { padding: 20px 65px; display: block; } @media screen and (min-width: 480px) { .topBlock__wrapp--mobile { padding: 20px 65px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__wrapp--mobile { padding: 40px 100px; } } @media screen and (min-width: 960px) { .topBlock__wrapp--mobile { display: block; } .topBlock__wrapp--desktop .topBlock__text { display: none; } } @media screen and (min-width: 1200px) { .topBlock__wrapp--mobile { display: none; } .topBlock__wrapp--desktop .topBlock__text { display: block; } } .topBlock__title { font-size: 1rem; line-height: 1.3; letter-spacing: 0.07em; } .topBlock__title:first-letter { font-size: 1.4375rem; } @media screen and (min-width: 370px) { .topBlock__title { font-size: 1.0625rem; } .topBlock__title:first-letter { font-size: 1.5rem; } } @media screen and (min-width: 480px) { .topBlock__title { font-size: 1.0625rem; } .topBlock__title:first-letter { font-size: 1.5rem; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__title { font-size: 1.5rem; } .topBlock__title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .topBlock__title { font-size: 1.875rem; } .topBlock__title:first-letter { font-size: 2.8125rem; } } @media screen and (min-width: 1200px) { .topBlock__title { letter-spacing: 0; font-size: 1.875rem; } .topBlock__title:first-letter { font-size: 3.75rem; } } @media screen and (min-width: 1600px) { .topBlock__title { font-size: 2.5rem; } .topBlock__title:first-letter { font-size: 4.375rem; } } @media screen and (min-width: 1900px) { .topBlock__title { font-size: 3.125rem; } .topBlock__title:first-letter { font-size: 5rem; } } .topBlock__subtitle { font-size: 0.875rem; letter-spacing: 0.07em; line-height: 1.3; margin-bottom: 0; } @media screen and (min-width: 370px) { .topBlock__subtitle { font-size: 1.0625rem; } } @media screen and (min-width: 480px) { .topBlock__subtitle { font-size: 1.0625rem; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__subtitle { font-size: 1.5rem; } } @media screen and (min-width: 960px) { .topBlock__subtitle { font-size: 1.875rem; margin-bottom: 0; } } @media screen and (min-width: 1200px) { .topBlock__subtitle { font-size: 1.5rem; margin-bottom: 10px; } } @media screen and (min-width: 1600px) { .topBlock__subtitle { font-size: 2rem; margin-bottom: 20px; } } @media screen and (min-width: 1900px) { .topBlock__subtitle { font-size: 2.5rem; } } .topBlock__text { text-transform: uppercase; font-size: 0.875rem; line-height: 1.3; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; } .topBlock__text--bold { font-family: 'PFDinDisplayProMedium', Helvetica, Arial, sans-serif; } @media screen and (min-width: 370px) { .topBlock__text { font-size: 0.875rem; } } @media screen and (min-width: 480px) { .topBlock__text { font-size: 0.875rem; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__text { font-size: 1.125rem; } } @media screen and (min-width: 960px) { .topBlock__text { font-size: 1.25rem; } } @media screen and (min-width: 1200px) { .topBlock__text { font-size: 1rem; letter-spacing: 0; } } @media screen and (min-width: 1600px) { .topBlock__text { font-size: 1.25rem; } } @media screen and (min-width: 1900px) { .topBlock__text { font-size: 1.5rem; } } .topBlock__button { margin-top: 30px; display: none; } @media screen and (min-width: 960px) { .topBlock__button { display: none; } } @media screen and (min-width: 1200px) { .topBlock__button { display: inline-block; } } .topBlock__info { position: absolute; z-index: 2; width: 150px; height: 150px; left: 45px; bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); display: none; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 960px) { .topBlock__info { display: none; } } @media screen and (min-width: 1200px) { .topBlock__info { left: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1200px) and (max-height: 700px) { .topBlock__info { width: 120px; height: 120px; } } @media screen and (min-width: 1600px) { .topBlock__info { left: 100px; } } @media screen and (min-width: 1900px) { .topBlock__info { left: 160px; } } .topBlock__info-text { position: relative; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1; text-transform: uppercase; } .topBlock__info-text:before { position: absolute; content: ''; top: 50%; right: 100%; width: 100%; height: 1px; background-color: #171717; margin-right: 17px; } @media screen and (min-width: 1200px) and (max-height: 700px) { .topBlock__info-text { font-size: 0.75rem; } .topBlock__info-text:before { margin-right: 10px; } } .topBlock__slider { position: relative; width: 100%; height: 100vh; } .topBlock__slider .swiper-container { height: 100%; } .topBlock__slider-item { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .topBlock__slider-nav { position: absolute; z-index: 2; width: 65px; height: 100%; top: 0; left: 0; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 480px) { .topBlock__slider-nav { width: 65px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__slider-nav { width: 100px; } } @media screen and (min-width: 960px) { .topBlock__slider-nav { left: 0; } } @media screen and (min-width: 1200px) { .topBlock__slider-nav { width: 100px; left: -100px; } } @media screen and (min-width: 1600px) { .topBlock__slider-nav { width: 120px; left: -120px; } } @media screen and (min-width: 1900px) { .topBlock__slider-nav { width: 150px; left: -150px; } } .topBlock__slider-button-prev, .topBlock__slider-button-next { 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; background-color: #fff; width: 100%; height: 65px; outline: none; } .topBlock__slider-button-prev .icon, .topBlock__slider-button-next .icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); 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; } .topBlock__slider-button-prev svg, .topBlock__slider-button-next svg { -webkit-transition: 0.4s; transition: 0.4s; width: 25px; height: 25px; fill: rgba(3,3,3,0.7); } .topBlock__slider-button-prev:hover, .topBlock__slider-button-next:hover { cursor: pointer; } .topBlock__slider-button-prev:hover svg, .topBlock__slider-button-next:hover svg { fill: #030303; } @media screen and (min-width: 480px) { .topBlock__slider-button-prev, .topBlock__slider-button-next { height: 65px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .topBlock__slider-button-prev, .topBlock__slider-button-next { height: 100px; } } @media screen and (min-width: 960px) { .topBlock__slider-button-prev, .topBlock__slider-button-next { height: 100px; } .topBlock__slider-button-prev .icon, .topBlock__slider-button-next .icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @media screen and (min-width: 1200px) { .topBlock__slider-button-prev, .topBlock__slider-button-next { height: 90px; } .topBlock__slider-button-prev .icon, .topBlock__slider-button-next .icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .topBlock__slider-button-prev svg, .topBlock__slider-button-next svg { width: 25px; height: 25px; } } @media screen and (min-width: 1600px) { .topBlock__slider-button-prev, .topBlock__slider-button-next { height: 112px; } .topBlock__slider-button-prev svg, .topBlock__slider-button-next svg { width: 33px; height: 33px; } } .topBlock__slider-button-prev { position: relative; } .topBlock__slider-button-prev:before { position: absolute; content: ''; width: 40%; height: 1px; top: 100%; left: 30%; background-color: rgba(0,0,0,0.3); } .topBlock__slider-pagination { bottom: auto; width: 100%; text-align: center; font-family: 'Neumann', Helvetica, Arial, sans-serif; margin-bottom: 20px; line-height: 1; display: none; } .topBlock__slider-pagination .swiper-pagination-current { font-size: 1.75rem; } @media screen and (min-width: 960px) { .topBlock__slider-pagination { display: none; } } @media screen and (min-width: 1200px) { .topBlock__slider-pagination { display: block; } .topBlock__slider-pagination .swiper-pagination-current { font-size: 1.75rem; } } @media screen and (min-width: 1600px) { .topBlock__slider-pagination .swiper-pagination-current { font-size: 2.125rem; } } .topBlock__slider-decor { padding-bottom: 55px; width: 100%; height: 50%; 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; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: none; } .topBlock__slider-decor-line { width: 1px; height: 100%; background-color: #171717; } .topBlock__slider-decor-line.slideChange { -webkit-animation: slider-line 1s cubic-bezier(0.23, 1, 0.32, 1) both; animation: slider-line 1s cubic-bezier(0.23, 1, 0.32, 1) both; } @media screen and (min-width: 960px) { .topBlock__slider-decor { display: none; } } @media screen and (min-width: 1200px) { .topBlock__slider-decor { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1200px) and (max-height: 700px) { .topBlock__slider-decor { height: 40%; padding-bottom: 25px; } } @-webkit-keyframes slider-line { 0% { height: 100%; } 50% { height: 0; } 100% { height: 100%; } } @keyframes slider-line { 0% { height: 100%; } 50% { height: 0; } 100% { height: 100%; } } .breadcrumbs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .breadcrumbs__item { position: relative; line-height: 1.5; font-size: 0.875rem; color: #565656; padding-right: 36px; } .breadcrumbs__item:after { content: ''; position: absolute; top: 50%; right: 0; width: 16px; height: 1px; background-color: #565656; margin-right: 10px; } .breadcrumbs__item:last-child { padding-right: 0; } .breadcrumbs__item:last-child:after { display: none; } .breadcrumbs__link { display: block; color: #ababab; -webkit-transition: 0.4s; transition: 0.4s; } .breadcrumbs__link:hover { cursor: pointer; color: #565656; } .feedback { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 1200px) { .feedback { -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .feedback__decor { pointer-events: none; position: absolute; width: 300%; z-index: 3; bottom: 0; height: 50%; display: block; } .feedback__decor--1 { left: 100%; } .feedback__decor--2 { right: 100%; } @media screen and (min-width: 1200px) { .feedback__decor--1, .feedback__decor--2 { display: none; } } .feedback__left { width: 100%; padding: 40px 30px 0 30px; background-color: #f3f3f3; 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; } @media screen and (min-width: 960px) { .feedback__left { padding-top: 60px; } } @media screen and (min-width: 1200px) { .feedback__left { width: 40%; padding: 80px; padding-left: 100px; } } @media screen and (min-width: 1900px) { .feedback__left { padding-left: 190px; } } .feedback__center { width: auto; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; background-color: #f3f3f3; position: relative; padding: 40px 0; } .feedback__center:before, .feedback__center:after { content: ''; position: absolute; z-index: 1; width: 300%; top: 0; height: 100%; background-color: #fff; display: block; } .feedback__center:before { left: 98%; } .feedback__center:after { right: 98%; } @media screen and (min-width: 767px) and (min-height: 600px) { .feedback__center { padding: 40px; } .feedback__center:before { left: 100%; } .feedback__center:after { right: 100%; } } @media screen and (min-width: 1200px) { .feedback__center { width: 20%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; background-color: transparent; padding: 0; } .feedback__center:before, .feedback__center:after { display: none; } } .feedback__right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; padding-top: 20px; padding-left: 30px; padding-right: 30px; background-color: #f3f3f3; } @media screen and (min-width: 1200px) { .feedback__right { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 38%; padding: 0; padding-right: 100px; background-color: transparent; } } @media screen and (min-width: 1900px) { .feedback__right { padding-right: 190px; } } .feedback__title { font-size: 1.1875rem; line-height: 1.3; text-align: center; width: 100%; } .feedback__title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 370px) { .feedback__title { width: 70%; } } @media screen and (min-width: 480px) { .feedback__title { width: 45%; } } @media screen and (min-width: 767px) and (min-height: 600px) { .feedback__title { width: 40%; font-size: 1.5rem; } .feedback__title:first-letter { font-size: 2.125rem; } } @media screen and (min-width: 960px) { .feedback__title { font-size: 1.875rem; } .feedback__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1200px) { .feedback__title { width: auto; text-align: left; font-size: 1.5625rem; } .feedback__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .feedback__title { font-size: 2.1875rem; } .feedback__title:first-letter { font-size: 3.125rem; } } @media screen and (min-width: 1900px) { .feedback__title { font-size: 2.8125rem; } .feedback__title:first-letter { font-size: 3.75rem; } } .feedback__contacts { width: 100%; padding: 0; } @media screen and (min-width: 1200px) { .feedback__contacts { padding: 0 35px; } } .feedback__contacts-title { font-size: 1.1875rem; line-height: 1; padding-bottom: 20px; text-align: center; position: relative; z-index: 2; display: block; } @media screen and (min-width: 1200px) { .feedback__contacts-title { display: none; } } .feedback__contacts-top { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; padding-bottom: 15px; position: relative; } .feedback__contacts-top:before { content: ''; position: absolute; width: 80%; height: 1px; bottom: 0; left: 0; background-color: #171717; } .feedback__contacts-top:after { content: ''; position: absolute; width: 6px; height: 6px; background-color: #171717; bottom: -3px; right: 10%; } .feedback__contacts-top:before, .feedback__contacts-top:after { display: none; } @media screen and (min-width: 1200px) { .feedback__contacts-top:before, .feedback__contacts-top:after { display: block; } } .feedback__contacts-bottom { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; padding-top: 0; } @media screen and (min-width: 1200px) { .feedback__contacts-bottom { padding-top: 15px; } } .feedback__contacts-top:hover .feedback__contacts-link, .feedback__contacts-bottom:hover .feedback__contacts-link { color: #171717; } .feedback__contacts-caption { font-size: 0.875rem; line-height: 1.3; letter-spacing: 0.18em; color: #bababa; display: none; } @media screen and (min-width: 1200px) { .feedback__contacts-caption { display: block; } } .feedback__contacts-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-size: 1rem; line-height: 1; font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; color: #171717; -webkit-transition: 0.4s; transition: 0.4s; } .feedback__contacts-link .icon { 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; } .feedback__contacts-link svg { fill: #171717; width: 14px; height: 14px; } .feedback__contacts-link .text { margin-left: 7px; } @media screen and (min-width: 1200px) { .feedback__contacts-link { line-height: 1.3; color: #787878; } .feedback__contacts-link .icon { display: none; } .feedback__contacts-link .text { margin-left: 0; } } .feedback--white .feedback__left { background-color: #f3f3f3; } @media screen and (min-width: 1200px) { .feedback--white .feedback__left { background-color: transparent; } } .box--footer { padding: 35px 0; padding-top: 0; background-color: #fff; overflow: hidden; } @media screen and (min-width: 767px) and (min-height: 600px) { .box--footer { padding-top: 35px; } } .footer { 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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 767px) and (min-height: 600px) { .footer { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .footer__logo { 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; width: 75px; height: 75px; display: none; } @media screen and (min-width: 1200px) { .footer__logo { display: block; } } .footer__nav { width: 35%; display: none; } @media screen and (min-width: 1200px) { .footer__nav { display: block; } } .footer__nav-list { width: 100%; 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; } .footer__nav-list-item { display: block; position: relative; font-family: 'Neumann', Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1; text-transform: uppercase; } .footer__nav-list-item:after, .footer__nav-list-item:before { pointer-events: none; content: ''; position: absolute; left: 50%; width: 1px; height: 20px; background-color: #171717; visibility: hidden; opacity: 0; -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .footer__nav-list-item:before { top: 100%; margin-top: 10px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .footer__nav-list-item:after { bottom: 100%; margin-bottom: 10px; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .footer__nav-list-item:hover { cursor: pointer; } .footer__nav-list-item:hover:after, .footer__nav-list-item:hover:before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } .footer__nav-list-item.active { pointer-events: none; } .footer__nav-list-item.active:after, .footer__nav-list-item.active:before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } @media screen and (min-width: 1200px) { .footer__nav-list-item:after, .footer__nav-list-item:before { height: 20px; } } @media screen and (min-width: 1600px) { .footer__nav-list-item:after, .footer__nav-list-item:before { height: 30px; } } .footer__decor { width: 200px; height: 1px; background-color: #171717; display: none; margin: 25px 0; } @media screen and (min-width: 1600px) { .footer__decor { margin: 0; width: 119px; display: block; } } .footer__phone { font-family: 'Neumann', Helvetica, Arial, sans-serif; font-size: 1.125rem; text-transform: uppercase; 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; display: none; margin-bottom: 20px; } .footer__phone .icon { margin-right: 8px; 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; } .footer__phone svg { -webkit-transition: 0.25s; transition: 0.25s; width: 14px; height: 14px; fill: #171717; } .footer__phone:hover svg { fill: #424242; } @media screen and (min-width: 767px) and (min-height: 600px) { .footer__phone { margin-bottom: 0; } } @media screen and (min-width: 1200px) { .footer__phone { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem; } .footer__phone svg { width: 14px; height: 14px; } } @media screen and (min-width: 1600px) { .footer__phone { font-size: 1.125rem; } .footer__phone svg { width: 17px; height: 17px; } } .footer__callback { font-family: 'PFDinDisplayProBold', Helvetica, Arial, sans-serif; margin-bottom: 20px; border: 1px solid #171717; padding: 18px 35px; } .footer__callback:after { display: none; } .d-mobile .footer__callback:active { background-color: #171717; color: #fff; } @media screen and (min-width: 767px) and (min-height: 600px) { .footer__callback { margin-bottom: 0; } } @media screen and (min-width: 1200px) { .footer__callback { border: none; padding: 0; padding-bottom: 5px; } .footer__callback:after { display: block; } } .form { position: relative; } .form input[type=text], .form input[type=submit], .form textarea { -webkit-appearance: none; } .form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form textarea:-webkit-autofill, .form textarea:-webkit-autofill:hover, .form textarea:-webkit-autofill:focus, .form select:-webkit-autofill, .form select:-webkit-autofill:hover, .form select:-webkit-autofill:focus { -webkit-transition: background-color 9999s ease-in-out 0s; transition: background-color 9999s ease-in-out 0s; } .form .spinner { position: absolute; left: 50%; top: 50%; margin-left: -21px; opacity: 0; visibility: hidden; } .form.loading .spinner { opacity: 1; visibility: visible; } .form .selectric { font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; min-width: 200px; height: 57px; border: none; border: 1px solid #979797; border-radius: 0; background: #fff; padding: 0; 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; padding-left: 20px; padding-right: 20px; } .form .selectric-wrapper { width: 100%; } .form .selectric .label { height: auto; color: #000; font-size: 1rem; letter-spacing: 0.03em; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; line-height: 3.5625rem; display: inline; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0; margin-right: 0.5rem; } @media screen and (min-width: 1200px) { .form .selectric .label { font-size: 1rem; } } @media screen and (min-width: 1600px) { .form .selectric .label { font-size: 1.125rem; } } .form .selectric .button { background-color: transparent; box-shadow: none; } .form .selectric .button:before { display: none; } .form .selectric-items { background-color: #fff; border: 1px solid #979797; border-top: none; box-shadow: none; border-radius: 0; } .form .selectric-scroll { overflow: hidden; height: 250px; } .form .selectric-scroll .mCSB_container { margin-right: 0; } .form .selectric-scroll .mCSB_scrollTools { background: transparent; } .form .selectric-scroll .mCSB_scrollTools_vertical { top: 0; right: 2px; width: 3px; } .form .selectric-scroll .mCSB_scrollTools .mCSB_dragger_bar { right: 0; width: 3px; background-color: rgba(0,0,0,0.2); border-radius: 0; } .form .selectric-scroll li { color: #000; font-size: 1rem; letter-spacing: 0.06em; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; line-height: 1.3; letter-spacing: 0.03em; padding: 0.3125rem 0.625rem; padding-left: 1.25rem; min-height: 57px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form .selectric-scroll li:hover { color: #000; background: #dfe3ed; } .form .selectric-scroll li.highlighted { color: #fff; background: #f3f3f3; } @media screen and (min-width: 1200px) { .form .selectric-scroll li { font-size: 1rem; } } @media screen and (min-width: 1600px) { .form .selectric-scroll li { font-size: 1.125rem; } } .form .selectric-select__arrow { -webkit-transition: 0.2s; transition: 0.2s; fill: #000; width: 10px; height: 10px; } .form .selectric-select__arrow--open { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form__title { text-align: center; font-size: 0.875rem; line-height: 1.3; text-transform: uppercase; padding-bottom: 30px; } @media screen and (min-width: 370px) { .form__title { font-size: 1rem; } } @media screen and (min-width: 1200px) { .form__title { padding-bottom: 20px; text-align: left; font-size: 1rem; line-height: 1.3; } } @media screen and (min-width: 1600px) { .form__title { font-size: 1.125rem; line-height: 1.3; } } @media screen and (min-width: 1900px) { .form__title { font-size: 1.25rem; line-height: 1.3; } } .form__info { font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.1; color: #5c5c5c; } @media screen and (min-width: 1200px) { .form__info { font-size: 0.875rem; } } @media screen and (min-width: 1600px) { .form__info { line-height: 1.1; } } @media screen and (min-width: 1900px) { .form__info { line-height: 1.5; } } .form__link { text-decoration: underline; -webkit-text-decoration-color: #5c5c5c; text-decoration-color: #5c5c5c; -webkit-transition: 0.25s; transition: 0.25s; } .form__link:hover { cursor: pointer; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } .form__error { color: #ff2121; font-size: 0.8125rem; line-height: 2; font-family: 'PFDinDisplayProItalic', Helvetica, Arial, sans-serif; pointer-events: none; opacity: 0; -webkit-transition: 0.25s; transition: 0.25s; } .error .form__error { opacity: 1; } .form__label { display: block; position: relative; margin-bottom: 20px; } .form__label--radio label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .form__label--radio label:last-of-type { margin-bottom: 0; } .form__label--radio label:hover { cursor: pointer; } .form__label--checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form__label--checkbox.checked .icon__whatsapp { fill: #25d366; } @media screen and (min-width: 1200px) { .form__label--checkbox:hover, .form__label--checkbox.checked { cursor: pointer; } .form__label--checkbox:hover .icon__whatsapp, .form__label--checkbox.checked .icon__whatsapp { fill: #25d366; } } .form__label--textarea .form__field { height: 130px; resize: none; padding-top: 15px; padding-left: 15px; border: 1px solid #e2e2e2; } .form__label--button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form__label:last-child { margin-bottom: 0 !important; } .form__caption { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.05em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 17px; } .form__caption .icon { 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; margin-right: 10px; } .form__caption .icon svg { width: 12px; height: 12px; fill: #f3f3f3; } .form__field-wrapper { position: relative; } .form__field { display: block; width: 100%; height: 30px; border: none; border-bottom: 1px solid #b0b0b0; font-size: 1rem; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; line-height: 1; background-color: transparent; outline: 0; -webkit-transition: 0.25s; transition: 0.25s; } .form__field_invalid, .error .form__field { border-color: #ff2121 !important; } .form__field:focus { border-color: #171717; } .form__field::-webkit-input-placeholder { -webkit-transition: 0.4s; transition: 0.4s; color: #171717; font-size: 0.875rem; text-transform: uppercase; } .form__field::-moz-input-placeholder { -webkit-transition: 0.4s; transition: 0.4s; color: #171717; font-size: 0.875rem; text-transform: uppercase; } .loading .form__field { -webkit-transition: 0s; transition: 0s; opacity: 0.3; pointer-events: none; } .form__checkbox { opacity: 0; visibility: hidden; position: absolute; right: 1000%; } .form__checkbox-box { position: relative; display: inline-block; width: 20px; height: 20px; background-color: transparent; border: 1px solid #b0b0b0; margin-right: 10px; -webkit-transition: 0.25s; transition: 0.25s; } .form__checkbox-box:after { -webkit-transition: 0.25s; transition: 0.25s; opacity: 0; visibility: hidden; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-image: url("../img/assets/common/form/checked.svg"); background-repeat: no-repeat; background-size: contain; background-position: center bottom; } input:checked + .form__checkbox-box:after { opacity: 1; visibility: visible; } .form__checkbox-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; line-height: 1; letter-spacing: 0.03em; } .form__checkbox-caption .icon { margin-left: 10px; 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; display: none; } @media screen and (min-width: 370px) { .form__checkbox-caption .icon { display: -webkit-box; display: -ms-flexbox; display: flex; } } .form__checkbox-caption .icon__whatsapp { -webkit-transition: 0.4s; transition: 0.4s; fill: #424242; width: 20px; height: 20px; } .form__radio { opacity: 0; visibility: hidden; position: absolute; right: 1000%; } .form__radio-box { position: relative; display: inline-block; width: 1.625rem; height: 1.625rem; background: transparent; border-radius: 5px; border: 1px solid #f3f3f3; margin-right: 0.625rem; } .form__radio-box:after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; opacity: 0; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); background: #f3f3f3; border-radius: 2px; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .form__radio-box:after { opacity: 1; -webkit-transform: scale3d(1, 1, 1) !important; transform: scale3d(1, 1, 1) !important; } .form__radio-icon { 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; margin-right: 0.375rem; } .form__radio-icon:last-child { margin-right: 0; } .form__radio-icon svg { -webkit-transition: 0.4s; transition: 0.4s; fill: #000; width: 0.9375rem; height: 0.9375rem; } .form__radio-caption { width: 100%; margin-top: 0.625rem; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1; } .loading .form__button { pointer-events: none; opacity: 0.3; } .form__file { position: relative; } .form__file input[type=file] { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } .form__file input[type=file]:hover { cursor: pointer; } .form__file .form__button .text { width: 85%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .form--callback { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 960px) { .form--callback { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 1200px) { .form--callback { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .form--callback .form__title { width: 100%; } @media screen and (min-width: 960px) { .form--callback .form__title { width: 100%; } } @media screen and (min-width: 1200px) { .form--callback .form__title { width: 90%; } } .form--callback .form__labelGroup { position: relative; width: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callback .form__labelGroup { width: 75%; } } @media screen and (min-width: 960px) { .form--callback .form__labelGroup { width: 55%; } } @media screen and (min-width: 1200px) { .form--callback .form__labelGroup { width: 75%; } } .form--callback .form__label--button { position: relative; margin-top: 43px; padding: 30px 0; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #fff; } .form--callback .form__label--button:before, .form--callback .form__label--button:after { content: ''; position: absolute; z-index: 2; width: 100%; height: 100%; background-color: #fff; display: block; } .form--callback .form__label--button:before { left: 100%; } .form--callback .form__label--button:after { right: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callback .form__label--button { margin-top: 43px; padding: 30px 0; } } @media screen and (min-width: 960px) { .form--callback .form__label--button { margin-top: 50px; padding: 40px 0; } } @media screen and (min-width: 1200px) { .form--callback .form__label--button { margin-top: 37px; padding: 0; background-color: transparent; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .form--callback .form__label--button:before, .form--callback .form__label--button:after { display: none; } } @media screen and (min-width: 1600px) { .form--callback .form__label--button { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width: 1900px) { .form--callback .form__label--button { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .form--callback .form__info { margin: 0; margin-top: 27px; } @media screen and (min-width: 1600px) { .form--callback .form__info { margin: 0; margin-top: 27px; } } @media screen and (min-width: 1900px) { .form--callback .form__info { margin: 0; margin-left: 27px; } } .form--callbackSimple { width: 100%; padding: 20px 0; background-color: #ffc67d; } @media screen and (min-width: 960px) { .form--callbackSimple { padding: 20px 0 30px 0; } } .form--callbackSimple .spinner { margin-top: -21px; } .form--callbackSimple .form__inner { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .form--callbackSimple .form__left { width: 100%; margin-bottom: 15px; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__left { width: 40%; margin-bottom: 0; } } .form--callbackSimple .form__right { width: 100%; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__right { width: 55%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media screen and (min-width: 1600px) { .form--callbackSimple .form__right { width: 50%; } } .form--callbackSimple .form__title { font-size: 1.1875rem; line-height: 1.2; width: 100%; padding-bottom: 5px; } .form--callbackSimple .form__title:first-letter { font-size: 1.5rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__title { text-align: left; } } @media screen and (min-width: 960px) { .form--callbackSimple .form__title { font-size: 1.5625rem; } .form--callbackSimple .form__title:first-letter { font-size: 2.5rem; } } @media screen and (min-width: 1600px) { .form--callbackSimple .form__title { font-size: 2.1875rem; padding-bottom: 10px; } .form--callbackSimple .form__title:first-letter { font-size: 3.125rem; } } .form--callbackSimple .form__subtitle { text-align: center; font-size: 0.875rem; line-height: 1.3; text-transform: uppercase; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__subtitle { text-align: left; } } @media screen and (min-width: 1200px) { .form--callbackSimple .form__subtitle { font-size: 1rem; line-height: 1.3; } } @media screen and (min-width: 1600px) { .form--callbackSimple .form__subtitle { font-size: 1.125rem; line-height: 1.3; } } .form--callbackSimple .form__labelGroup { width: 100%; position: relative; margin-bottom: 30px; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackSimple .form__labelGroup { width: 40%; margin-bottom: 0; } } @media screen and (min-width: 960px) { .form--callbackSimple .form__labelGroup { width: 55%; } } .form--callbackSimple .form__label--checkbox.checked .icon__whatsapp { fill: #2f8205; } @media screen and (min-width: 1200px) { .form--callbackSimple .form__label--checkbox:hover .icon__whatsapp { fill: #2f8205; } } .form--callbackSimple .form__field { border-color: #171717; } .form--callbackSimple .form__button { background-color: #171717; color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; } .form--callbackSimple .form__button:before, .form--callbackSimple .form__button:after { display: none; } .form--callbackSimple .form__button .text:before { -webkit-transition-delay: 0s; transition-delay: 0s; background-color: #fff; } .form--callbackSimple .form__button .text:after { display: none; } @media screen and (min-width: 1200px) { .form--callbackSimple .form__button:hover { background-color: #fff; color: #000; } .form--callbackSimple .form__button:hover .text:before { background-color: #000; } } .form--callbackSimple .form__checkbox-box { border-color: #171717; } .form--callbackSimple .form__checkbox-caption .icon__whatsapp { fill: #171717; } .form--callbackPopup .spinner { top: 20%; } .form--callbackPopup .form__label--button { margin-top: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 370px) { .form--callbackPopup .form__label--button { margin-top: 30px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackPopup .form__label--button { margin-top: 37px; } } @media screen and (min-width: 960px) { .form--callbackPopup .form__label--button { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .form--callbackPopup .form__info { color: #4d4d4d; font-family: 'PFDinDisplayProRegular', Helvetica, Arial, sans-serif; font-size: 0.875rem; } @media screen and (min-width: 767px) and (min-height: 600px) { .form--callbackPopup .form__info { font-size: 1rem; } } .form--callbackPopup .form__button { background-color: #fff; } @media screen and (min-width: 1200px) { .form--callbackPopup .form__button { background-color: transparent; } .form--callbackPopup .form__button:hover { background-color: #171717; } } .formPopup { display: none; width: 100%; height: 75vh; min-height: 460px; overflow: hidden; } @media screen and (min-width: 480px) { .formPopup { width: 60%; } } @media screen and (min-width: 767px) and (min-height: 600px) { .formPopup { width: 80%; } } @media screen and (min-width: 960px) { .formPopup { width: 850px; height: 500px; } } .formPopup__decor { pointer-events: none; position: absolute; } .formPopup__decor--1 { width: 65px; height: 50px; top: 5px; right: 5px; } .formPopup__decor--2 { width: 45px; height: 45px; left: 5px; bottom: 5px; display: none; } .formPopup__decor--3 { width: 80px; height: 60px; left: -27px; top: 50%; margin-top: -30px; display: block; } @media screen and (min-width: 767px) and (min-height: 600px) { .formPopup__decor--1 { width: 100px; height: 100px; } .formPopup__decor--2 { display: block; } .formPopup__decor--3 { display: none; } } .formPopup__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } .formPopup__left { position: relative; overflow: hidden; width: 100%; height: 100%; padding: 30px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 767px) and (min-height: 600px) { .formPopup__left { padding: 60px 30px; } } @media screen and (min-width: 960px) { .formPopup__left { width: 58%; padding: 0; padding-top: 40px; padding-left: 50px; padding-right: 60px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .formPopup__right { width: 42%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; display: none; } @media screen and (min-width: 960px) { .formPopup__right { display: block; } } .formPopup__title { font-size: 1.0625rem; text-align: center; } @media screen and (min-width: 767px) and (min-height: 600px) { .formPopup__title { font-size: 1.5rem; } } @media screen and (min-width: 960px) { .formPopup__title { text-align: left; } } @media screen and (min-width: 1200px) { .formPopup__title { font-size: 1.5rem; } } @media screen and (min-width: 1600px) { .formPopup__title { font-size: 1.875rem; } } .formPopup__subtitle { margin-top: 5px; line-height: 1.1; font-size: 1rem; color: #4c4c4c; text-align: center; } @media screen and (min-width: 370px) { .formPopup__subtitle { line-height: 1.3; font-size: 1.125rem; } } @media screen and (min-width: 960px) { .formPopup__subtitle { text-align: left; } } .formPopup__form { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .formPopup .form { margin-top: 25px; width: 100%; height: 100%; } @media screen and (min-width: 767px) and (min-height: 600px) { .formPopup .form { width: 70%; } } @media screen and (min-width: 960px) { .formPopup .form { width: 100%; } } .thanksPopup { display: none; width: 100%; height: auto; overflow: hidden; } @media screen and (min-width: 480px) { .thanksPopup { width: 60%; } } @media screen and (min-width: 767px) and (min-height: 600px) { .thanksPopup { width: 80%; } } @media screen and (min-width: 960px) { .thanksPopup { width: 500px; height: 376px; } } .thanksPopup__decor { pointer-events: none; position: absolute; width: 150px; height: 77px; bottom: -38.5px; right: 50%; margin-right: -75px; } @media screen and (min-width: 960px) { .thanksPopup__decor { bottom: 73px; right: 20px; margin-right: 0; } } .thanksPopup__inner { width: 100%; height: 100%; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; padding: 60px 30px; } @media screen and (min-width: 960px) { .thanksPopup__inner { padding: 0; padding-left: 100px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .thanksPopup__title { font-size: 1.5rem; line-height: 1; text-align: center; } @media screen and (min-width: 767px) and (min-height: 600px) { .thanksPopup__title { font-size: 1.5rem; } } @media screen and (min-width: 960px) { .thanksPopup__title { text-align: left; } } @media screen and (min-width: 1200px) { .thanksPopup__title { font-size: 1.5rem; } } @media screen and (min-width: 1600px) { .thanksPopup__title { font-size: 1.875rem; } } .thanksPopup__text { width: 75%; margin-top: 15px; font-size: 1rem; line-height: 1.2; color: #4c4c4c; text-align: center; } @media screen and (min-width: 370px) { .thanksPopup__text { width: 75%; font-size: 1.125rem; } } @media screen and (min-width: 767px) and (min-height: 600px) { .thanksPopup__text { width: 68%; line-height: 1.4; } } @media screen and (min-width: 960px) { .thanksPopup__text { text-align: left; } } .thanksPopup__button { margin-top: 20px; } @media screen and (min-width: 767px) and (min-height: 600px) { .thanksPopup__button { margin-top: 40px; } } .goodItem { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } @media screen and (min-width: 1200px) { .goodItem:hover { cursor: pointer; } .goodItem:hover .goodItem__back { opacity: 1; visibility: visible; } .goodItem:hover .goodItem__img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } } .goodItem__top { position: relative; overflow: hidden; width: 100%; height: 250px; } @media screen and (min-width: 370px) { .goodItem__top { height: 170px; } } @media screen and (min-width: 480px) { .goodItem__top { height: 250px; } } @media screen and (min-width: 1600px) { .goodItem__top { height: 426px; } } @media screen and (min-width: 2000px) { .goodItem__top { height: 526px; } } .goodItem__bottom { width: 100%; margin-top: 15px; padding-right: 10px; } @media screen and (min-width: 767px) and (min-height: 600px) { .goodItem__bottom { margin-top: 25px; } } .goodItem__img { will-change: transform; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .goodItem__back { will-change: opacity; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; 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; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,0.7); -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .goodItem__back-button { -ms-flex-negative: 0; flex-shrink: 0; } .goodItem__title { font-size: 1rem; line-height: 1.4; } @media screen and (min-width: 767px) and (min-height: 600px) { .goodItem__title { font-size: 1.125rem; } } @media screen and (min-width: 1600px) { .goodItem__title { font-size: 1.25rem; } } .goodItem__text { font-size: 1rem; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; line-height: 1.1; margin-top: 5px; } @media screen and (min-width: 767px) and (min-height: 600px) { .goodItem__text { margin-top: 5px; font-size: 1.125rem; } } @media screen and (min-width: 1600px) { .goodItem__text { font-size: 1.25rem; } } .box--header { position: fixed; z-index: 150; width: 100%; height: 60px; top: 0; left: 0; border-bottom: 1px solid #171717; background-color: #fff; -webkit-transition: 0s; transition: 0s; } .box--header .box__inner { height: 100%; padding-left: 30px; padding-right: 30px; } .box--header.fixed { -webkit-animation: none; animation: none; } .menuClose .box--header { -webkit-transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; } .menuClose .box--header .header__slogan, .menuClose .box--header .header__center, .menuClose .box--header .header__right { -webkit-animation: fadeIn--header 0.4s both 1s; animation: fadeIn--header 0.4s both 1s; } .menuOpen .box--header { pointer-events: none; position: fixed; padding-right: 17px; border-color: transparent; background-color: transparent; -webkit-transition: background-color 1s cubic-bezier(0.23, 1, 0.32, 1); transition: background-color 1s cubic-bezier(0.23, 1, 0.32, 1); } .menuOpen .box--header .header__slogan, .menuOpen .box--header .header__center, .menuOpen .box--header .header__right { opacity: 0; visibility: hidden; } .fancybox-enabled .box--header { padding-right: 0; } @media screen and (min-width: 370px) { .box--header { height: 60px; } } @media screen and (min-width: 480px) { .box--header { height: 60px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .box--header { height: 68px; } } @media screen and (min-width: 960px) { .box--header { position: fixed; height: 68px; background-color: #fff; border-color: #171717; } .box--header .box__inner { height: 100%; padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1200px) { .box--header { position: absolute; height: auto; background-color: transparent; border-color: transparent; } .box--header .box__inner { height: auto; padding: 0; } .fancybox-enabled .box--header { padding-right: 0; } .box--header.fixed { position: fixed; height: 60px; background-color: #fff; border-color: #171717; -webkit-animation: fadeIn--header 1s both; animation: fadeIn--header 1s both; } .fancybox-enabled .box--header.fixed { padding-right: 17px; } .box--header.fixed .box__inner { height: 100%; padding-left: 100px; padding-right: 100px; } .box--header.fixed .header { width: 100%; height: 100%; padding: 0; 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; } .box--header.fixed .header__left { -webkit-transition: width 0s; transition: width 0s; } .box--header.fixed .header__left, .box--header.fixed .header__right { width: 50%; } .box--header.fixed .header__center { position: absolute; z-index: 2; width: 78px; height: 78px; bottom: -28px; left: 50%; margin-left: -39px; 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; background-color: #fff; border-radius: 50%; } .box--header.fixed .header__right { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .box--header.fixed .header__phone { margin: 0; margin-right: 40px; } .box--header.fixed .header__slogan { opacity: 1; visibility: visible; } .menuClose .box--header { -webkit-transition: border-color 1s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; transition: border-color 1s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; } .menuClose .box--header .header__slogan, .menuClose .box--header .header__center, .menuClose .box--header .header__right { -webkit-animation: fadeIn--header 1s both 1s; animation: fadeIn--header 1s both 1s; } .menuOpen .box--header { pointer-events: none; position: fixed; padding-right: 17px; border-color: transparent; background-color: transparent; -webkit-transition: background-color 1s cubic-bezier(0.23, 1, 0.32, 1); transition: background-color 1s cubic-bezier(0.23, 1, 0.32, 1); } .menuOpen .box--header .header__slogan, .menuOpen .box--header .header__center, .menuOpen .box--header .header__right { opacity: 0; visibility: hidden; } } @media screen and (min-width: 1600px) { .box--header.fixed { height: 68px; } .box--header.fixed .header__center { bottom: -30px; width: 88px; height: 88px; } } @media screen and (min-width: 1900px) { .box--header.fixed { height: 80px; } .box--header.fixed .box__inner { height: 100%; padding-left: 190px; padding-right: 190px; } .box--header.fixed .header__center { bottom: -37px; width: 98px; height: 98px; } } @-webkit-keyframes fadeIn--header { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn--header { 0% { opacity: 0; } 100% { opacity: 1; } } .header { position: relative; width: 100%; height: 100%; 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; padding: 0; } @media screen and (min-width: 960px) { .header { width: 100%; height: 100%; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (min-width: 1200px) { .header { width: 55%; height: auto; padding-top: 33px; padding-right: 45px; padding-left: 45px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media screen and (min-width: 1600px) { .header { width: 55%; padding-left: 100px; padding-right: 75px; } } @media screen and (min-width: 1900px) { .header { width: 57%; padding-left: 160px; } } .header__logo { 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; width: 100%; height: 100%; } .header__left { width: 50%; 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; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: width 1s cubic-bezier(0.23, 1, 0.32, 1); transition: width 1s cubic-bezier(0.23, 1, 0.32, 1); } @media screen and (min-width: 960px) { .header__left { width: 50%; } } @media screen and (min-width: 1200px) { .header__left { width: 15%; } } @media screen and (min-width: 1600px) { .header__left { width: 13%; } } @media screen and (min-width: 1900px) { .header__left { width: 10%; } } .header__center { position: absolute; z-index: 2; width: 68px; height: 68px; bottom: -23px; left: 50%; margin-left: -34px; 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; background-color: #fff; border-radius: 50%; } @media screen and (min-width: 370px) { .header__center { width: 68px; height: 68px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .header__center { width: 88px; height: 88px; bottom: -33px; } } @media screen and (min-width: 960px) { .header__center { width: 88px; height: 88px; bottom: -28px; margin-left: -44px; } } @media screen and (min-width: 1200px) { .header__center { position: relative; width: 78px; height: 78px; bottom: auto; left: auto; margin: 0; background-color: transparent; } } @media screen and (min-width: 1600px) { .header__center { width: 88px; height: 88px; } } @media screen and (min-width: 1900px) { .header__center { width: 98px; height: 98px; } } .header__right { width: 50%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 960px) { .header__right { width: 50%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media screen and (min-width: 1200px) { .header__right { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: auto; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .header__slogan { margin-left: 48px; font-family: 'Neumann', Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1; text-transform: uppercase; opacity: 0; visibility: hidden; } @media screen and (min-width: 960px) { .header__slogan { opacity: 0; visibility: hidden; } } @media screen and (min-width: 1200px) { .header__slogan { opacity: 0; visibility: hidden; } } .header__phone { font-family: 'Neumann', Helvetica, Arial, sans-serif; font-size: 1rem; text-transform: uppercase; margin: 0; 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; } .header__phone .icon { margin-right: 0; 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; } .header__phone .text { display: none; } .header__phone svg { -webkit-transition: 0.25s; transition: 0.25s; width: 22px; height: 22px; fill: #171717; } @media screen and (min-width: 370px) { .header__phone svg { width: 22px; height: 22px; } } @media screen and (min-width: 480px) { .header__phone svg { width: 25px; height: 25px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .header__phone { margin: 0; } .header__phone .text { display: none; } .header__phone .icon { margin-right: 0; } .header__phone svg { width: 28px; height: 28px; } } @media screen and (min-width: 960px) { .header__phone { margin: 0; } .header__phone svg { width: 14px; height: 14px; } .header__phone .text { display: block; } .header__phone .icon { margin-right: 8px; } } @media screen and (min-width: 1200px) { .header__phone { font-size: 1rem; margin: 0; margin-bottom: 13px; } .header__phone:hover { cursor: pointer; } .header__phone:hover svg { fill: #424242; } } @media screen and (min-width: 1600px) { .header__phone { font-size: 1.125rem; } .header__phone svg { width: 17px; height: 17px; } } .header__callback { display: none; } @media screen and (min-width: 960px) { .header__callback { display: none; } } @media screen and (min-width: 1200px) { .header__callback { display: block; } } .box--menu { will-change: transform, opacity, visibility; position: fixed; top: 0; left: 0; width: 100%; height: 100%; width: 100vw; height: 100vh; z-index: 100; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-transition: opacity 0s 2s, visibility 0s 2s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: opacity 0s 2s, visibility 0s 2s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: opacity 0s 2s, visibility 0s 2s, transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: opacity 0s 2s, visibility 0s 2s, transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; } .box--menu.open { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: opacity 0s, visibility 0s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0s, visibility 0s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0s, visibility 0s, transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0s, visibility 0s, transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s; } .box--menu.open .menu { -webkit-animation: fadeIn--menuContent 1s 0.4s both; animation: fadeIn--menuContent 1s 0.4s both; } .box--menu .box__inner { height: 100%; padding-bottom: 0; } @media screen and (min-width: 960px) { .box--menu .box__inner { padding-bottom: 40px; } } @-webkit-keyframes fadeIn--menuContent { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn--menuContent { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut--menuContent { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut--menuContent { 0% { opacity: 1; } 100% { opacity: 0; } } .menu { -webkit-animation: fadeOut--menuContent 0.4s both; animation: fadeOut--menuContent 0.4s both; height: 100%; width: 100%; 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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .menu__decor { pointer-events: none; z-index: -1; position: absolute; background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 13%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 0%); background-size: 1em 1em; background-position: 0 0; top: 50%; width: 100px; height: 100px; } .menu__decor--1 { left: -94px; -webkit-transform: translate3d(-30px, -50%, 0); transform: translate3d(-30px, -50%, 0); display: none; } .menu__decor--2 { right: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); display: block; } @media screen and (min-width: 767px) and (min-height: 600px) { .menu__decor { width: 188px; height: 188px; background-image: -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), -webkit-radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-image: radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%), radial-gradient(rgba(23,23,23,0.3) 5%, transparent 10%); background-size: 20px 20px; background-position: 20px 20px; } .menu__decor--2 { right: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } } @media screen and (min-width: 480px) { .menu__decor--1, .menu__decor--2 { display: none; } } @media screen and (min-width: 1200px) { .menu__decor--1, .menu__decor--2 { display: block; } .menu__decor--1 { -webkit-transform: translate3d(-100px, -50%, 0); transform: translate3d(-100px, -50%, 0); } .menu__decor--2 { right: -94px; -webkit-transform: translate3d(108px, -50%, 0); transform: translate3d(108px, -50%, 0); } } @media screen and (min-width: 1900px) { .menu__decor--1 { -webkit-transform: translate3d(-190px, -50%, 0); transform: translate3d(-190px, -50%, 0); } .menu__decor--2 { -webkit-transform: translate3d(198px, -50%, 0); transform: translate3d(198px, -50%, 0); } } .menu__social { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .menu__content { position: relative; width: 100%; height: 50%; } @media screen and (min-width: 480px) { .menu__content { height: auto; } } .menu__list { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 480px) { .menu__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .menu__list-item { position: relative; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; 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; } .menu__list-item:after, .menu__list-item:before { content: ''; position: absolute; left: 50%; width: 1px; height: 100px; background-color: #171717; visibility: hidden; opacity: 0; -webkit-transition: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s cubic-bezier(0.23, 1, 0.32, 1); } .menu__list-item:before { top: 100%; margin-top: 27px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .menu__list-item:after { bottom: 100%; margin-bottom: 27px; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .menu__list-item.active { padding-left: 26px; } .menu__list-item.active .text:after, .menu__list-item.active .text:before { opacity: 1; visibility: visible; } .menu__list-item.active:hover:after, .menu__list-item.active:hover:before { visibility: hidden; opacity: 0; } @media screen and (min-width: 480px) { .menu__list-item.active { padding-left: 0; } } @media screen and (min-width: 960px) { .menu__list-item { width: 25%; } } @media screen and (min-width: 1200px) { .menu__list-item:after, .menu__list-item:before { height: 80px; } .menu__list-item:before { margin-top: 20px; } .menu__list-item:after { margin-bottom: 20px; } .menu__list-item:hover { cursor: pointer; } .menu__list-item:hover:after, .menu__list-item:hover:before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } } @media screen and (min-width: 1600px) { .menu__list-item:after, .menu__list-item:before { height: 100px; } .menu__list-item:before { margin-top: 27px; } .menu__list-item:after { margin-bottom: 27px; } } .menu__list-link { 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; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 100%; height: 100%; font-size: 1.5rem; line-height: 1; } .menu__list-link .text { display: block; position: relative; } .menu__list-link .text:after { will-change: opacity; content: ''; position: absolute; z-index: -1; top: 50%; left: 15%; height: 270px; width: 70%; margin-top: -135px; background-color: #f3f3f3; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; display: none; } .menu__list-link .text:before { will-change: opacity; content: ''; position: absolute; width: 8px; height: 8px; background-color: #171717; right: 100%; top: 50%; margin-top: -4px; margin-right: 18px; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } @media screen and (min-width: 480px) { .menu__list-link { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1.25rem; } } @media screen and (min-width: 767px) and (min-height: 600px) { .menu__list-link { font-size: 1.5rem; } } @media screen and (min-width: 960px) { .menu__list-link { font-size: 1.875rem; } .menu__list-link .text:after { display: block; } } @media screen and (min-width: 1200px) { .menu__list-link { font-size: 2.1875rem; } .menu__list-link .text:after { height: 270px; margin-top: -135px; } } @media screen and (min-width: 1600px) { .menu__list-link { font-size: 2.8125rem; } .menu__list-link .text:after { height: 325px; margin-top: -162.5px; } } .menu__footer { width: 100%; height: 25%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -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-color: #f3f3f3; position: relative; } .menu__footer:before, .menu__footer:after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; background-color: #f3f3f3; display: block; } .menu__footer:before { left: 100%; } .menu__footer:after { right: 100%; } @media screen and (min-width: 480px) { .menu__footer { height: 35%; } } @media screen and (min-width: 767px) and (min-height: 600px) { .menu__footer { height: 20%; } } @media screen and (min-width: 960px) { .menu__footer { height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: transparent; } .menu__footer:before, .menu__footer:after { display: none; } } .menu__footer-left, .menu__footer-center, .menu__footer-right { width: 100%; 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; font-family: 'PFDinDisplayProLight', Helvetica, Arial, sans-serif; font-size: 1rem; } @media screen and (min-width: 370px) { .menu__footer-left, .menu__footer-center, .menu__footer-right { font-size: 1.125rem; } } @media screen and (min-width: 960px) { .menu__footer-left, .menu__footer-center, .menu__footer-right { width: 27%; } } @media screen and (min-width: 1200px) { .menu__footer-left, .menu__footer-center, .menu__footer-right { font-size: 1rem; } } @media screen and (min-width: 1600px) { .menu__footer-left, .menu__footer-center, .menu__footer-right { width: 20%; font-size: 1.25rem; } } .menu__footer-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 10px; } @media screen and (min-width: 370px) { .menu__footer-left { padding-bottom: 15px; } } @media screen and (min-width: 480px) { .menu__footer-left { padding-bottom: 10px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .menu__footer-left { padding-bottom: 25px; } } @media screen and (min-width: 960px) { .menu__footer-left { padding-bottom: 0; } } .menu__footer-center { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 10px; } @media screen and (min-width: 370px) { .menu__footer-center { padding-bottom: 15px; } } @media screen and (min-width: 480px) { .menu__footer-center { padding-bottom: 10px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .menu__footer-center { padding-bottom: 25px; } } @media screen and (min-width: 960px) { .menu__footer-center { padding-bottom: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .menu__footer-right { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media screen and (min-width: 960px) { .menu__footer-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .menu__address { line-height: 1.1; } @media screen and (min-width: 1200px) { .menu__address { line-height: 1.1; } } @media screen and (min-width: 1600px) { .menu__address { line-height: 1.3; } } .menu__phone { line-height: 1; font-family: 'PFDinDisplayProBlack', Helvetica, Arial, sans-serif; } .menu__mail { line-height: 1; } .menuButton { pointer-events: all; -ms-flex-negative: 0; flex-shrink: 0; position: relative; z-index: 15; width: 39px; height: 39px; 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; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: 0.4s; transition: 0.4s; } .menuOpen .menuButton .menuButton__burger { background-color: transparent; } .menuOpen .menuButton .menuButton__burger:before, .menuOpen .menuButton .menuButton__burger:after { top: 0 !important; } .menuOpen .menuButton .menuButton__burger:before { -webkit-transform: rotate3d(0, 0, 1, 45deg) !important; transform: rotate3d(0, 0, 1, 45deg) !important; } .menuOpen .menuButton .menuButton__burger:after { -webkit-transform: rotate3d(0, 0, 1, -45deg) !important; transform: rotate3d(0, 0, 1, -45deg) !important; } .menuButton__burger { position: relative; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 65%; height: 2px; background-color: #171717; -webkit-transition: 0.3s cubic-bezier(0.7, 0, 0.3, 1); transition: 0.3s cubic-bezier(0.7, 0, 0.3, 1); } .menuButton__burger:before, .menuButton__burger:after { will-change: transform; content: ''; position: absolute; left: 0; width: 39px; height: 2px; background-color: #171717; -webkit-transition: top 0.3s cubic-bezier(0.7, 0, 0.3, 1), background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: top 0.3s cubic-bezier(0.7, 0, 0.3, 1), background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), top 0.3s cubic-bezier(0.7, 0, 0.3, 1), background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), top 0.3s cubic-bezier(0.7, 0, 0.3, 1), background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform-origin: center center; transform-origin: center center; } .menuButton__burger:before { top: 10px; } .menuButton__burger:after { top: -10px; } @media screen and (min-width: 480px) { .menuButton__burger:before { top: 10px; } .menuButton__burger:after { top: -10px; } } @media screen and (min-width: 767px) and (min-height: 600px) { .menuButton__burger:before { top: 11px; } .menuButton__burger:after { top: -11px; } } @media screen and (min-width: 1200px) { .menuButton:hover { cursor: pointer; } .menuButton:hover .menuButton__burger { width: 100%; } .menuButton:hover .menuButton__burger:before { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .menuButton:hover .menuButton__burger:after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }