:root {
    --color_brand: #40E1D8;
    --color_brand_alt: #49FFF5;
    --color_white: #ffffff;
    --color_background: #000000;
    --color_grey: #D9D9D9;

    --color_accent: #E1407A;

    --basic_font: 'Inter';


    --basic_font_size: 18px;
    --basic_line_height: 22px;
    --large_font_size: 36px;
    --large_line_height: 44px;
    --header_font_size: 64px;
    --header_line_height: 77px;
    --title_font_size: 48px;
    --title_line_height: 58px;

    --basic_indent: 32px;
    --basic_padding: 32px;
    --content_width: 100%;    
    --hor_indent: 64px;
    --logo_height: 32px;


    --btn_height: 80px;
    --btn_arrow_size: 64px;

    --border_top_padding: 16px;
    --border_bottom_padding: 32px;

    --content_width: calc(100% - (2 * var(--hor_indent)));
    --header_indent: var(--hor_indent);
    --header_width: calc(100% - var(--hor_padding));
    --header_tag_width: 800px;
    --header_height: 80px;
    --header_padding: 0 0 var(--border_top_padding);

    --block_width: 600px;
    --welcome_offer_pos_width: calc((var(--block_width) - var(--welcome_offer_pos_padding) - var(--basic_indent))/2);
    --welcome_offer_pos_padding: 32px;
    --welcome_offer_pos_padding_basic: 32px;
    --welcome_arrow_width: 192px;
    --welcome_arrow_height: 160px;
    --welcome_height: 80vh;
    --sphere_radius: 256px;
    --sphere_margin: -128px;
    --sphere_products_pos: -80px;
    --sphere_about_radius: 320px;
    --sphere_about_pos: -160px;

    --tg_ico_size: 32px;
    --ig_ico_size: 32px;

    --block_margin: 128px;
    --block_inner_margin: 96px;

    --products_div_width: 64px;
    --products_div_line_width: 1px;
    --products_div_line_height: 100%;
    --products_div_box_width: 100%;
    --products_div_box_height: 60%;

    --feedback_width: calc(50% - var(--basic_indent));


    --vert_padding: 16px;
    --basic_transition: all 0.2s ease-in;
    --basic_border_radius: 32px;
    --med_padding: 48px;
    --min_padding: 16px;

    --min_border_radius: 16px;

    --width_calc: calc(100% - (2 * var(--hor_indent)));
    --vert_indent: 16px;
    --modal_width: 100%;
    --modal_height: 100vh;
    --hor_padding: var(--hor_indent);    

    --message_width: 320px;
    --message_width_max: 420px;
    --message_indent: 32px;
    --overlay_width: 640px;
    --overlay_width_max: var(--modal_width);
    --overlay_height: var(--modal_height);
    --overlay_height_max: var(--overlay_height);
    --overlay_header_height: calc(var(--large_line_height) + var(--overlay_indent) + var(--overlay_bar_padding));
    --overlay_bar_padding: 32px;
    --overlay_bar_height: var(--btn_height);
    --overlay_image_bar_height: var(--btn_med_height);
    --overlay_bar_wrap: nowrap;
    --overlay_indent: 32px;
    --overlay_margin: 0.01px;
    --overlay_content_height: calc(var(--overlay_height_max) - var(--overlay_header_height));
    --overlay_content_height_bar: calc(var(--overlay_content_height) - var(--overlay_bar_height));
    --overlay_image_height: calc(var(--overlay_content_height) - var(--overlay_bar_height) - (var(--overlay_bar_padding)));
    --overlay_bar_btn_width: auto;
    --overlay_bar_btn_margin: 0 var(--input_margin) 0 0;

    --btn_font_size: var(--basic_font_size);
    --input_height: var(--btn_height);
    --btn_med_height: 48px;
    --btn_arrow_width: 64px;
    --btn_padding: 32px 64px;
    --btn_padding_free: 0 64px;
    --btn_letter_spacing: 0.01px;
    --btn_pic_padding: 8px;
    --btn_cross_size: 32px;
    --input_margin: 32px;
    --form_row_indent: 32px;
    --input_num_width: 96px;
    --input_num_padding: 16px;
    --label_padding: 0 16px;
    --error_padding: 8px 16px;
    --btn_link_margin: 16px;
    --cbox_mark_size: 32px;

    --video_width: calc(100% - (2 * var(--hor_indent)));
    --video_margin: 0 0 0 var(--hor_indent);
    --video_height: calc((100vw / 8) * 3);

}

::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-thumb{
    background-color: #C4C4C4;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #C4C4C4;
}

::-webkit-scrollbar-track{
    border-width:0;
}

::-webkit-scrollbar-track:hover{
    border-left: solid 1px var(--color_grey);
}

html {
    font-size: var(--basic_font_size);
    background-color: var(--color_background);
}

