* {margin:0;}

a, a:hover

        {

        text-decoration: none; color: white;
        cursor: url(../icon/pointerlink.png), pointer;
       
        }
h1
        {

        font-weight: 800;
        font-size: 8vh;
        line-height: 6vh;
        color: #fff;
        letter-spacing: 0.585vw;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
        
        }

body

        {

        font-family: Helvetica,Arial,Verdana,sans-serif;
        background-color: #000;
        cursor: url(../icon/pointer.png), pointer;
        color: white;
       
        }
h4
        {

        font-weight: 400;
        font-size: 3vh;
        color: #fff;
        letter-spacing: 0.55vw;
        text-shadow: 0.05vw 0.05vw 1vh #000, -0.05vw -0.05vw 1vh #000, 0.05vw -0.05vw 1vh #000, -0.05vw 0.05vw 1vh #000;
        opacity: 1;
        line-height: 7vh;

                }
h3
    {
        font-weight: 600;
        font-size: 3vh;
        letter-spacing: 0.1vw;
        color: #fff;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
    } 


p
        {

        font-weight: 400;
        font-size: 1.9vh;
        color: #fff;
        letter-spacing: 0.25vw;
        text-shadow: 0.05vw 0.05vw 1vh #000, -0.05vw -0.05vw 1vh #000, 0.05vw -0.05vw 1vh #000, -0.05vw 0.05vw 1vh #000;
        opacity: 0.8;

                }

h2
    {
        font-weight: 600;
        line-height: 3vh;
        font-size: 2.8vh;
        letter-spacing: 0.1vw;
        color: #E4862A;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
    }        
        /* FIN GENERALES*/

        /* MIOS */
    
div#hh2 
        
       {
       
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;

       }

div#c_habprincipal { position: fixed; top: 47vh; right: 47vw; z-index: 21; width: 6vw; height: 5vh; 
                    transition: all 0.3s ease-in-out;}
.hache {transition:all 0.8s ease;}
.botonimg {width: 50vw; height: 50vh;transition:all 0.5s ease;overflow: hidden;}
.botonvid {-webkit-transform:scale(1.02);transform:scale(1.02); ;width: 50vw; height: 50vh; transition:all 0.5s ease;overflow: hidden;}



a:hover .botonimg {-webkit-transform:scale(1.01);transform:scale(1.01); transition:all 0.5s ease;} 
a:hover .botonvid {-webkit-transform:scale(1.03);transform:scale(1.03); transition:all 0.5s ease;} 


a:hover #hostal {top:25vh;}
a:hover #hostal2 {top:25vh;} 
a:hover #hostal3 {bottom:20vh;} 
a:hover #hostal4 {bottom:20vh;} 


a:hover #cuadrado {opacity: 0; width:2.5vw; height:4vh; left: 24vw; top: 24.2vh;}
a:hover #cuadrado2 {opacity: 0; width:2.5vw; height:4vh; left: 76vw; top:24.2vh;}
a:hover #cuadrado3 {opacity: 0; width:2.5vw; height:4vh; left: 24vw; top: 76vh;}
a:hover #cuadrado4 {opacity: 0; width:2.5vw; height:4vh; left: 76vw; top: 76vh;}


a:hover .hache {text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;} 

div#imagen1 {width:auto; height: auto;overflow: hidden; position: absolute; top:0; left: 0;}
div#imagen2 {width:auto; height: auto;overflow: hidden; position: absolute; top:0; left: 50vw;}
div#imagen3 {width:auto; height: auto;overflow: hidden; position: absolute; top: 50vh; left: 0;}
div#imagen4 {width:auto; height: auto;overflow: hidden; position: absolute; top: 50vh; left: 50vw;}


          
div#hostal {position: absolute; top: 30vh; left: 17vw;opacity: 1; z-index: 20; transition: all 0.3s ease-in-out;}
div#hostal2 {;position: absolute; top: 30vh; left: 67.5vw; opacity: 1; z-index: 20; transition: all 0.3s ease-in-out;}
div#hostal3 {position: absolute; bottom: 15vh; left: 19.5vw; opacity: 1; z-index: 20; transition: all 0.3s ease-in-out;}
div#hostal4 {position: absolute; bottom: 15vh; left: 70.5vw; opacity: 1; z-index: 20; transition: all 0.3s ease-in-out;}

.video {width: 100%;height: 100%;filter: grayscale(0%);-webkit-filter: grayscale(0%);transition:all .3s ease;}


