@import url("reset.css");
@import url("variables.css");
@import url("fonts.css");

/*----------------------body-----------------*/
header, nav, section, article, aside, footer {
    display: block
}

html {
    /*height: 100%*/
}

body {
    font: 500 20px/26px 'Font-Base', Arial, Helvetica, sans-serif;
    color: var(--color-p);
    /*height: 100%;*/
    letter-spacing: -0.03em;
    -webkit-text-size-adjust: none;
    /*background: var(--color-bg-body) url(../images/main-bg.png);*/
    background: var(--color-bg-body);

    p {
        color: var(--color-p);
    }
}

body.scroll {
    /*overflow-y: hidden;*/
}

.main {
    min-height: 100%;
    margin: 0 auto;
    width: 100%;
    /*overflow: hidden;*/
    position: relative;
}

.container {
    max-width: 1440px;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
}

.hidden, input[type="text"].hidden {
    display: none !important;
}

.cnt {
    text-align: center;
}

.clear {
    clear: both;
}

a, img {
    outline: none;
}

a:focus {
    outline: none;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {

    text-decoration: none;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

* {
    box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Font-Secondary, Arial, Helvetica, sans-serif;
    background: var(--gradient-headers);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--font-shadow);
    letter-spacing: var(--font-secondary-letter-spacing);
}

/*----------------------------header----------------------*/
.header {
    background: var(--color-bg-header-footer);
    border-bottom: solid 2px var(--color-accent-2);
    color: var(--color-white);
    position: relative;
    z-index: 100;
}

.header_top {
    /*border-bottom: 1px solid rgba(255, 255, 255, .2);*/
    height: 86px;
    
}

.lang {
    position: relative;
    font: 500 24px/24px 'Font-Base', Arial, Helvetica, sans-serif;
    padding: 5px 0;
}

.lang span {
    padding-right: 12px;
}

.lang_open {
    position: absolute;
    top: 100%;
    background: var(--color-bg-header-footer);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-white);
    left: -11px;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: all 0.2s linear;
}

.lang:hover .lang_open {
    transform: rotateX(0deg);
}

.lang_open a {
    display: block;
    margin: 5px 0;
}

.div_box {
    position: relative;
    animation: wiggle 4.5s infinite;
    transition: ease-in-out;
    transition-duration: 300ms;

    &:hover {
        opacity: 0.7;
    }
}

@keyframes wiggle {
    10%, 20%, 30%, 40%, 50% {
        transform: rotate(0)
    }

    15% {
        transform: rotate(-15deg)
    }

    25% {
        transform: rotate(-10deg)
    }

    35% {
        transform: rotate(-5deg)
    }

    45% {
        transform: rotate(-2deg)
    }
}

.div_box > span {
    display: block;
    position: absolute;
    bottom: 0;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.div_box > span span {
    background: var(--color-dark);
    border: 1px solid var(--color-white);
    color: var(--color-white);
    display: block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font: bold 10px/12px 'Font-Base', Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 1px;
}

/*------------------------nav---------------------------*/
.nav {
    z-index: 10;
}

.nav ul {

}

.nav ul li {
    padding: 0px 0px 0px 37px;
    position: relative;
}

.nav ul li:first-child {
    padding: 0;
}

.nav ul li a {
    position: relative;
    display: block;
    color: var(--color-nav-menu-text);
    font: 500 24px/24px 'Font-Base', Arial, Helvetica, sans-serif;
    transition: all 0.2s linear;
    white-space: nowrap;
    padding-left: 26px;

}

.nav ul li a:before {
    position: absolute;
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    background: var(--color-elements);
    opacity: 0.2;
    top: 3px;
    left: 0;
    transition: all 0.2s linear;
    border-radius: 50%;
}

.nav ul li a:hover:before, .nav ul li.active a:before {
    background: var(--color-elements);
    opacity: 1;
}

.nav_open {
    cursor: pointer;
    transition: all 0.3s linear;
    z-index: 100;
    text-transform: uppercase;
    display: none;
}

.nav_open span {
    background: var(--color-white);
    height: 4px;
    width: 40px;
    margin-top: 7px;
    display: block;
    transition: all 0.2s linear;
}

.nav_open span:first-child {
    margin-top: 0;
}

.nav_open.active span {
    transform: rotate(45deg);
    margin-top: 0px;
}

.nav_open.active span + span {
    transform: rotate(0deg);
    margin-top: 0px;
    visibility: hidden;
}

.nav_open.active span + span + span {
    transform: rotate(-45deg);
    margin-top: -7px;
    visibility: visible;
}

.nav .btn {
    /*position: absolute;*/
    /*top: 20px;*/
    /*right: 24px;*/

}

/*------------------------------button-------------------------*/
.btn {
    height: 52px;
    width: 213px;
    display: block;
    transition: all 0.2s linear;
    cursor: pointer;
    box-sizing: border-box;
    /*border-radius: 8px;*/
    font: 900 24px/22px Font-Base, sans-serif;
    text-shadow: 0 2px var(--color-font-shadow);
    padding: 15px 0;
    text-align: center;
    color: var(--color-button-text);
    background: var(--green-gradient);
    text-transform: uppercase;
    /*border: 1px solid var(--color-dark);*/
    clip-path: var(--clip-for-corners);
}

.btn:hover {
    background: var(--color-bg-header-footer);
    color: var(--color-accent);
}

.border {
    width: fit-content;
    clip-path: var(--clip-for-corners);
    background: var(--color-dark);
    border: 1px solid var(--color-dark);
}

/*-------------------------home-----------------------*/
.section_top {
    padding: 40px 0 59px;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-header-footer) url(../images/bg.avif) center center;
    background-size: cover;
    color: var(--color-white);

    @media (max-width: 767px) {
        background: var(--color-bg-header-footer);
    }

}

