/**
 * 
 * 11. Page sections
 * 
 */


/** 11.01 Sections layout **/
.row.sections {
	margin-left: 0;
	margin-right: 0;
}

.container-sections {
	background-color: transparent;
}

.section .main-content-inner .wpb_wrapper .wpb_content_element {
	&:last-child {
		margin-bottom: 0;
	}
	&:first-child .wpb_wrapper > *:first-child {
		margin-top: 0;
	}
}

.section {
	position: relative;
	overflow: hidden;
	@include box-sizing(border-box);
}

// Vertically centered content
.section {
	&.section-v-top > .container, 
	&.section-v-middle > .container, 
	&.section-v-bottom > .container {
		display: table;
		table-layout: fixed;
		width: 100%; //otherwise inner elements collapse. eg forms
		height: 100%;
		padding-top: 5em;
		padding-bottom: 5em;
	}
	&.section-v-top > .container > .row {
		display: table-cell;
		width: 100%;
		vertical-align: top;
	}
	&.section-v-middle > .container > .row {
		display: table-cell;
		width: 100%;
		vertical-align: middle;
	}
	&.section-v-bottom > .container > .row {
		display: table-cell;
		width: 100%;
		vertical-align: bottom;
	}
	&.no-padding > .container {
		padding: 0;
	}
	&.no-y-padding > .container {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.container-wrapper .container {
	z-index: 1;
	position: relative;
}

// Padding options
.section {
	&.small-padding > .container {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	&.medium-padding > .container {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	&.large-padding > .container {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

/** 11.02 Sections default colors **/
.section {
	&.dark {
		color: #fff;

		.section-title span {
			border-color: #fff;
		}
	}
	&.light {
		color: $color-darker-gray;

		.section-title span {
			border-color: $color-darker-gray;
		}
	}
}

/** 11.03 Sections shadows **/
.section {
	&.shadow-upper-lower .section-background-wrapper:after {
		box-shadow: inset 0 50px 55px -55px rgba(0, 0, 0, 1), inset 0px -50px 55px -55px rgba(0, 0, 0, 1);
	}
	&.shadow-upper .section-background-wrapper:after {
		box-shadow: inset 0 50px 55px -55px rgba(0, 0, 0, 1), inset 0px -50px 55px -55px rgba(0, 0, 0, 0);
	}
	&.shadow-lower .section-background-wrapper:after {
		box-shadow: inset 0 50px 55px -55px rgba(0, 0, 0, 0), inset 0px -50px 55px -55px rgba(0, 0, 0, 1);
	}
}

.section {
	&.shadow-upper-lower .section-background-wrapper:after, 
	&.shadow-upper .section-background-wrapper:after, 
	&.shadow-lower .section-background-wrapper:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		@include box-sizing(border-box);
		z-index: 6;
	}
	&.shadow-upper-lower .section-background-wrapper:after {
		box-shadow: inset 0 80px 55px -55px rgba(0, 0, 0, 0.72), inset 0px -80px 55px -55px rgba(0, 0, 0, 0.72);
	}
	&.shadow-upper .section-background-wrapper:after {
		box-shadow: inset 0 80px 55px -55px rgba(0, 0, 0, 0.72), inset 0px -80px 55px -55px rgba(0, 0, 0, 0);
	}
	&.shadow-lower .section-background-wrapper:after {
		box-shadow: inset 0 80px 55px -55px rgba(0, 0, 0, 0), inset 0px -80px 55px -55px rgba(0, 0, 0, 0.72);
	}
}


/** 11.04 Sections child elements **/
.section .section-title {
	font-size: 50px;
	line-height: 53px;
	margin-bottom: 25px;
	font-weight: 900;
	font-style: normal;
	letter-spacing: -1px;
}

.section-background-wrapper {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
}

.section-background {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	@include box-sizing(border-box);
	@include transition(opacity $duration-opacity $fn-cubic);

	&.color {
		z-index: 5;
	}

	&.gradient {
		z-index: 4;
	}

	&.pattern-overlay {
		z-index: 3;
	}

	&.revslider {
		z-index: 2;
	}

	&.revslider.nomouse {
		pointer-events: none;
	}

	&.image {
		z-index: 1;
	}

	&.video {
		z-index: 0;

		video {
			position: absolute;
		}
	}

	&.lazyload-bg,
	&.lazyloading-bg {
		opacity: 0; 
	}
}

/** 11.05 Section via shortcode **/
.wpb_wrapper .sections {
	.section > .container {
		padding-left: 0;
		padding-right: 0;
		width: 100%;

		> .row {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

// Section edit link
.section {
	.section-edit-link {
		@extend %simple-transition;
		@extend %text-theme;
		display: block;
		font-size: 12px;
		position: absolute;
		bottom: 10%;
		margin-top: -10px;
		left: -5px;
		display: block;
		opacity: 0;
		z-index: 8;
		@include transform( translateX( -100% ) );

		a {
			background-color: #5F5F5F;
			padding: 3px 3px 3px 15px;
			color: #FFF;
		}
	}

	&:hover .section-edit-link {
		display: block;
		opacity: 0.8;
		@include transform( translateX( 0 ) );
	}
}

// Single pagesection view
.single-pagesections {
	header.site-header, 
	> footer,
	.page-cover,
	> section.section, //hide pre-footer sections
	.main-content .container-main-content,
	.main-content-bottom-holder {
		display: none;
	}
}
