#primary {
background-color: #f7f7f7;
background-image: url(//fiibo.com.br/wp-content/themes/saude/bem-estar/background-carreiras.png);
background-repeat: no-repeat;
background-size: contain;
background-position-y: 53vw;
} #banner {
order: 1;
}
#dna-fiibo {
order: 2;	
}
#beneficios {
order: 3;	
}
#box-cta {
order: 4;	
} #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: 12% 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%;
justify-content: space-between;
} 
#banner .dir {
width: 47%;
height: 100%;
position: relative;
}
#banner .dir .imagem {
position: absolute;
bottom: 2.8%;
right: .5%;
z-index: 2;
width: 100%;
border-radius: 60px;
}
#banner .esq {
color: #fff;
width: 50%;
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;
}
#banner .esq .texto {
font-size: .95vw;
line-height: 1.5vw;
padding: 0 7vw 0 0;
font-weight: 500;
margin: 0 0 2vw 0;
} #dna-fiibo .top {
width: 80%;
margin: 6vw auto 0;
}
#dna-fiibo .top .titulo {
margin: 0 0 36px 0;
color: var(--principal);
font-size: 38px;
}
#dna-fiibo .top .texto {
margin: 0;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.02em;
color: #000;
font-weight: 500;
}
#dna-fiibo .bottom {
margin: 55px 0 0 0;
}
#dna-fiibo .bottom .container {
width: 80%;
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;
}
#dna-fiibo .bottom .box {
width: 50%;
position: relative;
background-color: #fff;
border-radius: 30px;
margin: 0 40px 0 0;
padding: 65px 52px 0;
transition: .5s ease all;
min-height: 402px;
box-shadow: 0 0 20px -8px #54545480, 0 0 20px -15px #54545480, 0 0 20px -15px #54545480;
}
#dna-fiibo .bottom .box:last-child {
margin: 0;
}
#dna-fiibo .bottom .box .titulo {
color: var(--principal);
font-size: 24px;
margin: 0 0 30px 0;
font-weight: 600;
letter-spacing: 0.03em;
}
#dna-fiibo .bottom .box .texto {
font-size: 18px;
font-weight: 500;
color: #525252;
line-height: 28px;
letter-spacing: 0.02em;
margin: 0;
}
#dna-fiibo .bottom .box .barra {
height: 5px;
background-color: var(--principal);
width: 76%;
position: absolute;
bottom: -5px;
border-radius: 50px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#dna-fiibo .bottom .box:hover{
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-transition: .3s;
-o-transition: .3s;
transition: .5s ease all;
}
#dna-fiibo .bottom .box:hover .barra{
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%);
}
#dna-fiibo .bottom .box .destaque {
text-decoration: underline;
text-underline-offset: 4px;
} #beneficios {
height: auto;
padding: 3vw 0 2vw;
}
#beneficios .box {
background-color: #fff;
-webkit-box-shadow: 0px 0px 25px #00000040;
box-shadow: 0px 0px 25px #00000040;
width: 80%;
margin: 0 auto;
height: 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;
border-radius: 35px;
}
#beneficios .box .esq {
position: relative;
width: 41%;
padding: 0;
height: 625px;
}
#beneficios .box .esq .imagem {
position: absolute;
bottom: 0;
right: 3vw;
width: 27.1vw;
max-width: 515px;
}
#beneficios .box .dir {
position: relative;
width: 55%;
height: 100%;
}
#beneficios .titulo-top {
text-align: center;
color: var(--principal);
font-size: 42px;
font-weight: 700;
}
#beneficios ul li img {
max-width: 32px;
margin-right: 20px;
}
#beneficios ul {
margin: 30px 0;
padding: 0;
}
#beneficios ul li {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 10px 0;
}
#beneficios ul li p {
line-height: 27px;
letter-spacing: 0;
font-weight: 500;
margin: 3px 0;
font-size: 18px;
}
#beneficios ul li::before {
display: none;
} #box-cta {
text-align: center;
padding: 0 0 100px 0;
}
#box-cta .titulo {
color: var(--principal);
font-size: 36px;
font-weight: 700;
}
#box-cta .texto {
font-size: 26px;
line-height: 35px;
letter-spacing: 0.02em;
color: #000;
font-weight: 500;
width: 60%;
display: block;
margin: 40px auto 45px;
}
.btn-rev {
border: 2px solid var(--principal);
color: #fff!important;
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: 415px;
margin: 0 auto;
display: block;
font-size: 24px;
text-align: center;
transition: .3s;
position: relative;
cursor: pointer;
background-color: transparent;
z-index: 1;
padding: 15px 0;
text-decoration: none;
}
.btn-rev .bg_color {
background-color: var(--principal);
}
.btn-rev .round {
background-color: var(--azul);
}
.btn-rev:hover {
border-color: var(--azul);
}