﻿



/*.player {
    width: 250px;
    height: 90px;
    position: absolute;
    left: -5px;
}*/

    /*.player .playback {
        position: absolute;
        top: 42px;
        left: 5px;
        width: 37px;
        height: 37px;
        text-align: center;
        overflow: hidden;
    }*/

        .player .playback .play, .player .playback .stop {
            cursor: pointer;
            float: left;
        }

            .player .playback .play svg, .player .playback .stop svg {
                display: none;
            }

        .player .playback .play {
            display: inline-block;
            position: relative;
            width: 37px;
            height: 37px;
            background: url("https://cp.usastreams.com/playerHTML5/player/assets/img/oldskin/sprite1.png") no-repeat 0px -105px;
            cursor: pointer;
            vertical-align: bottom;
        }

        /*.player .playback .play:hover {
                background-position: -80px -105px;
            }*/

        .player .playback .stop {
            display: inline-block;
            position: relative;
            width: 37px;
            height: 37px;
            background: url("https://cp.usastreams.com/playerHTML5/player/assets/img/oldskin/sprite1.png") no-repeat -81px -105px;
            cursor: pointer;
            vertical-align: bottom;
        }

            /*.player .playback .stop:hover {
                background-position: -122px -105px;
            }*/

            .player .playback .stop:before {
                display: block;
                width: 37px;
                height: 37px;
                position: absolute;
                content: " ";
                left: 0;
                top: 0;
                background: transparent url("https://cp.usastreams.com/playerHTML5/player/assets/img/oldskin/sprite1.png") no-repeat -165px -105px;
                -webkit-animation: playspin 3s infinite linear;
                animation: playspin 3s infinite linear;
            }

    /*.player .volume-control {
        position: absolute;
        /*padding: 25px 10px;*/
        /*vertical-align: middle;*/
        left: 40px;
        /*right: 40px;*/
        top: 52px;
        height: 30px;
        width: 100px;
        /*margin: 0 245px 0 90px;*/
    }*/

        .player .volume-control .volume-icon {
            position: absolute;
            left: 10px;
            vertical-align: middle;
            cursor: pointer;
            height: 20px;
        }

            .player .volume-control .volume-icon svg {
                fill: #fff;
            }

        .player .volume-control .volume-slider {
            position: absolute;
            vertical-align: middle;
            left: 40px;
            right: 0;
            top: 50%;
            margin-top: -4px;
        }

            .player .volume-control .volume-slider .vol-progress {
                margin: 0 5px;
                width: 100%;
                height: 8px;
                padding: 1px;
                background: #ccc;
                cursor: pointer;
                background: rgba(0,0,0,0.2);
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.15),0 1px 0 rgba(255,255,255,0.05);
                border-radius: 3px;
            }

                .player .volume-control .volume-slider .vol-progress .vol-bar {
                    position: relative;
                    display: block;
                    height: 100%;
                    background: rgba(13,255,0,0.75);
                    width: 50%;
                    border-radius: 3px;
                }

                .player .volume-control .volume-slider .vol-progress .circle-control {
                    position: absolute;
                    top: -6px;
                    right: -6px;
                    display: block;
                    width: 23px;
                    height: 23px;
                    background: transparent url("https://cp.usastreams.com/playerHTML5/player/assets/img/oldskin/sprite.png") no-repeat -160px 0;
                    transition: opacity 250ms cubic-bezier(0.25,0.8,0.25,1);
                    -webkit-transition: opacity 250ms cubic-bezier(0.25,0.8,0.25,1);
                }

                .player .volume-control .volume-slider .vol-progress:hover .circle-control {
                    cursor: pointer;
                    opacity: 0.95;
                }

            .player .volume-control .volume-slider .player-status {
                font-size: 10pt;
                position: absolute;
                text-align: center;
                width: 100%;
                top: -1px;
                left: 75px;
                /*margin-top: 10px;*/
            }



@-webkit-keyframes preloaderbackground {
    0%,24.9% {
        background-color: #159756;
    }

    25%, 49.9% {
        background-color: #da4733;
    }

    50%, 74.9% {
        background-color: #3b78e7;
    }

    75%, 100% {
        background-color: #fdba2c;
    }
}

@keyframes preloaderbackground {
    0%, 24.9% {
        background-color: #159756;
    }

    25%, 49.9% {
        background-color: #da4733;
    }

    50%, 74.9% {
        background-color: #3b78e7;
    }

    75%, 100% {
        background-color: #fdba2c;
    }
}

@-webkit-keyframes preloaderfront {
    0% {
        width: 0;
        background-color: #da4733;
    }

    24.9% {
        width: 50%;
        background-color: #da4733;
    }

    25% {
        width: 0;
        background-color: #3b78e7;
    }

    49.9% {
        width: 50%;
        background-color: #3b78e7;
    }

    50% {
        width: 0;
        background-color: #fdba2c;
    }

    74.9% {
        width: 50%;
        background-color: #fdba2c;
    }

    75% {
        width: 0%;
        background-color: #159756;
    }

    100% {
        width: 50%;
        background-color: #159756;
    }
}

@keyframes preloaderfront {
    0% {
        width: 0;
        background-color: #da4733;
    }

    24.9% {
        width: 50%;
        background-color: #da4733;
    }

    25% {
        width: 0;
        background-color: #3b78e7;
    }

    49.9% {
        width: 50%;
        background-color: #3b78e7;
    }

    50% {
        width: 0;
        background-color: #fdba2c;
    }

    74.9% {
        width: 50%;
        background-color: #fdba2c;
    }

    75% {
        width: 0%;
        background-color: #159756;
    }

    100% {
        width: 50%;
        background-color: #159756;
    }
}

@-webkit-keyframes playspin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes playspin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
