.arrow-left, .arrow-right, .box-art-burst, .box-art-paint, .button-cap, .down-arrow, .facebook-icon, .facebook-icon-over, .hash-1, .hash-2, .instagram-icon, .instagram-icon-over, .logo-paint-shadow, .media-paint, .media-thumb, .media-thumb-orange, .nav-burger, .nav-x, .play-arrow, .play-arrow-over, .top-arrow, .twitter-icon, .twitter-icon-over, .youtube-icon, .youtube-icon-over {
    background-image: url(../images/sprite.webp)
}

.blue .watercolor-a, .blue .watercolor-b, .blue .watercolor-c, .blue .watercolor-d {
    background-image: url(../images/watercolor-fx-blue.webp)
}

.green .watercolor-a, .green .watercolor-b, .green .watercolor-c, .green .watercolor-d {
    background-image: url(../images/watercolor-fx-green.webp)
}

.orange .watercolor-a, .orange .watercolor-b, .orange .watercolor-c, .orange .watercolor-d {
    background-image: url(../images/watercolor-fx-orange.webp)
}

.pink .watercolor-a, .pink .watercolor-b, .pink .watercolor-c, .pink .watercolor-d {
    background-image: url(../images/watercolor-fx-pink.webp)
}

.yellow .watercolor-a, .yellow .watercolor-b, .yellow .watercolor-c, .yellow .watercolor-d {
    background-image: url(../images/watercolor-fx-yellow.webp)
}

.no-webp .arrow-left, .no-webp .arrow-right, .no-webp .box-art-burst, .no-webp .box-art-paint, .no-webp .button-cap, .no-webp .down-arrow, .no-webp .facebook-icon, .no-webp .facebook-icon-over, .no-webp .hash-1, .no-webp .hash-2, .no-webp .instagram-icon, .no-webp .instagram-icon-over, .no-webp .logo-paint-shadow, .no-webp .media-paint, .no-webp .media-thumb, .no-webp .media-thumb-orange, .no-webp .nav-burger, .no-webp .nav-x, .no-webp .play-arrow, .no-webp .play-arrow-over, .no-webp .top-arrow, .no-webp .twitter-icon, .no-webp .twitter-icon-over, .no-webp .youtube-icon, .no-webp .youtube-icon-over {
    background-image: url(../images/sprite.webp)
}

.no-webp .blue .watercolor-a, .no-webp .blue .watercolor-b, .no-webp .blue .watercolor-c, .no-webp .blue .watercolor-d {
    background-image: url(../images/watercolor-fx-blue.webp)
}

.no-webp .green .watercolor-a, .no-webp .green .watercolor-b, .no-webp .green .watercolor-c, .no-webp .green .watercolor-d {
    background-image: url(../images/watercolor-fx-green.webp)
}

.no-webp .orange .watercolor-a, .no-webp .orange .watercolor-b, .no-webp .orange .watercolor-c, .no-webp .orange .watercolor-d {
    background-image: url(../images/watercolor-fx-orange.webp)
}

.no-webp .pink .watercolor-a, .no-webp .pink .watercolor-b, .no-webp .pink .watercolor-c, .no-webp .pink .watercolor-d {
    background-image: url(../images/watercolor-fx-pink.webp)
}

.no-webp .yellow .watercolor-a, .no-webp .yellow .watercolor-b, .no-webp .yellow .watercolor-c, .no-webp .yellow .watercolor-d {
    background-image: url(../images/watercolor-fx-yellow.webp)
}

.page {
    background-image: url(../images/paper-tile.webp)
}

.canvas-bg {
    background-image: url(../images/paper-tile.webp)
}

.mobile-nav-shelf {
    background-image: url(../images/paper-tile.webp)
}

.grass-bg {
    background-image: url(../images/components/background.webp)
}

.sub-path-1 {
    background-image: url(../images/common/path-sub1.webp)
}

.sub-path-2 {
    background-image: url(../images/common/path-sub2.webp)
}

.sub-path-3 {
    background-image: url(../images/common/path-sub3.webp)
}

footer {
    background-image: url(../images/footer/footer-bg.webp)
}

.no-webp .page {
    background-image: url(../images/paper-tile.jpg)
}

.no-webp .mobile-nav-shelf {
    background-image: url(../images/paper-tile.jpg)
}

.no-webp footer {
    background-image: url(../images/footer/footer-bg.webp)
}

.no-webp .grass-bg {
    background-image: url(../images/components/background.webp)
}

.no-webp .sub-path-1 {
    background-image: url(../images/common/path-sub1.webp)
}

.no-webp .sub-path-2 {
    background-image: url(../images/common/path-sub2.webp)
}

.no-webp .sub-path-3 {
    background-image: url(../images/common/path-sub3.webp)
}

.character-shadow, .exclamation, .mystery-character, .speech-bubble, .speech-bubble-circle, .teaser-paint, .watch-trailer {
    background-image: url(../images/home/sprite.webp)
}

