@charset "utf-8";

#paginas { float: left; width: 100%; padding: 0 0 40px; min-height: 300px;}

#titulo { float: left; width: 100%; margin: 45px 0 10px; position: relative;}
#titulo h1 { float: left; width: 100%; position: relative; z-index: 2; text-align: center; font-size: 2.5em; line-height: 1;}
#titulo b { padding: 0 20px; background-color: rgb(245, 245, 245); font-weight: normal;}
#titulo em { position: absolute; width: 100%; height: 3px; top: 22px; left: 0; background-color: rgb(78, 188, 195); z-index: 1;}

#texto { float: left; width: 100%;}
#texto .simples { float: left; width: 100%;}
#texto .simples h2 { float: left; width: 50%; margin: 0 25% 20px; text-align: center; font-weight: bold; font-size: 1.3em;}
#texto .simples h5 { float: left; width: 50%; margin: 0 25%; text-align: center; font-size: 1.1em;}

#botaozap { float: left; width: 100%; text-align: center; padding: 40px 0;}
#botaozap a { padding: 20px 40px 20px 50px; background-color: #0ac050; background-image: url('../imagens/whatsapp3.png'); background-position: 20px 50%; background-repeat: no-repeat; font-weight: bold; font-size: 1.2em; color: #FFFFFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#botaozap a:hover { background-color: #07af47;}

#banners { float: left; width: 100%; min-height: 140px; position: relative;}
#banners .fundo { float: left; width: 100%;}
#banners .fundo.m { display: none;}
#banners .slides { position: relative; z-index: 1;}
#banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
#banners .slides > li { display: none;}
#banners .slides > li .img { float: left; width: 100%;}
#banners .flex-direction-nav { display: none;}
#banners .flex-control-nav { position: absolute; width: 100%; left: 0; bottom: 30px; z-index: 5; text-align: center;}
#banners .flex-control-nav li { margin: 0 3px; display: inline-block;}
#banners .flex-control-paging li a { float: left; width: 15px; height: 15px; border: 1px solid rgb(5 5 5); background-color: rgb(250 250 250); cursor: pointer; display: block; font-size: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#banners .flex-control-paging li a:hover { background-color: rgb(89, 181, 255);}
#banners .flex-control-paging li a.flex-active { background-color: rgb(89, 181, 255);}

#cuidamos { float: left; width: 100%; padding: 61px 0 51px;}

#mvv { float: left; width: 90%; margin: 30px 5%;}
#mvv #titulo { display: none;}
#mvv .tab { float: left; width: 33.3%; padding: 20px 0;}
#mvv .tab .imagem { float: left; width: 100%; height: 100px; background-position: 50%; background-repeat: no-repeat;}
#mvv .tab .imagem.missao { background-image: url('../imagens/qm-missao.png');}
#mvv .tab .imagem.visao { background-image: url('../imagens/qm-visao.png');}
#mvv .tab .imagem.valores { background-image: url('../imagens/qm-valores.png');}
#mvv .tab .subtexto { float: left; width: 100%; margin: 10px 0 0;}
#mvv .tab .subtexto h2 { float: left; width: 100%; text-align: center; font-size: 1.7em;}
#mvv .tab .subtexto h3 { float: left; width: 80%; margin: 0 10%; text-align: center; font-size: 1em;}

#exibiservico { float: left; width: 90%; padding: 0 5%;}

#exibiservico .teximg { display: flex; flex-wrap: wrap; justify-content: space-between; float: left; width: 100%;}
#exibiservico .teximg .ld { flex: 1 1 10%;}

#exibiservico .texto { float: left; width: 100%;}
#exibiservico .texto h5 { float: left; width: 70%; margin: 0 15%; text-align: center; font-size: 1.1em;}
#exibiservico .texto h5 strong { text-transform: uppercase; font-size: 1.2em;}
#exibiservico .texto h5 em { font-weight: bold; font-style: normal; color: rgb(78, 188, 195);}
#exibiservico .texto h5 a:hover { text-decoration: underline;}
#exibiservico .imagem { float: left; width: 100%; margin: 20px 0; text-align: center;}
#exibiservico .imagem img { max-width: 100%;}

#exibiservico .requisitos { float: left; width: 100%; margin: 20px 0;}
#exibiservico .requisitos .req { float: left; width: 28%; padding: 2%; margin:  0 1% 0 0; background-color: #51A8BB;}
#exibiservico .requisitos .req h3 { float: left; width: 100%; border-bottom: 4px solid #3A8494; padding: 0 0 4px; margin: 0 0 10px; text-transform: uppercase; font-weight: bold; font-size: 1.5em; color: #FFFFFF;}
#exibiservico .requisitos .req h4 { float: left; width: 100%; min-height: 170px; font-size: 1em; color: #FFFFFF;}

