@font-face {
    font-family: ProximaNovabold;
    src: url(../fonts/ProximaNova-Bold.otf);
}

@font-face {
    font-family: ProximaNovaSemibold;
    src: url(../fonts/ProximaNova-Semibold.otf);
}

@font-face {
    font-family: ProximaNovaRegular;
    src: url(../fonts/ProximaNova-Regular.otf);
}

@font-face {
    font-family: ProximaNovaLight;
    src: url(../fonts/ProximaNova-Light.otf);
}

@font-face {
    font-family: ProximaNovaBlack;
    src: url(../fonts/ProximaNova-Black.otf);
}

body{
	font-family: ProximaNovaLight, arial;
	background: #fff;
	box-sizing: border-box;
    color: #333333;
}

header{
	width: 100%;
	height: 70px;
	background: #FFFFFF;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.04);
}

	.container{
		width: 1180px;
		margin: 0px auto;
	}

	#logo{
		width: 152px;
		height: 18px;
		float: left;
		background: url(../images/logo.png) no-repeat;
		margin-top: 25px;
	}

	nav{
		float: right;
		margin-top: 23px;

	}

		nav span{
			margin: 3px 35px 0px 0px;
			float: left;
			font-family: ProximaNovaSemibold, arial;
			color: #A7A7A7;
		}

		nav .nav-icon{
			width:22px;
			height: 20px;
			float: right;
			background: url(../images/nav.png) no-repeat;
		}

#hero{
	width: 100%;
	background: url(../images/hero-bg.png) no-repeat;
	background-size: cover;
	float: left;
}

	.hero-content{
		float: left;
		width: 100%;
		padding-top: 170px;
		padding-bottom: 70px;
	}

	#hero h1{
		font-family: ProximaNovaBlack, arial;
		color: #A7A7A7;
		font-size: 45px;
	}

	#hero strong{
		font-size: 20px;
		color: #A7A7A7;
		line-height: 30px;
	}

	#hero .search-area{
		float: left;
		width: 100%;
		margin-top: 20px;
	}

	#hero .search{
		width: 690px;
		height: 60px;
		float: left;
		background: #C7C7C7;
		border-radius: 5px;
		margin-right: 30px;
	}

		#hero .search b{
			width: 25px;
			height: 25px;
			background: url(../images/search.png) no-repeat;
			float: right;
			margin: 17px 19px 0px 0px;
		}

	#hero .shop-links{
		float: left;
		width: 450px;
	}

	#hero span{
		font-family: ProximaNovaRegular, arial;
		border-bottom: 1px solid #A7A7A7;
		color: #919191;
		height: 20px;
		float: left;
		margin: 0px 25px 15px 0px;
	}

	#hero span b{
		width: 8px;
		height: 13px;
		background: url(../images/arrow.png) no-repeat;
		float: right;
		margin: 1px 0px 0px 13px;
	}

.boxes{
	padding:15px 0px;
	float: left;
	width: 100%;
}

