/*
	CSS personalizado para EVENTS
*/

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

/*    Azul Oscuro: 1B71B8 rgb( 27,113,184) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 8DB8DB rgb(141,184,219) */
/*     Azul Claro: C6DBED rgb(198,219,237) */
/* Azul Muy Claro: E2EDF6 rgb(226,237,246) */

/*          Verde: 15AC6F rgb( 21,172,111) */
/*    Verde Medio: 8AD5B7 rgb(138,213,183) */
/*    Verde Claro: C4EADB rgb(196,234,219) */
/*Verde Muy Claro: E1F4ED rgb(225,244,237) */

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

/******************************************* #rowEvents ******************************************/

#rowEvents .divEvents * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#rowEvents .divCabecera { margin-bottom: 40px; font-size: 24px; font-weight: 900; border-bottom: dotted 1px; text-align: center; }

#rowEvents .divEvento                            { margin-bottom: 40px; width: 100%; }
#rowEvents .divEvento.divEventoOld               { opacity: 0.3; }
#rowEvents .divEvento.divEventoOld:hover         { opacity: 1; }
#rowEvents .divEvento .divImagen                 { float: left; margin-right: 30px; width: 300px; height: 200px; border: solid 1px var(--color-ver2-hex); }
#rowEvents .divEvento .divImagen                 { background-repeat: no-repeat; background-size: 95%; background-position: center center; }
#rowEvents .divEvento .divImagen                 { box-shadow: 0px 0px 5px rgba(var(--color-ver2-rgb),0.5); }
#rowEvents .divEvento .divImagen.no-image        { background-size: 70%; opacity: 0.5; }
#rowEvents .divEvento .divImagen.no-image:after  { content: ""; width: 100%; height: 100%; background: rgba(var(--color1-rgb),0.2); display: block; }
#rowEvents .divEvento .divImagen.bighit          { background-size: 50%; }
#rowEvents .divEvento .divImagen.bighit:after    { content: ""; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: block; }
#rowEvents .divEvento .divContent                { min-height: 200px; display: table; }
#rowEvents .divEvento .divTitulo h1              { font-size: 24px; color: var(--color1-hex) !important; }
#rowEvents .divEvento .divTitulo h1:hover        { color: var(--color-ver1-hex) !important; }
#rowEvents .divEvento .divFechaEvento            { margin-top: 10px; color: var(--color-ver1-hex); }
#rowEvents .divEvento .divFechaEvento i          { margin-right: 5px; }
#rowEvents .divEvento .divTexto                  { margin-top: 10px; }
#rowEvents .divEvento .divTexto  p               { margin: 8px 0px; }
#rowEvents .divEvento .divTexto  p:first-of-type { margin-top: 0px; }
#rowEvents .divEvento .divTexto  p:last-of-type  { margin-bottom: 0px; }
#rowEvents .divEvento .divButtonEvent .aButton   { margin-top: 10px; padding: 8px 0px 0px 0px; width: 120px; height: 30px; font-size: 14px; border-radius: 6px; text-align: center; }
/*
#rowEvents .aButton.aButtonBigHitEvents           { position: relative; margin: 30px auto 0px auto; padding: 20px; width: 300px; background: var(--color-ver4-hex); }
#rowEvents .aButton.aButtonBigHitEvents           { border: solid 2px var(--color1-hex); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); display: table; }
#rowEvents .aButton.aButtonBigHitEvents:hover     { background: var(--color5-hex); transform: scale(1.2); }
#rowEvents .aButton.aButtonBigHitEvents .imgTouch { position: absolute; bottom: 5px; right: 15px; width: 48px; transform: rotate(-30deg); }
*/
@media (max-width: 1180px) { #rowEvents .divCabecera { margin: 0px 20px 40px 20px; } #rowEvents .divEventos { padding: 0px 20px; } }

@media (max-width:  980px) {
	#rowEvents .divEvento                             { margin-bottom: 30px; }
	#rowEvents .divEvento .divImagen                  { margin-right: 25px; width: 240px; height: 180px; background-size: 90%; }
	#rowEvents .divEvento .divContent                 { min-height: 180px; }
	#rowEvents .divEvento .divTitulo h1               { font-size: 20px; }
	#rowEvents .divEvento .divFechaEvento             { font-size: 14px; }
	#rowEvents .divEvento .divTexto                   { font-size: 14px; }
	#rowEvents .divEvento .divButtonEvent .aButton    { font-size: 13px; }
	#rowEvents .aButton.aButtonBigHitEvents           { padding: 15px; width: 260px; }
	#rowEvents .aButton.aButtonBigHitEvents .imgTouch { width: 42px; }
}

@media (max-width:  780px) {
	#rowEvents .divCabecera                           { margin: 0px 20px 30px 20px; font-size: 20px; }
	#rowEvents .divEvento                             { margin-bottom: 20px; }
	#rowEvents .divEvento .divImagen                  { margin-right: 20px; width: 180px; height: 120px; background-size: 80%; }
	#rowEvents .divEvento .divContent                 { min-height: 120px; }
	#rowEvents .divEvento .divTitulo h1               { font-size: 18px; }
	#rowEvents .divEvento .divButtonEvent .aButton    { padding: 6px 0px 0px 0px; width: 110px; height: 24px; font-size: 12px; }
	#rowEvents .aButton.aButtonBigHitEvents           { width: 200px; }
	#rowEvents .aButton.aButtonBigHitEvents .imgTouch { width: 36px; }
}

@media (max-width:  580px) {
	#rowEvents .divCabecera                           { margin: 0px 10px 30px 10px; }
	#rowEvents .divEventos                            { padding: 0px 10px; }
	#rowEvents .divEvento                             { margin-bottom: 30px; }
	#rowEvents .divEvento .divImagen                  { float: none; margin: auto; width: 240px; height: 140px; background-size: 90%; }
	#rowEvents .divEvento .divContent                 { width: 100%; min-height: 140px; }
	#rowEvents .divEvento .divTitulo                  { margin-top: 20px; }
	#rowEvents .divEvento .divTitulo h1               { font-size: 24px; text-align: center; }
	#rowEvents .divEvento .divFechaEvento             { text-align: center; }
	#rowEvents .divEvento .divFechaEvento:after       { content: ""; margin: 10px auto 20px auto; width: 100px; height: 1px; background: #666666; display: block; }
	#rowEvents .divEvento .divButtonEvent             { text-align: center; }
	#rowEvents .divEvento .divButtonEvent .aButton    { padding: 8px 0px 0px 0px; width: 120px; height: 30px; font-size: 13px; }
	#rowEvents .aButton.aButtonBigHitEvents           { width: 160px; }
	#rowEvents .aButton.aButtonBigHitEvents .imgTouch { width: 28px; }
}

@media (max-width:  480px) {
	#rowEvents .divEvento .divImagen    { width: 200px; height: 120px; }
	#rowEvents .divEvento .divContent   { min-height: 120px; }
	#rowEvents .divEvento .divTitulo h1 { font-size: 20px; }
}

@media (max-width:  380px) {
	#rowEvents .divEvento .divImagen               { width: 180px; background-size: 80%; }
	#rowEvents .divEvento .divTitulo h1            { font-size: 18px; }
	#rowEvents .divEvento .divFechaEvento:after    { width: 50%; }
	#rowEvents .divEvento .divButtonEvent .aButton { padding: 6px 0px 0px 0px; width: 110px; height: 24px; font-size: 12px; }
}