@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');


/* Variáveis Globais */
:root {
	--principal:#fff; /*verde*/
	--secundaria:#FFFF4D; /*branca*/
}


* { margin:0; padding:0; border:0; }

.container { width:98%; margin:0 auto; max-width:1080px; }
.container2 { width:98%; margin:0 auto; max-width:850px; }
.container3 { width:98%; margin:0 auto; max-width:650px; }
.clear { display:block; float:none; clear:both; }

.box { margin-bottom:40px; }

header { background:#003 url('imgs/fundo-img.png') center bottom; padding-bottom:80px; padding-top:50px; }
	header > div > div { float:left; width:50%; }
	header .mockup { float:right; width:500px; margin-top:35px; margin-bottom:50px; }
	
	header h2 { display:block; margin:0 auto; width:300px; border-radius:3px; padding:8px; background:var(--principal); text-align:center; font-size:22px; font-family:'Lato', Arial; font-weight:900; color:#000; }
	
	header h1 {
		margin:35px 0 25px 0;
		font-family: 'Lato',Arial;
		display: block;
		text-align:center;
		font-size: 50px;
		line-height:60px;
		color:#FFF;
	}
		header h1 strong { font-size:60px; text-decoration:underline; color:#75D410; }
		
		header h1 img { max-width:100px; margin-top:25px; }
		
	header > div > p { clear:both; max-width:650px; margin:0 auto; display:block; padding-top:15px; text-align:center; font:22px Tahoma, Arial; color:#FFF; }
		
	header h3 { font:18px Tahoma, Arial; color:var(--principal); }
	
	form { clear:both; margin:0 auto; margin-bottom:25px; display:block; background:#FFF; width:90%; max-width:600px; padding:50px; border-radius:8px; margin-top:-100px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06); }
		form p { margin-bottom:25px; text-align:center; font:17px Tahoma, Arial; color:#000; }
		form span { display:block; clear:both; float:none; }
		form input {
			display:block;
			outline: 0;
			width:95%;
			max-width:450px;
			margin:0 auto;
			margin-bottom:10px;
			background:#EBEBEB;
			border:1px solid #868686;
			text-align:center;
			border-radius:5px;
			padding:22px 13px 22px 13px;
			font:20px Tahoma, Arial;
			box-shadow: inset 0px 2px 3px #dddddd;
			-webkit-box-shadow: inset 0px 2px 3px #dddddd;
			-moz-box-shadow: inset 0px 2px 3px #dddddd;
		}
		
		form a, .botao {
			display: block;
			border-radius: 5px;
			width:95%;
			max-width:475px;
			margin:0 auto;
			margin-top:25px;
			padding:15px 0 15px 0;
			background: #75D410;
			color: #FFF;
			text-align:center;
			text-decoration:none;
			font-family:'Lato', Arial;
			font-size: 26px;
			font-weight: bold;
		}
			form a:hover, .botao:hover {
				background:#6FC60F;
			}
			form a:active{
			  position:relative;
			  top:5px;
			  box-shadow:none;
			}
		
		.form a i, .botao i { font-weight:100; display:block; margin:0 auto; }
			
			
	   .mobile { display:none; }
	

@media (max-width: 900px) {
	header { padding-bottom:5px; padding-top:15px; }
	header > div > div { float:none; display:block; width:98%; margin:0 auto; }
	header .mockup { display:none; }
	
	header h2 { display:block; margin:0 auto; max-width:200px; text-align:center; font-size:18px; }
	header h1 { margin-top:15px; text-align:center; line-height:38px; font-size:38px; }
		header h1 strong { font-size:40px; }
		header h1 img { width:100px; }
	
	header h3 { text-align:center; font-size:15px; }
	
	form { margin-top:0; padding:15px 0 15px 0; background:none; box-shadow:none; }
	
	form a, .botao {
		font-size:18px;
	}
	
	form input {
		width:90%;
		padding:17px 9px 17px 9px;
		font:16px Tahoma, Arial;
		background:#FFF;
	}
	
	header .mobile { display:block; margin:0 auto; margin-top:25px; width:80%; }
	
	header > div > p { font-size:18px; }
	
}


.faixa { clear:both; display:block; float:none; background:#F4F4F4; padding:35px 0 15px 0; }
	.faixa h3 { text-align:center; font-size:23px; font-family:'Lato', Arial; font-weight:bold; }
		.faixa h3 i { color:#069 }
	.faixa img { width:60px; display:block; margin:0 auto; }


@media (max-width: 900px) {
	.faixa h3 { font-size:23px; }
}

.content { padding-top:45px; padding-bottom:40px; }

	.content h3 { margin-bottom:40px; text-align:center; font-size:23px; font-family:'Lato', Arial; font-weight:bold; }

	.topico {
		width:30%;
		max-width:400px;
		float:left;
		padding:15px;
		text-align:center;
		font:18px Tahoma, Arial;
		color:#666;
	}
		.topico img { display:block; margin:0 auto; width:45%; margin-bottom:10px; max-width:70px; }
		

@media (max-width: 900px) {
	.content  { padding-top:20px; }
	.topico { width:90%; float:none; display:block; margin:0 auto; padding-bottom:20px; border-bottom:1px  dotted #CCCCCC;  font-size:17px; }
	.topico img { width:25%; }
}
		

.autor  { padding:45px 0 45px 0; background:#F4F4F4; }
	.autor p { display:block; font:17px Tahoma, Arial; color:#666; }
	.autor img { float:right; border-radius:150px; margin-left:30px; border:5px solid #FFF; }
	

.call-to-action { background:#003 url('imgs/fundo-img.png') center center; padding:50px 0 50px 0; }
	.call-to-action h4 { text-align:center; font-size:30px; font-family:'Lato', Arial; font-weight:bold; color:#75D410; }
		.call-to-action h4 strong { color:var(--principal); }
	.botao { margin-top:45px; margin-bottom:0; max-width:650px; }
	
	
@media (max-width: 900px) {
	.autor { padding:25px 0 25px 0; }
		.autor p { text-align:center; }
		.autor img { display:block; float:none; margin:0 auto; margin-bottom:25px; }
		
	.call-to-action h4 { font-size:26px; }
}	
	
footer { padding:20px 0 20px; text-align:center; }