body {
    font-family: Roboto,Arial,Helvetica,sans-serif;
    color: #000
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none
}

html {
    height: 100%
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0
}

.player-wrapper {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.allContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    background: transparent
}

.allContainer video {
    display: block;
    background-color: #d3d3d3
}

.allContainer.mouseOver .controls {
    bottom: 0;
    -webkit-transition: bottom .3s ease;
    -o-transition: bottom .3s ease;
    transition: bottom .3s ease
}

.allContainer.mouseOver .player-title {
    top: 0;
    -webkit-transition: top .3s ease;
    -o-transition: top .3s ease;
    transition: top .3s ease
}

.allContainer.imaMode .player-title {
    top: 0;
    -webkit-transition: top .3s ease;
    -o-transition: top .3s ease;
    transition: top .3s ease
}

.allContainer.imaMode .controls-bar-time,.allContainer.imaMode .resolution-switch,.allContainer.imaMode .player-shares,.allContainer.imaMode .player-subtitles,.allContainer.imaMode .player-title {
    display: none
}

@media(max-width: 700px) {
    .allContainer {
        font-size:90%
    }
}

@media(max-width: 380px) {
    .allContainer {
        font-size:70%
    }
}

.play-click {
    width: 100%;
    height: 80%;
    max-height: 100%;
    max-width: 100%;
    background: transparent;
    position: absolute;
    top: 10%;
    left: 0;
    cursor: pointer;
    z-index: 11;
    display: none ; 
}

@media(max-width: 760px) {
    .play-click {
        height:75%
    }
}

@media(max-width: 500px) {
    .play-click {
        height:70%
    }
}

.play-click.play-click-mute {
    display: block
}

.play-click.play-click-mute .play-click-wait,.play-click.play-click-mute .play-click-play {
    display: none
}

.play-click.play-click-wait {
    display: block
}

.play-click.play-click-wait .play-click-mute,.play-click.play-click-wait .play-click-play {
    display: none
}

.play-click.play-click-play {
    display: block
}

.play-click.play-click-play .play-click-mute,.play-click.play-click-play .play-click-wait {
    display: none
}

.play-click-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10%;
    height: auto;
    margin: -5%;
    opacity: .6;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    cursor: pointer
}

.player-title {
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 3vh;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(255,255,255,0) 100%);
    -webkit-transition: bottom .3s ease;
    -o-transition: bottom .3s ease;
    transition: bottom .3s ease;
    padding: .5vh .5vw;
    text-align: right
}

@media(max-width: 650px) {
    .player-title {
        height:4vh
    }
}

@media(max-width: 400px) {
    .player-title {
        height:3vh
    }
}

.onlogo {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: .5vw
}

.onlogo svg {
    display: block
}

@media(max-width: 650px) {
    .onlogo {
        height:85%
    }
}

.titin {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    position: absolute;
    left: .5vw;
    text-align: left;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.controls {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    z-index: 22;
    padding: 1vh 2vw 1.6vh;
    width: 100%;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(0,0,0,.6)));
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.6) 100%);
    background: -o-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.6) 100%);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.6) 100%);
    -webkit-transition: bottom .3s ease;
    -o-transition: bottom .3s ease;
    transition: bottom .3s ease
}

.controls svg {
    fill: #fff
}

.controls-bar {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.controls-bar svg {
    width: 3vw;
    display: block;
    cursor: pointer
}

@media(max-width: 600px) {
    .controls-bar svg {
        width:4vw
    }
}

@media(max-width: 550px) {
    .controls-bar svg {
        width:6vw
    }
}

.controls-bar-buttons,.controls-bar-volume,.controls-bar-time {
    margin: 0 2vw 0 0
}

.controls-bar-buttons.play .button-pause {
    display: none
}
.controls-bar-buttons.play .button-replay {
    display: none
}

.controls-bar-buttons.pause .button-play {
    display: none
}
.controls-bar-buttons.pause .button-replay {
    display: none
}

.controls-bar-buttons.replay .button-play {
    display: none
}
.controls-bar-buttons.replay .button-pause {
    display: none
}

.controls-bar .controls-bar-volume-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1vw
}

.controls-bar .volume-handle {
    width: 1.5vw
}

@media(max-width: 700px) {
    .controls-bar .volume-handle {
        width:2.2vw
    }
}

@media(max-width: 550px) {
    .controls-bar .volume-handle {
        width:3.2vw
    }
}

.volume-slider {
    background: rgba(255,255,255,.3);
    width: 10vw;
    position: relative
}

@media(max-width: 550px) {
    .volume-slider {
        width:15vw
    }
}

