/* =========================================================
   FLIGHT PATH
========================================================= */
.flight-path {
	fill: none;
	stroke: #cfcfcf;
	stroke-width: 1.5;
	stroke-dasharray: 6 6;

	animation:
		dashMove 18s linear infinite;
}

@keyframes dashMove {

	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -300;
	}
}
/* =========================================================
   FLIGHT PATH AREA
========================================================= */
#flightPathArea {
	position: relative;
	overflow: visible;
}
/* =========================================================
   MILESTONES
========================================================= */

.path-milestone {
	position: absolute;
	z-index: 30;
	width: 120px;
	text-align: center;
	transform:translate(-50%, -50%);
}
/* =========================================================
   MILESTONE LABEL
========================================================= */

.milestone-label {
	position: relative;
	display: inline-block;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	color: #111;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		transform 0.3s ease,
		color 0.3s ease;
}

/* Label underline */
.milestone-label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: #111;
	transform:
		translateX(-50%);
	transition:
		width 0.35s ease;
}
/* Label hover */

.path-milestone:hover .milestone-label,
.path-milestone.is-open .milestone-label {
	transform:
		translateY(-3px);
}
/* Label underline */

.path-milestone:hover .milestone-label::after,
.path-milestone.is-open .milestone-label::after {
	width:
		calc(100% - 20px);
}
/* =========================================================
   MILESTONE POSITIONS
========================================================= */
.milestone-barch {
	left: 0%;
	top: 58%;
}

.milestone-march {
	left: 50%;
	top: 30%;
}
.milestone-awards {
	left: 100%;
	top: 50%;
}
/* =========================================================
   MILESTONE CARD
========================================================= */
.milestone-card {
	position: absolute;
	left: 50%;
	/*
	 * Keep the gap small so the mouse can easily
	 * move from label to card.
	 */
	bottom:calc(100% + 15px);
	width: 230px;
	overflow: visible;
	border:1px solid #e5e5e5;
	border-radius: 16px;
	background: #fff;
	box-shadow:	0 20px 60px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:translateX(-50%)	translateY(18px) scale(0.94);
	transform-origin:center bottom;
	transition:
		opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.35s ease;
}
/* =========================================================
   M.ARCH CARD
   Card appears below the label
========================================================= */
.milestone-march .milestone-card {
	top:calc(100% + 5px);
	bottom: auto;
	transform:translateX(-50%)	translateY(-18px)	scale(0.94);
	transform-origin:center top;
}
/* =========================================================
   JAVASCRIPT CONTROLLED OPEN STATE
========================================================= */

.path-milestone.is-open .milestone-card {

	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform:	translateX(-50%)	translateY(0)	scale(1);
}
/* =========================================================
   M.ARCH OPEN STATE
========================================================= */

.milestone-march.is-open .milestone-card {

	transform:translateX(-50%)	translateY(0)	scale(1);
}
/* =========================================================
   CARD ARROW
========================================================= */
.milestone-card::after {

	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-right:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	transform:translateX(-50%)	rotate(45deg);
	z-index: 1;
}
/* =========================================================
   M.ARCH CARD ARROW
========================================================= */

.milestone-march .milestone-card::after {

	top: -8px;
	bottom: auto;
	transform:translateX(-50%)	rotate(225deg);
}
/* =========================================================
   CARD CONTENT
========================================================= */

.milestone-card > div {

	position: relative;
	z-index: 2;
}
/* =========================================================
   CARD DOWNLOAD
========================================================= */
.milestone-download {

	overflow: hidden;
	border-radius: 8px;
	background: #f5f5f5;
}
.milestone-download a {

	transition:	background 0.3s ease,color 0.3s ease;
}
/* =========================================================
   BIRD
========================================================= */
.bird-wrapper {

	position: absolute;
	z-index: 50;
	overflow: visible;
	width: 105px;
	will-change:transform,	opacity;
	transform-origin:center center;
	pointer-events: auto;
	}
/* =========================================================
   BIRD IMAGE
========================================================= */

.bird {

	display: block;
	width: 80px;
	user-select: none;
	pointer-events: auto;
	filter:
		drop-shadow(
			0 10px 15px rgba(0, 0, 0, 0.18)
		);
	transform-origin:
		center center;
	animation:
		wing 0.45s ease-in-out infinite alternate,
		birdFloat 2.2s ease-in-out infinite;
	transition:
		filter 0.3s ease,
		transform 0.3s ease;
}
/* =========================================================
   BIRD HOVER
========================================================= */

.bird:hover {

	filter:
		drop-shadow(
			0 14px 22px rgba(0, 0, 0, 0.28)
		);
}
/* =========================================================
   BIRD TOOLTIP
========================================================= */

.bird-tooltip {

	position: absolute;
	left: 50%;
	top: -35px;
	color: #111;
	font-size: 10px;
	letter-spacing: 2px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:translateX(-50%)	translateY(5px);
	transition:opacity 0.3s ease,	transform 0.3s ease,visibility 0.3s ease;
}
/* =========================================================
   BIRD TOOLTIP SHOW
========================================================= */

.bird-wrapper:hover .bird-tooltip {

	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* =========================================================
   BIRD WING
========================================================= */
@keyframes wing {

	from {
		rotate: -4deg;
	}

	to {
		rotate: 4deg;
	}
}
/* =========================================================
   BIRD FLOAT
========================================================= */
@keyframes birdFloat {

	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -6px;
	}
}
/* =========================================================
   CLOUDS
========================================================= */
.cloud-road-left {
	left: -350px;
	animation: cloudDriveRight 70s linear infinite;
}
.cloud-road-right {
	right: -350px;
	animation: cloudDriveLeft 65s linear infinite;
}
/* =========================================================
   CLOUD MOVE RIGHT
========================================================= */
@keyframes cloudDriveRight {
	from {
		transform:
			translateX(0);
	}
	to {

		transform:
			translateX(
				calc(100vw + 700px)
			);
	}
}
/* =========================================================
   CLOUD MOVE LEFT
========================================================= */

@keyframes cloudDriveLeft {
	from {

		transform:
			translateX(0);
	}
	to {

		transform:
			translateX(
				calc(-100vw - 700px)
			);
	}
}
/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

	.bird-wrapper {
		width: 88px;
	}
	.bird {
		width: 88px;
	}
	.milestone-label {
		font-size: 12px;
		letter-spacing:0.25em;
	}
	.milestone-card {

		width: 220px;
	}
}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.path-milestone {
		width: 90px;
	}

	.milestone-card {
		width: 200px;
	}

	.bird-wrapper {
		width: 75px;
	}

	.bird {
		width: 65px;
	}

	.milestone-label {
		font-size: 12px;
		letter-spacing:	0.12em;
	}
}
/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {
	.path-milestone:focus-within .milestone-card {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform:
			translateX(-50%)
			translateY(0)
			scale(1);
	}
	.milestone-march:focus-within .milestone-card {
		transform:
			translateX(-50%)
			translateY(0)
			scale(1);
	}
}