@charset "utf-8";
/* CSS Document */
*{
   margin:0px;
   padding:0px;
}

body{
   background:url("../../img/imagen/c1_borrosa.jpg") no-repeat fixed center center #333333;
   background-size:cover;
}

#contenedor{
   width:100%;
   margin: 0px auto;
   position: absolute;
   height: 100%;
}

#cuerpo{
   width:98%;
   height:69.5%;
   margin-left:0.05%;
   border: 1px solid silver;
}

#pie{
   width:99.9%;
   height:10%;
   margin-left:0.05%;
}

#izq{
   width:25%;
   height:95%;
   float:left;

   /*opacity: 0.60;*/
}

#der{
   width:74.5%;
   height:95%;
   float:left;
   margin-left:0;
   margin-top:.8%;

}

#ContenedoIzq{
   height:90%;
   width:100%;
   position:relative;
   margin-top:3%;
   box-shadow: 1px 1px 5px 0px #000; 
   border-right:2px solid silver;
   border-bottom:2px solid silver;

}

#ContenedoIzq:hover {
   height:90%;
   width:200%;
   position:relative;
   margin-top:3%;
   background:#001999;
   opacity: 0.9;
   color:#000000;
   border-bottom:2px solid #CCCCCC;
   border-right:2px solid #CCCCCC;
   border-top:1px solid #999999;
   border-left:1px solid #999999;
   box-shadow: 3px 3px 5px #666666;
   transition:0.5s;
}

#DivVideo{
   left:20%;
   top: 0;
}

#DivBotones{
    height:10%;
    width:100%;
}

.divFloat{
   float:left;
   width:25%;
   height: 100%;
}

.boton{
   margin-top: 10%;
   border-radius:100%;
   border-color:#F8CA6B;
   background-color:#0E4FE7;
   width:46%;
   height:78%; 
   box-shadow: 5px 5px 10px #000; 
}

.boton:hover{
   margin-top: 8%;
   border-radius:100%;
   border-color:#ffffff;
   background-color:#FF0000;
   width:54%;
   height:88%; 
   transition:0.5s;
}

.ComboNivel{
  margin-top: 12%;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFFFFF;
}


#TituloVideo{
   font-family: Arial, Helvetica, sans-serif;
   font-size:4vh;
   color:#FFFFFF;
   padding:4px;
   text-shadow: 3px 3px 2px #000000;
}

#tooltip{
  position: fixed;
  display: block;
  opacity: 0;
  visibility: hidden;
  background: #0019A6;
  border-radius: 2px;
  color: #EDE900;
  font-family: Arial;
  font-size: 12px;
  padding: 2px 2px;
  border: 1px solid #000;
}

#ContenedoIzq:hover #tooltip{
  opacity: .7;
  visibility: visible;
}

#RepodVid{
  border: 1px solid black;
  box-shadow: 5px 5px 5px 0px rgba(256, 256, 256, 1); 
}

#ActivarSonido{
  opacity: 0;
  visibility: hidden;
  position: fixed;
  display: block;
  background: #000000;
  border-radius: 2px;
  color: #EDE900;
  border: 1px solid #000;
  width:100%;
  height:100%;
  opacity: .9;
  font-family: Arial;
}

.boton2{
   top:-5%;
   margin-top: 18%;
   margin-left:44%;
   position:fixed;
   border-radius:10%;
   border-color:#FFFFFF;
   background-color:#4F0003;
   width:230px;
   height:280px; 
   box-shadow: 5px 5px 10px #fff; 
   opacity: 1;
   color:#D9CF13;
   font-size:16px;
   font-weight: bold;
   font-family: Arial;
}

.boton2M{
   margin-top: 18%;
   margin-left:44%;
   position:fixed;
   border-radius:10%;
   border-color:#FFFFFF;
   background-color:#4F0003;
   width:230px;
   height:280px; 
   box-shadow: 5px 5px 10px #fff; 
   opacity: 1;
   color:#D9CF13;
   font-size:16px;
   font-weight: bold;
   font-family: Arial;
}

.boton2:hover {
   margin-top: 17.5%;
   margin-left:43.5%;
   position:fixed;
   border-radius:10%;
   border-color:#FFFFFF;
   background-color:#333333;
   width:250px;
   height:300px;
   box-shadow: 5px 5px 10px #fff; 
   opacity: 1;
   color:#D9CF13;
   font-size:29px;
   font-weight: bold;
   font-family: Arial;
}

#Mensaje{
  opacity: 0;
  visibility: hidden;
  position: fixed;
  display: block;
  background: #FFF979;
  border-radius: 6px;
  color: #003BA3;
  border: 2px solid #000;
  width:13%;
  height:7%;
  font-family: Arial;
  font-size: 1.5vh;
  padding:.6%;
  bottom: 18%;
  left:3%;
  text-shadow: 2px 2px 2px #888888;
  box-shadow: 3px 3px 3px #fff;
  font-weight:bold;
}
/************************************************************/
@media all and (orientation: landscape) { 
  .boton2M {
     position:absolute;
     top:-45%;
  }

}

@media all and (orientation: portrait) { 
  .boton2M {
     position:fixed;
     top:25%;
  }