/*ini bootstrap*/






/*end bootstrap*/

#cookie-policy-overlay {background-color:rgba(0,0,0,0.9);z-index:9999;top:3000px;left:0;right:0;width:100%;height:100%;cursor:pointer; box-sizing: content-box;position:absolute;}
#cookie-policy {width:100%;position:fixed;bottom:0;background-color:#FFDE00;text-align:center;color:#000;z-index:20;display:none;}
#cookie-policy .cp-content {width:985px;text-align:left;margin:20px auto 20px auto;}
#cookie-policy .cp-content .cp-close {float:right;margin-top:15px;cursor:pointer;background-color:#000;padding:5px 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size:13px;color:#ffffff;}
#cookie-policy .cp-content .cp-close:hover {background-color:#000000;}
#cookie-policy .cp-content h6 {font-weight:bold;font-size:16px;margin-bottom:5px;}
#cookie-policy .cp-content p {line-height:18px;font-size:13px;max-width:860px;color:#000;}
#cookie-policy .cp-content p a {color:#000;font-weight:bold;text-decoration:underline;}
#cookie-policy .cp-content p a:hover {text-decoration:none;}

@media (max-width: 1024px) {
    #cookie-policy .cp-content {width:100%;padding:0 10px;}
}

.ui-autocomplete {z-index:99999999;}
.ui-autocomplete li {font-size:14px;}

* {background-repeat:no-repeat;}

ul {padding-left:0;}
ul li {list-style: none;}

a, 
button span,
a:hover .arrow,
a:hover strong,
a:hover em,
.owl-prev,
.owl-next,
button,
.button .name,
.hef {-moz-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;	-o-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out;} 
button .spin {-moz-transition:none; -webkit-transition:none;	-o-transition:none; -ms-transition:none; transition:none;}
.button .border {-moz-transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out;	-o-transition:all 0.1s ease-out; -ms-transition:all 0.1s ease-out; transition:all 0.1s ease-out;} 

.nomaxwidth {max-width:inherit !important;}


html {
position: relative;
min-height: 100%;
}
html,
body {
  background-color:#000000;
/*height: 100%;*/
/*overflow-x: hidden;*/
}