div#cuadrado {color:transparent;position: absolute; top: 0vh; left: 0vw; z-index: 20 ;width: 49.9vw; height: 49.9vh; border-width: 0.1vw; 
  border-style: solid; border-color: #000; transition: all 0.3s ease-in-out;opacity: 1 ;box-shadow: 0vw 0.5vw 5vw #000;
        -webkit-box-shadow: 0vw 0.5vw 5vw #000;
        -moz-box-shadow: 0vw 0.5vw 5vw #000;}

div#cuadrado2 {color:transparent;position: absolute; top: 0vh; left: 50vw; z-index: 20 ;width: 49.9vw; height: 49.9vh; border-width: 0.1vw; 
  border-style: solid; border-color: #000;transition: all 0.3s ease-in-out;opacity: 1 ;box-shadow: 0vw 0.5vw 5vw #000;
        -webkit-box-shadow: 0vw 0.5vw 5vw #000;
        -moz-box-shadow: 0vw 0.5vw 5vw #000;}

div#cuadrado3 {color:transparent;position: absolute; top: 50.2vh; left: 0vw; z-index: 20 ;width: 49.9vw; height: 49.9vh; border-width: 0.1vw; 
  border-style: solid; border-color: #000;transition: all 0.3s ease-in-out;opacity: 1 ;box-shadow: 0vw 0.5vw 5vw #000;
        -webkit-box-shadow: 0vw 0.5vw 5vw #000;
        -moz-box-shadow: 0vw 0.5vw 5vw #000;}

div#cuadrado4 {color:transparent;position: absolute; top: 50.2vh; left: 50vw; z-index: 20 ;width: 49.9vw; height: 49.9vh; border-width: 0.1vw; 
  border-style: solid; border-color: #000;transition: all 0.3s ease-in-out;opacity: 1 ;box-shadow: 0vw 0.5vw 5vw #000;
        -webkit-box-shadow: 0vw 0.5vw 5vw #000;
        -moz-box-shadow: 0vw 0.5vw 5vw #000;}
/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important; 
}
/* SECCION HABITACIONES */

div#hseccion {
       
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;
       }
       div#cuadrofotos {position:absolute; top: 30vh;right: 7vw;left: 7vw;bottom: 10vh; text-align: center;}
       .fotopaisaje {width: 16vw; height: 20vh; border-style: solid; border-color: #fff; border-width: 0.2vw;filter: grayscale(0%); -webkit-filter: grayscale(0%);transition:all 0.5s ease;}
       .fotoretrato {width: 8vw; height: 20vh; border-style: solid; border-color: #fff; border-width: 0.2vw;filter: grayscale(0%); -webkit-filter: grayscale(0%);transition:all 0.5s ease;}
       .fotopaisaje:hover {filter: grayscale(100%); -webkit-filter: grayscale(100%);transition:all 0.5s ease;}
       .fotoretrato:hover {filter: grayscale(100%); -webkit-filter: grayscale(100%);transition:all 0.5s ease;}
       div#icono {position: fixed; top: 81vh; right: 47vw}
       div#icono:hover {top:80.5vh}
/* PRIMERA IMAGEN HABITACION */

div#hh3 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }




       .img_hab {width: auto; height: 100%;}


       
       div#c_habmas {position: absolute; top: 85vh; right: 41vw; z-index: 21; transition: all 0.3s ease-in-out;}
       div#c_hab { position: absolute; top: 87vh; right: 46.9vw; z-index: 21; width: 6vw; height: 5vh; 
                    transition: all 0.3s ease-in-out;}
       div#c_habmenos {position: absolute; top: 85vh; left: 41vw; z-index: 21; width: 3vw; height: 5vh; 
                      transition: all 0.3s ease-in-out;}
        div#logo {transition: all 0.3s ease-in-out;}
                  

     
      div#c_habmas:hover {right: 40.8vw;}
      div#c_hab:hover {top: 86.5vh;}
      div#c_habmenos:hover {left: 40.5vw;} 



      /* FIN DE PRIMERA IMAGEN HABITACION */

      /* PRIMERA IMAGEN HABITACION */

div#hh4 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

      /* PRIMERA IMAGEN HABITACION */

div#hh5 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
div#hh6 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#hh7 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#hh8 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#hh9 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#hh10 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
      
div#hh11 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#hh12 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */




/* SECCION ZONAS COMUNES */

div#zseccion {
       
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;
       }

       
       
/* PRIMERA IMAGEN HABITACION */

div#zz3 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;
}
       
      /* FIN DE PRIMERA IMAGEN ZC */

      /* PRIMERA IMAGEN ZC */

div#zz4 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

      /* PRIMERA IMAGEN HABITACION */

div#zz5 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
div#zz6 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#zz7 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#zz8 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#zz9 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#zz10 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
      
div#zz11 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#zz12 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }
div#zz13 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }
div#zz14 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE ZONAS COMUNES */

