* {
    margin: 0;
    padding: 0
}

html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #002b50;
    font-family: Torus, Arial, Helvetica, sans-serif;
    color: #fff
}

#game-container {
    position: absolute !important;
    left: 50%;
    top: 50%;
    display: none
}

#game,
#game canvas {
    width: 100%;
    height: 100%
}

#loader {
    width: 100%;
    height: 100%
}

#slideshow {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    user-select: none
}

@font-face {
    font-family: Torus;
    src: url(//a.poki.com/fonts/torus-bold-webfont.woff2) format('woff2'), url(//a.poki.com/fonts/torus-bold-webfont.woff) format('woff');
    font-style: bold;
    font-weight: 700
}

#thumbnail {
    box-shadow: 0 1vh 2vh rgba(0, 0, 0, .4);
    border-radius: 16.667%
}

#slideshow-top {
    display: flex;
    margin: 2.5vh 0
}

#slideshow-top-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1
}

#game-title {
    display: flex;
    flex-grow: 1;
    align-items: center
}

#progress-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    transition: .2s ease-out all
}

#progress-container.done {
    opacity: 0
}

#progress-bar {
    background: #fff;
    width: 100%;
    overflow: hidden
}

#progress-fill {
    background: #3cf7dc;
    height: 100%;
    transition: .2s ease-out all;
    animation-name: fillColor;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: both
}

@keyframes fillColor {
    0% {
        background-color: #3cf7dc
    }

    25% {
        background-color: #ffa9be
    }

    50% {
        background-color: #ffdc00
    }

    75% {
        background-color: #e0aef5
    }

    100% {
        background-color: #3cf7dc
    }
}

@media(orientation:portrait) {
    #thumbnail {
        margin-right: 2.4vh
    }

    #game-title h1 {
        font-size: 2vh
    }

    #slideshow-top {
        width: 70vw
    }

    #progress-bar {
        height: 1vh;
        border-radius: .5vh
    }

    #progress-fill {
        border-radius: .5vh
    }

    #thumbnail {
        width: 5vh;
        height: 5vh
    }

    #progress-amount {
        font-size: 2vh;
        margin-left: 1.5vh;
        width: 3vh
    }
}

@media(orientation:landscape) {
    #thumbnail {
        margin-right: 3vh
    }

    #game-title h1 {
        font-size: 3vh
    }

    #slideshow-top {
        width: 50vw
    }

    #progress-bar {
        height: 1.2vh;
        border-radius: .6vh
    }

    #progress-fill {
        border-radius: .6vh
    }

    #thumbnail {
        width: 7.5vh;
        height: 7.5vh
    }

    #progress-amount {
        font-size: 2.5vh;
        margin-left: 1.875vh;
        width: 3.75vh
    }
}

#slideshow-images {
    width: 100vw;
    display: flex;
    justify-content: center
}

#slideshow-images .image {
    position: absolute;
    box-shadow: 0 2.4vh 3.6vh rgba(0, 0, 0, .4);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    perspective: 1000px;
    left: 0;
    overflow: hidden
}

#slideshow-images .image img {
    width: 100%;
    height: 100%
}

#slideshow-images .image:nth-of-type(1n) {
    border-color: #3be8b0
}

#slideshow-images .image:nth-of-type(2n) {
    border-color: #ff6d92
}

#slideshow-images .image:nth-of-type(3n) {
    border-color: #a177ff
}

#slideshow-images .image:nth-of-type(4n) {
    border-color: #ffd200
}

#slideshow-images .left,
#slideshow-images .right {
    z-index: 1
}

#slideshow-images .middle {
    z-index: 2
}

#slideshow-images .left img,
#slideshow-images .right img {
    transform: scale(1.05)
}

#slideshow-images .left img,
#slideshow-images .right img,
#slideshow-images .fromLeft img,
#slideshow-images .fromRight img {
    filter: blur(1vh)
}

#slideshow-images .inactive {
    display: none
}

#slideshow-images .inactive.fromLeft,
#slideshow-images .inactive.fromRight {
    display: block
}

#slideshow-nav {
    display: flex;
    justify-content: center;
    margin: 2.5vh 0
}

#slideshow-nav .bullet {
    display: flex;
    justify-content: center;
    align-items: center
}

#slideshow-nav .bullet:after {
    content: '';
    background: #fff;
    border-radius: .4vh;
    width: .8vh;
    height: .8vh
}

#slideshow-nav .bullet.active:after {
    background: #009cff
}

#slideshow-nav .bullet {
    width: 2.5vh;
    height: 2.5vh
}

#slideshow-nav .bullet:after {
    border-radius: 50%;
    width: 50%;
    height: 50%
}

#slideshow-nav,
#slideshow-images {
    opacity: 0;
    transition: .4s all ease-out;
    transform: translateY(2vh);
    perspective: 1000px;
    transition-delay: 400ms
}

#slideshow-nav {
    transition-delay: 600ms
}

#slideshow.active #slideshow-images,
#slideshow.active #slideshow-nav {
    opacity: 1;
    transform: translateY(0)
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        transform: translate3d(0, -100vh, 0)
    }

    40% {
        transform: translate3d(0, 0.5vh, 0)
    }

    65% {
        transform: translate3d(0, -0.2vh, 0)
    }

    80% {
        transform: translate3d(0, 0.1vh, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

#slideshow-top {
    transform: translate3d(0, -20vh, 0);
    opacity: 0
}

#slideshow-top.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-name: bounceInDown;
    animation-duration: .5s
}

@keyframes scaleDelay {

    0%,
    80%,
    100% {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

.spinner {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    margin-left: -33px;
    margin-top: -9px;
    width: 66px
}

.spinner>div {
    width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: 100%;
    background: #fff;
    animation: scaleDelay 1.4s infinite ease-in-out both
}

.spinner .bounce1 {
    animation-delay: -.32s
}

.spinner .bounce2 {
    animation-delay: -.16s
}

.spinner {
    display: none;
}