/******* Ordem da página *******/

#banner {

	order: 1;

}

#linha-tempo {

	order: 2;

}

#pq-fiibo {

	order: 3;

}

#visao-proposito {

	order: 4;

}

#futuro {

	order: 5;

}

#clientes {

	order: 6;

}

/******* Banner *******/

#banner {

    height: 38.2vw;

    background-color: var(--principal);

    background-image: url(../../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 do Tempo *******/

#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;

}

/******* Porque Fiibo *******/

#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;

}

/******* Visão - Proposito *******/

#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 *******/

#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 *******/

#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;

}