.top_title {
    max-width: 675px;
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
    filter: drop-shadow(0 1px 0 var(--color-font-shadow));
}

.top_title h1 {
    font-weight: bold;
    font-size: 42px;
    line-height: 50px;
    margin-bottom: 23px;
    text-transform: uppercase;
    background: var(--gradient-headers-title-fixed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--font-shadow);
}

.top_title p {
    color: var(--color-white);
}

.top_title h1 span {
    color: var(--color-button-text);
}

.top_title h6 {
    font: bold 32px/36px 'Font-Secondary', Arial, Helvetica, sans-serif;
    margin: 50px 0 40px;
    text-transform: uppercase;
    background: var(--gradient-headers-title-fixed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--font-shadow);
}

h2 {
    font: bold 64px/64px 'Font-Secondary', Arial, Helvetica, sans-serif;
    margin: 0px 0 30px;
    text-transform: uppercase;
}

.faq {
    padding-bottom: 100px;
}

.faq_item {
    background: color-mix(in srgb, var(--color-banner-bg) 70%, transparent);
    margin-bottom: 9px;
    border-radius: 20px;
    padding: 22px 25px;
    transition: all 0.2s linear;
    color: var(--color-p);
}

.faq_item:hover {
    background: color-mix(in srgb, var(--color-banner-bg) 100%, transparent);
}

.faq_item h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-family: 'Font-Base', Arial, Helvetica, sans-serif;
    background: var(--gradient-headers);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    letter-spacing: var(--font-base-letter-spacing);
    cursor: pointer;
    transition: all 0.2s linear;
    
}

.faq_item h5:hover {
        /*background: color-mix(in srgb, var(--color-dark) 100%, transparent);*/
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: none;
}

.faq_open {
    padding-top: 22px;
    display: none;
}

.faq_plus {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-p);
    border-radius: 50%;
    font: 500 24px/34px 'Font-Base', Arial, Helvetica, sans-serif;
    text-align: center;
    transition: all 0.2s linear;
    color: var(--color-p);
    line-height: 36px;
}

.faq_item h5:hover .faq_plus {
    color: var(--color-anchor-menu-secondary);
    border: 1px solid var(--color-anchor-menu-secondary);
}

.section_support {
    padding: 0 0 100px;
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
}

.support_body {
    align-items: flex-start;
}

.support_body > div {
    width: 44.54%;
}

.support_body p {
    margin-bottom: 30px;
}

.support_body p:last-child {
    margin-bottom: 0px;
}

.section_pic, .section_pros, .section_details, .section_registration {
    padding: 0 0 100px;
}

.pic_body, .pros_body {
    align-items: flex-start;
}

.div_text {
    width: 44.54%;
}

.div_text h3, .pros_body h3 {
    font: bold 48px/48px 'Font-Secondary', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
    text-transform: uppercase;
}

.div_text p {
    margin-bottom: 26px;
}

.div_text p:last-child {
    margin-bottom: 0px;
}

.div_pic {
    width: 45%;
}

.div_pic img {
    border-radius: 21px;
}

.div_text .btn {
    width: 384px;
    /*margin-top: 60px;*/
}

.pros_body {
    padding: 35px 0 0;
}

.pros_body h3 {
    margin-bottom: 20px;
}

.pros_body > div {
    width: 48.5%;
}

.pros_body ul li {
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
    padding: 15px 37px;
    margin-bottom: 27px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-banner-bg) 100%, transparent);
    display: flex;
    align-items: center;
}

.pros_body ul li:last-child {
    margin: 0;
}

.pros_body ul li span {
    padding-left: 16px;
}

.details_body {
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-banner-bg) 100%, transparent);
    padding: 30px 37px;
}

.details_body li {
    padding: 25px 0;
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
    display: flex;
    border-top: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
    align-items: flex-start;
}

.details_body li:first-child {
    border: none;
}

.details_body li > * {
    width: 50%;
}

.details_body li a {
    font-weight: 900;
    text-decoration: underline;
}

.details_body li a:hover {
    text-decoration: none;
}

.details_body li div {
    display: flex;
    align-items: center;
}

