/* import custom font "GT Cinetype" from assets/fonts/gt-cinetype, Bold, Regular and Light */
@font-face {
    font-family: 'GT Cinetype';
    src: url('../fonts/gt-cinetype/GT-Cinetype-Bold.woff2') format('woff2'),
         url('../fonts/gt-cinetype/GT-Cinetype-Bold.woff') format('woff'),
         url('../fonts/gt-cinetype/GT-Cinetype-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GT Cinetype';
    src: url('../fonts/gt-cinetype/GT-Cinetype-Regular.woff2') format('woff2'),
         url('../fonts/gt-cinetype/GT-Cinetype-Regular.woff') format('woff'),
         url('../fonts/gt-cinetype/GT-Cinetype-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT Cinetype';
    src: url('../fonts/gt-cinetype/GT-Cinetype-Light.woff2') format('woff2'),
         url('../fonts/gt-cinetype/GT-Cinetype-Light.woff') format('woff'),
         url('../fonts/gt-cinetype/GT-Cinetype-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}


.gt-cinetype {
    font-family: 'GT Cinetype', sans-serif;
}


/* create body tag */
body {
    font-family: 'GT Cinetype', sans-serif;
    font-weight: 200;
    font-style: normal;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    line-height: 152%;
    letter-spacing: 0.075px;
}


.forma-djr {
    font-family: "forma-djr-text", sans-serif;
}




.bg-dark {
    background-color: #000000!important;
}

html, main {
    height: 100%;
}

.scroll-down-arrow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6em;
}

/* slowly animate the scroll down .scroll-down-arrow */
.scroll-down-arrow {
    animation: scrollDown 4s infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}



.background-image-container {
    position: relative;
}

.background-image-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1 !important;
}

.background-video-container {
    position: relative;
    overflow: hidden;
}


.background-video-container-rel {
    position: relative;
}

.background-video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

.background-video-container-bottom video {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
object-fit: contain;
}

.background-video-container-fith {
background-color: #000;
}

.background-video-container-fith video {
height: 100%;
width: 100%;
z-index: -1;
margin: 0 auto;
display: block;
object-fit: contain;
}

.background-image-container.overlayed::after, .background-video-container.overlayed::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.background-image-container.overlayed *, .background-video-container.overlayed *{
z-index: 1;
}

.background-image-container.overlayed.overlay-1::after , .background-video-container.overlayed.overlay-1::after{
    background-color: rgba(0, 0, 0, 0.2);
}

.background-image-container.overlayed.overlay-2::after, .background-video-container.overlayed.overlay-2::after {
    background-color: rgba(0, 0, 0, 0.4);
}

.background-image-container.overlayed.overlay-3::after, .background-video-container.overlayed.overlay-3::after {
    background-color: rgba(0, 0, 0, 0.6);
}

.background-image-container.overlayed.overlay-4::after, .background-video-container.overlayed.overlay-4::after {
    background-color: rgba(0, 0, 0, 0.8);
}     

::selection {
    background: #000000;
    color: #FFFFFF;
}




.blurred{
    animation: blur 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    overflow: hidden;
}

.unblurred{
    animation: unblur 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes blur {
    0% {filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    transform: scale(1);
}
    100% {filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px); 
    transform: scale(1.1);}
}

@keyframes unblur {
    0% {filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    transform: scale(1.1);}
    100% {filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px); 
    transform: scale(1);}
}

.blurcontainer{
    transform-origin: 50% 10%;
}


.blurcontainer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: all 2s linear;
    z-index: 1;
    pointer-events: none;
}

.blurcontainer.blurred::after {
    background-color: rgba(0, 0, 0, 0.45);
    pointer-events: all;
}




.navbar {
    min-height: 80px;
}


.navbar-brand {
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 160px;
    top: 15px;
    position: absolute;
    transition: all 0.5s ease;
    opacity: 1;
}

.navbar-brand.hide {
    top: -100px;
    opacity: 0;
}


.navbar-brand .art{
    font-weight: 200;
}

.navbar-brand .ancient{
    font-weight: normal;
}

.z-1000 {
    z-index: 1000;
}


