/* ----------------------------------------------------------------

	Layouts.scss

-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Bootstrap Adjustments
-----------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: auto;
	}
}

[class*="col-"]:not([class*="sticky-"]):not([class*="position-"]) {
	position: relative;
}

@include media-breakpoint-down(sm) {
	.card-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
		-webkit-column-gap: 1.25rem;
		-moz-column-gap: 1.25rem;
		column-gap: 1.25rem;
		orphans: 1;
		widows: 1;
		&.grid-2 {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
		}
		> * {
			display: inline-block;
			width: 100%;
		}
	}
}

.form-group {
	margin-bottom: 1rem;
}

/*	Custom Bootstap Columns */
@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
		.col#{$infix}-1-5 {
			flex: 0 0 auto;
			width: 20%;
		}
	}
}

#wrapper {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 auto;
	background-color: var(--#{$cnvs-prefix}body-bg);
	box-shadow: 0 0 10px rgba($black, 0.1);
	body:not(.stretched) & {
		@include media-breakpoint-up(xl) {
			max-width: map-get($grid-breakpoints, "xl");
		}
		@include media-breakpoint-up(xxl) {
			max-width: map-get($grid-breakpoints, "xxl");
		}
	}
	.stretched & {
		width: 100%;
		margin: 0;
		box-shadow: none;
	}
}

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

.section {
	position: relative;
	width: 100%;
	margin: var(--#{$cnvs-prefix}section-margin) 0;
	padding: var(--#{$cnvs-prefix}section-padding) 0;
	background-color: var(--#{$cnvs-prefix}section-bg);
	overflow: hidden;
	.container {
		z-index: 2;
		+ .video-wrap {
			z-index: 1;
		}
	}
}

.parallax {
	overflow: hidden;
	will-change: transform;
	position: relative;
	&-bg,
	.simpleParallax {
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
		will-change: transform;
		@include media-breakpoint-down(lg) {
			max-width: none;
			height: 100%;
		}
	}

	@mixin parallaxElCSS {
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
	}

	.simpleParallax {
		@include parallaxElCSS;
	}

	&.parallax-relative {
		.simpleParallax {
			position: relative;
			left: auto;
			top: auto;
		}
	}

	&-bg {
		opacity: 1;
		@include media-breakpoint-down(lg) {
			@include parallaxElCSS;
		}
		@at-root body:not(.has-plugin-parallax) & {
			opacity: 0;
			display: none;
		}
	}
}

.mobile-parallax,
.video-placeholder {
	background-size: cover !important;
	background-attachment: scroll !important;
	background-position: center center !important;
}

.revealer-image {
	position: relative;
	bottom: -100px;
	@include transition(bottom 0.3s ease-in-out);

	.section:hover & {
		bottom: -50px;
	}
}

/* ----------------------------------------------------------------
	Columns & Grids
-----------------------------------------------------------------*/

.postcontent,
.sidebar {
	position: relative;
}