@keyframes cube-loop {
    0%, 100% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 1);
    }
    10% {
        background: var(--red);
        -webkit-box-shadow: 0px 0px 40px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 40px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 40px 0px rgba(255, 0, 0, 1);
    }
}

@keyframes cube-loop-blue {
    0%, 100% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 174, 255, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0, 174, 255, 1);
        box-shadow: 0px 0px 0px 0px rgba(0, 174, 255, 1);
    }
    10% {
        background: var(--blue);
        -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 174, 255, 1);
        -moz-box-shadow: 0px 0px 40px 0px rgba(0, 174, 255, 1);
        box-shadow: 0px 0px 40px 0px rgba(0, 174, 255, 1);
    }
}

@keyframes cube-loop-orange {
    0%, 100% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 130, 0, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 130, 0, 1);
        box-shadow: 0px 0px 0px 0px rgba(255, 130, 0, 1);
    }
    10% {
        background: var(--orange);
        -webkit-box-shadow: 0px 0px 40px 0px rgba(255, 130, 0, 1);
        -moz-box-shadow: 0px 0px 40px 0px rgba(255, 130, 0, 1);
        box-shadow: 0px 0px 40px 0px rgba(255, 130, 0, 1);
    }
}

.cubie.s1.anim {
    animation: cube-loop 1.9s ease 45s infinite normal none;
}

.cubie.s2.anim {
    animation: cube-loop 2.7s ease 40s infinite normal none;
}

.cubie.s3.anim {
    animation: cube-loop 3.1s ease 37s infinite normal none;
}

.cubie.s4.anim {
    animation: cube-loop 1.5s ease 24s infinite normal none;
}

.cubie.s5.anim {
    animation: cube-loop 2.3s ease 5s infinite normal none;
}

.cubie.s6.anim {
    animation: cube-loop 1.8s ease 15.7s infinite normal none;
}

.cubie.s7.anim {
    animation: cube-loop 3.3s ease 19s infinite normal none;
}

.cubie.s8.anim {
    animation: cube-loop 2.2s ease 9s infinite normal none;
}

.cubie.s9.anim {
    animation: cube-loop 2.4s ease 4.3s infinite normal none;
}

/*BLUE*/

.blue .cubie.s1.anim {
    animation: cube-loop-blue 1.9s ease 45s infinite normal none;
}

.blue .cubie.s2.anim {
    animation: cube-loop-blue 2.7s ease 40s infinite normal none;
}

.blue .cubie.s3.anim {
    animation: cube-loop-blue 3.1s ease 37s infinite normal none;
}

.blue .cubie.s4.anim {
    animation: cube-loop-blue 1.5s ease 24s infinite normal none;
}

.blue .cubie.s5.anim {
    animation: cube-loop-blue 2.3s ease 5s infinite normal none;
}

.blue .cubie.s6.anim {
    animation: cube-loop-blue 1.8s ease 15.7s infinite normal none;
}

.blue .cubie.s7.anim {
    animation: cube-loop-blue 3.3s ease 19s infinite normal none;
}

.blue .cubie.s8.anim {
    animation: cube-loop-blue 2.2s ease 9s infinite normal none;
}

.blue .cubie.s9.anim {
    animation: cube-loop-blue 2.4s ease 4.3s infinite normal none;
}

/*ORANGE*/

.orange .cubie.s1.anim {
    animation: cube-loop-orange 1.9s ease 45s infinite normal none;
}

.orange .cubie.s2.anim {
    animation: cube-loop-orange 2.7s ease 40s infinite normal none;
}

.orange .cubie.s3.anim {
    animation: cube-loop-orange 3.1s ease 37s infinite normal none;
}

.orange .cubie.s4.anim {
    animation: cube-loop-orange 1.5s ease 24s infinite normal none;
}

.orange .cubie.s5.anim {
    animation: cube-loop-orange 2.3s ease 5s infinite normal none;
}

.orange .cubie.s6.anim {
    animation: cube-loop-orange 1.8s ease 15.7s infinite normal none;
}

.orange .cubie.s7.anim {
    animation: cube-loop-orange 3.3s ease 19s infinite normal none;
}

