*, *:before, *:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}  
html {
	font-family: aptos, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
}
b,
strong {
	font-weight: 700;
}
code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono",
		Menlo, monospace;
	font-size: 1em;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

thead th {
	border-bottom: 2px solid #666;
}
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
	-webkit-appearance: button;
}
legend {
	padding: 0;
}
progress {
	vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}
::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}
summary {
	display: list-item;
}

img {height: auto;}
address {font-style: normal;}

/* ================================
   COLOUR VARS 
   ================================ */

:root {
	--green: #1f6f56;
	--green-grad: linear-gradient(205deg, rgba(31, 111, 86, 1) 0%, rgba(11, 78, 63, 1) 100%);
	--green-grad-vert: linear-gradient(180deg, rgba(31, 111, 86, 1) 0%, rgba(23, 94, 72, 1) 100%);
	--green-light: #9bc7b8;
	--blue-grad: linear-gradient(205deg, rgba(0, 64, 112, 1) 0%, rgba(0, 58, 101, 1) 100%);
	--blue: #004070;
	--white: #fff;
	--text: #333;
	--grey: #f5f5f5;
	--box-shadow: 0 0 20px rgba(0,0,0,.05);
	--max-width: 1300px;
}

/* ============================================
   LAYOUT BASE
=============================================== */

.col-100p {
	width: 100%;
	clear: both;
}

.col-50p {
	width: 50%;
}

.col-48p {
	width: 48%;
}

.col-33p {
	width: 33%;
}

.col-31p {
	width: calc((100% - 60px) / 3);
}

.page-wrap {
	width: 100%;
	clear: both;
	overflow: hidden;
}

.max-width {
	width: 100%;
	max-width: var(--max-width);
	margin-right: auto;
	margin-left: auto;
	padding-left:30px;
	padding-right:30px;
}

.row-cont {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.footer-cont {
	background: var(--green);
	background: var(--green-grad-vert);
	padding: 40px 30px;
	color: var(--white);
	text-align: center;
	font-size: 1rem;
}

	.footer-inner a,
	.footer-inner a:visited {
		color: var(--white);
	}
	
	.footer-logo {
		margin-bottom: 30px;
		max-width: 250px;
	}
	
	.footer-mid {
		padding-left: 30px;
		padding-right:30px;
		width: 60%;
		margin: 0 auto;
	}

	.footer-left,
	.footer-right {
		border: solid 1px var(--white);
		width: 20%;
		padding: 30px;
		margin-bottom: 30px;
		text-align: center;
	}
	
@media (max-width: 700px) {
		
		.col-31p {
			width: calc((100% - 30px) / 2)
		}
		
		.footer-mid,
		.footer-left,
		.footer-right,
		.footer-inner {
			width: 100%;
			padding:0;
		}
		
		
		
		
			
	}
		
@media (max-width: 480px) {
		
		.col-31p {
			width: 100%;
		}
		
			
	}
		

/* ================================
	SOCIAL ICONS FLOATING
================================ */

.floating-socials {
	position: fixed;
	top: 20%;
	right:0;
}
	
	.floating-socials ul {
		margin: 0;
		padding:0;
		list-style: none;
	}
		
		.floating-socials ul li {
		padding:10px;
		float: left;
		clear: both;
		transition: transform .2s ease;
		}
		
		.floating-socials ul li:hover {
			transform: scale(1.04);
		}
	
		.social-green {
			background: var(--green);
		}
		
		.social-blue {
			background: var(--blue);
		}
		
		.floating-socials img {
			float: left;
		}
		
		
/* ================================
	Circle BG
================================ */

body:after {
	content: '';
	display: block;
	position: fixed;
	transform: translateX(-50%);
	top: 10%;
	width: 60%;
	height: 100%;
	background: url(/images/site/logo-opsydia-circle.svg) no-repeat top center;
	background-size: 100% auto;
	z-index: -1;
}
			
/* ================================
	HEADER AND MENU
================================ */
			
.header-cont {
	padding: 0 0 20px 20px;
	display: flow-root;
	position: relative;
	transition: background .5s ease;
}

	.header-logo {
		float: left;
	}
	
		.site-logo {
			max-width: 180px;
			margin-top:30px;
		}

	.header-menu {
		float: right;
		position: relative;
		z-index: 1;
	}
	
	@media (max-width: 767px) {	
		
		.header-cont {
			padding: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.site-logo {
			max-width: 180px;
			margin-top: 0;
		}
		
		.header-menu {
			display: flex;
			
		}
		
	}
	
	body.nav-open .header-cont {
		background: var(--green);
	}
	
	body.nav-open .site-logo,
	body.nav-open .mobile-menu-toggle span {
	  filter: brightness(0) invert(1);
	}
	
	

	
	/*
	.main-menu {
		margin:0;
		padding:0;
		list-style: none;
		display: flex;
		flex-direction: row;
		font-size: 1.2rem;
	}
	
	.main-menu li {
		
	}
	
		.main-menu li a {
			padding: 30px 20px 10px 20px;
			display: block;
			border-right: solid 1px var(--green-light);
			color: var(--text);
			font-weight: normal;
		}
	
		.main-menu > li:last-of-type a {
			border-right: 0;
		}
		
		.main-menu > li > a:hover {
			background: var(--green);
			color: var(--white);
			text-decoration: none;
		}
		
	#}
	
	
	

/* ================================
   STYLES BASE
   ================================ */

body {
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--text);
	margin: 0;
	scroll-behavior: smooth;
}

h1,h2,h3,h4 {
	font-family: aptos-display, sans-serif;
	font-weight: 700;
	font-style: normal;
	margin: 0 0 20px 0;
}

h1 {
	display: block;
	width: 100%;
	font-size: 2.4rem;
	line-height: 1;
}

h2,
h3,
h4 {
	display: block;
	width: 100%;
}

h2 {
	font-size: 2rem;
	line-height: 1.1;
}

h3 {
	font-size: 1.6rem;
	line-height: 1.3;
}

h4 {
	font-size: 1.4rem;
	line-height: 0.95;
}

p {
	margin: 0 0 20px 0;
	clear: both;
}

a,
p a {
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--green);
	text-decoration: none;
}

