/*----------------------  home.css ------------------------*/

main,
body {
  /*width: 100vw;*/
  width: auto;
  padding: 0 !important;
  margin: 0 !important;
  background-color: black;
  max-width: 100vw !important;
  overflow-x: hidden;
}

.main-container {
  max-width: 100vw;
  overflow-x: hidden;
}

.full-height {
  height: 125vh !important; /*100vh !important;*/
}

/* HOME */

.container-home-steps-banners1old {
  background-image: url("../  images/LARGE_V3.jpg");
  /*  background-position: center;*/
  background-size: 100%; /*cover;*/
  /*  margin-bottom: -25px !important;*/
  background-repeat: no-repeat;
}

.container-home-steps-banners1 {
  background-image: url("../images/FONDO_HOME2.webp");
  background-color: black;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

.home-master-container {
  /*height: calc(100vh - 180px); */ /* -140px */
  height: 650px;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: -4px !important;
  margin-bottom: 0px !important;
  color: white;
}

.btncarga-container {
  width: 100%;
  height: auto;
  padding: 0 !important;
  /*margin: 0 !important;*/
  /*margin-top: 70px;
  padding-top: 150px;*/
}

/* STEPS */

.pasos-container {
  width: 100%;
  height: auto;
  padding: 0 !important;
  /*margin: 0 !important;*/
  /*  margin-top: -10px;  50px;*/
  padding-top: 150px;
  font-family: Bodegaaurrera2;
}

.feature {
  padding: 10px !important;
  margin: 0 !important;
  color: white;
  min-height: 600px;
}

.feature p {
  margin-bottom: 25px;
}
.feature-icon {
  /*max-height: 70px;*/
  height: 150px;
}
.feature-icon img {
  max-height: 70px;
}
.feature .feature-image-container {
  width: 100%;
  max-height: 350px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .feature-image {
  width: 100%;
  max-height: auto;
}

.step-img {
  width: 100% !important;
  height: 100% !important;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#paso1 .step-img {
  background-image: url("../images/HOME_MECANICAS_PASO_1.png");
}
#paso2 .step-img {
  background-image: url("../images/HOME_MECANICAS_PASO_2.png");
}
#paso3 .step-img {
  background-image: url("../images/HOME_MECANICAS_PASO_3.png");
}
#paso4 .step-img {
  background-image: url("../images/HOME_MECANICAS_PASO_4.png");
}

/* BANNERS 1 */
.banners1-container {
  width: 100%;
}

/* .banner1 {
} */

.banner-text {
  position: relative;
}

#banner_oxxo span {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 55px;
  height: 55px;
  border-left: solid 1px white;
}

#banner_walmart span {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 55px;
  height: 65px;
  border-left: solid 1px white;
}

#banner_oxxo p {
  color: white;
  padding-top: 50px;
  padding-left: 20px;
}

#banner_walmart p {
  color: white;
  padding-top: 60px;
  padding-left: 20px;
}

#banner_oxxo {
  height: 140px;
  background-image: url("../images/BANNER_OXXO.png");
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}

#banner_walmart {
  height: 171px;
  background-image: url("../images/PlecaWALMART.png");
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}

.awards-container {
  /*  background-image: url("../images/HomeMOD_4.jpg");*/
  background-position: center;
  background-size: cover;
  background-repeat: repeat; /* no-repeat; */
}

/* banners 2 */
.banners2-container {
  background-color: black;
  width: 100%;
  height: 315;
}

.banner2 p {
  color: white;
  padding-top: 15px;
}

#logo_joy {
  height: 80px;
  width: 80px;
}

#banner_joy {
  background-color: #4409eb;
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}
#btn-joy-conoce {
  background-color: #6ce9f1;
  color: #4409eb;
}

.btn-descarga-joy {
  align-self: center;
  margin-left: 5px;
  height: 45px;
  margin-top: 3px;
}

.text-descarga-joy {
  margin-right: 50px;
  font-size: 1.5rem !important;
}

/* .container-text-banner-joy div {
   padding-left: 40px !important;
} */

.container-text-banner-joy p {
  margin: 0 !important;
  padding: 0 !important;
}

/* RANKING */

.ranking-container {
  width: 100%;
  height: 315;
  background-image: url("../images/HomeMOD_4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 1700px; /* 1850px G64 */
}

/* G64 */
#ranking-images-container {
  width: 130vh;
  padding: 20px;
  border-radius: 10px;
}
/*
#ranking-images-container {
  width: 70vh;
  height: 70vh;
  background-color: white;
  padding: 50px;
  border-radius: 30px;
}
*/

#logo-loot {
  width: auto;
  height: 380px;
  align-self: center;
}

