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

img,
svg {
    display: block;
    width: 100%;
}

.center img {
    grid-column: 10 / 12;
    grid-row: 1 / 3;
    position: relative;
    bottom: -8%;
}




.banner {
    height: 100%;
    max-height: 500px;
    margin-bottom: 280px;
}

.banner h1 {
    grid-row: 2 / 3;
    align-self: center;
    z-index: 100;
    position: relative;
    grid-column: 2 / 12;
    justify-self: flex-start;
}

header img {
    max-width: 160px;
    width: 100%;
}

#historia {
    margin-top: 10%;
    row-gap: 50px;
}

#origens {
    grid-column: 7 / 12;
    grid-row: 1 / 2;
}

#atualidade_img, #atualidade_mobile, #atualidade_tablet, #atualidade_semi{
    grid-column: 1 / 13;
    width: 100%;
    grid-row: 3 / 4;
    position: relative;
    z-index: 0;
    align-self: flex-end;
}

#atualidade_mobile, #atualidade_tablet, #atualidade_semi{
    display: none;
}

#origens p, #atualidade p{
    padding-top: 20px;
}

#origens_img {
    grid-column: 1 / 7;
    max-width: 500px;
    justify-self: center;
}

#bg, #bg_mobile {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 0;
    position: relative;
    max-width: 1366px;
    width: 100%;
    margin: auto;
    filter: brightness(0.65);
}


#bg_mobile{
    display: none;
}

#livro_s {
    grid-column: 10 / 12;
    grid-row: 2 / 4;

    margin-left: -50px;
    margin-bottom: -15px;
    filter: brightness(0.8);
    z-index: 1;
    position: relative;
    align-self: flex-end;
}

#livro_m {
    grid-column: 8 / 10;
    grid-row: 2 / 4;
    align-self: flex-end;

    margin-right: -40px;
    margin-bottom: -25px;
    position: relative;
    z-index: 2;
}

#sobre_h1{
    padding-top: 75px;
    color: var(--white);
    text-shadow: 2px 2px  0 var(--black-ish);;
}


#livro_l {
    grid-column: 9 / 11;
    grid-row: 2 / 4;
    
    align-self: flex-end;
    filter: brightness(0.6);
    position: relative;
    z-index: 0;
}

#atualidade {
    grid-column: 1 / 6;
    grid-row: 3 / 4;
    align-self: center;
    margin-top: 100px;
    padding-left: 45px;
    padding-bottom: 30px;
    position: relative;
    z-index: 10;
    color: var(--white);
}

#atualidade h1{
    color: var(--white);
}

#pilares{
    grid-column: 1 / 13;
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.gridzinha{
    grid-column: 1 / 5;
    display: grid;
    column-gap: 40px

}

.dir{
    justify-self: flex-end;
}

.esq{
    justify-self: flex-start;
}

.txt{
    margin-top: 20%;
    align-self: flex-start;
    max-width: 330px;
}

.txt h2{
    color: var(--l_blue);
}

.txt p{
    padding-top: 20px;
}

#pilares img{
    width: 100%;
    max-width: 150px;
    max-height: 591px;
}

#normal{
    grid-template-columns: 1fr 2fr 2fr 1fr;
}

#inverse{
    grid-template-columns: 2fr 1fr 1fr 2fr;
}





#dif {
    margin-top: 190px;
}

.mae {
    display: grid;
    column-gap: 35px;
}

@media(max-width:1100px){
   #atualidade h1{
    color: var(--l_blue);
   }
}


@media(max-width: 980px){
    .gridzinha{
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        row-gap: 50px !important;
        margin: 50px 0px;
    }

    .dir, .esq{
        display: block;
        padding: 0px;
    }

    #bg1, #bg4 {
        grid-column: 2 / 4;
        padding-right: 20px;
    }
    
    #bg2, #bg3{
        grid-column: 1 / 3;
        padding-left: 20px;
    }

    .txt{
        margin-top: 10%;
    }
}


