/*
	CSS personalizado para 05 ESTABLECIMIENTOS
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Rojo Oscuro: D74F41 rgb(215, 79, 65) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: EBA7A0 rgb(235,167,160) */
/*     Rojo Claro: F5D3CF rgb(245,211,207) */
/* Rojo Muy Claro: FAE9E7 rgb(250,233,231) */

/*           Añil: 143046 rgb( 20, 48, 70) */
/*          Ambar: E6AF40 rgb(230,175, 64) */
/*          Oliva: 4C5335 rgb( 76, 83, 53) */
/*          Crema: FAEFD9 rgb(250,239,217) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/*********************************** #rowEstablecimientosIntro ***********************************/

#rowEstablecimientosIntro *                         { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowEstablecimientosIntro .divEstablecimientosIntro { cursor: default; }
#rowEstablecimientosIntro .divContent               { position: relative; margin: auto; padding: 140px 0px 40px 0px; max-width: 1180px; z-index: 1; }
#rowEstablecimientosIntro .divHeading h3            { color: var(--color1-hex) !important; }
#rowEstablecimientosIntro .divHeading p             { max-width: 810px; }

@media (max-width:  980px) { #rowEstablecimientosIntro .divContent { padding: 100px  0px 40px  0px; } #rowEstablecimientosIntro .divHeading p { max-width: 510px; } }
@media (max-width:  780px) {                                                                          #rowEstablecimientosIntro .divHeading p { max-width: 385px; } }
@media (max-width:  580px) {                                                                          #rowEstablecimientosIntro .divHeading p { margin: 12px auto 0px auto; max-width: 310px; } }
@media (max-width:  380px) { #rowEstablecimientosIntro .divContent { padding: 100px 20px 40px 20px; } #rowEstablecimientosIntro .divHeading p { max-width: auto; } }

/************************************ #rowEstablecimientosFeed ***********************************/

#rowEstablecimientosFeed * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

/* #rowEstablecimientosFeed .divFiltros */

#rowEstablecimientosFeed .divFiltros                  { margin: 40px auto 0px auto; max-width: 1180px; display: flex; justify-content: space-between; }
#rowEstablecimientosFeed .divFiltro                   { padding: 0px 10px; width: calc((100% - 60px) / 4); height: 60px; border: solid 4px var(--color1-hex); }
#rowEstablecimientosFeed .divFiltro                   { display: flex; align-items: center; justify-content: center; cursor: pointer; }
#rowEstablecimientosFeed .divFiltro        i.mwp-icon { flex: 0 0 24px; margin-right: 10px; filter: none; opacity: 0.5; }
#rowEstablecimientosFeed .divFiltro        span       { text-align: center; white-space: nowrap; }
#rowEstablecimientosFeed .divFiltro.activo            { background: var(--color1-hex); pointer-events: none; }
#rowEstablecimientosFeed .divFiltro.activo i.mwp-icon { filter: invert(1); opacity: 1; }
#rowEstablecimientosFeed .divFiltro.activo span       { font-weight: 700; color: #FFFFFF; }
#rowEstablecimientosFeed .divFiltro:hover             { transform: scale(1.1); background: var(--color5-hex); }

@media (max-width: 1380px) { #rowEstablecimientosFeed .divFiltros { margin: 40px 40px 0px 40px; } }

@media (max-width: 1180px) {
	#rowEstablecimientosFeed .divFiltro            { width: calc((100% - 30px) / 4); }
	#rowEstablecimientosFeed .divFiltro i.mwp-icon { margin-right: 5px; }
	#rowEstablecimientosFeed .divFiltro:hover      { transform: scale(1.05); }
}

@media (max-width:  980px) { #rowEstablecimientosFeed .divFiltros { margin: 20px 40px 0px 40px; } }

@media (max-width:  780px) {
	#rowEstablecimientosFeed .divFiltros      { margin: 0px 30px 0px 30px; flex-wrap: wrap; }
	#rowEstablecimientosFeed .divFiltro       { width: calc((100% - 15px) / 2); height: 50px; border-width: 2px; }
	#rowEstablecimientosFeed .divFiltroALL    { margin-bottom: 15px; }
	#rowEstablecimientosFeed .divFiltroCOM    { margin-bottom: 15px; }
}

@media (max-width:  580px) { #rowEstablecimientosFeed .divFiltro  { height: 40px; } }
@media (max-width:  480px) { #rowEstablecimientosFeed .divFiltro  { margin-bottom: 15px; width: 100%; } #rowEstablecimientosFeed .divFiltroALL span br5080:before { content: " "; } }
@media (max-width:  380px) { #rowEstablecimientosFeed .divFiltros { margin: 0px 20px 0px 20px; } }

/* #rowEstablecimientosFeed .divEstablecimientos */

#rowEstablecimientosFeed .divEstablecimientos                         { margin: auto; padding: 100px 40px; max-width: 1500px; display: flex; flex-wrap: wrap; cursor: default; }
#rowEstablecimientosFeed .divEstablecimiento                          { position: relative; margin: 10px; width: calc((100% - 100px) / 5); height: 400px; cursor: pointer; }
#rowEstablecimientosFeed .divEstablecimiento                          { border-radius: 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); overflow: hidden; -webkit-transition: none; transition: none; }
#rowEstablecimientosFeed .divEstablecimiento       .divFoto           { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }
#rowEstablecimientosFeed .divEstablecimiento       .divContent        { position: absolute; bottom: 0px; left: 0px; padding: 30px 30px 0px 30px; width: 100%; }
#rowEstablecimientosFeed .divEstablecimiento       .divContent        { background: linear-gradient(0deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%);  }
#rowEstablecimientosFeed .divEstablecimiento       i.mwp-icon         { filter: invert(1); }
#rowEstablecimientosFeed .divEstablecimiento       .divTitulo         { margin-top: 10px; font-family: var(--font-family-rowdies); font-size: 16px; font-weight: 300; color: #FFFFFF; }
#rowEstablecimientosFeed .divEstablecimiento       .divTitulo         { text-transform: uppercase; letter-spacing: 2px; line-height: 120%; }
#rowEstablecimientosFeed .divEstablecimiento       .aVerMasWhiteRight { opacity: 0; }
#rowEstablecimientosFeed .divEstablecimiento:hover                    { border: solid 6px var(--color1-hex); }
#rowEstablecimientosFeed .divEstablecimiento:hover .divContent        { padding: 30px 24px 20px 24px; }
#rowEstablecimientosFeed .divEstablecimiento:hover .aVerMasWhiteRight { margin-top: 20px; opacity: 1; }

@media (max-width: 1380px) { #rowEstablecimientosFeed .divEstablecimiento { width: calc((100% - 80px) / 4); } }

@media (max-width: 1180px) {
	#rowEstablecimientosFeed .divEstablecimientos                         { padding: 60px 30px; }
	#rowEstablecimientosFeed .divEstablecimiento                          { width: calc((100% - 60px) / 3); height: 350px; }
}

@media (max-width:  980px) {
	#rowEstablecimientosFeed .divEstablecimientos                         { padding: 40px 30px; }
	#rowEstablecimientosFeed .divEstablecimiento                          { height: 300px; }
	#rowEstablecimientosFeed .divEstablecimiento       .divContent        { padding: 25px 25px 0px 25px; }
	#rowEstablecimientosFeed .divEstablecimiento       i.mwp-icon         { width: 40px; height: 40px; }
	#rowEstablecimientosFeed .divEstablecimiento       .divTitulo         { font-size: 14px; }
	#rowEstablecimientosFeed .divEstablecimiento:hover                    { border-width: 4px; }
	#rowEstablecimientosFeed .divEstablecimiento:hover .divContent        { padding: 25px 21px 20px 21px; }
	#rowEstablecimientosFeed .divEstablecimiento:hover .aVerMasWhiteRight { margin-top: 10px; }
}

@media (max-width:  780px) {
	#rowEstablecimientosFeed .divEstablecimientos                         { padding: 30px 20px; }
	#rowEstablecimientosFeed .divEstablecimiento                          { width: calc((100% - 40px) / 2); height: 250px; border-radius: 15px; }
	#rowEstablecimientosFeed .divEstablecimiento       .divContent        { padding: 20px 20px 0px 20px; }
	#rowEstablecimientosFeed .divEstablecimiento:hover .divContent        { padding: 20px 16px 10px 16px; }
}

@media (max-width:  580px) { #rowEstablecimientosFeed .divEstablecimiento            { margin: 5px 0px; width: 100%; height: 200px; border-radius: 10px; } }
@media (max-width:  380px) { #rowEstablecimientosFeed .divEstablecimiento .divTitulo { font-size: 13px; } }