12 files changed, 4506 insertions, 0 deletions
diff --git a/librevideojs/css/mix-material/mix-blue.css b/librevideojs/css/mix-material/mix-blue.css
new file mode 100644
index 0000000..e5489f9
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-blue.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Blue
+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.
+*/
+.librevjs-libre-mixblue-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-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-mixblue-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-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before {
+color: #2196F3;
+}
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(33, 150, 244);
+}
+.librevjs-libre-mixblue-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before {
+color:#2980b9; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixblue-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixblue-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixblue-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-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixblue-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixblue-skin .librevjs-play-progress {
+background: #2196F3 url() -50% 0 repeat;
+}
+.librevjs-libre-mixblue-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixblue-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixblue-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixblue-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixblue-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixblue-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixblue-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixblue-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixblue-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-mixblue-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixblue-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-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: #2196F3; /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixblue-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixblue-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixblue-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixblue-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(11, 21, 42);
+background-color: rgb(33, 150, 244);
+}
+.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixblue-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-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;
+}
+/*
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixblue-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(33, 150, 244);
+background-color: inherit;
+}
+.librevjs-libre-mixblue-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-blue.min.css b/librevideojs/css/mix-material/mix-blue.min.css
new file mode 100644
index 0000000..3946cfb
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-blue.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Blue
+Version 1.4
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixblue-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-mixblue-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixblue-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixblue-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixblue-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixblue-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixblue-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixblue-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)}.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before{color:#2196f3}.librevjs-libre-mixblue-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixblue-skin .librevjs-play-control{width:5em;cursor:pointer;color:#2196f4}.librevjs-libre-mixblue-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before{color:#2980b9}.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixblue-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixblue-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixblue-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#2196f3 url() -50% 0 repeat}.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixblue-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixblue-skin .librevjs-play-progress{background:#2196f3 url() -50% 0 repeat}.librevjs-libre-mixblue-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixblue-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixblue-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixblue-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixblue-skin .librevjs-current-time{float:left}.librevjs-libre-mixblue-skin .librevjs-duration{float:left}.librevjs-libre-mixblue-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixblue-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixblue-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button,.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#2196f3;color:#fff}.librevjs-libre-mixblue-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixblue-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-mixblue-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixblue-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}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected{color:#0b152a;background-color:#2196f4}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#0b152a;background-color:#2196f3}.librevjs-libre-mixblue-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-mixblue-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixblue-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixblue-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}.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#2196f4;background-color:inherit}.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#0b89ed;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file
diff --git a/librevideojs/css/mix-material/mix-grey.css b/librevideojs/css/mix-material/mix-grey.css
new file mode 100644
index 0000000..a3b5481
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-grey.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Grey
+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.
+*/
+.librevjs-libre-mixgrey-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-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-mixgrey-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-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before {
+color: #9e9e9e;
+}
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(158, 158, 158);
+}
+.librevjs-libre-mixgrey-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before {
+color:#7c7c7c; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixgrey-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixgrey-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixgrey-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-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixgrey-skin .librevjs-play-progress {
+background: #9e9e9e url() -50% 0 repeat;
+}
+.librevjs-libre-mixgrey-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixgrey-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixgrey-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixgrey-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixgrey-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixgrey-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixgrey-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-mixgrey-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixgrey-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-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: rgb(115, 115, 115); /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixgrey-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixgrey-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixgrey-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(158, 158, 158);
+}
+.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9e9e9e;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-mixgrey-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-mixgrey-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixgrey-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-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;
+}
+/*
+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;
+background-color:#000;
+/* Transparent black background, or fallback to all black (oldIE) */
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixgrey-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #737373;
+background-color: inherit;
+}
+.librevjs-libre-mixgrey-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-grey.min.css b/librevideojs/css/mix-material/mix-grey.min.css
new file mode 100644
index 0000000..8afb33f
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-grey.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Grey
+Version 1.4
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixgrey-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-mixgrey-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixgrey-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixgrey-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixgrey-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixgrey-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixgrey-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)}.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before{color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixgrey-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before{color:#7c7c7c}.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixgrey-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixgrey-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixgrey-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixgrey-skin .librevjs-play-progress{background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-mixgrey-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixgrey-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixgrey-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixgrey-skin .librevjs-current-time{float:left}.librevjs-libre-mixgrey-skin .librevjs-duration{float:left}.librevjs-libre-mixgrey-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixgrey-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button,.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#737373;color:#fff}.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixgrey-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-mixgrey-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixgrey-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}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9e9e9e}.librevjs-libre-mixgrey-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-mixgrey-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixgrey-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixgrey-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}.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#737373;background-color:inherit}.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#9e9e9e;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file
diff --git a/librevideojs/css/mix-material/mix-purple.css b/librevideojs/css/mix-material/mix-purple.css
new file mode 100644
index 0000000..6fd7398
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-purple.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Purple
+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.
+*/
+.librevjs-libre-mixpurple-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-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-mixpurple-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-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before {
+color: #9c27b0;
+}
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(156, 39, 176);
+}
+.librevjs-libre-mixpurple-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before {
+color:#8e44ad; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixpurple-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixpurple-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixpurple-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-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixpurple-skin .librevjs-play-progress {
+background: #9c27b0 url() -50% 0 repeat;
+}
+.librevjs-libre-mixpurple-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixpurple-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixpurple-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixpurple-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixpurple-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixpurple-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixpurple-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-mixpurple-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixpurple-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-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: rgb(142, 68, 173); /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixpurple-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixpurple-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixpurple-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(156, 39, 176);
+}
+.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #9c27b0;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-mixpurple-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-mixpurple-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixpurple-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-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;
+}
+/*
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixpurple-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #9c27b0;
+background-color: inherit;
+}
+.librevjs-libre-mixpurple-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-purple.min.css b/librevideojs/css/mix-material/mix-purple.min.css
new file mode 100644
index 0000000..759129a
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-purple.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Purple
+Version 1.4
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixpurple-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-mixpurple-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixpurple-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixpurple-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixpurple-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixpurple-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixpurple-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)}.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before{color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixpurple-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before{color:#8e44ad}.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixpurple-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixpurple-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixpurple-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixpurple-skin .librevjs-play-progress{background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-mixpurple-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixpurple-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixpurple-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixpurple-skin .librevjs-current-time{float:left}.librevjs-libre-mixpurple-skin .librevjs-duration{float:left}.librevjs-libre-mixpurple-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixpurple-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button,.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#8e44ad;color:#fff}.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixpurple-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-mixpurple-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixpurple-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}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9c27b0}.librevjs-libre-mixpurple-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-mixpurple-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixpurple-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixpurple-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}.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#9c27b0;background-color:inherit}.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#8e44ad;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file
diff --git a/librevideojs/css/mix-material/mix-red.css b/librevideojs/css/mix-material/mix-red.css
new file mode 100644
index 0000000..7f5831a
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-red.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Red
+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.
+*/
+.librevjs-libre-mixred-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixred-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-mixred-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-mixred-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-mixred-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-mixred-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before {
+color: #f44336;
+}
+.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(244, 67, 54);
+}
+.librevjs-libre-mixred-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixred-skin .librevjs-play-control:hover:before {
+color:#f22e1f; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixred-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixred-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixred-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-mixred-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixred-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixred-skin .librevjs-play-progress {
+background: #f44336 url() -50% 0 repeat;
+}
+.librevjs-libre-mixred-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixred-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixred-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixred-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixred-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixred-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixred-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixred-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixred-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-mixred-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixred-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-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixred-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixred-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: #f12b24; /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixred-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixred-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixred-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixred-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(244, 67, 54);
+}
+.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #f44336;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-mixred-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-mixred-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixred-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-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;
+}
+/*
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixred-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: rgb(246, 44, 30);
+background-color: inherit;
+}
+.librevjs-libre-mixred-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-red.min.css b/librevideojs/css/mix-material/mix-red.min.css
new file mode 100644
index 0000000..c02a41c
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-red.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Red
+Version 1.4
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixred-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-mixred-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixred-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixred-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixred-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixred-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixred-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-mixred-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-mixred-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixred-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixred-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)}.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before{color:#f44336}.librevjs-libre-mixred-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixred-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f44336}.librevjs-libre-mixred-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixred-skin .librevjs-play-control:hover:before{color:#f22e1f}.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixred-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixred-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixred-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixred-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixred-skin .librevjs-play-progress{background:#f44336 url() -50% 0 repeat}.librevjs-libre-mixred-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixred-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixred-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixred-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixred-skin .librevjs-current-time{float:left}.librevjs-libre-mixred-skin .librevjs-duration{float:left}.librevjs-libre-mixred-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixred-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixred-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin:hover .librevjs-big-play-button,.librevjs-libre-mixred-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#f12b24;color:#fff}.librevjs-libre-mixred-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixred-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-mixred-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixred-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}.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f44336}.librevjs-libre-mixred-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-mixred-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixred-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixred-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}.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f62c1e;background-color:inherit}.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f44336;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file
diff --git a/librevideojs/css/mix-material/mix-teal.css b/librevideojs/css/mix-material/mix-teal.css
new file mode 100644
index 0000000..4bbf8e1
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-teal.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Teal
+Version 1.2
+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.
+*/
+.librevjs-libre-mixteal-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-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-mixteal-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-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before {
+color: #1de9b6;
+}
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(29, 233, 182);
+}
+.librevjs-libre-mixteal-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before {
+color:#007c5d; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixteal-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixteal-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixteal-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-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixteal-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixteal-skin .librevjs-play-progress {
+background: #1de9b6 url() -50% 0 repeat;
+}
+.librevjs-libre-mixteal-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixteal-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixteal-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixteal-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixteal-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixteal-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixteal-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixteal-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixteal-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-mixteal-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixteal-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-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: #1de9b6; /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixteal-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixteal-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixteal-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixteal-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(1, 56, 47);
+background-color: rgb(29, 233, 182);
+}
+.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #004d40;
+background-color: #1de9b6;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-mixteal-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-mixteal-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixteal-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-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;
+}
+/*
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixteal-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(26, 187, 156);
+background-color: inherit;
+}
+.librevjs-libre-mixteal-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-teal.min.css b/librevideojs/css/mix-material/mix-teal.min.css
new file mode 100644
index 0000000..229b505
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-teal.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Teal
+Version 1.2
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixteal-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-mixteal-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixteal-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixteal-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixteal-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixteal-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixteal-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixteal-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)}.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before{color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixteal-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixteal-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixteal-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixteal-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixteal-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixteal-skin .librevjs-play-progress{background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-mixteal-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixteal-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixteal-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixteal-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixteal-skin .librevjs-current-time{float:left}.librevjs-libre-mixteal-skin .librevjs-duration{float:left}.librevjs-libre-mixteal-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixteal-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixteal-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button,.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#1de9b6;color:#fff}.librevjs-libre-mixteal-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixteal-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-mixteal-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixteal-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}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#004d40;background-color:#1de9b6}.librevjs-libre-mixteal-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-mixteal-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixteal-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixteal-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}.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1abb9c;background-color:inherit}.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file
diff --git a/librevideojs/css/mix-material/mix-yellow.css b/librevideojs/css/mix-material/mix-yellow.css
new file mode 100644
index 0000000..06357b7
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-yellow.css
@@ -0,0 +1,746 @@
+/*!
+LibreVideoJS Estilos personalizados = Yellow
+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.
+*/
+.librevjs-libre-mixyellow-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");
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+/* Slider - used for Volume bar and Seek bar */
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-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-mixyellow-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-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+/* General styles for individual controls. */
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before {
+color: #f1c40f;
+}
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(241, 196, 14);
+}
+.librevjs-libre-mixyellow-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before {
+color:#f39c12; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-mixyellow-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-mixyellow-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*Personalización del nivel de volumen*/
+.librevjs-libre-mixyellow-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-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-progress-holder {
+height:100%;
+}
+/* Progress Bars */
+.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress {
+position:absolute;
+display:block;
+height:100%;
+margin:0;
+padding:0;
+left:0;
+top:0
+}
+.librevjs-libre-mixyellow-skin .librevjs-play-progress {
+background: #f1c40f url() -50% 0 repeat;
+}
+.librevjs-libre-mixyellow-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-mixyellow-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixyellow-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-mixyellow-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-mixyellow-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-mixyellow-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.librevjs-libre-mixyellow-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-mixyellow-skin .librevjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -1.85em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.3em;
+  font-size: 2em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 3.8em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #232323;
+  background-color: rgba(35, 35, 35, 0.8);
+  border: 0 solid ;
+  /* border-radius */
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  border-radius: 0.4em;
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-mixyellow-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-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button,
+.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus {
+outline: 0;
+cursor: pointer;
+/* IE8 needs a non-glow hover state */
+background-color: rgb(244, 156, 18); /*color del boton play al hacer focus*/
+color: #FFFFFF;
+}
+.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before {
+content: "\e001";
+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 */
+   line-height: 2.6em;
+   text-shadow: 0.05em 0.05em 0.1em #000;
+   text-align: center /* Needed for IE8 */;
+   position: absolute;
+   left: 0;
+   width: 100%;
+   height: 100%;
+}
+.librevjs-error .librevjs-big-play-button {
+display: none;
+}
+/* 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-libre-mixyellow-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)
+   }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.librevjs-libre-mixyellow-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-mixyellow-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;
+}
+
+/* Select color menu subtitles/captions */
+.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected {
+color: #fff;
+background-color: rgb(241, 196, 14);
+}
+.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #fff;
+background-color: #f1c40f;
+}
+/*End Select color menu subtitles/caption */
+.librevjs-libre-mixyellow-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-mixyellow-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+/* Captions Button */
+.librevjs-libre-mixyellow-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+/* Replacement for focus outline */
+.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-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;
+}
+/*
+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
+}
+/* Hide disabled or unsupported controls */
+.librevjs-libre-mixyellow-skin .librevjs-hidden {
+display:none
+}
+.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;
+}
+
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color: #f1c40f;
+background-color: inherit;
+}
+.librevjs-libre-mixyellow-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: 800px){
+  .cliplibre-js .librevjs-text-track{
+    font-size: 1.5em;
+    margin-bottom: -0.2em;
+  }
+}
+@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: 1em;
+ }
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
diff --git a/librevideojs/css/mix-material/mix-yellow.min.css b/librevideojs/css/mix-material/mix-yellow.min.css
new file mode 100644
index 0000000..2fdcee3
--- /dev/null
+++ b/librevideojs/css/mix-material/mix-yellow.min.css
@@ -0,0 +1,5 @@
+/*!
+LibreVideoJS Estilos personalizados = Yellow
+Version 1.4
+Escrito por Jesús Eduardo
+*/.librevjs-libre-mixyellow-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-mixyellow-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixyellow-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixyellow-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixyellow-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixyellow-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixyellow-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)}.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before{color:#f1c40f}.librevjs-libre-mixyellow-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixyellow-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f1c40e}.librevjs-libre-mixyellow-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before{color:#f39c12}.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixyellow-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixyellow-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixyellow-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f1c40f url() -50% 0 repeat}.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixyellow-skin .librevjs-play-progress{background:#f1c40f url() -50% 0 repeat}.librevjs-libre-mixyellow-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixyellow-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixyellow-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixyellow-skin .librevjs-current-time{float:left}.librevjs-libre-mixyellow-skin .librevjs-duration{float:left}.librevjs-libre-mixyellow-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixyellow-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button,.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#f49c12;color:#fff}.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-mixyellow-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-mixyellow-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixyellow-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}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f1c40e}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f1c40f}.librevjs-libre-mixyellow-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-mixyellow-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixyellow-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-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.7em;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-mixyellow-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}.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f1c40f;background-color:inherit}.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f39c12;background-color:inherit}.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:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@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:1em}.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:1.4em}}
+\ No newline at end of file