/* Section */
section {
	&.section {
		background: #f7f7f7;
		border-top: 5px solid #f1f1f1;
		margin: 30px 0;
		padding: 50px 0;

		&.section-height-1 {
			padding: 0.7692307692rem 0;
		}
		&.section-height-2 {
			padding: 2.3076923077rem 0;
		}
		&.section-height-3 {
			padding: 4.6153846154rem 0;
		}
		&.section-height-4 {
			padding: 6.9230769231rem 0;
		}
		&.section-height-5 {
			padding: 9.2307692308rem 0;
		}

		&.section-funnel {
			position: relative;
			.section-funnel-layer-top {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				padding: 6rem 0;
			    transform: translate3d(0, -50%, 0);
			}
			.section-funnel-layer-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 6rem 0;
			    transform: translate3d(0, 50%, 0);
			}
			.section-funnel-layer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #FFF;
				&:nth-child(1) {
					transform: skewY(-4.7deg);
				}
				&:nth-child(2) {
					transform: skewY(4.7deg);
				}
			}
		}

		&.section-angled {
			position: relative;
			margin: 0;
			overflow: hidden;
			.section-angled-layer-top {
				position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    padding: 3rem 0;
		        transform: skewY(-0.7deg) translate3d(0, -50%, 0);
			}
			.section-angled-layer-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 3rem 0;
				transform: skewY(0.7deg) translate3d(0, 50%, 0);
			}
			.section-angled-layer-top + .section-angled-content,
			.section-angled-layer-top + .section-angled-layer-bottom + .section-angled-content {
				margin-top: 2.5rem;
			}

			.section-angled-layer-bottom + .section-angled-content,
			.section-angled-layer-bottom + .section-angled-layer-top + .section-angled-content {
				margin-bottom: 2.5rem;
			}

			.section-angled-layer-increase-angle {
				&.section-angled-layer-top {
			        transform: skewY(-2.2deg) translate3d(0, -50%, 0);
				}
				&.section-angled-layer-bottom {
					transform: skewY(2.2deg) translate3d(0, 50%, 0);
				}
			}
			.section-angled-layer-increase-angle-2 {
				&.section-angled-layer-top {
			        transform: skewY(-4.7deg) translate3d(0, -50%, 0);
				}
				&.section-angled-layer-bottom {
					transform: skewY(4.7deg) translate3d(0, 50%, 0);
				}
			}

			&.section-angled-reverse {
				.section-angled-layer-top {
					transform: skewY(2.5deg) translate3d(0, -50%, 0);
				}
				.section-angled-layer-bottom {
					transform: skewY(-2.5deg) translate3d(0, 50%, 0);
				}

				.section-angled-layer-increase-angle {
					&.section-angled-layer-top {
				        transform: skewY(2.2deg) translate3d(0, -50%, 0);
					}
					&.section-angled-layer-bottom {
						transform: skewY(-2.2deg) translate3d(0, 50%, 0);
					}
				}
				.section-angled-layer-increase-angle-2 {
					&.section-angled-layer-top {
				        transform: skewY(4.7deg) translate3d(0, -50%, 0);
					}
					&.section-angled-layer-bottom {
						transform: skewY(-4.7deg) translate3d(0, 50%, 0);
					}
				}
			}

			& + .section-angled {
				padding-top: 0;
			}
		}
	}

	&.section-dark {
	    background-color: #212529 !important;
	    border-color: #16181b !important;
	}
}