/** ----------------------------------------------------------
 *
 * 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 <email@silverstripe.com>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */

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

	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 { 
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/* 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: #fff;
	    padding: 40px 0 60px;
	    min-height: 300px;
	}
	.inner {
	    max-width: 1400px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {

	    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;
	}

.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-in-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* State triggered when the block is visible in the viewport */
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mobImage{display:none;}
/* HEADER */
.header {
    background: #fff;
}
	.header .inner {
	    padding-top: 45px;
	    position: relative;
	    min-height: 72px;
	}

	/* Brand */
	header .brand, header .brand:hover {
	    float: left;
	    color: #fff;
	    display: inline-block;
	}
	.headerLogoMenu{display:grid; grid-template-columns: 280px auto; margin-bottom:30px;}
	.headerLogoMenu	img{max-width:240px;}

	/* 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 */
		}

		.headerBottomBorder{width:100%; line-height:0}
		.headerBottomBorder img{width:100%;}
		.headerContact{width:100%; text-align:right; margin-bottom:30px;}
		.headerContact h4{font-weight:600; font-size:32px; line-height:32px; color:#009ba7;}
/* NAVIGATION */

	/* Primary navigation */
	.header .inner .unit {
		position: relative; /* used to position the main navigation */
	}
	.header .primary ul {
		position:relative;
		float:right;
		margin-right:-20px;
		padding-bottom:8px;
		
		
	}
	.header .primary li {
	    display:inline-block;
	    margin: 0 5px;
	    position: relative;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}
	.header .primary li.last {
	 
	    margin: 0 0 0 5px;
	    position: relative;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}	
	.header .primary li a {
	    color: #009ca7;
	    font-size: 1.125rem;
		text-transform:uppercase;
		font-family: "Montserrat", sans-serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
	    padding: 6px 8px;
	    display: block;
	}

	.header .primary li a:hover {
	    color: #000;
	}
	.header .primary li.section a,
	.header .primary li.current a {
	    color: #009ba7;
	}
	.header .primary #coolMenu li.submenu:after {
	    content: ''; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: block;
		width:38px;
		height:8px;
		background:url('../images/arrow-grey-down.png');
		background-size: contain;
		background-repeat:no-repeat;
	    position: absolute;
	    left: 50%;
	    margin-left: -19px;
	    bottom: -7px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 30px;
	    color: #fff;
	    text-align: center;
	    line-height: 20px;
	}
	#SubCool{display:none;}
	#coolMenu li:hover ul {  
			transition-delay: 2s; 
			 -webkit-transition-delay: 2s; 	
			display: block; 
	} 
