#industryBannerSection{
    --standard-left-margin		: 14%;
    --standard-juniper-orange	: #EA7600;
}

.industryBannerSubview {
    position	: relative;
    width		: 100%;
    height		: 576px;
    overflow	: hidden;
}

.industryBannerBackground {
    width		: 100%;
    height		: 100%;
    object-fit	: cover;
}

.pageTitle {
    position		: absolute;
    top				: 50%;
    left			: var(--standard-left-margin);
    transform		: translateY(-50%);
    max-width		: 575px;

    font-family		: 'DaxOT', sans-serif;
    font-size		: 85px;
    font-weight		: 100;
    line-height		: 95px;
    letter-spacing	: 1px;
    color			: #FFFFFF;
    text-shadow		: 3px 3px 10px #000000BF;
    opacity			: 0.8;
}

.h1Container {
	position			: absolute;
	top					: 100%;
	left				: var(--standard-left-margin);
	transform			: translateY(-100%);
	width				: calc(100vw - var(--standard-left-margin));
	height				: 97px;

	background-color	: var(--standard-juniper-orange);
}

.page-h1 {
	position		: absolute;
	top				: 50%;
	transform		: translateY(-50%);
	padding-left	: 34px;
	padding-right	: 34px;
	font-family		: 'bebas-neue-pro', sans-serif;
	font-style		: normal;
	font-weight		: 600;
	font-size		: 38px;
	line-height		: 1;
	letter-spacing	: 10px;
	color			: white;
	text-transform	: uppercase;
}





/*------------------------------------------------------------------------------------------------*\

| xxs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	#industryBannerSection{
		--standard-left-margin		: 0%;
	}
	.pageTitle {
		left			: 7%;
		max-width		: 90%;
		text-align		: center;
		font-size		: 38px;
		line-height		: 46px;
	}

	.h1Container {
		height			: 160px;
	}
	.page-h1 {
		padding-left	: 0;
		left			: 7%;
		font-size		: 20px;
	}
}

/*------------------------------------------------------------------------------------------------*\

| xs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
	#industryBannerSection{
		--standard-left-margin		: 0%;
	}
	.pageTitle {
		left			: 10%;
		max-width		: 80%;
		font-size		: 58px;
		text-align		: center;
	}

	.h1Container {
		height			: 112px;
	}
	.page-h1 {
		padding-left	: 0;
		left			: 7%;
		font-size		: 24px;
	}
}

/*------------------------------------------------------------------------------------------------*\

| sm breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
	#industryBannerSection{
		--standard-left-margin		: 0%;
	}
	.pageTitle {
		left			: 10%;
		max-width		: 80%;
		text-align		: center;
	}

	.h1Container {
		height			: 128px;
	}
}

/*------------------------------------------------------------------------------------------------*\

| md breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#industryBannerSection{
		--standard-left-margin		: 0%;
	}
	.pageTitle {
		left			: 10%;
		max-width		: 80%;
		text-align		: center;
	}

	.h1Container {
		height				: 112px;
	}
}

/*------------------------------------------------------------------------------------------------*\

| lg breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1921px) {
  /* Your CSS rules here */
}