.boxes .box{
	width: 272px;
	height: 225px;
	background: #C7C7C7;
	border-radius: 5px;
	margin: 15px 23px 15px 0px;
	float: left;
	padding:30px;
}

	.boxes .box strong{
		font-family: ProximaNovaSemibold, arial;
		font-size: 25px;
		color: #fff;
		float: left;
		line-height: 32px;
		margin-bottom: 13px;
		width: 100%;
	}

	.boxes .box span{
		width: 132px;
		height: 44px;
		float: left;
		border: 2px #fff solid;
		line-height: 40px;
		text-align: center;
		color: #fff;
		font-family: ProximaNovaSemibold, arial;
		letter-spacing: 1px;
		border-radius: 5px;
	}

	.boxes .box b{
		width: 30px;
		height: 30px;
		background: url(../images/gear.png) no-repeat;
		float: left;
		margin-bottom: 13px;
	}

		.boxes .box.book b{
			background: url(../images/steering.png) no-repeat;
		}

		.boxes .box.get b{
			background: url(../images/car.png) no-repeat;
		}

		.boxes .box.what b{
			background: url(../images/gt.png) no-repeat;
		}

	.boxes .box.what{
		background-image: linear-gradient(-178deg, #FF9353 0%, #FF5E64 100%);
		border-radius: 5px;
	}

.featured-vehicles{
	background: #F6F5F5;
	height: 352px;
	float: left;
	width: 100%;
}

	.featured-vehicles h2{
		font-size: 25px;
		color: #A7A7A7;
		text-align: center;
		font-family: ProximaNovaSemibold, arial;
		padding: 40px 0px;
	}

	.featured-vehicles .vehicles{
		width: 100%;
		text-align: center;
	}

	.featured-vehicles .vehicles em{
		border-radius: 100%;
		width: 42px;
		height: 42px;
		background-color: #D1D1D1;
		float: left;
		margin-top: 50px;
	}

		.featured-vehicles .vehicles em.left{
			background-image: url(../images/arrow-left.png);
			background-repeat: no-repeat;
			background-position: center;
		}

		.featured-vehicles .vehicles em.right{
			background-image: url(../images/arrow-right.png);
			background-repeat: no-repeat;
			background-position: center;
			float: right;
		}

	.featured-vehicles .vehicles .vehicle{
		width: 166px;
		display: inline-block;
		text-align: left;
		margin:0px 15px;
	}

	.featured-vehicles .vehicles .vehicle-image{
		width: 166px;
		height: 146px;
		float: left;
		border-radius: 5px;
		background: #000;
		margin-bottom: 5px;
		background: url(../images/car1.png)
	}

	.featured-vehicles .vehicles .car2 .vehicle-image{
		background: url(../images/car2.png)
	}

	.featured-vehicles .vehicles .car3 .vehicle-image{
		background: url(../images/car3.png)
	}

	.featured-vehicles .vehicles .car4 .vehicle-image{
		background: url(../images/car4.png)
	}

	.featured-vehicles .vehicles .car5 .vehicle-image{
		background: url(../images/car5.png)
	}

	.featured-vehicles .vehicles .vehicle h3{
		color: #A7A7A7;
		font-family: ProximaNovaSemibold, arial;
		line-height: 34px;
	}

	.featured-vehicles .vehicles .vehicle span{
		font-family: ProximaNovaRegular, arial;
		color: #A7A7A7;
	}

	.about-section{
		width: 100%;
		float: left;
	}

		.book-appointment, .about{
			width: 50%;
			float: left;
			background: #D1D1D1;
			color: #fff;
		}

			.about{
				background: #EDEDED;
			}

		.book-appointment .content, .about .content{
			width: 590px;
			display: inline-block;
			float: right;
		}

		.about .content{
			float: left;
			padding: 70px 0px 70px 70px;
		}

		.book-appointment .content{
			padding: 70px 70px 70px 0px;
		}

		.book-appointment h2, .about h2{
			font-size: 25px;
			font-family: ProximaNovaSemibold, arial;
			text-align: left;
			margin-bottom: 30px;
		}

			.about h2 strong{
				font-family: ProximaNovaBlack, arial;
			}

		.book-appointment p, .about p{
			line-height: 30px;
			text-align: left;
			font-size: 16px;
		}

			.about h2, .about p{
				color: #A7A7A7;
			}

	.gt-banner{
		float: left;
		width: 100%;
		padding: 25px 0px;
	}

	.gt-banner .gt-logo{
		width: 42px;
		height: 46px;
		float: left;
		background: url(../images/gt-logo.png);
		margin-right: 30px;
	}

	.gt-banner .banner-content{
		float: left;
		color: #444444;
	}

		.gt-banner .banner-content h3{
			font-size: 22px;
			font-family: ProximaNovaSemibold, arial;
			padding-bottom: 7px;
		}

		.gt-banner .banner-content p{
			color: #A8A8A8;
		}

	.gt-banner a{
		width: 169px;
		height: 50px;
		float: right;
		line-height: 50px;
		color: #fff;
		text-align: center;
		font-family: ProximaNovaSemibold, arial;
		letter-spacing: 1px;
		border-radius: 5px;
		background-image: linear-gradient(-178deg, #FF9353 0%, #FF5E64 100%);
		text-decoration: none;
	}

footer{
	width: 100%;
	float: left;
	background: #F6F6F6;
}

	footer .container{
		color: #A7A7A7;
		font-size: 14px;
		padding:30px 0px;
	}

	footer span{
		float: left;
	}

	footer .powered{
		width: 214px;
		height: 14px;
		float: right;
		background: url(../images/powered-by-edealer.png);
	}

	.apply-now, .build-now {
		text-decoration: none;
		color: inherit;
	}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#logo{
		background: url(../images/logo@x2.png);
		background-size: 152px 18px;
	}

	nav .nav-icon{
		background: url(../images/nav@x2.png);
		background-size: 22px 20px;
	}

	#hero span b{
		background: url(../images/arrow@x2.png);
		background-size: 8px 13px;
	}

	.boxes .box.build b{
		background: url(../images/gear@2x.png);
		background-size: 30px 30px;
	}

	.boxes .box.book b{
		background: url(../images/steering@2x.png) no-repeat;
		background-size: 30px 30px;
	}

	.boxes .box.get b{
		background: url(../images/car@2x.png) no-repeat;
		background-size: 30px 25px;
	}

	.boxes .box.what b{
		background: url(../images/gt@2x.png) no-repeat;
		background-size: 29px 30px;
	}

	#hero .search b{
		background: url(../images/search@x2.png) no-repeat;
		background-size: 25px 25px;
	}

	.gt-banner .gt-logo{
		background: url(../images/gt-logo@2x.png);
		background-size: 42px 46px;
	}

	footer .powered{
		background: url(../images/powered-by-edealer@2x.png);
		background-size: 214px 14px;
	}

	.featured-vehicles .vehicles em.left{
		background-image: url(../images/arrow-left@2x.png);
		background-size: 8px 13px;
	}

	.featured-vehicles .vehicles em.right{
		background-image: url(../images/arrow-right@2x.png);
		background-size: 8px 13px;
	}
}

