.this-player {
    width:100%;
    display:block;
    position: relative;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    font-family: Arial, sans-serif;
    background: #000;
    float: left;
    overflow: hidden;
} .this-player.tp-is-fullscreen.tp-is-playing:not(.tp-controls-active) {cursor: none}
.this-player.tp-audio{overflow:visible}

    .this-player *{
        border: none;
        box-shadow: none;
        outline: none;
        margin: 0;
        padding: 0;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -khtml-tap-highlight-color: transparent;
        -webkit-tap-highlight-color: transparent;
        -moz-tap-highlight-color: transparent;
        -o-tap-highlight-color: transparent;
        -ms-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    .this-player .tp-body{
        width: 100%;
        float: left;
        position: relative;
    }
    .this-player.tp-is-fullscreen .tp-body{
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

        .this-player .tp-media{
            position: absolute;
            width:100%;
            height: 100%;
            top:0;
            left:0;
        }
        .this-player .tp-media::-webkit-media-controls,
        .this-player .tp-media::-webkit-media-controls-panel,
        .this-player .tp-media::-webkit-media-controls-play-button,
        .this-player .tp-media::-webkit-media-controls-start-playback-button{
            display: none !important;
            -webkit-appearance: none;
            appearance: none;
        }
        .this-player .tp-media:-webkit-media-controls,
        .this-player .tp-media:-webkit-media-controls-panel,
        .this-player .tp-media:-webkit-media-controls-play-button,
        .this-player .tp-media:-webkit-media-controls-start-playback-button{
            display: none !important;
            -webkit-appearance: none;
            appearance: none;
        }

        .this-player .tp-waiting-indicator{
            width:100px;
            height:100px;
            background:rgba(0, 0, 0, 0.5);
            border-radius:50%;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-60px;
            margin-left:-50px;
            cursor:pointer;
            display:none;
            z-index: 5;
        } .this-player.tp-is-waiting .tp-waiting-indicator{display:block}

            .this-player.tp-is-waiting .tp-waiting-indicator-inner{
                width: 25%;
                height: 25%;
                border-radius: 50%;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                -webkit-animation: tp-waiting-animation 2s ease-in-out infinite;
                -o-animation: tp-waiting-animation 2s ease-in-out infinite;
                animation: tp-waiting-animation 2s ease-in-out infinite;
            }

        .this-player .tp-big-play-button{
            width:100px;
            height:100px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius:50%;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-60px;
            margin-left:-50px;
            display: block;
            cursor:pointer;
            z-index:5;
        } .this-player.tp-is-playing .tp-big-play-button,
        .this-player.tp-is-waiting .tp-big-play-button {display: none}

            .this-player .tp-big-play-button-inner{
                width: 30px;
                height: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -20px;
                margin-left: -11px;
                background: url('tp-sprite.png') -49px 0 no-repeat;
            }

        .this-player .tp-text-track-cues-container{
            z-index:2;
            color: #fff;
            position:absolute;
            width:100%;
            height:auto;
            text-align:center;
            bottom:9px;
            transition: bottom 0.2s;
        } .this-player.tp-controls-active .tp-text-track-cues-container{bottom: 60px}

            .this-player .tp-text-track-cue > p > span{
                font-size: 16px;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.9);
                display: inline-block;
                padding-left: 4px;
                padding-right: 4px;
            }

        /* player controls */
        .this-player .tp-controls-wrapper {
            width:100%;
            height:50px;
            background:rgba(0, 0, 0, 0.6);
            position:absolute;
            left:0;
            bottom: 0;
            z-index:3;
            display:block;
        }
        .this-player.tp-video .tp-controls-wrapper{
            opacity: 0;
            transition: opacity 0.2s;
        }
        .this-player.tp-video.tp-controls-active .tp-controls-wrapper,
        .this-player.tp-video:not(.tp-is-playing) .tp-controls-wrapper {opacity: 1}

        .this-player.tp-audio .tp-controls-wrapper{
            position: relative;
            left: auto;
            bottom: auto;
            visibility: visible;
            background-color: #000;
        }

            .this-player .tp-controls-inner {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

                .this-player .tp-time-progress-bar {
                    width: calc(100% - 332px);
                    height:30px;
                    position:absolute;
                    top: 10px;
                    left: 115px;
                }
                .this-player:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
                    width: calc(100% - 232px);
                }
                .this-player.tp-has-qualities .tp-time-progress-bar,
                .this-player.tp-has-text-tracks .tp-time-progress-bar{
                    width: calc(100% - 372px);
                }
                .this-player.tp-has-qualities:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar,
                .this-player.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
                    width: calc(100% - 272px);
                }
                .this-player.tp-has-qualities.tp-has-text-tracks .tp-time-progress-bar{
                    width: calc(100% - 412px);
                }
                .this-player.tp-has-qualities.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
                    width: calc(100% - 312px);
                }
                .this-player.tp-audio .tp-time-progress-bar{
                    width: calc(100% - 286px);
                }
                .this-player.tp-audio:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
                    width: calc(100% - 186px);
                }

                    .this-player .tp-time-progress-bar-inner {
                        width: 100%;
                        height: 2px;
                        position: absolute;
                        top: 50%;
                        left: 0;
                        margin-top: -1px;
                        background: rgba(255, 255, 255, 0.3);
                    }

                        .this-player .tp-buffer-indicator {
                            width:0;
                            height:100%;
                            background: rgba(255, 255, 255, 0.4);
                            position:absolute;
                            top:0;
                            left:0;
                            z-index:3;
                            display:block;
                        }

                        .this-player .tp-time-progress-indicator {
                            width:0;
                            height:100%;
                            background:white;
                            position:absolute;
                            top:0;
                            left:0;
                            z-index:7;
                            display:block;
                        }
                        .this-player:not(.tp-time-is-seeking) .tp-time-progress-indicator{
                            -webkit-transition: width 0.6s linear;
                            -moz-transition: width 0.6s linear;
                            -ms-transition: width 0.6s linear;
                            -o-transition: width 0.6s linear;
                            transition: width 0.6s linear;
                        }

                            .this-player .tp-time-seek-pointer{
                                background-color:#fff;
                                position:absolute;
                                border-radius: 50%;
                                width:14px;
                                height: 14px;
                                top: 50%;
                                margin-top: -7px;
                                right: -7px;
                                z-index:7;
                            }
                            .this-player.tp-has-waiting-indicator-on-time-progress-bar.tp-is-waiting .tp-time-seek-pointer{
                                display: none;
                            }

                        .this-player .tp-waiting-indicator-on-progress-bar{
                            width:100%;
                            height:4px;
                            background-image: repeating-linear-gradient(
                                    -45deg,
                                    #fba202,
                                    #fba202 10px,
                                    #4c4c4c 7px,
                                    #4c4c4c 20px
                            );
                            background-size: 28px 28px;
                            -webkit-animation: tp-bar-waiting-animation 0.5s linear infinite;
                            -o-animation: tp-bar-waiting-animation 0.5s linear infinite;
                            animation: tp-bar-waiting-animation 0.5s linear infinite;
                            position:absolute;
                            top:-1px;
                            left:0;
                            z-index:10;
                            display:none;
                        } .this-player.tp-is-waiting .tp-waiting-indicator-on-progress-bar{display:block}

                        .this-player .tp-floating-time-indicator, .this-player .tp-floating-volume-indicator{
                            background: rgba(0, 0, 0, 0.8);
                            border: 1px solid #fff;
                            position:absolute;
                            left:0;
                            bottom: calc(100% + 8px);
                            padding:0 5px 2px 5px;
                            -webkit-transform: translateX(-50%);
                            -moz-transform: translateX(-50%);
                            -ms-transform: translateX(-50%);
                            -o-transform: translateX(-50%);
                            transform: translateX(-50%);
                            border-radius:5px;
                            display:none;
                            z-index:12;
                            pointer-events:none;
                        }
                        .this-player .tp-floating-volume-indicator{bottom: 10px}
                        .this-player.tp-floating-time-indicator-active:not(.tp-text-tracks-bar-opened) .tp-floating-time-indicator,
                        .this-player.tp-floating-volume-indicator-active .tp-floating-volume-indicator{display:block}

                            .this-player .tp-floating-time-indicator-inner, .this-player .tp-floating-volume-indicator-inner{
                                font-size:11px;
                                color:#fff;
                                line-height: 11px;
                                white-space: nowrap;
                                word-wrap: normal;
                            }

            .this-player .tp-small-play-button {
                width:44px;
                height:50px;
                float: left;
                position: relative;
                cursor: pointer;
                background: transparent !important;
            }

                .this-player .tp-small-play-button-inner{
                    width: 11px;
                    height: 16px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -5px;
                    margin-top: -8px;
                    background:url('tp-sprite.png') -30px -17px no-repeat;
                }
                .this-player.tp-is-playing:not(.tp-time-is-seeking) .tp-small-play-button .tp-small-play-button-inner{
                    width: 14px;
                    margin-left: -7px;
                    background-position: -34px 0;
                }

            .this-player .tp-current-time-log, .this-player .tp-duration-log{
                line-height:50px;
                font-size:12px;
                font-family: arial, serif;
                color:#fff;
                cursor: default;
                display: block;
                position: relative;
                text-align: center;
                width: 60px;
            }

            .this-player .tp-current-time-log{
                float: left;
            }

            .this-player .tp-duration-log{
                position: absolute;
                right: 146px;
            }
            .this-player:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-duration-log{
                right: 46px;
            }
            .this-player.tp-has-qualities .tp-duration-log,
            .this-player.tp-has-text-tracks .tp-duration-log{
                right: 186px;
            }
            .this-player.tp-has-qualities:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-duration-log,
            .this-player.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-duration-log{
                right: 86px;
            }
            .this-player.tp-has-qualities.tp-has-text-tracks .tp-duration-log{
                right: 226px;
            }
            .this-player.tp-has-qualities.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-duration-log{
                right: 126px;
            }
            .this-player.tp-audio .tp-duration-log{
                right: 104px;
            }
            .this-player.tp-audio:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-duration-log{
                right: 4px;
            }

            .this-player .tp-volume-container {
                position: absolute;
                width:90px;
                height:50px;
                right: 52px;
            }
            .this-player.tp-has-qualities .tp-volume-container,
            .this-player.tp-has-text-tracks .tp-volume-container{
                right: 92px;
            }
            .this-player.tp-has-qualities.tp-has-text-tracks .tp-volume-container{
                right: 132px;
            }
            .this-player.tp-audio .tp-volume-container{
                position: relative;
                right: auto;
                float: right;
                margin-right: 14px;
            }

                .this-player .tp-mute-button {
                    cursor:pointer;
                    width:26px;
                    height:50px;
                    float: left;
                    position: relative;
                }

                    .this-player .tp-mute-button-inner{
                        width:11px;
                        height: 16px;
                        position: absolute;
                        top: 50%;
                        left: 5px;
                        margin-top: -8px;
                        background:url('tp-sprite.png') 0 -17px no-repeat;
                    }
                    .this-player.tp-is-muted .tp-mute-button .tp-mute-button-inner{
                        width: 17px;
                        background-position: -12px -17px;
                    }

                .this-player .tp-volume-bar{
                    width: calc(100% - 26px);
                    float:left;
                    height:30px;
                    margin-top: 10px;
                    position: relative;
                }

                    .this-player .tp-volume-bar-inner{
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width:100%;
                        margin-top: -1px;
                        height: 2px;
                        background: rgba(255, 255, 255, 0.3);
                    }

                        .this-player .tp-volume-indicator{
                            height:2px;
                            background:#fba202;
                            position:absolute;
                            top:0;
                            left:0;
                            width:100%;
                            z-index:5;
                        }

            .this-player .tp-fullscreen-button{
                width:44px;
                height:50px;
                float:right;
                cursor:pointer;
                position: relative;
            }

                .this-player .tp-fullscreen-button-inner{
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -8px;
                    margin-top: -8px;
                    background:url('tp-sprite.png') 0 0 no-repeat;
                } .this-player.tp-is-fullscreen .tp-fullscreen-button-inner{background-position: -17px 0}

            .this-player .tp-qualities-container{
                height: 50px;
                width: 40px;
                float:right;
                display:block;
                position:relative;
                text-align: center;
            }

                .this-player .tp-qualities-button{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    line-height: 50px;
                    cursor: pointer;
                }

                    .this-player .tp-qualities-button-inner{
                        font-size: 13px;
                        color: #fff;
                        font-family: Arial, sans-serif;
                    }

                .this-player .tp-quality-items-container,
                .this-player .tp-text-track-items-container{
                    width: 70px;
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    margin-left: -35px;
                    float:left;
                    background: rgba(0, 0, 0, 0.6);
                    display:none;
                }
                .this-player .tp-text-track-items-container{
                    width: 100px;
                    margin-left: -50px;
                }
                .this-player.tp-qualities-bar-opened .tp-quality-items-container,
                .this-player.tp-text-tracks-bar-opened .tp-text-track-items-container{
                    display: block;
                }

                    .this-player .tp-quality-items-container-inner,
                    .this-player .tp-text-track-items-container-inner{
                        width: 100%;
                        float: left;
                    }

                        .this-player .tp-quality-item,
                        .this-player .tp-text-track-item{
                            line-height:38px;
                            font-size:13px;
                            display:block;
                            width: 100%;
                            float:left;
                            color:rgba(255, 255, 255, 0.7);
                            position: relative;
                            cursor:pointer;
                            margin-bottom: 1px;
                            font-family: Arial, sans-serif;
                        }
                        .this-player .tp-quality-item.tp-active,
                        .this-player .tp-text-track-item.tp-active,
                        .this-player .tp-quality-item:hover,
                        .this-player .tp-text-track-item:hover{
                            color: rgba(255, 255, 255, 1);
                        }
                        .this-player .tp-quality-item:last-child,
                        .this-player .tp-text-track-item:last-child{
                            margin-bottom: 0;
                        }

                            .this-player .tp-quality-item:not(:last-child):before,
                            .this-player .tp-text-track-item:not(:last-child):before{
                                content: '';
                                width: 80%;
                                height: 1px;
                                background: #fff;
                                position: absolute;
                                left: 10%;
                                bottom: -1px;
                            }

            .this-player .tp-text-tracks-control-container{
                width:40px;
                height:50px;
                float:right;
                text-align: center;
                position: relative;
            }

                .this-player .tp-text-tracks-control-button{
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    line-height: 50px;
                    display: block;
                    cursor: pointer;
                    position: absolute;
                }

                    .this-player .tp-text-tracks-control-button:before{
                        content: 'CC';
                        font-family: Arial, sans-serif;
                        display: inline;
                        color:rgba(255, 255, 255, 0.7);
                        font-size: 13px;
                    }
                    .this-player.tp-is-text-tracks-active .tp-text-tracks-control-button:before{
                        color:rgba(255, 255, 255, 1);
                    }

                    .this-player .tp-text-tracks-control-button-inner{
                        display: none;
                    }

        .this-player .tp-context-menu-wrapper{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 30;
            display: none;
        } .this-player.context-menu-active .tp-context-menu-wrapper{display: block}

            .this-player .tp-context-menu{
                position: absolute;
                z-index: 31;
                width: 180px;
                background-color: rgba(0, 0, 0, 0.6);
                display: block;
            }

                .this-player .tp-context-menu-list{
                    list-style: none;
                    display: block;
                    width: 100%;
                    float: left;
                }

                    .this-player .tp-context-menu-list-item{
                        display: block;
                        width: 100%;
                        box-sizing: border-box;
                        padding: 0 10px;
                        color: #fff;
                        float: left;
                        cursor: pointer;
                        font-size: 14px;
                        line-height: 24px;
                        border-bottom: 1px solid #fff;
                    }
                    .this-player .tp-context-menu-list-item:hover{background: #fff;color: #000}
                    .this-player .tp-context-menu-list-item:last-child{border-bottom: 0}

        .this-player .tp-builtin{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:4;
        }

        .this-player .tp-error-container{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            background-color: #ccc;
            z-index: 20;
        }

            .this-player .tp-error-message{
                position:absolute;
                left:0;
                top:50%;
                width:100%;
                text-align: center;
                color:#cc0000;
                font-size:18px;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
            }

@-khtml-keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}
@-o-keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}
@-webkit-keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}
@-moz-keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}
@-ms-keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}
@keyframes tp-bar-waiting-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}