.icon-inline {
	display: inline-block;
	margin-right: 15px;
}

ul, ol {
	margin:0 0 30px 0;
	padding: 0 0 0 30px;
	list-style-position: outside;
	
}


/* CTA Buttons */
.link-text {
	display: inline-block;
	position: relative;
	color: inherit;
	font-size: 1.5rem;
	line-height: 120%;
	text-decoration: underline;
	margin: 20px 0;
}

	.link-text:after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		margin-left:6px;
		transition: all .2s ease;
		background-color: currentColor; /* <-- inherits the computed link colour */
		-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m480.3 128h32v288h-64v-178.7l-265.4 265.4-22.6 22.6-45.3-45.3 22.6-22.6 265.4-265.4h-178.7v-64z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m480.3 128h32v288h-64v-178.7l-265.4 265.4-22.6 22.6-45.3-45.3 22.6-22.6 265.4-265.4h-178.7v-64z'/%3E%3C/svg%3E") no-repeat center / contain;
	}
	
	.link-text:hover {
		text-decoration-style: dashed;
	}
	
	.link-text:hover:after {
		margin-left:10px;
	}
		
.text-center {
	text-align: center;
}

.has-bg-color {
	padding: 30px;
	box-shadow: var(--box-shadow);
	border-radius: 2px;
}

.bg-Green {
	background-color: var(--green);
	background: var(--green-grad);
}

.bg-White {
	background-color: var(--white);
}

.bg-Grey {
	background-color: var(--grey);
}

.bg-Green {
	background-color: var(--green);
}

.bg-Blue {
	background-color: var(--blue);
}

