/*
	CSS personalizado para 05 HU108
*/

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

/*    Rojo Oscuro: E11F1D rgb(225, 31, 29) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: F08F8E rgb(240,143,142) */
/*     Rojo Claro: F7C7C6 rgb(247,199,198) */
/* Rojo Muy Claro: FBE3E2 rgb(251,227,226) */

/*           Gris: B0B0B0 rgb(176,176,176) */

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

/*************************************** #rowHU108Cabecera ***************************************/

#rowHU108Cabecera *                       { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Cabecera .divCabeceraFoto        { position: relative; width: 100%; height: 500px; background-image: url("/wp-content/themes/espacio108/images/fotos/cabecera-hu108.jpg"); }
#rowHU108Cabecera .divCabeceraFoto        { border-bottom: solid 8px var(--color1-hex); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#rowHU108Cabecera .divCabeceraFoto:before { content: ""; position: absolute; top: 50%; left: 50px; transform: translateY(-50%); width: 400px; height: 400px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Cabecera .divCabeceraFoto:before { background-image: url("/wp-content/uploads/logo-hu108.png"); background-repeat: no-repeat; background-size: contain; }
#rowHU108Cabecera .divCabeceraHeading     { background-image: var(--fondo-huella-gris); }
#rowHU108Cabecera .divHeading108 h2       { height: 62px; font-size: 80px !important; color: #FFFFFF; }
#rowHU108Cabecera .divHeading108:after    { top: 4px; left: -8px; width: 120px; height: calc(120px * 192 / 300); }
#rowHU108Cabecera .divTexto      p        { margin: 0px auto; padding: 0px 40px 40px 40px; max-width: 1180px; font-size: 20px; color: #FFFFFF; text-align: center; }

@media (max-width:  980px) {
	#rowHU108Cabecera .divCabeceraFoto        { height: 400px; }
	#rowHU108Cabecera .divCabeceraFoto:before { left: 40px; width: 300px; height: 300px; }
	#rowHU108Cabecera .divHeading108 h2       { height: 53px; font-size: 70px !important; }
	#rowHU108Cabecera .divHeading108:after    { top: 4px; left: -6px; width: 110px; height: calc(110px * 192 / 300); }
	#rowHU108Cabecera .divTexto      p        { padding: 0px 40px 30px 40px; }
}

@media (max-width:  780px) {
	#rowHU108Cabecera .divCabeceraFoto        { height: 300px; }
	#rowHU108Cabecera .divCabeceraFoto:before { left: 30px; width: 200px; height: 200px; }
	#rowHU108Cabecera .divHeading108 h2       { height: 46px; font-size: 60px !important; }
	#rowHU108Cabecera .divHeading108:after    { top: 3px; left: -6px; width: 100px; height: calc(100px * 192 / 300); }
	#rowHU108Cabecera .divTexto      p        { padding: 0px 40px 30px 40px; font-size: 18px; line-height: 120%; }
}

@media (max-width:  580px) {
	#rowHU108Cabecera .divCabeceraFoto        { height: 200px; }
	#rowHU108Cabecera .divCabeceraFoto:before { left: 20px; width: 150px; height: 150px; }
	#rowHU108Cabecera .divHeading108 h2       { height: 38px; font-size: 50px !important; }
	#rowHU108Cabecera .divHeading108:after    { top: 4px; left: -4px; width: 80px; height: calc(80px * 192 / 300); }
	#rowHU108Cabecera .divTexto      p        { padding: 0px 40px 20px 40px; font-size: 16px; }
}

@media (max-width:  480px) {
	#rowHU108Cabecera .divCabeceraFoto        { height: 160px; }
	#rowHU108Cabecera .divCabeceraFoto:before { width: 130px; height: 130px; }
	#rowHU108Cabecera .divHeading108 h2       { height: 31px; font-size: 40px !important; }
	#rowHU108Cabecera .divHeading108:after    { top: 3px; left: -4px; width: 60px; height: calc(60px * 192 / 300); }
	#rowHU108Cabecera .divTexto      p        { padding: 0px 30px 20px 30px; font-size: 14px; }
}

