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

/* Animations*/

/* animation 01 */
#animation01{
    margin: 0 auto; /* <<< remove */
    /* For responsive devices use scale in this id ex:
    transform: scale(0.5)
    */
}

#animation01{
    width: 1250px;
    height: 1080px;
}
#animation01 .content{
    width: 1250px;
    height: 1080px;
    background-image: url('img/01/bg.png');
    background-position: top left;
    background-size: 100% auto;
    position: relative;
}
#animation01 .item{
    background-position: top left;
    background-size: 100% auto;
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    display: block;
    z-index: 1;
}
#animation01 .bubbles.one{
    width: 112px;
    height: 65px;
    top: 531.5px;
    left: 194.5px;
    animation: bubbles 8s infinite linear;
    opacity: 0;
}
#animation01 .lending,
#animation01 .lendingDot{
    width: 100%;
    height: 100%;
}
#animation01 .lending{
    background-image: url('img/01/lending.svg');
}
#animation01 .lendingDot{
    animation: twinkleDot 4s infinite linear;
    opacity: 0.2;
}
#animation01 .lendingDot.one{
    background-image: url('img/01/lending-dot1.svg');
    animation-delay: 1s;
}
#animation01 .lendingDot.two{
    background-image: url('img/01/lending-dot2.svg');
    animation-delay: 2.8s;
}
#animation01 .lendingDot.three{
    background-image: url('img/01/lending-dot3.svg');
    animation-delay: 1.9s;
}
#animation01 .bubbles.two{
    width: 126px;
    height: 63px;
    top: 530px;
    left: 778px;
    animation: bubbles 8s infinite linear 1s;
    opacity: 0;
}
#animation01 .borrowing,
#animation01 .borrowingDot{
    width: 100%;
    height: 100%;
}
#animation01 .borrowingDot{
    animation: twinkleDot 4s infinite linear;
    opacity: 0.2;
}
#animation01 .borrowing{
    background-image: url('img/01/borrowing.svg');
}
#animation01 .borrowingDot.one{
    background-image: url('img/01/borrowing-dot1.svg');
    animation-delay: 2s;
}
#animation01 .borrowingDot.two{
    background-image: url('img/01/borrowing-dot2.svg');
    animation-delay: 2.5s;
}
#animation01 .borrowingDot.three{
    background-image: url('img/01/borrowing-dot3.svg');
    animation-delay: 1.5s;
}

#animation01 .dotblue{
    width: 30px;
    height: 30px;
    background-image: url('img/01/dotblue.svg');
    left: 530.5px;
    z-index: 20;
    opacity: 0;
    animation: dotblue 3.75s infinite linear;
    top: 258.5px;
}
#animation01 .dotblue.two{
    animation-delay: 1.25s;
}
#animation01 .dotblue.three{
    animation-delay: 2.5s;
}
#animation01 .dotgreen{
    width: 30px;
    height: 30px;
    background-image: url('img/01/dotgreen.svg');
    left: 530.5px;
    z-index: 20;
    top: 546.5px;
    opacity: 0;
    animation: dotgreen 3.75s infinite linear;
}
#animation01 .dotgreen.two{
    animation-delay: 1.25s;
}
#animation01 .dotgreen.three{
    animation-delay: 2.5s;
}
#animation01 .dots{
    width: 0;
    z-index: 40;
    overflow: hidden;
}
#animation01 .dots:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#animation01 .dots.one{
    height: 72px;
    top: 285.5px;
    left: 449.5px;
    animation: dots1 12s infinite ease-in-out;
}
#animation01 .dots.one:before{
    width: 235px;
    height: 72px;
    background: url('img/01/dots.svg') no-repeat left top;
}
#animation01 .dots.two{
    height: 85px;
    top: 429.5px;
    left: 403.5px;
    animation: dots2 12s infinite ease-in-out;
}
#animation01 .dots.two:before{
    width: 237px;
    height: 85px;
    background: url('img/01/dots2.svg') no-repeat left top;
}
#animation01 .mark{
    width: 29.38px;
    height: 49.75px;
    z-index: 42;
    background-image: url('img/01/mark.svg');
    transform: scale(0);
    opacity: 0;
}
#animation01 .mark.one{
    top: 285.5px;
    left: 449.5px;
    animation: mark1 12s infinite ease-in-out;
}
#animation01 .mark.two{
    top: 307.5px;
    left: 654.5px;
    animation: mark2 12s infinite ease-in-out;
}
#animation01 .mark.three{
    top: 431.5px;
    left: 404.5px;
    animation: mark3 12s infinite ease-in-out;
}
#animation01 .mark.four{
    top: 450.5px;
    left: 610.5px;
    animation: mark4 12s infinite ease-in-out;
}
#animation01 .flare.one{
    width: 99px;
    height: 68px;
    background-image: url('img/01/flare1.png');
    top: 661.5px;
    left: 317.5px;
    z-index: 40;
    animation: flare 4s infinite ease-in-out 1s;
}
#animation01 .flare.two{
    width: 287px;
    height: 250px;
    background-image: url('img/01/flare2.png');
    top: 489.5px;
    left: 406.5px;
    z-index: 40;
    animation: flare 5s infinite ease-in-out 0.5s;
}
#animation01 .flare.three{
    width: 110px;
    height: 166px;
    background-image: url('img/01/flare3.png');
    top: 566.5px;
    left: 723.5px;
    z-index: 40;
    animation: flare 5s infinite ease-in-out;
}
#animation01 .lineglobe{
    width: 413px;
    height: 413px;
    background-image: url('img/01/lineglobe.png');
    top: 209.5px;
    left: 339.5px;
    z-index: 25;
}
#animation01 .coinbg{
    width: 435px;
    height: 397px;
    background-image: url('img/01/bgcoin.png');
    top: 217.5px;
    left: 328.5px;
    z-index: 35;
}
#animation01 .coin{
    width: 435px;
    height: 397px;
    background-image: url('img/01/coin.svg');
    top: 216.5px;
    left: 325.5px;
    z-index: 40;
}
#animation01 .boxtext{
    width: 16px;
    height: 38px;
    top: 401.5px;
    left: 548.5px;
    z-index: 45;
    overflow: hidden;
}
#animation01 .text{
    width: 100%;
    height: 53px;
    top: 0;
    left: 0;
    background-position: bottom left;
}
#animation01 .contentText{
    width: 100%;
    height: 371px;
    top: -15px;
    left: 0;
    animation: contentText 18s infinite ease-in-out;
}
#animation01 .text.zer{
    background-image: url('img/01/zer.svg');
}
#animation01 .text.one{
    top: 0;
}
#animation01 .text.usd{
    top: 53px;
    background-image: url('img/01/usd.svg');
}
#animation01 .text.gbp{
    top: 106px;
    background-image: url('img/01/gbp.svg');
}
#animation01 .text.krw{
    top: 159px;
    background-image: url('img/01/krw.svg');
}
#animation01 .text.eur{
    top: 212px;
    background-image: url('img/01/eur.svg');
}
#animation01 .text.inr{
    top: 265px;
    background-image: url('img/01/inr.svg');
}
#animation01 .text.two{
    top: 318px;
}
#animation01 .hover{
    width: 100%;
    height: 100%;
    background-image: url('img/01/hover.svg');
    z-index: 50;
}

