/*===========================================================
 Custom Variable
============================================================*/
:root
{
    /* Hamber menu icon style */
    --hamWidth: 40px;
    --hamHeight: 4px;
    --hamMargin: 6px;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate: 10px;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate3: -10px;
    --hamBg: #393939;
    /*  */
    --header-height: 0;
    /*  */
    --white: #fff;
    --black: #000;
    --yellow: #ffce00;
    --blue: #29d3a2;
    /* --sm: 16px; */
    --xl: 76px;
    --xl2: 56px;
    --lg3: 48px;
    --lg2: 40px;
    --lg1: 36px;
    --lg: 30px;
    --md: 22px;
    --md1: 24px;
    --md2: 18px;
    --xs1: 16px;
    --xs: 14px;

    /* padding */
    --sectionPadding: 100px;
}

@font-face
{
    font-family: "Stravinsky";
    src: url("../fonts/Stravinsky-Regular.eot");
    src: url("../fonts/Stravinsky-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Stravinsky-Regular.woff2") format("woff2"),
        url("../fonts/Stravinsky-Regular.woff") format("woff"),
        url("../fonts/Stravinsky-Regular.ttf") format("truetype"),
        url("../fonts/Stravinsky-Regular.svg#Stravinsky-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*===========================================================
 Common CSS
============================================================*/

body
{
    font-family: "Inter", sans-serif;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    overflow-x: hidden !important;
}

*
{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul,
ol
{
    padding: 0;
    margin: 0;

    position: relative;
    padding-left: 34px;
    margin: 0 0 17px;
    letter-spacing: 0.01em;
    line-height: 1.7em;
}

a {
    color: var(--blue);
}

li,
li:hover,
a:hover,
.btn,
.btn:hover
{
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a:hover
{
    text-decoration: none !important;
}

*:active,
*:focus
{
    outline: none;
    border: 0;
}

img
{
    max-width: 100%;
    height: auto;
}

strong
{
    font-weight: 700;
}

u
{
    border-bottom: 1px solid var(--white);
    line-height: 1;
    text-decoration: unset;
}

.cboth
{
    overflow: hidden;
    clear: both;
}

.left
{
    float: left;
}

.right
{
    float: right;
}

button
{
    background-color: transparent;
    border: 0;
}

h1
{
    font-size: var(--xl2);

    font-family: "Stravinsky";
    text-transform: uppercase;
    line-height: 1.2em;
}

.special-heading {
    font-family: "Stravinsky";
    text-transform: uppercase;
}

h2
{
    font-size: var(--lg3);
    line-height: 1;
}

h3
{
    font-size: var(--lg2);
    line-height: 1.2;
}

h4
{
    font-size: var(--lg);
}

h5
{
    font-size: var(--md1);
}

h6
{
    font-size: var(--xs1);
}

button:active,
button:focus
{
    outline: 0;
    outline: 0;
}

.row
{
    --gutter-x: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x) * -0.5);
    margin-left: calc(var(--gutter-x) * -0.5);
}

.row > *
{
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col
{
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.col-1
{
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12
{
    width: 100%;
}

.container
{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1320px;
}

/*===========================================================
 Placeholder Style
============================================================*/

::-webkit-input-placeholder
{
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.39px;
}

:-moz-placeholder
{
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.39px;
}

::-moz-placeholder
{
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.39px;
}

:-ms-input-placeholder
{
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.39px;
}

/*===========================================================
 Scroll To Top
============================================================*/

.go-top
{
    bottom: 15px;
    display: none;
    position: fixed;
    right: 15px;
    z-index: 999;
}

.go-top img
{
    width: 35px;
    background: var(--white);
    border-radius: 50%;
    border: 1px solid var(--white);
}

.go-top span
{
    /*background-color: #4285F4;*/
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    float: right;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 22px;
    padding: 5px 10px;
}

.go-top span:hover
{
    color: var(--white);
}

.footer-nav ul li a::after
{
    content: "";
    position: absolute;
    top: 4px;
    left: calc(100% + 10px);
    width: 28px;
    height: 11px;
    background: url(../i/footer-arrow.svg) no-repeat;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/*===========================================================
Loader
===========================================================*/

.preloader
{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    z-index: 99999999;
}

.spinner
{
    width: 80px;
    height: 80px;
    border: 2px solid #f3f3f3;
    border-top: 3px solid #58b8cb;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: 1s infinite spin;
    animation: 1s infinite spin;
}

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin
{
    from
    {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loading-msg
{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 25px;
    text-align: center;
    color: #333;
    font-size: 0.8em;
}

/*===========================================================
 Navigation Menu Desktop
============================================================*/
header
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 10;
    text-align: center;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    z-index: 999;
}

body.admin-bar header {
    top: 32px;
}

header.hide-header
{
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.heading-padding
{
    margin-top: 173px;
}

.logo-area
{
    padding: 20px 0;
}

.logo-area a:hover {
    opacity: 0.7;
}

.header-area
{
    padding: 25px 0;
    border-top: 1px solid #d1d2dd;
    border-bottom: 1px solid #d1d2dd;
}

.header
{
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu-left
{}

.menu-left span
{
    font-size: var(--md1);
    font-weight: 600;
    line-height: 1;
    color: var(--yellow);
}

.menu-left a
{
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 10px;
}

.menu
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu .active
{
    color: var(--blue);
}

.menu ul
{
    margin: 0;
    padding: 0 !important;
}

.menu ul li
{
    list-style: none;
    display: inline-block;
    margin: 0 !important;
}

.menu ul li a
{
    font-weight: 600;
    font-size: var(--md2);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: #000;
    text-decoration: none;
}

.dropdown-menu
{
    margin: 0 !important;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.menu-nav
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 28px;
}

.header
{
    position: relative;
}

.header select
{
    position: absolute;
    right: 0;
    font-weight: 600;
    font-size: var(--md2);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: #000;
    border: 0;
    cursor: pointer;

    width: 55px;
}

/*===========================================================
 Navigation Menu slideout
============================================================*/
main .mobileMenuOpener
{
    display: none;
}

.panel-header
{
    display: none;
}

.slideout-menu
{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left
{
    left: 0;
}

.slideout-menu-right
{
    right: 0;
}

.slideout-panel
{
    position: relative;
    z-index: 1;
    background-color: var(--white);
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel
{
    overflow: hidden;
}

.slideout-open .slideout-menu
{
    display: block;
}

.slideout-menu
{
    background: var(--blue);
}

.slideout-menu ul ul {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.btn-hamburger
{
    cursor: pointer;
    position: relative;
    z-index: 9999;
}

.menu-section-list
{
    padding: 25px 10px;
}

.menu-section-list li a:hover
{
    color: #bdc3c7;
}

.menu-section-list li a
{
    line-height: 2;
    color: var(--white);
}

.menu-section-list li
{
    display: block;
}

.btn-hamburger img
{
    width: 27px;
}

/*Hamburger Menu Icon*/
/* .hamburger .line {
    width: 40px;
    height: 5px;
    background-color: #34495e;
    display: block;
    margin: 8px auto;
    transition: all 0.3s ease-in-out;
} */

.hamburger:hover
{
    cursor: pointer;
}

.hamburger:hover .line
{
    opacity: 0.8;
}

/*===========================================================
 Hamberger
===========================================================*/
.hamburger-exhibition .linex,
.hamburger .line
{
    width: var(--hamWidth);
    height: var(--hamHeight);
    background-color: var(--hamBg);
    display: block;
    margin: var(--hamMargin) auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger:hover
{
    cursor: pointer;
}

/* ONE */

.slideout-open .line:nth-child(2)
{
    opacity: 0;
}

.slideout-open .line:nth-child(1)
{
    -webkit-transform: translateY(var(--hamTranslate)) rotate(45deg);
    -ms-transform: translateY(var(--hamTranslate)) rotate(45deg);
    transform: translateY(var(--hamTranslate)) rotate(45deg);
}

.slideout-open .line:nth-child(3)
{
    -webkit-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    -ms-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    transform: translateY(var(--hamTranslate3)) rotate(-45deg);
}

/* ONE */

.is-open .linex:nth-child(2)
{
    opacity: 0;
}

.is-open .linex:nth-child(1)
{
    -webkit-transform: translateY(var(--hamTranslate)) rotate(45deg);
    -ms-transform: translateY(var(--hamTranslate)) rotate(45deg);
    transform: translateY(var(--hamTranslate)) rotate(45deg);
}

.is-open .linex:nth-child(3)
{
    -webkit-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    -ms-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    transform: translateY(var(--hamTranslate3)) rotate(-45deg);
}

.menu ul li .dropdown-menu li
{
    display: block;
    position: relative;
}

.menu ul li .dropdown-menu li a
{
    padding: 8px 15px;
    line-height: 1.2;
    display: block;
}

.dropdown-menu
{
    margin: 0;
    border: 0;
    border-radius: 0;
}

.dropdown a
{
    position: relative;
}

.dropdown > a:hover::after
{
    color: var(--black);
}

.dropdown > a::after
{
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/*===========================================================
Banner Area
===========================================================*/

.parallax-container
{
    height: 500px;
    width: 100%;
}

.parallax-container + .maincontent > .container > .wpb-content-wrapper > .vc_row:first-of-type {
    padding-top: 0 !important;
}

.banner-area
{
    width: 100%;
    height: 545px;

    text-decoration: none !important;;
}

.banner-area > .container,
.banner-area > .container > .row,
.banner-area > .container > .row > .col-12,
.banner-area > .container > .row > .col-12 > .banner-inner {
    height: 100%;
}

.banner-area .banner-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;

    padding-bottom: 50px;
}

.banner-area .banner-inner .breadcrumbs-area.heading-padding {
    margin-top: 0 !important;
}

.banner-area .col-12 {
    display: flex;
    align-items: center;
}

.banner-area .banner-inner {
    width: 100%;
}

.banner
{
    max-width: 800px;
    width: 100%;
}

.banner p
{
    margin: 0;
    font-weight: 800;
    font-size: var(--md);
    line-height: 1.4em;
    letter-spacing: 0.01em;
    color: #393939;
    margin: 27px 0 0;
    max-width: 650px;
    width: 100%;
}

.parallax-container {
    position: relative;
    overflow: hidden;
    height: 675px;
    max-height: 100vh;
    width: 100%;
}

.parallax.banner-area {
    display: block;

    position: relative;
    overflow: hidden;
    height: 100%;
}

.parallax-img {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-inner,
.banner,
.play-btn-box {
    position: relative;
    z-index: 1;
}

.banner-inner .play-btn-box {
    margin-top: auto;
}


/*===========================================================
 Info Area
===========================================================*/
.info-area
{
    padding: 145px 0;
}

.info-inner
{}

.info-left,
.info-right
{
    width: 55%;
}

.info-right
{
    margin-left: auto;
    margin-top: 60px;
}

.info-right p
{
    font-weight: 300;
    font-size: var(--md);
    line-height: 1.45em;
    letter-spacing: 0.01em;
    color: #393939;
    border-top: 1px solid #000;
    padding-top: 30px;
}

.info-right a
{
    display: inline-block;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.2em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #393939;
    margin-top: 20px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--blue);
    -webkit-transition: border 0.3s ease, color 0.3s ease;
    -o-transition: border 0.3s ease, color 0.3s ease;
    transition: border 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

/*===========================================================
 Slider
===========================================================*/
.news-area
{
    padding: 200px 0;
}

.news-title
{
    margin-bottom: 60px;
}

.container
{
    position: relative;
}

.slick--visual .slick-list {
    overflow: visible;
}

.slick--visual__paging
{
    position: absolute;
    top: 10vh;
    left: 8%;
    letter-spacing: 2px;
    font-size: 100%;
    z-index: 2;
}

.slick--visual__paging .slick-dots li
{
    display: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #555;
}

.slick--visual__paging .slick-dots li.slick-active
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.slick--visual__paging .slick-dots li.slick-active span:first-of-type
{
    color: #fc919b;
}

.slick--visual
{}

.slick--visual .slick-list,
.slick--visual .slick-track
{
    height: 100%;
}

.slick--visual .slick-slide:first-of-type > .news-card {
    padding-left: 0;
}

.slick-slide
{
    position: relative;
    height: 100%;
}

.slick-slide img
{}

.slick-slide .visual__txt
{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fc919b;
}

.slick-slide .visual__txt .visual__txt__tit
{
    margin-bottom: 2rem;
    font-size: 7rem;
}

.slick-slide .visual__txt .visual__txt__desc
{
    font-size: 2rem;
}

.slick--visual__etc
{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% - 45px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 2;

    margin-top: 35px;
}

.slick--visual__etc .visual__arrows
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    font-size: 2rem;
    gap: 50px;
    position: absolute;
    top: -14px;
    right: 0;
}

.slick-arrow:hover path
{
    fill: var(--blue);
}

.slick--visual__etc .visual__arrows .visual-prev,
.slick--visual__etc .visual__arrows .visual-next
{
    border: 0;
    background: none;
    font-size: 2rem;
    cursor: pointer;
}

.slick--visual__etc .visual__arrows .visual-prev:hover,
.slick--visual__etc .visual__arrows .visual-next:hover
{
    fill: #3fffc7;
}

.slick--visual__etc .visual__arrows .visual-next:hover
{
    fill: #3fffc7;
}

.slick--visual__etc .visual__progress
{
    height: 4px;
    background-color: #ddd;
    background-repeat: no-repeat;
    background-image: -o-linear-gradient(left, #555, #555);
    background-image: -webkit-gradient(linear, left top, right top, from(#555), to(#555));
    background-image: linear-gradient(to right, #555, #555);
    z-index: 2;
    width: calc(100% - 200px);
}

.news-card-text a,
.news-card-text p
{
    font-weight: 600;
    font-size: var(--md1);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: #282828;
    margin: 0;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
}

.news-card-img img
{
    width: 100%;
}

.slick--visual .slick-slide.even .news-card-img img {
    aspect-ratio: 36 / 26;
    object-fit: cover;
    object-position: center;
}

.news-card
{
    padding: 0 12px;
}

time
{
    background: #282828;
    padding: 4px 10px;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.3em;
    color: #3fffc7;
}

.news-card-img time {
    position: absolute;
    top: 16px;
    right: 16px;
}

/*===========================================================
 Materials-wars
===========================================================*/
.materials-area
{
    padding: 150px 0;
}

.materials-item
{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 44px 27px 31px 30px;
    min-height: 430px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.materials-area a
{
    color: #2b2e33;
    outline: none !important;
    text-decoration: none;
}

.blue-item
{}

.materials-item .title
{
    font-weight: 700;
    font-size: var(--lg2);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: #393939;
    margin: 0;
    position: relative;
    z-index: 91;
}

.materials-item .bottom-box .item
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px 8px;
    background: #282828;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.3em;
    letter-spacing: 0.03em;
    color: #fff;
    margin: 0 10px 10px 0;
}

.materials-item .line
{
    color: rgba(255, 255, 255, 0.4);
    margin: 0 8px;
    font-weight: 400;
}

.dark .title
{
    color: #fff;
}

.materials-item .bottom-box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-right: -10px;
    position: relative;
    z-index: 91;
}

.materials-card
{
    width: calc(50% - 13px);
}

.materials-inner
{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 25px 0;
}

/*===========================================================
 Different-wars
===========================================================*/
.different-wars-area
{
    min-height: 630px;
    position: relative;
}

.bg-elem {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.bg-elem1,
.bg-elem-green-1 {
    background: rgba(0, 255, 200, 0.1);
    mix-blend-mode: lighten;
    z-index: 12;
}

.bg-elem2,
.bg-elem-green-2 {
    background: rgba(0, 255, 200, 0.8);
    mix-blend-mode: lighten;
    z-index: 11;
}

.bg-elem3,
.bg-elem-green-3 {
    background: rgba(0, 255, 200, 0.7);
    mix-blend-mode: screen;
    z-index: 10;
}

.bg-elem-red-1 {
    background: rgba(105, 8, 8, 1);
    mix-blend-mode: overlay;
    z-index: 12;
}

.bg-elem-red-2 {
    background: rgba(50, 18, 18, 0.5);
    mix-blend-mode: hard-light;
    z-index: 11;
}

.bg-elem-red-3 {
    background: rgba(164, 25, 25, 0.2);
    mix-blend-mode: lighten;
    z-index: 10;
}

.bg-elem + .container {
    z-index: 30;
}

.different-wars
{}

.different-wars h2
{
    font-size: 7rem;
    line-height: 1;
    margin-bottom: 50px;
    color: var(--hamBg);
}

/*===========================================================
Events Area
===========================================================*/

.events-area
{
    padding: 200px 0;
}

.events-title
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 62px;
}

.events-title a
{
    display: inline-block;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.2em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #393939;
    margin-top: 20px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--blue);
    -webkit-transition: border 0.3s ease, color 0.3s ease;
    -o-transition: border 0.3s ease, color 0.3s ease;
    transition: border 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.events-card a
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 25px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 32px 16px 32px 0;
    border-bottom: 1px solid #393939;
    position: relative;
    text-decoration: none;
}

.events-card a:hover .events-text span
{
    border-bottom: 3px solid #000;
}

.events-card a > img {
    width: 190px;
    object-fit: cover;
}

.arrow-box
{
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.events-card:first-child
{
    border-top: 1px solid #393939;
}

.events-date p
{
    display: block;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.3em;
    color: #47484e;
}

.events-date
{
    max-width: 320px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 8px;
}

.events-date h3
{
    font-size: var(--lg2);
    letter-spacing: 0.01em;
    font-weight: 700;
    line-height: 1.2em;
    max-width: 688px;
    color: #282828;
}

.events-text
{
    max-width: 570px;
    width: 100%;
}

.events-text h3
{
    color: #000;
    font-size: var(--lg);
    letter-spacing: 0.01em;
    font-weight: 700;
}

.events-text p
{
    color: #000;
    margin: 0;
}

.events-card .arrow-box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 77px;
    margin-left: auto;
    -webkit-transition: margin-right 0.3s ease;
    -o-transition: margin-right 0.3s ease;
    transition: margin-right 0.3s ease;
}

.events-card a:hover .arrow-box
{
    margin-right: 63px;
}

.events-card a:hover .arrow-box svg path
{
    fill: var(--blue);
}

/*===========================================================
Footer
===========================================================*/
.footer-area
{
    background: #393939;
    padding: 77px 0 39px;
    position: relative;

    z-index: 100;
}

.footer-inner
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.footer-right
{
    width: 35%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 15px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.footer-right a
{
    text-transform: uppercase;
    display: inline-block;
}

.footer-left
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 55%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer-menu
{}

.footer-menu ul
{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.footer-menu ul li
{
    list-style: none;
}

.footer-right a,
.footer-menu ul li a
{
    font-size: var(--xs);
    line-height: 1.2em;
    color: #fff;
    padding-bottom: 1px;
    border-bottom: 1px solid #3fffc7;
    text-decoration: none;
    position: relative;
}

.footer-menu ul li a::after
{
    content: "";
    position: absolute;
    top: 4px;
    left: calc(100% + 10px);
    width: 28px;
    height: 11px;
    background: url(../img/footer-arrow.svg) no-repeat;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.footer-menu ul li a:hover::after
{
    opacity: 1;
    visibility: visible;
}

.footer-menu
{
    width: 400px;
}

.address
{}

.address address
{
    font-size: var(--xs);
    line-height: 1.2em;
    color: #fff;
    font-style: normal;
    margin-bottom: 25px;
}

.address a
{
    font-size: var(--xs);
    line-height: 1.2em;
    color: #fff;
    padding-bottom: 1px;
    border-bottom: 1px solid #3fffc7;
    text-decoration: none;
}

.footer-bottom
{
    border-top: 1px solid #000;
    padding-top: 40px;
    margin-top: 140px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.footer-bottom .copy {
    flex-direction: row;
}

.footer-bottom .copy ul {
    padding: 0 !important;
    margin: 0 !important;
}

.footer-bottom .copy ul li {
    display: inline-block;
}

.footer-bottom .copy,
.footer-bottom .copy a
{
    font-weight: 400;
    font-size: var(--xs);
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.footer-bottom .copy a
{
    position: relative;
    margin-left: 10px;
    padding-left: 10px;

    display: block;
}

.footer-bottom .copy a:before
{
    position: absolute;
    content: "";
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.7);
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.footer-bottom div
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px 0;
}

.footer-bottom div p
{
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 7px;
    margin: 0;
    font-size: 12px;
}

#arrow-cursor
{
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 47px;
    height: 18px;
    pointer-events: none;
    -webkit-transition: opacity 0.15s linear, -webkit-transform 0.05s linear;
    transition: opacity 0.15s linear, -webkit-transform 0.05s linear;
    -o-transition: opacity 0.15s linear, transform 0.05s linear;
    transition: opacity 0.15s linear, transform 0.05s linear;
    transition: opacity 0.15s linear, transform 0.05s linear, -webkit-transform 0.05s linear;
    transition: opacity 0.15s linear, transform 0.05s linear,
        -webkit-transform 0.05s linear;
    opacity: 0;
}

#arrow-cursor.visible
{
    opacity: 1;
}

#iquad:before
{
    content: "";
    position: absolute;
    z-index: -1;
    left: -4px;
    bottom: 0;
    right: -4px;
    height: 3px;
    background: #63c3ce;
    background: -o-linear-gradient(left, #f5ea38 0%, #1db7c1 100%);
    background: -webkit-gradient(linear, left top, right top, from(#f5ea38), to(#1db7c1));
    background: linear-gradient(90deg, #f5ea38 0%, #1db7c1 100%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.format
{
    padding: 4px 10px;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.3em;
    width: 88px;

    color: var(--black);
}

.format.offline {
    color: #fff;
    background: var(--blue);
}

/*===========================================================
 Lesson Materials
===========================================================*/
.breadcrumbs-area
{
    padding: 25px 0;
    z-index: 1;
}

#breadcrumbs
{
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;

    font-weight: bold;
}

#breadcrumbs {
    display: flex !important;
    align-items: center;
    gap: 20px;

    color: var(--blue);
}

#breadcrumbs a
{
    text-decoration: none;
    color: #393939;

    font-weight: normal;
}

#breadcrumbs a,
#breadcrumbs span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 350px;
    flex: 0 1 auto;
    min-width: 0;
}

#breadcrumbs span
{
    color: #47484e;
    opacity: 0.5;
    pointer-events: none;
}

.breadcrumbs #breadcrumbs a:hover {
    color: var(--blue);
}

.beginning-lesson
{
    background-image: url(../img/lesson-material-bg.jpeg);
    padding-bottom: 200px;
    display: block;
}

.lesson-title
{
    text-align: center;
}

.lesson-title h1:after
{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 164px;
    height: 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #00ffc8;
}

.lesson-title p
{
    font-weight: 300;
    font-size: var(--md);
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 0.01em;
    color: #393939;
    margin-top: 25px;
    padding-bottom: 20px;
}

.download-lesson-box
{
    margin-top: 25px;
    text-align: right;
}

.download-lesson-box .bttn
{
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: unset !important;
    gap: 10px;
    padding: 12px 15px !important;
}

.download-lesson-box .bttn span
{
    border-bottom: 1px dashed #393939 !important;
}

.download-lesson-box .bttn:hover span
{
    border-bottom: 1px dashed transparent !important;
}

.lesson-title .bttn
{
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.5em;
    text-align: center;
    letter-spacing: 0.03em;
    color: #393939;
    text-transform: uppercase;
    max-width: 100%;
    padding: 12px 50px 11px;
    background: #3fffc7;
    border: 2px solid #3fffc7;
    -webkit-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    transition: background 0.2s ease;
    text-decoration: none;
}

.lesson-title .bttn:hover
{
    border: 2px solid #3fffc7;
    background: transparent;
}

.lesson-text
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 70px;
}

.lesson-text div
{
    max-width: calc(50% - 25px);
    width: 100%;
}

.lesson-text div p
{
    color: #47484e;
    font-size: 17px;
}

/* ==============================================
world-war
===============================================*/
.materials-list-area
{
    padding-bottom: 200px;
}

.world-war-title h1
{
    font-size: 84px;
    text-transform: math-auto;
}

.materials-list-title
{
    margin-bottom: 50px;
}

.materials-list
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 100px 0;
}

.materials-list .item
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.materials-list .item .img-box
{
    position: relative;
    display: block;
    padding-bottom: 32.793%;
    max-width: calc(50% - 50px);
    width: 100%;
    min-height: 300px;
    background: #00ffc8;
}

.materials-list .item .img-box .img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    z-index: 10;
}

.materials-list .item .text-box
{
    max-width: calc(50% - 50px);
    width: 100%;
}

.materials-list .item .text-box .top-box span
{
    display: inline-block;
    font-weight: 700;
    font-size: var(--xs1);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: #393939;
    padding: 2px 16px 2px 0;
    border-right: 1px solid #393939;
    margin-right: 12px;
}

.materials-list .item .text-box .top-box span:last-child
{
    margin: 0;
    padding: 0;
    border: 0;
}

.materials-list .item .text-box .title
{
    margin: 25px 0;
}

.materials-list .item .text-box .title span
{
    display: inline-block;
    padding: 8px;
    font-weight: 600;
    font-size: var(--md1);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: var(--blue);
    background: #393939;
}

.materials-list .item .text-box .text
{
    font-size: var(--xs1);
    line-height: 1.7em;
    letter-spacing: 0.01em;
    color: #282828;
    margin-bottom: 20px;
}

.materials-list .item .text-box ul
{
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 17px 0;
}

.materials-list .item .text-box ul li
{
    list-style: none;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.materials-list .item .text-box ul li a
{
    color: #2b2e33;
    outline: none !important;
    text-decoration: none;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    max-width: calc(100% - 100px);
    width: 100%;
}

.materials-list .item .text-box ul li span
{
    max-width: 100px;
    display: inline-block;
    width: 100%;
}

.materials-list .item .text-box ul li a img
{
    margin-left: 8px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease,
        margin 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease;
    position: absolute;
    right: 0;
}

.materials-list .item .text-box ul li a span
{
    max-width: 100%;
}

.materials-list .item .text-box ul li a:hover img
{
    margin-left: 18px;
    opacity: 1;
    visibility: visible;
}

.materials-list .bg-elem3
{
    background: rgba(0, 255, 200, 0.7);
    mix-blend-mode: screen;
}

.materials-list .bg-elem2
{
    background: rgba(0, 255, 200, 0.8);
    mix-blend-mode: lighten;
}

.show-more-box .hide-box
{
    display: none;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.show-more-box .hide-box.active
{
    display: block;
    visibility: visible;
}

.show-more-box
{
    max-width: 1000px;
    width: 100%;
    margin: 100px auto;

}

.show-btn-box
{
    text-align: center;
}

.show-more-btn
{
    text-align: center;
    font-weight: 600;
    font-size: var(--xs1);
    line-height: 1.2em;
    color: #393939;
    margin: 0;
    padding-bottom: 2px;
    cursor: pointer;
    border-bottom: 1px dashed #393939;
    -webkit-transition: border 0.3s ease;
    -o-transition: border 0.3s ease;
    transition: border 0.3s ease;
    display: inline-block;
}

.authors-box h5
{
    font-size: var(--md);
    letter-spacing: 0.01em;
    margin-top: 50px;
    margin-bottom: 40px;
    font-weight: 600;
    margin-bottom: 25px;
}

.authors-box li
{
    position: relative;
    padding-left: 34px;
    margin: 0 0 17px;
    letter-spacing: 0.01em;
    line-height: 1.7em;
    list-style: none;
    font-size: var(--md2);
    position: relative;
    margin: 0;
}

.authors-box li:before
{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    left: 0;
    background: var(--blue);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*===========================================================
 About Css
===========================================================*/
.about-breadcrumbs #breadcrumbs * {
    display: block !important;
}

.about-breadcrumbs #breadcrumbs a
{
    text-decoration: none;
    color: #fff;
}

.about-breadcrumbs #breadcrumbs * {
    font-weight: bold;
}

.about-breadcrumbs #breadcrumbs span {
    color: #fff;
    opacity: 0.8;
}

.about-banner
{
    position: relative;
    height: 100% !important;
}

.about-banner:after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

.banner-inner
{
    position: relative;
    z-index: 1;
}

.play-btn
{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 0;
    width: 90px;
    height: 90px;
    padding-left: 4px;
    background: #fff;
    border-radius: 100%;
    cursor: pointer;
    -webkit-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

.play-btn:before,
.play-btn:after
{
    content: "";
    position: absolute;
    z-index: -1;
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
    background: rgba(196, 196, 196, 0.1);
    border-radius: 100%;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.play-btn:after
{
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
}

.play-btn:hover svg *
{
    /* fill: #fff; */
}

.play-btn svg
{
    width: 27px;
    height: auto;
}

.play-btn-box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 25px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.play-btn-box .video-data span
{
    display: block;
    font-weight: 700;
    color: #e3e1e1;
}

.play-btn-box .sub-data
{
    font-weight: 400 !important;
    color: #e3e1e1;
}

.about-banner .banner h1
{
    color: #fff;
}

.in-numbers-inner
{
    position: relative;
    z-index: 1;
}

.in-numbers-area
{
    padding: 140px 0;
    position: relative;

    background-position: center bottom;
}

.in-numbers-area:before
{
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    background-position: bottom;
}

.about-intro p
{
    margin: 0;
}

.in-numbers-list .item
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7em;
    color: #282828;
    padding-bottom: 31px;
    margin-bottom: 17px;
    border-bottom: 1px solid #393939;
}

.in-numbers-list .num-box
{
    font-weight: 600;
    font-size: var(--md);
    line-height: 140%;
    color: #393939;
    width: 39.6969696969697%;
}

.in-numbers-list .num
{
    font-family: "Stravinsky";
    font-weight: 400;
    font-size: 80px;
    line-height: 1.1em;
    margin: 0 16px 0 0;
}

.in-numbers-list
{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.in-numbers-list .num-wrap .sub-text
{
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: var(--md);
    line-height: 1.4em;
    padding: 0 5px;
}

.in-numbers-list .num-wrap .sub-text:before
{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 100%;
    background: #3fffc7;
}

.in-numbers-list .text-box
{
    margin: 0 0 0 auto;
    width: calc(60% - 48px);
    max-width: 688px;
}

.about-intro
{
    max-width: 1000px;
    width: 100%;
    padding-bottom: 140px;
    margin-left: auto;
    margin-right: auto;
}

.about-intro p
{}

.team-img
{
    text-align: center;
    margin-top: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 70px;
}

.employees-list
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    line-height: 1.7em;
    letter-spacing: 0.01em;
    color: #393939;
    max-width: 1200px;
    margin: 0 0 -48px;
}

.employees-list .employee-item
{
    width: calc(50% - 32px);
    margin: 0 0 48px;
}

.employees-list .name
{
    position: relative;
    font-weight: 600;
    font-size: var(--md1);
    line-height: 1.2em;
    color: #282828;
    padding-left: 45px;
}

.employees-list .name:before
{
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    height: 2px;
    width: 30px;
    background: var(--blue);
}

.logos-slider .news-card div
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 222px;
    max-height: 222px;
    min-height: 148px;
    width: 100%;
    padding: 19px;
    border: 1px solid rgba(57, 57, 57, 0.1);
    -webkit-transition: border 0.2s ease;
    -o-transition: border 0.2s ease;
    transition: border 0.2s ease;
}

.sticky-box .scroll-box
{
    height: calc(100vh - 135px) !important;
    max-height: calc(100vh - 135px) !important;
}

.placeholder-img
{
    background-image: url("../img/exhibition/exhibition-video-img.jpeg");
}

.custom-video-box
{
    position: relative;
    min-height: 220px;
    height: 300px;
    margin-top: 40px;
    margin-bottom: 40px;
    background: #000;
}

.custom-video-box .placeholder-img,
.custom-video-box iframe,
.custom-video-box video
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.custom-video-box .text-box
{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    color: #fff;
    padding: 14px 24px;
}

.text-grid
{
    margin: auto;
}

.text-grid
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.text-grid .col
{
    width: calc(50% - 15px);
}

.exhibition-nav-box
{
    position: absolute;
    width: 300px;
    /* top: 0 !important; */
    overflow-x: hidden;
    /* transition: top .5s ease; */
}

.exhibition-nav-box .inner-container {
    padding-right: 0;
}

.section-bg
{
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    z-index: 100;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
}

.section-bg .title
{
    font-weight: 800;
    font-size: 96px;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 24px;
    max-width: 838px;
}

.section-bg .subtitle
{
    font-weight: 500;
    font-size: var(--lg1);
    line-height: 1.1em;
    margin-left: 0;
}

.section-bg .text
{
    font-weight: 700;
    font-size: var(--lg1);
    line-height: 1.1em;
    margin-top: 76px;
    margin-left: 0;
}

.section-bg .copy-box
{
    max-width: 788px;
}

.exhibition-page .table-box .table-row
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid #000;
}

.exhibition-page .table-box .table-row p
{
    max-width: none;
    margin: 0 16px 0 0;
}

.exhibition-page .table-box .table-row:last-child
{
    border-bottom: 1px solid #000;
}

.two-cols-box
{
    margin-bottom: 0;
}

section
{
    position: relative;
    width: 100%;
}

.exhibition-grid
{
    width: 100%;
}

.exhibition-grid > .title
{
    margin: 0 0 70px;
}

.two-cols-box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 88px;
    gap: 10px;
}

.two-cols-box *:last-child
{
    margin-bottom: 0;
}

.two-cols-box ~ h2
{
    margin-top: 0;
}

.two-cols-box .col
{
    width: calc(50% - 16px);
}

.two-cols-box .col > *:first-child
{
    margin-top: 0;
}

.two-cols-box .col > *:last-child
{
    margin-bottom: 0;
}

.two-cols-box .small-box
{
    margin: 72px 0;
}

.two-cols-box .small-box.sticky-figure-box
{
    margin-bottom: 0;
}

.two-cols-box .col:first-child .small-box
{
    padding-right: 32px;
}

.two-cols-box .col:last-child .small-box
{
    padding-left: 32px;
}

.two-cols-box .col:first-child .small-box > *:first-child,
.two-cols-box .col:last-child .small-box > *:first-child
{
    margin-top: 0;
}

.inner-container
{
    position: relative;
    z-index: 1;
}

.custom-video-box .placeholder-img,
.custom-video-box iframe,
.custom-video-box video
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.custom-video-box .play-btn
{
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: 79px;
    height: 79px;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.play-btn:hover
{
    background: var(--blue);
}

.play-btn:hover:after
{
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}

.custom-video-box .text-box
{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    color: #fff;
    padding: 14px 24px;
}

.custom-video-box .text-box h3
{
    font-weight: 600;
    font-size: var(--md1);
    line-height: 1.3em;
    letter-spacing: 0.01em;
    margin: 0 0 5px;
    color: #fff;
}

.custom-video-box .text-box span
{
    font-size: var(--xs1);
    line-height: 1.7em;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.exhibition-grid h4
{
    font-size: 32px;
    line-height: 1.2;
    max-width: 700px;
    width: 100%;
}

.exhibition-grid p
{
    font-size: var(--xs1);
}

.title-box
{
    color: #fff;
}

.title-box h3
{
    font-weight: 500;
    font-size: var(--lg1);
    line-height: 1.1em;
    margin-left: 0;
}

.title-box p
{
    font-weight: 700;
    font-size: var(--lg1);
    line-height: 1.1em;
    margin-top: 76px;
    margin-left: 0;
}

.title-box h2
{
    font-weight: 800;
    font-size: 96px;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 24px;
    max-width: 838px;
}

.copy-box
{
    max-width: 788px;
    color: #fff;
    font-size: var(--xs1);
}

.inner-container
{
    min-height: calc(100vh + 2px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 30;
    padding: 50px;
    padding-left: 0;
}

/* .exhibition-grid {
    width: calc(100% - 217px);
    padding-left: 55px;
    margin-left: auto;
} */
.exhibition-grid
{
    width: calc(100% - 217px);
    padding-left: 0;
    margin-left: auto;
}

.exhibition-grid > *:first-child
{
    margin-top: 88px;
}

.exhibition-grid h2
{
    font-size: 48px;
    margin-bottom: 32px;
}

.exhibition-grid p
{
    font-size: var(--md2);
    line-height: 1.4;
    color: #47484e;
}

#intro .text-grid .col:last-child
{
    padding-top: 60px;
    padding-left: 30px;
}

#intro .exhibition-grid
{
    width: 100%;
}

/* Secondary Nav */
.exhibition-nav-box
{
    z-index: 100;
    /* overflow-y: scroll; */
    height: calc(100vh - 30px);
}

/* width */
.exhibition-nav-box::-webkit-scrollbar
{
    width: 2px;
}

/* Track */
.exhibition-nav-box::-webkit-scrollbar-track
{
    background: #3fffc7;
}

/* Handle */
.exhibition-nav-box::-webkit-scrollbar-thumb
{
    background: #eee;
}

/* Handle on hover */
.exhibition-nav-box::-webkit-scrollbar-thumb:hover
{
    background: #a81313;
}

.secondary-nav
{
    padding: 10px 0;
    margin: 0;
    position: relative;
}

.secondary-nav li
{
    margin-bottom: 15px;
}

.secondary-nav li a
{
    padding: 6px 10px;
}

.secondary-nav li .active,
.secondary-nav li a:hover
{
    background-color: var(--blue);
}

.secondary-nav li .active span,
.secondary-nav li a:hover span
{
    border-bottom-color: transparent;
}

.secondary-nav li .active svg,
.secondary-nav li a:hover svg
{
    opacity: 1;
    visibility: visible;
}

/*===========================================================
 Responsive Menu
===========================================================*/
@media (min-width: 1400px)
{}

@media (min-width: 992px)
{
    .dropdown:hover > a + .dropdown-menu
    {
        display: block;
    }

    .dropdown-menu .dropdown-menu
    {
        position: absolute;
        left: 100%;
        top: 0;
    }

    .dropdown .dropdown > a::after
    {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        margin-top: -4px;
    }
}

@media (max-width: 991px)
{
    #main
    {
        padding-top: 0;
    }

    .heading-padding
    {
        margin-top: 0;
    }

    .logo-area
    {
        display: none;
    }

    .header-area
    {
        display: none;
    }

    .mobile-logo
    {
        width: 200px;
    }

    .dropdown-menu
    {
        padding-top: 0;
    }

    .menu ul li .dropdown-menu li
    {
        padding-left: 10px;
    }

    .menu ul li .dropdown-menu li a
    {
        padding-left: 0;
        padding-right: 0;
    }

    .dropdown-menu
    {
        width: 100%;
        background-color: transparent;
        background-clip: padding-box;
        border: none;
        position: unset;
        top: unset;
    }

    main .mobileMenuOpener
    {
        display: block;
        position: absolute;
        width: 20px;
        height: 100%;
        z-index: 10;
    }

    .menu ul li
    {
        display: block;
    }

    .menu ul li a
    {
        color: var(--white);
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        line-height: 2;
    }

    .menu ul li:hover > a,
    .menu ul li a:focus,
    .menu ul li a:active {
        color: var(--black);
    }

    .menu ul li .dropdown-menu li a
    {
        line-height: 2;
    }

    .dropdown > a::after
    {
        right: 10px;
        position: absolute;
        top: 50%;
        margin-top: -1px;
    }

    /*Menu Activation*/
    .panel-header
    {
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: var(--white);
        -webkit-box-shadow: 0px 1px 3px #eee;
        box-shadow: 0px 1px 3px #eee;
        padding: 10px 15px;
    }
}

/*===========================================================
Containers
============================================================*/

@media (min-width: 576px)
{
    .container
    {
        max-width: 540px;
    }
}

@media (max-width: 991px)
{
    .container
    {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .container .container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px)
{
    .container
    {
        max-width: 960px;
    }
}

@media (min-width: 1200px)
{
    .container
    {
        max-width: 1140px;
    }
}

@media (min-width: 1400px)
{
    .container
    {
        max-width: 1320px !important;
    }
}

@media (max-width: 1199px)
{
    :root
    {
        --xl: 65px;
        --xl2: 50px;
        --lg2: 32px;
        --lg1: 32px;
        --lg: 27px;
        --md: 20px;
        --md1: 22px;
        --md2: 17px;
        --xs1: 16px;
        --xs: 14px;
    }

    .different-wars h2
    {
        font-size: 100px;
    }

    .materials-area
    {
        padding: 100px 0;
    }

    .news-area
    {
        padding-top: 20px;
        padding-bottom: 100px;
    }

    .events-date
    {
        max-width: 200px;
    }

    .events-card .arrow-box
    {
        margin-right: 10px;
    }

    .lesson-title h1
    {
        font-size: var(--xl);
    }

    .lesson-title h1
    {
        margin: 30px 0;
    }

    .beginning-lesson,
    .materials-list-area
    {
        padding-bottom: 120px;
    }

    .materials-list .item .img-box
    {
        max-width: calc(50% - 25px);
    }

    .materials-list .item .text-box
    {
        max-width: calc(50% - 25px);
        width: 100%;
    }

    .play-btn-box
    {
        position: relative;
        top: 110px;
    }

    .about-news
    {
        padding-bottom: 200px !important;
    }
}

@media (max-width: 991px)
{
    :root
    {
        --xl: 46px;
        --xl2: 46px;
        --lg2: 18px;
        --lg1: 32px;
        --lg: 24px;
        --md: 18px;
        --md1: 20px;
        --md2: 17px;
        --xs1: 16px;
        --xs: 14px;
    }

    .info-left,
    .info-right
    {
        width: 100%;
    }

    .info-area
    {
        padding: 100px 0;
    }

    .different-wars h2
    {
        font-size: 76px;
    }

    .materials-inner
    {
        gap: 13px 0;
    }

    .materials-card
    {
        width: calc(50% - 7px);
    }

    .news-title,
    .events-title
    {
        padding-bottom: 40px;
        margin: 0;
    }

    .news-area
    {
        padding: 50px 0;
    }

    .events-date
    {
        max-width: 100%;
    }

    .events-area
    {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .footer-left
    {
        width: 65%;
    }

    .footer-right a
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        display: inline-block;
    }

    .footer-bottom
    {
        margin-top: 70px;
    }

    .news-card-text a,
    .news-card-text p
    {
        font-size: var(--lg);
    }

    .footer-menu ul
    {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .footer-menu
    {
        width: auto;
    }

    .footer-left
    {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 60px;
    }

    .arrow-box svg
    {
        width: 45px;
    }

    .different-wars-area
    {
        min-height: 500px;
    }

    .events-date
    {
        padding-top: 0;
    }

    .lesson-title h1
    {
        margin: 60px 0;
    }

    .materials-area
    {
        padding-top: 80px;
    }

    .beginning-lesson,
    .materials-list-area
    {
        padding-bottom: 80px;
    }

    .materials-list .item .img-box
    {
        max-width: calc(50% - 10px);
    }

    .materials-list .item .text-box
    {
        max-width: calc(50% - 10px);
    }

    .about-title
    {
        line-height: 1.2;
    }

    .employees-list .employee-item
    {
        width: calc(50% - 15px);
    }

    .employee-item br
    {
        display: none;
    }

    .in-numbers-area
    {
        padding: 100px 0;
    }

    .about-intro
    {
        padding-bottom: 100px;
    }
}

@media (max-width: 767px)
{
    :root
    {
        --xl: 40px;
        --xl2: 40px;
        --lg2: 18px;
        --lg1: 30px;
        --lg: 22px;
        --md: 18px;
        --md2: 17px;
        --xs1: 16px;
        --xs: 14px;
    }

    .col-12 .col-12
    {
        padding-left: 0;
        padding-right: 0;
    }

    .copy-box,
    .title-box
    {
        padding-left: 30px;
        padding-right: 30px;
    }

    .info-area
    {
        padding: 80px 0;
    }

    .info-right
    {
        margin-top: 40px;
    }

    .different-wars h2
    {
        font-size: 58px;
    }

    .materials-card
    {
        width: 100%;
    }

    .news-area
    {
        padding-top: 0;
    }

    .events-text
    {
        max-width: 100%;
        width: 100%;
        padding-right: 50px;
    }

    .events-card .arrow-box
    {
        margin-right: 0;
    }

    .arrow-box svg
    {
        width: 30px;
    }

    .events-card a
    {
        padding: 25px 0;
    }

    .footer-right
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 35%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 15px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .footer-right
    {
        width: 100%;
        margin-top: 15px;
    }

    .footer-left
    {
        width: 100%;
    }

    .footer-bottom
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .footer-bottom div
    {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .slick--visual__etc .visual__arrows
    {
        gap: 15px;
    }

    .slick--visual__etc .visual__arrows svg
    {
        width: 40px;
    }

    .slick--visual__etc .visual__progress
    {
        width: calc(100% - 120px);
    }

    .events-area
    {
        padding-top: 120px;
    }

    .lesson-text div
    {
        max-width: 100%;
        width: 100%;
    }

    .materials-area
    {
        padding-top: 60px;
    }

    .materials-area
    {
        padding-bottom: 80px;
    }

    .lesson-title h1
    {
        margin: 20px 0;
    }

    .materials-list .item .img-box
    {
        max-width: 100%;
    }

    .materials-list .item .text-box
    {
        max-width: 100%;
        margin-top: 45px;
    }

    .materials-list .item .text-box
    {
        margin-top: 35px;
    }

    .in-numbers-list .text-box
    {
        width: calc(60% - 5px);
    }

    .in-numbers-list .num
    {
        font-size: 50px;
    }

    .team-img
    {
        margin-top: 40px;
    }

    .employees-list
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .employees-list .employee-item
    {
        width: 100%;
    }

    .team-area
    {
        padding-bottom: 70px;
    }

    .about-news
    {
        padding-bottom: 170px !important;
    }
}

@media (max-width: 575px)
{
    :root
    {
        --xl: 34px;
        --xl2: 36px;
        --lg2: 18px;
        --lg1: 27px;
        --lg: 20px;
        --md: 18px;
        --md1: 19px;
        --md2: 17px;
        --xs1: 16px;
        --xs: 14px;
    }

    .col-12
    {
        padding: 0 30px;
    }

    .different-wars h2
    {
        font-size: 42px;
        margin-bottom: 0;
    }

    .different-wars-area
    {
        height: 400px !important;
        min-height: 400px;
    }

    .slick--visual__etc .visual__arrows
    {
        gap: 20px;
    }

    .slick--visual__etc .visual__arrows svg
    {
        width: 30px;
    }

    .slick--visual__etc .visual__progress
    {
        width: calc(100% - 120px);
    }

    .slick--visual__etc
    {
        width: 92%;
    }

    .info-area
    {
        padding: 60px 0;
    }

    .materials-area
    {
        padding: 70px 0;
    }

    .materials-area
    {
        padding: 50px 0;
    }

    .lesson-title h1
    {
        margin-top: 30px;
    }

    .in-numbers-area
    {
        padding: 70px 0;
    }

    .in-numbers-list .item
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .in-numbers-list .text-box
    {
        width: 100%;
    }

    .in-numbers-list .num-box
    {
        width: 100%;
    }

    .in-numbers-list
    {
        max-width: 100%;
    }

    .play-btn
    {
        width: 70px;
        height: 70px;
        padding-left: 4px;
        border-radius: 100%;
    }

    .play-btn-box
    {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .video-data
    {
        width: calc(100% - 80px);
    }

    .play-btn-box
    {
        top: 70px;
    }

    .footer-left
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 5px 0;
    }

    .address address
    {
        margin-bottom: 10px;
    }
}

@media (max-width: 399px)
{
    :root
    {
        --xl: 32px;
        --xl2: 32px;
        --lg2: 18px;
        --lg1: 27px;
        --lg: 20px;
        --md: 18px;
        --md2: 17px;
        --xs1: 16px;
        --xs: 14px;
    }

    .different-wars h2
    {
        font-size: 38px;
    }

    .events-title
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .events-area
    {
        padding-top: 100px;
        padding-bottom: 70px;
    }

    .footer-bottom .copy a
    {
        position: relative;
        margin-left: 10px;
        padding-left: 0;
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    .footer-bottom .copy a:before
    {
        position: unset;
    }

    .footer-bottom
    {
        margin-top: 60px;
    }

    .footer-area
    {
        padding-top: 60px;
    }

    .breadcrumbs #breadcrumbs
    {
        gap: 8px;
    }

    .lesson-title .bttn
    {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .lesson-text
    {
        margin-top: 50px;
    }
}

@media (max-width: 1399px)
{
    .exhibition-nav-box
    {
        left: 20px !important;
    }
}

@media screen and (min-width: 1200px)
{
    section#intro .container
    {
        padding-left: 233px;
    }
}

@media screen and (max-width: 1199px)
{
    section#intro .container
    {
        padding-left: 217px;
    }
}

@media (min-width: 991px)
{
    .open-exhibition-menu
    {
        display: none;
    }
}

@media (max-width: 991px)
{

    /* .panel-header.hide-header {
        transform: translateY(-100%);
        transition: 0.6s;
    }
    .open-exhibition-menu.hide-header {
        transform: translateY(-170px);
        transition: 0.6s;
    } */
    body
    {
        overflow-x: hidden !important;
        position: relative;
    }

    .open-exhibition-menu
    {
        background: #fff;
        position: fixed;
        left: 0;
        top: 77.4px;
        width: 100%;
        z-index: 100;
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
    }

    body.admin-bar .open-exhibition-menu {
        top: 109.4px
    }

    /* .panel-header {
        transition: 0.6s;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    } */
    .open-exhibition-menu
    {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .hamburger-exhibition .linex
    {
        background: var(--blue);
    }

    .hamburger-exhibition
    {
        padding: 5px;
        cursor: pointer;
    }

    .open-exhibition-menu
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 10px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px;
    }

    .is-open .exhibition-nav-box
    {
        display: block;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
    }

    .exhibition-nav-box
    {
        position: fixed;
        height: calc(100vh - 68px);
        /* top: 145px; */
        top: unset;
        bottom: 68px;
        left: 0 !important;
        background: #fff;
        padding: 10px 25px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        z-index: 10000;
        -webkit-transform: translateX(-350px);
        -ms-transform: translateX(-350px);
        transform: translateX(-350px);
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
    }

    .secondary-nav li
    {
        list-style: none;
    }

    .exhibition-grid
    {
        width: 100%;
        padding-left: 0;
        margin-left: auto;
    }

    .title-box h2
    {
        font-size: 63px;
    }

    .exhibition-grid > *:first-child
    {
        margin-top: 40px;
    }

    section#intro .container
    {
        padding-left: 0;
    }
}

@media (max-width: 991px)
{
    .title-box h2
    {
        font-size: 45px;
    }

    .section .inner-container
    {
        min-height: auto;
    }

    .section-bg
    {
        height: 550px;
        min-height: 550px;
        padding: 50px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .two-cols-box .col:first-child .small-box
    {
        padding-right: 10px;
    }

    .section .inner-container
    {
        padding: 0;
    }

    .two-cols-box .col:last-child .small-box
    {
        padding-left: 0;
        margin-top: 50px;
    }

    .exhibition-grid h2
    {
        font-size: 40px;
        line-height: 1.2;
    }
}

@media (max-width: 767px)
{
    .exhibition-grid h4
    {
        font-size: 26px;
    }

    .lesson-title p
    {
        padding-top: 30px;
    }

    .custom-video-box .text-box
    {
        padding: 14px 10px;
    }

    .custom-video-box
    {
        margin-top: 40px;
    }

    .title-box h2
    {
        font-size: 39px;
    }

    .title-box p
    {
        margin-top: 45px;
    }

    .exhibition-grid h2
    {
        font-size: 30px;
    }

    .two-cols-box
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .two-cols-box .col
    {
        width: 100%;
    }

    .two-cols-box
    {
        margin-bottom: 50px;
        gap: 25px;
    }

    .section-bg
    {
        margin-top: 20px;
    }
}

@media (max-width: 575px)
{
    .text-grid
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .text-grid .col
    {
        width: 100%;
    }

    #intro .text-grid .col:last-child
    {
        padding-top: 0;
        padding-left: 0;
    }

    .two-cols-box .col:first-child .small-box
    {
        padding-right: 0;
    }
}