@charset "utf-8";

img.img-webp { display: none;}

#titulo { float: left; width: 100%;}
#titulo h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em;}
#titulo h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em;}

#texto { float: left; width: 100%; margin: 0 0 10px;}
#texto h4 { float: left; width: 90%; margin: 0 5%; text-align: center; font-size: 1.1em; color: #555555;}

#requisicoes { float: left; width: 100%; display: none; padding: 30px 0 20px; background-color: #E2E2E2; }
#requisicoes .nome { float: left; width: 100%; padding: 7px 0 5px; background-color: #D0D0D0; text-transform: uppercase; text-align: center; font-size: 1.1em; color: #717171; line-height: 1.1;}
#requisicoes .numero { float: left; width: 100%; padding: 15px 0 0; line-height: 1; text-align: center; font-weight: bold; font-size: 6em; color: #868685;}

#destaque { float: left; width: 100%; min-height: 500px; padding: 90px 0 0; background-color: #0F3D3F;}
#destaque .imagem { float: left; width: 40%;}
#destaque .imagem img { float: left; width: 100%;}
#destaque .logo { float: left; width: 100%; padding: 30px 0 25px; background-color: #0C3031; text-align: center; font-size: 0; display: none;}
#destaque .logo img { max-width: 80%;}
#destaque .descricao { float: left; width: 35%; margin: 100px 0 0 5%; overflow: hidden;}
#destaque .descricao h3 { float: left; width: 100%; padding: 0 0 17px 50px; margin: 23px 0 0; font-size: 1.7em; color: #FFFFFF; background-position: 0 10px; background-repeat: no-repeat;}
#destaque .descricao h3.iw { background-image: url("../imagens/bandeira.png");}
#destaque .descricao h3.io { background-image: url("../imagens/webp/bandeira.webp");}
#destaque .descricao h3 strong { color: #FFFFFF;}
#destaque .descricao b { float: left; width: 100%; height: 2px; margin: 0 0 0 50px; background-color: #051A1B;}
#destaque .descricao img { float: left; margin: 15px 0 0 50px;}
#destaque .descricao.moVa { margin: 60px 0 0 5%;}
#destaque .descricao.moVb h3 strong { color: #FFCB00;}

#siga { float: left; width: 100%; padding: 25px 0 23px; background-color: #178A7C; position: relative;}
#siga .selo { position: absolute; width: 130px; height: 130%; top: -15%; left: 5%; z-index: 1; background-position: 50%; background-repeat: no-repeat;}
#siga .selo.io { background-image: url("../imagens/selo.png");}
#siga .selo.iw { background-image: url("../imagens/webp/selo.webp");}
#siga .dica { float: left; width: 50%; padding: 10px 5% 8px; border-right:  2px solid #082829;}
#siga .dica h3 { float: left; width: 100%; font-weight: bold; text-align: right; color: #082829;}
#siga .redes { float: left; margin: 0 0 0 5%;}
#siga .redes a { float: left; width: 50px; height: 50px; margin: 0 5px; background-position: 50%; background-repeat: no-repeat;}
#siga .redes a.whatsapp.io { background-image: url("../imagens/whatsapp.png");}
#siga .redes a.instagram.io { background-image: url("../imagens/instagram.png");}
#siga .redes a.youtube.io { background-image: url("../imagens/youtube.png");}
#siga .redes a.whatsapp.iw { background-image: url("../imagens/webp/whatsapp.webp");}
#siga .redes a.instagram.iw { background-image: url("../imagens/webp/instagram.webp");}
#siga .redes a.youtube.iw { background-image: url("../imagens/webp/youtube.webp");}

#interatividade { float: left; width: 100%;}
#interatividade .imagem { float: left; width: 100%;}
#interatividade .imagem img { float: left; width: 100%;}
#interatividade .imagem.m { display: none;}

