/*outer container styling*/
.hero-box-photo, .hero-box-illustration {
	display: flex;
	flex-direction: column;
	padding: 9px 20px;
	position: absolute;
	width: 690px;
	height: initial;
	left: 75px;
	top: 80px;
}

.hero-box-photo, .hero-box-illustration-intermediaries {
	display: flex;
	flex-direction: column;
	padding: 9px 20px;
	position: absolute;
	width: auto;
	height: initial;
	top: 50px;
}
.hero-box-photo {background: rgba(255, 255, 255, 0.8);}

.hero-box-illustration, .hero-box-illustration-intermediaries {background: initial;}

.hero-box-photo_inner, .hero-box-illustration_inner {padding: 0;}
.hero-box-illustration-intermediaries.hero-box-illustration-inner{width: auto;}
.hero-box-illustration_inner {max-width: 600px;}

.hero-box-photo h1, .hero-box-illustration h1, .hero-box-illustration-intermediaries h1 {
	font-style: normal;
	font-weight: 200; /* original value : normal */
	font-size: 50px;
	line-height: 55px;
	position: relative;
}

.hero-box-photo h1, .hero-box-photo_description, .hero-box-photo_posttext {color: #000000;}
.hero-box-illustration h1, .hero-box-illustration-intermediaries h1, .hero-box-illustration_description, .hero-box-illustration_posttext {color: #182745;}

/*colour toggles for text*/
/*blue*/
#hero-box-blue h1, #hero-box-blue p, #hero-box-blue h1 > a, #hero-box-blue p > a {color: #182745;}
/*white*/
#hero-box-white h1, #hero-box-white p, #hero-box-white h1 > a, #hero-box-white p > a {color: #fff;}
/*yellow*/
#hero-box-yellow h1, #hero-box-yellow p, #hero-box-yellow h1 > a, #hero-box-yellow p > a {color: #FCD900;}
/*orange*/
#hero-box-orange h1, #hero-box-orange p, #hero-box-orange h1 > a, #hero-box-orange p > a {color: #F0AB00;}

.hero-box-photo_description, .hero-box-illustration_description {
	font-size: 22px;
	font-weight: 300;
	line-height: 24px;
	margin-top: 0;
	position: relative;
	margin: 15px 0 15px 0;
}

.hero-box-photo_inner > .btn, .hero-box-illustration_inner > .btn {display: inline;}

.hero-box-photo-btn, .hero-box-illustration-btn {
	display: initial;
	padding: 7.5px 82px 7.5px 10px;
	height: 30px;
}

.hero-box-photo_posttext, .hero-box-illustration_posttext {
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	margin: 30px 0 0 0;
	padding-bottom: 0;
}

.hero-img-photo, .hero-img-illustration {height: 450px;}

.hero-img-photo {
	/*background-image: url("/_resources/img/hero/tests/hero-banner-photo-test.jpg");*/
	background-repeat: no-repeat;
  	background-position: right center; 
  	background-size: cover;
}

.hero-img-illustration {
	background-color: #182745;
	/*background-image: url("/_resources/img/hero/tests/hero-banner-illustration-test.jpg");*/
	background-repeat: no-repeat;
  	background-position: right center; 
  	background-size: cover;
}

.desktopHide {display: none;}

/*font variations at different media query sizes*/
@media screen and (min-width: 1001px) and (max-width: 1400px){
	.hero-box-photo h1, .hero-box-illustration h1, .hero-box-illustration-intermediaries h1  {
		font-size: 40px;
		line-height: 45px;
	}
	.hero-box-photo_description, .hero-box-illustration_description {
		font-size: 20px;
		line-height: 22px;
	}
}

/*text box positioning - photo box*/

/*text box positioning - illustraton*/
@media screen and (min-width: 1051px) and (max-width: 1200px){.hero-box-illustration, .hero-box-illustration-intermediaries {left: 40px; top: 40px;}}

/*image height media queries*/
@media screen and (min-width: 1001px) and (max-width: 1200px){.hero-img-photo, .hero-img-illustration {height: 350px;}}

@media screen and (min-width: 1001px) and (max-width: 1200px){
	.hero-box-photo {
		left: 50px;
		top: 50px;
	}
}

@media screen and (min-width: 701px) and (max-width: 1200px){
	 hero-box-photo, .hero-box-illustration, .hero-box-illustration-intermediaries {width: auto;}
	.hero-img-photo, .hero-img-illustration {width: auto;}
}

@media screen and (min-width: 701px) and (max-width: 1000px){
	.hero-box-photo {
		width: 60%;
		left: 50px;
	}
}

@media screen and (min-width: 701px) and (max-width: 1050px){
	.hero-box-illustration, .hero-box-illustration-intermediaries {
    	left: 30px;
    	top: 40px;
	}
}

@media screen and (max-width: 1024px){
	.hero-box-illustration_inner > h1 > br {display: none;}
}

@media screen and (max-width: 1000px){
	.hero-box-photo h1, .hero-box-illustration h1, .hero-box-illustration-intermediaries h1 {
		font-size: 30px;
		line-height: 37px;
	}
	.hero-box-photo_description, .hero-box-illustration_description {
		font-size: 20px;
		line-height: 22px;
	}
	.hero-box-photo-btn, .hero-box-illustration-btn {font-size: 18px;}

	.hero-box-photo_posttext, .hero-box-illustration_posttext {
		font-size: 16px;
		line-height: 19px;
	}
}

@media screen and (min-width: 701px) and (max-width: 1000px){
	.hero-img-photo, .hero-img-illustration {height: 300px;}
}

@media screen and (min-width: 701px) and (max-width: 1000px){
    .hero-box-photo {
	    top: 50px;
		left: 45px;
		width: 60%;
	}
}

@media screen and (min-width: 701px) and (max-width: 1000px){
	.hero-box-photo, .hero-box-illustration, .hero-box-illustration-intermediaries {
    	width: 50%;
    	left: 40px;
		top: 50px;
	}
}

@media screen and (min-width: 701px) and (max-width: 1000px){
	.hero-box-illustration, .hero-box-illustration-intermediaries  {
    	width: 42%;
	}
	.hero-box-photo_description, .hero-box-illustration_description {margin: 5px 0 5px 0;}
}

@media screen and (max-width: 800px){
	.hero-box-photo h1, .hero-box-illustration h1, .hero-box-illustration-intermediaries h1 {
		font-size: 30px;
    	line-height: 32px;
    }
    .hero-box-photo_description, .hero-box-illustration_description {
    	margin: 5px 0 5px 0;
    	padding-bottom: 10px;
    }
    .hero-box-photo_posttext {
		margin: 15px 0 0 0;
    }
}

@media screen and (min-width: 701px) and (max-width: 800px){
	.hero-box-photo, .hero-box-illustration, .hero-box-illustration-intermediaries {top: 60px; padding: 20px;}  
}

@media screen and (max-width: 700px){
	.hero-box-photo, .hero-box-illustration, .hero-box-illustration-intermediaries {
		width: auto;
		background-color: #fff;
		left: 0;
		position: relative;
		padding: 10px;
		top: 0;
		margin-top: 10px;
	}

	.hero-box-photo_description, .hero-box-illustration_description {margin: 5px 0 5px 0;}

	.hero-img-photo {
		/*background-image: url("/_resources/img/hero/tests/hero-banner-photo-test-mobile.jpg");*/
		background-position: center;
	}
	.hero-img-illustration {
		/*background-image: url("/_resources/img/hero/tests/hero-banner-illustration-test-mobile.jpg");*/
		background-position: center;
	}

	.hero-box-photo_description, .hero-box-illustration_description {
		font-size: 18px;
		line-height: 20px;
		margin: 7px 0 7px 0;
	}
	.hero-box-photo_posttext, .hero-box-illustration_posttext {margin: 20px 0 0 0;}

	.hero-box-illustration h1, .hero-box-illustration-intermediaries h1, .hero-box-illustration_description, .hero-box-illustration_posttext {color: #000;}/*change all illustration text elements to dark blue*/

	.hero-img-photo, .hero-img-illustration {/*image coding change*/
		width: 100%;
		margin: 0;
		background-size: cover;
	}

	.desktopHide {display: block;}
	.mobileHide {display: none;}
	
	.l-col-0 {padding-bottom: 5px;}/*homepage component repositioning*/
}

@media screen and (max-width: 700px){
	.hero-img-photo,
	.hero-img-illustration {height: 250px;}
}

@media screen and (min-width: 320px) and (max-width: 700px){
	.hero-img-illustration {width: auto;}
}

/*no underline for hero title and description text*/
#hero-box-blue a, #hero-box-blue a:hover, #hero-box-blue h1 > a:active, #hero-box-blue a:link, #hero-box-blue a:visited, 
#hero-box-orange a, #hero-box-orange a:hover, #hero-box-orange h1 > a:active, #hero-box-orange a:link, #hero-box-orange a:visited, 
#hero-box-white a, #hero-box-white a:hover, #hero-box-white a:active, #hero-box-white a:link, #hero-box-white a:visited,
#hero-box-yellow a, #hero-box-yellow a:hover, #hero-box-yellow h1 > a:active, #hero-box-yellow a:link, #hero-box-yellow a:visited {
	text-decoration: none;
}

/*text colour reversion for hero banner (yellow, orange & white) at tablet/mobile breakpoints (due to white background)*/
@media screen and (max-width: 700px) {
	.hero-box-illustration#hero-box-yellow h1, .hero-box-illustration-intermediaries#hero-box-yellow h1, .hero-box-illustration#hero-box-yellow p, .hero-box-illustration-intermediaries#hero-box-yellow p, .hero-box-illustration#hero-box-yellow h1 > a, .hero-box-illustration-intermediaries#hero-box-yellow h1 > a, .hero-box-illustration#hero-box-yellow p > a,  .hero-box-illustration-intermediaries#hero-box-yellow p > a,
	.hero-box-illustration#hero-box-orange h1, .hero-box-illustration-intermediaries#hero-box-orange h1, .hero-box-illustration#hero-box-orange p, .hero-box-illustration-intermediaries#hero-box-orange p, .hero-box-illustration#hero-box-orange h1 > a, .hero-box-illustration-intermediaries#hero-box-orange h1 > a, .hero-box-illustration#hero-box-orange p > a, .hero-box-illustration-intermediaries#hero-box-orange p > a,
	.hero-box-illustration#hero-box-white h1, .hero-box-illustration-intermediaries#hero-box-white h1, .hero-box-illustration#hero-box-white p, .hero-box-illustration-intermediaries#hero-box-white p, .hero-box-illustration#hero-box-white h1 > a, .hero-box-illustration-intermediaries#hero-box-white h1 > a, .hero-box-illustration#hero-box-white p > a, .hero-box-illustration-intermediaries#hero-box-white p > a,
	.hero-box-photo#hero-box-yellow h1, .hero-box-photo#hero-box-yellow p, .hero-box-photo#hero-box-yellow h1 > a, .hero-box-photo#hero-box-yellow p > a,
	.hero-box-photo#hero-box-orange h1, .hero-box-photo#hero-box-orange p, .hero-box-photo#hero-box-orange h1 > a, .hero-box-photo#hero-box-orange p > a, 
	.hero-box-photo#hero-box-white h1, .hero-box-photo#hero-box-white p, .hero-box-photo#hero-box-white h1 > a, .hero-box-photo#hero-box-white p > a {
		color: #182745;
	}
}

/*header login override bug fix*/
@media screen and (min-width: 700px) {
	.inner-head > p.site-logo {padding-bottom: 20px;}

	#login-mobile {display: none;}
}
@media screen and (min-width: 790px) and (max-width: 1024px){
	 .inner-head > p.site-logo {padding-bottom: 20px;}
}
@media screen and (min-width: 700px) and (max-width: 790px){
	 .inner-head > p.site-logo {padding-bottom: 0px;}
}

@media screen and (min-width: 43.75em) {.neg-m {margin-top: 20px;}} /* 700px breakpoint */