.orange .cubie.s8.anim {
    animation: cube-loop-orange 2.2s ease 9s infinite normal none;
}

.orange .cubie.s9.anim {
    animation: cube-loop-orange 2.4s ease 4.3s infinite normal none;
}

@keyframes bg-lines-vert-first {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(350px)
    }
    80% {
        transform: translateX(35vw)
    }
    100% {
        transform: translateX(0)
    }
}

.vert-line-first {
    animation: bg-lines-vert-first 25s ease 0s infinite normal none;
}

@keyframes bg-lines-vert-second {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-250px)
    }
    80% {
        transform: translateX(-35vw)
    }
    100% {
        transform: translateX(0)
    }
}

.vert-line-second {
    animation: bg-lines-vert-second 15s ease 0s infinite normal none;
}

@keyframes reel-first {
    0% {
        background-position: top center;
        filter: blur(5px);
    }
    5% {
        background-position: bottom center;
        filter: blur(0px);
    }
    5.01% {
        background-position: top center;
        filter: blur(5px);
    }
    10% {
        background-position: bottom center;
        filter: blur(0px);
    }
    10.01% {
        background-position: top center;
        filter: blur(5px);
    }
    15% {
        background-position: bottom center;
        filter: blur(0px);
    }
    15.01% {
        background-position: top center;
        filter: blur(5px);
    }
    20% {
        background-position: bottom center;
        filter: blur(0px);
    }
    20.01% {
        background-position: top center;
        filter: blur(5px);
    }
    25% {
        background-position: bottom center;
        filter: blur(0px);
    }
    25.01% {
        background-position: top center;
        filter: blur(5px);
    }
    30% {
        background-position: bottom center;
        filter: blur(0px);
    }
    50% {
        background-position: bottom center;
    }
    99% {
        background-position: bottom center;
    }
    100% {
        background-position: top center;
    }
}

@keyframes reel-second {
    0% {
        background-position: top center;
        filter: blur(5px);
    }
    7% {
        background-position: bottom center;
        filter: blur(0px);
    }
    7.01% {
        background-position: top center;
        filter: blur(5px);
    }
    12% {
        background-position: bottom center;
        filter: blur(0px);
    }
    12.01% {
        background-position: top center;
        filter: blur(5px);
    }
    19% {
        background-position: bottom center;
        filter: blur(0px);
    }
    19.01% {
        background-position: top center;
        filter: blur(5px);
    }
    22% {
        background-position: bottom center;
        filter: blur(0px);
    }
    22.01% {
        background-position: top center;
        filter: blur(5px);
    }
    27% {
        background-position: bottom center;
        filter: blur(0px);
    }
    27.01% {
        background-position: top center;
        filter: blur(5px);
    }
    33% {
        background-position: bottom center;
        filter: blur(0px);
    }
    50% {
        background-position: bottom center;
    }
    99% {
        background-position: bottom center;
    }
    100% {
        background-position: top center;
    }
}

@keyframes reel-third {
    0% {
        background-position: top center;
        filter: blur(5px);
    }
    3% {
        background-position: bottom center;
        filter: blur(0px);
    }
    3.01% {
        background-position: top center;
        filter: blur(5px);
    }
    7% {
        background-position: bottom center;
        filter: blur(0px);
    }
    7.01% {
        background-position: top center;
        filter: blur(5px);
    }
    15% {
        background-position: bottom center;
        filter: blur(0px);
    }
    15.01% {
        background-position: top center;
        filter: blur(5px);
    }
    18% {
        background-position: bottom center;
        filter: blur(0px);
    }
    18.01% {
        background-position: top center;
        filter: blur(5px);
    }
    23% {
        background-position: bottom center;
        filter: blur(0px);
    }
    23.01% {
        background-position: top center;
        filter: blur(5px);
    }
    27% {
        background-position: bottom center;
        filter: blur(0px);
    }
    50% {
        background-position: bottom center;
    }
    99% {
        background-position: bottom center;
    }
    100% {
        background-position: top center;
    }
}

.reel.first {
    animation: reel-first 10s ease 0s infinite normal none;
}

.reel.second {
    animation: reel-second 10s ease 0s infinite normal none;
}

