@import url("reset.css");
@import url("flex.css");
/*
@font-face {
     font-family: Montserrat;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../fonts/Montserrat/Montserrat.woff2) format("woff2"),
     url(../fonts/Montserrat/Montserrat.woff) format("woff"),
     url(../fonts/Montserrat/Montserrat.eot) format("eot"),
     url(../fonts/Montserrat/Montserrat.ttf) format("truetype");
     
}

@font-face {
     font-family: Montserrat;
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url(../fonts/Montserrat-Medium/Montserrat-Medium.woff2) format("woff2"),
     url(../fonts/Montserrat-Medium/Montserrat-Medium.woff) format("woff"),
     url(../fonts/Montserrat-Medium/Montserrat-Medium.eot) format("eot"),
     url(../fonts/Montserrat-Medium/Montserrat-Medium.ttf) format("truetype");

}

@font-face {
     font-family: Montserrat;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff2) format("woff2"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff) format("woff"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.eot) format("eot"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.ttf) format("truetype");
     
}
*/
@font-face {
     font-family: Montserrat;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff2) format("woff2"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff) format("woff"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.eot) format("eot"),
     url(../fonts/Montserrat-SemiBold/Montserrat-SemiBold.ttf) format("truetype");

}
@font-face {
     font-family: Onest;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../fonts/Onest/Onest-Regular.woff2) format("woff2"),
     url(../fonts/Onest/Onest-Regular.woff) format("woff"),
     url(../fonts/Onest/Onest-Regular.eot) format("eot"),
     url(../fonts/Onest/Onest-Regular.ttf) format("truetype");

}

@font-face {
     font-family: Onest;
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url(../fonts/Onest-Medium/Onest-Medium.woff2) format("woff2"),
     url(../fonts/Onest-Medium/Onest-Medium.woff) format("woff"),
     url(../fonts/Onest-Medium/Onest-Medium.eot) format("eot"),
     url(../fonts/Onest-Medium/Onest-Medium.ttf) format("truetype");

}

@font-face {
     font-family: Onest;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../fonts/Onest-SemiBold/Onest-SemiBold.woff2) format("woff2"),
     url(../fonts/Onest-SemiBold/Onest-SemiBold.woff) format("woff"),
     url(../fonts/Onest-SemiBold/Onest-SemiBold.eot) format("eot"),
     url(../fonts/Onest-SemiBold/Onest-SemiBold.ttf) format("truetype");

}

*::selection {
     color: #ffffff;
     background-color: #0AB6C9;
}

.hidden { display: none; }

/* Шаблон попапов */
.popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.2);
     opacity: 0;
     z-index: -1;
     transition: transform 0.4s ease-out, opacity 0.5s ease-out;
}
.popup.open {
     opacity: 1;
     z-index: 999;
}
.popup > div {
     transform: translateY(-10rem);
     transition: transform 0.4s ease-in, opacity 0.5s ease-in;
}
.popup.open > div {
     transform: translateY(0);
     transition: transform 0.4s ease-out, opacity 0.5s ease-out;
}

/* Grid, Flexbox and block sizes (Grid, Flexbox и размеры блоков) */

html, body, header, main, section, footer { width: 100%; }

.grid {
     display: grid;
     position: relative;
     grid-template-rows: min-content;
     grid-template-columns: repeat(auto-fill, 0.1rem);
}

main { min-height: 50vh; }

body, main, section {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     background-color: #fff;
}

body, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
button, label, input, span, a, .custom-numbering > li:before {
     font-family: "Onest", sans-serif;
     font-style: normal;
     color: #010101;
}

/* Onest-Regular Tags */
span, input { font-weight: 400; }

/* Onest-Medium Tags */
h4, .h4, a, .link, .custom-numbering > li:before { font-weight: 500; }

/* Onest-SemiBold Tags */
h1, h2, h3, h5, .h1, .h2, .h3, .h5,
button, label, input[type=button],
input[type=reset], input[type=submit], .button { font-weight: 500; }

/* buttons font-size */
input[type=button], input[type=reset], input[type=submit], button, .button, .btn {
     font-size: 1.4rem;
     line-height: 1.82rem;
     transition: all 0.3s ease;
}

input[type=button].large, input[type=reset].large, input[type=submit].large, button.large, .btn-large {
     font-size: 1.6rem;
     line-height: 2rem;
}

