/* 	[ COPYRIGHT CONTEGRO  - Intelligent Website Content Management ]   */
/* 	[ http://www.contegro.com ]   */



/* -----[ CUSTOM CODE ]--------------------------------------------------------------------- */

/*
	Default Class Selectors and ID Selectors have been created for you.
	Alter the Property and Value to reflect your design as required.
*/

/* === [ GLOBAL STYLE ] === */

	.CustomCode {
		position: relative;
		margin: 0;
		padding: 0;
	}
	
#cSearchAndFilter .CustomCode {
	display: inline;
	position: static;
	height: 80px;
}
	
.HeroTitle {
	position: absolute;
	top: 0;
	left: 0;
	width: 33%;
	height: 50%;
	background: black;
	padding: 30px;
	z-index: 20;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	        box-sizing: border-box;         /* Opera/IE 8+ */	
}	
	.HeroTitle.HalfHeight {
		height: 25%;
	}
	.Breadcrumb + .HeroTitle,
	.Breadcrumb + .CustomCode .HeroTitle {
		padding-top: 60px;
	}

	.Breadcrumb + .HeroTitle.HalfHeight,
	.Breadcrumb + .CustomCode .HeroTitle.HalfHeight {
		padding-top: 30px;
		z-index: 40;
	}

	.HeroTitle h1 {
		color: #e5e5e5;
		margin: 0 0 10px 0;
		line-height: 1.2em;
	}
		.HeroTitle h1:empty,
		.HeroTitle h1.empty { display: none; }

	form.contegro_internetexplorer .HeroTitle h1 {
		line-height: 1.15em;
	}

	.HeroTitle p {
		color: #e5e5e5;
		font-family: 'HelveticaNeueLTStd-Md'
	}
		.HeroTitle h1:empty + p,
		.HeroTitle h1.empty + p {
			font-family: 'HelveticaNeueLTStd-Lt', Arial, Helvetica, sans-serif;
			font-size: 2em;
			line-height: 1.2em;
			margin-bottom: 0;
			background: black;
		}
		form.contegro_internetexplorer .HeroTitle h1:empty + p,
		form.contegro_internetexplorer .HeroTitle h1.empty + p {
			line-height: 1.15em;
		}		

.HeroImage {
	z-index: 0;
	width: 100%;
	overflow: hidden;
	height: 100%;
	position: relative;
}
	.HeroImage img {
		width: auto; 
		height: auto;
		margin: auto;
		display: block;
		opacity: 0;
		
		-webkit-transition: opacity 0.25s;
		   -moz-transition: opacity 0.25s;
		        transition: opacity 0.25s;
	}
	
	.HeroImage.imageExactRatio img { width: 100%; height: 100%; }
	.HeroImage.imageTooWide    img { height: 100%; }
	.HeroImage.imageTooTall    img { width: 100%; }
	.HeroImage.imageLoaded     img { opacity: 1; }

	.HeroImage li.imageExactRatio img { width: 100%; height: 100%; }
	.HeroImage li.imageTooWide    img { height: 100%; }
	.HeroImage li.imageTooTall    img { width: 100%; }
	.HeroImage li.imageLoaded     img { opacity: 1; }

.HeroImage.HeroSlideshow        ul,
.HeroImage.HeroSlideshowDesktop ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
	.HeroImage.HeroSlideshow        ul.images,
	.HeroImage.HeroSlideshowDesktop ul.images {
		width: 100%;
		height: 100%;
	}
		.HeroImage.HeroSlideshow        ul.images li,
		.HeroImage.HeroSlideshowDesktop ul.images li {
			width: 100%;
			height: 100%;
			background-position: center center;
			background-size: cover;	
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			background-color: #666;
			margin: 0;
			padding: 0;
			z-index: 10;
		}
		.HeroImage.HeroSlideshow        ul.images li.active,
		.HeroImage.HeroSlideshowDesktop ul.images li.active   { opacity: 1; z-index: 15; }
		.HeroImage.HeroSlideshow        ul.images li.previous,
		.HeroImage.HeroSlideshowDesktop ul.images li.previous { opacity: 0; }
		
		.HeroImage.HeroSlideshow        ul.images li.active,
		.HeroImage.HeroSlideshow        ul.images li.previous,
		.HeroImage.HeroSlideshowDesktop ul.images li.active,
		.HeroImage.HeroSlideshowDesktop ul.images li.previous {
			-webkit-transition: opacity 0.5s;
			        transition: opacity 0.5s;
		}
		.HeroImage.HeroSlideshow        ul.images li.previous,
		.HeroImage.HeroSlideshowDesktop ul.images li.previous {
			-webkit-transition-delay: 0.5s;
			        transition-delay: 0.5s;
		}

	.HeroImage.HeroSlideshow        ul.indicators,
	.HeroImage.HeroSlideshowDesktop ul.indicators {
		position: absolute;
		bottom: 10px;
		left: 20px;
		z-index: 20;
	}
		.HeroImage.HeroSlideshow        ul.indicators li,
		.HeroImage.HeroSlideshowDesktop ul.indicators li {
			width: 10px;
			height: 10px;
			background: white;
			display: inline-block;
			margin-right: 5px;
			border-radius: 5px;
		}
		.HeroImage.HeroSlideshow        ul.indicators li.active,
		.HeroImage.HeroSlideshowDesktop ul.indicators li.active {
			background: #00AEEF;
		}

	#PageEditorControl_ContentsWrapper_Content .HeroImage img {
		opacity: 1;
		height: 100%;
		width: auto;
	}
	