body {-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;-o-font-smoothing: antialiased;}
body {font-family: 'Nunito', sans-serif;color:#fff; font-weight: 500}

body {
 background-position: center top;
 background-size: 100% auto;
}


strong {
  font-weight: 900;
}




body,
p,
li {font-size:18px;color:#fff;  letter-spacing: 0px;}
a {color:#fff; }
a:hover,
a:focus{text-decoration:none !important;color:#fff; }

.opacity0 {opacity: 0;}
.opacity1 {opacity: 1;}


#logo_wrapper {
padding:30px 20px; 
}


.horoscopo #logo_wrapper {
  padding:30px 20px!important; 
  }
  
  

@media (max-width:480px) {
  #logo_wrapper {
    padding:20px 20px; 
  }
}

@media (max-width:768px) {
.logo_footer {
  width:70px;
}
}
.navbar-collapse {background:transparent;}



.nav-link {padding:0 30px !important;color:#C1027B !important;text-transform: uppercase;font-size:21px;}
.nav-link:hover {color:#009DE0 !important;}

.navbar-light .navbar-toggler {border-color:#C1027B !important;}
.navbar-light .navbar-toggler-icon {background-image:none;font-size:24px;color:#C1027B;line-height:35px;}
.navbar-light .navbar-toggler-icon:before {content:'\f0c9';font-family: 'FontAwesome';}
.navbar-collapse {z-index:10;}
.navbar .navbar-brand {display: none;}

.btn {border-radius: 0px;background-color:#1e99a6;color:#fff;padding:6px 40px 5px 40px;text-transform: uppercase;font-size:20px;letter-spacing: 0; cursor: pointer;font-weight: 700;}
.btn:hover {background-color:#e03366;color:#fff;}
.navbar-brand{text-align: center; display: block; margin:0 auto; max-width: 250px}


#header_wrapper {left:0;width:100%;z-index:100; max-width: 100%;margin:0 auto; position: relative;}
#content {padding-top:0px; max-width: 600px; width:100%; margin:0 auto;  display: flex;
  justify-content: center;
  align-items: center; min-height: calc(80vh - 129px); z-index: 99;  position: relative}

.resultado.gracias #content{padding-bottom: 50px; align-items: start;}

#header_wrapper .logo_inner{margin: 0 auto; text-align: center}
.Oswald,
#cookie-policy * {font-family: 'Nunito', sans-serif;font-weight:600;letter-spacing: 0;}

#footer .logo_footer{max-height: 70px; margin-bottom:30px}
#footer {text-align: center;padding:20px 0px; position: relative;  z-index: 98}
#footer .legal {font-size:13px;line-height:20px;letter-spacing: 0;color:#ffffff; font-family: 'Nunito', sans-serif; padding: 10px; margin:0 auto; }
#footer .legal a {text-decoration: underline;font-weight:700;color:#ffffff; }
#footer .recordar {background-color:#BB0234;padding:60px 0 60px 0;font-size:26px;line-height: 20px;color:#5F2617; letter-spacing: 1px;margin-bottom:20px;position: relative;}
#footer .recordar img {margin-top:3px;}
#footer .footer_donettes {position: absolute;left:-4%;top:20%;max-width:26%;}
#footer .footer_castillo {position: absolute;right:4%;bottom:0;height:90%;}

#footer .bases_legales {font-size:30px; padding-bottom: 40px}
#footer .bases_legales a{text-decoration: none; }

#footer .link_legales{padding-top: 20px}
#footer .link_legales a,#footer .link_legales span, #footer .link_legales .copyright{font-size:13px; color:#ffffff;  text-transform: none; display: inline-block; padding: 5px}
#footer .link_legales .perretes{margin: 0 auto; padding-top: 20px}

#footer .link_legales {
  display: flex;
  gap:30px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width:768px) {
  #footer .link_legales {
    display: block;
  }

  #footer .link_legales a,
  #footer .link_legales span {
    display: block;
  }
}

.boogaloo{font-family:'boogalooregular', sans-serif;}

.copyright {
  margin-top:20px;
  font-size: 12px;
  font-weight: 700;
}

body {}
#footer { margin: 0 auto}
body.home {}
.home #footer {}
.home #footer .legal {}

#cms {padding:40px 0;}
#cms h1 {font-size:28px;color:#fff}
#cms h2 {font-size:18px;color:#fff}
#cms p,
#cms li,
#cms td,
#cms th {font-family: 'Nunito', sans-serif;font-size:14px; color:#fff}


#home {text-align: center;padding-top:0px;position: relative;  ;

}


/*

#producto .bola1 {position: absolute;left:0;top:0;}
#producto .bola2 {position: absolute;right:0;top:0;}
*/

.clear {clear: both;}

.botones {margin-top:40px;}


#footer_premio1,
#footer_premio2 {position: absolute;bottom:50%;}
#footer_premio1 {right:14vh;width:18vw;}
#footer_premio2 {left:20px;width:32vw;}

#comoparticipar {text-align: center;}
.comoparticipar_title {max-width:40vw;}
#comoparticipar .btn {font-size:26px;padding: 6px 10px 5px 10px;width:100%;margin-top:60px;}
#comoparticipar .btn.last {display: none;}

#codigo {text-align: center;background-size:100% auto; padding-top:0px;color:white;}
.codigo_title {max-width:50vw; padding-bottom:30px}
#codigo form {max-width:640px;margin:20px auto 0 auto;}
#codigo .box {position: relative;}
#codigo label {color:#000;font-size:24px;text-transform: uppercase;margin-bottom:0;font-family: 'Nunito', sans-serif;}
#codigo input[type="text"],
#codigo input[type="email"],
#yuju input[type="text"],
#yuju input[type="email"] {border:0px;border-radius: 0px;font-size:20px;line-height:30px;font-weight:400; color:#000 !important}
#codigo input[type="text"],
#yuju input[type="text"]{background:#fff;border:0;border-bottom:0px solid white;font-weight: 600;margin-top:50px}
#codigo  p {
  color: white;
  font-weight: 600;
}


#codigo .row_legal {margin-top:30px; text-align: left}
#codigo .row_legal label {font-size:14px;font-weight:700;text-transform: none;letter-spacing: 0;color:#66468f;}
#codigo .row_legal label a {text-decoration: underline; color:#fff}
#codigo button.btn {margin-top:30px}

#codigo ::-webkit-input-placeholder,
#yuju ::-webkit-input-placeholder { color: #fff; text-transform: none}
#codigo :-ms-input-placeholder ,
#yuju :-ms-input-placeholder  { color: #fff; text-transform: none}
#codigo ::placeholder,
#yuju ::placeholder { color: #000; text-transform: none}


#participar{background-color:#ffffff; text-align: center; color:#66478f; font-size: 28px; line-height: 30px; padding-top:60px; padding-bottom: 370px}
#participar .paso{padding-top:50px;}
#participar .paso .txt{padding-top: 20px}




#resultado {text-align: center;padding:10px 0px;background-size:100% auto;}
.resultado_title {max-width:50vw;margin-bottom:60px;}
#resultado .introduce {text-align: center;font-size:24px;margin-top:20px;margin-bottom:20px;}
#resultado .felicidades_img {margin-top:10px;}
#resultado form {text-align: left;max-width:500px;margin:0 auto 50px auto;}
#resultado form .buttons {margin-top:30px;}

#resultado .prueba {font-size:22px;margin:60px auto 20px auto;}

#resultado .title{color:#ffffff; font-size: 35px; line-height: 1.1em; text-align: center; text-transform: none}
#resultado .txt{color:#66478f; font-size: 35px; line-height: 40px; text-align: center; padding-top:50px; max-width: 550px; margin:0 auto; padding-bottom: 60px}

.resultado .banner-whatsapp{padding-top:60px}

.felicidades_desc_mob {display: none;}

#share {text-align: center;margin:0 auto;color:#002D7E;font-size:28px;position: absolute;left:0;right:0;top:-50%;}
#share > div {font-family: 'Nunito', sans-serif;}
#share li {display: inline-block;margin:0 10px;font-size:32px;}
#share li a {background-color:#002D7E;color:#fff;width:50px;height:50px;text-align: center;display: block;border-radius: 50%;}
#share li a .fa {line-height: 50px;}

#yuju {text-align: center;padding:20px 0 0 0;background-size:100% auto;}
.yuju_title {max-width:50vw;margin-bottom:60px;}
#yuju .prueba {font-size:22px;margin:10px auto 20px auto;max-width:600px;}

#yuju .title{color:#ffffff; font-size: 60px; line-height: 65px; text-align: center; text-transform: uppercase; padding-bottom: 30px}

#yuju .tick_correcto{padding-top: 50px; padding-bottom: 20px}

#yuju #inline_rrss{display:none; text-align: center!important; padding-top: 30px}
#yuju #inline_rrss ul li{display: inline-block; padding:0px 10px}
#yuju #inline_rrss .ico a{font-size: 40px; color:#ffffff; background-color: #66478f; border-radius: 30px; width: 60px; height: 60px; display: block; line-height: 60px; padding-top: 8px}
#yuju #inline_rrss .ico a:hover{background-color: #e03366}

#yuju .txt{padding: 20px;  margin:0 auto 20px auto; font-family: 'Josefin Sans', sans-serif;}

#yuju .txt.email{padding: 20px; margin:0 auto; font-size:20px}

#yuju .txt.fecha{padding: 20px;  margin:0 auto; font-size:16px; text-align: left; line-height: 20px}
#yuju .txt span, #yuju .txt a{color:#FFDE00}

.pack{padding-bottom:20px}
.sofa{padding-bottom:20px}

#ganadores {text-align: center;padding:20px 0 0 0;}
.ganadores_title {max-width:30vw;margin-bottom:20px;}

.errors {color:black;margin-bottom:10px;font-weight: 700;
  background: white;
  border-radius: 10px;
  padding: 10px;
  color: red;
  margin-top: 30px;
}

.cama {max-width:760px;}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #704593;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='password']:focus,
textarea:focus {
outline: none;
box-shadow:none !important;
}

.input_lbl_wrapper {position: relative;}
.input_lbl_wrapper label {position: absolute;z-index:2;top:10px;color:#ffffff;font-weight:600;font-size:18px;-moz-transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;	-o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out; text-transform: none}
.input_lbl_wrapper input[type="text"],
.input_lbl_wrapper input[type="email"],
.input_lbl_wrapper input[type="password"] {padding:11px 10px 10px 10px;font-weight:700;border:0;font-size:18px;height:50px;border-radius: 0;color:#ffffff;border-bottom:1px solid #fff;}
.input_lbl_wrapper label,
.input_lbl_wrapper input[type="text"],
.input_lbl_wrapper input[type="email"],
.input_lbl_wrapper input[type="password"] {padding-left:0px;}
.input_lbl_wrapper.focus label {bottom:inherit;top:0;font-size:11px;text-transform: uppercase;}
.input_lbl_wrapper.focus input[type="text"],
.input_lbl_wrapper.focus input[type="email"],
.input_lbl_wrapper.focus input[type="password"] {padding-bottom:0;}
.input_lbl_wrapper ::-webkit-input-placeholder { color: #ffffff;}
.input_lbl_wrapper :-ms-input-placeholder { color: #ffffff;}
.input_lbl_wrapper ::placeholder { color: #ffffff;}


.form-check label {
  font-weight: 600;
}

.bimboapi_content .text-muted {
  font-size: 13px;
}

.select_lbl_wrapper select {background:transparent;border:0;border-bottom:2px solid #fff;padding:11px 10px 10px 10px;font-size:20px;height:50px;border-radius: 0;-webkit-appearance: none;-moz-appearance:none; appearance: none;width:100%;color:#fff;}


.social_links {margin-bottom:0;}
.social_links li { margin-right: 5px; display: inline-block;}
.social_links a {font-size: 26px; color: #fff !important;display: block;width: 38px; height: 38px;text-align: center;line-height: 38px;border-radius: 50%;}
.social_links a > .fa {line-height: 38px;}
.social_links .facebook {background-color: #3E5C9A;}
.social_links .twitter {background-color: #29A9E1;}
.social_links .instagram {background: rgba(245,237,83,1);background: -moz-linear-gradient(45deg, rgba(245,237,83,1) 0%, rgba(228,129,68,1) 25%, rgba(208,86,102,1) 42%, rgba(200,66,120,1) 50%, rgba(25,43,250,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(245,237,83,1)), color-stop(25%, rgba(228,129,68,1)), color-stop(42%, rgba(208,86,102,1)), color-stop(50%, rgba(200,66,120,1)), color-stop(100%, rgba(25,43,250,1))); background: -webkit-linear-gradient(45deg, rgba(245,237,83,1) 0%, rgba(228,129,68,1) 25%, rgba(208,86,102,1) 42%, rgba(200,66,120,1) 50%, rgba(25,43,250,1) 100%); background: -o-linear-gradient(45deg, rgba(245,237,83,1) 0%, rgba(228,129,68,1) 25%, rgba(208,86,102,1) 42%, rgba(200,66,120,1) 50%, rgba(25,43,250,1) 100%); background: -ms-linear-gradient(45deg, rgba(245,237,83,1) 0%, rgba(228,129,68,1) 25%, rgba(208,86,102,1) 42%, rgba(200,66,120,1) 50%, rgba(25,43,250,1) 100%); background: linear-gradient(45deg, rgba(245,237,83,1) 0%, rgba(228,129,68,1) 25%, rgba(208,86,102,1) 42%, rgba(200,66,120,1) 50%, rgba(25,43,250,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ed53', endColorstr='#192bfa', GradientType=1 );}



.no_mobile{display: block}
.no_desktop{display: none}
.no_brdesktop{display: none}

.amarillo{color:#feda00}




.bimboapi_box form{background-color: transparent !important; padding:20px;border-radius: 15px;}
#resultado form .buttons{text-align: center}
.bimboapi_box .subtitle, .title_big{color:#ffffff;}
.bimboapi_content .text-muted{color:#ffffff!important}
.bimboapi_content .bimboapi_form_text_legal p, .bimboapi_content .formar{color:#ffffff!important}
.title_big {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.1;
}

.title_big.large {
  font-size: 64px;
  color:#ffd000;
}

@media (max-width: 768px) {
  .title_big.large {
    font-size: 42px;
  }
}

.input_radio_lbl_wrapper li{color:#ffffff}

.bimboapi_form_sms_intro p{color:#ffffff}
.bimboapi_content, .bimboapi_content p a, .bimboapi_content .form-check a, .login_link a{color:#ffffff}
.bimboapi_content .login_link a, .bimboapi_content .forgot_link a, .bimboapi_content .signup_link a{color:#ffffff}

.bimboapi_content .btn{border:0px solid #ffffff!important; border-radius: 10px!important; background-color: #E1261C!important; color:#ffffff!important;font-weight: 700;}
.bimboapi_content .btn:hover{background-color: #000!important; color:#fff!important}
.bimboapi_content .login_link a:hover, .bimboapi_content .forgot_link a:hover, .bimboapi_content .signup_link a:hover{color:#ffffff!important}
.input_radio_lbl_wrapper li.selected span{color:#ffffff!important}
.input_lbl_wrapper .input_value, .input_radio_lbl_wrapper ul{color:#ffffff!important}
.input_radio_lbl_wrapper{border:1px solid #ffffff}
.input_radio_lbl_wrapper li::after{color:#ffffff}
.input_lbl_wrapper.focus select{color:#ffffff!important}
.form-control:focus{background-color:transparent}

@media (max-width: 1300px) {
    .logo_center {height:90px;}
   
    #home_logo {max-width:450px;}
   

}

@media (max-width: 1200px) {
  .section_title {height:100px;}
 
  .home_steps .text {font-size: 22px;line-height: 30px;}
  .home_steps .step4 .text .podras {font-size: 26px;line-height: 33px;}
  
}

@media (max-width: 1100px) {
  .logo_center {height:80px;}
  /*#header_wrapper {height: 115px;}*/

}
/*mobile*/
@media (max-width: 991px) {
  #menu {padding:0;}
    .no_mobile{display: none}
    .no_desktop{display: block}
  #logo_wrapper {}
  .navbar-brand {display: block;}
 
  .navbar .navbar-brand {display: block;}
  .logo_center_item {display: none;}
  .nav-link {padding:5px 0 !important;}
  .navbar-nav {padding-top:15px;}
  
    
    #participar{padding-bottom: 250px}
#responde {
  position: relative;
  width: 100%;

  background: #feda00;
}

    #responde .responde_img{position: absolute; z-index: 9999; left: 50%; transform: translateX(-50%); margin-top: -170px}
    #responde .txt{padding-top:350px;font-size: 22px;line-height: 28px; max-width: 350px}
    
    #resultado  .title{font-size:50px; line-height: 50px}
    
 #resultado  .txt{font-size: 30px;line-height: 35px; max-width: 450px}
    
    #yuju .title{font-size:50px; line-height: 50px}
    #yuju .tick_correcto{padding-top:30px}
    
    
   
    
  #home {padding-left:10px;padding-right:10px;}
  

  .codigo_title,
  .comoparticipar_title,
  .ganadores_title {max-width:100%;}
  #comoparticipar .btn.first {display: none;}
  #comoparticipar .btn.last {display: block;}
  #comoparticipar .col-sm-4 {padding-bottom:20px;}
  #mapache,
  #amigos {display: none;}

  #resultado .introduce {font-size: 21px;}
  #resultado form label {text-align: left;}
  #share {font-size:21px;top:0;position: relative;}



  .section_title {height:50px;}
  .home_squads {margin-bottom:40px;}
  #home_logo {max-width:350px;}
  #home_peluches,
  #home_libros,
  .step_castillo,
  .bola1, .bola2,
  .footer_castillo {display: none;}
  .producto_spoiler {max-width:90%;}
  #footer .footer_donettes {max-width:60%;margin:0 auto;left:inherit;top:inherit;position: relative;margin-bottom:20px;}
  #footer .recordar {padding:20px 0;}
  #footer .recordar {font-size: 16px;line-height: 20px;}

  .premio_img_1 {display: none;}
  .premio_img_2 {margin-top:20px;}
  .cama {max-width:90%;}
    
    #participar .paso{width: 80%; margin: 0 auto;font-size: 20px; line-height: 25px}
    #participar .paso img{max-width: 70%}
    
    .resultado .banner-whatsapp{padding-top:40px}
}

@media (max-width: 768px) {
  .felicidades_desc {display: none;}
  .felicidades_desc_mob {display: block;}
  #home_logo {max-width:200px;}
  .home_intro .introi3 {margin-bottom: 5px;}
  .home_intro { font-size: 19px;line-height: 22px;margin-bottom:60px;}
  .home_steps {padding-top:15px;}
  .home_steps .step {margin-bottom:25px;}
  .home_steps .num {height:42px;}
  .home_steps .text {font-size: 17px;line-height: 22px;}
  .step_pack_donettes,
  .step_contenedor {max-width:240px;margin:10px auto 0 auto;display: block;}
  .home_steps .text,
  .home_steps .step4 .text {max-width:75%;text-align: left;}
  .home_steps .step4 .num, 
  .home_steps .step4 .text {display: inline-block;vertical-align: top;}
  .home_steps .step4 .text .podras { font-size: 19px;line-height: 21px;}
  #producto .mordisco { font-size: 17px;}
  #producto .mordisco .woo { font-size: 31px; line-height: 32px;}
  #producto .mordisco .es {margin-bottom:15px;}
  #premios .bgdon, #premios .bgdon.right {display: none;}
  #premios .title {font-size: 22px;}
  #premios .premio_tipo {background-image: url(../img/title_premio_tipo_don.png); background-position: center top;background-size:auto 30px;margin-top:15px;padding-top:40px;}
  .premio_img {max-width:200px;}
 
  #premios .viajazo .amar { font-size: 24px;line-height: 24px;}
  #premios .viajazo { font-size: 20px;line-height: 25px;}
  #premios {padding-bottom:0;}
  #codigo .box,
  #yuju .box {padding:0;}

    
  #codigo .box .llama_codigo{right:0px; bottom:-50px}      
    #codigo .box .llama_codigo img{height:120px}
 
  .losentimos_img1 {max-width:200px;margin:20px auto 20px auto;}
  #resultado .introduce {font-size:17px;}
  .input_lbl_wrapper label,
  .input_lbl_wrapper input[type="text"], .input_lbl_wrapper input[type="email"], .input_lbl_wrapper input[type="password"] {font-size:18px;}
  #yuju .prueba {font-size: 17px; line-height: 22px;}
  .home_intro .introi3 {margin:0 auto;}
    
    
     .no_brdesktop{display: block}
.banner-invita .content{font-size:22px; line-height: 25px}
.banner-invita .content .llama_img{margin-top: -50px}
    .banner-invita .content .llama_img{}  
    .banner-invita{padding-bottom: 20px; margin-top: 20px}
  
    .banner-invita.banner-resultado .content .llama-codigo{max-width: 290px; padding: 10px 0px}
    .banner-invita.banner-resultado{padding-bottom: 40px;}
}

@media (max-width: 600px) {
 #responde .txt{padding-top:260px}
    
}


@media (max-width: 500px) {
 #responde .txt{padding-top:150px; margin-bottom: 30px}
    #responde::after{height:150px}
    .banner-invita .content{max-width:500px}
    .banner-invita .content .llama_img{margin-top: -20px; margin-left: 10px}
    .banner-invita.banner-resultado .content .llama_img{margin-left: 0px}
    .btn{font-size: 23px}
}


.social_icons img {
  height: 40px;
  margin:0 5px;
  
}

.social_icons {
	display: flex;
	gap:20px;
	justify-content: center;
	align-items: center;
  display: none;
}

.social_icons a {
	font-size: 30px;
}

.separador {
  max-width: 100%;
}



.page-width {
  max-width: 700px;
  margin:0 auto;
}

#header_wrapper {
  margin-bottom:0px;
}

.btn {
  border-radius:10px;
  background:#E1261C;
  color:white;
  font-weight: 700;
  text-transform: uppercase;

}

.btn:hover {
  background:#000;
}

.slogan {
  font-weight: 700;
  font-size: 16px;
  margin-top:10px;
}



#codigo .box,
#yuju .box {
padding-top:20px;
}

#yuju .box {

}

#yuju {
  padding-top:0;
}

.enhorabuena {
  background:#FFDA00;
  padding:20px 30px;
  border-radius: 15px;
  font-weight: 500;
  margin-bottom:40px;
  font-family: 'Josefin Sans', sans-serif;
}



body {
  overflow-x: hidden;
}


.btn {
  background-image:url('../img/bg_btn.svg');
  border-radius: 5px;
  color:#DB0332;
  font-weight: 800;
  text-transform: none ;
  font-size: 22px;
}

.btn:hover {
  background-image:none;
  background-color:#BB0234 !important;
  color:#EED13C !important;
}

#wrapper {
  padding-bottom:0px;
  min-height: calc(100vh - 129px);
	position: relative;
  z-index: 15;
  overflow: hidden;
}

@media (max-width:1000px) {
  .home #wrapper {
    padding-bottom:0px;
  }
	#wrapper{overflow: hidden}
	
}

.codigo_barras_digitos {
  font-size: 14px;
}
/*
.resultado #header_wrapper {
  display: none;
}
*/

.resultado .container_azul {
  background:#ACD4EE;
}
/*
.resultado {
  background-color:#CB012D;
  background-image:none;
}*/

.gracias_title {
  font-family: 'Neucha', cursive;
  color:#BB0234;
  font-size: 32px;
  margin-bottom:20px;
}

.gracias_subtitle {
  color:#000000;
  margin-bottom:20px;
}

.gracias_subtitle2 {
  color:#ffffff;
  margin-bottom:20px;
  font-weight: 800;
}



.btn,
body .bimboapi_content .btn {
 
  text-transform: uppercase;
  letter-spacing: 1px;
  border-color: #E78AB8 !important;
  background-color: #E78AB8 !important;
  background-image:none;
  border:0 !important;
  font-size: 22px !important;
  color: #ffffff !important;
  padding: 10px 40px 10px 40px !important;
  border-radius: 40px !important;
  font-family:"DrSlab-Base";
}

.btn:hover,
body .bimboapi_content .btn:hover {
  background-color: #ffffff !important;
  color: #E78AB8 !important; 
}


.btn.btn_home{ border-color: #FA2F2C !important;
  background-color: #FA2F2C !important; color: #fff !important;}

.btn.btn_home:hover{
  background-color: #ffffff !important;
  color: #FA2F2C !important;
}


.form-floating>.form-control {
  font-weight: 700;
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
  background:white !important;
  border-color:white !important;
}

body .bimbo_api_title {
  font-family: "DrSlab-Base",sans-serif;
font-size:18px;
    text-align: center;
  
}

.title_big {
  font-family: "DrSlab-Base",sans-serif;
  letter-spacing: 2px;
}


.logo_bimbo {
  width: 100px;
}

@media (max-width:480px) {
  .logo_bimbo {
    width: 70px;
  }
}

.logo_donettesxchoco {
  width: 233px;
}

.home.horoscopo .logo_donettesxchoco{width:180px}

@media (max-width:480px) {
  .logo_donettesxchoco {
    width: 100px;
  }
  .home.horoscopo .logo_donettesxchoco{width:180px}
}

.home .logo_donettesxchoco {

}

@media (max-width:1000px) {
  .home .logo_donettesxchoco {
    width: 170px;
  }

  .home.horoscopo .logo_donettesxchoco{width:180px}
}


@media (max-width:1000px) {

}

.home_canjea {
  font-size: 40px;
  line-height: 1.2;
}




.home_premios {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom:20px;
}




#home.page-width {
  max-width: 550px;
 /*margin-top:-100px;*/
  z-index: 99;
}

#home.page-width .inner {
 
  max-width: 550px;
}

@media (max-width:1200px) {
  #home.page-width {
    max-width: 450px;
  }
  
  #home.page-width .inner {

    max-width: 450px;
  }
  
}

@media (max-width:1000px) {
  #home.page-width {
    margin-left:auto;
    margin-top:0;
  }

  #home.page-width .inner {
    margin-left:auto;
  }
}

.saborea{max-width: 300px}

@media (min-width:1001px) {
  .saborea {
    min-height: 106px;
  }
}

.heading {
  font-family: "DrSlab-Base",sans-serif;
}


.bimboapi_content {
  padding:0 !important;
}

.bimbo_api_desc {
  text-align: center;
  margin-bottom:20px;
}


.bimboapi_content .form-floating>.form-control {
  border-radius: 30px;
}

input.codigo {
  border-radius: 30px !important;
  font-family: "DrSlab-Base",sans-serif;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  padding:10px;
  margin-top:40px !important;
  margin:0 auto;
  width: 360px;
}



#codigo button.btn {
  width: 320px;
}

@media (max-width:480px) {
  input.codigo,
  #codigo button.btn {

  }
  
}

#codigo button.btn {
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  padding:10px !important;
}




#box_gracias {

  color:white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:30px;

  text-align: center;
  position: relative;
  margin:0 auto;
	
}

@media (max-width:780px) {
  #box_gracias {
   
  }
}

#box_gracias .gracias{max-width: 160px; margin:0 auto}

#box_gracias.ganador {
  gap:10px;
	
}

#box_gracias .heading {
  font-size: 35px;
  line-height: 1;
  width:320px;
  margin:0 auto
}

@media (max-width:780px) {
  #box_gracias .heading {
    font-size: 28px;
  }
}

#box_gracias .heading.premio {
  font-size: 26px;
  line-height: 1.2em;
}

@media (max-width:780px) {
  #box_gracias .heading.premio {
    font-size: 18px;
  }
}

#box_gracias .body {
  font-family: "DrSlab-Base",sans-serif;
  font-size: 19px;
	line-height: 1.2;
  width:320px;
  margin:0 auto
}

@media (max-width:780px) {
  #box_gracias .body {
    font-size: 18px;
    line-height: 1;
  }
}

#box_gracias .recibiras {
  color:#ffffff;
  font-size: 14px;
  margin-top:10px;
  width:320px;
  margin: 0 auto;
}

@media (max-width:780px) {
  #box_gracias .recibiras {
    font-size: 13px;
    font-weight: 600;
  }
}



@media (max-width:780px) {
	#box_gracias .btn{font-size: 17px!important; padding: 10px 15px 10px 15px !important}
}



@media (max-width:1365px) {
	.resultado.gracias .casa{left:17%}
}


@media (max-width:1300px) {
}


@media (max-width:1024px) {
	.resultado.gracias .casa{left:9%; bottom:30px}
}



@media (max-width:780px) {
	
	#home{display: block}
	.saborea{max-width: 230px}
	#home.page-width{padding-bottom: 560px}
	
	
	

	.bimboapi_form_text_legal{padding-bottom: 140px}
	
	
	
}

.bg_home_inicial{
  background-position: center center;
  background-size: 100%;
  width:100vw;
  height: 100vh;
  position: absolute;
  top:0px;
  left:0px;
  z-index: 2;
  overflow: hidden;
}

.bg_home_inicial .img_back{
  background-image: url(../img/bg_desktop.png);
  background-position: center center;
  background-size: 100%;
  width:100vw;
  height: 100vh;
  position: absolute;
  top:0px;
  left:0px;
}



.bg_home{
  mix-blend-mode: multiply;
  background-position: center center;
  background-size: 100%;
  width:100vw;
  height: 100vh;
  position: absolute;
  top:0px;
  left:0px;
  z-index: 2;
  overflow: hidden;
  opacity:0
}

.bg_home .img_back{
  background-color:#000000;
  background-image: url(../img/bg_desktop.png);
  background-position: center center;
  background-size: 100%;
  width:100vw;
  height: 100vh;
  position: absolute;
  top:0px;
  left:0px;
  transform: scale(1.4);
}


.bg_home2{
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(88,59,131,1) 50%, rgba(0,0,0,1) 100%);
  width:100vw;
  height: 100vh;
  position: absolute;
  top:0px;
  left:0px;
  z-index: 1;
  opacity: 0;
}

.donette_home{width: 327px; position: fixed; transform: translate(-50%,-50%); top:50%; left:50%; z-index:10}

#tsparticles{z-index: 3; position: relative; opacity: 0;}

.home .corazon{position: absolute; top:20%; transform: translateY(-50%); right:-50%; z-index:16; width:173px; transition:all 0.3s ease ;}
.home .corazon:hover{transform: scale(1.1)  translateY(-50%) rotate(5deg);}
.home .billar{position: absolute; top:50%; transform: translateY(-50%); left:-50%; z-index:16; width:149px; transition:all 0.3s ease ;}
.home .billar:hover{transform: scale(1.1)  translateY(-50%) rotate(-15deg);}


#home .titulos{margin-top: -60px; padding-bottom: 20px;}
#home .card_container{position: relative; width:408px; height: 659px; max-width: 100%;}

@media (max-width:1400px) {
  #home .card_container{width:356px; height: 575px;}
}
@media (max-width:1200px) {
  #home .card_container{width:296px; height: 478px;}
}

@media (max-width:1000px) {
  #home .titulos{margin-top: 0px; }
  #home .card_container{width:217px; height: 350px;}
  .home .corazon{display:none}
  .home .billar{display:none}
}

#home .card_horoscopo{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  background-color: transparent;
  transform: translate(50%, 100vh) rotate(5deg) rotateY(0deg)
}

#home .card_horoscopo .front, #home .card_horoscopo .back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
}

