/******************************************************************
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.05.13
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: #1D1D1B;
	--secondary: #ffffff;
	--white: #FFFFFF;
	--black: #1D1D1B;
	--blackTrans: rgba(51, 51, 51, 0.56);
	--blackTransDark: rgba(51, 51, 51, 0.8);

	--whiteTrans:rgba(255, 255, 255, 0.8);





/* Theme sizes*/

	--size-gap:12px; /*var(--size-gap)*/

 /*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, 3.3vw ,50px);			/*var(--fs-h2)*/
 	--fs-h3: clamp(27px, 2.5vw ,45px);			/*var(--fs-h3)*/
 	--fs-h4: clamp(18px, 2vw ,40px);			/*var(--fs-h4)*/
 	--fs-h5: clamp(16px, 2vw ,35px);			/*var(--fs-h5)*/
 	--fs-h6: clamp(16px, 1.5vw ,30px);			/*var(--fs-h6)*/
 	--fs-normal: clamp(16px, 1.4vw ,25px);		/*default var(--fs-normal)*/
 	--fs-button: clamp(16px, 1.4vw ,25px);		/* var(--fs-button)*/
 }

/*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;/****/}
body
{
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	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; } /*was 1600*/

body.home .inner-width {max-width: 1440px;}
/*Post Maximum Width - Default: 960px*/
.single-post article.post { max-width: 960px; 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: #000; }
	h1, h2, h3, h4, h5, h6 { font-family: 'Lato', Arial, Helvetica, sans-serif; font-style: normal; }

	a { color: #000000; text-decoration: none; }
	a:hover { color: #000000; text-decoration: underline; }
	a:visited { color: #000000; }
	h1 { font-size: var(--fs-h1); }
	h2 {font-size: var(--fs-h2);padding-bottom: 0.25em;}
	h3 { font-size: var(--fs-h3); padding-bottom: 0.25em; }
	h4 { font-size: var(--fs-h4); }
	h5 { font-size: var(--fs-h5); }
	h6 { font-size: var(--fs-h6); }
	p, #content li { font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: var(--fs-normal); line-height: 1.6em; padding-bottom: 1em; }
	em { font-style: italic; }

	#content { clear: both; }
	#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; }


	/*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-cont {position: relative; display: block;width: 100%;
	height: clamp(200px, 75vh, 800px) ; background-repeat:no-repeat;
background-position: center center;  background-size: cover;  margin-bottom: var(--size-gap);}
	#header { padding: 15px 5%;   position: absolute; top: 0; background-color: var(--whiteTrans); }
	.inner-header { float: unset; display: flex; justify-content: space-between; width: 100%; align-items: center; display: flex; flex-direction: column; justify-content: center; }
	.logoArea {}
	.logoArea a { float: left; }
	.logoArea img { width: 70vw; height: auto; max-width: 250px; }
	.navArea {}


 /*==================== Nav ====================*/
	.nav { float: right; background: none; }
	.nav ul { background: none; }
	.nav li a { color: #000; }
	.nav li a:hover, .nav li a:focus { color:#000; text-decoration: underline; }
	.nav li:last-of-type a { padding-right: 0px; }
	.nav li ul.sub-menu li a, .nav li ul.children li a {  background-color: var(--whiteTrans);}

	.nav li ul.sub-menu  {border:none;}

	.nav > li:hover > ul {padding-top: 15px;}

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

			#rmp-container-57 { 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-57 .rmp-menu-item-link { background-color: transparent !important; font-size: 18px; border-color: transparent !important; }
			#rmp-menu-wrap-57 .rmp-submenu .rmp-menu-item-link { font-size: 16px; font-weight: normal; }

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

			/* Menu Item Hover */
			#rmp-menu-wrap-57 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link:hover { color: #fff; }
			#rmp-menu-wrap-57 .rmp-menu-item-link:hover { background-color: var(--primary) !important; text-decoration: underline; }
			#rmp-menu-wrap-57 .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: 30px; margin-right: 15px; }
			.rmp-menu-additional-content .social-icons a:hover { color: var(--secondary); }

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

			@media(max-width: 800px)
			{
				#rmp_menu_trigger-57 { 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; }

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


	/* 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); }
	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: #000; color: #fff; border-color: #000; font-size: var(--fs-button); }
	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.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); transition: all .5s; }
	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 ====================*/



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

.sectionCont {display: flex;    gap: var(--size-gap); padding-bottom: var(--size-gap);}

.section { flex-basis: 33%;   flex-direction:column; background-repeat:no-repeat; background-position: center center;   background-size: cover;
 height: clamp(175px, 40vw, 400px); position: relative;  }

.overlay {display: block; width: 100%; height: 100%; background-color: var(--blackTrans); mix-blend-mode:multiply;  position: absolute; top: 0; z-index: 0;}
.section a {display: block; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; position: absolute; top: 0;}
.section a:hover {color: white; text-decoration: none; background-color: var(--blackTrans);}
.section h3, .section p { text-align: center; align-self: center; color: white; mix-blend-mode:unset;
	max-width: 400px; padding:0 5px 0 5px;  }

.section .flag {position: absolute; top: 14%; width: 100px; align-self: center;}




.callOut {display: flex; flex-direction:row-reverse; background-repeat:no-repeat; background-position: center center;   background-size: cover; height: clamp(400px, 30vw, 800px); }
.callOutInner {display: flex; flex-direction:row-reverse;  padding:calc(var(--size-gap) * 4);    height: 100%;
  align-items:center;
	background: rgb(29,29,27);background: rgb(29,29,27);
background: linear-gradient(90deg, rgba(29,29,27,0) 0%, rgba(29,29,27,0.542454481792717) 27%, rgba(29,29,27,0.9094012605042017) 42%, rgba(29,29,27,1) 100%);

}
.callOutInner p,.callOutInner h2, .callOutInner h3, .callOutInner h4, .callOutInner li {color: white;}
.callOutInner .wp-block-buttons { justify-content: center; }

.callOutInner {  flex-basis: clamp(600px, 80%, 1400px);  }
.callOutInnerCont {  flex-basis: clamp(600px, 60%, 1400px);  }



.callOut .wp-block-buttons .wp-block-button a { background:none; color: white; border: solid 1px white; }
.callOut .wp-block-buttons .wp-block-button a:hover { background:white; color: var(--black);  }
.callOut .wp-block-buttons .wp-block-button:first-of-type a { background-color: white; color: var(--black); }
.callOut .wp-block-buttons .wp-block-button:first-of-type a:hover { background:none;  color: white; }










/*==================== Spacing bewtween elements ====================*/
.sectionCont, .wp-block-columns, .callOut,   #main, .bar, .wp-block-gallery  { margin-bottom:calc( var(--size-gap) * 4); }

header.article-header { margin-top:calc( var(--size-gap) * 3); text-align: center;}
.wp-block-columns { margin-top:calc( var(--size-gap) * 2);}
	/*overwrites*/
	.sectionCont + .wp-block-buttons { margin-top: calc(0px - ( var(--size-gap) * 3));}



/*==================== Contact Us Page ====================*/

	/* Ninja Form */
	.nf-before-form-content { display: none; }
	.ninja-forms-req-symbol { display: none; }

	.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; border: 1px solid #c4c4c4; border-radius: 0; box-shadow: none; color: #787878; transition: all .5s; }
    .nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] { background-color: var(--black); color: #fff; font-size: 18px; font-weight: bold; width: fit-content; min-width: 210px; padding: 15px 20px; border: 1px solid var(--black); border-radius: 3px; 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(--black); border: 1px solid var(--black); transition: all .5s; }


/*==================== Footer ====================*/
.footerCTA {display: flex; clear: both; align-items:center; justify-content: center;  }
	.footerCTASingle {background-repeat:no-repeat; background-position: center center; background-size: cover;  display: flex; flex-direction:column; justify-content: center; align-items:center; position: relative; height: clamp(350px, 40vw, 960px); align-self:center;}

	.footerCTASingleCopy {position: relative; padding:10%; display: flex; flex-direction:column; justify-content: center; align-items:center;  }

		.footerCTASingle h2, .footerCTASingle p{color: white; text-align: center;  }
	.footerCTA .wp-block-button   {  width: 80%; }
	.footerCTA .wp-block-button a { background:none; border:solid 2px white; width: 100%;   }
	.footerCTA .wp-block-button a:hover { background:white;   }



.bar {clear: both;display: flex; justify-content: center; background-color: var(--black); padding:calc( var(--size-gap) * 2)  ;  }
.bar h2 {color: white; }

.footerBar a { color: white; display: block; text-align: center; font-size: var(--fs-h2);  }
#footer { padding: 25px 5%;  padding-top:0; background:none; }
.inner-footer {background:none; display: flex; flex-direction:column; align-items: center;  row-gap: var(--size-gap);}

ul.footerNav {font-size: var(--fs-normal); display: flex; justify-content: space-around; align-items: center; width: clamp(500px, 70%, 1000px); align-self:center;}
ul.footerNav a {text-align: center; display: block;}

.footerContact   {  margin-top:calc(var(--size-gap) * 2 );}
	.footerContact a {font-size:var(--fs-h3);  }
.footerLogo {padding:calc(var(--size-gap) * 2 );}
.socialFooter {gap: var(--size-gap); display: flex; margin-bottom:var(--size-gap);}




.flagBar {margin-bottom: 0!important;}
.flagBar a {font-size: var(--fs-h4); line-height: var(--fs-h4); }
.flagBar a img {height: var(--fs-h4); padding-left: 15px; padding-top:2px; }









/*Content*/
.wp-block-image {position: relative;}

	.wp-block-image.size-full figcaption {  margin-bottom: 0px; }


.wp-block-gallery.has-nested-images figure.wp-block-image figcaption
, .wp-block-image figcaption  {background:none; background-color: var(--blackTransDark); padding: var(--size-gap); font-size: var(--fs-normal);

position: absolute; bottom: 0; width: 100%;   }



	/* Accordion Block */
	.c-accordion__title, .inner-content .c-accordion__title { background-color: var(--black); color: #fff; font-size: var(--fs-h4); font-weight: normal; text-align: left; padding: 20px; padding-right: 40px; margin-bottom: 10px; }
	.c-accordion__title:after { color: #fff; font-size: 25px; right: 20px; }
	.wp-block-pb-accordion-item.is-open .c-accordion__title { margin-bottom: 20px; }
	.wp-block-pb-accordion-item:last-of-type { margin-bottom: 1em; }

	/* Rounded Headings */







/*==================== Blog Grid  ====================*/
.blog-grid { justify-content: space-between; row-gap: 2.5%;}
.blog-grid-item {border:solid 1px var(--black); padding:0; flex-basis: 32.5%;}

.post-copy {padding:  calc(var(--size-gap) * 3); padding-top:0;}
/*==================== Media Queries ====================*/
	@media (max-width: 1280px)
	{
		/*Small Desktop*/


 	}
 	@media (max-width: 1170px)
 	{
		.section .flag {position: unset; top: unset ; padding-bottom:20px;  }

 	}
	@media (max-width: 1029px)
	{
		/*Tablet*/

   	}
	@media (max-width: 960px)
	{
		/*Single Post Width*/
		.sectionCont {flex-wrap: wrap;}
		.section { flex-basis: 100%; }

		/*Blog grid*/
		.blog-grid-item { flex-basis: 100%;}


		.header-cont { border-top: 150px solid white; height: 500px; }
		#header {top: -150px;background:none; background-color: white;}
 	}
	@media (max-width: 767px)
	{
		/*Mobile*/
	.callOutInner {background:none; background-color: var(--blackTransDark); flex-basis: 100%;  }
	.footerCTA {flex-wrap: wrap; gap:var(--size-gap);}
		.footerCTASingle {flex-basis: 100%;}


.footerBar {margin-bottom: calc( var(--size-gap) * 1);}
 		ul.footerNav {width: 100%; flex-direction: column; }
		ul.footerNav a { font-size: var(--fs-h4);   padding:calc(var(--size-gap) * 2) 0px;}
	.footerContact a { display: block; font-size:var(--fs-h1);  }



.wp-block-gallery.has-nested-images {flex-direction: column;}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {width: 100%;}
 	}
	@media (max-width: 480px)
	{
		:root
		{
			--size-gap:10px;
		}

		.header-cont { border-top: 150px solid white; height: 350px; }

		/*Small Mobile*/


			.logoArea   { align-self: start; }
			.logoArea img { width: 60vw; }





 	}