.photo-loot-container {
  overflow: hidden;
  height: 130px;
  width: 145px;
  margin-bottom: 10px;
  padding-right: 5px;
}
.photo-loot {
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 5px; /* G64 */
}

.ranking-tabla-frame {
  position: relative;
  width: 713px;
  height: 569px;
  /* background-image: url("../images/Rnking-Frame.png");
  background-size: auto;
  background-position: top left;
  background-repeat: no-repeat; */

  border-top-color: #69e14c;
  border-bottom-color: #c3eb49;
  border-left-color: #69e14c;
  border-right-color: #c3eb49;
  border-style: solid; /*  Define el estilo del borde */
  border-width: 3px; /* Define el grosor del borde */
  background-color: black;
}

.ranking-tabla-container {
  background-color: black;
  padding: 25px;
  width: 95%;
  height: 95%;
  position: absolute;
  top: 15px;
  left: 13px;
  text-align: center !important;
  overflow-x: hidden;
  overflow-y: auto; /* scroll */
}

.ranking-tabla-container table {
  /* max-height: 300px; */
  overflow-y: scroll;
}

.ranking-tabla-container tr {
  border-color: transparent;
}

/*----------------------  style.css ------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  color: white;
  background: #cb67e9;
}
.file-upload__wrapper {
  /*width: 640px;*/
  /*background: #FFD700;*/
  /*border-radius: 5px;*/
  padding: 5px;
  /*box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);*/
}
.file-upload__wrapper header {
  /*color: #cb67e9;*/
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}
.form-parent {
  display: flex;
  align-items: center;
  /*  gap: 30px;*/
  justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
  width: 400px;
  height: 150px;
  border: 2px dashed #3a9300;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
.file-upload__wrapper form.file-upload__form_screenshot {
  width: 400px;
  height: 150px;
  border: 2px dashed #3a9300;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
/* form.file-upload__form :where(i, p) {
   color: #cb67e9;
} */
form.file-upload__form i {
  font-size: 50px;
}
form.file-upload__form p {
  font-size: 1rem;
  margin-top: 15px;
}
/* form.file-upload__form_screenshot :where(i, p) {
   color: #cb67e9;
} */
form.file-upload__form_screenshot i {
  font-size: 50px;
}
form.file-upload__form_screenshot p {
  font-size: 1rem;
  margin-top: 15px;
}
sectionx .row {
  /*background: #e9f0ff;*/
  margin-bottom: 10px;
  list-style: none;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*border-radius: 6px;
  border: 2px dashed cyan;*/
}
sectionx .row i {
  font-size: 2rem;
  /*color: #cb67e9;*/
}
sectionx .details span {
  font-size: 1rem;
}
.progress-container .row .content-wrapper {
  margin-left: 15px;
  width: 100%;
}
.progress-container .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
  height: 100%;
  background: #cb67e9;
  width: 0%;
  border-radius: 6px;
}
/* .uploaded-container {
  overflow-y: scroll;
  max-height: 230px;
} */
.uploaded-container.onprogress {
  max-height: 160px;
}
.uploaded-container .row .content-wrapper {
  display: flex;
  align-items: center;
}
.uploaded-container .row .details-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  width: 400px;
}
.uploaded-container .row .details-wrapper .name span {
  color: #3a9300;
  font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
  color: #dca237; /*#404040;*/
  font-size: 11px;
}

.alerta {
  width: 100% !important;
  text-align: center;
  color: red !important;
}

.exito {
  width: 100% !important;
  /*font-weight: bolder;*/
  color: cyan !important;
  text-align: center;
}

th,
td {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #000;
  font-size: smaller;
}

#carrusel {
  float: left;
  width: 600px; /*600px;*/
  overflow: hidden;
  height: 203px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

#carrusel .left-arrow {
  position: absolute;
  left: 10px;
  z-index: 1;
  top: 50%;
  margin-top: -50px;
}

#carrusel .right-arrow {
  position: absolute;
  right: 10px;
  z-index: 1;
  top: 50%;
  margin-top: -50px;
}

.carrusel {
  width: 4000px;
  left: 0px;
  position: absolute;
  z-index: 0;
}

.carrusel > div {
  float: left;
  /*height: 203px;*/
  margin-right: 5px;
  /*width: 195px;*/
  text-align: center;
}

.carrusel img {
  cursor: pointer;
}

/*.product {
    border:#CCCCCC 1px solid;
}*/
.text-time {
  text-align: center;
  font: normal normal bold 12px/30px Barlow;
  letter-spacing: 0px;
  color: gray; /*#C2FC00;*/
  text-transform: uppercase;
  opacity: 1;
}