#home .card_horoscopo .back{transform: rotateY(180deg);}

#home .card_horoscopo.posicion {
  transform: translate(0) rotate(0deg)
}

#home .card_horoscopo.flipped {
  transform: translate(0) rotate(0deg) rotateY(180deg)
}

#home .card_horoscopo.clickable:hover {
  transform: translate(0) rotate(5deg) rotateY(180deg) scale(1.02);
  opacity: 1;
}

body:has(#home .card_horoscopo.clickable:hover) #home .card_horoscopo.clickable:not(:hover) {
  transform: translate(0) rotate(-5deg) rotateY(180deg) scale(0.9); /* afecta a los otros divs con misma clase menos al q esta hover */
}

body:has(#home .card_container.clickable:hover) #home .card_container.clickable:not(:hover) {
  opacity: 0.7; /* afecta a los otros divs con misma clase menos al q esta hover */
}


@media (max-height:800px) {
  #logo_wrapper{padding: 10px}
  .home_canjea{font-size: 30px}
  .home_premios{font-size: 20px; padding-top:5px!important}

}



@media (max-width:768px) {

  #wrapper{overflow: visible;}
  .home{background: linear-gradient(180deg, rgba(32,5,39,1) 0%, rgba(62,4,77,1) 30%, rgba(32,5,39,1) 50%, rgba(0,0,0,1) 100%);}
.home.horoscopo{background: #000000;}

  .bg_home_mobile{
    background-image: url(../img/bg_mobile.png);
    background-position: top center;
    background-size: 100%;
    width:100vw;
    height: 100vh;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 2;
    overflow: hidden;
  }

  #tsparticles{opacity: 1;}

  .home .cartas{position: absolute; top:0px; transform: translateX(-50%); left:50%; z-index: 15; height: 110vh;  overflow: hidden; overflow-y: visible; width: 100%;}
  .home .cartas{text-align: center;}
  .home .cartas .mano_img{width: 237px; position: absolute; bottom:0px; transform: translateX(-50%) }
  .home .cartas .dedo_img{width: 237px; position: absolute; bottom:0px; z-index: 9; transform: translateX(-50%);}

  .home .cartas .manojo{position: absolute; z-index: 8; bottom:740px; width: 100%;}

  .home .carta_horoscopo{ position: absolute; width:247px; transform: translateX(-100%) rotate(-10deg); left:50%; z-index: 8}
  .home .carta_promocion{ position: absolute; width:247px; transform: translateX(-50%) translateY(-20px); left:50%; z-index: 9;}
  .home .carta_zodiac{ position: absolute; width:247px; transform: translateX(0%) rotate(10deg); left:50%; z-index: 8}

  .home .accordion_cartas{top:0px;position: absolute; z-index: 9; height: calc(100vh + 30px); overflow: hidden; width:100%; margin: 0 auto;max-width: 100%; opacity: 0; z-index:100}
  .home .accordion_cartas .carta_promocion_big{ transform: translateX(-50%); left:50%; position: absolute; z-index: 1; transition: all 0.5s ease-in; cursor: pointer; width:320px}
  .home .accordion_cartas .carta_horoscopo_big{ transform: translateX(-50%); left:50%; position: absolute; z-index: 2; top:475px; transition: all 0.5s ease-in; cursor: pointer; width:320px}
  .home .accordion_cartas .carta_zodiac_big{ transform: translateX(-50%); left:50%; position: absolute; z-index: 3; top:545px; transition: all 0.5s ease-in; cursor: pointer; width:320px}

  .home #footer{display: none;}

  .home.horoscopo #footer{display: block;}
}


.promo #wrapper{width:100%; max-width: 420px; margin:0 auto; min-height: calc(100vh - 70px);}
.promo #footer{background-color:#A871FA ;}
.promo.zodiac-match #footer{background-color:transparent ;}

.promo #footer .link_legales{padding-top: 0px;}
.promo .logo_donettesxchoco{margin-top: 50px;}
.promo.zodiac-match .logo_donettesxchoco{margin-top: 0px;}
.promo .header_img{position: absolute; top:0px; left: 0px; width: 100%;}
.promo .header_img img{position: absolute; transform: translateY(-100%);  transition: all 0.5s;}


.promo .contenido{position: relative;}
.promo .contenido .title{font-size:40px; width: 300px; margin:0 auto; line-height: 1.1em;}

.promo.home_promo #wrapper{background-image: url(../img/bg_estrellas_home.png); background-repeat: no-repeat; background-size: 100%; background-position: center center;}
.promo.home_promo.zodiac-match{background-color:#68339D }



.promo .contenido .subtitle{font-size:30px; margin:0 auto; line-height: 1.1em;}
.promo .contenido .txt{font-size:20px; margin:0 auto; line-height: 1.1em; width:100%; max-width: 260px; }
.promo .contenido .home_elementos{max-width: 330px;}

.promo.home_promo .bodegon{height: 348px;}
.promo.home_promo .bodegon .home_fuego_bodegon, .promo.home_promo .bodegon .home_aire_bodegon, .promo.home_promo .bodegon .home_agua_bodegon, .promo.home_promo .bodegon .home_tierra_bodegon{position: absolute; transform: translateX(-150%);  transition: all 0.5s;}

.promo.home_promo .footer_img{height: 148px; overflow: hidden; position: relative;}
.promo.home_promo .footer_img img{position: absolute;  transform: translateY(300px);  transition: all 0.5s;}

.promo.resultado #wrapper{background-image: url(../img/bg_estrellas_home.png); background-repeat: no-repeat; background-size: 100%; background-position: center center;}
.promo.codigo #wrapper{background-image: url(../img/bg_estrellas_home.png); background-repeat: no-repeat; background-size: 100%; background-position: center center;}

.promo.resultado .footer_img{position: absolute; bottom:0px;}

#codigo .box .titulo{font-size:28px; margin:0 auto; line-height: 1.1em;max-width: 350px;}
#codigo .box .subtitulo{font-size:18px; margin:0 auto; line-height: 1.1em; max-width: 300px;}

.tierra_color{color:#A8D42E}
.fuego_color{color:#F1C45F}
.aire_color{color:#573BFF}
.agua_color{color:#A3EDFD}



@media (max-width:480px) {
  .promo .logo_donettesxchoco{width:213px}
}


.horoscopo .bg_horoscopo{background-image: url(../img/bg_horoscopo.png); background-repeat: no-repeat; background-size: 100%; background-position: center center; width:353px; height: 654px; margin:0 auto; margin-top:-60px; position: relative; overflow: hidden;}


.horoscopo .bg_horoscopo .btn.home_btn{font-size: 17px!important; position: absolute; bottom:45px; z-index: 9; left:50%; transform: translateX(-50%); padding: 10px 30px 10px 30px !important; width: 290px;}


.horoscopo .bg_horoscopo .bg_estrellas{background-image: url(../img/bg_estrellas.png); background-repeat: no-repeat; background-size: 95%; background-position: center center; position:absolute; height:100%; width: 100%; top:0px}

.horoscopo .bg_horoscopo .title{position: absolute; top:120px;left:50%; transform: translateX(-50%); font-size:35px; text-transform: uppercase;}
.horoscopo .bg_horoscopo .donette_horoscopo{max-width: 115px; position: absolute; top:54%; left:50%; transform: translate(-50%,-50%) scale(0.3) rotate(-30deg); z-index: 9;}
.horoscopo .bg_horoscopo .back_horoscopo{max-width: 300px; position: absolute; top:53%; left:50%; transform: translate(-50%,-50%) scale(5) rotate(180deg); z-index: 7}
.horoscopo .bg_horoscopo .back_horoscopo2{max-width: 300px; position: absolute; top:53%; left:50%; transform: translate(-50%,-50%) scale(1) rotate(-30deg); z-index: 8}

.horoscopo .nuevas{font-size: 18px; line-height: 1.1em; margin:0 auto; width: 100%; text-align: center;}

.horoscopo.prediccion ##wrapper{overflow: hidden}
.horoscopo.prediccion .bg_horoscopo .subtitle{font-size:28px; text-transform: uppercase; text-align: center;max-width: 300px; margin: 0 auto; line-height: 1.1em;}

.horoscopo.prediccion .bg_horoscopo{overflow: visible; text-align: center;}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo{}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila{position: relative; height: 170px;}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item{width: 135px; position: absolute; cursor: pointer; transition: all 0.5s; opacity: 0}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item:nth-child(1){left:-5%; rotate:-10deg!important; top:10px}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item:nth-child(2){left:20%; rotate:-3deg!important;}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item:nth-child(3){left:45%; rotate:3deg!important;;}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item:nth-child(4){left:70%; rotate: 7deg !important; top:10px}
.horoscopo.prediccion .bg_horoscopo .grid_horoscopo .fila .item:hover{z-index: 99; scale: 1.2!important;}


body:has(.grid_horoscopo .fila .item:hover) .grid_horoscopo .fila .item:not(:hover) {
  filter: grayscale(100%); /* afecta a los otros divs con misma clase menos al q esta hover */
}

.horoscopo.prediccion .bg_horoscopo .cartas{position: relative; height: 450px; width:100%}
.horoscopo.prediccion .bg_horoscopo .card_container{width:160px; height: 220px; position: absolute; cursor:pointer; transition:all 0.5s;opacity: 0}
.horoscopo.prediccion .bg_horoscopo .card_container.amor{z-index: 3}
.horoscopo.prediccion .bg_horoscopo .card_container.amor .card_horoscopo{rotate:-10deg}
.horoscopo.prediccion .bg_horoscopo .card_container.salud{left:35%; z-index: 6}
.horoscopo.prediccion .bg_horoscopo .card_container.salud .card_horoscopo{rotate:-1deg}
.horoscopo.prediccion .bg_horoscopo .card_container.dinero{left:10%; top:40%; z-index: 1}
.horoscopo.prediccion .bg_horoscopo .card_container.dinero .card_horoscopo{rotate:7deg}
.horoscopo.prediccion .bg_horoscopo .card_container.amistad{left:47%; top:42%; z-index: 2}
.horoscopo.prediccion .bg_horoscopo .card_container.amistad .card_horoscopo{rotate:13deg}


.horoscopo.prediccion .bg_horoscopo .card_container:hover{z-index: 99; scale: 1.2!important;}

.horoscopo.prediccion .bg_horoscopo .card_container2{width:320px; height: 450px; cursor:pointer; transition:all 0.5s;opacity: 0; transform: translateY(50%);}

.horoscopo.prediccion .bg_horoscopo .card_horoscopo{
  width:170px; height: 232px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  background-color: transparent;
  /*transform: translate(50%, 100vh) rotate(5deg) rotateY(0deg)*/
}

.horoscopo.prediccion .bg_horoscopo .card_horoscopo.carta_grande{width:340px; height: 463px;}

.horoscopo.prediccion .bg_horoscopo .card_horoscopo .front, .horoscopo.prediccion .bg_horoscopo .card_horoscopo .back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
}

.horoscopo.prediccion .bg_horoscopo .card_horoscopo .back{transform: rotateY(180deg);}

.horoscopo.prediccion .bg_horoscopo .card_container2 .back .contenido{position: absolute; width:65%; font-size:20px; text-align: center; line-height: 1.2em;}

.horoscopo.prediccion .bg_horoscopo .card_horoscopo.flipped {
  transform: translate(0) rotate(0deg) rotateY(180deg)
}

.horoscopo.prediccion .bg_horoscopo .btn{font-size: 17px!important;}


.horoscopo.prediccion .bg_horoscopo .botones{display: flex; justify-content: center; gap: 10px;}
.horoscopo.prediccion .bg_horoscopo .botones .btn{padding:10px 15px 10px 15px !important; font-size: 15px!important;}
.horoscopo.prediccion .bg_horoscopo .btn.btn_ver_mas{ background-color: #A871FA!important;}
.horoscopo.prediccion .bg_horoscopo .btn.btn_ver_mas:hover{color:#A871FA!important; background-color:#ffffff!important}

.btn{font-weight: inherit!important;}


.promo.zodiac-match .contenido .title{font-size:34px; width: 100%;  margin:0 auto; line-height: 1.1em;}
.promo.zodiac-match .contenido .subtitle{font-size:20px; width: 100%;  margin:0 auto; line-height: 1.1em;}

.promo.zodiac-match .contenido .title.big.resultado{font-size:44px; width: 100%; color:#E98AB7;  margin:0 auto; line-height: 1.1em;}
.promo.zodiac-match .contenido .title.resultado{font-size:24px; width: 83%;  margin:0 auto; line-height: 1.1em;}

.promo.zodiac-match #amaze-player{height: 530px;}

.promo.zodiac-match .comic-bubble {
  position: relative;
  background-color: #E78AB8;
  padding: 45px 40px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 90%;
  margin: 0 auto;
  text-align: left;
}

.promo.zodiac-match .comic-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 80%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #E78AB8;
}

.promo.zodiac-match .btn{background-color: #000000!important;}
.promo.zodiac-match .btn:hover{color: #000000!important; background-color: #ffffff!important;}

.promo.zodiac-match .dan_home{margin: 0 auto; max-width: 320px;}

.promo.zodiac-match .contenido{padding-bottom: 40px;}
.promo.home_promo.zodiac-match  #wrapper{background-attachment: fixed; background-size: contain;}

/*.promo.zodiac-match .title{  font-family: "DrSlab-Base";font-size:35px}*/
.promo.zodiac-match .reloj_arena{max-width:190px ;}

.rotate-center {
	-webkit-animation: rotate-center 5s ease-in-out infinite both;
	        animation: rotate-center 5s ease-in-out infinite both;
}


@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.promo.zodiac-match::-webkit-input-placeholder,
.promo.zodiac-match ::placeholder { color: #ffffff; text-transform: none}


.promo.zodiac-match .contenido .btn.repetir{text-transform: none; padding: 15px 40px 15px 40px !important; letter-spacing: 0px; border-radius: 25px !important;}
.promo.zodiac-match .contenido .btn.repetir::before{ font-family: "FontAwesome"; content: "\f0e2"; margin-right: 10px;display: inline-block; transition:all 0.3s ease ;}
.promo.zodiac-match .contenido .btn.repetir:hover::before{ transform: rotate(-90deg);}

.promo.zodiac-match .contenido .btn.compartir{background-color:#E78AB8!important;text-transform: none; padding: 15px 40px 15px 40px !important; letter-spacing: 0px;border-radius: 25px !important;}
.promo.zodiac-match .contenido .btn.compartir::before{ font-family: "FontAwesome"; content: "\f064"; margin-right: 10px;display: inline-block; transition:all 0.3s ease ;}
.promo.zodiac-match .contenido .btn.compartir:hover::before{ scale:1.5;}
.promo.zodiac-match .contenido .btn.compartir:hover{color: #e78ab8!important; background-color: #ffffff!important;}

.promo.zodiac-match .contenido .share_box{display: flex; justify-content: space-around; width: 300px; margin: 0 auto;}
.promo.zodiac-match .contenido .share_box .item{display: inline-flex; border:3px solid #ffffff; color:#ffffff; font-size: 30px; border-radius: 20px; width: 55px;  height: 55px;  align-items: center;  justify-content: center;transition:all 0.3s ease ;}
.promo.zodiac-match .contenido .share_box .item:hover{scale: 1.2;}

.chat-container {
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
}
.chat-messages {
  flex: 1;
  padding-top:20px;
  overflow: hidden;
}
.message {
  position: relative;
  background-color: #E78AB8;
  padding: 10px 30px;
  border-radius: 20px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  font-family: "DrSlab-Base",sans-serif;
  font-size: 20px; line-height: 1.2em;
  display: flex;
  align-items: center;
  margin-bottom:20px;
  width:100%;

}
.message .mensaje{width:80%}
.message.user .mensaje{width: 100%;}
.bot {
  background-color: #E78AB8;
  align-self: flex-start;
  padding-left: 15px;
  float: left;
}

.bot::after {
  content: '';
  position: absolute;
  top: -15px;
  left: 14%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #E78AB8;
}

.bot::before {
  content: '';
 width:20%;
 height: 63px;
 margin-right: 10px;
 background-image: url(../img/dan_chat.png);
 background-position: center center;
 background-size: contain;
 background-repeat: no-repeat;
}

.user {
  background-color: #ffffff;
  align-self: flex-end;
  text-align: right;
  margin-bottom: 30px;
  color:#000000;
  justify-content: end;
  padding:20px 30px;
  float: right;
  width:inherit;
}

.user::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: 5%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #ffffff;
}

.chat-input, .chat-input_date, .chat-input_zodiac, .chat_input_compatible {
  display: flex;
  border-top: 0px;
  padding: 10px;
  background-color: #fff;
  border-radius: 40px;
}
.chat-input input, .chat-input_date input, .chat-input_zodiac input, .chat-input_compatible input{
  flex: 1;
  padding: 10px;
  border: 0px;
  border-radius: 40px;
  font-size: 16px;
  background-color: #68339D;
  color:#ffffff;
  font-family: "DrSlab-Base";
}
.chat-input button, .chat-input_date button, .chat-input_zodiac button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #000000;
  color: #fff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: "DrSlab-Base";
}
.chat-input_date button{top:30px; position: relative}
.chat-input_zodiac button{top:30px; position: relative; left:50px}


.chat-input button:hover, .chat-input_date button:hover, .chat-input_zodiac button:hover {
  background-color: #ffffff;
  color:#000000
}
.finish-button {
  display: none;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
.finish-button:hover {
  background-color: #218838;
}
#datepicker {
  display: none;
  margin-top: 10px;
  text-align: center;
}
#datepicker input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  width: 100%;
}


.date-picker {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  padding: 0px;
  color:#000000;
  font-family: "DrSlab-Base";
}
.date-picker-display {
  width: 100%;
  height: 30px;
  text-align: center;
}
.month {
  height: 100%;
  width: 33%;
  float: left;
  text-align: center;
}
.day {
  height: 100%;
  width: 20%;
  float: left;
  text-align: center;
}
.year {
  height: 100%;
  width: 20%;
  float: left;
  text-align: center;
}
.date-picker-display{display: none;}



#zodiacpicker {
  display: none;
  margin-top: 10px;
  text-align: center;
}
#zodiacpicker input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  width: 100%;
}

.zodiac-picker {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  padding: 0px;
  color:#000000;
  font-family: "DrSlab-Base";
}
.zodiac-picker-display {
  width: 100%;
  height: 30px;
  text-align: center;
}

.zodiac {
  height: 100%;
  width: 50%;
  float: left;
  text-align: left;
  left:25%
}

.zodiac img{max-width: 30px; margin-right: 10px;}

.zodiac-picker-display{display: none;}



#compatiblepicker {
  display: none;
  margin-top: 10px;
  text-align: center;
}
#compatiblepicker input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  width: 100%;
}

.compatible-picker {
  width: 100%;
  height: 120px;
  margin: 0 auto;
  padding: 0px;
  color:#000000;
  font-family: "DrSlab-Base";
}
.compatible-picker-display {
  width: 100%;
  height: 30px;
  text-align: center;
  display: none;
}

.compatible {
  height: 100%;
  width: 100%;
  float: right;
  text-align: right;
 padding-right:30px;
 font-size: 22px;
 padding-top: 10px;

}

.compatible .item{color:#cccccc; cursor: pointer;}
.compatible .item:hover{color:#000000}