@media(max-width:930px) {

    .banner{
        margin-bottom: 170px;
    }

    #origens {
        grid-column: 7 / 13;
    }

    #atualidade {
        grid-column: 1 / 7;
        padding-left: 25px;
    }
}

@media(max-width:800px) {
    
    #atualidade_tablet{
        display: block;
    }

    #atualidade_img{
        display: none;
    }

    #origens {
        grid-column: 6 / 13;
    }

    #atualidade {
        grid-column: 1 / 8;
    }

    .pilares {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .pilar {
        margin-left: -50px;
        max-width: 100px;
        display: none;
    }


    #autores {
        background-image: url(imagens/pilar_autores_m.png);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }

    .caixinha {
        margin-top: 18%;
        align-self: center;
        justify-self: center;
        grid-column: 1 / 2;
        height: 500px;
        max-width: none;
    }


    .caixinha p {
        align-self: self-start;
    }






    #revendedores {
        background-image: url(imagens/pilar_revendedores_m.png);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #dif {
        padding-left: 0px;
        padding-right: 0px;
        max-width: none;

    }

    #associacoes {
        background-image: url(imagens/pilar_revendedores_m.png
);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }

    #entretenimento {
        background-image: url(imagens/pilar_entretenimento_m.png);
        background-size: contain;
        background-position: left;
        padding-left: 10px;
        background-repeat: no-repeat;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .mae {
        padding-left: 20px;
        padding-right: 20px;
    }


   


}@media(max-width:890px){
    #bg{
        display: none;
    }


    #bg_mobile{
        display: block;
    }

    #origens_img{
        grid-column: 1 / 6;
    }
}


@media(max-width:740px) {

      #pilares{
    overflow: hidden;
  }
    #origens {
        grid-column: 2 / 12;
        grid-row: 2 / 3;
    }

    #origens_img{
        grid-column: 2 / 12;
        grid-row: 1 / 2;
    }

    #atualidade {
        grid-column: 2 / 12;
        grid-row: 3 / 4;
        align-self: center;
    }

    #atualidade h1{
        color: var(--white);
    }

    #atualidade_tablet{
        display: none;
    }

    #atualidade_semi{
        display: block;
        grid-row: 3 / 4;
    }

    #origens{
    margin-bottom: 150px;
  }

}


@media(max-width:600px){


    #hero{
        display: none;
    }

    #livro_m{
            grid-column: 5 / 10;
            margin-bottom: 10px;
    }

    #livro_l{
            grid-column: 7 / 12;
            margin-bottom: 25px;
    }

    #livro_s{
            grid-column: 8 / 13;
            margin-bottom: 10px;
    }

    #atualidade{
        margin-bottom: 150px;
    }
}

@media(max-width: 520px){

    #atualidade_semi{
        display: none;
    }

    #atualidade_mobile{
        display: block;
        grid-row: 3 / 4;
    }

    #atualidade{
        grid-column: 1 / 13;
        padding-right: 25px;
        align-self: center;
        margin-top: 0px;
    }
}

@media(max-width:450px){
    .banner{
        margin-bottom: 10px;
    }
}

@media(max-width: 400px) {

    #atualidade{
                margin-bottom: 134px;
        margin-top: 76px;
    }


    #pilares img{
        width: 150%;
    }
    

  .dir{
    margin-right: -40px;
  }
  .esq{
    margin-left: -40px;
  }




    .banner h1 {
        grid-row: 1 / 3;
        grid-column: 2 / 10;
        margin-bottom: 40px;
        align-self: flex-end;
    }

    #livro_m {
        grid-column: 6 / 10;
        margin-bottom: 15px;
    }

    #livro_s {
        grid-column: 9 / 13;
        margin-bottom:20px;
        margin-left: -10px;
    }

    #livro_l {
        grid-column: 8 / 12;
        margin-bottom: 35px;
    }

    #historia {
        margin-top: 50px;
    }



    #revendedores .caixinha {
        margin-top: 2%
    }

    h2 {
        font-size: 34px;
        line-height: 38px;
    }

}