.rpgq-text-shadown-1{ text-shadow: hsl(228, 90%, 38%) 1px 1px 1px; }
.rpgq-text-shadown-2{ text-shadow: hsl(228, 90%, 38%) 2px 2px 2px; }
.rpgq-text-shadown-3{ text-shadow: hsl(228, 90%, 38%) 3px 3px 3px; }

.f-color-rpgq-dark-blue{ color: hsl(258, 100%, 7%); }
.f-color-rpgq-black-blue{ color: hsl(254, 100%, 3%); }
.f-color-rpgq-light-blue{ color: hsl(181, 69%, 76%); }
.f-color-rpgq-shadow-blue{ color: hsl(228, 90%, 38%); }
.f-color-rpgq-paragraph-blue{ color: hsl(234, 87%, 28%); }
.f-color-rpgq-purple{ color: hsl(288, 95%, 62%); }
.f-color-rpgq-gold{ color: hsl(44, 99%, 47%); }
.f-color-rpgq-beige{ color: hsl(48, 100%, 88%); }
.f-color-rpgq-light-silver{ color: hsl(0, 0%, 67%); }

/*
gold #F0AF01
beige #FFF3C3
silver #ACACAC
purple #D542FA
dark blue #0B0024
black blue #04000F
light blue #98EBEC
shadow blue #0A2DB8
paragraph blue #091686
*/

.gd-rpgqblack-to-blue-tc{
background-image:linear-gradient(to bottom,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-bc{
background-image:linear-gradient(to top,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-rc{
background-image:linear-gradient(to left,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-lc{
background-image:linear-gradient(to right,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-tl,.gd-rpgqblack-to-blue-lt{
background-image:linear-gradient(to bottom right,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-tr,.gd-rpgqblack-to-blue-rt{
background-image:linear-gradient(to bottom left,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-bl,.gd-rpgqblack-to-blue-lb{
background-image:linear-gradient(to top right,#0B0024,#091686) !important;
}
.gd-rpgqblack-to-blue-br,.gd-rpgqblack-to-blue-rb{
background-image:linear-gradient(to top left,#0B0024,#091686) !important;
}
    
.bg-color-rpgq-dark-blue{ background-color: hsl(258, 100%, 7%); }
.bg-color-rpgq-black-blue{ background-color: hsl(254, 100%, 3%); }
.bg-color-rpgq-light-blue{ background-color: hsl(181, 69%, 76%); }
.bg-color-rpgq-shadow-blue{ background-color: hsl(228, 90%, 38%); }

@keyframes rpgqXLoopMov {
    100% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
    }
    94% {
        background-position: center 90px;
        opacity: 0.9;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    75% {
        background-position: center 100px;
        opacity: 0.85;
        filter: grayscale(20%);
    }
    71% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(35%);
    }
    66% {
        background-position: center 140px;
        opacity: 0.76;
        filter: grayscale(52%);
    }
    56% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(67%);
    }
    43% {
        background-position: center 130px;
        opacity: 0.85;
        filter: grayscale(53%);
    }
    25% {
        background-position: center 100px;
        opacity: 0.9;
        filter: grayscale(20%);
    }
    20% {
        background-position: center 90px;
        opacity: 0.95;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    0% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
    }
}

.rpgqXLoopMov {
    -webkit-animation-name: rpgqXLoopMov;
    animation-name: rpgqXLoopMov;
    animation-iteration-count: infinite;
}


@keyframes rpgqXLoopMovRotateA {
    100% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
        transform: rotate(-10deg);
    }
    94% {
        background-position: center 90px;
        opacity: 0.9;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    75% {
        background-position: center 100px;
        opacity: 0.85;
        filter: grayscale(20%);
    }
    71% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(35%);
    }
    66% {
        background-position: center 140px;
        opacity: 0.76;
        filter: grayscale(52%);
        transform: rotate(0deg);
    }
    56% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(67%);
    }
    43% {
        background-position: center 130px;
        opacity: 0.85;
        filter: grayscale(53%);
    }
    25% {
        background-position: center 100px;
        opacity: 0.9;
        filter: grayscale(20%);
    }
    20% {
        background-position: center 90px;
        opacity: 0.95;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    0% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
        transform: rotate(-15deg);
    }
}

.rpgqXLoopMovRotateA {
    -webkit-animation-name: rpgqXLoopMovRotateA;
    animation-name: rpgqXLoopMovRotateA;
    animation-iteration-count: infinite;
}


@keyframes rpgqXLoopMovRotateB {
    100% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
        transform: rotate(-17deg);
    }
    94% {
        background-position: center 90px;
        opacity: 0.9;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    75% {
        background-position: center 100px;
        opacity: 0.85;
        filter: grayscale(20%);
    }
    71% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(35%);
    }
    66% {
        background-position: center 140px;
        opacity: 0.76;
        filter: grayscale(52%);
        transform: rotate(0deg);
    }
    56% {
        background-position: center 135px;
        opacity: 0.8;
        filter: grayscale(67%);
    }
    43% {
        background-position: center 130px;
        opacity: 0.85;
        filter: grayscale(53%);
    }
    25% {
        background-position: center 100px;
        opacity: 0.9;
        filter: grayscale(20%);
    }
    20% {
        background-position: center 90px;
        opacity: 0.95;
        filter: drop-shadow(0px 0px 2px #84D0E3);
    }
    0% {
        background-position: center 80px;
        opacity: 1;
        filter: drop-shadow(0px 0px 5px #0826AA);
        transform: rotate(-13deg);
    }
}

.rpgqXLoopMovRotateB {
    -webkit-animation-name: rpgqXLoopMovRotateB;
    animation-name: rpgqXLoopMovRotateB;
    animation-iteration-count: infinite;
}

h2.rpgq-h2
{
    background-image:url('/source/pwa/orbisimmersiva/img/content/margin-tl-roleplaying-game-quest.webp');
    background-position: 5px 5px;
    background-repeat: no-repeat;
    padding: 20px 20px 25px 20px !important;
}

h2.rpgq-h2::after
{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 5px;
    width: 40px;
    height: 40px;
    display: block;
    background-image:url('/source/pwa/orbisimmersiva/img/content/margin-br-roleplaying-game-quest.webp');
}