.hero{
	position: relative;
	z-index: 3;
	overflow: hidden;
	&.full-screen{
		min-height: 75vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.rich-text{
			*{
				color: white;
			}
		}
		a.btn-{
			color: white;
			padding-left: 0;
			padding-right: 0;
		}
		&.video{
			&.layout1{
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: black;
					z-index: -1;
				}
				.overlay{
					background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.8));
				}
				iframe{
					position: absolute;
					width: 160%;
					left: 50%;
					height: 160%;
					top: 50%;
					transform: translate(-50%, -50%);
					object-fit: cover;
					z-index: -1;
					animation: fade-in 1s ease both;
					animation-delay: 1s;
					@media screen and (max-width: 991px){
						height: 300vw;
						width: 400vw;
					}
				}
			}
			&.layout2{
				.hero-lead{
					padding-right: 5rem;
					.rich-text{
						*{
							color: $body-color;
						}
					}
				}
				& > div:first-child{
					position: absolute;
					top: 0;
					right: 0;
					width: 50vw;
					height: 100%;
					overflow: hidden;
					iframe{
						position: absolute;
						top: -8%;
						left: -30%;
						height: 116%;
						width: 160%;
						pointer-events: none;
						user-select: none;
					}
				}
			}
		}
		svg{
			width:1972px;
			height:297px;
			min-width: 100vw;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			pointer-events: none;
			path{
				fill: $body-bg;
			}
			@media screen and (min-width: 1850px){
				min-width: 110vw !important;	
				width: unset;
				height: unset;
				bottom: -1px !important;
			}
		}
	}
	.background-image{
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.85));
		animation: overlay 2s cubic-bezier(.3,1,.3,1) both;
	}
	&:not(.content){
		.hero-lead{
			padding-top: ($cy-spacer * 4);
			padding-bottom: ($cy-spacer * 3);
		}
		&.has-wave{
			.hero-lead{
				padding-top: ($cy-spacer * 3);
				padding-bottom: ($cy-spacer * 4);
			}
		}
	}		
	.hero-lead{
		.rich-text, .buttons-wrapper{
			animation: fade-up .5s ease both;
		}
		.rich-text{
			animation-delay: .2s;
		}
		.buttons-wrapper{
			animation-delay: .6s;
			a.btn-{
				color: white;
				padding-left: 0;
				padding-right: 0;
			}
		}
		h2{
			@media screen and (max-width: 991px){
				font-size: 3rem;
			}
		}
	}
	&.content{
		background: lighten($dark, 75%);
		padding-top: ($cy-spacer * 3);
		padding-bottom: ($cy-spacer * 2);
	}
}