html,body{
	margin: 0;
	padding:0;
	height: 100%;
	font-family: 'Open Sans', sans-serif;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size:1rem;
	font-weight: normal;
	background-image:url("../images/city-background.png");
	background-position: left top;
	background-color:rgba(114,0,79,1);
	background-size: contain;
}

h2, h3{
	font-weight: 700;
	line-height: 1;
}

h3{
	border-bottom:5px solid #8dc377;
	display: inline-block;
	margin:0;
	font-weight: 500;
}

.content h3{
	display: none!important;
}

.overlay-urban h3{
	border-bottom:5px solid #f0d700;
}

.overlay-industry h3{
	border-bottom:5px solid #ff00ff;
}

.overlay-coastal h3{
	border-bottom:5px solid #02c9c9;
}




.overlay-river h3{
	border-bottom:5px solid #4a4997;
}

.overlay-lakes h3{
	border-bottom:5px solid #68b6dc;
}


.overlay-catch h3{
	border-bottom:5px solid #e50041;
}





h2{
	margin-top:10px;
	font-size:2.2rem;
	margin-bottom:10px;
}

h4{
	font-size:1.2rem;
	text-transform: uppercase;
	font-weight: 300;
}

img, video{
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

/*#canvas{
	position: absolute;
	width: 100%;
    height: 100%;

	overflow: hidden;
	margin: auto;
	top: 50%; 
    left: 50%;

    transform: translate(-50%, -50%);
	border-radius: 5px;
	border:5px solid #fff;
	display: inline-block;
}
*/
#canvas{
	height: 100vh;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.innercanvas{
	--r: 16/9;
	aspect-ratio: var(--r);
	width:min(95%, min(1920px, 95vh*(var(--r))));
	position: relative;
	display: none;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border:5px solid #fff;
}


.marker{
  position: absolute;
  z-index: 100;
  cursor: pointer;
  color: rgba(114,0,79,1);
  /*font-size: 5rem;*/
	width: 40px;
    height: 53px;
    margin-left: -20px;
    margin-top: 26px; 
	display: inline-block;
}


.icon-box{
	width: 40px;
	height:auto;
	position: absolute;
}

.marker-1{
	left: 17%;
	top: calc(54% - 53px);
	color:#8dc377;
}

.marker-2{
	left: 15%;
	top: calc(35% - 53px);
	color:#f0d700;
}

.marker-3{
	left: 39%;
	top: calc(50% - 53px);
	color:#f0d700;
}

.marker-4{
	left: 51%;
	top: calc(30% - 53px);
	color:#f0d700;
}


.marker-5{
	left: 85%;
	top: calc(43% - 53px);
	color:#f0d700;
}

.marker-6{
	left: 68%;
	top: calc(8% - 53px);
	color:#f0d700;
}
.marker-7{
	left: 59%;
	top: calc(79% - 53px);
}


.tooltip{
	height:80px;
	width:300px;
	font-size:16px;
	background:#fff;
	position: absolute;
	left: 54px;
	top: -26px;
}

.marker-5 .tooltip{
	left:-320px;
}


.tooltip .element{
	height:100%;
	width:80px;
	color:#fff;
	display: block;
	float:left;
	background:#8dc377;
	font-size: 24px;
	text-align: center;
}

.marker-urban .tooltip .element{
	background:#f0d700;
}

.marker-industry .tooltip .element{
	background:#ff00ff;
}

.marker-river .tooltip .element{
	background:#4a4997;
}

.marker-lakes .tooltip .element{
	background:#68b6dc;
}


.marker-catch .tooltip .element{
	background:#e50041;
}

.marker-coastal .tooltip .element{
	background:#02c9c9;
}






.tooltip .element i{
	padding-top:27px;
}

.tooltip .element-copy{
	padding-left:20px;
	padding-top: 22px;
	float:left;
	display: block;
}

.tooltip .element-copy.big{
	padding-top: 15px;
	line-height: 1;
	float: none;
	padding-left:100px;
}

.tooltip .element-copy h3{
	font-size: 16px;
	border:none;
	color:#8dc377;
	padding-top:12px;
	display: none!important;
}

.marker-urban .tooltip .element-copy h3{
	color:#f0d700;
}


.marker-industry .tooltip .element-copy h3{
	color:#ff00ff;
}



.marker-river .tooltip .element-copy h3{
	color:#4a4997;
}

.marker-lakes .tooltip .element-copy h3{
	color:#68b6dc;
}

.marker-catch .tooltip .element-copy h3{
	color:#e50041;
}

.marker-coastal .tooltip .element-copy h3{
	color:#02c9c9;
}





.tooltip .element-copy h2{
	font-size:24px;
	color:#252525;
	margin-top: 0;
}

.marker .tooltip{
	opacity:0;
	visibility: hidden;
	 -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
	-webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.26);
	-moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.26);
	box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.26);
}