.bulletazul {
  border-color: #00bfb3;
  background: #00bfb3;
  color: #fff;
  text-decoration: none;
  /* border: 1px solid #e5e5e5; */
  display: block;
  font-size: 13px;
  height: 21px;
  line-height: 23px;
  text-align: center;
  width: 22px;
  border-radius: 50%;
  margin-left: 80px;
  margin-top: -23px;
}

.bulletgold {
  border-color: #ff9500;
  background: #ff9500;
  color: #fff;
  text-decoration: none;
  /* border: 1px solid #e5e5e5; */
  display: block;
  font-size: 13px;
  height: 21px;
  line-height: 23px;
  text-align: center;
  width: 22px;
  border-radius: 50%;
  margin-left: 170px;
  margin-top: -23px;
}

.w-190px {
  width: 190px !important;
}

.w-200px {
  width: 140px !important;
}

.w-250px {
  width: 250px !important;
  height: auto !important;
}

.w-300px {
  width: 300px !important;
  height: auto !important;
}

.w-400px {
  width: 400px !important;
  height: auto !important;
}

.gold-bold {
  font-weight: bold;
  color: #ff9500;
}

.gold {
  color: #ff9500;
}

.cyan-bold {
  font-weight: bold;
  color: #00c5e6;
}

.cyan {
  color: #00c5e6;
}

.gray {
  color: gray;
  font-size: small;
}

.lightgray {
  color: lightgray;
  font-size: small;
}

.hide {
  display: none;
}
.ver {
  color: #3a9300;
  font-size: small;
}
.center {
  text-align: center;
}

.h-galleryadmin1 {
  height: 370px !important;
}

.h-galleryadmin2 {
  height: 300px !important;
}

.mt-5x {
  margin-top: 5px !important;
}

.mt-10x {
  margin-top: 10px !important;
}

.mt-15x {
  margin-top: 15px !important;
}

.mb-15x {
  margin-bottom: 15px !important;
}

.mb-50x {
  margin-bottom: 50px !important;
}

.mt-50x {
  margin-top: 50px;
}

.mt-200x {
  margin-top: 200px; /* -200px*/
}

.mt-100x {
  margin-top: 610px; /* 650px;*/
}

.icon-status {
  left: 87% !important;
}

.img-blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.min-h {
  min-height: 400px;
}

.text-underline {
  text-decoration: underline;
}

.w-101 {
  width: 101% !important;
}

.modal-box-white {
  border-style: solid;
  border-color: #3a9300;
  background-color: black;
}

.msg-gen {
  min-height: 900px;
  /*  margin-top: 140px;*/
}

.icono-status-sm {
  width: 20px !important;
}

.pa-0 {
  padding: 0px !important;
}

.nav-item-lg {
  font-size: large;
  font-weight: bold;
}

#divbtnCargarImagen {
  display: block;
}

#divbtnCargarImagen2 {
  display: none;
}

/*#imgbtnLogout {
  
 width: 130px!important;
 height: auto!important;
 
}*/

/*#imgbtnLogin {
  
  width: 130px!important;
  height: auto!important;
  
}*/

/*#imgbtnPerfil {
  
  width: 130px!important;
  height: auto!important;
  
}*/

.menu-logo2 {
  display: block;
  /*  height: 200px !important;
  margin-bottom: 20px;
  margin-top:0px; 0px;*/
  width: 100%;
}

.awards-container .container-slider {
  height: 450px !important;
  max-height: 450px !important;
}

.nav-item {
  float: right;
}

.navbar > .container,
.navbar > .container-fluid {
  display: block !important;
}

.boton-img-header {
  width: 125px;
  height: auto;
}

.border {
  border: white;
  border-style: solid;
  border-width: thin;
  padding: 10px;
}

.border-dashed {
  border-radius: 6px;
  border: 2px dashed cyan;
}

.table-center {
  border: 1px solid white;
  margin-left: auto;
  margin-right: auto;
  border-collapse: unset;
}

.a-tdn {
  text-decoration: none;
}

/*---------------------- global.css -------------------*/

/* * {
} */

@font-face {
  font-family: Bodegaaurrera;
  src: url(../fonts/Gotham-Black.otf) format("truetype");
  /*src: url(../fonts/DoritosHeadline_MdIt.ttf) format('truetype');*/
  /*url('../fonts/sans-serif.otf') format('opentype')*/
}

@font-face {
  font-family: Bodegaaurrera2;
  src: url(../fonts/Gotham-Book.ttf) format("truetype");
  /*src: url(../fonts/DoritosHeadline_MdIt.ttf) format('truetype');*/
  /*url('../fonts/sans-serif.otf') format('opentype')*/
}

