:root{
    --white-font-color: #fff;
    --black-font-color: #363636;
    --span-font-color: #858585;
    --link-color: #459a3f;
    --inactive-link-color: #bbbbbb;
    --category: #306a2b;
    --border: 1px solid rgba(163, 163, 163, 0.33);
    --article-category-color: #959595;
    --main-navbar-background-color: rgb(27, 28, 28, 0.8);
    --hover-color: rgba(255, 255, 255, 0.10);
    --border-radius: 10px;

    --transition-anim: all .1s linear;
    --light-gray: #efefef;
    --brown-color: rgb(97, 67, 38);
    --light-brown-color: rgba(97, 67, 38, 60%);
    --dark-brown-color: rgb(62, 40, 20);
    --dark-active: rgba(0,0,0, 10%);
}

@font-face {
    font-family: Friz-Quadrata;
    src: url("../fonts/frq/frq55.573f3cb8ea17.otf");
}

@font-face {
    font-family: Friz-Quadrata;
    font-weight: bold;
    src: url("../fonts/frq/frq85.d5a38dc9d0ba.otf");
}

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-grow: 1;
}

.hidden {
    display: none;
}

/* BASE STYLES */
form.base_form
{
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 285px;
}

div.base_input_block 
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.base_input_block label
{
    color: var(--inactive-link-color);
    margin-bottom: 0 !important;
}

input.base_input
{
    height: 40px;
    padding: 7px 15px;
    border-radius: var(--border-radius);
    border: var(--border);
    font-size: 16px;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}
input.base_input:focus
{
    outline: none;
    background-color: var(--white-font-color);
    border-color: rgba(0, 0, 0, 0.35);
}
input.base_submit_input
{
    align-self: center;
    font-size: 16px;
    padding: 7px 15px;
    color: #F1EEEA;
    background-color: var(--category);
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
    cursor: pointer;
    transition: background-color .3s linear;
}
input.base_submit_input:hover
{
    background-color: var(--link-color);
}

/* MAIN SITE NAVBAR */
.main-site-navbar {
    width: 98%;
    height: 72px;

    display: flex;
    align-items: center;

    padding: 5px;

    border-radius: 8px;

    color: var(--white-font-color);
    background-color: var(--main-navbar-background-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: fixed;
    top: 10px;
    left: 50%;

    transform: translate(-50%, 0%);

    z-index: 20;

    font-family: 'Geologica', sans-serif;
}

.main-site-background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
    overflow: hidden;
    display: none;
}

.main-site-sidebar {
    position: fixed;
    top: 0;
    left: 0;

    width: 375px;
    height: 100%;
    background-color: #000;
    overflow-y: auto;
    display: none;
}

button.main-site-sidebar-close
{
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    position: absolute;
    left: 315px;
    top: 20px;
    cursor: pointer;
    font-size: 45px;
    line-height: 0.8;
}

.main-site-background-wrapper.active, .main-site-sidebar.active
{
    display: block;
}

.main-site-sidebar-image {
    width: 100%;
    height: 270px;
}

.main-site-sidebar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-site-sidebar-content {
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
}

ul.main-site-menu-list {
    list-style: none;
}

li.main-site_menu-item {
    border-bottom: var(--border);
    font-family: 'Geologica', sans-serif;
    text-transform: uppercase;
    color: var(--span-font-color);
}

li.main-site_menu-item.p-tag
{
    cursor: pointer;
}
li.main-site_menu-item.p-tag.mi-opened span.main-navbar_sidebar-span
{
    transform: rotate(180deg);
}

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

.item-top-block {
    border-bottom: none;
}

.item-top-block .main-site-menu_link {
    padding: 25px 0;
    color: var(--white-font-color);
    width: 100%;
}

.main-site_sidebar-sub-list
{
    padding: 0 0 15px 10px;
    display: none;
}

.main-site_sidebar-sub-list.active
{
    display: block;
    margin-top: -10px;
}

