body, html {
    height: 100%;
    margin: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	font-size: 100%;
}

h1 {
	font-size: 2.5em;
	text-align: center;
	text-transform: uppercase;
	margin: 1em 0 0.1em 0;
}

h3 {
	font-size: 1.1em;
	text-align: left;
}


hr {
	height: 0.2em;
	border: 0;
	color: #f26921;
	background: #f26921;
	background-color: #f26921;
}

a:link {
	color: #f26921;
	text-decoration: none;
}

a:visited {
	color: #f26921;
	text-decoration: none;
}

a:active {
	color: #f26921;
}

a:hover {
	color: #f26921;
	text-decoration: underline;
}

.background-image-lazy { 
	/*image is loaded from js in html code */
	background-color: #ded1c6;
	
	/* Full height */
	height: 100%; 
	
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}


.hero-text {
	text-align: center;
	position: absolute;
	font-size: 4em;
	font-weight: 800;
	text-transform: uppercase;
	line-height: .8;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #0d96de;

	/* reverse text color */
	mix-blend-mode: difference;
}

#hero1 {
	font-size: 131%;
}

#hero2 {
	font-size: 112%;
}

#hero3 {
	font-size: 100%;
}


/* For smaller devices */
@media (max-width: 500px) {
  .hero-text {font-size: 3em;}
}

@media (max-width: 319px) {
  .hero-text {font-size: 2em;}
}