@font-face {
    font-family: 'Ghotam';
    src: url('../fonts/Gotham-Medium.otf'),
}

@font-face {
    font-family: 'Din Alternate';
    src: url('../fonts/DINAlternate-Bold.woff') format('woff')
}

@font-face {
    font-family: 'Cooldex';
    src: url('../fonts/Cooldex.ttf') format('truetype'),
        url('../fonts/Cooldex.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* max-width: 1920px;
    width: 100vw;
    position: absolute;
    margin-top: 0vw; */

.mfp-bg.mfp-fade.mfp-ready {
    height: 100% !important;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
    border: 0 !important;
    border-radius: 0px !important;
}

/* ------------------------------------------------ UNIVERSAL CSS ------------------------------------------------- */

html {
    /* font-size: 62.5%; */
    /* -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    scroll-behavior: auto;
}

#episode-webgl-view,
#episode-webgl-canvas {
    position: fixed;
    inset: 0;
}

#episode-webgl-view {
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

#episode-webgl-view.is-active {
    opacity: 1;
}

#episode-webgl-canvas {
    width: 100vw;
    height: 100vh;
    display: block;
    pointer-events: none;
}

.MAPS>.BG,
.MAPS {
    transform: none;
}

.MAPS-STAGE {
    position: relative;
    height: 400vh;
}

.MAPS.is-hidden {
    display: none !important;
}

.MAPS.is-visible {
    display: block !important;
}

@media screen and (max-width: 768px) {
    .MAPS {
        transform: none;
    }
}

body {
    height: 100% !important;
    /* font-family: 'Optimus' !important;
    font-weight: 500 !important;
    font-size: 2rem !important;
    -webkit-font-feature-settings: "palt"1 !important;
    font-feature-settings: "palt"1 !important;
    color: #ffffff !important;
    background: #000000 !important;  */
    line-height: 1.75 !important;
    letter-spacing: 0.1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    -webkit-box-sizing: border-box !important;
    line-height: 1.5;
    box-sizing: border-box !important;
    min-height: 100vh;
}

img {
    opacity: 1;
    -webkit-transition: all 480ms;
    transition: all 480ms;
    display: block;
    max-width: 100%;
    vertical-align: bottom !important;
}

img[src$=".svg"] {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

a {
    color: #333;
    text-decoration: none !important;
    outline: none !important;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

.BG,
.BGM {
    width: 100% !important;
}

.comingsoon {
    position: relative !important;
    width: 74% !important;
    margin-left: -4% !important;
    pointer-EVENTs: none;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1.4rem !important;
    }
}

/* ------------------------------------------------       KEYFRAMES       ------------------------------------------------- */
@keyframes blinkFade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

@keyframes revealMask {
    to {
        -webkit-mask-size: 100% 100%;
    }
}

@keyframes revealMask2 {
    to {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}

@keyframes lightning {

    0%,
    85%,
    100% {
        filter: contrast(1.5) brightness(1.2);
        opacity: 0.8;
    }

    /* mulai kilat (lebih telat) */
    90% {
        filter: contrast(3) brightness(2);
        opacity: 1;
    }

    92% {
        opacity: .5;
    }

    /* flicker 1 */
    94% {
        filter: contrast(5) brightness(4) drop-shadow(0 0 30px #fff);
        opacity: 1;
    }

    95% {
        opacity: .3;
    }

    /* peak */
    97% {
        filter: contrast(8) brightness(6) drop-shadow(0 0 60px #fff);
        opacity: 1;
    }
}

@keyframes baphoIdle {

    0%,
    100% {
        transform: scale(var(--hover-scale)) translateX(0) translateY(0);
    }

    50% {
        transform: scale(var(--hover-scale)) translateX(10px) translateY(-6px);
    }
}

@keyframes eddgaIdle {

    0%,
    100% {
        transform: scale(var(--hover-scale)) translateX(0) translateY(0);
    }

    50% {
        transform: scale(var(--hover-scale)) translateX(-10px) translateY(-6px);
    }
}

@keyframes floatSoft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes cloudOpenLeft {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-150%, -50%);
    }
}

@keyframes cloudOpenRight {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(50%, -50%);
    }
}

@keyframes cloudOpenCenter {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* ------------------------------------------------ GOTO ------------------------------------------------- */
.roc-goto {
    position: absolute;
    max-width: 369px;
    width: 17vw;
    top: 0.4%;
    left: 2%;
    z-index: 10;
    cursor: pointer;
    animation: pulse 1.5s infinite ease-in-out;
}

@media screen and (max-width: 768px) {

    .roc-goto {
        position: absolute;
        max-width: 369px;
        width: 45vw;
        top: 0.4%;
        left: 2%;
        z-index: 10;
        cursor: pointer;
        animation: pulse 1.5s infinite ease-in-out;
    }
}

/* ------------------------------------------------ SIDEBAR ------------------------------------------------- */
.nav-wrapper {
    position: fixed;
    right: 3.67vw;
    top: 18vw;
    width: max-content;
    z-index: 1000;
}

.hamburger {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -72%) scale(1.8);
    width: 9vw;
    z-index: 2;
    cursor: pointer;
}

.sidebar {
    position: relative;
    width: max-content;
    min-width: 135px;
    padding: 2.8vw 1.2vw;
    box-sizing: border-box;
    background: url("../images/teaser/episode11_1/nav-board.png") center / 100% 100% no-repeat;
    z-index: 1;
    transform-origin: top center;
    transform: scaleY(1);
    transition:
        transform 0.6s ease,
        opacity 0.3s ease;
}

.sidebar.hidden {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}

.sidebar ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 0.8vw;
}

.sidebar li {
    margin: 0;
    padding: 0;

    text-align: center;

    white-space: nowrap;
}

.sidebar li[data-menuanchor="SEASONAL"] a {
    white-space: normal;
    line-height: 1.15;
    width: 90px;
    margin: 0 auto;
}

.sidebar ul li a {
    display: block;
    padding: 0.25vw 0;
    text-decoration: none;
    color: #452107;
    font-size: clamp(11px, 0.85vw, 16px);
    font-weight: 700;
    letter-spacing: 1px;
    transition: transform 0.25s ease;
}


/* ACTIVE */

.sidebar ul li.active a {
    font-weight: bold;

    background: linear-gradient(90deg, #351f0e, #9e2d00, #682e18);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* HOVER */

.sidebar ul li a:hover {
    transform: scale(1.04);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .nav-wrapper {
        right: 4vw;
        top: 8vw;
    }

    .hamburger {
        width: 15vw;

        transform: translate(-50%, -70%) scale(1.5);
    }

    .sidebar {
        min-width: 125px;

        padding: 25px 10px;
    }

    .sidebar ul {
        gap: 12px;
    }

    .sidebar ul li a {
        font-size: clamp(11px, 1.5vw, 15px);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .nav-wrapper {
        display: none;
    }
}


/* ------------------------------------------------ CLOUD LOAD ------------------------------------------------- */

.cloudLoader {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-EVENTs: none;
}

.cloudLoader .cloud {
    position: absolute;
    top: 17%;
    left: 39%;
    width: 129vw;
    max-width: none;
    transform: translate(-50%, -50%);
}

.cloud.cloud-left {
    left: 3%;
}

.cloud.cloud-right {
    left: 90%;
}

.cloudLoader .cloud-left {
    z-index: 1;
}

.cloudLoader .cloud-right {
    z-index: 2;
}

.cloudLoader .cloud-center {
    z-index: 3;
}

body.page-loaded .cloudLoader .cloud-left {
    animation: cloudOpenLeft 2.4s ease-in-out 1.4s forwards;
}

body.page-loaded .cloudLoader .cloud-right {
    animation: cloudOpenRight 2.4s ease-in-out 1.4s forwards;
}

body.page-loaded .cloudLoader .cloud-center {
    animation: cloudOpenCenter 2.8s ease-in-out forwards;
}

body.page-loaded .cloudLoader {
    visibility: hidden;
    transition: visibility 0s linear 3.9s;
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bookReveal {
    0% {
        opacity: 0;
        transform: translateY(8vh) scale(.88) rotate(-2deg);
        filter: blur(8px);
    }

    65% {
        opacity: 1;
        transform: translateY(-1vh) scale(1.02) rotate(.4deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

@keyframes bookContentReveal {
    0% {
        opacity: 0;
        transform: scale(.94);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes bookDetailReveal {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bookExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-6vh) scale(.9) rotate(2deg);
        filter: blur(8px);
    }
}

@keyframes bookContentExit {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(.94);
        filter: blur(5px);
    }
}

@keyframes penReveal {
    0% {
        opacity: 0;
        transform: translate(-5vw, -4vh) rotate(112deg) scale(.8);
    }

    70% {
        opacity: 1;
        transform: translate(1vw, 1vh) rotate(133deg) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translate(0) rotate(129deg) scale(1);
    }
}

@keyframes paperReveal {
    0% {
        opacity: 0;
        transform: translate(-4vw, -3vh) rotate(-7deg) scale(.84);
    }

    70% {
        opacity: 1;
        transform: translate(1vw, 1vh) rotate(2deg) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translate(0) rotate(0) scale(1);
    }
}

@keyframes paperTwoReveal {
    0% {
        opacity: 0;
        transform: translate(5vw, 4vh) rotate(160deg) scale(.84);
    }

    70% {
        opacity: 1;
        transform: translate(-1vw, -1vh) rotate(143deg) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translate(0) rotate(147deg) scale(1);
    }
}

@keyframes penExit {
    to {
        opacity: 0;
        transform: translate(5vw, -5vh) rotate(145deg) scale(.84);
        filter: blur(5px);
    }
}

@keyframes paperExit {
    to {
        opacity: 0;
        transform: translate(-5vw, -4vh) rotate(-9deg) scale(.84);
        filter: blur(5px);
    }
}

@keyframes paperTwoExit {
    to {
        opacity: 0;
        transform: translate(5vw, 4vh) rotate(160deg) scale(.84);
        filter: blur(5px);
    }
}

@keyframes pinFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-0.7vw);
    }

    60% {
        transform: translateY(-0.2vw);
    }

    75% {
        transform: translateY(-0.45vw);
    }
}

@keyframes cloudFloat {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(1.5vw);
    }
}

@keyframes floatingDown {

    0%,
    100% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(110px);
    }
}

@keyframes spin1 {
    0% {
        transform: rotate(0deg);
    }

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

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

    100% {
        transform: rotate(0deg);
    }
}


@keyframes featherFloat1 {

    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(8px, -10px, 0) rotate(4deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

}


@keyframes featherFloat2 {

    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(-7px, 8px, 0) rotate(-4deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

}


@keyframes featherFloat3 {

    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(6px, -8px, 0) rotate(3deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

}


@keyframes featherFloat4 {

    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(-5px, -7px, 0) rotate(-3deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

}

#MAPS1 .bookWrap,
#MAPS1 .mapsContent,
#MAPS1 .pen,
#MAPS1 .paper,
#MAPS1 .paper2 {
    opacity: 0;
}

#MAPS1.is-shown .bookWrap,
#MAPS1.is-shown .mapsContent,
#MAPS1.is-shown .pen,
#MAPS1.is-shown .paper,
#MAPS1.is-shown .paper2 {
    opacity: 1;
}

.MAPS.is-entering .bookWrap {
    animation: bookReveal 1.05s cubic-bezier(.22, .8, .25, 1) forwards;
}

.MAPS.is-entering .mapsContent {
    animation: bookContentReveal .8s ease-out .55s forwards;
}

.MAPS.is-entering .mapsDetail,
.MAPS.is-entering .m-title,
.MAPS.is-entering .cardsDetail {
    opacity: 0;
    animation: bookDetailReveal .65s ease-out .9s forwards;
}

.MAPS.is-entering .m-title {
    animation-delay: 1.05s;
}

.MAPS.is-entering .cardsDetail {
    animation-delay: 1.2s;
}

.MAPS.is-exiting .bookWrap {
    animation: bookExit .55s ease-in forwards;
}

.MAPS.is-exiting .mapsContent {
    animation: bookContentExit .35s ease-in forwards;
}

.MAPS.is-entering .pen,
.MAPS.is-entering .paper,
.MAPS.is-entering .paper2,
.MAPS.is-exiting .pen,
.MAPS.is-exiting .paper,
.MAPS.is-exiting .paper2 {
    animation-fill-mode: both;
}

.MAPS.is-entering .pen {
    animation: penReveal .8s cubic-bezier(.22, .8, .25, 1) .2s both;
}

.MAPS.is-entering .paper {
    animation: paperReveal .75s cubic-bezier(.22, .8, .25, 1) .35s both;
}

.MAPS.is-entering .paper2 {
    animation: paperTwoReveal .75s cubic-bezier(.22, .8, .25, 1) .45s both;
}

.MAPS.is-exiting .pen {
    animation: penExit .45s ease-in forwards;
}

.MAPS.is-exiting .paper {
    animation: paperExit .4s ease-in .05s forwards;
}

.MAPS.is-exiting .paper2 {
    animation: paperTwoExit .4s ease-in .1s forwards;
}

@media (prefers-reduced-motion: reduce) {

    #MAPS1 .bookWrap,
    #MAPS1 .mapsContent,
    #MAPS1 .pen,
    #MAPS1 .paper,
    #MAPS1 .paper2,
    .MAPS.is-exiting .bookWrap,
    .MAPS.is-exiting .mapsContent,
    .MAPS.is-entering .mapsDetail,
    .MAPS.is-entering .m-title,
    .MAPS.is-entering .cardsDetail {
        opacity: 1;
        animation: none;
    }

    .MAPS.is-exiting .bookWrap,
    .MAPS.is-exiting .mapsContent {
        opacity: 0;
    }

    .MAPS.is-entering .pen,
    .MAPS.is-entering .paper,
    .MAPS.is-entering .paper2 {
        animation: none;
    }

    .MAPS.is-exiting .pen,
    .MAPS.is-exiting .paper,
    .MAPS.is-exiting .paper2 {
        opacity: 0;
        animation: none;
    }
}

/* ------------------------------------------------ FLOATING ------------------------------------------------- */
#floating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 20px;
    position: absolute;
    margin-left: -80%;
    padding: 1rem 1rem;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
    margin-top: 7%;
}

#floating .float-btn {
    position: relative;
    height: auto;
    width: 18%;
    display: block;
}

#floating .float-btn img,
#floating .float-btn video {
    width: 100%;
    height: auto;
}

video.playbutton {
    position: absolute;
    top: 1.5%;
    right: 2.1%;
    width: 10%;
    z-index: 2;
}

/* ------------------------------------------------ PROGRESS BACK TO TOP ------------------------------------------------- */

.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 70px;
    height: 70px;
    z-index: 999;
    cursor: pointer;
}

.progress-wrap .progress-svg {
    transform: rotate(-90deg)
}

.progress-wrap .progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 5
}

