/******************************************************************
Theme Name: Simpsons Creative Grid
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: Harry Kitchener
Version: 1.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
******************************************************************/

/*==================== Standards ====================*/
	/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc */
	@import url('https://fonts.googleapis.com/css?family=Istok+Web');
body { background: none; }
/*Text*/
h1, h2, h3, h4, h5, h6, p { margin: 0 0 3px 0; color: #000; }
h1 { font-size: 30px; }
h2 { font-size: 24px; font-weight:bold; color:#00703a; }
h3 { font-size: 20px;   color:#00703a; }
h4 { font-size: 16px;  color:#00703a; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { font-size: 14px; }
a { color: #00A5DD; text-decoration: none; }
a:hover { text-decoration: underline; color : #006f3c; }
a:visited { color: #006f3c; }
h2 a, h2 a:visited, a.excerpt-read-more, a.excerpt-read-more:visited, h1.page-title{ color:#006f3c;}

/*Buttons*/
		/* Change however you need. Probably best to just change colors to match current site. */
		/* Color important temporary solution - find alternative */
.button { padding: 10px; text-decoration: none; color: #fff; background-color: #00A5DD; border-radius: 4px; }
.button:hover { background-color: #0095C7; text-decoration: none; color: #fff; }
.button:visited { color: #fff; }
.button:visited:hover { color: #fff; }
/*Responsive Navigation*/
		/*BG color*/
body .slicknav_menu { background: #006e3e; }
/*Border Color*/
.slicknav_menu ul li a { border: 1px solid #fff; }
/*Text Color*/
.slicknav_nav li a { color: #fff; }
.slicknav_nav li a:hover { color: #fff; background-color: #00a24f; }
/*Sub Menu Arrow*/
.slicknav_arrow { color: #000; }
.slicknav_arrow:hover { color: #666; }
/*==================== Header ====================*/
	.header { background-color: white; font-family: 'Istok Web', sans-serif; margin-top: 10px;}
	.headerTop { padding: 0px;  margin-bottom:30px;   z-index:1000; position: relative;  }
	#logo { max-width: 400px; margin: 0 auto; display: block; }
	.headerRight { float: right; padding-left: 25px; margin-top: 15px; position: relative; z-index: 10; }
	.headerCopy { margin-top: 10px; }
	.headerCopy p, .headerCopy a { color: #1B6E39; font-size: 16px; }
	.headerCopy.contactDetails { text-align: right; }
	.headerCopy.tagline p { margin-top: 30px; }
	.headerCopy a { text-decoration: none; }
	.headerCopy a:hover { text-decoration: underline; }
/*==================== Navigation ====================*/
	.nav { float: right; margin-top: 5px; }
	.nav ul { width: 100%; background-color: #1B6E39; }
	.nav ul a { padding: 4px 12px; font-size: 14px; font-family: 'Istok Web', sans-serif; }
	 .nav li ul { width:auto; background-color: rgba(0, 110, 62, 0.95);}
 
  ul.mega-sub-menu { width:auto; background-color: rgba(0, 110, 62, 0.95);}
/*==================== Navigation - Mega Menu ====================*/
		 #mega-menu-wrap-main-nav {background-color: #1B6E39; }
		 #mega-menu-wrap-main-nav a.mega-menu-link { text-transform:uppercase!important;}
		 #mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-item > a.mega-menu-link:focus { background-color:#00a24f; }
		
		#mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-megamenu > ul.mega-sub-menu
		{background-color: rgba(0, 110, 62, 0.95); padding:10px;}
		
		#mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { font-size:12px; line-height:13px; color:white; font-weight:bold; text-align:left; font-weight:bold;  }
		#mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {  color:white; text-decoration:underline;}
		
		
		#mega-menu-wrap-main-nav #mega-menu-main-nav > li.mega-menu-item > a.mega-menu-link {font-size:13px; }
		
		
		/* code to force dropdown to be visable for testin*/
		/*#mega-menu-wrap-main-nav #mega-menu-main-nav li.mega-menu-item > ul.mega-sub-menu {visibility:visible!important;}
		/**/
		
				 #mega-menu-wrap-main-nav #mega-menu-main-nav li.mega-menu-item > ul.mega-sub-menu { z-index:999999999999; position:absolute;}

		
		ul li li.mega-menu-item   {padding:0px 5px 10px 5px!important; margin:0px;}
		li.widget_text { padding-top:10px!important; padding-bottom:0px!important;}
		li.widget_text a:hover img {    opacity: 0.7;}
		li.mega-menu-item a {padding:0px; margin:0px;}
		li.mega-menu-item img {padding:0px; margin:0px; width:100%; height:auto;}
		
		
		/*mega menu mobi*/
		#mega-menu-wrap-main-nav .mega-menu-toggle { background:none;}
		

 /*==================== Featured Image Area (slider and FI) ====================*/
 .imageAreaCont { width:100%; height:auto; background-color:#1B6F36; display:block; clear:both;  }
 .imageArea { max-width:1040px; margin:0 auto; display:block; clear:both; border:#FFF solid 1px; border-bottom:none; border-top:none;
 
 position:relative;}
 .imageArea div.copy  { background-color:#00a24f; float:left; height:350px; width:280px; padding:20px; border-right:#FFF solid 1px; }
 .imageArea div.copy p, .imageArea h1 { float:left; color:white; display:block; padding-bottom:10px; font-size:14px;
 
 }
 .imageArea div.copy p.heading, .imageArea h1 { font-size:20px; font-weight:bold;}
	
	
	 /*Single pages*/
 	.imageAreaCont.singlePage { height:350px;}
	.singlePage .copy { width:280px; float:left; border-left:#FFF solid 1px; }
 	.singlePage .headerImage { width:758px; float:right;}
 	.singlePage .headerImage img { width:758px; height:350px;  }
	.imageArea div.copy p.subtext { font-size:13px;}
	.imageArea div.copy p.subtext a { color:white;}
  
 /*==================== Body ====================*/
 #inner-content { padding:15px 0px;}
	#content ul { padding-left:20px;   list-style:square; color:#00703a; /*font-size:12px;*/font-size:14px;}
	#content li { margin-bottom:5px;}
	#content p { /*font-size:12px;*/font-size:14px;}
	
	
	 
	
	
	/*Home Page specific styles*/
		.breakout {display:block; width:100%; background-color:white; clear:both; height:auto; overflow: auto;}
		.breakout.darkGreen {background-color:#1A6C3E;}
		.breakout.justGreen {background-color:#e8f1ed;}
 		.breakout.darkGreen h2{ color:white; text-align:center;}
		
		
		/*service section*/
		.serviceSection{ padding-bottom:30px;}
		.service { padding:10px;  }
		.service img { width:100%; padding:0px; margin:0px;}
		.service p { font-size:11px;}
		.service p.title { color:#007138; font-size:13px; font-weight:bold;}
		.service a.readMore { font-size:13px;}
	
	
	
		/*News posts section*/
		.newsPost { background-color:white; padding:10px;   }
		.newsPost img {width:100%; height:auto; padding:0px; margin:0px;}
		.newsPostImage {position:relative;}
		.newsPostImage a img {position:absolute; top:10px; right:10px; width:40px; height:40px;}
		.newsPost h3{padding:0px 10px; font-size:18px;}
		.newsPost p{padding:0px 10px; font-size:14px; margin-bottom:10px;}
		.newsPost a{ color:#1B6D3D;}
		
		
		
		
		
		/*side bar - pullout*/
		.pullout  {background-color:#e8f1ed; padding:10px; margin-bottom:20px;}
		.pullout img  { width:100%; height:auto; padding:0px; margin:0px;}
	
/*==================== Footer ====================*/

.homeNews { padding:40px;  border-bottom:#00a354 solid 10px; border-top:#00a354 solid 10px;  }
#footer { display:block; clear:both; padding:40px 0px; background:none; float:left; width:100%; max-width:none; border-top:#1B6D3D solid 3px; }
#footer div img { width:100%;}
#footer div.livingLandscapes {max-width:600px; margin:0 auto; padding-bottom:20px;}
#footer div.livingLandscapes img { float:left; width:20%;}
#footer div.livingLandscapes p { float:right; width:78%; font-size:11px;}


#greenFooter { background-color:#006c42; clear:both; display:block ;  float:left; width:100%; max-width:none; padding:20px; border-bottom:#00a354 solid 20px;  }
#greenFooter p { color:white;}





.form { padding-right:20px; }
	.form input {width:100%;}
	.form input,.form input:focus, .form textarea, .form textarea:focus { width:100%; background-color: rgba(250, 250, 250, 0.75); color:#000; border:none;  }
	 .form textarea  { height:40px;}
	
	.form .wpcf7-submit { margin-top:10px; background:none; border:#FFF solid 1px; color:white;}
	
.map{ padding:0px 20px; border-right:#FFF solid 1px; border-left:#FFF solid 1px; margin-top:40px;}
.contact{ padding-left:20px;  margin-top:40px;}


/*==================== SINGLE BLOG POST ====================*/
div.blogPostSingleImage  { /*max-width:650px; margin:0 auto;*/}







 /*==================== General elements ====================*/
		.tenfourty {max-width:1040px; margin:0 auto; height:auto; clear: both;}
		div.clear {clear:both; width:100%; display:block;}

a.readMore { clear:both;  background-color:#1B7034; color:white; border:#FFF solid 1px; padding:5px; font-weight:bold; margin-top:10px; float:left;}

	/*Quote section*/
	.quote { margin:10px 20px; background-color:#1A6C3E;  padding:20px 40px; position:relative; display:block; float:left;  }
#content	.quote p { color:white; float:left; font-size:14px; font-weight:bold;}
	
	p.copy:before, p.info:after {font-weight: bold;font-size:60px;color:white;font-family:Arial, Helvetica, sans-serif;position:absolute;} 

	p.copy:before {content: open-quote;	 top:0px; left:5px;}
	p.info:after {content: close-quote; bottom:0px; right:5px;}
	
	#content p.info {font-size:16px; }
	
	 
 

			/*Google map code*/
			 .google-maps {
        position: relative;
        padding-bottom: 98%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
	 
 


	 
 
.left {float:left;}
.right{float:right;}





/* Homepage Popup */
#popmake-31786 { padding: 0; }
#popmake-31786 .popmake-content { display: flex; }

#popmake-31786 .leftSection { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
#popmake-31786 .leftSection p:last-of-type { padding-bottom: 0; }
#popmake-31786 .leftSection a.button { background-color: #fff; color: #1b6f36; font-size: 16px; min-width: 285px; border: 1px solid #fff; border-radius: 3px; }
#popmake-31786 .leftSection a.button:hover { background-color: transparent; color: #fff; }

#popmake-31786 .rightSection { background-color: #fff; }
#popmake-31786 .rightSection p { padding-bottom: 0; margin-bottom: 0; }
#popmake-31786 .rightSection img { padding: 40px; margin-top: 52px; }

@media (max-width: 600px)
{
	#popmake-31786 .popmake-content { flex-direction: column; }
	#popmake-31786 .leftSection { order: 2; padding: 40px 20px; }
	#popmake-31786 .leftSection a.button { font-size: 16px; min-width: 240px; }
	#popmake-31786 .rightSection img { display: block; width: 300px; padding: 20px; margin-left: auto; margin-right: auto; }
}







/*==================== Media Queries ====================*/
	@media (max-width: 1029px) {
/*Tablet*/
.headerRight { padding-right: 25px; }
 .imageArea div.copy {  height:auto; width: 50%; }
#inner-content {padding:10px;}
 
 	.imageAreaCont.singlePage { width:100%; height:auto;}
 	.singlePage .headerImage { width:100%; height:auto; margin:0px; }
 	.singlePage .headerImage img { width:100%; height:auto; }
		.singlePage .copy { width:100%;   }
		.singlePage .imageArea div.copy {  height:auto; width: 100%; }
		h1.page-title {display:block; clear:both; width:100%;}
 }

 @media (max-width: 850px) {
	 		.service { height:300px; }
 }



 @media (max-width: 767px) {
/*Mobile*/
					 .nav{display:block;}  /*Needed for the mega menu! it forced the normal mob one off?*/

			/*header*/
.headerRight { margin-top: 10px; }
.headerCopy, .headerCopy.contactDetails { text-align: center; }

 .imageArea div.copy {  height:auto; width:100%; }
 	 		.service { height:380px; }


}
 @media (max-width: 480px) {
/*Small Mobile*/
 	 		.service { height:auto; }

}