@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;600&display=swap');

@font-face {
  font-family: 'egoregular';
  src: url('../fonts/ego-regular-webfont.woff2') format('woff2'),
       url('../fonts/ego-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* INI COLORES */
.amarillo { color:#F1D539; }
.verde { color: #35A857; }
.bg-amarillo { background-color:#F1D539; }
.bg-negro { background-color:#000000; }
.bg-verde { background-color:#35A857; }
.bg-turquesa { background-color: #08a49c; }

.txt-ingresa { font-size: 14px; font-weight: 500; color: #2b2b2b; margin-bottom: 0.1rem; text-shadow: 2px 1px 1px rgba(255,255,255,1); letter-spacing: -0.8px; }

/* END COLORES */

/* INI UTILS */
.space-10 { width: 100%; height: 10px; }
.space-20 { width: 100%; height: 20px; }
.space-30 { width: 100%; height: 30px; }
.space-40 { width: 100%; height: 40px; }
.space-50 { width: 100%; height: 50px; }
.space-60 { width: 100%; height: 60px; }
.space-70 { width: 100%; height: 70px; }
.space-80 { width: 100%; height: 80px; }
.space-90 { width: 100%; height: 90px; }
.space-100 { width: 100%; height: 100px; }
.close { cursor: pointer; }
/* END UTILS */

body, html, main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

/* INI HEADER */
.header { background: url(../img/header.png) no-repeat; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; height: 80px; }
.header a, .header a:active, .header a:visited { color: #FFF; font-size: 0.9rem; font-weight: 500; }
.header #formLogin { max-width: 90%; }
.header .bienvenida {
  margin-top: 10px;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #FFF;
  font-weight: 400;
  font-size: .8rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: .275rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    /*
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    border: none !important;
    text-align: center;
    */
    border: none !important;
}
.form-control:focus{
    border-color: #0d6efd;
    /*
    background-color: transparent;
    border: solid 1px blue;
    box-shadow: none;
    */
}
.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-align: right;
    padding-top: 18px;
    color: #FFF;
    font-weight: 500;
}
.input-header { width: 180px;height: 55px;background: url(../img/caja-datos.png) no-repeat;background-color: transparent;background-size: 100% 100%;text-align: center; font-weight: 600; color: #656766;}
.input-header:focus{ background-color: transparent; border: solid 1px blue; box-shadow: none; } 

.btn-ingresar {margin-top: 12px; cursor: pointer; width: 110px; height: 31px; background-image: url("../img/btn/btn-ingresar-110.png"); }
.btn-ingresar:hover {background-position: 0px -31px;}

.btn-ingresar-factura {margin-top: 10px;cursor: pointer;width: 132px;height: 37px;background-image: url("../img/btn/btn-ingresar-132.png");background-position: 0px 0px;}
.btn-ingresar-factura:hover {background-position: 0px -37px;}

.btn-enviar {margin-top: -18px;cursor: pointer;width: 128px;height: 63px;background-image: url("../img/btn-enviar.png");background-position: 0px 0px;}
.btn-conoce-mas {margin-top: -20px;cursor: pointer;width: 144px;height: 62px;background-image: url("../img/btn-conoce-mas.png");background-position: 0px 0px;}

/* END HEADER */

/* INI SLIDE */
.carousel-control-next, .carousel-control-prev { opacity: 1 !important; }
.carousel-control-next { right: -90px; }
.carousel-control-prev { left: -110px; }
/* END SLIDE */

/* INI HOME */
.slogan { max-width: 90%; margin: 0 auto !important; }
.box-giros { width:203px; height:57px;background: url(../img/input.png);font-weight: normal;font-size: 16px;margin: 0 auto;margin-top: 0px; margin-top: -15px; }
.juego .btn-enviar { margin-top: 8px; float: left;}

/* END HOME */




.text-azul { color: #fff; background-color: #E21F19; text-align: left; padding: 4px 5px; margin-bottom: 5px !important; box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); display: none; }
/* INI RULETA */
.the_wheel { background-image: url(../img/ruleta/bg-ruleta.png); background-position: center; width: 620px; height: 620px; background-size: 100% 100%; padding-top: 94px; padding-left: 12px; }
.girar { width: 100px; height: 100px; position: absolute; top: 165px; left: 197px; cursor: pointer; border: solid 1px red;  }
.relative { position: relative; width: 500px; height: 500px; margin-left: 44px; }

.sm-the-wheel { background-image: url(../img/ruleta/bg-ruleta.png); background-position: center; width: 570px; height: 570px; background-size: 100% 100%; padding-top: 68px; padding-left: 11px; }
.sm-girar { width: 80px; height: 80px; position: absolute; top: 175px; left: 184px; cursor: pointer;  }
.sm-relative { position: relative; width: 450px; height: 450px; margin-left: 44px; }

.xs-the-wheel {background-image: url(../img/ruleta/bg-ruleta.png);background-position: center;width: 510px;height: 510px;background-size: 100% 100%;padding-left: 55px;padding-top: 60px; margin: 0 auto !important; }
.xs-girar { width: 80px; height: 80px; position: absolute; top: 147px; left: 159px; cursor: pointer; }
.xs-relative { position: relative; width: 400px; height: 400px; }

.xxs-the-wheel {background-image: url(../img/ruleta/bg-ruleta.png);background-position: center;width: 400px;height: 400px;background-size: 100% 100%;padding-left: 0px;padding-top: 5px; margin: 0 auto !important; }
.xxs-girar { width: 80px; height: 80px; position: absolute; top: 147px; left: 159px; cursor: pointer; }
.xxs-relative { position: relative; width: 400px; height: 400px; }

.ss-the-wheel {background-image: url(../img/ruleta/bg-ruleta.png);background-position: center;width: 335px;height: 335px;background-size: 100% 100%; padding-top: 18px; margin: 0 auto !important; }
.ss-girar { width: 70px; height: 70px; position: absolute; top: 106px; left: 132px; cursor: pointer; }
.ss-relative { position: relative; width: 335px; height: 340px; }

.processing { cursor: default !important; }
.clickable { cursor: pointer; }

.ruleta .ruleta-completa { max-width: 450px; }
.ruleta .botella-citrus { max-width: 280px; float: right; }
.ruleta .botella-manzana { max-width: 280px; float: left; }


/* END RULETA */


/* INI MODALS */
#modalIdIngresado .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalIdIngresado .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalIdIngresado .modal-header { border-bottom: none; }

#modalUps .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalUps .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalUps .modal-header { border-bottom: none; }

#modalDesanimes .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalDesanimes .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalDesanimes .modal-header { border-bottom: none; }

#modalIniciarSesion .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalIniciarSesion .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalIniciarSesion .modal-header { border-bottom: none; }

#modalCompletadoGiros .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalCompletadoGiros .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalCompletadoGiros .modal-header { border-bottom: none; }

#modalCierre .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalCierre .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalCierre .modal-header { border-bottom: none; }

#modalFelicidades .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalFelicidades .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalFelicidades .modal-header { border-bottom: none; }

#modalPremios .modal-body{ background-color: rgba(53, 168, 87, 0.65) !important; height: 70%;} 
#modalPremios .modal-content { position: relative; flex-direction: column;width: 100%;pointer-events: auto;outline: 0; border: solid 5px #35A857; background-color: transparent; border-radius: 1.2rem; }
#modalPremios .txt-premios-diarios { max-width: 80%; }

#modalDatosCorrectamente .modal-body{ margin-top: 0px; padding: 0rem; top: -50px; z-index: -9999 !important;} 
#modalDatosCorrectamente .modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: transparent !important;outline: 0; border: none;}
#modalDatosCorrectamente .modal-header { border-bottom: none; }

#modalComoParticipar .modal-body{ background-color: rgba(53, 168, 87, 1) !important; color: #FFF;} 
#modalComoParticipar .modal-content { position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;outline: 0; border: solid 5px #F1D539; background-color: transparent; border-radius: 1.2rem; }
#modalComoParticipar .txt-premios-diarios { max-width: 80%; }
#modalComoParticipar .como-participar { background-color: #F1D539; color: #35A857; font-size: 1.6rem; font-weight: 500; text-align: center; color: #35A857; border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; }
#modalComoParticipar p { text-align: left; padding: .8rem; font-size: .8rem; }
#modalComoParticipar .factura { max-width: 80%; padding-bottom: 10px; }
#modalComoParticipar .escala { max-width: 80%; padding-top: 10px; }
#modalComoParticipar p.small { font-size: .6rem; line-height: 13px; }

#modalFormulario .modal-body{ background-color: rgba(53, 168, 87, 1) !important; padding: 0px;} 
#modalFormulario .modal-content { display: flex;flex-direction: column;width: 100%;pointer-events: auto;outline: 0; border: solid 5px #F1D539; background-color: transparent; border-radius: 1.2rem; }
#modalFormulario .txt-premios-diarios { max-width: 80%; }
#modalFormulario .premio-header { margin-top: -15px; max-width: 70%; padding: 10px; display: flex;}
#modalFormulario .atencion { max-width: 60px;}
#modalFormulario p { color: #FFF; font-size: 1rem; font-weight: 500; line-height: 17px;}
#modalFormulario p.small { color: #FFF; font-size: .9rem; font-weight: 300; line-height: 17px; margin-top: 20px;}
#modalFormulario .col-form-label { color: #FFF; font-size: .9rem; font-weight: 500; line-height: 17px; }


.ganadores { background-color:rgba(75,158,139,.8) !important; border: solid 5px rgba(75,158,139,1); border-radius: 1rem; }
.txt-junio { max-width: 350px; text-align: center;}
.titulo { font-size: 'egoregular'; color: #066500; background-color: #f1d604; text-align: center; text-transform: uppercase; font-size: 1.2rem; color: #36a858; font-weight: 600; border-radius: .5rem; }
.blanco { background-color: #fff; color: #000000; font-size: 'egoregular'; font-size: 0.8rem; border-radius: .5rem; padding-left: 5px; padding-top: 3px; padding-bottom: 3px; }
.table>:not(caption)>*>* {
  padding: 0.2rem 0.5rem;
}
.btn-primary {
  color: #066500;
  background-color: #f1d604;
  border-color: #066500;
  font-family: 'egoregular';
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
  color: #f1d604;
  background-color: #066500;
  border-color: #f1d604; /*set the color you want here*/
}

/* END MODALS */


/* INI FOOTER */
.footer-fixed { position: fixed; bottom: 0px; width: 100%; color: #FFF; font-weight:400; font-size: 0.7rem; text-align: center; }
.footer-fixed .mail { font-weight: 400; }
.footer-fixed p { font-size: 0.7rem; font-weight: 200; }


/* END RESPONSE */
/* SM Small Divices */
@media (max-width: 575px) {
    /* INI FOOTER */
    .footer-fixed { border-bottom: solid 2px #FC0107; font-size: .5rem;  } 
    .footer-fixed p { margin-bottom: 0rem; font-size: 0.4rem; }

    .display-mobile { display: block !important; }
    .display-desktop { display: none !important; }

    .p-2 { padding: 0px .2rem !important;  }
    .w-100 { width: 100% !important; }

    .header { height: 100px; }
    .header a, .header a:active, .header a:visited { font-size: 0.8rem; }
    .header .space-20 { height: 0px; }
    .header #formLogin { max-width: 100%; }
    .header .form-label { font-size: .7rem; }
    .header .input-header { width: 160px; height: 49px; background-size: 160px 49px; }
    .header .btn-ingresar { width: 90px; height: 25.5px; background-size: 90px 51px; }
    .header .btn-ingresar:hover {background-position: 0px -25.5px; }
    .ingresa-numero { height: 16px; margin-bottom: -16px; }
    .slogan { max-width: 280px;}
    #slideHome { padding-left: 3rem; padding-right: 3rem; padding-bottom: 1rem; }

    .game .p-1 { padding:  0rem!important; }
    .ruleta .ruleta-completa { max-width: 250px; }
    .xs-the-wheel { position: absolute; left: 0; right: 0; margin: 0 auto; }
    .space-20 { height: 0px; }

    .box-giros { width: 170px; height: 48px; background-size: 170px 48px; float: left !important; margin: unset; margin-top: -10px; margin-left: -20px; }
    .btn-enviar {width: 80px;height: 44px; background-size: 90px 44px; margin: 14px auto !important; }
    .txt-ingresa { float: left !important; font-size: 13px; margin-bottom: -0.2rem; }

    #modalComoParticipar .como-participar { font-size: 1.4rem; }
    #modalComoParticipar p { padding: .6rem; font-size: .6rem; }


  }
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) and (max-width: 767px) {
   .footer-fixed { border-bottom: solid 2px #0000FF; }
   .footer-fixed p { margin-bottom: 0rem; font-size: 0.6rem; }

   .header { height: 110px; } 
   .header .p-2 { padding-top: 0px;}
   .header .space-20 { height: 0px;} 

   .display-mobile { display: block !important; }
   .display-desktop { display: none !important; }

    /* INI HOME */
    #slideHome { max-width: 400px; margin: 0 auto !important; padding-bottom: 20px; }
    .juego .btn-enviar { float: none; margin: 0 auto !important; }
    .ruleta .ruleta-completa { max-width: 400px; }
    /* END HOME */
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) and (max-width: 991px) {
   .footer-fixed { border-bottom: solid 2px #21FF06;  } 
   .footer-fixed p { margin-bottom: 0rem; font-size: 0.6rem; }

   #formLogin { width: 80%; margin: 0 auto !important; }
   .header { height: 110px; } 
   .header .p-2 { padding-top: 0px;}
   .header .space-20 { height: 0px;} 

   .display-mobile { display: block !important; }
   .display-desktop { display: none !important; }

   /* INI HOME */
   #slideHome { max-width: 500px; margin: 0 auto !important; padding-bottom: 20px; }
   .juego .btn-enviar { float: none; margin: 0 auto !important; }
   .ruleta .ruleta-completa { max-width: 500px; }
   /* END HOME */

  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) and (max-width: 1199px) { 
    .footer-fixed { border-bottom: solid 2px #FC02FF;  } 
    .display-mobile { display: none !important; }
    .display-desktop { display: block !important; }

    .txt-ingresa { font-size: 12px; font-weight: 600; letter-spacing: -0.9px; }
    .box-giros { width: 186px; height: 57px; background-size: 186px 57px; }
    #slideHome { padding-left: 3rem; padding-right: 3rem; }

    .ruleta .ruleta-completa { max-width: 420px; }
    .ruleta .botella-citrus { max-width: 220px; float: right; }
    .ruleta .botella-manzana { max-width: 220px; float: left; }

  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .footer-fixed { border-bottom: solid 2px #FD8008; }
    
    .header { height: 70px; } 

    .display-mobile { display: none !important; }
    .display-desktop { display: block !important; }

    .space-20 { height: 10px; }
    .slogan { max-width: 600px;}
    #slideHome { padding-left: 5rem; padding-right: 5rem; }

    .ruleta { padding-top: 10px; }
    .ruleta .ruleta-completa { max-width: 450px; }
    .ruleta .botella-citrus { max-width: 260px; float: right; }
    .ruleta .botella-manzana { max-width: 260px; float: left; }
    
  }