#setas { float: left; width: 100%;}
#setas h3 { float: left; width: 50%; padding: 40px 25%;}
#setas h3 b { float: left; width: 10%; font-weight: bold; font-size: 2em; color: #FFFFFF;}
#setas h3 strong { float: left; width: 70%; font-weight: normal; font-size: 1.2em; color: #FFFFFF;}
#setas h3 em { float: right; width: 10%; height: 50px; margin: 10px 0 0; background-position: 50%; background-repeat: no-repeat;}
#setas h3.bga { background: rgb(240,85,99); background: -moz-linear-gradient(90deg, rgba(240,85,99,1) 0%, rgba(253,191,95,1) 100%); background: -webkit-linear-gradient(90deg, rgba(240,85,99,1) 0%, rgba(253,191,95,1) 100%); background: linear-gradient(90deg, rgba(240,85,99,1) 0%, rgba(253,191,95,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f05563",endColorstr="#fdbf5f",GradientType=1);}
#setas h3.bga em.io { background-image: url("../imagens/seta_a.png");}
#setas h3.bga em.iw { background-image: url("../imagens/webp/seta_a.webp");}
#setas h3.bgb { background: rgb(188,89,157); background: -moz-linear-gradient(90deg, rgba(188,89,157,1) 0%, rgba(239,69,86,1) 100%); background: -webkit-linear-gradient(90deg, rgba(188,89,157,1) 0%, rgba(239,69,86,1) 100%); background: linear-gradient(90deg, rgba(188,89,157,1) 0%, rgba(239,69,86,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bc599d",endColorstr="#ef4556",GradientType=1);}
#setas h3.bgb em.io { background-image: url("../imagens/seta_b.png");}
#setas h3.bgb em.iw { background-image: url("../imagens/webp/seta_b.webp");}
#setas h3.bgc { background: rgb(78,86,163); background: -moz-linear-gradient(90deg, rgba(78,86,163,1) 0%, rgba(147,99,167,1) 100%); background: -webkit-linear-gradient(90deg, rgba(78,86,163,1) 0%, rgba(147,99,167,1) 100%); background: linear-gradient(90deg, rgba(78,86,163,1) 0%, rgba(147,99,167,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4e56a3",endColorstr="#9363a7",GradientType=1);}
#setas h3.bgc em.io { background-image: url("../imagens/seta_c.png");}
#setas h3.bgc em.iw { background-image: url("../imagens/webp/seta_c.webp");}
#setas h3.bgd { background: rgb(9,179,162); background: -moz-linear-gradient(90deg, rgba(9,179,162,1) 0%, rgba(76,143,204,1) 100%); background: -webkit-linear-gradient(90deg, rgba(9,179,162,1) 0%, rgba(76,143,204,1) 100%); background: linear-gradient(90deg, rgba(9,179,162,1) 0%, rgba(76,143,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#09b3a2",endColorstr="#4c8fcc",GradientType=1);}
#setas h3.bgd em.io { background-image: url("../imagens/seta_d.png");}
#setas h3.bgd em.iw { background-image: url("../imagens/webp/seta_d.webp");}
#setas h3.bge { background: rgb(69,186,136); background: -moz-linear-gradient(90deg, rgba(69,186,136,1) 0%, rgba(145,200,84,1) 100%); background: -webkit-linear-gradient(90deg, rgba(69,186,136,1) 0%, rgba(145,200,84,1) 100%); background: linear-gradient(90deg, rgba(69,186,136,1) 0%, rgba(145,200,84,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#45ba88",endColorstr="#91c854",GradientType=1);}
#setas h3.bge em.io { background-image: url("../imagens/seta_e.png");}
#setas h3.bge em.iw { background-image: url("../imagens/webp/seta_e.webp");}

#carrosel { float: left; width: 90%; padding: 0 5%; position: relative; z-index: 1;}
#carrosel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
#carrosel .owl-carousel.owl-loaded { display: block;}
#carrosel .owl-carousel.owl-loading { opacity: 0; display: block;}
#carrosel .no-js .owl-carousel { display: block;}
#carrosel .owl-stage-outer { position: relative; overflow: hidden;}
#carrosel .owl-stage-outer .owl-item { float: left; position: relative;  -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;}
#carrosel .owl-stage-outer .owl-item .item { float: left; width: 100%;}
#carrosel .owl-nav { position: absolute; width: 100%; top: 35%; left: 0;}
#carrosel .owl-nav button { position: absolute; width: 20px; top: 0; padding: 18px 0 22px; background-color: #FFCB00; font-size: 1.5em; line-height: 0; color: #000000; cursor: pointer; border: 0; outline: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#carrosel .owl-nav button.owl-prev { left: -30px;}
#carrosel .owl-nav button.owl-next { right: -30px;}
#carrosel .owl-nav button:hover { background-color: #D8AC00;}
#carrosel .owl-nav button.disabled { background-color: #CCCCCC; color: #AAAAAA;}
#carrosel .owl-nav button.disabled:hover { background-color: #CCCCCC;}
#carrosel .owl-dots { display: none;}

#parceiros { float: left; width: 100%; padding: 50px 0 0;}
#parceiros .tab { float: left; width: 100%;}
#parceiros .tab img { float: left; width: 80%; padding: 20px 7.5%; margin: 2%; border: 1px solid #CCCCCC;}

