/*
	CSS personalizado para 06 GRAVEL
*/

/**************************************** 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 ***********************************/

/************************************ #rowGravelHuescaCabecera ***********************************/

#rowGravelHuescaCabecera *                    { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowGravelHuescaCabecera .divCabeceraFoto     { width: 100%; height: 500px; background-image: url("/wp-content/themes/espacio108/images/fotos/cabecera-gravel.jpg"); }
#rowGravelHuescaCabecera .divCabeceraFoto     { border-bottom: solid 8px var(--color1-hex); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#rowGravelHuescaCabecera .divCabeceraHeading  { background-image: var(--fondo-huella-gris); }
#rowGravelHuescaCabecera .divHeading108 h2    { height: 62px; font-size: 80px !important; color: #FFFFFF; white-space: nowrap; }
#rowGravelHuescaCabecera .divHeading108:after { top: 4px; left: -8px; width: 120px; height: calc(120px * 192 / 300); }
#rowGravelHuescaCabecera .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) {
	#rowGravelHuescaCabecera .divCabeceraFoto     { height: 400px; }
	#rowGravelHuescaCabecera .divHeading108 h2    { height: 53px; font-size: 70px !important; }
	#rowGravelHuescaCabecera .divHeading108:after { top: 4px; left: -6px; width: 110px; height: calc(110px * 192 / 300); }
	#rowGravelHuescaCabecera .divTexto      p     { padding: 0px 40px 30px 40px; }
}

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

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

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

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

/************************************** #rowGravelHuescaInfo *************************************/

#rowGravelHuescaInfo *                                  { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#rowGravelHuescaInfo .divGravelHuescaInfo               { position: relative; padding: 60px; background: #59370D; }
#rowGravelHuescaInfo .divGravelHuescaInfo:before        { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: var(--fondo-gd); }
#rowGravelHuescaInfo .divGravelHuescaInfo:before        { background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.25; }
#rowGravelHuescaInfo .divInfo                           { position: relative; margin: auto; max-width: 1080px; text-align: center; }
#rowGravelHuescaInfo .divInfo:hover                     { transform: scale(1.1); }
#rowGravelHuescaInfo .divInfo    a                      { text-decoration: none; }
#rowGravelHuescaInfo .divLogoGD                         { border-bottom: solid 1px #FFFFFF; line-height: 0px; }
#rowGravelHuescaInfo .divLogoGD  img                    { margin: auto; width: 400px; }
#rowGravelHuescaInfo .divTextos                         { margin-top: 40px; }
#rowGravelHuescaInfo .divTextos  h2                     { font-size: 70px; font-weight: 900; color: #FFFFFF; }
#rowGravelHuescaInfo .divTextos  h2 span                { font-family: sans-serif; display: block; line-height: 100%; }
#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(2) { color: #FFFFFF00; -webkit-text-stroke: 2px #ECA157; letter-spacing: 6px; }
#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(3) { letter-spacing: 10px; }
#rowGravelHuescaInfo .divTextos  p                      { margin: 20px auto; width: 740px; font-size: 24px; font-weight: 400; color: #FFFFFF; text-align: center; }
#rowGravelHuescaInfo .divTextos  div                    { margin: auto; padding: 20px 30px 15px 30px; font-size: 24px; font-weight: 700; color: #000000; background: #ECA157; display: table; line-height: 100%; }
#rowGravelHuescaInfo .divLogoGES                        { margin-top: 20px; line-height: 0px; }
#rowGravelHuescaInfo .divLogoGES img                    { width: 250px; }

@media (max-width:  980px) {
	#rowGravelHuescaInfo .divGravelHuescaInfo               { padding: 50px; }
	#rowGravelHuescaInfo .divLogoGD  img                    { width: 350px; }
	#rowGravelHuescaInfo .divTextos                         { margin-top: 30px; }
	#rowGravelHuescaInfo .divTextos  h2                     { font-size: 60px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(2) { letter-spacing: 5.5px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(3) { letter-spacing: 9px; }
	#rowGravelHuescaInfo .divTextos  p                      { margin: 15px auto; width: 615px; font-size: 20px; }
	#rowGravelHuescaInfo .divTextos  div                    { padding: 15px 20px 10px 20px; font-size: 20px; }
	#rowGravelHuescaInfo .divLogoGES                        { margin-top: 15px; }
	#rowGravelHuescaInfo .divLogoGES img                    { width: 200px; }
}

@media (max-width:  780px) {
	#rowGravelHuescaInfo .divGravelHuescaInfo               { padding: 40px; }
	#rowGravelHuescaInfo .divLogoGD  img                    { width: 300px; }
	#rowGravelHuescaInfo .divTextos                         { margin-top: 25px; }
	#rowGravelHuescaInfo .divTextos  h2                     { font-size: 50px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(2) { letter-spacing: 5px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(3) { letter-spacing: 8px; }
	#rowGravelHuescaInfo .divTextos  p                      { width: 415px; font-size: 18px; }
	#rowGravelHuescaInfo .divTextos  div                    { font-size: 18px; }
	#rowGravelHuescaInfo .divLogoGES img                    { width: 200px; }
}

@media (max-width:  580px) {
	#rowGravelHuescaInfo .divGravelHuescaInfo               { padding: 30px; }
	#rowGravelHuescaInfo .divInfo:hover                     { transform: scale(1.05); }
	#rowGravelHuescaInfo .divLogoGD  img                    { width: 240px; }
	#rowGravelHuescaInfo .divTextos                         { margin-top: 20px; }
	#rowGravelHuescaInfo .divTextos  h2                     { font-size: 40px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(2) { -webkit-text-stroke-width: 1px; letter-spacing: 3.5px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(3) { letter-spacing: 6px; }
	#rowGravelHuescaInfo .divTextos  p                      { width: 370px; font-size: 16px; }
	#rowGravelHuescaInfo .divTextos  div                    { font-size: 16px; }
	#rowGravelHuescaInfo .divLogoGES img                    { width: 180px; }
}

@media (max-width:  480px) {
	#rowGravelHuescaInfo .divGravelHuescaInfo               { padding: 20px; }
	#rowGravelHuescaInfo .divLogoGD  img                    { width: 220px; }
	#rowGravelHuescaInfo .divTextos  h2                     { font-size: 35px; }
	#rowGravelHuescaInfo .divTextos  p                      { width: 250px; }
	#rowGravelHuescaInfo .divTextos  div                    { padding: 10px 15px 6px 15px; }
	#rowGravelHuescaInfo .divLogoGES                        { margin-top: 10px; }
	#rowGravelHuescaInfo .divLogoGES img                    { width: 160px; }
}

@media (max-width:  380px) {
	#rowGravelHuescaInfo .divTextos  h2                     { font-size: 32px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(2) { letter-spacing: 3px; }
	#rowGravelHuescaInfo .divTextos  h2 span:nth-of-type(3) { letter-spacing: 5px; }
	#rowGravelHuescaInfo .divTextos  p                      { width: auto; font-size: 14px; }
	#rowGravelHuescaInfo .divTextos  div                    { font-size: 14px; }
	#rowGravelHuescaInfo .divLogoGES img                    { width: 150px; }
}