.bg-Green *,
.bg-Blue * {
	color: var(--white) !important;
}


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

 .main-nav-cont {
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	width: 100%;
	float: left;
	text-align: center;
}

	.main-nav {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		font-size: 1.2rem;
		line-height: 1.7rem;
	}			
	
		.main-nav li {
			padding:0;
			list-style: none none;
			display: inline-block;
			margin: 0;
			position:relative;
		}
	
			.main-nav > li > a {
				border-left: solid 1px var(--green-light);
				padding: 44px 30px 15px 30px;
				display: block;
				width: 100%;
				color: var(--text);
				position: relative;
				font-weight: normal;
			}
		
			.main-nav > li:first-of-type > a {
				border-left: 0;
			}
			
				/* keep top level coloured when sub nav is open*/
				.main-nav > li:hover,
				.main-nav > li:hover > a {
					background-color: var(--green);
				}
				
				.main-nav > li:hover > a {
					color: var(--white);
				}
				
				/* hover changes*/
				.main-nav > li > a:hover,
				.main-nav > li.active > a {
					background: var(--green);
					background: var(--green-grad-vert);
					color: var(--white);
					text-decoration: none;
				}
		
			.main-nav a:hover {
				text-decoration: none;
			}
							
			.main-nav > li > ul {
			 /*min-width: max-content;*/
			 min-width: 320px;
			  display:none;
			  position:absolute;
			  left:0;
			  background:var(--white);
			  box-shadow: var(--box-shadow);
			  float:left;
			  padding: 15px;
			  width: 100%;
			}
			
			.main-nav li li {
				width:100%;
				margin: 0 0 10px 0;
				text-align: left;
			}
			
			ul.submenu li {
				position: relative;
				padding-left: 25px;
			}
						
			ul.submenu li:before {
			  content: "";
			  position: absolute;
			  left: 0;
			  top: 15px;
			  width: 15px;
			  height: 19px;
			  transform: translateY(-50%);
			
			  background-color: currentColor; /* bullet matches text */
			  -webkit-mask: url("../images/icons/bullet-circle.svg") no-repeat center / contain;
			  mask: url("../images/icons/bullet-circle.svg") no-repeat center / contain;
			  transition: all .2s ease;
			}
			
			ul.submenu li:hover::before {
			  transform: translateY(-50%);
			}
			
			ul.submenu li li:before {
			  top: 16px;
			  width: 15px;
			  height: 15px;
			  transform: translateY(-50%);
			
			  background-color: currentColor; /* bullet matches text */
			  -webkit-mask: url("../images/icons/bullet-circle-light.svg") no-repeat center / contain;
			  mask: url("../images/icons/bullet-circle-light.svg") no-repeat center / contain;
			  transition: all .2s ease;
			}
			
			ul.submenu  li:hover:before {
			  left: 2px;
			  transform: translateY(-50%);
			}
			
			
				.main-nav ul li a {
					font-weight: normal;
					color: var(--text);
				}
				
				.main-nav ul li a:hover {
					color: var(--green);
					text-decoration: underline;
				}
				
				.main-nav ul li:hover {
					color: var(--green);
				}
			
			.main-nav li:hover ul,
			.main-nav li a:hover ul  {
			  display:block;
			}
			
			.tieredMenu {
				margin:10px 0 0 0;
				padding: 0;
			}
			
			/* Animation */
			@-webkit-keyframes slideInLeft {
				from {
					opacity: 0;
					-webkit-transform: translateX(-20px);
							transform: translateX(-20px);
				}
				to {
					opacity: 1;
					-webkit-transform: translateX(0);
							transform: translateX(0);
				}
			}
			@keyframes slideInLeft {
				from {
					opacity: 0;
					-webkit-transform: translateX(-20px);
							transform: translateX(-20px);
				}
				to {
					opacity: 1;
					-webkit-transform: translateX(0);
							transform: translateX(0);
				}
			}
			
				@media (min-width: 768px) {	
				
							.main-nav li:hover ul li {
								-webkit-animation: slideInLeft 0.3s ease forwards;
										animation: slideInLeft 0.3s ease forwards;
								opacity: 0;
							}
							
							.main-nav li:hover ul li:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
							.main-nav li:hover ul li:nth-child(2) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
							.main-nav li:hover ul li:nth-child(3) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
							.main-nav li:hover ul li:nth-child(4) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
							.main-nav li:hover ul li:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
					
				}
			
				.mobile-menu-toggle {
					display: none;
				}
				
			.main-nav .mobile-show {
					display: none;
				}
				
