@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-12-01
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Body
    02. Header
    03. Container
    04. Footer
    05. Media queries
---------------------------------------------------
*/

/* ------------------------------
 * Body
------------------------------ */
body.main {opacity: 0}
body.main.load {opacity: 1; transition: opacity .3s}

/* ------------------------------
 * Header
------------------------------ */
#header {position: fixed; top: 0; left: 0; right: 0; height: 82px; border-bottom: 1px solid transparent; z-index: 1000; transition: height .3s, border-color .3s, background-color .3s}
#header .container {height: 100%}
#header .inner-content {display: flex; width: 100%; height: 100%; align-items: center}
#header .inner-content .logo {display: inline-flex}
#header .inner-content .logo a {display: block; width: 216px; padding-bottom: 17.1296296296%; background-image: url(../images/common/logo_white.svg); background-size: 100%; background-position: center; background-repeat: no-repeat; transition: background-image .3s}
#header .inner-content .navbar {font-size: 0; margin-left: 92px}
#header .inner-content .navbar > li {display: inline-flex; padding: 0 24px; align-items: flex-start}
#header .inner-content .navbar > li > a {display: block; font-size: 16px; font-weight: 700; color: #fff; transition: color .3s}
#header .inner-content .navbar > li > a.active {font-weight: 800; color: #ffb42b !important}
#header .inner-content .sidemenu {display: inline-flex; font-size: 0; margin-left: auto; align-items: center}
#header .inner-content .sidemenu .service-items, #header .inner-content .lang-selector {display: inline-flex}
#header .inner-content .sidemenu .service-items {font-size: 0}
#header .inner-content .sidemenu .service-items > a {display: inline-block; font-size: 16px; font-weight: 500; color: #fff; transition: color .3s}
#header .inner-content .sidemenu .service-items > a + a::before {content: '|'; display: inline-block; font-weight: normal; margin: 0 12px; vertical-align: 0}
#header .inner-content .sidemenu .lang-selector {position: relative; margin-left: 45px}
#header .inner-content .sidemenu .lang-selector .button-select {position: relative; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 17px 4px 4px; border: 0; background-color: transparent; cursor: pointer; outline: 0; transition: color .3s}
#header .inner-content .sidemenu .lang-selector .button-select::after {content: ''; position: absolute; top: 50%; right: 0; margin-top: -2px; border: 4px solid transparent; border-top-color: #fff; transition: border-color .3s}
#header .inner-content .sidemenu .lang-selector .lang-dropdown-items {display: none; position: absolute; top: 100%; left: -10px; padding: 6px; border: 1px solid #e5e5e5; background-color: #fff; box-shadow: 0 0 4px rgba(0,0,0,.1)}
#header .inner-content .sidemenu .lang-selector .lang-dropdown-items li a {display: block; font-size: 12px; font-weight: 700; color: #e5e5e5; line-height: 1.16; padding: 6px}
#header .inner-content .sidemenu .lang-selector .lang-dropdown-items li a.active, #header .inner-content .sidemenu .lang-selector .lang-dropdown-items li a:hover {color: #191f28}
#header.light-bg, #header.nav--open, body:not(.main) #header {border-color: rgba(204,204,204,.5); background-color: #fff}
#header.light-bg .logo a, #header.nav--open .logo a, body:not(.main) #header .logo a {background-image: url(../images/common/logo_black.svg)}
#header.light-bg .inner-content .navbar > li > a, body:not(.main) #header .inner-content .navbar > li > a {color: #191f28}
#header.light-bg .inner-content .sidemenu .service-items > a, body:not(.main) #header .inner-content .sidemenu .service-items > a {color: #191f28}
#header.light-bg .inner-content .sidemenu .lang-selector .button-select, body:not(.main) #header .inner-content .sidemenu .lang-selector .button-select {color: #191f28}
#header.light-bg .inner-content .sidemenu .lang-selector .button-select::after, body:not(.main) #header .inner-content .sidemenu .lang-selector .button-select::after {border-top-color: #191f28}

/* ------------------------------
 * Container
------------------------------ */
#container {overflow: hidden}
body:not(.main) #container {padding-top: 82px}

