/******************************************************************
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.04.26
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');*/

/*
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: #263E6E;
	--secondary: #1D71B8;
	--white: #FFFFFF;
	--black: #000000; /*042334*/
	--blackTrans: rgba(51, 51, 51, 0.76);

	--blue: #263E6E; /*var(--blue)*/
	--blueLight: #1D71B8; /*var(--blueLight)*/
	--blueTrans: rgba(29, 113, 184, 0.10);/*var(--blueTrans)*/
	--blueTrans2: rgba(29, 113, 184, 0.20);/*var(--blueTrans)*/
	--whiteTrans: rgba(255, 255, 255, 0.6);/*var(--whiteTrans)*/



 /*Theme font sizes

	how to use:
	var(--fs-h1)
	==clamp (min value, ideal, max value)
*/
	--fs-h1: clamp(35px, 5vw ,70px);			/*var(--fs-h1)*/
 	--fs-h2: clamp(30px, 2.8vw ,45px);			/*var(--fs-h2)*/ /* was 60px max 23rd*/
 	--fs-h3: clamp(27px, 2.5vw ,35px);			/*var(--fs-h3)*/
 	--fs-h4: clamp(20px, 2vw ,30px);			/*var(--fs-h4)*/
 	--fs-h5: clamp(18px, 2vw ,25px);			/*var(--fs-h5)*/
 	--fs-h6: clamp(18px, 1.5vw ,25px);			/*var(--fs-h6)*/
 	--fs-normal: clamp(16px, 1.3vw ,30px);		/*default var(--fs-normal)*/ /* was 1.4*/
 	--fs-small: clamp(14px, 1vw ,20px);		/*default var(--fs-normal)*/
 	--fs-button: clamp(18px, 1.5vw ,28px);		/* var(--fs-button)*/
 }





 }

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

/* Site Structure */
body
{
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: calc(12px + 0.5vw); /* Responsive base font size */

	background-image: url("library/images/watermark.svg");
	background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;


}

/* Website Maximum Width - Default: 1920px */
.site-width { max-width: 1840px; padding-left: 40px; padding-right: 40px; }

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

