/*GRAL---------------------------------------------------*/
:root{
    --black: #000;
    --gray: #808080;
    --grayFaded: #808080b9;
    --grayLight: #c2c2c2;
    --grayLighter: #dddddd;
    --grayLighterFaded: #ddddddb9;
    --grayDark: #3a3a3a;
    --grayDarkFaded: #3a3a3ab9;
    --white: #fff;
    --forestGreen: #6bbd57;
    --forestGreenFaded: #6bbd57b9;
    --forestGreenLight: #a2db93;
    --forestGreenLightFaded: #a2db93b9;
    --forestGreenDark: #447238;
    --forestGreenDarkFaded: #447238b9;
    --forestGreenDarker: #243d1e;
    --forestGreenDarkerFaded: #243d1eb9;
    --conventional1: #ff9900;
    --conventional2: #1bab1b;
    --streetSign: #009900;
    --provinceSign: #008262;
    --geographicSign: #975223;
    --highlightTxt: #0b3e8f;
}

@font-face {
    font-family: 'Bungee';
    src: url(../fonts/Bungee-Regular.ttf);
    line-height: 30px;
}

@font-face {
    font-family: 'Racing';
    src: url(../fonts/RacingSansOne-Regular.ttf);
}

@font-face {
    font-family: 'Traffic';
    src: url(../fonts/TrafficSpain.ttf);
}

*{
    margin: 0;
    padding: 0;
}

p{
    font-size: 20px;
    line-height: 18px;
}

h3{
    line-height: 25px;
}

body{
    font-family: 'Racing', sans-serif;
    line-height: 30px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--grayLighter);
}

body footer{ /*Para que el footer se quede abajo aunque el body no ocupe toda la pantalla, especifica footer como hijo de body*/
    box-sizing: border-box;
    margin-top: auto;
}

html, main{
    overflow-x: hidden;
}

a{
    text-decoration: none;
    color: var(--black);
}

img{
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

ul{
    list-style: none;
}

html body object{
    overflow-clip-margin: unset !important;
    overflow: visible !important;
}

main{
    transition: 0.5s;
    transform: translateY(0);
    overflow-y: hidden;
}

hr{
    background-color: var(--white);
    height: 2px;
    border: none;
}


/*Estilos generales para botones interactivos, parte general de fondo blanco, fuente y estilización*/
.button{
    position: relative;
    z-index: 1;
    background-color: var(--white);
    border: none;
    padding: 5px 10px;
    font-family: 'Racing', sans-serif;
    font-size: 30px;
    cursor: pointer;
    margin: 10px 0;
    display: inline-block;
    overflow: hidden;
}

/*Efectos para el texto del enlace que compone el botón*/
.button a, .button button{
    color: var(--white);
    transition: color 0.3s;
}

.button button{
    font-family: 'Racing', sans-serif;
    font-size: 30px;
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/*Color superpuesto dentro del botón que lo colorea de verde.*/
.button::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    transform: rotate(25deg) scale(150%, 400%);
    transition: transform 0.6s ease;
    background: var(--forestGreenDark);
    z-index: -1;
}

/*Efectos de hover sobre el botón*/
.button:hover{
    background-color: var(--white);
}
.button:hover a, .button:hover button{
    color: var(--forestGreenDarker);
}

/*Transformaciones de la capa superpuesta de color para conseguir efecto de barrido*/
.button:hover::before{
    transform: translate(150%, 200%)  rotate(25deg)  scale(150%, 400%);
    transition: transform 0.6s ease;
}

/*Estilos según ancho de pantalla*//*Cambios de estilos según tamaño de pantalla*/
@media(max-width:768px){
    .button{
        font-size: 25px;
    }
    .button.buttonOnTopOfPage{
        margin-top: 40px;
    }
}

/*Estilización para el botón lateral que al pulsarlo lleva al encabezado de
la página. Este botón se coloca en el header y utiliza el tamaño de la
página para superponerse a todo el contenido*/
.buttonUpContainer{
    position: fixed;
    bottom: 20px;
    right: 0;
    background-color: var(--forestGreen);
    padding: 5px 8px 5px 5px;
    border-top-left-radius: 100px; /*La suma es: alto boton (7px) + padding botón (3px total) = 10*/
    cursor: pointer;
    border-bottom-left-radius: 100px;
    transition: all 0.2s;
}

/*Clase que al aplicarse con js mueve el botón fuera de la vista
hacia la derecha*/
.buttonUpContainerTranslateXOverflow{
    transition: all 0.2s;
    transform: translateX(70px);
}

/*Contenedor del botón de desplazamiento al encabezado,
estilización para posicionar el icono de flecha*/
.buttonUp{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Estilos del icono de flecha arriba*/
.buttonUp img{
    height: 50px;
    transition: all 0.2s;
}

/*Estilos para el contenido del botón de desplazamiento al
encabezado*/
.buttonUpContainer:hover{
    background-color: var(--forestGreenLight);
}

.buttonUpContainer:hover img{
    transform: scale(1.3);
    transition: all 0.2s;
}

/*Clase general para añadir a un texto y centrarlo*/
.textAlignCenter{
    text-align: center;
}

/*Contenedor para títulos y estilos de texto*/
.titleContainer{
    display: flex;
    justify-content: center;
    margin: 10px;
}
.title{
    text-align: center;
    display: inline-block;
    background-color: var(--grayLighter);
}
.title h2{
    display: inline;
    font-size: 40px;
}

/*Estilos para títulos pero más pequeños (ejemplo: provincias.html)*/
.titleS{
    font-size: 30px;
    margin-bottom: 10px;
}
/*Estilos para títulos pequeños, añade un margen a la izuqierda
opcional (página provincias.html)*/
.titleS.additionalMarginLeft{
    margin-left: 20px;
}


/*REF tutorial para líneas horizontales>>> https://stackoverflow.com/questions/15423253/in-css-how-can-i-make-a-vertically-centered-line-which-takes-up-the-remaining-h 
Efecto para añadir una línea horizontal desde el texto hasta el límite de la pantalla:
-before: desde el lateral izdo hasta la mitad del texto (el texto usa .title para superponer el fondo
de color encima de la línea pero que esté detrás del texto
-after: desde después del texto hasta el lateral dcho. No se necesitan trucos de fondo de color)*/
.titleLineBefore::before{
    position: absolute;
    content: '\00a0';
    width: 50%;
    margin-top: -16px;
    left: 0; /* Cambiado a 0 para empezar desde el límite izquierdo */
    border-bottom: 6px solid var(--forestGreenDarker);
    z-index: -1;
}
.titleLineAfter::after{
    position:absolute;
    content:'\00a0';
    width: 100%;
    margin-top: -16px;
    margin-left: 5px;
    border-bottom: 6px solid var(--forestGreenDarker);
    z-index: 0;
    overflow-x: hidden;
}

/*Evita el límite inferior del header añadiendo espacio adicional. Se usa
debido al redondel del logo que ocupa espacio encima del contenido de debajo,
así no tapa nada*/
.avoidHeader{
    margin-top: 50px;
}


/*HEADER---------------------------------------------------*/

/*Estilos generales del header*/
.header{
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    height: 120px;
    background-color: var(--forestGreenDark);
    padding: 0 20px;
    text-align: center;
    z-index: 100;
    /* position:sticky; */
}

/*Estilos que se aplican a los nav del header para centrarlos. El
translate se usa para centrar más preciso los nav, ya que el alto
total es el del header+el redondel del logo, haciendo que visualmente
parezca que están más abajo del header ppal*/
.header nav{
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 20px;
    transform: translateY(-15px);
}

/*Animaciones de los div de los nav y estilos de textos internos*/
.header nav div{
    transition: 0.2s;
}
.header nav div a{
    font-size: 30px;
    color: var(--white);
}

/*Animación al hacer hover en los enlaces de los navs*/
.header nav div:hover{
    transform: rotate(3deg) scale(1.1);
    transition: 0.2s;
}

/*Ubicación del logo*/
#logo{
    grid-column: 2;
    display: flex;
    justify-content: center;
}

/*Se usas para poder situar nav-logo-nav y más tarde
poner logo-nav-nav en responsive*/
.nav1{
    grid-column: 1;
    grid-row: 1;
}
.nav2{
    grid-column: 3;
    grid-row: 1;
}

/*Contenedor del logo*/
.mainLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    width: 110px;
    border-radius: 50%;
    background-color: var(--forestGreenDark);
    padding: 20px;
}

