/*-----------------------------------MYTH-----------------------------------------*/
/*-----------------------------------MYTH-----------------------------------------*/
/*-----------------------------------MYTH-----------------------------------------*/


#mythPage .vidBGCon{
    opacity: 1 !important;
}

.sectTagsCon{
    position:absolute;
    width:100%;
    height: fit-content;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    padding: 3px;
    display:flex;
    justify-content:space-between;
}

.sectTagsCon .subCol{
    position:relative;
    display:flex;
    justify-content: flex-end;
    gap: 10px;
    writing-mode: sideways-lr;
}


.sectTagsCon .subCol-01{
    writing-mode: sideways-lr;
}

.sectTagsCon .subCol-01 .acc01{
    margin: 0px 0 0 4px;
}

.sectTagsCon .subCol-02{
   writing-mode: sideways-rl;
}

.sectTagsCon .subCol-02 .accT01{
    min-height: max-content;
}

.sectTagsCon .subCol-02 .acc01{
    margin: 0px 4px 0 0;
    min-height: max-content;
}

.storyText{
    font-size:3vw;
}


/*----------------------------ENTRY-------------------------------------*/

#mythEntrySection .mainCon{
    height: clamp(600px, 100vh, 100vh);
}

#mythEntrySection .sectCon{
    height: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

#mythEntrySection .dream_wrpr{
    position:absolute;
    height: fit-content;
    top: 0;
}

.dreamlandBGIMG01 {
    position: relative;
    width: 120%;
    margin: 0% 0 0 -13%;
    /* height: 100vh; */
}

.mSam_wrpr{
     position: absolute;
    width: 22vw;
    height: auto;
    top: 15.8vw;
    left: 3vw;
    right: 0;
    margin: auto;
}

.dreamSam {
   position:relative;
   width:100%;
   height:auto;
}

.storyCon p{
    color: var(--white01);
}

#mythEntrySection .storyCon,
#oriEntrySection .storyCon{
    position:relative;
    height: 100%;
    padding: 6vw 6vw;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#mythEntrySection .storyCon .row-01,
#oriEntrySection .storyCon .row-01{
    position:relative;
    display:grid;
    grid-template-columns: 20vw 1fr 1fr 1fr;
    grid-gap: 3vw;
}

#mythEntrySection .bc01_it,
#oriEntrySection .bc01_it{
    text-transform: uppercase;
}

#mythEntrySection .storyText{
    text-align: left;
}

#mythEntrySection .storyCon .row-02{
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding: var(--uniP);
}

#mythEntrySection .twText{
    font-size:4vw;
    color: var(--org01);
}

#mythEntrySection .storyCon .row-02 .sigIMG_wrpr{
    width:25vw;
}

#mythEntrySection .storyCon .row-03{
    display:flex;
    gap: 40vw;
}


/*----------------------------SCENES 01----------------------------------*/

#scenesSection01 .mainCon{
    min-height: 100vh;
}

#sc1Scrubber{
    position: absolute;
    height:400vw;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    visibility: hidden;
}

/*#scenesSection01 .pinBuff{
    position: relative;
    height:200vw;
}*/

.scenesSection .subCol-01{
    visibility: hidden;
}

.scenesSection .pin_wrpr{
    position:relative;
    width:100%;
    height:100%;
}

