@charset "utf-8";
/* CSS Document */

/* Color variables - apply the color by using the variable css tag = var(--col_ref);*/
:root {
--BRAND_primary: #416731;
--BRAND_secondary: #BBDC93;
--BRAND_tertiary: #2F4229;
--BRAND_primary-active: #4F813B;
--BRAND_primary-med: #B2CFA4;
--BRAND_primary-lig: #E4F0DA;
--BRAND_primary-bri: #ACE594;
}


/* General */
* {
    box-sizing: border-box;
    padding: 0;
	margin: 0;
}

body {
    background-color: #E4F0DA;
	background: linear-gradient(0deg,rgba(228, 240, 218, 1) 15%, rgba(228, 240, 218, 1) 50%, rgba(255, 255, 255, 1) 100%);
    font-family: 'Poppins', sans-serif;
}


/* Links */
a img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
    color: #628256;
    text-decoration: none;
    cursor: pointer;
	font-weight: 400;
    padding-bottom: 4px;
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

nav_inverse a {
	color: #4F813B;
}

nav_inverse a:hover {
	color: #263621;
}

a.button {
	background-color: #FFFFFF;
    border: solid 2px #B2CFA4;
    border-radius: 32px;
	color: #4F813B;
    font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02rem;
	margin: 32px 0;
    padding: 14px 26px;
    text-decoration: none;
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

a.button:hover {
    background-color: #4F813B;
    border: 2px solid #4F813B;
    border-radius: 0px;
    color: #FFF;
	/* box-shadow: none; */
	text-decoration: none;
}

a.buttonsecondary {
    background-color: #4F813B;
    border-radius: 56px;

	background: linear-gradient(#4F813B, #4F813B) padding-box,
			  linear-gradient(to bottom, #4F813B, #416731) border-box;
	border: 1px solid transparent;
	
    color: #FFFFFF;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
	letter-spacing: 0.02rem;
    line-height: 20px;
    margin-top: 0px;
    padding: 16px 32px;
    text-decoration: none;
	
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

a.buttonsecondary:hover {
    background-color: var(--BRAND_primary);
	background: linear-gradient(#416731, #416731) padding-box;
    border: 1px solid #4F813B;
    border-radius: 4px;
    box-shadow: none;
    color: #FFF;
    text-decoration: none;
	
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


a.notactive {
    background-color: #CCCCCC;
    border-radius: 30px;
    color: #666666;
	cursor: context-menu;
    display: inline-block;
    font-size: 18px;
    line-height: 20px;
    margin-top: 0px;
    padding: 16px 26px;
    text-decoration: none;
}


/* Headings */
h1 {
	color: #416731;
    font-size: 56px;
	font-weight: 600;
}

.BRAND_primary-bri {
	color: #ACE594;
}

h2 {
    font-size: 48px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    clear: both;
    color: #000;
    margin: 0 auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    line-height: 135%;
}
	@media screen and (max-width: 812px) {
		.hero_split h2 {
			font-weight: 600;
			font-size: 40px;
			margin: 0 auto 40px auto;
			width: 100%;
		}
	}

	@media screen and (max-width: 812px) {
		h2 {
			font-size: 36px;
			margin: 0 auto;
		}
	}

h3 {
    clear: both;
    color: #000000;
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin-left: 0px;
    padding-left: 0px;
    text-decoration: none;
    width: 100%;
}

h4 {
    color: #000000;
    display: block;
    float: left;
    font-weight: 400;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 4px;
    line-height: 130%;
    text-align: center;

    width: 100%;
}

h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    clear: both;
    color: #000000;
    letter-spacing: 0,08rem;
    line-height: 150%;
    margin: 0 auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    text-align: center;
    text-wrap: balance;
    width: 90%;
}

h6 {
    font-weight: 600;
    line-height: 150%;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    color: #000;
    margin: 0 auto;
    padding-right: 0px;
    padding-bottom: 6px;
    padding-left: 0px;
    width: 86%;
}
	@media screen and (max-width: 1920px) {
		h6 {
		   font-size: 24px;
	  }
	}


/* Header */
#header {
    background-color: none;
    border: none;
    /* border-bottom: solid 1px #517244; */
    float: left;
    height: 64px;
	max-height: 64px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}


/*Fade container*/
.container_fade {
	margin-top: 60px;
	height: auto;
    width: 100%;
    opacity: 0;
    animation-name: container_fade;
    animation-duration: 2s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}
	@keyframes container_fade {
		20% {opacity: 0}
		100% {opacity: 1}
	}


/* Shell's */
.shell {
    width: 80%;
    margin: 0 auto;
}
	@media screen and (max-width: 812px) {
		.shell {
    		width: 90%;
		}
	}


/* Here identifyer */
.here {
    color: #ACE594;
    cursor: context-menu;
    padding-bottom: 20px;
    padding-left: 4px;
    padding-right: 4px;
    text-shadow: none;
}
	@media screen and (max-width: 812px) {
		.here {
			font-size: 22px;
		}
	}

.here_inverse {
    color: #A2C592;
    cursor: context-menu;
    padding-bottom: 20px;
    padding-left: 4px;
    padding-right: 4px;
    text-shadow: none;
}
	@media screen and (max-width: 768px) {
		.here_inverse {
			font-size: 22px;
		}
	}


/* NEW HERO */
.hero_split {
	display: flex;
	flex-direction: row;
	background-color: #FFF;
	float: left;
	padding-top: 60px;
	width: 100%;
}
	@media screen and (max-width: 800px) {
		.hero_split {
			flex-direction: column;
			width: 100%;
		}
	}

.hero_split div {
	vertical-align: middle;
	width: 50%;
}
	@media screen and (max-width: 800px) {
		.hero_split div {
			width: 100%;
		}
	}

.hero_split div .content {
    margin: 100px auto 0 auto;
    width: 66%;
}
	@media screen and (min-width: 2040px) {
		.hero_split div .content {
			margin-top: 240px;
			width: 50%;
		}
	}
	@media screen and (min-width: 1920px) and (max-width: 2040px) {
		.hero_split div .content {
			margin-top: 140px;
			width: 50%;
		}
	}
	@media screen and (max-width: 960px) {
		.hero_split div .content {
			margin: 0px auto 0 10%;
			width: 90%;
		}
	}


.hero_split div .content h1 {
    color: #416731;
    display: block;
    font-size: 64PX;
    font-weight: 700;
    line-height: 120%;
    padding-bottom: 8px;
    width: 100%;
}
	@media screen and (max-width: 1680px) {
		.hero_split div .content h1 {
			font-size: 54px;
		}
	}
	@media screen and (max-width: 812px) {
		.hero_split div .content h1 {
			font-size: 64px;
			font-weight: 700;
		}
		
	}

.hero_split div .content h2 {
	color: #ACE594;
	font-size: 28px;
	float: left;
	line-height: 160%;
	width: 80%;
}
	@media screen and (max-width: 812px) {
		.hero_split div .content h2 {
			font-size: 24px;
			width: 74%;
		}
		
	}

.hero_split div .content p {
	
}

.hero_split div img {
    display: block;
    height: auto;
    width: 100%;
}

/*Breadcrumbs Stuff*/
#breadcrumb {
    background-color: #FFF;
    float: left;
    font-size: 12px;
    padding: 6px 0px;
    margin: 0 auto;
    width: 100%;
}

.shellbreadcrumb {
    width: 70%;
    margin: 0 auto;	
}

ul.breadcrumb {
	display: block;
	margin: 8px auto 2px auto;
    list-style: none;
	padding-left: 0;
	text-align: center;
}

ul.breadcrumb li {
    color: #000000;
	cursor: context-menu;
    display: inline;
    font-size: 12px;
	font-weight: 400;
}
	@media screen and (max-width: 768px) {
	  ul.breadcrumb li {
		font-size: 10px;
	  }
	}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: #598F43;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: #B2CFA4;
	font-weight: 500;
    text-decoration: none;	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

ul.breadcrumb li a:hover {
    color: #182215;
    text-decoration: none;	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}


/* Fluid */
.fluid {
	display: block;
	width: 100%;
}


/* MainImage Homepage image*/
#mainHeroImage_wrapper {
	display: block;
    height: auto;
    width: 100%;
}

#mainHeroImage {
    background-color: #FFF;
    background-image: url(../images/mainImage_final4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
	margin-top: 2px;
    position: relative;
    width: 100%;
    height: 570px;
    float: left;
}
	@media screen and (min-width: 1824px) and (max-width: 4048px) {
		#mainHeroImage {
			background-image: url("../images/mainImage_final4.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 740px;
			width: 100%;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1100px) {
		#mainHeroImage {
			background-image: url("../images/mainImage_final4_1024.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 480px;
			width: 100%;
		}
	}
	@media screen and (max-width: 768px) {
		#mainHeroImage {
		background-image: url(../images/mainImage_final4mobile.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		max-height: 464px;
		width: 100%;
		}
	}

#mainHeroImage a {
	background-color: #253B1C;
    border: solid 1px #3E753B;
    border-radius: 40px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
	color: #ACE594;
    display: inline-block;
    font-size: 18px;
    line-height: 20px;
    margin-top: 0px;
    padding: 16px 36px;
    text-decoration: none;
    
    text-align: center;
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translate(-50%, -7%);
    cursor: pointer;
}
	@media screen and (max-width: 768px) {
		#mainHeroImage a {
			font-size: 18px;
			line-height: 20px;
			padding: 14px 20px;
			width: 56%;
		}
	}

#mainHeroImage a:hover {
    background-color: #416731;
    border-color: #416731;
    border-radius: 0px;
	/* box-shadow: none; */
    color: #FFF;
	text-decoration: none;
	
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

#mainHeroImage h6 {
    top: 2%;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    font-weight: 400;
    line-height: 135%;
    margin: 0 15%;
    position: absolute;
    width: 70%;
    text-align: center;
    text-shadow: 0px 4px 4px #000;
	/* #3A481F; */
}
	@media screen and (min-width: 1240px) {
		#mainHeroImage h6 {
			margin: 0 15%;
			position: absolute;
			top: 2%;
			width: 70%;
		}
	}
	@media screen and (max-width: 812px) {
		#mainHeroImage h6 {
			font-size: 28px;
			margin: 0 5%;
			width: 90%;
		}
	}

