@import url(http://fonts.googleapis.com/css?family=Raleway:400,900,700,300);

html * {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body {
  padding-bottom: 199px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
}

@media (max-width: 1366px){
	body {
		padding-bottom: 124px;
	}
}

@media (max-width: 570px){
	body {
		padding-bottom: 60px;
	}
}

a:link, a:visited {
	text-decoration: none;
}

a:hover {
	  /* First we need to help some browsers along for this to work.
		 Just because a vendor prefix is there, doesn't mean it will
		 work in a browser made by that vendor either, it's just for
		 future-proofing purposes I guess. */
	  -o-transition:.5s;
	  -ms-transition:.5s;
	  -moz-transition:.5s;
	  -webkit-transition:.5s;
	  /* ...and now for the proper property */
	  transition:.5s;
}

section {
	padding: 90px 0;
}

section#main {
	background: url('/imgs/main-bg.jpg');
	background-position: center -200px;
	background-attachment: fixed;
	background-size: cover;
	min-height: 80vh;
}



section h1, section h2 {
	font-family: 'Raleway';
	font-weight: 900;
	text-transform: uppercase;
	font-size: 3.8em;
}

section h3 {
	font-family: 'Raleway';
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.5em;
}

.main {
  text-align: center;
	margin-top: 25vh;
}

.glyphicon-menu-down {
	font-size: 1.8em;
	padding: 15px;
}


#main .lead {
	font-family: 'Raleway', sans-serif;
	font-size: 1.8em;
	text-transform: uppercase;
}

