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

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

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 28px;
}


@font-face {
    font-family: Poppins;
    src: url(tipos/Poppins/Poppins-Regular.ttf);
}

@font-face {
    font-family: Poppins Light;
    src: url(tipos/Poppins/Poppins-Light.ttf);
}

@font-face {
    font-family: Poppins ExtraLight;
    src: url(tipos/Poppins/Poppins-ExtraLight.ttf);
}


@font-face {
    font-family: Poppins Medium;
    src: url(tipos/Poppins/Poppins-Medium.ttf);
}

/*-----------------------body and header--------------------*/

body {

    background-color: #F0EFEB;
}




header {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    background-color: #F0EFEB;

    border-bottom: 1px solid #383838;
}


#logotipo {
    grid-column: 1/3;

    display: flex;
    align-self: center;

    margin-left: 10px;
}


#logotipo360 {
    grid-column: 4/10;
    display: none;
    margin-top: 30px;
    margin-bottom: 30px;

}

#burger {
    width: 32px;
    grid-column: 1/auto;
    display: none;

    align-self: center;

    margin-left: 20px;
}


nav {
    display: flex;

    color: #FFFDF7;
    font-family: Poppins;
    font-size: 20px;

    grid-column: 7/11;

    justify-content: flex-end;
    align-items: center;



}


nav a, #redes a {
    margin-top: 75px;
    margin-left: 20px;
    margin-bottom: 75px;

    text-decoration: none;
    color: #383838;

}



#redes {
    grid-column: 12/13;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#redes img {
    width: 25px;
    height: 25px;
}






#menumobile{
    background-color: #F0EFEB;
    transition:left .5s;
    position: fixed;
    z-index: 1000;
    width: 85%;
    height: 100%;
    left:-120%;
    top: 0;

    overflow: hidden ;
    


    display: none;
}


#closemenu{
    background-color: #383838;
}

#cross{
    width: 40px;

    align-self: center;
}

#crosstxt{
    font-family: Poppins;
    color: #F0EFEB;
    font-size: 15px;

    grid-column: 2/9;

    align-self: center;

    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -20px;
}

#row1{
    border: none;
    border-top: 1px solid #383838;
    margin-top: 10px;

    width: 100%;

    margin-top: 25px;
    margin-bottom: 25px;

}


#row2{
    border: none;
    border-top: 2px solid #383838;

    width: 100%;

    margin-top: 25px;
    margin-bottom: 25px;

}


#menubotoes{
    font-family: Poppins;
    color:#383838;
    font-size: 17px;
    text-decoration: none;

    margin-left: 10px;
}




/*--------------------------intro---------------------------*/


#introducao {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-rows: 1fr 1fr;
}

#introtxt {
    grid-column: 1/7;
    grid-row: 1;
    justify-self: flex-end;

    align-self: center;

    font-family: Poppins Light;
    color: #383838;
    font-size: 20px;

}

#introtxt h3:last-of-type {
    font-family: Poppins Medium;
    color: #383838;
}

#headerimg {
    grid-column: 1/7;
    grid-row: 2;

    align-self: flex-end;
}

#video {
    grid-column: 7/13;
    grid-row: 1/3;
    margin-top: 70px;

    width: 572px;

    display: flex;
    flex: end;
    

}



/*--------------------------welcome-------------------------*/



#interest {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.welcome {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 85px;

    margin-top: 200px;
    margin-bottom: 200px;

    grid-column: 1/9;


}

.welcome360 {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 32px;

    margin-top: 70px;
    margin-bottom: 70px;

    grid-column: 1/13; 

    text-align: center;

    display: none;
}

.explore {
    font-family: Poppins Light;
    color: #85817E;
    align-self: center;
    font-size: 20px;

    grid-column: 10/13;
}


.interestimgs {
    grid-column: auto/span 3;
    align-self: flex-end;
}


.interesttxt {
    grid-column: auto/span 3;
    align-self: flex-start;
    text-align: center;
    font-size: 20px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}

.iriz{
    grid-column: auto/span 6;
  
}


.interestimg360{
    display: none;
}

.interesttxt360{
    text-align: center;

    font-family: Poppins Light;
    font-size: 14px;
    color: #383838;

    margin-top: 10px;
    margin-bottom: 10px;

    display: none;
}


#chico{
    margin-top: -100px;
}