#exibiservico .mensalidades { float: left; width: 100%; margin: 20px 0;}
#exibiservico .mensalidades .fundo { float: left; width: 100%; padding: 15px 0; background-color: #575174;}
#exibiservico .mensalidades .men { float: left; width: 19%; padding: 15px 2%; margin: 0 1%; text-align: center;}
#exibiservico .mensalidades .men .vezes { float: left; width: 100%; font-weight: bold; font-size: 1.3em; color: rgb(255 255 255);}
#exibiservico .mensalidades .men .valor { float: left; width: 100%; margin: 8px 0 0; color: rgb(255 255 255);}
#exibiservico .mensalidades .men .valor span { position: relative;}
#exibiservico .mensalidades .men .valor em { position: absolute; top: -12px; left: -25px; font-style: normal;}
#exibiservico .mensalidades .men .valor strong { font-size: 2em;}
#exibiservico .mensalidades .men .valor b { position: absolute; top: -12px; right: -45px; font-weight: normal;}
#exibiservico .mensalidades .men .contratar { display: flex; justify-content: center; float: left; width: 100%; margin: 8px 0 0;}
#exibiservico .mensalidades .men .contratar a { padding: 12px 25px; background-color: #51A8BB; font-weight: bold; color: #FFFFFF;}
#exibiservico .mensalidades .men .contratar a:hover { background-color: #DAAE13;}

#exibiservico .horarios { float: left; width: 100%; margin: 20px 0;}
#exibiservico .horarios .hor { float: left; width: 44%; padding: 2%; margin: 0 1%; background-color: rgb(255, 255, 255);}
#exibiservico .horarios .hor h3 { float: left; width: 100%; border-bottom: 4px solid rgb(78, 188, 195); padding: 0 0 4px; margin: 0 0 10px; text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#exibiservico .horarios .hor h4 { float: left; width: 100%; font-size: 1em;}

#exibiservico .diarias { float: left; width: 100%; margin: 20px 0;}
#exibiservico .diarias .fundo { display: flex; justify-content: center; float: left; width: 100%; padding: 15px 0; background-color: #575174;}
#exibiservico .diarias .men { float: left; width: 350px; max-width: 100%; padding: 15px 0; text-align: center;}
#exibiservico .diarias .men .vezes { float: left; width: 100%; font-weight: bold; font-size: 1.3em; color: rgb(255 255 255);}
#exibiservico .diarias .men .valor { float: left; width: 100%; margin: 8px 0 0; color: rgb(255 255 255);}
#exibiservico .diarias .men .valor span { position: relative;}
#exibiservico .diarias .men .valor em { position: absolute; top: -12px; left: -25px; font-style: normal;}
#exibiservico .diarias .men .valor strong { font-size: 2em;}
#exibiservico .diarias .men .valor b { position: absolute; top: -12px; right: -45px; font-weight: normal;}
#exibiservico .diarias .men .individual { float: left; width: 100%; font-size: 1em; color: rgb(255 255 255);}
#exibiservico .diarias .men .contratar { display: flex; justify-content: center; float: left; width: 100%; margin: 8px 0 0;}
#exibiservico .diarias .men .contratar a { padding: 12px 25px; background-color: #51A8BB; font-weight: bold; color: #FFFFFF;}
#exibiservico .diarias .men .contratar a:hover { background-color: #DAAE13;}

#exibiservico .check { float: left; width: 100%; margin: 20px 0;}
#exibiservico .check .che { float: left; width: 44%; padding: 2%; margin: 0 1%; background-color: rgb(255, 255, 255);}
#exibiservico .check .che h3 { float: left; width: 100%; border-bottom: 4px solid #3A8494; padding: 0 0 4px; margin: 0 0 10px; text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#exibiservico .check .che h4 { float: left; width: 100%; font-size: 1em;}
#exibiservico .agendamento { float: left; width: 100%; margin: 20px 0;}
#exibiservico .agendamento .age { float: left; width: 94%; padding: 2%; margin: 0 1%; background-color: rgb(255, 255, 255);}
#exibiservico .agendamento .age h4 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(78, 188, 195);}
#exibiservico .planos { float: left; width: 100%; margin: 20px 0;}
#exibiservico .planos .pla { float: left; width: 94%; padding: 2%; margin: 0 1%; background-color: rgb(255, 255, 255);}
#exibiservico .planos .pla h3 { float: left; width: 100%; border-bottom: 4px solid rgb(58, 132, 148); padding: 0 0 4px; margin: 0 0 10px; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 1.2em;}
#exibiservico .planos .pla h4 { float: left; width: 100%; text-align: center; font-size: 1em;}
#exibiservico .agende { float: left; width: 100%; text-align: center; padding: 40px 0 70px;}
#exibiservico .agende a { padding: 20px 40px; background-color: #DAAE13; font-weight: bold; font-size: 1.2em; color: #FFFFFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#exibiservico .agende a:hover { background-color: #BD970D;}

