﻿.videoContainer {
            width: 100%;
            position: relative;
            overflow: hidden;
            background: #ccc;
            text-align: center;
        }

            .videoContainer.start:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: no-repeat;
                background-size: 100% auto;
            }

            .videoContainer .sduration {
                display: none;
            }

            .videoContainer.start .sduration {
                display: inline-block;
                position: absolute;
                bottom: 0;
                right: 0;
                height: 22px;
                line-height: 22px;
                font-size: 90%;
                background-color: rgba(0,0,0,.5);
                color: white;
            }

            .videoContainer.paused::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -35px 0 0 -35px;
                width: 70px;
                height: 70px;
                border-radius: 200px;
                background: rgba(0,0,0,.3) url('../Images/vcontrol/play.png') 25px center no-repeat;
                background-size: 24px;
            }

            .videoContainer.loading::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -35px 0 0 -35px;
                width: 60px;
                height: 60px;
                border-radius: 200px;
                border-top: 5px solid rgba(255, 255, 255, 0.2);
                border-right: 5px solid rgba(255, 255, 255, 0.2);
                border-bottom: 5px solid rgba(255, 255, 255, 0.2);
                border-left: 5px solid #ffffff;
                -webkit-animation: loading 1.1s infinite linear;
                animation: loading 1.1s infinite linear;
            }

            .videoContainer video {
                vertical-align: middle;
            }

            .videoContainer .vcontrol {
                position: absolute;
                bottom: -40px;
                left: 0;
                width: 100%;
                height: 40px;
                background-color: rgba(0,0,0,.5);
                transition: bottom .5s;
            }

                .videoContainer .vcontrol .btnplay {
                    position: absolute;
                    height: 100%;
                    width: 40px;
                    padding-left: 10px;
                    background: url('../Images/vcontrol/play.png') center no-repeat;
                    background-size: 15px;
                    background-color: rgba(0,0,0,.3);
                }

                    .videoContainer .vcontrol .btnplay.btnpaused {
                        background-image: url('../Images/vcontrol/paused.png');
                        background-size: 23px;
                    }

                .videoContainer .vcontrol .progress {
                    margin: 0 40px 0 60px;
                    height: 100%;
                    box-sizing: border-box;
                    position: relative;
                }

            .videoContainer .progress:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                height: 0;
                width: 100%;
                border-bottom: 1px solid #666;
            }

            .videoContainer .progress span {
                position: absolute;
                top: 50%;
                left: 0;
                display: block;
                height: 100%;
            }

                .videoContainer .progress span.bufferBar {
                    z-index: 5;
                    width: 0;
                    border-bottom: rgba(221,18,123,1) 1px solid;
                }

                .videoContainer .progress span.timeBar {
                    width: 0;
                    height: 0;
                    border-bottom: rgba(221,18,123,1) 1px solid;
                }

                    .videoContainer .progress span.timeBar:before {
                        content: "";
                        position: absolute;
                        right: -5px;
                        top: -5px;
                        width: 10px;
                        height: 10px;
                        border-radius: 100px;
                        background: white;
                        box-shadow: 0 0 5px rgba(51,51,51,.8);
                    }

                    .videoContainer .progress span.timeBar:after {
                        content: "";
                        position: absolute;
                        right: -10px;
                        top: -10px;
                        width: 20px;
                        height: 20px;
                        border-radius: 100px;
                        border: 1px solid rgba(204,204,204,.3);
                        box-sizing: border-box;
                    }

            .videoContainer .vcontrol .btnfs {
                position: absolute;
                height: 100%;
                width: 40px;
                top: 0;
                right: 0;
                background: url('../Images/vcontrol/fs.png') center no-repeat;
                background-size: 18px;
            }

            .videoContainer .vcontrol .vtime {
                position: absolute;
                height: 50%;
                line-height: 25px;
                top: 20px;
                right: 40px;
                text-align: right;
                color: #ccc;
                font-size: 85%;
            }

        @-webkit-keyframes loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }