/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Your Name <charlie@whamdesign.co.nz>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/
html {scroll-behavior: smooth;}
.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow:hidden;
	*overflow:visible;
	*zoom:1;
	padding:0 10px;
}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	padding:0 10px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
	padding and border are NOT added onto the width - they are included in the width,
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}

.inc { /* unit - Base class which divides a line into sections (columns). */

	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
	padding and border are NOT added onto the width - they are included in the width,
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}

.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}

/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space.
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */



/* MAIN LAYOUT */
body {
    margin: 0;
    background: #fff;
    min-width: 240px;
    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}
	.main {
	    background: #94c83d;

	    min-height: 300px;
	}
	.HomePage .main {
	    background: #94c83d;

	}	
	.inner {
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {
	    float: left;
	    width:100%; /* makes content container full width when there is no sidebar */
	}
	.sidebar { /* this is the sidebar element */
	    margin-top: 12px;
	}
	.no-sidebar .sidebar {
		display: none;
	}
.clearAll{clear:both;}

/* Animations start here  */

/* FADE IN  */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }


/* FADE IN DOWN */

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }

/* FADE IN UP */

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }

/* FADE IN UP BIG */

@keyframes fadeInUpBig {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }

/* FADE IN LEFT */

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0)rotateZ(30deg); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }

/* FADE IN LEFT BIG */

@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeftBig { animation-name: fadeInLeftBig; }

/* FADE IN RIGHT */

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(30%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }

@-webkit-keyframes kenBurns-object-position {
    0% {
        transform: scale(1.2);
        object-position: left top;
    }
    100% {
        transform: scale(1.0);
        object-position: center;
    }
}
@-webkit-keyframes kenBurns-tranform {
    0% {
        transform: scale(1.2) translate(-50px,0px);
    }
    100% {
        transform: scale(1.0) translate(0px,0px);
    }
}

/* @end standaard animaties  */

