$rosa: #EC2769;
$rosa_gray: #C50E4C;
$azul: #007BDE;
$azul_gray: #0163B1;

$roxo: #c0136b;
$laranja: #f39200;
$verde: #008000;

#slider{
	width: 100%;
	float: left;
	border-bottom: solid 5px $rosa;
	
	.item{
		width: 100%;
		float: left;
		text-align: center;
	}
}

#main{
	background: url(../img/bg-cartoon-1.png) repeat-x center top #FFF;
	min-height: 350px;
	margin-bottom: 100px;
	
	.item{
		padding: 50px;
		
		&.divisor{
			border-left: solid 5px $rosa;
		}
	}
	
	.subtitle{
		font-size: 20px;
		line-height: 120%;
	}
	
	.sobre{
		.title{
			color: $rosa;
		}
		
		.fotos{
			text-align: center;
			
			.it{
				display: inline-block;
				width: 100%;
				max-width: 380px;
				background-color: #EEE;
				margin-top: 15px;
				border-radius: 10px;
				overflow: hidden;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
			}
		}
	}
	
	.como_funciona{
		.title{
			color: $verde;
		}
		
		.steps{
			padding-top: 40px;
			
			.it{
				margin-bottom: 60px;
				
				.icone{
					width: 80px;
					height: 80px;
					background-color: #000;
					display: inline-block;
					transform: rotate(-45deg);
					border-radius: 20px;
					border: double 5px rgba(255,255,255,0.3);
					box-shadow: 0 0 10px rgba(0,0,0,0.5);
					text-align: center;
					transition: all .25s;
					
					span{
						font-family: 'Encode Sans', sans-serif;
						color: #FFF;
						position: relative;
						z-index: 2;
						font-weight: bold;
						font-size: 40px;
						line-height: 70px;
						transform: rotate(45deg);
						display: block;
						transition: all .25s;
					}
				}
				
				&:hover{
					.icone{
						transform: rotate(90deg);
						
						span{
							transform: rotate(-450deg);
						}
					}
				}
			}
		}
		
		.botao{
			width: 100%;
			max-width: 380px;
			border-radius: 30px;
			background-color: #F60;
			color: #FFF;
			line-height: 50px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 20px;
			font-weight: bold;
			
			&:active{
				opacity: 0.5;
			}
		}
	}
}

#categorias{
	text-align: center;
	padding: 0 20px 50px 20px;
	
	.item{
		width: 100%;
		height: 80px;
		background-color: #CCC;
		margin-bottom: 20px;
	}
}

#contato{
	background: url(../img/bg-cartoon-2.png) repeat-x center top #F5F5F5;
	min-height: 350px;
	padding: 50px 20px;
	
	.titulo{
		color: $verde;
		margin-bottom: 20px;
	}
	
	.subtitulo{
		margin-bottom: 30px;
	}
	
	.form{
		width: 100%;
		max-width: 700px;
		display: inline-block;
		
		.label{
			color: $verde;
			margin-bottom: 3px;
			text-indent: 15px;
		}
		
		input,
		select,
		textarea{
			width: 100%;
			background-color: #FFF;
			border: solid 1px #CCC;
			padding: 10px 15px;
			line-height: 40px;
			height: 40px;
			border-radius: 30px;
			
			&.error{
				border-color: $rosa;
			}
		}
		
		textarea{
			border-radius: 18px;
			height: 241px;
			line-height: 20px;
			padding: 15px;
		}
		
		.submit{
			width: 100%;
			background-color: $verde;
			border: solid 1px $verde;
			color: #FFF;
			line-height: 40px;
			height: 40px;
			border-radius: 30px;
			outline: none;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
}