/* bundle7.css = root + template + typo + ui + modal (в порядке подключения). Собран автоматически, править исходники. */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../../fonts/rubik-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../../fonts/rubik-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../../fonts/rubik-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../../fonts/rubik-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--font-family: 'Rubik', sans-serif;
--font-h1: 28px;
--font-h2: 24px;
--font-h3: 20px;
--font-offer: 18px;
--font-text-2: 20px;
--font-size-basic: 16px;
--font-size-secondary: 14px;
--font-text-sub: 14px;
--font-size-small: 12px;
--font-size-xs: 11px;
--font-size-micro: 10px;
--line-h1: 34px;
--line-height-basic: 26px;
--tracking-h1: -1.0px;
--tracking-h2: -0.8px;
--tracking-h3: -0.2px;
--tracking-subtitle-h1: .66px;
--tracking-wide-small: .66px;
--tracking-mini: .44px;
--main-color: #ff007f;
--main-color-hover: #d00e5d;
--main-color-border: rgba(255, 0, 98, 0.22);
--main-color-ghost: rgba(255, 0, 98, 0.05);
--main-color-bg: #fee5f2;
--main-color-light: #FFEDF5;
--alt-color: #0ea8e8;
--alt-color-hover: #0382b7;
--alt-color-border: rgba(0, 162, 255, 0.22);
--alt-color-ghost: rgba(0, 162, 255, 0.05);
--alt-color-bg: #cfeaf5;
--alt-color-light: #E3F8FF;
--font-color-secondary: rgba(0, 0, 0, 0.40);
--shadow-template-block: 0 4px 24px 0 rgba(0, 0, 0, 0.07);
}
.top-header-wrap{
background-color: var(--font-color-basic);
}
.mobile-header-spacer {
height: 0;
}
.hidden {
display: none!important;
}
.main-header-wrap{
width: 100%;
background-color: var(--white-color);
-webkit-box-shadow: var(--shadow-template-block);
-moz-box-shadow: var(--shadow-template-block);
box-shadow: var(--shadow-template-block);
}
.main-header{
padding: var(--margin-x) var(--margin-x);
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-transition: var(--transition-fast);
transition: var(--transition-fast);
}
.header-logo{
width: 120px;
height: 23px;
margin: -6px var(--margin-2x) 0 0;
}
.header-logo img{
width: 100%;
}
.header-menu{
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.header-menu-category{
position: relative;
font-size: var(--font-text-sub);
line-height: 1.35;
font-weight: 700;
color: var(--font-color-basic);
margin: 0 var(--margin-2x);
-webkit-transition: var(--transition-fast);
transition: var(--transition-fast);
}
.header-menu-category:hover{
color: var(--main-color);
}
.header-menu-category::after {
position: absolute;
background-color: var(--main-color);
content: " ";
left: 0;
bottom: -8px;
height: 2px;
width: 0;
}
.header-menu-category:hover::after {
background-color: var(--main-color-border);
width: 100%;
-webkit-transition: var(--transition-fast);
transition: var(--transition-fast);
}
.header-menu-mobile{
display: none;
position: absolute;
top: 49px;
left: var(--margin-s);
width: 100%;
margin: 0 calc(var(--margin-x-row) + var(--margin-s));
height: 100vh;
max-height: calc(100vh - 47px);
padding-top: var(--margin-x);
background-color: var(--font-color-basic);
z-index: 99;
overflow: auto;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.header-menu-mobile .header-menu-category{
font-weight: 400;
line-height: 1.4;
color: var(--white-color);
padding: var(--margin-s) var(--margin-x);
margin: 0;
-webkit-transition: var(--transition-turbo);
transition: var(--transition-turbo);
}
.header-menu-mobile .header-menu-category::after{
display: none;
}
.header-menu-mobile .header-menu-category:hover::after {
display: none;
}
.header-menu-mobile .header-menu-category:hover{
background-color: var(--main-color);
}
.header-menu-mobile .divider{
border-color: var(--disabled-control-font);
}
@media (max-width: 990px) {
.top-header-wrap, .header-menu{
display: none;
}
.main-header{
position: fixed;
z-index: 3;
width: 100%;
padding: 0 0 0 calc(var(--margin-x) - var(--margin-xs));
background-color: var(--white-color);
-webkit-box-shadow: var(--shadow-template-block);
-moz-box-shadow: var(--shadow-template-block);
box-shadow: var(--shadow-template-block);
}
.mobile-header-spacer {
height: 47px;
}
.header-logo {
width: 96px;
height: 18px;
margin-right: 0;
}
.header-menu-burger {
display: block;
position: relative;
width: calc(var(--margin-3x) - var(--margin-xs));
padding: calc(var(--margin-x) - var(--margin-xs));
}
.header-menu-mobile.menu-mobile-active {
display: -moz-box;
display: -webkit-flex;
display: flex;
}
.header-menu-burger.menu-mobile-active .header-menu-burger-bar{
-webkit-transition: var(--transition-fast);
transition: var(--transition-fast);
}
.header-menu-burger.menu-mobile-active .header-menu-burger-bar:nth-child(1){
-webkit-transform: translate(5px, 0px) rotate(45deg);
transform: translate(5px, 0px) rotate(45deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.header-menu-burger.menu-mobile-active .header-menu-burger-bar:nth-child(2){
-webkit-transform: scale(0);
transform: scale(0);
}
.header-menu-burger.menu-mobile-active .header-menu-burger-bar:nth-child(3){
-webkit-transform: translate(-2px, -17px) rotate(-45deg);
transform: translate(-2px, -17px) rotate(-45deg);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
}
.main-header-wrap.fixed-header .main-header{
padding: var(--margin-s) var(--margin-x);
}
.main-header-wrap.fixed-header{
background-color: var(--white-color);
position: fixed;
width: 100%;
z-index: 3;
}
.mobile-header-spacer.fixed-header{
height: 80px;
}
.main-header-wrap.fixed-header .header-logo{
width: 100px;
height: 21px;
}
.main-header-wrap.fixed-header .header-menu-category{
font-size: var(--font-size-small);
line-height: 1.2;
}
.heading-wrap{
padding: var(--margin-2x) var(--margin-x) 0;
background-color: var(--font-color-basic);
}
.heading{
max-width: var(--page-width);
margin: 0 auto;
}
.heading-wrap .heading{
padding-top: 0;
padding-bottom: 0;
}
.heading-wrap h1{
color: var(--white-color);
font-size: var(--font-h1);
line-height: 1.4;
}
.heading-wrap section{
max-width: var(--page-width);
margin: 0 auto;
padding-bottom: var(--margin-x);
}
@media (max-width: 990px) {
.heading{
padding: 0;
}
.heading-wrap{
padding: calc(var(--margin-2x) - var(--margin-s)) 0 var(--margin-x);
}
}
@media (max-width: 720px) {
.heading-wrap section{
padding-bottom: var(--margin-x) !important;
}
}
.breadcrumbs {
display: block;
margin-bottom: var(--margin-x);
}
.breadcrumbs-link {
color: var(--font-color-secondary);
}
@media (max-width:990px){
.breadcrumbs-link {
font-size: var(--font-size-micro);
}
}
.breadcrumbs-link:after {
display: inline-block;
width: 2px;
height: 2px;
margin: -2px -5px 0 7px;
content: '';
overflow: hidden;
vertical-align: middle;
background-color: var(--font-color-secondary);
border-radius: 100%;
}
.breadcrumbs-link.active-breadcrumb {
color: var(--font-color-basic);
}
.breadcrumbs-link:last-child:after{
display: none;
}
.main-wrap{
max-width: var(--page-width);
margin: 0 auto;
padding: var(--margin-3x) 0;
}
.main-content img{
max-width: 100%;
}
section{
margin-bottom: 0;
}
section:last-child{
margin-bottom: 0;
padding-bottom: var(--margin-3x);
}
.divider-quote-top::after, .divider-quote-top::before {
position: absolute;
top: -24px;
left: 43px;
width: 0;
height: 0;
border: solid transparent;
content: '';
pointer-events: none;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.divider-quote-top::before {
margin-left: -10px;
border-width: 13px;
border-top-color: var(--font-color-basic);
}
.divider-quote-top::after {
margin-left: -13px;
border-width: 16px;
border-top-color: var(--white-color);
}
.footer-wrap{
padding: var(--margin-3x) var(--margin-x) 0;
background-color: var(--font-color-basic);
}
.footer {
max-width: var(--page-width);
margin: 0 auto;
}
@media (max-width: 720px) {
.footer {
padding: 0 var(--margin-s) var(--margin-2x);
}
}
.footer a {
color: var(--white-color);
display: inline-block;
margin-bottom: var(--margin-x);
font-size: var(--font-size-secondary);
}
.footer a:hover {
color: var(--main-color);
}
.footer p{
color: var(--font-color-white-secondary);
}
.footer p.micro-text {
line-height: 1.8;
}
@media (max-width: 990px) {
.footer-wrap {
padding: var(--margin-3x) 0 var(--margin-2x);
}
}
.footer .divider {
border-color: var(--font-color-white-ghost);
}
.footer .subtitle-2 {
font-size: var(--font-size-small);
}
#message-top{
margin: var(--margin-2x) -40px !important;
background: var(--font-color-basic);
color: var(--white-color);
text-align: center;
padding: var(--margin-x);
}
@media (max-width:990px){
#message-top{
margin: var(--margin-2x) -20px !important;
}
}
h1 {
margin-bottom: var(--margin-x);
}
h2 {
margin-bottom: var(--margin-x);
}
.h1-subtitle{
font-size: var(--font-text-3);
color: var(--font-color-secondary);
text-transform: uppercase;
letter-spacing: var(--tracking-subtitle-h1);
}
@media (max-width: 990px) {
.h1-subtitle {
font-size: var(--font-size-basic);
}
}
@media (max-width: 720px) {
h1 {
font-size: calc(var(--font-h1) - 9px);
line-height: calc(var(--line-h1) - 8px);
}
h2 {
font-size: calc(var(--font-h2) - 4px);
line-height: calc(var(--line-h2) - 4px);
}
.subtitle-1 {
font-size: var(--font-size-small);
}
}
.button{
letter-spacing: 0;
font-weight: 800;
}
.small-button{
font-size: var(--font-size-micro);
}
.header-menu-burger-bar {
background-color: var(--main-color);
height: 4px;
}
.select-arrow {
right: 0.8em;
}
.chosen-select::after {
right: 0.55em;
}
@media (max-width: 990px){
.chosen-select::after {
right: 0.95em;
}
}
.calc-link-button{
background-color: var(--font-color-basic);
font-weight: 400;
border-radius: var(--border-radius-middle);
font-size: var(--font-size-secondary);
letter-spacing: var(--tracking-mini);
line-height: 1.4;
padding: 1em 0.5em;
}
.modal{
padding: var(--margin-x) var(--margin-x) 0;
}
.x-close-modal {
top: 0.7em;
right: 0.7em;
}
@media (max-width: 720px) {
.x-close-modal{
position: fixed;
z-index: 999;
top: 0;
right: 0;
width: 39px;
height: 39px;
background-color: rgba(255, 255, 255, 0.66);
border-radius: var(--border-radius-large);
}
.x-close-modal:before, .x-close-modal:after {
height: 23px;
left: 19px;
top: 8px;
}
}
.modal-footer{
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.modal-footer .button{
margin-left: var(--margin-x);
}
.modal-footer .button:first-child{
margin-left: 0;
}
.modal-ask-manager .input-w-label{
margin-bottom: var(--margin-x);
}
@media (max-width: 720px) {
.modal-wrap.modal-open {
padding: 0;
}
.modal{
padding: var(--margin-x) 0 0;
}
.modal-footer{
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.modal-footer .button {
font-size: var(--font-size-small);
margin-left: var(--margin-xs);
padding: 0 .8em;
}
}
.modal-loader {
width: 8px;
height: 8px;
border-radius: var(--border-radius-round);
display: block;
margin: 0 auto;
position: relative;
color: var(--main-color);
box-sizing: border-box;
-webkit-animation: modal-loader-animate 2s linear infinite;
animation: modal-loader-animate 2s linear infinite;
}
@keyframes modal-loader-animate {
0% {
box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
}
25% {
box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
}
50% {
box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
}
75% {
box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
}
100% {
box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
}
}