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

@import '/sites/all/themes/twitter_bootstrap/scripts/owl-carousel/assets/owl.carousel.css';

html,
body { 
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility; 
}

.animated {
	-webkit-transition: all 420ms cubic-bezier(.165,.84,.44,1);
	-moz-transition: all 420ms cubic-bezier(.165,.84,.44,1);
	transition: all 420ms cubic-bezier(.165,.84,.44,1);
}

.animatedShort {
	-webkit-transition: all 300ms cubic-bezier(.165,.84,.44,1);
	-moz-transition: all 300ms cubic-bezier(.165,.84,.44,1);
	transition: all 300ms cubic-bezier(.165,.84,.44,1);
}


///////////////////////////////////////////////////////////////
//
// General scaffolding
//
///////////////////////////////////////////////////////////////

img {
	max-width: 100%;
	height: auto;
}

.page-block {
	.make-sm-column(4);
	margin-bottom: @grid-gutter-width;
}

	.page-block--half {
		.make-sm-column(6);
	}
	
	.page-intro {
		font-size: 21px;
		font-weight: 300;
		margin-bottom: 15px;
	}

.page-content {
	.make-sm-column(8);
	margin-bottom: @grid-gutter-width;
}

	.page-content--centered {
		.make-sm-column(10);
		.make-sm-column-offset(1);
		text-align: center;
	}

.page-aside {
	.make-sm-column(4);
	margin-bottom: @grid-gutter-width;
}



///////////////////////////////////////////////////////////////
//
// Typography
//
///////////////////////////////////////////////////////////////

p,
li {
	font-weight: 300;
}

h1,
h2,
h3,
h4 {
	&:first-child {
		margin-top: 0;
	}
}

h1 {
	color: @bmm-blue-dark;
	font-size: 32px;
}

///////////////////////////////////////////////////////////////
//
// Forms
//
///////////////////////////////////////////////////////////////

.form-control {
	box-shadow: none !important;
	border: transparent;
}



///////////////////////////////////////////////////////////////
//
// Buttons
//
///////////////////////////////////////////////////////////////

.button {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 20px 9px;
	border-radius: 2px;
	background: @bmm-blue;
	color: white;
	overflow: hidden;
	position: relative;
	display: inline-block;
	
	&:hover,
	&:focus {
		text-decoration: none;
		color: white;
		
		&:after {
			.translate(0px,0);
		}
	}
	
	&:after {
		position: absolute;
		.animated();
		display: inline-block;
		font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: @fa-var-arrow-circle-right;
		margin-left: 10px;
		top: 50%;
		right: -3px;
		margin-top: -11px;
		font-size: 21px;
		.translate(30px,0);
	}
}

.btn--white {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 20px 9px;
	border-radius: 2px;
	background: white;
	color: @text-color;
	overflow: hidden;
	position: relative;
	display: inline-block;
	
	&:hover,
	&:focus {
		text-decoration: none;
		color: @text-color;
		box-shadow: none;
		
		&:after {
			.translate(0px,0);
		}
	}
	
	&:after {
		position: absolute;
		.animated();
		display: inline-block;
		font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: @fa-var-arrow-circle-right;
		margin-left: 10px;
		top: 50%;
		right: -3px;
		margin-top: -11px;
		font-size: 21px;
		.translate(30px,0);
	}
}

///////////////////////////////////////////////////////////////
//
// Teasers
//
///////////////////////////////////////////////////////////////