.reel.third {
    animation: reel-third 10s ease 0s infinite normal none;
}

@keyframes logo-slot {
    27% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px red);
    }
    30% {
        opacity: 1;
        filter: drop-shadow(0 0 5px red);
    }
    32% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px red);
    }
    34% {
        opacity: 1;
        filter: drop-shadow(0 0 5px red);
    }
    36% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px red);
    }
    38% {
        opacity: 1;
        filter: drop-shadow(0 0 5px red);
    }
    40% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px red);
    }
    42% {
        opacity: 1;
        filter: drop-shadow(0 0 5px red);
    }
    75% {
        opacity: 1;
        filter: drop-shadow(0 0 5px red);
    }
}

/*BLUE*/

@keyframes logo-slot-blue {
    27% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px blue);
    }
    30% {
        opacity: 1;
        filter: drop-shadow(0 0 5px blue);
    }
    32% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px blue);
    }
    34% {
        opacity: 1;
        filter: drop-shadow(0 0 5px blue);
    }
    36% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px blue);
    }
    38% {
        opacity: 1;
        filter: drop-shadow(0 0 5px blue);
    }
    40% {
        opacity: 0.5;
        filter: drop-shadow(0 0 0px blue);
    }
    42% {
        opacity: 1;
        filter: drop-shadow(0 0 5px blue);
    }
    75% {
        opacity: 1;
        filter: drop-shadow(0 0 5px blue);
    }
}

.logo-slot {
    animation: logo-slot 10s ease 0s infinite normal none;
}

.blue .logo-slot {
    animation: logo-slot-blue 10s ease 0s infinite normal none;
}

@keyframes slot-line {
    27% {
        filter: drop-shadow(0 0 0px #000);
    }
    30% {
        filter: drop-shadow(0 0 5px red);
    }
    32% {
        filter: drop-shadow(0 0 0px red);
    }
    34% {
        filter: drop-shadow(0 0 5px red);
    }
    36% {
        filter: drop-shadow(0 0 0px red);
    }
    38% {
        filter: drop-shadow(0 0 5px red);
    }
    40% {
        filter: drop-shadow(0 0 0px red);
    }
}

/*BLUE*/

@keyframes slot-line-blue {
    27% {
        filter: drop-shadow(0 0 0px #000);
    }
    30% {
        filter: drop-shadow(0 0 5px blue);
    }
    32% {
        filter: drop-shadow(0 0 0px blue);
    }
    34% {
        filter: drop-shadow(0 0 5px blue);
    }
    36% {
        filter: drop-shadow(0 0 0px blue);
    }
    38% {
        filter: drop-shadow(0 0 5px blue);
    }
    40% {
        filter: drop-shadow(0 0 0px blue);
    }
}

.slot-bg .line {
    animation: slot-line 10s ease 0s infinite normal none;
}

.blue .slot-bg .line {
    animation: slot-line-blue 10s ease 0s infinite normal none;
}

@keyframes all-reels {
    29% {
        background-color: transparent;
    }
    30% {
        background-color: var(--red);
    }
    32% {
        background-color: transparent;
    }
    34% {
        background-color: var(--red);
    }
    36% {
        background-color: transparent;
    }
    38% {
        background-color: var(--red);
    }
    40% {
        background-color: transparent;
    }
}

/*BLUE*/

@keyframes all-reels-blue {
    29% {
        background-color: transparent;
    }
    30% {
        background-color: var(--blue);
    }
    32% {
        background-color: transparent;
    }
    34% {
        background-color: var(--blue);
    }
    36% {
        background-color: transparent;
    }
    38% {
        background-color: var(--blue);
    }
    40% {
        background-color: transparent;
    }
}

/*ORANGE*/

@keyframes all-reels-orange {
    29% {
        background-color: transparent;
    }
    30% {
        background-color: var(--orange);
    }
    32% {
        background-color: transparent;
    }
    34% {
        background-color: var(--orange);
    }
    36% {
        background-color: transparent;
    }
    38% {
        background-color: var(--orange);
    }
    40% {
        background-color: transparent;
    }
}

.all-reels {
    animation: all-reels 10s ease 0s infinite normal none;
}

.blue .all-reels {
    animation: all-reels-blue 10s ease 0s infinite normal none;
}

.orange .all-reels {
    animation: all-reels-orange 10s ease 0s infinite normal none;
}

@keyframes bg-lines-horiz {
    0% {
        transform: translateY(0)
    }
    30% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(150px)
    }
    100% {
        transform: translateY(0)
    }
}

.horiz-line-first {
    animation: bg-lines-horiz 10s ease 0s infinite normal none;
}

@keyframes gfx-cards-scale {
    0% {
        transform: scale(1) translateY(0px);
    }
    50% {
        transform: scale(1.05) translateY(20px) rotate(-6deg);
    }
    100% {
        transform: scale(1) translateY(0px) rotate(0);
    }
}

.gfx-cards {
    animation: gfx-cards-scale 30s ease 0s infinite normal none;
}

@keyframes gfx-table-float {
    20% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(10px) scale(1.05)
    }
}