#coolMenu ul {     
		position: absolute;
		top:30px;
		left:0;
		width:auto;
		display: none; 
		z-index: 9999;
		float:none;
		} 
	
		#coolMenu ul li a {  
			color:#fff;
			padding: 10px;
			background-color:#58595B;
			font-size:0.8rem;

			} 	
	#coolMenu li.submenu { transition: all 0s ease; }
	#coolMenu li.submenu:after {
	    content: ''; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    
	}		

	#coolMenu li ul li { 
		display: block; 
		line-height:0.75rem;
		text-decoration: none; 
		border-bottom:solid 1px #ffffff80;
		text-align:left;
		list-style: none;
		margin-right:0;
		float:none;
		min-width:250px;
		} 
		#coolMenu ul li:after {
	    content: ''; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: none;
		background: url('');
		
	}		

	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */
	.tablet-nav .brand p {
	    margin-bottom: 0;
	}
	.tablet-nav .header .inner {
	    padding-top: 20px;
	}
	.tablet-nav .header .primary ul {
	    float: left;
	    clear: both;
	    position: relative;
	    margin: 20px 0 0 -13px;
	    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%;
	}

	/* Secondary navigation */
	.main .secondary h3 {
	    font-size: 20px;
	    color: #AAA;
	    margin: 0 0 8px 0;
	    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
	    font-weight: normal;
	}
	.main .secondary {
	    border-bottom: 1px solid #e5e5e5;
	}
		.main .secondary ul {
		    padding: 0;
		    margin: 0;
		}
		.main .secondary li {
		    border-top: 1px solid #e5e5e5;
		    position: relative;
		    list-style-type: none;
		    margin-bottom: 0;
		}
			.main .secondary li .arrow {
			    color: #b80000;
			    padding-right: 5px;
			    display: block;
			    font-size: 15px;
			    line-height: 20px;
			    position: absolute;
			    left: 2px;
			    top: 7px;
			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			}
		.main .secondary li a:hover .arrow {
		    left: 6px; /* this sets the final position for the arrow transition */
		}
		.main .secondary li a { /* side nav link styling */
		    padding: 10px 0;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    font-size: 11px;
		    color: #333;
		    line-height: 17px;
		    border-bottom: none;
		    font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
		}
		.main .secondary li .text {
		    padding-left: 28px;
		    display: block;
		}
		.main .secondary li.current a.current {
			color: #b80000;
			background-color: #EDEDED;
		}
		.main .secondary li.section,
		.main .secondary li.current {
		    background-color: #F3F3F3;
		}
			.main .secondary li.section a,
			.main .secondary li.current a {
			    color: #000;
			}


		/* Secondary navigation 2-5 levels deep */
		.main .secondary ul ul {
			display: none;
		}
		.secondary ul li.current ul,
		.secondary ul li.section ul { /* Only show child pages from selected parent */
			display: block;
		}
		.secondary li.current ul ul {
			display: none;
		}
		.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
			.main .secondary ul ul li a .arrow { left: 12px; }
			.main .secondary ul ul li a:hover .arrow { left: 16px; }

		.main .secondary ul ul ul li a { padding-left: 20px; }
			.main .secondary ul ul ul li a .arrow { left: 22px; }
			.main .secondary ul ul ul li a:hover .arrow { left: 26px; }

		.main .secondary ul ul ul ul li a { padding-left: 30px; }
			.main .secondary ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
			.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary li a:hover,
		.main .secondary li.section a:hover,
		.main .secondary li.current a:hover {
			color: #b80000;
		}
.grid-3 { display: grid; max-width: 1300px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); justify-content: space-evenly; padding: 0px; gap: 20px; width: 100%;
}
.grid-3 img{max-width:100%;}

	.playpause-button {
		border: 0px;
		box-sizing: border-box;
		transition: .5s all ease;
		cursor: pointer;
		background: #E46018;
		width: 56px;
		height: 56px;
		margin-right:1rem;
	}
	.playpause-button:after {
		background: #fefefe !important;
		display: block;
		width: 45%;
		height: 45%;
		transition: clip-path 0.25s,  transform 0s;
		clip-path: polygon(15% 15%, 15% 85%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%);
		margin: 0px auto;
		content: "";
	}
	.playpause-button[data-state="play"]:after { 
		clip-path: polygon(15% 15%, 15% 85%, 30% 85%, 30% 15%, 70% 15%, 85% 15%, 85% 85%, 70% 85%, 70% 15%);
	}
	.playpause-button:hover {
		background:#db5b15;
	} 
	.playpause-button.buffer {
		background:silver;
	}
	.playpause-button.buffer:after {
		transition: clip-path 0.25s, background 0.5s, transform 20s;
		clip-path: polygon(74% 0, 100% 0, 100% 100%, 74% 100%, 74% 0, 65% 49%, 0 100%, 0 0, 65% 49%);
		transform: rotate(3600deg);
	}


/* IMAGE SLIDER */
.imageSlider{width:100%; position:relative;}
.imageSlider .carousel-item img.image-fluid{width:100%; }
.imageSlider .videoEmbed{}
.imageSlider .videoEmbed{width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* (9 / 16) * 100 */
  position: relative; background-size:cover; background-repeat:no-repeat;}
