@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap');
::placeholder { 
	color: #FFF;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #FFF;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #FFF;
}
input::placeholder, textarea::placeholder {
    color: #000 !important;
}
* {
	font-family: 'Poppins', sans-serif;
}
#formulario-superior {
	width: 35%;
	position: absolute;
    right: 2%;
   bottom: 20%;
    border-radius: 25px;
    background-image: url(../images/fondo_formulario.jpg);
    background-position: center;
    background-size: cover;
    padding: 25px;
	-webkit-box-shadow: 5px 5px 15px 0 rgba(0,0,0,.3);
box-shadow: 5px 5px 15px 0 rgba(0,0,0,.3);
	z-index: 9;
}
#video {
	background-image: url("../images/fondo-gris.jpg");
	background-size: cover;
	background-position: top center;
}
#videoF {
	    width: 100%;
    height: auto;
}
#beneficios {
	background-image: url("../images/fondo-beneficios.jpg");
	background-size: cover;
	background-position: center;
}
.text-verde {
	color: #b1cd49;
}
.text-azul {
	color:#5192cc;
}
.text-naranja {
	color: #db7f32;
}
#instalaciones {
	background-image: url("../images/fondo_instalaciones.jpg");
	background-size: cover;
	background-position: center;
}
#sucursales {
	background-size: cover;
	background-position: center;
	background-image: url("../images/fondo-sucursales.jpg");
	padding-bottom: 8vh !important;
}
#mapa {
	width: 100%;
	height: 100%;
}
#contacto2 {
	background-size: cover;
	background-position: center;
	background-image: url("../images/fondo_contacto_2.jpg");
	padding-top: 15vh !important;
	padding-bottom: 15vh !important;
}
#rana {
	position: absolute;
    left: 0;
    width: 53%;
    bottom: 0;
	height: auto;
}
/*#banner img {
	width: 100% !important;
}*/
.anton {
	font-family: 'Anton', sans-serif;
}
.blockquote {
	font-weight: bold;
	padding: 5% 15%;
	text-align: center;
	position: relative;
}
.blockquote::before {
	content: '\201C';
    font-family: 'Anton', sans-serif;
    color: #ffb400 !important;
    font-size: 155px;
    position: absolute;
    z-index: -1;
    margin-top: -75px;
    margin-left: -45px;
}
.blockquote::after {
	content: '\201D';
    font-family: 'Anton', sans-serif;
    color: #ffb400 !important;
    font-size: 155px;
    position: absolute;
    z-index: -1;
    margin-top: -75px;
    margin-right: -45px;
}
#conoce {
	background-image: url("../images/fondoPreparando.jpg");
	background-size: cover;
	background-position: left bottom;
	padding: 100px 0 !important;
}
#estilos {
	background-image: url("../images/fondo-estilos.jpg");
	background-size: cover;
	background-position: top right;
}
#lager {
	margin-top: 20vh !important;
    margin-left: -10vw;
}
.destacado {
	background-color: #ffb400;
    font-family: 'Anton', sans-serif;
    display: inline-block;
    padding: 5px 10px;
    color: #000;
    font-size: 1.2em;
    text-transform: uppercase;
}
#aventura {
	background-image: url("../images/fondo-aventura.jpg");
	background-size: cover;
	background-position: center;
}
.tabla {
	    border: thin solid #000;
    display: block;
    width: 70%;
    margin: 0 auto;
    padding: 7px;
}
.titulo-tabla {
	    background-color: #ffb400;
    font-family: 'Anton', sans-serif;
    color: #000;
    font-size: 1.2em;
    display: block;
    padding: 5px 15px;
    max-width: 200px;
    margin: -25px auto 15px;
}
.tabla table {
	width: 100%;
}
.tabla table thead {
	font-size: 0.7em;
	font-weight: bold;
}
.tabla table tbody td {
	font-family: 'Anton', sans-serif;
    color: #000;
    font-size: 1.2em;
	border-right: thin solid #000;
}
.tabla table tbody td:last-child {
	border-right: none;
}
a:hover {
	color: #a38b59;
}
#cabecera {
	width: 100%;
	background-image: url("../images/fondoMenu.jpg");
	background-size: 100% 100%;
}
.logo {
	    max-height: 70px;
    width: auto;
}
.nav-item {
	margin: 0 15px;
}
#medio {
	z-index: 1;
}
#fondo {
	/*background-image: url("../images/fondo-total.jpg");
	background-size: cover;
	background-position: top center;*/
}
.text-cafe, .nav-link.active {
	color: #ffb400 !important;
	font-weight: bold;
}
.text-cafe-dark {
	color: #382418 !important;
	font-weight: bold;
}
body {
	color: #5e5f5c;
}
.icono {
	width: auto;
	/*height: auto;*/
}
.lora {
	font-family: 'Lora', serif;
}
#mixologia {
	background-image: url("../images/fondo-mixologia-tierra-azteca.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left top;
	padding-bottom: 20vh;
	z-index: 9;
    position: relative;
}
.slick-slide img {
	width: 100%;
	height: auto;
}
.slick-dots li button:before {
	font-size: 42px !important;
	color: #FFF !important;
}
.slick-dots li.slick-active button:before {
	color: #000 !important;
}
#contacto {
    background-image: url("../images/fondo-contacto.jpg");
    background-size: cover;
    background-position: center;
    /* [disabled]margin-top: -20vh; */
    z-index: 8;
	overflow-x: clip;
}
#contactoF2 {
    background-image: url("../images/fondo_formulario_2.jpg");
    background-size: cover;
    background-position: center;
    /* [disabled]margin-top: -20vh; */
    z-index: 8;
	padding: 25px;
	border-radius: 25px;
	position: relative;
	-webkit-box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 30%);
    box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 30%);
}
#contactoF input, #contactoF textarea, #contactoF select {
	background-color: rgba(255,255,255,1);
	border-radius: 0px;
	border: none;
	-webkit-box-shadow:inset 0 0 5px 0 rgba(0,0,0,.5);
