/* CSS Document */


#ACIDO, #SECO, #AFRUTADO, #LACTICO, #PICANTE, #AHUMADO, #UMAMI, #AMARGO, #FUERTE, #DULCE, #ACIDO_resp, #SECO_resp, #AFRUTADO_resp, #LACTICO_resp, #PICANTE_resp, #AHUMADO_resp, #UMAMI_resp, #AMARGO_resp, #FUERTE_resp, #DULCE_resp{opacity:0; position: relative; z-index: -1; display: none;}

#planeta_gen_cont, .cocktails_row, #planeta_gen_cont_resp, .cocktails_row{position: relative; width: 100%; height: 100%;}

#planetas_row .hide_cocktails{position: absolute; top:25%; height: 500px; width: 420px;  z-index: 1; right: -35%}
#planetas_row .cocktails_row, #planetas_row_resp .cocktails_row{position: relative; }
#planetas_row .cocktail-cont, #planetas_row_resp .cocktail-cont{opacity: 0; z-index: -10;position: absolute; top: 0;}
#planetas_row .cocktail-cont, #planetas_row_resp .cocktail-cont{opacity: 0; z-index: -10;position: absolute; top: 0;}
#gen-btn-acido{position: relative; z-index: 99}

.planetas{position: relative; z-index: 2;max-width: 980px; margin: 0 auto;}

#gen_btn_amargo, #gen_btn_seco, #gen_btn_afrutado, #gen_btn_lactico, #gen_btn_ahumado, #gen_btn_umami, #gen_btn_fuerte, #gen_btn_picante, #gen_btn_dulce, #gen_btn_acido{cursor: pointer}

/*#gen_btn_amargo:hover, #gen_btn_seco:hover, #gen_btn_afrutado:hover, #gen_btn_lactico:hover, #gen_btn_ahumado:hover, #gen_btn_umami:hover, #gen_btn_fuerte:hover, #gen_btn_picante, #gen_btn_dulce:hover, #gen_btn_acido:hover{transform: rotate(360)}*/

#gen_btn_umami .c_blanco, .ca #gen_btn_umami circle{fill:white;}

#svg_p_esc .st0{opacity: 1;}

#gen_btn_picante .st21, #PICANTE .st21{fill:white; stroke:none;}


#UMAMI .st21{fill: white;stroke: none;}

.st24 {fill: #fff !important;}

#DULCE .st25{    /* stroke: #2b2929; */ stroke-width: 0px;}

.ca .st0 { opacity: 1;}

.en #gen_btn_umami circle{fill:#fff;}

/*** detalle cocktails ***/

.cocktail-cont{display: flex; width: 550px; background-color: #fff; border: 5px solid #000;position:absolute; left: 35%; height: 330px;  max-height: 320px;}
.cocktail-cont .anima_cont_img, .cocktail-cont .anima_cont_txt{width: 50%; }

.cocktail-cont .anima_cont_img img{object-fit: cover; height: 100%}

.cocktail-cont .anima_cont_img {border-right: 5px solid #000;}

.cocktail-cont .anima_cont_txt{padding: 20px; border-bottom: solid 5px #000;height: 256px; font-size: 15px; }

.cocktail-cont .anima_cont_txt em {
    margin-top: 10px;
    display: block;
    font-size: 13px;
}

.cocktail-cont .coctel-cat{
	position: absolute;
    bottom: 15px;
    right: 0;
    width: 50%;
    text-align: center;
	text-transform: uppercase;
	font-size: 14px;
}

.anima_cont_txt h3{
	font-family: "Libre Baskerville", Sans-serif;
    font-weight: 400;
    font-style: italic;
	/*text-transform: capitalize;*/
} 

/*.anima_cont_txt h3:first-letter{text-transform: uppercase;}*/
.en .st0 {
    	opacity: 1;
	}

@media screen and (max-width: 1024px) and (min-width:768px){
	#planetas_row_resp .hide_cocktails {
    position: absolute;
    height: 500px;
    width: 320px;
    z-index: -1;
    right: 0;
    top: 0%;
    left: 55%;
}
	
	#planetas_row_resp .cocktail-cont{width: 340px; flex-flow: column; height: auto; max-height: none;}
	
	#planetas_row_resp.cocktail-cont .anima_cont_img, 
	#planetas_row_resp .cocktail-cont .anima_cont_txt{width:100%; }
	
	#planetas_row_resp .cocktail-cont .anima_cont_txt{height: auto;}
	
	#planetas_row_resp .cocktail-cont .anima_cont_img{border: none;width:100%; height: 350px; overflow: hidden;}
	
	#planetas_row_resp .cocktail-cont .coctel-cat{position: static; width: 100%;  padding: 10px 0;}
	
	.close_resp {
		position: absolute;
		right: 0;
		color: #fff;
		font-weight: bold;
		font-size: 25px;
		padding-right: 5px;
	}
	
	.close_resp button#condal-close_btn {
    color: #fff;
    border-color: #fff;
}
	
	.cocktail-cont .anima_cont_img img{
		object-position: center;
    	height: 100%;
	}
	
}

@media screen and (max-width: 767px){
	
	#section_planetas, planeta_gen_cont_resp{overflow: hidden;}


	
	.btn_close{color: #fff; font-weight: bold;border: solid 2px #fff; padding: 0.5em 0.6em; margin: 0 -6px; }
	#planetas_row_resp .hide_cocktails {
    position: absolute;
    height: 500px;
    width: 320px;
    z-index: -1;
    right: 0;
    top: 0%;
    left: 88%;
}
	
	#planetas_row_resp .cocktail-cont{width: 340px; flex-flow: column; height: auto; max-height: none;}
	
	#planetas_row_resp.cocktail-cont .anima_cont_img, 
	#planetas_row_resp .cocktail-cont .anima_cont_txt{width:100%; }
	
	#planetas_row_resp .cocktail-cont .anima_cont_txt{height: auto;}
	
	#planetas_row_resp .cocktail-cont .anima_cont_img{border: none;width:100%; height: 350px; overflow: hidden;}
	
	#planetas_row_resp .cocktail-cont .coctel-cat{position: static; width: 100%;  padding: 10px 0;}
	
	.close_resp {
		position: absolute;
		right: 0;
		color: #fff;
		font-weight: bold;
		font-size: 25px;
		padding-right: 5px;
	}
	
	.cocktail-cont .anima_cont_img img{
		object-position: center;
    	height: 100%;
	}
}