.bgblue{
    background-color: #0E0D1E;
    width: 100%;
    text-align: center;
} /* Discart */

/* Animations*/

/* animation 06 */
#animation06-1,
#animation06-2,
#animation06-3,
#animation06-4{
    margin: 0 auto 14px; /* <<< remove */
    /* For responsive devices use scale in this id ex:
    transform: scale(0.5)
    */
}

/* animation 06 - 1*/
#animation06-1{
    width: 273.57px;
    height: 237.68px;
}
#animation06-1 .content{
    width: 273.57px;
    height: 237.68px;
    overflow: hidden;
    position: relative;
}
.animation06 .item{
    background-position: top left;
    background-size: 100% auto;
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    display: block;
    z-index: 1;
}
#animation06-1 .bg{
    width: 273.57px;
    height: 237.68px;
    background-image: url('img/06/1-bg.svg');
}
#animation06-1 .mark{
    width: 56px;
    height: 94px;
    z-index: 10;
    top: 67px;
    left: 108px;
    background-image: url('img/06/1-mark.svg');
    animation: mark61 4.5s infinite linear;
    transform: scale(0);
    opacity: 0;
}

@keyframes mark61 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    14% {
        transform: scale(1.2);
        opacity: 1;
    }
    16.66% {
        transform: scale(1);
        opacity: 1;
    }
    83.33% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* animation 06 - 2*/
#animation06-2{
    width: 554.07px;
    height: 225.9px;
}
#animation06-2 .content{
    width: 554.07px;
    height: 225.9px;
    overflow: hidden;
    position: relative;
}
#animation06-2 .bg{
    width: 554.07px;
    height: 225.9px;
    background-image: url('img/06/2-bg.svg');
}
#animation06-2 .box{
    clip-path: polygon(24% 0%, 76% 0%, 100% 100%, 0% 100%);
    width: 554.07px;
    height: 225.9px;
    overflow: hidden;
}
#animation06-2 .card{
    width: 1000px;
    height: 62.42px;
    z-index: 10;
    background-image: url('img/06/2-card.svg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: auto;
}
#animation06-2 .card.one{
    top: 43px;
    right: 62px;
    animation: card61 7s infinite linear;
}
#animation06-2 .card.two{
    top: 123px;
    right: -5px;
    animation: card62 6s infinite linear;
}

@keyframes card61 {
    0% {
        right: 62px;
    }
    100% {
        right: -346px;
    }
}
@keyframes card62 {
    0% {
        right: -5px;
    }
    100% {
        right: -412px;
    }
}

/* animation 06 - 3*/
#animation06-3{
    width: 833.35px;
    height: 225.9px;
}
#animation06-3 .content{
    width: 833.35px;
    height: 225.9px;
    overflow: hidden;
    position: relative;
}
#animation06-3 .bg{
    width: 833.35px;
    height: 225.9px;
    background-image: url('img/06/3-bg.svg');
}
#animation06-3 .box{
    clip-path: polygon(15.6% 0%, 84% 0%, 100% 100%, 0% 100%);
    width: 833.35px;
    height: 225.9px;
    overflow: hidden;
}
#animation06-3 .ball{
    width: 48px;
    height: 43px;
    z-index: 10;
    background-image: url('img/06/3-ball.svg');
    top: 93px;
    left: 50%;
    transform: translateX(-50%);
}
#animation06-3 .ball.one,
#animation06-3 .ball.two,
#animation06-3 .ball.three,
#animation06-3 .ball.four{
    animation: ball61 5s infinite linear;
}
#animation06-3 .ball.two{
    animation-delay: 1.25s;
}
#animation06-3 .ball.three{
    animation-delay: 2.5s;
}
#animation06-3 .ball.four{
    animation-delay: 3.75s;
}
#animation06-3 .ball.five,
#animation06-3 .ball.six,
#animation06-3 .ball.seven,
#animation06-3 .ball.eight{
    animation: ball62 5s infinite linear;
}
#animation06-3 .ball.six{
    animation-delay: 1.25s;
}
#animation06-3 .ball.seven{
    animation-delay: 2.5s;
}
#animation06-3 .ball.eight{
    animation-delay: 3.75s;
}
#animation06-3 .coin{
    width: 123px;
    height: 124px;
    z-index: 50;
    background-image: url('img/06/3-coin.svg');
    top: 51px;
    left: 354px;
}

@keyframes ball61 {
    0% {
        left: 50%;
    }
    100% {
        left: -30px;
    }
}
@keyframes ball62 {
    0% {
        left: 50%;
    }
    100% {
        left: 863.35px;
    }
}

/* animation 06 - 4*/
#animation06-4{
    width: 1113.35px;
    height: 225.9px;
}
#animation06-4 .content{
    width: 1113.35px;
    height: 225.9px;
    overflow: hidden;
    position: relative;
}
#animation06-4 .bg{
    width: 1113.35px;
    height: 225.9px;
    background-image: url('img/06/4-bg.svg');
}
#animation06-4 .box{
    clip-path: polygon(11.7% 0%, 88.1% 0%, 100% 100%, 0% 100%);
    width: 1113.35px;
    height: 225.9px;
    overflow: hidden;
}
#animation06-4 .square{
    width: 2100px;
    height: 56px;
    z-index: 10;
    background-image: url('img/06/4-square.svg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: auto;
}
#animation06-4 .square.one{
    top: 50px;
    right: 2px;
    animation: square61 9s infinite linear;
}
#animation06-4 .square.two{
    top: 123px;
    right: -72px;
    animation: square62 8s infinite linear;
}

@keyframes square61 {
    0% {
        right: 2px;
    }
    100% {
        right: -748px;
    }
}
@keyframes square62 {
    0% {
        right: -72px;
    }
    100% {
        right: -972px;
    }
}
