/*      GENERALES        */   



* {margin:0;}

body
        {
        
        background-color: #000;
        font-family: Helvetica,Arial,Verdana,sans-serif;
        color: #fff;
        cursor: url(../icon/pointer.png),default;
        margin: 0;
        
        }

a, a:hover 
        
        {
        
        text-decoration: none;
        color: #fff;
        cursor: url(../icon/pointerlink.png),pointer;
       
        }

.centro 

        {

        text-align: center;
 
        }        

h1
        {

        font-weight: 800;
        font-size: 3.55vh;
        color: #fff;
        opacity: 0.8;
        letter-spacing: 0.585vw;
        margin-left: 0.25vw;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
        
        }
h2
        {

        font-weight: 800;
        font-size: 7.66vh;
        color: #AD631A;
        opacity: 0.5;
        line-height: 6vh;
        letter-spacing: -0.16vw; 
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
       
        }

h3
    {
        font-weight: 600;
        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;
    } 

h4
        {

        font-weight: 800;
        font-size: 4vh;
        color: #fff;
        letter-spacing: 0.55vw;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;

        }

h5      

        {

        font-size: 1.45vh; 
        line-height: 2.8vh;
        text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;
        font-weight: 700;

        }                
         
p

        {

        font-size: 1.83vh;
        letter-spacing: 0.05vw;
        font-weight: 100;
        line-height: 2.510vh;
        text-align: justify;
        text-shadow: 0.05vw 0.05vw 0.5vw #000, -0.05vw -0.05vw 0.5vw #000, 0.05vw -0.05vw 0.5vw #000, -0.05vw 0.05vw 0.5vw #000;
                        
        }


