/******* 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%;
	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 - Form */
#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;
	}
}