/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital@1&family=Asap&family=Domine&family=Gentium+Plus:ital@1&family=Hind+Siliguri:wght@300&family=Josefin+Slab:wght@300&family=Lato:wght@300&family=Lora&family=Merriweather:wght@300&family=Montserrat:wght@200&family=Open+Sans&family=Poppins:wght@200&family=Quicksand&family=Raleway:wght@200&family=Roboto&family=Signika+Negative:wght@300&family=Ubuntu:wght@300&family=Vollkorn&display=swap');
.cards-container {
  column-break-inside: avoid;
}

.cards-container .card {
  display: inline-block;
  overflow: visible;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media only screen and (min-width: 601px) {
  .cards-container {
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -moz-column-count: 3;
    column-count: 3;
  }
}
.text-center {
  text-align: center;
}

figure.effect-zoe figcaption {
  height: 5.75em;
}

.transformacion1 { 
  text-transform: capitalize;
}   


.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}


#modal10 {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 80%;
  width: 30%;
  margin: auto;
  overflow-y: hidden;
  border-radius: 2px;
  will-change: top, opacity;
  overflow-x: hidden;
}


@media only screen and (max-width : 992px) {
  #modal10 {
    width: 80%;
  }
}

#register-page {
   height: auto;
}

.select2 {
  width: calc(100% - 45px) !important;
  /* width: 80% !important; */
  margin-left: 45px!important;
}


@media only screen and (max-width : 992px) {
  #register-page {
    height: auto;
 }
 #d{
  color: black;
  margin-left: 42%;
}
.btnPromos{
  width: 165px!important;
  margin-top: 1px;
  font-size: 13px;

}
}
  #d{
    color: black;
    margin-left: 35%;
  
  }



@media only screen and (min-width : 992px) {
 .qr {
  padding-top: 3%!important;
  }
  .izquierda{
    float: right;
  }

 

}

.mrSlider{
  margin-top: 1.3%;
}



.name{
  text-align: center;
  height: 30px;
  font-weight: bold;
  font-size: 20px!important;
 
}

#btnWhatsaap{
  background-color: #00BF01!important;
}


.dropify-wrapper .dropify-preview{
   height:300px;
}




#logo_movil1 {
  height: 38px !important;
  margin-top: 7px;
}

#btn_promos{
  margin-top:15% !important;
}

.navbar .navbar-dark ul a {
  margin-right: -21px !important;
}

a.waves-effect.waves-block.waves-light.profile-button {
  margin-top: 2px;
  height: 60px;
}

a.brand-logo.darken-1 {
  height: 60px;
}
:root {
	--fondo: ;
	--font: Roboto, sans-serif;
	--font-sz: undefinedpx;
	--gradient1: #e40046;
	--gradient2: #e40046;
  --logo:url("/storage/logos/movilOld.png");
	--indicador: #6d2077;
	--sidenav: #6d2077;
  --sz-titulo-promos: 46.72px;
	--sz-titulo-sorteos: undefinedpx;
  --cl-sz-titulo-promos: #333;
	--cl-sz-titulo-sorteos: undefined;
	--font-titulo-s: undefined;
  --font-titulo-p: Muli, sans-serif;
  --font-texto-s: Muli, sans-serif;
  --font-texto-p: Muli, sans-serif;
  --cl-sz-texto-promos: #333;
	--cl-sz-texto-sorteos: #06218e;
  --sz-texto-promos: 46.72px;
	--sz-texto-sorteos: 45px;
	--btnsor1: #6d2077;
	--btnsor2: #e40046;
	--btprfil: #6d2077;
	--btnsorf: #ffffff;
	--btnprtar: #e40046;
	--btprfont: #ffffff;
	--btprtarfont: #ffffff;
	--btnregis: #e40046;
	--btnregiscol: #ffffff;
	--btnlog1: #e40046;
	--btnlog2: #e40046;
	--btnlogcol: #ffffff;
}

html{
font-family: var(--font)!important;

}

.bn-promos-titulo{
  font-size: var(--sz-titulo-promos)!important;
  color:var(--cl-sz-titulo-promos);
  font-family: var(--font-titulo-p);
}
.bn-sorteos-titulo{
  font-size: var(--sz-titulo-sorteos)!important;
  color:var(--cl-sz-titulo-sorteos);
  font-family: var(--font-titulo-s);
}

@media only screen and (min-width: 0) {
  html {
    font-size: var(--font-sz)!important;
  }
}
@media only screen and (min-width: 992px) {
  html {
    font-size: calc(var(--font-sz) +0,5px )!important
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: calc(var(--font-sz) + 1px)!important;
  }
}
/*color navbar y footer      */
.gradient-45deg-light-blue-cyan {
  background: linear-gradient(45deg, var(--gradient1), var(--gradient2)) !important;
} 

/* color de indicador de los slides */
.slider .indicators .indicator-item.active {
  background-color: var(--indicador);
}
/* color btn sidenav movil */
.btn-floating{
  background-color: var(--sidenav);
}
.btn-floating:hover{
  background-color: var(--sidenav);
}
/* color notifcaciones  */
.orange.accent-3 {
  background-color: var(--sidenav)!important;

}
  #logo_movil {
    height: 38px !important;
    margin-top: -7px;

  }

.font{
  font-family: var(--font);
}

.fondo {
  background-color: var(--fondo);
}

.font-sz{
font-size: var(--font-sz);
}


/*Color boton sorteos promo          */

.gradient-45deg-deep-purple-blue {
    background: linear-gradient(45deg, var(--btnsor1) ,var(--btnsor2)) !important;
    color: var(--btnsorf) !important;
}
/*color botones filtros promos*/
.grey.darken-1 {
  background-color: var(--btprfil) !important;
  color:var(--btprfont);
}

/*color boton tarjetas promos y documentos promo */
.cyan {
  background-color: var(--btnprtar) !important;
  color: var(--btprtarfont)!important;
}

/*boton formulario registro y factura remota */
.btn, .btn-small, .btn-large {
  background-color: var(--btnregis);
  color:var(--btnregiscol);

}
/*hover boton formulario registro y factura remota    */

.btn:hover, .btn-small:hover, .btn-large:hover {
    background-color: var(--btnregis);
}

/*booton formulario login y ingreso admin */
.gradient-45deg-purple-deep-orange{
  background: linear-gradient(45deg, var(--btnlog1), var(--btnlog2)) !important;
  color:var(--btnlogcol)!important;
}


.valeri{
  background-color: red;
}