@media (max-width: 767px) {	
	
	.main-nav .mobile-show {
		display: block;
	}

	
	/* === Mobile hamburger === */
	.mobile-menu-toggle {
		display: block;
		background: none;
		border: none;
		cursor: pointer;
	}
	
		.mobile-menu-toggle span {
			display: block;
			width: 35px;
			height: 3px;
			margin: 5px 0;
			background: var(--green);
			-webkit-transform-origin: center;
				-ms-transform-origin: center;
					transform-origin: center;
			opacity: 1;
			-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
			transition: opacity .2s ease, -webkit-transform .3s ease;
			-o-transition: transform .3s ease, opacity .2s ease;
			transition: transform .3s ease, opacity .2s ease;
			transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
		}
	
		.mobile-menu-toggle.open > :last-child {
			opacity: 0;
		}
		
		.mobile-menu-toggle.open span {
			-webkit-transform: rotate(45deg) translateY(-5px);
				-ms-transform: rotate(45deg) translateY(-5px);
					transform: rotate(45deg) translateY(-5px);
		}
		
		.mobile-menu-toggle.open > :first-child {
			-webkit-transform: rotate(-45deg) translateY(5px);
				-ms-transform: rotate(-45deg) translateY(5px);
					transform: rotate(-45deg) translateY(5px);
		}
		
		
		
	.main-nav-cont {
		width: 100%;
		background: var(--green);
		position: fixed;
		top: 95px;
		right: -200%;
		height: 100%;
		padding: 30px !important;
		opacity: 0;
		-webkit-transition: right .1s ease, opacity 1s ease;
		-o-transition: right .1s ease, opacity 1s ease;
		transition: right .1s ease, opacity 1s ease;
	}
		
	.main-nav-cont.open {
		right: 0;
		opacity: 1;
	}
		
	.main-nav {
		display: block;
	}
	
	.main-nav li {
		margin: 0;
		text-align: left;
		clear: both;
		padding: 0;
		float: left;
		width: 100%;
	}
		
		.main-nav li.has-children > a {
			width: calc(100% - 52px);
			float: left;
		}
	
			.main-nav > li.has-children >span {
				content:'';
				
				background-color: #fff; 
				-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m480.3 128h32v288h-64v-178.7l-265.4 265.4-22.6 22.6-45.3-45.3 22.6-22.6 265.4-265.4h-178.7v-64z'/%3E%3C/svg%3E") no-repeat center / contain;
				mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m480.3 128h32v288h-64v-178.7l-265.4 265.4-22.6 22.6-45.3-45.3 22.6-22.6 265.4-265.4h-178.7v-64z'/%3E%3C/svg%3E") no-repeat center / contain;
				
				position: relative;
				display: block;
				float: right;
				width:25px;
				height:25px;
				cursor: pointer;
				
				-webkit-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
					transform: rotate(90deg);
				
				-webkit-transition: -webkit-transform .3s ease;
				transition: -webkit-transform .3s ease;
				-o-transition: transform .3s ease;
				transition: transform .3s ease;
				transition: transform .3s ease, -webkit-transform .3s ease;
			}
		
			.main-nav > li.has-children >span.open {
				-webkit-transform: rotate(0);
					-ms-transform: rotate(0);
						transform: rotate(0)
			}
		
		.main-nav li a,
			.main-nav ul li a {
				padding: 0 0 15px 0;
				color: #fff;
				border:0;
			}
			
		.main-nav li a:hover,
		.main-nav ul li a:hover {
				color: #fff;
				text-decoration: underline;
			}
		
		ul.submenu li li:before,
		ul.submenu li:before {
			background-color: white;
		}
		
		.main-nav li ul.submenu {
			display: none;
			position: relative;
			background: none;
			margin:0 0 20px 0;
			padding: 0;
			min-width: unset;
			box-shadow: unset;
		}
		
		.main-nav li ul.submenu.open {
			display: block;
		}
				
		ul.submenu li,
		.main-nav-cont.open ul li {
			-webkit-animation: slideInLeft 0.3s ease forwards;
					animation: slideInLeft 0.3s ease forwards;
			opacity: 0;
		}
		
		ul.submenu.open li:nth-child(1),
		.main-nav-cont.open ul li:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
		ul.submenu.open li:nth-child(2),
		.main-nav-cont.open ul li:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
		ul.submenu.open li:nth-child(3),
		.main-nav-cont.open ul li:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
		ul.submenu.open li:nth-child(4),
		.main-nav-cont.open ul li:nth-child(4) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
		ul.submenu.open li:nth-child(5),
		.main-nav-cont.open ul li:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
		ul.submenu.open li:nth-child(6),
		.main-nav-cont.open ul li:nth-child(6) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
	
	
}
	
				



	
/* ==========================================================================================
   LAYOUTS 
============================================================================================ */

.hero-banner {
	position: relative;
	z-index: 0;
	height: 560px;
	float: left;
	background-color: #000;
}

