@charset "utf-8";
/* CSS Document */

@font-face {
font-family:NouvelR-Regular;
src: url(NouvelR-Book.ttf);
}

@font-face {
font-family:NouvelR-Bold;
src: url(NouvelR-Bold.ttf);
}

@font-face {
font-family:NouvelR-Semibold;
src: url(NouvelR-Semibold.ttf);
}


:root {
--color1: #000000;
--color2: #ffffff;
--color3: #d2d2d2;
--color4: #a5a5a5;
}

#header-desktop{
position:relative;
}


#header-mobile{
position:relative;
display:none;
}

body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: 'NouvelR-Regular', sans-serif;
font-size:10px;
color: var(--color1);
box-sizing: border-box;
}

.contenedor-hero h1{
text-shadow: 0 0 5px black;  
}



h1{
padding:0 0 0 0;
margin: 0;
font-family: 'NouvelR-Bold', sans-serif;
font-size: 6rem;
line-height: 6.4rem;
}

h2{
padding:0 0 0 0;
margin: 0;
font-family: 'NouvelR-Bold', sans-serif;
font-size: 5.5rem;
line-height: 5.9rem;
margin: 0;
}

h3{
padding: 0;
margin: 0;
font-size: 2.3rem;
line-height: 2.9rem;
font-family: 'NouvelR-Regular', sans-serif;
}


p{
font-size: 1.85rem;
line-height: 2.9rem;
padding:0 0 0 0;
}


.texto-blanco{
color:#ffffff;
}

.texto-negro{
  color:#000000;
  }

.borde-izquierdo{
border-left: #ffffff solid 3px; 
padding-right:10px;
margin-right:10px;
}

.borde-top{
  border-top: rgb(236, 236, 236) solid 1px; 
  margin-top: 20px;
  }

  
  a{
    font-family: NouvelR-Regular;
    color:inherit;
        }


  a:hover{
font-family: NouvelR-Bold;
color: inherit;
    }

.borde-izquierdo-negro{
border-left: #000000 solid 3px; 
padding-right:10px;
margin-right:10px;
}


/* SECTION COLOR  ********************************************* */


.color1{
background-color: var(--color1);
} 
.color2{
background-color: var(--color2);
} 
.color3{
background-color: var(--color3);
} 

.color4{
background-color: var(--color4);
} 




/* PADDING TOP  ********************************************* */


.pt10{
padding-top:10px;
} 
.pt15{
padding-top:15px;
} 
.pt20{
padding-top:20px;
} 
.pt25{
padding-top:25px;
} 
.pt30{
padding-top:30px;
} 

.pt35{
padding-top:35px;
} 
.pt40{
padding-top:40px;
} 
.pt45{
padding-top:45px;
} 
.pt50{
padding-top:50px;
} 

/* MARGIN TOP  ********************************************* */


.mt10{
margin-top:10px;
} 
.mt20{
margin-top:20px;
} 
.mt30{
margin-top:30px;
} 
.mt40{
  margin-top:40px;
  } 
  .mt50{
  margin-top:50px;
  } 
  .mt60{
  margin-top:60px;
  } 

  /* MARGIN TOP  ********************************************* */


.mb10{
margin-bottom:10px;
} 
.mb20{
margin-bottom:20px;
} 
.mb30{
  margin-bottom:30px;
  } 
  .mb40{
  margin-bottom:40px;
  } 

/* PADDING BOTTOM  ********************************************* */


.pb10{
padding-bottom:10px;
} 
.pb15{
padding-bottom:15px;
} 
.pb20{
padding-bottom:20px;
} 
.pb25{
padding-bottom:25px;
} 
.pb30{
padding-bottom:30px;
} 

.pb35{
padding-bottom:35px;
} 
.pb40{
padding-bottom:40px;
} 
.pb45{
padding-bottom:45px;
} 
.pb50{
padding-bottom:50px;
} 




/* ********************************************* */



