/*
	CSS personalizado para 04 HISTORICO
*/

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

/*    Azul oscuro: 236089 rgb( 35, 96,137)*/
/*           Gris: 999999 rgb(153,153,153)*/
/*     Azul medio: 95A3BB rgb(149,163,187)*/
/*     Azul claro: CAD1DD rgb(202,209,221)*/
/* Azul muy claro: E4E8EE rgb(228,232,238)*/

/*           Azul: 4691B0 rgb( 70,145,176)*/
/*          Beige: E3C4A7 rgb(227,196,167)*/
/*        Magenta: 883848 rgb(136, 56, 72)*/

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

/************************************* #rowHistoricoHeading **************************************/

#rowHistoricoHeading .divHeading { margin: 50px 0px 60px 0px; }

@media (max-width: 980px) { #rowProgramacionHeading .divHeading { margin: 50px 0px; } }
@media (max-width: 780px) { #rowProgramacionHeading .divHeading { margin: 30px 0px; } }

/************************************* #rowHistoricoEventos **************************************/

#rowHistoricoEventos { margin: 0px; padding: 0px !important; } /*Tiene que ser así*/

#rowHistoricoEventos .divHistoricoEventos { margin-bottom: 60px; display: flex; flex-wrap: wrap; }

#rowHistoricoEventos .divMes { padding: 5px 25px; width: 100%; font-family: var(--font-family-normal-roboto); }
#rowHistoricoEventos .divMes { font-size: 16px; font-weight: 500; background: rgba(var(--colorAzul-rgb),0.3); border-bottom: solid 1px #AAAAAA; }

#rowHistoricoEventos .divEvento       { position: relative; margin: 20px; width: calc(25% - 40px); height: 180px; }
#rowHistoricoEventos .divEvento       { border: solid 1px #CCCCCC; background-color: #FFFFFF; box-shadow: 0px 0px 5px #CCCCCC; cursor: pointer; }
#rowHistoricoEventos .divEvento       { -webkit-transition: all 0.2s ease; transition: all 0.3s ease; }
#rowHistoricoEventos .divEvento:hover { transform: translateY(-15px) !important; opacity: 0.5; }

#rowHistoricoEventos .divEvento .divFondoFecha           { position: absolute; width: 40px; height: 140px; background: rgba(var(--color2-rgb),0.6); }
#rowHistoricoEventos .divEvento .divFechaInicio          { position: absolute; width: 40px; font-weight: bold; color: #FFFFFF; text-align: center; }
#rowHistoricoEventos .divEvento .divFechaInicio span     { display: block; }
#rowHistoricoEventos .divEvento .divFechaInicio .spanDia { font-size: 22px; line-height: 40px; }
#rowHistoricoEventos .divEvento .divFechaInicio .spanMes { font-size: 16px; line-height: 12px; }
#rowHistoricoEventos .divEvento .divFechaInicio .spanAño { font-size: 14px; line-height: 26px; }

#rowHistoricoEventos .divEvento .divFoto { height: 140px; background-position: center; }

#rowHistoricoEventos .divEvento .divTitulo { padding: 0px 15px; width: 100%; font-size: 18px; font-weight: normal; color: #FFFFFF; }
#rowHistoricoEventos .divEvento .divTitulo { background: var(--color2-hex); line-height: 40px; }

#rowHistoricoEventos .divEvento .divCategoria                    { position: absolute; top: 0px; right: 0px; }
#rowHistoricoEventos .divEvento .divCategoria .divBotonCategoria { padding: 6px 0px 4px 0px; border-radius: 0px; }

@media (max-width: 1180px) { #rowHistoricoEventos .divEvento { margin: 20px 10px; width: calc(33% - 20px); } }
@media (max-width:  780px) { #rowHistoricoEventos .divEvento { width: calc(50% - 20px); } }
@media (max-width:  480px) { #rowHistoricoEventos .divEvento { margin: 20px 0px; width: 100%; } }