/* Hero container for the main homepage */
.two-column-hero {
	position: relative;
	display: block;
}

.two-column-hero .hero-link-box {
	text-decoration: none;
}

.two-column-hero .hero-link-box:hover {
	text-decoration: none;
}

/* Hero BG image */
.two-column-hero .bg-image {
	position: relative;
	display: block;
	overflow: hidden;
	height: 50vh;
	background-size: cover;
}
#wrapper .two-column-hero .bg-image {
	background-size: cover;
}
.two-column-hero .bg-image img {
	display: block;
	margin: 0px auto;
	min-width: 100%;
	min-height: 100%;
}

@media screen and (min-width: 768px) {
	.two-column-hero .bg-image {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		height: auto;
	}
}


/* Hero columns */
.two-column-hero .columns {
	display: block;
}

.two-column-hero .columns .overlay {
	display: block;
}

.two-column-hero .columns .overlay.white {
	background: rgba(255, 255, 255, 1);
}

.two-column-hero .columns .overlay.white.semitransparent {
	background: rgba(255, 255, 255, 0.9);
}

@media screen and (min-width: 768px) {
	.two-column-hero .columns {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		display: flex;
		flex-flow: row nowrap;
	}

	.two-column-hero .columns .overlay {
		display: block;
		width: 50%;
	}
}

/* Hero block (content) */
.two-column-hero .hero-block {
	padding: 40px 80px 40px 0px;
	color: #fff;
}

.two-column-hero .hero-block .category {
	font-weight: bold;
	color: inherit;
}

.two-column-hero .hero-block h1 {
	font-size: 3rem;
	line-height: 1.25em;
	color: inherit;
}

.two-column-hero .hero-block .description {
	color: inherit;
}

.two-column-hero .hero-block strong {
	display: inline-block;
	margin: 20px 0px 0px 0px;
	font-size: 1.25rem;
	line-height: 1.25em;
	color: inherit;
}

.two-column-hero .hero-block .link {
	position: relative;
	display: inline-block;
	margin: 20px 0px 0px 0px;
	font-size: 1.25rem;
	line-height: 1.25em;
	border-bottom: 1px solid #444;
	color: inherit;
}

.two-column-hero .hero-block .link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	display: block;
	width: 21px;
	height: 9px;
	margin-left: 15px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	transform: translateY(-50%);
	transition: margin-left 0.25s ease;
}

.two-column-hero .hero-link-box:hover .hero-block .link::after {
	margin-left: 30px;
}

.two-column-hero .hero-link-box:hover .hero-block .link.static::after {
	margin-left: 15px;
}

.two-column-hero .hero-block .link:hover {
	text-decoration: none;
	border-bottom: 1px solid #e1301e;
}

.two-column-hero .hero-block .link.red,
.two-column-hero .hero-block .link.static {
	color: #fff;
	border-bottom: 1px solid #fff;
}

.two-column-hero .hero-block .link::after {
	background-image: url("data:image/svg+xml,%3Csvg width='21' height='9' viewBox='0 0 21 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.1062 4.70831L15.8687 7.08805L16.75 8.02271L20.5 4.04543L16.75 0.0681593L15.8687 1.00282L18.1062 3.38255L0.5 3.38255L0.5 4.70831L18.1062 4.70831Z' fill='%23fff'/%3E%3C/svg%3E%0A"); /* White */
}

@media screen and (min-width: 768px) {
	.two-column-hero .hero-block {
		color: #2d2d2d;
	}
	
	.two-column-hero .hero-block .link.red {
		color: #e1301e;
		border-bottom: 1px solid #e1301e;
	}
	
	.two-column-hero .hero-block .link.static {
		color: #2d2d2d;
		border-bottom: 1px solid transparent;
		transition: all .5s ease;
	}
	
	.two-column-hero .hero-link-box:hover .hero-block .link.static {
		color: #e0301e;
		border-color: #e0301e;
	}
	
	.two-column-hero .hero-block .link::after {
		background-image: url("data:image/svg+xml,%3Csvg width='21' height='9' viewBox='0 0 21 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.1062 4.70831L15.8687 7.08805L16.75 8.02271L20.5 4.04543L16.75 0.0681593L15.8687 1.00282L18.1062 3.38255L0.5 3.38255L0.5 4.70831L18.1062 4.70831Z' fill='%23333'/%3E%3C/svg%3E%0A"); /* Dark */
	}
	
	.two-column-hero .hero-block .link.red::after,
	.two-column-hero .hero-block .link.static::after {
		background-image: url("data:image/svg+xml,%3Csvg width='21' height='9' viewBox='0 0 21 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.1062 4.70831L15.8687 7.08805L16.75 8.02271L20.5 4.04543L16.75 0.0681593L15.8687 1.00282L18.1062 3.38255L0.5 3.38255L0.5 4.70831L18.1062 4.70831Z' fill='%23e1301e'/%3E%3C/svg%3E%0A"); /* Red */
	}
}