.marker:hover .tooltip{
	opacity:1;
	visibility: visible;
}

.floorplan-overlay{
	position: absolute;
	bottom:0;
	left:0;
	z-index: 10;
	opacity:0;
	
}

.full-overlay{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 12;
	opacity:0;
	transform-origin: bottom left;
}

.full-urban{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 13;
	opacity:0;
	transform-origin: bottom left;
}

.urban-overlay{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 14;
	opacity:0;

}

.full-urban2{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 13;
	opacity:0;
	transform-origin: bottom left;
}

.full-river{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 13;
	opacity:0;
	transform-origin: bottom left;
}



.urban2-overlay{
	position: absolute;
	left:0;
	bottom:0;
	z-index: 14;
	opacity:0;

}

.hanging-billboard{
	opacity:1!important;
	position: absolute;
	left:45px;
	top:-20px;
	z-index:7;
	transform-origin: top left;
	width:220px;
}

.floorplan{
	opacity:1!important;
	position: absolute;
	left:0;
	bottom:0;
	z-index:5;
	transform-origin: bottom left;
}

.black-overlay{
	display: block;
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: rgba(0,0,0,0.1);
	z-index:7;
}


.clickable-image{
	transform: scale(1);
	transform-origin: bottom left;
	
}

.image-open{
  animation: scaleUp 0.5s forwards ease-out;
	
}

.image-open2{
  animation: scaleUp2 0.5s forwards ease-out;
	
}

.image-open3{
  animation: scaleUp3 0.5s forwards ease-out;
	
}

.image-open4{
  animation: scaleUp4 0.5s forwards ease-out;
	
}

.image-open5{
  animation: scaleUp5 0.5s forwards ease-out;
	
}

.image-open6{
  animation: scaleUp6 0.5s forwards ease-out;
	
}

.image-open7{
  animation: scaleUp7 0.5s forwards ease-out;
	
}


.image-close{
  animation: scaleDown 0.5s forwards ease-out;

}

.image-close2{
  animation: scaleDown2 0.5s forwards ease-out;

}

.image-close3{
  animation: scaleDown3 0.5s forwards ease-out;

}

.image-close4{
  animation: scaleDown4 0.5s forwards ease-out;

}

.image-close5{
  animation: scaleDown5 0.5s forwards ease-out;

}

.image-close6{
  animation: scaleDown6 0.5s forwards ease-out;

}

.image-close7{
  animation: scaleDown7 0.5s forwards ease-out;

}



.box-open{
  animation: slideIn 0.5s forwards ease-out;

}


.box-close{
  animation: slideOut 0.5s forwards ease-out;

}

.box-open5{
  animation: slideIn2 0.5s forwards ease-out;

}


.box-close5{
  animation: slideOut2 0.5s forwards ease-out;

}


.overlay-box{
	position: absolute;
	right:-100%;
	top:0;
	width:40%;
	height: 100%;
	z-index:200;
	background:rgba(255,255,255,0.85);
}

