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

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

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

.ss-style-triangles::before {
	top: -50px;
	background: #2980b9;
}

.ss-style-triangles::after {
	bottom: -50px;
	z-index: 10;
	background: inherit;
}

/* Double Diagonal line */

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: #fff;
}

.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: #116094;
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
	-webkit-transform-origin: 3% 0;
	transform-origin: 3% 0;
}

/* 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;
}



/* Curves */
#curveUpColor path,
#curveDownColor path {
	fill: #202225;
	stroke: #202225;
	background: #fff;
}
svg#curveDownColor {
	background: #fff;
}

/* 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 #22313f, 50px -50px 0 #22313f;
}

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

/* Rounded corners */
.ss-style-roundedcorners::before {
	top: 100%;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 60px;
	border-radius: 0 0 60px 60px;
	background: inherit;
}

/* Rounded center split */
.ss-style-roundedsplitzzzzz {
	padding-top: 7em;
	border-radius: 0 0 80px 80px;
}

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

/* Bottom rounded */
.ss-style-bottom-rounded {
	padding-top: 7em;
	border-radius: 0 0 80px 80px;
}

/* Inverted rounded corners */
.ss-style-invertedrounded {
	margin-bottom: 90px;
	padding: 13em 10% 10em;
	border-radius: 0 0 0 90px;
}

.ss-style-invertedrounded::before,
.ss-style-invertedrounded::after {
	left: 0;
	z-index: -1;
	height: 90px;
	background: #ecf0f1;
}

.ss-style-invertedrounded::before {
	top: 100%;
	width: 100%;
	border-radius: 0 90px 0 0;
} 

.ss-style-invertedrounded::after {
	bottom: 0;
	z-index: -1;
	width: 50%;
}

/* 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%;
}

/* Zig Zag 3D */
.ss-style-zigzag3d::before{
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: 90px;
    background-size: 50px 100%;
  }

.ss-style-zigzag3d::before {
	top: -90px;
	background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db));
	background-image: linear-gradient(315deg, #d2d530 25%, transparent 25%), linear-gradient( 45deg, #ffac00 25%, transparent 25%);
	background-position: 50%;
}


/* Zig Zag 2D */
.ss-style-zigzag2d::after {
	right: 0;
	left: 0;
	z-index: 10;
	display: block;
	height: 90px;
	background-size: 50px 100%;
}

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

/* Edges */
.ss-style-roundedges {
	padding-bottom: 16em;
}

.ss-style-roundedges::before,
.ss-style-roundedges::after {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #DBDBDB;
	top: -100px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ss-style-roundedges::before {
	left: -100px;
}

.ss-style-roundedges::after {
	right: -100px;
}

/* Slit */
.ss-style-slit {
	padding-top: 5em;
}

.ss-style-slit::before, 
.ss-style-slit::after {
	width: 50.5%;
	width: -webkit-calc(50% + 10px);
	width: -moz-calc(50% + 10px);
	width: calc(50% + 10px);
	height: 160px;
	background: #59ab60;
	top: -160px;
}

.ss-style-slit::before {
	left: -20px;
	-webkit-transform: skewX(10deg);
	transform: skewX(10deg);
	box-shadow: -10px -20px #316a36;
}

.ss-style-slit::after {
	right: -20px;
	-webkit-transform: skewX(-10deg);
	transform: skewX(-10deg);
	box-shadow: 10px -20px #316a36;
}



/* 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, #202225), color-stop(0.5, #2980b9));
	background-image: linear-gradient(15deg, #2980b9 50%, #202225 50%);
}

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

/* Castle */
.ss-style-castle::before {
	left: 0;
	width: 100%;
	height: 50px;
	background-size: 200px 100%;
	top: 0;
	background-image: -webkit-linear-gradient(40deg, #202225 50%, #f89406 50%);
	background-image: linear-gradient(40deg, #202225 50%, #f89406 50%);
}

/* Alternative slit with inner shadow */
#slitPath1 {
	fill: #3498db;
	stroke: red;
	stroke-width: 0;
}

#slitPath2, #slitPath3 {
	fill: #2072a7;
}

/* 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, #d2527f 50%, #22313f 50%);
	background-image: linear-gradient(315deg, #22313f 50%, #d2527f 50%);
}

.ss-style-foldedcorner::after {
	right: 100px;
	background-image: -webkit-linear-gradient(top left, transparent 50%, #59abe3 50%);
	background-image: linear-gradient(315deg, #59abe3 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);
}

/* Stamp */
#stamp path {
	fill: #3498db;
	stroke: #3498db; /* avoid gap in FF */
}

/* Clouds */
#clouds path {
	fill: #ecf0f1;
	stroke: #ecf0f1;
}

/* Media Queries for the layout */
@media screen and (max-width: 68em) {
	section {
		font-size: 80%;
	}
}

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