#texto { width:100%; min-height: 30vh; padding-top:10%; padding-bottom: 10%; background:#1fc6ec; font-family:Roboto; font-size:30px; line-height:34px; color:white; text-align:center; font-weight:500; }
#texto a { color:white; text-decoration:underline; }

#formulario { width:100%; background:#f8f8f8; padding-top: 3%; }
#formulario p.texto { text-decoration: none; font-size: 22px; }
#formulario form {  margin:0 auto; padding:2% 0 6%; }
#formulario label { float:left; width:31%; height:40px; text-align:right; line-height:40px; font-family:Roboto; font-size:16px; color: #000; margin-right:20px; margin-bottom:15px; }
#formulario input, #formulario select { height:40px; width:45%; padding:0 1%; font-size:15px; font-weight:500; color:#7B858F; vertical-align:middle; line-height:38px; font-family:Roboto; border:1px solid; border-color:#e2e2e2; margin-bottom:15px; -moz-border-radius:6px; border-radius:6px; }
#formulario select { padding-right:0; padding-top:8px; width:45%; }
#formulario .enviar { width:26%; height:52px; margin:2% 38% 0; background:#0dc1eb; color:white; font-size:16px; font-family:Roboto; font-weight:500; -moz-border-radius:4px; border-radius:4px; cursor:pointer; cursor:hand; }
#formulario p { width: 90%; font-size:16px; font-family:Roboto; text-decoration:underline; margin:2% auto; cursor:pointer; text-align: center; }
#formulario span { color:#000; font-size:16px; font-family:Roboto; margin:0 5%; width: 90%; display: inline-block; text-align: center; }
#formulario .checkbox { width:40px; height:20px; background:#c2c2c2; margin-top:1%; }
#formulario #contrato { width:90%; height:250px; border:1px solid #5784b1; overflow:auto; background:#fff; display:none; margin:0 auto; }

#compra-intro { width:100%; position:relative; background:#e3e3e3; display: inline-block; padding-bottom: 4%; }
#compra-intro #img-apresenta { float:right; display: inline-block; width: 49%; height: 100%; background-image: url('/images/apoioescolar24horas/apoio_2014/home/assine_foto01.jpg'); background-size: cover; }
#compra-intro #img-apresenta img { width: 100%; height: 100%; }
.Clude #compra-intro #img-apresenta { background-image: url('/images/apoioescolar24horas/apoio_2014/home/apresentaClude.jpeg'); background-size: cover; background-position: center center; }
#compra-intro-conteudo { display: inline-block; width:50%; margin:0 auto; color:black; }
#compra-intro-conteudo h1 { width:90%; font-family:Roboto; font-size:30px; font-weight:400; margin: 7% auto 4%; text-align: center; line-height: 34px; }
#compra-intro-conteudo li { margin:0 5% 0 12%; width:83%; font-family:Roboto; font-size:16px; font-weight:400; margin-bottom:2%; list-style:disc; }
#compra-intro-conteudo p { width:100%; font-family:Roboto; font-size:18px; font-weight:600; margin-bottom:0px; line-height: 40px; margin:8% auto 0%; text-align: center; }
#compra-intro-conteudo p strong { font-size:42px; }
#compra-intro-conteudo .letrinhas { font-weight:600; font-size:14px; font-family:Roboto; margin:0 auto; text-align: center; }

#compra-meio { background:#f8f8f8; }
#compra-meio h1 { width:100%; margin:0 auto; padding-top:8%; font-size:32px; font-weight:400; font-family:Roboto; text-align:center; }
#compra-meio #cadastro { width:100%; margin:0 auto; padding:40px 0; color: black; }
#compra-meio #cadastro label { float:left; width:30%; height:40px; text-align:right; line-height:40px; font-family:Roboto; font-size:16px; margin-right:2%; margin-bottom:2%; }
#compra-meio #cadastro input, #compra-meio #cadastro select { height:40px; width:45%; padding:0 1%; font-size:15px; font-weight:500; color:#7B858F; vertical-align:middle; line-height:38px; font-family:Roboto; border:1px solid; border-color:#e2e2e2; margin-bottom:2%; -moz-border-radius:6px; border-radius:6px; }
#compra-meio #cadastro select { padding-right:0; padding-top:8px; width:30%; }
#compra-meio #cadastro .enviar { width:22%; height:52px; margin:3% 39% 2%; background:#0dc1eb; color:white; font-size:16px; font-family:Roboto; font-weight:500; -moz-border-radius:4px; border-radius:4px; cursor:pointer; }
#compra-meio #cadastro .checkbox { width:40px; height:20px; background:#c2c2c2; margin-top:10px; }
#compra-meio #cadastro .li-termos { width:100%; font-size:15px; color:black; text-align: center; margin-bottom: 0; }
#compra-meio #cadastro .li-mailing { width:100%; font-size:15px; color:black; text-align: center; margin-bottom: 0; }
#compra-meio #cadastro .medio { width: 25%; }
#compra-meio #cadastro .pequeno { width: 10%; }