html,
body {
  font-family: Bodegaaurrera;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.footer-background {
  height: 75px; /*40px;*/
  /*background-size: 80%!important;*/
  /*width: 100%;*/
  left: 0px;
  background: url("../images/Footer.png");
  position: relative;
  display: block;
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/
  background-size: cover;
  margin: 0 auto;
  background-color: #3a9300;
}

.contacto-background {
  /* background-image: url("../images/HomeMOD_4.jpg"); */
  background-image: url("../images/FONDO_HOME2.webp");
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-attachment: fixed;
}

.registro-background {
  /* background-image: url("../images/HomeMOD_4.jpg"); */
  background-image: url("../images/FONDO_HOME2.webp");
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-attachment: fixed;
}

.login-background {
  /*background-image: url("../images/Inicia-Sesion_Fondo.jpg");*/
  background-image: url("../images/FONDO_HOME2.webp"); /*url("../images/HomeMOD_4.jpg"); */
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-attachment: fixed;
}

.registro-cuadro {
  /* background-image: url("../images/Registro_Cuadro.png");
  background-repeat: no-repeat; */
  background-size: 100% 100%;
  background-attachment: fixed;
  background-color: rgba(226, 33, 28, 0.4);
}

.registro-resultado-cuadro {
  background: url("../images/Inicia-Sesion_Cuadro.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-cuadro {
  /* background-image: url("../images/Inicia-Sesion_Cuadro_sinborde.png"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 64%;
  background-color: rgba(226, 33, 28, 0.4);
}

.terminos-background {
  /* background-image: url("../images/Contacto_Fondo.jpg"); */
  background-image: url("../images/FONDO_HOME2.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.login-perfil-fondo {
  /* background-image: url("../images/HomeMOD_4.jpg"); */
  background-image: url("../images/FONDO_HOME2.webp");
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-attachment: fixed;
}

.admin-fondo {
  /* background-image: url("../images/Admin_Fondo.png"); */
  background-image: url("../images/FONDO_HOME2.webp");
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-attachment: fixed;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.new-header-background {
  width: 100%;
  left: 0px;
  /* background: url("../images/HEADER.png"); */
  background: url("../images/FONDO_HOME2.webp");
  position: relative;
  display: block;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0 auto;
}

.opt-header-background {
  background: url("../images/HEADER.png");
  background-size: 100% 100%;
}

.header-background {
  position: absolute;
  z-index: 1000;
  height: 135px;
  background: url("../images/HEADER-DORITOS.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header-admin-background {
  position: absolute;
  z-index: 1000;
  height: 135px;
  background: url("../images/ADMIN_Header.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 135px;
}

.menu-lateral-admin-background {
  /* background: url("../images/Admin-aprobar-imagenes_MENU-LATERAL.jpg"); */
  background-position: left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 600px;
}

.form-control,
.form-select,
.form-check-input {
  border-color: #01fd37 !important;
}
.form-control:hover,
.form-select:hover,
.form-check-input:hover {
  border-color: #f71bb5 !important;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #0905fd !important;
}
.form-select-sm {
  background-color: black;
  color: white;
}

.boton-img {
  width: 155px;
  height: 45px;
}

.boton-img-sm {
  width: 100px !important;
  height: 30px !important;
}

.menu-item-btn {
  height: 20px !important;
}

.menu-separador {
  height: 40px !important;
}

.menu-logo {
  height: 130px !important;
}

/* G64 */
.footer-logo {
  height: 100px !important;
}

.mt-80 {
  margin-top: 80px;
}

.mt-150 {
  margin-top: 150px;
}

.h-400 {
  height: 400px;
}

.password-container {
  position: relative;
}

#loading-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  background-color: #000;
  z-index: 1100 !important;
  opacity: 0.5;
}

#loading-overlay div {
  position: fixed;
  height: 6em;
  width: 6em;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.bi-eye,
.bi-eye-slash {
  position: absolute;
  top: 28%;
  right: 4%;
  cursor: pointer;
  color: gray;
}

#listaUsuariosPremios {
  height: 300px;
}

.rowParticipantes {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
}

.bodyParticipantes {
  overflow-y: scroll;
  height: 380px;
  position: absolute;
}

.check-circular {
  width: 1.3em;
  height: 1.3em;
  background-color: transparent;
  border-radius: 50% !important;
  vertical-align: middle;
  border: 1px solid white;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.check-circular:checked {
  background-color: #04af29;
}

/* Boton fileupload ticket */
.container-fileupload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

input[type="file"] {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b8b8b8;
}

.button-wrap-fileupload {
  position: relative;
}

.button-fileupload {
  display: inline-block;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 6px;
  background-color: #000;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border: 2px dashed #3a9300;
}

#txtHome {
  display: block;
}

#txtHomeResp {
  display: none;
}

/****************** MEDIAS QUERIES *******************/

/* #### Mobiles #### */
@media (max-width: 600px) {
  /*#container {
    border: 3px dashed gold;
  } */

  .home-master-container {
    /*height: calc(100vh - 500px);*/
    height: 50px;
  }

  .menu-logo {
    display: none;
  }

  .menu-logo2 {
    display: block;
    /*
      margin-top:35px;
      height: 240px !important;
      */
  }

  /* #txtHome{
      display: none;
    } */

  .step-top {
    margin-top: 3.5rem !important;
  }

  #txtHomeResp {
    display: block;
  }

  #imgVermas {
    width: 40% !important;
  }

  .mt-200x {
    margin-top: 0px;
  }

  .mt-100x {
    margin-top: -120px;
  }

  .w-400px {
    width: 280px !important;
  }

  .feature {
    min-height: 500px !important;
  }

  .feature-icon {
    height: auto !important;
  }

  .display-7 {
    /*font-size: 0.7rem!important;*/
    font-size: 12px !important;
    margin-top: 20px;
  }

  .btncarga-container {
    /*margin-top: 120px;   50px;*/
    margin-top: 45% !important;
  }

  /*.pasos-container {
      margin-top: 50px; */ /* 50px;
  }*/

  div.gallery img {
    width: 130px;
    height: 130px;
  }

  .h5,
  h5 {
    font-size: 0.9rem;
  }

  .h3,
  h3 {
    font-size: calc(0.95rem + 0.6vw);
  }

  .h4,
  h4 {
    /*font-size: calc(0.9rem + .3vw);*/
    font-size: 12px;
  }

  .h2,
  h2 {
    font-size: calc(0.95rem + 0.9vw);
  }

  .form-select-sm {
    margin: 5px;
  }

  .mt-1 {
    font-size: 10px;
  }

  .icono-status-sm {
    width: 10px !important;
  }

  #divPerfilHeader {
    display: none;
  }

  #divPerfilHeaderResp {
    display: block;
  }

  #divcol2 {
    width: 5% !important;
  }

  #divcol3 {
    width: 10% !important;
  }

  #divcol6 {
    width: 90% !important;
  }

  #divcol5 {
    width: 75% !important;
  }

  #divregcol3 {
    width: 0% !important;
  }

  #divregcol6 {
    width: 100% !important;
  }

  #imgbtnCargarImagen {
    width: 250px;
    height: auto;
  }

  .file-upload__wrapper {
    width: 90% !important;
  }

  .file-upload__wrapper form.file-upload__form {
    width: 300px;
    /* !important; */
  }

  #appx {
    width: 190px !important;
  }

  .cropme-containerx {
    width: 190px !important;
    height: 190px !important;
  }

  .footer-logo {
    height: 100px !important;
  }

  .w-250px {
    width: 180px;
    height: auto;
  }

  .imgchip {
    display: none;
  }

  #logo-loot {
    height: 200px;
  }

  .photo-loot-container {
    height: 80px;
    width: 100px;
  }

  #imglogooxxo {
    width: 75px;
    height: auto;
  }

  #imglogowalmart {
    width: 130px;
    height: auto;
  }

  .boton-img-header {
    width: 110px;
    height: auto;
  }

  #logo_joy {
    height: 40px;
    width: 40px;
  }

  .btn-descarga-joy {
    margin-left: 5px;
    width: 80px;
    height: auto;
    margin-top: -10px !important;
  }

  #modalAvisoprivacidad {
    font-size: x-small;
  }

  #modalTerminosycondiciones {
    font-size: x-small;
  }

  footer {
    font-size: small;
  }

  .copyright {
    font-size: x-small;
  }

  #comebien {
    margin-top: 2px !important;
    font-size: x-small;
  }

  #lstRanking {
    font-size: x-small !important;
  }

  .navbar-toggler {
    margin-left: -25px;
  }

  .home-master-container {
    margin-top: 0px !important;
  }
  .ranking-container {
    min-height: 300px; /* 1850px G64 */
  }

  /* HOME */

  .container-home-steps-banners1 {
    background-image: url("../images/FONDO_HOME_mobile.webp");
    background-color: black;
    background-repeat: repeat-y;
    /*
      background-image: url("../images/DoritosLARGE_V2_300.png");
      background-size: 100% auto;
      background-position: top;
      */
  }

  .carga-triangulos-title {
    font-size: 1rem;
    text-align: center;
    padding-left: 30px;
  }

  .container-home-principal {
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .img-carga-triangulos-btn {
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  /*
    .img-carga-triangulos-btn img {
      width: 70%;
      padding-left: 30px;
    }
    */

  .descarga-joy-img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .descarga-joy-img-container img {
    width: 95%;
    padding-left: 30px;
  }

  /* PASOS */

  .feature .feature-image-container {
    max-height: 250px !important;
  }

  .separador-colores {
    width: 100%;
  }

  .feature p {
    text-align: center;
    font-size: 0.8rem;
    padding: 20px;
  }

  /* BANNERS 1 */
  .center2 img {
    height: 142px !important;
  }

  .banners1-container {
    margin-top: 50px !important;
  }

  .banners1-container {
    /* width: 100%; */
  }

  .banner1 {
    margin-top: 50px;
    height: auto !important;
  }

  .banner-text {
    /* position: relative; */
  }

  #banner_oxxo span {
    border: none;
  }

  #banner_walmart span {
    border: none;
  }

  #banner_oxxo p {
    /* color: white;
          padding-left: 20px; */
    padding-top: 25px;
  }

  #banner_walmart p {
    padding-left: 50px;
    padding-top: 25px;
  }

  #banner_oxxo {
    background-image: none;
    background-color: #4409eb;
  }

  #banner_walmart {
    background-image: none;
    background-color: #4409eb;
  }

  .awards-container {
    /*background-image:  url("../images/FONDO_HOME_mobile.jpg");*/
    /*background-image: none;
      background-color: black;*/
    padding-bottom: 50px;
  }

  /* banner joy */
  .btn-joy-conoce {
    margin-left: 150px !important;
  }

  .text-descarga-joy {
    margin-left: 50px;
    font-size: 1rem !important;
    text-align: center;
  }

  .btn-descarga-joy {
    align-self: center;
    margin-left: 10px;
  }
  /*
    #logo_joy {
      width: 90px;
    }
*/
  .desc-joy {
    font-size: 0.8rem;
  }

  /* RANKING */
  #logo-loot {
    width: auto;
    height: 30vh;
    align-self: center;
  }

  .title-snapshot {
    margin-top: 30px !important;
    font-size: 1.2rem !important;
  }

  .btn-crear-cuenta-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .btn-crear-cuenta-container img {
    width: 70%;
    margin-top: 30px;
  }

  .ranking-loot-desc {
    font-size: 1rem;
  }

  /*.ranking-container {
       width: 100%;
      height: 315;
      background-image: url("../images/Doritos_HomeMOD_4.png");
      background-size: cover;
      background-repeat: no-repeat;
      min-height: 1850px; 
    }*/

  #ranking-images-container {
    width: 70vh;
    height: auto;
    padding: 38px;
    border-radius: 30px;
  }

  #ranking-images-container .col-4 {
    padding-left: 5px;
  }

  .photo-loot-containerx {
    overflow: hidden;
    height: 80px;
    width: 100px;
    margin-bottom: 5px;
    padding-right: 5px;
  }
  .photo-lootx {
    height: 100%;
    width: auto;
    object-fit: cover;
  }

  .ranking-tabla-frame {
    /* position: relative;

      height: 569px;
      background-image: url('../images/Rnking-Frame.png');
      background-size: auto;
      background-position: top left;
      background-repeat: no-repeat;
      width: 85%;
      */
    background-image: none;
    /* border: 2px solid #3a9300; */
    width: 95%;
  }

  .ranking-tabla-container {
    /* background-color: black;
      padding: 25px;
      width: 95%;
      height: 95%;
      position: absolute;
      top: 15px;
      left: 13px;
      text-align: center !important; */
    font-size: 12px;
    left: 0px;
  }

  .pt-5 {
    padding-top: 15px !important;
  }

  .container-boton-ver-mas {
    margin-top: 60px;
  }

  .ranking-container {
    padding-bottom: 100px;
    background-image: none;
    background-color: black;
  }

  .step-img {
    width: 85% !important;
    margin-left: 6%;
  }

  .footer-background {
    height: auto; /*15px;*/
    background-size: 90% !important;
  }

  .display-8 {
    /*font-size: 0.5rem!important;*/
    font-size: 10px !important;
    text-align: right !important;
  }

  #comojugar {
    margin-top: 115px !important;
  }

  .nav {
    --bs-nav-link-padding-y: 0rem;
  }

  .nav-item {
    float: right !important;
    font-size: 9px;
    margin-right: -10px;
  }

  .separador {
    height: 8px !important; /* 0px */
  }

  .h1,
  h1 {
    font-size: 22px !important;
    /*font-size: calc(0.95rem + .6vw)!important;*/
    /*font-size: calc(1.375rem + 1.5vw);*/
  }

  .mt-6 {
    margin-top: 0px !important;
  }

  .lightgray {
    font-size: 11px;
  }

  .btn-cargacomprobante1 {
    width: 100%;
  }

  #verTerminosycondiciones {
    width: 85%;
    text-align: left;
  }

  .ultimocomprobante {
    padding: 15px !important;
  }
  .mimejortiempo {
    margin-top: 30px !important;
    padding: 15px !important;
  }

  .mensaje {
    width: 90% !important;
  }

  #divCheckTicket {
    margin-left: 25px !important;
  }

  .bullet-primer {
    margin-top: 10px !important;
  }

  .text-comojugar {
    font-size: 10px !important;
    width: 100%;
  }

  .w-200px {
    width: 130px !important;
  }

  .email {
    font-size: 11px !important;
  }

  #msgIndicaciones1 {
    font-size: 14px !important;
  }

  #msgIndicaciones2 {
    font-size: 14px !important;
  }

  .text-ranking {
    font-size: 8px !important;
    margin-top: 10px;
  }

  .text-footer {
    font-size: 6px !important;
  }

  #menu-footer {
    height: 12px !important;
    margin-top: 2px !important;
    margin-right: 0px !important;
  }

  .px-2 {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  #nueva {
    margin-top: 15%;
    margin-bottom: -40%;
  }
}

