@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "variables.less";

html {
	height: 100%;
}
body {
	background-color: #FFF;
	height: 100%;
}

.main-container:before {
	display: none;
}

.img-main-background {
	position: absolute; 
	top: 0;
	width: 100%;
	max-width: none;
	
	z-index: 0;
}
.jumbotron {
	border-radius: 0;
	
	height: 100%;
	min-height: 600px;

	padding-top: 150px;
	
	margin-bottom: 0;
}


.navbar {
	background-color: fade(@navbar-background, 80%);
	
	padding: 20px;
	.transition(~"padding 0.2s, background-color 0.2s");

	.navbar-brand {
		font-size: @font-size-landing-navbar-brand;
		.transition(~"font-size 0.2s");
	}
	
	.navbar-nav > li > a {
		margin-top: 6px;
		padding: 6px 8px;
		
		height: 36px;
		border-bottom: 2px solid transparent;
	}
	
	.navbar-nav > li > a:hover, .navbar-nav > li.active > a  {
		border-bottom-color: #FFF;
		background-color: transparent;
		color: #FFF;
	}
	
	
	@media (max-width: @screen-sm-max) {
		.navbar-nav > li > a {
			border-bottom-width: 0;
			border-left: 2px solid transparent;
		}
		.navbar-nav > li > a:hover, .navbar .navbar-nav > li.active > a  {
			border-left-color: #FFF;
		}
	}
	
	
	@media (max-height: @screen-qhd-width) {
		.jumbotron {
			padding-top: 120px;
		}
	}
	
	
	.navbar-nav > li {
		border-width: 0 !important;
		&.sep {
			height: 48px;
			line-height: 48px;
			margin: 0 8px;
			font-size: 4px;
		}
	}

}




.navbar-fixed-top + .main-container {
	height: 90%;
	height: ~"calc(100% - 100px)";
	min-height: 400px;
	
	padding-top: 0;
}
.navbar-compact {
	+ .main-container {
		padding-top: 0;
	}
	
	&.navbar {
		padding: 5px;
		background-color: fade(@navbar-background, 92%);
		
		.navbar-brand {
			font-size: @font-size-landing-navbar-compact-brand;
		}
	}
}

@media (max-width: @screen-sm-max) {
 .navbar {
	+ .main-container {
		padding-top: 0;
	}
	
	&.navbar {
		padding: 5px;
		background-color: fade(@navbar-background, 92%);
		
		.navbar-brand {
			font-size: @font-size-landing-navbar-compact-brand;
		}
	}
 }
}


.section  {
	padding-top: 36px;
	padding-bottom: 36px;
	background-color: #FFF;
}

.section-grey {
	background-color: #EDF2F6;
}

.item .carousel-caption {
	background-color: transparent;
	transition: background-color 0.2s;
}
.item.active .carousel-caption {
	background-color: rgba(0,0,0,0.25);
}




.coming-soon {
	background-color: #1A375F;

	.main-container {
		height: 100%;
	}

	.navbar {
		padding: 10px;
		background-color: fade(@navbar-background, 50%);
	}
	.jumbotron {
		padding-top: 120px;
		background-color: #254169;
	}
	@media (max-width: @screen-xs-max) {
	 .jumbotron {
		padding-top: 80px;
	 }
	}
	
	.timer {
		border-radius: 18px;
		padding-bottom: 12px;
		background-color: rgba(0,0,0,0.15);
	}
	
	.timer-value {
		font-size: @font-size-comingsoon-timer-value;
		margin-bottom: 8px;
		color: #FFF;
	}
	
	.timer-text {
		font-size: @font-size-comingsoon-timer-text;
		color: #FFF;
		text-transform: uppercase;
		
		.label {
			min-width: 60%;
		}
	}
}