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

/* INICIO */

#inicio h1 {

    grid-column: 4 / 10;
    text-align: center;
    color: var(--branquinho);
    z-index: 2;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: center;

}

#inicio video {

    grid-column: 1 / 13;
    grid-row: 1 / 2;
    margin-top: 10px;
    border-radius: 8px;

}

#banner_mobile {

    display: none;

}

/* iNTRODUÇÃO */

#introducao {

    margin-top: 8%;
    margin-bottom: 20%;
    grid-template-rows: repeat(3, auto) 1fr;

}

#introducao h2 {

    grid-column: 1 / 7;
    color: var(--verde);
    margin-top: 20%;

}

#introducao p {

    grid-column: 1 / 7;
    color: var(--cinzento);
    margin-top: 0px;

}

#introducao img {

    grid-column: 8 / 12;
    grid-row: 1 / 5;
    z-index: 1;
    width: 87%;
    justify-self: flex-end;
    margin: 0px;

}

#pipoca {

    margin: 0px;
    grid-column: 8 / 12;
    grid-row: 1 / 5;
    mask-image: url(home_imagens/mascara_pipoca.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 87%;
    justify-self: flex-end;

}

#primeirobotao {

    grid-column: 1 / 3;


}

/* ATENÇÃO */

#fundo {

    grid-column: 1 / 13;
    background-color: var(--vermelho-escuro);
    padding-top: 8%;
    padding-bottom: 5%
}

#imagem_sobreposta {

    position: relative;

}

#imagem_sobreposta img:first-of-type {

    position: absolute;
    grid-column: 3 / 6;
    bottom: -100px;
    max-width: 270px;
    padding-left: 10%;

}

#imagem_poster {

    justify-self: center;
    position: absolute;
    max-width: 230px;
    bottom: -150px;
    z-index: 2;
    grid-column: 5 / 9;

}

#atencao h3 {

    padding-top: 15%;
    grid-column: 4 / 10;
    color: var(--vermelho-clarinho);
    text-align: center;
    margin: 0px;

}

#atencao h2 {

    display: grid;
    grid-column: 4 / 10;
    color: var(--vermelho-clarinho);
    text-align: center;
    margin-top: 15px;
    font-weight: bold;

}

#atencao p {

    grid-column: 4 / 10;
    color: var(--branquinho);
    justify-self: center;
    margin-top: 0px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 0px;
    max-width: 500px;

}

#fundo img {

    margin: auto 0px;
    width: 100%;
    top: 95px;
    position: relative;

}

/* INTERESSE */

#bilhete {

    margin: 0px;
    grid-column: 1 / 6;
    grid-row: 1 / 5;
    mask-image: url(home_imagens/mascara_bilhetes.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    display: grid;

}

#interesse h3 {

    grid-column: 7 / 13;
    color: var(--cinzento);
    margin: 0px;

}

#interesse h2 {

    grid-column: 7 / 13;
    color: var(--verde);
    margin-top: 0px;

}

#interesse p {

    grid-column: 7 / 13;
    color: var(--cinzento);
    margin-top: 0px;
}

#interesse img {

    z-index: 1;
    display: grid;
    margin: 0px;
    grid-column: 1 / 6;
    grid-row: 1 / 5;

}

#interesse {

    margin-top: 20%;
    margin-bottom: 22%;

}

#separador {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}

#separador img {

    position: absolute;
    transform: rotate(-7deg);
    top: -150px;

}

/* DESEJO */

#desejo {

    background-color: #254B37;
    padding-top: 6%;

}

#desejo_interno {

    margin-top: 15%;

}

#desejo h2 {

    color: var(--verde);
    grid-column: 1 / 6;
    margin-top: 12%;
    color: var(--verde-clarinho);
    font-weight: bold;

}

#desejo p {

    grid-column: 1 / 6;
    margin-top: 0px;
    color: var(--branquinho);
    font-size: 18px;
    line-height: 30px;

}

#premio {

    margin: 0px;
    grid-column: 7 / 13;
    grid-row: 1 / 5;
    mask-image: url(home_imagens/mascara_premio.svg);
    mask-repeat: no-repeat;


}