/* ------------------------------
 * Footer
------------------------------ */
#footer {padding-top: 67px; padding-bottom: 130px; background-color: #000}
#footer .footer-top {display: flex; margin-bottom: 130px; align-items: center; justify-content: space-between}
#footer .footer-top .logo p {width: 216px; padding-bottom: 17.1296296296%; background-image: url(../images/common/logo_white.svg); background-size: 100%; background-position: center; background-repeat: no-repeat}
#footer .footer-top .footer-nav {font-size: 0}
#footer .footer-top .footer-nav > a {display: inline-block; font-size: 16px; font-weight: 700; color: #bababa; line-height: 1.1875}
#footer .footer-top .footer-nav > a + a {margin-left: 48px}
#footer .footer-bottom address {font-weight: 500; color: #6d6d6d; line-height: 2.1134; font-style: normal; margin-bottom: 34px}
#footer .footer-bottom address em {display: inline-block; font-style: normal; margin: 0 10px}
#footer .footer-bottom .term-link-items {font-size: 0}
#footer .footer-bottom .term-link-items > a {display: inline-block; font-size: 16px; font-weight: 700; color: #6d6d6d; text-decoration: underline !important}
#footer .footer-bottom .term-link-items > a + a::before {content: '|'; display: inline-block; font-weight: 700; margin: 0 10px}

/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 992px) {
    #header .button-hamburger {display: none}
    #header .mobile-navbar {display: none !important}

    body.page--membership #header {display: none}
}

@media (max-width: 1199px) {
    #header .inner-content .logo a {width: 180px}
    #header .inner-content .navbar {margin-left: 64px}
    #header .inner-content .sidemenu .service-items > a {font-size: 14px}
}

@media (max-width: 991px) {
    #header {height: 67px}
    #header .inner-content .logo a {width: 137px}
    #header .inner-content .navbar {display: none}
    #header .inner-content .sidemenu {display: none}

    #header .button-hamburger {position: relative; width: 18px; height: 12px; margin-left: auto; padding: 0; border: 0; background-color: transparent; cursor: pointer; outline: 0}
    #header .button-hamburger > .line {position: absolute; display: block; left: 0; right: 0; height: 2px; background-color: #fff}
    #header .button-hamburger > .line:nth-child(2) {top: 0}
    #header .button-hamburger > .line:nth-child(3) {top: 50%; margin-top: -1px}
    #header .button-hamburger > .line:nth-child(4) {bottom: 0}
    #header.light-bg .button-hamburger > .line, #header.nav--open .button-hamburger > .line {background-color: #191f28}
    #header.nav--open {border-color: rgba(204,204,204,.5)}
    #header.nav--open .button-hamburger > .line:nth-child(2) {top: 50%; margin-top: -1px; transform: rotate(45deg)}
    #header.nav--open .button-hamburger > .line:nth-child(3) {opacity: 0}
    #header.nav--open .button-hamburger > .line:nth-child(4) {top: 50%; margin-top: -1px; transform: rotate(-45deg)}

    #header .mobile-navbar {display: none; position: absolute; top: calc(100% + 1px); height: calc(100vh - 100% + 1px); left: 0; right: 0; z-index: 100}
    #header .mobile-navbar .backdrop {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.4); z-index: 10}
    #header .mobile-navbar nav {display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 20}
    #header .mobile-navbar nav > ul > li > a {display: flex; font-size: 16px; font-weight: 700; color: #191f28; line-height: 1.1875; padding: 0 26px; height: 60px; border-bottom: 1px solid rgba(204,204,204,.5); background-color: #fff; align-items: center}
    #header .mobile-navbar nav > ul > li > a.active {font-weight: 800; color: #ffb42b}

    body:not(.main) #header .button-hamburger > .line {background-color: #191f28}
    body:not(.main) #container {padding-top: 67px}
    body.page--membership #header {border-bottom-color: transparent}
}

@media (max-width: 767px) {
    #footer {padding-top: 26px; padding-bottom: 30px}
    #footer .footer-top {margin-bottom: 33px}
    #footer .footer-top .logo p {width: 137px}
    #footer .footer-top .footer-nav {display: none}
    #footer .footer-bottom address {font-size: 14px; line-height: 1.7734; margin-bottom: 30px}
    #footer .footer-bottom .term-link-items > a {font-size: 14px}
}