.HeroMap,
.HeroMapCover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
}	
	.HeroMap.active {
		z-index: 1;
	}
	.HeroMap.active + .HeroMapCover {
		z-index: 2;
	}

	.HeroMap #map {
		width: 100% !important;
		height: 100% !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}
	.HideHeroMapButton {
	    position: absolute;
	    bottom: 20px;
	    right: 10px;
	    width: 90px;
	    height: 35px;
	    background: rgba(0,0,0,0.50);
	    padding: 10px;
	    text-align: center;
	    z-index: 20;
	    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;         /* Opera/IE 8+ */
	    color: #e5e5e5;
	    cursor: pointer;
	    display: none;
	}
	.HeroMap.active + .HeroMapCover + .HideHeroMapButton,
	.HeroMap.active + .HideHeroMapButton {
		display: block;	
	}


	
.HeroContent {
	z-index: 0;
	width: 100%;
	height: 100%;
}
	.HeroContent #map {
		width: 100% !important;
		height: 480px !important;
		height: 37.5vw;
	}
	body.touchDevice .HeroContent #map:before { /* put a div on top of the map so that it doesn't block scrolling */
		display: block;
		content: "";
		width: 100%;
		position: absolute;	
		top: 0;
		bottom: 0;
		left: 0;
		background: transparent;
		z-index: 10;
	}

.FourOhFourContent {
  padding: 0 30px;
  background: #242424;
  min-height: 18.75vw;
  width: 75%;
  
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */	  
}
	.FourOhFourContent h1 {
		font-size: 3em;
		color: #e5e5e5;
		font-weight: normal;
		margin: 0;
		padding: 20px 0 0 0;
		font-family: 'HelveticaNeueLTStd-Lt', Arial, Helvetica, sans-serif;
	}
	.FourOhFourContent p {
		color: #e5e5e5;
		font-size: 1.25em;
	}
	.FourOhFourContent p {
		width: 50%;
	}

.ServicesList {
	padding: 2em;
}
	.ServicesList ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ServicesList li {
		line-height: 1.2em;
	}
	
.KeyDetails {
	padding: 1.5em 2.5em;
	height: auto !important;
}	
	.KeyDetails pre.Details {
		font-family: 'HelveticaNeueLTStd-Roman', sans-serif;
		white-space: pre-line; /* make line breaks show as line breaks, but allow for line wrapping */
	}
	.KeyDetails div.Details {
		margin: 0;
		padding: 0;
	}
		.KeyDetails div.Details span {
			margin: 0 0 0.5em 0;
			line-height: 1.1em;
			display: block;
		}
			.KeyDetails div.Details span span {
				margin: 0;
				display: inline;
			}

	.KeyDetails + .KeyDetails {
		padding-top: 0;
		margin-top: -1em;
	}


	
.ContactLocation {
	clear: right;
	float: right;
	width: 50%;
	padding: 2em 2em 0 1em;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */						
	
}
.ContactLocation + .ContactLocation {
	padding-top: 1em;
}


	.ContactLocation dl {
		margin: 1em 0 0.5em 0;
	}
	.ContactLocation dl:after {
		content:'';
		display:block;
		clear: both;	
	}
	.ContactLocation dt {
		font-family: 'HelveticaNeueLTStd-Md';
		display: block;
		width: 33.3333%;
		float: left;
		clear: both;
	}	
	.ContactLocation dd {
		display: block;
		float: left;
		width: 66.6666%;
	}	


