/******************************************************************
Theme Name: Simpsons Creative Grid 2022
Description: A responsive theme for WordPress, developed by Simpsons Creative, allowing for development of responsive websites - through the use of a dynamic grid system.
Author: Simpsons Creative
Version: 2022.11.28
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
******************************************************************/

/* Fonts - Need to be at top of style.css to load correctly */
/*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');*/

/* Brandon Grotesque - Adobe Fonts */
/*@import url("https://use.typekit.net/sdo7hjj.css");*/ /*brandon-grotesque, Arial, Helvetica, sans-serif;*/


/*
font-family: 'Lato', sans-serif; - BODY COPY
font-family: 'Roboto', sans-serif; - HEADINGS
 */


:root
{
	/* Set up CSS variables
		how to use:
		var(--red)
	*/

/*theme colours*/
	--primary: #1B2342;
	--secondary: #B79775;
	--blue: #1B2342;
	--blueTrans: rgba(27, 35, 66, 0.5);
	--tan: #B79775;
	--lightBlue: #0AE9FF;
	--white: #FFFFFF;
	--whiteTrans: rgba(255, 255, 255, 0.8);
	--grey: #7B868C;
	--black: #000000;
	--blackTrans: rgba(51, 51, 51, 0.76);
	--shadow: 20px 20px 20px rgba(0, 0, 0, 0.4);


/*Theme font sizes

	how to use:
	var(--fs-h1)
	==clamp (min value, ideal, max value)
*/
	--fs-h1: clamp(40px, 3vw, 45px);			/*var(--fs-h1)*/
 	--fs-h2: clamp(24px, 3vw, 30px);			/*var(--fs-h2)*/
 	--fs-h3: clamp(18px, 3vw, 24px);			/*var(--fs-h3)*/
 	--fs-h4: clamp(16px, 3vw, 22px);			/*var(--fs-h4)*/
 	--fs-h5: clamp(14px, 3vw, 20px);			/*var(--fs-h5)*/
 	--fs-h6: clamp(14px, 3vw, 18px);			/*var(--fs-h6)*/
 	--fs-normal: clamp(16px, 3vw, 20px);		/*default var(--fs-normal)*/
 	--fs-small: clamp(14px, 3vw, 18px);			/*default var(--fs-small)*/
 	--fs-fine: clamp(12px, 3vw, 16px);			/*default var(--fs-fine)*/
 	--fs-button: clamp(16px, 3vw, 20px);		/*default var(--fs-button)*/
 	--fs-large: clamp(16px, 3vw, 24px);			/*default var(large)*/
 	--fontFamily: Gill Sans, Calibri, sans-serif;
 }

/*Theme font sizes responsive*/
@media (max-width: 1280px)
{
	:root {
		 	/*--fs-h1: 20px;*/ /* can overwrite clamp values with media queries here, if needed*/
 	}
}


/* Site Structure */
html { font-size: 62.5%; /**** 1rem now = 10px;/****/ }

/* Offset anchor links with fixed header */
html { scroll-padding-top: 175px; }

body
{
	font-family: var(--fontFamily);

	font-size: calc(12px + 0.5vw); /* Responsive base font size */
}

/* Website Maximum Width - Default: 1920px */
.site-width { max-width: 1920px; }

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

/*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; }

/*Header*/

/*Footer*/
#footer { background-color: pink; }
.inner-footer { background-color: purple; }

.right { float: right; }