#mainHeroImage img {
    width: 100%;
	height: auto;
    max-height: 330px;
}


/* MainImage Voltz job*/
#mainHeroVoltzImage {
	width: 100%;
	height: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

	@media screen and (max-width: 768px) {
		#mainHeroVoltzImage {
			max-height: auto;
			width: 100%;
		}
	}

#mainHeroVoltzImage img {
	width: 100%;
	height: auto;
}


/* MainImage Barclays job*/
#mainHeroBarclaysImage {
	width: 100%;
	height: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
	@media screen and (max-width: 768px) {
		#mainHeroBarclaysImage {
			max-height: 244px;
			width: 100%;
		}
	}

#mainHeroBarclaysImage img {
	width: 100%;
	height: auto;
}


#mainImage img {
	display: block;
    width: 80%;
	margin: 0 auto;
    height: auto;
}
	@media screen and (max-width: 768px) {
		#mainImage img {
			width: 100%;
			height: auto;
			min-height: 100px;
		}
	}


/* Another row */
#another_row {
    height: auto;
    padding: 40px 0px;
    text-align: center;
}

#another_row .center {
	height: auto;
	width: 100%;
	max-width: 960px;
	min-width: 360px;
}

#another_rowP h1 {
    color: #FFFFFF;
    font-size: 88px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.06rem;
    line-height: 130%;
    margin: 0;
    padding-bottom: 32px;
    text-align: left;
    text-shadow: -2px -2px 0 #416731,
			2px -2px 0 #416731,
			-2px 2px 0 #416731,
			2px 2px 0 #416731,
			-2px 0px 0 #416731,
			2px 0px 0 #416731,
			0px -2px 0 #416731,
			0px 2px 0 #416731;
	width: 64%;
}
	@media screen and (min-width: 1840px) {
		#another_rowP h1 {	
			width: 56%;
		}
	}
	@media screen and (max-width: 812px) {
		#another_rowP h1 {
			font-size: 64px;
			line-height: 120%;
		    padding-bottom: 48px;
			width: 72%;
		}
	}

#another_row h2 {
    font-family: 'Poppins', sans-serif;
	font-size: 64px;
    font-weight: 700;
    color: var(--BRAND_primary);
	letter-spacing: -0.04em;
	line-height: 140%;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: auto;
}
	@media screen and (min-width: 2440px) {
		#another_row h2 {
			font-size: 72px;
		}
	}
	@media screen and (max-width: 812px) {
		#another_row h2 {
			font-size: 48px;
			text-align: left;
			width: 100%;
		}
	}

#another_row h2 .my_role {
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    letter-spacing: -0.14rem;
    line-height: 110%;
}

#another_row h2 .highlight {
	color: #263621;
}

#another_row h4 {
	color: var(--BRAND_primary);
}

#another_row .title {
	color: var(--BRAND_primary);
	font-family: "Momo Trust Display", sans-serif;
	font-size: 36px;
    font-style: normal;
	font-weight: 600;
	letter-spacing: -0.12rem;
	line-height: 120%;
}

 .highlight {
	color: #263621;
}

#another_rowP h3 {
    color: var(--BRAND_tertiary);
    display: block;
    font-size: 32px;
    font-weight: 600;
    line-height: 150%;
    margin-top: 0px;
    padding: 0px 0px 4px 0px;
    text-align: left;
    width: 100%;
}

#another_rowP h4 {
	font-size: 24px;
	font-weight: 600;
	text-align: left;
	padding-bottom: 4px;
}

.date {
    color: #929497;
    font-size: 18px;
	font-family: 'Poppins', sans-serif;
}

#another_rowP {
    clear: both;
    color: #000000;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    text-align: center;
	width: 80%;
}
	@media screen and (min-width: 1920px) {
		#another_rowP {
			width: 72%;
		}
	}
	@media screen and (min-width: 812px) and (max-width: 1024px) {
		#another_rowP {
			width: 90%;
		}
	}
	@media screen and (max-width: 812px) {
		#another_rowP {
			width: 98%;
		}
	}

#another_rowP p {
    color: black;
    float: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%;
    text-align: left;
    width: 100%;

}

#another_rowP a.button {
	background-color: #FFFFFF;
    border: solid 2px #B2CFA4;
    border-radius: 56px;
	color: #4F813B;
    font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02rem;
	margin: 32px 0;
    padding: 14px 26px;
    text-decoration: none;
}

#another_rowP a.button:hover {
    background-color: #4F813B;
    border: 2px solid #4F813B;
    border-radius: 12px;
    color: #FFF;
	corner-shape: squircle;
	/* box-shadow: none; */
	text-decoration: none;
	-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}

#another_rowP a.buttonsecondary {
    background-color: #182215;
    border: 1px solid #4F813B;
    border-radius: 56px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
	letter-spacing: 0.04rem;
    line-height: 20px;
    margin-top: 0px;
    padding: 16px 32px;
    text-decoration: none;
	
	-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}

#another_rowP a.buttonsecondary:hover {
    background-color: #4F813B;
    border: 1px solid #4F813B;
    border-radius: 4px !important;
    color: #FFF;
	text-decoration: none;
	
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

#another_rowP img {
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	width: 90%;
	min-width: 360px;
	max-width: 960px;
}

/* Specialities - list styles for Experience and Skills*/
#specialities {
	display: flex;
	flex-direction: row;
    height: auto;
    margin: 40px auto;
    padding-top: 4px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 30px;
	width: 80%;
}
	@media screen and (max-width: 812px) {
		#specialities {
			flex-direction: column;
			margin: 20px auto;
		}
	}
	@media screen and (min-width: 1824px) {
		#specialities {
			margin: 40px auto;
			width: 74%;
		}
	}