.progress-wrap .progress-bar {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 188;
    stroke-dashoffset: 188;
}

.progress-wrap .progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress-wrap .progress-text>img {
    width: 50%;
}

@media (max-width: 768px) {

    .progress-wrap {
        right: 0px;
        bottom: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-wrap .progress-svg {
        width: 50px !important;
        height: 50px !important;
    }

    .progress-wrap .progress-bg {
        cx: 25 !important;
        cy: 25 !important;
        r: 20 !important;
    }

    .progress-wrap .progress-bar {
        cx: 25 !important;
        cy: 25 !important;
        r: 20 !important;
    }

    .progress-wrap .progress-text {
        width: 80%;
        left: 10%;
        bottom: 7%;
    }

}

/* ------------------------------------------------ SECTION 1 ------------------------------------------------- */

/* #HOME {
    position: relative;
    overflow: hidden;
} */
#HOME {
    position: sticky;
    top: 0;
    height: 103vh;
    overflow: hidden;
    z-index: 1;
}

#HOME .BG {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* #HOME .BG {
    transform: scale(1.15);
    transition: transform .1s linear;
    will-change: transform;
} */
#HOME .BG {
    transform: scale(1) translateY(-365px);
    transition: none;
    will-change: transform;
}

.bg-intro {
    z-index: 1;
}

