#hero {
	height: 76vh;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(45deg, #2a3893 8%, #0f0f0f 50%, #4eaee7 90%);
}

#hero .video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#hero .video-bg .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

#hero .video-bg video,
#hero .video-bg img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

#hero .lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

#hero .content {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

#hero .content a {
	pointer-events: all;
}

#hero p {
	font-size: 2rem;
}
#hero .short-desc {
	max-width: 400px;
	padding: 1.2em 0 1em 0;
}

#hero .buttons a:not(:last-child) {
	margin-right: 3rem;
}

#port-block {
	overflow: visible;
}

#port-block .port-image {
	width: 100%;
	border-radius: 1rem;
	overflow: hidden;
}

#port-block .port-image.wide {
	width: 120%;
}

#port-block .port-image.shadow {
	box-shadow: 0 60px 135px rgba(0, 0, 0, 0.14),
		0 15px 65px rgba(0, 0, 0, 0.14);
}

#port-block .port-image img {
	width: 100%;
}

#port-block .flex-lg-row-reverse .port-image.wide {
	-webkit-transform: translate3d(-16.67%, 0, 0);
	transform: translate3d(-16.67%, 0, 0);
}

/* Nav Section */

@keyframes rightArrowStart {
	0% {
		transform: translateX(-50px);
	}
	100% {
		transform: translateX(42px);
	}
}
@keyframes rightArrowEnd {
	0% {
		transform: translateX(42px);
	}
	100% {
		transform: translateX(75px);
	}
}
@keyframes rightArrowStart2 {
	0% {
		transform: translateX(50px) rotate(180deg);
	}
	100% {
		transform: translateX(-42px) rotate(180deg);
	}
}
@keyframes rightArrowEnd2 {
	0% {
		transform: translateX(-42px) rotate(180deg);
	}
	100% {
		transform: translateX(-75px) rotate(180deg);
	}
}
@keyframes rightArrowLineStart {
	0% {
		stroke-dashoffset: 30px;
	}
	100% {
		stroke-dashoffset: 40px;
	}
}
@keyframes rightArrowLineEnd {
	0% {
		stroke-dashoffset: 40px;
	}
	100% {
		stroke-dashoffset: 50px;
	}
}
@keyframes portRightLineStart {
	0% {
		transform: translateY(-50%) translateX(-25px) scaleX(0);
	}
	100% {
		transform: translateY(-50%) translateX(0px) scaleX(1);
	}
}
@keyframes rightLineStart {
	0% {
		transform: translateY(-50%) translateX(-88px) scaleX(0);
	}
	100% {
		transform: translateY(-50%) translateX(0px) scaleX(1);
	}
}
@keyframes rightLineEnd {
	0% {
		transform: translateY(-50%) translateX(0px) scaleX(1);
	}
	100% {
		transform: translateY(-50%) translateX(28px) scaleX(0);
	}
}
@keyframes rightLineStart2 {
	0% {
		transform: translateY(-50%) translateX(88px) scaleX(0);
	}
	100% {
		transform: translateY(-50%) translateX(0px) scaleX(1);
	}
}
@keyframes rightLineEnd2 {
	0% {
		transform: translateY(-50%) translateX(0px) scaleX(1);
	}
	100% {
		transform: translateY(-50%) translateX(-28px) scaleX(0);
	}
}

#post-navigation .line {
	height: 2px;
	width: 45px;
	background-color: #fff;
	position: absolute;
	content: "";
	display: block;
	backface-visibility: hidden;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(28px) scaleX(0);
	-webkit-transform-origin: right;
	transform: translateY(-50%) translateX(28px) scaleX(0);
	transform-origin: right;
}
#post-navigation a:first-child .line {
	left: -74px;
	animation: rightLineEnd2 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
}
#post-navigation a:last-child .line {
	right: -74px;
	animation: rightLineEnd 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
}
#post-navigation svg {
	position: absolute;
	backface-visibility: hidden;
	top: 50%;
	margin-top: -15px;
	height: 30px;
	width: 40px;
	display: block;
	transform: translateX(38px);
	-webkit-transform: translateX(38px) rotate(180deg);
	transform: translateX(38px) rotate(180deg);
}
#post-navigation .row a:first-child svg {
	animation: rightArrowEnd2 0.7s cubic-bezier(0, 0.2, 0.1, 1) forwards;
	right: auto;
	left: -43px;
}
#post-navigation .row a:last-child svg {
	animation: rightArrowEnd 0.7s cubic-bezier(0, 0.2, 0.1, 1) forwards;
	left: auto;
	right: -43px;
}
#post-navigation line {
	stroke-width: 2px;
	stroke-dasharray: 10px;
	stroke: #fff;
}
#post-navigation .row a:first-child:hover .line {
	-webkit-transform: translateY(-50%) translateX(0px) scaleX(1);
	-webkit-transform-origin: right;
	transform: translateY(-50%) translateX(0px) scaleX(1);
	transform-origin: right;
	animation: rightLineStart2 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
}
#post-navigation .row a:last-child:hover .line {
	-webkit-transform: translateY(-50%) translateX(0px) scaleX(1);
	-webkit-transform-origin: left;
	transform: translateY(-50%) translateX(0px) scaleX(1);
	transform-origin: left;
	animation: rightLineStart 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
}
#post-navigation .row a:first-child:hover .next-arrow {
	-webkit-transform: translateX(42px);
	transform: translateX(42px);
	animation: rightArrowStart2 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
}
#post-navigation .row a:last-child:hover .next-arrow {
	animation: rightArrowStart 0.4s cubic-bezier(0.05, 0.2, 0.1, 1) forwards;
	-webkit-transform: translateX(42px);
	transform: translateX(42px);
}
#post-navigation .row a:hover line {
	animation: rightArrowLineStart 0.3s cubic-bezier(0.05, 0.2, 0.1, 1) 0.1s
		forwards;
	stroke-dashoffset: 30px;
}
#post-navigation .row a line {
	animation: rightArrowLineEnd 0.4s cubic-bezier(0.3, 0.2, 0.1, 1) 0.25s
		forwards;
	stroke-dashoffset: 40px;
}