/*--------------------------galeria-------------------------*/




#galeria {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    margin-top: 350px;
    margin-bottom: 350px;
}


.galeria1 {
    grid-column: 2/6;
}

.galeria2 {
    grid-column: 3/11;

    position: relative;
    top: -50px;
}


.galeriatxt1 {
    font-family: Poppins Light;
    color: #85817E;
    font-size: 35px;

    grid-column: 3/6;

    margin-top: 100px;
}

.galeria3 {
    margin-top: 200px;
    grid-column: 7/11;
}



.galeriatxt2 {
    font-family: Poppins Light;
    color: #85817E;
    font-size: 35px;
    text-align: right;

    grid-column: 6/11;
    grid-row: 4;
    align-self: center;

}


.galeria4 {
    grid-column: 2/5;
}

.galeria5 {
    grid-column: 4/8;

    position: relative;
    top: -100px;
}





/* ------------------------------------------ */





#galeria360 {
    margin-top: 200px;
    margin-bottom: 200px;

    display: none;
}


.galeria3601 {
    grid-column: 2/7;

}

.galeria3602 {
    grid-column: 3/12;

    position: relative;
    top: -10px;

 
}


.galeria360txt1 {
    font-family: Poppins Light;
    color: #85817E;
    font-size: 14px;

    grid-column: 2/6;

    margin-top: 50px;
}

.galeria3603 {
    margin-top: 100px;
    grid-column: 6/12;
}



.galeria360txt2 {
    font-family: Poppins Light;
    color: #85817E;
    font-size: 14px;
    text-align: right;

    grid-column: 6/12;
    grid-row: 4;
    align-self: center;

}


.galeria3604 {
    margin-top: 50px;
    grid-column: 2/6;

}

.galeria3605 {
    grid-column: 4/9;

    position: relative;
    top: -30px;
    left: -30px;
}













/*------------------------novo produto----------------------*/




#action {
    background-color: #969378;
    width: 100%;
    height: 900px;
}


#actionitems {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

}



#actiontitle {
    font-family: Poppins Medium;
    color: #F0EFEB;

    font-size: 85px;
    grid-column: 1/8;

    margin-left: 10px;
}


#linhaum {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 50px;

    grid-row: 2;
    grid-column: 1/13;
    width: 100%;

}



#actionimg {
    grid-column: 1/7;
    margin-top: 25px;
    grid-row: 3;

    margin-left: 10px;
}


#linhadois {
    border: none;
    border-left: 2px solid #F0EFEB;
    grid-row: 3;
    grid-column: 7/8;

    height: 100%;

}



#actionproduct {
    font-family: Poppins;
    color: #F0EFEB;
    font-size: 40px;
    margin-top: 15px;
    margin-left: 15px;

    grid-column: 7/11;
    grid-row: 3;

}


#actiontxt {
    font-family: Poppins Light;
    color: #F0EFEB;
    font-size: 20px;

    grid-column: 7/11;
    grid-row: 3;

    align-self: flex-end;

    margin-bottom: 120px;
    margin-left: 15px;

}

#linhatres {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 50px;
    margin-bottom: 100px;

    grid-row: 3;
    grid-column: 7/13;
    width: 100%;

    display: flex;
    align-self: flex-end;

}

#buynow {
    font-family: Poppins;
    color: #F0EFEB;
    font-size: 30px;

    display: flex;
    align-self: flex-end;

    margin-bottom: 25px;
    margin-left: 10px;



    grid-row: 3;
    grid-column: 7/13;

}

#arrowone {
    grid-row: 3;
    grid-column: 7/13;
    width: 18px;

    display: flex;
    align-self: flex-end;
    justify-self: flex-end;

    margin-bottom: 40px;
    margin-right: 10px;


}

#linhaquatro {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 50px;

    grid-row: 3;
    grid-column: 7/13;

    display: flex;
    align-self: flex-end;

}









#actionitems360{
    display: none;
}



#actiontitle360 {
    font-family: Poppins Medium;
    color: #F0EFEB;

    font-size: 32px;
    grid-column: 1/13;

    text-align: center;
    margin-top: 50px;

}


#linhaum360 {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 30px;

    grid-row: 2;
    grid-column: 1/13;
    width: 100%;

}



#actionimg360{
    grid-column: 2/12;
    grid-row: 4;
    justify-self: center;
}


