.journey-slider {
	position: relative;
	margin: 0 auto;
	opacity: 0;
}
	.journey-slider .slides { margin: 0 auto 20px; }
	.journey-slider .slides .slick-track { padding: 45px 0; }

	.journey-slider .slide {
		padding: 0;
		position: relative;
		background-color: #fff;
		border-radius: 15px;
		overflow: hidden;
		border: 1px solid #fff;
		cursor: pointer;
		transition: opacity 0.5s ease, transform 0.5s ease;
		opacity: 0.6;
	}
		.journey-slider .slide.slick-center {
			position: relative;
			transform: scale(1.30);
			opacity: 1;
			z-index: 20;
		}

		.journey-slider .slide img { transform: none; }

		.journey-slider .slide .title {
			position: absolute;
			top: 10px;
			left: 0;
			right: 0;
			text-align: center;
			font-family: 'waveryly_light', sans-serif;
			font-size: 16px;
			line-height: 18px;
			color: #fff;
			text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
			transition: opacity 0.5s ease;
			z-index: 1;
		}

		.journey-slider .slide .description {
			padding: 5px;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.4);
			transition: opacity 0.5s ease, background-color 0.5s ease;
		}
			.journey-slider .slide .description p {
				margin: 0;
				font-family: 'kievit_regular', sans-serif;
				font-size: 8px;
				line-height: 1;
				color: #fff;
				text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
				cursor: default;
			}

		.journey-slider .slide:not(.slick-center) .title,
		.journey-slider .slide:not(.slick-center) .description,
		.journey-slider .slide.is-added .description { opacity: 0; }

		.journey-slider .slide .added-confirmation {
			display: inline-block;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			background-color: rgba(0, 0, 0, 0.7);
			transition: opacity 0.5s ease;
		}
			.journey-slider .slide.is-added .added-confirmation {
				opacity: 1;
				transition: opacity 0.5s ease;
			}

			.journey-slider .slide .added-confirmation .checkmark {
				display: inline-block;
				width: 50px;
				height: 50px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: '';
				background-image: url(/includes/public/assets/journey/checkmark.png);
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
			}

			.journey-slider .slide .added-confirmation > span {
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0px;
				font-family: 'kievit_regular', sans-serif;
				font-size: 10px;
				line-height: 1;
				text-align: center;
				color: #fff;
				opacity: 0;
				text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
				transition: bottom 0.2s ease, opacity 0.2s ease;
			}
				.journey-slider .slide.is-added .added-confirmation > span {
					opacity: 1;
					bottom: 50px;
					transition: bottom 0.8s ease, opacity 0.8s ease;
				}

			.journey-slider .slide.is-added:not(.slick-center) .added-confirmation { opacity: 0; }

		.journey-slider .flyout {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			bottom: 0;
			right: -50%;
			z-index: 12;
			color: #000;
			background-color: #fff;
			background-image: url(/includes/public/assets/journey/texture-background.png);
			background-repeat: repeat;
			background-position: center center;
			background-size: cover;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease, right 0.5s ease;
			overflow: auto;
		}
			.journey-slider .flyout.active {
				opacity: 1;
				pointer-events: all;
				transition: opacity 0.5s ease, right 0.5s ease;
				right: 0%;
				z-index: 13;
			}

			.journey-slider .flyout img { width: 100%; }

			.journey-slider .flyout .content {
				padding: 40px;
				position: relative;
				text-align: center;
			}
				.journey-slider .flyout .content .closer {
					display: inline-block;
					height: 16px;
					width: 16px;
					padding: 10px;
					margin: 0;
					position: absolute;
					top: 15px;
					right: 15px;
					background-color: transparent;
					background-image: url(/includes/public/assets/journey/closer.png);
					background-position: center center;
					background-size: cover;
				}

				.journey-slider .flyout .content .title {
					margin: 0 auto 15px;
					font-family: 'waveryly_light', sans-serif;
					font-size: 32px;
					line-height: 40px;
					text-align: left;
				}

				.journey-slider .flyout .content .description {
					margin: 0 auto 15px;
					font-family: 'kievit_regular', arial, sans-serif;
					font-size: 14px;
					line-height: 22px;
					text-align: left;
				}

		.journey-slider .controls {
			display: block;
			position: relative;
			text-align: center;
		}
			.journey-slider .controls .extras {
				display: block;
				position: relative;
				height: 15px;
				width: 200px;
				margin: 0 auto;
			}
				.journey-slider .controls .extras .add-location {
					width: 27px;
					height: 27px;
					padding: 0;
					float: left;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.4);
					text-align: center;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 50%;
					background-image: url(/includes/public/assets/journey/icon-plus.png);
				}
					.journey-slider .controls .extras .add-location:hover {
						background-color: rgba(255, 255, 255, 0.7);
					}
					.journey-slider .controls .extras .add-location.is-added {
						background-image: url(/includes/public/assets/journey/icon-minus.png);
					}

				.journey-slider .controls .extras .more-info {
					width: 27px;
					height: 27px;
					padding: 0;
					float: right;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.4);
					text-align: center;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 20%;
					background-image: url(/includes/public/assets/journey/icon-info.svg);
				}
					.journey-slider .controls .extras .more-info:hover {
						background-color: rgba(255, 255, 255, 0.7);
					}

			.journey-slider .controls .arrows {
				display: block;
				position: relative;
				height: 50px;
				width: 150px;
				margin: 0px auto;
			}
				.journey-slider .controls .arrows .arrow {
					width: 42px;
					height: 42px;
					padding: 0;
					margin: 0;
					background-color: rgba(255, 255, 255, 0.4);
					border-radius: 50%;
					cursor: pointer;
					background-repeat: no-repeat;
					background-position: 50%;
					background-size: 30%;
				}
					.journey-slider .controls .arrows .arrow:hover {
						background-color: rgba(255, 255, 255, 0.7);
					}

					.journey-slider .controls .arrows .arrow.prev {
						float: left;
						background-image: url(/includes/public/assets/journey/arrow-left.png);
						background-position: 46%;
					}

					.journey-slider .controls .arrows .arrow.next {
						float: right;
						background-image: url(/includes/public/assets/journey/arrow-right.png);
						background-position: 57%;
					}

			.journey-slider .controls .counter {
				font-family: 'waveryly_light', sans-serif;
				font-size: 20px;
				line-height: 1;
				color: #fff;
				cursor: default;
				text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
			}

	.journey-slider .reminder {
		display: none;
		width: 250px;
		position: fixed;
		top: 246px;
		right: -135px;
		opacity: 0;
		transform: rotate(68deg);
		transition: all 0.5s ease;
	}
		.remind .journey-slider .reminder {
			top: 246px;
			right: -80px;
			opacity: 1;
			transform: rotate(68deg);
			transition: all 0.5s ease;
		}

		@keyframes wiggle {
			0%   { transform: scaleX(-1) rotate(30deg); }
			50%  { transform: scaleX(-1) rotate(15deg); }
			100% { transform: scaleX(-1) rotate(30deg); }
		}
		.journey-slider .reminder::before {
			width: 80px;
			height: 34px;
			position: absolute;
			top: 60px;
			left: -50px;
			content: '';
			background-image: url(/includes/public/assets/journey/share-arrow.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			transform: scaleX(-1) rotate(30deg);
			animation: wiggle 2s infinite;
		}

		.journey-slider .reminder p {
			margin-bottom: 0;
			font-family: 'kievit_regular', sans-serif;
			font-size: 22px;
			line-height: 22px;
			color: #fff;
			text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
		}

	.journey-slider .shade {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		background-color: rgba(0, 0, 0, 0.5);
		transition: opacity 0.5s ease;
	}
		.journey-slider.show-more-info .shade {
			opacity: 1;
			pointer-events: all;
		}


/* Tablet & up */
@media only screen and (min-width: 40.063em) {
	.journey-slider { max-width: 95%; }
	.journey-slider .slides .slick-track { padding: 80px 0; }

	.journey-slider .slide .title {
		top: 15px;
		left: 10px;
		right: 10px;
		font-size: 24px;
		line-height: 26px;
	}

	.journey-slider .slide .added-confirmation .checkmark {
		width: 75px;
		height: 75px;
	}

	.journey-slider .slide .description {
		padding: 10px;
	}
		.journey-slider .slide .description p {
			font-size: 14px;
			line-height: 16px;
		}

	.journey-slider .controls .arrows {
		height: 50px;
		width: 125px;
	}
}

/* Desktop & up */
@media only screen and (min-width: 64.063em) {
	.journey-slider { width: 80%; }
		.journey-slider .slide {
			margin: 0 10px;
			border-radius: 25px;
		}
			.journey-slider .slide .title {
				top: 20px;
				left: 15px;
				right: 15px;
				font-size: 25px;
				line-height: 30px;
			}

	.journey-slider .slide .added-confirmation { background-size: cover; }
		.journey-slider .slide .added-confirmation > span { font-size: 16px; }

	.journey-slider .slide .description { padding: 5px; }
		.journey-slider .slide .description p {
			font-size: 10px;
			line-height: 11px;
		}

	.journey-slider .controls {
		width: 370px;
		margin: 10px auto 0;
	}
		.journey-slider .controls .extras {
			height: 40px;
			width: 80%;
		}
			.journey-slider .controls .extras .add-location,
			.journey-slider .controls .extras .more-info {
				width: 45px;
				height: 45px;
			}

	.journey-slider .controls .arrows {
		height: 80px;
		width: 180px;
	}
		.journey-slider .controls .arrows .arrow {
			width: 60px;
			height: 60px;
		}

	.journey-slider .controls .counter { font-size: 34px; }

	.journey-slider .flyout {
		height: 100vh;
		width: 50vw;
	}
		.journey-slider .flyout .content { padding: 25px; }
			.journey-slider .flyout .content .closer {
				height: 24px;
				width: 24px;
				top: 30px;
				right: 30px;
			}

			.journey-slider .flyout .content .title {
				max-width: 650px;
				width: 100%;
				font-size: 48px;
				line-height: 60px;
			}

			.journey-slider .flyout .content .description {
				max-width: 650px;
				width: 100%;
				font-size: 22px;
				line-height: 38px;
			}

	.journey-slider .reminder { display: block; }
}

@media only screen and (min-width: 75.063em) {
	.journey-slider .slide .description { padding: 10px; }
		.journey-slider .slide .description p {
			font-size: 14px;
			line-height: 16px;
		}
}

@media only screen and (min-width: 90.063em) {
	.journey-slider .slide .title {
		font-size: 32px;
		line-height: 34px;
	}

	.journey-slider .slide .description p {
		font-size: 18px;
		line-height: 22px;
	}

	.journey-slider .controls .arrows {
		height: 80px;
		width: 220px;
	}
		.journey-slider .controls .arrows .arrow {
			width: 70px;
			height: 70px;
			border-radius: 40px;
		}
}


/* Themes */
.journey-page.dark .journey-slider .controls .extras .add-location,
.journey-page.dark .journey-slider .controls .extras .more-info,
.journey-page.dark .journey-slider .controls .arrows .arrow { background-color: rgba(0, 0, 0, 0.4); }

.journey-page.dark .journey-slider .controls .extras .add-location:hover,
.journey-page.dark .journey-slider .controls .extras .more-info:hover,
.journey-page.dark .journey-slider .controls .arrows .arrow:hover { background-color: rgba(0, 0, 0, 0.7); }