.scenesSection .mainCon{
    height: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.scenesSection .sectCon{
    position:relative;
    width:clamp(500px, 66vw, 1200px);
    height: auto;
    aspect-ratio: 2 / 1;
    margin: auto;
    top: 3%;
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 5vw
}

.scenesSection .copyCon{
    position:relative;
    width:clamp(200px, 75%, 800px);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.scenesCon{
    position: relative;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
}

.sceneText{
    color: var(--white01);
    opacity:0.33;
    filter: blur(6px);
}

.sceneText-01{
    /*opacity: 1;*/
    /*filter: none;*/
}

.sceneBGIMG{
    position: relative;
    margin: 0 0 -4% 0;
}

.sceneBlocks,
.sceneBlock{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}


.cornerIllCon{
    position:absolute;
    width:100%;
    height:90%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    pointer-events: none;
}

.cornerIll{
    position:absolute;
    width:15vw;
}

.cornerIll-tl{
    top: 0;
    left: -4%;
}

.cornerIll-tr{
    top: 0;
    right: -4%;
}

.cornerIll-bl{
    bottom: 0;
    left: -4%;
}

.cornerIll-br{
    bottom: 0;
    right: -4%;
}


/*.scenesCon .sceneBlock{
    opacity: 0;
}

.scenesCon .sceneBlock-01{
    opacity: 1;
}*/

.sceneIMG_wrpr{
    position:absolute;
    width:auto;
    height:auto;
    margin: auto;
    transform: translateY(100px);
    opacity:0;
}

.sceneBlock-01 .sceneIMG_wrpr{
    transform: translateY(0px);
    opacity:1;
}

.sceneIMG{
    position:relative;
    width: 100%;
}

.samDancer-bag{
    position:absolute;
    width:25vw;
    bottom: -25%;
    right: -25%;
}

/*----------SCENE ELS----------------*/

#jack01{
   width: 60%;
    left: 0;
    right: 0%;
    bottom: 2%;
}

#jack02{
    width: 33%;
    top: -8%;
    left: 5%;
}

#jack03{
   width: 28%;
    top: 6%;
    right: -7%;
}


#witch01{
   width: 66%;
    left: 0;
    right: 8%;
    bottom: 3%;
}

#moon01{
    width: 40%;
    top: -30%;
    right: -10%;
}

#candyman01{
    width: 83%;
    right: -7%;
    bottom: 1%;
}

#candyFriend01{
    width: 50%;
    left: -5%;
    bottom: 14%;
}

#skeleton01{
    width: 26%;
    left: -5%;
    top: -20%;
}

#spooked01{
    width: 55%;
    right: 7%;
    bottom: 3%;
}




/*----------------------------GRAVEYARD---------------------------------*/

#gYardSection01 .mainCon,
#gYardSection01 .sectCon{
    height: 100%;
}

#gYardSection01 .bgCon{
    position:relative;
    width:100%;
    min-height: 100%;
    display:flex;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

.quoteCon{
    position:absolute;
    width:clamp(300px, 66vw, 960px);
    height:fit-content;
    top:33vw;
    left:0;
    right:0;
    margin:auto;
}

#gYardSection01 .quoteCon .storyText{
    font-size:3vw;
    text-align: center;
}

#gYardSection01 .cornerIll-bl {
    bottom: -20%;
    left: -4%;
}

#gYardSection01 .cornerIll-br {
    bottom: -20%;
    right: -4%;
}




/*----------------------------TRAD--------------------------------*/

#tradSection01{
    margin: 10vw 0;
}

#tradSection01 .mainCon,
#tradSection01 .sectCon{
    height: 100%;
}

#tradSection01 .sectCon{
    display:flex;
    align-items: center;
}

#tradSection01 .bgCon{
    position:relative;
    width:clamp(300px, 66%, 100%);
    height: auto;
    aspect-ratio: 5 / 4;
    display:flex;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}


#tradSection01 .bgCon .vim_frame{
    width: 104vw;
    left: -21vw;
}

.warningCon{
    position:relative;
    width: 39vw;
    top: 10vw;
    left: -6vw;
    display:flex;
    flex-direction:column;
    gap: var(--uniP);
}

.warningCon .row{
    position:relative;
    display:flex;
    gap: var(--uniP);

}

.appleIMG{
    position:relative;
    width: 9vw;
    right: -10%;
    top: -25%;
}

/*----------------------------SCENES 2--------------------------------*/



#scenesSection02 .mainCon{
    min-height: 100vh;
}

#scenesSection02 .sectCon{
    top: 0;
    grid-gap: 0;
}

#sc2Scrubber{
    position: absolute;
    height:400vw;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    visibility: hidden;
}

#scenesSection02 .sectCon .copyCon{
    height: 140%;
    top: -20%;
}

#scenesSection02 .sceneText_lg{
    font-size: 2vw;
    width: 190%;
}

