section:not(:first-of-type) {
margin-top: 3.75rem;
}
section.page-selection__text-image {
margin-top: 0 !important;
}
.page_banner__next-screen {
width: 100%;
text-align: center;
padding: 0 2.25rem;
}
.page_banner__next-screen {
left: 0;
}
.page_banner__next-screen:hover {
left: 50%;
}
.page-template-page-car-selection main {
display: flex;
flex-direction: column;
color: var(--Black_titles, #191A26);
background-color: var(--Background, #F4F6F9);
}
.page_banner:first-of-type {
order: -1;
margin: 0;
}
.page-selection__text-image .container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2.5rem;
}
.page-selection__text-image_text h2,
.page_selection-divided__title,
.page_selection-stages__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
margin-bottom: 1.5rem;
}
.page-selection__text-image_text p {
line-height: 1.5;
}
.page-selection__text-image_button {
font-weight: 600;
color: #FFF;
padding-block: 1rem;
width: 100%;
background: #00424A;
margin-top: 1.75rem;
border: 1px solid transparent;
}
.page-selection__text-image_button:hover {
background: transparent;
color: #00424A;
border: 1px solid #00424A;
}
.page-selection__text-image_image {
padding-inline: -0.75rem;
}
.page-selection__text-image_image iframe {
width: 100%;
height: auto;
min-height: 360px;
}
.page_pokazateli__wrapper {
padding: 0 1.25rem;
}
.page_pokazateli__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
line-height: 1.2;
margin-bottom: 3.75rem;
}
.page_pokazateli__title span {
color: var(--Red, #C11D1D);
}
.page_pokazateli__items {
gap: 3.75rem 0;
}
.page_pokazateli__item__count {
font-size: 4rem;
line-height: 1;
font-weight: 600;
color: var(--Red, #C11D1D);
margin-bottom: 1.25rem;
}
.page_pokazateli__item__text {
font-size: 1.125rem;
line-height: 1.5;
color: var(--Grey_dark_texts, #393E41);
}
.page_selection-stages__items {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
.page_selection-stages__item {
display: flex;
gap: 0.75rem;
}
.page_selection-stages__item-key {
font-size: clamp(72px, 15vw, 80px);
color: #21A4A3;
line-height: 1;
flex: 0 0 14.75%;
font-weight: 600;
}
.page_selection-stages__item-title {
font-size: 1.25rem;
font-weight: 600;
}
.page_selection-stages__item-text {
margin-top: 0.75rem;
}
.page-video-banner { margin-bottom: 4rem;
}
.page-video-banner .page_banner__slide__content, 
.page-video-banner .page_banner__slide__content > .row {
max-height: 375px;
}
.page-video-banner::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #191A2699;
z-index: 1;
}
.page-video-banner .page_banner__next-screen {
display: none;
}
.page_banner__slide {
position: relative;
}
.page_banner #myVideo {
position: absolute;
inset: 0;
z-index: -1;
right: 0;
left: 0;
top: 0;
bottom: 0;
object-fit: cover;
width: 100%;
max-width: 100%;
max-height: 100%;
height: 100%;
z-index: 1;
height: 100%;
}
.page_banner__slide__title {
font-size: 1.5rem !important;
}
.page_banner__slide__show-video {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
padding: 0.625rem 1.25rem;
justify-content: space-between;
width: min(320px, 100%);
border: 2px solid var(--white-back-texts, #FFF);
cursor: pointer;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.page_banner__slide__show-video:hover {
border: 2px solid var(--Red);
color: var(--Red);
}
.page_selection-divided__text > *:not(:first-child) {
padding-top: 0.75rem;
}
.page_selection-divided__text > ul li {
padding-top: 0.75rem;
}
.new-year__callback-form {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
background-color: #FFFFFF;
color: #191A26;
position: relative;
z-index: 3;
}
.callback-form__title {
color: #191A26;
font-weight: 600;
text-align: center;
margin-bottom: 1.75rem;
}
.callback-form__form {
position: relative;
}
.callback-form__form,
.form-row {
display: flex;
flex-wrap: wrap;
row-gap: 1.5rem;
width: 100%;
}
.callback-form__form.await {
opacity: 0.7;
}
.loading {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.await .loading {
opacity: 1;
visibility: visible;
z-index: 10;
}
.loading span {
display: block;
width: 1rem;
height: 1rem;
background-color: #FFF;
border-radius: 50%;
}
.loading span {
animation: bounce 0.5s ease infinite;
}
.loading span:nth-child(2) {
animation-delay: 0.15s;
}
.loading span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes bounce {
0% {transform: translateY(0%);}
50% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
.form-control.focused {
z-index: 2;
}
.form-control__label {
display: block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
margin-bottom: 0.625rem;
}
.form-control__label::after {
content: " *";
color: #C11D1D;
}
.form-input:focus + .form-control__label,
.has_value .form-control__label,
.focused .form-control__label {
top: 0px;
left: 0px;
}
.form-control-button {
border: none;
padding: 0;
margin-top: auto;
z-index: inherit;
}
.form-select, 
.form-input {
background-color: transparent;
border: none;
outline: none;
width: 100%;
font-size: 1.125rem;
line-height: 1;
position: relative;
z-index: 1;
box-shadow: 0 0 0 1px #CCC;
border-radius: 0.25rem;
height: 46px;
padding: 0.875rem 0.75rem;
}
.focused .form-select, 
.focused .form-input {
box-shadow: 0 0 0 1px #CCC, 0 0 10px 0px #CCC;
}
.form-input {
color: #191A26;
}
input:is(:-webkit-autofill, :autofill) {
background-color: transparent !important;
color: #FFF !important;
}
.form-select {
background-image: url('data:image/svg+xml,<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L7.5 7.5L13 2" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>');
background-repeat: no-repeat;
background-position: calc(100% - 10px) center;
}
.form-options .form-option {
width: 100%;
padding: 0 10px;
line-height: 2;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
min-height: 28px;
}
.form-options .form-option.selected {
order: -1;
}
.form-options .form-option:hover,
.form-options .form-option.selected,
.form-options .form-option.focused {
color: #FFF;
background-color: var(--Black_titles, #191A26);
}
.focused .form-options {
display: flex;
flex-direction: column;
max-height: 224px;
top: 0px;
position: absolute;
left: 0px;
right: 0px;
background-color: #FFF;
color: var(--Black_titles, #191A26);
font-size: 14px;
overflow-y: auto;
box-shadow: 0 0 0 1px #FFF, 0 0 10px 0 #FFF;
border-radius: 0.25rem;
}
.form-submit {
border: none;
background-color: #00424A;
padding: 1rem 1.125rem;
color: #FFF;
width: 100%;
display: block;
font-size: 1rem;
line-height: 1;
font-weight: 600;
cursor: pointer;
box-shadow: inset 0 0 0 1px #21A4A3;
transition: background-color 0.18s ease-in-out, color 0.18s ease-in-out;
}
[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
.form-control__error {
color: #21A4A3;
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
display: none;
}
.invalid .form-control__error {
display: block;
}
.response {
display: none;
}
.sended .response {
position: absolute;
top: 50%;
left: 50%;
max-width: 90%;
padding: 1.25rem;
background-color: #FFF;
color: var(--Black_titles, #191A26);
transform: translate(-50%, -50%);
font-weight: 500;
border-radius: 0.25rem;
display: block;
}
.form-control.focused {
z-index: 2;
}
.form-control__label {
display: block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
margin-bottom: 0.625rem;
}
.form-control__label::after {
content: " *";
color: #C11D1D;
}
.form-input:focus + .form-control__label,
.has_value .form-control__label,
.focused .form-control__label {
top: 0px;
left: 0px;
}
.form-select, 
.form-input {
background-color: transparent;
border: none;
outline: none;
width: 100%;
font-size: 1.125rem;
line-height: 1;
position: relative;
z-index: 1;
box-shadow: 0 0 0 1px #CCC;
border-radius: 0.25rem;
height: 46px;
padding: 0.875rem 0.75rem;
}
.focused .form-select, 
.focused .form-input {
box-shadow: 0 0 0 1px #FFF, 0 0 10px 0px #FFF;
}
body:not(.post-type-archive-product) .page_content .container {
width: min(1320px, 100%);
}
.page_testimonals {
padding-top: 0;
padding-bottom: 0;
}
.page-shop-lid-form {
margin-bottom: 0;
}
.page_content {
padding-top: 0;
padding-bottom: 3.75rem;
}
.page_content h2 { } 
.page_content__wrapper h1 {
margin-bottom: 3rem !important;
}
.youtube-block iframe {
width: 100%;
min-height: 400px;
}
.youtube-block h2 {
margin-bottom: 1.75rem;
text-align: center;
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
}
.page_selection-divided__text ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
@media screen and ( max-width: 767px ) { 
label.form-control.callback-form__control {
flex: 0 0 100%;
}
}
@media screen and ( min-width: 992px ) { 
section:not(:first-of-type) {
margin-top: 6.25rem;
}
.page-selection__text-image .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.page-selection__text-image_button {
width: max-content;
padding-inline: 1.25rem;
}
.page_pokazateli__items {
width: 1096px;
max-width: 100%;
margin-inline: auto;
--bs-gutter-x: 5rem;
}
.page_selection-divided__text ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 2.5rem;
column-gap: 1.5rem;
list-style-type: none;
}
.page_selection-stages__title {
margin-bottom: 3rem;
}
.page_selection-stages__items {
grid-template-columns: repeat(4, 1fr);
row-gap: 4rem;
}
.page_selection-stages__item {
gap: 1rem;
}
.page_selection-stages__item-key {
flex: 0 0 55px;
}
.page_banner__slide__title {
font-size: 2rem !important;
}
.page-video-banner { margin-bottom: 4rem;
}
.page-video-banner .page_banner__slide__content, 
.page-video-banner .page_banner__slide__content > .row {
max-height: 600px !important;
}
.page-video-banner::after {
width: 50%;
}
.page-video-banner .page_banner__slide__content .row > div { }
.page_content {
padding-bottom: 6.25rem;
}
.youtube-block {
padding-top: 2.5rem;
}
.youtube-block iframe {
min-height: 600px;
}
}
@media screen and ( min-width: 1200px ) { 
.callback-form__title {
font-size: 2rem;
text-align: center;
margin-bottom: 3.75rem;
}
.callback-form__form {
width: 872px;
margin: 0 auto;
}
}
@media screen and ( min-width: 576px ) { 
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: center;
}
}