.bg-main {
    z-index: 2;

    opacity: 0;
    transform: scale(1.25);
    transition: opacity .35s ease, background-image 0s linear .18s;
}

#HOME .bg-main.is-map-changing {
    opacity: .15;
}

/* #HOME .innerContent {
    transition: transform .1s linear;
    will-change: transform;
} */
#HOME .innerContent {
    opacity: 0;
    transform: translateY(30px);
}

#HOME .BGM {
    display: none;
}

#HOME .inner {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 60px;
    overflow: hidden;
    z-index: 2;
}

#HOME .inner:last-of-type {
    margin-bottom: 0px;
}

#HOME .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 0;
    margin-top: 11%;
    margin-bottom: 2%;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    pointer-EVENTs: none;
}

#HOME .inner .innerContent .logoBapho {
    position: relative;
    width: 16%;
}

#HOME .inner .innerContent .title-d {
    display: block;
    position: relative;
    width: 65%;
    margin-top: -5%;
}

#HOME .inner .innerContent .title-m {
    display: none;
}

#HOME .inner .innerContent .date {
    position: relative;
    width: 30%;
    margin-top: -2%;
    margin-bottom: 1%;
}

#HOME .inner .innerContent .deco-wrap .deco.feather {
    transform-origin: center center;
    will-change: transform;
}