box-shadow:inset 0 0 5px 0 rgba(0,0,0,.5);
}
#contactoF2 input, #contactoF2 textarea, #contactoF2 select {
	background-color: rgba(255,255,255,.25);
	border-radius: 0px;
	border: none;
	-webkit-box-shadow:inset 0 0 5px 0 rgba(0,0,0,.5);
box-shadow:inset 0 0 5px 0 rgba(0,0,0,.5);
}
#varios {
	background-image: url("../images/fondo_varios.jpg");
	background-size: cover;
}
#botella-contacto {
	position: absolute;
    right: -5vw;
    bottom: -80px;
}
footer {
	background-image: url("../images/fondo_footer.jpg");
	background-size: cover;
}
footer a {
	color: #FFF;
	text-decoration: none;
}
.enviar {
    padding-top: 7px;
    padding-right: 47px;
    padding-left: 47px;
    padding-bottom: 7px;
    background-image: url("../images/fondo_boton_formulario.jpg");
	background-size: 100% 100%;
	border-radius: 10px !important;
    /* [disabled]font-family: 'Anton', sans-serif; */
    color: #FFFFFF;	/*float: right;*/
	-webkit-box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5) !important;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5) !important;
	position: absolute;
	margin-top: 10px;
    left: 20%;
    text-transform: uppercase;
    font-weight: bold;
}
.enviar2 {
    padding-top: 7px;
    padding-right: 47px;
    padding-left: 47px;
    padding-bottom: 7px;
    background-image: url("../images/fondo_boton_enviar_2.jpg");
	background-size: 100% 100%;
	border-radius: 10px !important;
    /* [disabled]font-family: 'Anton', sans-serif; */
    color: #FFFFFF;	/*float: right;*/
	-webkit-box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5) !important;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5) !important;
	position: absolute;
	margin-top: 10px;
    left: 20%;
    text-transform: uppercase;
    font-weight: bold;
}
#alemana {
	z-index: 1;
    top: 20%;
    width: 20%;
    left: 25%;
}
#mexicana {
	z-index: 1;
    bottom: 50%;
    width: 20%;
    right: 25%;
}
#envase {
	top: 10%;
    left: 25%;
    z-index: 2;
    width: 35%;
}
@media only screen AND (max-width: 844px){
	#cabecera {
		position: relative !important;
		background-color: #000 !important;
	}
	.ocultar {
		display: none;
	}
	#formulario-superior {
		position: relative;
		width: 95%;
    left: 3%;
	}
}



