/* #### Tables #### */
@media (min-width: 600px) and (max-width: 990px) {
  #container {
    /*border: 3px dashed red;*/
  }

  .container-home-steps-banners1 {
    /*  background-image: url("../images/DoritosLARGE_V2_600.jpg");*/
    background-size: 100% auto;
    background-position: top;
  }

  .home-master-container {
    /*height: calc(100vh - 500px);*/
    height: 500px;
  }

  .mt-200x {
    margin-top: 0px;
  }

  .mt-100x {
    margin-top: 330px; /* -100px;*/
  }

  .btncarga-container {
    margin-top: -200px;
  }

  .pasos-container {
    margin-top: -60px;
  }

  .container-home-principal {
    margin-top: 10%; /* 35%; */
  }

  .feature-icon {
    height: auto !important;
  }

  .menu-logo2 {
    display: block;
  }

  #imgbtnLogout {
  }

  #imgbtnLogin {
  }

  #imgbtnPerfil {
  }

  #divPerfilHeaderResp {
    display: none;
  }

  div.gallery img {
    width: 120px;
    height: 120px;
  }

  .w-250px {
    width: 210px;
    height: auto;
  }

  .imgchip {
    display: none;
  }

  #logo-loot {
    height: 300px;
  }

  .photo-loot-container {
    height: 100px;
    width: 120px;
  }

  #navbarToggler {
    margin-top: 0px !important;
  }

  #modalAvisoprivacidad {
    font-size: small;
  }

  #modalTerminosycondiciones {
    font-size: small;
  }

  .separador {
    height: 9px !important;
  }

  #paso2 {
    margin-top: 100px !important;
  }

  .awards-container img {
    height: auto !important;
  }

  .footer-background {
    height: 40px !important;
  }

  #menu-footer {
    height: 15px !important;
    margin-top: -1px !important;
  }
  .display-8 {
    font-size: 0.6rem !important;
  }
}
/* #### Desktops #### */
@media (min-width: 990px) {
  #container {
    /*border: 3px dashed green;*/
  }

  #divPerfilHeaderResp {
    display: none;
  }
  /*
    #navbarToggler {
        margin-top: -36px!important;
    }
    */
}

