* {margin:0;}

a, a:hover

        {

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

        font-weight: 800;
        font-size: 4.55vh;
        line-height: 2vh;
        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: 0.8;
        line-height: 5vh;

                }
h3
    {
        font-weight: 600;
        font-size: 4vh;
        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;
        font-size: 6.66vh;
        color: #AD631A;
        line-height: 8.5vh;
        letter-spacing: -0.16vw; 
        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;
       
        }        
        /* FIN GENERALES*/

        /* MIOS */

/*      MOVIMIENTO VERTICAL DE MENUBAJO        */

                                                                          @keyframes movimientoverticalll 

                                                                                    {
                                                                                 
                                                                                    from 

                                                                                        {bottom: -1000vh;}
                                                                                 

                                                                                 
                                                                                    to {bottom: 7vh;}
                                                                                 
                                                                                    }   

                                                                      /*      MOVIMIENTO VERTICAL DE MENUBAJO        */         

div#menubajo
    
        {
     
        position: fixed;
        bottom: 7vh;
        left: 43.8vw;
        animation: movimientoverticalll 2.5s normal;
        z-index: 100;
        
        }

.btn  {height: 1.4vh;}   

div#todofotos

       {
 
        position: static;
        width: 100%;
        height: 100vh;
        background-color: transparent;
        z-index: -2
 
       }

div#hh 
        
       {
       position: fixed;
       text-align: center;
       bottom: 35vh;
       width: 100%;
       z-index: 2; 
       line-height: 0;

       }


      









/*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */

                                                                        @keyframes movimientoverticall 
                                                                                   
                                                                                   {

                                                                                    from

                                                                                        {bottom: -500vw;}
                                                                                   
                                                                                    to  

                                                                                        {bottom: 20vh;}
                                                                                  
                                                                                   }

                                                                        /*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */ 
                                                                    




/*  movimientoverticall 3.5s normal;  */



div#boton

       {

        position: fixed;
        left: 44vw;
        bottom: 20vh;
        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;
        animation:movimientoverticall 2s normal; 
        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#ejm1 li a

       {

        position: relative; 
        color: #fff; 
        font-weight: 300; 
        letter-spacing: 0.25vw; 
        font-size: 1.304vh; 
        margin-bottom: 1.45vh;
        margin-left:0.4vw;
        margin-right:0.4vw;
        padding-top: 2.5vh; 
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
       
        }

ul#ejm1 a:before

       {

        position: absolute; 
        color: #fff; 
        content:attr(title); 
        left: -3.5vw; 
        top: 0; 
        max-width:0; 
        white-space: nowrap; 
        overflow:hidden; 
        transition: max-width 0.5s linear;
       
       }

ul#ejm1 li a:hover:before

       {max-width: 19vw;}

       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 42s linear infinite 0s;
        -moz-animation: imageAnimation 42s linear infinite 0s;
        -o-animation: imageAnimation 42s linear infinite 0s;
        -ms-animation: imageAnimation 42s linear infinite 0s;
        animation: imageAnimation 42s 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: 7s;
        -moz-animation-delay: 7s;
        -o-animation-delay: 7s;
        -ms-animation-delay: 7s;
        animation-delay: 7s;

        }

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

       }

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

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

       }

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

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

       }

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

       }

/* 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*/