@keyframes contentText {
    0% {top: -15px;}
    11.11% {top: -15px;}
    16.66% {top: -68px;}
    27.77% {top: -68px;}
    33.33% {top: -121px;}
    44.44% {top: -121px;}
    49.99% {top: -174px;}
    61.11% {top: -174px;}
    66.66% {top: -227px;}
    77.77% {top: -227px;}
    83.33% {top: -280px;}
    94.44% {top: -280px;}
    100% {top: -333px;}
}

@keyframes dotblue {
    0% {
        top: 258.5px;
        opacity: 0;
    }
    25% {
        top: 258.5px;
        opacity: 1;
    }
    100% {
        top: 358.5px;
        opacity: 1;
    }
}

@keyframes dotgreen {
    0% {
        top: 442.5px;
        opacity: 1;
    }
    75% {
        top: 546.5px;
        opacity: 1;
    }
    100% {
        top: 546.5px;
        opacity: 0;
    }
}

@keyframes bubbles {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    62.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes twinkleDot {
    0% {
        opacity: 0.2;
    }
    30% {
        opacity: 0.2;
    }
    33.33% {
        opacity: 1;
    }
    43.33% {
        opacity: 1;
    }
    46.66% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.2;
    }
}
@keyframes mark1 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    5% {
        transform: scale(1.2);
        opacity: 1;
    }
    8.3% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    58.3% {
        transform: scale(1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes mark2 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    8.3% {
        transform: scale(0);
        opacity: 0;
    }
    14.3% {
        transform: scale(1.2);
        opacity: 1;
    }
    16.3% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    58.3% {
        transform: scale(1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes dots1 {
    0% {
        width: 0;
    }
    8.3% {
        width: 0;
    }
    25% {
        width: 235px;
    }
    50% {
        width: 235px;
        opacity: 1;
    }
    58.3% {
        width: 235px;
        opacity: 0;
    }
    100% {
        width: 235px;
        opacity: 0;
    }
}
@keyframes mark3 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(0);
        opacity: 0;
    }
    55% {
        transform: scale(1.2);
        opacity: 1;
    }
    58.3% {
        transform: scale(1);
        opacity: 1;
    }
    91.7% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes mark4 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    58.3% {
        transform: scale(0);
        opacity: 0;
    }
    64.3% {
        transform: scale(1.2);
        opacity: 1;
    }
    66.6% {
        transform: scale(1);
        opacity: 1;
    }
    91.7% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes dots2 {
    0% {
        width: 0;
    }
    58.3% {
        width: 0;
    }
    75% {
        width: 235px;
    }
    91.7% {
        width: 235px;
        opacity: 1;
    }
    100% {
        width: 235px;
        opacity: 0;
    }
}


@keyframes flare {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}