/*Altura de imagen usada para el logo*/
.mainLogo img{
    height: 110px;
}

/*Animación de vibración cuando se pasa el ratón sobre el logo*/
.mainLogo:hover img{
    animation: motorRumble 0.1s linear infinite;
}

@keyframes motorRumble {
    0% {transform: translate(0px, 0px);}
    25% {transform: translate(1px, 1px) rotate(5deg);}
    50% {transform: translate(2px, 0px);}
    75% {transform: translate(-1px, -1px) rotate(-5deg);}
    100% {transform: translate(0px, 0px);}
}

/*Estado por defecto del icono de hamburguesa para responsive*/
.burgerIcon img{
    display: none;
}

/*Estilos según ancho de pantalla*//*Estilos según ancho de pantalla para elementos del header*/
@media(max-width: 768px){
    /*Se divide header en dos columnas de diferente ancho*/
    .header{
        grid-template-columns: 1fr 2fr;
        padding: 0;
    }

    /*Se colocan los nav uno debajo de otro y se ocultan por encima del límite superior*/
    .header nav{
        flex-direction: column;
        transform: translate(0);
        grid-column: 1/3;
        z-index: -1;
        transform: translateY(-500px);
        transition: 0.3s;
    }

    /*Se reubica el logo a la primera columna y primera fila*/
    #logo{
        grid-column: 1;
        grid-row: 1;
    }

    /*Se reubican los nav a la segunda fila*/
    .nav1{
        grid-row: 2;
    }
    .nav2{
        grid-row: 3;
    }
    
    /*Se dan nuevos colores y efectos a los enlaces del nav*/
    .header nav div{
        width: 100%;
        padding: 10px 0;
        background-color: var(--forestGreen);
        cursor: pointer;
    }
    .header nav div:hover{
        transform: none;
        background-color: var(--forestGreenLight);
    }

    /*Se ubica y revela el icono de hamburguesa, dando los estilos necesarios*/
    .burgerIcon{
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-right: 50px;
        transform: translateY(-15px);
    }
    .burgerIcon img{
        display: block;
        height: 40px;
        transition: 0.2s;
        cursor: pointer;
    }

    .burgerIcon img:hover{
        transform: scale(1.2);
        transition: 0.2s;
    }
    
}



/*FOOTER---------------------------------------------------*/
/*Estilos generales del footer*/
.footer{
    height: 60px;
    background-color: var(--forestGreenDark);
    display: grid;
    grid-template-columns: 10% 90%;
    align-items: center;
}

/*Estilos para los contenidos del footer*/
.footer nav{
    display: flex;
    justify-content: space-around;
    text-align: center;
}

/*Estilos para los enlaces del footer*/
.footer nav a{
    font-size: 20px;
    color: var(--white);
}

/*Estilos para el minilogo del footer*/
.logoFooter{
    display: flex;
    align-items: center;
    justify-content: center;
}
.logoFooter img{
    height: 50px;
}

/*Estilos según ancho de pantalla*//*Estilos según ancho de pantalla para elementos del footer*/
@media(max-width:768px){
    /*Se hace una sola columna*/
    .footer{
        grid-template-columns: 1fr;
        height: auto;
    }
    /*Se colocan los enlaces uno encima de otro y se da nuevo margen para colocación*/
    .footer nav{
        flex-direction: column;
    }
    .footer nav a{
        margin: 5px 0;
    }
}



/*INDEX---------------------------------------------------*/
/*Contenedor para la portada del index, contiene imagen/es o video/s*/
.mainCarousel{
    /* height: calc(100vh - 120px); */
    height: calc(100vh - 164px);
    z-index: -1;
    position: relative;
    overflow: hidden;
}
/*Establecemos la imagen cono relative para ubicar el texto que irá por encima*/
.mainCarousel img{
    position: relative;
}

