@charset "UTF-8";
/*
 * Essentee Hero Fam Docs Styles
 */

/* ---- Animations ---- */
@keyframes slidein-up{
	from {
		opacity: 0;
		transform:translate(0,150%);
	}
	
	to {
		opacity: 1;
		transform:translate(0,0);
	}
}

@keyframes slidein-down{
	from {
		opacity: 0;
		transform:translate(0,-100%);
	}
	
	to {
		opacity: 1;
		transform:translate(0,0);
	}
}

/* ----- Styling ----- */
 .esshero{
 /* The image to use is set in the module params */
 	position: relative;
 	/* Position it */
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
	height: 550px;  /* Adjust this on breakponts */
 }

.hero-text {
 	text-align: center;
 	position: absolute;
 	top:50%;
 	left:50%;
 	transform: translate(-50%,-50%);
 	color: #fff;
 	width:80%;
}

.esshero .heading{
	font-size:5.5em;
	text-shadow: 1px 1px 3px #666;
	animation-name: slidein-down;
	animation-duration:1.5s;
	margin-bottom:.5em;
}

.smallheading .esshero .heading {
	font-size: 3.2em;
}

.esshero .text{
	font-size:2.2em;
	line-height: 1.5em;
	text-shadow: 1px 1px 3px #666;
	animation-name: slidein-up;
	animation-duration:1.8s;
}

.esshero a.btn-hero {
	background: rgba(0,0,0,.5);
	border: 2px solid #fff;
	padding: 8px 16px;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
}

.esshero a.btn-hero:hover {
	background: rgba(100,100,100,.25);
}