/* FEATHER 1 */
#HOME .inner .innerContent .deco-wrap .deco.feather.feather1 {
    top: 0;
    right: 22%;
    width: 17%;

    animation: featherFloat1 14s ease-in-out infinite;
}


/* FEATHER 2 */
#HOME .inner .innerContent .deco-wrap .deco.feather.feather2 {
    top: -10%;
    left: 20%;
    width: 10%;

    animation: featherFloat2 16s ease-in-out infinite;
}


/* FEATHER 3 */
#HOME .inner .innerContent .deco-wrap .deco.feather.feather3 {
    top: 9%;
    left: 29%;
    width: 14%;

    animation: featherFloat3 15s ease-in-out infinite;
}


/* FEATHER 4 */
#HOME .inner .innerContent .deco-wrap .deco.feather.feather4 {
    top: -34%;
    left: 16%;
    width: 8%;

    animation: featherFloat4 18s ease-in-out infinite;
}



#HOME .inner .innerContent .deco-wrap .deco.circle1 {
    width: 36%;
    top: 7%;
    left: 32%;
    z-index: -1;
    animation: spin1 50s linear infinite;
}

#HOME .inner .innerContent .deco-wrap .deco.circle2 {
    width: 32%;
    top: 23%;
    left: 34%;
    z-index: -1;
    animation: spin2 50s linear infinite;
}