a.sub-item_link
{
    display: grid;
    grid-template-columns: 40px calc(100% - 40px);
    grid-gap: 10px;
    margin: 10px 0;
    color: var(--white-font-color);
    transition: all .1s linear;
}

a.sub-item_link span
{
    color: var(--span-font-color);
    font-size: 12px;
}

a.sub-item_link:hover {
    background-color: var(--hover-color);
}

a.sub-item_link img 
{
    max-width: 40px;
    max-height: 40px;
    width: 100%;
    height: auto;
}

.sub-item_desc
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
}

/* LOGO SECTION */
.main-site-navbar .logo-section {
    height: 100%;

    cursor: pointer;

    display: flex;
    align-items: center;
}

.main-site-navbar .logo-section::after {
    content: "";

    display: block;

    width: 2px;
    height: 70%;
    background-color: rgba(255, 255, 255, .3);

    margin: 0 8px;
}

.main-site-navbar .logo-section a {
    height: inherit;
}

.main-site-navbar .logo-section img {
    height: 100%;
    width: 50px;

    filter: brightness(1.20);
}

ul.primary-menu_list {
    list-style: none;

    display: flex;
    align-items: center;
}

a.primary-menu_link-item {
    padding: 0 12px;
    border-radius: 8px;

    height: 48px;
    display: flex;
    align-items: center;

    text-transform: uppercase;

    transition: background-color .3s linear;

    color: var(--white-font-color);
}

a.primary-menu_link-item:hover {
    background-color: var(--hover-color);
    color: var(--white-font-color) !important;
}

.secondary-menu {
    min-height: 48px;

    border-radius: var(--border-radius);

    display: flex;
    align-items: center;

    position: relative;

    padding: 12px;
    cursor: pointer;

    margin-left: auto;

    transition: background-color .3s linear;
}

.secondary-account-section {
    display: flex;
    align-items: center;
}
.secondary-account-section svg {
    fill: var(--white-font-color);
    width: 30px;
    height: 30px;
}

.secondary-account-section span {
    margin-left: 10px;
}

.dropdown-menu {
    display: none;

    background-color: #1b1c1c;

    padding: 12px;
    border-radius: var(--border-radius);

    height: auto;
    max-height: none;
    min-width: 320px;
    opacity: 1;

    position: absolute;
    top: 70px;
    right: -10px;

    transition: opacity .3s ease;
}

.secondary-menu.active .dropdown-menu {
    display: block;
}

.dropdown-arrow {
    width: 30px;
    height: 30px;

    background-color: #1b1c1c;

    position: absolute;
    top: -5px;
    right: 50%;
    transform: translate(50%, 0) rotate(45deg);

    z-index: -1;
}

.login-section {
    padding: 12px;

    text-align: center;
}

.button-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

button.login-section_button {
    width: 100%;

    border: none;
    border-radius: var(--border-radius);
    background-color: var(--category);
    color: var(--white-font-color);

    padding: 12px 0;

    cursor: pointer;

    transition: all .3s ease;

    font-size: 18px;
    font-family: Friz-Quadrata;

    outline: none;

    font-family: 'Geologica', sans-serif;
}

button.login-section_button:hover {
    background-color: var(--link-color);
}

/* WRAPPER */
.main-wrapper {
    width: 100%;
    position: relative;

    background-color: #efefef;

    flex-grow: 1;
}

/* MAIN FOOTER */
.main-footer {
    display: grid;
    justify-content: center;
    row-gap: 24px;

    text-align: center;
    padding: 15px 0;

    background-color: #1b1c1c;
    color: var(--inactive-link-color);
}

.socials {
    display: grid;
    row-gap: 24px;
}

h3.socials-heading {
    font-size: 34px;
    color: #D2C8AE;
    font-family: Friz-Quadrata;
}

.social-networks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

a.social-networks_link {
    width: 36px;
    height: 36px;
}

