/*  STYLE PLAYERS   */


@import 'https://fonts.googleapis.com/css?family=Amaranth:regular,400italic,700,700italic';

.on{
font-family: 'Amaranth', sans-serif;
color: #fff;
text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 5px 5px 10px #00f0ff, -5px -5px 10px #00f0ff;
}

.off{
font-family: 'Amaranth', sans-serif;
color: #c7c7c7;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 8px 7px #001135;
}
    .st1-vol {
        overflow: hidden; cursor: pointer;
        border: 2px solid #00f0ff; border-radius: 9px;
        color:  #fff ;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
       text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 8px 7px #001135;
    }
    .st1-vol:active {
        overflow: hidden; cursor: pointer;
        border: 2px solid #00f0ff; border-radius: 9px;
        color:  #00f0ff ;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
       text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 4px 4px #001135;
    }
    
        st1-active {
        overflow: hidden; cursor: pointer;
        border: 2px solid #00f0ff; border-radius: 9px;
        color:  #00f0ff ;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
       text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 4px 4px #001135;
    }
    
    .st1-button {
        overflow: hidden; cursor: pointer;
        border: 2px solid white; border-radius: 9px;
        color:  #00f0ff ;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
       text-shadow:  1px 1px 2px black, -1px -1px 2px black;
       box-shadow: 2px 2px 9px #00f0ff, -2px -2px 9px #00f0ff; 
    }
    .st1-buttpause {
        overflow: hidden; cursor: pointer;
        border: 2px solid white; border-radius: 9px;
        color:  #ebebeb ;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
       text-shadow:  1px 1px 2px black, -1px -1px 2px black;
       box-shadow: 1px 1px 6px #00f0ff, -1px -1px 6px #00f0ff; 
    }
    .st1-buttoff {
        overflow: hidden; cursor: pointer;
        border: 2px solid #c7c7c7; border-radius: 9px;
        color: #FFFFFF;
        height:2em;
       padding: 1% 2%;
       margin-right: 2%;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 8px 7px #001135;
    }

/*  FIN STYLE PLAYER  */

/* LOGO Y FONDO */

  #logo { 
      width: 50%;
      margin:3em auto;  }
  
 @media (min-device-width: 700px) and (orientation: landscape)  {
  #logo { z-index:100;
   width: 25%; /* notebook */
  }
}
@media (max-device-width: 700px) {
  #logo {
   width: 40%; /* moviles */
  }
  body {
    background-position:top;
    -webkit-background-size:300% auto;
    -moz-background-size: 300% auto;
    background-size: 300% auto;
    -o-background-size: 300% auto;
     background-color: #222;
}
}
/* FIN LOGO Y FONDO */