/*Post Maximum Width - Default: 960px*/
.single-post article.post { max-width: 1280px; 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: 'Lato', Arial, Helvetica, sans-serif; }

	/*Text*/
	h1, h2, h3, h4, h5, h6, p { margin: 0 0 5px 0; color: var(--black); }
	h1, h2, h3, h4, h5, h6 { font-family: 'Lato', Arial, Helvetica, sans-serif; font-style: normal; }

	a { color: var(--black); text-decoration: none; } /* ws the dark blue  23rd may */
	a:hover { color: #00A5DD; text-decoration: underline; }
	a:visited { color: #0095C7; }
	h1 { font-size: var(--fs-h1); }
	h2 {font-size: var(--fs-h2);padding-bottom: 0.5em; color: var(--blue); font-weight:600; }
	h3 { font-size: var(--fs-h3); line-height: 120%; padding-bottom: 0.1em;   color: var(--blue); font-weight:600;  }
	h4 { font-size: var(--fs-h4);font-weight:600;  }
	h5 { font-size: var(--fs-h5);font-weight:600; }
	h6 { font-size: var(--fs-h6);font-weight:600; }
	p, #content li { font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: var(--fs-normal); line-height: 1.4em; padding-bottom: 1em; font-weight:400; } /*font-wight was 200*/
	em { font-style: italic; }



.center {text-align: center;}
	#main {margin-top: 30px;}
	#content { clear: both; }
	#content ul, #content ol { margin-left: 0; margin-bottom: 20px; }
	#content li { margin-left: 1em; padding-bottom: 0.25em; margin-bottom: 0px; list-style: disc;   }
	#content li::marker { float: left; }



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

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


/*==================== Header ====================*/
	#header { padding: 15px 0; background-color: white; }
	.inner-header { float: unset; display: flex; justify-content: space-between; width: 100%; align-items: center; align-items: flex-end;  }
	.logoArea {}
	.logoArea a { float: left; }
	.logoArea img { width: 60vw; height: auto; max-width: 300px; }
	.navArea {}


#strip  {background-color: var(--blue); padding-top: 10px; padding-bottom: 10px; }
#strip .site-width {  display: flex; justify-content: space-between;}
#strip a {color: white; text-decoration: none; font-size: var(--fs-normal);}

#strip #contact  {display: flex; align-items: center;   }
 #strip #contact a {padding-left: 10px; padding-right: 40px;}

/*==================== Nav ====================*/
	.nav { float: right; background: none; }
	.nav ul { background: none; }
	.nav li a { color: var(--blue); font-size: var(--fs-normal); padding: 0.4em 0.75em; margin-left: 15px; }
	.nav li a:hover, .nav li a:focus { color: var(--blue); text-decoration: underline; }
	.nav > li:last-of-type > a {background-color: var(--blue); color: white;}
	.nav li ul.sub-menu   { border:none; }
	.nav li ul.sub-menu li {width: 350px; margin-left: 20px;  }
	.nav li ul.sub-menu li a, .nav li ul.children li a { background-color: var(--blue); color: white; margin:0; border:none; width: 100%; padding: 0.75em 0.5em;   }










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

		#rmp-container-49 { 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-49 .rmp-menu-item-link { background-color: transparent !important; font-size: calc(var(--fs-normal) * 1.5) border-color: transparent !important; }
		#rmp-menu-wrap-49 .rmp-submenu .rmp-menu-item-link { font-size: calc(var(--fs-normal) * 1.5); font-weight: normal; }

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

		/* Menu Item Hover */
		#rmp-menu-wrap-49 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link:hover { color: #fff; }
		#rmp-menu-wrap-49 .rmp-menu-item-link:hover { background-color: var(--secondary) !important; text-decoration: none; }
		#rmp-menu-wrap-49 .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 .social-icons { width: 100%; float: left; padding: 20px 0px; }
		.rmp-menu-additional-content .social-icons a { color: #fff; font-size: var(--fs-h3); margin-right: 15px; }
		.rmp-menu-additional-content .social-icons a:hover { color: var(--secondary); }

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

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



/*==================== Body ====================*/
	.wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
	.wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; }
	.article-header img { padding-bottom: 1.5em; }


	/* Element Padding */
	.pad-top { padding-top: 5%; }
	.pad-bottom { padding-bottom: 5%; }
	.pad-left { padding-left: 5%; }
	.pad-right { padding-right: 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; }


	/* 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; border-color: var(--primary); margin-bottom: 20px; }
	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,  a.wp-block-button__link { background-color: var(--primary); color: #fff; border-color: #000; }
	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.wp-block-button__link, a.button.large, #content a.button.large, .wp-block-button.large a.wp-block-button__link { font-size: var(--fs-button); 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: #000; border-color: #000; }
	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; }






/*==================== Home Page ====================*/
.featured-image {position: relative;}
.image {line-height: 0;}
 .featured-image img {padding:0; margin:0;}
.tagline {position:absolute; bottom: 0; padding:60px 0 40px 0;


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,263e6e+18&0+0,0.65+64 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(38,62,110,0.18) 18%, rgba(38,62,110,0.65) 64%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(38,62,110,0.18) 18%,rgba(38,62,110,0.65) 64%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(38,62,110,0.18) 18%,rgba(38,62,110,0.65) 64%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6263e6e',GradientType=0 ); /* IE6-9 */




}






 body.page-id-5 .tagline,
 body.page-id-10 .tagline,
 body.page-id-20 .tagline,
 body.page-id-22 .tagline


  {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,263e6e+0&0+8,0.75+52,0.9+87 */
background: -moz-linear-gradient(top,  rgba(38,62,110,0) 0%, rgba(38,62,110,0) 8%, rgba(38,62,110,0.75) 52%, rgba(38,62,110,0.9) 87%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(38,62,110,0) 0%,rgba(38,62,110,0) 8%,rgba(38,62,110,0.75) 52%,rgba(38,62,110,0.9) 87%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(38,62,110,0) 0%,rgba(38,62,110,0) 8%,rgba(38,62,110,0.75) 52%,rgba(38,62,110,0.9) 87%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00263e6e', endColorstr='#e6263e6e',GradientType=0 ); /* IE6-9 */

}




 .tagline .heading {color: white; text-align: center; max-width: 1200px; margin:0 auto; font-size: var(--fs-h2);}


/*==================== Blocks ====================*/
	.service-cont { display: flex; justify-content: space-around; flex-wrap: wrap;    row-gap: 30px;   column-gap: 30px;

	 margin-bottom: 60px;
	 }
	.service-item a:hover{ text-decoration: none;}
	.service-item { background-color: var(--blueTrans); flex-basis: calc(25% - 30px); padding:10px 30px;  }
	.service-item:hover { background-color: var(--blueTrans2);    }
	.service-item img {width: 75px;}




	.sector-info   {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top:30px;  }

	.sector-info h3 { padding: 10px 0; font-size:var(--fs-h6); text-align: center; }

	.sector-info p {text-align: center; font-size: var(--fs-small) ;}


/*Contact Block*/
.contactBlock {background-color: var(--blue); padding: 30px 5%; margin-bottom: 60px; clear: both;}

.contactBlock  .site-width { max-width:1600px; padding-left:  10px; padding-right: 10px; }



.contactBlock h2 {text-align: center; color: white; font-size: var(--fs-h3);}
.contactBlock p  {color: white; font-size: var(--fs-h4); line-height: 100%;}
 .contactBlock a {color: white; font-size: var(--fs-h5);}
.contactBlockDetails {display: flex; justify-content: space-between; padding: 10px ; }

.contactBlockDetailsIcon {margin-right: 70px;}
.contactBlockDetailsCopy {padding-right: 0px;}
.contactBlockDetailsCopy img { margin:0 5px; }
.contactBlockDetailsCopy img:nth-of-type(2) { padding-left:40px;  }




/*==================== Blog Grid overwtites ====================*/

 .blog-grid h3  {font-size:var(--fs-h3);}
 .blog-grid p.post-excerpt {font-size:var(--fs-normal);}
.blog-post .post-wrap p {padding-bottom:0;}
.blog-post .post-wrap p.post-excerpt {padding-bottom:1.5em;}
.post-wrap {border: solid 1px #707070; background-color: var(--whiteTrans);}

.post-wrap .post-date, .post-wrap h3.post-title, .post-wrap .post-excerpt {padding-left:2em;padding-right:2em;}
/*==================== Footer ====================*/
	.bluebar {background-color: var(--blue); clear: both;}
	.bluebar h2 {color: white; padding:0.4em 0; margin-bottom: 40px; text-align: center;}


	#footer { padding: 30px 5%; background-color: var(--blue);}
	.inner-footer {background: none; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.footerNav ul { display: flex; list-style: none!important; }
.footerNav li {padding:10px 20px; }
.footerNav li a {color: white;}

.footerContact {padding: 20px 0; display: flex;   justify-content: center; align-items: center; }
.footerContact a {color: white; font-size: var(--fs-h6);}
.footerContact img {padding-left: 40px; padding-right: 5px; height: 1.3em;}

.footerSocial {padding: 20px 0;}






/*Content pages */
.article-header {background-color: var(--blue);}
.article-header h1 {color: white; text-align: center; padding:15px;}

/*Single posts*/
.blogPostImage {margin-top: 0px;}
.single p.byline.entry-meta {font-size:var(--fs-small); color: var(--blue);}



/*Ninja forms */
.nf-form-fields-required {text-align: center;}

.field-wrap input[type=button] {width: 100%!important; display: block; background-color: var(--blue)!important;}





.copyNotice { margin-top: 50px; color: white; font-size: var(--fs-small); }

/*==================== Media Queries ====================*/


@media (max-width: 1660px)
	{
 /*.tagline h1 { font-size:2.8em;}

  .tagline .heading {font-size:2.8em;}*/


 }
	@media (max-width: 1440px)
	{
		.contactBlock { padding: 20px ;}


			/*p, #content li {   font-size: 1.2em;  }*/

 .tagline .heading { max-width: 850px;  }

	}
	@media (max-width: 1280px)
	{
		/*Small Desktop*/
		/*.inner-header {flex-wrap: wrap; justify-content: space-around;}
		.navArea {flex-basis: 100%;}*/
			.nav li a {  /*font-size:1em;*/ padding: 0.4em 0.4em; margin-left: 5px; }
			.nav li ul.sub-menu li {  margin-left: 0px;}



.contactBlock h2 { font-size: var(--fs-h2);}
.contactBlock p  {  font-size: var(--fs-h3);  }
 .contactBlock a { font-size: var(--fs-h4);}


 	}



	@media (max-width: 1200px)
	{

 		.service-item { flex-basis: calc(50% - 30px);  }
		.contactBlockDetailsIcon {margin-right: 15px;}
		.contactBlock .site-width {padding:0;}
	}
	@media (max-width: 1029px)
	{
		/*Tablet*/
		.inner-header {align-items: flex-start;}





		.contactBlock { padding: 20px 0px ;}
		.contactBlock  .site-width {   padding-left:  20px; padding-right: 20px; }

		.contactBlockDetails {flex-direction: column;   align-items: center; }
		.contactBlock p  {text-align: center;}
		.contactBlockDetailsCopy img  { display: none; }
		.contactBlock a  { display:block; text-align: center;   line-height:150%;}
		.contactBlock a:first-of-type  { font-size: var(--fs-h1);  }
		.contactBlockDetailsIcon {margin-right: 0px;}


/*
		.blog-grid h3 {font-size: 2em;}
		.blog-post .post-wrap p.post-excerpt {font-size: 1.4em;}
*/

 	}
	@media (max-width: 960px)
	{
		/*Single Post Width*/

		.featured-image {position: initial;}
.tagline {position:initial; background: none; background-color: var(--blue); padding:20px; }
 /*.tagline h1, .tagline .heading { font-size:1.8em;}*/



 	}
	@media (max-width: 767px)
	{
		:root
		{
			 	--fs-small: 18px;		/*default var(--fs-normal)*/

		}

		/*Mobile*/
		#strip {display: none;}

		.service-item { flex-basis: calc(100% - 30px);  }
 .footerContact a {color: white;  }

.site-width {padding-left: 15px; padding-right: 15px;}

.service-item {padding:10px;}

 	}

	@media (max-width: 650px)
	{
		.footerNav:first-of-type {display: none;}
		.footerNav ul {flex-wrap: wrap; justify-content: center;}
		.footerNav li {padding:15px; flex-basis: 100%; text-align: center;}
		.footerContact img {display: none;}
		.footerContact { flex-direction:column;}
		.footerContact a { margin-bottom: 20px;}

 	}



	@media (max-width: 480px)
	{
		/*Small Mobile*/

 	}