@charset "utf-8"; /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } 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; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } 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: 1em 40px; } 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; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } 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; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } body { overflow-x: hidden; min-width: 320px; } body._overflow { overflow: hidden; } @media only screen and (min-width: 768px) { .workplace._active { overflow: scroll; } } @media only screen and (max-width: 999px) and (min-width: 768px) { body._overflow { position: fixed; width: 100%; } } @media only screen and (max-width: 767px) { body._overflow { position: fixed; width: 100%; } } .grid_inner { width: 100%; padding-left: 95px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .grid_inner { padding-left: 30px; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .grid_inner { padding-left: 30px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .grid_inner { padding-left: 30px; } } @media only screen and (max-width: 767px) { .grid_inner { padding-left: 20px; } } /* font-family: "GothamProRegular"; */ @font-face { font-family: "GothamProRegular"; src: url("../fonts/GothamProRegular/GothamProRegular.eot"); src: url("../fonts/GothamProRegular/GothamProRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProRegular/GothamProRegular.woff") format("woff"), url("../fonts/GothamProRegular/GothamProRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProBold"; */ @font-face { font-family: "GothamProBold"; src: url("../fonts/GothamProBold/GothamProBold.eot"); src: url("../fonts/GothamProBold/GothamProBold.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProBold/GothamProBold.woff") format("woff"), url("../fonts/GothamProBold/GothamProBold.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProBlack"; */ @font-face { font-family: "GothamProBlack"; src: url("../fonts/GothamProBlack/GothamProBlack.eot"); src: url("../fonts/GothamProBlack/GothamProBlack.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProBlack/GothamProBlack.woff") format("woff"), url("../fonts/GothamProBlack/GothamProBlack.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProItalic"; */ @font-face { font-family: "GothamProItalic"; src: url("../fonts/GothamProItalic/GothamProItalic.eot"); src: url("../fonts/GothamProItalic/GothamProItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProItalic/GothamProItalic.woff") format("woff"), url("../fonts/GothamProItalic/GothamProItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProMedium"; */ @font-face { font-family: "GothamProMedium"; src: url("../fonts/GothamProMedium/GothamProMedium.eot"); src: url("../fonts/GothamProMedium/GothamProMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProMedium/GothamProMedium.woff") format("woff"), url("../fonts/GothamProMedium/GothamProMedium.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProLight"; */ /* @font-face { font-family: "GothamProLight"; src: url("../fonts/GothamProLight/GothamProLight.eot"); src: url("../fonts/GothamProLight/GothamProLight.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProLight/GothamProLight.woff") format("woff"), url("../fonts/GothamProLight/GothamProLight.ttf") format("truetype"); font-style: normal; font-weight: normal; }*/ /* font-family: "GothamProLight"; */ @font-face { font-family: "GothamProLight"; src: url("../fonts/GPL/gothaprolig.eot"); src: url("../fonts/GPL/gothaprolig.eot?#iefix") format("embedded-opentype"), url("../fonts/GPL/gothaprolig.woff") format("woff"), url("../fonts/GPL/gothaprolig.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProMediumItalic"; */ @font-face { font-family: "GothamProMediumItalic"; src: url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot"); src: url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProMediumItalic/GothamProMediumItalic.woff") format("woff"), url("../fonts/GothamProMediumItalic/GothamProMediumItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProLightItalic"; */ @font-face { font-family: "GothamProLightItalic"; src: url("../fonts/GothamProLightItalic/GothamProLightItalic.eot"); src: url("../fonts/GothamProLightItalic/GothamProLightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProLightItalic/GothamProLightItalic.woff") format("woff"), url("../fonts/GothamProLightItalic/GothamProLightItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProBoldItalic"; */ @font-face { font-family: "GothamProBoldItalic"; src: url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot"); src: url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProBoldItalic/GothamProBoldItalic.woff") format("woff"), url("../fonts/GothamProBoldItalic/GothamProBoldItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "GothamProBlackItalic"; */ @font-face { font-family: "GothamProBlackItalic"; src: url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot"); src: url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamProBlackItalic/GothamProBlackItalic.woff") format("woff"), url("../fonts/GothamProBlackItalic/GothamProBlackItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansRegular"; */ @font-face { font-family: "MuseoSansRegular"; src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot"); src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansRegular/MuseoSansRegular.woff") format("woff"), url("../fonts/MuseoSansRegular/MuseoSansRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansBold"; */ @font-face { font-family: "MuseoSansBold"; src: url("../fonts/MuseoSansBold/MuseoSansBold.eot"); src: url("../fonts/MuseoSansBold/MuseoSansBold.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansBold/MuseoSansBold.woff") format("woff"), url("../fonts/MuseoSansBold/MuseoSansBold.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansItalic"; */ @font-face { font-family: "MuseoSansItalic"; src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot"); src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansItalic/MuseoSansItalic.woff") format("woff"), url("../fonts/MuseoSansItalic/MuseoSansItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansLight"; */ @font-face { font-family: "MuseoSansLight"; src: url("../fonts/MuseoSansLight/MuseoSansLight.eot"); src: url("../fonts/MuseoSansLight/MuseoSansLight.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansLight/MuseoSansLight.woff") format("woff"), url("../fonts/MuseoSansLight/MuseoSansLight.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansMedium"; */ @font-face { font-family: "MuseoSansMedium"; src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot"); src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansMedium/MuseoSansMedium.woff") format("woff"), url("../fonts/MuseoSansMedium/MuseoSansMedium.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansBlack"; */ @font-face { font-family: "MuseoSansBlack"; src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot"); src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansBlack/MuseoSansBlack.woff") format("woff"), url("../fonts/MuseoSansBlack/MuseoSansBlack.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansBoldItalic"; */ @font-face { font-family: "MuseoSansBoldItalic"; src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot"); src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.woff") format("woff"), url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansMediumItalic"; */ @font-face { font-family: "MuseoSansMediumItalic"; src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot"); src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.woff") format("woff"), url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansLightItalic"; */ @font-face { font-family: "MuseoSansLightItalic"; src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot"); src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.woff") format("woff"), url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } /* font-family: "MuseoSansBlackItalic"; */ @font-face { font-family: "MuseoSansBlackItalic"; src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot"); src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.woff") format("woff"), url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.ttf") format("truetype"); font-style: normal; font-weight: normal; } .head { *zoom: 1; width: 100%; height: 80px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15); z-index: 20; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .head:before, .head:after { display: table; content: ""; line-height: 0; } .head:after { clear: both; } .head._active { z-index: 1000; } .head__logo { display: block; background: url('../images/logo.svg') 50% 50% no-repeat; float: left; width: 253px; height: 100%; margin-left: 24px; } .head__mobile-menu { display: none; z-index: 9; width: 91px; height: 80px; float: right; border-left: 1px solid #e9ecf0; text-align: center; /* background: url('@{pathToImg}icons/icon-menu.svg') 50% 50% no-repeat; &._active{ background: url('@{pathToImg}icons/icon-close.svg') 50% 50% no-repeat; }*/ } .head__mobile-menu .hamburger { display: block; cursor: pointer; height: 100%; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; text-align: center; } .head__mobile-menu .hamburger-box { width: 35px; height: 24px; display: inline-block; position: relative; transform: translateY(100%); } .head__mobile-menu .hamburger-inner { display: block; top: 50%; margin-top: -1px; } .head__mobile-menu .hamburger:hover { opacity: 0.7; } .head__mobile-menu .hamburger-inner, .head__mobile-menu .hamburger-inner::before, .head__mobile-menu .hamburger-inner::after { width: 35px; height: 2px; background-color: #35a833; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .head__mobile-menu .hamburger-inner::before, .head__mobile-menu .hamburger-inner::after { content: ""; display: block; } .head__mobile-menu .hamburger-inner::before { top: -11px; } .head__mobile-menu .hamburger-inner::after { bottom: -11px; } .head__mobile-menu .hamburger--spin .hamburger-inner { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .head__mobile-menu .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; } .head__mobile-menu .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .head__mobile-menu .hamburger--spin._active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .head__mobile-menu .hamburger--spin._active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; } .head__mobile-menu .hamburger--spin._active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .head__menu { *zoom: 1; float: right; } .head__menu:before, .head__menu:after { display: table; content: ""; line-height: 0; } .head__menu:after { clear: both; } .head__menu__item { display: block; float: left; font-size: 14px; line-height: 80px; padding: 0 35px; height: 80px; border-left: 1px solid #e9ecf0; font-family: "GothamProMedium"; text-decoration: none; text-transform: uppercase; color: #25353f; transition: color 0.3s ease-out 0s; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .head__menu__item:hover { color: #35a833; } .head__menu__item._active { border-bottom: 2px solid #35a833; color: #35a833; } @media only screen and (max-width: 999px) and (min-width: 768px) { .head__menu { display: none; } .head__mobile-menu { display: block; } } @media only screen and (max-width: 767px) { .head { height: 70px; } .head__menu { display: none; } .head__logo { width: 205px; margin-left: 20px; background-size: contain; } .head__mobile-menu { display: block; width: 75px; height: 70px; } } .footer { position: relative; z-index: 2; } .footer__mobile-top { display: none; } .footer__top { height: 143px; width: 100%; background-color: #25353f; padding-top: 41px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 95px; } .footer__top ul { margin: 0; padding-top: 41px; padding: 0; text-align: justify; } .footer__top ul li { display: inline-block; text-align: left; vertical-align: top; } .footer__top ul li._helper { width: 100%; height: 0; visibility: hidden; } .footer__top ul li._address { margin-top: 3px; } .footer__top ul li._email { margin-top: 3px; } .footer__top__slogan__logo { display: inline-block; width: 159px; height: 19px; background: url('../images/logo-footer.svg') 50% 50% no-repeat; } .footer__top__slogan__border { height: 25px; width: 1px; display: inline-block; background-color: #515d65; margin: 0 13px -4px 17px; } .footer__top__slogan__text { font-family: "MuseoSansLight"; display: inline-block; color: #fff; font-size: 16px; word-spacing: 1px; } .footer__top__address { font-family: "MuseoSansLight"; display: inline-block; color: #fff; } .footer__top__email { font-family: "MuseoSansLight"; display: inline-block; color: #fff; } .footer__top__phone { font-family: "MuseoSansLight"; display: inline-block; color: #fff; text-decoration: none; } .footer__top__icon { position: relative; display: inline-block; } .footer__top__icon._address { background: url('../images/icons/icon-address.svg') 50% 50% no-repeat; width: 20px; height: 23px; top: -13px; margin-right: 6px; } .footer__top__icon._email { background: url('../images/icons/icon-email.svg') 50% 50% no-repeat; width: 21px; height: 17px; margin-right: 11px; top: 2px; left: 6px; } .footer__top__icon._phone { background: url('../images/icons/icon-phone.svg') 50% 50% no-repeat; width: 14px; height: 21px; top: 4px; left: -4px; } .footer__top__social-networks { margin-top: -8px; } .footer__top__social-networks__item { width: 38px; height: 39px; display: inline-block; margin-right: 8px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .footer__top__social-networks__item._vk { background-image: url('../images/icons/icon-vk.svg'); } .footer__top__social-networks__item._fb { background-image: url('../images/icons/icon-fb.svg'); } .footer__top__social-networks__item._inst { background-image: url('../images/icons/icon-inst.svg'); } .footer__top__social-networks__item._goo { background-image: url('../images/icons/icon-g+.svg'); } .footer__top__social-networks__item:hover { opacity: 0.8; } .footer__bottom { height: 50px; width: 100%; background-color: #1e2b33; line-height: 50px; text-align: center; color: #7d868c; } .footer__bottom__copyright { font-family: "MuseoSansLight"; font-size: 14px; } @media only screen and (max-width: 1600px) { .footer__top { padding-right: 30px; } .footer__top__slogan { width: 250px; position: relative; } .footer__top__slogan__border { display: none; } .footer__top__slogan__text { position: absolute; top: 34px; left: 0; font-size: 16px; } } @media only screen and (max-width: 1150px) { .footer__top ul { position: relative; } .footer__top__wrapper { position: absolute; top: 52px; left: 27.5%; } } @media only screen and (max-width: 1000px) { .footer__top { padding-top: 48px; } .footer__top ul { position: relative; } .footer__top__wrapper { position: absolute; top: 52px; left: 27.5%; } .footer__top__slogan__text { top: 42px; left: 1px; font-size: 14px; } .footer__top__social-networks { top: 6px; } .footer__top__social-networks__item { width: 31px; height: 31px; margin-right: 7px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .footer__top { display: none; } .footer__top__slogan__text { position: relative; top: 0; left: 0; padding-top: 15px; } .footer__top__address { font-size: 16px; width: 250px; } .footer__top__email { font-size: 16px; } .footer__top__icon._address { top: -19px; } .footer__top__icon._email { left: auto; margin-right: 6px; } .footer__top__icon._phone { left: auto; margin-left: 4px; margin-right: 5px; } .footer__top__social-networks { padding-top: 20px; } .footer__top__social-networks__item { width: 46px; height: 46px; display: inline-block; margin-right: 11px; background-position: 50% 50%; background-size: 46px 46px; } .footer__top__info { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 9px; } .footer__top__info__phone { padding-top: 20px; font-size: 16px; } .footer__top__info__mail { padding-top: 24px; } .footer__mobile-top { display: block; height: 210px; width: 100%; padding-top: 45px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #25353f; } .footer__mobile-top__wrapper { *zoom: 1; width: 708px; margin: 0 auto; } .footer__mobile-top__wrapper:before, .footer__mobile-top__wrapper:after { display: table; content: ""; line-height: 0; } .footer__mobile-top__wrapper:after { clear: both; } .footer__mobile-top__block { width: 50%; float: left; } .footer__mobile-top__block._right { float: right; } } @media only screen and (max-width: 767px) { .footer__top { display: none; } .footer__top__slogan__text { position: relative; top: 0; left: 0; padding-top: 11px; } .footer__top__address { width: 250px; font-size: 16px; } .footer__top__email { font-size: 16px; } .footer__top__icon._address { top: -19px; } .footer__top__icon._email { left: auto; margin-right: 6px; } .footer__top__icon._phone { left: auto; margin-left: 4px; margin-right: 5px; } .footer__top__social-networks { padding-top: 33px; } .footer__top__social-networks__item { width: 55px; height: 55px; display: inline-block; margin-right: 16px; background-position: 50% 50%; background-size: 55px 55px; } .footer__top__info { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 0px; } .footer__top__info__phone { padding-top: 20px; font-size: 16px; } .footer__top__info__address { padding-top: 42px; } .footer__top__info__mail { padding-top: 24px; } .footer__mobile-top { display: block; height: 408px; width: 100%; padding-top: 45px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #25353f; } .footer__mobile-top__wrapper { *zoom: 1; width: 320px; margin: 0 auto; padding-left: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .footer__mobile-top__wrapper:before, .footer__mobile-top__wrapper:after { display: table; content: ""; line-height: 0; } .footer__mobile-top__wrapper:after { clear: both; } .footer__mobile-top__block { width: 100%; float: none; } .footer__mobile-top__block._right { float: none; } } .button { display: block; width: 375px; height: 60px; line-height: 60px; color: #35a833; border: 1px solid #35a833; background: #fff; border-radius: 30px; margin-bottom: 20px; font-family: "GothamProMedium"; font-size: 15px; text-align: center; text-transform: uppercase; z-index: 3; } .button:hover { color: #33a88e; border: 1px solid #33a88e; } .button._replace { position: relative; background: #35a833; } .button._replace:after { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; content: "Заполните форму справа ›"; color: #fff; background: #35a833; } .button._full { border: none; background: #35a833; color: #fff; text-decoration: none; } .button._full:hover { color: #fff; border: none; background: #33a88e; } .button._places-partner { margin: 0 auto; } .button._contacts { margin-top: 35px; } /* When creating your CSS selector, change "brown" to something of your choosing */ .waves-effect.waves-brown .waves-ripple { /* The alpha value allows the text and background color of the button to still show through. */ background-color: rgba(57, 170, 51, 0.65); } @media only screen and (max-width: 767px) { .button { width: 100%; font-size: 12px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .button._places-btn { margin: 0 auto; } } /* form starting stylings ------------------------------- */ .group { position: relative; margin-bottom: 34px; width: 245px; display: inline-block; } .group._name { margin-right: 35px; width: 300px; } .group._select { margin-right: 35px; width: 300px; top: -14px; } .group._select .label-select { color: #a0b4bf; font-size: 15px; font-family: "MuseoSansLight"; } .group._email { float: right; } .group._popup { width: 340px; } .group._left { margin-right: 45px; } .group._right { float: right; margin-right: 0px; } input { font-family: "MuseoSansLight"; font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 300px; height: 25px; border: none; border-bottom: 1px solid #d9e1e5; } input:focus { outline: none; } input { outline: none; } input.valid { border-bottom: solid 1px #35a833!important; box-shadow: none!important; } input.invalid { border-bottom: solid 1px #f44336!important; box-shadow: none!important; } input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 50px #fff !important; /* Цвет фона */ -webkit-text-fill-color: #999 !important; /* цвет текста */ color: #999 !important; /* цвет текста */ } /* LABEL ======================================= */ label { color: #a0b4bf; font-size: 15px; font-family: "MuseoSansLight"; font-weight: normal; position: absolute; pointer-events: none; left: 11px; top: 17px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } label:after { padding-top: 4px; font-size: 12px; } label.active { transform: translateY(-35px); color: #35a833 !important; } /* input:focus ~ label, input:valid ~ label { /*iinput:focus ~ label, input:read-write ~ label { top: -17px; left: 0px; font-size:14px; color: @green; } */ .bar { position: absolute; display: block; width: 100%; top: 47px; } .bar:before, .bar:after { content: ''; height: 1px; width: 0; bottom: 1px; position: absolute; background: #35a833; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .bar:before { left: 50%; } .bar:after { right: 50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border: none; box-shadow: none; } input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search] { border-bottom: 1px solid #d9e1e5; } .textarea { position: relative; top: -9px; } .textarea__label { color: #a0b4bf; font-size: 14px; font-family: "MuseoSansLight"; } .textarea textarea { margin-top: 16px; width: 100%; height: 195px; padding-top: 13px; padding-left: 20px; font-size: 16px; border: 1px solid #d9e1e5; resize: none; font-family: "MuseoSansLight"; } .textarea textarea:focus { outline: none; } .textarea textarea::-moz-placeholder { color: #a0b4bf; } .textarea textarea::-webkit-input-placeholder { color: #a0b4bf; } @media only screen and (max-width: 1919px) and (min-width: 1600px) { .group._select { margin-right: 0; } } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .group { width: 205px; } .group._name { margin-right: 25px; width: 295px; } .group._select { margin-right: 0; width: 295; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .group { width: 190px; } .group._name { margin-right: 25px; width: 290px; } .group._select { margin-right: 0; width: 290px; } .group._popup { width: 100%; margin-bottom: 39px; } .group._left { margin-right: 0px; } } @media only screen and (max-width: 767px) { .group { width: 100%; } .group._name { margin-right: 0; width: 100%; } .group._email { float: none; } .group._select { margin-right: 0; width: 100%; } .group._popup { width: 100%; margin-bottom: 39px; } .group._left { margin-right: 0px; } .textarea { position: relative; top: 0; } } .selectric { border: none; background: #fff; border-bottom: 1px solid #d9e1e5; } .selectric-items { border: 1px solid #d9e1e5; background: #fff; } .selectric-items li { font-size: 15px; font-family: "MuseoSansLight"; color: #25353f; } .selectric-items li.highlighted { color: #35a833; background: #fff; } .selectric-items li:hover { background: #d9e1e5; } .selectric-hover { border-bottom: 1px solid #35a833; } .selectric .label { font-size: 15px; font-family: "MuseoSansLight"; font-weight: bold; color: #25353f; } .selectric .button { width: 35px; height: 35px; border: none; border-radius: 0; background: url('../images/arrow.png') 50% 50% no-repeat; transform: rotate(-90deg); } .selectric .button:after { display: none; } .selectric-open .button { transform: rotate(0deg); } .mobile-select { margin-top: -7px; display: none; border: none; border-bottom: 1px solid #d9e1e5; font-size: 15px; } .mobile-select:hover { border-bottom: 1px solid #35a833; } .mobile-select:focus { outline: none; border-bottom: 1px solid #35a833; } .mobile-select option { font-size: 15px; font-family: "MuseoSansLight"; color: #25353f; } @media only screen and (max-width: 999px) { .selectric-wrapper { display: none; } .mobile-select { display: block; } } .popup { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; height: 0; width: 0; overflow: hidden; visibility: hidden; left: -200%; } .popup__close { display: none; background: url('../images/icons/icon-close.svg') 50% 50% no-repeat; width: 91px; height: 80px; position: absolute; right: 0; top: 0; } .popup__background { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 899; opacity: 0; visibility: hidden; transition: all 0.5s ease 0s; } .popup__background._active { visibility: visible; opacity: 1; } .popup__wrapper { width: 730px; margin: 209px auto 0 auto; } .popup__content { width: 960px; height: auto; position: fixed; top: 0; bottom: 0; right: 0; overflow: auto; background: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; z-index: 999; opacity: 0; visibility: hidden; transform: translateX(200px); transition: all 0.5s ease 0s; } .popup__content._menu { display: none; width: 320px; top: 80px; } .popup__content._active { visibility: visible; opacity: 1; transform: translateX(0); } .popup__form { *zoom: 1; padding-top: 53px; } .popup__form:before, .popup__form:after { display: table; content: ""; line-height: 0; } .popup__form:after { clear: both; } .popup__title { font-family: "GothamProLight"; color: #25353f; text-transform: uppercase; font-size: 26px; font-weight: bold; } .popup__title._success { background: url('../images/icons/icon-success-popup.svg') 0 50% no-repeat; padding: 40px 0 40px 130px; } .popup__text { font-family: "MuseoSansLight"; font-size: 19px; color: #25353f; font-weight: bold; padding-top: 23px; width: 560px; } .popup__btn { text-align: center; padding-top: 23px; } .popup__btn a { display: inline-block; } @media only screen and (max-width: 1919px) and (min-width: 1600px) { .popup__content { width: 800px; } } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .popup__content { width: 800px; } .popup__wrapper { margin: 86px auto 0 auto; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .popup__content { width: 440px; } .popup__wrapper { margin: 38px auto 0 auto; width: 380px; } .popup__title { font-size: 23px; } .popup__text { font-size: 16px; width: 100%; padding-top: 29px; line-height: 25px; } .popup__form { padding-top: 30px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .popup__content { width: 100%; height: 100%; } .popup__content._menu { display: block; } .popup__wrapper { margin: 90px auto 0 auto; } .popup__background { top: 80px; } .popup__close { display: block; } } @media only screen and (max-width: 767px) { .popup__content { width: 100%; height: 100%; } .popup__content._menu { top: 70px; width: 100%; display: block; } .popup__background { top: 70px; } .popup__close { display: block; } .popup__wrapper { width: 100%; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 61px auto 0 auto; } .popup__title { font-size: 23px; text-transform: none; } .popup__text { width: 100%; font-size: 16px; padding-top: 18px; line-height: 26px; } .popup__form { padding-top: 26px; } .popup__btn { padding-top: 0px; } } .menu { padding-top: 12px; } .menu__item { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 85px; border-bottom: 1px solid #e9ecf0; } .menu__item__link { color: #25353f; display: block; padding-left: 76px; width: 100%; height: 100%; line-height: 85px; font-family: "GothamProMedium"; text-transform: uppercase; font-size: 18px; transition: color 0.1s ease-out 0s; white-space: nowrap; } .menu__item__link:active { color: #35a833; } .menu__item__link:hover { color: #35a833; } /* == 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: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; 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 { transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .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 { transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); 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: 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: 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: #f0f0f0; } .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: #d2d2d2; background-color: #35a833; 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: #d2d2d2; background-color: #35a833; 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); } /* ---------------------------------------- */ .home__main { *zoom: 1; width: 100%; height: calc(100vh - 80px); min-height: 300px; position: relative; overflow: hidden; } .home__main:before, .home__main:after { display: table; content: ""; line-height: 0; } .home__main:after { clear: both; } .home__main__img { position: absolute; left: 30%; top: 0; background: url('../images/background/main.png') 0 0 no-repeat; background-position: 0 0; background-size: cover; height: calc(100vh - 80px); min-height: 300px; width: 70%; } .home__main__wrapper { float: left; width: 50%; height: 100%; position: relative; } .home__main__wrapper__c2m { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 100%; -webkit-mask-image: url('../images/logo-bg.svg'); mask-image: url('../images/logo-bg.svg'); -webkit-mask-position: right; mask-position: right; -webkit-mask-size: auto 1026px; mask-size: auto 1026px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #fff; overflow: hidden; } .home__main__wrapper__c2m__wave { width: 130%; height: 600px; position: absolute; left: 0; bottom: 0; } .home__main__wrapper__block { position: relative; /*padding-top: 127px;*/ height: 100%; width: 65%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .home__main__wrapper__block__title { color: #25353f; font-family: "GothamProLight"; font-size: 27px; line-height: 42px; text-transform: uppercase; } .home__main__wrapper__block__title._places-title { font-size: 36px; } .home__main__wrapper__block__text { font-family: "MuseoSansLight"; padding-top: 21px; font-size: 18px; margin-bottom: 43px; } .home__main__wrapper__block__text._places-text { padding-top: 32px; font-size: 18px; line-height: 31px; padding-left: 3px; margin-bottom: 43px; font-weight: bold; } .home__caption { height: 140px; width: 100%; text-align: center; font-size: 27px; text-transform: uppercase; line-height: 140px; font-family: "GothamProLight"; color: #25353f; } .home__bottom { *zoom: 1; } .home__bottom:before, .home__bottom:after { display: table; content: ""; line-height: 0; } .home__bottom:after { clear: both; } .home__bottom__link { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 24px; display: block; float: left; width: 50%; height: 300px; line-height: 300px; padding-left: 95px; text-decoration: none; text-transform: uppercase; color: #fff; font-family: "GothamProMedium"; position: relative; z-index: 2; overflow: hidden; } .home__bottom__link-title { position: relative; z-index: 10; transition: color 0.5s ease 0s; } .home__bottom__link-img { width: 101%; height: 101%; position: absolute; right: 0; bottom: 0; top: 0; left: 0; transition: transform 0.3s ease 0s; transform-origin: 100% 50%; background-size: cover; background-position: 50% 50%; } .home__bottom__link:hover { color: #b0ffed; } .home__bottom__link:hover .home__bottom__link-img { transition: transform 0.5s ease 0s; transform: scale(1.1); } @media only screen and (max-width: 1919px) and (min-width: 1600px) { .home__main { width: 100%; /*height: 1000px;*/ } .home__main__wrapper { width: 60%; } } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .home__main { /*height: 738px;*/ width: 100%; } .home__main__wrapper { width: 60%; } .home__main__wrapper__c2m { -webkit-mask-size: auto 758px; mask-size: auto 758px; } .home__main__wrapper__c2m__wave { height: 380px; } .home__main__wrapper__block__title._places-title { font-size: 31px; } .home__main__wrapper__block__text._places-text { margin-bottom: 29px; padding-right: 110px; } .home__main__wrapper__c2m { -webkit-mask-size: auto 758px; mask-size: auto 758px; -webkit-mask-position: right; mask-position: right; } .home__bottom__link { padding-left: 30px; background-color: #000; } .home__bottom__link-img { opacity: 0.85; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .home__main { /*height: 738px;*/ width: 100%; } .home__main__wrapper { width: 81%; } .home__main__wrapper__c2m { -webkit-mask-size: auto 758px; mask-size: auto 758px; } .home__main__wrapper__c2m__wave { height: 380px; } .home__bottom__link { padding-left: 30px; background-color: #000; } .home__bottom__link-img { opacity: 0.85; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .home__main { /*height: 738px;*/ } .home__main__wrapper { width: 100%; } .home__main__wrapper__c2m { -webkit-mask-size: auto 758px; mask-size: auto 758px; } .home__main__wrapper__c2m__wave { height: 380px; } .home__main__wrapper__block { width: 65%; } .home__main__wrapper__block__text { padding-top: 16px; } .home__main__wrapper__block__text._places-text { padding-right: 30px; } .home__main__wrapper__block__title._places-title { text-align: center; } .home__bottom__link { padding-left: 30px; background-color: #000; } .home__bottom__link-img { opacity: 0.85; } } @media only screen and (max-width: 767px) { .home__main { /*height: 608px;*/ } .home__main__wrapper { width: 100%; } .home__main__wrapper__c2m { top: 412px; height: 196px; -webkit-mask-image: url('../images/logo-mobile-bg.svg'); mask-image: url('../images/logo-mobile-bg.svg'); -webkit-mask-position: 50% 0; mask-position: 50% 0; -webkit-mask-size: 100% auto; mask-size: 100% auto; } .home__main__wrapper__c2m__wave { height: 210px; } .home__main__wrapper__block { width: 100%; height: 418px; margin: 0; padding: 0 20px 0 0; background: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .home__main__wrapper__block__title { font-size: 23px; line-height: 31px; text-transform: none; padding-top: 47px; } .home__main__wrapper__block__text { padding-top: 28px; font-size: 16px; margin-bottom: 32px; } .home__main__wrapper__block__text._places-text { padding-right: 0; } .home__main__img { top: 418px; left: 0; width: 100%; height: 190px; background-size: cover; background-position: 50% 50%; } .home__caption { height: 161px; display: table-cell; line-height: normal; vertical-align: middle; text-transform: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 60px; font-size: 24px; } .home__bottom__link { width: 100%; height: 140px; line-height: 140px; padding-left: 20px; font-size: 21px; background-color: #000; } .home__bottom__link-img { opacity: 0.85; } } .places__wrapper { *zoom: 1; width: 1730px; margin: 0 auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .places__wrapper:before, .places__wrapper:after { display: table; content: ""; line-height: 0; } .places__wrapper:after { clear: both; } .places__top { *zoom: 1; height: 630px; } .places__top:before, .places__top:after { display: table; content: ""; line-height: 0; } .places__top:after { clear: both; } .places__top__block { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 130px; height: 100%; width: 42%; background: #fff; float: left; padding-right: 10px; } .places__top__img { width: 58%; height: 100%; float: left; background: url('../images/background/places.png') 50% 0 no-repeat; background-size: cover; } .places__features { height: 450px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 87px; background: url('../images/background/background-features.png') 50% 0 no-repeat; background-size: 100% 100%; } .places__features__wrapper { *zoom: 1; width: 1730px; margin: 0 auto; padding-right: 95px; } .places__features__wrapper:before, .places__features__wrapper:after { display: table; content: ""; line-height: 0; } .places__features__wrapper:after { clear: both; } .places__features__item { float: left; width: 300px; margin-right: 150px; } .places__features__item._management-item { width: 380px; } .places__features__item._management-item .places__features__item__title { padding-left: 0; } .places__features__item._last-item { margin-right: 0; } .places__features__item svg { margin: 17px auto; } .places__features__item__icon { width: 100%; height: 87px; } .places__features__item__icon._icon1 { background: url('../images/icons/icon-features-1.svg') 50% 0 no-repeat; background-size: 66px 58px; } .places__features__item__icon._icon2 { background: url('../images/icons/icon-features-2.svg') 50% 0 no-repeat; background-size: 54px 54px; } .places__features__item__icon._icon3 { background: url('../images/icons/icon-features-3.svg') 50% 0 no-repeat; background-size: 66px 64px; } .places__features__item__icon._icon4 { background: url('../images/icons/icon-features-4.svg') 50% 0 no-repeat; background-size: 70px 48px; } .places__features__item__icon._icon-advantages-1 { background: url('../images/icons/icon-advantages-1.svg') 50% 0 no-repeat; height: 101px; background-size: 96px 101px; } .places__features__item__icon._icon-advantages-2 { background: url('../images/icons/icon-advantages-2.svg') 50% 0 no-repeat; background-size: 104px 103px; height: 103px; } .places__features__item__icon._icon-advantages-3 { background: url('../images/icons/icon-advantages-3.svg') 50% 0 no-repeat; height: 102px; background-size: 125px 102px; } .places__features__item__icon._icon-advantages-4 { background: url('../images/icons/icon-advantages-4.svg') 50% 0 no-repeat; height: 101px; background-size: 116px 101px; } .places__features__item__title { font-size: 27px; font-family: "GothamProLight"; color: #fff; text-align: center; } .places__features__item__border { width: 100%; height: 3px; background: url('../images/border.svg') 0 0 no-repeat; margin-top: 14px; margin-bottom: 16px; background-repeat: repeat; } .places__features__item__text { font-family: "MuseoSansLight"; color: #fff; font-size: 16px; line-height: 24px; padding-left: 2px; } .places__how { *zoom: 1; background: #fff; height: 970px; } .places__how:before, .places__how:after { display: table; content: ""; line-height: 0; } .places__how:after { clear: both; } .places__how__left { float: left; width: 43%; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 73px; } .places__how__right { position: relative; float: left; width: 57%; height: 100%; overflow: hidden; } .places__how__right__wave { background: url('../images/background/background-how.png') 100% 50% no-repeat; background-size: 100% 100%; width: 100%; height: 970px; } .places__how__right__windows { position: absolute; top: 0; left: 0; width: 1013px; height: 100%; } .places__how__right__windows-layer { width: 1073px; height: 595px; position: absolute; bottom: 0; left: 30px; transition: transform 1s ease 0s; } .places__how__right__windows-layer._layer1 { background: url('../images/windows-how/img_screena_1.png') 0 0 no-repeat; z-index: 30; transform: translate3d(30px, 20px, 0); } .places__how__right__windows-layer._layer2 { background: url('../images/windows-how/img_screena_2.png') 0 0 no-repeat; transform: translate3d(30px, 34px, 0); z-index: 20; } .places__how__right__windows-layer._layer3 { background: url('../images/windows-how/img_screena_3.png') 0 0 no-repeat; z-index: 10; transform: translate3d(0, 41px, 0); } .places__how__right__windows._active .places__how__right__windows-layer._layer1 { transform: translate3d(30px, -259px, 0); } .places__how__right__windows._active .places__how__right__windows-layer._layer2 { transform: translate3d(30px, -103px, 0); } .places__how__right__windows._active .places__how__right__windows-layer._layer3 { transform: translate3d(0, 41px, 0); } .places__how__wrapper { padding-top: 73px; margin-bottom: 66px; } .places__how__step { *zoom: 1; } .places__how__step:before, .places__how__step:after { display: table; content: ""; line-height: 0; } .places__how__step:after { clear: both; } .places__how__step__icon { position: relative; float: left; width: 67px; height: 67px; margin-bottom: 52px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 67px 67px; } .places__how__step__icon:after { content: ""; display: block; position: absolute; top: 0; left: 0; background: url('../images/icons/icon-how-border.svg') 0 0 no-repeat; width: 3px; height: 30px; top: 77px; left: 32px; } .places__how__step__icon._icon-how-1 { background-image: url('../images/icons/icon-how-1.svg'); } .places__how__step__icon._icon-how-2 { background-image: url('../images/icons/icon-how-2.svg'); } .places__how__step__icon._icon-how-3 { background-image: url('../images/icons/icon-how-3.svg'); } .places__how__step__icon._icon-how-4 { background-image: url('../images/icons/icon-how-4.svg'); } .places__how__step__icon._icon-how-5 { background-image: url('../images/icons/icon-how-5.svg'); margin-bottom: 0; } .places__how__step__icon._icon-how-5:after { display: none; } .places__how__step__text { font-family: "MuseoSansLight"; color: #25353f; width: 85%; font-size: 22px; padding-left: 27px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-weight: bold; vertical-align: middle; display: table-cell; height: 67px; } .places__how__border { background: url('../images/icons/icon-how-border.svg') 0 0 no-repeat; width: 3px; height: 30px; margin: 11px 0; margin-left: 31px; } .places__advantages { background: #f0f2f5; padding-bottom: 60px; padding-top: 73px; overflow: hidden; } .places__advantages__wrapper { width: 1920px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 98px; } .places__advantages__title { font-size: 35px; color: #25353f; margin-bottom: 50px; font-family: "GothamProLight"; text-transform: uppercase; } .places__advantages__title._partner-title { text-align: center; margin-bottom: 73px; } .places__advantages__content { *zoom: 1; } .places__advantages__content:before, .places__advantages__content:after { display: table; content: ""; line-height: 0; } .places__advantages__content:after { clear: both; } .places__advantages__content__item { background: #fff; float: left; width: 560px; height: 400px; border-radius: 3px; margin-right: 20px; padding-top: 60px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .places__advantages__content__item._first .places__features__item { width: 444px; } .places__advantages__content__item._second .places__features__item { width: 480px; } .places__advantages__content__item._last { margin-right: 0; } .places__advantages__content__item._last .places__features__item { width: 480px; } .places__advantages__content__item .places__features__item { margin: 0 auto; float: none; } .places__advantages__content__item .places__features__item__title { padding-left: 0; text-align: center; color: #25353f; padding-top: 39px; font-size: 24px; } .places__advantages__content__item .places__features__item__border { background: url('../images/icons/icon-advantages-border.svg') 0 0 no-repeat; margin-top: 24px; margin-bottom: 26px; } .places__advantages__content__item .places__features__item__text { color: #25353f; font-weight: bold; } .places__partner { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 75px; padding-bottom: 100px; } .places__partner__content { *zoom: 1; width: 100%; margin: 0 auto; margin-bottom: 40px; text-align: center; } .places__partner__content:before, .places__partner__content:after { display: table; content: ""; line-height: 0; } .places__partner__content:after { clear: both; } .places__partner__content__item { display: inline-block; width: 33%; margin-bottom: 82px; } .places__partner__content__item__icon { position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: 53px 53px; width: 100px; height: 100px; margin: 0 auto; border-radius: 50px; border: 2px solid #41ad3b; } .places__partner__content__item__icon:after { content: ""; display: block; height: 28px; width: 28px; border-radius: 14px; background: #39aa33; position: absolute; top: 37px; left: -16px; color: #fff; font-family: "MuseoSansLight"; text-align: center; line-height: 28px; font-size: 16px; } .places__partner__content__item__icon._icon1 { background-image: url('../images/icons/icon-partner-1.svg'); background-size: 62px 34px; } .places__partner__content__item__icon._icon1:after { content: "1"; } .places__partner__content__item__icon._icon2 { background-image: url('../images/icons/icon-partner-2.svg'); } .places__partner__content__item__icon._icon2:after { content: "2"; } .places__partner__content__item__icon._icon3 { background-image: url('../images/icons/icon-partner-3.svg'); } .places__partner__content__item__icon._icon3:after { content: "3"; } .places__partner__content__item__icon._icon4 { background-image: url('../images/icons/icon-partner-4.svg'); } .places__partner__content__item__icon._icon4:after { content: "4"; } .places__partner__content__item__icon._icon5 { background-image: url('../images/icons/icon-partner-5.svg'); } .places__partner__content__item__icon._icon5:after { content: "5"; } .places__partner__content__item__icon._icon6 { background-image: url('../images/icons/icon-partner-6.svg'); background-size: 57px 50px; } .places__partner__content__item__icon._icon6:after { content: "6"; } .places__partner__content__item__text { font-size: 18px; padding-top: 25px; line-height: 25px; font-weight: bold; font-family: "MuseoSansLight"; color: #25353f; text-align: center; max-width: 445px; margin: 0 auto; } .link { text-decoration: none; color: #39aa33; } @media only screen and (max-width: 1919px) and (min-width: 1600px) { .places__wrapper { width: 1410px; } .places__features__item { margin-right: 40px; } .places__features__item__title { line-height: 32px; } .places__features__item__border { margin-top: 20px; } .places__advantages__content__item { width: 450px; height: 430px; } .places__advantages__content__item._first .places__features__item { width: 380px; } .places__advantages__content__item._second .places__features__item { width: 380px; } .places__advantages__content__item._last { margin-right: 0; } .places__advantages__content__item._last .places__features__item { width: 380px; } } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .places__wrapper { width: 1306px; } .places__top { height: 530px; } .places__top__block { padding-top: 122px; width: 43%; } .places__top__img { width: 57%; background-size: cover; } .places__features { height: 380px; padding-top: 56px; } .places__features__item { width: 270px; margin-right: 40px; } .places__features__item._management-item { width: 335px; } .places__features__item__icon._icon-advantages-1 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-2 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-3 { background-size: contain; height: 90px; } .places__features__item__title { font-size: 24px; } .places__features__item__border { margin-top: 12px; } .places__features__item__text { font-size: 15px; } .places__how { height: 870px; } .places__how__left { padding-top: 56px; } .places__how__wrapper { padding-top: 40px; margin-bottom: 51px; } .places__how__step__text { font-size: 17px; } .places__advantages { padding-top: 45px; padding-bottom: 50px; } .places__advantages__title { font-size: 32px; margin-bottom: 40px; } .places__advantages__title._partner-title { margin-bottom: 55px; } .places__advantages__content__item { width: 420px; height: 400px; padding-top: 46px; } .places__advantages__content__item._first .places__features__item { width: 380px; } .places__advantages__content__item._second .places__features__item { width: 380px; } .places__advantages__content__item._last { margin-right: 0; } .places__advantages__content__item._last .places__features__item { width: 380px; } .places__advantages__content__item._last .places__features__item__title { padding-left: 60px; padding-right: 60px; } .places__advantages__content__item .places__features__item__title { padding: 0 36px; padding-top: 36px; font-size: 21px; line-height: 28px; } .places__advantages__content__item .places__features__item__border { margin-top: 23px; } .places__advantages__content__item .places__features__item__text { padding: 0 15px; } .places__partner { padding-top: 54px; padding-bottom: 70px; } .places__partner__content { margin-bottom: 0; } .places__partner__content__item { margin-bottom: 67px; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .places__wrapper { width: 940px; } .places__top { height: 530px; } .places__top__block { padding-top: 124px; width: 58%; } .places__top__img { width: 42%; background-size: cover; } .places__features { height: auto; padding-top: 15px; padding-bottom: 25px; background: url('../images/background/Wave.jpg') 50% 50% no-repeat; } .places__features .places__wrapper { padding: 0; } .places__features__item { width: 42%; margin: 40px 4%; } .places__features__item._management-item { width: 42%; margin: 40px 4%; } .places__features__item__title { text-align: center; padding: 0; } .places__features__item__icon._icon-advantages-1 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-2 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-3 { background-size: contain; height: 90px; } .places__how { height: 870px; } .places__how__left { padding-top: 57px; } .places__how__wrapper { padding-top: 43px; margin-bottom: 48px; } .places__how__step__icon { width: 59px; height: 59px; background-size: cover; margin-bottom: 60px; } .places__how__step__icon:after { background: url('../images/icons/icon-how-border-1000px.png') 0 0 no-repeat; height: 44px; top: 67px; left: 28px; } .places__how__step__text { padding-left: 20px; font-size: 19px; } .places__advantages { padding-top: 45px; padding-bottom: 50px; } .places__advantages__title { font-size: 33px; margin-bottom: 40px; } .places__advantages__title._partner-title { margin-bottom: 55px; } .places__advantages__content__item { width: 300px; padding-top: 45px; height: 430px; } .places__advantages__content__item .places__features__item__title { padding-top: 37px; font-size: 22px; } .places__advantages__content__item .places__features__item__border { margin-top: 28px; } .places__advantages__content__item .places__features__item__text { padding: 0 24px; } .places__advantages__content__item._first .places__features__item { width: 260px; } .places__advantages__content__item._second .places__features__item { width: 260px; } .places__advantages__content__item._last { margin-right: 0; } .places__advantages__content__item._last .places__features__item { width: 260px; } .places__partner { padding-top: 52px; padding-bottom: 71px; } .places__partner__content { margin-bottom: 0; } .places__partner__content__item { margin-bottom: 0; height: 250px; } .places__partner__content__item__text { padding-top: 22px; font-size: 17px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .places__wrapper { width: 708px; } .places__top__block { width: 100%; height: 325px; float: none; padding-top: 35px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .places__top__img { float: none; height: 305px; width: 100%; background-size: cover; } .places__features { height: auto; padding-top: 15px; padding-bottom: 25px; background: url('../images/background/Wave.jpg') 50% 50% no-repeat; } .places__features .places__wrapper { padding: 0; } .places__features__item { width: 42%; margin: 40px 4%; } .places__features__item._management-item { width: 42%; margin: 40px 4%; } .places__features__item__title { text-align: center; padding: 0; font-size: 21px; } .places__features__item__icon._icon-advantages-1 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-2 { background-size: contain; height: 90px; } .places__features__item__icon._icon-advantages-3 { background-size: contain; height: 90px; } .places__how__left { width: 60%; } .places__how__right { width: 40%; } .places__how__step__text { font-size: 18px; } .places__advantages { padding-top: 45px; padding-bottom: 50px; } .places__advantages__title { font-size: 33px; margin-bottom: 40px; } .places__advantages__title._partner-title { margin-bottom: 55px; } .places__advantages__content__item { width: 344px; padding-top: 45px; height: 430px; } .places__advantages__content__item .places__features__item__title { padding-top: 37px; font-size: 22px; } .places__advantages__content__item .places__features__item__border { margin-top: 28px; } .places__advantages__content__item .places__features__item__text { padding: 0 24px; } .places__advantages__content__item._first .places__features__item { width: 92%; } .places__advantages__content__item._second { margin-right: 0; } .places__advantages__content__item._second .places__features__item { width: 92%; } .places__advantages__content__item._last { margin-right: 0; margin-top: 20px; width: 100%; height: 340px; } .places__advantages__content__item._last .places__features__item { width: 92%; } .places__partner__content { width: 708px; } .places__partner__content__item { width: 50%; } } @media only screen and (max-width: 767px) { .places__wrapper { width: 280px; margin: 0 auto; } .places__top { height: auto; } .places__top__block { padding: 0 20px 30px 0; width: 100%; height: auto; } .places__top__img { width: 100%; height: 180px; background-size: cover; } .places__features { height: auto; background: url('../images/background/Wave.jpg') 50% 0 no-repeat; background-size: cover; } .places__features__item { width: 100%; margin: 0; margin-bottom: 50px; } .places__features__item._management-item { width: 100%; } .places__features__item__title { font-size: 20px; padding-left: 0px; text-align: center; } .places__how { height: auto; } .places__how__wrapper { padding-top: 40px; margin-bottom: 40px; } .places__how__left { padding-top: 0px; padding-right: 20px; width: 100%; } .places__how__right { display: none; } .places__how__step__text { font-size: 16px; padding-left: 10px; } .places__advantages { padding-top: 40px; padding-bottom: 40px; } .places__advantages__title { font-size: 30px; } .places__advantages__title._partner-title { margin-bottom: 30px; } .places__advantages__content__item { width: 100%; height: auto; margin: 0; margin-bottom: 20px; padding: 25px 15px 20px 15px; } .places__advantages__content__item .places__features__item { width: 100%; } .places__advantages__content__item._first .places__features__item { width: 100%; } .places__advantages__content__item._second { margin-right: 0; } .places__advantages__content__item._second .places__features__item { width: 100%; } .places__advantages__content__item._last { margin-right: 0; width: 100%; } .places__advantages__content__item._last .places__features__item { width: 100%; } .places__partner { padding: 40px 20px; } .places__partner__content__item { width: 100%; } } .agency .places__top__img._agency-img { background: url('../images/background/agency.png') 50% 0 no-repeat; background-size: cover; } .agency .places__features__item__icon._icon1 { background: url('../images/icons/icon-features-agency-1.svg') 50% 0 no-repeat; background-size: 55px 55px; } .agency .places__features__item__icon._icon2 { background: url('../images/icons/icon-features-agency-2.svg') 50% 0 no-repeat; background-size: 61px 57px; } .agency .places__features__item__icon._icon3 { background: url('../images/icons/icon-features-agency-3.svg') 50% 0 no-repeat; background-size: 62px 64px; } .agency .places__features__item__icon._icon4 { background: url('../images/icons/icon-features-agency-4.svg') 50% 0 no-repeat; background-size: 58px 58px; } .agency .places__how__wrapper { padding-top: 30px; margin-bottom: 19px; } .agency .places__how__step__icon { margin-bottom: 21px; } .agency .places__how__step__icon:after { background: url('../images/icons/icon-how-agency-border.svg') 0 0 no-repeat; top: 67px; } .agency .places__how__step__icon._icon-how-1 { background-image: url('../images/icons/icon-how-agency-1.svg'); } .agency .places__how__step__icon._icon-how-2 { background-image: url('../images/icons/icon-how-agency-2.svg'); } .agency .places__how__step__icon._icon-how-3 { background-image: url('../images/icons/icon-how-agency-3.svg'); } .agency .places__how__step__icon._icon-how-4 { background-image: url('../images/icons/icon-how-agency-4.svg'); } .agency .places__how__step__icon._icon-how-5 { background-image: url('../images/icons/icon-how-agency-5.svg'); } .agency .places__how__step__icon._icon-how-5:after { display: block; } .agency .places__how__step__icon._icon-how-6 { background-image: url('../images/icons/icon-how-agency-6.svg'); } .agency .places__how__step__icon._icon-how-7 { background-image: url('../images/icons/icon-how-agency-7.svg'); } .agency .places__how__step__icon._icon-how-7:after { display: none; } .agency .places__advantages__content__item { height: 430px; } .agency .places__partner__content { margin-bottom: 0; } .agency .places__partner__content__item._left { width: 40%; margin-bottom: 63px; } .agency .places__partner__content__item._left .places__partner__content__item__icon { margin-left: 77%; } .agency .places__partner__content__item._left .places__partner__content__item__text { float: right; } .agency .places__partner__content__item._right { width: 40%; margin-bottom: 63px; } .agency .places__partner__content__item._right .places__partner__content__item__icon { margin-right: 72%; } .agency .places__partner__content__item._right .places__partner__content__item__text { float: left; } .agency .places__partner__content__item._empty { width: 20%; } .agency .places__partner__content__item__icon._icon2 { background-image: url('../images/icons/icon-partner-agency-2.svg'); background-size: 37px 53px; } .agency .places__partner__content__item__icon._icon5 { background-image: url('../images/icons/icon-partner-agency-5.svg'); } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .agency .places__features { padding-bottom: 49px; } .agency .places__features__item { height: 220px; } .agency .places__how__step__icon { margin-bottom: 30px; } .agency .places__how__step__icon:after { top: 64px; } .agency .places__advantages__content__item { height: 510px; } .agency .places__partner__content__item { height: 255px; } .agency .places__partner__content__item._left { height: 200px; margin-bottom: 0; } .agency .places__partner__content__item._left .places__partner__content__item__icon { margin-left: 70%; } .agency .places__partner__content__item._left .places__partner__content__item__text { margin-left: 63%; } .agency .places__partner__content__item._right { height: 200px; margin-bottom: 0; } .agency .places__partner__content__item._right .places__partner__content__item__icon { margin-right: 64%; } .agency .places__partner__content__item._right .places__partner__content__item__text { margin-right: 45%; } .agency .places__partner__content__item._empty { height: 240px; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .agency .places__features__item { margin: 20px 4%; height: 300px; } .agency .places__advantages__content__item._last { height: 385px; } .agency .places__partner__content__item._left { width: 50%; margin-bottom: 82px; } .agency .places__partner__content__item._left .places__partner__content__item__icon { margin: 0 auto; } .agency .places__partner__content__item._left .places__partner__content__item__text { float: none; } .agency .places__partner__content__item._right { width: 100%; margin-bottom: 82px; } .agency .places__partner__content__item._right .places__partner__content__item__icon { margin: 0 auto; } .agency .places__partner__content__item._right .places__partner__content__item__text { float: none; } .agency .places__partner__content__item._empty { display: none; } } @media only screen and (max-width: 767px) { .agency .places__top__img._agency-img { width: 100%; height: 180px; background-size: cover; } .agency .places__advantages__content__item { height: auto; } .agency .places__partner__content__item { margin-bottom: 40px; } .agency .places__partner__content__item._left { width: 100%; } .agency .places__partner__content__item._left .places__partner__content__item__icon { margin: 0 auto; } .agency .places__partner__content__item._left .places__partner__content__item__text { float: none; } .agency .places__partner__content__item._right { width: 100%; } .agency .places__partner__content__item._right .places__partner__content__item__icon { margin: 0 auto; } .agency .places__partner__content__item._right .places__partner__content__item__text { float: none; } .agency .places__partner__content__item._empty { display: none; } } .contacts__content { *zoom: 1; width: 100%; height: 1085px; } .contacts__content:before, .contacts__content:after { display: table; content: ""; line-height: 0; } .contacts__content:after { clear: both; } .contacts__content__left { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 89px; float: left; width: 41%; height: 100%; background: #fff; box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.15); position: relative; z-index: 9; } .contacts__content__left__title { font-size: 35px; font-family: "GothamProLight"; color: #25353f; text-transform: uppercase; } .contacts__content__left__title._consultation { font-size: 26px; } .contacts__content__left__info { padding-bottom: 38px; border-bottom: 1px solid #ededed; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 590px; margin: 0 auto; } .contacts__content__left__info__block { width: 490px; padding-top: 27px; } .contacts__content__left__info__block__row { *zoom: 1; margin-bottom: 15px; font-family: "MuseoSansLight"; font-weight: bold; font-size: 16px; } .contacts__content__left__info__block__row:before, .contacts__content__left__info__block__row:after { display: table; content: ""; line-height: 0; } .contacts__content__left__info__block__row:after { clear: both; } .contacts__content__left__info__caption { display: block; float: left; width: 140px; background: #fff; z-index: 2; position: relative; } .contacts__content__left__info__caption:before { content: ""; display: block; background: url('../images/icons/icon-border-contacts.png') 50% 50% no-repeat; width: 101px; height: 1px; position: absolute; bottom: 6px; right: 1px; } .contacts__content__left__info__address { float: left; width: 350px; } .contacts__content__left__info__phone { float: left; color: #25353f; } .contacts__content__left__info__phone a { display: inline-block; color: #25353f; } .contacts__content__left__info__email { float: left; color: #35a833; } .contacts__content__left__consultation { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 590px; margin: 0 auto; padding-top: 50px; } .contacts__content__left__form { padding-top: 56px; } .contacts__content__map { float: left; width: 59%; height: 100%; position: relative; } .contacts__content__map #map { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } @media only screen and (max-width: 1919px) and (min-width: 1600px) { .contacts__content__left { width: 49%; } .contacts__content__map { width: 51%; } } @media only screen and (max-width: 1599px) and (min-width: 1366px) { .contacts__content__left { width: 42%; } .contacts__content__left__info { width: 530px; } .contacts__content__left__title { font-size: 34px; } .contacts__content__left__consultation { padding-top: 50px; width: 530px; } .contacts__content__map { width: 58%; } } @media only screen and (max-width: 1365px) and (min-width: 1000px) { .contacts__content__left { width: 57%; } .contacts__content__left__info { width: 510px; } .contacts__content__left__title { font-size: 32px; } .contacts__content__left__consultation { width: 510px; } .contacts__content__map { width: 43%; } } @media only screen and (max-width: 999px) and (min-width: 768px) { .contacts__content__left { padding-top: 40px; width: 100%; } .contacts__content__map { display: none; } } @media only screen and (max-width: 767px) { .contacts__content { height: auto; } .contacts__content__left { padding-top: 40px; width: 100%; } .contacts__content__left__title { text-transform: none; } .contacts__content__left__info { width: 100%; padding: 0 20px 20px 20px; } .contacts__content__left__info__block { width: 100%; } .contacts__content__left__info__caption { width: 40%; max-width: 140px; } .contacts__content__left__info__address { width: 60%; } .contacts__content__left__info__phone { width: 60%; } .contacts__content__left__info__email { width: 60%; } .contacts__content__left__consultation { width: 100%; padding: 20px 20px 0 20px; } .contacts__content__left__form { *zoom: 1; padding-top: 30px; } .contacts__content__left__form:before, .contacts__content__left__form:after { display: table; content: ""; line-height: 0; } .contacts__content__left__form:after { clear: both; } .contacts__content__map { display: none; } } .pull-right { float: right; } .pull-left { float: left; } .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } .affix { position: fixed; } .t-a-c { text-align: center; } ul.main-menu { display: flex; height: 100%; margin: 0; padding-left: 50px; } ul.main-menu>li { flex: 1 1 auto; text-align: center; margin: auto; }