#ondabran{
    grid-column: 1/13;
    grid-row: 1;
    z-index: 10;
    border-radius: 0;
}

#anima{
    width: 100%;
    grid-column: 1/13;
    grid-row: 1;
    z-index: 0;
}

#slogan{
    grid-column: 4/10;
    line-height: 103px;
    font-size: 64px;
    text-align: center;
    grid-row: 1;
    align-self: center;
    z-index: 10;
}

#titulo1{
    grid-column: 4/10;
    margin-top: 83px;
}

#txt1{
    grid-column: 5/9;
    margin-bottom: 53px;
}

#img1prato{
    grid-column: 1/5;
    grid-row: 1;
    z-index: 10;
    align-self: flex-end;
    margin-bottom: 100px;
}

#img1latas{
    grid-column: 4/10;
    grid-row: 1;
    margin-bottom: 160px;
}

#img1pes{
    grid-column: 9/13;
    grid-row: 1;
    z-index: 10;
    align-self: flex-end;
}

#frase{
    grid-column: 2/8;
    position:relative;
    top: -90px;
}

#onda{
    grid-column: 5/9;
    margin-bottom: 123px;
}

#container{
    grid-column: 6/12;
    grid-row: 4;
    padding: 70px 44px 70px 153px;
}

#imgreceita{
    grid-column: 1/7;
    grid-row: 4/6;
    z-index: 10;
    margin-top: 127px;
}

#peixe1{
    grid-column: 2/5;
    grid-row: 4;
    z-index: 20;
    margin-top: 45px;
}

#imglula{
   grid-column: 8/13;
   grid-row: 6/8; 
}

#imgberbi{
    grid-column: 7/12;
    grid-row: 6/8;
    margin-top: 450px;
    margin-bottom: 120px;
}

#container2{
    grid-column: 1/7;
    grid-row: 6;
    margin-top: 252px;
    padding: 64px 44px 70px 54px;
}

#carrimarelo{
    grid-column: 6/8;
    grid-row: 6/8;
    margin-top: 250%;
}

#container9{
    grid-row: 8;
    grid-column: 7/12;
}

#txt3{
    grid-column: 7/11;
    grid-row: 8 ;
    margin-top: 18px;
    margin-bottom: 83px;
}

#cantosereia{
    grid-column: 1/10;
    grid-row: 9;
    margin-top: 77px;
    margin-bottom: 50%;
}

#peixe2{
    grid-column: 8/11;
    grid-row: 9;
}

#container3{
    grid-column: 3/10;
    grid-row: 10;
    padding: 64px 49px 70px 49px;
}

#pack{
    grid-column: 6/13;
    grid-row: 10/12;
    margin-top: 20%;
}

#lataaber{
    grid-column: 2/6;
    grid-row: 11;
    margin-top: 20px;
    margin-bottom: 192px;
}

#garfo{
    grid-column: 2/4;
    grid-row: 10;
    position: relative;
    top: -100px;
    left: 40%
}

#container4{
    grid-column: 5/9;
    grid-row: 12;
    justify-items: center;   
}

#txt4{
    grid-column: 5 / 9;
    grid-row: 12;
    margin-top: 80px;
    margin-bottom: 80%;
    text-align: center;
}

#container5{
    grid-column: 1/13;
    justify-items: center;
}

#packspi{
    position: relative;
    margin: 0 auto 40px auto;
    top:-40%;
    width: 70%;
}

#packaber{
    grid-column: 2/8;
    position:relative;
    top: -30%;
    grid-row: 14;
    z-index: 0;
}

#frase2{
    grid-column: 7/13;
    grid-row: 14;
    z-index: 10;
    position: relative;
    top: -20%;
    left: -5%;
}

#latas2{
    grid-column: 7/13;
    grid-row: 15;
    z-index: 10;
    transform: translateY(-65%);;
}

#pessoas2{
    grid-column: 1/13;
    grid-row: 15;
    z-index: 0;
    margin-bottom: 341px;
}

#pack3{
    grid-column: 1/6;
    position: relative;
    top: -20%;
    grid-row: 1/3;
    z-index: 0;
}

#prato2{
    grid-column: 4/8;
    grid-row: 1/3;
    margin-top: 90px;
    z-index: 10;
}

#container6{
    grid-column: 9/12;
    padding: 80px 0 65px 0;
}

#titulo4{
    margin-bottom: 11px;
}

#container7{
    grid-column: 9/12;
    
}

input{
    background-color: #DEE2E3;
    color: #7F8F94;
    border: 3px solid #FFCE00;
    border-radius: 50px;
    line-height: 47px;
    font-family: ruda;
    grid-column: 9/13;
    width: 100%;
    padding: 0 20px;
}


