html, body, canvas{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}

html{
    background: #000;
}

body{
    opacity: 0;
    /*background: linear-gradient(229deg, #d98a8a, #c477c8, #77b9c8, #e2e6a6, #a6e6b4);*/
    background: linear-gradient(229deg, #c48282, #bf7bc3, #78b8c2, #bfc290, #84c096);
    background-size: 1000% 1000%;

    -webkit-animation: BgAnim 120s ease infinite;
    -moz-animation: BgAnim 120s ease infinite;
    -o-animation: BgAnim 120s ease infinite;
    animation: BgAnim 120s ease infinite;

    font-family: 'Oswald';
    font-weight: 300;
}

.waveform{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -250px;
}

.title_player{
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    margin-left: -90px;
    text-align: center;
    top: 80px;
    z-index: 200;
    width: 180px;
    opacity: 0;
}

.player{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -250px;
    text-align: center;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.thumb_player{
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 150px;
    z-index: 100;
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.thumb_player img{
    width: 100%;
    height: auto;
    display: block;
}

.bar-container {
    width: 0;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -150px;
}

.bar {
    background-color: #ff2f8c;
    height: 1px;
    display: block;
    width: 0;
}

.text_end{
    position: absolute;
    left: 50%;
    margin-left: -150px;
    text-align: center;
    top: 50%;
    width: 300px;
    margin-top: -12px;
    font-size: 24px;
    opacity: 0;
}

.text_end a{
    color: #fff;
    text-decoration: none;
}

@-webkit-keyframes BgAnim {
    0%{background-position:0% 48%}
    50%{background-position:100% 53%}
    100%{background-position:0% 48%}
}
@-moz-keyframes BgAnim {
    0%{background-position:0% 48%}
    50%{background-position:100% 53%}
    100%{background-position:0% 48%}
}
@-o-keyframes BgAnim {
    0%{background-position:0% 48%}
    50%{background-position:100% 53%}
    100%{background-position:0% 48%}
}
@keyframes BgAnim {
    0%{background-position:0% 48%}
    50%{background-position:100% 53%}
    100%{background-position:0% 48%}
}


.loader-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.loader{
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    z-index: 100;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    opacity: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: loading 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite;
    -moz-animation: loading 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite;
    -o-animation: loading 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite;
    animation: loading 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite;
}

.loader-text{
    position: absolute;
    top: 50%;
    margin-top: 80px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    text-align: center;
    text-transform: uppercase;
}


@-webkit-keyframes loading{
    0%{
        -webkit-transform: scale(0);
        opacity: 0.5;
    }
    100%{
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@-moz-keyframes loading{
    0%{
        -moz-transform: scale(0);
        opacity: 0.5;
    }
    100%{
        -moz-transform: scale(1);
        opacity: 0;
    }
}

@-o-keyframes loading{
    0%{
        -o-transform: scale(0);
        opacity: 0.5;
    }
    100%{
        -o-transform: scale(1);
        opacity: 0;
    }
}

@keyframes loading{
    0%{
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0.5;
    }
    100%{
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}