/*Contenedor del texto superpuesto sobre el contenedor que acompaña la portada*/
.mainCarouselTxt{
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: var(--forestGreenDarkerFaded);
}
/*Estilos del texto del anterior contenedor*/
.mainCarouselTxt h1{
    color: var(--white);
    font-size: 40px;
    line-height: 40px;
    text-align: end;
    padding: 20px;
    padding-bottom: 30px;
}
/*Distribución y escala del contenido de la portada para que ocupen todo el
espacio disponible*/
.mainCarousel img,
.mainCarousel video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*INDEX-NOTA DE RUTA DESTACADA---------------------------------------------------*/
/*Contenedor principal de la destacada: una mitad para una imagen y otra para textos e iconos,
con un fondo de color*/
.weeklyNote{
    margin: 20px 60px;
    display: grid;
    grid-template-columns: 30% 70%;
    background-color: var(--grayLight);
}

/*Estilos para la imagen que acompaña la nota*/
.weeklyNoteImg img{
    display: block;
    width: 100%;
    min-height: 100%;
    max-height: 180px;
    object-fit: cover;
}

/*Estilos para el contenido de la nota*/
.weeklyNoteDescription{
    margin: 20px 20px 0 20px;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
/*Texto de la nota*/
.weeklyNoteDescription h1{
    font-size: 30px;
    text-align: center;
}

/*Estilos según ancho de pantalla*/
@media(max-width: 768px){
    /*Se convierte a una sola columna para apilar los contenidos*/
    .weeklyNote{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin: 20px 20px;
    }
    /*Nuevo tamaño de imagen*/
    .weeklyNote img{
        height: 200px;
        width: 100%;
    }
}
/*Título de "RUTA DESTACADA"*/
.weeklyNoteTitle{
    text-align: center;
    color: var(--white);
    background-color: var(--forestGreenDarker);
    padding: 5px 10px;
    border-radius: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Icono que acompaña al título anterior*/
.weeklyNoteTitle img{
    width: 30px;
    height: 100%;
    margin-right: 10px;
}

/*Tags de la ruta destacada (ccaa y tipo de ruta)*/
.weeklyNoteTag > div{
    color: var(--white);
    display: inline-block;
    background-color: var(--forestGreenDark);
    padding: 3px 10px;
    margin: 5px 10px 5px 0;
    border-radius: 20px;
}

/*Estilos para los iconos de los tags*/
.weeklyNoteTag img{
    height: 15px;
    min-width: 15px;
    margin-right: 5px;
}
/*Distribución del icono y el texto con flex*/
.weeklyNoteTagDisplayFlex {
    display: flex;
    align-items: center;
    justify-content: center;
}
/*Aplicar wrap a los tags para cuando no haya espacio en pantalla*/
.weeklyNoteTagDisplayFlex.weeklyNoteTagDisplayFlexWrap {
    flex-wrap: wrap;
}

/*Alinear el boton que lleva a la ruta destacada. Usa los estilos de .button*/
.weeklyNoteButton{
    text-align: end;
}


/*Galería de categorías de rutas en index. Se usa flex para acumular cada una en una sola linea*/
.categoriesGallery{
    display: flex;
}
/*Estilos de los títulos de cada categoría*/
.categoriesGallery h2{
    width: 100%;
    margin: 0 5px;
    color: var(--white);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s filter linear;
    filter: drop-shadow(0 0 0 none);
    z-index: 1;
}

/*Estilos compartidos para imágenes y enlaces de la galeria*/
.categoriesGallery img,
.categoriesGallery a{
    width: 100%;
    transition: 0.3s;
}
/*Estilos para enlaces de la galeria*/
.categoriesGallery a{
    height: 150px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
/*Estilos para imágenes de la galeria*/
.categoriesGallery img{   
    position: absolute;
    transform: scale(1.1);
    filter: blur(1px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*Estilos de hover para los enlaces de la galeria*/
.categoriesGallery a:hover{
    width: 150%;
    font-size: 20px;
    transition: 0.3s;
}
.categoriesGallery a:hover h2{
    filter: drop-shadow(0px 0px 3px var(--grayDark));
}
.categoriesGallery a:hover img{
    /* width: 150%; */
    transform: scale(1.3);
    filter: blur(0);
}

/*Estilos según ancho de pantalla*/
@media(max-width:992px){
    /*Se añade wrap y el ancho de cada elemento a 1/3 de la pantalla*/
    .categoriesGallery{
        flex-wrap: wrap;
    }
    .categoriesGallery a{
        flex-basis: 33.33%;
    }
/*Estilos según ancho de pantalla*/}
@media(max-width:768px){
    /*Se cambia el ancho al 100% de pantalla*/
    .categoriesGallery a{
        flex-basis: 100%;
    }
/*Estilos según ancho de pantalla*/}
@media(max-width:480px){
    /*Cambiamos el alto de los enlaces para que no ocupen tanto*/
    .categoriesGallery a{
        height: 80px;
    }
}

/*Usando los estilos base de .categoriesGallery, añadiendo .categoriesGalleryCCAA
podemos reutilizar y cambiar cosas para crear otro estilo de galería de elementos. En
este caso será para el menú de ccaa en provincias.html*/
.categoriesGallery.categoriesGalleryCCAA{
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.categoriesGallery.categoriesGalleryCCAA a{
    height: 50px;
    flex: 1 1 20%;
}
.categoriesGallery.categoriesGalleryCCAA h2{
    filter: drop-shadow(0px 0px 3px var(--forestGreenDarker));
}

/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Cambiamos el ancho de cada elemento, haciendo que pueda estirarse, encogerse y que ocupen un 30% del ancho de pantalla*/
    .categoriesGallery.categoriesGalleryCCAA a{
        flex: 1 1 30%;
    }
/*Estilos según ancho de pantalla*/}
@media(max-width:480px){
    /*Lo mismo que antes pero ahora ocupan un 50% del ancho de pantalla*/
    .categoriesGallery.categoriesGalleryCCAA a{
        flex: 1 1 50%;
    }
}

/*CATEGORIES---------------------------------------------------*/
/*Estilos para crear un grid que permita alinear diferentes iconos que muestren categorías.
Se usa en rutas-ccaa.html (actualmente solo existe rutas-madrid.html)*/
.categoriesGrid{
    display: flex;
    align-items: start;
    justify-content: space-around;
    text-align: center;
    margin: 10px;
    flex-wrap: wrap;
}
/*Estilos para cada categoría del grid de categorias y sus elementos*/
.categoriesGridIndividualCategory{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 200px;
    position: relative;
}
.categoriesGridIndividualCategory div{
    display: flex;
}

.categoriesGridIndividualCategory h4{
    margin-top: 5px;
}
.categoriesGridIndividualCategory img{
    object-fit: scale-down;
    height: 50px;
    padding: 15px;
}
/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Cada categoría debe ocupar el total de su espacio disponible*/
    .categoriesGridIndividualCategory{
        width: 100px;
    }
    .categoriesGridIndividualCategoryCheck{
        right: 0;
    }
}

/* /!\ Estilos de posicion para la marca de seleccion
en cada categoría al usar los filtros. Las clases están activas porque
los elementos están colocados pero no tienen funcionalidad, en estado de espera
a implementación futura*/
.categoriesGridIndividualCategoryCheck{
    position: absolute;
    right: 25%;
    top: 40%;
}

.categoriesGridIndividualCategoryCheck img{
    display: none;
    height: 40px;
    padding: 0;
}

/*Estilos según ancho de pantalla*/
@media(max-width:480px){
    /*Estilizacion de los iconos*/
    .categoriesGrid img{
        object-fit: scale-down;
        height: 35px;
        padding: 10px;
    }
    .categoriesGridIndividualCategoryCheck{
        right: 10%;
        top: 15%
    }
}

/*PROVINCIAS---------------------------------------------------*/
/*Fondo de página. Se usa una imagen y un gradiente de color-transparente superpuesto*/
.mapBcgn{
    background: linear-gradient(var(--grayDarkFaded), transparent);
    background-image: url(../img/mapSpain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
.mapBcgnGradientOver{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--grayLighterFaded) 40%, var(--grayLighter) 60%);
    background-attachment: fixed;
    z-index: -1;
}

/*Grid para mostrar listados de elementos de forma ordenada y simétrica. Se usa en rutas-ccaa.html y provincias.html*/
.feedGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 20px 0;
    align-items: center;
    justify-content: center;
}

/*Estilos de los enlaces dentro de los listados. Usa métodos similares a
.button, con un fondo superpuesto por un color que hace efecto de barrido en hover*/
.feedGrid a{
    margin: 0 auto;
    height: 300px;
    width: 100%;
    transition: background-position 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    position: relative; 
    transition: 0.2s;
}

.feedGrid a::before,
.feedGrid.feedGridProvinces a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(25deg) scale(200%, 500%);
    transition: transform 0.5s ease;
}

.feedGrid a::before{
    background: var(--forestGreenDarkFaded);
}

.feedGrid.feedGridProvinces a::before{
    background: var(--forestGreenDarkFaded);
}

.feedGrid a:hover::before{
    /* background: transparent; */
    transform: translate(150%, 200%)  rotate(25deg)  scale(200%, 500%);
    transition: transform 0.5s ease;
}

.feedGrid a:hover > .textBox{
    transform: scale(1.2);
    transition: 0.2s;
    /* text-shadow: 0px 0px 4px var(--grayDark); */
    filter: drop-shadow(0px 0px 3px var(--grayDark));
}

.feedGrid a:hover > img{
    transform: scale(1.2);
    transition: 0.2s;
    filter: blur(0);
}


/*Cambio de estilo para provincias.html usando como base el grid,
en vez de todos los elementos juntos se añade un gap y un nuevo tamaño a los elementos*/
.feedGrid.feedGridProvinces{
    gap: 5px;
}
.feedGrid.feedGridProvinces a{
    height: 150px;
}
/*Distribuciones variadas según el número de provincias por CCAA. Por defecto se
colocarán en filas de 5 enlaces, pero si hay menos, para optimizar el estilo y la
distribución, se pueden añadir estas clases que recolocan los elementos de
forma más óptima. El número al final de cada clase .provinces indica para
cuántos elementos en total está pensada.*/
.feedGrid.feedGridProvinces.provinces1{
    grid-template-columns: repeat(4, 1fr);
}
.feedGrid.feedGridProvinces.provinces1 a{
    grid-column: 2/4;
}
.feedGrid.feedGridProvinces.provinces2{
    grid-template-columns: repeat(2, 1fr);
}
.feedGrid.feedGridProvinces.provinces3{
    grid-template-columns: repeat(3, 1fr);
}
.feedGrid.feedGridProvinces.provinces4{
    grid-template-columns: repeat(4, 1fr);
}

/*Colocación del elemento imagen que actúa como fondo del elemento*/
.feedGrid .feedGridBcgn{
    position: absolute;
    width: 100%;
    z-index: -1;
    transition: 0.2s;
}

/*Estilos de los textos e iconos en el contenedor de cada elemento*/
.feedGrid .textBox{
    width: 100%;
    margin: 0 5%;
    color: var(--white);
    transition: 0.2s;
    z-index: 1;
}
/*Estilo de tamaño de los titulos de cada elemento del grid*/
.feedGrid .textBox h3{
    font-size: 30px;
}
/*Colocación de los textos en el contenedor de cada elemento*/
.feedGrid .textBox .textBoxLocation{
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Estilos de los iconos en el contenedor de cada elemento*/
.feedGrid .textBox .textBoxLocation img{
    height: 15px;
    transform: rotate(-25deg);
}
/*Estilos del parrafo en el contenedor de cada elemento*/
.feedGrid .textBox p{
    font-size: 20px;
}

/*Estilo de desenfoque por defecto para la imagen de fondo*/
.feedGrid a > img{
    filter: blur(2px);
    transform: scale(1.1);
}
/*Estilos según ancho de pantalla*/
@media(max-width:1200px){
    /*Cambio de tamaño de cada elemento*/
    .feedGrid a{
        height: 300px;
    }
    
}
/*Estilos según ancho de pantalla*/
@media(max-width:992px){
    /*Cambio en las distribuciones del grid*/
    .feedGrid{
        grid-template-columns: repeat(2, 1fr);
    }
    .feedGrid.feedGridProvinces{
        grid-template-columns: repeat(3, 1fr);
    }
    .feedGrid.feedGridProvinces.provinces1{
        grid-template-columns: 1fr;
    }
    .feedGrid.feedGridProvinces.provinces1 a{
        grid-column: 1/2;
    }
}
/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Llega un momento que todos los grids coinciden en
    tamaño para la optimización visual en pantallas pequeñas*/
    .feedGrid, .feedGrid.feedGridProvinces,
    .feedGrid.feedGridProvinces.provinces1,
    .feedGrid.feedGridProvinces.provinces2,
    .feedGrid.feedGridProvinces.provinces3,
    .feedGrid.feedGridProvinces.provinces4{
        grid-template-columns: 1fr;
        margin: 20px 0;
        row-gap: 10px;
    }
    .feedGrid a{
        height: 200px;
        width: 100%;
    }
}

/*Este tipo de grid se usa para mostrar las categorías de las rutas.
Encontramos dos: las generales (gastronómicas, montaña,...) y las especiales (circular
y corta). Las clases siguientes se encargan de la distribución de este grid en cada
elemento y de crear los contenedores cuadrados y distribuir los iconos dentro de
ellos.*/
.feedGridGralCategory{
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

/*Estilos compartidos de cada contenedor*/
.feedGridGralCategory div,
.feedGridSpecialCategory div{
    margin: 8px 5px;
    /* border-radius: 50%; */ /*Se ha omitido el redondeo a círculo por estética*/
}
/*El contenedor de la categoria especial es redondo*/
.feedGridSpecialCategory div{
    border-radius: 50%;
}

/*Estilización de cada icono*/
.feedGridGralCategory img{
    display: flex;
    height: 40px;
    padding: 8px;
}
.feedGridSpecialCategory img{
    display: flex;
    height: 30px;
    padding: 8px;
}

/*Fondos de color de cada categoría. Se puede añadir la clase
correspondiente según cada categoría*/
.feedGridSpecialCategory div{
    background-color: lightskyblue;
}
.categoryRed{
    background-color: red !important;
}
.categoryBlue{
    background-color: blue !important;
}
.categoryYellow{
    background-color: goldenrod !important;
}
.categoryGreen{
    background-color: green !important;
}

/*Posición del contenedor de la categoria especial*/
.feedGridSpecialCategory{
    position: absolute;
    top: 0;
    right: 0;
}
/*Estilos según ancho de pantalla*/
@media(max-width: 768px){
    /*Cambios de tamaño y distribución*/
    .feedGridGralCategory img{
        height: 30px;
        padding: 10px;
    }
    .feedGridSpecialCategory img{
        height: 28px;
        padding: 5px;
    }
}

/*RUTA---------------------------------------------------*/
/*Imagen de portada de la página ruta.html. Se usa un cálculo para que ocupe
la mitad de la pantalla menos el header*/
.routeCover{
    height: calc(50vh - 120px);
    position: relative;
}

/*Mismo propósito que la anterior, pero más pequeño*/
.routeCoverHalf{
    height: calc(40vh - 120px);
    position: relative;
}

/*Ubicación específica para el botón de "volver"*/
.routeCoverButton{
    position: absolute;
    top: 10%;
}

/*Estilización de la imagen de portada*/
.routeCover img,
.routeCoverHalf img{
    width: 100%;
    z-index: -1;
}

/*Ubicación del texto que se superpone sobre la imagen de portada*/
.routeCoverTxt{
    color: var(--white);
    line-height: 50px;
    background-color: var(--forestGreenDarkerFaded);
    padding: 10px 0;
    width: 100%;
}

/*Estilos y ubicación de los títulos*/
.routeCoverTxt h3{
    font-size: 20px;
    margin: 0 10px;
}
.routeCoverTxt h1{
    font-size: 50px;
    margin: 0 10px;
}

/*Alineación a elegir del título, centrado o a la derecha*/
.routeCoverTxt.routeCoverTxtAlignCenter{
    position: absolute;
    bottom: 0;
    text-align: center;
}
.routeCoverTxt.routeCoverTxtAlignRight{
    position: absolute;
    bottom: 0;
    text-align: end;
}

/*SECCIÓN PARA LOS DATOS DE LA RUTA-----------------------------------------------------*/
/*Contenedor ppal: la primera columna es para las
categorías y la segunda para el resto de datos*/
.sectionRouteCategories{
    display: grid;
    grid-template-columns: 180px 1fr;
}

/*Contenedor para categorías de la ruta (máximo 2)*/
.routeCategories{
    background-color: var(--grayDark);
    max-width: 180px;
    border-radius: 0 100px 100px 0;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 8px 6px 8px 20px;
}

/*Caja para cada categoría: estilos e icono*/
.routeCategories div{
    border-radius: 50%;
    display: flex;
    padding: 10px;
    margin: 4px 2px;
}
.routeCategories img{
    height: 50px;
}

/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Cambio de ancho de columnas*/
    .sectionRouteCategories{
        grid-template-columns: 130px 1fr;
    }
    /*Se cambia la distribución de las categorías de una tras
    otra a en columna para concordar con el flujo vertical de la página*/
    .routeCategories{
        flex-direction: column;
        justify-content: center;
        max-width: auto;
        padding-left: 10px;
    }

/*Estilos según ancho de pantalla*/}
@media(max-width:480px){
    .sectionRouteCategories{
        grid-template-columns: 90px 1fr;
    }
}


/*Contenedor de datos de ruta. Se alinean y centran los elementos con
flex y se permite que se desplacen a otra línea con wrap*/
.routeData{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
}
/*Estilos de cada dato e icono*/
.routeData > div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
}
.routeData img{
    height: 40px;
    margin-right: 8px;
}

/*.vehicles se usa únicamente para dar un margen dcho a uno de los iconos
y separalo del otro*/
.vehicles{
    margin-right: 10px;
}
/*Estilos para los iconos y textos de vehículos*/
.vehicleIcon p{
    line-height: 3px;
}
.vehicleIcon img{
    margin-right: 0;
    height: 30px;
}


/*La descripción de la ruta sólo tiene un margen alrededor, no necesita
estilos adicionales*/
.routeDescription{
    margin: 20px;
}


/*Distribuir icono y texto en columna por defecto*/
.routeDataColumn{
    flex-direction: column;
}

/*Iconos de avisos y consejos en la ruta (los que van después de la descripción)*/
.routeData.routeWarnings{
    justify-content:center;
    margin-top: 10px;
}
.routeData.routeWarnings div{
    margin-right: 20px;
}
/*Los últimos elementos dentro del contenedor no tienen separación de margen dcho*/
.routeData.routeWarnings div:last-child, .routeData img:last-child{
    margin-right: 0;
}


/*IMG CAROUSEL---------------------------------------------------*/
/*Carrusel de imágenes de presentación de la ruta. Estilos básicos del contenedor*/
.carousel{
    min-width: 100%;
    object-fit: cover;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 500px;
    overflow: hidden;
}

/*Los siguientes @media sólo cambian el ancho del contenedor
del carrusel según la pantalla*/
/*Estilos según ancho de pantalla*/
@media(max-width:992px){
    .carousel{
        height: 400px;
    }
}
/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    .carousel{
        height: 300px;
    }
}