#actionproduct360 {
    font-family: Poppins;
    color: #F0EFEB;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 15px;

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

    text-align: center;

}


#actiontxt360 {
    font-family: Poppins ExtraLight;
    color: #F0EFEB;
    font-size: 14px;

    grid-column: 2/12;
    grid-row: 5;

    text-align: center;

    margin-bottom: 120px;
    margin-top: 30px;
    margin-left: 15px;

}

#linhatres360 {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 10px;
    margin-bottom: 50px;

    grid-row: 5;
    grid-column: 2/12;
    width: 100%;

    display: flex;
    align-self: flex-end;

}

#buynow360 {
    font-family: Poppins Light;
    color: #F0EFEB;
    font-size: 15px;

    display: flex;
    align-self: flex-end;

    margin-bottom: 13px;
    margin-left: 10px;



    grid-row: 5;
    grid-column: 2/8;

}

#arrowone360 {
    grid-row: 5;
    grid-column: 7/12;
    width: 12px;

    display: flex;
    align-self: flex-end;
    justify-self: flex-end;

    margin-bottom: 17px;
    margin-right: 10px;


}

#linhaquatro360 {
    border: none;
    border-top: 2px solid #F0EFEB;
    margin-top: 50px;

    grid-row: 5;
    grid-column: 2/12;

    display: flex;
    align-self: flex-end;
}



/*---------------------------values-------------------------*/

#values {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    margin-top: 300px;
}

#valuestitle {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 85px;


    grid-column: 5/13;


    display: flex;
    justify-self: flex-end;
}

#linhacinco {
    border: none;
    border-top: 2px solid #85817E;
    margin-top: 50px;

    grid-row: 2;
    grid-column: 1/13;
    width: 100%;

}

.valuesimgs {
    grid-column: auto/span 3;
    margin-top: 100px;

}

.valuestxt {
    grid-column: auto/span 3;
    align-self: flex-start;
    text-align: center;
    font-size: 20px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}


#abouttxt {
    grid-column: 2/12;
    grid-row: 6;

    font-family: Poppins;
    color: #383838;
}

#valuesabout {
    grid-row: 6;
    grid-column: 2/12;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 0;
    border-top: solid #85817E 1px;
    border-bottom: solid #85817E 1px;

    margin-bottom: 405px;
    margin-top: 100px;
}

#arrowtwo {
    grid-row: 6;
    grid-column: 7/12;
    width: 15px;

}



   /* ------------------------------------------------- */


#values360{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    margin-top: 200px;

    display: none;
}

#valuestitle360 {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 32px;


    grid-column: 1/13;


    justify-self: flex-end;
}

#linhacinco360 {
    border: none;
    border-top: 2px solid #85817E;
    margin-top: 10px;

    grid-row: 2;
    grid-column: 1/13;
    width: 100%;
}

.valuesimgs360um {
    grid-column:4/10 ;

    margin-top: 100px;
}

.valuesimgs360dois {
    grid-column:4/10 ;

    margin-top: 50px;
}

.valuesimgs360tres {
    grid-column:4/10 ;

    margin-top: 50px;
}

.valuesimgs360quatro {
    grid-column:4/10 ;

    margin-top: 50px;
}

.valuestxt360um {
    grid-column: 4/10;
    grid-row: 4;


    align-self: flex-start;
    text-align: center;
    font-size: 15px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}

.valuestxt360dois {
    grid-column: 4/10;
    grid-row: 6;


    align-self: flex-start;
    text-align: center;
    font-size: 15px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}

.valuestxt360tres {
    grid-column: 4/10;
    grid-row: 8;

    align-self: flex-start;
    text-align: center;
    font-size: 15px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}

.valuestxt360quatro{
    grid-column: 4/10;
    grid-row: 10;
    align-self: flex-start;
    text-align: center;
    font-size: 15px;

    font-family: Poppins Light;
    color: #383838;

    margin-top: 20px;
}



#abouttxt360 {
    grid-column: 2/12;
    grid-row: 6;

    margin-left: 10px;


    font-family: Poppins;
    font-size: 15px;
    color: #383838;
}

#valuesabout360 {
    grid-row: 11;
    grid-column: 2/12;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 0;
    border-top: solid #85817E 1px;
    border-bottom: solid #85817E 1px;

    margin-bottom:200px;
    margin-top: 50px;
}