@media screen and (max-width: 500px) {
  .nav-item {
    float: none;
  }
}

/* X-Small devices (portrait phones, less than 576px) */
/*@media (max-width: 575px) {
@media (max-width: 575px) {
#container { border: 3px dashed gold; }

}
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/*
@media screen and (max-width: 1280px) {
   .navbar-brand {
       position: relative;
       left: 10%;
   }

   #menu-footer {
       display: block;
       text-align: center;
   }
}
*/

/*----------------- adicionales bodega aurrera ------------------*/
.display-7 {
  font-size: 0.9rem;
  text-align: center;
}

.display-8 {
  font-size: 0.8rem;
  text-align: center;
}

.color-verde {
  color: #3a9300 !important;
}

.color-rojo {
  color: #ff0000 !important;
}

/* .color-naranja {
  color: #dca237!important;
} */

.color-naranja {
  color: #f1d148 !important;
}

.color-naranja-bold {
  color: #dca237 !important;
  font-weight: bold !important;
}

.font-1 {
  font-family: Bodegaaurrera;
}

.font-2 {
  font-family: Bodegaaurrera2;
}

.bullet {
  /*font-size: 1.9rem;*/
  font-size: 20px;
}

.text-align {
  text-align: left; /*justify;*/
  padding: 5px;
}