@media screen and (min-width: 992px) and (max-width: 1399px) {
	.two-column-hero .hero-block h1 {
		font-size: 3.75rem;
		line-height: 1em;
	}
}

@media screen and (min-width: 1400px) {
	.two-column-hero .hero-block h1 {
		font-size: 4.5rem;
		line-height: 5rem; /* aprox 1.11em */
	}
}

@media screen and (min-width: 768px) and (max-width: 840px),
screen and (min-width: 992px) and (max-width: 1060px),
screen and (min-width: 1200px) and (max-width: 1260px),
screen and (min-width: 1400px) and (max-width: 1450px) {
	.two-column-hero .hero-block {
		padding-top: 60px;
	}
}

/* Blank hero container for the Job search page */
.blank-hero {
	position: relative;
	background: #fff;
}

.blank-hero .hero-block {
	padding: 40px 0px 65px 0px;
}

@media (main-width: 512px) {
	.blank-hero .hero-block {
		padding-bottom: 50px;
	}
}

@media screen and (min-width: 768px) and (max-width: 840px),
screen and (min-width: 992px) and (max-width: 1060px),
screen and (min-width: 1200px) and (max-width: 1260px),
screen and (min-width: 1400px) and (max-width: 1450px) {
	.blank-hero .hero-block {
		padding-top: 60px;
	}
}

/* Common tweaks */
.strategy-color-scheme .text-component p .btn.btn--transparent.btn-cta.btn-cta--red:not(:hover) {
	background-color: #000;
}

.strategy-color-scheme .text-component p .btn.btn--transparent.btn-cta--chevron.btn-cta--red:hover i,
.strategy-color-scheme .text-component p .btn.btn--transparent.btn-cta--chevron.btn-cta--red:focus i,
.strategy-color-scheme .text-component p .btn.btn--transparent.btn-cta--chevron.btn-cta--red:active i {
	background-image: url(/etc.clientlibs/pwc/clientlibs/rebrand-clientlibs/components-colors/resources/images/cta-btn-images/Right-Chevron-black.svg);
}

/* ---------------------------------------------------------------------------- */