#depoimentos { float: left; width: 100%; padding: 50px 0 0;}
#depoimentos .tab { float: left; width: 90%; min-height: 185px; padding: 3%; margin: 2%; position: relative;}
#depoimentos .tab .imagem { position: absolute; width: 50px; top: 10px; left: 10px;}
#depoimentos .tab .imagem img { width: 100%; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#depoimentos .tab .descricao { float: left; margin: 0 0 0 60px;}
#depoimentos .tab .descricao strong { line-height: 2.5;}
#depoimentos .tab .descricao b { font-weight: normal;}
#depoimentos .seu { float: left; width: 100%; padding: 30px 0; text-align: center;}
#depoimentos .seu a { padding: 15px 30px 12px; background-color: #FFCB00; cursor: pointer; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #000000; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#depoimentos .seu a:hover { background-color: #E8B900;}

#envieoseuMargem { float: left; width: 100%; height: 20px;}

#envieoseu { float: left; width: 100%; padding: 30px 0; background-color: #F5F5F5; border-bottom: 1px solid #CCCCCC; position: relative; display: none;}
#envieoseu .form { float: left; width: 30%; margin: 0 35%;}
#envieoseu .form .nomecampo { float: left; width: 98%; margin: 5px 1% 0; font-size: 0.9em;}
#envieoseu .form .campo { float: left; width: 92%; height: 70px; background-color: #F5F5F5; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 0 4%;}
#envieoseu .form .campo.nome { -webkit-border-radius: 20px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 20px; -moz-border-radius-bottomright: 0; border-radius: 20px; border-bottom-right-radius: 0;}
#envieoseu .form .campo.email { -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#envieoseu .form .campo.celular { -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#envieoseu .form .campo.invalido { background-color: #FFFFFF; border: 1px solid #FF8989;}
#envieoseu .form .campo:focus { background-color: #FFFFFF; border: 1px solid #1AD5EF;}
#envieoseu .form .textarea { float: left; width: 92%; height: 110px; background-color: #F5F5F5; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 25px 4%; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#envieoseu .form .textarea.invalido { background-color: #FFFFFF; border: 1px solid #FF8989;}
#envieoseu .form .textarea:focus { background-color: #FFFFFF; border: 1px solid #1AD5EF;}
#envieoseu .form .file { float: left; width: 98%; padding: 10px 1%; font-size: 0.9em;}
#envieoseu .form .botao { float: right; margin: 0 0 10px; padding: 20px 30px; background-color: #FFCB00; text-transform: uppercase; font-weight: bold; line-height: 1; font-size: 1.2em; cursor: pointer; -webkit-border-radius: 20px; -webkit-border-top-right-radius: 0; -moz-border-radius: 20px; -moz-border-radius-topright: 0; border-radius: 20px; border-top-right-radius: 0;}
#envieoseu .form .botao:hover { background-color: #E8B900;}
#envieoseu .fecha { position: absolute; width: 40px; height: 40px; top: 30px; right: 30px; cursor: pointer; background-position: 50%; background-repeat: no-repeat;}
#envieoseu .fecha.io { background-image: url("../imagens/fechaDepoimento.png");}
#envieoseu .fecha.iw { background-image: url("../imagens/webp/fechaDepoimento.webp");}
#envieoseu .aviso { float: left; width: 100%; position: relative; display: none; padding: 12px 0 10px; background-color: #F2FFA1; border-top: 1px solid #E0ED8C; border-bottom: 1px solid #E0ED8C;}
#envieoseu .aviso .msg { float: left; width: 100%;}
#envieoseu .aviso .msg h4 { float: left; width: 100%; text-align: center; font-size: 1.1em;}

#contato { float: left; width: 100%; padding: 50px 0 30px; background-color: #F5F5F5;}
#contato .form { float: left; width: 30%; margin: 10px 35%;}
#contato .form .campo { float: left; width: 92%; height: 70px; background-color: #F5F5F5; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 0 4%;}
#contato .form .campo.nome { -webkit-border-radius: 20px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 20px; -moz-border-radius-bottomright: 0; border-radius: 20px; border-bottom-right-radius: 0;}
#contato .form .campo.email { -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#contato .form .campo.celular { -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#contato .form .campo.invalido { background-color: #FFFFFF; border: 1px solid #FF8989;}
#contato .form .campo:focus { background-color: #FFFFFF; border: 1px solid #1AD5EF;}
#contato .form .textarea { float: left; width: 92%; height: 110px; background-color: #F5F5F5; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 25px 4%; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#contato .form .textarea.invalido { background-color: #FFFFFF; border: 1px solid #FF8989;}
#contato .form .textarea:focus { background-color: #FFFFFF; border: 1px solid #1AD5EF;}
#contato .form .botao { float: right; margin: 0 0 10px; padding: 20px 30px; background-color: #FFCB00; text-transform: uppercase; font-weight: bold; line-height: 1; font-size: 1.2em; cursor: pointer; -webkit-border-radius: 20px; -webkit-border-top-right-radius: 0; -moz-border-radius: 20px; -moz-border-radius-topright: 0; border-radius: 20px; border-top-right-radius: 0;}
#contato .form .botao:hover { background-color: #E8B900;}
#contato .aviso { float: left; width: 100%; position: relative; display: none; padding: 12px 0 10px; background-color: #F2FFA1; border-top: 1px solid #E0ED8C; border-bottom: 1px solid #E0ED8C;}
#contato .aviso .msg { float: left; width: 100%;}
#contato .aviso .msg h4 { float: left; width: 100%; text-align: center; font-size: 1.1em;}
#contato .aviso .fechar { position: absolute; top: 16px; right: 5%; font-weight: bold; font-size: 1em; line-height: 1; color: #000000; cursor: pointer;}
#contato .aviso .fechar:hover { color: #D93A3D;}