#cta{
    border: 3px solid #FFCE00;
    background-color: #FFCE00;
    border-radius: 50px;
    grid-column:9/13;
    color: #77002E;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 10px 0;
}  

#cta:hover{
    border: 3px solid #071013;
    background-color: #071013;
    color: #F8FBFC;
}

#frase3{
    grid-column: 3/8;
    grid-row: 2;
    z-index: 20;
    margin-top: 15%;
}   

#container8{
    grid-column: 5/9;
    margin-top: 107px;
    margin-bottom: 83px;
}

#lata1{
    grid-column: 1/5;
}

#lata1 img{
    margin-bottom: 20px;
}

.latasprod img:last-of-type{
    display: none;
}

/* .latasprod:hover{
    background-color: #7F8F94;
} */

.latasprod:hover img:first-of-type{
    display: none;
}


.latasprod:hover img:last-of-type{
    display: block;
}

#lata2{
    grid-column: 5/9;
}

#lata2 img{
    margin-bottom: 20px;
}

#lata3{
    grid-column: 9/13
}

#lata3 img{
    margin-bottom: 20px;
}

#bt{
    grid-column: 6/8;
    margin-bottom: 265px;
    margin-top: 69px;
    justify-self: center;
}


#vermais{
    padding: 20px 51px;
    color: #77002E;
    border-radius: 50px;
    width: 100%;
    display: block;  
}

#vermais:hover{
    background-color: #071013;
    color: #F8FBFC;
}

#erva{
    margin-right: auto;
    width: 40%;
    position: relative;
    top: -32%;
    left: -6%;
}


#animambl{
    display: none;
}

#ondabranmbl{
    display: none;
}

#divimarembl{
    display: none;
}

#divimarembl2{
    display: none;
}

#imglulambl{
    display: none;
}

#imgberbimbl{
    display: none;
}

#imglatambl{
    display: none;
}

#receitambl{
    display: none;
}

#cantosereiambl{
    display: none;
}

#packspimbl{
    display: none;
}

#lataspimbl{
    display: none;
}

#latas2mbl{
    display: none;
}

#pess2mbl{
    display: none;
}

/* ----------------------------RESPONSIVE------------------------------- */

@media (max-width: 900px) {
 
    #carrimarelo{
        grid-column: 6/9;
        margin-top: 230%;
    }

    #imglula{
        margin-top: 100px;
    }

    #container9{
        margin-bottom: 16px;
    }

    #pack{
        margin-top: 200px;
    }

    #pack3{
        top: -10%;
    }

    #container6{
        grid-column: 8/12;
    }

    #frase3{
        margin-top: 20px;
    }

    #container7{
        grid-column: 8/12;
        margin-bottom: 70px;
    }

    #container8{
        text-align: center;
    }

    #bt{
        grid-column: 5/9;
    }

}


@media (max-width: 650px) {
 

    #slogan{
        font-size: 48px;
        line-height: 77px;
    }

    #dividerama{
        display: none;
    }

    #divimarembl{
        display: block;
    }

    #txt1{
        text-align: left;
        grid-column: 4/10;
    }

    #img1prato{
        display: none;
    }

    #img1pes{
        display: none;
    }

    #img1latas{
        grid-column: 2/12;
    }

    #frase{
        grid-column: 2/12;
        top: -170px;
    }

    #onda{
        grid-column: 4/10;
        margin-bottom: 200px;
    }

    #container{
        grid-column: 1/13;
        padding: 60px 54px 170px 54px;
    }

    #imgreceita{
        grid-column: 2/12;
        margin-top: 325px;
    }

    #peixe1{
        grid-row: 5;
        grid-column: 7/12;
        align-self: flex-end;
        margin-top: 0;
        margin-bottom: -80px;
    }

    #container2{
        grid-column: 2/12;
        padding: 60px 54px 280px 54px;
    }

    #imglula{
       display: none;
    }

    #imglulambl{
        display: block;
        z-index: 5;
        grid-column: 3/9;
        grid-row: 7/8;
        position: relative;
        top: -90px;
    }

    #imgberbi{
        display: none;
    }

    #imgberbimbl{
        display: block;
        z-index: 7;
        grid-column: 5/11;
        grid-row: 7/8;
        margin-top: 180px;
        margin-bottom: 250px;
    }

    #carrimarelo{
        grid-column: 7/10;
        grid-row: 6;
        align-self: flex-end;
        z-index: 20;
        margin-bottom: 22px;
        margin-left: 10px;
    }


   #container9{
        grid-column: 2/12;
   }


   #txt3{
        grid-column: 2/12;
        margin: 30px 0 100px 0;
   }

   #cantosereia{
    grid-column: 1/13;
    margin-top: 0;
    border-radius: 0;
    margin-bottom: 250px;
   }

   #peixe2{
    grid-column: 9/13;
    margin-top: -40px;
   }

   #garfo{
    transform: scaleX(-1);
    grid-column: 10/12;
   }

   #container3{
    grid-column: 1/13;
    padding: 60px 54px 170px 54px;
   }

   #lataaber{
    display: none;
   }

   #pack{
    grid-column: 3/11;
    margin-top: 220px;
    margin-bottom: 250px;
   }

   #txt4{
    grid-column: 4/10;
   }

   #packaber{
    grid-column: 2/9;
    margin-bottom: 100px;
   }

   #latas2{
    grid-column: 5/13;
   }

   #prato2{
    display: none;
   }

   #pack3{
    grid-column: 3/11;
    top: -130px;
   }

   #frase3{
    grid-column: 2/10;
    margin-bottom: 30px;
   }

   #container6{
    grid-column: 2/12;
   }

   #container7{
    grid-column: 3/11;
   }

   #container8{
    grid-column: 4/10;
   }

}