.overlay-info, .overlay-contact, .overlay-mobile{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:200;
	background:rgba(0,0,0,0.35);
	
}

.overlay-info-inner, .overlay-mobile-inner{
	position: absolute;
	top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of*/
	width:50%;
	z-index:200;
	background:rgba(255,255,255,1);
	border-radius: 5px;
}

.overlay-mobile-inner{
	width:90%
}

.overlay-info-inner h2, .overlay-mobile-inner h2{
	color:rgba(114,0,79,1);
}

.header-box{
	padding:10px 30px;
	text-align: right;
	
}

.close-button{
	font-size:0.8rem;
	cursor: pointer;
}

.close-button i{
	font-size:1.5rem;
	margin-left:0.7rem;
}

.close-button i::before {
  top: 8px;
  position: absolute;
}

.content{
	/*margin-top:30px;*/
	padding:0 50px;
}

.overlay-mobile-inner .content{
	padding:0 20px;
}

.copy{
	padding: 0 10px 30px 0;
	height:calc(90vh - 160px);
	overflow-y: auto;
}

.copy p{
	margin-top:0;
}

.footer-box{
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	background:#8dc377;
	padding:30px;
	color:#fff;
	display: none!important;
}

.overlay-urban .footer-box{
	background:#f0d700;
}

.overlay-industry .footer-box{
	background:#ff00ff;
}

.overlay-river .footer-box{
	background:#4a4997;
}

.overlay-lakes .footer-box{
	background:#68b6dc;
}

.overlay-catch .footer-box{
	background:#e50041;
}

.overlay-coastal .footer-box{
	background:#02c9c9;
}



.footer-box a{
color:#fff;
text-decoration: none;
line-height: 0;
}

.footer-box a:hover{
	text-decoration: underline;
}

.footer-box ul{
	padding:0 0 0 15px;
}



/*.overlay-urban .footer-box a{
	color:#f0d700;
}

.overlay-industry .footer-box a{
	color:#ff00ff;
}



.overlay-river .footer-box a{
	color:#4a4997;
}

.overlay-lakes .footer-box a{
	color:#68b6dc;
}

.overlay-catch .footer-box a{
	color:#e50041;
}

.overlay-coastal .footer-box a{
	color:#02c9c9;
}*/


.uitleg{
	position: absolute;
	right:30px;
	bottom:40px;
	z-index:200;
	background:rgba(255,255,255,0.90);
	border-radius: 21px;
	color:#252525;
	padding: 0.5rem 0.7rem;
	font-weight: 600;
}

.spotlight-menu{
	position: absolute;
	right:30px;
	bottom:0;
	z-index:200;
}
.spotlight-menu.top-menu{
	position: absolute;
	right:30px;
	bottom:auto;
	top:30px;
	z-index:200;
}

.spotlight-menu.bottom-menu{
	position: absolute;
	left:0;
	right:auto;
	bottom:0;
	z-index:200;
}

.spotlight-menu li{
	display: block;
	margin-bottom:10px;
	position: relative;
	height: 40px;
}

.spotlight-menu li a{
	max-width:40px;
	height: 40px;
	
	border-radius: 20px;
	background:#fff;
	color:#252525;
	text-align: center;
	font-size:21px;
	position: absolute;
	cursor: pointer;
	right:0;
	top:0;
	display: inline-flex;
    justify-content: end;
    overflow: hidden;
	text-decoration: none;
	 -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.spotlight-menu li a .text {
    white-space: nowrap;
    margin-left: 15px;
	padding-right: 56px;
	font-size: 16px;
	padding-top: 8px;
}

.spotlight-menu li a#contact .text {
    white-space: nowrap;
    margin-left: 0;
	margin-right:15px;
	padding-left: 56px;
	padding-right:0;
	font-size: 16px;
	padding-top: 8px;
}