.ProjectKeyDetails {
	padding: 2em;
}

	.ProjectKeyDetails dl {
		margin: 1em 0;
	}
	.ProjectKeyDetails dl:after {
		content:'';
		display:block;
		clear: both;	
	}
	.ProjectKeyDetails dt,
	.ProjectKeyDetails dd {
		display: block;
		float: left;
		line-height: 1.5em;
	}
	.ProjectKeyDetails dt {
		font-family: 'HelveticaNeueLTStd-Md';
		clear: both;
		font-weight: normal;
		color: #666;
	}	
		.ProjectKeyDetails dt:after {
			content: ":";
			margin: 0 0.25em 0 0;
		}
		.ProjectKeyDetails dt:empty:after {
			display: none;
		}

	.ProjectKeyDetails dd {
		color: #999;
	}	
	
	.ProjectKeyDetails ul,
	.ProjectKeyDetails li {
		list-style: none;
		margin: 0;
		padding: 0;
		color: #666;
	}		
		.ProjectKeyDetails li a { color: #666; }
		.ProjectKeyDetails li a:hover { text-decoration: none; }

	.ProjectKeyDetails ul {
		margin: 1em 0;
	}

.RightImage {
	overflow: hidden;
}
	.RightImage img {
		width: auto;
		height: auto;
		opacity: 0;
		
		-ms-interpolation-mode: bicubic;
		
		-webkit-transition: opacity 0.25s;
		   -moz-transition: opacity 0.25s;
		        transition: opacity 0.25s;
	}
	.RightImage.imageExactRatio img { width: 100%; height: 100%; }
	.RightImage.imageTooWide    img { height: 100%; }
	.RightImage.imageTooTall    img { width: 100%; }
	.RightImage.imageLoaded     img { opacity: 1; }

#outerWrapper.search .RightImage,
#outerWrapper.page-not-found-content .RightImage {
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
	height: 240px;
	height: 18.75vw; /* 18.75% of the view width */
}
#outerWrapper.page-not-found-content .RightImage + .RightImage ,
#outerWrapper.search                 .RightImage + .RightImage                             { top: 240px; top: 18.75vw; }

#outerWrapper.page-not-found-content .RightImage + .RightImage + .RightImage,
#outerWrapper.search                 .RightImage + .RightImage + .RightImage               { top: 480px; top: 37.5vw; }

#outerWrapper.page-not-found-content .RightImage + .RightImage + .RightImage + .RightImage,
#outerWrapper.search                 .RightImage + .RightImage + .RightImage + .RightImage { top: 720px; }



.Testimonial {
	background: #707070;
	padding: 1.25em;
	font-size: 1.5em;
	color: #e5e5e5;

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	        box-sizing: border-box;         /* Opera/IE 8+ */	
}
	.Testimonial q {
		display: block;
		font-family: 'HelveticaNeueLTStd-Lt', Arial, Helvetica, sans-serif;	
		margin: 0 0 10px 0;
		padding: 0;
	}
	.Testimonial p {
		margin: 0;
		padding: 0;
		font-size: 0.8em;
		font-family: 'HelveticaNeueLTStd-Md';		
	}
	
.Statement {
	background: #707070;
	padding: 1em;
	font-size: 2em;
	color: #e5e5e5;

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	        box-sizing: border-box;         /* Opera/IE 8+ */	
}
	.Statement q {
		display: block;
		font-family: 'HelveticaNeueLTStd-Lt', Arial, Helvetica, sans-serif;	
		margin: 0 0 10px 0;
		padding: 0;
		quotes: none;
	}
	q::before {

	}
	.Statement p {
		margin: 0;
		padding: 0;
		font-size: .5em;
		font-family: 'HelveticaNeueLTStd-Md';		
	}
	
/* really big screens */
@media screen and (min-width: 1920px) {
	.HeroTitle h1,
	.HeroTitle h1:empty + p,
	.HeroTitle h1.empty + p,
	form.contegro_internetexplorer .HeroTitle h1,
	form.contegro_internetexplorer h1:empty + p,
	form.contegro_internetexplorer h1.empty + p {
		line-height: 1.3em;
	}
}	
	
