/*--------------------------------------------------------------
7.0 Jumbotron (Fullwidth Slider)
--------------------------------------------------------------*/

.jumbotron {
	position: relative;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 50px;

	@media(min-width: $screen-md) {
		min-height: 378px;
	}

	.item {
		background-color: #333333;
	}

	&.carousel {

		.carousel-text {
			padding: 25px 0 30px 0;

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

			@media(min-width: $screen-md) {
				position: absolute;
				top: 50%;
				width: 600px;
				padding: 0;
				text-align: left;
				-ms-transform: translate(0%, -45%);
				-webkit-transform: translate(0%, -45%);
				-moz-transform: translate(0%, -45%);
				-o-transform: translate(0%, -45%);
				transform: translate(0%, -45%);

				&.center {
					width: 940px;
					text-align: center;

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

				&.right {
					width: 940px;
					text-align: right;

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

			h1 {
				margin-bottom: 30px;
				font-size: 40px;
				color: $white-color;
				line-height: 1.1;
				letter-spacing: 1px;

				@media(min-width: $screen-md) {
					text-shadow: 0 1px 2px rgba(0,0,0,0.5);
				}

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

			p {
				margin-bottom: 20px;
				color: $white-color;
				font-size: 14px;

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

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			.btn {
				margin: 0 6px 0 0;

				&:last-of-type {
					margin: 0;
				}
			}
		}

		.carousel-topheading {
			margin-bottom: 10px;
			font-size: 15px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 5.5px;
			color: #d6ed8d;
			text-shadow: 0 1px 2px rgba(0,0,0,0.7);
		}

	}

	.carousel-inner > .item > img,
	.carousel-inner > .item > a > img {
		width: 100%;
		height: auto;
	}

	.carousel-control.left, 
	.carousel-control.right {
		opacity: 1;
		text-shadow: none;
		width: 55px;
		height: 55px;
		line-height: 55px;
		top: 30px;
		font-size: 24px;
		text-align: center;
		color: $white-color;
		z-index: 1;
		background: rgba(255,255,255,0.1);

		@media(min-width: $screen-xs) {
			top: 65px;
		}
		@media(min-width: $screen-sm) {
			top: 130px;
		}
		@media(min-width: $screen-md) {
			top: calc(50% - 30px);
		}

		&.left {
			left: 15px;
		}

		&.right {
			right: 15px;
		}

		&:hover,
		&:focus {
			color: $white-color;
			opacity: 1;
			background: rgba(255,255,255,0.2);
		}
	}

	.carousel-indicators {
		display: none;

		@media(min-width: $screen-md) {
			display: table;
			width: 100%;
			margin: 0;
			padding: 0;
			bottom: 1px;
			left: 0;
			z-index: 0;
			text-align: center;
			border-radius: 1px 1px 0 0;

			li,
			li.active {
				display: table-cell;
				width: auto;
				height: 6px;
				margin: 0 2px;
			}

			li {
				background-color: rgba(255,255,255, 0.2);
				border: none;
				border-radius: 0;
				transition: all 0.4s ease-out;

				&:hover {
					background-color: rgba(255,255,255, 0.5);
				}

				&.active {
					background-color: $primary-color;
					border-color: $primary-color;
				}
			}
		}
	}
}


body {

	&.header-wide {

		.jumbotron.carousel {

			.carousel-text {

				@media(min-width: $screen-md) {
					-ms-transform: translate(0%, -50%);
					-webkit-transform: translate(0%, -50%);
					-moz-transform: translate(0%, -50%);
					-o-transform: translate(0%, -50%);
					transform: translate(0%, -50%);
				}
			}
		}
	}

	&.no-topbar {

		&.header-wide {

			.jumbotron.carousel {

				.carousel-text {

					@media(min-width: $screen-md) {
						-ms-transform: translate(0%, -50%);
						-webkit-transform: translate(0%, -50%);
						-moz-transform: translate(0%, -50%);
						-o-transform: translate(0%, -50%);
						transform: translate(0%, -50%);
					}
				}
			}
		}

		.jumbotron.carousel {

			.carousel-text {

				@media(min-width: $screen-md) {
					-ms-transform: translate(0%, -24%);
					-webkit-transform: translate(0%, -24%);
					-moz-transform: translate(0%, -24%);
					-o-transform: translate(0%, -24%);
					transform: translate(0%, -24%);
				}
			}
		}
	}
}