/* Section Featured */
section {
	&.section {
		background: var(--grey-100);
		border-top: 5px solid var(--grey-100);
		margin: 30px 0;
		padding: 50px 0;

		> .container {
			position: relative;
		}

		&.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-no-background {
			background: transparent;
			border-top-color: transparent;
		}

		&.section-center {
			text-align: center;
		}

		&.section-text-light {
			h1, h2, h3, h4, h5, h6 {
				color: var(--light);
			}

			p {
				color: darken(#FFF, 10%);
			}
		}

		&.section-background {
			background-repeat: repeat;
			border: 0;
		}

		&.section-background-change-anim {
			animation-name: colorTransition;
			animation-duration: 25s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		&.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: var(--light);
				&: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(-1.7deg) translate3d(0, -50%, 0);
				}
				&.section-angled-layer-bottom {
					transform: skewY(1.7deg) translate3d(0, 50%, 0);
				}
			}
			.section-angled-layer-increase-angle-2 {
				&.section-angled-layer-top {
					padding: 7rem 0;
			        transform: skewY(-4.7deg) translate3d(0, -50%, 0);
				}
				&.section-angled-layer-bottom {
					padding: 7rem 0;
					transform: skewY(4.7deg) translate3d(0, 50%, 0);
				}
			}

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

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

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

		&.overlay {
			.section-angled-layer-top,
			.section-angled-layer-bottom {
				z-index: 99 !important;
			}
		}

		&.section-overlay {
			position: relative;
			&:before {
				content: "";
				display: block;
				background: var(--dark-rgba-20);
				bottom: 0;
				height: 100%;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
			}
			.section-angled-layer-top,
			.section-angled-layer-bottom {
				z-index: 99 !important;
			}
		}

		&.section-overlay-dot {
			&:before {
				background: url(../img/overlay-dot.png) repeat scroll 0 0 transparent;
			}
		}

		&.section-overlay-opacity {
			position: relative;
			&:before {
				content: "";
				display: block;
				background: rgba(0,0,0,0.5);
				bottom: 0;
				height: 100%;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
			}
			&.section-overlay-opacity-scale-1 {
				&:before {
					background: var(--dark-rgba-10);
				}
			}
			&.section-overlay-opacity-scale-2 {
				&:before {
					background: var(--dark-rgba-20);
				}
			}
			&.section-overlay-opacity-scale-3 {
				&:before {
					background: var(--dark-rgba-30);
				}
			}
			&.section-overlay-opacity-scale-4 {
				&:before {
					background: var(--dark-rgba-40);
				}
			}
			&.section-overlay-opacity-scale-5 {
				&:before {
					background: var(--dark-rgba-50);
				}
			}
			&.section-overlay-opacity-scale-6 {
				&:before {
					background: var(--dark-rgba-60);
				}
			}
			&.section-overlay-opacity-scale-7 {
				&:before {
					background: var(--dark-rgba-70);
				}
			}
			&.section-overlay-opacity-scale-8 {
				&:before {
					background: var(--dark-rgba-80);
				}
			}
			&.section-overlay-opacity-scale-9 {
				&:before {
					background: var(--dark-rgba-90);
				}
			}
		}

		&.section-overlay-opacity-light {
			&:before {
				background: var(--light-rgba-50);
			}
			&.section-overlay-opacity-light-scale-1 {
				&:before {
					background: var(--light-rgba-10);
				}
			}
			&.section-overlay-opacity-light-scale-2 {
				&:before {
					background: var(--light-rgba-20);
				}
			}
			&.section-overlay-opacity-light-scale-3 {
				&:before {
					background: var(--light-rgba-30);
				}
			}
			&.section-overlay-opacity-light-scale-4 {
				&:before {
					background: var(--light-rgba-40);
				}
			}
			&.section-overlay-opacity-light-scale-5 {
				&:before {
					background: var(--light-rgba-50);
				}
			}
			&.section-overlay-opacity-light-scale-6 {
				&:before {
					background: var(--light-rgba-60);
				}
			}
			&.section-overlay-opacity-light-scale-7 {
				&:before {
					background: var(--light-rgba-70);
				}
			}
			&.section-overlay-opacity-light-scale-8 {
				&:before {
					background: var(--light-rgba-80);
				}
			}
			&.section-overlay-opacity-light-scale-9 {
				&:before {
					background: var(--light-rgba-90);
				}
			}
		}

		&.section-overlay-opacity-gradient {
			&:before {
				opacity: 0.85;
			}
		}

		&.section-video {
			background: none !important;
			border: 0;
		}

		&.section-parallax {
			background-color: transparent;
			background-position: 50% 50%;
			background-repeat: repeat;
			background-attachment: fixed;
			border: 0;
			&.parallax-disabled {
				background-attachment: scroll !important;
				background-position: 50% 50% !important;
			}
		}

		&.section-no-border {
			border: 0;
		}

		&.section-with-divider {
			margin: 56px 0 35px;
			.divider {
				margin: -56px 0 44px;
			}
		}

		&.section-footer {
			margin-bottom: -50px;
		}

		&.section-with-mockup {
			margin-top: 120px;
		}

		&.section-front {
			position: relative;
			z-index: 1;
		}

	}
}

