/* ----- Content Block ----- */
.contentBlock { background-position: center; background-repeat: no-repeat; background-size: cover; clear: both; position: relative; height: auto; }

.contentBlock * { z-index: 2; }
.contentBlock .overlay { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; }

/* Content Block - Width */
.contentBlock.full-width { margin: unset; width: 100%; }
.contentBlock.site-width { margin: unset; }
.contentBlock.inner-width { margin: unset; }
.contentBlock.post-width { margin: unset; }
.contentBlock.mobile-width { margin: unset; }

/* Content Block - Horizontal & Vertical Align */
.contentBlock .inner-container, .contentBlock .inner-container.normal { flex-flow: column; align-items: normal; }
.contentBlock .inner-container.leftAlign { flex-flow: column; align-items: flex-start; }
.contentBlock .inner-container.h_center { flex-flow: column;  align-items: center; }
.contentBlock .inner-container.rightAlign { flex-flow: column; align-items: flex-end; }
.contentBlock .inner-container.topAlign { flex-flow: column; justify-content: flex-start; }
.contentBlock .inner-container.v_center { flex-flow: column; justify-content: center; }
.contentBlock .inner-container.bottomAlign { flex-flow: column; justify-content: flex-end; }
.contentBlock .inner-container.h_center.v_center { flex-flow: column; align-items: center; justify-content: center; }
.contentBlock .inner-container.h_center > p, .contentBlock .inner-container.h_center.v_center > p { text-align: center; }

