.decor{
    position: absolute;
    left: 10%;
    top: 5%;
}
.decor{
    opacity: 0;
    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.decor div.item{
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    -o-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.decor.dice-1,
.decor.dice-2,
.decor.monet-3,
.decor.monet-4{
    left: auto;
    right: 7%;
}

.decor .css-swing-period{
    animation-duration: 8s;
}
.decor.dice-1 .css-swing-period{
    animation-delay: 5s;
}
.decor.dice-2 .css-swing-period{
    animation-delay: 8s;
}
.decor.monet-1 .css-swing-period{
    animation-delay: 9.5s;
}
.decor.monet-2 .css-swing-period{
    animation-delay: 7s;
}
.decor.monet-3 .css-swing-period{
    animation-delay: 6.5s;
}
.decor.monet-4 .css-swing-period{
    animation-delay: 11.5s;
}
.decor.chip-1 .css-swing-period{
    animation-delay: 5.5s;
}

.decor.dice-1{
    top: 25%;
    right: 5%;
    /*animation: bounceInDown 1.5s 0.5s forwards, swing 0.5s 2s;*/
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.decor.dice-1 div.item{
    width: 61px;
    height: 75px;
    background-position: -148px -67px;
}
.decor.dice-2{
    top: 100px;
    /*animation: bounceInDown 1.8s forwards, swing 0.5s 1.8s;*/
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 1.8s;
    -moz-animation-duration: 1.8s;
    -o-animation-duration: 1.8s;
    animation-duration: 1.8s;
}
.decor.dice-2 div.item{
    width: 160px;
    height: 100px;
	background: url("https://i.gyazo.com/99bf92337d623c6293d2ba2a88a70bde.gif")no-repeat;
	display: none;
}
.decor.monet-1{
    top: 20%;
    left: 5%;
    /*animation: bounceInDown 1.5s 0.5s forwards, swing 0.5s 2s;*/
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.decor.monet-1 div.item{
    width: 41px;
    height: 56px;
    background-position: -260px -5px;
}
.decor.monet-2{
    /*animation: bounceInDown 1.5s 1s forwards, swing 0.5s 2.5s;*/
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
.decor.monet-2 div.item{
    width: 44px;
    height: 56px;
    background-position: -209px -5px;
}
.decor.monet-3{
    right: 18%;
    /*animation: bounceInDown 1.5s 1.3s forwards, swing 0.5s 2.8s;*/
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -o-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.decor.monet-3 div.item{
    width: 22px;
    height: 62px;
    background-position: -182px -4px;
}
.decor.monet-4{
    top: 8%;
    right: 11%;
    /*animation: bounceInDown 1.5s 0.8s forwards, swing 0.5s 2.3s;*/
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    -o-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.decor.monet-4 div.item{
    width: 45px;
    height: 62px;
    background-position: -132px -1px;
}
.decor.chip-1{
    top: 80px;
    left: 6%;
	position: fixed;
    /*animation: bounceInDown 1.5s 0.5s forwards, swing 0.5s 2s;*/
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
.decor.chip-1 div.item{
    width: 140px;
    height: 241px;
	background: url("https://i.gyazo.com/e92efffd3cd38993fe29e380ae36278e.webp")no-repeat;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 2, -360deg);
        transform: rotate3d(0, 0, 2, -360deg);
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes rotate {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -360deg);
        transform: rotate3d(0, 0, 1, -360deg);
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fallInDown {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, -1000px, 0);
        transform: translate3d(0, -1000px, 0);
    }
    80%{
        opacity:1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        top:100%;
    }
}

@keyframes fallInDown {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, -1000px, 0);
        transform: translate3d(0, -1000px, 0);
    }
    80%{
        opacity:1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        top:100%;
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to, 100% {
        opacity: 1;
        animation-play-state: paused;
        -webkit-transform: none;
        transform: none;
    }
}

.css-bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.css-shake {
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-play-state: paused;
}
.css-shake:hover{
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-play-state: running;
}
@-webkit-keyframes swing-period {
    5% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    10% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    20% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing-period {
    5% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    10% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    20% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.css-swing-period {
    -webkit-animation-name: swing-period;
    animation-name: swing-period;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.css-swing {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-play-state: paused;
}
.css-swing:hover {
    animation-name: swing;
    animation-play-state: running;
}