#desejo_interno img {

    z-index: 1;
    max-width: 444px;
    display: grid;
    margin: 0px;
    grid-column: 7 / 13;
    grid-row: 1 / 5;
    left: -2px;
    position: relative;


}

#contorno_verde {

    margin: auto 0px !important;
    width: 100%;
    top: 50px;
    position: relative;

}

/* AÇÃO */

#acao div video:first-of-type {

    display: none;

}

#acao div {

    grid-column: 6 / 13;
    grid-row: 1 / 5;
    margin-bottom: 200px;

}

#acao div video {

    mask-image: url(home_imagens/mascara_acao.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;

}

#acao div h1 {

    color: var(--branquinho);
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: -65%;
    margin-bottom: 0%;
    padding: 0px 60px;

}

#acao div h3 {
    color: var(--branquinho);
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 15px 95px;
    line-height: 30px;
}

#acao a {

    margin-top: 7%;
    background-color: var(--vermelho);
    border-radius: 10px;
    color: var(--branquinho);
    max-width: 150px;
    width: 100%;
    height: fit-content;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    align-self: center;
    grid-column: 8 / 11;
    justify-self: center;
    z-index: 2;
    grid-row: 3 / 4;

}

#acao a:hover {

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

}

#acao img:first-of-type {

    grid-column: 1 / 6;
    grid-row: 2 / 5;


}

#acao {

    margin-top: 15%;
    margin-bottom: 15%;

}

#lumi_mobile {

    display: none;

}

@media (max-width: 950px) {


    #inicio h1 {
        grid-column: 3 / 11;
    }

    #primeirobotao {
        grid-column: 1 / 4;
    }

    #imagem_poster {

        max-width: 220px;

    }

    #introducao img {

        grid-column: 7 / 12;
        margin-top: 20%;
    }

    #pipoca {

        grid-column: 7 / 12;
        margin-top: 20%;

    }

    #interesse {

        margin-bottom: 25%;
        margin-top: 20%;

    }

    #interesse img {

        grid-column: 1 / 7;

    }

    #bilhete {

        grid-column: 1 / 7;
    }

    #interesse h2 {

        padding-left: 5%;
    }

    #interesse p {

        padding-left: 5%;
    }

    #separador img {

        top: -110px;

    }

    #premio {

        mask-size: 100%;
        margin-top: 10%;

    }

    #desejo_interno img {

        margin-top: 10%;

    }

    #desejo h2 {

        grid-column: 1 / 7
    }

    #introducao {

        margin-bottom: 25%;

    }

    #fundo {

        padding-top: 12%;

    }

    #acao a {

        margin: 20px 0px;
        grid-row: 4 / 5;
    }
}

@media (max-width: 815px) {

    #acao div {
        grid-column: 5 / 13;
    }

    #acao a {

        grid-column: 6 / 12;

    }

}

@media (max-width: 800px) {

    #imagem_poster {
        max-width: 200px;
    }

    #fundo {

        padding-bottom: 15%;
        padding-top: 15%;

    }

    #atencao h2 {

        grid-column: 2 / 12;

    }

    #atencao h1 {
        margin-top: 50px;
    }

    #atencao p {

        grid-column: 2 / 12;

    }

    #pipoca {

        grid-column: 7 / 13;

    }

    #introducao img {
        grid-column: 7 / 13;
    }

    #interesse img {

        margin-top: 18%;

    }

    #bilhete {

        margin-top: 18%;
    }

    #interesse p {

        grid-column: 7 / 13;
        padding-left: 10%;

    }

    #interesse h2 {

        padding-left: 10%;
        grid-column: 7 / 13;

    }

    #interesse img {

        grid-column: 1 / 7;

    }

    #bilhete {

        grid-column: 1 / 7;
    }

    #premio {

        grid-column: 7 / 13;
        margin-top: 30%;

    }

    #desejo_interno img {

        margin-top: 30%;
        grid-column: 7 / 13;

    }

    #desejo_interno {

        margin-bottom: 7%;

    }

    #acao img:first-of-type {

        grid-column: 1 / 6;
        grid-row: 3 / 6;
        transform: rotate(-15deg);

    }

    #acao {
        margin-top: 12%;
    }

    #acao a {

        margin: -35px;
        max-width: 200px;
        height: 45px;
        padding-top: 14px;
    }

    #acao div h1 {


        padding: 0px 20px;

    }

    #acao div h3 {

        padding: 15px 60px;

    }

    #desejo h2 {
        grid-column: 1 / 7;

    }



    #desejo p {
        grid-column: 1 / 7;
        padding-right: 10%;
    }

    #imagem_sobreposta img:first-of-type {

        grid-column: 2 / 6;
    }

    #fundo img {
        top: 150px;
    }

    #contorno_verde {

        top: 25px;

    }

}