/* SECCION CIUDAD */

div#cseccion {
       
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;
       }

       div#cuadrofotos2 {position:absolute; top: 10vh;right: 7vw;left: 7vw;bottom: 10vh; text-align: left;}
       
/* PRIMERA IMAGEN HABITACION */

div#cc3 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;
}
       
      /* FIN DE PRIMERA IMAGEN ZC */

      /* PRIMERA IMAGEN ZC */

div#cc4 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

      /* PRIMERA IMAGEN HABITACION */

div#cc5 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
div#cc6 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#cc7 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#cc8 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#cc9 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#cc10 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */
      
div#cc11 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE PRIMERA IMAGEN HABITACION */

div#cc12 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }
div#cc13 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }
div#cc14 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc15 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc16 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc17 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc18 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc19 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc20 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

div#cc21 
        
       {
       display: none;
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/imgcover.jpg); 
       background-size: cover;

       }

      /* FIN DE CIUDAD */


      

/* SECCION VIDEOS */

div#vseccion {
       
       position: fixed;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/vidcover.jpg); 
       background-size: cover;
       }



/* TERCER VIDEO */

div#vv5 
        
       {
       position: fixed;
       margin:0 auto;
       text-align: center;
       height: 100%;
       width: 100%;
       z-index: -1; 
       text-align: center;
       overflow: hidden;
       background-image: url(../images/vidcover.jpg); 
       background-size: cover;

}
       
      /* FIN TERCER VIDEO */            

/* CSS REPRODUCTOR VIDEO*/
 div#detector {position: absolute;opacity:0; z-index: 0;top:0; width: 80vw; height: 83vh; }
 #controles
       {

       z-index: 1;
       position: absolute; 
       top: 73vh;
       left: 38.9vw;
       width: 21vw;
       padding-top: 1.8vh;
       padding-bottom: 1.5vh;
       border-color: white;
       border-style: solid;
       border-width: 0.1vw;
       box-shadow: 0vw 0.5vw 5vw #000;
       -webkit-box-shadow: 0vw 0.5vw 5vw #000;
       -moz-box-shadow: 0vw 0.5vw 5vw #000;
       text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
              
       }
 div#detector:hover {opacity: 1;}
 
 #controles img {float: left; margin-left: 2vw;}



video {width: 80vw; height: auto; border-right: solid; border-left: solid; border-width: 0.2vw; margin-top: 3vh; }

input {height: 0.5vh; width: 5vw;}
.vol {float: left; margin-left: 2vw; font-size: 1.7vh;font-weight: 600;}

button {cursor: url(../icon/pointerlink.png),pointer;float: left; color: white; background-color: transparent;
 border-color: transparent; margin-left: 2vw; font-weight: 700; font-size: 1.7vh;}








/*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */

                                                                        @keyframes movimientoverticall 
                                                                                   
                                                                                   {

                                                                                    from

                                                                                        {bottom: -500vw;}
                                                                                   
                                                                                    to  

                                                                                        {bottom: 35vh;}
                                                                                  
                                                                                   }

                                                                        /*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */ 
                                                                    




/*  movimientoverticall 3.5s normal;  */



div#boton

       {

        position: fixed;
        left: 43.5vw;
        bottom: 35vh;
        border-color: white;
        border-style: solid;
        border-width: 0.1vw;
        box-shadow: 0vw 0.5vw 5vw #000;
        -webkit-box-shadow: 0vw 0.5vw 5vw #000;
        -moz-box-shadow: 0vw 0.5vw 5vw #000;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
        z-index: 1;
        
      
        }   
        

        /*      MENUIDIOMAS + COSAS BOTONES + COSAS MENU QUE NI YO ENTIENDO       */   


ul

       {

       list-style:none;
       margin:0;
       padding:0;
       clear: both;

       }
       
ul li
       
       {
     
       margin:0;
       padding:0;
       float: left;

       }
        
ul li a

       {

       display: block;
       text-decoration: inherit;

       }
       ul#ejm2 li a
     
       {
       
        position: relative; 
        color: #fff; 
        font-weight: 700; 
        letter-spacing: 0.3vw; 
        font-size: 1.63vh; 
        margin:0.;
        line-height: 5.5vh;
       
       }
       
ul#ejm2 a:before
       
       {

        position: absolute; 
        color: #000; 
        background: #fff;
        content:attr(title); 
        left: 0; 
        top: 0;
        max-width: 0; 
        white-space: nowrap; 
        overflow: hidden; 
        transition: max-width 0.5s ease-out; 
        font-weight: 500;
         
        }

ul#ejm2 li a:hover:before

        {max-width: 100%;}            

        /* SLIDE */