/* big screens = 5 columns */
@media screen and (min-width: 1441px) {
	#outerWrapper.search .RightImage,
	#outerWrapper.page-not-found-content .RightImage {
		width: 20%;
		right: 20%;
	}
	#outerWrapper.page-not-found-content .RightImage + .RightImage,
	#outerWrapper.search                 .RightImage + .RightImage                             { top: 0;     right: 0;   }

	#outerWrapper.page-not-found-content .RightImage + .RightImage + .RightImage,
	#outerWrapper.search                 .RightImage + .RightImage + .RightImage               { top: 240px; top: 18.75vw; right: 20%; }

	#outerWrapper.page-not-found-content .RightImage + .RightImage + .RightImage + .RightImage,
	#outerWrapper.search                 .RightImage + .RightImage + .RightImage + .RightImage { top: 240px; top: 37.5vw;  right: 0;   }
	
	.FourOhFourContent {
	  padding-left: 20%;
	  width: 60%;
	}	
		.FourOhFourContent h1,
		.FourOhFourContent p {
			margin-left: 20px;
		}
		.FourOhFourContent p {
			width: 50%;
		}
	
}	


/* 3 column layout - grid height is 255px */
@media screen and (max-width: 1259px) {
	.HeroContent #map {
		height: 510px !important;
		height: 50vw;
	}	
	
	#outerWrapper.page-not-found-content .RightContentBox,
	#outerWrapper.search .RightContentBox {
		display: none;
	}	
	
	.FourOhFourContent {
	  padding-left: 30px;
	  padding-bottom: 30px;
	  width: 100%;
	}	
		.FourOhFourContent p {
			width: 33.3333%;
		}	
		
	.Statement {
		font-size: 1.5em;
	}		
}

/* small end of the 3 column layout */
@media screen and (max-width: 920px) and (min-width: 771px) {
	.HeroTitle.WithImageControls h1 {
		font-size: 1.5em;
	}
}


/* 2 column layout */
@media screen and (max-width: 770px) {
	.HeroTitle {
		width: 50%;
	}
	.HeroContent #map { height: 75vw; } /* double grid */
	
	.ContactLocation {
		clear: both;
		float: none;
		width: auto;
		padding: 2em;
	}	
	
	.FourOhFourContent p {
		width: 50%;
	}		
}
	
/* 1 column layout */
@media screen and (max-width: 550px) {
	.HeroTitle,
	.HeroTitle.HalfHeight {
		width: 100%;
		top: 0;
		margin-top: 270px;
		height: auto;
		position: relative;
		padding: 2em;
	}	
	.HeroImage {
		height: 270px;
		position: absolute;
		top: -270px;
		left: 0;
	}	
	.HeroTitle.HalfHeight + .HeroImage {
		height: 360px;
	}	
	.HeroContent #map { height: 150vw; } /* double grid */
	
	.HeroContent #map {
		height: 390px !important;
	}	
	
	.RightImage { display: none; }
	.RightImage.RightYoutubeVideo { display: block; }
	
	.ContactLocation,
	.ContactLocation + .ContactLocation {
		padding: 0 2em;
	}		
	
	.HeroMap.active {
		height: 270px;
		top: -270px;
	}

	.ProjectKeyDetails {
		padding: 1.25em 2em;
		overflow: hidden;
		height: 2em;
		border-top: 1px #C6C6C6 solid;
	}
		.ProjectKeyDetails.expanded {
			height: auto;
		}
	.ProjectKeyDetails h3 {
		margin-right: -1em;
		padding-right: 1em;
		background: url(/templates/_images/key-details-show.png) right 7px no-repeat;
	}
	
	.ProjectKeyDetails.expanded h3 {
		background-image: url(/templates/_images/key-details-hide.png);
		background-position: right 11px;
	}

	.ProjectKeyDetails          h4 { opacity: 0; }
	.ProjectKeyDetails.expanded h4 { opacity: 1; }


	.ProjectKeyDetails          + .DocumentLibraryDocumentList { display: none; }
	.ProjectKeyDetails.expanded + .DocumentLibraryDocumentList { display: block; }


	.HeroImage.HeroSlideshow ul.indicators,
	.HeroImage.HeroSlideshowDesktop ul.indicators {
		left: 2em;
	}
	
	.FourOhFourContent p {
		width: 100%;
	}		


}