.pixels {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	z-index: 10;
}

.pixels .pixel {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #fff;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pixels .pixel.opaque {
	opacity: 0;
}

.pixels .pixel.fadeIn {
	opacity: 1;
	animation: fadeIn 2s;
}

@media (min-width: 980px) and (max-width: 1199px), (min-width: 1400px) {
	.pixels .pixel {
		width: 80px;
		height: 80px;
	}
}


.heropixels .pixels .pixel:nth-child(1),
.heropixels .pixels .pixel:nth-child(2) {
	top: 0px;
	left: 0px;
}

.heropixels .pixels .pixel:nth-child(1) {
	display: none;
}

.heropixels .pixels .pixel:nth-child(2) {
	transform: translate(0px, 0px);
	background: #db3657;
}

.heropixels .pixels .pixel:nth-child(3),
.heropixels .pixels .pixel:nth-child(4),
.heropixels .pixels .pixel:nth-child(5) {
	top: 0px;
	right: 0px;
	background: #d1491b;
}

.heropixels .pixels .pixel:nth-child(4) {
	transform: translate(0%, 100%);
	background: #ed8b24;
}

.heropixels .pixels .pixel:nth-child(5) {
	transform: translate(-100%, 200%);
	background: #ffb62b;
}

.heropixels .pixels .pixel:nth-child(6) {
	bottom: 0px;
	right: 0px;
	background: #ffb62b;
}

@media(min-width: 768px) {
	.heropixels .pixels .pixel:nth-child(1) {
		display: block;
	}

	.heropixels .pixels .pixel:nth-child(2) {
		transform: translate(100%, 100%);
	}
}



.hero-title .pixels .pixel {
	top: 0px;
	right: 0px;
}

.pixelated .hero-title .hero-title-textpanel > * {
	color: inherit;
}

@media(max-width: 767px) {
	.pixelated .hero-title .hero-title-textpanel {
		padding-top: 90px;
		padding-right: 60px;
	}
}


body .hero-title.our-business {
	background: #d93955;
}

.hero-title.our-business .pixels .pixel:nth-child(1) {
	transform: translate(-300%, 0%);
	background: #2d2d2d;
}

.hero-title.our-business .pixels .pixel:nth-child(2) {
	transform: translate(-100%, 0%);
	background: #ffb62b;
}

.hero-title.our-business .pixels .pixel:nth-child(3) {
	transform: translate(0%, 100%);
	background: #fff;
}


body .hero-title.experienced-careers {
	color: #333;
	background: #ffb600;
}

.hero-title.experienced-careers .pixels .pixel:nth-child(1) {
	transform: translate(-300%, 0%);
	background: #2d2d2d;
}

.hero-title.experienced-careers .pixels .pixel:nth-child(2) {
	transform: translate(-200%, 100%);
	background: #fff;
}

.hero-title.experienced-careers .pixels .pixel:nth-child(3) {
	transform: translate(-100%, 0%);
	background: #db3657;
}


body .hero-title.student-careers,
body .hero-title.early-careers {
	color: #333;
	background: #ec8c01;
}

.hero-title.student-careers .pixels .pixel:nth-child(1),
.hero-title.early-careers .pixels .pixel:nth-child(1) {
	transform: translate(-100%, 0%);
	background: #d1491b;
}

.hero-title.student-careers .pixels .pixel:nth-child(2),
.hero-title.early-careers .pixels .pixel:nth-child(2) {
	transform: translate(0%, 300%);
	background: #2d2d2d;
}

.hero-title.student-careers .pixels .pixel:nth-child(3),
.hero-title.early-careers .pixels .pixel:nth-child(3) {
	transform: translate(-100%, 400%);
	background: #ffb62b;
}


body .hero-title.flexible-contractor-careers  {
	background: #d04a03;
}

.hero-title.flexible-contractor-careers .pixels .pixel:nth-child(1) {
	transform: translate(-200%, 0%);
	background: #fff;
}

.hero-title.flexible-contractor-careers .pixels .pixel:nth-child(2) {
	top: auto; 
	bottom: 0px;
	transform: translate(0%, -100%);
	background: #2d2d2d;
}

.hero-title.flexible-contractor-careers .pixels .pixel:nth-child(3) {
	top: auto; 
	bottom: 0px;
	transform: translate(-100%, 0%);
	background: #ffb62b;
}


.featurecontent .row > div:nth-child(1) .pixels .pixel:nth-child(1),
.featurecontent .row > div:nth-child(1) .pixels .pixel:nth-child(2),
.featurecontent .row > div:nth-child(1) .pixels .pixel:nth-child(3) {
	top: 0px;
	left: 0px;
	transform: translate(0%, 100%);
	background: #ffb62b;
}

.featurecontent .row > div:nth-child(1) .pixels .pixel:nth-child(2) {
	transform: translate(100%, 0%);
}

.featurecontent .row > div:nth-child(1) .pixels .pixel:nth-child(3) {
	transform: translate(300%, 0%);
	background: #2d2d2d;
}


.featurecontent .row > div:nth-child(2) .pixels .pixel:nth-child(1),
.featurecontent .row > div:nth-child(2) .pixels .pixel:nth-child(2),
.featurecontent .row > div:nth-child(2) .pixels .pixel:nth-child(3) {
	top: 0px;
	right: 0px;
	transform: translate(-200%, 0%);
	background: #2d2d2d;
}

.featurecontent .row > div:nth-child(2) .pixels .pixel:nth-child(2) {
	transform: translate(-0%, 0%);
	background: #db3657;
}

.featurecontent .row > div:nth-child(2) .pixels .pixel:nth-child(3) {
	transform: translate(-100%, 100%);
	background: #fff;
}


.featurecontent .row > div:nth-child(3) .pixels .pixel:nth-child(1) {
	top: 0px;
	left: 0px;
	transform: translate(0%, 100%);
	background: #ffb62b;
}

.featurecontent .row > div:nth-child(3) .pixels .pixel:nth-child(2),
.featurecontent .row > div:nth-child(3) .pixels .pixel:nth-child(3) {
	top: 0px;
	right: 0px;
}

.featurecontent .row > div:nth-child(3) .pixels .pixel:nth-child(2) {
	transform: translate(-200%, 0%);
	background: #d1491b;
}

.featurecontent .row > div:nth-child(3) .pixels .pixel:nth-child(3) {
	background: #2d2d2d;
}


.featurecontent .row > div:nth-child(4) .pixels .pixel:nth-child(1) {
	top: 0px;
	left: 0px;
	transform: translate(100%, 0%);
	background: #ffb62b;
}

.featurecontent .row > div:nth-child(4) .pixels .pixel:nth-child(2),
.featurecontent .row > div:nth-child(4) .pixels .pixel:nth-child(3) {
	top: 0px;
	right: 0px;
}

.featurecontent .row > div:nth-child(4) .pixels .pixel:nth-child(2) {
	transform: translate(-100%, 0%);
	background: #2d2d2d;
}

.featurecontent .row > div:nth-child(4) .pixels .pixel:nth-child(3) {
	transform: translate(0%, 100%);
	background: #fff;
}