.fadeinLeft.in-view {  
   animation: fadeInLeftBig;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
.fadeIn.in-view {  
   animation: fadeIn;
    animation-duration: 2s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
.fadeinRight.in-view {  
   animation: fadeInRight;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
.fadeinUp.in-view {  
   animation: fadeInUpBig;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
.fadeInDown.in-view { 
   animation: fadeInDown;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}
/* HEADER */
@keyframes headermovement {
  0% {
    background-size: 100% 100%;
	filter: grayscale(0) ;

  }
  100% {
    background-size: 110% 110%;
	filter: grayscale(0.6) ;

	
	
  }
}

.headerTopBanner{background-color:#3e4a54; padding:10px 0;}
.headerTopBanner .inner{z-index:9999;}
.headerTopBanner .typography p{color:#fff; margin-bottom:0; font-size:14px; line-height:14px;}
.headerImageWrap{overflow:hidden; background-color:#00a0dd;}
.headerMainImage{height:50vw; background-size: 110% 110%;  filter: grayscale(0.6); z-index:9;
  background-position: center center; animation: headermovement 5s; display:grid; align-self:center; align-items: center; }

 .headerMainContent:after {  background: inherit; bottom: 0; content: ''; display: block; height: 100%; left: 0;  position: absolute;
  right: 0;
  transform: skewY(-4deg);
  transform-origin: 100%;
  z-index: -1;}`							
  
 .headerImageInner{max-width:1000px; margin: 0 auto; display:grid; justify-items: center; align-items: center; padding:30px; position:relative;}
 .headerImageContent{text-align:Center; opacity:1; max-width:1000px; width:80%; margin:0 auto; }
  .headerImageContent img.headerGraphic.plus{width:100px;}
  .headerImageContent h1, .headerImageContent h2, .headerImageContent h3{color:#fff;}
    .headerImageContent h1{text-transform:uppercase; color:#fff;}
 .headerImageContent h2{font-size:48px; line-height:48px; font-weight:700; text-transform:uppercase;}
 .headerImageContent h3{font-size:22px; line-height:24px; font-weight:500}
 .headerMainContent{position:relative;  padding:10px 0 10px 0; z-index:9998; width:100%;background-color:#fff; min-height:100px }
 .header .headerdetails{z-index:9999;}
 .header .staticLogo{position:absolute; top:20px; z-index:99;}
 .tablet-nav .header .staticLogo{position:absolute; top:20px; z-index:99;}
 .tablet-nav .header .staticLogo .statLogo{width:164px!Important; height:126px!Important;}
 .header .condensedLogo{position:relative; float:left; top:15px; width:355px; height:41px; left:30px; z-index:99; display:none; }
 .tablet-nav .header .fixed .condensedLogo .conLogo,  .header .condensedLogo{top:15px; width:190px!Important; height:22px!Important;  }
 .tablet-nav .header .fixed .primary ul{clear:none;}
 .headerImageTopInner .headerImageLines{position:absolute; right:30px; top:0; bottom:0; height:50vw; width:40px; background:url('../images/graphic-3stripes-white.png'); background-size:40px;}
 .headerImageTopInner .headerImageLines img{width:40px;}
.headerImageTopInner{max-width:1200px; margin:0 auto; position:relative; z-index:99;}
.header { background: #fff;}

.header .contactNumber{width:100%; text-align:right; padding:20px 0 10px 0;}
.header .contactNumber h3{font-weight:400; font-size:24px; line-height:24px; margin:0}
.header .inner { position: relative;}
	.menuPlus{position:absolute; right:30px; top:60px;}
	.menuPlus img{width:40px;}
	/* Brand */
	header .brand, header .brand:hover {
	    float: left;
	    color: #fff;
	    display: inline-block;
	}



	/* Search form */

	.search-bar {
		position: absolute;
		right: 13px;
		top: 12px;
	}
		.search-bar .field {
			margin: 0;
			padding: 0;
		}
		.search-bar form input.text {
		    width: 155px;
		    padding: 5px 34px 5px 15px;
		    color: #888;
		    margin: 0;
		    border: none;
		    border-radius: 14px;
		    background: #fff;
		}

		.search-bar form input.action { /* positions the search button icon over the top of the search input */
		    font-size: 14px;
		    position: absolute;
		    right: 5px;
		    top: 0;
		    cursor: pointer;
		    border: none;
		    padding: 5px;
		    background: none;
		    font-family: 'WebSymbolsRegular';
		    color: #848484;
			border-radius: 0;
			margin: 0;
		}
		.search-bar form input.active,
		.search-bar form input.action:hover {
		    color: #000;
		}
		.search-bar form input:focus,
		.header textarea:focus {
		    outline: none; /* removes default browser outlining on focus */
		}
		.search-dropdown-icon {
		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
		}


.promoBoxLink{padding:0;}
.promoBoxLink h4{border:solid 3px #fff; text-transform:uppercase; padding:10px; }
.promoBoxLink p{border:solid 4px #fff; padding:10px; font-size:14px; line-height:14px; margin: 0;}
.promoBoxLink p a{color: #fff; text-transform:uppercase; font-weight:600; transition: all 0.5s;    }

.promoBoxLink:hover p{border:solid 4px #fff;background-color:#fff; color:#415464; transition: all 0.5s; }
.promoBoxLink p:hover a, .promoBoxLink:hover a{color:#415464!important; } 

.BoxLinks{padding:30px 0;}
.BoxLinks a{border:solid 4px #fff; font-size:14px; padding: 5px 20px; color:#fff; margin-right:30px; float:left; text-transform:uppercase;}
/* NAVIGATION */

	/* Primary navigation */
	.header .inner .unit {
		position: relative; /* used to position the main navigation */
	}
	.header .primary ul {
		position:relative; 
		float:right; padding-right:40px; padding-top:10px;	
	}
	.header .primary li {
	    float: left;
	    padding-bottom: 3px;
	    padding-top: 2px;		
		border-top:solid 5px #fff;
		border-bottom:solid 5px #fff;
	    margin: 0 5px;
		font-size: 15px;
		line-height:15px;
	    position: relative;
		list-style:none;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}
	.header .primary li a {
	    color: #405464;
	    font-size: 15px;
	    font-family: 'Raleway', Arial, sans-serif; 
		font-weight:700;
		text-transform:uppercase;
	    padding: 5px 20px 3px 8px;
	    font-weight: bold;
	    display: block;
		
	}
	.header .primary li:hover{
		border-top:solid 5px #94c83d;
		border-bottom:solid 5px #94c83d;
	}	
	.header .primary li a:hover {
	    color: #000;
	}
	.header .primary li.section a,
	.header .primary li.current a {
	    color: #000;
	}
	
	.mainHeaderNav.float-panel.fixed{width:100%; background-color:#fff; left:0; height:70px;}
	.tablet-nav .header .mainHeaderNav.float-panel.fixed .nav-open-button{top:15px;} 
 .mainHeaderNav.float-panel.fixed .condensedLogo {display:block;  }
	.mainHeaderNav.float-panel.fixed #coolMenu{z-index:999;}
	.headerMainContent #coolMenu li a:after	 {
	    content: '+'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: block;
	    position: absolute;
	    right: 5px;
	    top: 3px;
	    font-size: 20px;
	    color: #94c83d;
		font-weight:300;
	    text-align: center;
	
	}
		#coolMenu ul {     
		position: absolute;
		top:33px;
		left:0;
		width:auto;
		display: none; 
		z-index: 9999;
		float:none;
		padding-left:0;
		} 
		#coolMenu li:hover ul{     
		display:block;
		} 
		ul #SubCool{padding:0; margin:0;}
		ul #SubCool li a{padding:6px 10px 6px 10px; color:#fff;}
		ul #SubCool li{background-color:#808996; width:100%; margin:0; border-top:none; border-top:1px solid #808996;border-bottom:1px solid #405464;}
		ul #SubCool li:hover{background-color:#405464; border-top:1px solid #405464; }
		#coolMenu #SubCool li a:after { content: ''; display: block;  position: absolute; right: 0; top: 0; font-size: 0; color: #94c83d; font-weight: 300;
    text-align: center;
}
	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */
	.tablet-nav .brand p {
	    margin-bottom: 0;
	}
	.tablet-nav .header .inner {

	}
	.tablet-nav .header .primary ul {
	    float: right;
	    clear: both;
	    position: relative;
	    margin: 0;
	    white-space: nowrap;
	    right: auto; /* resets the right property value that is set for the desktop site */
	}
		.tablet-nav .header .primary ul li {
		    white-space: nowrap;
		}
			.tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */
			    -moz-transition: none;
			    -webkit-transition: none;
			    transition: none;
			}
	.tablet-nav .footer .right {
	    float: left;
	    width: 100%;
	}

/* FOOTER NAVIGATION */

	/* Primary navigation */
	.footerNav{}
	.menuFooterWrap{text-align:Center; width:100%; margin:0 auto;}
	.footer{}
	.footer .primary ul {
		position:relative; 
		padding-top:10px;
			
	}
	.footer .nav-open-button{display:none;}
	.footer  li {
		display:inline-block;
	   
	    padding-bottom: 5px;
	    margin: 0 5px;
		font-size: 15px;
		line-height:15px;
	    position: relative;
		list-style:none;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}
	.footer  li a {
	    color: #fff;
	    font-size: 15px;
	    font-family: 'Raleway', Arial, sans-serif; 
		font-weight:700;
		text-transform:uppercase;
	    padding: 5px 20px 3px 8px;
	    display: block;
		
	}
	.footer  li:hover{}	
	.footer  li a:hover {
	    color: #fff;
	}
	.footer li.section a,
	.footer li.current a {
	    color: #fff;
	}
	
	.headerMainContent #coolMenu li a:after	 {
	    content: '+'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: block;
	    position: absolute;
	    right: 5px;
	    top: 3px;
	    font-size: 20px;
	    color: #94c83d;
		font-weight:300;
	    text-align: center;
	
	}
		#coolMenu ul {     
		position: absolute;
		top:33px;
		left:0;
		width:auto;
		display: none; 
		z-index: 9999;
		float:none;
		padding-left:0;
		} 
		#coolMenu li:hover ul{     
		display:block;
		} 
		ul #SubCool{padding:0; margin:0;}
		ul #SubCool li a{padding:6px 10px 6px 10px; color:#fff;}
		ul #SubCool li{background-color:#808996; width:100%; margin:0; border-top:none; border-top:1px solid #808996;border-bottom:1px solid #405464;}
		ul #SubCool li:hover{background-color:#405464; border-top:1px solid #405464; }
		#coolMenu #SubCool li a:after { content: ''; display: block;  position: absolute; right: 0; top: 0; font-size: 0; color: #94c83d; font-weight: 300;
    text-align: center;
}




	.mainBoxLink{padding:30px 0; font-size:14px;}
	.mainBoxLink p{font-size:14px;  }
.mainBoxLink a{border:solid 4px #fff; padding: 5px 20px; color:#fff; font-weight:600; margin-right:30px; float:left; text-transform:uppercase; transition: all 0.5s;}
.mainBoxLink a:hover{border:solid 4px #fff;background-color:#fff; color:#415464; transition: all 0.5s; }
.mainBoxLink a:hover span{}
.contentWithImage{display:grid; grid-template-columns: 50% 50%; min-height:35vw; padding:0;}
.contentWithImage .contentImage{ background-size: cover; background-position: center center; min-height:100px; border-radius: 0 0 100px 0; }
.contentWithImage .contentText{padding:60px 40px; }
.HomePage .contentText, .HomePage .contentText h1, .HomePage .contentText h2, .HomePage .contentText h3 {color:#fff!Important;}
.HomePage .contentText h4 {color:#fff; border-bottom:4px solid #fff;}
/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after { /* clearfix */
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}
.search-bar form input.action,
.header .primary li a,
.footer a { /* adds color transition when links/inputs on hover */
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.footer a.brand { color: #333; margin-left: 0; }
.footer a.brand:hover { color: #B80000; }
body h1 span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
    font-style: italic;
}
/* PROMOBOXES */
.service.promoBoxes{padding:60px 0; background-color:#1aa269; text-align:center;}
.service.promoBoxes h2{color:#fff; font-size:32px; line-height:32px; margin-bottom:30px;}
.service.promoBoxes h3{color:#fff; font-size:30px; }
.service.promoBoxes h4, .promoBoxTitle h4{color:#fff; text-align:left; min-height:60px;}
.service.promoBoxes .promoBoxTitle{height:105px;}
.service.promoBoxes .promoBoxTitle h3{}
.service.promoBoxes .promoBoxLink{padding:20px 0;}
.service.promoBoxes .promoBoxLink h4{border:solid 3px #fff; text-transform:uppercase; padding:10px; }
.service.promoBoxes .promoBoxLink p{border:solid 3px #fff; padding:10px; font-size:14px; line-height:14px; margin: 0;}
.service.promoBoxes .promoBoxLink a p, .promoBoxLink a p {color: #fff; text-transform:uppercase; font-weight:600; text-align:center; margin:0;margin-top:0;  }
.promoBoxesWrap{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; column-gap:30px;
  row-gap: 1.5vw;}
  .promoBoxImage{position:relative; overflow:hidden;}
.promoBoxImage img{width:100%; border-radius: 0 0 30px 0; filter: grayscale(0.6); transition: all 0.2s;}
.service.promoBoxes .promoBox:hover img{width:100%; filter: grayscale(0); transition: all 0.5s; }
  .service.promoBoxes .promoBox:hover a p{background-color:#fff; color:#1aa269; transition: all 0.5s;}
  .PeoplePage .employeeWrap .promoBoxLink a p:hover, .promoBoxLink a p:hover {color:#1aa269!Important;}
.promoBoxImage:after{
   
    content: "+";
	color:#fff;
	font-size:180px;
	font-weight:900;
    display: block;
	position:absolute;
	top:5%;
	left:35%;
	transition: all 0.5s;
}
.promoBox:hover .promoBoxImage:after{
	font-size:100px;
	top:30%;
	left:40%;
	transition: all 0.5s;
}
/* POLICYPAGE */
.PolicyPage .main{background-color:#0aa069; text-align:center; color:#fff; }
.PolicyPage .main h1, .PolicyPage .main h2, .PolicyPage .main h3, .PolicyPage .main h4, .PolicyPage .main h5, .PolicyPage .main p{color:#fff;}
.policyBoxesOutterWrap	{padding:60px 0;}
.policyBoxesOutter{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; column-gap:30px;
  row-gap: 1.5vw; text-align:left;}

/* ACCREDITATIONS */
.accreditations{
		padding:60px 0; background-image:url('../images/pic-header-accreditations-colour.jpg'); background-color:#1aa269; background-size:cover;
}
.accreditationContentWrap{display:grid; grid-template-columns: 50% 50%; padding:0;}
.accreditationContentWrap .accreditationImages, .accreditationContentWrap .accreditationContent{padding:60px 0; }
.accreditationContentWrap.typography .accreditationContent, .accreditationContentWrap.typography .accreditationContent p, .accreditationContentWrap.typography .accreditationContent h2 {color:#fff!Important}
.accreditationContentWrap.typography .accreditationContent h2{}
.accreditationImages{display:grid; padding:30px; justify-items: center; align-items: center;}
.accreditationImages img{max-width:450px; width:100%;}
.accreditationBoxLink{padding:30px 0;}
.accreditationBoxLink a{border:solid 4px #fff; padding: 5px 20px; color:#fff; margin-right:30px; float:none;   }
.accreditationBoxLink p{line-height:50px;}
.AccreditationsOutterBlock{background-color:#0aa069;}
.AccreditationsOutterBlock h1, .AccreditationsOutterBlock h2, .AccreditationsOutterBlock h3, .AccreditationsOutterBlock h4, .AccreditationsOutterBlock h5, .AccreditationsOutterBlock p{color:#fff;}
.AccreditationsBlock{display: grid; grid-template-columns: 1fr 1fr; width: 100%; text-align:left;}
.AccreditationsImageBlock{background-size:cover; text-align:center; padding:40px 30px; }
.odd .AccreditationsImageBlock{border-radius: 0 0 100px 0; display:grid; justify-items: center; align-items: center;}
.AccreditationsImageBlock img{max-width:80%;}
.AccreditationsContentBlock{padding:30px;}
/* PROJECT PAGE & PROJECT SPOT LIGHT */
.projectSpotLight{
	min-height:100px; text-align:center; padding:60px 0;	background-color:#00a0dd}
.promoProjectBoxesOutter{padding:0 60px 0 40px; position: relative;}
.promoProjectBoxesWrap, .ProjectBoxesWrap{ width: auto; overflow: hidden; position: relative; display: flex; flex-direction: row;  transition:.5s ease-in-out;}
.projectSpotLight h3, .projectSpotLight h2, .projectSpotLight h4, .projectSpotLight p{color:#fff;}
.promoProjectBox{min-width:100%; width:100%; display:grid; grid-template-columns: 50% 50%; padding:0 0 30px 0; margin-right:0;}
.promoProjectBoxText{padding:0 30px; text-align:left; display:block;}
.promoProjectBoxImage{ position:relative;}
.promoProjectBoxImage img{max-width:100%; border-radius: 0 0 80px 0;}
.promoProjectBoxText .gridLine{display:grid; grid-template-columns: 1fr 2fr; padding:0; color:#fff; padding-bottom:10px; margin-bottom:10px; border-bottom:dotted 1px #fff; font-family: 'Raleway', Arial, sans-serif;}
.promoProjectBoxLink{padding:30px 0;}
.promoLink{display:inline-block; padding-bottom:20px; }
.promoProjectBoxLink a{border:solid 4px #fff; padding: 5px 20px; color:#fff; margin-right:30px; float:left;}
.promoProjectBoxText .gridLine span.title{font-weight:700;}
.promoSpotScrollRight{position:absolute; right:0;  bottom:0; top:0; display:grid; justify-items: center; align-items: center;}
.promoSpotScrollLeft{position:absolute; top:0; bottom:0; left:0; display:grid; justify-items: center; align-items: center;}
.promoSpotScrollRight img, .promoSpotScrollLeft img{width:30px;}
.projectBoxesWrap{padding:60px 0; text-align:center; color:#fff!Important;}
.projectBoxesWrap h1, .projectBoxesWrap h2, .projectBoxesWrap h3, .projectBoxesWrap h4, .projectBoxesWrap h5{color:#fff!Important;}

.multi .ProjectBoxesOutter{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; column-gap:30px;
  row-gap: 1.5vw; position:relative;}
 .projectBoxesWrap .promoBoxLink p{border:solid 4px #fff;color:#fff; text-transform:uppercase; margin-top:0px;}
.projectBoxesWrap .promoBoxLink a{padding: 5px 20px; color:#fff; }
.projectBoxesWrap{padding:60px 0; background:#00a0dd;}
.projectBoxesWrap.green {
  background-color: #94c83d;
}
.projectBoxesWrap.dgrey  {
  background-color: #405464;
}
.projectBoxesWrap.blue {
  background-color: #00a0dd;
}
.projectBoxesWrap.dgreen {
  background-color: #1aa269;
}
.projectBoxesWrap.charcoal {
  background-color: #3e4a54;
}
.projectBoxesWrap.orange {
  background-color: #e27832;
}
                      
.projectBoxesWrap.purple {
  background-color: #8b2783;
}
.projectBoxesWrap.yellow {
  background-color: #f1cb10;
}
.projectBoxesWrap.red {
  background-color: #e01e26;
}
.projectBoxesWrap.lgrey {
  background-color: #808996;
}  
.projectBoxesWrap.spot  {padding:60px 0;}
.ProjectPage .main{}
.promoProjectGallery{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;column-gap:5px;}
/* PeoplePage */
.PeoplePage .main{background:#3e4a54; color:#fff!important; position:relative;}
.PeoplePage h3, .PeoplePage h2, .PeoplePage h4, .PeoplePage p{color:#fff;}
.contentWithImage.ourpeople, .content-container.ourpeople{ background-color:#cadff4; padding-bottom:60px; }
.PeoplePage .ourpeople h3, .PeoplePage .ourpeople h2, .PeoplePage .ourpeople h4{color:#00a0dd;}
.PeoplePage .ourpeople h2{border-bottom:solid 5px #00a0dd; }
.PeoplePage .ourpeople p, .PeoplePage .ourpeople li{color:#405464;}
.PeoplePage .ourpeople .BoxLinks{color:#00a0dd; }
.PeoplePage .ourpeople .BoxLinks a{border:solid 4px #00a0dd; color:#00a0dd;}
.contentWithImage.ourpeople .contentImage {border-radius: 0;}
.employeeWrapOutter{ background-color:#cadff4; position:relative; padding:60px 0; border-top:5px solid #00a0dd; text-align:center;}
.employeeWrap{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; column-gap:30px;
  row-gap: 1.5vw; position:relative;}
  .PeoplePage .employeeWrap h3, .PeoplePage .employeeWrap h2, .PeoplePage .employeeWrap h4, .PeoplePage .employeeWrap h5, .PeoplePage .employeeWrapOutter h3{color:#00a0dd;}
  .employeeWrap h5{font-weight:700; margin-bottom:5px;}
  .employeeWrap .promoBox{text-align:left;}
 .PeoplePage .employeeWrap h4{border-bottom:solid 5px #00a0dd; }
 .PeoplePage .promoBoxImage:after { height: 0;     content: " ";}
 .PeoplePage .employeeWrap .promoBoxLink p{border:solid 4px #00a0dd; color:#00a0dd; text-align:center;}
 .PeoplePage .employeeWrap .promoBoxLink a{ color:#00a0dd;}
 .PeoplePage .memberframe{ display:none; position: absolute; top: 0; bottom: 0; text-align: center; width: 100%;   background-color: rgba(0, 0, 0, 0.6); padding-top: 20px; z-index: 9999;}
 .PeoplePage .memberframe .memberframeDetail{position:fixed; top:10px; left:10%; width:80%; margin:0 auto; padding:40px;  background-color:#bfe7f6; }
  .PeoplePage .memberframe .fullStaffDetail{display: grid; grid-template-columns: 1fr 2fr; width:100%; padding:20px;}
  .PeoplePage .memberframe .memberframeDetail .closeButton{position:absolute; top:30px; right:30px;}
  .PeoplePage .memberframe .memberframeDetail .closeButton p{font-size:18px; line-height:20px; font-family: 'Raleway', Arial, sans-serif; color:#00a0dd;}
  .PeoplePage .memberframe .memberframeDetail .closeButton p span{font-size:60px; line-height:60px; font-weight:700;}
  .PeoplePage .memberframe .fullStaffDetail .StaffRightDetail{padding:0 10px 0 30px;}
  .PeoplePage .memberframe .fullStaffDetail .StaffRightDetail h3{font-size:18px; line-height:24px; margin-bottom:20px;}
  .PeoplePage .memberframe .fullStaffDetail .StaffLeftDetail h4{margin-top:20px; border-bottom:none; text-transform:uppercase; font-size:18px; line-height:18px; padding-bottom:0; margin-bottom:20px;}
  .PeoplePage .memberframe .fullStaffDetail .StaffRightDetail, .PeoplePage .memberframe .fullStaffDetail .StaffLeftDetail{text-align:left;}
  .PeoplePage .memberframe .fullStaffBox h1, .PeoplePage .memberframe .fullStaffBox h2, .PeoplePage .memberframe .fullStaffBox h3, .PeoplePage .memberframe .fullStaffBox h4, .PeoplePage .memberframe .fullStaffBox h5{color:#00a0dd;}
  .PeoplePage .memberframe .promoBoxTitle{text-align:left;}
  .PeoplePage .memberframe .promoBoxTitle h5{font-weight:700; margin-bottom:5px;}
  .PeoplePage .memberframe .fullStaffBox p, .PeoplePage .memberframe .fullStaffBox li{color:#405464;}
  .PeoplePage .memberframe .fullStaffBox h4{border-bottom:solid 5px #00a0dd; }
  .PeoplePage .contentWithImage.ourpeople .BoxLinks a:hover, .PeoplePage .employeeWrap .promoBoxLink p:hover{background-color:#00a0dd; color:#fff;}
  .PeoplePage .employeeWrap .promoBoxLink p:hover a{color:#fff!Important;}
  
[class^="item"]{
  text-decoration: none;
  margin-right: 20px;
  background: transparent;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  &:last-child {
    margin-right: 0;
  }
}
.item-1 {
  height: 80px;
  .inner {
    display: block;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    &:before {
      content: "";
      position: absolute;
      height: 2px;
      width: 60px;
      background-color: #00a0dd;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -45%) rotate(-45deg);
      transition: ease-out .2s all;
    }
    &:after {
      content: "";
      position: absolute;
      height: 2px;
      width: 60px;
      background-color: #00a0dd;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      transition: ease-out .2s all;
    }
  }
  .label {
    color: #00a0dd;
    opacity: 0;
    transition: all .2s ease-out;
  }
  &:hover,
  &:focus {
    .inner {
      &:before {
        transform: translate(-50%, 0%) rotate(0);
        top: 25%;
      }
      &:after {
        transform: translate(-50%, 0%) rotate(0);
        top: 75%;
      }
    }
    .label {
      opacity: 1;
    }
  }
}  
  
  
/* FleetPage */
.FleetPage .main{background:#415464;}
.FleetPage .main, .FleetPage .main h1, .FleetPage .main h2{color:#fff!Important;}
.FleetPage .fleetWrap{background:#00a0dd; padding:60px 0;}
.FleetPage .fleetVehicleBox.first, .FleetPage .fleetVehicleBox.live.first{padding-top:0; border-top:none; }
.FleetPage .fleetVehicleBox.live{display:grid; grid-template-columns: repeat(2, 1fr); padding-bottom:30px; padding-top:30px; border-top:none; }
.FleetPage .fleetVehicleBox{display:grid; grid-template-columns: repeat(1, 1fr); padding-bottom:0px; padding-top:30px; border-top:solid 3px #cadff4;}
.FleetPage .fleetVehicleBox .fleetVehicleDetail{display:block; transform: scaleY(0); transform-origin: top; overflow:hidden; transition: transform 0s ease; position:absolute;}
.FleetPage .fleetVehicleBox.live .fleetVehicleDetail{display:block; transform: scaleY(1); transition: transform 0.5s ease; position:relative; }
.FleetPage .fleetVehicleBox .fleetImage{display:none;}
.FleetPage .fleetVehicleBox.live .fleetImage{display:block;}
.FleetPage .fleetVehicleBox .fleetImage img{max-width:100%;}
.FleetPage .fleetVehicleBox .fleetVehicleContent{color:#fff!Important; padding-left:30px; padding-right:0;}
.FleetPage .fleetVehicleBox.live .fleetVehicleContent{color:#fff!Important;  padding-right:30px;}
.FleetPage .fleetVehicleBox .fleetVehicleContent h2, .FleetPage .fleetVehicleBox .fleetVehicleContent h3{color:#fff;}
.FleetPage .fleetVehicleBox .fleetVehicleContent h3{border-bottom:none; padding-bottom:10px; font-weight:900; padding-left:30px; position:relative;}
.FleetPage .fleetVehicleBox.live .fleetVehicleContent h3{border-bottom:dotted 1px #fff; padding-bottom:10px; font-weight:900; padding-left:30px; position:relative;}
.FleetPage .fleetVehicleBox .fleetVehicleContent h3 a, .FleetPage .fleetVehicleBox .fleetVehicleContent h3 a{color:#fff;}
.FleetPage .fleetVehicleBox.live .fleetVehicleContent h3:after {  content: '-'; display: block; position: absolute; left: 5px; top: 0px; font-size: 40px; color: #fff; font-weight: 500;}
.FleetPage .fleetVehicleBox .fleetVehicleContent h3:after {  content: '+'; display: block; position: absolute; left: 5px; top: 0px; font-size: 40px; color: #fff; font-weight: 500;}
.FleetPage .fleetVehicleBox .fleetVehicleDetail{}
.FleetPage table{ border:none;}
.FleetPage table td{padding:10px; border:none; font-family: 'Raleway', Arial, sans-serif; font-size:16px; line-height:24px}
.FleetPage table tr:nth-child(even) {  background-color: #cadff4; color:#00a0dd;
}

/* ServicePage */
.serviceBlock{display:grid; grid-template-columns: 50% 50%; padding:0; background-color:#00a0dd; width:100%;}
.serviceBlock .contentServiceImage{line-height:0;}
.serviceBlock .contentServiceImage img{  width:100%; border-radius: 0 0 100px 0; }
.serviceBlock.even .contentServiceImage img{ border-radius: 0; }
.serviceBlock .contentServiceText{padding:60px 40px; color:#fff!Important }
.contentServiceText h1, .contentServiceText h2, .contentServiceText h3, .contentServiceText h4{color:#fff!Important }
.serviceBlock .promoProjectBoxLink a{text-transform:uppercase;}
.serviceBlock .completeserviceDescription{transform: scaleY(0); position:absolute; transition: all 0.1s ease;}
.serviceBlock.expand .completeserviceDescription{  transform: scaleY(1); position:relative; transition: all 0.5s ease;}
.serviceBlock.expand .serviceDescription{display:none}
.serviceBlock.expand span.seemore, .serviceBlock span.seeless{display:none;}
.serviceBlock span.seemore, .serviceBlock.expand span.seeless{display:inline-block;}
.serviceBlock .serviceDescription{display:inline-block;}
.serviceWrap{position:relative; width:100%; padding:0;}
.serviceBlock.green {
  background-color: #94c83d;
}
.serviceBlock.dgrey {
  background-color: #405464;
}
.serviceBlock.blue {
  background-color: #00a0dd;
}
.serviceBlock.dgreen {
  background-color: #1aa269;
}
.serviceBlock.charcoal {
  background-color: #3e4a54;
}
.serviceBlock.orange {
  background-color: #e27832;
}
                      
.serviceBlock.purple {
  background-color: #8b2783;
}
.serviceBlock.yellow {
  background-color: #f1cb10;
}
.serviceBlock.red {
  background-color: #e01e26;
}
.serviceBlock.lgrey {
  background-color: #808996;
}                         

/* FORM */
.contactForm:after {
    background: inherit;
    top: 0;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(-4deg);
    transform-origin: 100%;
    z-index: -1;
}
.contactForm{padding:60px 0; background:#00a0dd url('../images/pic-footer-home-blues.jpg')}
.contactForm .typography h1, .contactForm .typography h2, .contactForm .typography h3, .contactForm .typography h4, .contactForm .typography h5, .contactForm .typography p{color:#fff; text-align:center;}
.contactForm .typography h2{padding-bottom:0; border-bottom:none; font-size:42px;}
.contactForm .typography h3{font-size:20px;}
.contactForm .inner{width:800px; max-width:100%;}

.contactForm .successMessage{padding:30px; margin:20px 0; background-color:#fff; }
.contactForm .successMessage p{color:#00a0dd; }
.CareersPage .main{background-color:#bfe7f6; padding:60px 0 0 0;}
.CareersPage .main .pageForm h1, .CareersPage .main .pageForm h2, .CareersPage .main .pageForm h3, .CareersPage .main .pageForm h4, .CareersPage .main .pageForm h4, .CareersPage .main .pageForm p{color:#00a0dd!important}

.pageForm{padding:30px 0 60px 0; margin-top:30px; background-color:#bfe7f6;  color:#28639a; }
.successMessage{padding:30px; margin:30px 0; border:solid 1px #00a0dd; text-align:center;}
.pageForm label.left, .contactForm label.left{display:none;}
.pageForm form{max-width:800px; margin:0 auto; }
form fieldset{width:100%;}
form .field.text.my-details.leftf{width:49.5%; display:inline-block; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; position:relative; padding-right:4px; font-family: 'Raleway', Arial, sans-serif!Important; padding-right:4px;}
form .field.text.my-details.rightf{width:49.5%;padding-left:4px; display:inline-block; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; position:relative; font-family: 'Raleway', Arial, sans-serif!Important;}
form input, form .textarea{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-family: 'Raleway', Arial, sans-serif!Important;}
form h2.formheader{margin:30px 0; color:#28639a; padding-bottom:5px; border-bottom:solid 1px #28639a; text-transform:uppercase;}
h2.formheader{margin:30px 0; color:#28639a; padding-bottom:5px; border-bottom:solid 1px #28639a; text-transform:uppercase;}
form {font-size:16px;}
form .formContent{width:100%; clear:both;}
form .display-logic-display.formAdditional{ font-size:16px;}
form .formtextCont{font-size:18px; }
form .action{}
/* FOOTER */
.footer {
    color: #fff;
    background: #405464;
    padding: 20px 0;
    font-size: 11px;
    line-height: 22px;
}
.footer img.footerLogoImg{
	max-width:150px;
	
}
	.footer a {
	    color: #fff;
	}
	.footer a:hover {
	    color: #fff;
	}
	.footer .left {
	    float: left;
	    color: #000;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer .right {
	    float: right;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer span {
	    padding: 0 3px;
	    color: #bbb;
	}
	.footer .primary,
	.footer .primary ul {
	    display: inline;
	    margin: 0;
	    padding: 0;
	}
		.footer .primary li {
		    display: inline;
		}
		.footer .footerAddress{text-align:center;}
		.footer .footerAddress p{font-size:13px; line-height:13px; margin-bottom:10px;}
	.ie6 .footer .primary li,
	.ie7 .footer .primary li { /* this is a bugfix for ie6/7 */
	    display: inline;
	    zoom: 1;
	    margin-right: 10px;
	}
	.footer .primary li:after { /* adds '/' to separate the footer navigation items */
	    padding: 0 3px 0 5px;
	    content: '/';
	    color: #999;
	}
	.footer .primary li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}
	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #b80000;
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}
	.footer .inner{position:relative;}
	.footer .logowrap{position:absolute; left: 30px; width:100px;}
	.footer .logowrap img{width:100%;}
	.footer .footerNav{display:block; text-align:center; padding:0 120px;}
/* PAGE SPECIFIC LAYOUT */

	/* Homepage */
		/* currently no Hompage specific styles - feel free to add your own */

	/* Search Results */
	.typography .searchResults h1 {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.searchResults p.searchQuery {
	    margin-bottom: 10px;
	    font-size: 15px;
	    font-weight: bold;
	}
	.searchResults ul#SearchResults {
	    padding: 0;
	    border-bottom: 1px solid #e5e5e5;
	    margin:0;
	}
		.searchResults ul#SearchResults li {
		    border-top: 1px solid #e5e5e5;
		    padding: 20px 0;
		    list-style-type: none;
		}
		.searchResults ul#SearchResults p {
		    margin-bottom: 10px;
		}
		.searchResults #PageNumbers a {
		    padding: 0 5px;
		}
		.searchResults #PageNumbers .pagination {
		   	border-bottom: 1px solid #e5e5e5;
		    padding: 20px 0;
		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
		    width:100%;
		}
		.searchResults #PageNumbers .pagination span{
			display:table-cell; /* each element in the pagination div displays as a table cell */
		}
		.searchResults #PageNumbers p {
		    text-align: center;
		    padding:20px 0;
		}
		.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
		    font-size: 14px;
		    padding: 0 20px;
		    display:table-cell; /* each element in the pagination div displays as a table cell */
		    vertical-align: middle;
		    border-bottom:0 !important;
		}
		.searchResults #PageNumbers .next {
		    margin-left: 15px;
		}
		.searchResults #PageNumbers .prev {
		    margin-right: 15px;
		}

/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */
}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries)
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}

/* BREAKPOINT 960px */

@media only screen and (max-width: 960px) {
	.content img {
	    max-width: 97%;
	    height: auto;
	}

		#media-query-trigger {
	    visibility: visible;
	}
	.tablet-nav .header .staticLogo {top:0;}
	.tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
		z-index: 100;
	    width: 20px;
		height: 20px;
		position: absolute;
		right: 40px;
		top: 30px;
		display: block;
		cursor: pointer;
		font-family: 'WebSymbolsRegular';
		font-size: 20px;
		color: #405464;
		}
		.tablet-nav .header .contactNumber, .tablet-nav .header .menuPlus{display:none;}
		
	.tablet-nav .header {
	    padding: 0px;
	}
		.tablet-nav .header .inner {
		    padding: 0 20px 0 20px;
		    min-height: 0;
		}

		.tablet-nav .header .primary ul {
		    z-index: 9999;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: none;
			top:60px;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
		}
			.tablet-nav .header .primary ul li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			    text-shadow: 0;
				border-top:0;
				border-bottom:0;
			}
			.tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */
			    content: '';
			    display: block;
			    position: absolute;
			    right: 20px;
			    top: 0px;
			    font-family: 'WebSymbolsRegular';
			    font-size: 14px;
			    color: #999;
			    text-align: center;
			    vertical-align: middle;
			    line-height: 38px;
			}
			.tablet-nav .header .primary ul li a,
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
			    padding: 10px 0 10px 22px;
			    font-weight: bold;
			    border-bottom: 1px solid #bbb;
			    color: #434343;
			    background: #e7e7e7;
			}
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a {
				background: #CCCCCC; /* makes background on current top level page slightly darker */
			}
			.tablet-nav .header .primary ul li a:hover {
			    color: inherit;
			}
			.tablet-nav .header .primary li.section:after,
			.tablet-nav .header .primary li.current:after {
			    display: none; /* hides the link arrow on current top level page */
			}
			.tablet-nav .tablet-nav .header nav.primary ul li {
				padding: 0;
			}	
			#coolMenu ul {position:relative; top:0;}	
			#coolMenu #SubCool li a {padding: 10px 0 10px 22px;
				font-weight: bold;
				border-top:0;
				border-bottom:0;
				color: #434343;
				background: #e7e7e7; }
				.headerMainImage{padding-top:100px;}
				.headerImageContent{margin:0 auto;}
.headerImageContent img.headerGraphic.plus { width: 50px;}
.headerImageContent h1 {font-size:36px; line-height:36px;}				
		.contentWithImage{display:grid; grid-template-columns: 40% 60%; min-height:35vw; padding:0;}
		.contentWithImage.ourpeople{display:grid; grid-template-columns: 60% 40%; min-height:35vw; padding:0;}
		.accreditationContentWrap, .serviceBlock{display:grid; grid-template-columns: 100%; direction: rtl; min-height:35vw; padding:0; text-align:center;}
		.accreditationImages, .serviceBlock .contentServiceImage{ order:2; }
		.serviceBlock .contentServiceImage{ }
		.promoProjectBox{display:grid; grid-template-columns: 100%; min-height:35vw; padding:30px;}
		.promoProjectBox .promoProjectBoxImage{ order:1; }
		.promoProjectBox .promoProjectBoxText{padding-bottom:30px;}
		.promoBoxesWrap { grid-template-columns: 1fr 1fr;}
		.FleetPage .fleetVehicleBox, .FleetPage .fleetVehicleBox.live { grid-template-columns: 1fr;}
		.employeeWrap, .policyBoxesOutter, .multi .ProjectBoxesOutter  { grid-template-columns: 1fr 1fr;}
		.AccreditationsBlock{ grid-template-columns: 100%; min-height:35vw; padding:30px;}
		.AccreditationsBlock.odd{ grid-template-columns: 100%; min-height:35vw; padding:30px;}
		.AccreditationsBlock.odd .AccreditationsImageBlock{ grid-template-columns: 100%; min-height:35vw; padding:30px; order:2; }		
}
/* BREAKPOINT 720px */

@media only screen and (max-width: 720px) {
	.headerImageContent img.headerGraphic.plus { width: 40px;}
	.headerImageContent h1 {font-size:32px; line-height:32px;}		
}

/* BREAKPOINT 640px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
	body {
	    max-width: 640px;
	}
.headerImageContent{display:none;}
	.contentWithImage, .contentWithImage.ourpeople{display:grid; grid-template-columns: 100%; min-height:35vw; padding:0; text-align:center;}
	.contentWithImage .contentImage{ min-height:80vw; order:2; }
		.promoBoxesWrap, .promoBoxesWrap { grid-template-columns: 1fr;}
		.promoProjectBoxText, .promoProjectBox{padding:0 10px;}
		.promoProjectGallery{padding:30px 0; grid-template-columns: 1fr 1fr 1fr;}
		.promoProjectGallery img{max-width:100%;}
	.employeeWrap, .multi .ProjectBoxesOutter, .policyBoxesOutter { grid-template-columns: 1fr; text-align:center;}
	.ProjectBoxesOutter{position:relative;}
form .field.text.my-details.leftf, form .field.text.my-details.rightf {
    width: 100%;

}	.PeoplePage .memberframe .memberframeDetail .closeButton{position:relative; left:0; padding-bottom:20px; width:50px;}
.PeoplePage .memberframe .memberframeDetail .closeButton .inner{padding:0;}
 .PeoplePage .memberframe .memberframeDetail{position:fixed; top:10px; bottom:10px; overflow-y:auto;left:2%; width:92%; margin:0 auto; padding:40px 20px;  background-color:#bfe7f6; }
 .PeoplePage .memberframe .fullStaffDetail{display:grid; grid-template-columns:100%; padding:0; height:100%; overflow:auto;}
 .PeoplePage .memberframe .fullStaffDetail .StaffRightDetail{padding:0;}
.promoLink{width:100%;}
.promoLink p a{width:100%; -moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; display:block;}
	.accreditationBoxLink a{margin-right:0}
	/* Navigation*/

	.tablet-nav .header .brand {
	    float: none;
	    display: inline-block;
	    margin-left: 22px;
	    margin-bottom: 22px;
	}
		.brand h1 {
		    font-size: 40px;
		}
		.brand h1 {
		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
		}


	/* Search Form */
	.search-bar { /* adds new styling to mobile search bar */
	    width: 100%;
	    position: relative;
	    top: 0;
	    right: 0;
	    display: none; /* hides searchbar initially */
	    padding: 20px 0;
	    margin: 0;
	    background-color: #E7E7E7;
	}
	.search-dropdown-icon { /* styling for search toggle button */
	    display: block;
	    cursor: pointer;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: 60px;
	    top: 34px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 20px;
	    color: #ededed;
	    text-align: center;
	    line-height: 20px;
	}
	.search-bar form {
	    margin: 0;
	    width: 100%;
	}
		.search-bar form fieldset {
		    padding: 0 18px;
		    left: 0;
		    right: 0;
		    position: relative;
		}
	.search-bar div.field {
	    margin-bottom: 0;
	}
	.search-bar form input.text {
	    width: 89%; /* makes search input full width - allowing for space either side */
	    max-width: 89%;
	    padding: 8px 10% 8px 1%;
	    text-indent: 15px;
	    position: relative;
	    display: block;
	    right: 0;
	    left: 0;
	    border: 1px solid #e5e5e5;
	    background: #fff;
	    font-size: 17px;
	    border-radius: 20px; /* increase border radius due to increased padding */
	}
	.search-bar form input.action {
	    right: 5%;
	    top: 2px;
	    font-size: 18px;
	}

	/* Main Content */

	.content-container,
	.sidebar {
	    width: 100%; /* sidenav is now shown above the page content */
	    margin-bottom: 30px;
	}
		.typography h1 { /* decrease size of page heading due to smaller screen */
		    font-size: 30px;
			line-height:35px;
		    margin-bottom: 15px;
		    padding-bottom: 10px;
		}
		.typography p {
		    font-size: 16px;
		    line-height: 26px;
		}
	p.intro {
	    font-size: 19px;
	    line-height: 27px;
	}
	.main .inner {
	    padding: 0 30px;
	}
	/* Secondry Nav */
	.secondary li a {
	    line-height: 24px;
	}
	.secondary li .arrow {
	    line-height: 26px;
	}
	/* Footer */
	.footer .right {
	    float: left;
	    width: 100%;
	}
}

/* Print Styles */

/* Based on HTML5 boilerplate print styles */
@media print {
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Simple theme custom print styles */
	.header,
	.footer,
    .nav-open-button,
    .search-bar,
    .search-dropdown-icon,
    nav.primary {
	    display: none;
	}
}