/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* Colors
––––––––––––––––––––––––––––––––––––––––––––
#089b39
#747474
#0e0e0e
––––––––––––––––––––––––––––––––––––––––––––*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
html {
	font-size: 17px;
}
body {
  font-family: 'Poppins', sans-serif;
	text-align: left;
	background-color: #000000;
}
.center {
	text-align: center;
}


/* Wrappers, backgrounds & containers
––––––––––––––––––––––––––––––––––––––––––––*/

.site-wrap {
	background-color: #ffffff;
}
.section-wrap {
	max-width: 1200px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 30px;
	margin: auto;
}
hr {
	margin-top: 50px;
	margin-bottom: 35px;
	height: 3px;
	background-color: rgb(223, 221, 221);
}

/* Images
––––––––––––––––––––––––––––––––––––––––––––*/

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

/* Typography
––––––––––––––––––––––––––––––––––––––––––––*/

p { /* normal copy */
	font-size: inherit;
	color: #747474;
	padding: 10px 0px;
	line-height: 1.8rem;
}
h1 { /* index headline */
	font-size: 5.2rem;
	font-weight: 900;
	padding: 0px 20px;
}
.header-image-text-small-title h1 {
	padding: 0px 0px;
}
h2 { /* section titles */
	font-size: 3.3rem;
	font-weight: 900;
	line-height: 3.3rem;
	margin-bottom: 10px;
}
h3 { /* stand first copy */
	font-size: 1.2rem;
	font-weight: 700;
	padding-bottom: 10px;
}
h4 { /* subheads */
	font-size: 1.4rem;
	font-weight: 700;
}
h5 { /* pull quote */
	font-size: 1.7rem;
	font-weight: 700;
}
h6 { /* pull quote caption */
	font-size: 1.6rem;
	font-weight: 300;
}
.page-break-text h6 {
	padding-top: 7px;
	font-size: 1.4rem;
}

button a {
	font-size: 1.2rem;
	font-weight: 300;
}
button.button{
	display: inline-block;
	margin-top: 30px;
  background-color: #089b39;
	padding: 0.35rem 1.17rem 0.29rem 1.17rem;
	border-radius: 0.4rem;
}
button.button:hover {
	background-color: rgb(8,155,57,0.8);
	-webkit-transition: all ease-in-out 175ms;
	-o-transition: all ease-in-out 175ms;
	transition: all ease-in-out 175ms;
}

header li {
	font-size: 0.9rem;
}
header .header-image-text-title {
	line-height: 5em;
	margin-bottom: 30px;
	color: #ffffff;

}
header .header-image-text-small-title {
	line-height: 5em;
	margin-bottom: 30px;
	color: #ffffff;
	width: 100%;
}
.header-image-text-small-title h1 {
	font-size: 4rem;
}
header .header-image-text-leader {
	margin-bottom: 30px;
	padding: 0px 15px;
	color: #ffffff;
}
footer p {
	font-size: 0.6rem;
	color: #ffffff;
	line-height: 1.2rem;
}
.bullet-point {
	display: list-item;
  list-style-type: disc;
	list-style-position: inside;
	padding-left: 35px;
	text-indent: -25px;
}
.where-we-work p {
	color: #989595;
}
.where-item p {
	font-size: 0.9rem;
	padding: 3px 5px 0 5px;
	line-height: 1.6rem;
}
.where-item h4 {
	line-height: 1.8rem;
	padding-bottom: 5px;
}
.what-we-offer-sub-item p {
	font-size: 0.9rem;
	/* padding: 3px 5px 0 5px; */
	padding-top: 0.2rem;
	line-height: 1.6rem;
}
.what-we-offer-sub-item h4 {
	line-height: 1.8rem;
	padding-bottom: 0px;
	font-size: 1.2rem;
}

.index-page {
	text-align: center;
}
.index-page .reduced-width {
	max-width: 900px;
	margin: auto;

}