.yt_embed {
    position: relative;
    display: block;
    width: 560px;
    height: 350px;
    margin: 0;
    background-color: #000000;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.yt_embed>svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    fill: #212121;
    opacity: 0.8;
    transition: all 0.1s ease-in;
}

.yt_embed:hover>svg {
    fill: #ff0000;
    opacity: 1;
    transition: all 0.1s ease-in;
}

.yt_embed>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 560px;
    height: 350px;
    margin: 0;
    z-index: 99;
    border-radius: var(--basic_border_radius);
}

input,
button {
    border-radius: 0;
}

textarea,
input,
button,
a {
    -webkit-appearance: none;
    outline: none;
}

input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

input::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    overflow-x: hidden;
}

body,
body * {
    margin: 0;
    font-family: var(--basic_font);
    font-style: normal;
    font-weight: 400;
}

h2 {
    font-size: var(--font_size_d);
    font-weight: 700;
    margin: 0;
    letter-spacing: var(--letter_spacing_a);
}

h3 {
    width: 100%;
    font-size: var(--header_font_size);
    margin: var(--header_font_margin);
    letter-spacing: var(--header_spacing);
    font-weight: 900;
    line-height: 1.2;
}

h5 {
    font-size: var(--sub_header_font_size);
    font-weight: 700;
    margin: 0;
    letter-spacing: var(--sub_header_spacing);
    line-height: var(--sub_header_height);
    color: var(--color_grey);
}

p,
pre,
b,
a,
i,
li,
label,
input,
button,
textarea {
    line-height: var(--basic_line_height);
    font-family: var(--basic_font);
    font-size: var(--basic_font_size);
    color: var(--color_white);
    font-weight: 300;
    -webkit-text-size-adjust: none;
}

pre {
    white-space: pre-wrap;
}

pre>* {
    margin: 0;
}

.tiny_text{
    font-size: var(--tiny_text_font_size);
}

a.tiny_text{
    margin: 0 0 8px;
}

a.tiny_text>u{
    font-size: var(--tiny_text_font_size);
}

b {
    font-size: 14pt;
    font-weight: 600;
}

i {
    font-style: normal;
}

li {
    margin: 0;
}

a {
    color: var(--color_black);
    text-decoration: none;
    margin: 0 0 16px;
}

a>u {
    color: var(--color_black);
    text-decoration: none;
    border-bottom: 1px var(--color_black) dotted;
    transition: all 0.2s ease-in;
    cursor: pointer;
}

a:hover>u {
    color: var(--color_brand);
    border-bottom: 1px var(--color_brand) solid;
    transition: all 0.2s ease-in;
}

.special_text {
    font-weight: 400;
    margin: var(--special_text_margin);
    color: var(--color_light_grey);
    font-size: var(--special_text_font_size);
    letter-spacing: var(--special_text_spacing);
    transform-origin: left top;
    -webkit-user-select: none;
    -moz-user-select: none;
}


.logo{
    margin: var(--header_indent) 0 var(--border_bottom_padding) var(--header_indent);
    width: var(--header_width);
    padding: var(--header_padding);
    border-bottom: 1px solid var(--color_white);
    box-sizing: border-box;
    z-index: 80;
    transition: var(--basic_transition);
}

.logo>a>svg{
    height: var(--logo_height);
    transition: var(--basic_transition);
}

.welcome{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: var(--header_width);
    margin: 0 0 0 var(--hor_padding);
    position: relative;
    min-height: var(--welcome_height);
}

.welcome>h3{
    color: var(--color_white);
    font-size: var(--header_font_size);
    line-height: var(--header_line_height);
    font-weight: 500;
    width: var(--header_tag_width);
}

.welcome_graphics,
.results_graphics{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.welcome_graphics>div:first-child,
.results_graphics>div:last-child{
    width: var(--sphere_radius);
    height: var(--sphere_radius);
    border-radius: var(--sphere_radius);
    background-color: var(--color_accent);
    filter: blur(64px);
    margin-left: var(--sphere_margin);
    z-index: -5;
}

.results_graphics>div:last-child{
    background-color: var(--color_brand);
}

.welcome_graphics>div:last-child,
.results_graphics>div:first-child{
    width: var(--sphere_radius);
    height: var(--sphere_radius);
    border-radius: var(--sphere_radius);
    border: 2px solid var(--color_white);
    margin-left: var(--sphere_margin);
}



.welcome_content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    z-index: 25;
}