.teasers {
	.make-row();
}

	.teaser {
		.make-sm-column(4);
		display: block;
		margin-bottom: @grid-gutter-width;
		
		&:nth-child(3n+1) {
			clear: both;
		}
	}
	
		.teaser-link {
			display: block;
			color: @text-color;
			
			&:hover,
			&:focus {
				color: @text-color;
				text-decoration: none;
				
				.teaser-title {
					color: white;
					
					span {
						.translate(100%,0);
					}
					
					&:before {
						.translate(0,0);
					}
					
					&:after {
						.translate(0,0);
					}
				}
			}
			
		}
	
		.teaser-figure {
			position: relative;
			margin-bottom: 10px;
		}
		
			.teaser-date {
				position: absolute;
				background: @bmm-blue;
				left: 15px;
				top: -15px;
				width: 65px;
				text-align: center;
				color: white;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 1;
				padding-top: 13px;
				padding-bottom: 14px;
			}
			
				.teaser-date-day {
					font-size: 36px;
				}
				
				.teaser-date-month {
					font-size: 13px;
				}
		
		.teaser-content {
			padding: 15px 20px;
		}
		
			.teaser-title {
				margin: 0 -20px 15px -20px;
				border-left: 3px solid @bmm-blue;
				font-weight: normal;
				min-height: 76px;
				position: relative;
				overflow: hidden;
				
				span {
					display: block;
					.animated();
					background: white;
					padding: 10px 30px 10px 17px;
					color: @text-color;
					min-height: 76px;
					position: relative;
					z-index: 2;
				}
				
				&:before {
					.animated();
					position: absolute;
					width: 100%;
					height: 100%;
					background: @bmm-blue;
					content: attr(data-title);
					z-index: 1;
					.translate(-25%,0);
					left: 0;
					top: 0;
					color: white;
					padding: 10px 30px 10px 17px;
				}
				
				&:after {
					.animated();
					.transition-delay(200ms);
					.translate(30px,0);
					color: white;
					display: inline-block;
					font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					content: @fa-var-arrow-circle-right;
					position: absolute;
					top: 50%;
					margin-top: -14px;
					right: -3px;
					z-index: 1;
				}
			}
			
			.teaser-body {
				font-weight: 300;
			}



.events {
	.make-row();
}

		.events--overview {
			.event {
				.make-sm-column(4);
				color: inherit;
				clear: none;
				padding-left: 100px;
				
				&:nth-child(3n+1) {
					clear: both;
				}
			}
		}

	.event {
		.make-sm-column(6);
		margin-bottom: @grid-gutter-width;
		position: relative;
		padding-left: 100px;
		color: white;
		min-height: 76px;
		
		&:nth-child(2n+1) {
			clear: both;
		}
		
		> a {
			display: block;
			text-decoration: none;
			color: inherit;
			
			&:hover,
			&:focus {
				text-decoration: none;
				color: inherit;
				
				.event-title {
					color: @bmm-blue;
				}
			}
		}
	}
	
		.event-date {
			position: absolute;
			background: @bmm-blue;
			left: 15px;
			top: 0;
			width: 65px;
			text-align: center;
			color: white;
			font-weight: bold;
			text-transform: uppercase;
			line-height: 1;
			padding-top: 13px;
			padding-bottom: 14px;		
		}
		
			.event-date-day {
				font-size: 36px;
			}
			
			.event-date-month {
				font-size: 13px;
			}
		
		.event-title {
			margin: 12px 0 0px;
		}
		
		.event-location {
			font-weight: 300;
		}




///////////////////////////////////////////////////////////////
//
// Page Header + Navigation
//
///////////////////////////////////////////////////////////////

