.hero:before {
	background: url("/img/hero.jpg") no-repeat center center;
	background-size: cover;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	animation: heroPulse 7s ease-out infinite alternate;
}

/* DELETE IF NO PNG MASK FOR HERO ------------------------------------------------\/ */
.hero:after {
	background: url("/img/hero.png") no-repeat center center;
	background-size: cover;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	animation: heroPulse 7s ease-out infinite alternate;
}

/* DELETE IF NO PNG MASK FOR HERO ------------------------------------------------/\*/

@media screen and (max-width: 900px) {
	.hero:before,
	.hero:after {
		background-position: 80% 0;
	}
}
@media screen and (max-width: 600px) {
	.hero:before,
	.hero:after {
		background-position: 70% 0;
	}
}
@media screen and (max-width: 500px) {
	.hero:before,
	.hero:after {
		background-position: 60% 0;
	}
}

@media screen and (max-height: 450px) and (orientation: landscape) {
	.hero:before,
	.hero:after {
		background-size: 150%;
		background-position: 90% 40%;
	}
}

.img-1,
.img-2,
.img-3,
.img-4,
.img-5,
.img-6,
.img-7,
.img-8 {
	background-position: center;
}

.img-1 {
	background-image: url("../logos/img/img1.gif");
}
.img-2 {
	background-image: url("../photos/img/img2.jpg");
	background-position: 50% 15%;
}
.img-3 {
	background-image: url("../motion/img/img3.gif");
}
.img-4 {
	background-image: url("../print/img/img2.jpg");
	background-position: 50% 15%;
}
.img-5 {
	background-image: url("../motion/img/img2.gif");
}
.img-6 {
	background-image: url("../photos/img/img6.jpg");
	background-position: 50% 5%;
}
.img-7 {
	background-image: url("../print/img/hero.jpg");
}
.img-8 {
	background-image: url("../logos/img/img8.gif");
	background-position: 25% 50%;
}