.fondo_pagina {
    position: relative;
    width: 100%;
    min-height: 70vh;
    margin-top: 60px;
    padding: 80px 10px;
    background-image: url(../img/fondo_pagina/fondo_pagina_5.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 96%, rgba(0, 0, 0, 0) 100%);
}

.fondo_pagina_2 {
    position: relative;
    width: 100%;
    min-height: 70vh;

    /* Separación con el cuadro 
    margin-top: 60px;*/
    padding: 30px 40px;

    background-image: url("../img/fondo_pagina/fondo_pagina1.png");
    background-size: cover;
    /*background-position: center;*/
    background-repeat: no-repeat;

    /*display: flex;*/
    align-items: center;
    justify-content: center;
    overflow: visible;

}

.fondo_pagina_itinerario {
    position: relative;
    width: 100%;
    min-height: 70vh;

    /* Separación con el cuadro 
    margin-top: 60px;*/
    padding: 30px 40px;

    background-image: url("../img/fondo_pagina/fondo_pagina_intinerario.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*display: flex;*/
    align-items: center;
    justify-content: center;
    overflow: visible;
}


.fondo_pagina_lugar {
    position: relative;
    width: 100%;
    min-height: 70vh;

    /* Separación con el cuadro 
    margin-top: 60px;*/
    padding: 30px 40px;

    /*background-image: url("../img/fondo_pagina/fondo_pagina_lugar.png");*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*display: flex;*/
    align-items: center;
    justify-content: center;
    overflow: visible;


}

.fondo_pagina_5 {
    position: relative;
    width: 100%;
    min-height: 70vh;

    /* Separación con el cuadro 
    margin-top: 60px;*/
    padding: 30px 40px;

    background-image: url("../img/fondo_pagina/fondo_pagina_lugar.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*display: flex;*/
    align-items: center;
    justify-content: center;
    overflow: visible;


}


.fondo_pagina_asistencia {
    position: relative;
    width: 100%;
    min-height: 70vh;

    /* Separación con el cuadro 
    margin-top: 60px;*/
    padding: 30px 40px;

    background-image: url("../img/fotos_finales/G-y-A-10.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*display: flex;*/
    align-items: center;
    justify-content: center;
    overflow: visible;


}

.mask-image-linear-gradient {
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 4%,
            rgba(0, 0, 0, 1) 96%,
            rgba(0, 0, 0, 0) 100%);

    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 4%,
            rgba(0, 0, 0, 1) 96%,
            rgba(0, 0, 0, 0) 100%);
}

/* Flor con efecto viento */
.flor-viento {
    position: absolute;
    top: -90px;
    /* right: -20px;   */
    width: 460px;
    /* tamaño flor */
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;

    transform-origin: bottom center;
    animation: brisa 6.5s ease-in-out infinite;
}

.flor-viento-2 {
    position: absolute;
    top: 66px;
    right: -10px;
    width: 460px;
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;
    transform-origin: bottom center;
    animation: brisa 6.5s ease-in-out infinite;
}

.flor-viento-3 {
    position: absolute;
    top: -108px;
    right: 20px;
    width: 460px;
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;
    transform-origin: bottom center;
    animation: brisa 6.5s ease-in-out infinite;
}

.flor-viento-4 {
    position: absolute;
    top: -35px;
    right: -12px;
    width: 460px;
    opacity: 0.95;
    z-index: 3;
    pointer-events: none;
    transform-origin: bottom center;
    animation: brisa 6.5s ease-in-out infinite;

}

/* Animación tipo brisa */
@keyframes brisa {
    0% {
        transform: rotate(0deg) translateX(0);
    }

    25% {
        transform: rotate(1.2deg) translateX(2px);
    }

    50% {
        transform: rotate(0deg) translateX(0);
    }

    75% {
        transform: rotate(-1.2deg) translateX(-2px);
    }

    100% {
        transform: rotate(0deg) translateX(0);
    }
}

@keyframes subir {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-35deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}