a.social-networks_link svg {
    width: 100%;
    height: 100%;
    
    fill: var(--inactive-link-color);
    transition: all .3s ease;
}

a.social-networks_link:hover svg {
    fill: var(--link-color);
}

.localization {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    justify-self: center;

    position: relative;

    cursor: pointer;
}

span.select-language svg {
    width: 8px;
    height: 14px;
}

.localization:hover span.language {
    color: var(--white-font-color);
}

.globe-icon, span.language {
    margin-right: 10px;
}

.globe-icon, span.select-language {
    display: flex;
    align-items: center;
}

.globe-icon, span.select-language svg {
    fill: var(--link-color);
}

ul.language-list {
    list-style: none;
    text-align: left;

    padding: 12px;

    border-radius: var(--border-radius);
    background-color: var(--black-font-color);

    position: absolute;
    top: 0;
    right: -85px;
    width: 85px;

    display: none;

    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;     
    user-select: none;
}

li.language-item {
    cursor: pointer;
    transition: color .3s ease;
}

a.language-option {
    color: var(--white-font-color);
}

li.language-item:hover a.language-option {
    color: var(--link-color);
}

.company-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-logo a {
    height: 70px;

    margin-bottom: 24px;
}

.company-logo a img {
    height: 100%;
}

.company-logo span {
    display: block;
    font-size: 10px;
}

ul.main-footer_list {
    list-style: none;
    text-transform: uppercase;

    display: flex;
    align-items: center;

    font-size: 12px;

    margin-top: -10px;
    margin-bottom: 10px;
}

li.main-footer_item {
    padding: 0 12px;
    transition: all .3s ease;
    border-right: 1px solid #ffffff4d;
}

li.main-footer_item:last-child {
    border-right: none;
}

a.main-footer_link {
    color: var(--inactive-link-color);
}

li.main-footer_item:hover a.main-footer_link {
    color: var(--white-font-color);
}

/* PAGE 404 */
.page-not-found {
    text-align: center;
    padding: 20px;
}

/* COOKIES */
#cookieBar {
    box-shadow: none !important;
    border-radius: var(--border-radius);
    border: none !important;
}

#cookieBar a.cc-bar-btn {
    background-color: var(--category) !important;
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
}

/* CONTACT-US FORM */
form#contact_form 
{
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 285px;
}
form#contact_form div.base_contact 
{
    display: flex;
    flex-direction: column;
}

div.base_contact label
{
    color: var(--inactive-link-color);
    margin-bottom: 0 !important;
}

form#contact_form span
{
    display: none;
    color: tomato;
    text-align: right;
    font-size: 14px;
    margin-bottom: 0;
}

form#contact_form span.error
{
    display: block;
}

form#contact_form input#contact_email
{
    height: 40px;
    padding: 7px 15px;
    border-radius: var(--border-radius);
    border: var(--border);
    font-size: 16px;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}

form#contact_form input#contact_email.error, textarea#issue_desc.error {
    border-color: tomato;
}

textarea#issue_desc 
{
    font-size: 16px;
    padding: 15px;
    height: 100px;
    border-radius: var(--border-radius);
    border: var(--border);
    resize: none;
    background-color: #f3f3f3;
    transition: background-color .3s linear;
    margin-bottom: 0 !important;
}

form#contact_form input#contact_email:focus, textarea#issue_desc:focus
{
    outline: none;
    background-color: var(--white-font-color);
    border-color: rgba(0, 0, 0, 0.35);
}

input#contactForm_submit
{
    align-self: center;
    font-size: 16px;
    padding: 7px 15px;
    color: #F1EEEA;
    background-color: var(--category);
    border: none !important;
    font-family: 'Geologica', sans-serif !important;
    border-radius: var(--border-radius);
    width: 200px;
    cursor: pointer;
    transition: background-color .3s linear;
}