#foto-zindex{
z-index:0;
  }

.section-base{
padding-left:0;
padding-right:0;
margin: 0;
}

.contenedor900{
width: 100%;
max-width: 900px;
margin:0 auto 0 auto;
padding:0px 0 0 0;
}


.contenedor900-conmargen{
  width: 100%;
  max-width: 900px;
  margin:0 auto 70px auto;
  padding:0px 0 0 0;
  }

.contenedor900-recuadro{
  width: 100%;
  max-width: 900px;
  margin:0 auto 0 auto;
  padding:20px 0 20px 0;
  z-index: 10000;
  }

.contenedor1000-saliente{
  width: 100%;
  max-width: 1000px;
  margin:0px auto 0 auto;
  padding:0px 0 0 0;
  position: relative;
top:-50px;
  }


  .contenedor1000-saliente-2{
    width: 100%;
    max-width: 1000px;
    margin:0px auto 0 auto;
    padding:0px 0 0 0;
   position: relative;
  top:50px;
  z-index: 1000;
    }

  .contenedor1100{
    width: 100%;
    max-width: 1100px;
    margin:0px auto 0 auto;
    padding:0px 0 0 0;

    }


.contenedor-900-2columnas{
width: 100%;
max-width: 900px;
padding:0 0 0px 0;
display: flex;
flex-direction: row;
margin: 0 auto 0 auto;
justify-content: space-around;

}




.columna-izquierda425{
width: 50%;
max-width: 50%;
padding:0;
margin:0;

}

.columna-derecha425{
width: 50%;
max-width: 50%;
padding:0;
margin:0;

}

.titulo-bajada {
padding-left: 20px;

}


/* ********************************************* */

/* PIE Y MARCAS*/



.section-fixed{
position: fixed;
z-index: 100000;
width: 100vw;
top: 0;
left: 0;
background-color: #ffffff;
}


.sombra{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.58); 
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.58);
}




.logopie{text-align:center;}
.logopie img{max-width: 40%;}
.logopie img{max-width: 70%;}




.footer-bottom .footer-copyright {
font-size: 14px;
line-height: 18px;
text-align: center;
padding-top: 30px;
}


.logoinfobae{text-align:center;}
.logoinfobae img{margin-top:20px; 
margin-bottom: 20px; 
max-width: 40%;}
.logopie img{max-width: 70%;}



.footer{
color:#666;
font-size: 1.3rem;
}

.footer-copyright{
}

.derechos{
border-top: 1px solid #e9e9e9;
padding: 10px 30px 10px 30px;
margin:0 auto 0 auto;
font-size: 1.3rem;
color:#666;
}


.contenedor-videocenter100{
  max-width: 70%;
  width: 70%;
  height: auto;
  margin: 30px auto 10px auto;
  }



.foto-responsive{
margin: 0 auto 0 auto;
width: 100%;
height:auto;
}


@keyframes opacidad {
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 100%;}
}

.opacidad{
animation-name: opacidad;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4s;
animation-delay: 0s;	
}

#previo{

  }



#controlador1, #controlador2{
width:30%;
height: 50px;
padding: 10px;
border-radius: 1000000px;
background-color: #00000038;
}



/* * 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 10 --- */


