body, html, img { padding:0; margin:0; }
body { background-color:#C0C3E2; background-image:url('../imagens/bg.gif'); text-align:left; font-family: tabletGothic, 'Sintony', sans-serif; font-size:30px; line-height: 45px; letter-spacing: 0px; color:#25408F; }
header { z-index:4; height:65px; top:0; left:0; background-color:#f01616; width:100%; font-size:12px; position: fixed;}
a { text-decoration:none; color:#fff;}
b { font-weight:500; }
.clear { clear:both; }

@font-face {
  font-family: tabletGothic;
  src: url(../fonts/tabletgothic.ttf);
}
@font-face {
  font-family: tabletGothicLight;
  src: url(../fonts/tabletgothic-light.ttf);
}
@font-face {
  font-family: tabletGothicExtraBold;
  src: url(../fonts/tabletgothic-extrabold.ttf);
}
@font-face {
  font-family: atramentBold;
  src: url(../fonts/atrament-bold.otf);
}

.fixo { width:95%; max-width:1000px; margin:0 auto; overflow: hidden; }
.quatrorodas { float:left; width: 47%; text-align:left; margin:0; padding:10px 0;}
	.quatrorodas p { padding:0; margin:10px 0 0; }
	.quatrorodas img { max-width:140px;}
.share { margin-top:13px; text-align:right; float:right; width: 50%; color:#fff; font-size:9px; letter-spacing:0; text-transform:uppercase; }
	.share img { float:right; max-width:30px; margin-left:5px;}
		.share img:hover { opacity:0.5;}
	.share div { height:35px; float:right; line-height:33px;}
		.share p { line-height:35px; }

.banner-publicidade { max-width:970px; height:auto; margin:0 auto 15px; padding:0; text-align:center; }
.banner-conteudo { margin: 40px auto;}

#inicio { position:relative; width:100%; margin:0 auto; padding:75px 0 10px 0; min-height:800px; text-align:center; background:linear-gradient(180deg, rgba(177,176,210,0) 0%, rgba(255,255,255,1) 92%), url('../imagens/vw.jpg') bottom no-repeat fixed; background-size:cover; }
	#inicio hr { background-color:#25408F; margin:0 auto; padding:0; height:8px; border:0; max-width:800px; border-radius:8px;}
	#inicio .content { position:relative; max-width:920px; min-height:450px; margin:0 auto; padding: 0 0 0 50px; background-color:#F1F1F9; font-size:30px; line-height:45px; text-align:left; letter-spacing:-1px; font-family: tabletGothic, 'Sintony', sans-serif;  }
	#inicio .content h1 { font-family: atramentBold, 'Dosis', sans-serif; letter-spacing:-2px; line-height:120px; text-transform:uppercase; text-align:left; font-size:140px; margin:0; padding:8% 50px 0 50px; }
	#inicio .content p {  padding:10px 55px 0; margin:20px 0 0;}
	#inicio .hr2 { margin:0px auto; height:8px; }


#apresentacao { position:relative; width:100%; background-color:#fff; padding:90px 0 120px; font-size: 24px; line-height:44px; font-family: tabletGothicLight, 'Sintony', sans-serif; overflow: hidden;  }
	#apresentacao .destaque { z-index:1; position:relative; width:65%; margin:0 auto 80px; font-size:155%; line-height:150%; text-align:center; font-weight:bold; font-family: tabletGothic, /*'Sintony',*/ sans-serif; }
	#apresentacao .wrapper {  z-index:1; position:relative; max-width:1000px; margin:0 auto; padding:20px; }
	#apresentacao p { position:relative; z-index:1; padding: 0; margin:0 0 10px; }
	#apresentacao span { text-decoration:underline;}
	#apresentacao .hover { display:none; position:absolute; z-index:3; top:-80px; width:300px; float:center; border-radius: 30px; }
	#apresentacao .img { z-index:3; transition: opacity 1s; }
	#apresentacao .element1:hover ~ .oculos, #apresentacao .element1:active ~ .oculos { display:inline-block; opacity:1; }
	#apresentacao .element2:hover ~ .tela, #apresentacao .element2:active ~ .tela { display:inline-block; opacity:1;  }
	#apresentacao .element3:hover ~ .digitais, #apresentacao .element3:active ~ .digitais { display:inline-block; opacity:1;  }

#novidades { margin:-100px auto 50px; background-color:#25408F; color:#fff; max-width:400px; text-transform:uppercase; text-align:center; min-height: 130px; line-height:130px; }
	#novidades h2 { font-size: 30px; }

.mudancas { position:relative; max-width:1366px; margin:0 auto; padding:50px 0; overflow:hidden; }
	.mudancas .content { max-width:100%; margin:0 auto; padding:0; }
	.mudancas .content h3 { text-transform:uppercase; font-weight:bold; margin:0; font-family: tabletGothicExtraBold, 'Sintony', sans-serif; font-size:35px; line-height: 45px; }
	.mudancas .content .box { position:relative; background-color:#25408F; color:#fff; padding: 50px; width:25%; line-height:50px; font-family: tabletGothicLight, 'Sintony', sans-serif; }
	.mudancas .content .descricao { display:none; font-size:21px; line-height:29px; }
	.mudancas .content .abrir { width: 40px; height: 50px; background:url('../imagens/png/fechar.png') center no-repeat; background-size:contain; background-position:0px 10px; transition: background 1s; }
		.mudancas .content .abrir:after { content:'Leia\00a0mais'; color:#fff; padding-top:-5px; padding-left: 50px; font-family: tabletGothicExtraBold, 'Sintony', sans-serif;  text-transform:uppercase;  font-size: 16px; height:40px; line-height:30px; display: inline-block; transition: color 1s; }
		.mudancas .content .abrir:hover { background:url('../imagens/png/fechar_hover.png') center no-repeat; background-size:contain; background-position:0px 10px; cursor: pointer; }
			.mudancas .content .abrir:hover:after { color:#de6d5b; transition: color 1s; }
	.mudancas .content .fechar { transform: rotate(45deg); -webkit-transform: rotate(45deg);  }
	.mudancas .content .fechar:after { content:none; }

.bg1, .bg2, .bg3, .bg4 { position:absolute; width:100%; height:100%; transition: background 1s; }

  @keyframes flutuar {
  from {background-position: center;}
  to {background-position: top center;}
}
@keyframes flutuar2 {
  from {background-position: center;}
  to {background-position: center -30px;}
}
  @keyframes andar {
  from {background-position: center;}
  to {background-position: -30px center;}
}
  @keyframes aumentalado {
  from {background-size: 100%; background-position: right center;}
  to {background-size: 98%; background-position: center;}
}

#agendamento { min-height:590px;  }
	#agendamento .box { margin:0 30%;}
	#agendamento.aberto { }
	#agendamento .bg1 { background:url('../imagens/png/img1.png') center no-repeat; background-size: contain;  }
	#agendamento .bg3 { display:none; background:url('../imagens/png/img1_2.png') center no-repeat; background-size: contain;
						animation-name: flutuar; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate;
						-webkit-animation-name: flutuar; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;
						}


#personalizado {  min-height:600px; }
	#personalizado .box { margin:0 0 0 60% ;}
	#personalizado .bg1 { background:url('../imagens/png/img2.png') center no-repeat; background-size:contain; }
	#personalizado .bg2 { background:url('../imagens/png/img2b.png') center no-repeat; background-size: contain; }
	#personalizado .bg3 { display:none; background:url('../imagens/png/img2_2.png') center no-repeat; background-size: contain;  }
	#personalizado .bg4 { background:url('../imagens/png/img2_2b.png') center no-repeat; background-size: contain;
						  animation-name: flutuar; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate;
						  -webkit-animation-name: flutuar; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;
						  }

#checklist { min-height:720px;  }
	#checklist .box {margin:0 0 0 25%;}
	#checklist .bg1 { background:url('../imagens/png/img3.png') center no-repeat; background-size: contain; }
	#checklist .bg2 { background:url('../imagens/png/img3b.png') center no-repeat; background-size: contain; }
	#checklist .bg3 { display:none;  background:url('../imagens/png/img3_2.png') center no-repeat; background-size: contain;
					  animation-name: flutuar; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate;
					  -webkit-animation-name: flutuar; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; }

#pagamento {  min-height:700px; }
	#pagamento .box { margin:0 0 0 65%;}
	#pagamento .bg1 { background:url('../imagens/png/img4.png') center no-repeat; background-size: contain; }
	#pagamento.aberto .bg1 { background:none; }
	#pagamento .bg3 { display:none; background:url('../imagens/png/img4_2.png') center no-repeat; background-size: contain; }
	#pagamento .bg4 { background:url('../imagens/png/img4_2b.png') center no-repeat; background-size: contain;
					  animation-name: andar; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate;
					  -webkit-animation-name: andar; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;}

#manual { min-height:600px;  }
	#manual .box { margin:0 0 0 50%;}
	#manual .bg1 {  background:url('../imagens/png/img5.png') center no-repeat; background-size:contain; }
	#manual .bg3 { display:none;  background:url('../imagens/png/img5_2.png') center no-repeat; background-size:contain;
				  animation-name: flutuar2; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate;
				  -webkit-animation-name: flutuar2; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; }

#concluido { min-height:720px; }
	#concluido .box { margin:0 0 0 10%;}
	#concluido .bg1 {  background:url('../imagens/png/img6.png') center no-repeat; background-size:contain; }
	#concluido .bg3 { display:none;  background:url('../imagens/png/img6_2.png') center no-repeat; background-size:contain;
					  animation-name: aumentalado; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate-reverse;
					  -webkit-animation-name: aumentalado; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate-reverse;  }


#saibamais { background-color:#25408F; width:100%; padding: 40px 0 0; margin:100px 0 0; color:#fff; }
	#saibamais .content { max-width: 900px; background-color:#161955; margin:-120px auto 0; padding:50px 50px 70px; }
	#saibamais .chamada {border-bottom: 6px solid #f01616; width: 150px; line-height:28px; text-transform:uppercase; font-size: 20px; letter-spacing: 1px; color:#fff; font-weight:bold; margin:0 0 20px; padding:0; }
	#saibamais .chapeu { text-transform:uppercase; font-size: 20px; letter-spacing: 1px; color:#f01616; font-weight:bold; margin:0; padding:0; }
	#saibamais .titulo { margin:-8px 0 0; padding:0; font-size:30px; line-height:35px;}
		#saibamais .titulo a:hover { text-decoration:underline; }
	#saibamais img { float:left; width: 20%; margin-right: 15px; }

footer { font-family: 'Sintony', sans-serif; background-color:#fff; width:100%; padding: 50px 0; color:#25408F; text-align:center; line-height: 25px; font-size: 20px; }
	footer p { margin:0 0 10px; }


	@media only screen and (max-width: 1400px) {

	#inicio { min-height:750px; }
	#inicio hr { max-width:700px;}
	#inicio .content { max-width:800px; min-height:400px; margin:0 auto; padding: 0 0 0 50px; background-color:#F1F1F9; font-size:20px; line-height:30px; text-align:left; letter-spacing:0px; font-family: tabletGothic, 'Sintony', sans-serif;  }
	#inicio .content h1 {line-height:100px; font-size:120px; padding:10% 50px 0 50px; }


		#apresentacao { padding:5px 0 120px; font-size: 22px; line-height:40px; }
			#apresentacao .destaque { width:65%; margin:0 auto 60px; font-size:155%; line-height:130%; }
			#apresentacao .wrapper { max-width:750px; margin:0 auto; padding:0 20px; }
			#apresentacao span { text-decoration:underline;}
			#apresentacao p { padding: 0; margin:0 0 10px; }


	.mudancas { padding: 20px 0;  }
	.mudancas .content h3 { font-size:27px; line-height: 35px; }
	.mudancas .content .box { padding: 50px; width:30%; }
	.mudancas .content p { font-size:18px; line-height:25px; }

		.mudancas .content .abrir { width:35px; height:45px; }
		.mudancas .content .abrir:after { padding-left: 45px; font-size: 13px; }
		.mudancas .content .fechar {  }

			#agendamento .box { margin:0 30%;}
	#personalizado .box { margin:0 0 0 51% ;}
	#checklist .box {margin:0 0 0 25%;}
	#pagamento .box { margin:0 0 0 53%;}
	#manual .box { margin:0 0 0 40%;}
	#concluido .box { margin:0 0 0 10%;}

		#agendamento {  min-height:580px;}
		#personalizado {  min-height:600px;}
		#checklist {  min-height:620px;  }
		#pagamento {  min-height:600px;  }
		#manual {  min-height:500px; }
		#concluido {  min-height:550px;  }


			#saibamais .content { max-width: 700px;  }
			#saibamais .chamada {width: 125px; line-height:24px; font-size: 17px; margin:0 0 20px;  }
			#saibamais .chapeu { font-size: 16px; line-height:18px; margin-bottom:10px; }
			#saibamais .titulo { margin:-8px 0 0; padding:0; font-size:24px; line-height:30px;}
				#saibamais .titulo a:hover { text-decoration:underline; }
		footer {padding:30px 0; line-height: 13px; font-size: 14px; }

	}

	@media only screen and (max-width: 800px) {

		#inicio { min-height:800px; }
			#inicio hr { max-width:600px;}
			#inicio .content { max-width:600px; min-height:550px; margin:0 auto; padding: 0 0 0 50px; font-size:25px; line-height:35px;  }
			#inicio .content h1 { letter-spacing:-2px; line-height:90px; font-size:110px; margin:0; padding:20% 50px 0 50px; }
			#inicio .content p {  padding:10px 55px 0; margin:20px 0 0;}
			#inicio .hr2 { margin:0px auto; height:8px; }


			#apresentacao { padding:35px 0 120px; }
				#apresentacao .element1:hover ~ .oculos { display:block; float:left }
				#apresentacao .element2:hover ~ .tela { display:block; float:left }
				#apresentacao .element3:hover ~ .digitais { display:block; float:left }

		#saibamais .chapeu {font-size: 15px;  }
		#saibamais .titulo { font-size:20px; line-height:25px;}


		  @keyframes flutuar {
		  from {background-position: center top; }
		  to {background-position: center -3px;  }
		  }
			@keyframes flutuar2 {
			  from {background-position: center top; }
			  to {background-position: center 8px;}
			}
		  @keyframes andar {
		  from {background-position: top center;}
		  to {background-position: 20px top;}
		}
		  @keyframes aumentalado {
		  from {background-size: 100%; background-position: top center;}
		  to {background-size: 98%; background-position: top center;}
		}

	}

	@media only screen and (max-width: 600px) {

		.banner-publicidade { max-width:320px; height:100px; margin:0 auto 15px; padding:0; background-color:#c0c0c0; text-align:center; }
		.banner-conteudo { margin: 40px auto;}


		#saibamais img { width:40%; }


		#saibamais img { width:40%; }
		#saibamais .chapeu {font-size: 15px; line-height:18px; margin-bottom:8px; }
		#saibamais .titulo { font-size:18px; line-height:24px;}

		#apresentacao { margin:0px auto; font-size: 24px; line-height:38px; }
		#apresentacao .destaque { margin:0 auto 50px; font-size:120%; }

		#inicio { min-height:550px; }
		#inicio hr { max-width:380px;}
		#inicio .content { max-width:400px; min-height:500px; padding: 0 10px; font-size:17px; line-height:28px; letter-spacing:0px;  }
		#inicio .content h1 { letter-spacing:-2px; line-height:90px; font-size:100px; padding:20% 10px 0 20px; }
		#inicio .content p {  padding:10px 0px 0 20px; margin:20px 0 0; }

		#novidades { margin:0 auto; background-color:#25408F; color:#fff; max-width:800px; text-transform:uppercase; text-align:center; min-height: 180px; line-height:180px; }
			#novidades h2 { font-size: 30px; }

		.mudancas { background-position:top;  }
		.mudancas .content { min-height:200px; max-height:none; margin:0 auto; padding:0; overflow: visible; }
		.mudancas .content .box { position:relative; padding: 20px; width:70%; line-height:50px; }
		.mudancas .content h3 { font-size:25px; line-height: 30px; }
		.mudancas .content p { font-size:21px; line-height:29px; }
		.mudancas .content .abrir { width:35px; height:45px; }
		.mudancas .content .abrir:after { padding-left: 45px; font-size: 13px; }
		.mudancas .content .fechar { }

		#agendamento .box, #personalizado .box, #checklist .box, #pagamento .box, #manual .box, #concluido .box { margin:300px auto 0;  }

		#agendamento, #agendamento.aberto { min-height:200px; }
			#agendamento .bg1 { background:url('../imagens/800/img1.png') top no-repeat; background-size:contain; }
			#agendamento .bg3 {background:url('../imagens/800/img1_2.png') top no-repeat; background-size:contain; }
		#personalizado, #personalizado.aberto { min-height:200px; }
			#personalizado .bg1 { background:url('../imagens/800/img2.png') top no-repeat; background-size:contain; }
			#personalizado .bg2 { background:url('../imagens/800/img2b.png') top no-repeat; background-size:contain; }
			#personalizado .bg3 { background:url('../imagens/800/img2_2.png') top no-repeat; background-size:contain; }
			#personalizado .bg4 { background:url('../imagens/800/img2_2b.png') center no-repeat; background-size: contain; }
		#checklist, #checklist.aberto  {  min-height:200px;  }
			#checklist .bg1 {  background:url('../imagens/800/img3.png') top no-repeat; background-size:contain; }
			#checklist .bg2 {  background:none; }
			#checklist .bg3 {  background:url('../imagens/800/img3_2.png') top no-repeat; background-size:contain; }
		#pagamento, #pagamento.aberto {  min-height:200px; }
			#pagamento .bg1 {  background:url('../imagens/800/img4.png') top no-repeat; background-size:contain;  }
			#pagamento.aberto .bg1 { background:none; }
			#pagamento .bg3 { display:none; background:url('../imagens/800/img4_2.png') top no-repeat; background-size: contain; }
			#pagamento .bg4 { background:url('../imagens/800/img4_2b.png') top no-repeat; background-size: contain; }
		#manual, #manual.aberto {  min-height:200px; }
			#manual .bg1 { background:url('../imagens/800/img5.png') top no-repeat; background-size:contain; }
			#manual .bg3 { background:url('../imagens/800/img5_2.png') top no-repeat; background-size:contain; }
		#concluido, #concluido.aberto {  min-height:200px;  }
			#concluido .bg1 { background:url('../imagens/800/img6.png') top no-repeat; background-size:contain; }
			#concluido .bg3 { background:url('../imagens/800/img6_2.png') top no-repeat; background-size:contain; }

		footer { padding: 30px 0 10px; line-height: 25px; font-size: 15px; }
			footer p { margin:0 0 10px; padding:0 20px; }
	}


	@media only screen and (max-width: 420px) {

		#inicio { position:relative; width:100%; margin:0 auto; }
		#inicio hr { max-width:280px;}
		#inicio .content { max-width:300px; min-height:380px; padding: 0 10px; font-size:17px; line-height:28px; letter-spacing:0px;  }
		#inicio .content h1 { letter-spacing:-2px; line-height:70px; font-size:80px; padding:20% 10px 0 20px; }
		#inicio .content p {  padding:0px 0px 0 20px; margin:20px 0 0; }

		#apresentacao { margin:0px auto; padding-top:10px; padding-bottom:60px; font-size: 20px; line-height:32px; }
		#apresentacao .destaque { width:80%; margin:0 auto 50px; font-size:120%; }

		#novidades { margin:-60px auto 0; background-color:#25408F; color:#fff; max-width:300px; min-height: 80px; line-height:80px; }
			#novidades h2 { font-size: 25px; }

		#saibamais img { float:none; width: 100%; margin:0; }
		#saibamais .titulo { font-size:22px; line-height:28px;}

		footer { padding: 30px 0 10px; line-height: 25px; font-size: 15px; }
			footer p { margin:0 0 10px; padding:0 15px; }
	}