.has-video {
	height: 650px;
}

	.hero-media {
		width: 100%;
		height: 100%;
		position: relative;
		z-index:0;
		float: left;
		overflow: hidden;
	} 
	
		.hero-media img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
		
		/* Wrapper */
		.hero-video {
		  position: absolute;
		  inset: 0;
		  
		}
		
		/* FORCE COVER */
		.hero-video iframe {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  pointer-events: none;
		
		  /* key bit */
		  min-width: 100%;
		  min-height: 100%;
		
		  width: 177.77vh;   /* 16:9 landscape */
		  height: 56.25vw;
		
		  transform: translate(-50%, -50%);
		  border: 0;
		  z-index:0;
		}
				
		.video-controls {
			position: absolute;
			left: 50px;
			top: 100px;
			display: block;
			width:100px;
			z-index: 1;
		}		
		
		.video-controls button[type="button"] {
			margin: 4px !important;
			padding:0 !important;
			border-radius: 100% !important;
			background: var(--green);
			clear: unset !important;
			width: 40px !important; height: 40px !important;
			transition: background 0.2s ease, transform 0.2s ease;
		}
		
		.video-controls img {
			width: 100%;
			height:auto;
		}
		
		/*#videoToggle,
		#videoMute {
		  position: absolute;
		  z-index: 5;
		  bottom: 20px;
		  width: 44px;
		  height: 44px;
		  border-radius: 50%;
		  border: 0;
		  background: rgba(0, 0, 0, 0.55);
		  color: #fff;
		  font-size: 18px;
		  cursor: pointer;
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  transition: background 0.2s ease, transform 0.2s ease;
		}
		*/
		
		/*#videoToggle { left: 20px; }
		#videoMute   { left: 74px; }
		*/
		
		#videoToggle:hover,
		#videoMute:hover {
		  background: rgba(0, 0, 0, 0.75);
		  transform: scale(1.05);
		}
		
		#videoToggle:disabled,
		#videoMute:disabled {
		  opacity: 0.4;
		  cursor: default;
		}
		
	/*
	.hero-content {
			z-index: 1;
			position: absolute;
			bottom: 0; left: 50%;
			transform: translateX(-50%) translateY(calc(100% - 30px));
			width: 100%;
			max-width: var(--max-width);
			color: var(--white);
			clear: both;
			overflow: hidden;
		}
	*/
		
	.hero-content {
			transform: translateY(-30px);
			max-width: var(--max-width);
			color: var(--white);
			margin: 0 auto;
			clear: both;
			overflow: hidden;
			box-shadow: var(--box-shadow);
		}
		
	.hero-content-inner {
		float: right;
		width: 100%;
		background: var(--green);
		background: var(--green-grad);
		padding: 30px;
		border-radius:2px;
	}
	
	.hero-content-inner > :last-child {margin-bottom:0;}
	
	
	@media (max-width: 700px) {
		
		.hero-banner {
			height: 400px;
		}
		
		.video-controls {
			left: 10px;
			top: 10px;
		}
		
	}



	
/* ==========================================================================================
	CONTENT BUILDER BLOCKS 
============================================================================================ 
============================================================================================ 
============================================================================================ */
	
.content-builder-row {
	padding-top:30px;
	padding-bottom:30px;
}

	.content-builder-row > :last-child {
		margin-bottom: 0;
	}
	
	.content-builder-row.has-bg-color {
		padding-top: 60px;
		padding-bottom:55px;
	}



/* ==========================================================================================
   HEADING ROWS 
============================================================================================ */

.heading-row {
	padding-top: 30px;
	padding-bottom: 30px;
}

/* ==========================================================================================
   TEXT COLUMNS 
============================================================================================ */

.text-col figure {
	margin: 20px 0;
}

.text-col figure img {
	width: 100%;
}

.text-col > :first-child {margin-top:0;}
.text-col > :last-child {margin-bottom:0;}

.content-col > :last-child {
	margin-bottom:0;
}

/* Row container */
.row-content-cols .row-cont{
  display: flex;
  flex-wrap: wrap;
  gap: 50px 30px;                 
  align-items: stretch;
  justify-content: center;
}

/* Base column behaviour */
.row-content-cols .row-cont > .text-col,
.row-content-cols .row-cont > .image-col{
  min-width: 0;
  flex: 0 0 auto;            /* keep your old behaviour as default */
  box-sizing: border-box;
}

/*
  Width mapping (IMPORTANT):
  Target the actual children with the content-col-* class so it beats the base rule.
  Also set max-width to stop content stretching the item wider than its basis.
  
  Gap compensation:
  - For 50/50, subtracting 15px (half the gap) usually prevents wrapping.
  - This is still an approximation (CSS can’t know “columns per row” without JS),
	but it behaves much better than subtracting the full 30px.
*/

.row-content-cols .row-cont > .content-col-20p{ flex-basis: calc(20% - 15px); max-width: calc(20% - 15px); }
.row-content-cols .row-cont > .content-col-30p{ flex-basis: calc(30% - 15px); max-width: calc(30% - 15px); }
.row-content-cols .row-cont > .content-col-40p{ flex-basis: calc(40% - 15px); max-width: calc(40% - 15px); }
.row-content-cols .row-cont > .content-col-50p{ flex-basis: calc(50% - 15px); max-width: calc(50% - 15px); }
.row-content-cols .row-cont > .content-col-60p{ flex-basis: calc(60% - 15px); max-width: calc(60% - 15px); }
.row-content-cols .row-cont > .content-col-70p{ flex-basis: calc(70% - 15px); max-width: calc(70% - 15px); }
.row-content-cols .row-cont > .content-col-80p{ flex-basis: calc(80% - 15px); max-width: calc(80% - 15px); }
.row-content-cols .row-cont > .content-col-90p{ flex-basis: calc(90% - 15px); max-width: calc(90% - 15px); }
.row-content-cols .row-cont > .content-col-100p{ flex-basis: 100%; max-width: 100%; }