.contenedor-flex-2columnas-10{
  width: 100%;
  max-width: 100%;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  }
  
  
  .columna-izquierda-10{
  padding: 0;
  max-width:60vw;
  width: 60vw;
  display: flex;
  margin: 0;
  position: relative;
  right:-100px;
  }
  
  .columna-derecha-10{
  padding: 0;
  max-width:40vw;
  width: 40vw;
  display: flex;
  margin: 0;
  position: relative;
  left:-100px;
  background-color: var(--color5);
  }
  
  
  .contenedor-foto-10{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  }
  
  .contenedor-textual-10{
  padding: 20px 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  background-color: var(--color3);
  }
  
  .contenedor-textual-11{
  padding: 0;
  margin: 0;
  height: 150px;
  max-width: 100%;
  width: 100%;
  background-color: var(--color3);
  }
  
  .texto-textual-10{
  padding: 30px;
  }
  
  .foto-responsive-10{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  }
  
  
  
  .contenedor-texto-10{
  margin: 0 auto 0 auto;
  max-width: 90%;
  padding: 60px 20px 60px 20px;
  z-index: 100;
  background-color: #000000;
  }
  
  
  
  .texto-verde-10{
  color: var(--color4);
  font-weight: 700;
  font-size: 2.2rem;
  }
  
  .texto-negro-10-b{
  color: var(--color1);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2.5rem;
  }
  
  .texto-nombre-10-b{
  color: var(--color1);
  font-weight: 600;
  font-size: 3rem;
  line-height: 3.2rem;
  text-transform: uppercase;
  
  }
  
  
  
  /* * FIN DE 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 10 --- */
  
  
  /* * 2 COLUMNAS CON FOTO FULL A LA DERECHA - 11 --- */
  
  
  .contenedor-flex-2columnas-11{
  width: 100%;
  max-width: 100%;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  }
  
  
  .columna-izquierda-11{
  padding: 0;
  max-width:40vw;
  width: 40vw;
  display: flex;
  margin: 0;
  position: relative;
  right:-100px;
  z-index: 100;
  background-color: var(--color5);
  }
  
  .columna-derecha-11{
  padding: 0;
  max-width:60vw;
  width: 60vw;
  display: flex;
  margin: 0;
  position: relative;
  left:-100px;
  }
  
  
  .contenedor-foto-11{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  }
  
  .foto-responsive-11{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  }
  
  
  .contenedor-texto-11{
  margin: 0 auto 0 auto;
  max-width: 90%;
  padding: 60px 20px 60px 20px;
  z-index: 100;
  background-color: #000000;
  }
  
  
  
  .texto-negro-11{
  color: var(--color8);
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.2rem;
  text-transform: uppercase;
  }
  
  .texto-negro-11-b{
  
  }
  
  
  /* * FIN DE 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 11 --- */
  

  .contenedor700b{
    width: 100%;
    max-width: 700px;
    margin:0 auto 0 auto;
    padding:60px 15px 60px 15px;
    text-align: center;
    }
    



/* ***************************************************************************************************************** */

/* QUERIES */

@media (max-width: 1300px) {


}

@media (max-width: 1024px) {


  .contenedor1000-saliente{
    width: 100%;
    max-width: 1000px;
    margin:0px auto 0 auto;
    padding:0px 0 0 0;
    position: relative;
  top:0px;
    }


    .contenedor1000-saliente-2{
      width: 100%;
      max-width: 1000px;
      margin:0px auto 0 auto;
      padding:0px 0 0 0;
     
      position: relative;
    top:0px;
      }


/* * 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 10 --- */


.contenedor-flex-2columnas-10{
  width: 100%;
  max-width: 100%;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  }
  
  
  .columna-izquierda-10{
  padding: 0;
  max-width:90vw;
  width: 90vw;
  display: flex;
  margin: 0;
  position: relative;
  right:0px;
  }
  
  .columna-derecha-10{
  padding: 0;
  max-width:90vw;
  width: 90vw;
  display: flex;
  margin: 0;
  position: relative;
  left:0px;
  background-color: #000000;
  
  }
  
  
  .contenedor-foto-10{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  }
  
  
  .contenedor-textual-11{
  padding: 0;
  margin: 0;
  height: 150px;
  max-width: 100%;
  width: 100%;
  background-color: var(--color3);
  }
  
  .texto-textual-10{
  padding: 30px;
  }
  
  .foto-responsive-10{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  }
  
  
  
  .contenedor-texto-10{
  max-width: 90%;
  padding: 20px 20px 20px 20px;
  z-index: 100;
  }
  
  
  .texto-verde-10{
  color: var(--color4);
  font-weight: 700;
  font-size: 2.2rem;
  }
  
  .texto-negro-10-b{
  color: var(--color1);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2.5rem;
  }
  
  .texto-nombre-10-b{
  
  }
  
  
  
  /* * FIN DE 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 10 --- */
  
  
  /* * 2 COLUMNAS CON FOTO FULL A LA DERECHA - 11 --- */
  
  
  .contenedor-flex-2columnas-11{
  width: 100%;
  max-width: 100%;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  }
  
  
  .columna-izquierda-11{
  padding: 0;
  max-width:90vw;
  width: 90vw;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  position: relative;
  right:0;
  z-index: 0;
  background-color: #000000;
  }
  
  .columna-derecha-11{
  padding: 0;
  max-width:90vw;
  width: 90vw;
  display: flex;
  margin: 0;
  position: relative;
  left:0;
  
  }
  
  
  .contenedor-foto-11{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  }
  
  
  .foto-responsive-11{
  padding: 0;
  margin: 0;
  height: auto;
  max-width: 100%;
  width: 100%;
  }
  
  
  .contenedor-texto-11{
  max-width: 90%;
  padding: 20px 20px 20px 20px;
  z-index: 100;
  }
  
  
  
  
  .texto-negro-11{
  }
  
  .texto-negro-11-b{
  
  }
  
  
  /* * FIN DE 2 COLUMNAS CON FOTO FULL A LA IZQUIERDA - 11 --- */
  

}