.specialities_list {
    background-color: #FFFFFF;
    border-radius: 0px;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
    float: left;
    overflow: hidden;
    width: 40%;
    margin: 24px auto 0px auto;
    padding: 0px 0px 24px 0px;
}
	@media screen and (min-width: 1824px) {
	  .specialities_list {
		margin: 24px 9% 0px 9%;
		width: 42%;
	  }
	}
	@media screen and (min-width: 1824px) {
	  .specialities_list:first-child {
		margin-right: 0;
	  }
	}
	@media screen and (min-width: 812px) and (max-width: 1200px) {
		.specialities_list {
			box-shadow:  0 6px 20px 0 rgba(0, 0, 0, 0.12);
			margin: 24px 2% 0px 2%;
			width: 46%;
		}
	}
	@media screen and (max-width: 812px) {
		.specialities_list {
			box-shadow:  0 6px 20px 0 rgba(0, 0, 0, 0.12);
			width: 96%;
			margin: 16px auto 48px auto;
		}
	}
	@media screen and (max-width: 812px) {
		.specialities_list:last-child {
			margin-bottom: 0;
		}
	}

.specialities_list h5 {
	background-color: #EEF8E7;
    border-bottom: solid 1px #C8DCBD;
    margin: 0px auto 30px auto;
    padding: 24px 0px 16px 0px;
    width: 100%;
}
	@media screen and (max-width: 812px) {
		.specialities_list h5 {
			margin: 0 0 30px 0;
			width: 100%;
		}
	}
.specialities_list ul {
	list-style: none;
}

.specialities_list li {
    color: #000;
    font-size: 18px;
    overflow: hidden;
    height: 30px;
    line-height: 24px;
    list-style: none;
    behavior: url(css/PIE.htc);
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
}
	@media screen and (min-width: 1824px) {
		.specialities_list li {
			font-size: 18px;
		}
	}


/*Recent work heading*/
.recent_work_title {
    background-color: #EFF6EA;
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 500;
    color: #416731;
    height: auto;
    margin: 0 auto;
    padding: 24px 0px 8px 0px;
    width: 100%;
}

.title {
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 500;
    color: #416731;
    height: auto;
    text-align: center;
    width: 100%;
    padding-bottom: 0px;
}
	/*  #Mobile (Portrait) */
	@media screen and (max-width: 768px) {
		.title { 
			font-size: 40px;
			margin: 0 auto;
			width: 90%;
		}
	}
.recent_work_title h3 {
    color: #E4F0DA;
    font-size: 72px;
    font-weight: 700;
	letter-spacing: 0.1rem;
    text-align: center;
    text-shadow: -1px -1px 0 #517245,1px -1px 0 #517245,-1px 1px 0 #517245,1px 1px 0 #517245,-1px 0px 0 #517245,1px 0px 0 #517245,0px -1px 0 #517245,0px 1px 0 #517245;
	margin: 0 auto;
}
		@media only screen and (min-width: 1920px) {
			.recent_work_title h3 {
				width: 70%;
			}

		}

		@media only screen and (max-width: 812px) {
			.recent_work_title h3 {
				font-size: 36px;
				width: 88%;
			}

		}

/* Features - Container that holds various content i.e.the Portfolio filtered work grid */
#features {
    padding-top: 16px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 48px;
    background-color: #FFFFFF;
    margin: 0 auto;
}

#features h1 {
    color: #FFFFFF;
    font-size: 72px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.06rem;
    line-height: 1.3;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
    text-shadow: -2px -2px 0 #416731, 2px -2px 0 #416731, -2px 2px 0 #416731, 2px 2px 0 #416731, -2px 0px 0 #416731, 2px 0px 0 #416731, 0px -2px 0 #416731, 0px 2px 0 #416731;
    width: 64%;
}

	/* Large screens */
	@media (min-width: 1920px) {
		#features h1 {
			font-size: 88px;
			width: 72%;
		}
	}

	/* Mobile */
	@media (max-width: 812px) {
		#features h1 {
			font-size: 64px !important;
			width: 90%;
		}
	}


#features h6 {
	margin: 0 auto;
	text-align: center;
	width: auto;
}

#features_jobs {
    padding-top: 88px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 96px;
    margin: 0 auto;
}
	@media screen and (max-width: 1920px) {
		#features_jobs {
			padding-top: 72px;
	  }
	}

#features_jobs h1 {
    color: #FFFFFF;
    font-size: 88px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.06rem;
    line-height: 150%;
    margin: 0 auto;
    padding: 32px 0 0;
    text-align: left;
    text-shadow: -2px -2px 0 #416731,
			2px -2px 0 #416731,
			-2px 2px 0 #416731,
			2px 2px 0 #416731,
			-2px 0px 0 #416731,
			2px 0px 0 #416731,
			0px -2px 0 #416731,
			0px 2px 0 #416731;
    width: 76%;
}
	@media screen and (min-width: 1920px) {
		#features_jobs h1 {
			width: 70%;
		}
	}
	@media screen and (max-width: 812px) {
		#features_jobs h1 {
			font-size: 64px;
			line-height: 120%;
			padding-bottom: 40px;
			width: 84%;
		}
	}



#features h2 {
    display: block;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-size: 72px;
    margin: 0 auto;
    padding: 16px 0px 8px 0px;
    width: 96%;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -0.06rem;
	
    text-shadow: -2px -2px 0 #416731, 2px -2px 0 #416731, -2px 2px 0 #416731, 2px 2px 0 #416731, -2px 0px 0 #416731, 2px 0px 0 #416731, 0px -2px 0 #416731, 0px 2px 0 #416731;
}
@media screen and (max-width: 1920px) {
	#features h2 {
		font-size: 64px;
	}
}
@media screen and (max-width: 812px) {
	#features h2 {
		font-size: 56px;
		margin: 0 auto;
        width: 92%;
	}
}

#features_jobs h2 {
    color: #3C5E2C;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 500;
    margin: 0 auto 8px auto;
    padding: 32px 0px 48px 0px;
    text-align: center;
    width: 90%;
}
@media screen and (min-width: 1824px) {
	#features_jobs h2 {
        font-size: 56px;
	}
}
@media screen and (max-width: 768px) {
	#features_jobs h2 {
		font-size: 40px;
		margin: 0 10% 24px 10%;
        width: 80%;
	}
}

#features_jobs .statement {
	display: block;
	font-size: 1.1rem;
	padding: 0 0 32px 0;
	margin: 0 auto;
	width: 76%;
}
	@media screen and (min-width: 2040px) {
		#features_jobs .statement {
			width: 70%;
		}
	}
	@media screen and (max-width: 812px) {
		#features_jobs .statement {
			width: 84%;
		}
	}