ul#fotos

        { 

        top:0;
        left:0;
        right:0;
	    margin:0;
	    padding:0;
        list-style:none;
	   }

.cb-slideshow,
.cb-slideshow:after

        {
   
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;

        }

.cb-slideshow li span 

        {
    
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: repeat;
        opacity: 0;
        z-index: 0;
 
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 48s linear infinite 0s;
        -moz-animation: imageAnimation 48s linear infinite 0s;
        -o-animation: imageAnimation 48s linear infinite 0s;
        -ms-animation: imageAnimation 48s linear infinite 0s;
        animation: imageAnimation 48s linear infinite 0s;

        }
 

.cb-slideshow li:nth-child(1) span 
        
        {background-image: url(../images/1.jpg)}

.cb-slideshow li:nth-child(2) span

        {

        background-image: url(../images/2.jpg);
    
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -o-animation-delay: 8s;
        -ms-animation-delay: 8s;
        animation-delay: 8s;

        }

.cb-slideshow li:nth-child(3) span 
        
        {
    
        background-image: url(../images/3.jpg);
   
       -webkit-animation-delay: 16s;
       -moz-animation-delay: 16s;
       -o-animation-delay: 16s;
       -ms-animation-delay: 16s;
       animation-delay: 16s;

       }

.cb-slideshow li:nth-child(4) span 

       {
    
       background-image: url(../images/4.jpg);
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s;

       }

.cb-slideshow li:nth-child(5) span

       {
   
       background-image: url(../images/5.jpg);
       -webkit-animation-delay: 32s;
       -moz-animation-delay: 32s;
       -o-animation-delay: 32s;
       -ms-animation-delay: 32s;
       animation-delay: 32s;

       }

.cb-slideshow li:nth-child(6) span 
       
       {
   
        background-image: url(../images/6.jpg);
        -webkit-animation-delay: 40s;
        -moz-animation-delay: 40s;
        -o-animation-delay: 40s;
        -ms-animation-delay: 40s;
        animation-delay: 40s;

       }

/* ANIMACION */

@-webkit-keyframes imageAnimation 
{ 
	0% 
{
	    opacity: 0;

	    -webkit-animation-timing-function: ease-in;


}
	8% 
{
	    opacity: 1;

	    -webkit-transform: scale(1.05);

	    -webkit-animation-timing-function: ease-out;

}
	17% 
{
	    opacity: 1;
	    -webkit-transform: scale(1.1);

}
	25% 
{
	    opacity: 0;
 	    -webkit-transform: scale(1.1);

}
	100% 
{
            opacity: 0
}

}


@-moz-keyframes imageAnimation 
{
 
	0% 
{
	    opacity: 0;

	    -moz-animation-timing-function: ease-in;

}
	8% 
{
	    opacity: 1;

	    -moz-transform: scale(1.05);

	    -moz-animation-timing-function: ease-out;

}
	17% 
{
	    opacity: 1;

            -moz-transform: scale(1.1);

}
	25% 
{
	    opacity: 0;
	    
            -moz-transform: scale(1.1);

}
	100% 
{           opacity: 0 
}

}


@-o-keyframes imageAnimation 
{
 
	0% 
{
	    opacity: 0;

	    -o-animation-timing-function: ease-in;

}
	8% 
{
	    opacity: 1;

	    -o-transform: scale(1.05);

	    -o-animation-timing-function: ease-out;

}
	17% 
{
	    opacity: 1;

	    -o-transform: scale(1.1);

}
	25% {
	    
            opacity: 0;

	    -o-transform: scale(1.1);

}
	100% 
{           opacity: 0 
}

}

@-ms-keyframes imageAnimation 
{ 
	0% 
{
	    opacity: 0;

	    -ms-animation-timing-function: ease-in;

}
	8% 
{
	    opacity: 1;

	    -ms-transform: scale(1.05);

	    -ms-animation-timing-function: ease-out;

}
	17% 
{
	    opacity: 1;

	    -ms-transform: scale(1.1);

}
	25% 
{
	    opacity: 0;

	    -ms-transform: scale(1.1);

}
	100% 
{           opacity: 0 
}

}

@keyframes imageAnimation 
{ 
	0% 
{
	    opacity: 0;

	    animation-timing-function: ease-in;

}
	8% 
{
	    opacity: 1;

	    transform: scale(1.05);

	    animation-timing-function: ease-out;

}
	17% 
{
	    opacity: 1;

	    transform: scale(1.1);

}
	25% 
{
	    opacity: 0;

	    transform: scale(1.1);

}
	100% 
{           opacity: 0 
}

}

/* FIN ANIMACION*/