@media (max-width: 900px) {


  .contenedor-videocenter100{
    max-width: 90%;
    width: 90%;
    height: auto;
    margin: 30px auto 10px auto;
    }
  

.contenedor-hero{
position: absolute;
top:30%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 900px;
width:700px;
}

h1{
font-size:5.5rem;
line-height: 6rem;
}


h2{
font-size:5rem;
line-height: 5.4rem;
}

.contenedor900{
width: 90%;
max-width: 800px;
margin:0 auto 0 auto;
padding:0px 0 0 0;
}




.contenedor900-conmargen{
  width: 90%;
  max-width: 800px;
  margin:0 auto 70px auto;
  padding:0;

  }

.contenedor900-recuadro{
  width: 90%;
  max-width: 800px;
  margin:0 auto 0 auto;
  padding:20px 0 20px 0;
  }


}

/* 2 columnas  ********************* */



.contenedor-900-2columnas{
width: 90%;
max-width: 800px;
padding:0 0 0px 0;
margin:0;
display: flex;
flex-direction: row;
margin: 0 auto 0 auto;
justify-content: space-between;
}

.columna-izquierda425{
width: 47%;
max-width: 400px;
padding:0;
margin:0;
}

.columna-derecha425{
width: 47%;
max-width: 400px;
padding:0;
margin:0;
}

/* 2 columnas  ********************* */




/* ********************************************* */
/* HERO*/

/*

.contenedor-hero{
position: absolute;
top:25%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 900px;
}




}

*/
@media (max-width: 800px) {

/* HERO*/
/*

.hero-img{
position: relative;
height:52vh;
overflow: hidden;
background: url("../img/lugares-800.jpg") no-repeat top;
background-size:contain;
background-attachment: fixed; 
background-color: #000000;
}


.contenedor-hero{
position: absolute;
top:30%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 900px;
}

}
 Hero */

@media (max-width: 700px) {

/* 
.contenedor-hero{
max-width: 90vw;
}

h2{
font-size:4.7rem;
line-height: 5rem;
}

HERO*/

/* ********************************************* */


#header-desktop{
  position:relative;
  display:none;
    }
  
  
    #header-mobile{
      position:relative;
      display:block;
        }
  
        .contenedor700b{
          width: 90%;
          max-width: 90%;
          margin:0 auto 0 auto;
          padding:60px 15px 60px 15px;
          text-align: center;
          }



