/* Sections
----------------------------------------------------------*/

section, .section {
	position: relative;
	padding: 90px 0;
	overflow: hidden;

	&.section-sm {
		padding: 60px 0;
	}
	&.section-xs {
		padding: 30px 0;
	}
	&.section-lg {
		padding: 120px 0;
	}
	&.section-xl {
		padding: 150px 0;
	}
	&.cover {
		padding: 0;
		width: 100%;
	}
	&.protrude {
		overflow: visible;
		z-index: 2;

		& ~ * {
			z-index: 1;
		}
	}
}

.section-double { 
	padding: 0; 
	height: 50vw; 
	max-height: 700px; 

	&.fullheight {
		height: 100vh;
		max-height: none;
	}
}

.section-double .image { 
	overflow: hidden; 
	position: absolute; 
	height: 100%; 
}

.section-double .content { 
	position: relative;
	top: 50%;
	left: 50%;
	padding: 0 7%;
	@include translate3d(0,-50%,0);
	@include transition(all 0.3s);
}

html[dir="rtl"] .section-double .content {
	left: 0;
	right: 50%;
}

.section-double.left .image { left: 0; }
.section-double.left .content { right: 0; }
.section-double.right .image { right: 0; }
.section-double.right .content { left: 0; }

html[dir="rtl"] {
	.section-double.left .image { left: auto; right: 0; }
	.section-double.left .content { left: 0; }
	.section-double.right .image { right: auto; left: 0; }
	.section-double.right .content { right: 0; }
}

.section-image-edge {
	.image {
		padding-left: 0;
		padding-right: 0;

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

	.container div[class*="col-"] {
    	position: absolute;
    	top: 50%;
    	@include translate3d(0,-50%,0);
    }
}

html[dir="rtl"] .section-image-edge {
    .image {
        &.right { text-align: left; }
        &.center { text-align: center; }
    }
}

@media #{$screen-sm} {
	.section-double {
		height: auto !important;
		max-height: none;
		.image {
			position: relative;
			height: 100vh;
			max-height: 500px;
		}
		.content {
			@include translate3d(0,0,0);
			top: 0;
			left: 0;
			padding: 90px 6%;
		}
	}

	html[dir="rtl"] .section-double .content {
		left: auto;
		right: 0;
	}

	.section-image-edge {
		.container > div[class*="col-"] {
			position: relative;
    		top: 0;
    		@include translate3d(0,0,0);
		}
	}
}