/*==================== Standards ====================*/
	/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc. */
	* {  font-family: var(--fontFamily);
 }

	/*Text*/
	h1, h2, h3, h4, h5, h6, p { color: var(--blue); margin: 0 0 5px 0; }
	h1, h2, h3, h4, h5, h6 { font-family: var(--fontFamily); font-style: normal; }
	h1, h2, h3, h4, h5 { font-weight: bold; }

	a { color: var(--tan); text-decoration: none; }
	a:visited { color: var(--tan); }
	a:hover { color: var(--lightBlue); text-decoration: none; }
	h1 { font-size: var(--fs-h1); }
	h2 { font-size: var(--fs-h2); padding-bottom: 0.5em; }
	h3 { font-size: var(--fs-h3); padding-bottom: 0.25em; }
	h4 { font-size: var(--fs-h4); padding-bottom: 0.25em; }
	h5 { font-size: var(--fs-h5); }
	h6 { font-size: var(--fs-h6); }
	p, #content li { color: var(--blue); font-family: var(--fontFamily); font-size: var(--fs-normal); line-height: 1.4em; padding-bottom: 1em;
}
	em { font-style: italic; }

	#content { clear: both; }


	/* Lists */
	#content ul, #content ol { margin-left: 0; margin-bottom: 0; }
	#content li { margin-left: 1em; padding-bottom: 1em; margin-bottom: 5px; }
	#content li::marker { float: left; }
	ul.twoColumns, ol.twoColumns { column-count: 2; }
	h3 + ul, h4 + ul { padding-top: 0.75em; }
	h5 + ul, h6 + ul { padding-top: 1em; }

	/*Bullet Points/Numbered Lists*/
	.entry-content ul > li { list-style-type: disc; padding-bottom: 5px; }
	.entry-content ol > li { list-style-type: decimal; padding-bottom: 5px; }
	.entry-content ul li ul { padding-top: 1em; margin-top: 5px; }


	/*Gallery Fix*/
	#content ul.blocks-gallery-grid { margin-left: unset; }
	#content .blocks-gallery-grid li.blocks-gallery-item { margin-bottom: 1em; }
	#content .wp-block-gallery li { margin-left: unset; padding-bottom: unset; }
	/*Gallery Caption*/
	.wp-caption-text, .gallery-caption { text-align: center; }
	.wp-block-gallery figcaption { line-height: normal; text-align: center; }