.gfx-table {
    animation: gfx-table-float 30s ease 0s infinite normal none;
}

@keyframes corner-top-left-anim {
    0% {
        width: 200px;
        height: 30px;
    }
    10% {
        width: 70px;
        height: 70px;
    }
    20% {
        width: 300px;
        height: 30px;
    }
    25% {
        width: 20px;
        height: 300px;
    }
    35% {
        width: 70px;
        height: 70px;
    }
    90% {
        width: 70px;
        height: 70px;
    }
    100% {
        width: 200px;
        height: 30px;
    }
}

.corner-top-left {
    animation: corner-top-left-anim 10s ease 0s infinite normal none;
}

@keyframes corner-bottom-right-anim {
    0% {
        width: 200px;
        height: 30px;
    }
    10% {
        width: 70px;
        height: 70px;
    }
    20% {
        width: 300px;
        height: 30px;
    }
    25% {
        width: 20px;
        height: 300px;
    }
    35% {
        width: 70px;
        height: 70px;
    }
    90% {
        width: 70px;
        height: 70px;
    }
    100% {
        width: 200px;
        height: 30px;
    }
}

.corner-bottom-right {
    animation: corner-bottom-right-anim 10s ease 0s infinite normal none;
}

@keyframes about-circles {
    10% {
        transform: translate(-5px, 0)
    }
    50% {
        transform: translate(10px, 5px)
    }
    80% {
        transform: translate(5px, -5px)
    }
    90% {
        transform: translate(5px, 0)
    }
}

.about-ico.first .border1 {
    animation: about-circles 22s ease 0s infinite normal none;
}

.about-ico.first .border2 {
    animation: about-circles 18s ease 5s infinite normal none;
}

.about-ico.second .border1 {
    animation: about-circles 22s ease 4s infinite normal none;
}

.about-ico.second .border2 {
    animation: about-circles 18s ease 3s infinite normal none;
}

.about-ico.third .border1 {
    animation: about-circles 22s ease 7s infinite normal none;
}

.about-ico.third .border2 {
    animation: about-circles 18s ease 1s infinite normal none;
}

@keyframes colors-btn-anim {
    0% {
        fill: var(--red);
    }
    60% {
        fill: var(--light-red);
    }
    100% {
        fill: var(--red);
    }
}

@keyframes colors-btn-anim-blue {
    0% {
        fill: var(--blue);
    }
    60% {
        fill: var(--light-blue);
    }
    100% {
        fill: var(--blue);
    }
}

@keyframes colors-btn-anim-orange {
    0% {
        fill: var(--orange);
    }
    60% {
        fill: var(--light-orange);
    }
    100% {
        fill: var(--orange);
    }
}

.nav-btn.colors-btn .icon svg {
    animation: colors-btn-anim 8s ease 1s infinite normal none;
    transition: 0.2s;
}

.blue .nav-btn.colors-btn .icon svg {
    animation: colors-btn-anim-blue 8s ease 1s infinite normal none;
    transition: 0.2s;
}

.orange .nav-btn.colors-btn .icon svg {
    animation: colors-btn-anim-orange 8s ease 1s infinite normal none;
    transition: 0.2s;
}