.white {color: #ffffff;}
.bold {
	font-weight: 700;
	/* color: #000000; */
}
.bold-sub {
	font-weight: 700;
	color: #000000;
	font-size: 1.2rem;
}

.phone-text{
	font-size: 1.3rem;
	margin-top: 15px;
}
.phone-text a {
	color: #747474;
}
.phone-text a:hover {
	color: #089b39;
}

/* Header / navbar
––––––––––––––––––––––––––––––––––––––––––––*/

header {
	position: relative;
	text-align: center;
}
header .header-image {
	width: 100%;
	height: 65vh;
	min-height: 700px;
	margin: auto;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
	z-index: -1;
	background-color: #000000;
}
header .header-image-small {
	/* height: 50vh; */
	min-height: 350px;
	max-height: 550px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
}
header .header-image-mid {
	min-height: 450px;
	max-height: 650px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0 100%);
}
header .header-images {
	position: absolute;
	-webkit-filter: brightness(50%);
	        filter: brightness(50%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
}

/* .header-images-display{
	display: none;
} */

.header-images.background-top{
	background-position: center top;
}

header .nav-bar-container {
	position: absolute;
	width: 100%;
	z-index: 1;
}

header .nav-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background-color: rgb(0,0,0,0.6);
	padding: 15px 5%;
	font-size: 0.8rem;
}
header .nav-bar-border {
	z-index: 2;
	height: 6px;
	background: -webkit-linear-gradient(left, rgba(8,155,57,1), rgba(8,155,57,0.3));
}

header nav,ul,li,a {
	color: #ffffff;
	text-decoration: none;
}

header .nav-icon {
	width: 160px;
	cursor: pointer;
	z-index: 2;
}

header .nav-links ul {
	padding: 20px 0px 0px 0px;
}

header .nav-links li  {
	list-style: none;
	display: inline-block;
	padding: 1px 18px 0px 18px;
	position: relative;
}

header .nav-links li::after {
	content: '';
	position: absolute;
	display: block;
	height: 0.3rem;
	width: 0%;
	background-color: #089b39;
	bottom: -0.4rem;
	-webkit-transition: all ease-in-out 250ms;
	-o-transition: all ease-in-out 250ms;
	transition: all ease-in-out 250ms;
}
header .nav-links li:hover::after{
	width: 73%;
}


header .header-image-content {
	width: 100%;
	position: absolute;
	top: 40%;
	margin-left: auto;
	margin-right: auto;
}

header .header-image-content-small {
	position: absolute;
	bottom: 40px;
}

header .header-break {
	display: none;
}

header .leader-mobile {
	display: none;
}

header button {
	display: inline-block;
  background-color: Transparent;
  border: 1px solid white;
	padding: 6px 20px 5px 20px;
}

header button:hover {
	background-color: rgb(8,155,57,0.7);
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}


/* Header video stuff (youtube js at bottom of html)
––––––––––––––––––––––––––––––––––––––––––––*/
.fullwidth-video  {
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	-webkit-filter: brightness(40%);
					filter: brightness(40%);
	overflow: hidden;
	pointer-events: none;
}
iframe {
	box-sizing: border-box;
  height: 56.25vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, 0%);
	/* transform: translate(-50%, -50%); */
  position: relative;
	/* position: absolute; */
  top: 50%;
  width: 177.77777778vh;
	background-size: cover;
}


/*dropdown burger stuff
––––––––––––––––––––––––––––––––––––––––––––*/
header .fas {
	padding-top: 5px;
	font-size: 1.5rem;
}

.nav-burger {
	z-index: 2;
	position: absolute;
	/* z-index: 3;
	display: none; */
	color:#ffffff;
	top: 30px;
	right:50px;
	display: none;
}
.dropdown-content {
	display: none;
	position: absolute;
	right: 0px;
	list-style-type: none;
	margin-top: 100px;
	background-color: rgb(0,0,0,0.6);
	width: 280px;
	z-index: 1;
	text-align: right;
	padding-right: 4%;
}
header .dropdown-links li {
	font-size: 1.3rem;
	margin: 15px 0px;
	list-style-type: none;
	padding: 0px 10px;
}
header .dropdown-links li:hover {
	background-color: rgb(8,155,57,0.7);
}
.show {	display:block;}



/* Footer
––––––––––––––––––––––––––––––––––––––––––––*/

footer {
	width: 100%;
	background-color: #000000;
	min-height: 40px;
	margin-top: 50px;
	text-align: center;
	/* clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 100%); */
}
footer .footer-flexbox {
	max-width: 1200px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: auto;
	padding: 70px 50px;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

footer .nav-icon {
	width: 160px;
	cursor: pointer;
}
footer .social a {
	font-size: 1.5rem;
	border-radius: 50%;
	margin: 5px;
}
footer .fab {
  padding: 0.556rem;
  width: 2.722rem;
  text-align: center;
  text-decoration: none;
	border-radius: 50%;
}

.social .fab:hover {
	background-color: #747474;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.fa-facebook-f {background-color: #3b5998;}
.fa-instagram {background-color: #f46f30;}
.fa-linkedin-in {background-color: #0e76a8;}



/* page breaks (diagonal picture sections on index page)
––––––––––––––––––––––––––––––––––––––––––––*/

section.break-container {
	position: relative;
}

section .page-break {
	position: relative;
	width: 100%;
	height: 600px;
	background-color: #000000;
	-webkit-clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);
	        clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);
	text-align: center;
	margin: auto;
	z-index: 1;
}

section .page-break p {
	max-width: 700px;
	margin: auto;
}

section .page-break.page-break-small {
	height: 500px;
}

section .break-container-black-end {
	background-color: #000000;
	width: 100%;
	height: 500px;
}

.bg-darkgrey {
	margin-top: -1px;
	-webkit-clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 150px), 0 100%);
	        clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 150px), 0 100%);
}