.page-header {
	border: 0; padding: 0; margin: 0;
	background: white;
}

	.brand {
		.make-sm-column(5);
		padding-top: 20px;
		padding-bottom: 15px;
	}
	
		.brand-logo {
			width: 400px;
			
			@media (max-width: @screen-xs-max) {
				width: 280px;
			}
		}
		
	.primaryNavigation {
		.make-sm-column(7);
		
		.navbar-toggle {
			margin-top: -60px;
			margin-right: 0;
			
			.icon-bar {
				background: @bmm-blue;
			}
		}
		
		.navbar-collapse {
			padding: 0;
		}
	}
	
		.primaryNavigation-top {
			.clearfix();
			padding-top: 25px;
		}
		
			.primaryNavigation-top-language {
				float: right;
				margin-left: 15px;
				
				.locale-untranslated {
					display: none;
				}
				
				.contextual-links-wrapper {
					display: none !important;
				}
				
				.language-switcher-locale-url {
					list-style: none;
					margin: 0; padding: 0;
					
					li {
						float: left;
						
						
						
						a {
							float: left;
							display: block;
							width: 30px;
							height: 20px;
							margin-left: 5px;
							background-position: center center;
							background-size: contain;
							background-repeat: no-repeat;
							text-indent: -1000px;
							overflow: hidden;
							opacity: 0.5;
							
						}
						
						&.active > a,
						> a:hover,
						> a:focus {
							opacity: 1;
						}
						
						&.nl > a {
							background-image: url("images/nl.png");
						}
						
						&.en > a {
							background-image: url("images/en.png");
						}
						
						&.fr > a {
							background-image: url("images/fr.png");
						}
					}
				}
			}
			
			.primaryNavigation-top-nav {
				@media (min-width: @screen-xs-max) {
					float: right;
				}
				
				@media (max-width: @screen-xs-max) {
					float: left;
				}
				
				.nav {
					> li {
						@media (min-width: @screen-xs-max) {
							float: left;
						}
						
						@media (max-width: @screen-xs-max) {
							width: 100%;
						}
						
						> a {
							padding: 1px 5px 4px;
							text-transform: uppercase;
							color: rgba(0,0,0,0.5);
							font-weight: 600;
							font-size: 14px;
							position: relative;
							
							&:after {
								background: @bmm-blue;
								content: "";
								width: 100%;
								height: 3px;
								.animatedShort();
								opacity: 0;
								.translate(0,5px);
								position: absolute;
								left: 0; bottom: 0;
							}
						}
						
						&.active > a,
						> a:hover,
						> a:focus {
							background: none;
							color: #333;
							
							&:after {
								opacity: 1;
								.translate(0,0);
							}
						}
					}
				}
			}
		
		.primaryNavigation-nav {
			.clearfix();
			padding-top: 15px;
			padding-bottom: 10px;
			
			.nav {
				@media (min-width: @screen-xs-max) {
					float: right;
				}
				
				> li { 
					@media (min-width: @screen-xs-max) {
						float: left;
						margin-left: 5px;
					}
					
					@media (min-width: @screen-lg) {
						margin-left: 10px;
					}
					
					> a {
						text-transform: uppercase;
						font-weight: 600;
						color: #333;
						padding: 5px 5px 7px;
						
						&:after {
							background: @bmm-blue;
							content: "";
							width: 100%;
							height: 3px;
							.animatedShort();
							opacity: 0;
							.translate(0,5px);
							position: absolute;
							left: 0; bottom: 0;
						}
					}
					
					&.active > a,
					> a:hover,
					> a:focus {
						background: none;
						color: #333;
						
						&:after {
							opacity: 1;
							.translate(0,0);
						}
					}
				}
				
				.open {
					> a,
					> a:hover,
					> a:focus {
						background: none;
						color: #333;
						
						&:after {
							opacity: 1;
							.translate(0,0);
						}
					}
				}
			}
		}
	
.navbar-toggle {
	icon-bar {
		color: @bmm-blue;
	}
}	
		

///////////////////////////////////////////////////////////////
//
// Jumbotron
//
///////////////////////////////////////////////////////////////

.jumbotron {
	//background: url("images/jumbotron-bmm-2.jpg") center top no-repeat;
	background-size: cover;	
	//height: 600px;
	background: @bmm-blue;
	height: 330px;
}

		.jumbotron--page {
			background-image: url("images/jumbotron-default.jpg");
			background-position: center bottom;
			height: 150px;
		}
		
		.jumbotron--member {
			background-image: url("images/jumbotron-default.jpg");
			background-position: center bottom;
			min-height: 150px;
			height: auto;
		}

	.jumbotron-search {
		.make-sm-column(5);
		.make-sm-column-offset(7);
		
		.make-md-column(4);
		.make-md-column-offset(8);
		padding-top: 80px;
	}
	
		.jumbotron-search-title {
			font-size: 90px;
			color: @bmm-orange;
			text-transform: uppercase;
			font-weight: bold;
			margin: 0 0 20px;
			line-height: 0.8;
		//	text-shadow: 0px 0px 70px rgba(1,24,48,1), 0px 0px 45px rgba(1,24,48,1), 0px 0px 30px rgba(1,24,48,1);
			
			small {
				display: block;
				color: #fff;
				text-transform: none;
				font-weight: 300;
				font-size: 50px;
			}
		}
		
	.jumbotron-title {
		font-size: 64px;
		line-height: 1;
		color: white;
		margin: 100px 0 30px !important;
	}


///////////////////////////////////////////////////////////////
//
// Features
//
///////////////////////////////////////////////////////////////

