:root {
--principal: #e92043;
--roxo: #5b42c2;
--azul: #31a4c2;
--amarelo: #ffaa3c;
} @font-face {
font-family: "MarkPro";
src: url(//fiibo.com.br/wp-content/themes/saude/inc/font/MarkPro.ttf);
}
@font-face {
font-family: "MarkPro";
src: url(//fiibo.com.br/wp-content/themes/saude/inc/font/MarkPro-Medium.otf);
font-weight: 500;
}
@font-face {
font-family: "MarkPro";
src: url(//fiibo.com.br/wp-content/themes/saude/inc/font/MarkPro-Bold.otf);
font-weight: 700;
} .btn-effect {
position: relative;
overflow: hidden;
cursor: pointer;
}
.btn-effect .round {
border-radius: 50%;
position: absolute;
top: 5px;
left: 10px;
z-index: -1;
-webkit-animation: scale-down 0.2s forwards;
animation: scale-down 0.2s forwards;
}
.btn-effect.animate .round {
-webkit-animation: scale-up 0.5s forwards;
animation: scale-up 0.5s forwards;
}
.btn-effect .bg_color {
border-radius: 50%;
position: absolute;
top: 5px;
left: 10px;
z-index: -2;
-webkit-transform: scale(600);
-ms-transform: scale(600);
transform: scale(600);
width: 100%;
height: 100%;
}
@-webkit-keyframes scale-up {
to {
-webkit-transform: scale(900);
transform: scale(900);
}
}
@keyframes scale-up {
to {
-webkit-transform: scale(1900);
transform: scale(1900);
}
}
@-webkit-keyframes scale-down {
from {
-webkit-transform: scale(600);
transform: scale(600);
}
to {
ransform: scale(0);
}
}
@keyframes scale-down {
from {
-webkit-transform: scale(600);
transform: scale(600);
}
to {
ransform: scale(0);
}
} body{
font-family: "MarkPro", "sans-serif", Arial;
}
#page,
#primary{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-flex;
display: -ms-flexbox;
}
#masthead{
order:1;
}
#primary{
order:2;
}
#colophon{
order:3;
}
html {
scroll-behavior: smooth;
} #masthead {
height: auto;
background-color: transparent;
position: absolute;
top: 0px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
z-index: 9;
}
#masthead .logo {
width: 22%;
}
#masthead #logo {
width: 157px;
margin: 33px 76px;
}
#masthead .topicos_menu {
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-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
#masthead #menu-principal {
list-style: none;
margin: 0px 289px 0 0;
gap: 3px;
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: end;
-ms-flex-pack: end;
justify-content: flex-end;
border: 1px solid #fff;
width: auto;
background-color: #00000033;
border-radius: 30px;
padding: 0px 14px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
position: relative;
}
#masthead #menu-principal .menu-item a {
color: #fff;
text-decoration: none;
font-weight: 400;
font-size: 18px;
transition: .3s;
cursor: pointer;
position: relative;
}
#masthead #menu-principal .menu-item a:hover{
text-shadow: -0.6px 0 #fff, 0.6px 0 #fff;
}
#masthead #menu-principal .menu-item a:before {
background: #fff;
bottom: -4px;
content: "";
height: 3px;
left: 0;
pointer-events: none;
position: absolute;
transform: scaleX(0);
transform-origin: right;
transition: transform .8s cubic-bezier(.24, .43, .15, .97);
width: 100%;
}
#masthead #menu-principal .menu-item a:hover:before {
transform: scaleX(1);
transform-origin: left;
}
#masthead #menu-principal .menu-item {
padding: 0px;
margin: 0 14px;
line-height: 12px;
}
#masthead #menu-principal .menu-item>a::after{
content: '';
display: block;
height: 13px;
width: 2px;
background-color: #fff;
position: absolute;
top: 1px;
right: -14px;
}
#masthead #menu-principal .menu-item:last-child>a::after {
content: none;
}
#masthead .call-to-action {
display: flex;
gap: 19px;
margin-right: 45px;
position: relative;
z-index: 1;
margin-top: 0px;
}
#masthead .btn {
display: flex;
justify-content: center;
gap: 10px;
text-decoration: none;
border-radius: 50px;
padding: 9px 0px 6px 6px;
font-size: 0.938vw;
width: 9.8vw;
text-align: center;
}
#masthead .btn:first-child{
width: 9.12vw;
}
#masthead .btn:last-child{
color: #000;
border: 2px solid var(--principal);
}
#masthead .btn:last-child:hover{
color: #fff;
}
#masthead .btn-branco .bg_color{
background: white !important;
}
#masthead .btn-meu-fiibo:last-child img {
-webkit-filter: brightness(0) saturate(100%) invert(29%) sepia(55%) saturate(6731%) hue-rotate(336deg) brightness(91%) contrast(100%);
filter: brightness(0) saturate(100%) invert(29%) sepia(55%) saturate(6731%) hue-rotate(336deg) brightness(91%) contrast(100%);
}
#masthead .btn-branco .round{
background: var(--principal) !important;
}
#masthead .btn-ser-fiibo {
border: 2px solid var(--amarelo);
color: #fff;
margin-right: 21px;
font-weight: 500;
}
#masthead .btn-ser-fiibo.btn-effect .round {
background-color: var(--amarelo);
}
#masthead .btn-meu-fiibo-novo {
color: #fff;
font-weight: 700;
border: 2px solid #fff;
}
#masthead .btn-meu-fiibo-novo:hover { transition: .5s;
}
#masthead .btn-meu-fiibo-novo.btn-effect .round {
background-color: var(--principal);
}
#masthead .btn-meu-fiibo-novo.btn-effect .bg_color {
background-color: #fff;
}
#masthead .btn-meu-fiibo {
color: #fff;
font-weight: 700;
border: 2px solid var(--principal);
}
#masthead .btn-meu-fiibo:hover {
color: var(--principal);
transition: .5s;
}
#masthead .btn-meu-fiibo.btn-effect .round {
background-color: #fff;
}
#masthead .btn-meu-fiibo.btn-effect .bg_color {
background-color: var(--principal);
} #masthead.header_fixo {
position: fixed;
top: 0;
height: 80px;
background-color: var(--principal);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 99;
}
#masthead.header_fixo .call-to-action {
margin-top: 0;
}
#masthead.header_fixo #menu-principal {
margin: 0 431px 0 0;
}
#masthead.header_fixo .logo{
height: 62%;
}
#masthead.header_fixo #header-logo, #masthead.header_fixo  #header-logo #logo{
width: 92px;
}
#masthead.header_fixo #header-logo #logo{
margin: 0 43px;
}
#masthead.header_fixo .btn-meu-fiibo {
border: 2px solid #fff;
} #colophon {
height: auto;
background-color: var(--principal);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
background-image: url(//fiibo.com.br/wp-content/themes/saude/bem-estar/fiibo-background-footer.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 80px;
}
#colophon .call-to-action {
margin-right: 45px;
position: relative;
z-index: 1;
margin-top: -32px;
}
#colophon .btn {
text-decoration: none;
border-radius: 50px;
padding: 14px 0 11px;
font-size: 17px;
width: 196px;
display: block;
text-align: center;
letter-spacing: 0.04em;
}
#colophon .btn-ser-fiibo {
border: 2px solid var(--amarelo);
color: #fff;
margin: 20px 0;
font-weight: 500;
}
#colophon .btn-ser-fiibo.btn-effect .round {
background-color: var(--amarelo);
}
#colophon .btn-meu-fiibo {
color: var(--principal);
font-weight: 700;
border: 2px solid #fff;
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;
position: relative;
background-color: #fff;
}
#colophon .btn-meu-fiibo:hover {
color: #fff;
background-color: var(--azul);
border-color: var(--azul);
transition: .5s;
}
#colophon .btn-meu-fiibo.btn-effect .round {
background-color: var(--azul);
}
#colophon .btn-meu-fiibo.btn-effect .bg_color {
background-color: #fff;
}
#colophon .top {
width: 90%;
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-pack: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
margin: 0 0 40px 0;
gap: 30px;
}
#colophon .top .box{
width: 15%;
}
#colophon .top .box.box-1{
width: 25%;
}
#colophon .top .box.box-2,
#colophon .top .box.box-3{
max-width: 220px;
}
#colophon .top .box.box-4,
#colophon .top .box.box-5{
max-width: 150px;
}
#colophon .top .box-1 .logo {
margin: 12px 0 35px 0;
}
#colophon .top .box-1 .texto {
color: #fff;
padding: 0 9% 0 0;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.02em;
margin: 0 0 100px 0;
}
#colophon .top .box-1 .midias-sociais a {
text-decoration: none;
margin: 0 8px 0 0;
}
#colophon .top .box-1 .midias-sociais svg {
color: #fff;
width: 40px;
transition: .3;
}
#colophon .top .box-1 .midias-sociais svg:hover {
opacity: .9;
transition: .3;
}
#colophon .top .box-2 ul {
list-style: none;
padding: 0;
}
#colophon .top .box-2 ul li {
margin: 8px 0;
}
#colophon .top .box-2 ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
font-weight: 500;
transition: .3s;
}
#colophon .top .box-2 ul li a:hover {
text-decoration: underline;
transition: .3s;
}
#colophon .top .box .texto-app {
color: #fff;
font-size: 26px;
font-weight: 700;
text-align: center;
margin-bottom: 1em;
}
#colophon .top .box-3 a {
margin: 0 0 15px 0;
display: block;
}
#colophon .top .box-3 {
margin: -18px 0 0 0;
}
#colophon .top .box-3 img{
max-width: 220px;
}
#colophon .top .box-4 {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#colophon .top .box-4 #selo_cubo,
#colophon .top .box-4 #selo_sup,
#colophon .top .box-4 #selo_eretz {
width: 200px;
margin: 0 auto;
}
#colophon .top .box-4 #selo_sup,
#colophon .top .box-4 #selo_eretz {
margin-bottom: 25px;
}
#colophon .bottom,
#colophon hr {
width: 95%;
}
#colophon .bottom {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-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;
margin: 0 0 24px;
}
#colophon hr {
background-color: #ed4d69;
}
#colophon .bottom a{
color: #fff;
text-decoration: none;
}
#colophon .bottom .copyright {
font-size: 14px;
}
#colophon .logo-exent {
width: 178px;
margin: 0 86px 0 0;
} .breadcrumb {
height: 40px;
width: 100%;
}
.breadcrumb .nav {
height: 100%;
margin: 0 auto;
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;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.breadcrumb, .breadcrumb a {
color: #000;
font-size: 14px;
letter-spacing: 0.05em;
text-decoration: none;
font-weight: 300;
transition: .3s;
}
.breadcrumb .current-item {
color: var(--principal);
}
.breadcrumb a:hover {
color: var(--roxo);
transition: .3s;
}
.breadcrumb .dots_breadcrumb{
color: var(--principal);
margin: 0 8px;
font-size: 8px;
}
.breadcrumb .home_icon {
margin: -5px 10px 0 0;
width: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumb .home_icon img{
width: 100%;
}
.breadcrumb span {
line-height: 20px;
}
.breadcrumb .home {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} #general_form_modal 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;
}
#general_form_modal_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;
}
#general_form_modal_container svg {
width: 16px;
color: var(--principal);
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
#general_form_modal_container input,
#general_form_modal_container select {
width:100%;
margin-bottom:10px;
}
#general_form_overflow {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
background:#000;
z-index:998;
opacity:0.8;
display:none;
}
#general_form_modal {
margin: 12px 0 0 0;
}
#general_form_modal .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;
}
#general_form_modal .btn-send .bg_color {
background-color: var(--principal);
}
#general_form_modal .btn-send .round {
background-color: var(--azul);
}
#general_form_modal .btn-send:hover {
border-color: var(--azul);
}
#general_form_modal_container .texto {
display: block;
margin: 0 0 10px 0;
font-weight: 500;
text-align: center;
}
#general_form_modal_container .titulo {
font-size: 26px;
font-weight: 600;
text-align: center;
margin: 0 0 2px 0;
}
#general_form_modal_container .aviso {
font-size: 12px;
color: red;
font-weight: 400;
text-align: center;
}
#general_form_modal .control {
width: 100%;
margin: 0 0 15px 0;
}
#general_form_modal input, #general_form_modal 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;
}
#general_form_modal textarea {
height: 100px;
margin: 0!important;
}
#general_form_modal .error {
border-color: red;
}
#general_form_modal .form_error_general {
font-size: 12px;
color: red;
height: 15px;
margin: 10px 0;
text-align: center;
}
#general_form_modal label {
font-size: 14px;
font-weight: 500;
margin: 0 0 4px 0;
display: block;
}
#exent_cookie_modal {
border-radius: 20px;
}
.phone_hp {
display: none!important;
} .box_selo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.box_selo .box_row {
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: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 20px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.box_selo .selo_footer {
width: auto;
max-width: 250px;
height: auto;
max-height: 180px;
-o-object-fit: contain;
object-fit: contain;
}
.box_selo .selo img,
.box_selo .selo svg{
width: 100%;
max-width: 120px;
}
@media (max-width: 1400px) {
.box_selo .selo_footer {
width: 100%;
}
.box_selo .selo{
padding: 10px;
}
}
@media (max-width: 768px) {
.box_selo .selo_footer {
max-height: 150px;
}
}