/* reload & slow animation */

/* class name is "reload" */

.reload {
    display: block;
    animation: 1s fadein ease-out forwards;
    opacity: 0;
}

@keyframes fadein {
    /* 0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    } */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* bounce */

/* class name is "bounce" */

@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.bounce {
    animation-duration: 2s;
    animation-name: bounceIn;
    animation: bounceIn 2s;
}

/* background color change */

/* class name is "shadow" */

.shadow {
    position: relative;
    background-color: #FAFAFA !important;
    z-index: 1;
}

.shadow:before, .shadow:after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: animate 20s linear infinite;
}

.shadow:after {
    filter: blur(20px);
}

/* animate animation */

/* class name is "animated" */

@keyframes animate {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 300% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.animated {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

/* flash animation */

/* class name is "animated flash" */

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
    animation: flash 1s;
}

/* pulse animation */

/* class name is "animated pulse" */

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation: pulse 1s;
}

/* rubberBand animation */

/* class name is "animated rubberBand" */

@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    60% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    100% {
        transform: scale(1);
    }
}

.rubberBand {
    animation-name: rubberBand;
    animation: rubberBand 1s;
}

/* shake animation */

/* class name is "animated shake" */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    animation-name: shake;
    animation: shake 1s;
}

/* swing animation */

/* class name is "animated swing" */

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing;
    animation: swing 1s;
}

/* wobble animation */

/* class name is "animated wobble" */

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

.wobble {
    animation-name: wobble;
    animation: wobble 1s;
}

/* flip animation */

/* class name is "animated flip" */

@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in;
    }
}

.flip {
    backface-visibility: visible;
    animation-name: flip;
    animation: flip 1s;
}

/* lightSpeedIn animation */

/* class name is "animated lightSpeedIn" */

@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
    animation: lightSpeedIn 1s;
}

/* rollIn animation */

/* class name is "animated rollIn" */

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

.rollIn {
    animation-name: rollIn;
    animation: rollIn 1s;
}

/* rotateIn animation */

/* class name is "animated rotateIn" */

@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateIn;
    animation: rotateIn 1s;
}

/* hinge animation */

/* delete animation */

/* class name is "animated hinge" */

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    80% {
        transform: rotate(60deg) translateY(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateY(700px);
    }
}

.hinge {
    margin: 20px;
    animation-name: hinge;
    animation: hinge 1s;
}

.run {    
    animation: run 1s;
    animation-name: run;
}

@keyframes run {
    0% {
        right: 0;
    }
    50% {
        right: 50%;
    }
}

@media all and (max-width: 680px) {
    .hingebox, .flipbox {
        display: none;
    }
}