/* CONTAINER */

.b-container {
	margin: 0 auto;
	position: relative;
}

.b-container-frame {
	position: relative;
	padding: calc(var(--col-1) + var(--s5));
}

.b-container-background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100%;
	transform: translate(-50%, 0);
	overflow: hidden;
	background-color: transparent;
	pointer-events: none;
}

.b-container-background .b-img {
	position: absolute !important;
	top: 0;
	left: 50%;
	max-width: none;
	transform: translate(-50%, 0);
}

.b-container-background .b-img img {
	width: 100%;
	height: 100%;
}

.b-container-background .b-img:nth-child(1) {display: block;}
.b-container-background .b-img:nth-child(2) {display: none;}

.b-container[data-width="10"] {max-width: var(--col-10);}
.b-container[data-width="8"] {max-width: var(--col-8);}
.b-container[data-width="6"] {max-width: var(--col-6);}

.b-container[data-left-align] {margin-left: 0;}

@media screen and (min-width: 1281px) {
	.b-page .b-container[data-width="14"] {margin: 0 calc((var(--col-1) + var(--s5)) * -1);}
}

@media screen and (max-width: 960px) {
	.b-container-frame {padding: var(--s5);}
	.b-container-background .b-img:nth-child(1) {display: none;}
	.b-container-background .b-img:nth-child(2) {display: block;}
}



/* OPTIONS */

.b-container[data-background="white"] > .b-container-background {background-color: var(--white);}
.b-container[data-background="light-blue"] > .b-container-background {background-color: var(--light-blue-300);}
.b-container[data-background="dark-blue"] > .b-container-background {background-color: var(--med-blue-400);}

.b-container[data-bg-alignment="center"] > .b-container-background .b-img:nth-child(1) {top: 50%; transform: translate(-50%, -50%);}
.b-container[data-bg-alignment-mobile="center"] > .b-container-background .b-img:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}

.b-container[data-bg-alignment="bottom"] > .b-container-background .b-img:nth-child(1) {top: auto; bottom: 0;}
.b-container[data-bg-alignment-mobile="bottom"] > .b-container-background .b-img:nth-child(2) {top: auto; bottom: 0; transform: translate(-50%, 0);}

.b-container[data-padding="medium"] > .b-container-frame {padding: var(--s7);}
.b-container[data-padding="small"] > .b-container-frame {padding: var(--s5);}
.b-container[data-padding="none"] > .b-container-frame {padding: 0;}

@media screen and (max-width: 960px) {
	.b-container[data-padding="medium"] > .b-container-frame {padding: var(--s5);}
}



/* CUSTOM LAYOUT */

.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
.b-page .b-container[data-layout] > .b-container-frame {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.b-container[data-layout] .b-container {margin: 0;}
.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > *:nth-child(n+3) {opacity: 0.25;}
.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(n+3) {display: none;}

.b-container[data-layout="60-40"] > .b-container-frame {
	--container-width-left: calc(60% - var(--s3));
	--container-width-right: calc(40% - var(--s3));
}

.b-container[data-layout="50-50"] > .b-container-frame {
	--container-width-left: calc(50% - var(--s3));
	--container-width-right: calc(50% - var(--s3));
}

.b-container[data-layout="75-25"] > .b-container-frame {
	--container-width-left: calc(75% - var(--s3));
	--container-width-right: calc(21% - var(--s3));
}


.b-container[data-layout="40-60"] > .b-container-frame {
	--container-width-left: calc(40% - var(--s3));
	--container-width-right: calc(60% - var(--s3));
}

.b-container[data-layout="25-75"] > .b-container-frame {
	--container-width-left: calc(25% - var(--s3));
	--container-width-right: calc(75% - var(--s3));
}

@media screen and (min-width: 961px) {
	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(1) {width: var(--container-width-left);}

	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(2),
	.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(2) {width: var(--container-width-right);}

	/* layout options */

	.b-container[data-layout-options~="center-vertically"] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout-options~="center-vertically"] > .b-container-frame {align-items: center;}

	.b-container[data-layout-options~="left-offset"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page .b-container[data-layout-options~="left-offset"] > .b-container-frame > *:nth-child(1) {width: calc(var(--container-width-left) - var(--s5));}

	.b-container[data-layout-options~="right-offset"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(2),
	.b-page .b-container[data-layout-options~="right-offset"] > .b-container-frame > *:nth-child(2) {width: calc(var(--container-width-right) - var(--s5));}
}

@media screen and (max-width: 960px) {
	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout] > .b-container-frame {flex-direction: column; gap: var(--s5) 0;}

	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout] > .b-container-frame > * {width: 100%;}
}


/* STICKY SIDE CONTENT */ 


.b-container[data-variant="sticky"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
.b-page .b-container[data-variant="sticky"] > .b-container-frame > *:nth-child(1) {
	position: sticky;
	top: var(--s8);
}


@media screen and (max-width: 960px) {
	.b-container[data-variant="sticky"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page .b-container[data-variant="sticky"] > .b-container-frame > *:nth-child(1) { 
		top: 0;
		z-index: 4;
		transition: opacity .25s;
	}

	.b-page[data-scroll="up"] .b-container[data-variant="sticky"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page[data-scroll="up"] .b-container[data-variant="sticky"] > .b-container-frame > *:nth-child(1) {
		top: 0;
		transition: opacity .25s;
	}
}