h3{
  font-size: 2.2rem;
  line-height: 3.4rem;
  text-align: left;
  display: inline;
  color: var(--color3);
  letter-spacing: 0.1px;
  font-weight: 400;
  }


  


.contenedor-900-2columnas{
width: 90%;
max-width: 90vw;
padding:0 0 0px 0;
margin:0;
display: flex;
flex-direction: column;
margin: 0 auto 0 auto;
justify-content: space-between;
}

.columna-izquierda425{
width: 100%;
max-width: 100%;
padding:0;
margin:0;
}

.columna-derecha425{
width: 100%;
max-width: 100%;
padding:0;
margin:0;
}



/* fin 2 columnas  ********************* */

}


@media (max-width: 600px) {

/*

.hero-img{
position: relative;
height:45vh;
overflow: hidden;
background: url("../img/lugares-800.jpg") no-repeat top;
background-size:contain;
background-attachment: fixed; 
background-color: #000000;
}

.contenedor-hero{
position: absolute;
top:30%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 90vw;
}

*/

h1{
font-size: 4rem;
line-height: 4.5rem;
text-shadow: 0 0 5px black;
}

.contenedor-hero h1{
text-shadow: 0 0 5px black;  
}

h2{
font-size:3.5rem;
line-height: 4rem;
}



}



@media (max-width: 500px) {

.titulo-bajada {
padding-left: 0px;
padding-bottom: 25px;
}


.borde-izquierdo{
border-bottom: #ffffff solid 3px; 
border-left: transparent solid 0px; 
padding-right:0px;
margin-right:0px;
}


.borde-izquierdo-negro{
  border-bottom: transparent solid 0px; 
  border-left: transparent solid 0px; 
  padding-right:0px;
  margin-right:0px;
  }
  
  */

/*

/* Hero */

/*


.hero-img{
position: relative;
height:50vh;
overflow: hidden;
background: url("../img/lugares26.jpg") no-repeat top;
background-size:contain;
background-attachment: fixed; 
background-color: #000000;
}

.contenedor-hero{
position: absolute;
top:35%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 90vw;
}

h1{
font-size: 4rem;
line-height: 4.75rem;
text-shadow: 0 0 5px black;
}

h2{
font-size:3.5rem;
line-height: 4rem;
}


.contenedor-hero h1{
text-shadow: 0 0 5px black;  
}
}

*/


@media (max-width: 450px) {

/* ********************************************* */


/* Hero */

/*
.hero-img{
position: relative;
height:50vh;
overflow: hidden;
background: url("../img/lugares26.jpg") no-repeat top;
background-size:contain;
background-attachment: fixed; 
background-color: #000000;
}

.contenedor-hero{
position: absolute;
top:35%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 90vw;
}

h1{
font-size: 3.5rem;
line-height: 4rem;
text-shadow: 0 0 5px black;
}

.contenedor-hero h1{
text-shadow: 0 0 5px black;  
}


h2{
font-size:3.2rem;
line-height: 3.8rem;
}



}

*/

@media (max-width: 375px) {

/* ********************************************* */


/* 
.hero-img{
position: relative;
height:50vh;
overflow: hidden;
background: url("../img/lugares26.jpg") no-repeat top;
background-size:contain;
background-attachment: fixed; 
background-color: #000000;
}

.contenedor-hero{
position: absolute;
top:35%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 90vw;
}

h1{
font-size: 3.1rem;
line-height: 3.5rem;
text-shadow: 0 0 5px black;
}

.contenedor-hero h1{
text-shadow: 0 0 5px black;  
}


h2{
font-size:2.9rem;
line-height: 3.3rem;
}

*/

}

@media (max-width: 330px) {

  /*
.contenedor-hero{
position: absolute;
top:40%;
left:50%;
transform: translate(-50%,-50%);
overflow: hidden;
color:#ffffff;
max-width: 90vw;
}

h1{
font-size: 2.7rem;
line-height: 3.2rem;
text-shadow: 0 0 5px black;
}



}

*/
