#banner {
height: 38.2vw;
background-color: var(--principal);
background-image: url(//fiibo.com.br/wp-content/themes/saude/bem-estar/fiibo-ciranda-banner.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 5% 0%;
border-bottom-right-radius: 32% 81%;
z-index: 0;
}
#banner .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 80%;
margin: 0 auto;
height: 100%;
}
#banner .dir {
width: 21%;
height: 100%;
position: relative;
}
#banner .dir .imagem {
position: absolute;
bottom: 20%;
right: 61%;
z-index: 2;
width: 100%;
}
#banner .esq {
color: #fff;
width: 50%;
padding: 0;
}
#banner .esq .titulo {
font-size: 2.5vw;
line-height: 3vw;
}
#banner .esq .texto {
font-size: .95vw;
line-height: 1.5vw;
padding: 0 7vw 0 0;
font-weight: 400;
margin: 0 0 2vw 0;
}
.box-conteudo {
margin: -11.8vw auto 150px;
}
#faq-pre {
text-align:center;
}
#faq-pre ul {
margin:15px 0px 30px 0px !important;
}
#filterInput {
width: 80%;
text-align: center;
padding: 16px 12%;
border: 2px solid #d9d9d9;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
margin: 50px 0px 5px 0px;
font-size: 18px;
color: #000;
}
#filterInput::placeholder {
color: #000;
}
#faq-title {
margin: 0;
line-height: 38px;
color: var(--principal);
letter-spacing: 0.02em;
font-weight: 700;
font-size:41px;
text-align:center;
margin:60px 0px 0px 0px;
}	
#cat-container ul {
display:none !important;
list-style:none !important;
width:100% !important;
text-align:center !important;
position:relative !important;
display:block !important;
}
#cat-container ul li {
display:inline-block;
width:auto;
}
#cat-container ul li a svg {
width: 30px;
margin: 0 12px 0 0;
min-width: 30px;
}
#cat-container ul li a.active {
color:#fff;
background-color: var(--principal);
}
#cat-container ul li a {
cursor:pointer;
color:var(--principal);
border: 2px solid var(--principal);
border-radius: 50px;
padding: 10px 26px;
font-size: 16px;
font-weight: 500;
transition: .3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#cat-container ul li a:hover {
background-color:var(--principal);
color: #fff;
transition: .3s;
}
#cat-container ul .cat-item::before {
content: "" !important;
width:0px !important;
padding:0px !important;
margin:0px !important;
display:none !important;
}
#cat-container ul .li_cat_12 {
margin-right: 20px;
}
#nothing_found {
display:none;
width:100%;
text-align:center;
padding:60px 0px;
border-top:1px dashed #CCC;
}
.answer {
position: relative;
display: block;
width: 100%;
background: #fff;
display: none;
padding: 10px !important;
font-size: 14px !important;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.answer * {
font-size:15px !important;	
}
.answer b,
.answer strong {
color:#333;
}
.answer p {
margin:0px !important;	
}
.answer ol {
margin:0px 0px 0px 16px !important;
padding:0px !important;
counter-reset: item !important;
list-style-type: decimal-leading-zero !important;
}
.answer ol li::before {
content: counter(item, decimal-leading-zero) "."; 
counter-increment: item !important;
direction: ltr;
width: 1em;
margin-right: 1em; 
}
.answer ol li {
border:none !important;
margin-bottom:10px !important;
}
#faq-container {
position:relative;
display:block;
width:100%;
margin:0px 0px 60px 0px;
padding:0px !important;
list-style-type: none !important;
list-style: none !important;
}
#faq-container li {
list-style:none;
position:relative;
display:block;
width:100%;
border:none;
margin:0px;
padding:0px;
border-bottom:1px solid #CCCCCC;
}
#faq-container .question::before {
content: "" !important;
width:0px !important;
padding:0px !important;
margin:0px !important;
display:none !important;
}
#faq-container li a {
position:relative;
display:inline-block;
width:100%;
margin:0px !important;
padding:20px 20px 20px 45px;
color:#3d3d3d;
font-weight:500;
line-height: 22px;
cursor:pointer;
}
#faq-container li a #Camada_1 {
color: var(--principal);
width:30px;
height:auto;
position: absolute;
left: 0;
top: 25%;
}
#faq-container li a #Modo_de_isolamento {
width: 17px;
height: 17px;
transform: rotate(90deg);
color: #e92044;
position: absolute;
right: 0;
top: 35%;
}
#faq-container li.active a #Modo_de_isolamento {
transform: rotate(270deg);
}
.conteudo ul li, .conteudo ol li {
line-height: 30px;
}
.box-search {
position: relative;
}
.box-search svg {
color: var(--principal);
width: 25px;
position: absolute;
top: 67px;
right: 13%;
} #modal_fale_conosco select {
background:#FFF;
border: 1px solid #CBD5E0;
font-size: 14px;
color: #1A202C;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:11px 8px 10px 8px;
}
#modal_fale_conosco_container {
position:fixed;
top:100px;
width:450px;
height:auto;
background:#FFF;
margin-left:50%;
left:-225px;
z-index:999;
padding:22px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
display:none;
}
#modal_fale_conosco_container svg {
width: 16px;
color: var(--principal);
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
#modal_fale_conosco_container input,
#modal_fale_conosco_container select {
width:100%;
margin-bottom:10px;
}
#faleConosco_overflow {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
background:#000;
z-index:998;
opacity:0.8;
display:none;
}
#modal_fale_conosco {
margin: 12px 0 0 0;
}
#modal_fale_conosco .btn-send {
border: 2px solid var(--principal);
color: #fff;
border-radius: 50px;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
font-size: 14px;
transition: .3s;
position: relative;
cursor: pointer;
background-color: transparent;
}
#modal_fale_conosco .btn-send .bg_color {
background-color: var(--principal);
}
#modal_fale_conosco .btn-send .round {
background-color: var(--azul);
}
#modal_fale_conosco .btn-send:hover {
border-color: var(--azul);
}
#modal_fale_conosco_container .texto {
display: block;
margin: 0 0 10px 0;
font-weight: 500;
text-align: center;
}
#modal_fale_conosco_container .titulo {
font-size: 26px;
font-weight: 600;
text-align: center;
margin: 0 0 2px 0;
}
#modal_fale_conosco_container .aviso {
font-size: 12px;
color: red;
font-weight: 400;
text-align: center;
}
#modal_fale_conosco .control {
width: 100%;
margin: 0 0 15px 0;
}
#modal_fale_conosco input, #modal_fale_conosco textarea {
background: #FFF;
border: 1px solid #CBD5E0;
font-size: 14px;
color: #1A202C;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px;
resize: none;
}
#modal_fale_conosco textarea {
height: 100px;
margin: 0!important;
}
#modal_fale_conosco .error {
border-color: red;
}
#modal_fale_conosco .form_error_general {
font-size: 12px;
color: red;
height: 15px;
margin: 10px 0;
text-align: center;
}
#modal_fale_conosco label {
font-size: 14px;
font-weight: 500;
margin: 0 0 4px 0;
display: block;
}
.box-conteudo .btn-voltar {
padding: 16px 2%;
width: 605px;
}
.video_fiibo {
display: block;
margin: 35px auto 25px;
}
@media only screen and (max-width:1410px) {
#modal_fale_conosco_container {
top: 20px;
}
#modal_fale_conosco .control {
margin: 0 0 10px 0;
}
.box-conteudo .btn-voltar {
width: 495px;
}
}
@media only screen and (max-width: 1400px) {
#banner .esq .texto {
font-size: 14px;
line-height: 20px;
font-weight: 400;
margin: 0 0 30px 0;
}
#banner .esq .titulo {
font-size: 33px;
line-height: 36px;
}
}
@media only screen and (max-width: 1335px) {
#banner .esq .titulo {
font-size: 30px;
}
}
@media only screen and (max-width: 1280px) {
.box-conteudo .btn-voltar {
width: 388px;
}
}
@media only screen and (max-width: 1200px) {
#banner .esq .titulo {
font-size: 28px;
line-height: 33px;
}
#banner .esq .texto {
margin: 0 0 18px 0;
}
}
@media only screen and (max-width: 1130px) {
#banner .esq .titulo {
margin: 12px 0;
}
#banner .esq .texto {
font-size: 12px;
line-height: 18px;
}
}
@media only screen and (max-width: 1024px) {
#banner {
height: 52vw;
border-bottom-right-radius: 32% 55%;
min-height: 435px;
}
#banner .esq {
margin: 10vw 0 0 0;
padding: 0 2vw 0 0;
}
#banner .container {
width: 90%;
}
#banner .dir .btn-play {
position: absolute;
bottom: 37%;
}
}
@media (max-width: 912px) {
#filterInput {
width:80%;
}
}
@media only screen and (max-width:900px) {
#modal_fale_conosco_container {
top: 5px;
margin-left: 0;
left: 0;
width: 100%;
}
.video_fiibo {
width: 100%;
height: 44vw;
}
}
@media only screen and (max-width: 880px) {
#banner .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#banner .esq {
margin: 110px 0 0 0;
padding: 0;
text-align: center;
}
#banner .esq .texto {
padding: 0;
}
#banner .dir .imagem {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
bottom: initial;
right: initial;
}
.box-conteudo {
margin: -21px auto 150px;
}
#banner .dir {
width: 150px;
}
#cat-container ul li {
display: block;
width: 80%;
margin: 0 auto 20px;
}
#cat-container ul li a {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 22px;
}
#cat-container ul .li_cat_12 {
margin-right: auto;
}
}
@media (max-width: 600px) {
#filterInput {
width:100%;
font-size: 16px;
margin: 20px 0px 5px 0px;
}
#cat-container ul .li_cat_12,
#cat-container ul .li_cat_13 {
border:none;
width:100%;
padding:0px;
}
.answer * {
font-size:14px !important;	
}
#banner .esq {
width: 90%;
}
.box-search svg {
width: 18px;
top: 40px;
right: 5%;
}
#faq-title {
font-size: 36px;
margin: 30px 0px 0px 0px;
}
.box-conteudo .btn-voltar {
padding: 12px 20px;
width: 260px;
}
#faq-title {
font-size: 32px;
}
}
@media (max-width: 500px) {
.video_fiibo {
height: 42vw;
}
}
@media (max-width: 380px) {
#faq-title {
font-size: 30px;
}
}
@media (max-width: 350px) {
#cat-container ul li a {
font-size: 12px;
line-height: 17px;
}
.box-conteudo .btn-voltar {
width: 90%;
font-size: 12px;
}
}
@media (max-width: 285px) {
#banner .esq .titulo {
font-size: 26px;
}
}