#arrowtwo360 {
    grid-row: 6;
    grid-column: 7/12;
    width: 12px;
    margin-right: 10px;

}













/*--------------------------footer--------------------------*/

#hands {
    max-width: 1200px; 
    grid-column: 1/13;
    grid-row: 1/auto;
    position: relative;
    transform: translateY(-46%);
}

#footerbackground {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

}

footer {
    width: 100%;
    background-color: #85817E;
}


#links{
    grid-column: 3/6 ;
    grid-row: 2/auto;
    margin-top: -150px;

}

.footerbotoes {
    font-family: Poppins;
    color: #383838;
    text-decoration: none;

    display: flex;
    flex-wrap: wrap;

    margin-top: 20px;
}




#socials img {
    width: 45px; 
       
}

#socials{
    grid-column: 3/6;
    grid-row: 3;

    display: grid;

    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;

    height: 200px;

}




#footerimg {
    grid-column: 7/12;
    grid-row: 2/4;

    margin-top: -200px;
}




#linhafooter {
    border: none;
    border-top: 1px solid #F0EFEB;


    grid-row: 5;
    grid-column: 1/13;
    width: 100%;

    margin-top: 70px;

}

#rights {
    font-family: Poppins ExtraLight;
    color: #F0EFEB;
    font-size: 15px;

    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

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


}

#designby {
    font-family: Poppins ExtraLight;
    color: #F0EFEB;
    font-size: 15px;

    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

    display: flex;
    justify-self: flex-end;


    grid-column: 6/13;
    grid-row: 6;

}




#socials360{
    grid-column: 4/10;
    grid-row: 3;

    display: grid;

    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    justify-self: center;

    height: 150px;
    gap: 20px;
    margin-top: 20px;

    display: none;

}

.socialsvg360{
    width: 40px;
}


#linhafooter360 {
    border: none;
    border-top: 1px solid #F0EFEB;


    grid-row: 5;
    grid-column: 1/13;
    width: 100%;

    margin-top: 20px;

    display: none;
}

#rights360 {
    font-family: Poppins ExtraLight;
    color: #F0EFEB;
    font-size: 10px;

    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

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

    display: none;

}

#designby360 {
    font-family: Poppins ExtraLight;
    color: #F0EFEB;
    font-size: 10px;

    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

    display: flex;
    justify-self: flex-end;


    grid-column: 6/13;
    grid-row: 6;

    display: none;
}


/*---------------------------other--------------------------*/
@media only screen and (max-width: 700px) {

    #logotipo {
        display: none;
    }

    nav {
        display: none;
    }

    #redes {
        display: none;
    }

    #logotipo360 {
        grid-row: 1;
        display: block;
    }

    #logotipo800{
        display: none;

    }

    #burger {
        grid-row: 1;
        display: block;
    }


    #menumobile{
        display: block;
    }


    #introducao {

        display: none;
    }

    .welcome {

        display: none;
    }

    .welcome360 {

        display: block;
    }



    .explore {

        display: none;
    }

    .interestimgs {

        display: none;
    }

    .interesttxt {

        display: none;
    }

.interestimg360{
    display: block;
}

.interesttxt360{
    display: block;
}

    #galeria {
        display: none;
    }

    #galeria360{
        display: grid;
    }

    #galeria800{
        display: none;
    }



    #actionitems {
        display: none;
    }


    #actionitems360{
    display: grid;
    }

    #actionitems800{
        display: none;
    }



    #values {
        display: none;
    }


     #values360 {
        display: grid;
    }


    #links{
     grid-column: 3/11 ;
     grid-row: 2/auto;
     margin-top: -150px;
    }


    .footerbotoes{
    font-family: Poppins;
    color: #383838;
    text-decoration: none;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    margin-top: 20px;
   }


   #socials{
    display: none;
   }

    #socials360{
    display: grid;
   }

   #footerimg{
    display:none;
   }

   #linhafooter{
    display: none;
   }

   #rights{
    display: none;
   }

   #designby{
    display: none;
   }

    #linhafooter360{
    display: block;
   }

   #rights360{
    display: grid;
   }

   #designby360{
    display: grid;
   }

}






/* ---------------------pagina produto----------------------------- */


#copustitulo{
    width: 100%;
}

.copustitulo {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 85px;

    margin-top: 70px;
    margin-bottom: 70px;
    margin-left: 10px;

    grid-column: 1/9;

}