@media (max-width: 730px) {

    #acao div {

        grid-column: 2 / 12;

    }

    #acao img:first-of-type {

        display: none;

    }

    #lumi_mobile {
        display: block;
        grid-column: 1 / 7;
        margin-left: -85px;
        margin-top: -50px;

    }
}

@media (max-width: 700px) {

    #imagem_sobreposta img:first-of-type {

        grid-column: 2 / 6;

    }


    #premio {

        margin-top: 50%;

    }

    #desejo_interno img {

        margin-top: 50%;

    }

    #introducao h2 {

        margin: 0px;

    }

    #introducao img {

        margin-top: 60%;

    }

    #pipoca {

        margin-top: 60%;

    }

    #fundo {
        padding-top: 22%;
        padding-bottom: 20%;
    }

    #inicio h1 {

        grid-column: 2 / 12;

    }

    #introducao h2 {

        grid-column: 1 / 8;
        margin-top: 20%;

    }

    #introducao p {

        margin-top: 15px;
        grid-column: 1 / 8;

    }

    #separador img {
        top: -75px;
    }

    #imagem_poster {
        max-width: 180px;
    }

    #separador img {
        top: -70px;
    }

}

@media (max-width: 650px) {


    #introducao h2 {
        grid-column: 1 / 7
    }

    #introducao p {

        grid-column: 1 / 7;
    }

    #premio {

        grid-column: 3 / 11;


    }

    #desejo h2 {
        grid-column: 2 / 12;
        padding: 0px;

    }

    #desejo_interno img {

        grid-column: 3 / 11;

    }

    #desejo p {

        grid-column: 2 / 12;
        padding: 0px;
    }

    #desejo_interno {
        margin-top: 0%;
    }

    #separador {
        grid-column: 1 / 13;
    }

    #bilhete {

        grid-column: 3 / 11;
        margin-top: 0px;


    }

    #interesse img {

        grid-column: 3 / 11;
        margin-top: 0px;

    }

    #interesse h2 {

        padding: 0px;
        margin-top: 18%;
        grid-column: 2 / 13;

    }

    #interesse p {

        grid-column: 2 / 11;
        padding: 0px;

    }

    #separador img {
        top: -50px;
    }

}