/* Make images behave */
.image-col picture,
.image-col img{
  width: 100%;
  height: auto;
  float: left;
}

.image-col picture {
	box-shadow: var(--box-shadow);	
}

.image-col-60 picture {
	width: 60%;
	margin: 0 auto;
	float: unset;
	display: block;
}

.image-col-caption {
	margin-top:20px;
	clear: both;
	float: left;
	font-size: 85%;
}

.image-col-60 .image-col-caption {
	float: unset;
	display: block;
	width: 60%;
	margin: 20px auto 0 auto;
	padding-top:20px;
}

.image-col-image-fill img {
	object-fit: cover;
	height: 100%;
}

@media (max-width: 700px) {


.row-content-cols .row-cont > .content-col-20p{ flex-basis: calc(20% - 15px); max-width: calc(20% - 15px); }
.row-content-cols .row-cont > .content-col-30p{ flex-basis: calc(30% - 15px); max-width: calc(30% - 15px); }
.row-content-cols .row-cont > .content-col-40p{ flex-basis: calc(40% - 15px); max-width: calc(40% - 15px); }
.row-content-cols .row-cont > .content-col-50p{ flex-basis: 100%; max-width: unset; }
.row-content-cols .row-cont > .content-col-60p{ flex-basis: calc(60% - 15px); max-width: calc(60% - 15px); }
.row-content-cols .row-cont > .content-col-70p{ flex-basis: calc(70% - 15px); max-width: calc(70% - 15px); }
.row-content-cols .row-cont > .content-col-80p{ flex-basis: calc(80% - 15px); max-width: calc(80% - 15px); }
.row-content-cols .row-cont > .content-col-90p{ flex-basis: calc(90% - 15px); max-width: calc(90% - 15px); }
.row-content-cols .row-cont > .content-col-100p{ flex-basis: 100%; max-width: 100%; }



.raw-html-embed iframe {
	width: 100%;
}


	
}

	


/* ==========================================================================================
   CARDS 
============================================================================================ */

.arrow-lines {
	width: 50%;
	height: 70px;
	background: red;
	margin: 0 auto 30px auto;
}

.card {
	position: relative;
	aspect-ratio: 1 / 1;
	z-index: 0;
	display: block;
	border-radius: 2px;
	overflow: hidden;
	transition: transform .2s ease;
}

.card:after {
	content: '';
	position: absolute;
	z-index: 1;
	display: block;
	width:100%;
	height: 100%;
	top: 0; right: 0; bottom:0; left: 0;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
}

	.card:hover {
		transform: scale(1.02);
	}
	
	.card picture {
		width: 100%;
		height: 100%;
	}
		
	.card .card-bg {
		object-fit: cover;
		width: 100%;
		height: 100%;
		z-index: 0;
		float: left;
		transition: transform .8s ease;
	}
	
	.card:hover .card-bg {
		transform: scale(1.1);
	}

	
	.card-inner {
		position: absolute;
		right:0; bottom:0; left:0;
		z-index: 1;
		padding: 40px;
		width: 100%;
		color: var(--white);
		z-index:2;
	}
	
	.card-inner p {
		font-weight: normal;
	}
	
	.card-inner span.link-text {
		color: var(--green-light);
		margin-top:0;
	}
	
	.card-inner > :last-child {
			margin-bottom: 0;
		}
		
		
	@media (max-width: 900px) {
			.card {
				aspect-ratio: 1 / 1.6;
			}
			
			.card-inner {
				padding: 100px 30px 30px 30px;
			}
			
		}
		
		
		
@media (max-width: 700px) {
			.card {
				aspect-ratio: unset;
			}
			
			.card .card-bg {
				position: absolute;
			}
			
			.card-inner {
				position: relative;
		}
			
	}
		
	
	
/* ==========================================================================================
   NEWS CARDS + NEWS LISTING CARDS (same code) 
============================================================================================ */

/* News Index page */

.newsIndex-cont {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 30px;
	padding-bottom:30px;
}


/* News Carousel Specifics */

.row-news-feed {
	width: 90%;
	max-width: var(--max-width);
	margin: 0 auto;
}

.carousel-cont {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20px;
}

/* News Cards */
.card-news {
}

.card-news a {
	box-shadow: var(--box-shadow);
	float: left;
	height: 100%;
	border-radius: 2px;
	overflow: hidden;

	transition: transform .2s ease;
	display: block;
}