@media (max-width:  380px) {
	#rowHU108Cabecera .divCabeceraFoto        { height: 140px; }
	#rowHU108Cabecera .divCabeceraFoto:before { width: 100px; height: 100px; }
	#rowHU108Cabecera .divHeading108 h2       { height: 23px; font-size: 30px !important; }
	#rowHU108Cabecera .divHeading108:after    { top: 1px; left: -2px; width: 45px; height: calc(45px * 192 / 300); }
	#rowHU108Cabecera .divTexto      p        { padding: 0px 30px 20px 30px; font-size: 14px; }
}

/***************************************** #rowHU108Info *****************************************/

#rowHU108Info *               { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Info .divHU108Info   { display: flex; }
#rowHU108Info .divIzda        { position: relative; width: 50%; background-color: #508E3B; }
#rowHU108Info .divIzda:before { content: ""; position: absolute; top: 0px; right: 0px; width: 60%; height: 100%; background-image: url("/wp-content/uploads/bicicleta.jpg"); }
#rowHU108Info .divIzda:before { background-repeat: no-repeat; background-size: cover; background-position: left center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Info .divDcha        { width: 50%; }
#rowHU108Info .divFeatures    { padding: 40px 40px 0px 40px; }
#rowHU108Info .divFeature     { margin-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; }
#rowHU108Info .divFeature i   { width: 40px; font-size: 30px; color: #508E3B; display: flex; justify-content: center; }
#rowHU108Info .divFeature h3  { padding: 7px 0px 0px 10px; font-size: 24px; font-weight: 700; }
#rowHU108Info .divFeature p   { margin: 20px 0px 0px  0px; font-size: 20px; font-weight: 300; text-align: justify; }