#compra-meio #cadastro #divCameraFrontal { display: none; margin-top: 2%; font-size: 14px; }
#compra-meio #cadastro #divCameraFrontal input { width: 5%; height: 18px; padding: 0; margin: 0; }

#compra-meio #cadastro p { font-size:16px; font-family:Roboto; text-decoration:underline; margin:3% auto 2%; cursor:pointer; text-align: center; }
#compra-meio #cadastro #contrato { width:80%; height:250px; border:1px solid #5784b1; overflow:auto; background:#fff; display:none; margin:0 auto; }

#code { position:relative; top:0px; width:80%; height:74px; background:url(/images/apoioescolar24horas/apoio_2014/home/background-code.png); margin:0 auto 10%; -moz-border-radius:4px; border-radius:4px; }
#code form { padding-top:0; }
#code .codigo { width:65%; height:53px; padding-left:10px; background:white; border:0px; font-family:Roboto; font-size:18px; font-weight:500; color:#bebebe; -moz-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; }
#code .enviar { width:30%; height:53px; background:#EEAD00; font-family:Roboto; font-size:20px; font-weight:500; color:white; cursor:pointer; cursor:hand; -moz-border-radius:0 2px 2px 0; border-radius:0 2px 2px 0; }
#code .perfil { width:100%; height:53px; padding:1% 0 1% 1%; background:white; border:0px; font-family:Roboto; font-size:22px; font-weight:500; color:#bebebe; -moz-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; }

#Cartao { background-size: contain; background-size: contain; background-position: right; background-repeat: no-repeat; }

.logoClude { background: url(/images/apoioescolar24horas/apoio_2014/home/logoClude.jpeg) no-repeat; background-size: contain; width: 175px; height: 60px; margin-right: 1%; float: right; }

@media only screen and (max-width: 1024px) { 
	#compra-intro-conteudo h1 { width: 98%; line-height: 36px; }
}

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

}

@media only screen and (max-width: 925px) { 
	#compra-intro-conteudo h1 { font-size: 24px; }
	#compra-intro-conteudo p strong { font-size: 36px; }
	#compra-intro-conteudo li { line-height: 20px; }
}

@media only screen and (max-width: 819px) {
	#compra-intro-conteudo h1 { font-size: 24px; }
	#compra-intro-conteudo p strong { font-size: 36px; }
	#compra-intro-conteudo li { line-height: 20px; font-size: 15px; }
	#compra-intro #img-apresenta { height: 459px ; }
}

@media only screen and (max-width: 767px) {
	#compra-intro-conteudo h1 { font-size: 24px; }
	#compra-intro-conteudo p strong { font-size: 36px; }
	#compra-intro-conteudo li { line-height: 20px; font-size: 15px; }

	#compra-meio #cadastro #divCameraFrontal { display: block; }
}

@media only screen and (max-width: 746px) {
	#compra-intro-conteudo h1 { font-size: 24px; }
	#compra-intro-conteudo p strong { font-size: 36px; }
	#compra-intro-conteudo li { line-height: 20px; font-size: 15px; }

	#compra-meio #cadastro .enviar { margin: 5% auto 5%; display: block; }
	#compra-meio #cadastro label { width: 38%; }

	/*#compra-meio #cadastro label[for=NomeCartao] { line-height: 18px; }*/
}