#HOME .inner .innerContent .scroll {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1%;
    filter: drop-shadow(2px 1px 0px #582200);
}

#HOME .inner .innerContent .scroll>.bar {
    position: relative;
    height: auto;
    width: 100%;
    transform: scale(1.2);
    z-index: 1;
    filter: drop-shadow(2px 2px 0px #632800);
}

#HOME .inner .innerContent .scroll>.cube {
    position: absolute;
    height: auto;
    width: 50%;
    top: 15%;
    left: 24%;
    z-index: 2;
    animation: floatingDown 2s linear infinite;
}

@media (max-width: 1024px) {
    #HOME .inner .innerContent .logoBapho {
        position: relative;
        width: 24%;
    }

    #HOME .inner .innerContent .title-d {
        position: relative;
        width: 83%;
        margin-top: -5%;
    }

    #HOME .inner .innerContent .date {
        position: relative;
        width: 50%;
    }
}

@media screen and (max-width: 768px) {

    #HOME {
        overflow: hidden;
    }

    #HOME .inner {
        padding-top: 80px;
        height: 200%;
    }

    #HOME .inner .innerContent {
        gap: 10px;
    }

    #HOME .inner .innerContent .title-d {
        display: none;
    }

    #HOME .inner .innerContent .logoBapho {
        position: relative;
        width: 33%;
        margin-top: -8%;
    }

    #HOME .inner .innerContent .title-m {
        position: relative;
        display: block;
        width: 68%;
        margin-top: -5%;
    }

    #HOME .inner .innerContent .date {
        width: 69%;
    }
}

@media screen and (max-width: 425px) {
    #HOME .inner .innerContent .logoBapho {
        position: relative;
        width: 53%;
    }

    #HOME .inner .innerContent .title-m {
        width: 100%;
    }

    #HOME .inner .innerContent .date {
        width: 100%;
    }
}

/* ----------------------------------------------- MAPS -------------------------------------------------- */
.MAPS {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    margin-top: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}


body.page-loaded .MAPS {
    opacity: 1;
}

.MAPS .inner:last-of-type {
    margin-bottom: 0px;
}

.MAPS .inner {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 60px;
    overflow: hidden;
}

.MAPS .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.MAPS .inner .innerContent .pen {
    position: absolute;
    width: 28%;
    bottom: 36%;
    right: 76%;
    transform: rotate(129deg);
    z-index: 2;
}

.MAPS .inner .innerContent .paper {
    position: absolute;
    width: 30%;
    top: -1%;
    left: 13%;
}

.MAPS .inner .innerContent .paper2 {
    position: absolute;
    width: 27%;
    bottom: 2%;
    right: 8%;
    transform: rotate(147deg);
}

#MAPS2 .inner .innerContent .paper,
#MAPS2 .inner .innerContent .paper2 {
    filter: hue-rotate(120deg);
}

#MAPS3 .inner .innerContent .paper,
#MAPS3 .inner .innerContent .paper2 {
    filter: hue-rotate(180deg);
}

#MAPS4 .inner .innerContent .paper,
#MAPS4 .inner .innerContent .paper2 {
    filter: hue-rotate(335deg);
}

.MAPS .inner .innerContent .bookWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 0;
    margin-left: 27.5%;
    margin-top: 4%;
    padding: 0 1rem;
    width: 100%;
}

.MAPS .inner .innerContent .bookWrap .bookContent {
    position: relative;
    display: block;
    width: 100%;
}

