@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";


// Modifying
.section-one-screen {
	@include flex-min-height( 100vh, '.section-one-screen-inner' );
}


// Sizing
.section-xs {
	padding: 30px 0;
}

.section-sm,
.section-md,
.section-lg,
.section-xl,
.section-xxl {
	padding: 50px 0;
}


// Modifying
.section-boxed {
	margin-left: 10px;
	margin-right: 10px;
}

.position-relative {
	position: relative;
}


// Media
@include media-breakpoint-up(md) {
	.section-md,
	.section-lg,
	.section-xl,
	.section-xxl {
		padding: 60px 0;
	}
}

@include media-breakpoint-up( lg ) {
	.section-md {
		padding: 80px 0;
	}

	.section-lg,
	.section-xl,
	.section-xxl {
		padding: 100px 0;
	}
}

@include media-breakpoint-up( xl ) {

	.section-md {
		padding: 100px 0;

		&-bottom-120 {
			padding-bottom: 120px;
		}
	}

	.section-lg,
	.section-xl,
	.section-xxl {
		padding: 150px 0;
	}
}

@include media-breakpoint-up( xxl ) {
	.section-xl {
		padding: 200px 0;
	}

	.section-xxl {
		padding: 280px 0;
	}

	.section-boxed {
		margin-left: $grid-gutter-width;
		margin-right: $grid-gutter-width;
	}
}

// One screen section
@include media-breakpoint-up( lg ) {
	.section-wide {
		@include flex-min-height( 500px, '.section-wide-inner' );

		.section-wide-inner {
			justify-content: flex-end;
		}
	}

}

@include media-breakpoint-up( xxl ) {
	.section-wide {
		.section-wide-inner {
			min-height: 700px;
		}
	}
}