*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* General styles and layout */

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

section h2 {
	margin: 0;
	padding: 0;
	font-size: 2.8em;
	font-weight: 400;
}

section p {
	color: rgba(0,0,0,.5);
	font-size: 1.3em;
	line-height: 1.5;
}

.text:first-child {
	text-align: right;
}

.text:nth-child(2) {
	text-align: left;
}

.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;
}

.icon {
	display: block;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: rgba(0,0,0,0.1);
	color: #fff;
	text-align: center;
	font-size: 8em;
	line-height: 2em;
	margin: 0 auto;
}

section.color h2 {
	color: #fff;
}

.color {
	background: #3498db;
}

/*** Individual section styles and separators ***/

/* Common style for pseudo-elements */
section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/* Half Circle */
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
	left: 50%;
	z-index: 10;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: inherit;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ss-style-halfcircle::before {
	top: -50px;
}

.ss-style-halfcircle::after {
	/* bottom: 50px; -- bottom circle */
	background: none;
}
/* 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;
}

/* Boxes */
.ss-style-boxes {
	padding-top: 13em;
	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%;
}

/* Zig Zag (3d up and simple down) */
.ss-style-zigzag::before,
.ss-style-zigzag::after {
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: 90px;
    background-size: 50px 100%;
  }

.ss-style-zigzag::before {
	top: 0;
}

.ss-style-zigzag::after {
	top: 100%;
	background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #2980b9));
	background-image: 
		linear-gradient(135deg, #3498db 25%, transparent 25%),
		linear-gradient(225deg, #3498db 25%, transparent 25%);
	background-position: 50%;
}

/* Inclined Zig Zag */
.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
	left: 0;
	width: 100%;
	height: 50px;
	background-size: 100px 100%;
}

.ss-style-inczigzag::before {
	top: 0;
	background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #2980b9), color-stop(0.5, #3498db));
	background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
}

.ss-style-inczigzag::after {
	bottom: 0;
}

/* Cross */
.ss-style-cross {
	padding-bottom: 5em;
}

.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);
}



/* Media Queries for the layout */
@media screen and (max-width: 68em) {
	section {
		font-size: 90%;
	}
	img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 75%;
	height: auto; }
}

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

	.text:first-child,
	.text:nth-child(2) {
		text-align: center;
	}

	.icon {
		margin: 0 auto;
	}

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

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