.separador {
  width: 100% !important;
  margin-top: 52px;
  height: 13px;
}

.separador2 {
  width: 100% !important;
  height: 5px;
}

.mr-1 {
  margin-right: 20px;
}

.center2 {
  margin: auto;
  width: 100%;
  background-image: url("../images/Logo.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mt-6 {
  margin-top: 6.5rem;
}

#menu-footer {
  height: 25px;
  margin-right: 5px;
  margin-top: 15px;
}

.row {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-left: 0px !important;
}

#comojugar {
  /* margin-top: 130px; */
  margin-top: -8%;
  margin-bottom: 3%;
}

.line-heigth-tyc {
  line-height: 18px;
}

#nueva {
  margin-top: 15%;
}

.img-perfil {
  width: 35%;
}

@media (min-width: 310px) {
  .center2 {
    height: 135px;
  }
  .pasos-container {
    margin-top: -10px;
  }
  .shower {
    width: 90%;
  }
}

@media (min-width: 325px) {
  .center2 {
    height: 140px;
  }
  .pasos-container {
    margin-top: -10px;
  }
  .shower {
    width: 90%;
  }
}

@media (min-width: 377px) {
  .center2 {
    height: 167px;
  }
  .pasos-container {
    margin-top: 30px;
  }
  .shower {
    width: 90%;
  }
}