/* Container for the Portfolio filtered work grid */
.container {
	display: block;
	height: auto;
	margin: 0 auto;
	overflow: visible;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
	@media screen and (min-width: 1920px) {
		.container {
		  margin: 0 auto;
		  width: 72%;
	  }	
	}
	@media screen and (max-width: 1680px) {
		.container {
		  margin: 0 auto;
		  width: 80%;
	  }	
	}
	@media screen and (max-width: 992px) {
		.container {
			width: 96%;
		}
	}

.container p {
    font-size: 16px;
    line-height: 150%;
    width: 96%;
    margin: 0 auto;
}
.special {
	text-align: left;
	width: 94%;	
}
/* XX-Large */
@media screen and (min-width: 1824px) {
	.container p {
    font-size: 18px;
	}
}
/* Portfolio filtered work grid content */
.item {
	text-align:center;
	float:left;
	margin: 0.7%;
	position:relative;
	overflow: hidden;
}

	.item,
	.item-hover,
	.item-img,
	.item-info {
		width: 31.2%;
		height: 287px;
	}

	.item-hover,
	.item-hover .mask,
	.item-img { 
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}			

	.item-type-double .item-hover {	
		z-index: 5;	
		-webkit-transition: all 500ms ease-out;
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		transition: all 500ms ease-out;	
		opacity: 0;
		cursor: pointer;			
		display: block;
		text-decoration: none;
		text-align: center;							
	}
	
		.item-type-double .item-info {
			z-index: 10;
			color: #ffffff;
			display: table-cell;				
			vertical-align: middle;
			position: relative;	 					
		}
	
		.item-type-double .item-info .headline {
			color: #ffffff;
			font-size: 22px;
			width: 90%;
			margin: 0 auto;
			line-height: 125%;		
		}
		
		.item-type-double .item-info .line {
			height: 2px;
			width: 0%;
			margin: 15px auto;
			background-color: #A8D683;
			-webkit-transition: all 500ms ease-out;
			-moz-transition: all 500ms ease-out;
			-o-transition: all 500ms ease-out;
			transition: all 500ms ease-out;
		}
		
		.item-type-double .item-info .group-type {
			color: #BADF9D;
			font-size: 18px;
		}
		
		.item-type-double .item-hover .mask {
			background-color: #517244;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
			filter: alpha(opacity=90);
			z-index: 0;
		}
		
		.item-type-double .item-hover:hover .line {
			width: 90%;
		}
		
		.item-type-double .item-hover:hover {
			opacity: 1;
		}				
	
	.item-img {
		height: 100%;
		width: 100%;
		z-index: 0;
	}
	
	.item-img img {
		height: auto;
		width: 100%;
	}



/* Special - Container that holds the secondary hero content */
#special {
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	height: auto;
	margin-top: 40px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 50px;
	width: 100%;
}
	@media screen and (max-width: 812px) {
		#special {
			display: block;
			margin-bottom: 0px;
		}
	}

#special h5 {
	text-align: left;
	text-wrap: balance;
	width: 100%;
}

#special h4 {
    color: #4F813B;
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 125%;
    margin: 0px;
    padding: 0px 0px 8px 0px;
    text-align: left;
    width: 100%;
 }
	@media screen and (max-width: 1920px) {
		#special h4 {

	  }
	}


/* Special - Numbered list style 'Mainly used in Voltz page' */
#special ol {
	counter-reset:li;
	display: block;
	float: left;
	margin-left: 0;
	padding-left: 0;
}

#special ol > li {
	color: #000;
	font-size: 18px;
	line-height: 150%;
	list-style: none; /* Disable the normal item numbering */
	position: relative; /* Create a positioning context */
	margin: 0 0 1.4em 2em; /* Give each list item a left margin to make room for the numbers */
	padding: 4px 8px 4px 12px; /* Add some spacing around the content */
	text-align: left;
	width: 86%;
}

#special ol > li:before {
	content: counter(li); /* Use the counter as content */
	counter-increment: li; /* Increment the counter by 1 */
	/* Position and style the number */
	position: absolute;
	top: 0.3em;
	left: -2em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right: 8px;
	padding: 4px;
	border: 1px solid #BBB;
	color: #527244;
	background: none;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	text-align: center;
}

#special ol li:last-child {
	margin-bottom: 0;
}

.specialBoxText {
    float: right;
    height: auto;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 0%;
    padding-top: 8px;
    width: 40%;
    padding-left: 20px;
}
	@media screen and (max-width: 768px) {
		.specialBoxText {
			margin-top: 50px;
			padding: 0 9%;
			width: 100%;
		}
	}

.specialBoxText h3 {
    color: #416731;
    font-weight: 500;
    text-align: left;
}

.specialBoxText p {
    float: left;
    font-size: 16px;
    padding-left: 0px;
    text-align: left;
    width: 100%;
}
	/* XX-Large */
	@media screen and (min-width: 1824px) {
	   .specialBoxText p {
		   font-size: 18px;
	  }
	}
	@media screen and (max-width: 812px) {
	   .specialBoxText p {
		   width: 90%;
	  }
	}


.specialBoxText p .list-intro-p {
	margin-bottom: 0;	
}

.specialBoxText ul {
	float: left;
	list-style-position: outside;
	list-style-type: circle;
	margin: 0;
	padding: 0 0 24px 20px;
	text-align: left;
	width: 100%;
}
.specialBoxText li {
    color: #000;
    font-weight: 400;
    line-height: 160%;;
    margin-top: 4px;
}
/* XX-Large */
@media screen and (min-width: 1824px) {
	.specialBoxText li {
		font-size: 18px;
		width: 80%;
	}
}

.specialBoxText li::marker {
	color: #416731;
}


	.specialparagraph {
		float: left;
		width: 70%;
	}
	@media screen and (max-width: 768px) {
	  .specialparagraph {
		width: 100%;
	  }
	}
	@media screen and (min-width: 768px) and (max-width: 1048px) {
	  .specialparagraph {
		width: 80%;
	  }
	}

.specialBoxImage {
	display: block;
	float: left;
	height: auto;
	text-align: center;
	width: 50%;
}
	@media screen and (max-width: 812px) {
		.specialBoxImage {
			width: 100%;
		}
	}

.specialBoxImage img {
	margin: 0 auto;
    height: auto;
	width: 100%;
}
	@media screen and (max-width: 812px) {
		.specialBoxImage img {
			height: auto;
			margin: 0;
			width: 100%;
		}
	}
	@media screen and (min-width : 812px) 
	and (max-width : 1140px) 
	and (orientation : landscape) {
	  .specialBoxImage img {
		max-width: 300px;
	  }
	}
	@media screen and (min-width: 1100px) {
	  .specialBoxImage img {
    max-width: 620px;
	  }	
	}


/* My slides - rotating image 'Mainly used in Barclays page' */
.mySlides {
	display: none;
	margin: 20px auto;
	padding: 0;
	width: 100%;
}


/* Fading animation */
.fadeSlides {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}
	@-webkit-keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

	@keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}


/* Row App Screens */
.rowAppScreens {
    display: table;
    clear: both;
	padding: 32px 0px;
	width: 100%;
}
.rowAppScreens:first-child {
	padding-top: 0px;
}

/* Column layouts - appScreens */
.columnAppScreens {
	display: table-cell;
    float: left;
    width: 33.3%;
    
    padding: 10px;
    height: auto;
}
	@media screen and (max-width: 812px) {
		.columnAppScreens {
			display: block;
			margin: 0 0 20px 0;
			width: 100%;
		}
	}

	@media screen and (min-width : 812px) 
	and (max-width : 1048px) {
		.columnAppScreens {
			display: table-cell;
			width: 50%;
		}
	}

.columnAppScreens img {
    display: block;
    margin: 0 auto;
    text-align: center;
	height: auto;
	width: 280px;
}

.columnAppScreens h6 {
    color: #000;
    font-weight: 600;
    padding: 30px 0px 4px 0px;
    text-align: center;
	width: 100%;
}
.columnAppScreens p {
	font-size: 18px;
	min-height: 100px;
}
	/* XX-Large */
	@media screen and (min-width: 1824px) {
	   .columnAppScreens p {
		   font-size: 18px;
	  }
	}


/* Column layouts - appTabletScreens */
.columnAppTabletScreens {
    display: table-cell;
    float: left;
    width: 46%;
    margin: 0 1% 20px 1%;
    padding: 10px;
    height: auto;
}
	@media screen and (max-width: 812px) {
	  .columnAppTabletScreens {
		margin: 0 0 20px 0;
		width: 100%;
	  }
	}

	@media screen and (min-width : 812px) 
	and (max-width : 1048px) {
		.columnAppScreens {
			display: table-cell;
			width: 50%;
		}
	}

.columnAppTabletScreens img {
    display: block;
    margin: 20px auto 10px auto;
    text-align: center;
	width: 94%;
}
	@media screen and (max-width: 812px) {
	  .columnAppTabletScreens img {
		margin: 0 0 20px 0;
		width: 100%;
	  }
	}

.columnAppTabletScreens h6 {
    color: #253B1C;
    font-weight: 400;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    text-align: center;
}

/* Image related stuff - THIS IS WHERE I AM AT!!! */
.responsive {
    width: 100%;
    height: auto;
}
.responsive img {
	height: auto;
	margin: 0 auto;
	width: 100%;
}
	@media screen and (min-width: 1100px) {
		.responsive img {
			margin: 0 10%;
			text-align: center;
			width: 80%;
		}
	}
	@media screen and (min-width: 1200px) {
		.responsive img {
			margin: 0 25%;
			text-align: center;
			width: 50%;
		}
	}