@media (max-width: 1380px) { #rowHU108Info .divIzda:before { width: 70%; } }
@media (max-width: 1180px) { #rowHU108Info .divIzda:before { width: 80%; } }

@media (max-width:  980px) {
	#rowHU108Info .divIzda:before { width: 90%; }
	#rowHU108Info .divFeatures    { padding: 30px 30px 0px 30px; }
	#rowHU108Info .divFeature     { margin-bottom: 30px; }
	#rowHU108Info .divFeature i   { width: 30px; font-size: 24px; }
	#rowHU108Info .divFeature h3  { padding: 7px 0px 0px 10px; font-size: 20px; }
	#rowHU108Info .divFeature p   { margin: 15px 0px 0px  0px; font-size: 18px; text-align: justify; }
}

@media (max-width:  780px) {
	#rowHU108Info .divHU108Info   { flex-direction: column; }
	#rowHU108Info .divIzda        { width: 100%; height: 400px; }
	#rowHU108Info .divIzda:before { width: 60%; }
	#rowHU108Info .divDcha        { width: 100%; }
}

@media (max-width:  580px) {
	#rowHU108Info .divIzda        { height: 300px; }
	#rowHU108Info .divIzda:before { width: 70%; }
	#rowHU108Info .divFeatures    { padding: 25px 25px 0px 25px; }
	#rowHU108Info .divFeature     { margin-bottom: 25px; }
	#rowHU108Info .divFeature i   { width: 25px; font-size: 20px; }
	#rowHU108Info .divFeature h3  { font-size: 18px; }
	#rowHU108Info .divFeature p   { font-size: 16px; }
}

@media (max-width:  380px) {
	#rowHU108Info .divIzda:before { width: 90%; }
	#rowHU108Info .divFeatures    { padding: 20px 20px 0px 20px; }
	#rowHU108Info .divFeature     { margin-bottom: 20px; }
	#rowHU108Info .divFeature h3  { padding: 5px 0px 0px 8px; font-size: 16px; }
	#rowHU108Info .divFeature p   { margin:  8px 0px 0px 0px; font-size: 14px; }
}

/***************************************** #rowHU108Rutas ****************************************/

#rowHU108Rutas *              { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Rutas .divHU108Rutas { display: flex; }
#rowHU108Rutas .divIzda       { width: 50%; }
#rowHU108Rutas .divDcha       { width: 50%; }
#rowHU108Rutas a              { display: block; line-height: 0px; }
#rowHU108Rutas a:hover        { opacity: 0.75; }
#rowHU108Rutas a img          { width: 100%; }

@media (max-width:  780px) {
	#rowHU108Rutas .divHU108Rutas { flex-direction: column; }
	#rowHU108Rutas .divIzda       { width: 100%; }
	#rowHU108Rutas .divDcha       { width: 100%; }
}

/***************************************** #rowHU108Mayo *****************************************/

#rowHU108Mayo *                            { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowHU108Mayo .divHU108Mayo                { background-image: var(--fondo-rodadas); background-repeat: no-repeat; background-size: cover; background-position: center top; }
#rowHU108Mayo .divHU108Mayo a              { display: flex; align-items: center; justify-content: center; text-decoration: none; }
#rowHU108Mayo .divHU108Mayo a:hover        { transform: scale(1.1); }
#rowHU108Mayo .divHU108Mayo .divCiclista   { margin: 40px; line-height: 0px; }
#rowHU108Mayo .divHU108Mayo .divTexto      { margin: 40px; width: 420px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowHU108Mayo .divHU108Mayo .divDia        { font-size: 100px; font-weight: 700; color: #000000; line-height: 100%; }
#rowHU108Mayo .divHU108Mayo .divMes        { font-size: 100px; font-weight: 700; color: #508E3B; line-height: 100%; }
#rowHU108Mayo .divHU108Mayo .divLugar      { width: 100%; display: flex; justify-content: space-between; }
#rowHU108Mayo .divHU108Mayo .divLugar span { font-size:  60px; font-weight: 400; color: #000000; line-height: 100%; }

@media (max-width:  980px) {
	#rowHU108Mayo .divHU108Mayo .divCiclista   { margin: 30px; width: 200px; }
	#rowHU108Mayo .divHU108Mayo .divTexto      { margin: 30px; width: 340px; }
	#rowHU108Mayo .divHU108Mayo .divDia        { font-size: 80px; }
	#rowHU108Mayo .divHU108Mayo .divMes        { font-size: 80px; }
	#rowHU108Mayo .divHU108Mayo .divLugar span { font-size: 40px; }
}

@media (max-width:  780px) {
	#rowHU108Mayo .divHU108Mayo .divCiclista   { margin: 25px 20px; width: 160px; }
	#rowHU108Mayo .divHU108Mayo .divTexto      { margin: 25px 20px; width: 300px; }
	#rowHU108Mayo .divHU108Mayo .divDia        { font-size: 70px; }
	#rowHU108Mayo .divHU108Mayo .divMes        { font-size: 70px; }
	#rowHU108Mayo .divHU108Mayo .divLugar span { font-size: 35px; }
}

@media (max-width:  580px) {
	#rowHU108Mayo .divHU108Mayo .divCiclista   { margin: 20px 15px; width: 120px; }
	#rowHU108Mayo .divHU108Mayo .divTexto      { margin: 20px 15px; width: 250px; }
	#rowHU108Mayo .divHU108Mayo .divDia        { font-size: 60px; }
	#rowHU108Mayo .divHU108Mayo .divMes        { font-size: 60px; }
	#rowHU108Mayo .divHU108Mayo .divLugar span { font-size: 30px; }
}

@media (max-width:  480px) {
	#rowHU108Mayo .divHU108Mayo .divCiclista   { margin: 15px 10px; width: 100px; }
	#rowHU108Mayo .divHU108Mayo .divTexto      { margin: 15px 10px; width: 150px; }
	#rowHU108Mayo .divHU108Mayo .divDia        { font-size: 50px; }
	#rowHU108Mayo .divHU108Mayo .divMes        { font-size: 50px; }
	#rowHU108Mayo .divHU108Mayo .divLugar span { font-size: 24px; }
}