@media (min-width: 390px) {
  .center2 {
    height: 185px;
  }
  .pasos-container {
    margin-top: 30px;
  }
  .shower {
    width: 90%;
  }
}

@media (min-width: 475px) {
  .center2 {
    height: 218px;
  }
  .pasos-container {
    margin-top: -10px;
  }
  .shower {
    width: 90%;
  }
}

@media (min-width: 768px) {
  .center2 {
    /* margin-top: -10%; */
    /* margin-left: -1%; */
    height: 356px;
  }
  .pasos-container {
    margin-top: -10px;
  }

  .shower {
    width: 90%;
  }
}

@media (min-width: 920px) {
  .center2 {
    height: 421px;
  }

  .btncarga-container {
    margin-top: 3rem !important;
  }

  .pasos-container {
    margin-top: 35px;
    margin-bottom: -12%;
  }

  .text-ranking {
    margin-top: 10px;
  }

  .shower {
    display: none;
  }

  #nueva {
    margin-top: 10%;
  }
}

@media (min-width: 1024px) {
  .center2 {
    height: 463px;
  }

  .btncarga-container {
    margin-top: -7rem !important;
  }

  .pasos-container {
    margin-top: 35px;
  }

  .text-ranking {
    margin-top: 10px;
  }

  #nueva {
    margin-top: 25%;
  }

  .shower {
    display: none;
  }
  /* .login-cuadro{
    height: 65%;
  } */
}

@media (min-width: 1440px) {
  .center2 {
    height: 669px;
  }

  .btncarga-container {
    margin-top: 11rem !important;
  }

  .pasos-container {
    margin-top: 35px;
  }

  .text-ranking {
    margin-top: 10px;
  }

  #nueva {
    margin-top: 15%;
  }

  .shower {
    display: none;
  }
  /* .login-cuadro{
    height: 65%;
  } */
}

@media (min-width: 1728px) {
  .center2 {
    height: 779px;
  }

  .btncarga-container {
    margin-top: 11rem !important;
  }

  .pasos-container {
    margin-top: 35px;
  }

  .text-ranking {
    margin-top: 10px;
  }

  #nueva {
    margin-top: 15%;
  }

  .shower {
    display: none;
  }
}

@media (min-width: 1920px) {
  .center2 {
    height: 856px;
  }

  .btncarga-container {
    margin-top: 20rem !important;
  }

  .pasos-container {
    margin-top: 35px;
  }

  .text-ranking {
    margin-top: 10px;
  }

  .shower {
    display: none;
  }
}

@media (min-width: 2048px) {
  .center2 {
    height: 905px;
  }

  .btncarga-container {
    margin-top: 20rem !important;
  }

  .pasos-container {
    margin-top: 35px;
  }

  .text-ranking {
    margin-top: 10px;
  }

  .shower {
    display: none;
  }
}

@media (min-width: 2560px) {
  .center2 {
    height: 1150px;
  }

  .btncarga-container {
    margin-top: 43rem !important;
  }

  .pasos-container {
    margin-top: 3%;
  }

  .text-ranking {
    margin-top: 10px;
  }

  #nueva {
    margin-top: 10%;
  }

  #comojugar {
    margin-top: 3%;
    margin-bottom: 5%;
  }

  .shower {
    display: none;
  }
}

.center2 {
  border-top-color: #0c8802;
  border-bottom-color: #0c8802;
  border-left-color: transparent;
  border-right-color: transparent;
  border-style: solid; /*  Define el estilo del borde */
  border-width: 3px; /* Define el grosor del borde */
}