// ==========================================================================
// Connect Jeptpack
// ==========================================================================

.jetpack-hero {
	position: relative;
	overflow: hidden; // lazy clearfix
	margin: 0 auto 80px;
	background: $jetpack-green;
	background-image: linear-gradient(top, rgb(129, 168, 68), rgb(142, 183, 78));
	text-align: center;

	.button--primary {
		margin-bottom: 8px;
		font-size: 16px;
	}
	.step-description {
		max-width: 650px;
		margin: 7px auto 50px;
	}
}
.jetpack-hero__title {
	position: relative;
	margin-top: 60px;
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 1px;
	z-index: 2;

	@media (max-width: 500px) {
		font-size: 30px;
	}
}
.jetpack-hero__info {
	position: relative;
	margin-top: 110px;
	padding: 60px 30px 30px;
	background: $jetpack-cloud;
	z-index: 4;

	&:before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		width: 100%;
		height: 93px;
		margin-bottom: -1px;
		background: url(../img/the-cloud.svg) center bottom repeat-x;
		z-index: 4;
	}
	@include breakpoint(phone) {
		padding: 60px 18px 30px;
	}
}
.flyby {
	@media (max-width: 768px) {
		display: none;
	}
}
.flyer {
	position: absolute;
	top: 220px;
	left: 16%;
	z-index: 3;
	animation: flyer 3.4s 2s ease-in-out;

	&:nth-child(2) {
		left: 40%;
		width: 120px;
		height: 131px;
		animation-delay: 4.6s;
		animation-duration: 2.4s;
	}
	&:nth-child(3) {
		left: 30%;
		width: 60px;
		height: 66px;
		animation-delay: 5.8s;
		animation-duration: 4.5s;
		z-index: 0;
	}
}
@keyframes "flyer" {
	0% {
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		transform: translate3d(570px, -570px, 0px);
	}
}