* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

#festival {

    color: var(--verde);

}

#introducao h1 {

    grid-column: 3 / 11;
    grid-row: 1 / 2;
    align-self: center;
    color: white;
    z-index: 30;
    text-align: center;
    font-size: 50px;

}

#introducao video:first-of-type {

    margin-top: 30px;
    grid-row: 1 / 2;
    grid-column: 2 / 12;
    mask-image: url(sobre_imagens/mascara_video_mobile.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;


}

#introducao video:last-of-type {

    grid-row: 1 / 2;
    grid-column: 2 / 12;
    mask-image: url(sobre_imagens/mascara_video_flor.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;


}

#introducao img {

    grid-row: 2 / 3;
    grid-column: 3 / 11;
    margin-bottom: 20%;

}

#sobre_fundo {

    background-color: var(--vermelho-escuro);

}

.contorno:first-of-type {

    top: -19px;
    position: relative;

}

.contorno:last-of-type {

    top: 20px;
    position: relative;

}

#fundo_verde img {

    margin: auto 0px;
    width: 100%;

}

#fundo_verde img:first-of-type {

    top: -15px;
    position: relative;

}

#fundo_verde img:last-of-type {

    top: 35px;
    position: relative;

}

.contorno {

    margin: auto 0px;
    width: 100%;

}

#sobre_intro {

    padding-top: 8%;
    padding-bottom: 10%;

}

#sobre_intro h2 {

    color: var(--vermelho-clarinho);
    grid-column: 2 / 8;
    margin-bottom: 50px;
    justify-self: flex-start;
    font-weight: bold;

}

#sobre_intro p {

    color: var(--branquinho);


}

#sobre_intro p:first-of-type {

    grid-column: 2 / 7;
    font-size: 18px;
    line-height: 30px;


}

#sobre_intro p:last-of-type {

    margin-top: 30px;
    grid-column: 6 / 12;
    font-size: 18px;
    line-height: 30px;


}

#lumi_mapa {

    grid-column: 5 / 9;
    position: relative;
    top: -50px;
    max-width: 80%;
    justify-self: flex-end;
    margin: 0px;
}

#sobre_intro iframe {

    grid-column: 8 / 13;
    width: 100%;
    height: 260px;
    max-width: 450px;
    border-radius: 8px;


}

#logogfn {

    grid-column: 2 / 5;
    max-width: 250px;

}

#seccaodois div {

    grid-column: 2 / 7;
    justify-self: center;
    align-self: center;

}

#seccaodois h3 {

    color: var(--vermelho);
    align-self: flex-end;
    margin-bottom: 25px;

}

#seccaodois p {

    align-self: center;
    margin: 0px
}

#seccaodois img:last-of-type {

    grid-column: 8 / 13;
    max-width: 430px;
    margin: 170px 0px;
    border-radius: 8px;
    align-self: center;
}

#fundo_verde {

    background-color: var(--verde-escuro);
    padding-bottom: 2%;

}

#fundo_verde p {

    max-width: 570px;
    font-size: 18px;
    line-height: 30px;
    color: var(--branquinho);
    justify-self: center;
    padding: 4% 4%;
    text-align: center;
    display: block;
    margin: 0px;

}

#fim div {

    grid-column: 6 / 12;
    margin-top: 25%;

}

#fim h3 {

    color: var(--vermelho);
    align-self: flex-end;
    margin-bottom: 25px;

}

#fim p:first-of-type {

    margin: 0px;

}

#rolodefilme {

    grid-column: 2 / 5;
    max-width: 180px;
    width: 100%;
    position: relative;
    top: -100px;
    grid-row: 1 / 2;

}

#fim div img {

    width: 100%;
    max-width: 240px;
    justify-self: flex-end;
    margin: 0px;
    padding-top: 20px;

}

#fim div p:first-of-type {

    margin-bottom: 15px;

}

.grelha3 {

    grid-template-columns: repeat(12, 1fr);
    display: grid;
    column-gap: 20px;
    margin-left: 20px;
    margin-right: 20px;

}

@media (max-width: 900px) {

    #sobre_intro {
        padding-top: 10%;
        padding-bottom: 15%;
    }

    #sobre_intro h2 {
        grid-column: 2 / 12;
    }

    #sobre_intro iframe {

        height: 410px;

    }

    #lumi_mapa {

        grid-column: 5 / 10;
        top: -100px;
    }

    #seccaodois div {
        grid-column: 1 / 7;
    }

    #seccaodois {

        margin-top: 10%;
        margin-bottom: 10%;

    }

    #rolodefilme {

        top: -75px;

    }
}

