/* ANIMAÇÃO */
/* scroll suave */
html{
scroll-behavior: smooth;
}
/* scroll suave fim*/
.fade{
animation: fade 5s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
.fade2{
animation: fade2 2s;
}
@keyframes fade2 {
0% {
opacity: 0;
transform: translateY(25%);
}
100% {
opacity: 100%;
transform: translateY(0);
}
}
/* ANIMAÇÃO FIM */
/* GERAL */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
a{
text-decoration: none;
}
a:hover{
text-shadow: 0 0 13px #fff;
cursor: pointer;
transition: .5s;
}
.btn{
width: 140px;
padding: 10px 0;
background-color: #ff5200;
color: #fff;
border: solid 1px #fff;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
}
.whats{
position: fixed;
bottom: 5px;
background-color: #0b314bd0;
border-radius: 15px 15px 15px 0;
padding: 7px;
filter: drop-shadow(2px 2px 3px #111);
cursor: pointer;
z-index: 10000;
}
.whats img{
width: 130px;
height: auto;
}
.whats img:hover{
width: 150px;
height: auto;
filter: drop-shadow(0 0 7px #fff);
transition: .5s;
}
.btn:hover{
box-shadow: 0 0 13px #fff;
transition: .5s;
}
.paddingt100px{
padding-top: 100px;
}
.paddingb100px{
padding-bottom: 100px;
}
.paddingb50px{
padding-bottom: 50px;
}
.marginb50px{
margin-bottom: 50px;
}
.marginb100px{
margin-bottom: 100px;
}
.margint70px{
margin-top: 70px;
}
.marginb30px{
margin-bottom: 30px;
}
.border_top{
border-top: solid 1px #d6bea4;
}
.margint30px{
margin-top: 30px;
}
.centraliza{
text-align: center;
}
.iconep img{
height: auto;
width: 12px;
}
.bgbalao{
background-image: url("../imagens/balao-fala.png");
background-repeat: repeat;
background-attachment: fixed;
}
/* GERAL FIM */
/* FONTES */
.font_menu{
font-size: 14px;
}
.font_titulo{
font-size: 20px;
}
.font_text{
font-size: 14px;
}
.font_text_12{
font-size: 12px;
}
.font_text_10{
font-size: 10px;
}
.font_cor_bege{
color:#d6bea4;
}
.font_cor_branca{
color:#fff;
}
.font_cor_azul{
color:#0b314b;
}
.width_text_200{
font-weight: 200;
}
.titulo{
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
font-size:28px;
}
.titulop{
font-size:18px;
font-weight: 600;
background-color: #c2c1c1;
}
.titulo_2{
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
font-size:28px;
}
.texto_1{
font-size:16px;
font-weight: 200;
color:rgb(73, 73, 73);
}
/* FONTES FIM */
/* IMAGENS */
.imgicone{
width: 70px;
height: 70px;
align-self: center;
}
.imgicone_2{
width: 15px;
height: auto;
align-self: center;
}
.imgvetor img{
width: 200px;
height: 280px;
}
/* IMAGENS FIM */
/* DIVS */
.centralizay{
display: flex;
justify-items: center;
}
.pos_absolut{
position: absolute;
width: 100%;
}
.barra_sup{
display: flex;
flex-wrap: wrap;
align-self: center;
width: 100%;
background-color: #0b314be7;
padding: 7px 0;
}
.barra_sup .logo{
width: 20%;
text-align: end;
}
.barra_sup .logo img{
width: 80%;
}
.barra_sup .menu{
display: flex;
width: 65%;
color: #fff;
align-self: center;
justify-content:space-evenly;
margin-left: 15%;
}
.barra_sup .menu a, a:visited{
color: #fff;
}
.barra_sup .contat{
width: 15%;
align-self: center;
color: #fff;
font-size: 12px;
}
.borda{
border: solid 1px #fff;
border-radius: 15px 15px 15px 0;
padding: 7px;
}
.barra_sup .rede_soc{
width: 5%;
align-self: center;
}
.barra_sup .rede_soc img{
width: 25px;
height: 25px;
}
.apresentacao{
display: flex;
background: linear-gradient(
rgba(2, 2, 43, 0.5),rgba(2, 2, 43, 0.5)
), url('../imagens/condominio.jpg');
background-size: cover;
height: 600px;
flex-direction: column;
justify-content: center;
padding-left: 5%;
}
.apresentacao .tit_inicial{
font-size: 40px;
color: #fff;
font-weight: 800;
text-shadow: -2px 1px 3px rgb(5, 5, 5);
}
.apresentacao .sub_tit{
font-size: 25px;
color: #fff;
font-weight: 400;
}
.conteudo_a{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content:space-evenly;
width: 100%;
height: auto;
margin: 40px 0;
padding-bottom: 15px;
padding-top: 15px;
}
.bloco100{
display: flex;
width: 100%;
height: 30px;
text-align: center;
justify-content: center;
}
.bloco40{
display: flex;
flex-direction: column;
width: 400px;
height: 290px;
background-color: #ebe1d7;
padding: 40px 15px 0 15px;
border-radius: 15px 0 15px 0;
}
.bloco40b{
display: flex;
flex-direction: column;
width: 400px;
height: 290px;
padding: 40px 15px 0 15px ;
border-radius: 0 15px 0 15px;
}
.bloco40b img{
width: 100%;
}
.bloco70{
display: flex;
flex-direction: column;
width: 70%;
height: auto;
margin-left: 15%;
padding: 4px 0;
}
.conteudo_e{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.conteudo_e img{
width: 100px;
align-items: center;
}
.bloco30{
display: flex;
flex-direction: column;
width: 30%;
height: 290px;
padding: 2px 15px 0 15px ;
border-radius: 7px 7px 130px 130px;
border: solid 1px #0b314b;
filter: drop-shadow(0 2px 7px #777);
background-color: #f0eded;
}
.iconepp{
text-align: end;
}
.iconepp img{
width: 20px;
height: 20px;
}
.barracima img{
width: 100%;
}
.barrabaixo img{
width: 100%;
}
.conteudo_c{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
padding: 70px 0;
background: rgb(222, 222, 223);
margin-top: -7px;
}
.conteudo_b{
margin-top: -70px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
height: 500px;
padding-top: 60px;
background-image:linear-gradient(
rgba(2, 2, 43, 0.5),rgba(2, 2, 43, 0.5)
), url("../imagens/sindico-profissional-rio-de-janeiro.jpg");
background-size: cover;
background-attachment: fixed;
}
.conteudo_b .bloco{
display: flex;
flex-direction: column;
width: 30%;
height: 260px;
padding:3%;
background-color: #0b314bf1;
border-radius: 15px 0 15px 0;
}
.conteudo_d{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 500px;
padding-top: 60px;
background-image:linear-gradient(
rgba(240, 218, 171, 0.5),rgba(240, 218, 171, 0.5)
), url("../imagens/logo-do-cliente-final-quadrada-fundo-transparente2.jpg");
background-attachment: fixed;
background-size: contain;
background-position-x: center;
background-position-y: center;
}
.conteudo_d .bloco_1{
width: 40%;
align-self: center;
}
.conteudo_d .bloco_2{
width: 54%;
padding: 0 3%;
}
.rodape{
display: flex;
padding-top: 30px;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
background-color: #0b314b;
}
.logorod{
display: flex;
width: 100%;
justify-content: center;
}
.logorod img{
width: 150px;
height: auto;
filter: drop-shadow(0 0 2px #111);
}
.contato_rod{
display: flex;
width: 100%;
justify-content: space-evenly;
}
.contato_rod .linha_1{
display: flex;
flex-direction: column;
}
.copyr{
display: flex;
width: 100%;
justify-content: center;
padding: 7px 0;
}
.polit{
width: 100%;
align-items: center;
color:#d6bea4;
}
#depoimentos{
display: flex;
width: 90%;
height: 210px;
margin-left: 5%;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
padding: 40px 0;
}
#depoix{
display: flex;
}
#depoi_item{
width: 250px;
height: 150px;
padding: 15px;
border-radius: 15px;
border: solid 1px #0b314b;
}
#formX{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 90%;
margin-left: 5%;
text-align: center;
margin-bottom: 40px;
}
#formX iframe{
width: 230px;
height: 220px;
border-radius: 15px;
padding-left:7px;
padding-top: 7px;
overflow: hidden;
overflow-x: hidden;
text-align:center;
font-family:verdana;
font-size:12px;
}
.resp{
width: 100%;
text-align: center;
font-size:12px;
font-family: verdana;
}
/* DIVS FIM */
/* POP UP */
/* Unopened lightbox */
.lightbox_politicas {
display: none;
}
/* Opened lightbox */
.lightbox_politicas:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: 2s;
}
/* Lightbox content */
.lightbox_politicas figcaption {
width: 40rem;
height: 500px;
position: relative;
padding: 1.5em;
background-color: #fff;
transition: 2s;
overflow: scroll;
}
/* Close button */
.lightbox_politicas .close {
position: relative;
display: block;
}
.lightbox_politicas .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox overlay */
.lightbox_politicas .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
content: "";
cursor: default;
}
@media screen and (max-width: 769px){
.whats img{
width: 110px;
}
.titulo{
font-size:24px;
}
.titulop{
font-size:22px;
}
.marginb50px{
margin-bottom: 20px;
}
.borda{
border: none;
border-radius: 0;
padding: 0;
}
.barra_sup .logo{
width: 100%;
text-align: center;
padding-bottom: 7px;
}
.barra_sup .logo img{
width: 40%;
margin-bottom: 10px;
}
.barra_sup .menu{
width: 100%;
align-self: center;
padding: 5px 0;
font-size: 12px;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
margin-bottom: 7px;
margin-left: 0;
}
.barra_sup .contat{
display: flex;
width: 100%;
justify-content: center;
}
.apresentacao{
padding-top: 150px;
}
.apresentacao .tit_inicial{
font-size: 26px;
font-weight: 800;
}
.apresentacao .sub_tit{
font-size: 16px;
font-weight: 400;
}
.conteudo_a{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content:space-evenly;
width: 100%;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
padding: 0;
}
.bloco40{
width: 80%;
height: 390px;
padding: 40px 15px 0 15px;
margin: 20px 0;
}
.bloco70{
display: flex;
flex-direction: column;
width: 90%;
height: auto;
margin-left: 5%;
}
.conteudo_b {
margin-top: -20px;
height: 1100px;
background-position-x: -350px;
}
.conteudo_b .bloco{
display: flex;
flex-direction: column;
width: 90%;
height: 260px;
padding:3%;
margin: 20px 0;
}
.conteudo_c{
height: 850px;
}
.conteudo_e img{
width: 100px;
align-items: center;
}
.iconepp img{
width: 20px;
height: 20px;
}
.bloco30{
flex-direction: column;
width: 90%;
height: 300px;
padding: 2px 15px 0 15px ;
margin-top: 40px;
margin-bottom: 40px;
margin-left: 2%;
}
.titulo_2{
font-size: 18px;
}
.conteudo_d{
height: 1200px;
padding-top: 0;
}
.conteudo_d .bloco_1{
width: 90%;
align-self: center;
margin-bottom: 40px;
}
.conteudo_d .bloco_2{
width: 80%;
padding: 0;
margin-left:10%;
}
.logorod img{
width: 100px;
}
.contato_rod{
display: flex;
flex-direction: column;
width: 100%;
justify-content:baseline;
}
.contato_rod span{
margin-bottom: 20px;
padding: 0 10px;
}
.contato_rod .linha_1{
display: flex;
flex-direction: column;
}
.polit{
display: flex;
flex-direction: column;
padding-top: 7px;
}
.rodape{
padding-bottom: 30px;
}
.lightbox_politicas {
display: none;
}
.lightbox_politicas figcaption {
width: 90%;
margin-left: 5%;
}
.lightbox_politicas .close::after {
right: .5rem;
}
}