html, body #home{
	height: 100%;
	overflow-x: hidden; /* Esconde a barra horizontal */
}

body {
	background-attachment: fixed;
	font-family: Helvetica,Arial,sans-serif;
}
a:hover{
	opacity: 0.5;
}
/* Cores */
.bg-verde{
	background-color: #5CC6D0;
}
.bg-azul{
	background-color: #21345c;
}
.bg-amarelo{
	background-color: #FFCC29;
}
.scrollToTop{   
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}
#btnTop{
        position: fixed;
        bottom: 70px;
        right: 30px;
        height: 60px;
        width: 60px;
        color: #fff;
        background: #000099;
        border: none;
        border-radius: 50vh;
        display: none;
       }
.btn-custom{
	color: white;
	border-radius: 500px;
	-webkit-color: white;
	-moz-border-radius: 500px;
	text-transform: uppercase;
	transition: background 0.4s, color 0.4s;
	padding: 10px 20px;
}
.animate__animated.animate__bounce {
  --animate-duration: 3s;
}
/* Efeitos */
.radius{
	border-radius: 10px;
	border: 0px solid #21345c;
}
.borda-foto{
	border: 4px solid #fff;
}
.sombra{
  box-shadow: 3px 5px 4px #666;
  border: 2px solid #F58634;
}
button{
	padding:  10px;
}
/* Caixas */
.caixa{
	float: left;
	width: 100%;
	margin: 0%;
}
.caixa3{
	width: 49%;
	padding:  3%;
	}
.caixa4{
	width: 32.33333%;
}
.caixa6{
	width: 49%
}
.caixa2{
	width: 15.66667%
}
.caixa12{
	width: 99%
}

.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
/* HEADER */
.topo{
	width: 100%;
	height: auto;
	background-color: #fff;
	margin-top: 0;
	float: left;
}
.logo{
	width: 100%;
	height: auto;
	margin: 4% auto;
	padding-bottom: 0px;
	float: left;
}
.whatsapp{
	width:  100%;
	height:  auto;
	margin-top: 5%;
	padding-bottom:  6%;
}
.texto h1 {
	width:  100%;
	font-size: 1.1em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #000;
	padding: 0px;
	margin: 3% auto;
}
.texto2 h2 {
	width:  100%;
	font-size: 1.3em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ff0000;
	padding: 0px;
	margin: -1% 0%;
}
i{
	color: #fff;
	font-weight: bold;
}
/* Slider */
.slider{
	width: 100%;
	margin-top: 0px;
	float: left;
}
.carousel-caption a{
	width: 60%; /* largura do botao */
	height: 32px;
	font-weight: bold;
	margin: 22% 45% 0 45%;
	border-radius: 10px;
	float:  left;
}
.carousel-caption h2{
	font-size:  0.8em; /* texto botao */
	margin:  0% 0%; 
}
.carousel-caption a:hover{
	text-decoration: none;
	color: #ffff00;
}
.carousel-caption img{
	margin: -43% 41% 0 41%;
	float: left;
}
.carousel-item{
	transition: background 0.3s, color 0.3s;
}

.carousel-control-prev{
	margin-top: 15%
}
.carousel-control-next{
	margin-top: 15%
}