.card-news a:hover {
	transform: scale(1.01);
}

	.card-news-thumb {
		width: 100%;
		float: left;
	}
	
	.card-news-inner {
		padding:30px;
		float: left;
		clear: both;
		color: var(--text);
	}
	
	.card-news-inner span.link-text {
		color: var(--green);
		margin-top:0;
	}
	
	.card-news-inner > :last-child {margin-bottom: 0;}
	
	.card-news-info {
		font-size: 1.2rem;
		font-weight: normal;
	}
	
	@media (max-width: 1000px) {
			.row-news-feed {
				width: 90%;
			}
	}

	
	
/* ==========================================================================================
	   TEAM MEMBERS 
	============================================================================================ */
	
	
	/* Hidden state */
	.bio-popup[hidden] { display: none; }
	
	/* Overlay wrapper */
	.bio-popup {
	  position: fixed;
	  top: 0; right: 0; bottom: 0; left: 0;
	  z-index: 9999;
	
	  /* widely supported centering */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	
	  padding: 24px;
	
	  /* start invisible for animation */
	  opacity: 0;
	  visibility: hidden;
	
	  /* backdrop */
	  background: rgba(32, 111, 86, .8);
	
	  /* fade overlay */
	  transition: opacity 200ms ease, visibility 200ms ease;
	}
	
	/* Modal box */
	.bio-popup-box {
	  position: relative;
	  width: 100%;
	  max-width: 900px;
	  max-height: 80vh;
	  overflow: auto;
	  background: #fff;
	  border-radius: 2px;
	  padding: 28px;
	  box-shadow: 0 20px 60px rgba(0,0,0,0.75);
	
	  /* start slightly down and invisible */
	  opacity: 0;
	  transform: translateY(14px);
	
	  /* fade + lift */
	  transition: opacity 220ms ease, transform 220ms ease;
	}
	
	.bio-popup-box h3 {
		color: var(--green);
		margin-bottom:5px;
	}
	
	/* When open */
	.bio-popup.is-open {
	  opacity: 1;
	  visibility: visible;
	}
	
	.bio-popup.is-open .bio-popup-box {
	  opacity: 1;
	  transform: translateY(0);
	}
	
	/* Closing state (optional, lets you tune timing separately if desired) */
	.bio-popup.is-closing {
	  opacity: 0;
	  visibility: hidden;
	}
	
	.bio-popup.is-closing .bio-popup-box {
	  opacity: 0;
	  transform: translateY(14px);
	}
	
	[type="button"].bio-popup-close {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 40px;
	  height: 40px;
	  border: 0;
	  background: transparent;
	  font-size: 35px;
	  line-height: 40px;
	  margin:0;
	  padding:0;
	  cursor: pointer;
	  color: var(--text);
	}
	
	[type="button"].bio-popup-close:hover {
		text-decoration: none;
		color: var(--white);
	}

	
	/* Prevent background scroll when modal open */
	html.bio-popup-open,
	body.bio-popup-open {
	  overflow: hidden;
	}
	
	/* Respect reduced motion */
	@media (prefers-reduced-motion: reduce) {
	  .bio-popup,
	  .bio-popup-box {
		transition: none;
	  }
	}
	
	
/* ==========================================================================================
   LOGO CAROUSEL 
============================================================================================ */

.row-logo-carousel {
	background: linear-gradient(0deg,rgba(32, 111, 86, 1) 50%, rgba(255, 255, 255, 0.34) 50%);
	padding-left:30px;
	padding-right:30px;
}

.logo-carousel-cont {
	box-shadow: var(--box-shadow);
	background: #fff;
	width: 100%;
	padding:0 30px 30px 30px;
	overflow: hidden;
}

.logo-carousel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap:30px;
	
	list-style: none none;
	margin:0 0 10px 0;
	padding: 0;
	float: left;
	clear: both;
}

	.logo-carousel li {
		padding: 0 15px;
		margin:0;
		width: 20%;
		display: block;
		float: left;
		text-align: center;
	}
	
	.logo-carousel li img {
		height: 100%;
		width: auto;
		max-height: 80px;
		display: inline-block;
		filter: brightness(0.6) contrast(1.2);
		transition: all .2s ease;
	}
	
		.logo-carousel li a:hover img {
		filter: brightness(0.3) contrast(0.8);
		transform: scale(1.04);

	}		
	
