/* 05.10. Jumbotron */
@keyframes slider-in-out {
	0% { opacity: 1; }
	48% { opacity: 0; }
	52% { opacity: 0; }
	100% { opacity: 1; }
}

.jumbotron {
	position: relative;
	margin-bottom: ptr(80);

	&-content {
		@include media-breakpoint-up(lg) {
			position: absolute;
			padding: ptr(22) ptr(30) ptr(10);
			background-color: #ffffff;
			width: ptr(580);
			top: 10%;
		}

		@include media-breakpoint-up(xl) {
			top: 10.5%;
			padding: ptr(53) ptr(60) ptr(42);
		}

		@media (min-width: 1700px) {
			top: 22%;
		}

		&__title {
			font-size: ptr(30);
			margin-bottom: ptr(13);
		}

		&__description {
			font-size: ptr(16);

			.btn {
				margin-top: ptr(5);
				margin-right: ptr(5);
			}
		}

		&.is-in-transition > * {
			animation: slider-in-out linear .6s;
		}
	}

	&__control {
		display: inline-block;
		font-size: 0;
		background-color: #ffffff;
		color: $gray-dark;
		text-align: center;
		height: ptr(60);
		line-height: ptr(60);
		width: 50%;
		border-bottom: 1px solid #dddddd;

		@include media-breakpoint-up(lg) {
			position: absolute;
			left: calc(50% - #{map-get($container-max-widths, lg) / 2} + #{ptr(598)});
			top: 10%;
			width: ptr(60);
			border-bottom: 0;
			margin-bottom: 0;
		}

		@include media-breakpoint-up(xl) {
			left: calc(50% - #{map-get($container-max-widths, xl) / 2} + #{ptr(598)});
			top: 10.5%;
		}

		@media (min-width: 1700px) {
			top: 22%;
		}

		&.left {
			float: left;

			@include media-breakpoint-up(lg) {
				float: none;
				top: calc(10% + #{ptr(61)});
			}

			@include media-breakpoint-up(xl) {
				top: calc(10.5% + #{ptr(61)});
			}

			@media (min-width: 1700px) {
				top: calc(22% + #{ptr(61)});
			}
		}

		&.right {
			float: right;
			border-left: 1px solid #dddddd;

			@include media-breakpoint-up(lg) {
				float: none;
				border-left: 0;
			}
		}

		.fa {
			vertical-align: middle;
			font-size: ptr(25);
		}
	}

	.carousel {
		img {
			width: 100%;
		}
	}

	.site-header + & {
		margin-top: ptr(-80);
	}

	// With Captions
	&--with-captions {
		padding-bottom: ptr(16);
		border-bottom: 1px solid #dddddd;

		@include media-breakpoint-up(lg) {
			border-bottom: 0;
			padding-bottom: 0;
		}

		.jumbotron__control {
			margin-bottom: ptr(30);
		}
	}

	// Without Captions
	&--no-caption {
		.jumbotron__control {
			@include media-breakpoint-up(lg) {
				right: 0;
				left: inherit;
			}

			&.left {
				@include media-breakpoint-up(lg) {
					top: calc(50% - #{ptr(60)});
				}
			}

			&.right {
				@include media-breakpoint-up(lg) {
					top: calc(50% + #{ptr(1)});
				}
			}
		}
	}
}