.responsive2 img {
	height: auto;
	margin: 0 5%;
	width: 90%;
}

.responsiveMobileWeb {
    margin: 0 auto;
    width: 64%;
    height: auto;
}
	@media screen and (max-width: 768px) {
	  .responsiveMobileWeb {
		width: 90%;
		height: auto;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1080px) {
	  .responsiveMobileWeb {
		width: 80%;
		height: auto;
		}
	}

/* Center align image */
.img_align {
	display: block;
	margin: 0 auto;
    text-align: center;
    width: auto;
}
	@media screen and (max-width: 768px) {
	  .img_align {
		width: 100%;
	  }
	}



/**************************************************************************************************************** Contact Page ****************************************************************************************************************/
/* Contact Details */
.details {
    display: inline-block;
    width: 80%;
    margin: 6% 10%;
    font-size: 22px;
    font-weight: 400;
    line-height: 125%;
}
@media screen and (max-width: 812px) {
	.details {
		margin-top: 20%;
		margin-left: 8%;
		margin-right: 8%;
		width: 84%;
	}
}


.details h1 {
    color: #FFF/* #EEF8E7*/;
    font-size: 88px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.0rem;
    line-height: 150%;
	margin: 0 auto;
    text-align: left;
    text-shadow: -2px -2px 0 #416731,
			2px -2px 0 #416731,
			-2px 2px 0 #416731,
			2px 2px 0 #416731,
			-2px 0px 0 #416731,
			2px 0px 0 #416731,
			0px -2px 0 #416731,
			0px 2px 0 #416731;
	width: 96%;
}
	@media screen and (min-width: 2040px) {
		.details h1 {
			width: 88%;
		}
	}
	@media screen and (max-width: 812px) {
		.details h1 {
			font-size: 64px;
			line-height: 130%;
		}
	}

.details p {
    font-size: 18px;
    line-height: 160%;
    margin: 0 auto 32px auto;
    width: 96%;
}
	@media screen and (min-width: 2040px) {
		.details p {
			width: 88%;
		}
	}

.details a {
    border-bottom: none;
    color: #487236;
    font-size: 24px;
    font-weight: 500;
    margin-top: 8px;
    text-decoration: none;
}
@media screen and (max-width: 1280px) {
	.details a {
	    font-size: 22px;
		margin: 0 auto;
		width: 90%;
	}
}
@media screen and (max-width: 812px) {
	.details a {
	    font-size: 20px;
		margin: 0 auto;
		width: 90%;
	}
}
.details a:hover {
    color: #000000;
    text-decoration: none;
}

/* Social images */
.social {
	display: block;
    overflow: hidden;
	margin: 0 auto;
	padding: 12px 0px;
    width: 50%;
}
.social ul {
    list-style-type: none;
	height: auto;
    width: auto;
}
.social li {
	border: none;
	display: inline;
	list-style-type: none;
	text-decoration: none;
}
.social li a {
	height: 10px;
	border: none;
	text-decoration: none;
	width: 100%;
}
.social li a:hover {
}
.social li img {
	background-color: #FFF;
    border: solid 1px #B2CFA4;
    border-radius: 30%;
	
	corner-shape: squircle;
	
	height: auto;
	width: 72px;
	
	padding: 16px;
	margin: 16px 0;
	
	text-decoration: none;

}
.social li img:hover {
	background-color: #3E753B;
    border: solid 1px #3E753B;
    border-radius: 8px;
	
	-moz-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}




/* Two column responsive layouts */
.split {
	display: table-cell;
	table-layout: fixed;
	padding: 0 30px 64px 30px;
	margin: 0 auto 32px auto;
	vertical-align: middle;
	width: 50%;
}
	@media screen and (max-width: 812px) {
		.split {
			display: block;
			float: left;
			margin: 0 auto;
			padding: 16px 0;
			width: 100%;
		}
	}

.split h5 {
    color: #4F813B;
    font-family: "Momo Trust Display", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.1rem;
    line-height: 130%;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 80%;
}
	@media screen and (max-width: 1920px) {
		.split h5 {
			font-size: 64px;
	  }
	}
	@media screen and (max-width: 812px) {
		.split h5 {
			font-size: 52px;
	  }
	}

.new_split {
    display: table-cell;
    height: auto;
    vertical-align: top;
    width: 50%;
}

	@media screen and (min-width:812px) {
		.new_split:last-child {
			padding-bottom: 48px;
		}
	}

	@media screen and (max-width: 812px) {
		.new_split:first-child {
			display: block;
			float: left;
			margin: 0;
			padding: 48px 24px 24px 24px;
			width: 100%;
		}
		.new_split {
			display: block;
			float: left;
			padding: 0 24px;
			width: 100%;
		}
	}

.new_split h2 {
	margin: 0;
	padding: 0;
	text-align: left;
	text-wrap: pretty;
}

.new_split .content {
	margin: 80px auto;
	padding-top: 0px;
	width: 80%;
}
	@media screen and (min-width: 1920px) {
		.new_split .content {
			min-height: 440px;
			margin: 100px auto;
			width: 64%;
		}
	}
	@media screen and (max-width: 812px) {
		.new_split .content {
			padding-top: 0px;
			width: 100%;
		}
		.new_split .content:first-child {
			margin: 0 auto;
			padding-top: 28px;
			padding-bottom: 0px;
			width: auto;
		}
	}

.new_split .content .title_statement {
    margin: 0 auto;
}

.new_split .center {
	text-align: center;
}






/********************************************************************* AT THIS POINT WITH CSS CLEAN UP - Continue from here *********************************************************************/
.icon img {
	display: block;
	margin: 0 auto 24px auto;
	height: 96px;
	width: 96px;
	text-align: center;
}

.new_split .d1 {
    color: #2B491E;
    font-size: 64px;
    font-weight: 800;
    line-height: 130%;
    text-align: left;
    width: 90%;
}
	@media screen and (max-width: 812px) {
		.new_split .d1 {
			font-size: 48px;
			font-weight: 700;
			height: auto;
		}
	}

.new_split h4 {
	line-height: 130%;
	padding-bottom: 16px;
}

.new_split h7 {
	color: #416731;
	float: left;
	font-size: 24px;
	font-weight: 600;
	padding-bottom: 4px;
	text-align: left;
}

.new_split p {
    text-align: left;
	text-wrap: pretty;
	width: 100%;
}

.split_60 {
	display: table-cell;
	padding: 0 30px;
	margin: 0 auto 30px auto;
	vertical-align: middle;
	width: 60%;
}
@media screen and (max-width: 1000px) {
	.split_60 {
		display: block;
		margin: 0;
		padding: 0;
        width: 100%;
	}
}


.split_40 {
	display: table-cell;
	padding: 0 30px;
	margin: 0 auto 30px auto;
	vertical-align: middle;
	width: 40%;
}
@media screen and (max-width: 1000px) {
	.split_40 {
		display: block;
		margin: 0;
		padding: 0;
        width: 100%;
	}
}


.split .text-box {
	display: block;
	height: auto;
    margin: 0 10%;
	padding-top: 20px;
    width: 88%;
}
@media screen and (min-width: 1824px) {
	.split .text-box {
		margin: 0px auto;
        width: 80%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
	.split .text-box {
        width: 88%;
	}
}
@media screen and (max-width: 812px) {
	.split .text-box {
		float: left;
		margin: 8px auto;
		padding: 0 24px 16px 24px;
        width: 92%;
	}
}

.split_40 h4 {
    text-align: left;
}


.split h3 {
    font-weight: 500;
}
	
.split h4 {
	color: #416731;
    display: block;
    font-size: 48px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 0px;
    margin: 0px 0px 0px 0px;
	letter-spacing: -0.1rem;
    line-height: 140%;
	text-align: left;
    width: 80%;
    /* text-shadow: -2px -2px 0 #416731,
			2px -2px 0 #416731,
			-2px 2px 0 #416731,
			2px 2px 0 #416731,
			-2px 0px 0 #416731,
			2px 0px 0 #416731,
			0px -2px 0 #416731,
			0px 2px 0 #416731; */
}
	@media screen and (min-width: 1824px){
		.split h4 {
			font-size: 56px;
			width: 90%;
			padding-top: 0px;
		}
	}

	@media screen and (max-width : 812px) {
		.split h4 {
			line-height: 130%;
			margin: 0px;
			padding: 0px;
		}
	}

.split h5 {
    float: left;
    text-align: left;
}
	
.split h6 {
	font-weight: normal;
	margin-top: 0;
	padding-top: 08px;
	text-align: left;
}

.split h7 {
	color: #4F813B;
	float: left;
	font-size: 24px;
	font-weight: 500;
	margin-top: 16px;
	width: 100%;
}

.split p {
    display: block;
    float: left;
	font-size: 16px;
	line-height: 160%;
    padding: 0px;
    margin: 8px 0px 0px;
    text-align: left;
    width: 100%;
}

/* Small(Mobile) screen */
@media screen and (max-width: 812px) {
	.split p {
		
	}
}
/* XX-Large */
@media screen and (min-width: 1824px) {
	.split p {
    font-size: 18px;
    width: 90%;
	}
}


.split ul {
	float: left;
	list-style-position: outside;
	list-style-type: circle;
	margin: 0;
	padding: 8px 0 24px 20px;
	width: 100%;
}
.split li {
    color: #000000;
    font-weight: 400;
    line-height: 150%;
    margin-top: 4px;
    width: 80%;
}
/* XX-Large */
@media screen and (min-width: 1824px) {
	.split li {
		font-size: 18px;
	}
}

.split li:first-child {
	margin-top: 0;	
}

.split li::marker {
	color: #416731;
}


.split img {
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
@media screen and (max-width: 812px) {
	.split img {
		
	}
}

.split a {
    border-bottom: 1px solid #ABABAB;
    padding-bottom: 2px;
}
.split a:hover {
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}
.ui_img_h700 {
    height: auto;
    width: 100%;
}
@media screen and (min-width: 1824px) {
	.ui_img_h700 {

	}
}

.ui_img_h640 {
    height: auto;
    width: 100%;
}
@media screen and (max-width: 812px) {
	.ui_img_h640 {
		height: auto;
		width: 100%;
	}
}


/* Contact Form bits and pieces */	
#contactFormHolder {
	float: left;
	margin: 0px 0px 40px 0px;
	width: 50%;
}
@media screen and (max-width: 768px) {
	#contactFormHolder {
		width: 100%;
	}
}

#contactFormHolder h2 {
	color: #000;
	font-size: 32px;
	margin: 10%;
	text-align: center;
	width: 80%;
}