path.animate {
    transition: all 0.3s;
}


.navbar-animate {
    transition: all 0.3s;
    position: absolute !important;
}


/* entrance animation */
.navbar-animate {
    animation: navbar-entrance 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

    /* easing */
    animation-timing-function: ease-in-out;
}

.navbar-logo-animate {
    animation: navbar-logo 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

    /* easing */
    animation-timing-function: ease-in-out;
}

@keyframes navbar-entrance {
    0% {
        position: absolute;
        height: 100%;
        opacity: 0;        
    }
    60% {
        position: absolute;
        height: 100%;
        opacity: 1;        
    }
    99% {
        position: relative;   
    }
    100% {
        height: 80px;
    }
}

@keyframes navbar-logo {
    0% {
        width:800px;
        opacity: 0;
        top:calc(50% - 70px);

    }
    40% {
        width:800px;
        opacity: 1;
        top:calc(50% - 70px);
    }
    100% {
        width:160px; 
        top: 15px;   
    }
}


@keyframes menu-toggle-entrance {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* menu toggle */
.menu-toggle {

    opacity: 0;

    /* add entrance animation */
    animation: menu-toggle-entrance 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

    /* delay by 3s */
    animation-delay: 3s;

    top: 15px;
    right: 15px;

}


.cursor-pointer {
    cursor: pointer;
}  

.menu-overlay{
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 1;

    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
}

.menu-overlay .nav-menu-item{
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s;
}

.menu-overlay.active{
    opacity: 1;
    pointer-events: all;

    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
}

.menu-overlay.active .nav-menu-item{
    opacity: 1;
    transform: translateY(0px);
}


/* set delays on the menu items */
.menu-overlay .nav-menu-item:nth-child(1){
    transition-delay: 0.1s;
}

.menu-overlay .nav-menu-item:nth-child(2){
    transition-delay: 0.5s;
}

.menu-overlay .nav-menu-item:nth-child(3){
    transition-delay: 0.9s;
}

.menu-overlay .nav-menu-item:nth-child(4){
    transition-delay: 1.3s;
}



.spacer {
    margin-bottom: 150px;
}

body{
    height: auto !important;
} 


/* FOR SOME REASON THIS IS IMPORTANT  */
body{ }
/* //////////////////////////////     */


@media (min-width: 1500px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}


.bg-gold{
    background-color: #dedac9;
}

.bg-lgrey{
    background-color: #f9f9f9;
}


.footnote-indicator {
    font-size: 9px !important;
    vertical-align: super;
    /* margin-left: 5px; */
    display: inline-block;
    font-size: 0.8em;
    border: 1px solid #000;
    padding: 1px 1px 0px 0;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    text-align: center;
    font-weight: bold;
    }

.footnote{
    transition: all 0.3s ease-in-out;
}

.footnote-container{
    position: relative;
    height: 40px;
}

.footnote-container .footnote{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

*[data-footnote] {
    cursor: pointer;
}


p, li{
    font-size: 14.4px;
    line-height: 1.5;
    letter-spacing: 0.01rem;
}

a{
    color: #000;
}

a:hover{
    color: #000000be;
}

/* set default list style to inside and square */
ul, ol {
    list-style-position: inside;
    list-style-type: square;
}

.x-small{
    font-size: 0.64em;
}



.h-5{height: 5%;}
.h-10{height: 10%;}
.h-15{height: 15%;}
.h-20{height: 20%;}
.h-25{height: 25%;}
.h-30{height: 30%;}
.h-35{height: 35%;}
.h-40{height: 40%;}
.h-45{height: 45%;}
.h-50{height: 50%;}
.h-55{height: 55%;}
.h-60{height: 60%;}
.h-65{height: 65%;}
.h-70{height: 70%;}
.h-75{height: 75%;}
.h-80{height: 80%;}
.h-85{height: 85%;}
.h-90{height: 90%;}
.h-95{height: 95%;}
.h-100{height: 100%;}
.h-auto{height: auto;}



/* create bootstrap breakpoints for heights */

@media (min-width: 576px) {
    .h-sm-5{height: 5% !important;}
    .h-sm-10{height: 10% !important;}
    .h-sm-15{height: 15% !important;}
    .h-sm-20{height: 20% !important;}
    .h-sm-25{height: 25% !important;}
    .h-sm-30{height: 30% !important;}
    .h-sm-35{height: 35% !important;}
    .h-sm-40{height: 40% !important;}
    .h-sm-45{height: 45% !important;}
    .h-sm-50{height: 50% !important;}
    .h-sm-55{height: 55% !important;}
    .h-sm-60{height: 60% !important;}
    .h-sm-65{height: 65% !important;}
    .h-sm-70{height: 70% !important;}
    .h-sm-75{height: 75% !important;}
    .h-sm-80{height: 80% !important;}
    .h-sm-85{height: 85% !important;}
    .h-sm-90{height: 90% !important;}
    .h-sm-95{height: 95% !important;}
    .h-sm-100{height: 100% !important;}
    .h-sm-auto{height: auto !important;}
}

@media (min-width: 768px) {
    .h-md-5{height: 5% !important;}
    .h-md-10{height: 10% !important;}
    .h-md-15{height: 15% !important;}
    .h-md-20{height: 20% !important;}
    .h-md-25{height: 25% !important;}
    .h-md-30{height: 30% !important;}
    .h-md-35{height: 35% !important;}
    .h-md-40{height: 40% !important;}
    .h-md-45{height: 45% !important;}
    .h-md-50{height: 50% !important;}
    .h-md-55{height: 55% !important;}
    .h-md-60{height: 60% !important;}
    .h-md-65{height: 65% !important;}
    .h-md-70{height: 70% !important;}
    .h-md-75{height: 75% !important;}
    .h-md-80{height: 80% !important;}
    .h-md-85{height: 85% !important;}
    .h-md-90{height: 90% !important;}
    .h-md-95{height: 95% !important;}
    .h-md-100{height: 100% !important;}
    .h-md-auto{height: auto !important;}
}

@media (min-width: 992px) {
    .h-lg-5{height: 5% !important;}
    .h-lg-10{height: 10% !important;}
    .h-lg-15{height: 15% !important;}
    .h-lg-20{height: 20% !important;}
    .h-lg-25{height: 25% !important;}
    .h-lg-30{height: 30% !important;}
    .h-lg-35{height: 35% !important;}
    .h-lg-40{height: 40% !important;}
    .h-lg-45{height: 45% !important;}
    .h-lg-50{height: 50% !important;}
    .h-lg-55{height: 55% !important;}
    .h-lg-60{height: 60% !important;}
    .h-lg-65{height: 65% !important;}
    .h-lg-70{height: 70% !important;}
    .h-lg-75{height: 75% !important;}
    .h-lg-80{height: 80% !important;}
    .h-lg-85{height: 85% !important;}
    .h-lg-90{height: 90% !important;}
    .h-lg-95{height: 95% !important;}
    .h-lg-100{height: 100% !important;}
    .h-lg-auto{height: auto !important;}
}

@media (min-width: 1200px) {
    .h-xl-5{height: 5% !important;}
    .h-xl-10{height: 10% !important;}
    .h-xl-15{height: 15% !important;}
    .h-xl-20{height: 20% !important;}
    .h-xl-25{height: 25% !important;}
    .h-xl-30{height: 30% !important;}
    .h-xl-35{height: 35% !important;}
    .h-xl-40{height: 40% !important;}
    .h-xl-45{height: 45% !important;}
    .h-xl-50{height: 50% !important;}
    .h-xl-55{height: 55% !important;}
    .h-xl-60{height: 60% !important;}
    .h-xl-65{height: 65% !important;}
    .h-xl-70{height: 70% !important;}
    .h-xl-75{height: 75% !important;}
    .h-xl-80{height: 80% !important;}
    .h-xl-85{height: 85% !important;}
    .h-xl-90{height: 90% !important;}
    .h-xl-95{height: 95% !important;}
    .h-xl-100{height: 100% !important;}
    .h-xl-auto{height: auto !important;}
}

@media (min-width: 1400px) {
    .h-xxl-5{height: 5% !important;}
    .h-xxl-10{height: 10% !important;}
    .h-xxl-15{height: 15% !important;}
    .h-xxl-20{height: 20% !important;}
    .h-xxl-25{height: 25% !important;}
    .h-xxl-30{height: 30% !important;}
    .h-xxl-35{height: 35% !important;}
    .h-xxl-40{height: 40% !important;}
    .h-xxl-45{height: 45% !important;}
    .h-xxl-50{height: 50% !important;}
    .h-xxl-55{height: 55% !important;}
    .h-xxl-60{height: 60% !important;}
    .h-xxl-65{height: 65% !important;}
    .h-xxl-70{height: 70% !important;}
    .h-xxl-75{height: 75% !important;}
    .h-xxl-80{height: 80% !important;}
    .h-xxl-85{height: 85% !important;}
    .h-xxl-90{height: 90% !important;}
    .h-xxl-95{height: 95% !important;}
    .h-xxl-100{height: 100% !important;}
    .h-xxl-auto{height: auto !important;}
}


.footnote {
    font-size: 0.8rem;
}

.h-auto-imp{
    height: auto !important;
}

.scrollbar-bar-container{
    position: fixed;
    width: 6px;
    height: calc(100vh - 90px);
    z-index: 1000;
    top:70px;
    right: 25px;
    display: none !important;
}

.scrollbar-bar-container::after{
    content: "";
    position: absolute;
    top: 0;
    left: 2px;
    width: 2px;
    height: 100%;
    background-color: rgba(12,255,255,1);
    z-index: 1000;
}

.scrollbar-bar{
    width: 6px;
    height: 80px;
    background-color: rgba(12,255,255,1);
    z-index: 10000 !important;
}

#navbar-container{
    margin-bottom: -80px;
   
}

#navbar-container::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 25%, rgba(0, 0, 0, 0) 100%);
    transition: all 5s linear;
}