.features {
	.make-row();
}

	.feature {
		.make-sm-column(6);
		margin-bottom: @grid-gutter-width;
		padding-left: 110px;
		position: relative;
		font-size: 18px;
		margin-top: 40px;
	}
	
		.feature-icon {
			position: absolute;
			top: 4px;
			left: 15px;
		}
		
			.feature-icon--brands {
				background: url("images/icon-bulb.svg") center center no-repeat;
				background-size: contain;
				width: 70px;
				height: 80px;
			}
			
			.feature-icon--models {
				background: url("images/icon-brain.svg") center center no-repeat;
				background-size: contain;
				width: 70px;
				height: 80px;
			}
		
		.feature-title {
			color: @bmm-blue;
			margin: 0 0 5px;
			font-size: 26px;
		}



///////////////////////////////////////////////////////////////
//
// Sections
//
///////////////////////////////////////////////////////////////

.section {
	padding: 60px 0 30px;
	background: white;
}

		.section--main {
			padding-top: 40px;
		}

		.section--white {
			padding: 60px 0 30px;
		}
		
		.section--gray {
			background: @bmm-gray-light;
		}
		
		.section--chalkboard {
			padding: 60px 0 30px;
			background: url("images/bg-chalkboard.jpg") center center no-repeat;
			background-size: cover;
		}
		
		.section--meeting {
			padding: 60px 0 30px;
			background: url("images/bg-meeting.jpg") center center no-repeat;
			background-size: cover;
		}

	.section-hero {
		text-align: right;
		padding: 10px 27px 10px 0;
		border-right: 6px solid @bmm-blue;
	}
	
			.section-hero--white {
				.section-hero-title {
					color: white;
				}
				
				.section-hero-link {
					color: rgba(255,255,255,0.5);
					
					&:hover,
					&:focus {
						color: white;
					}
				}
			}
	
		.section-hero-title {
			font-size: 32px;
			font-weight: 300;
			margin: 0;
			line-height: 1;
			
			@media (min-width: @screen-xs-max) {
				font-size: 45px;
			}
		}
		
		.section-hero-link {
			display: block;
			margin-top: 20px;
			text-transform: uppercase;
			font-weight: 600;
			
			&:after {
				.animated();
				display: inline-block;
				font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: @fa-var-arrow-circle-right;
				margin-left: 10px;
			}
			
			&:hover,
			&:focus {
				text-decoration: none;
				
				&:after {
					.translate(5px,0);
				}
			}
		}
		
		

///////////////////////////////////////////////////////////////
//
// Landing Page
//
///////////////////////////////////////////////////////////////

.landing-intro {
	font-size: 24px;
	
	@media (min-width: @screen-xs-max) {
		font-size: 30px;	
	}
	
	p {
		line-height: 1.3;
		color: #919191;
	}
}


///////////////////////////////////////////////////////////////////////////
//
// Dealer Locator
//
///////////////////////////////////////////////////////////////////////////

.section--map {
	padding: 0;
	
	.store {
		padding: 5px 0;
		
		.title {
			font-weight: bold;
			font-size: 18px;
			margin-bottom: 10px;
		}
		
		.address {
			margin-bottom: 10px;
		}
		
		.features {
			display: none;
		}
		.action {
			display: none;
		}
	}
	
}

	#map-canvas { height: 500px; }

.section--members {
	background: @bmm-gray-light;
	padding: 20px 0 30px;
}

.no-stores {
	display: none;
}

.dealers-wrapper {
	position: relative;
	.make-row();
}

	.dealers-search {
		.make-sm-column(4);
		position: absolute;
		top: 0; right: 0;
		
		.tt-input {
			.form-control();
			.input-lg();
			background: white !important;
		}
	}
	
		.typeahead {
		  background-color: #fff;
		}
		
		.twitter-typeahead {
			width: 100%;
			
			&:after {
				top: 9px;
				right: 10px;
				width: 30px;
				height: 30px;
				position: absolute;
				display: inline-block;
				font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
				font-size: inherit; // can't have font-size inherit on line above, so need to override
				text-rendering: auto; // optimizelegibility throws things off #1094
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: @fa-var-search;
				font-size: 28px;
				color: #ccc;
			}
		}
		
		.typeahead:focus {
		  border: 2px solid #0097cf;
		}
		
		.typeahead h3 {
		  display: none;
		}
		
		.tt-query {
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		}
		
		.tt-hint {
		  color: #999
		}
		
		.tt-dropdown-menu {
			width: 100%;
			text-align:left;
			margin-top: 12px;
			background-color: #fff;
			border-radius: 0;
			box-shadow: 0 5px 10px -5px rgba(0,0,0,.2);
			
			h3 {
				display: none;
			}
		}
		
		.tt-suggestion {
			padding: 5px 15px;
		}
		
		.tt-suggestion.tt-cursor {
		  color: #fff;
		  background-color: @bmm-blue;
		  cursor: pointer;
		
		}
		
		.tt-suggestion p {
			margin: 0;
		}
		
	.location-search {
		position: relative;
		
		&:after {
			top: 10px;
			right: 10px;
			width: 30px;
			height: 30px;
			position: absolute;
			display: inline-block;
			font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
			font-size: inherit; // can't have font-size inherit on line above, so need to override
			text-rendering: auto; // optimizelegibility throws things off #1094
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			content: @fa-var-location-arrow;
			font-size: 28px;
			color: #ccc;
		}
	}