/* Animated pixels */
.pixels {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.pixels.mobile-only {
	display: block;
}

.pixels.desktop-only {
	display: none;
}

@media (min-width: 768px) {
	.pixels.mobile-only {
		display: none;
	}

	.pixels.desktop-only {
		display: block;
	}
}

.pixels div {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	background: #fff;
	transition: transform .4s ease-in-out;
	transform: scale(0);
}

.pixels div.pxshow {
	transform: scale(1);
}

@media (max-width: 767px) {
	.pixels div {
		width: 32px;
		height: 32px;
	}
}

/* Hero Pixel positions */
.two-column-hero .pixels div:nth-child(1) {
	background: #ffb600;
	left: 0px;
	top: 0px;
}

.two-column-hero .pixels div:nth-child(2) {
	background: #e0301e;
	left: 0px;
	top: 50px;
}

.two-column-hero .pixels div:nth-child(3) {
	left: calc(50% + 50px);
	bottom: 50px;
}

.two-column-hero .pixels div:nth-child(4) {
	left: 50%;
	bottom: 0px;
}

.two-column-hero .pixels div:nth-child(5) {
	background: #db536b;
	top: 50px;
	right: 50px;
}

.two-column-hero .pixels div:nth-child(6) {
	background: #ec8c01;
	top: 100px;
	right: 100px;
}

.two-column-hero .pixels div:nth-child(7) {
	background: #ffb600;
	bottom: 200px;
	right: 100px;
}

@media (max-width: 767px) {
	.two-column-hero .pixels div:nth-child(2) {
		top: 32px;
	}

	.two-column-hero .pixels div:nth-child(3) {
		left: calc(50% + 32px);
		bottom: 32px;
	}

	.two-column-hero .pixels div:nth-child(5) {
		top: 32px;
		right: 32px;
	}

	.two-column-hero .pixels div:nth-child(6) {
		top: 64px;
		right: 64px;
	}

	.two-column-hero .pixels div:nth-child(7) {
		bottom: 96px;
	}
}

@media screen and (min-width: 768px) and (max-width: 840px),
screen and (min-width: 992px) and (max-width: 1060px),
screen and (min-width: 1200px) and (max-width: 1260px),
screen and (min-width: 1400px) and (max-width: 1450px) {
	.two-column-hero .pixels div:nth-child(2) {
		left: 50px;
		top: 0px;
	}
}

/* Overview Pixel positions */
#overview .pixels,
.stripe .pixels {
	position: relative;
	margin-bottom: -20px;
	width: 100%;
	height: 125px;
}

#overview .pixels div:nth-child(1),
.stripe .pixels div:nth-child(1) {
	background: #db536b;
	left: 0px;
	top: 25px;
}

#overview .pixels div:nth-child(2),
.stripe .pixels div:nth-child(2) {
	background: #111;
	left: 50px;
	top: 75px;
}

#overview .pixels div:nth-child(3),
.stripe .pixels div:nth-child(3) {
	background: #111;
	left: calc(150px - 25px);
	top: 25px;
	width: calc(50px / 2);
	height: calc(50px / 2);
}

#overview .pixels div:nth-child(4),
.stripe .pixels div:nth-child(4) {
	background: #ffb600;
	right: 0px;
	top: 75px;
}

#overview .pixels div:nth-child(5),
.stripe .pixels div:nth-child(5) {
	background: #e1301e;
	right: 50px;
	top: 50px;
	width: calc(50px / 2);
	height: calc(50px / 2);
}

#overview .pixels div:nth-child(6),
.stripe .pixels div:nth-child(6) {
	background: #feb500;
	top: 100px;
	right: 125px;
	width: calc(50px / 4);
	height: calc(50px / 4);
}

/* Blank hero job search Pixel positions */
.blank-hero .pixels div:nth-child(1) {
	background: #ffb600;
	left: 0px;
	top: 0px;
}

.blank-hero .pixels div:nth-child(2) {
	background: #e0301e;
	left: 0px;
	top: 50px;
}

.blank-hero .pixels div:nth-child(3) {
	display: none;
	background: #ffb600;
	left: calc(50% + 100px);
	bottom: 0px;
}

.blank-hero .pixels div:nth-child(4) {
	background: #db536b;
	bottom: 32px;
	right: 16px;
}

.blank-hero .pixels div:nth-child(5) {
	background: #ec8c01;
	bottom: 0px;
	right: 48px;
}

@media (max-width: 767px) {
	.blank-hero .pixels div:nth-child(2) {
		top: 0px;
		left: 32px;
	}
}

@media (min-width: 512px) {
	.blank-hero .pixels div:nth-child(3) {
		display: block;
	}
	
	.blank-hero .pixels div:nth-child(4) {
		bottom: auto;
		top: 0px;
	}

	.blank-hero .pixels div:nth-child(5) {
		bottom: auto;
		top: 32px;
	}
}

@media (min-width: 768px) {
	.blank-hero .pixels div:nth-child(4) {
		right: 25px;
	}

	.blank-hero .pixels div:nth-child(5) {
		right: 75px;
		top: 50px;
	}
}

@media screen and (min-width: 768px) and (max-width: 840px),
screen and (min-width: 992px) and (max-width: 1060px),
screen and (min-width: 1200px) and (max-width: 1260px),
screen and (min-width: 1400px) and (max-width: 1450px) {
	.blank-hero .pixels div:nth-child(2) {
		left: 50px;
		top: 0px;
	}
}