#mural { float: left; width: 90%; margin: 0 5%;}
#mural .tab { float: left; width: 31.3%; margin: 0 1%; position: relative; overflow: hidden;}
#mural .tab .obs { position: absolute; width: 96%; height: 96%; padding: 2%; background-color: rgba(35, 131, 152, 0.82); text-align: center; font-size: 1.3em; color: #FFFFFF;}
#mural .tab .obs.ob1 { right: 100%; bottom: 100%;}
#mural .tab .obs.ob2 { right: 0; bottom: 100%;}
#mural .tab .obs.ob3 { left: 100%; bottom: 100%;}
#mural .tab .img { float: left; width: 100%; margin: 0;}
#mural .tab:hover .obs.ob1 { right: 0; bottom: 0;}
#mural .tab:hover .obs.ob2 { right: 0; bottom: 0;}
#mural .tab:hover .obs.ob3 { left: 0; bottom: 0;}

#contato { float: left; width: 100%;}
#agendamento { float: left; width: 100%;}

#email { float: left; width: 100%;}
#email .aviso { float: left; width: 100%; display: none; position: relative;}
#email .aviso .msg { float: left; width: 90%; padding: 18px 5% 15px; background-color: rgb(255, 242, 126); color: rgb(0, 0, 0); font-size: 1em; line-height: 1.1; text-align: center;}
#email .aviso .fechar { position: absolute; top: 15px; right: 15px; font-size: 1.3em;}
#email .subtitulo { float: left; width: 100%; padding: 7px 0 5px; margin: 30px 0 0; background-color: rgb(87, 87, 86); text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(255, 255, 255); -webkit-border-radius: 8px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 8px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 8px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#email .form { float: left; width: 40%; margin: 0 30% 25px;}
#email .form .c1 { float: left; width: 100%;}
#email .form .c2 { float: left; width: 25%;}
#email .form .c3 { float: right; width: 70%;}
#email .form .nomecampo { float: left; width: 100%; margin: 22px 0 3px; font-style: italic; font-size: 1em;}
#email .form .nomecampo em { font-style: normal; color: rgb(255, 0, 0);}
#email .form .campo { float: left; width: 95%; height: 60px; padding: 1px 2% 0; border: 1px solid rgb(199, 199, 199); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#email .form .campo:focus { border: 1px solid rgb(89, 181, 255); -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}
#email .form .escolha { float: left; width: 100%; height: 64px; padding: 1px 2% 0; margin: 15px 0 0; background-color: rgb(255, 255, 255); border: 1px solid rgb(199, 199, 199); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#email .form .escolha:focus { border: 1px solid rgb(89, 181, 255); -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}
#email .form .textarea { float: left; width: 95%; height: 120px; padding: 5px 2% 0; border: 1px solid rgb(199, 199, 199); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#email .form .textarea:focus { border: 1px solid rgb(89, 181, 255); -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}
#email .form .invalido { border: 1px solid rgb(255, 0, 0);}
#email .form .botao { float: left; padding: 15px 30px 13px; margin: 10px 0 0; background-color: rgb(87, 87, 86); color: rgb(255, 255, 255); text-transform: uppercase; font-weight: bold; cursor: pointer; font-size: 1.2em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#email .form .botao:hover { background-color: rgb(78, 188, 195);}

@media only screen and (max-width: 1000px){
  #titulo { padding: 35px 0 10px; margin: 0 0 20px; background-color: rgb(78, 188, 195);}
  #titulo b { padding: 0; background-color: rgb(78, 188, 195);}
  #titulo em { display: none;}

  #texto .simples h2 { width: 90%; margin: 0 5% 20px;}
  #texto .simples h5 { width: 90%; margin: 0 5%;}

  #cuidamos { padding: 31px 0 21px;}

  #mvv .tab { width: 100%;}
	#mural .tab .obs { font-size: 1.1em;}

  #exibiservico .texto h5 { width: 100%; margin: 0;}
  #exibiservico .requisitos { margin: 10px 0;}
  #exibiservico .requisitos .req { width: 96%; padding: 2%; margin:  0 0 10px;}
  
  #exibiservico .mensalidades { margin: 10px 0;}
  #exibiservico .mensalidades .men { width: 96%; margin: 0;}
  
  #exibiservico .horarios { margin: 10px 0;}
  #exibiservico .horarios .hor { width: 96%; padding: 2%; margin: 0 0 10px;}

  #exibiservico .diarias { margin: 10px 0;}

  #exibiservico .check { margin: 10px 0;}
  #exibiservico .check .che { width: 96%; padding: 2%; margin: 0 0 10px;}
  #exibiservico .agendamento { margin: 10px 0;}
  #exibiservico .agendamento .age { width: 96%; padding: 2%; margin: 0 0 10px;}
  #exibiservico .planos .pla { width: 96%; padding: 2%; margin: 0 0 10px;}
 
  #email .form { width: 80%; margin: 0 10% 25px;}
}
@media only screen and (max-width: 800px){
  #titulo h1 { font-size: 2em;}

  #banners .fundo.d { display: none;}
  #banners .fundo.m { display: block;}

  #mural .tab { width: 70%; margin: 0 15% 10px;}
}
@media only screen and (max-width: 500px){
  #mural .tab { width: 100%; margin: 0 0 10px;}
}
@keyframes tremer{
  0% { margin-top: 0;}
  25% { margin-top: 4px;}
  50% { margin-top: 0;}
  75% { margin-top: -4px;}
  100% { margin-top: 0;}
}