.contactForm {
	height: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	text-align: left;
	width: 92%;
}
@media screen and (max-width: 768px) {
  .contactForm {
	width: 90%;
  }
}
@media screen and (min-width: 2040px) {
  .contactForm {
	width: 76%;
  }
}
	
label {
    clear: left;
    color: #000;
    float: left;
    font-size: 20px;
    margin-top: 24px;
	padding-bottom: 8px;
    padding-left: 0px;
    text-align: left;
    width: 80%;
}

.required {
    color: #FF0000;
}

input[type=text] {
    background-color: rgba(255,255,255,0.20);
    border-bottom: solid 2px #92BB7F;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    color: #000;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    padding: 16px 16px 16px 12px;
    margin: 12px 0;
    width: 80%;
}

textarea[type=text]{
    background-color: rgba(255,255,255,0.20);
    border-bottom: solid 2px #92BB7F;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    padding: 16px 16px 16px 12px;
    margin: 12px 0;
    resize: none;
    width: 100%;
}

input[type=text]:focus, textarea[type=text]:focus {
    background-color: #FFFFFF;
    border: 1px solid #7EAE66;
    padding: 16px;
    outline: none;
    /* box-shadow: 0px 4px 14px #888888;
    -webkit-box-shadow: 0px 0px 3px 2px #416731; */
}

::placeholder {
	color: #487236;
	font-size: 18px;
	opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
	color: #487236;
}


/* Form Button */
input[type=submit] {
    /*background-color: #4F813B;
    border-radius: 56px;

	background: linear-gradient(#4F813B, #4F813B) padding-box,
			  linear-gradient(to bottom, #4F813B, #416731) border-box;
	border: 1px solid transparent; */
	
    color: #FFFFFF;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
	letter-spacing: 0.02rem;
    line-height: 20px;
    margin-top: 0px;
    padding: 16px 32px;
    text-decoration: none;
	
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
/*input[type=submit]:hover {
    background-color: #416731;
	background: linear-gradient(#416731, #416731) padding-box;
    border: 1px solid #4F813B;
    border-radius: 4px;
    box-shadow: none;
    color: #FFF;
    text-decoration: none;
	
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
} */


/* Contact details column */
#contactDetails {
    background-color: rgba(255,255,255,0.20);
	border: solid 1px rgba(196,222,174,1.00);
    float: left;
    margin: 24px 0px 40px 10%;
    padding-bottom: 56px;
    padding-top: 40px;
	text-align: center;
    width: 40%;
}
	@media screen and (min-width: 1920px) {
		#contactDetails {
			width: 33%;
		}
	}
	@media screen and (max-width: 1280px) {
		#contactDetails {
			margin-left: 0%;
			width: 46%;
		}
	}
	@media screen and (max-width: 812px) {
		#contactDetails {
			border: none;
			box-shadow: none;
			margin: 40px 0% 40px 0%;
			width: 100%;
		}
	}



/* Next AND Previous page buttons */
.nextprevbtn {
	float: right;
	margin: 40px 0px;
}
	@media screen and (max-width: 992px) {
		.nextprevbtn {
			margin: 0px 40px 0px 0px;
		}
	}

.nextprevbtn .button {
	margin-left: 12px;
}

/*=========================
NEW FOOTER
=========================*/

.footer2 {

	border-radius: 124px 0 0 0;
	
    padding: 80px 6% 40px;

	background: #E4F0DA;
	background: linear-gradient(25deg,rgba(255,255,255,1.00) 30%, rgba(228,240,218,1.00) 75%);

}
	@media screen and (max-width: 992px) {
		.footer2 {
			border-radius: 0;
			
			padding: 48px 6% 40px 6%;
		}
	}


/*=========================
TOP
=========================*/

.footer-top{

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 64px;

}


/*=========================
LEFT
=========================*/

.footer-left {

    flex: 1;

}

.footer-left h2 {
    font-size: clamp(2.6rem, 6.2vw, 4.6rem);
    font-family: "Momo Trust Display", sans-serif;
    /* text-shadow: -1px -1px 0 #416731,
			1px -1px 0 #416731,
			-1px 1px 0 #416731,
			1px 1px 0 #416731,
			1px 0px 0 #416731,
			1px 0px 0 #416731,
			0px -1px 0 #416731,
			0px 1px 0 #416731; */

    line-height: 120%;
    font-weight: 800;
    color: var(--BRAND_primary-med);

}


/*=========================
RIGHT
=========================*/

.footer-right {

    width: 420px;

    display: flex;

    flex-direction: column;

    align-items:  -end;

}


/*=========================
NAVIGATION
=========================*/

.footer-nav {

    display: flex;

    justify-content: space-between;

    padding: 28px 0;
	
	background: none;

    border-top: solid 1px var(--BRAND_primary-med);

    border-bottom: solid 1px var(--BRAND_primary-med);

}

.footer-nav a {

    position: relative;

    text-decoration: none;

    color: #4F813B;

    font-size: 1.2rem;

    transition: .3s;

}
	@media screen and (max-width: 992px) {
		.footer-nav a {
			font-size: 1rem;
		}
	}

	@media screen and (max-width: 992px) {
		.footer-nav .here {
			font-size: 1rem;
		}
	}

.footer-nav a:hover{

    color: #263621;

}