a.video-button:link, a.video-button:visited {
	display: block;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(184, 39, 45) transparent;
    /* RGBa with 0.5 opacity */
    background: rgba(184, 39, 45, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50B8272D, endColorstr=#50B8272D);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50B8272D, endColorstr=#50B8272D)";
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	width: 70%;
	padding: 12px 0px;
	margin: 0 auto;
	border: 3px solid #B8272D;
	margin-top: 1.5vh;
	margin-bottom: 3vh;
}

a.video-button:hover {
	text-decoration: none;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(247, 148, 156) transparent;
    /* RGBa with 0.5 opacity */
    background: rgba(247, 148, 156, 0.5);
    /* For IE 5.5 - 7: AA,HEXVALUE*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50F7949C, endColorstr=#50F7949C);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50F7949C, endColorstr=#50F7949C)";
	border: 3px solid #F7949C;
}

#fixed-bar {
	padding-top: 50px;
	padding-bottom: 50px;
}

#fixed-bar .lead {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.5em;
}

@media (min-width: 992px){
	#fixed-bar.container {
		width: 90vw;
	}
}

.navbar-inverse {
	background-color: #000;
	border: 0;
}

.scroll-prompt {
	font-style: italic;
	font-weight: 300;
	font-size: 1em;
}

section#truck-guy {
	background: #b8272d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiODI3MmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjkwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover,  #b8272d 0%, #290000 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b8272d), color-stop(100%,#290000)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #b8272d 0%,#290000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #b8272d 0%,#290000 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #b8272d 0%,#290000 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #b8272d 0%,#290000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8272d', endColorstr='#290000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

	padding: 0px 0px;
}

.navbar-inverse .navbar-nav>li>a {
	text-transform: uppercase;
	font-size: 0.8em;
}

.navbar-text {
	text-transform: uppercase;
	font-weight: 700;
	color: #fff !important;
	font-size: 0.9em;
}

section#sierra {
	background: url('/imgs/sierra-bg.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#sierra .waiting {
	font-style: italic;
	font-weight: 300;
}

@media (min-width: 990px){
	.truck-sierra {
		padding: 50px 0px;
	}
}

.truck-sierra {
	margin: 0 auto;
}

section#canyon {
	background: url('/imgs/canyon-bg.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

section#colorado {
	background: url('/imgs/colorado-bg.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

section#appointment-form, body#book {
	background: url('/imgs/form-bg.jpg');
	background-size: cover;
	background-attachment: fixed;
}

section#loyalty-bonus {
	background-color: #000;
}

#loyalty-bonus em {
	color: #ffff00;
}

@media (max-width: 480px) {
	section#sierra, section#canyon, section#colorado {
		background-size: auto 100%;
		background-position: right;
		background-attachment: scroll;
	}
	
	section#appointment-form {
		background-size: auto 100%;
		background-position: left;
		background-attachment: scroll;
	}
	
	section#main {
		background: url('/imgs/main-bg-mobile.jpg');
		background-position: left;
		background-size: contain;
		background-attachment: scroll;
	}
}

@media (max-width: 768px) {
	#loyalty-bonus h2{
		line-height: 1.5em;
	}
	section h1, section h2 {
		font-size: 2em;
	}
	#fixed-bar .lead {
		padding: 15px;
	}
	
	a.video-button:link, a.video-button:visited {
		width: 90%;
	}
	
	.main {
		margin-top: 0px;
	}
	
	section#main {
		padding: 5px 0px;
	}
	
	.lead-row {
		display: none;
	}

	#fixed-bar {
		padding-top: 5px;
		padding-bottom: 5px;
	} 
	
	section#main {
		background: url('/imgs/main-bg-mobile.jpg');
		background-position: center;
		background-attachment: fixed;
	}
	
	.colorado-top {
		width: 250px;
		height: auto;
	}
	
	#space {
		padding-bottom: 50px;
	}
	
	.navbar-right {
		padding-left: 15px;
	}
}

@media (max-width: 1366px){
	#fixed-bar {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	#fixed-bar .lead {
		margin-bottom: 5px;
	}
	
	.main {
		margin-top: 10vh;
	}
	
	section#main {
		background-position: center -50px;
	}
}

@media (max-width: 990px) {
	ul.vehicle-desc {
		text-align: center;
		margin-left: -40px;
	}
}

ul.vehicle-desc {
	list-style-type: none;
	margin-top: 50px;
	margin-bottom: 20px;
	font-size: 0.9em;
	line-height: 2em;
}

.last {
	margin-top: 55px;
}

p.vehicle-end {
	text-transform: uppercase;
	padding: 10px 0;
}

.price {
	vertical-align: super;
	font-size: 1em;
}

.price-num {
	font-weight: 700;
	font-size: 4em;
	vertical-align: text-bottom;
}

a.inventory-button:link, a.inventory-button:visited {
	display: inline-block;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(184, 39, 45) transparent;
    /* RGBa with 0.5 opacity */
    background: rgba(184, 39, 45, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50B8272D, endColorstr=#50B8272D);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50B8272D, endColorstr=#50B8272D)";
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	padding: 12px 20px;
	margin: 0 auto;
	border: 3px solid #B8272D;
}

a.inventory-button:hover {
	text-decoration: none;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(247, 148, 156) transparent;
    /* RGBa with 0.5 opacity */
    background: rgba(247, 148, 156, 0.5);
    /* For IE 5.5 - 7: AA,HEXVALUE*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50F7949C, endColorstr=#50F7949C);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50F7949C, endColorstr=#50F7949C)";
	border: 3px solid #F7949C;
}

#mediaModal .modal-content {
	background: none;
	border: 0;
	box-shadow: none;
}

#mediaModal .modal-header {
	padding: 50px 0px;
	border: 0;
}

#mediaModal .close {
	text-shadow: none;
	color: #fff;
	opacity: 1;
	font-size: 4em;
}

@media (min-width: 768px){
	.colorado-top {
		display: none;
	}
}

#submit-result {
	background:radial-gradient(ellipse at center center , #B8272D 0%, #290000 100%) repeat scroll 0% 0% transparent;
	display:none;
	color:white;
}
#submit-result a {
	color:yellow;
	text-decoration:hover;
}