litle

8 files changed, 7034 insertions, 0 deletions

diff --git a/librevideojs/css/material/libre-skin-blue.css b/librevideojs/css/material/libre-skin-blue.css
new file mode 100644
index 0000000..f5cdf77
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-blue.css
@@ -0,0 +1,656 @@
+/*!
+LibreVideoJS Estilos personalizados = blue
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialblue-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialblue-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialblue-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialblue-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialblue-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialblue-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height.
+*/
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+.librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+content:""
+}
+}
+.librevjs-libre-materialblue-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialblue-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before {
+color: #2196F3;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialblue-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialblue-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialblue-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(33, 150, 244);
+}
+.librevjs-libre-materialblue-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before {
+color:#2980b9; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialblue-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #2196F3 url() -50% 0 repeat; /*color de barra volumen*/
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em
+}
+.librevjs-libre-materialblue-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s
+}
+.librevjs-libre-materialblue-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s
+}
+.librevjs-libre-materialblue-skin .librevjs-progress-holder {
+height:100%
+}
+.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+
+/* Personalización de barra de progreso a color azul */
+.librevjs-libre-materialblue-skin .librevjs-play-progress {
+background: #2196F3 url() -50% 0 repeat;
+}
+.librevjs-libre-materialblue-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialblue-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialblue-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialblue-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em;
+}
+.librevjs-libre-materialblue-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialblue-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialblue-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialblue-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialblue-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #2196F3;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus {
+color: #0289f4; /*color boton focus*/
+}
+.librevjs-libre-materialblue-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear
+}
+.librevjs-libre-materialblue-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+    -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button {
+float:right;
+cursor:pointer
+}
+.librevjs-libre-materialblue-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5)
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color: #ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #ffffff;
+background-color: rgb(33, 150, 244);
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #2196F3;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default
+}
+.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialblue-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.5em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialblue-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: rgb(33, 150, 244);
+background-color: inherit;
+}
+.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(11, 137, 237);
+background-color: inherit;
+}
+
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/libre-skin-grey.css b/librevideojs/css/material/libre-skin-grey.css
new file mode 100644
index 0000000..cd74eef
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-grey.css
@@ -0,0 +1,656 @@
+/*!
+LibreVideoJS Estilos personalizados = Grey
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialgrey-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialgrey-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialgrey-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialgrey-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialgrey-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height.
+*/
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialgrey-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialgrey-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before {
+color: #9e9e9e;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialgrey-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialgrey-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialgrey-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color: rgb(158, 158, 158);
+}
+.librevjs-libre-materialgrey-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before {
+color:#7c7c7c; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialgrey-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #9e9e9e url() -50% 0 repeat; /*color de barra volumen*/
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em
+}
+.librevjs-libre-materialgrey-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s
+}
+.librevjs-libre-materialgrey-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s
+}
+.librevjs-libre-materialgrey-skin .librevjs-progress-holder {
+height:100%
+}
+.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+
+/* Personalización de barra de progreso a color plata */
+.librevjs-libre-materialgrey-skin .librevjs-play-progress {
+background: #9e9e9e url() -50% 0 repeat;
+}
+.librevjs-libre-materialgrey-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialgrey-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialgrey-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em;
+}
+.librevjs-libre-materialgrey-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialgrey-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialgrey-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #9e9e9e;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile
+*/
+.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus {
+color: rgb(115, 115, 115); /*color boton focus grey oscuro*/
+}
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear
+}
+.librevjs-libre-materialgrey-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button {
+float:right;
+cursor:pointer
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5)
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color: #ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #ffffff;
+background-color: rgb(158, 158, 158);
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9e9e9e;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default
+}
+.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialgrey-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.5em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialgrey-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:#737373;
+background-color: inherit;
+}
+.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color:#9e9e9e;
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/libre-skin-purple.css b/librevideojs/css/material/libre-skin-purple.css
new file mode 100644
index 0000000..3eeb9d6
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-purple.css
@@ -0,0 +1,656 @@
+/*!
+LibreVideoJS Estilos personalizados = Purple
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialpurple-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialpurple-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialpurple-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialpurple-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialpurple-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height.
+*/
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialpurple-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialpurple-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before {
+color: #9c27b0;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialpurple-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialpurple-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialpurple-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color: rgb(156, 39, 176);
+}
+.librevjs-libre-materialpurple-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before {
+color:#8e44ad; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialpurple-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #9c27b0 url() -50% 0 repeat; /*color de barra volumen*/
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em
+}
+.librevjs-libre-materialpurple-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s
+}
+.librevjs-libre-materialpurple-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s
+}
+.librevjs-libre-materialpurple-skin .librevjs-progress-holder {
+height:100%
+}
+.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+
+/* Personalización de barra de progreso a color purpura */
+.librevjs-libre-materialpurple-skin .librevjs-play-progress {
+background: #9c27b0 url() -50% 0 repeat;
+}
+.librevjs-libre-materialpurple-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialpurple-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialpurple-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em;
+}
+.librevjs-libre-materialpurple-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialpurple-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialpurple-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #9c27b0;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile
+*/
+.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus {
+color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/
+}
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear
+}
+.librevjs-libre-materialpurple-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color: #ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #ffffff;
+background-color: rgb(156, 39, 176);
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9c27b0;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialpurple-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute;
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.5em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialpurple-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:#9c27b0;
+background-color: inherit;
+}
+.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color:#8e44ad;
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/libre-skin-red.css b/librevideojs/css/material/libre-skin-red.css
new file mode 100644
index 0000000..2a14676
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-red.css
@@ -0,0 +1,654 @@
+/*!
+LibreVideoJS Estilos personalizados = Red
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialred-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialred-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialred-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialred-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialred-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialred-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialred-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialred-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before {
+color: #f44336;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialred-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialred-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialred-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color: rgb(244, 67, 54);
+}
+.librevjs-libre-materialred-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialred-skin .librevjs-play-control:hover:before {
+color:#f22e1f; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialred-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialred-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #f44336 url() -50% 0 repeat; /*color de barra volumen*/
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialred-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em
+}
+.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em
+}
+.librevjs-libre-materialred-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s
+}
+.librevjs-libre-materialred-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s
+}
+.librevjs-libre-materialred-skin .librevjs-progress-holder {
+height:100%
+}
+.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+
+/* Personalización de barra de progreso a color rojo */
+.librevjs-libre-materialred-skin .librevjs-play-progress {
+background: #f44336 url() -50% 0 repeat;
+}
+.librevjs-libre-materialred-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialred-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialred-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialred-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialred-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialred-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialred-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialred-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialred-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #f44336;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialred-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialred-skin .librevjs-big-play-button:focus {
+color: rgba(244, 67, 54, 0.89); /*color boton focus*/
+}
+.librevjs-libre-materialred-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear;
+}
+.librevjs-libre-materialred-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000;
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button {
+float:right;
+cursor:pointer
+}
+.librevjs-libre-materialred-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5)
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #ffffff;
+background-color: rgb(244, 67, 54);
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #f44336;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default
+}
+.librevjs-libre-materialred-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialred-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none;
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute;
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.5em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialred-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: rgb(246, 44, 30);
+background-color: inherit;
+}
+.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(244, 67, 54);
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/libre-skin-teal.css b/librevideojs/css/material/libre-skin-teal.css
new file mode 100644
index 0000000..d36a6ac
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-teal.css
@@ -0,0 +1,655 @@
+/*!
+LibreVideoJS Estilos personalizados = Teal
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialteal-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialteal-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialteal-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialteal-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialteal-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialteal-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialteal-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialteal-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before {
+color: #1de9b6;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialteal-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialteal-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before {
+color:#007c5d; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialteal-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #1de9b6 url() -50% 0 repeat;
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-holder {
+height:100%;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+
+/* Personalización de barra de progreso a color azul */
+.librevjs-libre-materialteal-skin .librevjs-play-progress {
+background: #1de9b6 url() -50% 0 repeat;
+}
+.librevjs-libre-materialteal-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialteal-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialteal-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialteal-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #1abc9c;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus {
+color: #16a085;
+}
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear
+}
+.librevjs-libre-materialteal-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(1, 56, 47);
+background-color: rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #004d40;
+background-color: #1de9b6;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialteal-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto;
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.8em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialteal-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(26, 187, 156);
+background-color: inherit;
+}
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(29, 233, 182);
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/libre-skin-yellow.css b/librevideojs/css/material/libre-skin-yellow.css
new file mode 100644
index 0000000..22b2b08
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-yellow.css
@@ -0,0 +1,654 @@
+/*!
+LibreVideoJS Estilos personalizados = Yellow
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialyellow-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialyellow-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialyellow-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialyellow-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialyellow-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialyellow-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialyellow-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before {
+color: #f1c40f;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialyellow-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialyellow-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialyellow-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color: rgb(241, 196, 14);
+}
+.librevjs-libre-materialyellow-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before {
+color:#f39c12; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0;
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em;
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialyellow-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #f1c40f url() -50% 0 repeat; /*color de barra volumen*/
+}
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em;
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em
+}
+.librevjs-libre-materialyellow-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialyellow-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s
+}
+.librevjs-libre-materialyellow-skin .librevjs-progress-holder {
+height:100%
+}
+.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0;
+}
+
+/* Personalización de barra de progreso a color amarillo */
+.librevjs-libre-materialyellow-skin .librevjs-play-progress {
+background: #f1c40f url() -50% 0 repeat;
+}
+.librevjs-libre-materialyellow-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4);
+}
+.librevjs-libre-materialyellow-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%;
+}
+.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialyellow-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em;
+}
+.librevjs-libre-materialyellow-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialyellow-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialyellow-skin .librevjs-remaining-time {
+display:none;
+float:left;
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right;
+}
+.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #f1c40f;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus {
+color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/
+}
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear;
+}
+.librevjs-libre-materialyellow-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000;
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #ffffff;
+background-color: rgb(241, 196, 14);
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+ background-color: #f1c40f;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialyellow-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff
+}
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none;
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto;
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em;
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.5em;
+text-align:center;
+margin-bottom:.1em;
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+.librevjs-libre-materialyellow-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible;
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:#f1c40f;
+background-color: inherit;
+}
+.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color:#f39c12;
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
diff --git a/librevideojs/css/material/master.css b/librevideojs/css/material/master.css
new file mode 100644
index 0000000..8aaa213
--- /dev/null
+++ b/librevideojs/css/material/master.css
@@ -0,0 +1,3069 @@
+/*!
+LibreVideoJS Estilos personalizados
+Version 1.4
+Escrito por Jesús Eduardo
+*/
+/* SKIN
+================================================================================
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'librevjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
+e.g. <video class="librevideo-js my-skin-name">
+*/
+/* Custom Icon Font
+--------------------------------------------------------------------------------
+The control icons are from a custom font. Each icon corresponds to a character
+(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons.
+*/
+/* Universal fonts */
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+/* Skins
+=========================================================================================================================*/
+/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialblue-skin {
+color:#ccc;
+background-color: inherit;
+}
+
+/* Base UI Component Classes
+------------------------------------------------------------------------------*/
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialblue-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialblue-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialblue-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialblue-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialblue-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialblue-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialblue-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before {
+color: #2196F3;
+}
+.librevjs-libre-materialblue-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialblue-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialblue-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(33, 150, 244);
+}
+.librevjs-libre-materialblue-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before {
+color:#2980b9; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialblue-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #2196F3 url() -50% 0 repeat;
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialblue-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialblue-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialblue-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialblue-skin .librevjs-play-progress {
+background: #2196F3 url() -50% 0 repeat;
+}
+.librevjs-libre-materialblue-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialblue-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialblue-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialblue-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialblue-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialblue-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialblue-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialblue-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialblue-skin .librevjs-big-play-button {
+  left: 50%;
+  top: 40%;
+  font-size: 10em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  color: #2196F3;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus {
+color: #0289f4; /*color boton focus*/
+}
+.librevjs-libre-materialblue-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialblue-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialblue-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+/* Same bottom as librevjs-menu border-top */
+max-height:15em;
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(11, 21, 42);
+background-color: rgb(33, 150, 244);
+}
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: rgb(11, 21, 42);
+background-color: #2196F3;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialblue-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialblue-skin .librevjs-hidden {
+display:none
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(33, 150, 244);
+background-color: inherit;
+}
+.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(11, 137, 237);
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Skin-Grey -------------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialgrey-skin {
+color:#ccc;
+background-color: inherit;
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialgrey-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialgrey-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialgrey-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialgrey-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialgrey-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialgrey-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before {
+color: #9e9e9e;
+}
+.librevjs-libre-materialgrey-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialgrey-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialgrey-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(158, 158, 158);
+}
+.librevjs-libre-materialgrey-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before {
+color:#7c7c7c; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialgrey-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #9e9e9e url() -50% 0 repeat;
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialgrey-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialgrey-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialgrey-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialgrey-skin .librevjs-play-progress {
+background: #9e9e9e url() -50% 0 repeat;
+}
+.librevjs-libre-materialgrey-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialgrey-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialgrey-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialgrey-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialgrey-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialgrey-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button {
+  left: 50%;
+  top: 40%;
+  font-size: 10em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  color: #9e9e9e;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus {
+color: rgb(115, 115, 115); /*color boton focus grey oscuro*/
+}
+.librevjs-libre-materialgrey-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialgrey-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+/* Same bottom as librevjs-menu border-top */
+max-height:15em;
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(158, 158, 158);
+}
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9e9e9e;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialgrey-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialgrey-skin .librevjs-hidden {
+display:none
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #737373;
+background-color: inherit;
+}
+.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: #9e9e9e;
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Skin-Purple -----------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialpurple-skin {
+color:#ccc;
+background-color: inherit;
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialpurple-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialpurple-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialpurple-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialpurple-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialpurple-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialpurple-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before {
+color: #9c27b0;
+}
+.librevjs-libre-materialpurple-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialpurple-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialpurple-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(156, 39, 176);
+}
+.librevjs-libre-materialpurple-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before {
+color:#8e44ad; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialpurple-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #9c27b0 url() -50% 0 repeat;
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialpurple-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialpurple-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialpurple-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialpurple-skin .librevjs-play-progress {
+background: #9c27b0 url() -50% 0 repeat;
+}
+.librevjs-libre-materialpurple-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialpurple-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialpurple-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialpurple-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialpurple-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialpurple-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button {
+  left: 50%;
+  top: 40%;
+  font-size: 10em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  color: #9c27b0;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus {
+color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/
+}
+.librevjs-libre-materialpurple-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialpurple-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+/* Same bottom as librevjs-menu border-top */
+max-height:15em;
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(156, 39, 176);
+}
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9c27b0;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialpurple-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialpurple-skin .librevjs-hidden {
+display:none
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #9c27b0;
+background-color: inherit;
+}
+.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: #8e44ad;
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Skin-Red --------------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialred-skin {
+color:#ccc;
+background-color: inherit;
+}
+
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialred-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialred-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialred-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialred-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialred-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialred-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialred-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before {
+color: #f44336;
+}
+.librevjs-libre-materialred-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialred-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialred-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(244, 67, 54);
+}
+.librevjs-libre-materialred-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialred-skin .librevjs-play-control:hover:before {
+color:#f22e1f; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialred-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialred-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #f44336 url() -50% 0 repeat;
+}
+.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialred-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialred-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialred-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialred-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialred-skin .librevjs-play-progress {
+background: #f44336 url() -50% 0 repeat;
+}
+.librevjs-libre-materialred-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialred-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialred-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialred-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialred-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialred-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialred-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialred-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialred-skin .librevjs-big-play-button {
+  left: 50%;
+  top: 40%;
+  font-size: 10em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  color: #f44336;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialred-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialred-skin .librevjs-big-play-button:focus {
+color: rgba(244, 67, 54, 0.89); /*color boton focus*/
+}
+.librevjs-libre-materialred-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialred-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialred-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+/* Same bottom as librevjs-menu border-top */
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(244, 67, 54);
+}
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #f44336;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialred-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialred-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialred-skin .librevjs-hidden {
+display:none
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: rgb(246, 44, 30);
+background-color: inherit;
+}
+.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(244, 67, 54);
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Skin-Teal -------------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialteal-skin {
+color:#ccc;
+background-color: inherit;
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialteal-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialteal-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialteal-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialteal-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialteal-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialteal-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialteal-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before {
+color: #1de9b6;
+}
+.librevjs-libre-materialteal-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialteal-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialteal-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before {
+color:#007c5d; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialteal-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #1de9b6 url() -50% 0 repeat;
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialteal-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialteal-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialteal-skin .librevjs-play-progress {
+background: #1de9b6 url() -50% 0 repeat;
+}
+.librevjs-libre-materialteal-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialteal-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialteal-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialteal-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #1abc9c;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus {
+color: #16a085;
+}
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialteal-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+/* Same bottom as librevjs-menu border-top */
+max-height:15em;
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(1, 56, 47);
+background-color: rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #004d40;
+background-color: #1de9b6;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialteal-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialteal-skin .librevjs-hidden {
+display:none
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(26, 187, 156);
+background-color: inherit;
+}
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(29, 233, 182);
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/
+.librevjs-libre-materialyellow-skin {
+color:#ccc;
+background-color: inherit;
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-materialyellow-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialyellow-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialyellow-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.librevjs-libre-materialyellow-skin .librevjs-control-bar {
+/* Start hidden */
+display: none;
+position: absolute;
+/* Place control bar at the bottom of the player box/video.
+   If you want more margin below the control bar, add more height. */
+bottom: 0;
+/* Use left/right to stretch to 100% width of player div */
+left: 0;
+right: 0;
+/* Height includes any margin you want above or below control items */
+height: 3.0em;
+/* background-color-with-alpha */
+background-color: #232323;
+background-color: rgba(35, 35, 35, 0.8);
+}
+/* Show the control bar only once the video has started playing */
+.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+/* Hide the control bar when the video is playing and the user is inactive */
+.librevjs-libre-materialyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-materialyellow-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+/* FreeArt button icons: http://artlibre.org/licence/lal */
+.librevjs-libre-materialyellow-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before {
+color: #f1c40f;
+}
+.librevjs-libre-materialyellow-skin .librevjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
+}
+/* Hide control text visually, but have it available for screenreaders */
+.librevjs-libre-materialyellow-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialyellow-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(241, 196, 14);
+}
+.librevjs-libre-materialyellow-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before {
+color:#f39c12; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-materialyellow-skin .librevjs-volume-level {
+position: absolute;
+top: 0;
+left: 0;
+height: 0.5em;
+/* assuming volume starts at 1.0 */
+
+width: 100%;
+background: #f1c40f url() -50% 0 repeat;
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialyellow-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialyellow-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+/* Box containing play and load progress. Also acts as seek scrubber. */
+.librevjs-libre-materialyellow-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-materialyellow-skin .librevjs-play-progress {
+background: #f1c40f url() -50% 0 repeat;
+}
+.librevjs-libre-materialyellow-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialyellow-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialyellow-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialyellow-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialyellow-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialyellow-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer by LibreVideoJS FreeArts.
+*/
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button {
+  left: 50%;
+  top: 40%;
+  font-size: 10em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  color: #f1c40f;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-big-play-button {
+display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+   by default on mobile  */
+.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus {
+color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/
+}
+.librevjs-libre-materialyellow-skin .librevjs-big-play-button:before {
+content: "\e007";
+font-family: LibreVideoJS;
+/* In order to center the play icon vertically we need to set the line height
+   to the same as the button height */
+text-align: center /* Needed for IE8 */;
+position: absolute;
+left: 0;
+width: 100%;
+height: 100%;
+}
+
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-materialyellow-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+/* Button Pop-up Menu */
+.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+/* Same bottom as librevjs-menu border-top */
+max-height:15em;
+overflow:auto;
+left:-5em;
+/* Width of menu - width of button / 2 */
+/* background-color-with-alpha */
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(241, 196, 14);
+}
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #f1c40f;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+/* Subtitles Button */
+.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-materialyellow-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+-webkit-box-shadow:0 0 1em #fff;
+-moz-box-shadow:0 0 1em #fff;
+box-shadow:0 0 1em #fff;
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-materialyellow-skin .librevjs-hidden {
+display:none
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #f1c40f;
+background-color: inherit;
+}
+.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: #f39c12;
+background-color: inherit;
+}
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+/* Global Styles
+==============================================================================*/
+/* Global Time-Display */
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Global Big-Play-Button-(play-button-at-start) */
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* Global Loading Spinner */
+.librevjs-loading-spinner {
+display:none;
+position:absolute;
+top:50%;
+left:50%;
+font-size:4em;
+line-height:1;
+width:1em;
+height:1em;
+margin-left:-.5em;
+margin-top:-.5em;
+opacity:.75;
+-webkit-animation:spin 1.5s infinite linear;
+-moz-animation:spin 1.5s infinite linear;
+-o-animation:spin 1.5s infinite linear;
+animation:spin 1.5s infinite linear
+}
+.librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+/*
+REQUIRED STYLES (be careful overriding)
+================================================================================
+When loading the player, the video tag is replaced with a DIV,
+that will hold the video tag or object tag for other playback methods.
+The div contains the video playback element (HTML5) and controls,
+and sets the width and height of the video.
+** If you want to add some kind of border/padding (e.g. a frame), or special
+positioning, use another containing element. Otherwise you risk messing up
+control positioning and full window mode. **
+*/
+.cliplibre-js {
+background-color:#000;
+position:relative;
+padding:0;
+font-size:10px;
+vertical-align:middle;
+font-weight:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+/* Playback technology elements expand to the width/height of the containing div <video> */
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+/* Fullscreen Styles */
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto;
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+/* Poster Styles */
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+/* Hide the poster when native controls are used otherwise it covers them */
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+/* Individual tracks */
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.7em;
+text-align:center;
+margin-bottom:.1em;
+/* Transparent black background, or fallback to all black (oldIE) */
+background-color:#000;
+background-color:rgba(0,0,0,.6)
+}
+.cliplibre-js .librevjs-subtitles {
+color:#fff
+}
+.cliplibre-js .librevjs-captions {
+color:rgb(255, 237, 0);
+background-color: rgba(2, 7, 11, 0.7);
+}
+.librevjs-tt-cue {
+display:block
+}
+/* Global Hide disabled or unsupported controls */
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+/* Opctional Styles No support HTML5*/
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+/* Global Responsive
+------------------------------------------------------------------------------*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 600px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 1.2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 2em;
+ }
+}
+@media screen and (max-width: 413px){
+  .cliplibre-js {
+    font-size:8px;
+  }
+}
+@media screen and (max-width: 400px){
+ .cliplibre-js .librevjs-text-track{
+ font-size: 0.9em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
diff --git a/librevideojs/css/quality-selector.css b/librevideojs/css/quality-selector.css
new file mode 100644
index 0000000..112c1fb
--- /dev/null
+++ b/librevideojs/css/quality-selector.css
@@ -0,0 +1,34 @@
+/*!
+LibreVideoJS Selector
+Version 1.4
+Escrito por Jesús Eduardo
+*/
+@charset "utf-8";
+/*
+You are free to style the button however you wish. I plan to use
+an icon from my site's own icon font to make it more visible. These
+are just basic styles to make it look ok with plain text.
+*/
+
+/* Position the button */
+.librevjs-res-button {
+	font-weight: bold;
+	float: right;
+	line-height: 3em;
+}
+
+/* Don't show hover effects on title */
+ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
+	cursor: default;
+	background-color: transparent;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+/* Needed to keep text visible in video.js 4.9 */
+.librevjs-res-button .librevjs-control-text {
+	width: auto;
+	height: auto;
+	clip: auto;
+}