/*Contenedor de las imágenes*/
.carousel-inner{
    height: 100%;
    /* min-width: 400%; */
    display: flex;
    transition: all ease .5s;
}

/*Contenedor para cada imagen*/
.carousel-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*Estilización de la imagen*/
.carousel-item img {
    width: 100%;
    object-fit: cover;
}

/*Estilos para los controles del carrusel:
- Flechas de cambio de imagen
- Redondeles indicadores del número de la imagen
Las acciones de cada uno se controlan en sliders.js*/
.carousel-controls .prevC{
    display: inline-block;
    height: 3.2rem;
    width: 3.2rem;
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    fill: var(--white);
    cursor: pointer;
    opacity: 1;
}

.carousel-controls .nextC{
    display: inline-block;
    height: 3.2rem;
    width: 3.2rem;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    fill: var(--white);
    cursor: pointer;
    opacity: 1;
}

.prevC:hover, .nextC:hover{
    opacity: 1;
    fill: var(--forestGreen);
}

.carousel-indicators{
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.carousel-indicators span{
    display: inline-block;
    background-color: var(--forestGreenDark);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    margin: 0.75rem;
}

.carousel-indicators span:hover{
    opacity: 1;
    background-color: var(--aquamarine);
    transition:color .2s ease-in;
}

.carousel-indicators span.active{
    opacity: 1;
    outline: 0.3rem solid var(--shamrock);
    background-color: var(--white);
}

/*Estilos según ancho de pantalla: tamaños de los controles*/
@media(max-width:768px) {
    .carousel-controls .prevC, .carousel-controls .nextC{
        height: 20px;
        width: 20px;
    }
    .carousel-indicators span{
        width: 15px;
        height: 15px;
    }
}


/*SECCIÓN TRAMO A TRAMO---------------------------------------------------------*/
/*Contenedor general*/
.routeDirections{
    margin: 20px;
}

/*Estilos para cada div dentro del contenedor, es decir,
cada tramo de la ruta*/
.routeDirections > div{
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

/*Estilos para títulos adicionales como cuando se
indican opciones diferentes de ruta (Elige dónde aparcar,...)*/
.routeDirections h2{
    text-align: center;
    grid-column: 1/3;
}

/* .routeDirections img{
    height: 120px;
    width: auto;
    margin: 0 auto;
} */

/*Caja de indicaciones de cada tramo*/
.routeDirectionsTxt{
    margin-left: 10px;
}
/*Los textos dentro de <span> se marcarán de otro color*/
.routeDirectionsTxt span{
    color: var(--highlightTxt);
}


/*INDICACIONES DE TRAMOS--------------------------------------------------------------------*/
/*Estilo base para todas las señales*/
.routeDirectionsSigns{
    display: flex;
    justify-content: end;
    align-items: center;
    
}
/*Independientemente de si es un div de una señal o un icono, tendrán
un margen dcho para separase unos de otros...*/
.routeDirectionsSigns div,
.routeDirectionsSigns img{
    margin-right: 10px;
}
/*...menos los últimos de cada caja*/
.routeDirectionsSigns div:last-child{
    margin-right: 0;
}
/*Tamaño de los iconos en cada tramo*/
.routeDirectionsSigns img{
    height: 35px;
}
/*Estilos según ancho de pantalla*/
@media(max-width:992px){
    /*Cada indicación de tramo se convierte de dos columnas a una
    y las señales e indicaciones se apilan en columna. Los contenidos se centran*/
    .routeDirections > div{
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
    }
    .routeDirections div{
        justify-self: center;
    }
    .routeDirectionsTxt{
        margin-left: 0;
        text-align: center;
    }
    /*Se aplica wrap a las señales para que puedan saltar de
    línea si no caben y generan overflow*/
    .routeDirectionsSigns{
        flex-wrap: wrap;
        justify-content: center;
    }
    /*Se añade margen inferior a cada señal e icono para generar
    separación vertical entre cada uno*/
    .routeDirectionsSigns div,
    .routeDirectionsSigns img{
        margin-bottom: 15px;
    }
}

/*Clases para cuando se dan a elegir varias opciones de tramos
en una ruta en la que se muestra una letra y el texto de indicaciones.
Con esta clase se alinean horizontalmente para ofrecer una distribución
más óptima*/
.routeDirectionsOptions{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
/*Estilos para el contenedor de la letra*/
.routeDirectionsOptions div{
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    background-color: var(--highlightTxt);
    font-size: 25px;
}
/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Se pasa a apilado en columna de la letra y las indicaciones*/
    .routeDirectionsOptions{
        flex-direction: column;
    }
}

/*Distribución de los datos DESDE y HASTA en el contenedor de datos de la ruta*/
.routeDataFromTo{
    display: flex;
    flex-direction: column;
}
/*Contenido de los datos para cada ubicación*/
.routeDataFromTo div{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
/*Eliminar el margen en el último elemento*/
.routeDataFromTo div:last-child{
    margin-bottom: 0;
}
/*Margen del texto para separarlo de la señal de carretera*/
.routeDataFromTo h2{
    margin-right: 10px;
}


/*Contenedor para dato interesante de la ruta, aparece justo después de los
datos de la ruta*/
.routeFunData{
    color: var(--white);
    background-color: var(--gray);
    padding: 15px 10px;
    text-align: center;
}


/*SEÑALES-----------------------------------------------------------------------------*/
/*Estilos básicos para construir cualquier señal*/
.roadSign{
    font-family: "Traffic";
    color: var(--white);
    border-radius: 5px;
    white-space: nowrap;
    display: inline-block;
    padding: 5px;
    line-height: 10px;
    letter-spacing: 0.1px;
    text-align: center;
}

/*Señal en forma de flecha, contenedor ppal*/
.roadSignArrowRight{
    position: relative;
    height: 28px;
    padding: 0 3px;
    background-color: var(--white); 
    color: var(--black);
    display: inline-block;
    text-align: center;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    border-left: 2px solid var(--black);
    border-radius: 5px 0 0 5px;
    margin-right: 20px !important;
}
/*Señal en forma de flecha, triángulo que simula la flecha*/
.roadSignArrowRight::before{
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 14px 14px 0;
    border-color: transparent var(--white) transparent transparent;
    transform: rotate(180deg);
}
/*Señal en forma de flecha, borde para el triángulo*/
.roadSignArrowRight::after{
    content: "";
    position: absolute;
    top: -2px;
    right: -18px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 18px 16px 0;
    border-color: transparent var(--black) transparent transparent;
    transform: rotate(180deg);
    z-index: -1;
}
/*Señal en forma de flecha, estilizacion y distribución del contenido*/
.roadSignArrowRight > div{
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/*Señal en forma de flecha, estilizacion y distribución de iconos
internos (como icono de salida de autopista)*/
.roadSignArrowRight img{
    height: 20px;
    margin: 0;
}

/*Señal básica: estilización del contenido de la señal*/
.roadSign.roadSignDirections{
    font-size: 20px;
    padding: 4px 10px;
}

/*Estilos para crear señal de autopista/autovía*/
.highwaySign{
    padding: 10px;
    background-color: blue;
    border: 3px solid blue;
    box-shadow:inset 0px 0px 0px 3px var(--white);
}
/*Estilos para crear señales de carreteras convencionales*/
.conventional1Sign{
    background-color: var(--conventional1);
    color: var(--black);
    border: 2px solid var(--black);
}
.conventional2Sign{
    background-color: var(--conventional2);
    color: var(--white);
    border: 2px solid var(--black);
}
.conventional3Sign{
    background-color: gold;
    color: var(--black);
    border: 2px solid var(--black);
}

/*Estilos de contenedor para crear señal con solo texto normal*/
.regularSign{
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}
/*Estilos de texto para crear señal con solo texto normal*/
.regularSignTxt{
    font-size: 15px;
    line-height: 12px;
}

/*Estilos para crear señal de nombre de calle*/
.streetSign{
    background-color: var(--streetSign);
    color: var(--white);
    border: 2px solid var(--white);
}

/*Estilos para crear señal de poblacion*/
.citySign{
    text-transform: uppercase;
    padding: 0 10px;
    color: var(--black);
    background-color: var(--white);
    border: 3px solid var(--white);
    box-shadow:inset 0px 0px 0px 3px red;
}

/*Estilos para crear señal de provincia*/
.provinceSign{
    padding: 0 10px;
    color: var(--white);
    background-color: var(--provinceSign);
    border: 3px solid white;
    box-shadow:inset 0px 0px 0px 3px var(--provinceSign);
}

/*Estilos para crear señal de punto de interes geografico*/
.geographicSign{
    padding: 0 10px;
    color: var(--white);
    background-color: var(--geographicSign);
    border: 3px solid white;
    box-shadow:inset 0px 0px 0px 3px var(--geographicSign);
}

/*Estilos para cambiar el texto dentro de etiquetas <span> en las señales
de señal normal, de calle, de provincia y de pdi geográfico*/
.regularSign span, .streetSign span, .provinceSign span, .geographicSign span{
    font-size: 14px !important;
    line-height: 8px;
}

/*Estilos para contenedor de tipo de parking, incluyendo distribución de
ambos en columna tamaño de icono y tamaño y color de texto, */
.parkingSign{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.parkingSign img{
    margin: 0;
}
.parkingSign p{
    font-size: 15px;
    color: var(--highlightTxt);
}

/*MAPA DE RUTA----------------------------------------------*/
/*Estilos para la ubicación y estilización del mapa interactivo. Utiliza clases
de la librería Leaflet*/

/*Define la altura del mapa*/
#map{
    height: 400px;
}
/*Fija el mapa al nivel 0 (se superponía al botón de desplazamiento a la cabecera)*/
.leaflet-container{
    z-index: 0;
}
/*Oculta el contenedor de indicaciones de ruta que viene por defecto*/
.leaflet-control-container .leaflet-routing-container {
    display: none !important;
}


/*CONTACTO---------------------------------------------------------*/
/*Contenedor general que distribuye en dos columnas*/
.contactInfo{
    display: grid;
    grid-template-columns: 45% 55%;
    overflow: hidden;
    margin-bottom: 20px;
}
/*Distribución y estilo del contenedor del texto*/
.contactInfoTxt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10%;
    line-height: 50px;
}
/*Color de textos y enlaces*/
.contactInfoTxt, .contactInfoTxt a{
    color: var(--forestGreenDarker);
}

/*Estilos para los diferentes tipos de titulos*/
.contactInfoTxt h1{
    font-size: 40px;
}
.contactInfoTxt h2{
    font-size: 30px;
    line-height: 30px;
}
.contactInfoTxt h3{
    font-size: 25px;
}

/*Estilos para la imagen que acompaña a los textos*/
.contactInfo img{
    min-height: 100%;
    /*Calcula el espacio restante desde la portada al footer*/
    /* height: calc(100vh - 446px);  */
    height: calc(100vh - 600px);
    width: 100%;
    object-fit: cover;
}
/*Estilos según ancho de pantalla*/
@media(max-width:768px){
    /*Reduce el tamaño de dos a una columna*/
    .contactInfo{
        grid-template-columns: 1fr;
    }
    /*Redistribuye el orden de cada contenido para
    conseguir que la imagen esté antes que el texto*/
    .contactInfoTxt{
        grid-row: 2;
        margin: 20px 0 20px 5% ;
    }
    .contactInfoImg{
        grid-row: 1;
    }
    /*Reestablece el tamaño máximo que puede tener la imagen*/
    .contactInfoImg img{
        height: 200px;
    }
}

@media(max-width:480px){
    .contactInfoImg img{
        height: 150px;
    }
}

/*FORM---------------------------------------------------------*/
.formSection{
    margin: 0 auto;
    width: 50%;
    position: relative;
    max-height: auto;
    z-index: -1;
}
.contactForm{
    max-height: 800px;
    transition: all 0.6s ease-in-out;
}
.contactFormFold{
    max-height: 0;
    transform: translateY(100px);
    transition: all 0.6s ease-in-out;
}

.alertMessage{
    transition: all 0.5s ease-out;
    transform: translateX(-120vw);
    margin: 10px;
    margin-top: 0;
    display: none;
}
#alertMessageButton{
    display: none;
}

legend{
    font-size: 20px;
    display: flex;
    align-items: center;
    margin: 8px 0 3px 0;
}
legend div{
    background-color: var(--forestGreenDark);
    color: var(--white);
    display: inline-block;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    margin: 0 5px;
}
legend.colorText{
    color: var(--forestGreenDark);
}
legend div span {
    font-size: 16px;
    display: flex;
    transform: translateY(-4px) rotate(10deg);
    justify-content: center;
}
input, textarea{
    border: none;
    font-family: 'Racing', sans-serif;
    font-size: 20px;
    padding: 0.5%; /*Se aplica en porcentaje y se resta del width para que la medida total sea 100% (recuerda, padding es por lado, dcho e izdo suma 1%*/
    width: 99%;
    color: var(--forestGreenDarker);
    margin: 0 auto;
}
input{
    height: 30px;
}
textarea{
    resize: vertical;
    min-height: 150px;
    max-height: 400px;
}
input:focus, textarea:focus{
    outline: var(--forestGreenDark) solid 2px;
}
.formLogo{
    height: 80%;
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.5;
    transition: all 0.6s ease-in-out;
}

.formLogoHide{
    left: 0;
    transform: translate(2500px, -50%);
}

@media(max-width: 1200px) {
    .formSection{
        width: 70%;
    }
}

@media(max-width: 992px) {
    .formSection{
        width: 80%;
    }
    input, textarea{
        padding: 1%; /*Se aplica en porcentaje y se resta del width para que la medida total sea 100% (recuerda, padding es por lado, dcho e izdo suma 2%*/
        width: 98%;
    }
    .formLogoHide{
        transform: translate(10%, -50%);
    }
}

@media(max-width: 768px) {
    textarea{
        max-height: 200px;
    }
    input, textarea{
        padding: 2%; /*Se aplica en porcentaje y se resta del width para que la medida total sea 100% (recuerda, padding es por lado, dcho e izdo suma 4%*/
        width: 96%;
    }
    .formLogoHide{
        transform: translate(-10%, -50%);
    }
}


.recaptchaContainer{
    display: flex;
    justify-content: center;
}

.requiredData{
    display: flex;
    justify-content: end;
}

/* Customize the label (the container) */

.checkCont {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkCont p {
    margin-top: 0.5rem;
    margin-left: 3.5rem;
    margin-right: auto;
}


/* Hide the browser's default checkbox */

.checkCont input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 2.5rem;
    width: 2.5rem;
    background-color: var(--white);
}

.checkmark.square {
    top: 25%;
}

.checkmark.round {
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.checkCont:hover input~.checkmark {
    background-color: var(--aquamarine);
}

.checkCont:hover p {
    color: var(--lonchivar);
}


/* When the checkbox is checked, add a blue background */

.checkCont input:checked~.checkmark {
    background-color: var(--shamrockBright);
    color: var(--lonchivar);
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.checkCont input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.checkCont .checkmark:after {
    left: 0.9rem;
    top: 0.25rem;
    width: 0.8rem;
    height: 1.5rem;
    border: solid white;
    border-width: 0 0.3rem 0.3rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.g-recaptcha {
    display: inline-block;
}

.rc-anchor-light.rc-anchor-normal{
    border: none !important;
}

.rc-anchor{
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}


/*NOTAS-----------------------------------------------------------------------*/

.developerNoteContainer{
    text-align: center;
    padding: 3px;
    background: repeating-linear-gradient(
        -45deg,
        gold,
        gold 20px,
        var(--grayDark) 20px,
        var(--grayDark) 40px
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.developerNoteContainer .button{
    font-size: 25px;
    margin: 0 10px;
}

.developerNoteContainer .button::before{
    background: darkgoldenrod;
}
.developerNoteContainer .button:hover a{
    color: var(--black);
}


/*REF POPUP: https://codepen.io/imprakash/pen/GgNMXO*/

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 200;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 25vh auto;
    padding: 20px;
    background: var(--conventional1);
    width: 70%;
    position: relative;
    transition: all 5s ease-in-out;
}

.popup h1{
    font-size: 35px;
    margin-bottom: 10px;
}

.popup .button{
    margin: 0;
}

@media(max-width: 768px) {
    .popup {
        margin: 5vh auto;
    }
    .popup p{
        font-size: 20px;
        line-height: 20px;
    }
}