#banner {
order: 1;
}
#linha-tempo {
order: 2;
}
#pq-fiibo {
order: 3;
}
#visao-proposito {
order: 4;
}
#futuro {
order: 5;
}
#clientes {
order: 6;
} #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%;
}
#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;
width: 80%;
margin: 0 auto;
height: 100%;
}
#banner .dir {
width: 53%;
height: 100%;
position: relative;
}
#banner .dir .imagem {
position: absolute;
bottom: -6%;
right: 8.5%;
z-index: 2;
width: 83%;
}
#banner .esq {
color: #fff;
width: 50%;
margin: 4vw 0 0 0;
padding: 0;
}
#banner .esq .call-to-action {
position: relative;
z-index: 1;
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;
}
#banner .esq .btn {
text-decoration: none;
border-radius: 5vw;
padding: 1vw 0 0.8vw;
font-size: 1.2vw;
display: inline-block;
text-align: center;
letter-spacing: 0.04em;
}
#banner .esq .btn-ser-fiibo {
border: 0.14vw solid #fff;
color: var(--principal);
margin-right: 1vw;
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: 15.1vw;
}
#banner .esq .btn-ser-fiibo svg {
margin: -0.3vw 0 0 0.9vw;
width: 0.9vw;
color: var(--principal);
transition: .3s;
}
#banner .esq .btn-ser-fiibo .bg_color {
background-color: #fff;
}
#banner .esq .btn-ser-fiibo.btn-effect .round {
background-color: var(--azul);
}
#banner .esq .btn-ser-fiibo:hover {
border-color: var(--azul);
color: #fff;
transition: .3s;
}
#banner .esq .btn-ser-fiibo:hover svg{
color: #fff;
transition: .3s;
}
#banner .esq .titulo {
font-size: 2.5vw;
line-height: 3vw;
padding: 0 12vw 0 0;
}
#banner .esq .texto {
font-size: .95vw;
line-height: 1.5vw;
padding: 0 7vw 0 0;
font-weight: 500;
margin: 0 0 2vw 0;
} #linha-tempo {
overflow-x: hidden;
background: rgb(247,247,247);
background: -webkit-gradient(linear, left top, left bottom, color-stop(63%, rgba(247,247,247,1)), color-stop(98%, rgba(255,255,255,1)));
background: -o-linear-gradient(top, rgba(247,247,247,1) 63%, rgba(255,255,255,1) 98%);
background: linear-gradient(0deg, rgba(247,247,247,1) 63%, rgba(255,255,255,1) 98%);
padding: 80px 0 0;
}
#linha-tempo .top {
width: 90%;
margin: 0 auto;
text-align: center;
}
#linha-tempo .top .titulo {
font-size: 40px;
color: var(--principal);
line-height: 48px;
margin: 0 0 30px 0;
font-weight: 700;
letter-spacing: 0.02em;
}
#linha-tempo .top .texto {
color: #000;
font-size:18px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0;
line-height: 25px;
} #pq-fiibo {
height: auto;
background-color: #f7f7f7;
padding: 5vw 0 2vw;
}
#pq-fiibo .box {
background-color: #fff;
-webkit-box-shadow: 0px 0px 25px #00000040;
box-shadow: 0px 0px 25px #00000040;
width: 80%;
margin: 0 auto;
height: 31.1vw;
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;
border-radius: 35px;
}
#pq-fiibo .box .titulo {
font-size: 3vw;
color: var(--principal);
line-height: 2.8vw;
margin: 0 0 2.5vw 0;
padding: 0 13vw 0 0;
letter-spacing: 0.02em;
}
#pq-fiibo .box .esq {
position: relative;
width: 77%;
padding: 3vw 0 3vw 6vw;
}
#pq-fiibo .box .dir {
position: relative;
width: 50%;
height: 100%;
}
#pq-fiibo .box .texto {
font-weight: 500;
font-size: 1.2vw;
line-height: 1.8vw;
letter-spacing: 0.02em;
}
#pq-fiibo .box .dir .imagem {
position: absolute;
bottom: 0;
right: 5vw;
} #visao-proposito {
height: auto;
padding: 60px 0;
background-color: #f7f7f7;
}
#visao-proposito .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-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;
}
#visao-proposito .container .box {
width: 595px;
height: 300px;
background-color: var(--principal);
border-radius: 25px;
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;
-webkit-box-shadow: 0px 0px 25px #00000040;
box-shadow: 0px 0px 25px #00000040;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#visao-proposito .container .box-1{
margin: 0 45px 0 0;
padding: 0 95px;
}
#visao-proposito .container .box-2{
padding: 0 35px;
}
#visao-proposito .container .box .titulo {
color: var(--amarelo);
font-size: 40px;
font-weight: 700;
letter-spacing: 0.02em;
margin: 0;
}
#visao-proposito .container .box .texto {
color: #fff;
font-size: 30px;
font-weight: 400;
letter-spacing: 0.02em;
} #futuro {
height: auto;
padding: 60px 0;
background-color: #f7f7f7;
text-align: center;
}
#futuro .titulo { 
font-size: 48px;
color: var(--principal);
line-height: 58px;
margin: 0 0 80px 0;
padding: 0;
font-weight: 700;
letter-spacing: 0.02em;
}
#futuro .texto { 
color: #000;
font-size: 32px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0;
line-height: 50px;
}
#futuro .container {
padding: 0 17%;
}
#futuro .btn-conversar {
text-decoration: none;
border-radius: 5vw;
padding: .9vw 0;
font-size: 1.2vw;
text-align: center;
letter-spacing: 0.04em;
border: 2px solid var(--principal);
color: #fff;
font-weight: 400;
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: 16.5vw;
margin: 75px auto;
z-index: 1;
}
#futuro .btn-conversar .bg_color {
background-color: var(--principal);
}
#futuro .btn-conversar.btn-effect .round {
background-color: var(--roxo);
}
#futuro .btn-conversar:hover {
border-color: var(--roxo);
transition: .3s;
} #clientes {
height: auto;
padding: 60px 0 120px;
background-color: #f7f7f7;
}
#clientes .box-btn-cta .btn-conversar {
text-decoration: none;
border-radius: 5vw;
padding: 0.7vw 0 0.5vw;
font-size: 1.2vw;
text-align: center;
letter-spacing: 0.04em;
border: 2px solid var(--principal);
color: #fff;
font-weight: 400;
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: 21.5vw;
z-index: 1;
margin: 0 auto;
}
#clientes .box-btn-cta .btn-conversar .bg_color {
background-color: var(--principal);
}
#clientes .box-btn-cta .btn-conversar.btn-effect .round {
background-color: var(--roxo);
}
#clientes .box-btn-cta .btn-conversar:hover {
border-color: var(--roxo);
transition: .3s;
}
#clientes .box-btn-cta .btn-conversar svg {
margin: 0 0 0 0.8vw;
width: 2vw;
}
#clientes .top .titulo {
color: var(--principal);
font-size: 36px;
position: relative;
z-index: 1;
overflow: hidden;
line-height: 45px;
text-align: center;
margin: 0;
}
#clientes .top .titulo:before, #clientes .top .titulo:after {
position: absolute;
top: 50%;
overflow: hidden;
width: 32%;
height: 2px;
content: '\a0';
background-color: var(--principal);
}
#clientes .top .titulo:before {
left: 0;
}
#clientes .top .titulo:after {
right: 0;
}
#clientes .bottom  {
margin: 6.5vw 0;
overflow: hidden;
}
#clientes .bottom img {
border-radius: 20px;
background: #dcdcdc;
padding: 1px;
box-sizing: border-box;
cursor: pointer;
transition: .3s ease all;
}
#clientes .bottom img:hover {
background: rgb(233,32,67);
background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(233,32,67,1)), color-stop(78%, rgba(255,170,60,1)));
background: -o-linear-gradient(left, rgba(233,32,67,1) 25%, rgba(255,170,60,1) 78%);
background: linear-gradient(90deg, rgba(233,32,67,1) 25%, rgba(255,170,60,1) 78%);
padding: 3px;
transition: .3s ease all;
}
#clientes .bottom .swiper-container {
width: 108%;
margin: 0 0 0 -5vw;
}