.footer-nav a::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: #4F813B;

    transition: .3s;

}

.footer-nav a:hover::after{

    width: 100%;

}

.footer-nav a .here {
	color: #000;
}


/*=========================
SOCIAL
=========================*/

.footer-social{

    width:100%;

    display:flex;

    justify-content:flex-end;

    margin-top: 8rem;

}

.footer-social img{

    width: 40px;

    transition:.3s;

}

.footer-social img:hover{

    transform:translateY(-4px);

}


/*=========================
BOTTOM
=========================*/

.footer-bottom{

    margin-top: 40px;

    padding-top: 35px;

    border-top: solid 1px var(--BRAND_primary-med);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.footer-logo img{

    width: 48px;

}

.footer-copy{

    color: var(--BRAND_primary);

    font-size: .9rem;

}


/*=========================
MOBILE
=========================*/
	@media (max-width: 900px){

	.footer-left h2 {
		font-size: 48px;
	}
		
	.footer-top{

		flex-direction: column;

		gap: 60px;

	}

	.footer-right{

		width: 100%;

		align-items: flex-start;

	}

	.footer-nav{

		flex-wrap: wrap;

		gap: 20px;

		justify-content: flex-start;

	}

	.footer-social{

		justify-content: flex-end;

		margin-top: 40px;

	}

	.footer-bottom{

		flex-direction: column;

		gap: 25px;

		text-align: center;

	}

	}


/* Footer */
#footer {
	background: #E4F0DA;
	background: linear-gradient(25deg,rgba(255,255,255,1.00) 30%, rgba(228,240,218,1.00) 75%);
    float: left;
    height: 320px;
    padding: 64px 0px 0px;
    position: relative;
    bottom: 0;
    margin-bottom: 0px;
    width: 100%;

}

#footer p {
	color: #416731;
	font-size: 12px;
	margin: 0 auto;
	padding: 60px 0px 0px;
	text-align: right;
}

.footer a {
	color: #494949;
}

.footer a:hover {
	color: #9d9d9d;
}

ul#footerContainer {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 30px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #B2CFA4;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #B2CFA4;
	width: auto;
	padding-top: 24px;
	padding-right: 20px;
	padding-bottom: 16px;
	padding-left: 20px;
}

	@media screen and (max-width: 812px) {
		ul#footerContainer {
			width: 90%;
			padding-right: 4px;
			padding-left: 4px;
			text-align: center;
		}
	}

ul#footerContainer li {
	float: right;
	display: inline;
	margin : 0 16px 0 0;
}
	@media screen and (max-width: 812px) {
		ul#footerContainer li {
			margin : 0 12px 0 0;
		}
	}

ul#footerContainer li:first-child {
	margin : 0 0 8px 0;
}

ul#footerContainer li a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 20px;
}

@media screen and (max-width: 1440px) {
  ul#footerContainer li a {
	font-size: 18px;

  }
}

@media screen and (max-width: 812px) {
  ul#footerContainer li a {
	font-size: 14px;

  }
}

ul#footerContainer li a:hover {
    color: #4F813B;
}

ul#footerContainer li a.current {
	color: #4F813B;
	cursor: context-menu;
}


/* scroolToTop */
a.scrollToTopSprite {
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
	position:fixed;
	bottom: 3%;
	left: 1.2%;
	display:none;
	height: 48px;
	background: url("../images/New_arrow_secondary.png") no-repeat;
	background-color: #FFFFFF;
    border: solid 2px #B2CFA4;
    border-radius: 26px;
	background-position: center center;
	background-size: 28px 28px;
	text-indent: -9000px;
	width: 48px;
	z-index: 1000;
}
@media screen and (min-width: 1824px) {
  a.scrollToTopSprite {
	 left: 1.6%;
  }
}

@media screen and (max-width: 768px) {
  a.scrollToTopSprite {
	 left: 20px;
  }
}

a.scrollToTopSprite:hover {
	background: url("../images/New_arrow_primary.png") no-repeat;
	background-position: center center;
	background-size: 28px 28px;
    background-color: #4F813B;
    border: solid 2px #4F813B;
    border-radius: 0px;
	corner-shape: squircle;
	box-shadow: none;
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}


/* Basic Colors */
.black {
	color: #000000;
}
.white {
	color: #FFFFFF;
}
.lightgreen {
    color: #39ff14;
}
.lightergreen {
    color: #A1C38C;
}
.green {
	color: #4F813B;
}


/* Floating */
.floatRight {
	clear: both;
	float: right;
}
@media screen and (max-width: 768px) {
	.floatRight {
		float: none;
	}
}

.floatLeft {
	float: left;
	margin-left: 8px;
}


/* Top Padding */
.topP-0 {
	padding-top:0 !important;
}
.topP-6 {
	padding-top: 6px;
}
.top-8 {
	padding-top: 8px;
}
.topP-10 {
	padding-top: 10px;
}
.topP-20 {
	padding-top: 20px;
}
.topP-30 {
	padding-top: 30px;
}
.topP-40 {
	padding-top: 40px;
}


/* Bottom Padding */
.botP-0 {
	padding-bottom:0 !important;
}
.botP-6 {
	padding-bottom: 6px;
}
.botP-10 {
	padding-bottom: 10px;
}
.botP-20 {
    padding-bottom: 20px;
    padding-top: 0px;
}
.botP-24 {
	padding-bottom: 24px;
}
.botP-30 {
	padding-bottom: 30px;
}
.botP-40 {
	padding-bottom: 40px;
}
.botP-50 {
	padding-bottom: 50px;
}
.botP-60 {
	padding-bottom: 60px;
}
.botP-80 {
	padding-bottom: 80px;
}


/* Top Margin */
.topM-0 {
	margin-top:0 !important;
}
.topM-4 {
	margin-top: 4px;
}
.topM-8 {
	margin-top: 8px;
}
.topM-10 {
	margin-top: 10px;
}
.topM-14 {
	margin-top: 14px;
}
.topM-20 {
	margin-top: 20px;
}
.topM-30 {
	margin-top: 30px;
}
.topM-40 {
	margin-top: 40px;
}
.topM-48 {
	margin-top: 48px;
}
.topM-60 {
	margin-top: 60px;
}
.topM-80 {
	margin-top: 80px;
}


/* Right Margin */
.rigM-0 {
	margin-right:0 !important;
}
.rigM-10 {
	margin-right: 10%;
}
.rigM-20 {
	margin-right: 20px;
}
.rigM-30 {
	margin-right: 30%;
}
.rigM-40 {
	margin-right: 40px;
}


/* Bottom Margin */
.botM-0 {
	margin-bottom:0 !important;
}
.botM-10 {
	margin-bottom: 10px;
}
.botM-20 {
	margin-bottom: 20px;
}
.botM-30 {
	margin-bottom: 30px;
}
.botM-40 {
	margin-bottom: 40px;
}

.botM-60 {
	margin-bottom: 64px;
}

.botM-80 {
	margin-bottom: 80px;
}


/* leftt Margin */
.lefM-0 {
	margin-left:0 !important;
}
.lefM-20 {
	margin-left: 20px;
}
.lefM-30 {
	margin-left: 30px;
}
.lefM-40 {
	margin-left: 40px;
}


