/* <!-- */ 

/*

Theme Name: 	Greendoors
Theme URI: 
Description: 	Greendoors Theme for Wordpress 1504
Version: 		5.0
Author: 		GREENDOORS WEB_DEV 2024

*/

/* General styles */ 

/*RESET*/

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0;  outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}



/*MAIN*/

body { 

	font-size: 1.05em;
	line-height: 1.25em;
	font-family: "Abel", sans-serif;
	background:#425233;
	color: #555;

}


h1 {font-size:38px; color:#404040; line-height:1.15em; margin:20px 0; text-align:center;}

h2 {font-size:28px; color:#000; line-height:1.15em; margin:20px 0; text-align:left;}

h3 {font-size:28px; color:#fff; line-height:1.15em; margin:20px 0; text-align:center;}

h4 {font-size:14px; color:404040; line-height:1.15em; margin:20px 0; text-align:left; font-weight: normal; font-style:italic;}

h5 {font-size:18px; color:#404040; line-height:1.15em; margin:0; text-align:left;}

h6 {font-size:24px; color:#45556E; line-height:1.15em; margin:20px 0; text-align:left;}

p {line-height:1.45em; margin-bottom:2%;}

a {color:#404040; text-decoration:none;}

a:hover {color:#616161; text-decoration: underline; text-decoration-color:#fcf400;}

img {width:100%;}

.small-header {color:#404040; font-size:20px; font-weight:bold;}

.sub-heading {color:#447700; font-size:24px; font-weight:bold;}

.image-paragraph p {text-align:left; margin:3% 0 3% 0; font-size:16px;}
.image-within {border:2px; border-color:#fff;}

.dividing-line {border-bottom:1px solid #999; height:1px; width:100%; margin:3% 0 3% 0;}

.headerarea {
	background: #FFF;
	width: 100%;
	height: 76px;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 4px solid #37A80E;
	z-index: 100;
}

.head-content {width:100%; max-width:960px; margin:0 auto;}

.offset:before { 

display: block; 
content: " "; 
height: 80px; /* Give height of your fixed element */
margin-top: -80px; /* Give negative margin of your fixed element */ 
visibility: hidden; 

	}

 

#logo {margin:1.4% 2% 0% 2%; float:left; width:200px; height:60px; display:block; background:#fff; text-align:center; line-height:60px; vertical-align: middle;}

a#logo {color:#000; text-decoration:none;}
a:hover#logo {color:#000; text-decoration:underline;}

#logo img {width:200px; height:60px;}


nav {float:right; padding:20px; }
	.menu a{text-decoration:none; color:#000}
	.menu a:hover{text-decoration:underline; text-decoration-color:#e8dc00}

#menu-icon {display:hidden; width:40px; height:40px; background:#616161 url(../greendoors/img/menu-icon.png) center;}

a:hover#menu-icon {background-color:#f2ea00; border-radius: 4px 4px 0 0;}

nav ul {list-style: none;}

nav li {display: inline-block; float:left; padding:10px}

.current {color: #FF9900;}



#section8 {max-width:2600px; position:relative; padding:0px}

#wrapper {width:100%; margin:0 auto; height:100%;}

.head-content {width:100%; max-width:960px; margin:0 auto;}

.home-content {width:100%; max-width:960px; margin:0 auto;}

#home-block {border-bottom:1px solid #717171; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box; height:300px;}

#midheader {background:url(../greendoors/img/content_banner.jpg) #f7f7f7 no-repeat; padding:0; position:normal; min-height:600px; height:100%; width:100%; margin:0;}

#midheadercontent {width:100%; color:#FFF; text-align:center;margin:0 auto; height:50px; position:absolute; top:250px; left:0; }

.mainimage-header {font-size:48px; color:#fff; margin:0 0 2% 0; line-height:32px; font-weight:bold;}
.mainimage-subheader {font-size:38px; color:#fff; margin:0 0 2% 0; line-height:32px; font-weight:bold;}
.mainimage-text {font-size:22px; color:#fff; margin:0 0 2% 0; line-height:32px; font-weight:normal;}

.homebutton {margin: 0px auto; width: 100px;}
.homebutton a {display:block; text-align:center; color:#fff; background:#ff9900; text-decoration:none; padding:5px 8px 5px 8px;}
.homebutton a:hover {color:#fff; background:#404040;}

.textcontact-content {width:94%; max-width:960px; margin:0 auto; }
.textcontact-content p {font-size:22px;}

#textcontact-block {border-bottom:1px solid #717171; background:#f5faf6; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;}
.textcontact-content a {width:100px; display:block; text-align:center; color:#000; background:#F2EA00; text-decoration:none;}
.textcontact-content a:hover {color:#C0C0C0; background:#000;}
.textcontact-content ul li {font-size:20px; font-weight:bold; line-height:1.45em;}

.strategybutton {margin:0 auto; width:190px; margin-bottom:0;}
.strategybutton a {display:block; text-align:center; color:#fff; background:transparant; text-decoration:none;  padding:3px 5px 3px 5px; border:2px solid #fff;}
.strategybutton a:hover {color:#fff; background:#f2ea00;}


#exp-block {border-bottom:1px solid #717171; background:#D1D1D1; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;}
.exp-content {width:100%; max-width:760px; margin:0 auto;}



#proj-block {border-bottom:1px solid #717171; background:#D1D1D1; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;}
.proj-content {width:100%; max-width:760px; margin:0 auto; min-height:600px; margin-bottom:2%;}


#flowchart-block {border-bottom:1px solid #717171; background:url('../img/forest-bg.jpg') no-repeat center #f7f7f7; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box; min-height:500px; 
width:100%;}
.flowchart-content {width:100%; max-width:960px; margin:0 auto;}
.boxeffet {width:100%; margin:0 auto; height:260px; position:relative; top:10px; max-width:680px; left:0; background:#ff6a00; opacity:0.8; padding:10px; text-align:center}
.boxeffetborder {width:100%; margin:0 auto; height:300px; position:relative; top:80px; max-width:720px; left:0; border:10px solid #fff;}

#half-block {border-bottom:1px solid #717171; background:url(img/forest-bg.jpg) no-repeat center #f7f7f7; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;
width:100%;}
.half-block-content {width:100%; margin:0 auto; color:#ffffff;}
.half-right {width:50%; margin:0 auto; height:100%; min-height:600px; position:relative; left:0; background:url(img/half-right.jpg) no-repeat center #f7f7f7;}
.half-left {width:50%; margin:0 auto; height:100%; min-height:600px; left:0; background:#22216b; position: relative;}
.fontchange {font-size:15px; margin:15% 20% 10% 20%;}
.fontchange-h1 {font-size:15px; color:#fff; line-height:1.15em; margin:20px 0;}
.fontchange-h2 {font-size:38px; color:#fff; line-height:1.15em; margin:20px 0;}

#textimage-block {border-bottom:1px solid #717171; background:#f7f7f7; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;}
.textimage-content {width:100%; max-width:760px; margin:0 auto;}


#textimagecol-block {border-bottom:1px solid #717171; background:url('<?php bloginfo('template_directory'); ?>/img/tree_bg.jpg') no-repeat top center;
        background-attachment: scroll;
        background-size: auto;
    background-attachment: fixed; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box; color:#fff;}
.textimagecol-content {width:100%; max-width:760px; margin:0 auto; min-height:600px; font-size:30px;}
.textimagecol-content h1 {color:#fff;}
.textimagecol-content h5 {color:#fff;}

#contact-block {border-bottom:1px solid #404040; background:url(../greendoors/img/footer_bg.jpg) #f7f7f7 no-repeat; padding-top:30px; margin-top: -30px; -webkit-background-clip: content-box; background-clip:content-box;}
.contact-content {width:100%; max-width:760px; margin:0 auto; color:#fff; min-height:500px;}
.contact-header {font-size:54px; color:#fff; line-height:2.15em; padding:0; text-align:center; border-bottom:1px solid #fff;}
.contact-text {color:#fff; line-height:2.15em; padding:0; margin:6% 0 6% 0; text-align:center;}

.contact-area { width:100%; max-width:400px; padding:2% 0 2% 0; background:#000; color:#fff; margin:0 auto; margin-bottom:4%; margin-top:4%; font-size:86%;}

.phoney {margin: 0px auto; width:49%; display:inline; margin-right:1%; background:url(img/phone.png) no-repeat left top; background-position:left; padding-left:5%; height:30px;}

.email-footer {margin: 0px auto; width:49%; display:inline; margin-left:1%; background:url(img/email.png) no-repeat left top; background-position:left; padding-left:5%; height:30px;}
.email-footer a {color:#fff;}


/*  SECTIONS  */

.column {clear:both; padding:0; margin:0 auto; margin-bottom:5%;}

.column-flush {clear:both; padding:0; margin:0 auto; margin-bottom:0%;}



/*  COLUMN SETUP  */

.col {display:block; margin: 1% 0 1% 0%;}

.col:first-child { margin-left: 0; }

.col img {display:block; padding:3px; width:100%; max-width:100%; max-height:150px; border:3px solid #C0C0C0;}

.col-flush {display:block; float:left; margin:0%;}



/*  GROUPING  */

.group:before,

.group:after { content:""; display:table; }

.group:after { clear:both;}

.group { zoom:1; /* For IE 6/7 */ }



/*  GRID OF THREE */

.col_3 { width: 100%; }

.col_3a { width: 100%; margin:0%; text-align:center;}

.col_2 { width: 66.13%; float:left;}

.col_1 { width: 30.26%; float:right;}

.col_1a { width: 30.26%; margin:5% 3% 0 0%; text-align:center;}

.col_1_pic1 { width: 30.26%; padding:0%; background:#00FF00;}

.col_4 { width: 50%; text-align:center;}

.col_4a { width: 50%; margin:5% 0% 0 0%; text-align:center;} 

.col_5 { width: 30%; text-align:center;}

.col_6 { width:4%; text-align:center; padding:2%;}

.col_7 { width:43%;}

.col_8 { width:10%;}

.col_9 { width:45%;}

.col_9a { margin-top:10%;}

.col_10 { width:100%;}

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
	border:3px solid #C0C0C0;
	padding:3px;
    vertical-align: bottom
}

.flow-image {display:block; float:left; margin: 7% 10% 1% 10%;}


ul.no_bullet {list-style-type:none; padding:0; margin:0;}



li.sixtick {background:url(<?php bloginfo('template_directory'); ?>/img/6.png) no-repeat left top; text-align:left; background-position:right; width:90%;}

li.fivetick {background:url(<?php bloginfo('template_directory'); ?>/img/5.png) no-repeat left top; text-align:left; background-position:right; width:90%;}

li.threetick {background:url(img/3stars.png) no-repeat left top; text-align:left; background-position:right; width:90%;}

li.twotick {background:url(img/2stars.png) no-repeat left top; text-align:left; background-position:right; width:90%;}

li.onetick {background:url(img/star.png) no-repeat left top; text-align:left; background-position:right; width:90%;}





/*MEDIA QUERY*/
@media only screen and (max-width:800px) {

	#logo {padding:0; margin:1.75% 0 0 2%;}


	.headerarea {position:fixed;}

	.offset:before {  
	height: 76px; /* Give height of your fixed element */
	margin-top: -76px; /* Give negative margin of your fixed element */ 
		}

	#menu-icon {display:inline-block;}

	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		padding:0px;
		background: #fff;
		border-top:2px solid #616161;
		border-left:2px solid #616161;
		border-right:2px solid #616161;
		border-bottom:1px solid #616161;
		right: 20px;
		top: 60px;
		max-width:200px;
		border-radius:0;
	}

	nav li {text-align:center; width:100%; margin:0; padding:0; border-bottom:1px solid #616161;}

	nav:hover ul {display:block;}

	nav ul li a:hover {margin:0; padding:5px 0 5px 0; display:inline-block!important; width:100%; color:#fff; background:#37E0A;}

	nav li a {border-right:0; color:#fff; display:inline-block!important; margin:0; padding:5px 0 5px 0; width:100%; background:#f7f7f7; color:#404040;}

	h1 {font-size:38px;}

	.services-content {text-align:center; width:90%; margin:0 auto;}
	
.view {
   width:100%;
   margin:0 auto;
   float:none;
   margin-bottom:20px;
   }

	.wp-block-image .alignright {max-width:300px; width:100%; max-height:220px; height:100%; margin:0; clear:float;}

.textcontact-content {width:80%;}
.textcontact-content p {font-size:18px;}

/* --> */

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

	#logo {padding:0; margin:3% 0 0 3%;}	

	.col { width:100%; clear:float;}
	.col_5, .col_4, .col_3, .col_1 { width: 100%; float:left;}
	.col_2 { width: 100%; float:left;}
	.col_1a { width: 100%; float:left; margin:0 auto;}
	.col img { width:100%; clear:float;}
	.wp-block-image .alignright {float:left; margin:0;}
	.wp-block-image img { width:100%; float:left;}
	
	.about-content {width:90%;}
	.services-content {width:90%;}
	.strategy-content {width:90%;}
	.contact-content {width:90%;}
	.contact-left {display:block; width:100%; padding:5px 0 0 0;}
	.contact-right {display:block; width:100%; padding:5px 0 0 0;}


   h1 {font-size:28px;}

	.view {max-width:300px; width:100%; max-height:220px; height:100%; margin:0 auto; float:none; }
	
	.textcontact-content {width:80%;}
	.textcontact-content p {font-size:18px;}
	.wp-block-image img {max-width:300px;}
	.wp-block-image .alignright {max-width:300px; width:100%; max-height:220px; height:100%; margin:0%; clear:float;}
	
}