@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { margin: 0; padding: 0; border:0; text-decoration:none;box-sizing: border-box; list-style: none;}
/* Basic */
body {font: 62.5%; font-family: 'Rubik', sans-serif; font-weight:400; font-size:16px; }
.clear{clear:both;}

.whatsbt{ position: fixed; z-index: 999; bottom: 30px; right: 30px; }

bartop{width: 100%; padding: 15px; display: block; color: #FFF; background: #553939; text-align: center; font-size: 24px; letter-spacing: 20px; }
@media screen and (max-width: 1500px){
bartop{ font-size: 24px; letter-spacing: 10px; }
}
@media screen and (max-width: 1100px){
bartop{ font-size: 24px; letter-spacing: 5px; }
}
@media screen and (max-width: 850px){
bartop{ font-size: 20px; letter-spacing: 0px; }
}
@media screen and (max-width: 600px){
bartop{ font-size: 16px; letter-spacing: 0px; }
}

topo{width:100%; display: block; text-align: center; background: url("../imagens/bg_topo.jpg") top center no-repeat, #cfb191; }
topo meio{max-width:1600px; width: 100%; margin:0 auto; display: inline-block; text-align: right;}
topo meio img{max-width:100%; }
topo box1,
topo box2,
topo box3,
topo box4{ width: 50%; text-align: center; padding: 30px 10px; display: inline-block; vertical-align: middle;}
topo box2 h2{ font-size: 36px; color: #FFF; font-weight: 400; letter-spacing: 15px; text-align: left;}
topo box3 p{ padding: 100px 0 0; font-size: 20px; }
topo box3 strong{ font-size: 60px; font-weight: 500; display: inline-block; padding: 15px 5px; vertical-align: middle; color: #FFF; }
topo box3 b{  display: inline-block; vertical-align: middle; color: #FFF; padding: 5px; }
topo box4{ text-align: right;}
topo box4 .bt{ padding: 12px; display: inline-block; font-size: 16px; background: #f4b153; font-weight: bold; color: #553939;  margin: 15px auto;max-width: 100%; width: 500px; text-align: center;}
topo box4 form{ padding: 25px; max-width: 100%; width: 500px; background:hsla(0,20%,28%,0.88); text-align: left; color: #FFF; margin: 0 auto; display: inline-block; }
topo box4 form input{ padding: 12px; width: 100%; margin-bottom: 15px; font-size: 16px; }
topo box4 form button{ padding: 12px; width: 100%; margin-bottom: 15px; font-size: 16px; background: #f4b153; font-weight: bold; color: #553939; margin: 15px 0;}
topo box4 form .efeito{ height: 60px; width: 50%; background: #bba389; margin: -65px auto 0;}
@media screen and (max-width: 1100px){
topo box1,
topo box2,
topo box3,
topo box4{ width: 100%; text-align: center; padding: 20px 10px; text-align: center;}
topo box2 h2{ text-align: center;}
topo box4 form{ padding: 25px; max-width: 100%; width: 500px; background:hsla(0,20%,28%,0.88); text-align: left; color: #FFF; margin: 0 auto; display: inline-block; }
}
@media screen and (max-width: 800px){
topo box2 h2{ font-size: 26px; }
topo box3 strong{ font-size: 40px; }
}
@media screen and (max-width: 700px){
topo box2 h2{ font-size: 20px; }
topo box3 strong{ font-size: 30px; }
}


familia{width:100%; display: block; text-align: center; background: url("../imagens/bg_familia.jpg") top center; }
familia box1{padding: 100px 0; text-align: left; width: 40%; float: left; }
familia box2{padding: 170px 30px; text-align: left; width: 40%; float: right; }
familia box3{padding-left: 100px; text-align: left; width: 30%; float: left; }
familia box4{text-align: right; padding: 50px; width: 30%; float: right;}
familia box1 img,
familia box2 img,
familia box3 img,
familia box4 img{max-width: 100%; z-index: 999; position: relative;}
familia box5{ width: 100%; text-align: center; padding: 0; display: inline-block; vertical-align: middle; background: #3f584e;}
familia box5 img{ width: 890px; max-width: 50%; margin-top: -600px; }

@media screen and (max-width: 1100px){
familia box1,
familia box2,
familia box3,
familia box4{padding: 20px; text-align: center; width: 100%; display: inline-block; float: none; margin: 0;}
familia box5{ background:none;text-align: center; width: 100%; display: inline-block; float: none; margin: 0;}
familia box1 img,
familia box2 img,
familia box3 img,
familia box4 img{max-width: 100%; display: block; padding: 20px 40px; margin: 0; }
familia box5 img{ max-width: 90%; width: auto; margin: 0; padding: 0;}
}


galeria{width:100%; display: block; text-align: center; background: url("../imagens/bg_galeria.jpg") top center; }
galeria img{max-width:100%; max-height: 100%; display: inline-block; }
galeria box1,
galeria box2,
galeria box3,
galeria box4{width:100%; display: block;}
galeria box1 .b1{ vertical-align: top; float: left; z-index: 999; position: relative; max-width: 30%;}
galeria box1 .b2{ vertical-align: top; height: 215px; float: right; max-width: 30%; margin: -60px 7% 0 0; z-index: 999; position: relative;}
galeria box2 .b1{ display: inline-block; vertical-align: top; height: 215px; max-width: 25%; padding: 20px;}
galeria box2 .b2{ display: inline-block; vertical-align: top; height: 430px; max-width: 50%; margin: -160px auto 0;}
galeria box2 .b3{ display: inline-block; vertical-align: top; height: 300px; max-width: 25%; padding: 20px; }
galeria box3 .b1{ display: inline-block; vertical-align: top; height: 250px; max-width: 33%; padding: 0 20px; }
galeria box3 .b2{ display: inline-block; vertical-align: top; height: 350px; max-width: 33%; padding: 0 20px; }
galeria box3 .b3{ display: inline-block; vertical-align: top; max-width: 33%; padding: 20px; }
galeria box4{ text-align: left;}
galeria box4 .b1{ display: inline-block; vertical-align: top; padding: 0 0 0 50px; margin-top: -60px;  }
@media screen and (max-width: 1100px){
galeria box1 .b1,
galeria box1 .b2,
galeria box2 .b1,
galeria box2 .b2,
galeria box2 .b3,
galeria box3 .b1,
galeria box3 .b2,
galeria box3 .b3{ float: none; width: 100%; max-width: 100%; height: auto; padding: 20px; margin: 0; text-align: center;}
galeria box4 .b1{ display: inline-block; vertical-align: top; padding: 0 0 0 50px; margin-top: 0;  }

}

plantas{width:100%; display: block; text-align: center; background: #553939;}
plantas box1{width:100%; display: block; text-align: center; padding: 50px 0;}
plantas box2{width:30%; display: inline-block; text-align: left; vertical-align: top;}
plantas box1 img,
plantas box2 img{max-width:100%; display: inline-block;}
plantas box2 img.dif{padding: 30px;}
plantas box3{width:70%; display: inline-block; text-align: center; vertical-align: top;}
plantas box3 .car{width:100%; display: inline-block; height: 600px; }
.slider { width: 90%; margin: 0 auto; }
.slick-slide { margin: 0px 20px; }
.slick-slide img { width: 100%; }
.slick-prev:before,
.slick-next:before { color: black; }
.slick-slide { transition: all ease-in-out .3s; opacity: .2; }
.slick-active { opacity: .5; }
.slick-current { opacity: 1; }
@media screen and (max-width: 1000px){
plantas box2{width:100%; display: inline-block; text-align: center; vertical-align: top;}
plantas box3{width:100%; display: inline-block; text-align: center; vertical-align: top;}

}

garagem{width:100%; display: block; text-align: center;}
garagem img{max-width:100%; display: block;}
garagem .img2{ float: right; margin: -400px 100px 0 0; z-index: 999; position: relative;}
@media screen and (max-width: 1000px){
garagem .img2{ float: none; margin:0; z-index: 999; position: relative; margin: 20px auto;}

}

rodape{width:100%; display: block; text-align: center; background: url("../imagens/bg_rodape.jpg") top center;}
rodape box1{width:100%; display: block; text-align: center; padding: 0 0 50px;}
rodape box4{width:100%; display: block; text-align: left; padding: 50px;}
rodape box2{width:50%; display: inline-block; text-align: center; vertical-align: top;}
rodape box3{width:50%; display: inline-block; text-align: center; vertical-align: top;}
rodape img{max-width:100%; display: inline-block;}
rodape box2 img{display: block; padding: 20px; margin: 0 auto;}
rodape box3 img{display: block; padding: 20px; margin: 0 auto;}
rodape box3 form{ padding: 25px; max-width: 100%; width: 500px; text-align: left; color: #553939; margin: 0 auto; display: inline-block; }
rodape box3 form input{ padding: 12px; width: 100%; margin-bottom: 15px; font-size: 16px; background: #bba389; }
rodape box3 form button{ padding: 12px; width: 100%; margin-bottom: 15px; font-size: 16px; background: #553939; font-weight: bold; color: #FFF; margin: 15px 0;}
rodape box3 form .efeito{ height: 60px; width: 50%; background: #bba389; margin: -65px auto 0;}
rodape box5{ background: #495f55; width:100%; display: block; text-align: center;}
rodape box5 sbox1,
rodape box5 sbox2,
rodape box5 sbox3{ padding: 20px; display: inline-block; vertical-align: middle; width: 33.33%; color: #FFF; font-size: 20px;}
rodape box5 sbox2 p{ font-size: 24px;}
rodape box5 sbox2 a{ font-size: 24px; color: #FFF;}
rodape box5 sbox2 a span{ font-size: 30px; color: #FFF;}
@media screen and (max-width: 1000px){
rodape box2{width:100%; }
rodape box3{width:100%; }
rodape box4{text-align: center; padding: 30px;}
rodape box5 sbox1,
rodape box5 sbox2,
rodape box5 sbox3{ width: 100%;}

}