input#contactForm_submit:hover
{
    background-color: var(--link-color);
}

form#contact_form input#issue_desc {
    height: 200px;
}

/* GREEN BUTTON */
button.green-btn {
    height: 71px;
    min-width: 200px;

    cursor: pointer;
    font-size: 24px;
    font-family: Friz-Quadrata, serif;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 2px #000;

    border: none;
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    padding: 0 20px;

    transition: all .1s linear;
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
}

button.green-btn *
{
    -webkit-touch-callout: none !important;
    /* -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    -webkit-user-select: none !important; 
    -khtml-user-select: none !important;  
    -moz-user-select: none !important;    
    -ms-user-select: none !important;     
    user-select: none !important;  */
    outline: none !important;
}

button.green-btn img.green-btn_shadow
{
    width: calc(100% + 10px);
    height: 100%;
    position: absolute;
    z-index: -2;
    bottom: -12px;
}

button.green-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: 
        url("/static/img/btn_green_1_inactive.738555b70706.png"),
        url("/static/img/btn_green_3_inactive.3f7b101356e5.png"),
        url("/static/img/btn_green_2_inactive.4dfa99ab8778.png");

    transition: all .1s linear;
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    
    background-repeat: no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, calc(100% - 53px) 100%;
    pointer-events: none; /* Чтобы клик ловила кнопка, а не псевдоэлемент */

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    z-index: -1;
}

