/* TEST */



/* GENERAL */

* {
    font-size: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    cursor: pointer;
    color: #FEFFB9;
}

p {
    line-height: 1.75em;
}

p:not(:last-child) {
    margin-bottom: 1.75em;
}

button {
    background-color: #000;
    border: none;
    cursor: pointer;
}

.disable-action {
    pointer-events: none;
}

body {
    background-color: #2B2B2B;
    color: #fff;
    font-family: sans-serif;
}

ul,
li {
    list-style: none;
}

/* NAVIGATION */
.menu {
    position: fixed;
    z-index: 20;
}

.side-bar {
    position: absolute;
    width: 180px;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000;
}

.menu-open-button,
.menu-close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    margin: 10px;
    border-radius: 20px;
}

.menu-open-button:active,
.menu-close-button:active {
    background-color: rgba(128, 128, 128, 0.3);
}

.menu-icon {
    fill: #e8e8e8;
}

.close-icon {
    fill: #e8e8e8;
}

.nav-closed {
    display: none;
}

.nav-wrapper {}

.story-label {
    margin: 20px 20px 5px;
    font-size: 12px;
    color: #999;
}

.nav {
    display: block;
    list-style: none;
    height: 100%;
}

.nav a {
    color: #ffffff;
    padding-left: 20px;
    line-height: 2em;
    text-decoration: none;
}

.nav.selected a {
    font-weight: bold;
    color: #FEFFB9;
}




/* Story Loader */
.story-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2e2e2e;
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 18;
    pointer-events: none;
}

#progress {
    /* position: absolute;
    height: 2px;
    top: 50%;
    background: rgb(126, 126, 126);
    opacity: 1;
    z-index: 19;
    transition: width 0.2s ease; */
}

.fadeOut {
    opacity: 0 !important;
}


.spinner {
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
}

.spinner .path {
    stroke: #FEFFB9;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.page-loaded {
    opacity: 0;
    pointer-events: none;
}

.page-loaded .spinner {
    display: none;
    animation: none;
}


/* .main-container {
    width: 680px;
    margin: 0 auto;
} */


/* Story Content */
.story-wrapper {
    position: relative;
}


/* Viausal Content */
.visual-content {
    position: fixed;
    top: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: #2B2B2B;
}

.a-frame-wrapper {
    height: 100vh;
}

.visual-content-block {
    height: 100vh;
    background-color: #2B2B2B;
}

.visual-content-block img {
    height: 100vh;
}

/* Text Content */
.text-content {
    position: absolute;
    right: 40px;
    z-index: 15;
    /* Allow dragging behind the textarea */
    pointer-events: none;
    opacity: 0;
}

.text-content-show {
    opacity: 1;
}


.text-content>* {
    pointer-events: auto;
}

.text-header {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: auto;
    width: 100%;
    background-color: #000;
    z-index: 16;
    pointer-events: auto;
}

.text-content.text-content-toggle .text-header {
    position: fixed;
    top: auto;
    bottom: 0;
    margin-right: 40px;
    width: 360px;
    padding-top: 0;
}

.chevron {
    fill: #fff;
}

.text-content.text-content-toggle .chevron {
    transform-origin: center;
    transform: rotate(180deg);
}

.text-container {
    margin-top: 20vh;
    padding-top: 10px;
    background-color: #000;
}

.text-content.text-content-toggle .text-container {
    background-color: transparent;
    pointer-events: none;
}

.text-wrapper {
    position: relative;
    bottom: 0;
    width: 360px;
    height: 100%;
    padding: 10px 40px 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
}

.text-content.text-content-toggle .text-wrapper {
    visibility: hidden;
    pointer-events: none;
}

.story-title {
    font-size: 28px;
}

.text-toggle-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 40px;
    text-decoration: none;
    color: #fff;
}

.text-content.text-content-toggle .text-toggle-button {
    padding: 20px 40px;
}

.ram-trigger {
    color: orange;
}

.ori-trigger {
    color: orange;
}

.new-trigger {
    color: orange;
}

.text-block {
    margin-bottom: 48px;
}

.local-navigation {
    display: flex;
    margin-top: 40px;
    gap: 20px;
}