/*==================== Header ====================*/
	#header { background-color: var(--blue); display: flex; height: 150px; position: fixed; top: 0; left: 0; z-index: 9999; padding: 25px 5%; }

	body.home #header { background-color: transparent; height: 280px; position: absolute; }
	body.home .logoArea img { width: 60vw; height: auto; max-width: 300px; }

	.inner-header { float: unset; display: flex; justify-content: space-between; width: 100%; align-items: center; }
	.logoArea {}
	.logoArea a { float: left; display: flex; }
	.logoArea img { width: 60vw; height: auto; max-width: 150px; }

	.navArea { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5em; }
	.navArea .details { display: flex; justify-content: flex-end; align-items: center; }
	.navArea .details .contact { display: flex; gap: 1em; }
	.navArea .details .contact a { color: var(--white); font-size: var(--fs-small); font-weight: bold; width: fit-content; align-self: flex-end; }
	.navArea .details .contact a:hover { opacity: 0.7; }
	body.home .navArea { gap: 1em; }


	/* Featured Area - ACF */
	.featuredArea { background-color: transparent; min-height: 100vh !important; flex-wrap: wrap; align-content: center; position: relative; padding: 0; border-bottom: 0; margin-bottom: 0;  }

  	.featuredArea::before { background-color: rgba(27, 35, 66, 0.7); mix-blend-mode: multiply; content: ""; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; }

  	body.featuredAreaEnabled .featuredArea { padding-top: 150px; }
  	body.featuredAreaFixed .featuredArea { padding-top: 175px; }
  	body.home.featuredAreaFixed .featuredArea { padding-top: 305px; }


	@media (max-height: 600px)
	{
		.featuredArea { min-height: 600px !important; }
	}


	.featuredArea .featuredImage { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }

	.featuredArea.fixed .featuredImage { position: fixed; z-index: -1; }
	.featuredArea.fixed video { position: fixed !important; z-index: -1; }

	.featuredArea .featuredBox { text-align: center; justify-self: center; justify-content: center; max-width: 1280px; position: relative; z-index: 2; padding: 0px 30px; }
  	.featuredArea .featuredBox h1, .featuredArea .featuredBox h2 { color: #fff; font-size: var(--fs-h1); font-weight: bold; text-align: center; padding-bottom: 0.25em; }
  	.featuredArea .featuredBox p { color: #fff; }
  	.featuredArea .featuredBox .buttons { justify-content: center; gap: 1em; margin-bottom: 30px; }

  	.featuredArea #chevron { display: flex; width: 100%; flex-basis: 100%; justify-content: center; position: relative; padding-top: 30px; padding-bottom: 30px; }
  	.featuredArea #chevron img { width: 100px; float: left; }

  	#gradient-divider { background: rgb(250,250,250); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0.8) 100%) !important; height: 100px; position: relative; }

	#watermark { width: 800px; max-width: 50%; height: auto; position: fixed; right: 20px; bottom: 20px; z-index: 1; filter: contrast(75%); opacity: 0.1; width: 600px; }
	body.featuredAreaFixed #watermark { filter: unset; }


/*==================== Nav ====================*/
	.nav { float: right; background: none; }
	.nav ul { background: none; }
	.nav li a { color: var(--white); }
	.nav li a:hover, .nav li a:focus { color: var(--secondary); text-decoration: none; }
	.nav li:last-of-type a { padding-right: 0px; }

	.nav li ul.sub-menu, .nav li ul.children { flex-direction: column; border: none; /*right: 0;*/ }
	.nav li ul.sub-menu li, .nav li ul.children li { width: 100%; }
	.nav li ul.sub-menu li a, .nav li ul.children li a { background-color: rgba(27, 35, 66, 0.9); font-size: var(--fs-normal); width: 100%; white-space: nowrap; padding-left: 0.75em; padding-right: 0.75em; border-color: var(--lightBlue); }


	/* Responsive Menu - !!! REPLACE 444 WITH NEWLY CREATED MENU ID (ALSO IN HEADER.PHP) !!! */
	#rmp_menu_trigger-21 { background: var(--primary); position: static; float: right; margin-left: 20px; }
	#rmp_menu_trigger-21.is-active { background: var(--secondary); }
	#rmp_menu_trigger-21:hover, #rmp_menu_trigger-21:focus { background: var(--primary); }

	#rmp-container-21 { background-color: var(--primary); min-width: unset; }
	.rmp-menu-open { -webkit-box-shadow: 1px 1px 10px -2px #000; box-shadow: 1px 1px 10px -2px #000; }

	#rmp-menu-wrap-21 .rmp-menu-item-link { background-color: transparent !important; font-size: 18px; border-color: transparent !important; }
	#rmp-menu-wrap-21 .rmp-submenu .rmp-menu-item-link { font-size: 16px; font-weight: normal; }

	/* Current Menu Item */
	#rmp-menu-wrap-21 .rmp-menu-current-item > a.rmp-menu-item-link { color: var(--secondary); font-weight: bold; }
	#rmp-menu-wrap-21 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link { color: var(--secondary); font-weight: bold; }
	#rmp-menu-wrap-21 .rmp-submenu .rmp-menu-current-item .rmp-menu-item-link { color: var(--secondary); font-weight: bold; }

	/* Menu Item Hover */
	#rmp-menu-wrap-21 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link:hover { color: #fff; }
	#rmp-menu-wrap-21 .rmp-menu-item-link:hover { background-color: var(--secondary) !important; text-decoration: none; }
	#rmp-menu-wrap-21 .rmp-menu-current-item > a.rmp-menu-item-link:hover { color: #fff !important; }

	/* Additional Content */
	.rmp-menu-additional-content { float: left; }
	#rmp-menu-additional-content-21 { text-align: left; }

	.rmp-menu-additional-content .contact { width: 100%; float: left; padding-top: 20px; }
	.rmp-menu-additional-content .contact a { color: var(--white); font-size: var(--fs-normal); font-weight: bold; float: left; margin-right: 20px; margin-bottom: 10px; }
	.rmp-menu-additional-content .contact a:hover { opacity: 0.7; }

	.rmp-menu-additional-content .social-icons { width: 100%; float: left; padding-top: 20px; }
	.rmp-menu-additional-content .social-icons a { color: var(--white); font-size: 30px; margin-right: 15px; }
	.rmp-menu-additional-content .social-icons a:hover { opacity: 0.7; }

	/* Hide/Show Main Menu & Responsive Menu */
	#rmp_menu_trigger-21 { display: none; }

	@media(max-width: 1029px)
	{
		#rmp_menu_trigger-21 { display: block; }
		#menu-main-menu { display: none; }
	}



/*==================== Body ====================*/
	#content { margin-top: 180px; }
	body.featuredAreaEnabled #content, body.featuredAreaFixed #content, .featured-image + #content { margin-top: 0; }
	body.featuredAreaEnabled .contentBlock:first-of-type { padding-top: 30px; }
	body.featuredAreaEnabled .contentBlock:last-of-type, body.featuredAreaFixed .contentBlock:last-of-type { padding-bottom: 30px; }

	#content * { z-index: 2; }
	.entry-content p, .entry-content a, .entry-content li { position: relative; z-index: 2; }

	.wp-block-columns { margin-bottom: 1.75em; }

	/* Headings Spacing */
	#content p + .wp-block-columns h2:first-of-type, #content p + h2, #content ul + h2, #content ol + h2, #content p + .wp-block-columns h3:first-of-type, #content p + h3, #content ul + h3, #content ol + h3, #content p + .wp-block-columns h4:first-of-type, #content p + h4, #content ul + h4, #content ol + h4, #content p + .wp-block-columns h5:first-of-type, #content p + h5, #content ul + h5, #content ol + h5 { margin-top: 1em; }

	.wp-block-image { margin-bottom: 20px; }
	.wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
	.wp-block-image.size-full figcaption { color: var(--blue); font-size: var(--fs-small); text-align: center; margin-bottom: 10px; }

	.article-header h1 { text-align: center; padding-bottom: 1em; }
	.article-header img { padding-bottom: 1.5em; }

	/* Separator */
	.wp-block-separator, .wp-block-separator.blue { color: var(--blue); }
	.wp-block-separator.lightBlue { color: var(--lightBlue); }
	.wp-block-separator.tan { color: var(--tan); }


	/* Element Padding */
	.pad-top { padding-top: 5%; }
	.pad-bottom { padding-bottom: 5%; }
	.pad-top-bottom { padding-top: 5%; padding-bottom: 5%; }
	.pad-left { padding-left: 5%; }
	.pad-right { padding-right: 5%; }
	.pad-left-right, .pad-default { padding-left: 5%; padding-right: 5%; }
	.pad-all { padding: 5%; }


	/* Colour Overlays */
	.blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; }

  	.whiteGradient { background: rgb(250,250,250); background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(255,255,255,0.65) 60%, rgba(255,255,255,0.65) 100%) !important; }


	/* Buttons */
	a.button, #content a.button, a.wp-block-button__link, a.button.primary, #content a.button.primary, .wp-block-button.primary a.wp-block-button__link { background-color: var(--primary); color: #fff; font-size: var(--fs-button); border-color: var(--primary); border-radius: 100px !important; }
	a.button.secondary, #content a.button.secondary, .wp-block-button.secondary a.wp-block-button__link { background-color: var(--secondary); color: #fff; border-color: var(--secondary); }
	a.button.black, #content a.button.black,  .wp-block-button.black a.wp-block-button__link { background-color: var(--black); color: #fff; border-color: var(--black); }
	a.button.white, #content a.button.white, .wp-block-button.white a.wp-block-button__link { background-color: #fff; color: #000; border-color: #fff; }
	a.button.transparent, #content a.button.transparent, .wp-block-button.transparent a.wp-block-button__link { background-color: transparent; color: #fff; border-color: #fff; }
	a.button.outline, #content a.button.outline, .wp-block-button.outline a.wp-block-button__link { background-color: transparent; color: #fff; border: 2px solid; border-color: var(--lightBlue); }
	a.button.large, #content a.button.large, .wp-block-button.large a.wp-block-button__link { font-size: var(--fs-large); font-weight: normal; padding: 15px 40px; }

	/*Buttons Hover*/
	a.button:hover, #content a.button:hover, a.wp-block-button__link:hover, a.button.primary:hover, #content a.button.primary:hover, .wp-block-button.primary a.wp-block-button__link:hover { background-color: transparent; color: var(--primary); text-decoration: none; border-color: var(--primary); }
	a.button.secondary:hover, #content a.button.secondary:hover, .wp-block-button.secondary a.wp-block-button__link:hover { background-color: transparent; color: var(--secondary); text-decoration: none; border-color: var(--secondary); }
	a.button.black:hover, #content a.button.black:hover, .wp-block-button.black a.wp-block-button__link:hover { background-color: transparent; color: var(--black); border-color: var(--black); }
	a.button.white:hover, #content a.button.white:hover, .wp-block-button.white a.wp-block-button__link:hover { background-color: transparent; color: #fff; border-color: #fff; }
	a.button.transparent:hover, #content a.button.transparent:hover, .wp-block-button.transparent a.wp-block-button__link:hover { background-color: transparent; color: #fff; border-color: #fff; opacity: 0.4; }
	a.button.outline:hover, #content a.button.outline:hover, .wp-block-button.outline a.wp-block-button__link:hover { color: #fff; border-color: var(--lightBlue); opacity: 0.4; }



/*==================== Blocks ====================*/

	/* ----- Content Block ----- */
	.contentBlock, #content .contentBlock { z-index: unset; }
	.contentBlock.primary p { color: var(--white); }


	/* ----- Wordpress Block - Blockquote ----- */
 	blockquote.wp-block-quote { background-color: transparent; text-align: center; margin-bottom: 1.75em; }
	blockquote.wp-block-quote:before { content: url(https://cjcoleman.com/wp-content/themes/SCGrid/library/images/quote-lightBlue.svg); display: block; max-width: 80px; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
	blockquote.wp-block-quote * { max-width: 1029px; margin-left: auto; margin-right: auto; }
	blockquote.wp-block-quote p, .contentBlock.primary blockquote.wp-block-quote p { color: var(--tan); font-size: var(--fs-normal); }
	blockquote.wp-block-quote p:last-of-type { padding-bottom: 0.25em; }
	blockquote.wp-block-quote cite { color: var(--blue); font-size: var(--fs-small); font-weight: bold; line-height: normal; text-transform: uppercase; }
	.contentBlock.primary blockquote.wp-block-quote cite { color: var(--white); }
	blockquote.wp-block-quote:first-of-type { margin-top: 1em; }
	blockquote.wp-block-quote:last-of-type { margin-bottom: 3em; }


	/* ----- CTA Block ----- */
	.ctaBlock { background-color: var(--primary); color: #fff; text-align: center; flex-direction: column; flex-flow: column; justify-content: center; align-items: center; position: relative; padding: 20px; margin-bottom: 15px; box-shadow: var(--shadow); }
	.ctaBlock * { color: #fff; }

	.ctaBlock .ctaIcon { margin-bottom: 10px; }
	.ctaBlock .ctaIcon img.icon { height: 60px; width: auto; }

	.ctaBlock h3 { font-size: var(--fs-h4); font-weight: normal; line-height: normal; }

	.ctaBlock a.button, #content .ctaBlock a.button { width: fit-content; margin-bottom: 0; }

	.ctaBlock.Square { aspect-ratio: 1/1; }
	.ctaBlock.Four-to-Three { aspect-ratio: 4/3; }
	.ctaBlock.Three-to-Two { aspect-ratio: 3/2; }
	.ctaBlock.Sixteen-to-Nine { aspect-ratio: 16/9; }


	/* ----- Columns Block ----- */
	.columnsBlock { gap: 30px; margin-bottom: 1.75em; }
	.columnsBlock > div { margin-bottom: 0; }

	.columns-1 > div { width: 100%; flex-basis: 100%; }
	.columns-2 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); }
	.columns-3 > div { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); }
	.columns-4 > div { width: calc(25% - 22.5px); flex-basis: calc(25% - 22.5px); }
	.columns-5 > div { width: calc(20% - 24px); flex-basis: calc(20% - 24px); }
	.columns-6 > div { width: calc(16.6666666667% - 25px); flex-basis: calc(16.6666666667% - 25px); }
	.columns-7 > div { width: calc(14.2857% - 25.71428571428571px); flex-basis: calc(14.2857% - 25.71428571428571px); }
	.columns-8 > div { width: calc(12.5% - 26.25px); flex-basis: calc(12.5% - 26.25px); }
	.columns-9 > div { width: calc(11.1111% - 26.66666666666667px); flex-basis: calc(11.1111% - 26.66666666666667px); }
	.columns-10 > div { width: calc(10% - 27px); flex-basis: calc(10% - 27px); }
	.columns-11 > div { width: calc(9.0909% - 27.27272727272727px); flex-basis: calc(9.0909% - 27.27272727272727px); }
	.columns-12 > div { width: calc(8.33333333333% - 27.5px); flex-basis: calc(8.33333333333% - 27.5px); }

	.columnsBlock div { height: unset; }

	@media (max-width: 1280px)
	{
		.columnsBlock .ctaBlock { width: calc(50% - 15px); flex-basis: calc(50% - 15px); }
		.columns-3 .ctaBlock { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); }
	}

	@media (max-width: 1029px)
	{
		/*Tablet*/
		.columns-6 > div, .columns-9 > div, .columns-12 > div { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); }
		.columns-8 > div { width: calc(25% - 22.5px); flex-basis: calc(25% - 22.5px); }
		.columns-4 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); }
		.columns-3 { justify-content: center; }
		.columns-3 .ctaBlock { width: calc(50% - 15px); flex-basis: calc(50% - 15px); }
	}

	@media (max-width: 781px)
	{
		/*Wordpress Tablet*/
		.columns-6 > div, .columns-8 > div, .columns-10 > div, .columns-12 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); }
		.columnsBlock .ctaBlock { width: 100%; flex-basis: 100%; }
	}

	@media (max-width: 600px)
	{
		/*WordPress Mobile*/
		.columnsBlock > div, .columnsBlock .ctaBlock { width: 100%; flex-basis: 100%; }
	}


	/* ----- Image Overlay Block ----- */
	.imageOverlayBlock { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; margin-bottom: 30px; }
	.imageOverlayBlock.leftAlign { justify-content: flex-start; }
	.imageOverlayBlock.rightAlign { justify-content: flex-end; }

	.imageOverlayBlock * { z-index: 2; }

	.imageOverlayBlock .overlay-container { position: relative; }
	.imageOverlayBlock .overlay { background-color: rgba(27, 35, 66, 0.75); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; }

	.imageOverlayContent { height: 100%; align-content: center; padding: 30px; }
	.imageOverlayContent * { color: #fff; }

	.imageOverlayContent a.button, #content .imageOverlayContent a.button, .imageOverlayContent .wp-block-button a.wp-block-button__link { background-color: transparent; color: #fff; border: 2px solid; border-color: var(--lightBlue); }
	.imageOverlayContent a.button:hover, #content .imageOverlayContent a.button:hover, .imageOverlayContent .wp-block-button a.wp-block-button__link:hover { color: #fff; border-color: var(--lightBlue); opacity: 0.4; }


	/* ----- Team Member Block ----- */
	.teamMemberBlock .team-members { justify-content: center; gap: 1em; padding: 0 20px; margin-bottom: 1.75em; }

	.teamMemberBlock .team-member { flex: 1; min-width: 300px; max-width: 380px; }
	.teamMemberBlock .team-member .post-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
	.teamMemberBlock .team-member .post-image-container { width: 50%; padding-top: 50%; }
	.teamMemberBlock .team-member h4.post-title { padding-bottom: 0; }
	.teamMemberBlock .team-member p { font-weight: bold; text-align: center; padding-bottom: 0; }
	.teamMemberBlock .team-member p span.heading { color: var(--tan); text-transform: uppercase; }
	.teamMemberBlock .team-member p.jobTitle { color: var(--grey); font-weight: normal; }
	.teamMemberBlock .team-member .phone-numbers { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.75em; }
	.teamMemberBlock .team-member .phone-numbers a { color: var(--blue); font-size: var(--fs-small); margin-bottom: 0.5em; }
	.teamMemberBlock .team-member .phone-numbers a:hover { opacity: 0.7; }
	.teamMemberBlock .team-member a.button { margin-top: 10px; }
	.teamMemberBlock .team-member a.button.email { margin-top: 0.25em; }

	/* Team Directory Listing */
	.teamMemberBlock.team_directory .team-member { flex: unset; min-width: 250px; }
	.teamMemberBlock.team_directory .team-member .post-image-container { width: 100%; padding-top: 100%; }




/*==================== Home Page ====================*/
  	body.home #gradient-divider { background: rgb(250,250,250); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.5) 100%) !important; }
  	body.home .contentBlock.whiteTrans { background-color: rgba(255, 255, 255, 0.5); }

  	.lloyds-logo { max-width: 200px; }


/*==================== News/Blog Page ====================*/

	/* Featured Image - Different Aspect Ratios Fix */
	.post-image-container { position: relative; padding-top: 66.66%; margin-bottom: 20px; }
	.post-image-container a { position: absolute; height: 100%; width: 100%; line-height: 0; top: 0; left: 0; }
	.post-image-container img, main#main .post-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
	.d-1of2.post-image-container { padding-top: 33.33%; }



/*==================== Single Posts ====================*/
	.single p.byline.entry-meta { color: var(--tan); }



/*==================== Team Members ====================*/
	.team-members { justify-content: center; }

	.team-members .post-image-container { background-color: var(--blue); position: relative; padding-top: 100%; margin-bottom: 20px; border: 3px solid var(--blue); border-radius: 50%; }
	.team-members .post-image-container a { position: absolute; height: 100%; width: 100%; line-height: 0; top: 0; left: 0; }
	.team-members .post-image-container img { width: 100%; height: 100%; object-position: top; border-radius: 50%; filter: grayscale(1); }

	.team-members-item { display: flex; text-align: center; margin-bottom: 40px; }
	.team-members-item .post-wrap { display: flex; flex-direction: column; justify-content: space-between; }
	.team-members-item h4.post-title { padding-bottom: 0; }
	.team-members-item p.jobTitle { color: var(--grey); line-height: normal; padding-bottom: 0; }
	.team-members-item a.button { margin-top: 15px; }
	.team-members-item .post-image-container:hover .hover-overlay { border-radius: 50%; }

	.post-type-archive-team-members .team-members-item h4.post-title { padding-bottom: 0; }

	.team-members.shortcode { margin-bottom: 20px; }
	.team-members.shortcode .team-members-info { display: flex; flex-direction: column; }
	.team-members.shortcode h4.post-title { margin-bottom: 0px; }
	.team-members.shortcode a.phone, .team-members.shortcode a.email { color: #E1251B; font-size: 16px; margin-bottom: 5px; }

/*==================== Team Member Post ====================*/
	.single-team .team-member { margin: 1.5em 0; }
	.single-team .team-info { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1em; }
	.single-team h1.page-title { margin-bottom: 5px; }
	.single-team p.jobTitle { color: #373A36; padding-bottom: 0; }
	.single-team .team-image { margin: 0px 20px 20px 0px; }
	.single-team .team-image img, .single-team #main .team-image img { background-color: var(--blue); width: 300px; height: 300px; object-fit: cover; object-position: top; padding: 0; border: 3px solid var(--blue); border-radius: 50%; filter: grayscale(1);  }
	.single-team .team-bio p:last-of-type { padding-bottom: 0; margin-bottom: 0; }
	.single-team .buttons { gap: 1em; }
	.single-team a.button.phone, .single-team #content a.button.phone { background-color: var(--blue); border-color: var(--blue);  }
	.single-team a.button.phone:hover, .single-team #content a.button.phone:hover { background-color: transparent; color: var(--blue) !important; border-color: var(--blue);  }
	.single-team a.linkedin { color: #0A66C2; display: flex; flex-basis: 100%; align-items: center; gap: 10px; }
	.single-team a.linkedin i { font-size: 40px; }



/*==================== Contact Us Page ====================*/
	body.page-id-13 iframe { position: relative; z-index: 2; }

	/* Ninja Form */
	.nf-before-form-content { display: none; }
	.ninja-forms-req-symbol { display: none; }
	.nf-error-msg, .ninja-forms-req-symbol { font-size: var(--fs-small); }

	.nf-form-content .listselect-wrap .nf-field-element div, .nf-form-content .ninja-forms-field { font-size: 16px; margin: 0; padding: 12px; }
	.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea { background: #f7f7f7; color: var(--blue); border: 1px solid #c4c4c4; border-radius: 0; box-shadow: none; transition: all .5s; }
  	.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] { background-color: var(--primary); color: #fff; font-size: 18px; font-weight: bold; width: fit-content; min-width: 210px; padding: 15px 20px; border: 1px solid var(--primary); border-radius: 100px; transition: all .5s; }
  	.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover { background: transparent; color: var(--primary); border: 1px solid var(--primary); transition: all .5s; }



/*==================== Intermediary Questionnaire Page ====================*/
	body.page-id-651 h1.page-title { text-align: center; }
	body.page-id-651 iframe { position: relative; z-index: 2; }


/*==================== Useful Links Page ====================*/
	body.page-id-502 h4 { padding-top: 1em; }


/*==================== 404 Page ====================*/
	body.error404 #content { margin-top: 180px; }
	body.error404 h1.page-title { padding-bottom: 0; }


/*==================== Footer ====================*/
	#footer { background-color: var(--blue); position: relative; padding: 25px 5%; margin-top: 30px; }
	body.featuredAreaEnabled #footer, body.featuredAreaFixed #footer { margin-top: 0; }

	.inner-footer { background-color: transparent; display: flex; flex-wrap: wrap; position: relative; z-index: 2; }
	#footer h3 { color: var(--tan); }
	#footer p, #footer a, #footer li { color: var(--white); font-size: var(--fs-normal); font-weight: normal; }
	#footer a:hover { opacity: 0.7; }

	#footer .logoArea { margin-top: 30px; margin-bottom: 30px; }

	#footer .footer-container { gap: 3em; justify-content: space-between; }


	/* Contact Area */
	#footer .contactArea { flex-direction: column; gap: 1em; justify-content: space-between; }
	#footer .contactArea p, #footer .contactArea a { font-size: var(--fs-normal); word-break: break-all; }
	#footer .contactArea .logoArea { float: left; margin-bottom: 20px; }

	#footer .contactArea .details .contact { display: flex; align-items: baseline; margin-bottom: 20px; }
	#footer .contactArea .details .contact i { background-color: var(--lightBlue); color: #fff; font-size: 20px; text-align: center; width: 40px; height: 40px; padding: 10px; margin-right: 20px; }
	#footer .contactArea .details #address i { align-self: flex-start; }
	#footer .contactArea .details .contact p { padding-bottom: 0; margin-bottom: 0; }

	#footer #signature { padding: 20px 0; }
	#footer #signature img { height: 40px; width: auto; }

	#footer #social { min-width: 300px; flex-direction: column; }
	#footer #social ul { gap: 15px; }
	#footer #social ul li a { color: #fff; font-size: 40px; }
	#footer #social ul li a:hover { opacity: 0.7; }


	/* Nav Area */
	#footer .navArea { flex: 1; max-width: 600px; }

	#footer .nav { background: none; display: flex; }
	#footer .nav ul { background: none; display: flex; align-items: flex-start; }
	#footer .nav li { position: static; }
	#footer .nav li a:hover, #footer .nav li a:focus { text-decoration: none; opacity: 0.7; }
	#footer .nav ul.sub-menu { flex-direction: column; visibility: visible; border: none; }
	#footer .nav li ul.sub-menu, #footer .nav li ul.children { position: static; }
	#footer .nav li ul.sub-menu li a, #footer .nav li ul.children li a { background-color: transparent; width: auto; border: none; }


	/* Services Menu */
	#footer .nav.services ul { display: block; }
	/* Main Services Page Link */
	#footer .nav.services li.menu-item-324 > a { color: var(--tan); font-size: var(--fs-h3); font-weight: bold; padding-top: 0; }
	#footer .nav.services li.menu-item-324 > ul.sub-menu:first-of-type { column-count: 2; column-gap: 2em; }
	#footer .nav.services li a { width: fit-content; padding-left: 0; padding-right: 0; padding-bottom: 0; }
	/* Services Links*/
	#footer .nav.services li ul li { break-inside: avoid-column; margin-bottom: 20px; }
	#footer .nav.services li ul li:last-of-type { margin-bottom: 0; }
	#footer .nav.services li ul li a { color: var(--white); font-size: var(--fs-normal); width: fit-content; }
	/* Services Section Anchor Links */
	#footer .nav.services li ul li ul li { margin-bottom: 0; }
	#footer .nav.services li ul li ul li a { color: var(--tan); font-size: var(--fs-small); font-weight: normal; white-space: normal; padding-top: 0.4em; }


	/* About Area */
	#footer .aboutArea { max-width: 400px; flex: 1; flex-direction: column; justify-content: space-between; gap: 1em; }
	#footer .aboutArea ul li.heading a { color: var(--tan); font-size: var(--fs-h3); font-weight: bold; padding-top: 0; }
	#footer .aboutArea li a { font-size: var(--fs-normal); display: block; width: fit-content; padding-top: 0.75em; }

	#footer #legal { display: flex; flex-direction: column; }
	#footer p.legal, #footer p.legal a { font-size: var(--fs-fine); }
	#footer p.legal:last-of-type { padding-bottom: 0; margin-bottom: 0; }


	/* Footer Links */
	#footer .footerLinks { gap: 20px; justify-content: space-between; padding-top: 30px; border-top: 3px solid var(--lightBlue); margin-top: 30px; }
	#footer .footerLinks ul { display: flex; gap: 10px 20px; }
	#footer .footerLinks li, #footer .footerLinks a { font-size: var(--fs-small); line-height: normal; }



/*==================== Media Queries ====================*/
	@media (max-width: 1400px)
	{
		#footer .aboutArea { flex-direction: row; min-width: 350px; max-width: unset; gap: 3em; }
		#footer #legal { flex: 1; }
 	}
	@media (max-width: 1280px)
	{
		/*Small Desktop*/
		.page-template-page-FullWidth .tablet-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 1029px)
	{
		/*Tablet*/
		.navArea, body.home .navArea { gap: unset; }
		.page-template-page-FullWidth .post-width { padding-left: 5%; padding-right: 5%; }
 	}
	@media (max-width: 960px)
	{
		/*Single Post Width*/
		.page-template-page-FullWidth .mobile-width { padding-left: 5%; padding-right: 5%; }
 	}
	@media (max-width: 781px)
	{
		.wp-block-columns.m-noGap { gap: 0; }
	}
	@media (max-width: 767px)
	{
		/*Mobile*/
		.navArea .details { display: none; }
		body.featuredAreaFixed .featuredArea { padding-top: 175px; }
		.ctaBlock h3 { font-size: var(--fs-h2); }
		.single-team .team-image { width: 100%; display: flex; justify-content: center; margin-right: 0; }
 	}
	@media (max-width: 480px)
	{
		/*Small Mobile*/
		.single-team .team-image img, .single-team #main .team-image img { max-width: 100%; height: auto; }
		.single-team .buttons { flex-direction: column; }
		#footer .nav.services li.menu-item-324 > ul.sub-menu:first-of-type { column-count: 1; }
		#footer .nav.services li ul li, #footer ul.about li { margin-bottom: 5px; }
 	}
	@media (max-width: 400px)
	{
		#footer .navArea { width: 100%; flex-basis: 100%; }
		#footer .nav.services li.menu-item-324 > ul.sub-menu:first-of-type { column-count: 1; }
		#footer .aboutArea { min-width: unset; flex-direction: column; }
		ul.twoColumns, ol.twoColumns { column-count: 1; }
 	}