Your IP : 18.223.159.189
@charset "UTF-8";
@import "sass";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400&display=swap');
* {
padding: 0;
margin: 0;
border: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active {
outline: none;
text-decoration: none;
}
a {
color: $black;
@include animation_0_25;
}
a:focus {
outline: none;
text-decoration: none;
}
a, a:visited {
text-decoration: none;
}
a:hover {
color: $green;
text-decoration: none;
}
a:active {
outline: none;
text-decoration: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='submit'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
header, nav, section, article, aside, footer, video, figure {
display: block;
width: 100%;
}
html, body {
width: 100%;
line-height: 1.5;
font-size: 20px;
color: $black;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: $mainFont;
background-color: $white;
}
/*body {
display: grid;
min-height: 100vh;
grid-template-areas: "content";
grid-template-rows: 1fr;
}*/
input, button, textarea {
font-family: inherit;
//-webkit-appearance: none;
outline: 0;
}
input::-ms-clear {
display: none;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
button {
cursor: pointer;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
p {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
h1, h2, h3, h4, h5 {
font-weight: 700;
}
.container {
max-width: 100vw;
height: 100%;
//padding: 0 15px;
margin: 0 auto;
}
.ibg {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.btn {
display: inline-flex;
justify-content: center;
padding: 41px 137px;
border-radius: 122px;
background: transparent;
color: $black;
font-size: 20px;
font-weight: 600;
text-align: center;
cursor: pointer;
@include animation_0_25;
}
.btn1 {
background: $yellow;
&:hover {
color: $black;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
&:active {
color: $black;
background: $yellow;
box-shadow: none;
}
}
.btn2 {
color: $white;
background: $green;
padding: 23px 52px;
&:hover {
color: $white;
background: #01c3a2;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
}
.lock {
overflow: hidden !important;
}
main.main {
width: 100%;
max-width: 1920px;
min-height: 100vh;
padding-right: 97px;
overflow-x: hidden;
}
.content_wave__mob,
.content_right__mob {
display: none;
}
// Aside
aside.aside {
display: flex;
flex-direction: column;
align-items: stretch;
position: fixed;
top: 0;
left: 0;
max-width: 460px;
height: 100vh;
background: $green2;
z-index: 20;
overflow-y: auto;
padding: 50px 0;
@include animation_0_25;
}
.aside_close {
display: none;
}
.mob_menu_btn {
display: none;
@include animation_0_25;
}
.mob_menu_btn._hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.aside_logo {
width: 100%;
max-width: 280px;
margin: 0 auto 120px;
img {
max-width: 100%;
}
}
.aside_menu {
margin-bottom: 40px;
}
.aside_social {
margin-top: auto;
}
.social_list {
display: flex;
justify-content: center;
gap: 30px;
}
.social_link {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: relative;
&:hover {
.social_img_hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 3;
}
}
}
.social_img,
.social_img_hover {
position: absolute;
top: 0;
left: 0;
}
.social_img {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.social_img_hover {
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
@include animation_0_25;
}
// Content
.content {
//overflow: hidden;
padding: 50px 0 0 calc(460px + 115px);
}
.content_header {
display: flex;
justify-content: flex-end;
}
.header_left {
display: none;
}
.header_phone {
display: flex;
}
.header_phone__icon {
display: flex;
margin-right: 10px;
}
.header_phone__number {
font-weight: 600;
line-height: 1;
}
// Content_body__left
.tab_body__wrapper {
display: flex;
width: 100%;
}
.tab_body__wrapper_res {
display: none;
}
.tab_body__wrapper._hide,
.tab_body__wrapper_res {
display: none;
}
.tab_body__wrapper._show,
.tab_body__wrapper_res._show {
display: flex;
}
.content_left {
width: 100%;
max-width: 548px;
position: relative;
z-index: 1;
}
.content_title {
width: 100%;
max-width: 562px;
font-size: 55px;
font-weight: 700;
text-transform: uppercase;
margin: 64px 0 10px;
}
.content_subtitle {
font-size: 30px;
margin-bottom: 40px;
b {
font-weight: 600;
}
}
.content_subtitle._res {
font-size: 20px;
}
.content_btn_container {
margin-bottom: 40px;
}
.content_note {
position: relative;
padding-left: 20px;
margin-bottom: 40px;
b {
font-weight: 600;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 1px;
background: $green;
}
}
.content_badge {
padding-left: 394px;
}
.content_badge__inner {
width: 246px;
}
.badge_title {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
font-size: 16px;
font-weight: 600;
line-height: 1;
padding: 13px 32px;
margin-bottom: 10px;
border-radius: 10px;
background: rgba(228, 243, 242, 0.70);
backdrop-filter: blur(5px);
}
.badge_description {
font-size: 16px;
}
// Content_body__right
.content_right {
position: relative;
}
.content_main_image {
display: flex;
width: 540px;
margin-top: -27px;
img {
max-width: 100%;
}
}
.content_main_image._res {
display: none;
}
.content_quote {
width: 270px;
height: 176px;
position: absolute;
top: 140px;
right: -149px;
z-index: 1;
}
.content_quote__bubble {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.content_quote__text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 4px), calc(-50% - 12px));
width: 100%;
max-width: 191px;
font-size: 16px;
z-index: 3;
}
.content_wave {
position: absolute;
z-index: -1;
}
.content_wave__top {
top: 102px;
left: -40px;
}
.content_wave__bot {
bottom: 174px;
right: -97%;
}
// Tabs
.tabs {
display: flex;
position: relative;
}
.tab_btn {
display: flex;
align-items: center;
width: 100%;
padding: 20px 50px;
cursor: pointer;
border-bottom: 1px solid $green;
position: relative;
@include animation_0_25;
&:first-child {
border-top: 1px solid $green;
}
&:hover {
color: $white;
background: $green;
}
}
.tab_btn._active {
background: $green;
color: $white;
}
.tab_content {
position: relative;
width: 100%;
//min-height: calc(100vh - 70px);
//overflow: hidden;
z-index: 10;
}
.tab_body {
position: absolute;
width: 100%;
height: 100%;
top: -200%;
left: 0;
opacity: 0;
visibility: hidden;
user-select: none;
transform: translateX(40px);
}
.tab_body._active {
top: 0;
opacity: 1;
visibility: visible;
user-select: auto;
transform: translateX(0);
transition: opacity .25s ease-out, visibility .25s ease-out, transform .25s ease-out;
}
.tab_description {
padding: 40px 40px 20px;
}
.tab_link {
padding: 0 40px;
a {
font-weight: 500;
font-size: 17px;
text-decoration: underline;
&:hover {
text-decoration: underline;
color: red;
}
}
}
// Form
.modal {
width: 100%;
max-width: 540px;
}
.modal_inner {
width: 100%;
}
.modal_title {
font-weight: 700;
font-size: 30px;
text-align: center;
margin-bottom: 10px;
}
.form_message__error {
opacity: 0;
visibility: hidden;
pointer-events: none;
font-size: 14px;
font-weight: 600;
color: #f25830;
text-align: center;
margin-bottom: 10px;
@include animation_0_25;
}
.form_message__error._show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal_form {
width: 100%;
}
.form__item {
margin-bottom: 15px;
position: relative;
&:last-child {
margin-bottom: 0;
}
}
.form__item._filled {
.form__label {
font-size: 14px;
top: 30%;
}
}
.form__label {
font-size: 15px;
color: #a9a9a9;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
@include animation_0_25;
span {
color: #f25830;
}
}
.form__input {
border-radius: 4px;
height: 52px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
border: 1px solid #ebebeb;
background-color: #f5f5f5;
width: 100%;
font-size: 17px;
padding: 17px 10px 0;
@include animation_0_25;
}
.form__input._error {
border: 1px solid #f25830;
}
.form__cta {
margin-top: 15px;
button {
display: inline-flex;
align-content: center;
justify-content: center;
background: #00ab8e;
border: 1px solid #00ab8e;
color: #ffffff;
line-height: 1;
font-size: 15px;
font-weight: 600;
border-radius: 4px;
padding: 13px 24px 14px;
@include animation_0_25;
&:hover {
background: rgba(0, 174, 160, 0.7);
border: 1px solid rgba(0, 174, 160, 0.7);
}
}
}
// checkbox
.checkbox_container {
display: flex;
align-items: center;
position: relative;
.check {
cursor: pointer;
position: relative;
width: 24px;
height: 24px;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
}
.check:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 38px;
height: 38px;
border-radius: 50%;
opacity: 1;
transition: opacity 0.2s ease;
}
.check svg {
position: relative;
z-index: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #c8ccd4;
stroke-width: 1.5;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
}
.check svg path {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
.check svg polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
}
.check:hover:before {
opacity: 1;
}
.check:hover svg {
stroke: #00aea0;
}
input[id^="cbx_"]:checked + .check svg {
stroke: #00aea0;
}
input[id^="cbx_"]:checked + .check svg path {
stroke-dashoffset: 60;
transition: all 0.3s linear;
}
input[id^="cbx_"]:checked + .check svg polyline {
stroke-dashoffset: 42;
transition: all 0.2s linear;
transition-delay: 0.15s;
}
}
.checkbox_container._error {
.check {
svg {
stroke: #f25830;
}
}
}
.label_desc {
margin-left: 15px;
padding-top: 5px;
cursor: pointer;
font-size: 14px;
a {
color: #00ab8e;
&:hover {
text-decoration: underline;
}
}
}
// fancybox
.fancybox__backdrop {
opacity: .7 !important;
}
.fancybox__content {
padding: 40px 20px!important;
}
// RESULT_BLOCK
.content_result_block {
width: 100%;
max-width: 458px;
margin: 85px 0 0 auto;
position: relative;
.content_wave__bot {
top: auto;
bottom: 0;
left: 220px;
right: auto;
transform: translateY(calc(100% + 30px));
}
}
.result_sign_message {
font-size: 16px;
font-weight: 600;
background: rgba(228, 243, 242, 0.7);
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}
.result_message {
font-size: 16px;
margin-bottom: 55px;
}
// result_social_block
.result_social {
}
.result_social__item {
display: flex;
align-items: center;
margin-bottom: 48px;
&:last-child {
margin-bottom: 0;
}
.item_icon {
width: 94px;
margin-right: 92px;
img {
width: 100%;
}
}
.item_btn {
}
}
@media (max-width: 1840px) {
.content {
padding: 50px 0 0 calc(460px + 60px);
}
}
@media (max-width: 1760px) {
.content_header {
margin-bottom: 28px;
}
.content_quote {
display: none;
}
.content_main_image {
margin-top: 0;
}
}
@media (max-width: 1680px) {
aside.aside {
max-width: 323px;
}
.aside_logo {
width: 200px;
margin: 0 auto 100px;
}
.content {
padding: 50px 0 0 calc(323px + 60px);
}
.tab_btn {
font-size: 16px;
padding: 20px;
}
}
@media (max-width: 1540px) {
.btn {
width: 100%;
max-width: 318px;
font-size: 16px;
padding: 33px 30px;
//padding: 33px 94px;
}
.btn2 {
padding: 23px 52px;
}
.content_title {
font-size: 35px;
}
.content_subtitle {
font-size: 20px;
margin-bottom: 50px;
}
.content_btn_container {
margin-bottom: 60px;
}
.content_badge {
padding-left: 354px;
}
.content_main_image {
width: 430px;
}
.content_left {
max-width: 515px;
}
}
@media (max-width: 1360px) {
.tab_body__wrapper_res {
flex-wrap: wrap;
width: 100%;
.content_right {
transform: translateX(90px);
}
}
.content_main_image._res {
display: block;
}
.res__left {
display: flex;
width: 100%;
}
.content_result_block {
max-width: 100%;
transform: translateX(97px);
margin: 0;
}
.result_message,
.result_social {
max-width: 458px;
}
.result_sign_message {
border-radius: 10px 0 0 10px;
}
}
@media (max-width: 1300px) {
.aside_logo {
width: 200px;
}
.content_left {
min-width: 344px;
max-width: 430px;
}
.content_badge {
padding-left: 100px;
}
main.main {
padding-right: 60px;
}
.content {
padding: 40px 0 0 calc(323px + 60px);
}
.content_note {
font-size: 18px;
}
.content_right {
margin-left: -26px;
}
.content_main_image {
width: 414px;
}
.content_wave__top {
top: 87px;
left: -2px;
}
.content_badge {
padding-left: 62px;
}
.tab_body__wrapper_res .content_right {
transform: translateX(60px);
}
.content_result_block {
transform: translateX(0);
padding-top: 108px;
}
.result_sign_message {
position: absolute;
top: 0;
left: 0;
width: 120%;
.inner {
max-width: 497px;
}
}
.result_social__item .item_icon {
width: 74px;
margin-right: 70px;
}
.btn2 {
padding: 18px 42px;
}
}
@media (max-width: 1100px) {
.content_right {
display: flex;
align-items: flex-end;
}
.content_main_image._res {
width: 287px;
}
.content_result_block .content_wave__bot {
position: static;
transform: translateY(0);
padding-left: 144px;
}
.content_result_block {
padding-bottom: 23px;
}
.result_social {
margin-bottom: 25px;
}
}
@media (max-width: 1023px) {
aside.aside {
max-width: 324px;
left: -324px;
}
aside.aside._active {
left: 0;
width: 324px;
}
.mob_menu_btn {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 100%;
background: $green2;
cursor: pointer;
@include animation_0_25;
}
.content {
padding: 40px 0 0 calc(70px + 40px);
}
.content_header {
align-items: center;
justify-content: space-between;
}
.header_left {
display: flex;
width: 200px;
img {
max-width: 100%;
}
}
.aside_close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 10px;
img {
max-width: 100%;
}
}
}
@media (max-width: 920px) {
.btn {
//padding: 23px 71px;
padding: 27px 30px;
}
.btn2 {
padding: 18px 42px;
}
.content_title {
font-size: 30px;
margin: 36px 0 25px;
}
.content_subtitle {
font-size: 18px;
margin-bottom: 25px;
}
.content_btn_container {
margin-bottom: 25px;
}
.content_main_image {
width: 350px;
}
.content_wave__top {
top: 50px;
}
.content_left {
max-width: 345px;
}
}
@media (max-width: 860px) {
.content_right {
margin-left: 0;
}
.content_main_image {
width: 340px;
}
.content_wave__top {
left: -29px;
}
}
@media (max-width: 720px) {
.content_left {
min-width: auto;
max-width: 272px;
}
.badge_title {
font-size: 14px;
min-height: 40px;
}
.badge_description {
font-size: 14px;
}
.content_main_image {
width: 335px;
}
.content_note {
margin-bottom: 30px;
}
.content_wave__bot {
display: none;
}
.content_result_block {
.content_wave__bot {
display: block;
}
}
.content_subtitle._res {
font-size: 16px;
}
}
@media (max-width: 680px) {
.content_main_image._res {
width: 249px;
}
}
@media (max-width: 639px) {
.mob_menu_btn {
width: 60px;
height: 70px;
}
.tab_btn {
font-size: 14px;
}
.content {
padding: 18px 0 0 23px;
}
.content_header {
padding-left: 62px;
}
.header_left {
width: 165px;
}
.header_phone__number {
font-size: 14px;
}
.header_phone__icon {
width: 15px;
img {
max-width: 100%;
}
}
.content_title {
font-size: 25px;
}
.content_subtitle {
font-size: 16px;
}
.btn {
font-size: 14px;
}
.content_note {
font-size: 14px;
padding-left: 10px;
}
.badge_title {
font-size: 12px;
min-height: 35px;
padding: 12px 29px;
}
.badge_description {
font-size: 12px;
}
.content_badge {
padding-left: 40px;
}
.content_header {
margin-bottom: 18px;
}
.content_wave__top {
img {
height: 100px;
}
}
.content_subtitle._res {
font-size: 14px;
}
}
@media (max-width: 560px) {
main.main {
padding-right: 15px;
}
.content_main_image {
width: 295px;
}
.btn {
padding: 23px 58px;
}
.btn2 {
padding: 18px 42px;
}
.aside_logo {
margin: 0 auto 45px;
}
}
@media (max-width: 520px) {
.content_main_image {
width: 288px;
}
.content_right {
margin-left: -20px;
}
}
@media (max-width: 479px) {
main.main {
overflow-y: auto;
overflow-x: hidden;
padding-right: 0;
}
.btn2 {
padding: 12px 24px;
}
.content {
padding: 18px 0 0 0;
}
.tab_body__wrapper,
.tab_body__wrapper_res {
flex-direction: column;
align-items: center;
//padding-left: 7px;
}
.res__left {
flex-direction: column;
align-items: center;
}
.content_header {
flex-direction: column;
align-items: center;
padding-top: 7px;
margin-bottom: 11px;
padding-left: 0;
}
.header_left {
margin-bottom: 10px;
}
.mob_menu_btn {
position: absolute;
height: 106px;
}
.content_title {
font-size: 20px;
padding-left: 58px;
margin: 16px 0 10px;
}
.content_subtitle {
font-size: 14px;
margin-bottom: 0;
}
.content_wave__mob {
display: block;
top: 29px;
left: -52px;
img {
height: 76px;
}
}
.content_left {
margin-bottom: 18px;
.content_btn_container,
.content_note,
.content_badge {
display: none;
}
}
.content_right {
display: none;
}
.tab_body__wrapper_res {
.content_right__mob {
margin-bottom: 30px;
}
}
.content_result_block {
padding: 0 0 25px 23px;
.content_wave__bot {
padding-left: 113px;
}
.content_wave__bot img {
height: 99px;
}
}
.content_main_image._res {
width: 288px;
}
.result_sign_message {
position: static;
width: 100%;
}
.result_message {
padding-right: 23px;
}
.result_social__item {
padding-right: 23px;
margin-bottom: 18px;
.item_icon {
width: 56px;
margin-right: 55px;
}
}
.result_sign_message {
font-size: 14px;
margin-bottom: 24px;
}
.content_right__mob {
display: block;
position: relative;
margin-bottom: 60px;
}
.content_wave__mob_bot {
position: absolute;
top: 70px;
left: 0;
}
.content_right__mob_wrapper {
position: relative;
margin-bottom: 60px;
}
.content_main_image {
height: 490px;
overflow: hidden;
}
.content_btn_container {
margin: 0;
}
.content_btn {
width: 100%;
min-height: 70px;
}
.content_badge__mob {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 193px;
text-align: center;
line-height: 1;
padding: 10px 18px;
border-radius: 10px;
background: rgba(228, 243, 242, 0.70);
backdrop-filter: blur(5px);
margin: 0 auto 10px;
}
.badge_title__mob {
font-size: 12px;
font-weight: 600;
margin-bottom: 3px;
}
.badge_description__mob {
font-size: 11px;
font-weight: 400;
br {
display: none;
}
}
.content_right__mob_inner {
position: absolute;
bottom: -35px;
left: 0;
margin: 0;
width: 100%;
}
.content_note_container {
display: flex;
justify-content: center;
}
.content_note {
font-size: 14px;
margin-bottom: 0;
}
.result_message {
font-size: 14px;
margin-bottom: 40px;
}
}