.details_body li div span {
    padding-left: 16px;
}

.p_big {
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
    margin-bottom: 60px;
}

.registration_body {
    align-items: flex-start;
    margin-bottom: 50px;
}

.registration_body ol {
    width: 44.5%;
    font: 500 18px/28px 'Font-Base', Arial, Helvetica, sans-serif;
    margin: 0;
    list-style: decimal;
    margin-left: 20px;
}

.registration_body ol li {
    margin-bottom: 10px;
}

.registration_body > div {
    width: 45%;
}

.registration_banner {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--color-banner-bg);
    color: var(--color-banner-text);
    text-align: center;
    padding: 64px 42px 70px;
    font: 500 24px/30px 'Font-Base', Arial, Helvetica, sans-serif;
}

.registration_banner p {
    font: bold 50px/56px 'Font-Base', Arial, Helvetica, sans-serif;
    padding: 110px 0;
    text-transform: uppercase;

    @media (max-width: 767px) {
        font: bold 38px/46px 'Font-Base', Arial, Helvetica, sans-serif;
        padding: 50px 0;
    }
}

.registration_banner p span {
    color: var(--color-accent);
}

.registration_banner .btn {
    margin: 0 auto;
}

.section_popular {
    margin-bottom: 175px;
}

.slider_item img {
    border-radius: 20px;
    margin-bottom: 20px;
    /*clip-path: var(--clip-for-corners);*/
}

.slider_item h4 {
    font: 900 30px 'Font-Secondary', Arial, Helvetica, sans-serif;
    margin-top: 20px;
    text-transform: uppercase;
    text-align: center;
}

.slider_item .btn {
    width: 100%;
}

.section_text {
    margin-bottom: 100px;
}

.section_text h3 {
    font: bold 40px/48px 'Font-Secondary', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 50px 0 25px;
}

.section_text div h3:first-child {
    margin-top: 0;
}

.play_body {
    padding-top: 30px;
    align-items: flex-start;
}

.play_item {
    width: 23.6%;

}

.play_item img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /*clip-path: var(--clip-for-corners);*/
}

.play_item .btn {
    width: 100%;
    /*margin: 18px 0;*/
}

.play_banner {
    background: var(--color-banner-bg);
    color: var(--color-button-anchor-text);
    border-radius: 16px;
    padding: 25px 40px;
    font: 500 22px/26px 'Font-Base', Arial, Helvetica, sans-serif;
    text-align: center;
}

.play_banner h6 {
    padding-bottom: 15px;
    font: bold 24px/29px 'Font-Secondary', Arial, Helvetica, sans-serif;
}

.play_banner span {
    opacity: .8;
}

.section_anchor {
    z-index: 10;
    position: sticky;
    top: 0;
    padding: 24px 0 24px;
    margin-bottom: 50px;
    background-color: var(--color-bg-body);
}

@media (max-width: 767px) {
    /*.section_anchor {
        margin-bottom: 12px;
        padding-bottom: 24px !important;
    }*/
}

.anchorMenu .inner__menu {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0;
    margin-inline: auto;
    -ms-overflow-style: none;
}

.anchorMenu ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 20px;
}

.anchorMenu ul li:not(:last-child) {
    margin-right: 17px;
}

.anchorMenu ul li a {
    font: bold 20px/20px 'Font-Base', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: var(--color-anchor-menu-secondary);
    padding: 20px 20px 20px 20px;
    display: block;
    background: var(--color-button-anchor-bg);
    border-radius: 16px;
    border: 1px solid var(--color-anchor-menu-secondary);
    transition: all 0.2s linear;
    white-space: nowrap;
    /*clip-path: var(--clip-for-corners);*/
}

.anchorMenu ul li a:active, .anchorMenu ul li a.active, .anchorMenu ul li a:hover {
    background: var(--color-anchor-menu-secondary);
    color: var(--color-dark);

}

.page_top {
    background: var(--color-bg-header-footer);
    padding: 45px 0 55px;
}

.page_top h1 {
    font: bold 80px / 85px 'Font-Secondary', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: var(--color-white);
}

.page_body {
    padding: 50px 0 60px;
}

.page_body .p_big {
    max-width: 863px;
    margin-bottom: 45px;
}

.div_404 {
    font: bold 300px / 318px 'Font-Base', Arial, Helvetica, sans-serif;
    opacity: .1;
    text-align: right;
    margin: -36px 0 0 250px;
}

.div_terms, .page_body .div_terms .p_big {
    max-width: 960px;
}

.div_terms h3 {
    font: bold 40px / 48px 'Font-Secondary', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 50px 0 25px;
}

/*-------------------------------fixed-------------------------*/

.fixed_bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 6px 8px 0;
    background: var(--color-bg-header-footer);
    color: var(--color-dark);
    transform: rotateX(0deg);
    transform-origin: bottom;
    transition: all 0.2s linear;
    z-index: 30;
    border-top: solid 2px var(--color-accent-2)
}