.MAPS .inner .innerContent .bookWrap .bookContent .book {
    width: 74%;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 70%;
    height: 100%;
    padding: 8% 5%;
    box-sizing: border-box;
    z-index: 1;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent>div {
    min-width: 0;
    box-sizing: border-box;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail,
.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .cardsDetail {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1.2 1 0;
    flex-direction: row;
    gap: 2%;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .m-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0.8 1 0;
    padding: 2%;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail .lore-city,
.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail .maps {
    width: 23vw;
    height: auto;
}

.MAPS .inner .innerContent .sticker {
    position: absolute;
    width: 9vw;
    right: 24vw;
    top: 8vw;
    z-index: 2;
}

.MAPS .inner .innerContent .tagline {
    position: absolute;
    width: 11vw;
    right: 27vw;
    top: 22vw;
    z-index: 2;
}

.MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .m-title img {
    width: 61vw;
    height: auto;
}

.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .arrow {
    width: 3vw;
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .arrow:hover {
    transform: scale(1.1);
}

.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards {
    display: block;
    width: 49vw;
    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* ketika card keluar */
.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards.card-out-left {
    opacity: 0;
    transform: translateX(-40px) scale(.96);
}

/* ketika card keluar ke kanan */
.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards.card-out-right {
    opacity: 0;
    transform: translateX(40px) scale(.96);
}

/* ketika card baru masuk */
.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards.card-in-left {
    opacity: 0;
    transform: translateX(40px) scale(.96);
}

.MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards.card-in-right {
    opacity: 0;
    transform: translateX(-40px) scale(.96);
}

@media (max-width: 1024px) {
    .MAPS .inner .innerContent {
        margin-top: 6%;
    }

    .MAPS .inner .innerContent .paper {
        width: 40%;
        top: -3%;
        left: 6%;
    }

    .MAPS .inner .innerContent .paper2 {
        width: 34%;
        bottom: 2%;
        right: 3%;
    }

    .MAPS .inner .innerContent .bookWrap {
        gap: 0;
        margin-left: 11.5%;
        margin-top: 4%;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .book {
        width: 93%;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent {
        width: 88%;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail .lore-city,
    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail .maps {
        width: 34vw;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards {
        width: 62vw;
    }
}

@media screen and (max-width: 768px) {
    .MAPS>.BG {
        height: 100vh;
    }

    .MAPS .inner .innerContent {
        margin-top: 20%;
    }
}

@media screen and (max-width: 425px) {

    .MAPS .inner .innerContent .sticker,
    .MAPS .inner .innerContent .tagline {
        display: none;
    }

    .MAPS .inner .innerContent .pen,
    .MAPS .inner .innerContent .paper,
    .MAPS .inner .innerContent .paper2,
    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .mapsDetail,
    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .m-title {
        display: none;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .book,
    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent {
        width: 100%;
    }

    .MAPS .inner .innerContent .bookWrap {
        margin-left: 0;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .m-title img {
        width: 77vw;
        height: auto;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .cardsDetail {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1.2 1 0;
        flex-direction: row;
        gap: 2%;
        margin-bottom: 12%;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .cards {
        width: 58vw;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .cardsDetail .arrow {
        width: 8vw;
    }

    .MAPS .inner .innerContent .bookWrap .bookContent .mapsContent .cardsDetail {
        align-items: end;
    }
}

/* ------------------------------------------------ SECTION 3 ------------------------------------------------- */

#SEASONAL {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#SEASONAL .BG {
    display: block;
}

#SEASONAL .BGM {
    display: none;
}

#SEASONAL .inner {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 60px;
    overflow: hidden;
}

#SEASONAL .inner:last-of-type {
    margin-bottom: 0px;
}

#SEASONAL .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 0;
    margin-top: 0;
    margin-bottom: 2%;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

#SEASONAL .inner .innerContent .title {
    position: relative;
    width: 71%;
}

.deco {
    position: absolute;
}

.deco-l {
    position: absolute;
    left: 0;
}

.deco-r {
    position: absolute;
    right: 0;
}

#SEASONAL .inner .innerContent .deco .deco-l.clouds.cloud1 {
    width: 15vw;
    top: 23vw;
    left: 8vw;
}

#SEASONAL .inner .innerContent .deco .deco-l.clouds.cloud2 {
    width: 38vw;
    top: 8vw;
    left: -7vw;
}

#SEASONAL .inner .innerContent .deco .deco-l.clouds.cloud3 {
    width: 11vw;
    top: 31vw;
    right: 43vw;
}

#SEASONAL .inner .innerContent .deco .deco-r.clouds.cloud4 {
    width: 30vw;
    top: 27vw;
    right: 1vw;
}

#SEASONAL .inner .innerContent .deco .deco-r.clouds.cloud5 {
    width: 22vw;
    top: 16vw;
    right: 12vw;
}

#SEASONAL .inner .innerContent .deco .clouds {
    animation: cloudFloat 7s ease-in-out infinite;
    will-change: transform;
}

/* Cloud kiri */
#SEASONAL .inner .innerContent .deco .cloud1 {
    animation-duration: 8s;
    animation-delay: 0s;
}

#SEASONAL .inner .innerContent .deco .cloud2 {
    animation-duration: 11s;
    animation-delay: -3s;
}

#SEASONAL .inner .innerContent .deco .cloud3 {
    animation-duration: 9s;
    animation-delay: -5s;
}

/* Cloud kanan */
#SEASONAL .inner .innerContent .deco .cloud4 {
    animation-duration: 10s;
    animation-delay: -2s;
}

#SEASONAL .inner .innerContent .deco .cloud5 {
    animation-duration: 8.5s;
    animation-delay: -4s;
}

#SEASONAL .deco-l.paper {
    width: 17vw;
    bottom: 0;
}

