#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_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-width: 0px;}
.ca .st0 { opacity: 1;}
.en #gen_btn_umami circle{fill:#fff;} .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; } .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%;
}
}