section .page-break-image {
	-webkit-filter: brightness(50%);
	        filter: brightness(50%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
}

section .page-break-text {
	position: absolute;
	max-width: 1000px;
	color: #ffffff;
	top: 25%;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	padding: 50px 30px;
	z-index: 2;
}

/* these next 4 styles are to extend the grey and black sections below the opening and above the closing page breaks of the Where We Work section*/
.bg-darkgrey-top {
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #1f1d1d;
	top: 0;
}
.bg-darkgrey-bottom {
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #1f1d1d;
	bottom: 0;
}
.middle-dark-grey-bottom {
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	max-width: 1200px;
	height: 100%;
	background-color: #0e0e0e;
	bottom: 0;
}
.middle-dark-grey-top {
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	max-width: 1200px;
	height: 100%;
	background-color: #0e0e0e;
	top: 0;
}



/* What we offer
––––––––––––––––––––––––––––––––––––––––––––*/

section .what-we-offer-sub-item {
	text-align: left;
}

section .what-we-offer-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 50% 50%;
	grid-template-columns: 50% 50%;
	/* padding: 50px 50px; */
}
.what-we-offer-item {
	text-align: center;
	/* padding: 30px 15px; */
	/* margin-bottom: 50px; */
}

section .what-we-offer-sub-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 35% 65%;
	grid-template-columns: 35% 65%;
}
.what-we-offer-sub-item {
	text-align: center;
	padding: 15px;
	/* margin-bottom: 50px; */
}
.what-we-offer-sub-item h4 {
	margin-top: 20px;
}
.what-we-offer-sub-item img {
	min-height: 8.3rem;
	margin: auto;
	/* min-width: 120px; */
	/* margin-bottom: 35px; */
}

section.dark-grey {
	background-color: #1f1d1d;
	color: #e2e2e2;
	text-align: center;
}
.section-wrap.where-we-work {
	background-color: #0e0e0e;
	padding-bottom: 180px;
}
section .where-we-work-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: auto auto auto;
	grid-template-columns: auto auto auto;
	padding: 0px 50px;
}
.where-item {
	text-align: center;
	padding: 30px 15px;
	/* margin-bottom: 50px; */
}
.where-item img {
	height: 8.3rem;
	margin: auto;
	margin-bottom: 35px;
}

.what-we-know {
	text-align: center;
}



/* Who we are (copy at bottom of index page)
––––––––––––––––––––––––––––––––––––––––––––*/

section .who-we-are-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: auto auto;
	grid-template-columns: auto auto;
}
section .who-we-are-item {
	padding-right: 15px;
}



/* work for us (copy for Work With Us page)
––––––––––––––––––––––––––––––––––––––––––––*/

.work-for-us .bullet-point{
	line-height: 0.8rem;
}
.section-wrap .work-for-us{
	padding-right: 25%;
}

/* NHS banner (bottom of Work With Us page)
––––––––––––––––––––––––––––––––––––––––––––*/

section.nhs{
	text-align: center;
	margin-top: 120px;
	background-color: #005eb8;
	min-height: 200px;
	padding: 30px 0;
}
.nhs p {
	margin-top: 30px;
	color: #ffffff;
}
section .nhs-grid{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-evenly;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly;
}
.nhs-grid img {
	width: 200px;
}
section .woodlarks {
	text-align: center;
	margin-top: 60px;
}


/* Contact us
––––––––––––––––––––––––––––––––––––––––––––*/

section .contact-us{
	max-width: 700px;
}
.contact-us .social {
	margin-top: 30px;
}
.contact-us .social a {
	font-size: 1.5rem;
	border-radius: 50%;
	margin: 5px;
}
.contact-us .fab {
  padding: 0.556rem;
  width: 2.722rem;
  text-align: center;
  text-decoration: none;
	border-radius: 50%;
}


