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

@import "library/css/nav.css";


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

	/* Theme Colours */
	--primary: #00235D;
	--secondary: #E87200;
	--white: #FFFFFF;
	--whiteTrans: rgba(255, 255, 255, 0.9);
	--black: #000000;
	--blackTrans: rgba(51, 51, 51, 0.76);
}





/*==================== Standards ====================*/
	/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc */

		/*body{ background-color:black; background-image: url('library/images/background.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center;}/*


	/*Text*/
		h1, h2, h3, h4, h5, h6, p {margin: 0 0 3px 0; color: #000;}
		h1{font-size: 30px;}
		h2{font-size: 26px;}
		h3{font-size: 22px;}
		h4{font-size: 22px;}
		h5{font-size: 18px;}
		h6{font-size: 16px;}
		p{font-size: 14px;}
		a{color: #00A5DD; text-decoration: none;}
		a:hover{text-decoration: underline; color :#00A5DD;}
		a:visited {color: #00A5DD;}

		/*
		#content a:link { color: unset; }
		#content a:visited { color: unset; }
		*/

		ol, ul { list-style: disc; color: #000; }

	/*Gallery Caption*/
		.wp-caption-text, .gallery-caption { text-align: center; }



/*==================== Header ====================*/

.header { background: #fff; border-top: #00235D solid 15px; height: 180px; width: 100%; }
.header a { color: #00235D; }
.header a:hover { color: #00A5DD; text-decoration: none; }


.logoDiv {width: 110px; display: block; float: left;}
#logo {  margin-top: 20px; margin-right: 10px; }

.contactInfo { padding: 20px 5px 20px 20px; }
.phoneNumber { font-size: 12px; font-weight: bold; color: #00235D; float: right; line-height: 12px; }
#emailAddress { font-size: 12px; font-weight: bold; color: #00235D; float: right; }

	/*Active Navigation Item*/
div.nav ul li.tpgrps { background-color: #00235D; color: white; }
body.blog div.nav ul li.news { background-color: #00235D; color: white; }
body.page-id-1639 div.nav ul li.news, body.single div.nav ul li.news { background-color: #00235D; color: white; }
body.page-id-19 div.nav ul li.contact { background-color: #00235D; color: white; }


/*==================== Body ====================*/

#content { background: #fff; margin-top: 0px; }

.entry-content { padding: 30px 20px 20px 20px; }
#content h1 { padding: 20px; margin-bottom: 0px; }

.colourDivider { border-bottom: #00235D solid 10px; width: 100%; margin: 40px 0px 40px 0px; }


		/*Colour Boxes - Page Titles*/
.thinColourBox { background: #00235D; height: 80px; width: 100%; }
.colourBox { background: #00235D; height: 164px; width: 100%; }
.colourContent { color: #fff; text-align: center; padding: 0px 60px 0px 60px; }

		/*Green Buttons - (Used on Services Page)*/
#content a.greenButton { background: #D9E1DA; color: #00235D; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; padding: 4px; margin-right: 5px; border: #00235D solid 1px; }
#content a.greenButton:hover { background: #ccd5e2; }


/*===== Home Page =====*/

.page-id-7 .entry-content { padding-top: 30px; }
.welcomeBox { background: #00235D; height: 620px; width: 100%; clear: both; }
.welcomeContent { color: #fff; text-align: center; }
.welcomeContent a.contactButton { font-size: 16px; color: #fff; text-decoration: none; padding: 10px 70px 10px 70px; border: #fff solid 1px; }
.welcomeContent a.contactButton:hover { background: #ccd5e2; }

h1.page-title { font-weight: normal; color: #fff; padding: 25px 0px 10px 0px; }
#content h3.homeHeading { margin-bottom: 30px; }

#content a.moreButton { color: #000; font-size: 12px; text-decoration: none; padding: 8px; border: #000 solid 1px; }

#content .clientHome img { max-width: 100%; height: auto; margin: 0 auto; }
#content .clientHome p { color: #000; font-size: 12px; text-align: center; padding: 0px 18px 0px 18px; }

		/*Tumblehome & Prussik Group*/
#content .group {   padding-bottom: 80px; }
#content .group img { margin: 0 auto; margin-bottom: 15px; }
#content .group p { font-size: 12px; line-height: 14px; text-align: center; }


		/*Custom Fields*/
.homeSingleField { padding: 10px 5px 30px 5px; background: #00235D; }
.homeSingleField p { font-size: 16px; text-align: center; color: #fff; line-height: 20px; margin-bottom: 0px; }

.singleField { padding: 0px 0px 30px 0px; background: #00235D; }
.singleField p { font-size: 16px; text-align: center; color: #fff; line-height: 20px; margin-bottom: 0px; }
.singleField h3 { font-weight: normal; text-align: center; color: #fff; margin-bottom: 8px; }

.doubleFieldLeft { padding: 0px 45px 50px 60px; background: #00235D; }
.doubleFieldRight{ padding: 0px 60px 50px 45px; background: #00235D; }
.doubleFieldLeft p { font-size: 13px; text-align: center; line-height: 18px; color: #fff; padding-bottom: 20px; border-bottom: #fff 5px solid; margin: 0px 0px 0px 120px; }
.doubleFieldRight p { font-size: 13px; text-align: center; line-height: 18px; color: #fff; padding-bottom: 20px; border-bottom: #fff 5px solid; margin: 0px 120px 0px 0px; }
.doubleFieldLeft h3 { font-weight: normal; text-align: center; color: #fff; margin: 0px 0px 8px 120px; }
.doubleFieldRight h3 { font-weight: normal; text-align: center; color: #fff; margin: 0px 120px 8px 0px; }

.tripleField { padding: 0px 45px 20px 45px; background: #00235D; }
.tripleField p { font-size: 13px; text-align: center; line-height: 18px; color: #fff; padding-bottom: 20px; border-bottom: #fff 5px solid; }
.tripleField h3 { font-size: 21px; font-weight: normal; text-align: center; color: #fff; margin-bottom: 8px; }

.quadField { padding: 0px 25px 35px 25px; background: #00235D; }
.quadField p { font-size: 13px; text-align: center; line-height: 18px; color: #fff; padding-bottom: 20px; border-bottom: #fff 5px solid; }
.quadField h3 { font-weight: normal; text-align: center; color: #fff; margin-bottom: 8px; }

.homeContactButton { background: #00235D; padding: 15px 0px 30px 0px; }


		/*Layer Slider*/
.ls-box { background: #00235D; padding: 20px; opacity: 0.9; }
.ls-box p, .ls-box h1 { color: #fff; font-size: 12px; padding: 0px; }
.ls-box a { background: #00235D; color: #fff; font-size: 12px; padding: 5px; border: #fff solid 1px; }
#content .ls-box a:link { color: #fff; text-decoration: none; }
#content .ls-box a:hover { background: #00235D; color: #fff; opacity: 0.6; }
#content .ls-box a:visited { color: #fff; }
#content a.ls-gui-element:hover { background: none; }


 		/*Image Gallery & Products Grid*/
.gallery-caption { color: #000; line-height: 16px; }
.gridItem { text-align: center; line-height: 12px; min-height: 140px; padding: 6px; }
.gridItem img { margin-bottom: 2px; }
.gridItem img:hover { opacity: 0.4; }


		/*News Page*/
.newsPost{ color: #000; padding: 20px 0px 30px 20px; }
#content h2.newsTitle a { text-decoration: none; }
.newsContent { padding-top: 0px; }
.newsHeader { margin: 30px 20px 10px 20px; }


 /*==================== Sidebar ====================*/

.sidebar { background: #DFDFDF; margin: 30px 20px 0px 30px; padding: 10px; width: 28%; }
h4.widgettitle { background: #00235D; color: #fff; padding: 10px 20px 10px 10px; }
#content .sidebar a { font-size: 12px; font-weight: bold; text-decoration: none; color: #00235D; margin-left: 0px; }
#menu-products.menu, #menu-services.menu { margin-left: 10px; }
.sidebar ol, .sidebar ul { list-style: none; }


 /*==================== CTA Button ====================*/
.cta { background: #00235D; padding: 10px 20px 20px 20px; width: 100%; height: 80px; }
#content .ctaImage { padding-top: 5px; float: left; }
#content .ctaText { color: #fff; font-weight: bold; line-height: 18px; padding: 10px 0px 0px 10px; margin-bottom: 5px; float: left; }
#content a.ctaLink { color: #fff; font-size: 20px; text-align: center; text-decoration: none; padding: 10px 35px 10px 35px; margin-top: 10px; border: #fff 1px solid; float: right; }


/*==================== Footer ====================*/

/*#footer { background: #fff; border-top: #00235D solid 25px; border-bottom: #00235D solid 50px; margin-top: 0px; }*/
#footer { background-color: var(--primary); padding: 40px 0; }

#footer #legal { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: center; flex-wrap: wrap; }
#footer #legal li { color: #fff; font-size: 14px; padding: 10px 15px; }
#footer #legal li::marker { content: ''; display: none; }
#footer #legal li a { color: #fff; font-size: 14px; }
#footer #legal li a:hover { color: var(--secondary); text-decoration: none; }






/*==================== 2023 Changes ====================*/
	.entry-content { display: flex; flex-direction: column; padding: 30px 0; }
	body.page-template-default .article-header.panel { margin-bottom: 0; }
	.content-sidebar-container { gap: 4em; }

	.newsHeader { margin: 15px 0 0 0; }

	#footer { background-color: var(--primary); padding: 40px 0; }
	#footer #legal { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: center; flex-wrap: wrap; }
	#footer #legal li { color: #fff; font-size: 14px; padding: 10px 15px; }
	#footer #legal li::marker { content: ''; display: none; }
	#footer #legal li a { color: #fff; font-size: 14px; }
	#footer #legal li a:hover { color: var(--secondary); text-decoration: none; }


	/* Buttons */
	a.button, a.wp-block-button__link, a.button.primary, .wp-block-button.primary a.wp-block-button__link { background-color: var(--primary); color: #fff; text-transform: uppercase; text-decoration: none!important; padding: 5px 20px; border: 1px solid; border-color: var(--primary); border-radius: 3px; }
	a.button.secondary, .wp-block-button.secondary a.wp-block-button__link { background-color: var(--secondary); color: #fff; border-color: var(--secondary); }
	a.button.blue, .wp-block-button.blue a.wp-block-button__link { background-color: #00235D; color: #fff; border-color: #00235D; }
	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, .wp-block-button.white a.wp-block-button__link { background-color: #fff; color: #000; border-color: #fff; }
	a.button.transparent, .wp-block-button.transparent a.wp-block-button__link { background-color: transparent; color: #fff; border-color: #fff; }
	a.button.outline, .wp-block-button.outline a.wp-block-button__link { background-color: transparent; color: var(--primary); border-color: var(--primary); }
	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, a.wp-block-button__link:hover, 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, .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.blue:hover, .wp-block-button.blue a.wp-block-button__link:hover { background-color: transparent; color: #00235D; border-color: #00235D; }
	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, .wp-block-button.white a.wp-block-button__link:hover { background-color: transparent; color: #fff; border-color: #fff; }
	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, .wp-block-button.outline a.wp-block-button__link:hover { opacity: 0.4; }


	/* 2023 Page Template */
	body.page-template-page-FullWidth .entry-content { display: flex; flex-direction: column; padding: 0; }
	body.page-template-page-FullWidth .wp-block-separator { border-color: var(--primary); width: 100%; max-width: 1040px; margin: 1.75em auto; }

	.article-header.panel h1, #content .article-header.panel h1 { padding: 0; }

	#intro p { font-size: 16px; line-height: normal; }
	#intro a.button, #intro .wp-block-button a.wp-block-button__link { font-size: 16px; padding: 10px 40px; }

	#tpGroup h3 { text-transform: uppercase; margin-bottom: 30px; }
	#tpGroup .wp-block-columns .wp-block-column { display: flex; flex-direction: column; justify-content: space-between; }
	#tpGroup .wp-block-columns .wp-block-image { margin-bottom: 15px; }
	#tpGroup .wp-block-columns p { font-size: 12px; line-height: 14px; }

	/* Products Grid */
	.gridItem { min-height: 145px; }
	.wp-block-columns .sidebar { width: 100%; margin: 0; }

	/* Gallery */
	.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }
	.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 1/1; }
	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: transparent; color: #000; font-size: 12px; line-height: 14px; position: relative; }

	/* Products (Gallery Block) */
	.wp-block-gallery.has-nested-images.products figure.wp-block-image { flex-grow: 0; }
	.wp-block-gallery.has-nested-images.products figure.wp-block-image a:hover { opacity: 0.4; }
	.wp-block-gallery.has-nested-images.products figure.wp-block-image img { aspect-ratio: 3/2; }
	.wp-block-gallery.has-nested-images.products figure.wp-block-image figcaption { background: transparent; color: #000; font-size: 12px; line-height: 14px; position: relative; }

	/* News Page */
	body.page-template-page-FullWidth.page-id-1639 .entry-content { padding: 30px 0; }




/*==================== March 2025 Changes ====================*/

	/* RCC - Rope Course Construction */
	body.page-id-2582 .header, body.parent-pageid-2582 .header { border-top: #2A5138 solid 15px; }
	body.page-id-2582 .panel, body.parent-pageid-2582 .panel { background-color: #2A5138; }
	body.page-id-2582 .contentBlock.primary, body.parent-pageid-2582 .contentBlock.primary { background-color: #2A5138; }
	body.page-id-2582 #footer, body.parent-pageid-2582 #footer { background-color: #2A5138; }
	body.page-id-2582 div.nav ul li.rcc, body.parent-pageid-2582 div.nav ul li.rcc { background-color: #2A5138; }
	body.page-id-2582 div.nav ul li.tpgrps, body.parent-pageid-2582 div.nav ul li.tpgrps { background-color: #90918E; }

	/* ACC - Assault Course Construction */
	body.page-id-2642 .header, body.parent-pageid-2642 .header { border-top: #00235D solid 15px; }
	body.page-id-2642 .panel, body.parent-pageid-2642 .panel { background-color: #00235D; }
	body.page-id-2642 .contentBlock.primary, body.parent-pageid-2642 .contentBlock.primary { background-color: #00235D; }
	body.page-id-2642 #footer, body.parent-pageid-2642 #footer { background-color: #00235D; }
	body.page-id-2642 div.nav ul li.acc, body.parent-pageid-2642 div.nav ul li.acc { background-color: #00235D; }
	body.page-id-2642 div.nav ul li.tpgrps, body.parent-pageid-2642 div.nav ul li.tpgrps { background-color: #90918E; }

	/* SAWS - Saws Construction */
	body.page-id-2612 .header, body.parent-pageid-2612 .header { border-top: #815727 solid 15px; }
	body.page-id-2612 .panel, body.parent-pageid-2612 .panel { background-color: #815727; }
	body.page-id-2612 .contentBlock.primary, body.parent-pageid-2612 .contentBlock.primary { background-color: #815727; }
	body.page-id-2612 #footer, body.parent-pageid-2612 #footer { background-color: #815727; }
	body.page-id-2612 div.nav ul li.saws, body.parent-pageid-2612 div.nav ul li.saws { background-color: #815727; }
	body.page-id-2612 div.nav ul li.saws div.icon, body.parent-pageid-2612 div.nav ul li.saws div.icon { background-image: url('https://tpgrps.com/wp-content/themes/SCGrid-2017/library/images/navIcons/saws-colour.png'); }
	body.page-id-2612 div.nav ul li.tpgrps, body.parent-pageid-2612 div.nav ul li.tpgrps { background-color: #90918E; }

	/* Navigation Menu Hover */
	div.nav ul li.tpgrps:hover, div.nav ul li.tpgrps:active { background-color: #00235D!important; }
	div.nav ul li.rcc:hover, div.nav ul li.rcc:active { background-color: #2A5138!important; }
	div.nav ul li.acc:hover, div.nav ul li.acc:active { background-color: #00235D!important; }
	div.nav ul li.saws:hover, div.nav ul li.saws:active { background-color: #815727!important; }

	/* Sidebar/Widgets */
	h4.widgettitle, #content h4.widgettitle { margin-bottom: 10px; }
	h4.widgettitle a, #content h4.widgettitle a { color: #fff; }
	h4.widgettitle.rcc { background-color: #2A5138; }
	h4.widgettitle.acc { background-color: #00235D; }
	h4.widgettitle.saws { background-color: #815727; }

	/* Gallery */
	.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before { display: none; }



/*==================== Media Queries ====================*/
	@media (max-width: 1036px)
	{
		/*Tablet*/
		.colourContent { padding: 0px; }
		.singleField { padding-left: 10px; padding-right: 10px; }
		.doubleFieldLeft p, .doubleFieldRight p { margin: 0px; }
		.homeSingleField br, .singleField br, .doubleFieldLeft br, .doubleFieldRight br, .tripleField br, .quadField br { content: ' '; }

		#content .group { margin: 0px; padding-bottom: 30px; height: 295px; }
		#content .group p { padding: 0px 5px 0px 5px; }
		.sidebar { margin-left: 0px; float: right; }

		#content a.greenButton { font-size: 14px; line-height: 35px; margin: 0px; }

		.gridItem { min-height: 138px; }

		.cta { height: 120px; }
		.ctaImage { float: left; }
		#content a.ctaLink { padding: 10px 25px 10px 25px; }
		#content .ctaText br, #content .group br { content: ' '; }
	}

	@media (max-width: 767px)
	{
		/*Mobile*/
		h1.page-title { font-size: 24px; padding-left: 2px; padding-right: 2px; }

		.page-id-7 .colourBox { height: 400px; }
		.sidebar { margin: 0px; width: 100%; }

		.welcomeContent a.contactButton { font-size: 14px; }
		#content a.greenButton { margin-right: 0px; }

		#content .group { height: auto; }

		.gridItem { min-height: 150px; }

		.newsPost{padding-right: 20px; }

		.cta { height: 180px; }
		/*#slickNav {display: block;}*/

		.contactInfo {width: 100%; margin-top: 10px;}

		.mobile-center img, .mobile-center p { margin: 0 auto; text-align: center; }

	}

	@media (max-width: 480px)
	{
		/*Small Mobile*/
		#logo { padding-right: 10px; }
		#emailAddress { font-size: 11px; }
		.phoneNumber { font-size: 11px; }

		.welcomeContent a.contactButton { padding: 10px 40px 10px 40px; }

		.gridItem { min-height: 175px; }

		.cta { height: 200px; }
		.ctaImage { margin: 0 auto; display: block; width: 55px; }


	}

	@media (max-width: 403px)
	{
		/*Fix 'Products' grid displaying on iPhone*/
		.gridItem { min-height: 150px; }


	}

	@media (max-width: 366px)
	{
		/*Fix contact info displaying on iPhone 5*/
		.contactInfo { margin-top: -125px;}

	}




	@media (max-width: 1439px)
	{
		/*.inner-content { padding-left: 5%; padding-right: 5%; }*/
		body.page-template-page-FullWidth .inner-content { padding-left: 0; padding-right: 0; }
		body.page-template-page-FullWidth .inner-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 1280px)
	{
		/*Small Desktop*/
		body.page-template-page-FullWidth .tablet-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 1070px)
	{
		body.page-template-default .inner-content, body.page-template-page-FullWidth .tenforty-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 1029px)
	{
		/*Tablet*/
		body.page-template-page-FullWidth .post-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 960px)
	{
		body.page-template-page-FullWidth .mobile-width { padding-left: 5%; padding-right: 5%; }
	}
	@media (max-width: 781px)
	{
		#tpGroup .wp-block-columns { flex-wrap: wrap !important; gap: 4em; }
		#tpGroup .wp-block-columns .wp-block-column { flex-basis: 42.5% !important; }
	}
	@media (max-width: 600px)
	{
		#tpGroup .wp-block-columns { gap: 5em; }
		#tpGroup .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
		#tpGroup .wp-block-columns p { max-width: 400px; margin-left: auto; margin-right: auto; }
	}