.local-navigation-button {
    display: block;
    min-width: 120px;
    padding: 6px 20px;
    border: solid 1px #ffffff;
    border-radius: 24px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}



/*  */
/* HOTSPOT */
/*  */
.orientation .hotspot-popup {
    position: absolute;
    bottom: 60px;
    left: calc(50%);
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    width: 360px;
    min-height: 100px;
    padding: 20px;
    transition-duration: 0.2s;
    opacity: 0;
    z-index: 50;
}

.orientation .hotspot-popup {
    pointer-events: none;
}

.hotspot-popup::before {
    position: absolute;
    content: "\00a0";
    display: block;
    height: 24px;
    width: 24px;
    bottom: -7.5px;
    left: calc(50% - 12px);
    transform: translateX(-50%);
    background-color: #fff;
    transform: rotate(47deg) skew(5deg);
    -moz-transform: rotate(47deg) skew(5deg);
    -ms-transform: rotate(47deg) skew(5deg);
    -o-transform: rotate(47deg) skew(5deg);
    -webkit-transform: rotate(47deg) skew(5deg);
}

.hotspot:hover .hotspot-popup {
    opacity: 1;
    pointer-events: auto;
}



/*  */
/* 360 IMAGE */
/*  */

/* Turn off text selection for dragging */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Adjust position for A-frame "VR" button */
.a-enter-ar-button,
.a-enter-vr-button {
    display: none;
}

/* Only show on a specific screen size */
/* .mobile {
    display: none;
} */


body.desktop .mobile-only {
    display: none;
}

body.mobile .desktop-only {
    display: none;
}


/* Mobile */
/* Mobile Landscape */
@media screen and (max-width:1023px) { 
    body.mobile .text-container {
        width: 360px;
        right: 40px;
    }

}

@media screen and (max-width:1023px) { 
    body.mobile .festival .text-container {
        width: 100%;
        right: 0;
    }

}

/* Mobile Portrait */
@media screen and (max-width:767px) {
    body.mobile .text-container {
        width: 100%;
    }
    body.mobile .text-header {
        padding-top: 28px;
    }

    body.mobile .text-content {
        right: 0;
    }
    body.mobile .text-content.text-content-toggle .text-header {
        width: 100%;
    }
}

body.mobile .text-wrapper {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

body.mobile .text-toggle-button {
    padding-left: 20px;
    padding-right: 20px;
}



/* LOADER */

.sp-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.sp {
	width: 32px;
	height: 32px;
	clear: both;
	margin: 20px auto;
}

/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after {
	border-radius: 50%;
	background-color: #FEFFB9;
	width: 18px;
	height: 18px;
	transform-origin: center center;
	display: inline-block;
}
.sp-3balls {
	position: relative;
	background-color: rgba(#FEFFB9,1);
	opacity: 1;
	-webkit-animation: spScaleAlpha 1s infinite linear;
	animation: spScaleAlpha 1s infinite linear;
}
.sp-3balls:before, .sp-3balls:after {
	content: '';
	position: relative;
	opacity: 0.25;
}
.sp-3balls:before {
	left: 30px;
	top: 0px;
	-webkit-animation: spScaleAlphaBefore 1s infinite linear;
	animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls:after {
	left: -30px;
	top: -23px;
	-webkit-animation: spScaleAlphaAfter 1s infinite linear;
	animation: spScaleAlphaAfter 1s infinite linear;
}
@-webkit-keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% { opacity: 0.25; }
	66% { opacity: 0.25; }
	100% { opacity: 1; }
}
@keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% {  opacity: 0.25; }
	66% { opacity: 0.25; }
	100% {  opacity: 1; }
}
@-webkit-keyframes spScaleAlphaBefore {
	0% { opacity: 0.25; }
	33% { opacity: 1; }
	66% { opacity: 0.25; }
}
@keyframes spScaleAlphaBefore {
	0% { opacity: 0.25; }
	33% { opacity: 1; }
	66% { opacity: 0.25; }
}
@-webkit-keyframes spScaleAlphaAfter {
	33% { opacity: 0.25; }
	66% { opacity: 1; }
	100% { opacity: 0.25; }
}
@keyframes spScaleAlphaAfter {
	33% { opacity: 0.25; }
	66% { opacity: 1; }
	100% { opacity: 0.25; }
}