@media (max-width: 550px) {

    #anima{
        display: none;
    }

    #animambl{
        display: block;
        z-index: 0;
        grid-row: 1;
        grid-column: 1/13;
        width: 100%;
    }

    #slogan{
        grid-column: 3/11;
    }

    #ondabran{
        display: none;
    }

    #ondabranmbl{
        display: block;
        grid-column: 1/13;
        grid-row: 1;
        z-index: 10;
        border-radius: 0;
    }

    #dividerama{
        display: none;
    }

    #divimarembl{
        display: none;
    }

    #divimarembl2{
        display: block;
    }

    #titulo1 {
        grid-column: 3 / 11;
    }

    #txt1 {
        text-align: center;
        grid-column: 2 / 12;
    }

    #img1latas{
        display: none;
    }

    #imglatambl{
        display: block;
        grid-column: 2/12;
    }

    #frase{
        top: -10%;
        margin-bottom: 100px;
    }

    #onda{
        grid-column: 3/11;  
    }

    #container{
        padding: 60px 24px 170px 24px;
    }

    #imgreceita{
        display: none;
    }

    #receitambl{
        display: block;
        grid-column: 2/12;
        grid-row: 4/6;
        z-index: 10;
        align-self: flex-end;
        margin-top: 370px;
    }

    #peixe1{
        margin-bottom: -50px;
        grid-column: 6 / 12;
    }

    #container2{
        grid-column: 1/13;
        padding: 60px 24px 250px 24px;
    }

    #imglulambl{
        grid-column: 1/10;
        margin-left: 24px;
    }

    #imgberbimbl{
        grid-column: 3/13;
        padding-right: 24px;
        margin-top: 200px;
    }

    #carrimarelo{
        grid-column: 7 / 12;
        margin-left: 25px;
    }
    
    #cantosereia{
        display: none;
    }

    #cantosereiambl{
        display: block;
        grid-column: 2/12;
        grid-row: 9;
        margin-bottom: 280px;
    }

    #peixe2{
        grid-column: 8/13;
    }

    #garfo{
        grid-column: 9/12;
        left: 30%;
    }

    #container3{
        padding: 60px 24px 200px 24px;
    }

    #pack{
        grid-column: 1/13;
        margin-top: 300px;
    }

    #container4{
        grid-column: 3/11;
    }

    #txt4{
        grid-column: 2/12;
        margin-bottom: 140px;
    }

    #packaber{
        display: none;
    }

    #packspi{
        display: none;
    }

    #packspimbl{
        display: block;
        padding: 0 24px;
        margin-bottom: 30px;
        position: relative;
        top: -100px;
    } 

    #frase2{
        grid-column: 1/12;
        top: -128%;
        left: 10px;
    }

    #latas2{
        display: none;
    }

    #latas2mbl{
        display: block;
        grid-column: 1/10;
        grid-row: 15;
        z-index: 50;
        margin-top: -100px;
    }

    #pessoas2{
        display: none;
    }

    #pess2mbl{
        display: block;
        grid-column: 1/13;
        grid-row: 15    ;
        margin-bottom: 340px;
    }

    #pack3{
        grid-column: 3/11;
    }

    #frase3{
        display: none;
    }
    
    #container6{
        margin-top: -190px;
        padding-right: 24px;
        grid-column: 3/11;
    }

    #container8{
        grid-column: 3/11;
    }


    #bt{
        grid-column: 2/12;
    }

    #vermais{
        padding: 20px 110px;
    }

    #erva{
        width: 25%;
        top: -33%;
        left: -4%;
    }

    #lata1{
        grid-column: 2/12;
        margin-bottom: 70px;
    }

    #lata2{
        grid-column: 2/12;
        margin-bottom: 70px;
    }

    #lata3{
        grid-column: 2/12;
        margin-bottom: 70px;
    }




}