.icons {width: 3.8vh}
.table {font-size: 0.83vw;border-width: 0.10vw; background-image: url(../icon/tarifas5.png); background-repeat: no-repeat; background-size: 100%; width: 100% ;text-align:center; padding-top: 0.5vh;}
.tarif {text-align: center; line-height: 1.4vh; font-size: 2.10vw;}
.numer {color:#AD631A; font-weight: 900;text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;}   

/* CSS REPRODUCTOR VIDEO*/
 #controles

       {
        display: none;
       position: absolute; 
       bottom: 4.7vh;
       right: 5vw;
       width: 21vw;
       padding-top: 1.4vh;
       padding-bottom: 1vh;
       text-align: center;
       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 1.5s normal;
        z-index: -1;
      
       
       
       }
 
 #controles img {float: left; margin-left: 2vw;}


input {height: 0.5vh; width: 5vw;}
.vol {float: left; margin-left: 1.7vw; 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;}


/* Fondo de pantalla */       

video 
       {
       
        background-size: auto; 
        bottom: 0; 
        right: 0;
        height: auto;
        width: auto;
        min-height: 100%;
        min-width: 100%;
        position: fixed;
        z-index: -100;
        }
    
#tela_negra

        {
       
        position: fixed;
        background-color: #000;
        top: 0; 
        left: 0; 
        bottom: 0; 
        right: 0;
        opacity: 0.5;
        z-index: -99;

        }

/* Menu */ 


header  
        {

        width:100%;
        position: fixed;
        right: 1.5vw;
        top: 2.65vh;
        z-index: 100;
       
        }
 
header nav 
        
        {

        width: 100%;
        height: 100%;
        max-width: 18vw;
        margin:1vw auto;
       
        
        }
 
.menu_bar 
       
        {display:none;}

 
header nav ul 
     
        {

        overflow:hidden;
        list-style:none;
        
        }
 
header nav ul li 
    
        {float:right;text-shadow: 0.05vw 0.05vw #000, -0.05vw -0.05vw #000, 0.05vw -0.05vw #000, -0.05vw 0.05vw #000;}
 

header nav ul li a 

        {

        color:#fff;
        padding:1.2vw;
        display:block;
        text-decoration:none
        ;

        } 

header nav ul li span 
        
        {margin-right:0.5vw;}
 

header nav ul li a:hover 
      
        {background:#AD631A;}
 
 
@media screen and (max-width:200vw ) 
       
        {
        
        header nav 
               {
         
                width:100%;
                right: -100%;
                margin-top: 5vh;
                position: fixed;
              
               }
 
        header nav ul li

                {
                
                display:block;
                float:none;
                border-bottom:0.05vw solid rgba(255,255,255, .3);
               
                }
 
        .menu_bar  
                {

                display:block;
                width:100%;
                background:transparent;
               
                }
 
        .menu_bar .bt-menu

                {
                
                display:block;
                background:transparent;
                color:#fff;
                text-decoration:none;
                font-weight: bold;
                font-size:1.40vw;
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
               
                }
 
        .menu_bar span 

                {
          
                float:right;
                font-size:4vh;
                
                }
        }


/*      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: -3vw; 
        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.2vh;
       
       }
       
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%;}




/*      SECCION VIDEO      */  

                                                                        /*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */

                                                                        @keyframes movimientoverticall 
                                                                                   
                                                                                   {

                                                                                    from

                                                                                        {bottom: -500vw;}
                                                                                   
                                                                                    to  

                                                                                        {bottom: 4.7vh;}
                                                                                  
                                                                                   }

                                                                        /*       MOVIMIENTO VERTICAL DE BOTON Y REPRODUCTOR       */        




div#boton

       {

        position: fixed;
        left: 5vw;
        bottom: 4.7vh;
        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 3.5s normal;
        z-index: 1;
        
      
        }
        
div#reproductor
       
       {

        display: none;
        position: fixed;
        left: 5vw;
        bottom: 4.7vh;
        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 1.5s normal;
        z-index: -1;
       
        }

                                                                          /*      MOVIMIENTO VERTICAL DE MENUBAJO        */

                                                                          @keyframes movimientoverticalll 

                                                                                    {
                                                                                 
                                                                                    from 

                                                                                        {bottom: -1000vh;}
                                                                                 

                                                                                 
                                                                                    to {bottom: 0.5vh;}
                                                                                 
                                                                                    }   

                                                                      /*      MOVIMIENTO VERTICAL DE MENUBAJO        */         

div#menubajo
    
        {
     
        position: fixed;
        bottom: 0.5vh;
        right: 1.3vw;
        animation: movimientoverticalll 3.6s normal;
        z-index: 100;
        
        }

.btn  {height: 1.4vh;}   

 
        
                                                                          /*      MOVIMIENTO DIAGONAL DE ANIM Y ANIM2      */

                                                       @keyframes movimiento-diagonal

                                                                 {
                                                             
                                                                 from 
                                                                      {
                                                                      
                                                                      left: 4vw;
                                                                      opacity: 0;
                                                       
                                                                      }
   
                                                                 to 

                                                                      {
                                                                
                                                                      left: 6vw;
                                                                      opacity: 1;
                                                                  
                                                                      }
                                                                 }     

                                                                          /*      MOVIMIENTO DIAGONAL DE ANIM Y ANIM2      */                                                                          

div#anim   
        
        {
        
        position: fixed;
        top: 45.4vh;
        left: 6vw;
        animation: movimiento-diagonal 2.4s 1 alternate; 
        z-index: 2;
        
        }

div#anim2

        {

        position: fixed;
        top: 49.7vh;
        left: 6vw;
        animation: movimiento-diagonal 2.5s 1 alternate; 
        z-index: 2;

        }

div#down
      
        {

        position: fixed;
        bottom: 3vh;
        text-align: center;
        right: 0;
        left: 0;
        z-index: 1; 
        animation: 5s 6 both; 
        animation-name: flash;
        animation-delay: 10.3s;

        }

.scroll

       {height: 3vh;}          



                                                                          /* MOVIMIENTO PARPADEO SCROLLDOWN */
                                                                                                                                                                    
                                                                          @keyframes flash

                                                                                       {

                                                                                         0%, 50%, 100% 
                                                                                      
                                                                                                       {opacity: 0;}
                                                                                       
                                                                                              25%, 75% 

                                                                                                       {opacity: 1;}
                                                                                          
                                                                                        }

                                                                                        /* MOVIMIENTO PARPADEO SCROLLDOWN */



div#relativeportadacompleta
        
        {

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

        }

/* FIN SECCION VIDEO */

/*         SECCION LOCALIZACION            */


div#capanegra
       
       {

       position: static;
       width: 100%;
       height: 90vh;
       background-color: #000;
       z-index: 2;
       
       
       }

div#sticky01

       {

        position: sticky;
        top: 0; 
        width: 100%;
        height: 110vh;
        background-color: #000;
        background-image: url(../images/localizacion.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 2;


       }

div#articulo
     
       {

       position: relative;
       width: 38vw;
       top: 5vh;
       background-color: rgba(000,000,000,0.8);
       margin-left: 5vw;
       padding-left: 1vw;
       margin-right: 5vw;
       padding-right: 1vw;
       border-left-color: rgba(250, 250, 250, 1);
       border-left-width: 0.15vw;
       border-left-style: dashed;
       z-index: 3;

       }

       .img_art {width: 95%; border-radius: 8px ;transition:all .3s ease}
       .img_art:hover{-webkit-transform:scale(1.05);transform:scale(1.05);transition:all .5s ease-in-out;}
       .contenedor {overflow: hidden; text-align: center;}
       .img_art2 {width: 95%; border-radius: 8px ; transition:all .3s ease}
       .img_art2:hover {-webkit-transform:scale(1.25);transform:scale(1.25);transition:all .5s ease-in-out;}


div#pielocalizacion

       {

        position: relative;
        width: 100%;
        height: 95vh;
        background-color: transparent;
        z-index: 3;


       }

/* FIN SECCION LOCALIZACION */

/*                  EFECTO VIDEO                     */


div#efectosemitransparente

       {

        position: static;
        width: 100%;
        height: 50vh;
        background-color: rgba(000,000,000, 0.3);
        z-index: 4;

       }

div#efectosalida

       {

        position: relative;
        width: 100%;
        height: 30vh;
        background-color: rgba(000,000,000, 1);
        z-index: 5;

       }

div#efectosalida2

       {

        position: relative;
        width: 100%;
        height: 80vh;
        background-color: rgba(000,000,000, 1);
        z-index: 8;

       }
      
div#efectosemitransparentefinal

       {

        position: static;
        width: 100%;
        height: 30vh;
        background-color: rgba(000,000,000, 0.5);
        z-index: 8;

       }
  

/* Fin seccion efecto */

/*           FOTOGRAFIAS           */


div#sticky02

       {

        position: sticky;
        top: 0; 
        background-color: #000;
        z-index: 7;

       }

       .frame

       {
        width: 100%;
        height: 100vh;
        border: 0px;
       }

       div#framescroll
        
        {

        position: relative;
        height: 48vh;
        background-color: #000;
        z-index: 5

        }
        

/* Fin de Fotografias */

/*             TARIFAS Y RESERVAS                  */   

div#sticky03

       {

        position: sticky;
        top: 0; 
        width: 100%;
        height: 100vh;
        background-color: #000;
        background-image: url(../images/tarifas.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 8;

       } 

        div#iconotarifas

       {

       margin-top: -40vh; 
       width: 35vw;
       position:absolute;
       margin-left: 52vw;
       padding-left: 1.5vw;
       padding-right: 1.5vw;
       background: rgba(000,000,000,0);
       border-left-color: rgba(250, 250, 250, 1);
       border-left-width: 0.15vw;
       border-left-style: dashed;
       z-index: 9;
      
       }


                            
                 div#framescroll2
        
        {
        
        margin-top: 1.8vh;
        position: relative;
        width: 35vw;
        margin-left: 14vw;
        background-color: rgba(000,000,000,0.5);
        padding-right: 1.5vw;
        padding-left: 1.5vw;
        border-left-color: rgba(250, 250, 250, 1);
        border-left-width: 0.15vw;
        border-left-style: dashed;
        z-index: 8;

        }

        div#framescroll3
        
        {

        position: relative;
        height: 2vh;
        background-color: #000;
        z-index: 5

        }
 /* FINAL DE TARIFAS Y RESERVAS */