/*! Videojs skin | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */
/** Iconos utilizables
.icon-volume-down:before {content: "\61";}
.icon-volume-off:before {content: "\62";}
.icon-volume-up:before {content: "\63";}
.icon-stop:before {content: "\65";}
.icon-pause:before {content: "\66";}
.icon-prev:before {content: "\67";}
.icon-next:before {content: "\68";}
.icon-fast-forward:before {content: "\69";}
.icon-fast-backward:before {content: "\6a";}
.icon-repeat:before {content: "\6b";}
.icon-fullscreen:before {content: "\6c";}
.icon-fullscreen-exit:before {content: "\6d";}
.icon-pause-1:before {content: "\6e";}
.icon-equalizer:before {content: "\70";}
.icon-playlist-add:before {content: "\71";}
.icon-repeat-1:before {content: "\72";}**/

/* player */
@font-face {
  font-family: "player";
  src:url("../src/fonts/player.eot");
  src:url("../src/fonts/player.eot?#iefix") format("embedded-opentype"),
    url("../src/fonts/player.woff") format("woff"),
    url("../src/fonts/player.ttf") format("truetype"),
    url("../src/fonts/player.svg#1480808305") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*fin font*/
.video-js {
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    position: relative;
}
.video-js .vjs-tech {
    width: 100%;
    height: 100%;
    display: block;
}
/*all buttons*/
.video-js button, [class*="button"] {
    border: 0 none;
    background: transparent;
    outline: 0 none;
    padding: 0;
    margin:0;
    display: inline-block;
    line-height: 0;
    cursor: pointer;
}

.video-js button:before, [class*="button"]:before {
    font-family: "player" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    vertical-align: middle;
    color: #fff;
    position: relative;
    top: 2px;
}

/*If it is hidden => diplay: none*/
.vjs-hidden, .vjs-has-started .vjs-big-play-button, .vjs-control-text, .vjs-remaining-time, .video-js.vjs-controls-disabled .vjs-control-bar {display: none;}

/*icons*/
.video-js .vjs-big-play-button:before, .video-js .vjs-play-control:before {content: "\64";}/*play*/
.video-js .vjs-play-control.vjs-playing:before {content: "\6e";}/*playing & paused*/
.video-js .vjs-vol-1:before, .video-js .vjs-vol-0:before {content: "\61";}/*volume mute */
.video-js .vjs-vol-2:before {content: "\62";}/*volume medium*/
.video-js .vjs-vol-3:before {content: "\63";}/*volume high*/
.video-js .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control:before {content: "\6c";}/*fullscreen enter*/
.video-js .vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control:before {content: "\6d";}/*fullscreen exit*/


/*controls*/
.video-js .vjs-big-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.8;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
.video-js .vjs-big-play-button:before {font-size: 10em;}
.video-js .vjs-big-play-button:hover {opacity: 1;}

.video-js .vjs-control-bar {
    background: #252428;
    padding: 1em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

/*volume*/
.video-js .vjs-control {padding: 0 1em;}

.vjs-volume-menu-button .vjs-menu-content {
    display: block;
    width: 5em;
    height: 2px;
}
.vjs-volume-menu-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.video-js .vjs-slider {
    background: rgba(255,255,255,0.2);
    width: 100%;
    height: 100%;
}
.video-js .vjs-volume-level, .vjs-play-progress.vjs-slider-bar {
    background: #00cfe8;
    height: 100%;
    position: relative;
    cursor: pointer;
}
.video-js .vjs-volume-level:before, .vjs-play-progress.vjs-slider-bar:before {
    content: "";
    position: absolute;
    right: -8px;
    width: 12px;
    height: 12px;
    background: #00cfe8;
    top: -5px;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px rgba(0,207,232,0.35);
    z-index: 10;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transition: transform .3s;
            transition: transform .3s;
}
.video-js .vjs-volume-level:hover:before, .vjs-play-progress.vjs-slider-bar:hover:before {
    -webkit-transform: scale(1);
            transform: scale(1);
}
.vjs-volume-menu-button .vjs-menu {
    padding: 0.85em 0 0.85em 1em;
    margin: auto;
    height: 30px;
}
/*time & divider*/
.video-js .vjs-control.vjs-time-control, .vjs-time-control.vjs-time-divider {
    font-weight: 700;
    color: #ffffff;
}

/*progress*/
.video-js .vjs-progress-control {
    position: absolute;
    top: 0;
    width: 100%;
    height: 2px;
    left: 0;
    padding: 0;
}
.video-js .vjs-load-progress {
  background: rgba(255,255,255,0.75);
  height: 100%;
  position: absolute;
}
.video-js .vjs-play-progress.vjs-slider-bar:before {
    display: none;
}
.vjs-has-started .vjs-play-progress.vjs-slider-bar:before {
    display: block;
}
.video-js.vjs-user-active .vjs-play-progress.vjs-slider-bar:before {
    -webkit-transform: scale(1);
            transform: scale(1);
}
.video-js.vjs-user-inactive .vjs-play-progress.vjs-slider-bar:before {
    -webkit-transform: scale(0);
            transform: scale(0);
}
/*fullscreen*/
.video-js .vjs-fullscreen-control {margin-left: auto;}
.video-js.vjs-fullscreen {
    width: 100% !important;
    height: 100% !important;
}
.video-js.vjs-fullscreen .vjs-control-bar, .video-js.fluid .vjs-control-bar {
    position: absolute;
    bottom: 0;
    transition: opacity .3s;
    width: 100%;
}
.video-js.vjs-fullscreen.vjs-user-active .vjs-control-bar,
.video-js.fluid.vjs-user-active .vjs-control-bar {opacity: 0.9;}
.video-js.vjs-fullscreen.vjs-user-inactive .vjs-control-bar,
.video-js.fluid.vjs-user-inactive .vjs-control-bar {opacity: 0;}

/*loading*/
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes spinner {
    to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
.vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.85;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {display: block;}

.vjs-loading-spinner:after {
    content: '';
    border-radius: 50%;
    animation: spinner .6s linear infinite;
    -webkit-animation: spinner .5s linear infinite;
    position: absolute;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #fff #fff transparent;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 800px) {
    .vjs-volume-menu-button .vjs-menu {display: none;}
    .video-js .vjs-control {padding: 0 .5em;}
    .video-js .vjs-progress-control {padding: 0;}
}

@media only screen and (max-width: 540px) {
    .video-js .vjs-control-bar {padding: .5em 0;}
    .video-js .vjs-big-play-button:before {font-size: 5em;}
    .video-js button:before, [class*="button"]:before {font-size: 25px;}
}