/* Media Queries
––––––––––––––––––––––––––––––––––––––––––––*/

@media only screen and (min-width: 2000px) {
	/* .site-wrap {max-width: 2000px;} */
}

@media only screen and (max-width: 1050px) {
	html {font-size: 15px;}
	.nav-burger {z-index: 2;	display: block;}
	.nav-links{display:none;}
	header .header-image-content {top:30%;}
	header .header-break {display: block;}
	section .where-we-work-grid {-ms-grid-columns: auto auto;grid-template-columns: auto auto; padding: 50px 50px;}
	.section-wrap .work-for-us{padding-right: 0;}
}

@media only screen and (max-width: 800px) {
	iframe {width: 220vh;}
	header .header-image-text-small-title {margin-bottom: 70px;}
	footer .footer-flexbox {display: block;	width: 100%;}
	footer .nav-icon {margin: auto; text-align: center; padding-bottom: 20px;}
	footer img {margin: auto;}
	footer .social {margin-top:20px;}
	section .what-we-offer-grid {-ms-grid-columns: auto;grid-template-columns: auto;}
	/* section .what-we-offer-item {margin: 10px 0px; } */
	section .where-we-work-grid {-ms-grid-columns: auto auto;grid-template-columns: auto auto; padding: 50px 20px;}
	section .what-we-offer-grid {-ms-grid-columns: auto;grid-template-columns: auto;}
	section .who-we-are-grid {-ms-grid-columns: auto ;grid-template-columns: auto;}
	section .page-break {height: 800px;}
	section .page-break-text {top: 15%;}
	section .grid-whatwedo{-ms-grid-columns: auto;grid-template-columns: auto;}
	.section-wrap {padding-left: 30px;padding-right: 30px;padding-top: 20px;}
	/* .header-images-display{
		display: block;
	}
	.fullwidth-video  {
		display: none;
} */
}
@media only screen and (max-height: 800px) {
	iframe {width: 320vh;}
}

@media only screen and (max-width: 700px) {
	body {text-align: center;}
	h1 {font-size: 4rem;}
	header .header-image-text-title {line-height: 4.2em;}
	header .header-image-content {top:25%;}
	header .header-image-content-small {left: 0; right: 0;}
	header .header-image-text-small-title {margin-bottom: 50px;text-align: center;}
	header .leader-desktop {display: none;}
	.header-image-text-small-title h1 {font-size: 3.5rem;text-align: center;}
	h2 {font-size: 2.8rem; margin-bottom: 0;}

	header .header-image {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
		        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
	}
	header .header-image-small {min-height: 250px;max-height: 450px;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
		        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
	}
	header .header-image-mid {min-height: 250px;max-height: 450px;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
		        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
	}
	section .page-break {
		-webkit-clip-path: polygon(0 75px, 100% 0, 100% calc(100% - 75px), 0 100%);
		        clip-path: polygon(0 75px, 100% 0, 100% calc(100% - 75px), 0 100%);
	}

	.bg-darkgrey {
		margin-top: -1px;
		-webkit-clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 75px), 0 100%);
		        clip-path: polygon(0 0px, 100% 0, 100% calc(100% - 75px), 0 100%);
	}

	.bullet-point {display: inherit; list-style-type: none;list-style-position: none;padding-left: 0;text-indent: 0;}
	.what-we-do button{	margin-left: 0;	}

	.testimonials-header h1 {font-size: 3.2rem;line-height: 3.5rem;margin-bottom: 0;}
	.testimonials-header h3 {font-weight: 500;}
	.header-image.testimonials-header {height: 65vh;	min-height: 500px;}
	.header-image-content.testimonials-header{top: 33%;}

	.testimonial h5 {font-size: 1.5rem;}

	section .where-we-work-grid {-ms-grid-columns: auto;grid-template-columns: auto; padding: 50px 50px;}

	.section-wrap {padding-left: 20px;padding-right: 20px;padding-top: 10px;}
	.break-container {padding-bottom: 30px;}
	section .noble-ramy-grid {-ms-grid-columns: auto;grid-template-columns: auto;}
	section .meet-the-crew-grid {-ms-grid-columns: auto;grid-template-columns: auto;}
	section .page-break-text {top: 12%;}
	section .where-we-work-grid {padding: 30px 0;}
	section .where-item {padding: 10px 15px;}

	.nhs-grid img {width: 130px;}

	section .contact-us {
		margin-bottom: 40px;
	}

}