#navbar-container.sticky-top::before{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 100%);
}

.flt-svg{
    position: absolute;
    top: calc(50% - 7px);
    right: 12px;
}

.video.withplay{
    position: relative;
    cursor: pointer;     
}

.video.withplay img{
    width: 100%;

    /* Center this image to cover the parent */
    object-fit: cover;
    object-position: center;

}



/* play button with svg play icon */
.video.withplay .play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video.withplay .play svg{
    width: 50px;
    fill: #fff;
}

.video.withplay video{
    width: 100%;
}

/* video will load when play button is pressed */
.video.withplay video{
    display: none;
}

.video.withplay.playing video{
    display: block;
}

/* hide the play button and image when playing */
.video.withplay.playing .play, .video.withplay.playing img{
    display: none;
}

.playbenign{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
}

.playbenign svg{
    width: 50px;
    fill: #fff;
}

/* video will load when play button is pressed */


.ob-position-4{object-position: 4%;}
.ob-position-8{object-position: 8%;}
.ob-position-12{object-position: 12%;}
.ob-position-16{object-position: 16%;}
.ob-position-20{object-position: 20%;}
.ob-position-24{object-position: 24%;}
.ob-position-28{object-position: 28%;}
.ob-position-32{object-position: 32%;}
.ob-position-36{object-position: 36%;}
.ob-position-40{object-position: 40%;}
.ob-position-44{object-position: 44%;}
.ob-position-48{object-position: 48%;}
.ob-position-52{object-position: 52%;}
.ob-position-56{object-position: 56%;}
.ob-position-60{object-position: 60%;}
.ob-position-64{object-position: 64%;}
.ob-position-68{object-position: 68%;}
.ob-position-72{object-position: 72%;}
.ob-position-76{object-position: 76%;}
.ob-position-80{object-position: 80%;}
.ob-position-84{object-position: 84%;}
.ob-position-88{object-position: 88%;}
.ob-position-92{object-position: 92%;}
.ob-position-96{object-position: 96%;}
.ob-position-100{object-position: 100%;}
.ob-position-center{object-position: center;}
.ob-position-left{object-position: left;}
.ob-position-right{object-position: right;}
.ob-position-top{object-position: top;}
.ob-position-bottom{object-position: bottom;}

/* create bootstrap breakpoints for object position */