/* GENERAL STYLES *********************************************************************/

.container {
	overflow: hidden;
}

	.container svg {
		display: block;
	}

	.container > header {
		color: #fff;
		background: #3498db;
	}
	
	.container > header {
		margin: 0 auto;
		padding: 5em 2em 4em;
		text-align: center;
		background:#eee;
		
	}
	
		.container > header h1 {
			font-size: 6em;
			line-height: 1.3;
			margin: 0;
			font-weight: bold;
			color: #1b3664;
		}
		
		.container > header span {
			display: block;
			font-size: 50%;
			opacity: 0.7;
			padding: 0 0 0.6em 0.1em;
			font-weight: 300;
		}
		
		.container > header a,
		.container > header a:visited,
		.container > header a:link {
			color:#1b3664;
		}

section {
	position: relative;
	padding: 7em 10%;
	background: #2980b9;
	color: #fff;
	text-align: center;
}

	section h2 {
		margin: 0 0 20px;
		padding: 0;
		font-size: 5em;
		font-weight: bold;
		letter-spacing: -2px;
	}
	
	section p {
		color: rgba(0,0,0,.7);
		line-height: 1.5;
		font-size: 1.3em;
	}
	
		section p strong,
		section p a,
		section p a:visited,
		section p a:link {
			font-weight: 600;
			color: rgba(0,0,0,.7);
		}
		
			section p a:hover {
				color: rgba(0,0,0,.4);
			}
	
	.col-2 .column {
		width: 49%;
	}
	
	.col-3 .column {
		padding: 0 1%;
		width: 33%;
		text-align: center;
	}
		
		.col-3 .column p {
			padding: 1.4em;
		}
	
	.column {
		display: inline-block;
		vertical-align: top;
	}
	
	


/* INDIVIDUAL STYLES *********************************************************************/

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}


/* TRIANGLES */

.ss-style-triangles::before,
.ss-style-triangles::after {
	left: 50%;
	width: 65px;
	height: 65px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.ss-style-triangles::before {
	bottom: -25px;
	z-index: 10;
	background: rgb(54, 177, 197);
}

.ss-style-triangles::after {
	top: -40px;
	background: #eee;
}


/* DOUBLE DIAGONAL LINE */

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 8em;
	background: #2072a7;
}
	
	.ss-style-doublediagonal::before,
	.ss-style-doublediagonal::after {
		top: 0;
		left: -25%;
		z-index: -1;
		width: 150%;
		height: 75%;
		background: inherit;
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	
	.ss-style-doublediagonal::before {
		height: 50%;
		background: #CCC;
		-webkit-transform: rotate(-3deg);
		transform: rotate(-3deg);
		-webkit-transform-origin: 3% 0;
		transform-origin: 3% 0;
	}
	

/* BIG TRIANGLE */

svg#bigTriangleColor {
	pointer-events: none;
}

	#bigTriangleColor path {
		fill: #FFF;
		stroke: #FFF;
		stroke-width: 2;
	}


/* MULTIPLE TRIANGLES */

.ss-style-multitriangles::before,
.ss-style-multitriangles::after {
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

	.ss-style-multitriangles::before {
		top: -25px;
		background: inherit;
		box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
	}
	
	.ss-style-multitriangles::after {
		bottom: -25px;
		z-index: 10;
		background: inherit;
		box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
	}


/* ROUNDED CENTER SPLIT */

.ss-style-roundedsplit {
	padding-top: 7em;
	border-radius: 0;
}

	.ss-style-roundedsplit::before,
	.ss-style-roundedsplit::after {
		top: -70px;
		left: 0;
		z-index: 10;
		width: 50%;
		height: 70px;
		background: inherit;
	}
	
	.ss-style-roundedsplit::before {
		border-radius: 0 80px 0 0;
	}
	
	.ss-style-roundedsplit::after {
		left: 50%;
		border-radius: 80px 0 0 0;
	}


/* BOXES */

.ss-style-boxes {
	padding-top: 4em;
	padding-bottom: 13em;
}

	.ss-style-boxes::before {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
		background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%);
		-webkit-background-size: 130px 100%;
		background-size: 130px 100%;
	}


/* FOLDED CORNER */

.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
	bottom: 0;
	width: 100px;
	height: 100px;
}

	.ss-style-foldedcorner::before {
		right: 0;
		background-image: -webkit-linear-gradient(top left, #CCC 50%, #eee 50%);
		background-image: linear-gradient(315deg, #eee 50%, #ccc 50%);
	}
	
	.ss-style-foldedcorner::after {
		right: 100px;
		background-image: -webkit-linear-gradient(top left, transparent 50%, #032c45 50%);
		background-image: linear-gradient(315deg, #032c45 50%, transparent 50%);
	}


/* DOTS */

.ss-style-dots::before {
	bottom: 20px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #2072a7;
	box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
}


/* DOUBLE LINE */

.ss-style-doubleline::before {
	bottom: 30px;
	width: 140px;
	height: 2px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #2072a7;
	box-shadow: 0 30px 0 #2072a7;
}



/* CROSS */

.ss-style-cross {
	padding-bottom: 15em;
}

	.ss-style-cross::before,
	.ss-style-cross::after {
		background: #2072a7;
		bottom: 70px;
		width: 200px;
		height: 2px;
		left: 50%;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	
	.ss-style-cross::before {
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
	}
	
	.ss-style-cross::after {
		-webkit-transform: translateX(-50%) rotate(-45deg);
		transform: translateX(-50%) rotate(-45deg);
	}



/* Cross */
.ss-style-cross {
	padding-top: 15em;
}

.ss-style-cross::before {
	background: #2072a7;
	bottom: 70px;
	width: 200px;
	height: 2px;
	left: 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	
	-webkit-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
}


/* RESPONSIVE *********************************************************************/

@media screen and (max-width: 68em) {
	section,
	header {
		font-size: 80%;
	}

	section#recursos .item p {
		font-size: 1.3em;
	}
}


@media screen and (max-width: 54em) {
	.column {
		display: block;
		width: 100% !important;
	}

		.col-2 .column:first-child .icon {
			margin: 0 auto 50px;
		}
	
		.col-2 .column:nth-child(2) .icon {
			margin: 50px auto 0;
		}
}