/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
[class*="uagb-columns__columns-"],
.uagb-columns__inner-wrap {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
}

.uagb-columns__wrap {
	position: relative;
	margin-left: auto;
	margin-right: auto;

	.uagb-columns__overlay,
	.uagb-columns__video-wrap {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}

	.uagb-columns__video-wrap {
		overflow: hidden;
		z-index: 0;
		-webkit-transition: opacity 1s;
		-o-transition: opacity 1s;
		transition: opacity 1s;
	}

	.uagb-columns__video-wrap video {
		max-width: 100%;
		width: 100%;
		height: 100%;
		margin: 0;
		line-height: 1;
		border: none;
		display: inline-block;
		vertical-align: baseline;
		-o-object-fit: cover;
		object-fit: cover;
		background-size: cover;
	}

	.uagb-columns__shape {
		overflow: hidden;
		position: absolute;
		left: 0;
		width: 100%;
		line-height: 0;
		direction: ltr;
		z-index: 1;
	}

	.uagb-columns__shape-top {
		top: -3px;
	}

	.uagb-columns__shape-bottom {
		bottom: -3px;
	}

	.uagb-columns__shape[data-negative="false"].uagb-columns__shape-bottom,
	.uagb-columns__shape[data-negative="true"].uagb-columns__shape-top {
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	.uagb-columns__shape.uagb-columns__shape-flip svg {
		transform: translateX(-50%) rotateY(180deg);
	}

	.uagb-columns__shape svg {
		display: block;
		width: -webkit-calc(100% + 1.3px);
		width: calc(100% + 1.3px);
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.uagb-columns__shape .uagb-columns__shape-fill {
		fill: #333;
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.uagb-columns__shape.uagb-columns__shape-above-content {
		z-index: 9;
		pointer-events: none;
	}
}

.uagb-columns__valign-center,
.uagb-columns__valign-middle {
	.uagb-column__wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.uagb-columns__valign-top {
	.uagb-column__wrap {
		-webkit-box-align: flex-start;
		-webkit-align-items: flex-start;
		-ms-flex-align: flex-start;
		align-items: flex-start;
	}
}

.uagb-columns__valign-bottom {
	.uagb-column__wrap {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}

.uagb-columns__columns-1 > .uagb-column__wrap {
	width: 100%;
}

.uagb-columns__columns-2 > .uagb-column__wrap {
	width: 50%;
}

.uagb-columns__columns-3 > .uagb-column__wrap {
	width: 33.33%;
}

.uagb-columns__columns-4 > .uagb-column__wrap {
	width: 25%;
}

.uagb-columns__columns-5 > .uagb-column__wrap {
	width: 20%;
}

.uagb-columns__columns-6 > .uagb-column__wrap {
	width: 16.66%;
}

.uagb-columns__gap-nogap > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 0;
}

.uagb-columns__gap-default > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 10px;
}

.uagb-columns__gap-narrow > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 5px;
}

.uagb-columns__gap-extended > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 15px;
}

.uagb-columns__gap-wide > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 20px;
}

.uagb-columns__gap-wider > .uagb-columns__inner-wrap > .wp-block[data-type="uagb/column"] {
	padding: 30px;
}

@media ( max-width: 976px ) {
	.uagb-columns__stack-tablet > .uagb-columns__columns-1 > .uagb-column__wrap,
	.uagb-columns__stack-tablet > .uagb-columns__columns-2 > .uagb-column__wrap,
	.uagb-columns__stack-tablet > .uagb-columns__columns-3 > .uagb-column__wrap,
	.uagb-columns__stack-tablet > .uagb-columns__columns-4 > .uagb-column__wrap,
	.uagb-columns__stack-tablet > .uagb-columns__columns-5 > .uagb-column__wrap,
	.uagb-columns__stack-tablet > .uagb-columns__columns-6 > .uagb-column__wrap {
		width: 100% !important;
	}

	.uagb-columns__stack-tablet {
		display: block;

		> .uagb-columns__inner-wrap {
			// For Backword.
			display: block;
		}

		&.uagb-columns__reverse-tablet .uagb-columns__inner-wrap {
			display: flex;
			flex-direction: column-reverse;
		}
	}

	.uagb-columns__reverse-tablet .uagb-columns__inner-wrap {
		display: flex;
		flex-direction: row-reverse;
	}
}

@media ( max-width: 767px ) {
	.uagb-columns__stack-mobile > .uagb-columns__columns-1 > .uagb-column__wrap,
	.uagb-columns__stack-mobile > .uagb-columns__columns-2 > .uagb-column__wrap,
	.uagb-columns__stack-mobile > .uagb-columns__columns-3 > .uagb-column__wrap,
	.uagb-columns__stack-mobile > .uagb-columns__columns-4 > .uagb-column__wrap,
	.uagb-columns__stack-mobile > .uagb-columns__columns-5 > .uagb-column__wrap,
	.uagb-columns__stack-mobile > .uagb-columns__columns-6 > .uagb-column__wrap {
		width: 100% !important;
	}

	.uagb-columns__stack-mobile {
		display: block;

		> .uagb-columns__inner-wrap {
			// For Backword.
			display: block;
		}

		&.uagb-columns__reverse-mobile,
		&.uagb-columns__reverse-tablet {
			.uagb-columns__inner-wrap {
				display: flex;
				flex-direction: column-reverse;
			}
		}
	}

	.uagb-columns__stack-tablet.uagb-columns__reverse-mobile .uagb-columns__inner-wrap {
		display: flex;
		flex-direction: column-reverse;
	}

	.uagb-columns__reverse-mobile .uagb-columns__inner-wrap {
		display: flex;
		flex-direction: row-reverse;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.wp-block-uagb-columns.uagb-columns__wrap.uagb-columns__background-image {
		background-attachment: scroll;
	}
}

@media ( max-width: 449px ) {
	.uagb-columns__wrap {
		.uagb-column__wrap.uagb-column__background-image {
			background-attachment: scroll !important;
		}
	}
}