#linhacopus{
    border: none;
    border-top: 2px solid #85817E;

    grid-row: 5;
    grid-column: 1/13;
    
    width: 98%;
    justify-self: center;
}



.copustitulo360 {
    font-family: Poppins;
    color: #383838;
    font-size: 40px;

    margin-top: 100px;

    grid-column: 1/13;
    text-align: center;

    display: none;

}

#price360{
    font-family: Poppins Light;
    font-size: 20px;
    color: #383838;

    grid-column: 1/13;
    grid-row: 2;

    text-align: center;

    margin-top: 20px;

    display: none;
}

#tax360{
    font-family: Poppins ExtraLight;
    font-size: 10px;
    color: #85817E;

    grid-column: 1/13;
    grid-row: 3;

    text-align: center;

    display: none;
}






.specstitle{
    font-family: Poppins ExtraLight;
    font-size: 12px;
    color: #85817E;

    grid-column: auto/ span 2;
    text-align: start;

    margin-top: 70px;
    margin-left: 10px;

}


.specstxt{
    font-family: Poppins Light;
    font-size: 13px;
    color: #383838;

    grid-column: auto/ span 2;

    margin-top: 10px;
    margin-left: 10px;
    margin-right: 24px;

}



.display{
    margin-top: 150px;
    margin-left: 20px;

    grid-column: 1/6;
    grid-row:1/4 ;
}

.thumbnail{
    grid-row: 4;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;

    margin-top: 20px;
    margin-left: 20px;

	cursor: pointer;
}

#price{
    margin-top: 150px;

    font-family: Poppins Light;
    font-size: 40px;
    color: #383838;

    grid-column: 7/9;
    grid-row: 1;
}

#tax{
    margin-top: 200px;

    font-family: Poppins ExtraLight;
    font-size: 15px;
    color: #85817E;

    grid-column: 7/9;
    grid-row: 1;
}



#solid{
    margin-top: 80px;
    font-family: Poppins ExtraLight;
    font-size: 20px;
    color: #383838;

    grid-column: 7/9;
    grid-row: 2;

}

#solidcolors{
    grid-column: 7/9;
    grid-row: 2;
    
    margin-top: 120px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

}


.solidsvg{
    width: 47px;

}




#gradient{
    margin-top: 80px;
    font-family: Poppins ExtraLight;
    font-size: 20px;
    color: #383838;

    grid-column: 10/12;
    grid-row: 2;

}

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

    margin-top: 120px;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


.gradientsvg{
    width: 47px;
}




#botaomaismenos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    border: #85817E solid 2px;
    width: 138px;
    height: 50px ;
    margin: 0 0 40px 0;

    grid-column: 7/10;
    grid-row: 3;

    margin-top: 40px;
    cursor: pointer;
}

#botaomaismenos img {
    width: 10px;
}

#botaomaismenos ul {
    align-self: center;
    padding: 16px;
}

#botaomaismenos div {
    align-self: center;
    padding: 16px;
}


#numero{
    font-family: Poppins Light;
    font-size: 20px;
    line-height: 0;
}



.botoescomprar{
    font-family: Poppins Light;
    font-size: 20px;
    color: #383838;

    
}

.seta{
    width: 10px;

    margin-top: 10px;
}


#buy{
    grid-column: 7/9;
    grid-row: 4;

    align-self: first baseline;

    display: flex;
    justify-content: space-between;

    padding: 10px 0;
    border-top: solid #85817E 2px;
    border-bottom: solid #85817E 2px;
    

}

#addtocart{
    grid-column: 9/11;
    grid-row: 4;

    align-self: first baseline;

    display: flex;
    justify-content: space-between;

    padding: 10px 0;
    border-top: solid #85817E 2px;
    border-bottom: solid #85817E 2px;
}







.display360{
    margin-top: 50px;

    grid-column: 2/12;
    grid-row:1;

    display: none;
}

.thumbnail360{
    margin-left: 40px;
    grid-row: 2;
    grid-column: auto/span 2;

    margin-top: 10px;

	cursor: pointer;

    display: none;

}


#solid360{
    margin-top: 100px;
    font-family: Poppins ExtraLight;
    font-size: 15px;
    color: #383838;

    grid-column: 2/6;
    grid-row: 3;

    display: none;

}

