/* 05.11. Jumbotron */
.jumbotron {
	background: $dark-color;
	padding: 0 0 20px 0;
	margin-bottom: 0;

	&.jumbotron--no-catption {
		padding-bottom: 0;
	}

	@media (min-width: $screen-xs-min) {
		padding-bottom: 30px;
	}

	@media (min-width: $screen-md-min) {
		background: $text-color;
		padding: 0;
	}
}

/* Slider Indicators */
.carousel-control.left,
.carousel-control.right {
	background-image: none;
	opacity: 1;
	text-shadow: none;
	width: 45px;
	height: 45px;
	background: rgba(51,51,51,0.9);
	font-size: 36px;
	line-height: 46px;
	text-align: center;
	border-radius: 2px;
	color: #ffffff;
	top: 20px;

	@media (min-width: $screen-xs-min) {
		top: 50px;
	}

	@media (min-width: $screen-sm-min) {
		top: 100px;
	}

	@media (min-width: $screen-md-min) {
		top: calc( 50% - 22px);
	}

	&:hover {
		color: #eeeeee;
	}
}

.carousel-control.left {
	left: 5%;

	.fa-angle-left {
		padding-right: 2px;
	}
}

.carousel-control.right {
	right: 5%;

	.fa-angle-right {
		padding-left: 2px;
	}
}

/* Slider Content */
.carousel-content {
	position: relative;
	max-height: 100%;
	z-index: 0;

	@media (min-width: $screen-md-min) {
		background: rgba(51,51,51,0.9);
		position: absolute;
		padding: 20px;
		width: 540px;
		top: 18%;
		left: calc( 50% - 270px );
	}

	@media (min-width: $screen-lg-min) {
		top: 20%;
		width: 500px;
		left: calc( 50% - 250px );
	}

	@media (min-width: 1450px) {
		width: 480px;
		margin-left: 0;
		padding: 30px;
		left: inherit;
	}

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

// force 100% width for images
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
	width: 100%;
}

.jumbotron__category {
	@extend %theme-heading;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(250,250,250,0.2);
	margin-top: 20px;

	@media (min-width: $screen-xs-min) {
		margin-top: 30px;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	@media (min-width: $screen-md-min) {
		margin-top: 0;
	}

	h6 {
		margin: 0;
		color: $primary-color;
	}
}

.jumbotron__title {
	p,
	h1 {
		font-size: 20px;
		font-weight: bold;
		letter-spacing: -0.5px;
		line-height: 1.1;
		color: #eeeeee;
		margin-top: 21px;
		margin-bottom: 10.5px;

		@media (min-width: $screen-xs-min) {
			font-size: 25px;
		}

		@media (min-width: $screen-md-min) {
			margin: 18px 0 10px 0;
		}

		@media (min-width: $screen-lg-min) {
			font-size: 30px;
		}

		@media (min-width: 1450px) {
			margin: 26px 0 19px 0;
		}
	}
}

.jumbotron__content {
	p {
		font-size: 14px;
		font-weight: normal;

		@media (min-width: $screen-md-min) {
			margin: 0 0 18px 0;
		}

		@media (min-width: 1450px) {
			margin: 0 0 24px 0;
		}
	}
}

// Fix for Boxed version
body.boxed {
	.carousel-content {
		@media (min-width: 1450px) {
			left: calc( 50% - 250px );
			padding: 20px;
		}

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

	.jumbotron__title {
		h1 {
			@media (min-width: $screen-lg-min) {
				font-size: 25px;
			}

			@media (min-width: 1450px) {
				margin: 26px 0 19px 0;
			}
		}
	}

	.jumbotron__content {
		p {
			@media (min-width: 1450px) {
				margin: 0 0 18px 0;
			}
		}
	}
}