.fixed_bottom.active {
    transform: rotateX(90deg);
}
.div_terms a{
    color: var(--color-button-bg);
}
.fixed_bottom h5 {
    font: bold 32px 'Font-Secondary', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    background: var(--gradient-headers-title-fixed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--font-shadow);
    letter-spacing: var(--font-secondary-letter-spacing);
}

.fixed_close {
    display: block;
    position: absolute;
    top: 4px;
    right: -3px;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    transition: all 0.2s linear;
}

.fixed_close:hover {
    background: var(--color-accent-2);
}

.fixed_close svg {
    display: block;
    margin: 5px auto;
}

/*--------------------------footer--------------------*/

.footer {
    background: var(--color-bg-header-footer);
    transition: all 0.3s linear;
    color: var(--color-white);
    padding: 0 0 0px;
}

.footer_bottom {
    background: var(--color-white);
    padding: 20px 0;
    color: #000;

    p {
        color: var(--color-dark);
    }
}

.footer_bottom > .flex {
    width: 100%;
}

.brand {
    width: 520px;
    flex-wrap: wrap;
}

.footer_top {
    position: relative;
    padding: 35px 0 90px;
    align-items: flex-start;
}

.footer_top > div {
    width: 45%;
}

.footer_top h4 {
    font: bold 32px/36px 'Font-Secondary', Arial, Helvetica, sans-serif;
    margin-bottom: 25px;
    text-transform: uppercase;
    display: flex;
}

.logo {
    width: 200px;
}

.logo span {
    padding-left: 3px;
    font: bold 24px/24px 'Font-Base', Arial, Helvetica, sans-serif;
    color: var(--color-white);
}

.footer_left > a {
    margin-bottom: 31px;
    display: block;
}

.footer_left p {
    margin-bottom: 42px;
    color: var(--color-white);
}

.footer_left p:last-child {
    margin-bottom: 0;
}

.footer_top .nav ul li {
    padding-left: 0;
    margin-top: 35px;
}

.footer_top .nav ul li:first-child {
    margin-top: 0;
}

.footer_left h4 span, .span_18 {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-accent-2);
    margin-left: 23px;
    text-align: center;
    font: bold 13px/30px 'Font-Base', Arial, Helvetica, sans-serif;
    letter-spacing: var(--font-base-letter-spacing);
}

.span_18 {
    position: absolute;
    display: block;
    top: 42px;
    right: 24px;
}

.footer_right h4 {
    margin: 11px 0 39px;
}

/*-------------------------------form---------------------------*/


input[type="text"], input[type="email"], input[type="tel"], textarea {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    width: 100%;
    height: 28px;
    position: relative;
    font: normal 14px/21px 'Font-Base', Arial, Helvetica, sans-serif;
    color: var(--color-white);
    padding: 0px 0px 6px;
    display: block;
    margin: 0 0px 17px;
    text-align: left;
    transition: all 0.3s linear;
    box-sizing: border-box;
    border-radius: 0px;
    background: none;

}

input[type="text"]:hover, input[type="text"]:focus, input[type="email"]:hover, input[type="email"]:focus, input[type="tel"]:hover, input[type="tel"]:focus, textarea:hover, textarea:focus {
    border-bottom: 1px solid var(--color-white);
}

textarea {
    height: 74px;
    resize: none;
}

button[type="submit"] {
    border: none;
    display: block;
    font: 500 16px/21px 'Font-Base', Arial, Helvetica, sans-serif;
    height: 93px;

    text-decoration: none;
    background: #D49D75;
    text-align: center;
    padding: 28px 10px 23px;
    color: #FAF8F4;
    text-transform: uppercase;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    transition: all 0.3s linear;
}

button[type="submit"]:hover, button[type="submit"]:hover {
    background: rgba(186, 127, 84, 0.78);
}


::-webkit-input-placeholder {
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease;
}

::-moz-placeholder {
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease;
}

:-moz-placeholder {
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease;
}

:-ms-input-placeholder {
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease;
}

:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

:focus::-moz-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

:focus:-moz-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

:focus:-ms-input-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobil_show {
    display: none;
}

.top_title a.mobil_show {
    display: none;
}

.gift_reg_2 {
    display: none;
}

/*---------------------media------------------*/
@media (max-width: 1440px) {
    .container {
        padding: 0 24px;
    }

    .logo span {
        display: none;
    }

    .nav ul li {
        padding: 0px 0px 0px 25px;
    }

    .top_title {
        max-width: 50vw;
    }
}

