/*
###################################
HERO
###################################
*/

#hero-wrap {
	position: relative;
	background: var(--primary);
	background: linear-gradient(
		30deg,
		var(--primary) 20%,
		var(--secondary) 100%
	);
	transform: skewY(-14deg);
	overflow: hidden;
	margin-top: -300px;
	padding-top: 300px;
	/* clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); */
	/* padding-bottom: 100px; */
}

#hero-wrap .content {
	transform: skewY(14deg);
}

/* HERO THUMBPRINT */
#hero-wrap .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url('../images/bg-thumb--hero.svg') no-repeat top right;
	opacity: 0.7;
	z-index: 0;
}

#hero-wrap .overlay-image {
	position: absolute;
	top: 0;
	left: 0;
	height: 140%;
	width: 100%;
	background: url('../images/header-soccer.png') no-repeat top center;
	background-size: cover;
	opacity: 1;
	z-index: -1; /* 0 */
	/* border: 1px solid limegreen; */
}

.section-skew .overlay-image {
	position: absolute;
	top: -30%;
	left: 0;
	height: 160%;
	width: 100%;
	background: url('../images/header-soccer.png') no-repeat top center;
	background-size: cover;
	opacity: 1;
	z-index: -1; /* 0 */
	/* border: 1px solid limegreen; */
}

#hero {
	position: relative;
	/* height: 100vh; */
	min-height: 25rem;
	width: 100%;
	overflow: hidden;
}

.video-mask video {
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;

	/* For Firefox (limited support) */
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

#hero video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	filter: grayscale(100%);
}

/* 	TINT OVER VIDEO BG
	Adds a tint over the video which looks off once converted to greyscale
 */
#hero .gradient-tint {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(10deg,
		rgba(184, 1, 149, 0) 50%,
		rgba(184, 1, 149, 1) 100%
		);
	mix-blend-mode: overlay; /* try multiply, screen, soft-light, etc. */
	pointer-events: none;
}

#slogan-wrap {
	position: absolute;
	right: 0;
	top: auto;
	bottom: 0;
	z-index: 2;
}

#slogan {
	transform: skewY(-14deg);
	padding: 50px 0 50px 50px;
	/* margin-bottom: 15vh; */
}

#homepage #slogan {
	margin-bottom: 15vh;
}

#slogan {
	font-weight: 300;
}

#slogan span {
	font-weight: 700;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

/* @media (pointer: coarse) and (hover: none) {
	#homepage #hero {
		background: url('https://images.unsplash.com/photo-1506184155123-73f3a6dfc2fc?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') black no-repeat center center scroll;
	}

	#homepage #hero video {
		display: none;
	}
} */



.thumb-overlay--light,
.thumb-overlay--dark {
	position: absolute;
	/* top: -30%; */
	top: -400px;
	left: 0;
	height: 150%; /* 100% */
	width: 100%;
	background: url('../images/bg-thumb--light.svg') no-repeat top right;
	opacity: 0.7;
	z-index: -1;
}

.thumb-overlay--dark {
	background: url('../images/bg-thumb--dark.svg') no-repeat top right;
}


/*
###################################
HEADER
###################################
*/





/*
###################################
FOOTER
###################################
*/

footer {
	overflow: hidden;
	height: 1040px;
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	footer {
		height: 900px;
	}
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	footer {
		height: 850px;
	}
}

.footer-wrap {
	position: relative;
	transform: skewY(-14deg);
	overflow: hidden;
	margin-top: 250px;
	padding-top: 0px;
	padding-bottom: 300px;
}

.footer-wrap .content {
	transform: skewY(14deg);
}


footer a {
	text-decoration: none;
}

footer a:hover {
    color: var(--light-green);
}