// Responsive
@media (max-width: 991px) {
	.container-fluid > .row > .p-0 {
		section.section {
			margin-bottom: 0;
			margin-top: 0;
		}
		&:first-child {
			section.section {
				margin-bottom: 0;
				margin-top: 30px;
			}
		}
		&:last-child {
			section.section {
				margin-bottom: 30px;
				margin-top: 0;
			}
		}
	}
}

/* Section With Shape Divider */
@keyframes shapeDividerToLeft {
	from {
	    transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-200%, 0, 0);
	}
}

@keyframes shapeDividerToRight {
	from {
	    transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(200%, 0, 0);
	}
}

.section {
	&.section-with-shape-divider {
		position: relative;
		overflow: hidden;
		.shape-divider {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 80px;
			z-index: 1;

			svg {
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				transform: translate3d(-50%, 0, 0);
			}

			@media(min-width: 1950px) {
				svg {
					width: 100%;
				}
			}

			&.shape-divider-bottom {
				top: auto;
				bottom: 0;
			}
			&.shape-divider-reverse-y {
			    transform: rotateY(180deg);
			}
			&.shape-divider-reverse-x {
			    transform: rotateX(180deg);
			}
			&.shape-divider-reverse-xy {
				transform: rotateY(180deg) rotateX(180deg);
			}

			// Horizontal Animation
			.shape-divider-horizontal-animation {
				position: absolute;
			    top: 0;
			    left: 0;
			    width: 100vw;
			    height: 100%;
				animation-duration: 45s;
				animation-iteration-count: infinite;
			    animation-timing-function: linear;

			    > svg {
			    	width: 100vw;
			    	left: 0;
			    	transform: none;
			    }

				&.shape-divider-horizontal-animation-to-right {
					&.start {
						animation-name: shapeDividerToRight;
					}

					> svg:nth-child(2) {
						transform: rotateY(180deg) translate3d(99.9%, 0, 0);
					}
					> svg:nth-child(3) {
						transform: translate3d(-199.8%, 0, 0);
					}
				}

				&.shape-divider-horizontal-animation-to-left {
					&.start {
						animation-name: shapeDividerToLeft;
					}

					> svg:nth-child(2) {
						transform: rotateY(180deg) translate3d(-99.9%, 0, 0);
					}
					> svg:nth-child(3) {
						transform: translate3d(199.8%, 0, 0);
					}
				}
			}
			&.shape-divider-reverse-y,
			&.shape-divider-reverse-xy {
				.shape-divider-horizontal-animation {
					&.shape-divider-horizontal-animation-to-right {
						&.start {
							animation-name: shapeDividerToLeft;
						}
						> svg:nth-child(2) {
							transform: rotateY(180deg) translate3d(-99.9%, 0, 0);
						}
						> svg:nth-child(3) {
							transform: translate3d(199.8%, 0, 0);
						}
					}
					&.shape-divider-horizontal-animation-to-left {
						&.start {
							animation-name: shapeDividerToRight;
						}
						> svg:nth-child(2) {
							transform: rotateY(180deg) translate3d(99.9%, 0, 0);
						}
						> svg:nth-child(3) {
							transform: translate3d(-199.8%, 0, 0);
						}
					}
				}
			}
			&.shape-divider-reverse-x {
				.shape-divider-horizontal-animation {
					&.shape-divider-horizontal-animation-to-right {
						&.start {
							animation-name: shapeDividerToRight;
						}
					}
					&.shape-divider-horizontal-animation-to-left {
						&.start {
							animation-name: shapeDividerToLeft;
						}

						> svg:nth-child(2) {
							transform: rotateY(180deg) translate3d(-99.9%, 0, 0);
						}
						> svg:nth-child(3) {
							transform: translate3d(199.8%, 0, 0);
						}
					}
				}
			}
			
		}

		// If has overlay
		&.overlay {
			&:before {
				z-index: 1;
			}
		}
	}
}

/* Sections - Skin */
@each $name, $var in $colors-list {
    section.section-#{$name} {
        background-color: var(--#{$name}) !important;
        border-color: var(--#{$name}-100) !important;

        h1, h2, h3, h4, h5, h6 {
            color: var(--#{$name}-inverse);
        }

        p {
            color: var(--#{$name}-inverse);
        }
    }

    section.section-#{$name}-scale-2 {
        background-color: var(--#{$name}-300) !important;
        border-color: var(--#{$name}-300) !important;

        .sort-source {
			&.sort-source-style-2 {
				> li {
				&.active {
					> a {
						&:after {
							border-top-color: var(--#{$name}-300);
						}
					}
				}
				}
			}
        }
    }
}

section {
	&.section {
		&.section-background-half-primary-half-secondary {
			background: linear-gradient(to right, var(--primary) 50%, var(--secondary) 50%);
		}
	}
}

section {
	&.section {
		&.section-overlay-opacity-gradient {
			&:before {
				background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 80%);
			}
		}
	}
}