button.green-btn:hover::before, button.green-btn:active::before {
    background-image: 
        url("/static/img/btn_green_1_active.cf814eab2c0a.png"),
        url("/static/img/btn_green_3_active.6fbcafd5d39c.png"),
        url("/static/img/btn_green_2_active.33d38dd90668.png");
    background-repeat: no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, calc(100% - 53px) 100%;
        

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

button.green-btn::after
{
    content: "";
    position: absolute;
    width: 93px;
    height: 30px;
    right: 25px;
    bottom: -6px;
    background-image: url("/static/img/button1_decor.0520bd007b6b.png");
    background-repeat: no-repeat;
    background-size: 93px 30px;
    background-position: center;
    transform: scaleX(-1);
}

/* PLAY GAME BUTTON */
button.playGame-btn {
    min-width: 356px;
    height: 96px;

    cursor: pointer;
    font-size: 52px;
    font-family: Friz-Quadrata, serif;
    font-weight: bold;

    border: none;
    background-color: transparent;
    
    /* Gradient text */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
        
    position: relative;

    transition: all .1s linear;
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
}

button.playGame-btn::before {
    width: 100%;
    height: 105px;

    content: "";
    display: block;

    background-image: 
    url("/static/img/btn_playgame_1_inactive.e61a7b6799ed.png"),
    url("/static/img/btn_playgame_3_inactive.3207885a5eb4.png"),
    url("/static/img/btn_playgame_decor.9c47e012ddb8.png"),
    url("/static/img/btn_playgame_2_inactive.3596459c9cd7.png");

    transition: all .1s linear;
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    
    background-repeat: no-repeat;
    background-position: left 0, right 0, 30% 86px, center 0;
    background-size: auto 93px, auto 93px, auto 18px, calc(100% - 100px) 93px;
    pointer-events: none; /* Чтобы клик ловила кнопка, а не псевдоэлемент */
}

button.playGame-btn:hover::before, button.playGame-btn:active::before {
    background-image: 
        url("/static/img/btn_playgame_1_active.e568564878bd.png"),
        url("/static/img/btn_playgame_3_active.32fe2b0df999.png"),
        url("/static/img/btn_playgame_decor.9c47e012ddb8.png"),
        url("/static/img/btn_playgame_2_active.e7f09f6e7f12.png");
}

button.playGame-btn::after {
    width: 100%;
    height: 105px;

    content: "";
    display: block;

    transition: all .3s linear;
    transform: scaleX(-1);
    
    background-image: url("/static/img/btn_playgame_decor.9c47e012ddb8.png");
    background-repeat: no-repeat;
    background-position: 30% 86px;
    background-size: auto 18px;
    pointer-events: none;

    position: absolute;
    bottom: -9px;
    z-index: 2;

    transition: all .1s linear;
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
}

button.playGame-btn img.btn_shadow
{
    width: calc(100% + 25px);
    height: 121px;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: -11px;
    bottom: 0;
    right: 0;
    transform: translateX(-50%);
    z-index: -3;
}

p.playGame-btn-shadow, 
p.playGame-btn-text {
    font-size: 52px;
    font-family: Friz-Quadrata;
    font-weight: bold;
    position: absolute;
}

p.playGame-btn-shadow {
    text-shadow: 2px 4px 2px rgb(90, 36, 20);

    top: 6px;
    left: -4px;
    right: 0;
    bottom: 0;
    
    pointer-events: none;

    z-index: 1;
    /* Firefox fix */
    @-moz-document url-prefix() {
        top: 0;
    }
}

p.playGame-btn-text {
    top: 6px;
    left: 0;
    right: 0;
    bottom: 0;
    
    background: linear-gradient(
        to bottom,
        #d4af37 0%,
        #d4af37 25%,
        #f9f2b0 50%,
        #d4af37 60%,
        #d4af37 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
        
    z-index: 2;
    /* Firefox fix */
    @-moz-document url-prefix() {
        top: 0;
    }
}

.ce-image_float-left
{
    float: left;
    margin-right: 15px !important;
}

.ce-image_float-right
{
    float: right;
    margin-left: 15px !important;
}

/* DIVIDER */
.divider
{
    width: 100%;
    height: 181px;

    background: #000000;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 25%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.5) 75%, rgba(255, 255, 255, 0) 100%);

    position: absolute;
}

.divider::after
{
    content: "";
    width: 100%;
    height: 29px;
    background-image: url("/static/img/divider_3_2.d0f6d65b0cf4.png"),url("/static/img/divider_5.774dc0a52233.png");
    background-position: center 0px, 0px 0px;
    /* background-position: center 0px, 0 -5px; */
    background-repeat: no-repeat, repeat-x;
    background-size: auto 26px;
    /* background-size: 124px 26px, 100% 48px; */
    /* background-position: center -5px, 0 -5px;
    background-repeat: no-repeat, repeat-x;
    background-size: contain; */

    position: absolute;
    /* bottom: -15px; */
    bottom: -23px;
}

/* MEDIA QUERIES */
@media (hover: hover) {
    .secondary-menu:hover {
        background-color: var(--hover-color);
    }
    .primary-menu_list-item:hover a, .sidebar-item:hover a{
        color: var(--link-color);
    }
}

@media screen and (max-width: 500px) {
    #cookieBar .cc-bar-col {
        width: 100% !important;
    }

    #cookieBar a.cc-bar-btn {
        width: 100% !important;
    }
}

@media screen and (max-width: 932px) and (orientation: landscape) {
    .main-site-navbar
    {
        width: 100% !important;
        height: 56px !important;
        top: 0;
        border-radius: 0;
    }
}

@media screen and (max-width: 926px) {
    ul.main-footer_list {
        font-size: 10px;
    }
    .main-site-navbar .logo-section {
        height: calc(100% - 5px);
    }
    .main-site-navbar .logo-section::after {
        display: none;
    }
    .primary-menu {
        display: none;
    }
    .secondary-account-section span {
        display: none;
    }
    .secondary-menu.active .dropdown-menu {
        right: -5px;
    }
    .secondary-menu.active .dropdown-arrow {
        right: 33px;
    }
}

@media screen and (min-width: 927px) {
    .main-site-navbar .logo-section {
        pointer-events: none;
    }
}

@media only screen and (max-width: 991px) {
    #cookieBar {
        border-radius: var(--border-radius) !important;
    }
}