#solidcolors360{
    grid-column: 2/6;
    grid-row: 4;
    
    margin-top: 10px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    display: none;

}


.solidsvg360{
    width: 40px;

    display: none;

}



#gradient360{
    margin-top: 100px;
    font-family: Poppins ExtraLight;
    font-size: 15px;
    color: #383838;

    grid-column: 8/12;
    grid-row: 3;

    display: none;

}

#gradientcolors360{
    grid-column: 8/12;
    grid-row: 4;
    
    margin-top: 10px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    display: none;

}


.gradientsvg360{
    width: 40px;

    display: none;
}









.specstitle360row1{
    font-family: Poppins ExtraLight;
    font-size: 10px;
    color: #85817E;

    grid-column: auto/ span 4;
    grid-row: 1;
    text-align: center;

    margin-top: 120px;

    display: none;

}


.specstxt360row1{
    font-family: Poppins Light;
    font-size: 10px;
    color: #383838;

    grid-column: auto/ span 4;
    grid-row: 2;
    text-align: center;

    margin-top: 10px;
    width: 100px;

    justify-self: center;

    display: none;

}


.specstitle360row2{
    font-family: Poppins ExtraLight;
    font-size: 10px;
    color: #85817E;

    grid-column: auto/ span 4;
    grid-row: 3;
    text-align: center;

    margin-top: 70px;

    display: none;

}


.specstxt360row2{
    font-family: Poppins Light;
    font-size: 10px;
    color: #383838;

    grid-column: auto/ span 4;
    grid-row: 4;
    text-align: center;

    margin-top: 10px;
    width: 100px;

    justify-self: center;

    display: none;

}







.check {
    font-family: Poppins Medium;
    color: #383838;
    font-size: 85px;

    margin-top: 200px;

    grid-column: 3/13;

    text-align: end;

    margin-right: 10px;


}

#linhacheck{
    border: none;
    border-top: 2px solid #85817E;

    grid-row: 2;
    grid-column: 1/13;

    margin-top: 50px;
    margin-bottom: 100px;

}


.otherproducts{
    grid-column: auto / span 4;
    width: 90%;
    justify-self: center;
}

.otherproductstitle{
    font-family: Poppins Light;
    font-size: 30px;
    color: #383838;


    grid-column: auto / span 4;
    width: 90%;
    justify-self: center;
}
 
.otherproductsprice{
    font-family: Poppins ExtraLight;
    font-size: 20px;
    color: #85817E;


    grid-column: auto / span 4;
    width: 90%;
    justify-self: center;


    margin-bottom: 450px;
}





.check360{
    font-family: Poppins;
    color: #383838;
    font-size: 40px;

    margin-top: 200px;
    margin-bottom: 50px;

    grid-column: 1/13;
    text-align: center;

    display: none;
}


.otherproducts3601{
    grid-column: auto / span 6;
    justify-self: center;


    display: none;
}

.otherproductstitle3601{
    font-family: Poppins Light;
    font-size: 15px;
    color: #383838;


    grid-column: auto / span 6;


    display: none;
}

.otherproductsprice3601{
    font-family: Poppins ExtraLight;
    font-size: 13px;
    color: #85817E;


    grid-column: auto / span 6;

    display: none;
}


.otherproducts3602{
    margin-top: 20px;
    grid-column: auto/span 6;
    justify-self: center;

    display: none;
}

.otherproductstitle3602{
    font-family: Poppins Light;
    font-size: 15px;
    color: #383838;


    grid-column: 1/7;


    display: none;
}

.otherproductsprice3602{
    font-family: Poppins ExtraLight;
    font-size: 13px;
    color: #85817E;


    grid-column: 1/7;
    margin-bottom: 200px;

    display: none;
}

#marginleft{
    margin-left: 10px;
}

#marginright{
    margin-right: 10px;
}