#scenesSection02 .sceneIMG_wrpr{
    /*opacity: 1;*/
}

#jMan01{
    width: 50%;
    left: 0;
    right: 0%;
    bottom: 3%;
}

#moonBranch01{
    width: 30%;
    top: -20%;
    right: -2%;
}

#cat01{
    width: 66%;
    left: 0;
    right: 8%;
    bottom: 3%;
}

#owl01{
    width: 40%;
    top: -20%;
    right: -12%;
}

#crow01{
    width: 44%;
    left: 3%;
    bottom: -3%;
}

#witch02{
    width: 80%;
    right: -10%;
    top: -20%;
}

#leaves01{
    width: 56%;
    right: -10%;
    top: -25%;
}

#autumn01{
    width: 77%;
    left: 0;
    right: 0%;
    bottom: 3%;
}

.cornerIllCon_sc02 .cornerIll-tl,
.cornerIllCon_sc02 .cornerIll-tr{
    top: -5%;
}

.cornerIllCon_sc02 .cornerIll-bl{
    width:20vw;
    left: -10%;
}

.cornerIllCon_sc02 .cornerIll-br{
    width:20vw;
    right: -8%;
}

.samDancer-skel{
    position:absolute;
    width:20vw;
    bottom: -25%;
    right: -20%;
}


/*----------------------------CENT--------------------------------*/

#centSection01 .storyText{
    width:90%;
    margin: 10% 0 40px 0;
}

#centSection01 .sectCon{
    padding: var(--uniP-lg1);
}

.belljarCon{
    position:relative;
    width:clamp(200px, 66%, 1000px);
    height: auto;
    aspect-ratio: 2/3;
    margin: auto;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}

.mythSamCon{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.centSam{
    position: absolute;
    height: fit-content;
    width: 36%;
    top: 9%;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
}

#centSam-01{
   opacity: 1;
}

.belljarIMG{
    opacity: 0.7;
}

.pHeadsCon{
    position:relative;
    margin: -20% 0 0 0;
}

#centsCaro_wrpr{
    position:relative;
    width:100%;
    display:flex;
    /*gap: var(--uniP-sm);*/
    justify-content: flex-end;
}

.centsCaro{
    position: relative;
    height:fit-content;
    min-width:max-content;
    padding: var(--uniP) var(--uniP) 0 0;
    display:flex;
    /*gap: var(--uniP-sm);*/
}

.pHeadsIMG{
    width:50vw;
    height: auto;
    padding: 0 var(--uniP-sm) -1% 0;
}


/*----------------------------ARRIVAL--------------------------------*/

.flickerVid01{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    mix-blend-mode: exclusion;
    animation: glow01_soft2 12000ms ease-out infinite;
}

#arrSection01 .sectCon{
    overflow: hidden;
}

#arrSection01 .textCon{
    position:absolute;
    width:fit-content;
    height:fit-content;
    top:-20vw;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    text-align: center;
}

.cornerIllCon_arr .cornerIll-tl{
    width:22vw;
    left: -5%;
}

.cornerIllCon_arr .cornerIll-tr{
    width:22vw;
    right: -9%;
}


/*----------------------------ARRIVAL--------------------------------*/

#behindSection01 .sectCon{
    border-bottom: var(--orgLine01);
}

#behindSection01 .bgCon{
    position:relative;
    width:clamp(300px, 66%, 100%);
    height: auto;
    aspect-ratio: 5 / 4;
    display:flex;
    padding: 0;
    margin: auto;
    overflow: hidden;
    pointer-events: none;
}

#behindSection01 .titleCon{
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
}

.behindTitle{
    font-size:14vw;
    line-height: 1em;
    text-align: center;
}

.samDancer-carver{
    position:relative;
    width:clamp(200px, 100%, 1000px);
    margin: 0% auto 0 auto;
}

.samDancer-carver .dancerIMG{
    position:absolute;
    bottom: -1vw;
}

#behindSection01 .row-02{
    position:relative;
    padding: var(--uniP) 0;
    display:grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 1vw;   
}

#behindSection01 .row-02 .acc01{
    line-height: 1.33em;
}