.storelocator-panel {
}

	.storelocator-filter {
		.make-sm-column(8);
		
		h4 {
			display: none;
		}
		
		input {
			.form-control();
			.input-lg();
		}
	}
	
	.store-list {
		.make-row();
		.clearfix();
		list-style: none;
		margin: 60px 0 0;
		padding: 0;
		width: 100%;
		float: left;
		display: flex;
		//display: none !important;
	}
	
		li.store {
			.make-sm-column(4);
			display: flex;
			margin-bottom: 30px;
			
			.store {
				background: white;
				width: 100%;
				padding: 20px;	
				box-shadow: 0 5px 10px -5px rgba(0,0,0,0.1);
				cursor: pointer;
				.animatedShort();
				position: relative;
				padding-bottom: 60px;
				
				&:hover,
				&:focus {
					.scale(1.05);
				}
			}
			
			.title {
				font-weight: bold;
				font-size: 21px;
				margin-bottom: 10px;
				line-height: 1.2;
			}
			
			.address {
				margin-bottom: 15px;
			}
			
			.misc {
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 0 20px 20px;
				a {
					.button();
				}
			}
		}


///////////////////////////////////////////////////////////////
//
// Members
//
///////////////////////////////////////////////////////////////

.memberDetails {}

	.memberDetails-details {
		list-style: none;
		margin: 0 0 50px; padding: 0;
		font-size: 21px;
		
		a {
			color: @text-color;
			
			&:hover,
			&:focus {
				text-decoration: none;
				color: @bmm-blue;
			}
		}
		
		> li {
			position: relative;
			padding-left: 40px;
		}
	}
	
		.memberDetails-details-icon {
			position: absolute;
			top: 0; left: 0;
			width: 30px;
			color: @bmm-blue;
		}
		
	.memberDetails-map {
		height: 400px;
		width: 100%;
	}	
	
	.memberDetails-employees {
		.table();
		.table-hover();
		.table-striped();
	}
	
		.memberDetails-mark {
			width: 16px;
		}


///////////////////////////////////////////////////////////////
//
// Page Footer
//
///////////////////////////////////////////////////////////////

footer .links {
	display: none;
}

.page-footer {
	padding: 60px 0 0px;
	box-shadow: 0 -1px 2px rgba(0,0,0,0.05);
	background: white;
}

	.page-footer-brand {
		.make-sm-column(4);
		margin-bottom: @grid-gutter-width;
	}

		.page-footer-brand-logo {
			width: 100px;			
		}

	.page-footer-link {
		color: @text-color;
		
		h3 {
			margin: 0;
			font-size: 30px;
			font-weight: 300;
		}
		
		span {
			display: block;
			text-transform: uppercase;
			color: rgba(0,0,0,0.3);
			font-weight: bold;
			
			&:after {
				.animated();
				display: inline-block;
				font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: @fa-var-arrow-circle-right;
				margin-left: 10px;
			}
		}
		
		&:hover,
		&:focus {
			text-decoration: none;
			
			h3 {
				color: @text-color;
			}
			
			span {
				color: @bmm-blue;
				
				&:after {
					.translate(10px,0);
				}
			}
		}
	}
	
	
	.page-footer-bottom {
		padding-top: 10px;
		margin-top: 30px;
		background: @bmm-gray-light;
	}
	
		.page-footer-disclaimer {
			.make-sm-column(6);
			margin-bottom: 10px;
		}
		
		.page-footer-socialMedia {
			.make-sm-column(6);
			text-align: right;
			margin-bottom: 10px;
			font-size: 24px;
		}