.volume-track {
    background-color: rgba(255,255,255,.7);
    height: 3px;
    display: block
}

.volume-full,.volume-slider {
    display: inline-block;
    vertical-align: middle
}

.volume-handle {
    position: absolute;
    display: block;
    top: 50%;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.controls-bar-volume.volm0 .volm66,.controls-bar-volume.volm0 .volm33,.controls-bar-volume.volm0 .mute {
    display: none
}

.controls-bar-volume.volm66 .volm0,.controls-bar-volume.volm66 .volm33,.controls-bar-volume.volm66 .mute {
    display: none
}

.controls-bar-volume.volm33 .volm0,.controls-bar-volume.volm33 .volm66,.controls-bar-volume.volm33 .mute {
    display: none
}

.controls-bar-volume.mute .volm0,.controls-bar-volume.mute .volm33,.controls-bar-volume.mute .volm66 {
    display: none
}

.controls-right {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: right
}

.resolution-switch,.player-full-screen,.player-subtitles,.player-shares {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 1vw
}

.resolution-list,.player-subtitles-list,.player-share-list {
    display: none;
    position: absolute;
    right: 0;
    bottom: 100%;
    background: rgba(0,0,0,.6);
    padding: 1vh 1vw;
    text-align: center
}


.resolution-list div,.player-subtitles-list div,.player-share-list div {
    padding: .5vw .5vh;
    cursor: pointer
}

.resolution-switch,.player-subtitles,.player-shares {
    position: relative
}

.resolution-switch:hover .resolution-list,.resolution-switch:hover .player-subtitles-list,.player-subtitles:hover .resolution-list,.player-subtitles:hover .player-subtitles-list,
.player-shares:hover .player-share-list
 {
    display: block
}

.resolution-switch #HQ {
    fill: #fff
}

.progress-bar {
    margin-bottom: 1.5vh;
    position: relative;
    cursor: pointer
}

.buffered-bar {
    background: rgba(255,255,255,.4);
    height: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

.total-bar {
    width: 100%;
    height: 4px;
    display: block;
    background: rgba(255,255,255,.3)
}

.played-bar {
    height: 100%;
    background: #342267;
    position: absolute;
    left: 0;
    top: 0
}

.cues-bar {
    height: 100%;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0 ;
    width : 100% ;
    pointer-events : none ;
    touch-events : none ;
}
div.cues-bar > div.cue{
  width : 3px ;
  background : yellow ;
  height : 100% ;
  position : absolute ;
  top : 0px; 
}

.controls-bar .fullscreen-off {
    display: none
}

.fullscreen .controls-bar .fullscreen-on {
    display: none
}

.fullscreen .controls-bar .fullscreen-off {
    display: block
}

@media(min-width: 1366px) {
    .fullscreen .controls-bar .volume-handle {
        width:1vw
    }

    .fullscreen .controls-bar svg {
        width: 1.5vw
    }
}

.fullscreen .player-title {
    height: 5vh
}

@media(max-width: 800px) {
    .fullscreen .player-title {
        height:3vh
    }
}

@media(max-width: 650px) {
    .fullscreen .player-title {
        height:4vh
    }
}

.fullscreen .onlogo {
    height: 100%
}

.player-share-list{ 
  padding : 0px; 
  width:auto; 
}
.player-share-list div {
  width:32px;
  height:32px;
  cursor : pointer ;
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); 
  filter: grayscale(100%); 
  filter: gray;
  border-radius : 4px; 
  background-size:416px 32px;  
  display:inline-block ;
  position:relative ;
}
.player-share-list div:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: none;
}
.sharefb {
  background: url( '/img/ikony.png' ) -384px 0px;
}
.sharegoogle{
  background: url( '/img/ikony.png' ) -224px 0px;
}
.sharewykop {
  background: url( '/img/ikony.png' ) -320px 0px;
}
.sharepinterest {  
  background: url( '/img/ikony.png' ) -128px 0px;
}
.sharetweeter {
  background: url( '/img/ikony.png' ) -160px 0px ;
}
.shareinsta {
  background: url( '/img/insta2.png' ) 0px 0px ;
  background-size:32px 32px;
}
.sharelinkedin {
  background: url( '/img/ikony.png' ) -192px 0px;
}
.sharevkontakte {
  background: url( '/img/ikony.png' ) -96px 0px;
}
.sharetumblr {
  background: url( '/img/ikony.png' ) -32px 0px;
}
.shareodnoklassniki {
  background: url( '/img/ikony.png' ) -64px 0px;
}
.sharelivejournal {
  background: url( '/img/ikony.png' ) -352px 0px;
}
.sharereddit {
  background: url( '/img/ikony.png' ) -288px 0px;
}