input[type=button].small, input[type=reset].small, input[type=submit].small, button.small, .btn-small {
     font-size: 1.2rem;
     letter-spacing: 0.06rem;
     line-height: 1.34rem;
}


/* links font-size */
a, .link {
     font-size: 1.4rem;
     letter-spacing: -0.28px;
     line-height: 1.82rem;
}

a.large, .link-large {
     font-size: 1.6rem;
     letter-spacing: -0.32px;
     line-height: 1.92rem;
}

a.small, .link-small {
     font-size: 1.2rem;
     letter-spacing: -0.24px;
     line-height: 1.44rem;
}

/* background-colors */
section.black, div.black { background-color: #010101; }
section.blue-400, div.blue-400 { background-color: #0ab6c9; }
section.blue-900, div.blue-900 { background-color: #e5fcff; }
section.grey-400, div.grey-400 { background-color: #666; }
section.grey-500, div.grey-500 { background-color: #808080; }
section.grey-800, div.grey-800 { background-color: #e3e3e8; }
section.grey-900, div.grey-900 { background-color: #f4f4f6; }
section.grey-1000, div.grey-1000 { background-color: #f9f9fa; }
section.white, div.white { background-color: #fff; }
section.green, div.green { background-color: #5ba676; }
section.grey-blue, div.grey-blue { background-color: #3d4d5c; }
section.green-10, div.green-10 { background-color: rgba(91, 166, 118, 0.1); }
section.orange-500, div.orange-500 { background-color: #ffa300; }
section.orange-900, div.orange-900 { background-color: #ffedcc; }
section.red-10, div.red-10 { background-color: rgba(239, 24, 57, 0.1); }
section.red, div.red { background-color: #ef1839; }
section.yellow-600, div.yellow-600 { background-color: #ffc633; }
section.yellow-700, div.yellow-700 { background-color: #f7cd6e; }

/* text-colors */
a.white, span.white, li.white, input.white, button.white, label.white {  color: #fff; }

a.blue-200, span.blue-200, li.blue-200, input.blue-200, button.blue-200, label.blue-200 {  color: #045662; }

a.blue-500, span.blue-500, li.blue-500, input.blue-500, button.blue-500, label.blue-500 { color: #0ab6c9; }

a.grey-500, span.grey-500, li.grey-500, input.grey-500, button.grey-500, label.grey-500 { color: #8C8C8C; }

a.grey-600, span.grey-600, li.grey-600, input.grey-600, button.grey-600, label.grey-600 { color: #999; }

a.orange-500, span.orange-500, li.orange-500, input.orange-500, button.orange-500, label.orange-500 { color: #ffa300; }

a.red, span.red, li.red, input.red, button.red, label.red  { color: #ef1839; }

a.green, span.green, li.green, input.green, button.green, label.green  { color: #5BA676; }

a.black, span.black, li.black, input.black, button.black, label.black { color: #010101; }


/* buttons background-colors */
input[type=button], input[type=reset], input[type=submit], button { background-color: #0AB6C9; }

input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover,
button:hover { background-color: #010101; }

input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled,
button:disabled { background-color: #b6f4fb; }

input[type=button]:active, input[type=reset]:active, input[type=submit]:active,
button:active { background-color: #010101; }

input[type=button].accent:hover, input[type=reset].accent:hover, input[type=submit].accent:hover,
button.accent:hover { background-color: #999; }

input[type=button].accent:active, input[type=reset].accent:active, input[type=submit].accent:active,
button.accent:active { background-color: #e6e6e6; }

input[type=button].outlined:active, input[type=reset].outlined:active, input[type=submit].outlined:active,
button.outlined:active { background-color: #010101; }


/* buttons text-colors */
input[type=button], input[type=reset], input[type=submit], button,
input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, button:hover,
input[type=button]:active, input[type=reset]:active, input[type=submit]:active, button:active { color: #fff; }

input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled, button:disabled { color: rgba(10, 182, 201, 0.2); }

input[type=button].outlined, input[type=reset].outlined, input[type=submit].outlined, button.outlined { color: #0ab6c9; }

input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover,
input[type=button].outlined:hover, input[type=reset].outlined:hover,
input[type=submit].outlined:hover, button.outlined:hover,
input[type=button].outlined:active, input[type=reset].outlined:active,
input[type=submit].outlined:active, button.outlined:active { color: #fff; }

input[type=button].clear, input[type=reset].clear, input[type=submit].clear, button.clear { color: #010101; }

input[type=button].clear:hover, input[type=reset].clear:hover, input[type=submit].clear:hover,
button.clear:hover { color: #999; }

input[type=button].clear:active, input[type=reset].clear:active, input[type=submit].clear:active,
button.clear:active { color: #1ba2b1; }

input[type=button].clear:disabled, input[type=reset].clear:disabled, input[type=submit].clear:disabled,
button.clear:disabled { color: #e6e6e6; }


/* buttons borders */
input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled,
button:disabled { border: 0.1rem solid rgba(10, 182, 201, 0.2); }

input[type=button].accent, input[type=reset].accent, input[type=submit].accent,
button.accent { border: 0.1rem solid #999; }

input[type=button].accent:disabled, input[type=reset].accent:disabled, input[type=submit].accent:disabled,
button.accent:disabled { border: 0.1rem solid #e6e6e6; }

input[type=button].outlined:hover, input[type=reset].outlined:hover, input[type=submit].outlined:hover,
button.outlined:hover { border: 0.1rem solid #010101; }

input[type=button].outlined:active, input[type=reset].outlined:active, input[type=submit].outlined:active,
button.outlined:active { border: 0.1rem solid rgba(10, 182, 201, 0.2); }

/* buttons border-radius */
input[type=button], input[type=reset], input[type=submit], button { border-radius: 0.8rem; }


a:hover, .link:hover { color: #0AB6C9; }


.overlay {
     position: fixed;
     top: 0;
     left: 0;
     margin: 0;
     padding: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.4);
     transition: all 0.3s ease-in;
     opacity: 0;
     z-index: -1;
     overflow: hidden;
}

.overlay.active {
     transition: all 0.3s ease-out;
     opacity: 1;
     z-index: 999;
}

view { display: none; }

/* Desktop (Extra-Big screen 4K, 5k, 6k, 8k) */
@media (min-width: 3000px) {
     /* Настройка 1rem в соответствии с макетом */
     html { font-size: 10px; }
}

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) and (max-width: 2999px) {
     /* Настройка 1rem в соответствии с макетом */
     html {font-size: 0.5208333333333333vw;}
}

@media (min-width: 1600px) {

     header, main, section, footer { max-width: 192rem; }

     /* tags fonts-sizes */
     h1, .h1 {
          font-size: 6.4rem;
          font-weight: 600;
          line-height: 6.4rem;
          letter-spacing: -0.128rem;
     }
     h2, .h2 {
          font-size: 4rem;
          font-weight: 600;
          line-height: 4rem;
          letter-spacing: -0.08rem;
     }
     h3, .h3 {
          font-size: 3.2rem;
          font-weight: 500;
          line-height: 3.84rem;
          letter-spacing: normal;
     }
     h4, .h4, .custom-numbering > li:before {
          font-size: 2.2rem;
          font-weight: 500;
          line-height: 2.64rem;
          letter-spacing: -0.044rem;
     }
     h5, .h5 {
          font-size: 1.6rem;
          font-weight: 600;
          line-height: 2.08rem;
          letter-spacing: -0.064rem;
     }
     body, span, input, .custom-numbering li ol > li:before {
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 2.08rem;
          letter-spacing: -0.032rem;
     }
     span.large, input.large {
          font-size: 2rem;
          font-weight: 400;
          line-height: 2.8rem;
          letter-spacing: -0.04rem;
     }
     span.medium, input.medium {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.75rem;
          letter-spacing: -0.028rem;
     }
     span.small, input.small {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.68rem;
          letter-spacing: normal;
     }

     /* Grid columns */
     .wrapper {
          width: 152rem;
          grid-column-start: 200;
     }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
     /* Настройка 1rem в соответствии с макетом */
     html { font-size: 0.6944444444444444vw; }

     header, main, section, footer { max-width: 144rem; }

     /* tags fonts-sizes */
     h1, .h1 {
          font-size: 4rem;
          font-weight: 600;
          line-height: 4.4rem;
          letter-spacing: -0.08rem;
     }
     h2, .h2 {
          font-size: 3.4rem;
          font-weight: 600;
          line-height: 4.08rem;
          letter-spacing: -0.068rem;
     }
     h3, .h3 {
          font-size: 2.4rem;
          font-weight: 500;
          line-height: 2.88rem;
          letter-spacing: normal;
     }
     h4, .h4, .custom-numbering > li:before {
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 2.16rem;
          letter-spacing: -0.036rem;
     }
     h5, .h5 {
          font-size: 1.4rem;
          font-weight: 600;
          line-height: 1.68rem;
          letter-spacing: -0.056rem;
     }
     span.large, input.large {
          font-size: 1.8rem;
          font-weight: 400;
          line-height: 2.52rem;
          letter-spacing: -0.036rem;
     }
     body, span, input, .custom-numbering li ol > li:before {
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 2.08rem;
          letter-spacing: -0.032rem;
     }
     span.medium, input.medium {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.68rem;
          letter-spacing: -0.028rem;
     }
     span.small, input.small {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.68rem;
          letter-spacing: normal;
     }

     /* Grid columns */
     .wrapper {
          width: 128rem;
          grid-column-start: 80;
     }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 1024px) {
     view.desktop { display: unset; }
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
     /* Настройка 1rem в соответствии с макетом */
     html { font-size: 1.302083333333333vw; }

     view.tablet { display: unset; }

     header, main, section, footer { max-width: 76.8rem; }

     /* tags fonts-sizes */
     h1, .h1 {
          font-size: 3.2rem;
          font-weight: 600;
          line-height: 3.2rem;
          letter-spacing: -0.064rem;
     }
     h2, .h2 {
          font-size: 2.4rem;
          font-weight: 600;
          line-height: 2.88rem;
          letter-spacing: -0.048rem;
     }
     h3, .h3 {
          font-size: 2rem;
          font-weight: 500;
          line-height: 2.4rem;
          letter-spacing: normal;
     }
     h4, .h4, .custom-numbering > li:before {
          font-size: 1.6rem;
          font-weight: 500;
          line-height: 1.92rem;
          letter-spacing: -0.032rem;
     }
     h5, .h5 {
          font-size: 1.4rem;
          font-weight: 600;
          line-height: 1.75rem;
          letter-spacing: -0.056rem;
     }
     span.large, input.large {
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 2.08rem;
          letter-spacing: -0.016rem;
     }
     body, span, input, .custom-numbering li ol > li:before {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.82rem;
          letter-spacing: -0.018rem;
     }
     span.medium, input.medium {
          font-size: 1.2rem;
          font-weight: 400;
          line-height: 1.56rem;
          letter-spacing: normal;
     }
     span.small, input.small {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.68rem;
          letter-spacing: normal;
     }

     /* Grid columns */
     .wrapper {
          width: 72rem;
          grid-column-start: 24;
     }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
     /* buttons border-radius */
     input[type=button], input[type=reset], input[type=submit], button { border-radius: 0.6rem; }
}

/* Mobile Only */
@media (max-width: 599px) {
     /* Настройка 1rem в соответствии с макетом */
     html { font-size: 2.666666666666667vw; }

     view.mobile { display: unset; }

     /* tags fonts-sizes */
     h1, .h1 {
          font-size: 3rem;
          font-weight: 600;
          line-height: 3.3rem;
          letter-spacing: -0.06rem;
     }
     h2, .h2 {
          font-size: 2.4rem;
          font-weight: 600;
          line-height: 2.64rem;
          letter-spacing: -0.048rem;
     }
     h3, .h3 {
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 2.4rem;
     }
     h4, .h4, .custom-numbering > li:before {
          font-size: 1.6rem;
          font-weight: 500;
          line-height: 1.92rem;
          letter-spacing: -0.032rem;
     }
     h5, .h5 {
          font-size: 1.4rem;
          font-weight: 600;
          line-height: 1.68rem;
          letter-spacing: -0.056rem;
     }
     span.large, input.large {
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 2rem;
          letter-spacing: -0.016rem;
     }
     body, span, input, .custom-numbering li ol > li:before {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.75rem;
          letter-spacing: -0.018rem;
     }
     span.medium, input.medium {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.82rem;
          letter-spacing: -0.028rem;
     }
     span.small, input.small {
          font-size: 1.2rem;
          font-weight: 400;
          line-height: 1.44rem;
     }

     /* Grid columns */
     .wrapper {
          width: 34.3rem;
          grid-column-start: 16;
     }
}