.planos{
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
	background-color: #21345c;
	padding-top: 0px;
}
.planos h1{
	font-size: 1.5em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	padding:  10px;
	text-align: center;
	margin-top: 20px;
}
.planos p{
	font-size: 1.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin-top: 5px;
}
/* formulario */
.cotacao .formulario{
	width:  100%;
	margin:  0% auto;
	float:  left;
	padding-bottom:  20px;
}
.cotacao p{
	font-size:  0.7em;
	margin:  0 auto;
}
.cotacao h1{
	width:  90%;
	height:  auto;
	font-size:  1.4em;
	color: #fff;
	text-align: center;
	padding:  10px;
	background-color: #ff0000;
	margin: -4% auto;
	border-radius: 15px;
}
.cotacao h2{
	width:  100%;
	font-size:  1.0em;
	color: #000;
	text-align: center;
	margin: 6% 0%;
}
.logos img{
	width: 100%;
	margin: 0% 2%;
}
/* Rodapé Atendimento */
.atendimento1{
	width:  100%;
	margin:  7% auto;
}
.atendimento1 h1{
	font-size:  1.3em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 {
	width:  75%;
	margin:  5% -4%;
	padding-bottom:  6%;
}
.atendimento2 h1{
	font-size:  1.5em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 img{
	margin:  -24% 94%;
	float:  left;
}

/* Rodapé */
.rodape h2{
	width: 100%;
	font-size: 1.2em;
	color: #fbc524;
	text-align: center;
	margin: 14% -25% 0 -25%;
}
.rodape h3{
	width:  100%;
	font-size:  1.1em;
	color: #000099;
	text-align: center;
	margin:  -1% auto;
}
.rodape p{
	width: 100%;
	font-size: 0.85em;
	font-weight: normal;
	color: #fff;
	text-align: justify;
	margin: 5% 0%;
}
.rodape i{
	color: #fff;
}
.atendimento-whats {
	width:  60%;
	margin:  17% -40%;
}
.atendimento-whats img{
	margin:  -38% 70%;
	float:  left;
}
footer{
	width: 100%;
	height: auto;
	background-color: #5CC6D0;
	padding-bottom: 80px;
	float: left;
}

/* Dispositivos extra small (telefones em modo retrato, com menos de 576px) */
@media (max-width: 575.98px) {
.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.formulario input{
	width:  95%;
}
button:focus {
    outline: 2px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}
.slide{
	display:  none;
	margin: 0% 0 0 0;
}
p.subtitulo{
	display:  none;
	width: 100%;
	color:  #21345c;
	font-size: 1.0em;
	font-weight: bold;
	margin: 20% 25% 0 25%;
	float:  left;
}
.icones-ans{
	width:  100%;
	height:  auto;
	margin:  2% 9%;
}
.icones-ans img{
	padding:  18px;
	margin:  0 auto;
}
.icones-ans .unimed{
	margin:  -19.5% -32%;
}
/* Caixas */
.caixa{
	float: left;
	width: 100%;
	margin: 0%;
}
.caixa3{
	width: 49%;
	}
.caixa4{
	width: 32.33333%;
}
.caixa6{
	width: 49%
}
.caixa2{
	width: 32.33333%
}
.caixa12{
	width: 99%
}

}

/* Dispositivos médios (tablets com 768px ou mais) */
@media (min-width: 768px) {
.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
#btnTop{
        position: fixed;
        bottom: 70px;
        right: 120px;
        height: 60px;
        width: 60px;
        color: #fff;
        background: #000099;
        border: none;
        border-radius: 50vh;
        display: none;
       }
/* HEADER */
.topo{
	width: 100%;
	height: 81px;
	background-color: #fff;
	margin-top: 0;
	float: left;
}
.logo{
	width: 150%;
	height: auto;
	margin: 25% -15% 0 -15%;
	padding-bottom: 0px;
	float: left;
}
.whatsapp{
	width:  100%;
	height:  auto;
	margin-top: 15%;
}
.texto h1 {
	width:  100%;
	font-size: 1.1em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #000;
	padding: 0px;
	margin: 2% 3%;
}
.texto2 h2 {
	width:  100%;
	font-size: 1.4em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ff0000;
	padding: 0px;
	margin: 0% 0%;
}
i{
	color: #fff;
	font-weight: bold;
}
/* Slider */
.slider{
	width: 100%;
	margin-top: 0px;
	float: left;
}
.carousel-caption a{
	width: 40%; /* largura do botao */
	height: 40px;
	font-weight: bold;
	margin: -10% 55%;
	border-radius: 10px;
	float:  left;
}
.carousel-caption h2{
	font-size:  1.1em; /* texto botao */
	margin:  0% 0%; 
}
.carousel-caption a:hover{
	text-decoration: none;
	color: #ffff00;
}
.carousel-caption img{
	margin: -43% 41% 0 41%;
	float: left;
}
.carousel-item{
	transition: background 0.3s, color 0.3s;
}
.carousel-control-prev{
	margin-top: 15%
}
.carousel-control-next{
	margin-top: 15%
}
p.subtitulo{
	width: 100%;
	color:  #21345c;
	font-size: 2.3em;
	font-weight: bold;
	margin: -22% 25%;
	float:  left;
}

.planos{
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
	background-color: #21345c;
	padding-top: 0px;
}
.planos h1{
	font-size: 2.0em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	padding:  10px;
	text-align: center;
	margin-top: 20px;
}
.planos p{
	font-size: 1.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin-top: 5px;
}
/* formulario */
.cotacao .formulario{
	width:  100%;
	margin:  0% 20%;
	float:  left;
	padding-bottom:  20px;
}
.cotacao p{
	font-size:  0.7em;
	margin:  0 20%;
}
.cotacao h1{
	width:  50%;
	height:  auto;
	font-size:  1.4em;
	color: #fff;
	text-align: center;
	padding:  10px;
	background-color: #ff0000;
	margin: 0% 25%;
	border-radius: 15px;
}
.cotacao h2{
	width:  100%;
	font-size:  1.0em;
	color: #000;
	text-align: center;
	margin: 2% 0%;
}
.logos img{
	width: 100%;
	margin: 0% 6%;
}
/* Rodapé Atendimento */
.atendimento1{
	width:  75%;
	margin:  14% -5%;
}
.atendimento1 h1{
	font-size:  1.5em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 {
	width:  75%;
	margin:  13% -18%;
}
.atendimento2 h1{
	font-size:  1.5em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 img{
	margin:  -30% 100%;
	float:  left;
}
.icones-ans{
	width:  100%;
	height:  auto;
	padding-bottom:  0px;
	margin:  4% 5%;
}
.icones-ans img{
	padding:  10px;
	margin:  0 -25%;
}
.icones-ans .unimed{
	margin:  -6.6% 94%;
}

/* Rodapé */
.rodape h2{
	width: 100%;
	font-size: 1.2em;
	color: #fbc524;
	text-align: center;
	margin: 14% -25% 0 -25%;
}
.rodape h3{
	width:  50%;
	font-size:  1.1em;
	color: #000099;
	text-align: center;
	margin:  0 auto;
}
.rodape p{
	width: 100%;
	font-size: 0.85em;
	font-weight: normal;
	color: #fff;
	text-align: justify;
	margin: 5% 0%;
}
.rodape i{
	color: #fff;
}
.atendimento-whats {
	width:  45%;
	margin:  12% -35%;
}
.atendimento-whats img{
	margin:  -38% 70%;
	float:  left;
}
footer{
	width: 100%;
	height: 300px;
	background-color: #5CC6D0;
	padding-bottom: 0px;
	float: left;
}

/* Caixas */
.caixa{
	float: left;
	width: 100%;
	margin: 0%;
}
.caixa3{
	width: 24%;
	padding:  10px;
	}
.caixa4{
	width: 32.33333%;
}
.caixa6{
	width: 49%
}
.caixa2{
	width: 15.66667%
}
.caixa12{
	width: 99%
}


	
}

/* Dispositivos large (desktops com 992px ou mais) */
@media (min-width: 960px) {
.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
#btnTop{
        position: fixed;
        bottom: 70px;
        right: 50px;
        height: 60px;
        width: 60px;
        color: #fff;
        background: #000099;
        border: none;
        border-radius: 50vh;
        display: none;
       }
/* HEADER */
.topo{
	width: 100%;
	height: 81px;
	background-color: #fff;
	margin-top: 0;
	float: left;
}
.logo{
	width: 150%;
	height: auto;
	margin: 25% -35% 0 -35%;
	padding-bottom: 0px;
	float: left;
}
.whatsapp{
	width:  120%;
	height:  auto;
	margin-top: 15%;
}
.texto h1 {
	width:  100%;
	font-size: 1.1em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #000;
	padding: 0px;
	margin: 2% 3%;
}
.texto2 h2 {
	width:  100%;
	font-size: 1.4em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ff0000;
	padding: 0px;
	margin: 0% 0%;
}
i{
	color: #fff;
	font-weight: bold;
}
/* Slider */
.slider{
	width: 100%;
	margin-top: 0px;
	float: left;
}
.carousel-caption a{
	width: 40%; /* largura do botao */
	height: 42px;
	font-weight: bold;
	margin: -12% 55%;
	border-radius: 10px;
	float:  left;
}
.carousel-caption h2{
	font-size:  1.3em; /* texto botao */
	margin:  0% 0%; 
}
.carousel-caption a:hover{
	text-decoration: none;
	color: #ffff00;
}
.carousel-caption img{
	margin: -43% 41% 0 41%;
	float: left;
}
.carousel-item{
	transition: background 0.3s, color 0.3s;
}
.carousel-control-prev{
	margin-top: 15%
}
.carousel-control-next{
	margin-top: 15%
}
p.subtitulo{
	width: 100%;
	color:  #21345c;
	font-size: 2.6em;
	font-weight: bold;
	margin: -23% 25%;
	float:  left;
}

.planos{
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
	background-color: #21345c;
	padding-top: 0px;
}
.planos h1{
	font-size: 2.0em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	padding:  10px;
	text-align: center;
	margin-top: 20px;
}
.planos p{
	font-size: 1.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin-top: 5px;
}
/* formulario */
.cotacao .formulario{
	width:  100%;
	margin:  0% 20%;
	float:  left;
	padding-bottom:  20px;
}
.cotacao p{
	font-size:  0.7em;
	margin:  0 20%;
}
.cotacao h1{
	width:  50%;
	height:  auto;
	font-size:  1.4em;
	color: #fff;
	text-align: center;
	padding:  10px;
	background-color: #ff0000;
	margin: 0% 25%;
	border-radius: 15px;
}
.cotacao h2{
	width:  100%;
	font-size:  1.0em;
	color: #000;
	text-align: center;
	margin: 2% 0%;
}
.logos img{
	width: 100%;
	margin: 0% 8%;
}
/* Rodapé Atendimento */
.atendimento1{
	width:  75%;
	margin:  14% -5%;
}
.atendimento1 h1{
	font-size:  1.5em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 {
	width:  75%;
	margin:  12% -15%;
}
.atendimento2 h1{
	font-size:  1.5em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 img{
	margin:  -30% 104%;
	float:  left;
}
.icones-ans{
	width:  100%;
	height:  auto;
	padding-bottom:  0px;
	margin:  4% 5%;
}
.icones-ans img{
	padding:  10px;
	margin:  0 -25%;
}
.icones-ans .unimed{
	margin:  -6.6% 94%;
}

/* Rodapé */
.rodape h2{
	width: 100%;
	font-size: 1.2em;
	color: #fbc524;
	text-align: center;
	margin: 14% -25% 0 -25%;
}
.rodape h3{
	width:  50%;
	font-size:  1.1em;
	color: #000099;
	text-align: center;
	margin:  0 auto;
}
.rodape p{
	width: 100%;
	font-size: 0.85em;
	font-weight: normal;
	color: #fff;
	text-align: justify;
	margin: 5% 0%;
}
.rodape i{
	color: #fff;
}
.atendimento-whats {
	width:  45%;
	margin:  12% -35%;
}
.atendimento-whats img{
	margin:  -38% 70%;
	float:  left;
}
footer{
	width: 100%;
	height: 300px;
	background-color: #5CC6D0;
	padding-bottom: 0px;
	float: left;
}

/* Caixas */
.caixa{
	float: left;
	width: 100%;
	margin: 0%;
}
.caixa3{
	width: 24%;
	padding:  10px;
	}
.caixa4{
	width: 32.33333%;
}
.caixa6{
	width: 49%
}
.caixa2{
	width: 15.66667%
}
.caixa12{
	width: 99%
}
	
}

/* Dispositivos extra large (desktops grandes com 1200px ou mais) */
@media (min-width: 1200px) {
.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
#btnTop{
        position: fixed;
        bottom: 70px;
        right: 50px;
        height: 60px;
        width: 60px;
        color: #fff;
        background: #000099;
        border: none;
        border-radius: 50vh;
        display: none;
       }
/* HEADER */
.topo{
	width: 100%;
	height: 81px;
	background-color: #fff;
	margin-top: 0;
	float: left;
}
.logo{
	width: 100%;
	height: auto;
	margin: 12% 0% 0 0%;
	padding-bottom: 0px;
	float: left;
}
.whatsapp{
	width:  100%;
	height:  auto;
	margin-top: 15px;
}
.texto h1 {
	width:  100%;
	font-size: 1.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #000;
	padding: 0px;
	margin-top: 15px;
	margin-left:  0;
}
.texto2 h2 {
	width:  100%;
	font-size: 1.4em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ff0000;
	padding: 0px;
	margin: -1% 0%;
}
i{
	color: #fff;
	font-weight: bold;
}
/* Slider */
.slider{
	width: 100%;
	margin-top: 0px;
	float: left;
}
.carousel-caption a{
	width: 40%; /* largura do botao */
	height: 46px;
	font-weight: bold;
	margin: -15% 55%;
	border-radius: 10px;
	float:  left;
}
.carousel-caption h2{
	font-size:  1.6em; /* texto botao */
	margin:  0% 0%; 
}
.carousel-caption a:hover{
	text-decoration: none;
	color: #ffff00;
}
.carousel-caption img{
	margin: -43% 41% 0 41%;
	float: left;
}
.carousel-item{
	transition: background 0.3s, color 0.3s;
}

.carousel-control-prev{
	margin-top: 15%
}
.carousel-control-next{
	margin-top: 15%
}
p.subtitulo{
	width: 100%;
	color:  #21345c;
	font-size: 2.6em;
	font-weight: bold;
	margin: -23% 25%;
	float:  left;
}
.planos{
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
	background-color: #21345c;
	padding-top: 0px;
}
.planos h1{
	font-size: 2.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #fff;
	padding:  10px;
	text-align: center;
	margin-top: 20px;
}
.planos p{
	font-size: 1.2em;
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin-top: 5px;
}
/* formulario */
.cotacao .formulario{
	width:  100%;
	margin:  0% 32%;
	float:  left;
	padding-bottom:  20px;
}
.cotacao p{
	font-size:  0.7em;
	margin:  0 32%;
}
.cotacao h1{
	width:  50%;
	height:  auto;
	font-size:  1.8em;
	color: #fff;
	text-align: center;
	padding:  10px;
	background-color: #ff0000;
	margin: 0% 25%;
	border-radius: 15px;
}
.cotacao h2{
	width:  100%;
	font-size:  1.1em;
	color: #000;
	text-align: center;
	margin: 2% 0%;
}
.logos img{
	width: 100%;
	margin: 0% 9%;
}
/* Rodapé Atendimento */
.atendimento1{
	width:  75%;
	margin:  10% 5%;
}
.atendimento1 h1{
	font-size:  1.8em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 {
	width:  75%;
	margin:  10% -8%;
}
.atendimento2 h1{
	font-size:  1.8em;
	font-weight:  bold;
	color: #000099;
	text-align: center;
}
.atendimento2 img{
	margin:  -12% 104% 0 104%;
	float:  left;
}
.icones-ans{
	width:  100%;
	height:  auto;
	padding-bottom:  0px;
	margin:  4% 5%;
}
.icones-ans img{
	padding:  10px;
	margin:  0 -10%;
}
.icones-ans .unimed{
	margin:  -4.3% 94%;
}

/* Rodapé */
.rodape h2{
	width: 100%;
	font-size: 1.2em;
	color: #fbc524;
	text-align: center;
	margin: 14% -25% 0 -25%;
}
.rodape h3{
	width:  50%;
	font-size:  1.1em;
	color: #000099;
	text-align: center;
	margin:  0 auto;
}
.rodape p{
	width: 100%;
	font-size: 0.85em;
	font-weight: normal;
	color: #fff;
	text-align: justify;
	margin: 5% 0%;
}
.rodape i{
	color: #fff;
}
.atendimento-whats {
	width:  45%;
	margin:  12% -35%;
}
.atendimento-whats img{
	margin:  -35% 90%;
	float:  left;
}
footer{
	width: 100%;
	height: 300px;
	background-color: #5CC6D0;
	padding-bottom: 0px;
	float: left;
}

/* Caixas */
.caixa{
	float: left;
	width: 100%;
	margin: 0%;
}
.caixa3{
	width: 24%;
	padding:  20px;
}
.caixa4{
	width: 32.33333%;
}
.caixa6{
	width: 49%
}
.caixa2{
	width: 15.66667%
}
.caixa12{
	width: 99%
}
}