@media (max-width: 1023px) {
    .header .nav .btn {
        position: static;
    }

    .header .nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--color-bg-header-footer);
        padding: 40px;
        height: 100vh;
        z-index: 20;
        transform: rotateX(90deg);
        transform-origin: top;
        transition: all 0.2s linear;
    }

    .header .nav.active {
        transform: rotateX(0);
    }

    .header .nav ul {
        display: block;
    }

    .nav_open {
        display: block;
    }

    .header_top {
        padding: 0;
    }

    .nav ul li {
        padding: 0px;
        margin-bottom: 30px;
    }

    .play_body {
        flex-wrap: wrap;
        margin-bottom: -30px;
    }

    .play_item {
        width: 48%;
        margin-bottom: 30px;
    }

    .pic_body, .pros_body {
        flex-wrap: wrap;
    }

    .div_text {
        width: 100%;
        margin-top: 50px;
    }

    .div_text:first-child {
        margin-top: 0;
    }

    .div_pic {
        width: 100%;
        margin-top: 50px;
        text-align: center;
    }

    .support_body {
        display: block;
    }

    .support_body > div {
        width: 100%;
        margin-top: 50px;
    }

    .support_body > div:first-child {
        margin-top: 0;
    }

    .pic_order .div_pic {
        order: 1;
    }

    .pic_order .div_text {
        margin-top: 0;
    }

    .div_text .btn {
        /*margin-top: 40px;*/
    }

    .registration_body {
        margin-bottom: 0;
        display: block;
    }

    .registration_body > ol, .registration_body > div {
        width: 100%;
        margin-bottom: 50px;
    }

    .registration_body > ol {
        width: calc(100% - 20px);
    }

    .pros_body {
        display: block;
    }

    .pros_body > div {
        width: 100%;
    }

    .pros_body > div:first-child {
        margin-bottom: 40px;
    }

    .footer_bottom > .flex {
        flex-wrap: wrap;
    }

    .brand {
        width: 100%;
        margin-bottom: 20px;
        order: -1;
        justify-content: center;
    }

    .brand img {
        margin: 0 20px;
    }

    .copy {
        width: 100%;
        text-align: center;
    }

    .div_404 {
        margin: 0;
    }

    .fixed_bottom h5 {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }

    body {
        font: 500 16px / 20px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .section_top {
        padding: 50px 0;
    }

    .top_title h1 {
        font: bold 38px / 44px 'Font-Secondary', Arial, Helvetica, sans-serif;
        margin-bottom: 20px;
    }

    .top_title, .section_support {
        max-width: 675px;
        font: 500 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .top_title h6 {
        font: bold 24px /28px 'Font-Secondary', Arial, Helvetica, sans-serif;
        margin: 20px 0 20px;
    }

    .section_anchor {
        padding: 10px 0 20px;
    }

    .anchorMenu ul li:not(:last-child) {
        margin-right: 15px;
    }

    .anchorMenu ul li a {
        font: bold 18px / 18px 'Font-Base', Arial, Helvetica, sans-serif;
        padding: 20px 15px;

    }

    h2 {
        font: bold 38px / 46px 'Font-Secondary', Arial, Helvetica, sans-serif;
        margin: 0px 0 25px;
    }

    .play_item {
        width: 100%;
    }

    .section_support {
        padding: 0 0 60px;
    }

    .div_text h3, .pros_body h3, .section_text h3, .div_terms h3 {
        font: bold 32px / 36px 'Font-Secondary', Arial, Helvetica, sans-serif;
        margin: 0px 0 20px;
    }

    .section_pic, .section_pros, .section_details, .section_registration, .faq {
        padding: 0 0 60px;
    }

    .div_pic {
        margin-top: 30px;
    }

    .section_text h3, .div_terms h3 {
        margin: 35px 0 20px;
    }

    .section_text {
        margin-bottom: 60px;
    }

    .btn, .div_text .btn {
        font-size: 20px;
        width: 100%;
    }

    .border {
        width: 100%;
    }

    .p_big {
        font: 500 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
        margin-bottom: 40px;
    }

    .registration_banner h4 {
        font: bold 34px / 40px 'Font-Secondary', Arial, Helvetica, sans-serif;
        padding: 50px 0;
    }

    .registration_banner {
        padding: 40px;
        font: 500 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .details_body {
        padding: 20px;
    }

    .details_body li {
        padding: 15px 0;
        font: 500 20px /24px 'Font-Base', Arial, Helvetica, sans-serif;
        display: block;
    }

    .details_body li > * {
        width: 100%;
    }

    .details_body li > span, .details_body li > a {
        margin-top: 10px;
        text-align: right;
        display: block;
    }

    .pros_body {
        padding: 0px 0 0;
    }

    .pros_body ul li {
        font: 500 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
        padding: 12px 20px;
        margin-bottom: 15px;
        border-radius: 10px;

    }

    .faq_item h5 {
        font: bold 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .faq_plus {
        width: 30px;
        height: 30px;
        font: 500 20px / 26px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .faq_item h5 > span:first-child {
        width: calc(100% - 40px);
    }

    .footer_top {
        padding: 30px 0;
    }

    .footer_top {
        display: block;
    }

    .footer_top > div {
        width: 100%;
    }

    .footer_top h4 {
        font: bold 24px / 28px 'Font-Secondary', Arial, Helvetica, sans-serif;
        margin-bottom: 20px;
    }

    .footer_left p {
        margin-bottom: 30px;
    }

    .footer_left h4 span, .span_18 {
        width: 30px;
        height: 30px;
        margin-left: 20px;
        font: bold 10px / 26px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .footer_right {
        margin-top: 30px;
    }

    .nav ul li a {
        font: 500 20px / 20px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .footer_top .nav ul li {
        margin-top: 25px;
    }

    .brand img {
        margin: 0 10px;
    }

    .section_popular {
        margin-bottom: 100px;
    }

    .page_top {
        padding: 30px 0;
    }

    .page_top h1 {
        font: bold 45px / 50px 'Font-Secondary', Arial, Helvetica, sans-serif;
    }

    .page_body .p_big {
        margin-bottom: 40px;
        font: 500 20px / 24px 'Font-Base', Arial, Helvetica, sans-serif;
    }

    .div_404 {
        font: bold 150px / 150px 'Font-Base', Arial, Helvetica, sans-serif;
        padding-top: 25px;
    }

    .page_body {
        padding: 50px 0;
    }

    .fixed_bottom h5 {
        /*display: none;*/
    }

    .fixed_bottom .btn {
        width: 70%;
    }

    .fixed_bottom .logo {
        display: none;
    }
}

/*.anchorMenu {
    position: sticky;
    top: 0;
}*/

@media (max-width: 500px) {
    .gift_reg {
        display: none;
    }

    .gift_reg_2 {
        display: flex;
    }
}

.anchorMenu .inner .js-progressbar {
    display: block;
    width: 100%;
    background: var(--color-anchor-menu-primary);
    border-radius: .8rem;
    max-width: var(--container-width);
    margin-inline: auto
}

.anchorMenu .inner .js-progressbar div {
    height: .7rem;
    border-radius: .8rem;
    background: var(--color-anchor-menu-secondary);
    max-width: 100%
}

.gap-20 {
    gap: 20px;
}

.gradient-text {
    background: var(--gradient-headers);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.w-full {
    width: 100% !important;
}

.w-50 {
    width: 50% !important;

    @media (max-width: 767px) {
        width: 100% !important;
    }
}

.w-25 {
    width: 25% !important;

    @media (max-width: 767px) {
        width: 100% !important;
    }
}

.margin-18 {
    margin: 18px 0;
}

.center {
    align-self: center;
    justify-self: center;
}

.w-200 {
    min-width: 200px;
}

.size-h2 {
    font: bold 60px/64px Font-Secondary, Arial, Helvetica, sans-serif;
    letter-spacing: var(--font-secondary-letter-spacing);
    margin: 0 0 30px;
    text-transform: uppercase;

    @media (max-width: 767px) {
        font: bold 40px/48px Font-Secondary, Arial, Helvetica, sans-serif;
    }
}

.size-h3 {
    font: bold 40px/48px Font-Secondary, Arial, Helvetica, sans-serif;
    letter-spacing: var(--font-secondary-letter-spacing);
    margin: 0 0 30px;
    text-transform: uppercase;
}

.aqua_button_green {

    --hue: 100deg;
    --sat: 100%;
    --blur: 0px;

    --hue2: calc(var(--hue) + 0deg);
    --sat2: calc(var(--sat) + 90%);
    --clr: hsl(var(--hue) var(--sat) 30%);
    --clr2: hsl(var(--hue2) var(--sat2) 85%);
    --gradoffset: 45%;
    --gradgap: 30%;

    height: 52px;
    /*width: 213px;*/
    display: block;
    cursor: pointer;
    padding: 15px 30px;

    font: 24px/22px 'Font-Base', Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-align: center;
    color: var(--color-button-text);
    text-transform: uppercase;
    letter-spacing: var(--font-base-letter-spacing);
    text-shadow: 0 2px var(--color-font-shadow);

    background-color: var(--clr);
    background-image:
            linear-gradient(180deg,
            var(--clr2) var(--gradgap),
            transparent calc(100% - var(--gradgap))
            );
    background-repeat: no-repeat;
    background-position: center var(--gradoffset);
    background-size: 100% 200%;
    border-radius: 2em;
    border: none;

    box-shadow:
            0 -0.5em 0.5em transparent,
            0 0.5em 0.5em transparent,
            0 0.25em 0.3em -0.2em hsla(var(--hue), var(--sat), 50%, 0.46),
            0 0.25em 0.75em hsla(var(--hue), calc(var(--sat) - 10%), 40%, 0.3);

    position: relative;
    transition: all 0.5s ease;
    outline: none;

    &::before, &::after {
        content: "";
        inset: 0;
        position: absolute;
        border-radius: 5em;
    }

    /*darkening*/
    &::before {
        background-image:
                radial-gradient(ellipse,
                hsla(var(--hue), 100%, 90%, .8) 20%,
                transparent 50%,
                transparent 200%
                ),
                linear-gradient(90deg,
                hsl(0deg, 0%, 25%) -10%,
                transparent 30%,
                transparent 70%,
                hsl(0deg, 0%, 25%) 110%
                );
        box-shadow:
                inset 0 .25em .75em hsla(0deg, 0%, 0%, 0.8),
                inset 0 -.05em .2em rgba(255, 255, 255, 0.4),
                inset 0 -1px 3px hsla(var(--hue), 80%, 50%, .75);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: 200% 80%, cover;
        background-position: center 220%;
        mix-blend-mode: overlay;
        filter: blur(calc(var(--blur) * 0.5));
    }

    /*reflection*/
    &::after {
        background: linear-gradient(
                180deg,
                hsla(var(--hue2),100%,90%,.9),
                hsla(var(--hue2),calc(var(--sat2)*0.7),50%,.75) 40%,
                transparent 80%
        );
        top: 0.075em;
        left: 0.75em;
        right: 0.75em;
        bottom: 1.4em;
        filter: blur(var(--blur));
        mix-blend-mode: screen;
    }

    &:hover,
    &:active,
    &:focus {
        outline: none;
        box-shadow:
                0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3),
                0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5),
                0 0.25em 0.3em -0.2em hsl(var(--hue) 90% 70%),
                0 0.25em 0.5em hsla(var(--hue),20%,30%, 0.2),
                inset 0 -2px 2px rgba(255,255,255,0.2);
        background-position: center calc( var(--gradoffset) - 0.75em );
    }
}

.aqua_button_violet {

    --hue: 280deg;
    --sat: 100%;
    --blur: 0px;

    --hue2: calc(var(--hue) + 0deg);
    --sat2: calc(var(--sat) + 20%);
    --clr: hsl(var(--hue) var(--sat) 30%);
    --clr2: hsl(var(--hue2) var(--sat2) 85%);
    --gradoffset: 25%;
    --gradgap: 30%;

    height: 52px;
    width: 213px;
    cursor: pointer;
    padding: 15px 30px;

    font: 24px/22px 'Font-Base', Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-align: center;
    color: var(--color-button-text);
    text-transform: uppercase;
    letter-spacing: var(--font-base-letter-spacing);
    text-shadow: 0 3px var(--color-font-shadow);

    background-color: var(--clr);
    background-image:
            linear-gradient(180deg,
            var(--clr2) var(--gradgap),
            transparent calc(100% - var(--gradgap))
            );
    background-repeat: no-repeat;
    background-position: center var(--gradoffset);
    background-size: 100% 200%;
    border-radius: 2em;
    border: none;

    box-shadow:
            0 -0.5em 0.5em transparent,
            0 0.5em 0.5em transparent,
            0 0.25em 0.3em -0.2em hsla(var(--hue), var(--sat), 50%, 0.46),
            0 0.25em 0.75em hsla(var(--hue), calc(var(--sat) - 10%), 40%, 0.3);

    position: relative;
    transition: all 0.5s ease;
    outline: none;

    &::before, &::after {
        content: "";
        inset: 0;
        position: absolute;
        border-radius: 5em;
    }

    /*darkening*/
    &::before {
        background-image:
                radial-gradient(ellipse,
                hsla(var(--hue), 100%, 90%, .8) 20%,
                transparent 50%,
                transparent 200%
                ),
                linear-gradient(90deg,
                hsl(0deg, 0%, 25%) -10%,
                transparent 30%,
                transparent 70%,
                hsl(0deg, 0%, 25%) 110%
                );
        box-shadow:
                inset 0 .25em .75em hsla(0deg, 0%, 0%, 0.8),
                inset 0 -.05em .2em rgba(255, 255, 255, 0.4),
                inset 0 -1px 3px hsla(var(--hue), 80%, 50%, .75);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: 200% 80%, cover;
        background-position: center 220%;
        mix-blend-mode: overlay;
        filter: blur(calc(var(--blur) * 0.5));
    }

    /*reflection*/
    &::after {
        background: linear-gradient(
                180deg,
                hsla(var(--hue2),100%,90%,.9),
                hsla(var(--hue2),calc(var(--sat2)*0.7),50%,.75) 40%,
                transparent 80%
        );
        top: 0.075em;
        left: 0.75em;
        right: 0.75em;
        bottom: 1.4em;
        filter: blur(var(--blur));
        mix-blend-mode: screen;
    }

    &:hover,
    &:active,
    &:focus {
        outline: none;
        box-shadow:
                0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3),
                0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5),
                0 0.25em 0.3em -0.2em hsl(var(--hue) 90% 70%),
                0 0.25em 0.5em hsla(var(--hue),20%,30%, 0.2),
                inset 0 -2px 2px rgba(255,255,255,0.2);
        background-position: center calc( var(--gradoffset) - 0.75em );
    }
}

.aqua_button_red {

    --hue: 350deg;
    --sat: 100%;
    --blur: 0px;

    --hue2: calc(var(--hue) + 0deg);
    --sat2: calc(var(--sat) + 20%);
    --clr: hsl(var(--hue) var(--sat) 30%);
    --clr2: hsl(var(--hue2) var(--sat2) 85%);
    --gradoffset: 25%;
    --gradgap: 30%;

    height: 52px;
    width: 213px;
    cursor: pointer;
    padding: 15px 30px;

    font: 24px/22px 'Font-Base', Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-align: center;
    color: var(--color-button-text);
    text-transform: uppercase;
    letter-spacing: var(--font-base-letter-spacing);
    text-shadow: 0 3px var(--color-font-shadow);

    background-color: var(--clr);
    background-image:
            linear-gradient(180deg,
            var(--clr2) var(--gradgap),
            transparent calc(100% - var(--gradgap))
            );
    background-repeat: no-repeat;
    background-position: center var(--gradoffset);
    background-size: 100% 200%;
    border-radius: 2em;
    border: none;

    box-shadow:
            0 -0.5em 0.5em transparent,
            0 0.5em 0.5em transparent,
            0 0.25em 0.3em -0.2em hsla(var(--hue), var(--sat), 50%, 0.46),
            0 0.25em 0.75em hsla(var(--hue), calc(var(--sat) - 10%), 40%, 0.3);

    position: relative;
    transition: all 0.5s ease;
    outline: none;

    &::before, &::after {
        content: "";
        inset: 0;
        position: absolute;
        border-radius: 5em;
    }

    /*darkening*/
    &::before {
        background-image:
                radial-gradient(ellipse,
                hsla(var(--hue), 100%, 90%, .8) 20%,
                transparent 50%,
                transparent 200%
                ),
                linear-gradient(90deg,
                hsl(0deg, 0%, 25%) -10%,
                transparent 30%,
                transparent 70%,
                hsl(0deg, 0%, 25%) 110%
                );
        box-shadow:
                inset 0 .25em .75em hsla(0deg, 0%, 0%, 0.8),
                inset 0 -.05em .2em rgba(255, 255, 255, 0.4),
                inset 0 -1px 3px hsla(var(--hue), 80%, 50%, .75);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: 200% 80%, cover;
        background-position: center 220%;
        mix-blend-mode: overlay;
        filter: blur(calc(var(--blur) * 0.5));
    }

    /*reflection*/
    &::after {
        background: linear-gradient(
                180deg,
                hsla(var(--hue2),100%,90%,.9),
                hsla(var(--hue2),calc(var(--sat2)*0.7),50%,.75) 40%,
                transparent 80%
        );
        top: 0.075em;
        left: 0.75em;
        right: 0.75em;
        bottom: 1.4em;
        filter: blur(var(--blur));
        mix-blend-mode: screen;
    }

    &:hover,
    &:active,
    &:focus {
        outline: none;
        box-shadow:
                0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3),
                0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5),
                0 0.25em 0.3em -0.2em hsl(var(--hue) 90% 70%),
                0 0.25em 0.5em hsla(var(--hue),20%,30%, 0.2),
                inset 0 -2px 2px rgba(255,255,255,0.2);
        background-position: center calc( var(--gradoffset) - 0.75em );
    }
}

.button-1 {
    --background-size: 50px;
    --button-background-repeat: no-repeat;
    --button-background-size: var(--background-size) 100%, calc(100% - (var(--background-size) * 2 - 2px)) 100%, var(--background-size) 100%;
    --button-backround-position: left center, center, right 0 center;
    --button-padding-block-start: 8px;
    --button-padding-block-end: 9px;
    border-radius: 0;
    font-size: 22px;
    min-height: 50px;
    padding: 0 22px;
    position: relative;
    z-index: 1;
    display: inline-grid;
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    grid-column-gap: 8px;
    text-align: center;
    font-family: Font-Secondary, Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--font-secondary-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow:
            0 0 3px var(--color-font-shadow),
            0 0 3px var(--color-font-shadow),
            0 0 3px var(--color-font-shadow),
            0 0 3px var(--color-font-shadow),
            0 0 3px var(--color-font-shadow);
    border: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.button--primary {
    --button-loading-background-color: var(--color-white);
    color: var(--color-white);
    padding-block-start: var(--button-padding-block-start);
    padding-block-end: var(--button-padding-block-end);
    background-color: transparent;
    background-image: var(--primary-background-image);
    background-repeat: no-repeat;
    background-size: var(--button-background-size);
    background-position: var(--button-backround-position);
    transition: .2s;
    padding-top: 11px;
    border-radius: 30px;
}

.button--primary {
    /*--primary-background-image: url(/images/buttons/left-bg.png), url(/images/buttons/center-bg.png), url(/images/buttons/right-bg.png);*/
    background: var(--color-button-bg);
    color: var(--color-white);
    text-shadow: none;
    box-shadow: inset 0 3px 12px #ffe6cc99;
}

.button--primary:hover {
    transition: .2s;
    background: var(--color-accent);
    color:var(--color-dark);
    /*--primary-background-image: url(/images/buttons/hover/left-bg.png), url(/images/buttons/hover/center-bg.png), url(/images/buttons/hover/right-bg.png);*/
}