.super-hero-header-slug {
	width: 100%;
	background-size: cover;
	height: 320px;
	position: relative;
	background-position: center;
}

.super-hero-header {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.super-hero-header.with-subtitle {
	top: -15%;
}

.super-hero-header.right-1 {
	right: 55%;
}

.super-hero-header.right-2 {
	left: 35%;
}

.super-hero-header.left-1 {
	left: 55%;
}

.super-hero-header.left-2 {
	right: 35%;
}

.super-hero-button-slug.right {
	margin-left: -27%;
}

.super-hero-button-slug.left {
	margin-left: 28%;
}


.super-hero-title {
	position: absolute;
	margin: auto;
	top: 37%;
	width: 100%;
	font-size: 4em;
	line-height: 1em;
  font-weight: 400;
  color: white;
  text-transform: uppercase;
}

.super-hero-title > div {
	text-align: center;
}

.super-hero-subtitle {
	position: absolute;
	margin: auto;
	bottom: 36%;
	width: 100%;
	font-size: 2em;
  color: white;
  text-transform: uppercase;
}

.super-hero-subtitle > div {
	text-align: center;
}

.super-hero-sponsor {
	position: absolute;
	margin: auto;
	top: 20px;
	right: 20px;
	width: 150px;
}

.super-hero-button-slug {
	position: absolute;
	margin: auto;
	bottom: 10%;
	width: 100%;
	text-align: center;
}

a.super-hero-button {
	font-size: 1.3em;
	padding: 4px 10px;
	color: #FFFFFF !important;
	border: 3px solid #FFFFFF !important;
	border-radius: 3px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	background-color: rgba(0,0,0,.7);
	display: inline;
	cursor: pointer;
}

@media only screen and (min-width: 0px) and (max-width: 766px) {

	.super-hero-title {
		font-size: 2em;
	}
	
	.super-hero-subtitle {
		font-size: 1.5em;
		bottom: 46%;
	}

}