.spotlight-menu li a .icon{
	width:40px;
	height: 40px;
	display: block;
	border-radius: 20px;
	text-align: center;
	font-size:21px;
	position: absolute;
	cursor: pointer;
	right:0;
	top:0;
	color:#fff;
	background:#8dc377;
}

.spotlight-menu li a#urban .icon{
	background:#f0d700;
}

.spotlight-menu li a#industry .icon{
	background:#ff00ff;
}

.spotlight-menu li a#river .icon{
	background:#4e4da5;
}

.spotlight-menu li a#lakes .icon{
	background:#68b6dc;
}

.spotlight-menu li a#catch .icon{
	background:#e50041;
}

.spotlight-menu li a#coastal .icon{
	background:#02c9c9;
}

.spotlight-menu li a#info .icon{
	background:rgba(114,0,79,1)
}

.spotlight-menu li a#info{
	color:#252525;
}

.spotlight-menu li a#contact .icon{
	background:rgba(114,0,79,1);
	right:auto;
	left:0;
}

.spotlight-menu li a#contact .icon i{
	left:10px;
}

.spotlight-menu li a#contact{
	color:#252525;
	right:auto;
	left:0;
	justify-content:flex-start;
}


.spotlight-menu li a:hover{
	max-width: 300px;
}

.spotlight-menu li a i{
	top:9px;
	position: absolute;
	left:8px;
}

.spotlight-menu li a#urban  i{
	top:10px;
	position: absolute;
	left:12px;
}

.spotlight-menu li a#info i {
  top: 8px;
  position: absolute;
  left: 16px;
}


.highlght-1{
	 -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
	opacity: 1;
}

.highlght-2{
	 -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
	opacity: 1;
}

.copy h4{
	margin-bottom:10px;
	font-weight: 600;
}

.copy ul.cases{
	padding:0;
	margin:0;
	
}


.copy ul.cases li{
	margin:0 0 10px 0;
	display: block;
}

.copy ul.cases li:last-child{
	margin-right: 0;
}

.copy ul.cases li a{
	display: table;
	background:#fff;
	padding:10px;
	text-decoration: none!important;
	height: 80px;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	color:#252525;
	width:94%;
}

.copy ul.cases li a img{
}

.copy ul.cases li a .thumb-holder{
	width:80px;
	display: table-cell;
	padding-right:15px;
}

/*.copy.harbour ul.cases li a{
	color:#8dc377;
}*/

.copy ul.cases li a .title-holder{
	font-size:20px;
	font-weight: 600;
	display: table-cell;
	vertical-align: middle;
	line-height: 1.1;
}

.copy ul.services{
	padding: 15px 15px 15px 30px;
	margin:0 0 15px 0;
	background: #fff;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	width:90%;
}

.copy ul.services li{
	line-height: 1.6;
	
}

.copy ul.services li a{
	display: block;

}

.copy ul.cases li a{
	border-left:4px solid #fff;
}

.copy.harbour ul.cases li a:hover{
	border-color:#8dc377;
}

.copy.urban ul.cases li a:hover{
	border-color:#f0d700;
}

.copy.industrial ul.cases li a:hover{
	border-color:#ff00ff;
}

.copy.floods ul.cases li a:hover{
	border-color:#4e4da5;
}

.copy.quality ul.cases li a:hover{
	border-color:#4e4da5;
}

.copy.catchment ul.cases li a:hover{
	border-color:#e50041;
}

.copy.coastal ul.cases li a:hover{
	border-color:#02c9c9;
}

.copy.harbour ul.services{
	background:#8dc377;
}

.copy.urban ul.services{
	background:#f0d700;
}

.copy.industrial ul.services{
	background:#ff00ff;
}

.copy.floods ul.services{
	background:#4e4da5;
}

.copy.quality ul.services{
	background:#4e4da5;
}

.copy.catchment ul.services{
	background:#e50041;
}
	
