/*
Document   : default
Created on : 04-Aug-2014, 14:05:38
Author     : Adam Maltpress <adam@maltpress.co.uk>
Description:
Main stylesheet for Ecotile
*/

/* CSS3 @font-face ---- */

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
li {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset styles */

/* useful styles */

    /* Max Font Size */
    body {
  font-family: Inter,sans-serif;
  letter-spacing: -0.011em;
  cursor: default;
  font-size: 1em;
  font-weight: 400;
  line-height: var(--wholestep);
}
                @media screen and (min-width: 1728px) {
                    body {
                        font-size: 17.28px;
                    }
                }

                /* Min Font Size */
                @media screen and (max-width: 1280px) {
                    body {
                        font-size: 15px;
                    }
                }
h1, h2, h3, h4 {font-family: "Inter", sans-serif; font-weight: normal; line-height:1.2em;}
small {font-size:80%;}

.inner {width: 1170px; margin: 0 auto; position: relative;}
a img {transition: all, 200ms;}
.clear {clear: both;}
input { outline: none;}
.left, .alignleft {float: left;}
.alignleft {margin:0 20px 20px 0;}
.right, .alignright {float: right; text-align: right;}
.alignright {margin:0 0 20px 20px;}
.center, .aligncenter {text-align:center;}
.green {color:#367c2b;}
.blacktext {color: #000 !important;}
.texture {background: #fff;}
.grey, .lightgrey {background-color: #e9e8e8;}
.lightgreen {background:#6a9c62; color:#fff;}
.darkgreen {background: #367c2b; color: #fff;}
.darkgrey {background:#333c44; color:#fff;}
.white {background: #fff;}
.darkestgreen {background: #002417; color: #acacac;}
.black {background: #111111; color: #acacac;}
a.phone {cursor: default;}
.center {text-align: center; margin: 0 auto;}

.greymod, .greycard {background:#e9e8e8; border-radius:3px; -moz-border-radius:3px; box-sizing:border-box; margin-bottom:15px;}
.greymod { padding:20px;}
.card-image {width:100%; border-radius:3px 3px 0px 0px; -moz-border-radius:3px 3px 0px 0px; padding:0px;}
.card-image img {width:100% !important; height:auto; margin:0px !important; border-radius:3px 3px 0px 0px; -moz-border-radius:3px 3px 0px 0px;}
.card-inner {box-sizing: border-box; padding:20px;}

.one-half {width: 48.5%; margin: 1% 0 1% 3%; float: left; display: block;}
.one-half:first-child {margin-left: 0;}
.one-half:nth-child(2n+1) {clear: both; margin-left: 0;}

.one-third {width: 30.9%; margin: 1% 0 1% 2.4%; float: left; display: block;}
.one-third:first-child, .one-third:first-of-type {margin-left:0px;}
.one-third:nth-child(3n+1) {clear: both; margin-left: 0px;}

.two-third {width: 66.1%; float: left; margin: 1% 0 1% 1.6%; padding-top: 30px}
.two-third:first-child {margin-left: 0px;}

.one-fifth {width: 19.4%; margin: 1% 0 1% 1.6%; float: left; display: block;}
.one-fifth:first-child {margin-left: 0;}
.one-fifth:nth-child(4n+1) {clear: both; margin-left: 0;}

.row::after, .last::after {content: ''; display: block; clear: both;}

.masonrygrid {padding: 20px 0 0 0; width:100%; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em;column-gap: 1.5em;}
.more-case-study-grid {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
.masonrygrid-item {display: inline-block; width:100%;}

/* main typography */

aside h2 {
    margin: 0 0 10px;
}
.greymod h2, .greymod h3, .product-intro h1:first-of-type, .product-intro h2:first-of-type, .product-intro h3:first-of-type {margin-top:0px;}
h3 {
    font-size: 21px; line-height: 1.3em;
    margin: 15px 0; color: #367c2b;
}

h5 {
    font-size: 18px; line-height: 1.3em;
    margin: 15px 0; color: #e03e25;
}
.darkgreen h1, .darkgreen h2, .darkgreen h3, .darkgreen h4, .darkgrey h1, .darkgrey h2, .darkgrey h3, .darkgrey h4, .darkestgreen h1, .darkestgreen h2, .darkestgreen h3, .darkestgreen h4, .black h1, .black h2, .black h3, .black h4 {color:#FFFFFF !important;}
main ul {margin-bottom:10px;}

main ul li > ul, main ul > ul > ul,  main ol li > ol, main ol > ol > ol,
main ul li > ul, main ul > ul > ul,  maint ol li > ol, main ol > ol > ol
{
    margin-bottom: 0;
}


main ol {list-style: decimal outside; margin-left: 25px;}

/* header */
#topbar {width:100%; background:#fceaad; height:80px;}

header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 225px;
	background: #fff;
	z-index: 2;

}
/* adjust header */
main {
	display: block;
	margin-top: 225px;
}
header .inner {height:100%;}

header div#social-languages {
	position: relative; float: right;
	padding-top: 10px;
	box-sizing: border-box;
	height:100%;
}

    
/* Main bar area */
header, #mainbar {width:100%;}
header #mainbar .inner {padding-top:30px;}
#logo {float: left; width: 257px; height:75px; background:none;}
#logo img {width:100%; height:auto;}
#logo a {}

a i {transition: color, 200ms;}
a i.fa-google:hover {color:#dd4b39; }
a i.fa-youtube:hover {color: #cd201f;}
a i.fa-facebook:hover {color:#3b5998}
a i.fa-twitter:hover {color:#55acee}
a i.fa-instagram:hover{color:#517fa4}

div.megamenu {
	display: none;
	position: absolute;
	background: #fff;
	width:100%; left: 0;
	background: #002417;
	top: 65px;
	padding: 20px 0px;
	transition: all 100ms ease-in-out;
	opacity: 0;
	z-index: 99999;
}


nav#main-nav ul li:hover div.megamenu {display: block; opacity: 1;	z-index: 99999;}
nav#main-nav ul li:hover div.megamenu ul {width: 100%; float: left;}
/*nav#main-nav ul li.has-sub > a i:after {content: '\f0d7'; font-family: 'fontawesome';}*/

div.megamenu div.single-menu {width: 21.8%;display: block;
	float: left;
	margin: 10px 0 1% 4.2%;}

	div.megamenu div.single-menu:first-child {
		margin-left: 0;
	}

	/* sections */
	/* 3x3 Applications Grid */
	div.single-application img {width: 100%; height: auto; margin:0px;}


/* HOME --- Dynamic Modules */
section.dynamic-home-module img {max-width:100%; height:auto;}


/* Client & Credential Logos on Home Page */
.wide-logo {max-height:50px; width:auto;}
.tall-logo {max-height:150px; width:auto; max-width:170px;}


	/* sidebar widgets */
	div#accreditations {
		border: 1px solid #3b8a32;
		margin-top: 20px;
		box-sizing: border-box;
		-box-sizing: border-box;
		padding: 0px 10px 20px;
		position: relative;
	}

	div#accreditations h1 {font-size: 24px; margin-bottom: 20px;}
	div#accreditations img {float: left; margin: 0 20px 10px 0;}
	div#accreditations div.imagewrap {padding-left: 10%;}

	section#more-from .wrap {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		align-items: stretch;
		-webkit-align-items:stretch;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	section#more-from article {position: relative;}
	section#more-from article img {width: 100%; margin-bottom: 15px; height: auto;}

	footer div#footer-top {
		padding: 50px 0 20px 0;

	}

	footer div#footer-top .inner {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		align-items: stretch;
		-webkit-align-items:stretch;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

footer div#footer-top div.footermenu {font-size:14px; line-height: 1.4em; position: relative; padding-bottom: 40px;}
footer div#footer-top h2 {display: block; font-size:20px; padding-bottom: 10px; margin:0 0 10px 0; color: #fff; text-transform:uppercase;}

	footer div#footer-top ul {width: 80%; clear: both; list-style: none; padding-right: 20%;}

	footer div#footer-top ul li a {color: #acacac;}
	footer div#footer-top ul li a:hover {text-decoration: none; color: #47aa42; font-weight: normal;}

	footer div#footer-top div.footermenu a.button {position: absolute; bottom: 0px; display: block; text-align: center; width: 80%; color: #fff; border-radius: 8px; border: 2px solid #47aa42; padding: 0px 0 8px; font-size: 18px;}
	footer div#footer-top div.footermenu a.button:hover, footer div#footer-top div.footermenu a.inversebutton {font-weight: normal; background-color: #47aa42; text-decoration: none;}
	footer div#footer-top div.footermenu a.button span {font-size: 25px; font-family: 'Open Sans'; margin: 0px 10px 0px; position: relative; top: 1px;}
	footer div#footer-top div.footermenu a.inversebutton:hover {position: absolute; bottom: 0px; display: block; text-align: center;color: #fff; border-radius: 8px; border: 2px solid #47aa42; padding: 0px 0 8px; font-size: 18px; background-color: transparent;}

	div.address-item {margin-bottom:10px;}
	div.footer-tel, div.postal, div.email {width: 80%; padding-left: 50px; box-sizing: border-box; -moz-box-sizing: border-box;}
	div.email, footer div#footer-top a {color:#acacac; }
	div.email a:hover, footer div#footer-top a:hover {text-decoration: none; color: #47aa42; font-weight: normal;}

	footer div#footer-bottom {padding: 25px 0px; font-size: 14px;}
	footer div#footer-bottom a {color: #ffffff;}
	footer div#footer-bottom a:hover {color: #47aa42; text-decoration: none; font-weight: normal;}
	div#left-footer {padding-top:5px;}
	div#right-footer a {display: inline-block; float: left; width: 32px; font-size: 24px; margin-right: -1px; margin-left:5px; text-align: center;}
	div#right-footer a:hover {color: #367c2b;}

	html.ie8 .one {margin-left: 0;}
	html.ie8 div#home-advert {background-repeat: no-repeat; background-color: #367c2b; background-position: right 120px;}
	html.ie8 section#more-from h4 span {padding-bottom: 14px;}
	html.ie8 footer div#footer-top h1 span {padding-bottom: 8px;}

	html.ie9 footer div#footer-top div.footermenu {min-height: 260px;}
	html.ie8 footer div#footer-top div.footermenu {height: 260px;}


	#testimonial {margin: 0 0 20px; padding: 15px 20px; box-sizing:border-box; -moz-box-sizing: border-box;}
	#testimonial div.cycle-slide {padding: 15px 20px 0 20px;}
	#testimonial {padding-bottom: 5px}
	#testimonial a {color: #fff;}

	/* the overlayed element */
	.simple_overlay {

		/* must be initially hidden */
		display:none;

		/* place overlay on top of other elements */
		z-index:10000;

		/* styling */
		background-color:#333;
		min-height:200px;
		border:1px solid #666;

		/* CSS3 styling for latest browsers */
		-moz-box-shadow:0 0 90px 5px #000;
		-webkit-box-shadow: 0 0 90px #000;
		width: 480px;
		left: 50%;
		margin-left: -240px;
	}

	/* close button positioned on upper right corner */
	.simple_overlay .close {
		background-image:url(../images/close.png);
		position:absolute;
		right:-35px;
		top:-15px;
		cursor:pointer;
		height:35px;
		width:35px;
	}
	
	/* SEARCH RESULTS ------ */
	.search-result-title {margin-top:0px; color:#000000;}
	.search-result-item {padding-bottom:15px; margin-bottom:25px; border-bottom:1px solid #cccccc;}



	/* add video widget to home page */
		.iosFixedFix{
			position: absolute;
			width: 100%;
			height: 10000px; /* This value must always be higher than the body height. */
			top: 0px;
			left: 0px;
		}

.page-id-2309 .articlescroll, .page-id-3531 .articlescroll {
	display: none
}
.iframe-wrapper {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.iframe-wrapper iframe,
.iframe-wrapper img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* BUTTONS */
a.button, a.button2, button, input[type=submit] {position:relative; text-decoration:none; font-weight:normal; width:auto; padding:10px 20px 10px 10px; font-size: 15px; border: 1px solid #367c2b; cursor: pointer;  transition: all, 200ms; -webkit-appearance: none; -webkit-border-radius:4px; border-radius:4px; }
a.button, button, input[type=submit] {background-color:#367c2b; color: #fff;}
a.button2 {color: #367c2b; display:inline-block;}
a.button2:hover {color: #fff;}

.darkgreen a.button, .darkgrey a.button, .darkestgreen a.button, .darkgreen button, .darkgrey button, .darkestgreen button, .darkgreen input[type=submit], .darkgrey input[type=submit], .darkestgreen input[type=submit] {border: 1px solid #ffffff;center;}
.darkgreen a.button:hover, .darkgrey a.button:hover, .darkestgreen a.button:hover, .darkgreen button:hover, .darkgrey button:hover, .darkestgreen button:hover, .darkgreen input[type=submit]:hover, .darkgrey input[type=submit]:hover, .darkestgreen input[type=submit]:hover {border: 1px solid #ffffff;}

.darkestgreen {background: #002417; color: #acacac;}
.black {background: #111111; color: #acacac;}

.single-post blockquote {
	font-family: inherit !important;
}

.btn {
    margin: 3px 3px 3px 3px !important;
}

.landingpageform {
    border-radius: 4px;
    padding: 20px;   
}

.landingpageforms {
    font-size:15px;
   background: #e9e8e8;
    border-radius: 4px;
    padding: 20px;   
}

/* keep it mobile friendly by only applying these styles for larger viewports */

    


.stdcolourcontainer {
  display: flex;
  align-items: center;
}

.stdcolourimage {
  flex-basis: 40%;
  width:12px;
}

.colourswatch {
    width:50px;
    margin: 0px;
    padding-left: 7px;
}

.wp-block-separator {
    color:#bbbbbb;
}

/* Suggested Applications & Products */
ul.all-industries {max-width:1170px;--columns:3;--gap:15px;--gap-count:calc( var(--columns) - 1 );margin:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);padding-bottom:30px;}
ul.all-industries li.industry-item {flex-basis: calc( calc( 100% / var(--columns) ) - calc( var(--gap) / var(--columns) * var(--gap-count) ) );display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.industry-item-title {width:100%; text-align:center;}
.industry-item-title h3 {margin:0px; font-size:18px;}

/* Hero Images - 2025 */
.hero-wrapper {
    width: 100%;
    height: 540px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    line-height:0;
}

.hero-content {
    z-index: 2;
}

/* Key Metrics - 2025 */
.singlemetric {
    border-left: 1px solid;
    border-color: var(--light__onprimary_lkv);
}

.metric-title {
    
}
@media (max-width: 1240px) {
    .singlemetric {
        border-left: 0;
    }
    .metric-title {
    text-align: center;
}
}

@media (max-width: 768px) {
    .singlemetric {      
         border-left: 0;
    }
    .metric-title {
    padding-top: var(--lg);
    text-align: center;
}
}