.welcome_arrow{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.welcome_arrow>svg{
    height: var(--welcome_arrow_height);
}

.welcome_arrow>p{
    width: var(--welcome_arrow_width);
    margin-left: var(--basic_indent);
}

.welcome_offer>p:first-child{
    font-size: var(--large_font_size);
    line-height: var(--large_line_height);
    padding: 0 var(--hor_indent) var(--border_top_padding) 0;
    width: var(--block_width);
    font-weight: 600;
    border-bottom: 1px solid var(--color_white);
    margin-bottom: var(--border_bottom_padding); 
}

.welcome_offer>p:first-child>span{
    font-weight: 600;
    color: var(--color_accent);
}

.welcome_offer>div:nth-child(2){
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.welcome_offer_pos{
    position: relative;
    width: var(--welcome_offer_pos_width);
    padding: var(--welcome_offer_pos_padding_basic) var(--welcome_offer_pos_padding_basic) var(--welcome_offer_pos_padding_basic) calc(var(--welcome_offer_pos_padding_basic) + var(--welcome_offer_pos_padding));
    border: 1px solid var(--color_white);
    border-radius: 4px;
    box-sizing: border-box;
    min-height: calc((2 * var(--welcome_offer_pos_padding)) + (2 * var(--welcome_offer_pos_padding_basic)));
}

.welcome_offer_pos>p:first-child{
    width: calc(2 * var(--welcome_offer_pos_padding));
    height: calc(2 * var(--welcome_offer_pos_padding));
    border-radius: var(--welcome_offer_pos_padding);
    background-color: var(--color_white);
    text-align: center;
    line-height: calc(2 * var(--welcome_offer_pos_padding));
    color: var(--color_background);
    font-weight: 500;
    font-size: var(--large_font_size);
    flex-shrink: 0;
    position: absolute;
    top: var(--welcome_offer_pos_padding_basic);
    left: calc(0px - var(--welcome_offer_pos_padding));
}

.welcome_offer_pos:first-child{
    margin-right: calc(var(--basic_indent) + var(--welcome_offer_pos_padding)); 
}

.welcome_offer>p:nth-child(3){
    padding: 0 var(--hor_indent) var(--border_top_padding) 0;
    width: var(--block_width);
    border-bottom: 1px solid var(--color_white);
    margin: var(--basic_indent) 0 var(--border_bottom_padding); 
}

.welcome_offer>.btn_tg{
    width: var(--block_width) !important;
}

.video_block{
    width: 100%;
    padding: 0 var(--hor_indent);
    margin: var(--block_margin) 0;
}

.btn_tg{
    width: 100%;
    height: var(--btn_height);
    color: var(--color_background);
    font-weight: 500;
    border: 0;
    border-radius: 4px;
    background-color: var(--color_brand);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btn_tg>svg{
    width: var(--tg_ico_size);
    margin-right: var(--basic_indent);
}

.btn_tg:hover{
    background-color: var(--color_brand_alt);
}

.products_block{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin: var(--block_margin) 0;
}

.products_div{
    position: relative;
    width: var(--products_div_width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.products_div>div:first-child{
    width: var(--products_div_line_width);
    height: var(--products_div_line_height);
    background-color: var(--color_white);
    z-index: 25;
}

.products_div>div:last-child{
    position: absolute;
    width: var(--products_div_box_width);
    height: var(--products_div_box_height);
    border-radius: var(--products_div_width);
    border: solid 2px var(--color_white);
    z-index: 20;
}

.product_wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: var(--block_width);
    position: relative;
}

.product_wrap>div:first-child{
    position: absolute;
    width: var(--sphere_radius);
    height: var(--sphere_radius);
    border-radius: var(--sphere_radius);
    background-color: var(--color_accent);
    filter: blur(64px);
    z-index: 20;
    left: var(--sphere_products_pos);
    top: var(--sphere_products_pos);
}

.product_wrap>div:not(:first-child){
    z-index: 25;
}

.product_wrap>div:nth-child(2)>p:first-child{
    font-size: var(--large_font_size);
    line-height: var(--large_line_height);
    font-weight: 500;
    margin-bottom: var(--basic_indent);    
}

.product_wrap>div:nth-child(2)>p:nth-child(2){
    color: var(--color_grey);
    margin-bottom: var(--basic_indent);  
}

.product_wrap>div:nth-child(2)>div{
    margin-bottom:var(--basic_indent);    
}

.product_wrap>div:nth-child(2)>div>p:first-child{
    font-weight: 500;
    margin-bottom: calc(var(--basic_indent) / 2);    
}

.product_wrap>div:nth-child(2)>div>p:not(:first-child){
    color: var(--color_grey);
    margin-bottom: calc(var(--basic_indent) / 2);
    padding-left: var(--basic_indent);
    box-sizing: border-box;
}

.product_wrap>div:nth-child(3){
    width: 100%;
}

.product_wrap>div:nth-child(3)>p:first-child{
    font-size: var(--title_font_size);
    line-height: var(--title_line_height);
    font-weight: bold;
    margin-bottom: var(--border_top_padding);
    padding-bottom: var(--border_top_padding);
    border-bottom: 1px solid var(--color_white);
}

.product_wrap>div:nth-child(3)>button{
    width: calc(100% - var(--hor_indent));
    margin-top: calc(var(--basic_indent) * 2);
}

.product_wrap:first-child>div:nth-child(2){
    margin-bottom: calc(var(--basic_indent) * 2);
    padding-left: var(--hor_indent);
}

.product_wrap:first-child>div:nth-child(3)>p{
    padding-left: var(--hor_indent);
}

.product_wrap:first-child>div:nth-child(3)>button{
    margin-left: var(--hor_indent);
}

.product_wrap:last-child>div:nth-child(2){
    margin-bottom: calc(var(--basic_indent) * 2);
    padding-right: var(--hor_indent);
    box-sizing:border-box;
}

.product_wrap:last-child>div:nth-child(3)>p{
    padding-right: var(--hor_indent);
}

.product_wrap:last-child>div:nth-child(3)>button{
    margin-right: var(--hor_indent);
}

.product_wrap:last-child>div:first-child{
    background-color: var(--color_brand);
}

.video{
    width: var(--video_width);
    height: var(--video_height);
    border-radius: 4px;
}

.video>iframe{
    width: 100%;
    height: 100%;
}

.feedback_block{
    width: 100%;
    padding: 0 var(--hor_indent);
    box-sizing: border-box;
    margin-bottom: calc(var(--basic_indent) * 2);
}

.feedback_block>p:first-child{
    font-size: var(--large_font_size);
    line-height: var(--large_line_height);
    font-weight: 500;
    margin-bottom: calc(var(--basic_indent) * 2);
}

.feedback_pages{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
}

.feedback{
    width: var(--feedback_width);
    border-radius: 4px;
    background-color: var(--color_white);
    padding: var(--basic_indent);
    box-sizing: border-box;
}

.feedback>pre{
    color: var(--color_background);
}

.feedback>p{
    color: var(--color_background);
    font-weight: 400;
    padding-top: var(--border_top_padding);
    margin-top: var(--border_bottom_padding);
    border-top: 1px solid var(--color_background);
}

.feedback_more{
    width: 100%;
    margin-top: var(--basic_indent);
}

.feedback_more>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

.feedback_more>div>p{
    width: var(--feedback_pages_width);
    margin: var(--basic_padding) 0;
    text-align: center;
}

.about_block,
.results_block{
    width: 100%;
    padding: 0 var(--hor_indent);
    box-sizing: border-box;
    margin: var(--block_margin) 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.about_block>img{
    width: var(--block_width);
    margin-right: calc(var(--basic_indent) * 2);
    z-index: 25;
}

.about_block>div{
    position: relative;

}

.about_block>div>div:last-child{
    position: absolute;
    width: var(--sphere_about_radius);
    height: var(--sphere_about_radius);
    border-radius: var(--sphere_about_radius);
    background-color: var(--color_accent);
    filter: blur(64px);
    z-index: -5;
    left: var(--sphere_about_pos);
    top: var(--sphere_about_pos);
}

.about_block>div>p:nth-child(1){
    font-size: var(--large_font_size);
    line-height: var(--large_line_height);
    font-weight: 500;
    margin-bottom: var(--basic_indent);
    width: var(--block_width);
    z-index: 20;
}

.about_block>div>p:nth-child(2){
    color: var(--color_grey);
    width: var(--block_width);
    margin-bottom: var(--basic_indent);
    z-index: 20;
}


.inst>svg{
    width: var(--ig_ico_size);
}

.inst>svg>path{
    transition: var(--basic_transition);
}

.inst:hover>svg>path{
    fill: var(--color_brand);
}

.results_block{
    position: relative;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 0;
}

.results_block>div:first-child,
.results_block>div:last-child{
    width: var(--block_width);
    z-index: 25;
}

.results_block>div:last-child{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.results_block>div:first-child>p:first-child,
.results_block>div:last-child>div>p:first-child{
    font-size: var(--large_font_size);
    line-height: var(--large_line_height);
    font-weight: 500;
    margin-bottom: var(--basic_indent);
    width: 100%;
}

.results_block>div:first-child>p:not(:first-child),
.results_block>div:last-child>div>p:not(:first-child){
    color: var(--color_grey);
    width: 100%;
    margin-bottom: var(--basic_indent);
    z-index: 20;
}

input,
textarea,
select {
    display: block;
    width: 100%;
    height: var(--input_height);
    padding: 0 var(--basic_indent);
    box-sizing: border-box;
    border-radius: 0;
    border: 0;
    color: var(--color_black);
    border: 1px solid var(--color_black);
    border-radius: var(--min_border_radius);
}

select{
    font-size: var(--basic_font_size);
}

input:focus,
textarea:focus,
select:focus {
    border: 2px solid var(--color_black);
}

.input_wrap{    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: var(--tiny_line_height) 0 var(--input_margin);
}

.input_wrap>.labeled{
    position: relative;
    width: 100%;
}

.input_wrap>.labeled>label:not(.checkbox){
    position: absolute;
    top: calc(0px - (var(--tiny_line_height) / 2));
    left: var(--min_border_radius);
    display: block;
    background-color: var(--color_background);
    color: var(--color_black);
    padding: var(--label_padding);
    box-sizing: border-box;
    font-size: var(--tiny_font_size);
    line-height: var(--tiny_line_height);

}

textarea {
    height: auto;
    min-height: 192px;
    resize: vertical;
    padding: var(--basic_indent);
}

.txt_short {
    min-height: 48px;
}

input[type="time"] {
    cursor: pointer;
}

.btn_basic,
.btn_target,
.btn_inv,
.btn_arrow { 
    height: var(--btn_height);
    margin: 0;
    padding: 0 var(--basic_indent);
    border: 1px solid var(--color_background);
    box-sizing: border-box;
    background-color: transparent;
    font-weight: 500;
    font-size: var(--btn_font_size);
    color: var(--color_black);
    cursor: pointer;
    transition: var(--basic_transition);
    text-align: center;
    border-radius: 4px;
}

.btn_target {
    border: 0;
    background-color: var(--color_brand);
    color: var(--color_background);
}

.btn_inv{
    border: 2px solid var(--color_background);
    color: var(--color_background);
}

.btn_basic:hover {
    background-color: var(--color_background);
    color: var(--color_white);
}

.btn_inv:hover {
    background-color: var(--color_background);
    color: var(--color_black);
}

.btn_target:hover {
    background-color: var(--color_brand_alt);
}

.btn_arrow{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    width: var(--btn_arrow_size);
    height: var(--btn_arrow_size);
    border-radius: var(--btn_arrow_size);
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--color_white);
}

.btn_arrow>svg{
    width: 50%;
    height: 50%;    
}

.btn_arrow.prev>svg{
    transform: rotate(180deg);
}

.btn_arrow:hover{
    background-color: var(--color_white);
}

.btn_arrow:hover>svg>path{
    fill: var(--color_background);
}


.btn_link{
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    margin: 0 0 var(--btn_link_margin);
    cursor: pointer;
    transition: var(--basic_transition);
    border-bottom: 1px dotted var(--color_black);
    padding: 0;
    text-align: left;
}

.btn_link:hover{
    font-weight: 500;
    border-bottom: 1px solid var(--color_black);
}


.btn_radio {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0 0 24px;
}

.btn_radio>button {
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 0 32px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #25335C;
    border-right: 0;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.btn_radio>button:first-child {
    border-radius: 2px 0 0 2px;
}

.btn_radio>button:last-child {
    border-radius: 0 2px 2px 0;
    border-right: 1px solid #25335C;
}

.btn_radio>.btn_radio_active {
    background-color: #25335C;
    color: #ffffff;
}

.btn_cross {
    position: relative;
    width: var(--btn_cross_size);
    height: var(--btn_cross_size);
    min-height: 24px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease-in;
    background-color: transparent;
    border: var(--border_width) solid var(--color_black);
    border-radius: var(--basic_border_radius);
}

.btn_cross>div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 70%;
    height: var(--border_width);
    background-color: var(--color_black);
    transform: rotateZ(-45deg);    
}

.btn_cross>div:last-child {
    transform: rotateZ(45deg);
}

.btn_cross:hover>div {
    width: 60%;
}
.overlay>.btn_cross{
    position: absolute;
    top: 32px;
    right: 32px;
}

.input_num {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: var(--ipt_wt);
    height: var(--ipt_ht);
    margin: var(--ipt_mg);
}

.input_num>div {
    width: 28px;
}

.input_num>div>button {
    width: 28px;
    height: 28px;
    padding: 0;
    text-align: center;
    font-size: var(--font_size_b);
    line-height: 28px;
    background-color: var(--color_a);
    color: var(--color_g);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.input_num>div>button:hover {
    background-color: var(--color_c);
}

.input_num>input {
    width: calc(var(--ipt_wt) - 28px);
    margin: 0;
    border-radius: 0;
    border-right: 0;
}

.input_password {
    position: relative;
    height: var(--ipt_ht);
    margin: var(--ipt_mg);
}

.password_switch {
    position: absolute;
    top: 0;
    right: 8px;
    width: 24px;
    height: 24px;
    margin: 16px 0;
    border: 2px solid var(--color_a);
    border-radius: 16px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease-in;
}

.password_shown,
.password_switch:hover {
    background-color: var(--color_a);
    transition: all 0.2s ease-in;
}

.password_shown:hover {
    background-color: transparent;
}

.checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: calc(var(--basic_padding) / 2) var(--basic_padding);
    border: 1px solid var(--color_grey);
    box-sizing: border-box;
    border-radius: var(--min_border_radius);
    cursor: pointer;
    transition: var(--basic_transition);
}

.checkbox:hover{
    border: 1px solid var(--color_black);
}

.checkbox_mark {
    position: relative;
    display: inline-block;
    width: var(--cbox_mark_size);
    height: var(--cbox_mark_size);
    margin: 0 var(--basic_indent) 0 0;
    border: 1px solid var(--color_black);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 24px;
}

.checkbox_label {
    display: inline-block;
    margin: 0;
    color: var(--color_black);
    text-align: left;
    cursor: pointer;
    font-size: var(--med_font_size);
    line-height: var(--med_line_height);
}

.checkbox_input:checked+.checkbox_mark:before {
    content: "";
    position: absolute;
    display: block;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 16px;
    background-color: var(--color_brand);
    cursor: pointer;
}

.error_bar {    
    margin-bottom: var(--tiny_line_height);
    padding: var(--error_padding);
    background-color: var(--accent_color);
    color: var(--color_background);
    box-sizing: border-box;
    font-size: var(--tiny_font_size);
    line-height: var(--tiny_line_height);
    border-radius: var(--min_border_radius);
}

.btn_more {
    margin: var(--input_margin) 0;
    width: 100%;
}

.btn_more>button {
    width: 100%;
}

.btn_switch {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    margin: var(--btn_switch_margin);
    -webkit-user-select: none;
    -moz-user-select: none;
    flex-wrap: wrap;
}

.btn_switch>p {
    font-size: var(--btn_switch_font_size);
    padding: var(--btn_switch_padding);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    color: var(--color_light_grey);
    white-space: nowrap;
}

.btn_switch>p:not(.btn_switch_active):hover {
    font-weight: 500;
    color: var(--color_black);
    border-bottom: 2px solid var(--color_black);
}

p.btn_switch_active {
    font-weight: 500;
    color: var(--color_brand);
    border-bottom: 2px solid var(--color_brand);
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--color_grey);
    margin: 32px 0;
    flex-shrink: 0;
}

form{
    width: 100%;
}

form>input,
form>p{
    margin: 0 0 16px;
}

form>label{
    color: var(--color_light_grey);
}

form>label>span{
    color: var(--color_brand);
}

form>*:last-child{
    margin: 0;
}


.cookies_alert,
.alert_wrap,
.loader,
.modal_wrap{
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    background-color: transparent;
    box-sizing: border-box;
    z-index: 95;
}

.cookies_alert{
    z-index: 99;
}

.menu_fader,
.loader_fader,
.modal_fader{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height:  var(--modal_height);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 95;
}

.menu_fader{
    z-index: 89;
}

.modal_wrap>[name="modal"]{
    z-index: 95;
}

.modal_fader{
    width: 100vw;
}

.alert_wrap{
    z-index: 98;
}

.loader_fader{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.alert {
    position: fixed;
    bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;    
    max-width: var(--overlay_max);
    padding: var(--basic_indent);
    margin: 0 auto;
    box-sizing: border-box;
    background-color: var(--color_white);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease-in;
    border-radius: 4px;
}

.alert>p {
    margin: 0 32px 0 0;
    color: var(--color_background);
}

.alert>button {
    height: var(--btn_med_height);
}

.alert[name="close_pop_up"] {
    cursor: pointer;
}

.alert[name="close_modal"]:hover {
    bottom: -16px;
}

.message {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: var(--message_width);
    max-width: var(--message_width_max);
    height: auto;
    padding: var(--message_indent);
    background-color: var(--color_background);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 99;
    -webkit-overflow-scrolling:touch;
    border-radius: var(--basic_border_radius);
}

.message>div:first-child,
.message>div:last-child,
.overlay>div:first-child,
.image_overlay>div:first-child{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 var(--overlay_bar_padding);
}

.message .btn_cross,
.message .btn_cross,
.overlay .btn_cross,
.image_overlay>div:first-child{
    flex-shrink: 0;
}

.message>div:last-child {
    margin: var(--input_margin) 0 0;
}

.message>div:last-child>button:not(:first-child){
    margin: 0 0 0 auto;
}

.message>div:last-child>button:first-child:last-child{
    width: 100%;
}

.overlay,
.image_overlay{    
    position: fixed;
    width: var(--overlay_width);
    max-width: var(--overlay_width_max);
    height: auto;
    max-height: var(--overlay_height_max);
    padding: var(--overlay_indent);
    margin: var(--overlay_margin) auto;
    box-sizing: border-box;
    background-color: var(--color_background);
    transition: all 0.2s ease-in;    
    border-radius: var(--basic_border_radius);
}

.overlay.wide{
    width: var(--overlay_width_max);  
}

.overlay>div:first-child p{
    margin: 0;
}

.overlay>div:nth-child(2){
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-height: var(--overlay_content_height_bar);
    padding: 0;
    box-sizing: border-box;
    overflow-y: hidden;
}

.overlay>div:nth-child(2)>button{
    align-self: flex-end
}

.heading_icon{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-shrink: 1;
    margin: 0 var(--basic_indent) 0 0;
}

.heading_icon>svg{
    width: var(--btn_cross_size);
    height: var(--btn_cross_size);
}

.heading_icon>p{
    font-size: var(--basic_font_size);
    line-height: var(--basic_line_height);
    letter-spacing: 0.05em;}


.heading_icon>*:nth-child(2){
    margin: 0 0 0 16px;
}

.overlay_intro{
    margin: 0 0 32px;
}

.overlay_bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: var(--overlay_bar_wrap);
    margin: var(--overlay_bar_padding) 0 0;
}

.overlay_bar.order>button{
    width: 100%;
}

.image_overlay{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0;
}

.image_overlay>div:first-child{
    padding: var(--overlay_indent) var(--overlay_indent) 0;
    box-sizing: border-box;
}

.image_overlay>div:last-child{
    padding: 0 var(--overlay_indent) var(--overlay_indent);
    justify-content: space-between;
    box-sizing: border-box;
}

.image_overlay>img{
    object-fit: cover;
    object-position: center;
    font-family: 'object-fit: cover; object-position: center;';
    max-height: var(--overlay_content_height);
    width: var(--overlay_width_max);
    cursor: zoom-in;
    border-radius: var(--basic_border_radius);
}
.image_overlay.multiply>img{    
    max-height: var(--overlay_image_height);
}

.image_overlay>.overlay_bar>.btn_arrow{
    height: var(--btn_med_height);
}

.modal_scroll{
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
    padding: 0 8px 0 0;
    box-sizing: border-box;
}

img[name="show_image"]{
    cursor: zoom-in;
    transition: var(--basic_transition);
}

[name="show_image"]:hover{
    opacity: 0.9;
}

.input_file{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: var(--btn_height);
    width: 100%;
    border: 1px dashed var(--color_black);
    background-color: transparent !important; 
    border-radius: var(--min_border_radius);
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--basic_transition);
}

.input_file:hover{
    border: 1px solid var(--color_black);  
}

.input_file>p{
    text-align: center;
}

.input_file.dragstart{
    border: 1px dashed var(--color_black);
}

.input_file>input{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.input_file>input::-webkit-file-upload-button {
    cursor: pointer; 
}

.progress_bar{
    background-color: var(--color_grey);
    border: 0;
    height: 12px;
    width: 100%;
    margin: 0 0 16px;
    border-radius: 32px;
}

.progress_bar::-webkit-progress-bar{
    background-color: var(--color_grey);
    border-radius: 32px;
}

.progress_bar::-webkit-progress-value{
    background-color: var(--color_brand);
    border-radius: 32px;
}

.progress_bar::-moz-progress-bar{
    background-color: var(--color_brand);
    border-radius: 32px;
}

.uploaded_photo{
    position: relative;
    width: var(--uploaded_photo_size);
    height: var(--uploaded_photo_size);
    margin: 0 16px 16px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: var(--basic_border_radius);
}

.uploaded_photo>.btn_cross{
    width: var(--btn_cross_size);
    height: var(--btn_cross_size);
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color_background);
    flex-shrink: 0;
    border: 0;
}

.uploaded_doc{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.uploaded_doc>p{
    margin-left: var(--basic_indent);
}

.files_wrap{
    margin: 0 0 var(--input_margin);
}


@media all and (max-width: 1720px) {

    :root{
        --hor_indent: 48px;
        --block_width: 512px;
        --header_tag_width: 720px;
        --products_div_width: 48px;

    }

}

@media all and (max-width: 1540px) {

    :root {
        --basic_font_size: 16px;
        --basic_line_height: 19px;
        --large_font_size: 32px;
        --large_line_height: 39px;
        --header_font_size: 60px;
        --header_line_height: 73px;
        --title_font_size: 42px;
        --title_line_height: 51px;

        --logo_height: 24px;
        --welcome_arrow_height: 128px;        

        --hor_indent: 32px;
        --block_width: 480px;
        --block_margin: 96px;
        --header_tag_width: 640px;

        --sphere_radius: 192px;
        --sphere_margin: -96px;
        --sphere_about_radius: 256px;
        --sphere_about_pos: -128px;
        --products_div_width: 32px;
    }

}

@media all and (max-width: 1320px) {

    :root {
        --basic_font_size: 14px;
        --basic_line_height: 17px;
        --large_font_size: 24px;
        --large_line_height: 29px;
        --header_font_size: 48px;
        --header_line_height: 58px;
        --title_font_size: 36px;
        --title_line_height: 44px;

        --logo_height: 16px;
        --welcome_arrow_height: 96px;

        --border_top_padding: 12px;
        --border_bottom_padding: 24px;

        --basic_indent: 24px;
        --basic_padding: 24px;

        --hor_indent: 24px;
        --block_width: 420px;
        --block_margin: 64px;
        --header_tag_width: 512px;

        --sphere_radius: 160px;
        --sphere_margin: -80px;
        --sphere_about_radius: 192px;
        --sphere_about_pos: -96px;

        --products_div_width: 24px;
        --welcome_offer_pos_padding_basic: 16px;
        --welcome_offer_pos_padding: 24px;

        --btn_height: 64px;
        --btn_arrow_size: 48px;
        --tg_ico_size: 24px;

    }

}

@media all and (max-width: 1140px) {
    :root{
        --header_tag_width: 80%;
        --block_width: 512px;       
    }

    .welcome,
    .results_block{
        flex-direction: column;
    }

    .welcome>h3,
    .results_block>div:first-child{
        margin-bottom: calc(2 * var(--basic_indent));
    }

    .welcome_content,
    .results_block>div:last-child{
        margin-top: calc(2 * var(--basic_indent));
    }

    .welcome_graphics, .results_graphics {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .product_wrap{
        width: 42%;
    }

    .product_wrap{
        width: 42%;
    }

    .about_block>img,
    .about_block>div{
        width: 42%;
    }

    .about_block>div>p{
        width: 100% !important;
    }

}

@media all and (max-width: 1001px) {

    :root {
        --header_tag_width: 90%;
        --welcome_arrow_width: 96px;

        --video_height: calc((100vw / 6) * 3);
    }


}

@media all and (max-width: 760px) {

    :root{
        --welcome_arrow_width: 50%;
    }

    .welcome_content{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .welcome_offer{
        margin: 0 0 calc(2 * var(--basic_indent)) auto;
    }

    .welcome_arrow{
        align-self: center;
    }

}

@media all and (max-width: 660px) {

    :root {
        --block_width: calc(100% - var(--hor_indent));
        --products_div_width: 100%;
        --products_div_line_width: calc(var(--block_width) - var(--hor_indent));
        --products_div_line_height: 1px;
        --products_div_box_width: 60%;
        --products_div_box_height: 16px;

        --feedback_width: 100%;
    }

    .products_block,
    .feedback_pages{
        flex-direction: column;
    }

    .product_wrap{
        width: var(--block_width);
    }

    .product_wrap:first-child{
        margin-bottom: calc(3 * var(--basic_indent));
    }

    .product_wrap:last-child{
        margin-top: calc(3 * var(--basic_indent));
    }

    .product_wrap>div:nth-child(3)>button{
        margin-top: var(--basic_indent);
    }



    .products_div>div:last-child {
        border-radius: 16px;
    }

    .product_wrap:last-child>div:nth-child(2),
    .product_wrap:last-child>div:nth-child(3)>p{
        padding-right: 0;
        padding-left: var(--hor_indent);
    }

    .product_wrap:last-child>div:nth-child(3)>button {
        margin-right: 0;
        margin-left: var(--hor_indent);
    }

    .feedback:first-child{
        margin-bottom: var(--basic_indent);
    }
}

@media all and (max-width: 512px) {
    :root {
        --basic_font_size: 13px;
        --basic_line_height: 16px;
        --large_font_size: 24px;
        --large_line_height: 29px;
        --header_font_size: 36px;
        --header_line_height: 44px;
        --title_font_size: 32px;
        --title_line_height: 39px;
        
        --block_margin: 48px;

        --hor_indent: 8px;
        --welcome_offer_pos_padding_basic: 12px;

        --basic_indent: 16px;
    }

    .welcome_offer>div:nth-child(2){
        margin-left: calc(var(--welcome_offer_pos_padding) - var(--hor_indent));
    }

    .logo{
        margin-top: var(--basic_indent);
    }

    .about_block{
        flex-direction: column;        
    }

    .about_block>img,
    .about_block>div {
        width: 100%;
    }
    
    .about_block>img{
        margin-right: 0;
        margin-bottom: calc(2 * var(--basic_indent));
    }
}

@media all and (max-width: 380px) {
    :root{
        --header_font_size: 32px;
        --header_line_height: 39px;
        --title_font_size: 20px;
        --title_line_height: 24px;
        
        
        --sphere_radius: 128px;
        --welcome_offer_pos_padding: 16px;
        --welcome_offer_pos_padding_basic: 8px;
    }
    
    .welcome_offer_pos>p:first-child{
        font-size: 18px;
    }
}

* [hidden] {
    display: none;
}