
.icons-sprite, .html-player-video-controls .html-player-play,
.html-player-video-controls .html-player-play.hover, .html-player-video-controls .html-player-play.paused,
.html-player-video-controls .html-player-play.paused.hover, .html-player-video-controls .html-player-play.playing,
.html-player-video-controls .html-player-play.playing.hover, .html-player-video-controls .html-player-progress-bar .html-player-progress-wrapper .html-player-progress-pointer,
.html-player-video-controls .html-player-volume, .html-player-video-controls .html-player-volume.hover,
.html-player-video-controls .html-player-volume.hover .html-player-volume-button.muted,
.html-player-video-controls .html-player-volume .html-player-volume-button.muted,
.html-player-video-controls .html-player-fullscreen, .html-player-video-controls .html-player-fullscreen.hover,
.html-player-video-controls .html-player-fullscreen.fullscreen,
.html-player-video-controls .html-player-fullscreen.fullscreen.hover,
.jqplayer-logo {
    background: url('../../img/icons.png?vf428d41231') no-repeat
}

.html-player-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.html-player-video-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url(../../img/bg_main.jpg);
    z-index: 100
}

.html-player-video-controls .html-player-play {
    float: left;
    background-position: -332px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play.hover {
    background-position: -365px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play.paused {
    background-position: -332px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play.paused.hover {
    background-position: -365px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play.playing {
    background-position: -266px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play.playing.hover {
    background-position: -299px 0;
    height: 34px;
    width: 33px
}

.html-player-video-controls .html-player-play span {
    display: none
}

.html-player-video-controls .html-player-progress-bar {
    float: left;
    height: 34px;
    background: url(../../img/bg_divider.png) top right no-repeat
}

.html-player-video-controls .html-player-progress-bar .html-player-progress-wrapper {
    position: relative;
    height: 34px;
    width: 90%;
    margin: 0 auto;
    cursor: default
}

.html-player-video-controls .html-player-progress-bar .html-player-progress-wrapper .html-player-progress-play {
    position: absolute;
    height: 6px;
    top: 13px;
    width: 0;
    z-index: 2;
    background: url(../../img/bg_prog.jpg)
}

.html-player-video-controls .html-player-progress-bar .html-player-progress-wrapper .html-player-progress-pointer {
    position: absolute;
    margin: 0 -12px;
    top: 4px;
    z-index: 2;
    background-position: -398px 0;
    height: 24px;
    width: 24px
}

.html-player-video-controls .html-player-progress-bar .html-player-progress-wrapper .html-player-progress-buffer {
    position: absolute;
    height: 6px;
    top: 13px;
    width: 0;
    background: url(../../img/bg_buffer.png)
}

.html-player-video-controls .html-player-time-display {
    float: left;
    width: 93px;
    height: 34px;
    color: #fff;
    font: normal 14px Arial, Helvetica, sans-serif;
    background: url(../../img/bg_divider.png) top right no-repeat
}

.html-player-video-controls .html-player-time-display > div {
    float: left;
    margin-top: 10px
}

.html-player-video-controls .html-player-time-display > div:first-child {
    margin-left: 12px
}

.html-player-video-controls .html-player-time-display > div:nth-child(2) {
    color: #525252;
    margin: 10px 4px
}

.html-player-video-controls .html-player-volume {
    float: left;
    position: relative;
    background-position: -520px 0;
    height: 34px;
    width: 51px
}

.html-player-video-controls .html-player-volume.hover {
    background-position: -571px 0;
    height: 34px;
    width: 51px
}

.html-player-video-controls .html-player-volume.hover .html-player-volume-button.muted {
    background-position: -215px 0;
    height: 34px;
    width: 51px
}

.html-player-video-controls .html-player-volume.hover .html-player-volume-bar {
    display: block;
    position: absolute;
    bottom: 34px;
    left: 10px;
    width: 30px;
    height: 86px;
    background-color: #333;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    -o-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    -o-border-top-right-radius: 4px
}

.html-player-video-controls .html-player-volume .html-player-volume-button {
    text-indent: -9999px;
    width: 51px;
    height: 34px
}

.html-player-video-controls .html-player-volume .html-player-volume-button.muted {
    background-position: -164px 0;
    height: 34px;
    width: 51px
}

.html-player-video-controls .html-player-volume .html-player-volume-bar {
    display: none
}

.html-player-video-controls .html-player-volume .html-player-volume-bar .html-player-volume-wrapper {
    height: 70px;
    margin: 10px 0 0 12px;
    width: 6px;
    position: relative;
    background: url(../../img/bg_volw.png)
}

.html-player-video-controls .html-player-volume .html-player-volume-bar .html-player-volume-wrapper .html-player-volume-position {
    width: 6px;
    background: url(../../img/bg_vol.png);
    position: absolute;
    bottom: 0;
    height: 100%
}

.html-player-video-controls .html-player-volume .html-player-volume-bar .html-player-volume-icon-plus,
.html-player-video-controls .html-player-volume .html-player-volume-bar .html-player-volume-icon-less {
    display: none
}

.html-player-video-controls .html-player-fullscreen {
    float: left;
    background-position: 0 0;
    height: 34px;
    width: 49px
}

.html-player-video-controls .html-player-fullscreen.hover {
    background-position: -49px 0;
    height: 34px;
    width: 49px
}

.html-player-video-controls .html-player-fullscreen.fullscreen {
    background-position: -422px 0;
    height: 34px;
    width: 49px
}

.html-player-video-controls .html-player-fullscreen.fullscreen.hover {
    background-position: -471px 0;
    height: 34px;
    width: 49px
}

.html-player-video-controls .html-player-fullscreen span {
    display: none
}

.html-player-video-controls .html-player-alternative-versions {
    width: 63px;
    height: 34px;
    float: left;
    position: relative;
    cursor: pointer
}

.html-player-video-controls .html-player-alternative-versions.hover ul {
    display: block
}

.html-player-video-controls .html-player-alternative-versions > span {
    display: none
}

.html-player-video-controls .html-player-alternative-versions .html-player-current-version {
    display: block;
    height: 34px;
    color: #fff;
    font: normal 14px Arial, Helvetica, sans-serif;
    text-align: center;
    line-height: 250%
}

.html-player-video-controls .html-player-alternative-versions ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    background-color: #333;
    width: 63px;
    position: absolute;
    right: 0;
    bottom: 34px;
    font: normal 13px Arial, Helvetica, sans-serif;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    -o-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    -o-border-top-right-radius: 4px;
    z-index: 10
}

.html-player-video-controls .html-player-alternative-versions ul li {
    height: 15px
}

.html-player-video-controls .html-player-alternative-versions ul li a {
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none
}

.html-player-video-controls .html-player-alternative-versions ul li a:hover {
    opacity: 0.3
}

.html-player-video-controls .html-player-custom-button {
    float: left;
    width: 30px
}

.html-player-video-controls.inactive {
    height: 12px
}

.html-player-video-controls.inactive .html-player-play {
    opacity: 0
}

.html-player-video-controls.inactive .html-player-play, .html-player-video-controls.inactive .html-player-progress-bar,
.html-player-video-controls.inactive .html-player-progress-wrapper,
.html-player-video-controls.inactive .html-player-time-display,
.html-player-video-controls.inactive .html-player-volume, .html-player-video-controls.inactive .html-player-fullscreen,
.html-player-video-controls.inactive .html-player-alternative-versions {
    height: 12px
}

.html-player-video-controls.inactive .html-player-play > * , .html-player-video-controls.inactive .html-player-time-display,
.html-player-video-controls.inactive .html-player-volume, .html-player-video-controls.inactive .html-player-fullscreen,
.html-player-video-controls.inactive .html-player-alternative-versions,
.html-player-video-controls.inactive .html-player-progress-pointer {
    display: none
}

.html-player-video-controls.inactive .html-player-progress-bar {
    background: none
}

.html-player-video-controls.inactive .html-player-progress-play,
.html-player-video-controls.inactive .html-player-progress-buffer {
    top: 3px !important
}

.html-player-subtitle {
    position: absolute;
    bottom: 50px;
    color: white;
    font: normal 16px Arial, Helvetica, sans-serif;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    width: 100%;
    text-align: center;
    z-index: 2
}

.html-player-subtitle .html-player-subtitle-content {
    margin: 0 20px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

object {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.jqplayer-logo {
    display: block;
    margin: 5px 10px 0 0;
    background-position: -98px 0;
    height: 30px;
    width: 66px
}

.jqplayer-logo span {
    display: block;
    text-indent: -9999px;
    overflow: hidden
}

.jumbotron {
    text-align: center
}

.jumbotron h1 {
    text-align: center
}

.video-container {
    width: auto;
    margin: 0 auto
}

#video-element.p720 .html-player-subtitle {
    font-size: 28px
}

:-moz-full-screen .html-player-subtitle, :-webkit-full-screen .html-player-subtitle,
:fullscreen .html-player-subtitle {
    font-size: 28px
}

#video-element {
    position: relative;
    width: 480px;
    height: 270px;
    padding-bottom: 12px;
    margin: 0 auto;
    background-color: black
}

#video-element.fullscreen {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0
}

#github-label {
    position: absolute;
    top: 41px;
    right: 0;
    border: 0
}

@media (min-width: 980px) {

}

@media (min-width: 1200px) {
    #video-element {
        width: 480px;
        height: 270px
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    #video-element {
        width: 480px;
        height: 270px
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    #video-element {
        width: 373px;
        height: 210px
    }
}

@media (max-width: 979px) {
    #github-label {
        top: 50px
    }
}

@media (max-width: 767px) {
    #video-element {
        width: 441px;
        height: 248px
    }
}

@media (max-width: 480px) {
    #video-element {
        width: 310px;
        height: 174px
    }

    #github-label {
        display: none
    }
}