@media (max-width: 1210px) {
	.container{
		width: 100%;
		padding:0px 30px;
	}

	.boxes{
		text-align: center;
	}

	.boxes .box{
		float: none;
		display: inline-block;
		text-align: left;
	}

	.book-appointment .content, .about .content{
		width: 100%;
		max-height: 345px;
	}

	.book-appointment .content{
		padding-left: 30px;
	}

	.about .content{
		padding-right: 30px;
	}

	.featured-vehicles .vehicles .vehicle.car5{
		display: none;
	}

	#hero{
		height: auto;
	}

	#hero .shop-links{
		width: 100%;
		float: left;
		text-align: center;
	}

	#hero .search{
		width: 100%;
		margin-bottom: 30px;
	}

	#hero span{
		float: none;
		display: inline-block;
	}
}

@media (max-width: 960px){

	.featured-vehicles .vehicles .vehicle.car4{
		display: none;
	}

	.book-appointment, .about{
		width: 100%;
	}

	.book-appointment .content, .about .content{
		padding: 70px 30px;
		max-height: none;
	}

}

@media (max-width: 770px){

	.featured-vehicles .vehicles .vehicle.car3{
		display: none;
	}

	.gt-banner{
		text-align: center;
	}

	.gt-banner .banner-content p{
		line-height: 26px;
	}

	.gt-banner .gt-logo, .gt-banner .banner-content, .gt-banner a{
		margin:0px;
		float: none;
		display: inline-block;
	}

	.gt-banner .banner-content{
		width: 100%;
		margin:30px 0px;
	}

}

@media (max-width: 700px){
	nav span{
		display: none;
	}

	footer .container{
		text-align: center;
	}

	footer span{
		width: 100%;
	}

	footer .powered{
		margin-top: 20px;
	}

	footer span, footer .powered{
		float: none;
		display: inline-block;
	}
}

@media (max-width: 550px){
	.featured-vehicles .vehicles .vehicle.car2{
		display: none;
	}
}

@media (max-width: 450px){
	#hero strong{
		width: 100%;
		text-align: center;
		float: left;
	}
	#hero h1{
		width: 100%;
		text-align: center;
	}

	.hero-content{
		padding:50px 0px;
	}

	.boxes .box{
		margin:15px 0px 15px 0px;
	}
}