@media (max-width: 600px) {

    #primeirobotao {
        grid-column: 1 / 6;
        grid-row: 3 / 4;
        align-self: flex-start;
    }

    #inicio video:last-of-type {
        margin-top: 10px;
    }

    #inicio h1 {

        margin: 10px;
    }

    #introducao h2 {
        grid-column: 1 / 13;
        margin-top: 20%;
        grid-row: 1 / 2;

    }

    #introducao p {
        margin-top: 5%;
        grid-column: 1 / 13;
        grid-row: 2 / 3;

    }

    #introducao img {

        grid-row: 3 / 4;
        margin-top: 45%;
        grid-column: 3 / 11;

    }

    #introducao {

        margin-bottom: 35%;

    }

    #pipoca {

        grid-row: 3 / 4;
        margin-top: 45%;
        grid-column: 3 / 11;
    }

    #atencao img {

        grid-column: 3 / 11;

    }

    #atencao h3 {
        grid-column: 3 / 11;
    }

    #interesse img {

        grid-column: 2 / 12;

    }

    #interesse p {
        grid-column: 1 / 13;
        padding: 0px
    }

    #interesse h2 {
        padding: 0px;
        grid-column: 1 / 13;
    }

    #desejo_interno {
        margin-top: 0%;
    }

    #desejo h2 {
        grid-column: 1 / 13;
        margin-top: 20%;
    }

    #desejo p {
        grid-column: 1 / 13;
    }

    #fundo {

        padding-top: 32%;
        padding-bottom: 28%;

    }

    #fundo img {
        top: 190px;
    }

    #imagem_poster {

        max-width: 220px;
        grid-column: 5 / 10;

    }

    #imagem_sobreposta img:first-of-type {
        grid-column: 1 / 7;
    }

    #acao div {
        margin-top: 20%;
    }

    #acao div h3 {

        padding: 15px 60px;
    }

    #lumi_mobile {
        grid-column: 1 / 10;
        grid-row: 5 / 6;
        margin-top: 15%;
    }

    #acao div video {
        grid-column: 1 / 13;

    }

    #acao div video:first-of-type {

        display: block;
        mask-image: url(home_imagens/mascara_acao_mobile.svg);
        mask-repeat: no-repeat;
        mask-size: 100%;
        position: relative;
        top: 20%;

    }

    #acao a {

        grid-column: 2 / 12;
        grid-row: 5 / 6;
        align-self: flex-start;
        margin: 0px;
    }

    #acao div {

        margin-top: 0px;

    }

    #bilhete {

        grid-column: 2 / 12;

    }

    #inicio video:first-of-type {

        display: none;

    }

    #banner_mobile {

        display: block;
        grid-column: 1 / 13;

    }

    p {

        font-size: 18px;
        line-height: 30px;

    }

    #videodesktop {

        display: none;

    }


}

@media (max-width: 550px) {

    #fundo img {

        top: 176px;

    }

    #contorno_verde {
        top: 20px;

    }

}

@media (max-width: 500px) {

    #atencao p {

        grid-column: 1 / 13;
    }

    #atencao p:first-of-type {

        padding-top: 5%;

    }

    #atencao h2 {
        grid-column: 1 / 13;
    }

    #interesse {
        margin-bottom: 35%;
        margin-top: 35%;
    }

    #desejo p {

        margin-top: 5%;

    }

    #desejo_interno img {

        margin-top: 35%;
        grid-column: 2 / 12;

    }

    #premio {

        grid-column: 2 / 12;
        margin-top: 35%;

    }

    #imagem_sobreposta img:first-of-type {
        bottom: -75px;
    }

    #introducao p {

        margin-bottom: 8%;
    }

    #separador img {

        top: -64px;
        left: -271px;
        width: 138%;

    }

    #introducao img {

        grid-row: 3 / 4;
        margin-top: 65%;
        grid-column: 2 / 12;

    }

    #pipoca {

        grid-row: 3 / 4;
        grid-column: 2 / 12;
        margin-top: 65%;
    }

    #fundo img {

        top: 135px;

    }

    #acao div video:first-of-type {

        top: 25%;

    }

    #acao div {


        grid-column: 1 / 13;
    }

    #acao a {

        margin: -45px;
    }


}

@media (max-width: 400px) {

    #primeirobotao {
        grid-column: 1 / 13;
        max-width: none;
        height: 45px;
        padding-top: 15px;
    }

    #imagem_poster {
        grid-column: 4 / 11;
    }

    #imagem_sobreposta img:first-of-type {
        grid-column: 1 / 8;
        left: -40px;

    }

    #interesse img {

        grid-column: 1 / 13;

    }

    #bilhete {

        grid-column: 1 / 13;

    }

    #introducao img {

        grid-column: 1 / 13;
        margin-top: 42%;

    }

    #pipoca {

        grid-column: 1 / 13;
        margin-top: 42%;

    }

    #desejo_interno img {

        grid-column: 1 / 13;
    }

    #premio {

        grid-column: 1 / 13;
    }

    #fundo img {

        top: 115px;

    }

    #acao a {

        grid-column: 1 / 13;
        max-width: none;
        margin: -115px;
    }

    #acao div video:first-of-type {
        top: 30%;
    }

    #acao div h1 {

        padding: 0px 20px;
    }

    #acao div h3 {

        padding: 15px 40px;

    }

    #lumi_mobile {
        grid-column: 1 / 11;
        margin-top: 0px;
        margin-bottom: 35%;
    }



}