#SEASONAL .deco-l.book {
    width: 14vw;
    bottom: 0;
}


#SEASONAL .inner .innerContent .pinsContent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: relative;
    gap: 6vw;
    width: 53vw;
}

#SEASONAL .inner .innerContent .pinsContent .pin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

#SEASONAL .inner .innerContent .pinsContent .pin1 img.pin {
    animation-delay: 0s;
}

#SEASONAL .inner .innerContent .pinsContent .pin2 img.pin {
    animation-delay: 1.2s;
}

#SEASONAL .inner .innerContent .pinsContent .pin3 img.pin {
    animation-delay: 2.4s;
}

#SEASONAL .inner .innerContent .pinsContent .pin.pin1 {
    margin-top: 7vw;
}

#SEASONAL .inner .innerContent .pinsContent .pin.pin2 {
    margin-top: -14vw;
}

#SEASONAL .inner .innerContent .pinsContent .pin.pin3 {
    margin-top: 16vw;
}

#SEASONAL .inner .innerContent .pinsContent img.pin {
    position: relative;
    width: 11vw;
    cursor: pointer;

    animation: pinFloat 4.5s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Hover */
#SEASONAL .inner .innerContent .pinsContent img.pin:hover {
    animation-play-state: paused;
    transform: scale(1.1) translateY(-0.3vw);
    transition: transform 0.3s ease-in-out;
}

#SEASONAL .inner .innerContent .pinsContent img.name-pin {
    position: relative;
    width: 14vw;
}

#SEASONAL .inner .innerContent .popupWrapper {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 1005;
    opacity: 0;
    transition:
        opacity .3s ease
}


/* POPUP AKTIF */

#SEASONAL .inner .innerContent .popupWrapper.active {
    display: flex;
    opacity: 1;
}

#SEASONAL .popupContent {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-25px) rotate(-1deg);

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.22, .61, .36, 1);
}

#SEASONAL .popupWrapper.active .popupContent {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

#SEASONAL .inner .innerContent .popupWrapper img.seasonal {
    position: relative;
    width: 30vw;

}

#SEASONAL .inner .innerContent .popupWrapper img.btn-more {
    position: relative;
    width: 16vw;
    bottom: 1.5vw;
    cursor: pointer;
    filter: saturate(0.5);
    transition: all 0.3s ease-in-out;

}

#SEASONAL .inner .innerContent .popupWrapper img.btn-more:hover {
    filter: saturate(1);
    transform: scale(1.05);
}

#SEASONAL .inner .innerContent .popupWrapper img.btn-close {
    position: relative;
    width: 2vw;
    bottom: -1vw;
    right: -17vw;
    z-index: 1;
    filter: drop-shadow(2px 4px 6px black);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#SEASONAL .inner .innerContent .popupWrapper img.btn-close:hover {
    transform: scale(1.05);

}

@media screen and (max-width: 768px) {

    #SEASONAL {
        overflow: visible;
    }

    #SEASONAL .BG {
        display: none;
    }

    #SEASONAL .BGM {
        display: block;
    }

    #SEASONAL .inner {
        padding-top: 80px;
        height: 100%;
    }

    #SEASONAL .inner .innerContent {
        gap: 10px;
    }

    #SEASONAL .inner .innerContent .title {
        position: relative;
        width: 100%;
    }

    #SEASONAL .inner .innerContent .pinsContent {
        width: 89vw;
    }

    #SEASONAL .inner .innerContent .pinsContent .pin.pin1 {
        margin-top: 9vw;
    }

    #SEASONAL .inner .innerContent .pinsContent .pin.pin2 {
        margin-top: -46vw;
    }

    #SEASONAL .inner .innerContent .pinsContent .pin.pin3 {
        margin-top: 64vw;
    }

    #SEASONAL .inner .innerContent .pinsContent img.pin {
        width: 34vw;
    }

    #SEASONAL .inner .innerContent .pinsContent img.name-pin {
        position: relative;
        width: 43vw;
    }

    #SEASONAL .inner .innerContent .popupWrapper img.btn-close {
        width: 4vw;
        bottom: 0vw;
        right: -36vw;
        z-index: 1;
        filter: drop-shadow(2px 4px 6px black);
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    #SEASONAL .inner .innerContent .popupWrapper img.seasonal {
        width: 66vw;
    }

    #SEASONAL .inner .innerContent .popupWrapper img.btn-more {
        width: 47vw;
        bottom: 3.5vw;
    }
}



/* ------------------------------------------------ SECTION 6 ------------------------------------------------- */
#EVENT {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#EVENT .BG {
    display: block;
}

#EVENT .BGM {
    display: none;
}

#EVENT .inner {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 60px;
    overflow: hidden;
}