.copy.coastal ul.services{
	background:#02c9c9;
}

.copy ul.services li, .copy ul.services li a{
	color:#fff;
	text-decoration: none!important;
}

.copy ul.services li a:hover{
	color:#fff;
	text-decoration: underline!important;
}

#html5Loader{
	top:0;
	left:0;
	background:rgba(114,0,79,1);
	margin:0;
	position:fixed;
	text-align:center;
	width:100%;
	z-index:1000;
	font-family: 'Open Sans', sans-serif!important;
	display: none!important;
}
#html5Loader .fallback {
	top:50%;
	position:absolute;
	text-align:center;
	width:100%;
	color:white;
	vertical-align: middle;
	display: block;
	font-style: normal;
	font-family: 'Open Sans', sans-serif!important;
	font-size:100px;
}

#frmContact input,#frmContact textarea{
	padding: 0.4rem;
	border-radius: 5px;
	width: 100%;
	max-width: 100%;
	border: 1px solid #ccc;
}


#frmContact div label{margin-left: 5px}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#9E076C;border:0;padding:10px 40px;color:#FFF;border:#9E076C 1px solid; border-radius:4px;}
	

@keyframes scaleUp{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(2);
		opacity:1;
		left:-18%;	
		bottom:-32%;
	}
}

@keyframes scaleDown{
	from{
		transform: scale(2);
		opacity:1;
		left:-18%;	
		bottom:-32%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*urban 1*/
@keyframes scaleUp2{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(2);
		opacity:1;
		left:-22%;	
		bottom:-75%;
	}
}

@keyframes scaleDown2{
	from{
		transform: scale(2);
		opacity:1;
		left:-22%;	
		bottom:-75%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*urban 2*/

@keyframes scaleUp3{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(2);
		opacity:1;
		left:-55%;	
		bottom:-40%;
	}
}

@keyframes scaleDown3{
	from{
		transform: scale(2);
		opacity:1;
		left:-55%;	
		bottom:-40%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*River*/

@keyframes scaleUp4{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(1.5);
		opacity:1;
		left:-30%;	
		bottom:-50%;
	}
}

@keyframes scaleDown4{
	from{
		transform: scale(1.5);
		opacity:1;
		left:-30%;	
		bottom:-50%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*River*/

@keyframes scaleUp5{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(2);
		opacity:1;
		left:-100%;	
		bottom:-50%;
	}
}

@keyframes scaleDown5{
	from{
		transform: scale(2);
		opacity:1;
		left:-100%;	
		bottom:-50%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*Catch*/

@keyframes scaleUp6{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(1.8);
		opacity:1;
		left: -54%;
		bottom: -80%;
	}
}

@keyframes scaleDown6{
	from{
		transform: scale(1.8);
		opacity:1;
		left: -54%;
		bottom: -80%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}

/*Catch*/

@keyframes scaleUp7{
	from{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}to{
		transform: scale(1.5);
		opacity:1;
		left: -33%;
		bottom: -0%;
	}
}

@keyframes scaleDown7{
	from{
		transform: scale(1.5);
		opacity:1;
		left: -33%;
		bottom: -0%;
		
	}to{
		transform: scale(1);
		opacity:0;
		left:0;	
		bottom:0;
	}
}



@keyframes slideIn{
	from{
		right:-100%;
	}to{
		right:0;
	}
}

@keyframes slideOut2{
	from{
		left:0;
	}to{
		left:-100%;
	}
}


@keyframes slideIn2{
	from{
		left:-100%;
	}to{
		left:0;
	}
}

@keyframes slideOut{
	from{
		right:0;
	}to{
		right:-100%;
	}
}

@media only screen and (min-width: 1200px){
	.overlay-mobile{
		display:none!important;
	}
	
	.innercanvas{
		display: flex!important;
	}
	
	#html5Loader{
		display: block!important;
	}
}

/* CSS Document */