@-khtml-keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}
@-o-keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}
@-webkit-keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}
@-moz-keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}
@-ms-keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}
@keyframes tp-waiting-animation {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 10%;
        height: 10%;
    }
    10%, 30%, 50%, 70%, 90% {
        width: 50%;
        height: 50%;
    }
}

@media only screen and (orientation: portrait){
    .this-player.tp-is-fullscreen .tp-text-track-cue > p > span{font-size: 3vh}
}
@media only screen and (orientation: landscape){
    .this-player.tp-is-fullscreen .tp-text-track-cue > p > span{font-size: 3vw}
}
@media only screen and (max-width: 520px){
    .this-player .tp-duration-log{
        display: none;
    }
    .this-player .tp-time-progress-bar {
        width: calc(100% - 272px);
    }
    .this-player.tp-has-qualities .tp-time-progress-bar,
    .this-player.tp-has-text-tracks .tp-time-progress-bar{
        width: calc(100% - 312px);
    }
    .this-player.tp-has-qualities.tp-has-text-tracks .tp-time-progress-bar{
        width: calc(100% - 352px);
    }
    .this-player.tp-audio .tp-time-progress-bar{
        width: calc(100% - 226px);
    }

    .this-player:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar {
        width: calc(100% - 168px);
    }
    .this-player.tp-has-qualities:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar,
    .this-player.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
        width: calc(100% - 208px);
    }
    .this-player.tp-has-qualities.tp-has-text-tracks:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
        width: calc(100% - 248px);
    }
    .this-player.tp-audio:not(.tp-has-volume-bar):not(.tp-has-mute-button) .tp-time-progress-bar{
        width: calc(100% - 136px);
    }
}
@media only screen and (max-width: 450px){
    .this-player .tp-volume-container{
        display: none;
    }
    .this-player .tp-time-progress-bar {
        width: calc(100% - 168px);
    }
    .this-player.tp-has-qualities .tp-time-progress-bar,
    .this-player.tp-has-text-tracks .tp-time-progress-bar{
        width: calc(100% - 208px);
    }
    .this-player.tp-has-qualities.tp-has-text-tracks .tp-time-progress-bar{
        width: calc(100% - 248px);
    }
    .this-player.tp-audio .tp-time-progress-bar{
        width: calc(100% - 136px);
    }
}