#EVENT .inner:last-of-type {
    margin-bottom: 0px;
}

#EVENT .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

#EVENT .inner .innerContent .title {
    display: block;
    position: relative;
    width: 55%;
}

#EVENT .inner .innerContent .title-mobile {
    display: none;
}

#EVENT .inner .EVENT-CONTENT {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
    width: 53vw;
    max-width: unset;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-DESKTOP {
    display: block;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-MOBILE {
    display: none;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
    height: 40vw;
    margin-top: -8%;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
    width: 3%;
    height: 8%;
    left: 34%;
    top: 94%;
    transform: scaleX(-1);
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
    width: 3%;
    height: 8%;
    right: 34%;
    top: 94%;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev:hover {
    filter: saturate(2);
    cursor: pointer;
}

#EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next:hover {
    cursor: pointer;
}

.swiper-slide img {
    filter: grayscale(1) blur(2px) contrast(0.9);
    /* border: 8px solid #c4c4c4;
    border-radius: 12px; */
    width: 5vw;
}

.swiper-container .swiper-slide img {
    filter: grayscale(1) blur(2px) contrast(0.9);
    border: 8px solid #994d17;
    border-radius: 12px;
    width: 5vw;
}

.swiper-container .swiper-slide-active img {
    filter: grayscale(0%);
    opacity: 1;
}

.swiper-slide-active img {
    filter: grayscale(0%);
    opacity: 1;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 28px !important;
    left: 38.5% !important;
    width: 24% !important;
}

.swiper-pagination-bullet {
    border-radius: 0 !important;
    width: 65px !important;
    height: 7px !important;
    transform: skew(25deg);
}

.swiper-pagination-bullet {
    opacity: 0.5;
    transition: 0.3s;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

@media screen and (max-width: 1707px) {

    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 24px !important;
        left: 21.5% !important;
        width: 57% !important;
        z-index: 0;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
        left: 27%;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
        width: 3%;
        height: 8%;
        right: 27%;
        top: 94%;
    }
}

@media screen and (max-width: 1024px) {
    #EVENT .inner:last-of-type {
        margin-bottom: 13vw;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
        left: 20vw;
        top: 37vw;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
        right: 20vw;
        top: 37vw;
    }
}

@media screen and (max-width: 768px) {
    #EVENT .BG {
        display: none;
    }

    #EVENT .BGM {
        display: block;
    }

    .ggl-roc-section-6 {
        min-height: 177vw;
    }

    #EVENT .inner:last-of-type {
        margin-bottom: 0vw;
    }

    #EVENT .SC6-BG {
        display: none;
    }

    #EVENT .SC6-BG-MOBILE {
        display: block;
    }

    #EVENT .inner .innerContent .title {
        display: none;
    }

    #EVENT .inner .innerContent .title-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 81%;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
        width: 64vw;
        border: 8px solid #c4c4c4;
        border-radius: 12px;
        filter: drop-shadow(2px 4px 7px black);
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-DESKTOP {
        display: none;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-MOBILE {
        display: block;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
        height: 115vw;
        margin-top: 2%;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
        width: 10%;
        height: 10%;
        left: 10%;
        top: 45%;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
        width: 10%;
        height: 10%;
        right: 10%;
        top: 45%;
    }

    img.ggl-roc-section-11-frame-EVENT {
        display: none;
    }

    .swiper-pagination {
        display: none;
    }
}

@media screen and (max-width: 425px) {
    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
        width: 63vw;
    }

    #EVENT .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
        margin-top: 8%;
    }

    #EVENT .inner .innerContent .title-mobile {
        width: 63%;
    }
}

/* ----------------------------------------------- FOOTER -------------------------------------------------- */


footer {
    background: #000000;
    background-size: cover;
    border-top: 3px solid #fbd760;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.row-logo {
    padding-top: 1%;
    margin-bottom: 0.5%;
}

.sosmed {
    font-size: 1.7vw;
}

.sosmed a {
    color: white;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0.5%;
    margin-left: 0.5%;
}

.sosmed a:hover {
    color: #fbd760;
}

.logo-footer {
    width: 10%;
    margin-bottom: 1%;
}

.text-footer {
    font-size: 1vw;
    color: white;
    margin-bottom: 1%;
}

.ggl-info {
    color: white;
}

@media screen and (max-width: 768px) {

    .sosmed {
        font-size: 4vw;
    }

    .logo-footer {
        width: 20%;
    }

    .text-footer {
        font-size: 2vw;
    }

}

/* ------------------------------------------------ THUNDER  ------------------------------------------------- */
#canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 999;
    pointer-EVENTs: none;
}

body {
    margin: 0px;
}

@media screen and (max-width: 768px) {

    #canvas {
        display: none;
    }
}