/* Content Block - Background Colour */
.contentBlock.primary { background-color: var(--primary); }
.contentBlock.secondary { background-color: var(--secondary); }
.contentBlock.tertiary { background-color: var(--tertiary); }
.contentBlock.white { background-color: #fff; }
.contentBlock.black { background-color: #000; }
.contentBlock.whiteTrans { background-color: var(--whiteTrans); }
.contentBlock.blackTrans { background-color: var(--blackTrans); }

/* Content Block - Background Image */
.contentBlock .backgroundImage { width: 100%; height: 100%; }
.contentBlock .backgroundImage img.background, #main .contentBlock .backgroundImage img.background { width: 100%; height: 100%; object-fit: cover; }

/* Content Block - Aspect Ratio */
.Fit-Content { height: auto; }
.Square { aspect-ratio: 1/1; }
.Four-to-Three { aspect-ratio: 4/3; }
.Three-to-Two { aspect-ratio: 3/2; }
.Sixteen-to-Nine { aspect-ratio: 16/9; }
.TwentyOne-to-Nine { aspect-ratio: 21/9; }
.ThirtyTwo-to-Nine { aspect-ratio: 32/9; }

/* Content Block - White Text */
.whiteText * { color: #fff; }
/* ----- CTA Block ----- */
.ctaBlock { background-color: var(--primary); background-position: center; background-repeat: no-repeat; background-size: cover; flex-direction: column; flex-flow: column; justify-content: center; align-items: center; clear: both; position: relative; height: 100%; padding: 20px; margin-bottom: 15px; }
/*.ctaBlock:hover { background-color: var(--secondary); opacity: 0.7; }*/

.ctaBlock * { z-index: 2; }
.ctaBlock h1, .ctaBlock h2, .ctaBlock h3, .ctaBlock h4, .ctaBlock h5, .ctaBlock h6, .ctaBlock p { width: 100%; }
.ctaBlock h3 { font-weight: bold; }
.ctaBlock a.ctaLink { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; }
.ctaBlock .overlay { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; mix-blend-mode: multiply; }
.ctaBlock:hover .overlay { mix-blend-mode: unset; }

/* CTA Block - Background Colour */
.ctaBlock.primary { background-color: var(--primary); }
.ctaBlock.secondary { background-color: var(--secondary); }
.ctaBlock.tertiary { background-color: var(--tertiary); }
.ctaBlock.white { background-color: #fff; }
.ctaBlock.black { background-color: #000; }
.ctaBlock.whiteTrans { background-color: var(--whiteTrans); }
.ctaBlock.blackTrans { background-color: var(--blackTrans); }
.ctaBlock.transparent { background-color: transparent; }

/* CTA Block - White Text */
.whiteText * { color: #fff; }
/* ----- Grid Block ----- */
.gridBlock.gap { gap: 15px; }
.gridBlock > div { margin-bottom: 0; }
.gridBlock.gap > div { flex-grow: 1; }


/* Editor/Backend (Gutenberg) Styles */
.gridBlock .acf-innerblocks-container { display: flex; width: 100%!important; flex-basis: 100%!important; flex-wrap: wrap; }
.gridBlock.gap .acf-innerblocks-container { gap: 15px; }
.gridBlock .acf-innerblocks-container > div { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.gridBlock.gap .acf-innerblocks-container > div { flex-grow: 1; }


.columns-1 > div, .columns-1 .acf-innerblocks-container > div { width: 100%; flex-basis: 100%; }
.columns-2 > div, .columns-2 .acf-innerblocks-container > div { width: 50%; flex-basis: 50%; }
.columns-3 > div, .columns-3 .acf-innerblocks-container > div { width: 33.3333333333%; flex-basis: 33.3333333333%; }
.columns-4 > div, .columns-4 .acf-innerblocks-container > div { width: 25%; flex-basis: 25%; }
.columns-5 > div, .columns-5 .acf-innerblocks-container > div { width: 20%; flex-basis: 20%; }
.columns-6 > div, .columns-6 .acf-innerblocks-container > div { width: 16.6666666667%; flex-basis: 16.6666666667%; }
.columns-7 > div, .columns-7 .acf-innerblocks-container > div { width: 14.2857%; flex-basis: 14.2857%; }
.columns-8 > div, .columns-8 .acf-innerblocks-container > div { width: 12.5%; flex-basis: 12.5%; }
.columns-9 > div, .columns-9 .acf-innerblocks-container > div { width: 11.1111%; flex-basis: 11.1111%; }
.columns-10 > div, .columns-10 .acf-innerblocks-container > div { width: 10%; flex-basis: 10%; }
.columns-11 > div, .columns-11 .acf-innerblocks-container > div { width: 9.0909%; flex-basis: 9.0909%; }
.columns-12 > div, .columns-12 .acf-innerblocks-container > div { width: 8.33333333333%; flex-basis: 8.33333333333%; }

.columns-2.gap > div, .columns-2.gap .acf-innerblocks-container > div { width: 42.5%; flex-basis: 42.5%; }
.columns-3.gap > div, .columns-3.gap .acf-innerblocks-container > div { width: 28.333333333305%; flex-basis: 28.333333333305%; }
.columns-4.gap > div, .columns-4.gap .acf-innerblocks-container > div { width: 21.25%; flex-basis: 21.25%; }
.columns-5.gap > div, .columns-5.gap .acf-innerblocks-container > div { width: 17%; flex-basis: 17%; }
.columns-6.gap > div, .columns-6.gap .acf-innerblocks-container > div { width: 14.166666666695%; flex-basis: 14.166666666695%; }
.columns-7.gap > div, .columns-7.gap .acf-innerblocks-container > div { width: 12.142845%; flex-basis: 12.142845%; }
.columns-8.gap > div, .columns-8.gap .acf-innerblocks-container > div { width: 10.625%; flex-basis: 10.625%; }
.columns-9.gap > div, .columns-9.gap .acf-innerblocks-container > div { width: 9.444435%; flex-basis: 9.444435%; }
.columns-10.gap > div, .columns-10.gap .acf-innerblocks-container > div { width: 8.5%; flex-basis: 8.5%; }
.columns-11.gap > div, .columns-11.gap .acf-innerblocks-container > div { width: 7.727265%; flex-basis: 7.727265%; }
.columns-12.gap > div, .columns-12.gap .acf-innerblocks-container > div { width: 7.0833333333305%; flex-basis: 7.0833333333305%; }


@media (max-width: 1029px)
{
	/*Tablet*/
	.columns-6 > div, .columns-6 .acf-innerblocks-container > div, .columns-9 > div, .columns-9 .acf-innerblocks-container > div, .columns-12 > div, .columns-12 .acf-innerblocks-container > div { width: 33.3333333333%; flex-basis: 33.3333333333%; }
	.columns-8 > div, .columns-8 .acf-innerblocks-container > div { width: 25%; flex-basis: 25%; }
	.columns-4 > div, .columns-4 .acf-innerblocks-container > div { width: 50%; flex-basis: 50%; }

	.gridBlock.gap { gap: 15px!important; }
	.columns-6.gap > div, .columns-6.gap .acf-innerblocks-container > div, .columns-9.gap > div, .columns-9.gap .acf-innerblocks-container > div, .columns-12.gap > div, .columns-12.gap .acf-innerblocks-container > div { width: calc(33.3333333333% - 10px)!important; flex-basis: calc(33.3333333333% - 10px)!important; }
	.columns-8.gap > div, .columns-8.gap .acf-innerblocks-container > div { width: calc(25% - 11.25px)!important; flex-basis: calc(25% - 11.25px)!important; }
	.columns-4.gap > div, .columns-4.gap .acf-innerblocks-container > div { width: calc(50% - 7.5px)!important; flex-basis: calc(50% - 7.5px)!important; }
}

@media (max-width: 781px)
{
	/*Wordpress Tablet*/
	.columns-6 > div, .columns-6 .acf-innerblocks-container > div, .columns-8 > div, .columns-8 .acf-innerblocks-container > div, .columns-10 > div, .columns-10 .acf-innerblocks-container > div, .columns-12 > div, .columns-12 .acf-innerblocks-container > div { width: 50%; flex-basis: 50%; }
	.columns-6.gap > div, .columns-6.gap .acf-innerblocks-container > div, .columns-8.gap > div, .columns-8.gap .acf-innerblocks-container > div, .columns-10.gap > div, .columns-10.gap .acf-innerblocks-container > div, .columns-12.gap > div, .columns-12.gap .acf-innerblocks-container > div { width: calc(50% - 7.5px)!important; flex-basis: calc(50% - 7.5px)!important; }
}

@media (max-width: 767px)
{
	/*WordPress Mobile*/
	.columns-3 > div, .columns-3 .acf-innerblocks-container > div, .columns-5 > div, .columns-5 .acf-innerblocks-container > div, .columns-7 > div, .columns-7 .acf-innerblocks-container > div, .columns-9 > div, .columns-9 .acf-innerblocks-container > div, .columns-11 > div, .columns-11 .acf-innerblocks-container > div { width: 100%; flex-basis: 100%; }
	.columns-3.gap > div, .columns-3.gap .acf-innerblocks-container > div, .columns-5.gap > div, .columns-5.gap .acf-innerblocks-container > div, .columns-7.gap > div, .columns-7.gap .acf-innerblocks-container > div, .columns-9.gap, .columns-11.gap > div, .columns-11.gap .acf-innerblocks-container > div { width: 100%!important; flex-basis: 100%!important; }
}

@media (max-width: 600px)
{

}

@media (max-width: 480px)
{
	/*Mobile*/
	.gridBlock > div, .gridBlock.gap > div { width: 100%!important; flex-basis: 100%!important; }
}
/* ----- Image Fill Block ----- */
.imageFill { line-height: 0; }
.imageFill img { width: 100%; height: 100%; object-fit: cover; }

/* Image Fill Block - Aspect Ratio */
.Fit-Content { height: auto; }
.Square { aspect-ratio: 1/1; }
.Four-to-Three { aspect-ratio: 4/3; }
.Three-to-Four { aspect-ratio: 3/4; }
.Three-to-Two { aspect-ratio: 3/2; }
.Two-to-Three { aspect-ratio: 2/3; }
.Sixteen-to-Nine { aspect-ratio: 16/9; }
.Nine-to-Sixteen { aspect-ratio: 9/16; }
.TwentyOne-to-Nine { aspect-ratio: 21/9; }
.ThirtyTwo-to-Nine { aspect-ratio: 32/9; }

@media (max-width: 767px)
{
	/*Mobile*/
	.columnsBlock .imageFill { order: -1; }
}
/* ----- Panel Block ----- */
.panel { background-color: var(--primary); clear: both; width: 100%; padding: 20px 5%; margin: 0; margin-bottom: 15px; }
.panel.halfPadding { padding: 10px 5%; }
.panel.doublePadding { padding: 40px 5%; }
.panel.triplePadding { padding: 60px 5%; }
.panel.whiteText * { color: #fff; }
/*.panel *:last-child { padding-bottom: 0; margin-bottom: 0; }*/
.panel .wp-block-columns { margin-bottom: 0; }

/* Panel - Headings */
.panel h1, .panel h2, h1.panel, h2.panel { line-height: normal; text-align: center; }
.panel.whiteText h1, .panel.whiteText h2, h1.panel.whiteText, h2.panel.whiteText { color: #fff; }
.panel h1:last-child, .panel h2:last-child { padding-bottom: 0; margin-bottom: 0; }

/* Panel - Background Colour */
.panel.transparent { background-color: transparent; }
.panel.primary { background-color: var(--primary); }
.panel.secondary { background-color: var(--secondary); }
.panel.tertiary { background-color: var(--tertiary); }
.panel.white { background-color: #fff; }
.panel.whiteTrans { background-color: var(--whiteTrans); }
.panel.white *, .panel.whiteTrans * { color: var(--black); }
.panel.black { background-color: var(--black); }
.panel.blackTrans { background-color: var(--blackTrans); }
/* Website Maximum Width - Default: 1920px */
.site-width { max-width: 1920px; margin-left: auto; margin-right: auto; }

/*Website Inner Width - Default: 1280px*/
.inner-width { max-width: 1280px; margin-left: auto; margin-right: auto; }

/*Tablet Width */
.tablet-width { max-width: 1029px; margin-left: auto; margin-right: auto; }

/*Post Maximum Width - Default: 960px*/
.post-width, .single-post article.post { max-width: 960px; margin-left: auto; margin-right: auto; }

/*Mobile Width */
.mobile-width { max-width: 767px; margin-left: auto; margin-right: auto; }