.alkazam-shadow, .ganga-shadow, .mudkip-shadow, .pikachu-shadow, .squirtle-shadow, .totodile-shadow, .tyranitar-shadow {
    background-image: url(../images/home/hero/sprite.webp)
}

.no-webp .character-shadow, .no-webp .exclamation, .no-webp .mystery-character, .no-webp .speech-bubble, .no-webp .speech-bubble-circle, .no-webp .teaser-paint, .no-webp .watch-trailer {
    background-image: url(../images/home/sprite.webp)
}

.no-webp .alkazam-shadow, .no-webp .ganga-shadow, .no-webp .mudkip-shadow, .no-webp .pikachu-shadow, .no-webp .squirtle-shadow, .no-webp .totodile-shadow, .no-webp .tyranitar-shadow {
    background-image: url(../images/home/hero/sprite.webp)
}

.Bulbasaur-fill, .Bulbasaur-selected, .Charmander-fill, .Charmander-selected, .Chikorita-fill, .Chikorita-selected, .Cubone-fill, .Cubone-selected, .Cyndaquil-fill, .Cyndaquil-selected, .Eevee-fill, .Eevee-selected, .Machop-fill, .Machop-selected, .Meowth-fill, .Meowth-selected, .Mudkip-fill, .Mudkip-selected, .Pikachu-fill, .Pikachu-selected, .Psyduck-fill, .Psyduck-selected, .Skitty-fill, .Skitty-selected, .Squirtle-fill, .Squirtle-selected, .Torchic-fill, .Torchic-selected, .Totodile-fill, .Totodile-selected, .Treecko-fill, .Treecko-selected {
    background-image: url(../images/world/icons-sprite.webp)
}

.no-webp .Bulbasaur-fill, .no-webp .Bulbasaur-selected, .no-webp .Charmander-fill, .no-webp .Charmander-selected, .no-webp .Chikorita-fill, .no-webp .Chikorita-selected, .no-webp .Cubone-fill, .no-webp .Cubone-selected, .no-webp .Cyndaquil-fill, .no-webp .Cyndaquil-selected, .no-webp .Eevee-fill, .no-webp .Eevee-selected, .no-webp .Machop-fill, .no-webp .Machop-selected, .no-webp .Meowth-fill, .no-webp .Meowth-selected, .no-webp .Mudkip-fill, .no-webp .Mudkip-selected, .no-webp .Pikachu-fill, .no-webp .Pikachu-selected, .no-webp .Psyduck-fill, .no-webp .Psyduck-selected, .no-webp .Skitty-fill, .no-webp .Skitty-selected, .no-webp .Squirtle-fill, .no-webp .Squirtle-selected, .no-webp .Torchic-fill, .no-webp .Torchic-selected, .no-webp .Totodile-fill, .no-webp .Totodile-selected, .no-webp .Treecko-fill, .no-webp .Treecko-selected {
    background-image: url(../images/world/icons-sprite.webp)
}

@media (min-width: 768px) {
    [data-page=home] .hero-bg-layer {
        background-image: url(../images/home/hero/hero-scene.webp)
    }
}

@media (max-width: 767px) {
    [data-page=home] .hero-bg-layer {
        background-image: url(../images/home/mobile/hero-scene.webp)
    }
}

[data-page=home] .burst {
    background-image: url(../images/home/burst-glow-full.webp)
}

[data-page=home] .hero-mid-layer {
    background-image: url(../images/paper-tile.webp)
}

@media (min-width: 768px) {
    [data-page=home] .trail-scene {
        background-image: url(../images/home/trail.webp)
    }
}

@media (max-width: 767px) {
    [data-page=home] .trail-scene {
        background-image: url(../images/home/mobile/trail-scene.webp)
    }
}


@media (min-width: 768px) {
    .no-webp [data-page=home] .hero-bg-layer {
        background-image: url(../images/home/hero-scene.jpg)
    }
}

@media (max-width: 767px) {
    .no-webp [data-page=home] .hero-bg-layer {
        background-image: url(../images/home/mobile/hero-scene.jpg)
    }
}

.no-webp [data-page=home] .burst {
    background-image: url(../images/home/burst-glow-full.webp)
}

.no-webp [data-page=home] .hero-mid-layer {
    background-image: url(../images/paper-tile.jpg)
}

@media (min-width: 768px) {
    .no-webp [data-page=home] .trail-scene {
        background-image: url(../images/home/trail.webp)
    }
}

@media (max-width: 767px) {
    .no-webp [data-page=home] .trail-scene {
        background-image: url(../images/home/mobile/trail-scene.webp)
    }
}

.bounce {
    -webkit-animation: bounce 0.2s 5;
}

@-webkit-keyframes bounce {
    0% {
        top: -5px;
    }
    25%, 75% {
        top: -15px;
    }
    50% {
        top: -20px;
    }
    100% {
        top: 0;
    }
}

.bounce2 {
    -webkit-animation: bounce2 0.2s 5;
}

@-webkit-keyframes bounce2 {
    0% {
        left: -5px;
    }
    25%, 75% {
        left: -15px;
    }
    50% {
        left: -20px;
    }
    100% {
        left: 0;
    }
}