@media only screen and (max-width: 619px) {
	#formulario p.texto { font-size: 20px; line-height: 22px; }

	#compra-intro-conteudo { width: 96%; }
	#compra-intro #img-apresenta { display: none; }
	#compra-intro-conteudo h1 { font-size: 26px; width: 100%; }
	
	#compra-meio h1 { font-size: 28px; }
	#compra-meio #cadastro .li-termos { width: 100%; text-align: center; }
	#compra-meio #cadastro .li-mailing { width: 100%; text-align: center; margin-bottom: 4%; }
	#compra-meio #cadastro label { margin-bottom: 0; width: 42%; }
	#compra-meio #cadastro .pequeno { width: 23%; }
	#compra-meio #cadastro .medio { width: 40%; }
	#compra-meio #cadastro .enviar { margin: 5% auto 5%; display: block; }
	#compra-meio #cadastro p { margin: 3% 0 2%; width: 100%; }

	#code .codigo { width:63%; }
}

@media only screen and (max-width: 477px) {
	#formulario p.texto { font-size: 18px; line-height: 20px; }

	#compra-intro-conteudo { width: 96%; }
	#compra-intro #img-apresenta { display: none; }
	#compra-intro-conteudo h1 { font-size: 28px; }
	#compra-intro-conteudo li { line-height: 20px; }
	
	#compra-meio #cadastro .li-termos { width: 98%; text-align: center; }
	#compra-meio #cadastro .li-mailing { width: 98%; text-align: center; margin-bottom: 4%; }
	#compra-meio #cadastro label { margin-bottom: 0; width: 42%; }
	#compra-meio #cadastro label[for=NomeCartao] { line-height: 18px; }
	#compra-meio #cadastro .medio { width: 46%; }
	#compra-meio #cadastro .enviar { margin: 5% auto 5%; display: block; }
	#compra-meio #cadastro p { margin: 3% 0 2%; width: 100%; }

	#code .codigo { width:63%; }

	#texto { padding: 10%; font-size:18px; line-height:24px; width: 80% }

	#formulario label { width:40%; font-size:16px; margin-right:2%; margin-bottom:2%; }
	#formulario p { font-size:16px; }
	#formulario span { font-size:16px; }
}

@media only screen and (max-width: 423px) {
	#formulario p.texto { font-size: 18px; line-height: 20px; }

	#compra-intro-conteudo { width: 96%; padding-bottom:7%; }
	#compra-intro #img-apresenta { display: none; }
	#compra-intro-conteudo h1 { font-size: 26px; }
	#compra-intro-conteudo li { line-height: 20px; }
	
	#compra-meio #cadastro .li-termos { width: 98%; text-align: center; }
	#compra-meio #cadastro .li-mailing { width: 98%; text-align: center; margin-bottom: 4%; }
	#compra-meio #cadastro label { margin-bottom: 0; width: 42%; font-size: 14px; }
	#compra-meio #cadastro .enviar { margin: 5% auto 5%; display: block; height: 46px; }
	#compra-meio #cadastro p { margin: 3% 0 2%; width: 100%; }
	#compra-meio #cadastro input, #compra-meio #cadastro select { height: 34px; }
	#compra-meio #cadastro .pequeno { width: 15%; }

	#compra-meio #cadastro #divCameraFrontal input { height: 20px; width: 20px; }

	#code .codigo { width:58%; font-size: 16px; }
	#code .enviar { font-size: 16px; padding: 8px 10px; }

	#texto { padding-top:10%; padding-bottom: 10%; font-size:16px; line-height:22px; }

	#formulario label { width:46%; font-size:14px; margin-right:2%; margin-bottom:2%; }
	#formulario p { font-size:14px; }
	#formulario span { font-size:14px; }

	.logoClude { width: 120px; height: 40px; margin-right: 1%; }
}

@media only screen and (max-width: 319px){
	#compra-intro-conteudo { width: 96%; }
	#compra-intro #img-apresenta { display: none; }
	#compra-intro-conteudo h1 { font-size: 26px; }
	#compra-intro-conteudo li { line-height: 20px; }
	
	#compra-meio #cadastro .li-termos { width: 98%; text-align: center; }
	#compra-meio #cadastro .li-mailing { width: 98%; text-align: center; margin-bottom: 4%; }
	#compra-meio #cadastro label { margin-bottom: 0; width: 38%; }
	#compra-meio #cadastro .enviar { margin: 5% auto 5%; display: block; }
	#compra-meio #cadastro p { margin: 3% 0 2%; width: 100%; }
}