/* View the Site */
.viewSiteContainer {
    background-image: url("../images/underShadow.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    display: block;
    height: auto;
    padding-bottom: 14px;
}
@media screen and (max-width: 768px) {
	.viewSiteContainer {
		background-image: url("../images/underShadow_480.png");
		background-position: bottom center;
		background-repeat: no-repeat;
		display: block;
		height: auto;
		padding-bottom: 2px;
	}
}
.viewSite {
    /* border-bottom: solid 1px #c2c1bc; */
    border-top: solid 1px #c2c1bc;
    display: block;
    margin-bottom: 16px;
    padding: 20px 0px 26px 0px;
    text-align: center;
}
.viewSite a {
	border-bottom: solid 1px #C0C0C0;
	color: #5C8F46;
	font-size: 20px;
	font-weight: 400;
	padding-bottom: 0px;	
	-moz-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.viewSite a:hover {
	border-bottom: solid 1px #000;
	color: #000;
}


/* Statement */
.statement {
    font-size: 14px;
	font-weight: 400;
    margin-top: 50px;
    line-height: 135%;
}
.statement p {
    font-size: 14px;
}
.statementBlack {
	color: #000;
    font-size: 18px;	
}
.statementBrand-Primary {
	color: #416731;
	display: block;
    font-size: 18px;
	float: left;
}

.statement2 {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    padding-bottom: 10px;
}
.colleagueThoughts {
	color: #416731;
	float: left;
    font-size: 12px;	
}
.colleagueTitle {
    color: #000;
	float: left;
    font-size: 14px;
}

/* border */
.border {
    border-top: solid 1px #B2CFA4;
    clear: both;
    height: 40px;
    margin: 0 auto 10px auto;
    width: 100%;
}
@media screen and (max-width: 812px) {
	.border {
		height: 0px;
		width: 94%;
	}
}

.bdr-text-divide-primary {
	border-top: solid 1px var(--BRAND_primary-med);
	display: block;
	margin: 40px auto 20px auto;
	overflow: hidden;
	width: 100%;	
}

.bdr-text-divide-lightgreen {
	border-top: solid 1px #416731;
	display: block;
	margin: 40px auto 20px auto;
	overflow: hidden;
	width: 96%;	
}

.bdr-text-divide-extralightgreen {
	border-top: solid 1px #BBDC93;
	display: block;
	margin: 40px auto 20px auto;
	overflow: hidden;
	width: 100%;	
}

.bdr-text-divide-grey {
    border-top: solid 1px #D1E5C0;
    display: block;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    overflow: hidden;
    width: 92%;
	
}

.imgbdr {
	background-color: #F2F2F2;
	border: solid 1px #E0E0E0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 12px;
}


/* spacer */
.spacer {
	clear: both;
	min-height: 60px;
	margin: 0 auto;
	width: 96%;
}
@media screen and (max-width: 812px) {
    .spacer {
        height: 20px;
	}
}

.spacer_20 {
	clear: both;
	height: 20px;
	width: 96%;
}


/* Text shadow */
.text-shadow {
	text-shadow: 0px 2px 5px #416731;	
}


/* Overiding Classes */
/* Must remain at the bottom of the stylesheet */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
* html .clearfix {
	height: 1%;
}
.alpha {
	margin-left: 0;
}
.omega {
	margin-right: 0;
}

/* UNDER SHADOWS */
.under_shadow {
    background-image: url(../images/underShadow_new.png);
    background-position: top center;
    background-repeat: no-repeat;
    /* border-top: solid 1px #0F3511; */
    height: 50px;
    margin-top: 2px;
    padding-top: 0;
    width: 100%;
}
@media screen and (max-width: 812px) {
    .under_shadow {
		background-image: url(../images/underShadow_new.png);
		background-position: top center;
		background-repeat: no-repeat;		
        height: 40px;
		margin-top: 2px;
		padding-top: 0;
		width: 100%;
	}
}

.under_shadow_50 {
    background-image: url(../images/underShadow_new_50.png);
    background-position: top center;
    background-repeat: no-repeat;
    /* border-top: solid 1px #0F3511; */
    height: 50px;
    padding-top: 0;
    width: 100%;
}
@media screen and (max-width: 812px) {
    .under_shadow_50 {
		background-image: url(../images/underShadow_new_50.png);
		background-position: top center;
		background-repeat: no-repeat;		
        height: 40px;
		margin-top: 2px;
		padding-top: 0;
		width: 100%;
	}
}


/* PORTFOLIO STYLES */
	.heading_label {
		height: auto;
		margin: 0 auto;
		width: 94%;
	}
	
	.heading_label p {
		color: #4F813B;
		font-size: 14px;
		margin-bottom: 8px;
		text-align: center;
		width: 100%;
	}
	
/* NEW OUTCOMES LAYOUT */
	.outcome_container {
		display: flex;
		height: auto;
		margin: 64px auto;
		width: 84%;
	}
	
	/* XX-Large */
	@media screen and (min-width: 1824px) {	
		.outcome_container {
			width: 64%;
		}
	}

	@media screen and (max-width: 812px) {	
		.outcome_container {
			display: block;
			width: 90%;
		}
	}
	
	.outcome_brekdown {
		display: inline-flex;
		float: left;
		width: 100%;
	}
	@media screen and (max-width: 812px) {	
		.outcome_brekdown {
			display: block;
		}
	}
	
	.outcome_brekdown .outcome_title {
		height: auto;
		margin-right: 8%;
		padding-right: 24px;
		width: 30%;
	}
	@media screen and (max-width: 812px) {	
		.outcome_brekdown .outcome_title {
			display: block;
			width: 100%;
		}
	}

	
	.outcome_brekdown .outcome_content {
		height: auto;
		margin-top: 8px;
		width: 62%;
	}
	@media screen and (max-width: 812px) {	
		.outcome_brekdown .outcome_content {
			display: block;
			width: 100%;
		}
	}
	
	.outcome_brekdown .outcome_title h5 {
    color: #416731;
    display: block;
    float: left;
    font-size: 56px;
    font-family: "Momo Trust Display", sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    letter-spacing: -0.14rem;
    line-height: 130%;
    text-align: right;
    /* text-shadow: -2px -2px 0 #416731,
				2px -2px 0 #416731,
				-2px 2px 0 #416731,
				2px 2px 0 #416731,
				-2px 0px 0 #416731,
				2px 0px 0 #416731,
				0px -2px 0 #416731,
				0px 2px 0 #416731; */
    width: 100%;
	}
	@media screen and (max-width: 1920px) {
		.outcome_brekdown .outcome_title h5 {
			font-size: 56px;
		}
	}
	@media screen and (max-width: 812px) {
		.outcome_brekdown .outcome_title h5 {
			padding-bottom: 8px;
			text-align: left;
		}
	}
	
	.outcome_brekdown .outcome_content h5 {
		font-weight: 500;
		line-height: 100%;
		font-family: 'Poppins', sans-serif;
		font-size: 28px;
		color: #4F813B;
		height: auto;
		margin: 0;
		padding: 12px 0;
		text-align: left;
		width: 100%;
	}
	@media screen and (max-width: 1920px) {
		.outcome_brekdown .outcome_content h5 {
			font-size: 24px;
		}
	}
	
	.outcome_brekdown .outcome_content p {
		line-height: 160%;
		pading: 0;
		margin: 0 0 16px 0;
		width: 100%;
	}
	/* XX-Large */
	@media screen and (min-width: 1920px) {
		.outcome_brekdown .outcome_content p {
			font-size: 18px;
		}
	}

	@media screen and (max-width: 812px) {
		.outcome_brekdown .outcome_content p {
			margin-bottom: 16px;
		}
	}

	.outcome_brekdown ul {
		float: left;
		list-style-position: outside;
		list-style-type: circle;
		margin: 0;
		padding: 0 0 24px 20px;
		text-align: left;
		width: 100%;
	}
	.outcome_brekdown li {
		color: #000;
		font-size: 16px;
		font-weight: 400;
		line-height: 160%;;
		margin-top: 4px;
	}
	/* XX-Large */
	@media screen and (min-width: 1920px) {
		.outcome_brekdown li {
			font-size: 18px;
			width: 80%;
		}
	}

	.outcome_brekdown li::marker {
		color: #416731;
	}

/* Container for the Next and Previous butons */
.nextprevbtn_container {
	display: block;
	height: auto;
	margin: 32px auto;	
}
	@media screen and (min-width: 1920px) {
		.nextprevbtn_container {
		  margin: 0 auto;
		  width: 72%;
	  }	
	}
	@media screen and (max-width: 1920px) {
		.nextprevbtn_container {
		  margin: 0 auto;
		  width: 80%;
	  }	
	}
	@media screen and (max-width: 812px) {
		.nextprevbtn_container {
			margin-top: 64px;
			width: 98%;
		}
	}