html, body{
margin:0 !important;
padding:0 !important;
font-family: "Poppins", sans-serif;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100vh;
background:#FFFFFF !important;
color:#221C15 !important;
}
a{
text-decoration: none !important;
transition:all 0.3s linear;
}
ul{
margin:0 !important;
padding:0 !important;
}
ul li{
padding:0;
margin:0;
list-style: none;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select, textarea{
outline: 0 !important;
border:0;
text-decoration: none;
transition:all 0.2s linear;
}
.container{
max-width:1200px !important;
width:100% !important;
position:relative;
z-index:3;
}
header{
position: fixed;
width: 100%;
background-color: #000;
top:0;
left: 0;
z-index: 99;
}
.content-header{
transition: all .3s linear;
padding: 30px 0;
}
.content-header .logo{
max-width: 200px;
transition: all .3s linear;
}
a.btn-topo{
background: #171717;
color: #fff;
height: 46px;
border-radius: 30px;
width: 290px;
margin-right: 20px;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.4px;
transition: all .3s linear;
}
a.btn-topo:hover{
transform: scale(1.03);
box-shadow: 0 0 20px rgb(255,255,255,.6);
}
a.btn-topo.btn-two{
margin-right: 0;
width: 230px;
}
#topo{
position: relative;
height: 100vh;
overflow: hidden;
}
#topo img{
width: 100%;
height: 100%;
object-fit: cover;
}
#tarja{
background-color: #000;
padding: 80px 0;
position: relative;
}
#tarja h2{
text-align: center;
font: normal normal 200 50px/70px Poppins;
letter-spacing: 4px;
color: #FFFFFF;
text-transform: uppercase;
max-width: 770px;
margin: 0 auto 0;
}
#tarja .pin{
width: 60px;
height: 60px;
background: #F9F9F9 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #2B282829;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: -30px;
z-index: 3;
}
#lojas{
position: relative;
background-color: #F9F9F9;
padding: 100px 0 50px;
}
.lojas .loja{
width: 33.3333%;
padding: 0 15px 30px;
}
a.btn-whats{
background: #000;
border-radius: 38px;
height: 52px;
transition: all .3s linear;
font: normal normal 300 20px/22px Poppins;
letter-spacing: 0px;
color: #FFF;
width: 260px;
padding-left: 20px;
margin: 0 auto 10px;
}
a.btn-whats .icone{
display: flex;
align-items: center;
justify-content: center;
background: #171717;
border-radius: 50%;
width: 52px;
height: 52px;
position: absolute;
left: 0;
top: 0;
padding: 10px 10px 12px;
}
a.btn-whats:hover{
transform: scale(1.03);
box-shadow: 0 0 15px rgb(13,13,13,.7);
}
.lojas .loja .content-loja h3{
text-align: center;
font: normal normal 700 20px/22px Poppins;
letter-spacing: 0px;
color: #000000;
margin: 0 0 2px;
}
.lojas .loja .content-loja p{
text-align: center;
font: normal normal 300 18px/22px Poppins;
letter-spacing: 0px;
color: #000000;
}
.galeria .image{
width: 33.3333%;
position: relative;
}
.galeria .image a{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.galeria .image a:before{
content:"";
width: 100%;
height: 100%;
background-color: rgb(13,13,13,.3);
opacity: 1;
visibility: visible;
transition: all .3s linear;
position: absolute;
top:0;
left: 0;
}
.galeria .image a:hover:before{
opacity: 0;
visibility: hidden;
}
footer{
background-color: #000;
padding: 80px 0 70px;
}
.content-footer .logo-rodape{
max-width: 190px;
}
.content-footer .sociais ul li a{
width: 42px;
height: 42px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #F9F9F9;
color:#000;
font-size: 22px;
transition: all .3s linear;
}
.content-footer .sociais ul li a:hover{
transform: scale(1.03);
}
.content-footer .sociais ul li:not(:last-child) a{
margin-right:12px;
}
.content-footer{
max-width: 430px;
margin: 0 auto;
}

@media(max-width:992px){
.content-header .logo {
max-width: 160px;
transition: all .3s linear;
margin: 0 auto 20px;
}
.botoes{
width: 100%;
justify-content: center !important;
}
a.btn-topo{
width: 100%;
max-width: 360px;
margin:0 auto 20px;
}
a.btn-topo.btn-two{
width: 100%;
max-width: 360px;
margin:0 auto;
}
#tarja h2 {
text-align: center;
font: normal normal 200 27px/42px Poppins;
letter-spacing: 2px;
color: #FFFFFF;
text-transform: uppercase;
max-width: 360px;
margin: 0 auto 0;
}
#tarja .pin{
width: 50px;
height: 50px;
bottom: -25px;
}
#tarja{
padding: 60px 0;
}
.lojas .loja{
width: 100%;
max-width: 380px;
margin:0 auto 0;
}
#lojas {
padding: 80px 0 20px;
}
.galeria .image {
width: 100%;
position: relative;
}
.content-footer .sociais{
width: 100%;
display: flex;
justify-content: center;
}
.content-footer .logo-rodape{
max-width: 160px;
margin: 0 auto 40px;
}
.content-footer .sociais ul li a {
width: 38px;
height: 38px;
font-size: 20px;
}




}