/*HERO IMAGE STYLING*/
.heroImage {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.heroImage picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ARROW to Scroll down to content */
/* Effect used for #scroll-to-content */
@keyframes pulsate {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}
#scroll-to-content {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 5;
	cursor: pointer;
	height: 1.5em;
	width: 3.5em;
	font-size: 16px;
	font-size: 1rem;
	overflow: hidden;
	opacity: 0.5;
	transform: translateX(-50%);
	animation: pulsate 1.5s ease-out infinite;
}
#scroll-to-content:before {
	content: "";
	display: block;
	position: absolute;
	left: 15px;
	bottom: 10px;
	height: 30px;
	width: 30px;
	border: 5px solid #fff;
	transform: rotate(45deg);
}
#scroll-to-content:hover {
	opacity: 1;
}
#scroll-to-content {
scroll-padding-top: 150px;
}
.screen-reader-text {
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}