/* ============================================
	   SECTION: FORMS
	=============================================== */
	
	.form-cont {
		box-shadow: var(--box-shadow);
		background: #fff;
		padding:30px;
	}
	
	.fui-required{color: red !important;}
	
	.fui-file-summary,.fui-instructions,.fui-limit-text,.fui-optional{color:var(--text) !important;font-size:1rem!important}
	
	label,.fui-type-html p{width:100%;float:left;text-align:left;line-height:145%;padding:4px 0;margin:0;font-weight:700;color:var(--text);font-size:1.3rem}
	
	.fui-i{font-family:aptos,sans-serif!important;margin-top:35px!important;margin-bottom:35px!important}
	
	.fui-type-date .fui-row{display:block}
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"]:not(.cur-year),
	input[type="tel"],
	input[type="date"],
	input[type="file"],
	textarea,
	canvas{
		font-family: aptos ,sans-serif!important;
		background:#fff;
		border:solid 1px var(--grey)!important;
		padding:16px 15px!important;
		font-size:15px!important;
		border-radius:0!important;
		float:left;
		width:100%;
		color:var(--text)!important;
		font-weight: 700;
		-webkit-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
		margin-top:10px!important;
	}
	
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="number"]:focus,
	input[type="date"]:focus,
	input[type="tel"]:focus,
	input[type="file"]:focus,
	textarea:focus{border:solid 1px var(--green);}
	
	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button{}
	
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button{opacity:1}
	
	/* Firefox */
	input[type="number"]{-moz-appearance:textfield}
	
	.fui-select{
		font-family:aptos,sans-serif!important;
		width:100%!important;
		color:var(--text)!important;
		border-radius:0!important;
		background:#fff;
		outline:0;
		float:left;
		border:solid 1px #b3b3b2!important;
		height:auto;
		min-height:26px;
		margin-top:10px!important;
		font-size:15px!important;
		padding:16px 15px!important;
		font-weight: 700
	}
	
	.fui-legend,.fui-label{width:100%;float:left;color:var(--text)!important;text-align:left;font-size:1.3em!important;line-height:145%!important;font-weight: 700!important;padding:4px 0!important;margin:0!important}
	
	.fui-type-checkboxes .fui-layout-wrap{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		gap:10px;
		width:100%;
		padding-top:10px;
		padding-bottom:10px
	}

	.fui-type-checkboxes .fui-layout-wrap .fui-checkbox{width:calc(33.33% - 10px)}
	
	@media (max-width:768px){
		.fui-type-checkboxes .fui-layout-wrap .fui-checkbox{width:calc(49% - 10px)}
	}
	
	@media (max-width:420px){
		.fui-type-checkboxes .fui-layout-wrap .fui-checkbox{width:100%}
	}
	
	.fui-errors{width:100%;display:block;clear:both;margin-top:0}
	
	.fui-error-message{
		width:100%;
		border:solid 1px red;
		background: #fdf2f2 !important;
		display:block;
		clear:both;
		padding:10px;
		color: #771d1d !important;
		line-height:140%;
		font-weight: 700;
		font-size:1.1rem;
		margin-top:0
	}
	
	.fui-alert{text-align:center;font-size:1.1rem!important}
	.fui-alert>:last-child{margin-bottom:0}
	
	.fui-alert-success{padding:0!important;background:0!important;text-align:left; color: #333 !important}
	.fui-alert-success p{font-size:1.3rem!important;line-height:1.3;color: #333 !important}
	
	input#submit,
	button[type="submit"],
	button[type="button"]:not(.splide__pagination__page,.bio-popup-close){
		font-family: aptos-display, sans-serif;
		font-weight: 700;
		width:auto;
		padding:15px 40px;
		text-align:center;
		text-transform:uppercase;
		clear:both;
		display:block;
		float:left;
		margin:20px 0;
		color:var(--white);
		border:0;
		font-size:1.1em;
		line-height:105%;
		position:relative;
		background-color:var(--green);
		-webkit-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
		outline:0;
		border-radius:0!important;
		cursor:pointer
	}
	
	button[type="submit"]:hover,
	button[type="button"]:hover{text-decoration: underline;background:var(--green)}
	
	/* Responsive */
	@media (max-width:768px){
		.container{width:90%}
		.form-group{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}
	}
	
	@media (max-width:500px){
		input#submit,
		button[type="submit"],
		button[type="button"]:not(.splide__pagination__page){width:100%}
	}	
	

/* ============================================
   COMPONENT: Carousel
=============================================== */

.splide__track {
	padding-top:20px;
	padding-bottom:20px;
}

.splide__pagination {
	bottom: -20px !important;
}

.splide__pagination__page {
	background: var(--green-light) !important;
}

.splide__pagination__page.is-active {
	background: var(--green) !important;
}

/* ============================================
   GSAP
=============================================== */


.fade-group > * ,
.card .card-inner * ,
.card .card-bg {
  will-change: transform, opacity;
  backface-visibility: hidden;
}