* {box-sizing: border-box; background-repeat:no-repeat;}

/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
p,li {}
p, li, a, input, select, option, label, textarea, button, span, td, button.cky-btn, .cky-accordion-header button.cky-accordion-btn {font-family: "Montserrat", sans-serif; color:#666; font-weight:300; line-height:1.4em; letter-spacing:0px; font-size:18px;}
h1,h2,h3, h1 a, h2 a, h3 a {font-family:"Montserrat", sans-serif; color:#666; letter-spacing:1px; line-height: 1.2em;}
h4,h5,h6, h4 a, h5 a, h6 a {font-family:"Montserrat", sans-serif; color:#666; letter-spacing:1px;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;}
#container>main, #container>main>div, .policies, header, footer  {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1450px; max-width: 100%;}
.content {float: left; width: 90%; max-width: 100%; margin:0 5%; position:relative;}
.margin {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0;}
.marginTop {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0 0 0;}

@keyframes fadeIn {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;}}

@media only screen and (min-width: 768px) {
.margin {padding:50px 0;}
.marginTop {padding:50px 0 0 0;}
}

@media only screen and (min-width: 1024px) {
.margin {padding:75px 0;}
.marginTop {padding:75px 0 0 0;}
}

.grey {background-color:#eee;}
.lightGreen {background-color:#ecf6f3;}
.greyTop:before {display:block; content:''; position:absolute; width:100%; height:300px; background-color:#eee; top:0px;}
.orange {background:linear-gradient(45deg,  #d2232e 0%,#de931f 100%);}
.yellow {background:linear-gradient(45deg,  #DD851B 0%,#E3BA12 100%);}
.green {background:linear-gradient(45deg,  #82b040 0%,#ccb724 100%);}
.blue {background:linear-gradient(45deg,  #068cbf 0%,#6d5474 100%);}
.darkGreen {background:linear-gradient(45deg,  #008dc1 0%,#63a761 100%);}

.copy {margin-bottom:30px;}
.copy p {margin-bottom:30px;}
.copy p strong {font-weight:700;}
.copy p a {color:#3a9c87;}
.copy p a:hover {text-decoration:underline;}
.copy ul {list-style-type:disc; margin-bottom:15px; margin-left:20px;}
.copy ul li {margin-bottom:5px;}
.copy.white p, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff; }
.copy.white a {color:#fff;}
.copy.white li {color:#fff;}
.copy.first p:first-of-type {font-size:22px;}
.copy h1 {color:#3a9c87; font-size:30px; font-weight:300;}
.copy h2 {color:#3a9c87; font-size:30px; font-weight:300; margin-bottom:30px;}
.copy h3 {color:#3a9c87; font-size:25px; font-weight:700; margin-bottom:30px;}
.copy h4 {color:#666666; font-size:20px; font-weight:400; margin-bottom:30px;}
.copy:last-child, .copy p:last-child, .copy h2:last-child, .copy h3:last-child  {margin-bottom:0px;}

.copy.left {float:left; width:100%;}
.copy.right {float:right; width:100%;}
.copy.quarter {float:left; width:100%;}
.copy.threeQuarter {float:left; width:100%;}
.quarters {display:flex; flex-wrap:wrap;}

@media only screen and (min-width: 768px) {
.copy.left {width:47.5%;}
.copy.right {width:47.5%;}
.copy h1 {font-size:30px;}
.copy h2 {font-size:30px;}
.copy h3 {font-size:30px;}
.copy h4 {font-size:22px;}
.copy.quarter {width:47.5%; margin-left:5%; margin-bottom:5%;}
.copy.quarter:nth-child(2n+1) {clear:left; margin-left:0;}
.copy.quarter:last-child, .copy.quarter:nth-last-child(2) {margin-bottom:0px;}
.copy.threeQuarter {width:47.5%; margin-left:5%;}
}
	
@media only screen and (min-width: 1024px) {
.copy h1 {font-size:40px;}
.copy h2 {font-size:40px;}
.copy h3 {font-size:35px;}
.copy h4 {font-size:25px;}
}
	
@media only screen and (min-width: 1280px) {
.copy.quarter {width:23%; margin-left:2.6666%; margin-bottom:0px;}
.copy.quarter:nth-child(2n+1) {clear:none; margin-left:2.6666%;}
.copy.quarter:nth-child(4n+1) {clear:left; margin-left:0;}
.copy.threeQuarter {width:74.3333%; margin-left:2.6666%;}
}
	
.copy a.button {color:#666; border:1px solid #666; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-grey-small.png"); background-position:right 20px top  13px;}
.copy a.button:hover {text-decoration:none; background-color:#3a9c87; color:#fff;  background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow.png"); background-position:right 15px top 10px ; transition:background-position 0.2s ease;}

.copy.white a.button {color:#fff; border:1px solid #FFF; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow.png"); background-position:right 20px top 13px; transition:background-position 0.2s ease;}
.copy.white a.button:hover {text-decoration:none; background-color:#3a9c87; background-position:right 15px top 10px ; transition:background-position 0.2s ease;}

a.buttonGreen {color:#fff; font-size:16px; font-weight:300; background-color:#3a9c87; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow.png"); background-position:right 20px center; transition:background-position 0.2s ease;}
a.buttonGreen:hover {text-decoration:none; background-color:#666; background-position:right 15px top 10px ; transition:background-position 0.2s ease;}

.copy a.buttonGreen {color:#fff; font-size:16px; font-weight:300; background-color:#3a9c87; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow.png"); background-position:right 20px center; transition:background-position 0.2s ease;}
.copy a.buttonGreen:hover {text-decoration:none; background-color:#666; background-position:right 15px top 10px ; transition:background-position 0.2s ease;}

/* ----- HEADER STYLES ----- */

header {position:absolute; height:105px; z-index:210;}
header a.logo {float:left; background-image:url("/wp-content/themes/gxenvironmental/assets/gx-logo.png"); display:block; width:171px; height:60px; background-size:contain; margin-top:24px; }



/* ----- FOOTER STYLES ----- */

.policies {background-color:#666666; padding:39px 0 30px 0; background-image:url("/wp-content/themes/gxenvironmental/assets/color-band.png"); background-repeat:no-repeat; background-size:100% 9px;}
.policies p {float:left; font-weight:bold; margin-bottom:0px; font-size:16px;}
.policies .copy ul {float:left; list-style-type:none; margin-bottom:0px; margin-left:0px;}
.policies .copy ul li {float:left; padding-right:30px;margin-bottom:0px; }
.policies .copy ul li a {font-size:16px;}

@media only screen and (min-width: 768px) {
.policies p {width:30%; margin-right:5%;}
.policies .copy ul {width:65%;}
header a.logo {width:170px; height:59px; margin-top:25px; }
}

@media only screen and (min-width: 1024px) {
.policies p {width:20%; margin-right:5%;}
.policies .copy ul {width:75%;}
}

@media only screen and (min-width: 1280px) {
.policies p {width:15%; margin-right:5%;}
.policies .copy ul {width:80%; margin-left:0px;}
}

footer {background-color:#e4e4e4;}
footer .footerButton {float:left; margin-bottom:30px; width:100%;}
footer .footerCopy {float:left; margin-bottom:50px; width:100%;}
footer .footerLogo {float:left; width:100%; margin-bottom:50px;}
footer .footerLogo a.logo {float:left; background-image:url("/wp-content/themes/gxenvironmental/assets/gx-logo.png"); display:block; width:171px; height:60px; background-size:contain; }
footer .footerButton {float:left; width:100%;}
footer .accreditations {float:left; width:100%;}
footer .accreditations ul {display:flex; flex-wrap: wrap; align-items: center;}
footer .accreditations li {float:left; margin-right:20px; margin-bottom:10px; }

@media only screen and (min-width: 768px) {
footer .footerButton {width:30%; margin-right:5%;}
footer .footerCopy {width:65%; margin-bottom:80px;}
}

@media only screen and (min-width: 1024px) {
footer .footerButton  {width:20%; margin-right:5%;}
footer .footerCopy  {width:75%;}
footer .footerCopy .left {float:left; width:47.5%;}
footer .footerCopy .right {float:right; width:47.5%;}
footer .footerLogo {width:20%; margin-right:5%;}
footer .accreditations {width:75%;}
}

@media only screen and (min-width: 1280px) {
footer .footerButton  {width:15%; margin-right:5%;}
footer .footerCopy  {width:80%;}
footer .footerLogo {width:15%; margin-right:5%;}
footer .accreditations {width:80%;}
}


/* ----- BANNER STYLES ----- */

#bannerShort {height:110px; background:linear-gradient(45deg,  #008dc1 0%,#63a761 100%);}
#bannerShortBlank {height:110px; z-index:3;}

#banner {height:500px; background-size:cover; background-position:center center;}
#banner .content {height:500px; display: flex; align-items: center;}
#banner .content .message h1 {color:#fff; font-size:30px; font-weight:300; margin-bottom:30px;}
#banner .content .message h2 {color:#fff; font-size:22px; font-weight:700; margin-bottom:0px;}
#banner .content img.icon {margin-bottom:50px;}
	
@media only screen and (min-width: 768px) {
#banner .content .message {width:75%;}
#banner .content .message h1 {font-size:45px; }
#banner .content .message h2 {font-size:35px; }
#banner {height:600px;}
#banner .content {height:600px;}
}
	
@media only screen and (min-width: 1280px) {
#banner {height:800px;}
#banner .content {height:800px;}
#banner .content .message {width:60%;}
#banner .content .message h1 {font-size:55px;}
}
	
#banner.videoBanner .banner {width:100%; background-size:cover; background-position:center center;}
#banner.videoBanner .message {z-index:10; margin-top:50px;}
#banner.videoBanner .message img {float:left; margin-right:30px;}
#banner.videoBanner .message p {color:#fff; font-size:24px; margin-top:20px;}
#banner.videoBanner .message h2 {color:#fff; font-size:30px; font-weight:300; clear:left;}
#banner.videoBanner .message.first h2 { color:#fff; font-size:24px; margin-top:20px;}
#banner.videoBanner .message.first p {color:#fff; font-size:30px; font-weight:300; clear:left;}
#banner.videoBanner .message a {margin-top:30px; width:39px; height:39px; background-image:url("/wp-content/themes/gxenvironmental/assets/arrow-large.png"); display:block;}


@media only screen and (min-width: 768px) {
#banner.videoBanner .message {margin-top:100px;}
#banner.videoBanner .message h2 {font-size:45px; margin-bottom:0px;}
#banner.videoBanner .message.first h2 {font-size:24px; margin-top:20px;}
#banner.videoBanner .message.first p {font-size:45px;}
#banner.videoBanner .message a {margin-top:40px; }
}
	
@media only screen and (min-width: 1280px) {
#banner.videoBanner .message {margin-top:100px;}
#banner.videoBanner .message h2 {font-size:55px;}
#banner.videoBanner .message a {margin-top:50px;} 
}


#banner.videoBanner {height:600px;}
#banner.videoBanner .content {height:600px;}
	
@media only screen and (min-width: 768px) {
#banner.videoBanner {height:700px;}
#banner.videoBanner .content {height:700px;}
}
	
@media only screen and (min-width: 1280px) {
#banner.videoBanner {height:800px;}
#banner.videoBanner .content {height:800px;}
}


/* ----- HOMEPAGE STYLES ----- */



.service {padding:30px 25px;}




/* ----- TESTIMONIAL STYLES ----- */

.testimonialSlider .cycle-slideshow {float:left; width:100%; margin-bottom:40px;}
.testimonial {}
.testimonial p {font-size:22px; font-weight:300;}
.testimonial h5 {color:#3a9c87; font-size:24px; font-weight:500;}
.testimonial .image {float:left; width:100%;}
.testimonial .image img {width:100%;}
	
@media only screen and (min-width: 768px) {
.testimonial p {font-size:30px;}
.testimonial {}
.testimonial .copy {width:55%; float:left;}
.testimonial .image {width:40%; float:right;}
}

@media only screen and (min-width: 1024px) {
.testimonials {width:75%; float:left; margin-left:25%;}
.testimonial .image {width:25%; float:left;}
.testimonial .copy {width:75%; float:right;}
.testimonial p {font-size:32px;}
.testimonial .image img {max-height:100%;}
.testimonial {}
}

@media only screen and (min-width: 1280px) {
.testimonial p {font-size:40px;}
}


/* ----- PRODUCT PAGE STYLES ----- */

.productStages {float:left; width:100%:}
ul.stageList {display:none; list-style-type:none; border-top:1px solid #666; float:left; width:90%; margin-left:0px;}
ul.stageList li {width:100%; float:left; display:block; border-bottom:1px solid #666;}
ul.stageList a img {margin-right:20px;}
ul.stageList a {padding:15px 0; display:flex; float:left; width:100%; align-items: center; font-size:22px; cursor:pointer; font-weight:500; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-grey.png"); background-position:right center; padding-right:30px;}
ul.stageList a:hover {background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-green.png");}
ul.stageList a:hover {color:#3a9c87;}
ul.stageList li.active a {font-weight:700; color:#3a9c87; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-green.png")}


@media only screen and (max-width: 767px) {
.stagesContent div {padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #666;}
.stagesContent div:last-child {margin-bottom:0px; border-bottom:0px;}
}


@media only screen and (min-width: 768px) {
ul.stageList {display:block;}
.stagesContent div {display:none;}
.stagesContent div.active {display:block;}
}

@media only screen and (min-width: 1024px) {
	ul.stageList {width:70%;}
}

/* ----- CUSTOMISATION STYLES ----- */

.stage {float:left; border-top:1px solid #666; padding-top:15px; position:relative;}
.stage span {display:inline-block; color:#000; font-size:28px; margin-bottom:20px;}
.stages {width:100%; float:left;}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1280px) {
.stages {display:flex; border-right:1px solid #666;}
.stage {width:14%; border-top:0px; border-left:1px solid #666; padding:0 2% 0 3%; cursor:pointer; transition: width 1s; height:700px;}
.stage span {margin-bottom:100px;}
.stage.active {width:30%; transition: width 1s;}
.stage.active p {animation-name: fadeIn; animation-duration: 2s;  }
.stage.active h3  {animation-name: fadeIn; animation-duration: 2s;  }
.stage.inactive p {display:none; }
.stage.inactive h3 {color:#000; transform:rotate(180deg); position:absolute; bottom:0px; writing-mode: vertical-rl;  }
.stage.inactive:hover h3 {color:#666;}
.stage.inactive span {color:#000; }
.stage.inactive:after {display:block; content:''; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-black.png"); width:16px; height:16px; position:absolute; transition:0.3s;  bottom:30px; right:30px;}
.stage.inactive:hover:after {transition:0.3s; bottom:35px; right:25px;}
.stage.copy {margin-bottom:0px;}
}

@media only screen and (min-width: 1280px) {
}


/* ----- CHANGEMAKERS PANEL ----- */

.changemakers.copy p {color:#3a9c87; font-size:20px;}
.changemakers.copy p a {color:#3a9c87; font-size:20px;}
.changemakers.copy p a.buttonGreen {color:#fff; font-size:18px;}
.changemakers.copy img {margin:20px 0; }

@media only screen and (min-width: 768px) {
	.changemakers.copy img {position:absolute; margin-left:-100px; margin-top:38px;}
.changemakers.copy p {font-size:22px;}
.changemakers.copy p a {font-size:22px;}
}

@media only screen and (min-width: 1024px) {
.changemakers.copy p {font-size:25px;}
.changemakers.copy p a {font-size:25px;}
}

/* CONTACT */

#gMap {float: left; width: 100%; height: 400px;}

@media only screen and (min-width: 768px) {
#gMap {float: left; width: 100%; height: 600px;}
}

@media only screen and (min-width: 1024px) {
#gMap {float: left; width: 100%; height: 600px;}
}



/* ----- ENQUIRY PANEL ----- */

#container div.wpforms-container .wpforms-form input[type=text] {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;}
#container div.wpforms-container .wpforms-form input[type=email] {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;}
#container div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666; resize:none; height:116px;}
#container div.wpforms-container-full .wpforms-form button[type=submit] {text-transform:lowercase; border:1px solid #666; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow-grey.png"); transition:0.3s; background-position:right 20px top 14px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666; background-repeat:no-repeat; background-color:#ecf6f3;}
#container div.wpforms-container-full .wpforms-form button[type=submit]:hover {transition:0.3s; background-position:right 15px top 11px ; background-color:#3a9c87; background-image:url("/wp-content/themes/gxenvironmental/assets/button-arrow.png");color:#fff;}
#container .wpforms-field-row p {margin-bottom:0px;}
#container div.wpforms-container-full .wpforms-field.wpforms-field-checkbox label {color:#666;}
#container div.wpforms-container-full legend {font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;}
#container div.wpforms-container-full label {font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;}
.enquiry .content {background-image:url("/wp-content/themes/gxenvironmental/assets/icon-enquiry.png"); background-position:top left; padding-top:140px;}

@media only screen and (min-width: 768px) {
#container  .wpforms-layout-column-50 {width:47.5%; float:left;}
#container  .wpforms-layout-column-50:last-child { float:right;}
.enquiry .content {background-position:top right; padding-top:70px;}
}



/* ----- ABOUT PAGE ----- */

.teamSection {float:left; width:100%; margin-top:50px;}
.teamSection .team {float:left; width:100%;}
.staffPreview {float:left; width:100%; margin-bottom:30px;}
.staffPreview img {width:100%; margin-bottom:20px;}
.staffPreview .copy {width:100%;}
.staffPreview .copy p {margin-bottom:20px;}

@media only screen and (min-width: 640px) {
.staffPreview {width:47.5%; margin-left:5%;}
.staffPreview:nth-child(2n+1) {clear:left; margin-left:0%;}
}

@media only screen and (min-width: 1024px) {
.staffPreview {width:30%; margin-left:5%;}
.staffPreview:nth-child(2n+1) {clear:none; margin-left:5%;}
.staffPreview:nth-child(3n+1) {clear:left; margin-left:0%;}

}

@media only screen and (min-width: 1280px) {
.staffPreview {width:22%; margin-left:4%;}
.staffPreview:nth-child(2n+1) {clear:none; margin-left:4%;}
.staffPreview:nth-child(3n+1) {clear:none; margin-left:4%;}
.staffPreview:nth-child(4n+1) {clear:left; margin-left:0%;}

}


/* STAFF PROFILE */

.profile img {width:100%; margin-bottom:0px;}
.profile.copy h1 {margin-bottom:0px;}
.profile span.title {display:inline-block; margin-bottom:20px; font-size:25px;}
.interests {float:left; width:100%;}

@media only screen and (min-width: 768px) {
.profile img {margin-bottom:50px;}
.interests {float:left; width:40%; clear:left;}
.profile span.title {margin-bottom:50px;}
}

@media only screen and (min-width: 1024px) {  
.interests {float:left; width:30%; clear:left;}
}


.usps {float:left; width:100%;}
.usp {float:left; width:100%; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #666;}
.usp .image {float:left; width:100%;}
.usp .image img {max-width:100%;}
.usp .copy {float:left; width:100%;}
.usp:last-child {margin-bottom:0px; border-bottom:0px;}

@media only screen and (min-width: 768px) {
.usp {display:flex; flex-wrap:wrap;}
.usp:nth-child(odd) {flex-direction: row-reverse;}
.usp .image {width:47.5%; margin-right:5%;}
.usp:nth-child(odd) .image {margin-right:0;}
.usp:nth-child(odd) .copy {margin-right:5%;}
.usp .copy {width:47.5%; align-content: center; align-items: center;}
	
}