.textos {
    width: 70%;
    padding: 0px;
    margin: 0px;
}

.botones{
    width: 30%;
    height: 100%;
    margin: 0px;
    display: flex;
    justify-content: center;
}

.bloquegeneral{
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0px;
    display: flex;
    align-items: center;
    background: linear-gradient(89deg, #672479 0%, #B156AA 100%);
}

.texto1{
    color: white;
    font-size: 35px;
    font-family: ITC Avant Garde Gothic Std;
    font-weight: 300;
    line-height: 38.50px;
    margin: 0px;
    padding: 0px;
}

.texto2{
    color: white;
    font-size: 60px;
    font-family: ITC Avant Garde Gothic Std;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 73.20px;
    margin: 0px;
    padding: 0px;
}


a.boton1{
    display: block;
    margin: 0;
    padding-left: 42px; 
    padding-right: 42px; 
    padding-top: 33px; 
    padding-bottom: 33px; 
    color: white;
    text-decoration: none;
    font-size: 30px;
    font-family: ITC Avant Garde Gothic Std;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(87deg, #FF8F02 0%, #FFA510 100%); 
    border-radius: 15px; 
    border-left: 0.50px white solid; 
    border-top: 0.50px white solid; 
    border-right: 0.50px white solid; 
    border-bottom: 0.50px white solid; 
    animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}

a.boton1:hover{
    display: block;
    margin: 0;
    padding-left: 42px; 
    padding-right: 42px; 
    padding-top: 33px; 
    padding-bottom: 33px;
    color: #0279E8;
    text-decoration: none;
    font-size: 30px;
    font-family: ITC Avant Garde Gothic Std;
    font-weight: 700;
    text-transform: uppercase;
    background: white; 
    border-radius: 15px; 
    border-left: 0.50px white solid; 
    border-top: 0.50px white solid; 
    border-right: 0.50px white solid; 
    border-bottom: 0.50px white solid; 
    animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}

@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
  }
}



@media screen and (max-width: 600px){

    .textos {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    
    .botones{
        width: 1000%;
        height: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
    }
    
    .bloquegeneral{
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0px;
        display: flex;
        flex-wrap:wrap; 
        background: linear-gradient(89deg, #672479 0%, #B156AA 100%);
    }
    
    .texto1{
        text-decoration: none; 
        text-align:center;
        color: white;
        font-size: 21px;
        font-family: ITC Avant Garde Gothic Std;
        font-weight: 300;
        line-height: 38.50px;
        margin: 0px;
        padding: 0px;
    }
    
    .texto2{
        text-decoration: none;
        text-align:center;
        color: white;
        font-size: 30px;
        font-family: ITC Avant Garde Gothic Std;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 35px;
        margin: 0px;
        padding: 10px 0px 40px 0px;
    }
    
    
    a.boton1{
        display: block;
        margin: 0;
        padding-left: 32px; 
        padding-right: 32px; 
        padding-top: 23px; 
        padding-bottom: 23px; 
        color: white;
        text-decoration: none;
        font-size: 21px;
        font-family: ITC Avant Garde Gothic Std;
        font-weight: 700;
        text-transform: uppercase;
        background: linear-gradient(87deg, #0279E8 0%, #019DEB 100%); 
        border-radius: 15px; 
        border-left: 0.50px white solid; 
        border-top: 0.50px white solid; 
        border-right: 0.50px white solid; 
        border-bottom: 0.50px white solid; 
        animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
    }
    
    
    @keyframes borderPulse {
        0% {
          box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
        }
        100% {
          box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
        }
      }

    
}






@media only screen AND (max-width: 414px){
	#rana {
	left: -55%;
    width: 157%;
	}
	.enviar, .enviar2 {
		left: 8%;
	}
}