/*Start CSS logo SVG */
    .cls-1 {
        fill: #f9b21c;
    }

    .cls-1,
    .cls-2,
    .cls-3,
    .cls-4,
    .cls-5,
    .cls-6,
    .cls-7,
    .cls-8,
    .cls-9,
    .cls-10,
    .cls-11,
    .cls-12,
    .cls-13,
    .cls-14,
    .cls-15 {
        stroke-width: 0px;
    }

    .cls-16 {
        clip-path: url(#clippath-2);
    }

    .cls-17 {
        clip-path: url(#clippath-6);
    }

    .cls-2 {
        fill: none;
    }

    .cls-3 {
        fill: #ffe102;
    }

    .cls-18 {
        clip-path: url(#clippath-1);
    }

    .cls-19 {
        clip-path: url(#clippath-4);
    }

    .cls-4 {
        fill: #f9fe02;
    }

    .cls-5 {
        fill: #fffad2;
    }

    .cls-6 {
        fill: #c93131;
    }

    .cls-7,
    .cls-20 {
        fill: #ea4d37;
    }

    .cls-21 {
        clip-path: url(#clippath);
    }

    .cls-8 {
        fill: #d9f6fc;
    }

    .cls-9 {
        fill: #42210b;
    }

    .cls-22 {
        clip-path: url(#clippath-3);
    }

    .cls-10 {
        fill: #300;
    }

    .cls-11 {
        fill: #603813;
    }

    .cls-23 {
        clip-path: url(#clippath-5);
    }

    .cls-12 {
        fill: #e77826;
    }

    .cls-13 {
        fill: #fc0;
    }

    .cls-14 {
        fill: #f2f2f2;
    }

    .cls-15 {
        fill: #abd8db;
    }

/* End logo SVG */

.rpg-rotate {
    animation: spin 6s linear infinite;
}

.tr-origin {
    transform-origin: center center;
    transform-box: fill-box;
}

.rpg-ani-1 {
    transform-origin: 5px 0px;
    animation: hairfly1 1.5s ease-in infinite alternate;
}

.rpg-ani-2 {
    transform-origin: 8px 2px;
    animation: hairfly2 1.5s linear infinite alternate;
}

.rpg-ani-3 {
    animation: lightningFlash 3s infinite linear alternate;
}

.rpg-ani-4 {
    animation: fireBurn 1s infinite linear alternate;
}

.rpg-ani-5 {
    animation: lightningFlash1 1s infinite linear alternate;
}

.rpg-ani-6 {
    animation: fireBurn2 0.5s infinite linear alternate;
}

.rpg-ani-de11 {
    animation-delay: 0.1s;
}

.rpg-ani-de2 {
    animation-delay: 0.2s;
}

.rpg-ani-de3 {
    animation-delay: 0.3s;
}

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

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

@keyframes hairfly1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(24deg);
    }
}

@keyframes hairfly2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(18deg);
    }
}

@keyframes lightningFlash {
    0% {
        transform: scale(0.5) rotate(10deg);
        opacity: 0.5;
    }

    33% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    66% {
        transform: scale(0.6) rotate(-10deg);
        opacity: 0.6;
    }

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

@keyframes lightningFlash1 {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fireBurn {
    0% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    33% {
        transform: scale(1);
        opacity: 1;
    }

    66% {
        transform: scale(0.6);
        opacity: 0.6;
    }

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

@keyframes fireBurn2 {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.c-parallax {
    width: 100%;
    height: auto;
    aspect-ratio: 889 / 625;
    display: block;
    overflow: hidden;
    position: relative;
}
.c-parallax__wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.c-parallax .parallax {
    will-change: transform;
    transition: transform 0.2s linear;
}

.rpg-character,.rpg-qrcode {
    opacity: 0;
}

.rpg-mountain-wrapper,
.rpg-city-wrapper {
    transform: translateY(1000px);
}
@media (max-width: 767px) and (orientation: portrait){
    .c-parallax{
        aspect-ratio: 4 / 5;
    }
    .c-parallax svg{
        aspect-ratio: 3 / 5;
    }
    .c-parallax svg .rpg-qrcode{
        display: none;
    }
}