/* ------------------------------------------------------ */
@media only screen and (max-width: 700px){

    #imgheader{
        display: none;
    }

    .copustitulo{
        display: none;
    }

    .copustitulo360{
        display: grid;
    }

    #price360{
        display: grid;
    }

    #tax360{
        display: grid;
    }

    #linhacopus{
        display: none;
    }

    .specstitle{
        display: none;
    }

    .specstxt{
        display: none;
    }

    .display{
        display: none;
    }

    .thumbnail{
        display: none;
    }

    
    .display360{
        display: grid;
    }

    .thumbnail360{
        display: grid;
    }

    #price{
        display: none;
    }

    #tax{
        display: none;
    }

    #solid{
        display: none;
    }

    #solid360{
        display:grid;
    }

    #solidcolors{
        display: none;
    }

    #solidcolors360{
        display: grid;
    }

    .solidsvg360{
        display: grid;
    }


    #gradient{
        display: none;
    }

    #gradient360{
        display: grid;
    }

    #gradientcolors{
        display: none;
    }

    #gradientcolors360{
        display: grid;
    }

    .gradientsvg360{
        display: grid;
    }




#botaomaismenos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-self: center;
    border: #85817E solid 2px;
    width: 138px;
    height: 70px ;
    margin: 0 0 40px 0;

    grid-column: 5/9;
    grid-row: 5;
 
    margin-top: 100px;
    cursor: pointer;
}

#botaomaismenos img {
    width: 15px;
}

#botaomaismenos ul {
    align-self: center;
    padding: 16px;
}

#botaomaismenos div {
    align-self: center;
    padding: 16px;
}


#numero{
    font-family: Poppins Light;
    font-size: 25px;
    line-height: 0;
}



.botoescomprar{
    font-family: Poppins Light;
    font-size: 20px;
    color: #383838;

    
}

.seta{
    width: 10px;
    margin-top: 10px;
}


#buy{
    grid-column: 2/5;
    grid-row: 5;
    margin-top: 120px;

    align-self: first baseline;

    display: flex;
    justify-content: space-between;

    padding: 10px 0;
    border-top: solid #85817E 2px;
    border-bottom: solid #85817E 2px;
    

}

#addtocart{
    grid-column: 9/12;
    grid-row: 5;
    margin-top: 120px;

    align-self: first baseline;

    display: flex;
    justify-content: space-between;

    padding: 10px 0;
    border-top: solid #85817E 2px;
    border-bottom: solid #85817E 2px;
}




    .specstitle360row1{
        display: grid;
    }

    .specstitle360row2{
        display: grid;
    }

    .specstxt360row1{
        display: grid;
    }

    .specstxt360row2{
        display: grid;
    }




    .check{
        display: none;
    }

    #linhacheck{
        display: none;
    }

    .check360{
        display: grid;
    }

    .otherproducts{
        display: none;
    }

    .otherproductstitle{
        display: none;
    }

    .otherproductsprice{
        display: none;
    }

    .otherproducts3601{
        display: grid;
    }

    .otherproductstitle3601{
        display: grid;
    }

    .otherproductsprice3601{
        display: grid;
    }

    .otherproducts3602{
        display: grid;
    }

    .otherproductstitle3602{
        display: grid;
    }

    .otherproductsprice3602{
        display: grid;
    }
}












/* ----------------------------------------------------- */

ul img ::before{
  position: relative;
}

ul img::after{
  position: absolute;

}

ul img:hover{
  transform: scale(1.1, 1.1);
  transition: transform 0.1s ease; 
}



ol img ::before{
  position: relative;
}

option img::after{
  position: absolute;

}

ol img:hover{
  transform: scale(0.9);
  transition: transform 0.3s ease; 
}





@keyframes appear{
    from{
        opacity: 0;
        scale: 0.5;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}



.interestimgs{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.interestimg360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.valuesimgs{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.valuesimgs360um{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.valuesimgs360dois{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.valuesimgs360tres{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.valuesimgs360quatro{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actionimg{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actionimg360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.display{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.display360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.thumbnail{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}

.thumbnail360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}

.solidsvg{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.gradientsvg{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}

.solidsvg360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.gradientsvg360{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}

.otherproducts{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.otherproducts3601{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.otherproducts3602{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}












@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.welcome{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.explore{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.interesttxt360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria1{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria2{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria4{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria5{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeriatxt1{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeriatxt2{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3601{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3602{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3603{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3604{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria3605{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria360txt1{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.galeria360txt2{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actiontitle{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actionproduct{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actiontxt{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actiontitle360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actionproduct360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#actiontxt360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}


#valuestitle{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#valuestitle360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}



.copustitulo{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstitle{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstxt{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstitle360row1{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstxt360row1{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstitle360row2{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.specstxt360row2{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}



#price{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#tax{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#solid{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#gradient{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#solid360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

#gradient360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.check{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.check360{
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}