/*
	Theme Name: RAW Gardens
	Author: AndrayV
	Author URI: http://www.andrayv.com/
	License URI: http://www.andrayv.com
	Description: RAW Gardens theme
	Version: 1.0

	*/


	/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html

	-------------------------------------------------------------- */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		border: 0;
		font-family: inherit;
		font-size: 100%;
		font-style: inherit;
		font-weight: inherit;
		margin: 0;
		outline: 0;
		padding: 0;
		vertical-align: baseline;
	}

	:focus {/* remember to define focus styles! */
		outline: 0;
	}

	body {
		background: #fff;
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	table {/* tables still need 'cellspacing="0"' in the markup */
		border-collapse: separate;
		border-spacing: 0;
	}

	caption, th, td {
		font-weight: normal;

	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: "";
	}

	blockquote, q {
		quotes: "" "";
	}

	a img {
		border: 0;
	}

	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
		 word-wrap: break-word;
	}


	/* ------------------------------------------------------------------- */



	body { margin: 0; padding: 0; font: 400 normal 17px 'Open Sans', Arial, sans-serif; color: #0d2c12; letter-spacing: 0.01em; background-color: #f7fbf8; position: relative;}

	p {margin: 0; padding: 0; line-height: 1.4em;}


	a {text-decoration: none; font-weight: 700; color: #81be53;  }
	strong {font-weight: bold;}
	em {font-variant: italic;}
	h1 {color: #31793d;  font: 400 normal 40px 'Cagliostro', serif; margin: 40px 0; padding: 5px 0; text-transform: uppercase;}
	h2 {color: #0d2c12;  font: 400 normal 30px 'Cagliostro', serif; padding: 30px 0 20px; text-transform: uppercase;}
	h3 {color: #0d2c12;  font: 400 normal 25px 'Cagliostro', serif; padding: 30px 0 20px; text-transform: uppercase;}
	

	table {width: 100%;}
	table thead td, table thead th {font-weight: 700;}
	table th {text-align: left; }
	table thead {background-color: #aaaaaa;}
	table tr:nth-child(even) {background-color: #dddddd;}
	img {max-width: 100%; height: auto;}


	.alignleft {float: left; margin: 0 50px 15px 0;}
	.alignright {float: right; margin: 0 0 15px 50px;}
	.aligncenter {float: none; margin: 0 auto; text-align: center;}
	img.aligncenter {display: block;}

	.clear {clear: both;}
	br.clear {line-height: 0; height: 0; display: none;}
	.readmore {font-weight: bold;}
	iframe {max-width: 100% !important; margin-bottom: 30px; }
	.white, .white p, .white a {color: #FFFFFF;}

body .grecaptcha-badge {

    line-height: 1.2em;
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;

}

	/*main layout*/
	.content-width {width: 1260px; margin: 0 auto; position: relative;}
	#wrapper {overflow: hidden;}

	/*header*/
	#mobile-header, #smaller-header {display: none; position: fixed;}
	#mobile-header, #smaller-header  {width: 100%; z-index: 9999; top: 0; backdrop-filter: blur(5px);}
	#header {position: absolute; width: 100%; z-index: 9999; backdrop-filter: blur(5px);}
	#header #header-bg, #smaller-header #header-bg,  #mobile-header #header-bg {position: absolute;  max-width: 100%;  left: 0; right: 0; top: 0; bottom: 0; background-size: 100%; height: 100%; overflow: auto; background-color: #FFFFFF; opacity: 0.9;
	box-shadow: 0 0 10px 0 #000000;
	-webkit-box-shadow: 0 0 10px 0 #000000;
	-moz-box-shadow: 0 0 10px 0 #000000;
	-o-box-shadow: 0 0 10px 0 #000000;
	-ms-box-shadow: 0 0 10px 0 #000000;
	}
	
	#smaller-header #header-bg, #mobile-header #header-bg {position: absolute;  max-width: 100%;  left: 0; right: 0; top: 0; bottom: 0; background-size: 100%; height: 100%; overflow: auto; background-color: #FFFFFF; opacity: 0.95;
	box-shadow: 0 0 10px -5px #000000;
	-webkit-box-shadow: 0 0 10px -5px #000000;
	-moz-box-shadow: 0 0 10px -5px #000000;
	-o-box-shadow: 0 0 10px -5px #000000;
	-ms-box-shadow: 0 0 10px -5px #000000;
	}
	
	
	

	#header #logo, #smaller-header #logo, #mobile-header #logo {width: auto; width: 165px; height: auto; float: left;  display: block; padding: 25px 4%; position: relative; z-index: 9; }
	#smaller-header #logo { padding: 10px 4%; width: 150px;}
	#header #phone, #header #email, #smaller-header #phone, #smaller-header #email, #mobile-header #phone, #mobile-header #email {vertical-align: middle; display: inline-block;}
	#header #phone img, #smaller-header #phone img, #mobile-header #phone img, #mobile-header #phone img {width: 27px; height: auto; float: left;  display: inline-block; margin-top: 2px; }
	#header #phone a strong, #smaller-header #phone a strong { float: left;  display: inline-block; padding: 4px 17px 0	;font: 700 24px 'Cagliostro', sans-serif; color: #80be51; text-transform: uppercase; line-height: 1em; vertical-align: middle; }
	#mobile-header #phone a strong {display: none;}
	#header #email img, #smaller-header #email img,#mobile-header #email img {width: 49px; height: auto; float: left;  display: inline-block;  margin: 0 0 0 15px; vertical-align: middle; }
	
	#header #menu-icon, #smaller-header #menu-icon  {display: none; }
	#mobile-header #menu-icon img {width: 46px; height: auto; float: left; display: inline-block; }
	

	#header div.contact-alignright, #smaller-header div.contact-alignright, #mobile-header div.contact-alignright {margin: 35px 4%; position: relative;	 float: right; z-index: 99999; }
	#smaller-header div.contact-alignright {margin: 20px 4%; }

			
	#main-menu {position: absolute; width: 100%; top: 38%;}

	#main-menu ul {text-align: center;}
	#main-menu ul li {display: inline-block; margin: 0 2%; line-height: 1em; }

	#main-menu ul li a {font: 400 normal 19px 'Cagliostro', Arial, sans-serif; color: #2e773a; text-transform:capitalize;  font-variant:small-caps; cursor: pointer;}
	#main-menu ul li a:hover,  #main-menu ul li.current-menu-item a, #header-contact a:hover img, #copyright a:hover, form.wpcf7-form input.wpcf7-submit:hover, #main-menu ul li.current-post-ancestor a,  #main-menu ul li.current-page-ancestor a, #main-menu ul li.current-menu-parent a,  #main-menu ul li.current-post-parent a {opacity: 0.7; }




#main-menu ul.sub-menu, #main-menu ul.sub-menu li ul.sub-menu {z-index: 99; display: none; background-color: #FFFFFF; position: absolute;
opacity: 0.95;
box-shadow: 0 6px 9px -11px #000000;
	-webkit-box-shadow:0 6px 9px -11px #000000;
	-moz-box-shadow:0 6px 9px -11px #000000;
	-o-box-shadow: 0 6px 9px -11px #000000;
	-ms-box-shadow: 0 6px 9px -11px #000000;	
}



#main-menu   ul li ul.sub-menu {position: absolute; padding: 0;  border-bottom: 3.5px solid #2e773a;  border-top: 3.5px solid #2e773a; top: 44px; margin-left: -86px; }
#main-menu ul.sub-menu li ul.sub-menu {position: relative;}
#main-menu ul.sub-menu li {display: block;}
#main-menu ul.sub-menu li {margin: 0;  }
#main-menu li.show-children ul.sub-menu,  #main-menu ul.sub-menu li.show-grand-children ul.sub-menu {display: block; background-color: #FFFFFF;}
#main-menu   ul li ul.sub-menu li:first-of-type {border-top: none;}
#main-menu   ul li ul.sub-menu li {display: block; border-top: 2.5px solid #2e773a;}
#main-menu ul.sub-menu li a {padding: 10px 30px; display: block; min-width: 150px;}


	

#submenu  ul li {display: none; }
#submenu  ul li.current-page-ancestor, #submenu  ul li.current_page_ancestor, #submenu  ul li.current-menu-item {display: block;}
#submenu  ul li.current-page-ancestor > a, #submenu  ul li.menu-item-has-children > a {display: none;}
#submenu  ul li.current-page-ancestor ul.sub-menu li > a, #submenu  ul li.menu-item-has-children ul.sub-menu li > a {display: block;}
#submenu ul li.current-page-ancestor ul.sub-menu li, #submenu ul li.current_page_ancestor ul.sub-menu li, #submenu  ul li.current-menu-item ul.sub-menu li {display: block; }
#submenu ul li a {background-color: #FFFFFF; width: 90%; padding: 10px 5%; margin: 15px 0; text-align: center; color: #2e773a; display: block;  font-weight: 400; font-size: 16px; line-height: 1.8em;}
	
#submenu ul li a:hover, #submenu ul li a:hover {color: #2e773a; }

#submenu .active a, #submenu  ul li.current-menu-item > a, #submenu   ul li.current_page_parent > a, #submenu   ul li.current-category-ancestor > a, #submenu   ul li.current-post-ancestor > a, #submenu   li.current-menu-ancestor > a, #submenu   li.current-menu-parent > a, #submenu   ul li.open > a, body.page-parent #submenu  ul li.menu-item-has-children ul li:first-of-type  a {color: #2e773a; background-color: #FFFFFF; border-bottom:  3px solid #2e773a; margin-bottom: -3px;}	
	
#main-menu ul li ul.sub-menu li ul.sub-menu {top: 0;}	
#submenu ul li ul.sub-menu li ul.sub-menu li a {margin-top: 6px; padding: 3px 5%; }



	
	

	/* banner */
div.banner {margin-bottom: 50px;}	
	#banner {position: relative; z-index: 1;}
	#banner li {line-height: 0;}
		
	#banner .metaslider .caption-wrap { background: none; background-color: #FFFFFF; opacity: 0.9; position: relative; width: 100%; box-shadow: 0px 0px 8px -4px #000000;
	-o-box-shadow: 0px 0px 8px -4px #000000;
	-webkit-box-shadow: 0px 0px 8px -2px #000000;
	-moz-box-shadow: 0px 0px 8px -4px #000000;	 }
	#banner .metaslider .caption { line-height: 1em; padding:12px 0; color: #2e773a; font: 400 normal 35px 'Cagliostro', Arial, sans-serif; text-transform: uppercase; text-align: center;  letter-spacing: 0.2em; word-spacing: 0.5em; width: 100%; 
	}

	#banner .metaslider .caption:nth-word(even) {color: #80be51;}
	#banner .metaslider .caption .lighter-green {color: #80be51; word-spacing: 2.4em;}

	/* content */
	body.home #content, #content {text-align: justify; position: relative; z-index: 2; padding: 50px 0;  overflow: hidden; width: 100%;}
	#content {padding-top: 150px; padding-bottom: 50px; text-align: justify; position: relative; z-index: 3; overflow: hidden; width: 100%;}
	#content h1 {font-size: 40px; font-weight: 500; margin-bottom: 50px; text-transform: uppercase; border-bottom: 10px solid #ebf5e7; letter-spacing: 0.04em; text-align: left;}
	#content h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px; text-align: left; clear: both;}
	#content ul,  #content ol {margin-top: 20px; margin-bottom: 40px; }
	#content ul li {list-style-type: disc; margin-bottom: 10px; margin-left: 30px; }
	#content ol li {list-style-type: decimal; margin-bottom: 10px; margin-left: 30px;}
	#content hr {border-top: none; border-bottom: 7px solid #ebf5e7; border-left: none; border-right: none; margin: 50px 0; clear: both;}
body.page-id-197 #content ul li {margin-bottom: 50px; clear: both;}
body.page-id-197 #content ul li img {margin-bottom: 50px; margin-top: 8px; clear: both;}
	
	#content img.bg-left {position: absolute; z-index: 1; left: -610px;}
	#content img.bg-right {position: absolute; z-index: 1; right: -950px;}
	
	
	#content .half {position: relative; z-index: 2; overflow: hidden;}
	#content .half-left {width: 48%; float: left; clear: both; }
	#content .half-right {width: 48%; float: right;  }
	
	#content .button { color: #FFFFFF; text-transform: uppercase; font: 700 normal 27px 'Open Sans', Arial, sans-serif; letter-spacing: 0.1em; text-align: center; padding: 15px 5%; width: 90%; margin: 10px 0;  bottom: 0; clear: both; display: inline-block; }
	#content .half .button { position: absolute;}
	#content .button-light {background-color: #80be51; }
	#content .button-dark {background-color: #2e773a; }
	
	#content .free-guide img {width: 260px; height: auto; margin: 20px auto; display: block;}
	#content .about img {width: 100%; height: auto; margin: 20px auto; display: block;}
	#content #welcome {width: 72%; margin: 0 14% 75px; }
	#content #welcome h1 {margin-top: 0px; }
	
		
	#content #project-stories {clear: both; padding-top: 40px;}
	
	#content #projects {margin: 50px 0 0;}
	#content #projects .thumbnail {position: relative;}
	
	#content #projects h1 {

    font-size: 33px;
    font-weight: 500;
    margin: 0;
	padding-left: 2%;
	padding-right: 2%;
    text-transform: uppercase;
    border-bottom: none;
    letter-spacing: 0.04em;
    text-align: center;
    background: white;
    opacity: 0.8;
    position: relative;
	bottom: 110px;}
	
	#content #projects span.overlay {
		opacity: 0;
		position: absolute;
		background: white;
		top: 0;
		right: 0;
		bottom: 5px;
		left: 0;
		transition: all 0.3s ease 0s;
		text-align: center;
	}
	
	#content #projects a span.overlay:hover {opacity: 0.8;}
	
	#content #projects a span.overlay span.text {
		position: relative;
		top: 35%;

		color: #000000;
		font-size: 40px;
		font-weight: normal;
		border-bottom: 1px solid #000000;
		padding: 20px 0;

	}
	
	#before-after { width: 100%; margin: 45px 0 ; }

	span.before, span.after { float: left;  position: relative;}
	
	span.before {width: 39%;}
	span.afterafter {width: 60.6%;}

	span.afterafter img {
		box-shadow: -47px 0px 42px -44px #000000;
		-webkit-box-shadow: -47px 0px 42px -44px #000000;
		-o-box-shadow: -47px 0px 42px -44px #000000;
		-ms-box-shadow: -47px 0px 42px -44px #000000;
		-moz-box-shadow: -47px 0px 42px -44px #000000;
		}
	
	#before-after span.text-over {position: absolute; z-index: 1; bottom: 20px; left: 0;  	}
	
	span.text-over span.text-over-bg {background-color: #cecece; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; opacity: 0.8;}
	span.afterafter span.text-over span.text-over-bg {background-color: #def9d5; opacity: 0.9;}
	span.text-over span.text {z-index: 2; position: relative; padding: 5px 20px; display: inline-block; min-width: 180px; vertical-align: middle;}
	span.text-over span.text-text {z-index: 2; position: relative; text-transform: uppercase; font: 700 normal 27px 'Open Sans', Arial, sans-serif; letter-spacing: 0.1em;}
		a span.text-over span.text-text {color: #0d2c12;}
	span.text-over .pointer {display: inline-block; vertical-align: middle;  width: 0;   height: 0;   border-top: 24px solid transparent;  border-bottom: 24px solid transparent;  border-left: 24px solid #cecece;  opacity: 0.8;}
	span.afterafter span.text-over .pointer {border-left: 24px solid #def9d5;  opacity: 0.9;}
	#content #before-after  .button {margin-top: 40px;}
	
	#testimonials {margin: 100px 0 0; }
	.all-testimonials-link {margin-bottom: 100px;}
	.testimony {
    width: 42%;
    color: #31793d;
	font-style: italic;
        line-height: normal;
    line-height: 2em;
    position: relative;
    display: inline-block;
    margin: 10px 3.4% 30px;
    vertical-align: top;
	text-align: justify;
}
	
	
	#contact {clear: both; padding-top: 10px;}
	#contact, #download {position: relative; min-height: 515px; text-align: left;}
	#contact, #contact a {color: #31793d; font-size: 25px;}
	#contact .tel, #contact .tel a {font-size: 35px; display: inline-block; margin: 20px 0;}
	#contact .half-right div.thumbnail {position: absolute; top: 85px; right: 0; width: 43%; height: auto; font-size: 18px; text-align: center;}
	#contact .half-right {margin-bottom: 30px;}
	#contact .zindex-lift {z-index: 2; position: relative; min-height: 630px;}
	#content img.bg-center {position: absolute; z-index: 1; right: -33px; bottom: -430px; width: 986px; height: auto;}
	#about-banner {position: relative; z-index: 2; margin-top: 100px;}
	#about-banner img {line-height: 0; margin: 100px 0; display: block; clear; both;
	box-shadow: 0px 0px 10px -5px #000000;
	-o-box-shadow: 0px 0px 10px -5px #000000;
	-webkit-box-shadow: 0px 0px 10px -5px #000000;
	-moz-box-shadow: 0px 0px 10px -5px #000000;}
	
	
	a.go-back-button {display: block; text-align: center; position: relative; z-index:3; margin-top: 60px; clear: both; }
	
	
	
		/* gallery */

body #content div.gallery .gallery-caption {    border: none;    margin: 0 auto;  position: relative;     width:100%;}
body #content div.gallery {text-align: center;}    
body #content div.gallery img {    border: none; }
img.wp-image-254 {padding-top: 80px;}


div#journals { margin-top: 50px;}
#content div#journals img.attachment-medium {width: 100%;}
div.journal {width: 28%; margin: 0 2.5% 30px; display: inline-block; vertical-align: top;}
#content div.journal h2 {width: 90%; padding: 15px 5%; letter-spacing: 0em; font-size: 22px; text-align: center;}

	
/* footer */

div#strapline {background-color: #ebf5e7; padding: 5px 0;}
div#strapline p {color: #80be51;  font: 400 normal 35px 'Cagliostro', Arial, sans-serif; text-transform: uppercase; text-align: center;  letter-spacing: 0.1em;}
#footer .logo img {width: 300px; height: auto; margin: 70px auto 40px; display: block;}
#footer #copyright {text-align: center; font: 400 normal 20px 'Cagliostro', Arial, sans-serif; color: #2e773a}
	
	

	/* contact form */
	
	#form-contact div.wpcf7 {width: 65%; display: inline-block;}
	#form-contact .thumbnail { line-height: 0;
		box-shadow: 1px 1px 5px -4px #000000;
				-webkit-box-shadow: 1px 1px 5px -3px #000000;
				-moz-box-shadow: 1px 1px 5px -4px #000000;
				-o-box-shadow: 1px 1px 5px -4px #000000;
		width: 32%; margin-bottom: 0; display: inline-block; vertical-align: top;
	}
	#form-contact .right-column {margin: 0 10px;}
	#form-contact form.wpcf7-form .column br {display: none;}
	
	#form-contact .column {width: 48%; margin-bottom: 0; display: inline-block; vertical-align: top;}
	
	form.wpcf7-form {margin: 0 auto; position: relative; z-index: 2; }
			form.wpcf7-form input,  form.wpcf7-form textarea, form.wpcf7-form select {width: 95%; padding: 17px 2.5%; margin: 0 auto 10px; background-color: #FFFFFF; color: #252525; font: 400 normal 15px 'Open Sans', Arial, sans-serif; text-align: left; border: none;
			box-shadow: 1px 1px 5px -4px #000000;
				-webkit-box-shadow: 1px 1px 5px -3px #000000;
				-moz-box-shadow: 1px 1px 5px -4px #000000;
				-o-box-shadow: 1px 1px 5px -4px #000000;
			}
			form.wpcf7-form textarea {line-height: 1.5em;}
			form.wpcf7-form select {padding: 15.7px 15px; width: 100%;}
			form.wpcf7-form option {padding: 0 15px; background-color: #FFFFFF; color: #252525; font: 400 normal 15px 'Open Sans', Arial, sans-serif; text-align: left; border: none;}

			form.wpcf7-form input.wpcf7-submit {background-color: #8bc362; color: #FFFFFF; text-transform: uppercase; font-size: 22px; font-weight: 700; margin-top: 0; width: 100%; position: relative; z-index: 5; cursor: pointer; float: none; text-align: center; padding: 10px 2.5%; margin-bottom: 0; }
			.button {font-size: 13px; clear: both; margin-top: 40px; display: block; width: 72px;}
			
			div.wpcf7 span.ajax-loader {display: block; margin: 20px auto; }
	
				span.wpcf7-not-valid-tip {
				background-color: #ff7373;
				color: #fff;
				display: block;
				font-size: 0.8em;
				line-height: 1em;
				padding: 2px;
				position: absolute;
				top: -29px;
				left: 0;
				}

			form.wpcf7-form input.wpcf7-not-valid,  form.wpcf7-form textarea.wpcf7-not-valid, form.wpcf7-form select.wpcf7-not-valid {border: 1px solid #ff7373;}
			

			
				/*cookie bar*/

				body #cookie-law-info-bar {
					line-height: 1.2em;
					position: absolute !important;
					bottom: -39px !important;
				}
	



/*MEDIA QUERIES*/

	@media screen and (max-width: 1300px) {
				
		.content-width {width: 90%; margin-left: 5%; }
#main-menu ul li { margin: 0 2%;}


#header div.header-menu {    width: 40%;		}

#banner {width: 150%; margin-left: -25%; }
#banner .metaslider .caption {    font: 400 normal 35px 'Cagliostro', Arial, sans-serif; word-spacing: 0.8em;  letter-spacing: 0.1em;}



body.home #content {      padding: 30px 0 50px; }		
#content h1 {font-size: 35px; text-align: left; letter-spacing: 0;}		
	#content #projects h1 {    font-size: 25px; bottom: 100px; }
		#content #projects a span.overlay span.text {	font-size: 30px;}

#content #freeGuide .half-left { width: 53%; }
#content #whatinspiresus .half-right { width: 43%; }
#content .button {		font-size: 25px ; }

	}
	
	
	
	@media screen and (max-width: 1200px) {

	
	
	
	
	}

@media screen and (max-width: 1000px) {
	
	
				#header, #small-header {display: none;}	

		#mobile-header {display: block;}

		#mobile-header #logo {width: 130px; padding: 11px 3%;}
		#mobile-header #menu-icon {z-index: 3; position: absolute; left: 0; margin: 27px auto; width: 100%; text-align: center;}
		#mobile-header #menu-icon img {margin: 0 auto; float: none;	}

	#mobile-header div.contact-alignright {    margin: 17px 4%; }
	
	#main-menu {    position: relative;    width: 100%;    top: 0;}
	#menu div.navigation {display: none;}
	
	#menu div.navigation { position: absolute;     width: 100%;  padding: 5px 0;   top: 105%; background-color: #FFFFFF; opacity: 0.95;
box-shadow: 0 6px 9px -11px #000000;
	-webkit-box-shadow:0 6px 9px -11px #000000;
	-moz-box-shadow:0 6px 9px -11px #000000;
	-o-box-shadow: 0 6px 9px -11px #000000;
	-ms-box-shadow: 0 6px 9px -11px #000000;	}
	#content { padding-top: 100px;}
	
	#main-menu   ul li ul.sub-menu {top: 30px; }
	
	
		.alignleft, .alignright{ max-width: 50%;}


	#content {padding-top: 80px; }
	#content #projects h1 {    font-size: 20px; bottom: 85px; }

	#banner {    position: relative;    z-index: 1;    width: 200%;    height: auto;    margin-left: -50%; }
	
	#banner .metaslider .caption {    font: 400 normal 25px 'Cagliostro', Arial, sans-serif; word-spacing: 0.5em;  letter-spacing: 0.05em; width: 90%; margin-left: 5%;}
	#banner .metaslider .caption-wrap {
    bottom: 0;
    background: none;
        background-color: rgba(0, 0, 0, 0);
    background-color: #FFFFFF;
    opacity: 0.9;
    position: relative;
width: 52%;
margin-left: 24%;}

#banner .metaslider img.slide-217 {margin-left: 13%;}

	#content img.bg-left {position: absolute; z-index: 1; left: -570px;}
	#content img.bg-right {position: absolute; z-index: 1; right: -570px;}
	
	
		#content h1 {   font-size: 30px; }
#content #freeGuide .half-left { width: 21%; margin: 45px 0 0 -6%; padding: 0 6%; background-color: #e1f5cf; min-height: 575px; }
#content #freeGuide .half-left h1 {border: none; text-align: center;}
#content #whatinspiresus .half-right { width: 65%; }
#content .button {		font-size: 20px ; letter-spacing: 0; left:  0; margin-bottom: 0;}		
#content .free-guide img {width: 220px;}


span.text-over span.text {z-index: 2; position: relative; padding: 5px 20px; display: inline-block; min-width: 100px; vertical-align: middle;}
	span.text-over span.text-text {z-index: 2; position: relative; text-transform: uppercase; font: 700 normal 20px 'Open Sans', Arial, sans-serif; letter-spacing: 0.1em;}

span.text-over .pointer {display: inline-block; vertical-align: middle;  width: 0;   height: 0;   border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 20px solid #cecece;  opacity: 0.8;}
	span.afterafter span.text-over .pointer {border-left: 20px solid #def9d5;  opacity: 0.9;}


	
	#content #contact .half-right {float: none; width: 50%; margin-left: 25%; }
	#content #contact .half-right div.thumbnail {width: 100%; position: inherit; margin-top: 30px; height: auto; font-size: 18px; text-align: center; }
	#content #contact .half-left  {float: none; width: 50%; margin-left: 25%;}

div.journal {width: 45%; margin: 0 2.5% 30px; display: inline-block; vertical-align: top;}


		#form-contact div.wpcf7 {width: 100%;}
		#content #form-contact .thumbnail {width:60%; display: block; margin: 20px auto;}
	#content img.bg-center {right: -33px; bottom: -130px;}
	#phone-contact a {display: block; }
	.testimony { width: 100%; margin-right: 0; margin-left: 0;}
	
#contact {    padding-top: 20px;}
#about-banner img {    line-height: 0;   width: 150%;   margin: 20px 0 30px; }
div#strapline p {font: 400 normal 20px 'Cagliostro', Arial, sans-serif; }
#footer .logo img { width: 232px;}
#footer #copyright {		font: 400 normal 16px 'Cagliostro', Arial, sans-serif;}
	}
	
	
		@media screen and (max-width: 800px) {
				#content #projects img { max-width: 150%;    }
				#content #projects a span.overlay span.text {	font-size: 25px;}
				#contact {    padding-top: 0;}
		}
	
	@media screen and (max-width: 600px) {
#banner .metaslider .caption {    font: 400 normal 25px 'Cagliostro', Arial, sans-serif; word-spacing: 0.3em;  letter-spacing: 0; width: 90%; margin-left: 5%;}
#banner .metaslider .caption .lighter-green {color: #80be51; word-spacing: 0.3em;}



#content .half { width: 100%; float:  none; min-height: 0; }
#content .half .button {position: relative;}
#content #freeGuide .half-left { width: 100%; position: relative; padding: 6%; margin-left: -6%; background-color: #e1f5cf; float: none; min-height: 0;}
#content #freeGuide .half-left h1 { width: 25%; display: inline-block; vertical-align: middle; margin: 0; }
#content #freeGuide .half-left a { width: 73%; display: inline-block; vertical-align: middle; }
#content #freeGuide .half-left div.button { padding: 50px 10px; width: 120px; margin: 0; float: right; }
#content #freeGuide .half-left div.free-guide { height: 180px; margin: 0 0 0 5%; text-align: center; position: absolute; width: 100%; top: 25px;  }
#content #freeGuide .half-left div.free-guide img { height: 180px; width: auto;  margin: 0; }

#content #whatinspiresus .half-right { width: 100%; float: none;}
#content ul {text-align: left;}
#content ul li, #content ol li {margin-left: 15px; }
	


#before-after span.text-over {position: absolute; z-index: 1; bottom: 10px; left: 0;  	}
span.text-over span.text {z-index: 2; position: relative; padding: 5px 20px; display: inline-block; min-width: 80px; vertical-align: middle;}
	span.text-over span.text-text {z-index: 2; position: relative; text-transform: uppercase; font: 700 normal 15px 'Open Sans', Arial, sans-serif; letter-spacing: 0.1em;}

span.text-over .pointer {display: inline-block; vertical-align: middle;  width: 0;   height: 0;   border-top: 15px solid transparent;  border-bottom: 15px solid transparent;  border-left: 15px solid #cecece;  opacity: 0.8;}
	span.afterafter span.text-over .pointer {border-left: 15px solid #def9d5;  opacity: 0.9;}
#content #projects img { max-width: 100%;    }
	#content #project-stories {    clear: both;    padding-top: 20px;}
	#testimonials {    margin: 60px 0 0;}
.all-testimonials-link {    margin-bottom: 60px;}
#content #contact .half-left,  #content #contact .half-right {
    float: none;
    width: 80%;
    margin-left: 10%;
	
}


img.wp-image-254 {padding-top: 40px;}

#content img.bg-center { width: 200%; max-width: 200%; right: -100%; bottom: -28%;}

		body #cookie-law-info-bar {
    line-height: 1.2em;
    position: absolute !important;
    bottom: -53px !important;
}
		
		}
	
	

	
	
	@media screen and (max-width: 480px) {

	#content h1, #content .half-right h1 {font-size: 28px; margin-bottom: 20px;}
	
	#content p {text-align: left;}
#content ol {text-align: left;}
	.alignleft, .alignright{float: none; margin: 0 auto 15px; display: block; max-width: 100%;}
	#mobile-header div.alignright {    margin: 17px 4%; float: right; }
	#mobile-header #menu-icon img {width: 43px;}
	#main-menu ul li {display: block; margin: 10px 4%;}
	

#main-menu ul li ul.sub-menu {
    position: relative;
    padding: 0;
    border-bottom: 3.5px solid #2e773a;
    border-top: 3.5px solid #2e773a;
    top: 0;
    margin: 10px 0;
}
	
	
	
	.alignleft img, .alignright img {width: 100%; height: auto; margin-bottom: 15px;}
	#banner {margin-top: 78px;}
	#banner .metaslider .caption {width: 90%; margin-left: 5%;  font: 400 normal 20px 'Cagliostro', Arial, sans-serif;}

	#content #freeGuide .half-left div.button {padding: 50px 10px; width: 70px; margin: 0; float: right; word-wrap: break-word;}

#content #welcome {width: 100%; margin: 0 0 75px; }
#content #welcome h1 {margin: 15px 0; }

	
	#before-after span.text-over {position: absolute; z-index: 1; bottom: 5px; left: 0;  	}
span.text-over span.text {z-index: 2; position: relative; padding: 5px 10px; display: inline-block; min-width: 80px; vertical-align: middle;}
	span.text-over span.text-text {z-index: 2; position: relative; text-transform: uppercase; font: 700 normal 15px 'Open Sans', Arial, sans-serif; letter-spacing: 0;}

span.text-over .pointer {display: inline-block; vertical-align: middle;  width: 0;   height: 0;   border-top: 15px solid transparent;  border-bottom: 15px solid transparent;  border-left: 15px solid #cecece;  opacity: 0.8;}
	span.afterafter span.text-over .pointer {border-left: 15px solid #def9d5;  opacity: 0.9;}
	
	#content #contact .half-left,  #content #contact .half-right {
    float: none;
    width: 100%;
    margin-left: 0;
	
}
div.journal {width: 100%; margin: 0 0 30px; display: inline-block; vertical-align: top;}
body.page-id-197 #content ul li img {margin-bottom: 10px;}
body.page-id-197 #content ul li { padding-bottom: 30px; border-bottom: 5px solid #ebf5e7; }

	#copyright a {width: 90%;}
	}
	
	
		@media screen and (max-width: 400px) {
	#banner .metaslider .caption {     width: 90%; margin-left: 5%;}
	}
	
	
	
@media screen and (max-width: 370px) {
	#mobile-header #logo {width: 110px; padding: 10px 3%;}
	#mobile-header #menu-icon {margin: 23px 0 0 10px; }
	#mobile-header div.contact-alignright {    margin: 14px 4%;}
	#mobile-header #menu-icon img {width: 35px;}
	#mobile-header #email img {  width: 40px;}
	#mobile-header #phone img {    width: 22px; }
	#banner {margin-top: 69px;}
	#content {padding-top: 50px; }
	#content #freeGuide .half-left h1 { width: 100%; display: inline-block; vertical-align: middle; margin: 0; }
#content #freeGuide .half-left a { width: 100%; display: inline-block; vertical-align: middle; }
#content #freeGuide .half-left div.button { padding: 50px 10px; width: 120px; margin: 10px 0 0; position: relative; clear: none; float: right; word-wrap: normal;}
#content #freeGuide .half-left div.free-guide { height: 180px; margin: 0; text-align: center; position: relative; width: 44%; float: left; top: 0;  }
#content #freeGuide .half-left div.free-guide img { height: 180px; width: auto;  margin: 0; }
	
	
	span.before, span.afterafter { float: none; position: relative; display: block; }
	
	span.before {width: 120%; margin-left: -10%;}
	span.afterafter {width: 186.46%; margin-left: -30%;}

	#before-after span.before img {max-width: 100%;}
	#before-after span.afterafter img {max-width: 100%; margin-left: -145px;}
	
	
	span.afterafter img {
		box-shadow: none;
		-webkit-box-shadow: none;
		-o-box-shadow: none;
		-ms-box-shadow: none;
		-moz-box-shadow: none;
		}
	
	#before-after span.text-over {position: absolute; z-index: 1; bottom: 20px; left: 0;  	}
	#before-after span.afterafter span.text-over {left: 65px;  	}
	
	span.text-over span.text-over-bg {background-color: #cecece; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; opacity: 0.8; color: #000000;}
	span.afterafter span.text-over span.text-over-bg {background-color: #def9d5; opacity: 0.9;}
	span.text-over span.text {z-index: 1; position: relative; padding: 5px 20px; display: inline-block; min-width: 180px; vertical-align: middle;}
	span.text-over span.text-text {z-index: 3; position: relative; text-transform: uppercase; font: 700 normal 27px 'Open Sans', Arial, sans-serif; letter-spacing: 0.1em;}
	
	span.text-over .pointer {display: inline-block; vertical-align: middle;  width: 0;   height: 0;   border-top: 24px solid transparent;  border-bottom: 24px solid transparent;  border-left: 24px solid #cecece;  opacity: 0.8;}
	span.afterafter span.text-over .pointer {border-left: 24px solid #def9d5;  opacity: 0.9;}
	#content #before-after  .button {margin-top: 40px;}

	
	
	
}
	
	
	
	@media screen and (max-width: 330px) {
		#mobile-header #menu-icon { margin: 23px 0 0 10px; }
	#mobile-header #email img {    margin: 0 0 0 7px; }
	#content #contact .half-left a {white-space: nowrap;}
	body #content div.gallery .gallery-item {width: 100%; min-width: 120px; margin: 10px 0 20px;}
	}
	
	
		@media screen and (max-width: 320px) {
			
			span.afterafter {
    width: 196.46%;
    margin-left: -32%;
}
			
		}
	
	
	@media screen and (max-width: 300px) {
		#mobile-header #menu-icon { margin: 23px 0 0 0; }
			#banner .metaslider .caption {    word-spacing: 0.5em; }

						/*cookie bar*/

body #cookie-law-info-bar {
    line-height: 1.2em;
    position: absolute !important;
    bottom: -90px !important;
}
		
	}