#whatsappFixo { position: fixed; width: 90px; height: 90px; bottom: -10px; right: -10px; z-index: 20; background-position: 50%; background-repeat: no-repeat; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#whatsappFixo.io { background-image: url("../imagens/whatsapp_fixo.png");}
#whatsappFixo.iw { background-image: url("../imagens/webp/whatsapp_fixo.webp");}
#whatsappFixo:hover {animation: treme 0.1s; animation-iteration-count: 3;}

#loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 15; display: none; background-color: rgba(0,0,0,0.40); background-image: url("../imagens/loader.gif"); background-position: 50%; background-repeat: no-repeat;}

@media only screen and (max-width: 1200px){
     #destaque .descricao { width: 45%; margin: 70px 0 0 5%;}
     #destaque .descricao.moVa { margin: 20px 0 0 5%;}
     #destaque .descricao h3 { font-size: 1.3em;}
}
@media only screen and (max-width: 1000px){
     #destaque { padding: 40px 0 0;}

     #setas h3 { width: 80%; padding: 40px 10%;}

     #depoimentos .tab .imagem { top: 15px;}

     #envieoseu { padding: 30px 0 10px;}
     #envieoseu .form { width: 80%; margin: 20px 10%;}

     #contato { padding: 30px 0 10px;}
     #contato .form { width: 80%; margin: 0 10%;}
}
@media only screen and (max-width: 900px){
     #destaque { padding: 0;}
     #destaque .logo { display: block;}
     #destaque .imagem { display: none;}
     #destaque .descricao { width: 90%; padding: 35px 0 30px; margin: 0 5%;}
     #destaque .descricao.moVa { padding: 5px 0 0; margin: 0 5%;}
     #destaque .descricao b { height: 1px;}
     #destaque .descricao b.ultimo { display: none;}
}
@media only screen and (max-width: 800px){
     #interatividade .imagem.d { display: none;}
     #interatividade .imagem.m { display: block;}

     #carrosel .owl-nav button.owl-prev { left: -15px;}
     #carrosel .owl-nav button.owl-next { right: -15px;}

     #parceiros { padding: 30px 0 0;}
     #depoimentos { padding: 30px 0 0;}
}
@media only screen and (max-width: 700px){
     #titulo h1 { font-size: 2em;}
     #titulo h2 { font-size: 2em;}

     #requisicoes .nome { font-size: 1em;}
     #requisicoes .numero { font-size: 2em;}

     #setas h3 { width: 90%; padding: 40px 5%;}
     #setas h3 b { float: left; width: 20%; font-weight: bold; font-size: 2em; color: #FFFFFF;}
     #setas h3 strong { float: left; width: 60%; font-weight: normal; font-size: 1.2em; color: #FFFFFF;}
     #setas h3 em { float: right; width: 20%; height: 50px; margin: 10px 0 0; background-position: 50%; background-repeat: no-repeat;}
}
@media only screen and (max-width: 600px){
     #siga .dica { width: 90%; padding: 10px 5% 8px; border-bottom: 1px solid #082829; border-right: 0;}
     #siga .dica h3 { float: left; width: 100%; font-weight: bold; text-align: right; font-size: 1em; color: #082829;}
     #siga .redes { float: right; margin: 10px 5% 0 0;}
}
@media only screen and (max-width: 500px){
     #setas h3 strong { font-size: 1em;}
     #depoimentos .tab .descricao { margin:  0 0 0 68px;}
}
@media only screen and (max-width: 400px){
     #destaque .descricao h3 { font-size: 1em;}

     #carrosel { width: 76%; padding: 0 12%;}
     #carrosel .owl-nav button.owl-prev { left: -22px;}
     #carrosel .owl-nav button.owl-next { right: -22px;}

     #siga .selo { left: 2%;}
}
@keyframes treme{
     0% { right: -10px;}
     25% { right: 0;}
     50% { right: -10px;}
     75% { right: 0;}
     100% { right: -10px;}
}