@media (max-width: 800px) {

    #sobre_intro iframe {
        grid-column: 4 / 13;
        margin-top: 15%;

    }

    #introducao {

        margin-bottom: 70px;

    }

    #lumi_mapa {
        grid-column: 1 / 8;
        justify-self: flex-start;
    }

    #sobre_intro p:first-of-type {
        grid-column: 2 / 12;
    }

    #logogfn {
        grid-column: 4 / 9;
        max-width: 225px;
        grid-row: 6 / 7;
        margin-top: 15%;
    }

    #rolodefilme {
        top: -95px;
    }

    #sobre_intro p:last-of-type {
        grid-column: 2 / 12;
        margin-bottom: 11%;
        margin-top: 0px;
    }

    #fundo_verde img:last-of-type {
        top: 22px;
    }

}

@media (max-width: 700px) {

    #introducao img {
        margin-top: 17%;
    }

    #fim p:last-of-type {

        margin-bottom: 120px;

    }

    #seccaodois img:last-of-type {
        grid-column: 2 / 12;
        max-width: none;
        margin: 100px 0px;
    }

    #seccaodois div {
        grid-column: 2 / 12;
        margin-top: 15%;
    }

    #sobre_intro h2 {

        margin-bottom: 7%;
        grid-column: 2 / 12;
    }

    #fundo_verde p {
        padding: 7%;
    }

    #sobre_intro p {

        grid-column: 2 / 12;

    }

    #introducao video:first-of-type {

        display: none;

    }

    #introducao video:last-of-type {

        display: block;

    }

    #seccaodois p {

        grid-column: 2 / 12;
        grid-row: 2 / 3;
    }

    #seccaodois h3 {

        grid-row: 1 / 2;

        grid-column: 2 / 12;
    }

    #fim div {

        margin-top: 30%;
    }

    #fim div img {


        padding-bottom: 40%;
    }

    #rolodefilme {
        top: -250px;
    }
}

@media (max-width: 600px) {

    #introducao video:last-of-type {
        grid-column: 1 / 13;
    }

    #introducao {
        margin: 40px 0px;
    }

    #introducao img {
        grid-column: 1 / 13;
        margin-bottom: 50px;
    }

    #introducao h1 {

        font-size: 45px;

    }

    #sobre_intro p:first-of-type {

        grid-column: 2 / 12;

    }

    #sobre_intro p:last-of-type {

        grid-column: 2 / 12;
    }

    #fundo_verde p {
        padding: 11%;
    }

    #rolodefilme {
        grid-column: 1 / 7;
        max-width: none;
        top: -115px;
        left: -44%;
    }

    #fim h3 {

        grid-column: 5 / 12;
        justify-self: flex-start;
    }

    #fim p {

        grid-column: 5 / 12;

    }

    #seccaodois img:last-of-type {

        margin: 100px 0px;

    }

    #fim div {
        z-index: 200;
        position: relative;
        grid-column: 7 / 13;
        left: -60px;
    }

}

@media (max-width: 550px) {

    #rolodefilme {

        top: -135px;

    }

    #fundo_verde img:last-of-type {
        top: 12px;
    }
}

@media (max-width: 500px) {

    #fim div {

        grid-column: 1 / 13;
        left: 0px;
        margin-bottom: 70px;
        margin-top: 0px;

    }

    #rolodefilme {
        grid-column: 9 / 13;
        max-width: none;
        top: -60px;
        left: 0px;
    }

    #fundo_verde {

        padding: 1% 0%;

    }

    #seccaodois div {

        grid-column: 1 / 13;

    }

    #seccaodois img:last-of-type {

        grid-column: 1 / 13;

    }

    #sobre_intro {
        padding-top: 20%;
    }

    #sobre_intro h2 {

        grid-column: 1 / 13;
        margin-bottom: 12%;

    }

    #sobre_intro p:first-of-type {

        grid-column: 1 / 13;

    }

    #sobre_intro p:last-of-type {

        grid-column: 1 / 13;
    }

    #lumi_mapa {

        grid-column: 1 / 13;
        align-self: center;
        top: -43px;
    }

    #logogfn {
        grid-column: 3 / 10;
        margin: 15% 0%;
    }

    #sobre_intro iframe {
        grid-column: 1 / 13;
    }

    #fim div img {

        padding-bottom: 15%;
        padding-top: 0px;
    }

}