.imageSlider.gallery{background-color:#6d6e70;}
.imageSlider .videoEmbed iframe{position: absolute;
  top: 0;
  left: 0;
  width: 100%!Important;
  height: 100%;
  z-index:4;}
  .carousel-caption.video{ z-index:5; width:100%; left:0; right:0; bottom:0; padding:40px 60px; }
   .carousel-caption.video .captionText{width:65%; max-width:600px; margin:0 auto;	} 
  .carousel-caption img.speechMark{width:86px;position:absolute; top:-18px}
  .carousel-caption.video:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background-color:#009ca750;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: skew(-35deg);
  -ms-transform: skew(-35deg);
  transform: skew(-35deg);
  z-index: -1;
}
.carousel-caption .proudlyNZ{position:absolute; right:30px; top:20px;}
.carousel-caption .proudlyNZ img{width:120px; height:auto;}
  .carousel-caption.videogallery{ z-index:5; width:100%; position:relative; padding:40px 60px;}
  .imageSlider.gallery .carousel-indicators.gallery{position:relative; padding:40px 0; margin-bottom:0;  }
  .imageSlider.gallery .carousel-indicators.gallery [data-bs-target] {width: 240px;
    height: 160px;  background-size:cover!Important; background-repeat:no-repeat; margin-right: 10px;
    margin-left: 10px}
	.VideoGalleryArrows .carousel-control-next, .VideoGalleryArrows .carousel-control-prev {
   bottom:80px;
}
  .carousel-caption.video h1{Color:#fff; font-weight:300;  margin-bottom: 0.625rem;}
/* IMAGE LAYOUT BLOCK */
.imageLayoutBlock{display:grid; grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); line-height:0;}
.imageLayoutBlock img{width:100%;}
/* DIAGRAM SLIDER LAYOUT */
.DiagramCarousel{background:#fff;}
.DiagramCarousel .carousel-item img.w-100{width:100%;}
.DiagramCarousel .carousel-item{display:grid; grid-template-columns: 2fr 1fr; grid-gap:0;}
.DiagramCarousel .carousel-item .carousel-caption {background-color:#e7e7e8; position:relative; left:0; right:0; bottom:0;} 
.DiagramCarousel .carousel-item .carousel-caption .captionTextDiagram{text-align:left; padding:30px 10px;}
.DiagramCarousel .carousel-item .carousel-caption .captionTextDiagram h2, .DiagramCarousel .carousel-item .carousel-caption .captionTextDiagram h4{color:#19a3ae; text-transform:none;}
.captionTextDiagram p, .captionTextDiagram li	{color:#343434;}
/* ELEMENTAL BLOCKS */
h2.content-element__title {text-transform:uppercase;}
.content-element__content{padding:40px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;    box-sizing: border-box;}
.BluePatterned{background:#009ca7 url('../images/pattern-airvac-method1-full.gif'); color:#fff!Important;  background-position:bottom; background-repeat:repeat-x;}
.GreyPatterned{background:#6d6e70 url('../images/pattern-alliance-method2-tile.gif') repeat-x;  background-position:bottom;}
.LightGreyPatterned{background:#f8f8f8 url('../images/pattern-alliance-method2-tile.jpg') repeat-x; background-position:bottom;}
.Grey{background:#383838}
.content-element__content.BluePatterned h1, .content-element__content.BluePatterned h2, .content-element__content.BluePatterned h3, .content-element__content.BluePatterned h4, .content-element__content.BluePatterned h5, .content-element__content.Blue h1, .content-element__content.Blue h2, .content-element__content.Blue h3, .content-element__content.Blue h4, .content-element__content.Blue h5, .content-element__content.Grey h1, .content-element__content.Grey h2, .content-element__content.Grey h3, .content-element__content.Grey h4, .content-element__content.Grey h5, .content-element__content.Grey p{color:#fff;} 
.content-element__content.Blue{background:#009ca7}
.content-element__content.GreyPatterned{}  
.content-element__content.Grey{background:#383838}
.content-element__content.LightGreyPatterned{}  
.content-element__content.LIghtGrey{}
/* KEY ADVANTAGES LAYOUT */
.content-container .keyAdvantages { display: grid; grid-template-columns: 65% 29%; color:#fff; padding: 0px;  max-width:1200px; margin:30px auto; row-gap:30px;
}
.content-container .keyAdvantages.left { display: grid; grid-template-columns: 29% 65%; column-gap:2%; color:#fff; padding: 0px; max-width:1200px; margin:30px auto; position:relative;
}
.content-container.keyAdvantagesOutter, .content-container.hydroicons{padding:60px 20px;}
.content-container .keyAdvantages .brochurelayoutImg{padding:0 30px;}
.content-container .keyAdvantages .brochurelayoutImg img{width:100%;}
.content-container .keyAdvantages .brochurelayoutTxt{text-align:left; padding:0 30px; justify-self:center; color:#383838; }
.BluePatterned .keyAdvantages .brochurelayoutTxt p, .BluePatterned .keyAdvantages .brochurelayoutTxt li, .BluePatterned .keyAdvantages .brochurelayoutTxt h1, .BluePatterned .keyAdvantages .brochurelayoutTxt h2, .BluePatterned .keyAdvantages .brochurelayoutTxt h3, .BluePatterned .keyAdvantages .brochurelayoutTxt h4, .GreyPatterned .keyAdvantages .brochurelayoutTxt p, .GreyPatterned .keyAdvantages .brochurelayoutTxt li, .GreyPatterned .keyAdvantages .brochurelayoutTxt h1, .GreyPatterned .keyAdvantages .brochurelayoutTxt h2, .GreyPatterned .keyAdvantages .brochurelayoutTxt h3, .GreyPatterned .keyAdvantages .brochurelayoutTxt h4, .GreyPatterned h2{color:#fff!Important;}
/* BROCHURE LAYOUT */
.content-container.brochurelayout { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); background-color:#866d4e; color:#fff; padding: 0px;
}
.content-container.brochurelayout.left { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));  background-color:#87916F; color:#fff; padding: 0px;
}
.content-container.brochurelayout .brochurelayoutImg{padding:0; background-size:cover; min-height:400px;}
.content-container.brochurelayout .brochurelayoutTxt{text-align:left; padding:60px 30px; max-width:600px; justify-self:center; }
.textcontentblock-images {position:relative; background-color:#F1F1F2; padding:0;}
.textcontentblock-images .hiddenBlocks{}
.buttonlink a.readmore, .buttonlink a.readless{color:#fff; text-transform:uppercase; font-size:1.125rem; font-weight:900; }
.buttonlink a.readmore:hover, .buttonlink a.readless:hover{text-decoration:none; }
.textBlockwithImg{position:relative; display:grid; width:100%; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); clear:both; background-color:#6d6e70 } 



.textBlockwithImg.ImgRight{ direction: rtl;}
.textBlockwithImg .textBlockImg{line-height:0; background-size:cover; min-height:400px;background-repeat:no-repeat}
.textBlockwithImg .textBlockImg img{max-width:100%;}
.textBlockImgText{padding:30px;}
.ImgRight .textBlockImgText{text-align:right;}
.ImgLeft .textBlockImgText{text-align:left;}
.textBlockImgText h1, .textBlockImgText h2, .textBlockImgText h3, .textBlockImgText h4, .textBlockImgText h5, .textBlockImgText p, .textBlockImgText li{color:#fff;}
.gridLayoutImgBlocks{position:relative; display:grid; grid-template-columns: 30% 30% 30%; justify-content: space-between; border-top:solid 1px #866d4e; margin:60px 0; padding:60px 0; clear:both; }

.gridLayoutImgBlocks .textBlockwithImg.Grid{display:block; word-wrap: break-word; text-align:center;}
.gridLayoutImgBlocks .textBlockwithImg.Grid h2{font-size:1.2em;}
.gridLayoutImgBlocks .textBlockwithImg.Grid img{max-width:100%;}
.textBlockImg img{width:100%;  }
.textBlockMedia {text-align:center; width:100%; background:#ccc;}
.textBlockText{width:100%; }
/* HYDRO ICONS LAYOUT */

.hydroPhotoGrid{display: grid; max-width: 960px; margin: 30px auto; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); justify-content: space-evenly; padding: 0px; gap: 20px; width: 100%;}
.LayoutimageBlock.staggering{opacity: 0;}
.hydroPhotoGrid .LayoutimageBlock.is-visible.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-duration: 2s;
	-webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    -ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease; 
}
.hydroPhotoGrid .LayoutimageBlock.fade-in:hover {
	animation-timing-function: ease-all;
	animation-duration: 2s;
	-webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    -ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease; 
	transform:scale(1.1)
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.hydroPhotoGrid .LayoutimageBlock img{width:100%;}
/* APPLICATIONS LAYOUT */
.applicationlayout{padding:60px 0;}
.applicationlayout .grid-3{padding:30px 0; row-gap:60px;}
.applicationBlock iframe{width:100%;}
.applicationBlock .applicationVideo{padding-bottom:20px;}
.applicationBlock .modal-header{border-bottom:0; margin:0 auto;}
.applicationBlock .modal-header .close, .applicationBlock .modal-header h4{display:inline-block; color:#fff;}
.applicationBlock .modal-header h4{margin-right:20px;font-size:1.6rem; line-height:1.6rem}
.applicationBlock .introText h4.titleLink{cursor: pointer}
.applicationBlock .applicationThumbnail{background-size:cover; width:100%; aspect-ratio: 16 / 9; display:grid; align-items: center; justify-items: center;}

.applicationBlock{text-align:left; position:relative;}

.applicationBlock .introText{padding:20px 0; color:#fff; min-height:250px; padding-bottom:40px}
.applicationBlock .playButton{padding:20px 0; position:absolute; bottom:0}
.applicationBlock .playButton .btn-primary{color: #fff;
    background-color: transparent;
    border-color: transparent; text-transform:uppercase; font-weight:600;}
.videomodel .modal-content{background-position:bottom; background-repeat:no-repeat; background-color:#009ca7; }
.play-btn {
  width: 60px;
  height: 60px;
  background-color: #009ca780;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Triangle Play Icon */
.play-btn::after {
  content: "";
  display: inline-block;
  /* Shift slightly to the right for optical centering */
  transform: translateX(2px); 
  border-style: solid;
  /* Top, right, bottom, left borders */
  border-width: 12px 0 12px 20px; 
  border-color: transparent transparent transparent #ffffff;
}

/* Hover Effect */
.play-btn:hover {
  background-color: #009ca7;
  transform: scale(1.05);
}
.applicationBlock h4.modal-title{text-align:center; font-weight:600;}
/* TESTIMONIALS */
.dynamic__elements__elements__elementtestimonials{
background:url('../images/pic-bkgr-treetexture.jpg'); padding:60px 0; color:#fff; position:relative;
}
.Testimonials img.speechMarkTop {
    width: 86px;
    position: absolute;
    top: -18px;
}
.Testimonials img.speechMarkBottom {
    width: 86px;
    position: absolute;
    bottom: -18px;
}
.dynamic__elements__elements__elementtestimonials .inner{padding:60px;}
.dynamic__elements__elements__elementtestimonials h1,.dynamic__elements__elements__elementtestimonials h2,.dynamic__elements__elements__elementtestimonials h3,.dynamic__elements__elements__elementtestimonials h4,.dynamic__elements__elements__elementtestimonials h5,.dynamic__elements__elements__elementtestimonials p{
color:#fff;
}
.dynamic__elements__elements__elementtestimonials .carousel-inner{padding:20px 60px;}
.dynamic__elements__elements__elementtestimonials .carousel-inner .carousel-control-prev{left:-50px;}
.dynamic__elements__elements__elementtestimonials .carousel-inner .carousel-control-next{right:-50px;}
.dynamic__elements__elements__elementtestimonials .blockquote-footer{color:#fff; font-weight:600; padding-top:30px;}
.dynamic__elements__elements__elementtestimonials .blockquote-footer .testimonialName{text-transform:uppercase;}
.dynamic__elements__elements__elementtestimonials .blockquote-footer::before{content:"";}
/* MAP LAYOUT */
.locationBlockOutter{padding:60px 30px; background-position:bottom; background-repeat:repeat-x;}
.locationBlock{padding:60px 30px;}
.locationTextBlock{position:relative; display:grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
row-gap:30px;} 

#map {
    height: 400px;
	max-width:100%;	
}
.areaMapText{position:relative; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); row-gap:30px;}
.locationTextBlock {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    row-gap: 30px;
	
}
.areaMapText h3{text-transform:uppercase;font-weight:600}
.areaMapText p{line-height:1.4rem}
/* CONTACT FORM */
.Form.element{background: #f8f8f8 url(../images/pattern-alliance-method2-tile.jpg) repeat-x; background-position: bottom; padding:60px 0;}
.Form.element .form-element__form{max-width:600px; margin:0 auto;}
.Form.element .form-element__form .half.left.field{width:49%; display:inline-block; margin-bottom:0;}
.Form.element .form-element__form .half.right.field{width:49%; display:inline-block; margin-bottom:0;  }
.Form.element .form-element__form .half.field .text {font-weight:400; text-transform:uppercase; text-align:left;}
.Form.element .userform .left{margin-bottom:0;}
.Form.element form input.text, .Form.element form textarea, .Form.element form .textajaxuniquetext, .Form.element form select {
    width: 100%;
    max-width: 600px;
    padding: 6px 5px;
    font-size: 15px;
    background-color: #fff;
    border: 1px solid #dad9d9;
}
.Form.element .btn-toolbar {
    justify-content: center;
}
.Form.element .btn-toolbar input[type="submit"]{padding:6px 24px;}
/* 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 { }
.footer a.brand:hover {  }
body h1 span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
    font-style: italic;
}


/* FOOTER */
.footer {
    color: #fff;
    background: #19a3ae;
    padding: 60px 0;
    font-size: 11px;
    line-height: 22px;
}
.footer .umbrellaBrands{display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin:0 auto; justify-content: center; gap:20px; padding-bottom:30px; border-bottom:solid 1px #fff; margin-bottom:30px; row-gap:30px;}
.footer .footerCopyRight{padding:30px 0; position:relative; display:grid; grid-template-columns: 140px, minmax(150px, 1fr) repeat(auto-fit, minmax(60%, 1fr)) 140px, minmax(150px, 1fr) ;}
.footer .footerCopyRight p{margin-top:30px;}
.footer .proudlyNZFooter{ }
.footer .proudlyNZFooter img{width:120px;  }
.footer .footerTel h2{font-size:2rem; line-height:2rem; color:#fff}
.footer .footerTel{font-size:2rem; line-height:2rem; color:#fff; padding-right:20px;}
.footer .footerEmail{padding-left:20px; }
.footer .footerEmail img{width:30px;}
.footer .umbrellaBrands img{max-width:100%;}


	.footer .primary,
	.footer ul {
	    display: flex;
		justify-content: center;
		align-items: flex-start;
	    margin: 0;
	    padding: 0;
	}
		.footer li {
		    display: inline-block;
			font-size:1.3rem;
			line-height:1.5rem;
			text-transform:uppercase;
			font-weight:600;
			text-align:left;
			padding:10px 15px;
			color:#fff;
			position:relative;
			top:0;
			
		}
			.footer li a {color:#fff;	
		}
		.footer li ul {
		    display: block;
			margin-top:15px;
		}
				.footer li ul li {
		    display: block;
			font-size:1rem;
			line-height:1rem;
			text-transform:none;
			font-weight:300;
			padding:5px 0 5px 0;
			text-align:left;
			color:#fff;
		}
			.footer li ul li a{
		    
			padding:5px;
			
		}
	.ie6 .footer li,
	.ie7 .footer li { /* this is a bugfix for ie6/7 */
	    display: inline;
	    zoom: 1;
	    margin-right: 10px;
	}

	.footer li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}

	.footer .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}

/* 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 button{
			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;
	}
	.header .primary ul {
	    margin-left: -12px;
	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
	}
	.DiagramCarousel .carousel-item{display:grid; grid-template-columns: 1fr; grid-gap:0;}
	.content-container .keyAdvantages.left, .content-container .keyAdvantages { grid-template-columns: repeat( auto-fill, minmax(420px, 1fr)); text-align:center;}
	.content-container .keyAdvantages img{max-width:420px; }
 .imageSlider.gallery .carousel-indicators.gallery [data-bs-target] {width: 120px;
    height: 80px;  background-size:cover!Important; }
}

/* 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;
	}
	#media-query-trigger {
	    visibility: visible;
	}

	/* Navigation*/

	.tablet-nav .header .brand {
	    float: none;
	    display: inline-block;
	    margin-left: 22px;
	    margin-bottom: 22px;
	}
	
	
	.tablet-nav .header {
	    padding: 0;
	}
		.tablet-nav .header .inner {
		    padding: 20px;
		    min-height: 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: 20px;
		    top: -40px;
		    display: block;
		    cursor: pointer;
		    font-family: 'WebSymbolsRegular';
		    font-size: 20px;
		    color: #000;
          
            margin-top: 0;
            padding: 0;
		}
		.headerLogoMenu{display:block; }
		.headerMenu{width:100%; position:relative;}
		#coolMenu {
		    z-index: 10;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: none;
			width:100%;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
			top:0;
		}
			#coolMenu ul{
		    z-index: 10;
		    position: relative;
			top:0;
			margin:0;
			padding-bottom:0;
		  
		}
			#coolMenu li ul li {
		    text-align:center;
			border-bottom: solid 1px fff;
		  
		}
		#coolMenu li ul li a{
		    background-color:#f8f8f8;
			color:#009ba7;
		  
		}
		
		.header .primary #coolMenu li.submenu:after {
    content: '';
    display: none;
   
}
			#coolMenu li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
				border-bottom:solid 1px #ccc;
		
			}
			.header .primary li a {
    color: #009ca7;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;

}
		.headerContact h4{font-weight:600; font-size:24px; line-height:24px; color:#009ba7;   -webkit-appearance: none;}
		.Form.element .form-element__form .half.left.field{width:100%; display:inline-block; margin-bottom:0;}
.Form.element .form-element__form .half.right.field{width:100%; display:inline-block; margin-bottom:0;  }
	.mobImage{display:block; max-width:100%;}
	.textBlockwithImg .textBlockImg {min-height: auto;}
	.textBlockwithImg { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
	    .content-container .keyAdvantages.left, .content-container .keyAdvantages {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));         }
.hydroPhotoGrid{grid-template-columns: repeat(auto-fill, minmax(100px, 100px)); }		
	.imageLayoutBlock {

    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}
    #footercoolMenu {display:none;}

	 .imageSlider.gallery .carousel-indicators.gallery [data-bs-target] {width: 60px;
    height: 40px;  background-size:cover!Important; }
	.locationBlock.inner {padding:0;}
	.locationTextBlock.inner {padding:0;}
	.areaMapText{display:block; margin-top:30px;}

	/* 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 */
	.main {
	    padding: 20px 0 45px; /* decrease padding so that more content can fit on screen */
	}
	
		.typography h1 { /* decrease size of page heading due to smaller screen */
		
		}
		.typography p {
				    
		}
	p.intro {	}
	.main .inner {	}
	/* 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;
	}
}