/* CSS Document */
html, body{
	height:100%;
}
body{
	padding-bottom:0 !important;
}
#sb-site{
	padding-bottom:0 !important;
}
#areaMap{
	position:fixed !important;
	width: 100%;
	height: 100%;
}
.wellLocate{
	position:absolute;
	z-index:999;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	height:40%;
	min-height:220px !important;
	top:30%;
	right:0;
	bottom:0;
	left:0;
	text-align:center;
	background: rgb(255, 255, 255) !important; /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 255, 255, .9) !important;
	border:none !important;
}
.wellLocate h2{
	font-size:34px !important;
	margin-bottom:2px !important;
}
.wellLocate h2 i{
	position:relative;
	top:-1px;
	color:#AB1C23;
	margin-left:3px;
}
.wellLocate .btn, .wellAllDealers .btn, .dealerWindow .btn, #viewAllDealers .btn{
	padding:10px 20px 4px;
	font-size:18px;
}
.wellLocate a{
	font-family:'Open Sans Bold' !important;
	color:#AB1C23;
}
.wellLocate a:hover{
	color:#AB1C23;
}
.dealerWindow{
	min-width:225px !important;
	font-family:'Open Sans Bold' !important;
	font-size:15px;
	line-height:1.2;
}
.dealerWindow h3{
	font-size:22px !important;
	color:#AB1C23 !important;
	margin-bottom:-3px !important;	
}
#viewAllDealers{
	position:fixed;
	bottom:15px;
	padding:0 15px 0 15px;
	width:100%;
	z-index:999;
}
.wellAll{
	padding:5% 2% 2% !important;
	position:relative;
	z-index:999;
	margin:80px 0 20px !important;
	background: rgb(255, 255, 255) !important; /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 255, 255, .9) !important;
	border:none !important;
}
.wellAll h1{
	font-size:30px !important;
	color:#AB1C23 !important;
	border-bottom:1px solid #D6D6D6 !important;
	margin-bottom:15px !important;
}
.wellState{
	background-color:#000;
	padding:10px 10px 2px 10px;
	margin:17px 0 10px 0;
}
.wellState h3{
	font-size:26px !important;
	color:#FFF !important;
}
.wellAllDealers{
	padding:10px !important;
	background-color:transparent !important;
	border:1px solid #D6D6D6 !important;
	font-size:15px !important;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
	cursor:pointer;
	margin-bottom:7px !important;	
}
.wellAllDealers:hover{
	background-color:#FFF !important;
	border-color:#AB1C23 !important;
	color:#AB1C23 !important;
}
.wellAllDealers h3{
	font-size:20px !important;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.wellAllDealers:hover h3{
	color:#AB1C23 !important;
}
.wellAllDealers .phone a{
	color:#000;
	text-decoration:none;
}
.wellAllDealers:hover .phone a{
	color:#AB1C23;
	text-decoration:none;
}
.wellAllDealers .btn{
	margin:10px 0 2px !important;
}
.wellAllDealers .social a{
	font-size:26px;
	color:#000;
	margin-right:2px;
}
.wellAllDealers .social a:hover{
	color:#AB1C23;
}
.wellAllDealers .social a:last-child{
	margin-right:0;
}

/********************************************************** MEDIA QUERRIES ******************************************************************/

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
	.wellLocate{
		height:60%;
		min-height:350px;
		top:23%;
		max-height:220px !important;
	}
	.wellLocate h2{
		font-size:38px !important;
	}
	.wellAll h1{
		font-size:34px !important;
	}
	.wellState h3{
		font-size:28px !important;
	}
	.wellAllDealers{
		font-size:16px !important;	
	}
	.wellAllDealers h3{
		font-size:22px !important;
	}
	
}

/* Tablet (portrait) */
@media(min-width:768px){
	#areaMap{
		margin-top:0;
	}
	#headerDealer{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		z-index:1000;
	}
	.wellLocate{
		top:35%;
		width:40%;
		height:22%;
	}
	#dealerList{
		position:absolute;
		height:100%;
		min-height:100%;
		width:300px;
		top:62px;
		right:0px;
		z-index:998;
		-webkit-overflow-scrolling: touch;
		overflow-y:scroll;
		padding:2.5% 1.5% 1.5%;
		background: rgb(255, 255, 255) !important; /* Fall-back for browsers that don't support rgba */
    	background: rgba(255, 255, 255, .9) !important;
		padding-bottom:150px !important;
	}
	#dealerList h1{
		font-size:26px !important;
		color:#000 !important;
		border-bottom:1px solid #D6D6D6 !important;
		margin-bottom:15px !important;
	}
	.wellDealers{
		background-color:transparent !important;
		border:1px solid #D6D6D6 !important;
		font-size:14px !important;
		color:#000 !important;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		transition:all 0.3s ease;
		cursor:pointer;
		margin-bottom:7px !important;
	}
	.wellDealers:hover{
		background-color:#FFF !important;
		border-color:#AB1C23 !important;
		color:#AB1C23 !important;
	}
	.wellDealers h3{
		font-size:20px !important;
		color:#AB1C23 !important;
		margin-bottom:-3px !important;
	}
	.wellDealers .phone a{
		color:#000;
		text-decoration:none;
	}
	.wellDealers:hover .phone a{
		color:#AB1C23;
		text-decoration:none;
	}
	.wellDealers .distance{
		font-size:12px !important;
		margin-top:5px;
	}
	.wellDealers .btn{
		margin:10px 0 2px !important;
		padding:10px 20px 4px;
		font-size:16px;
	}
	.wellDealers .social a{
		font-size:26px;
		color:#AB1C23;
		margin-right:2px;
	}
	.wellDealers .social a:hover{
		color:#000;
	}
	#viewAllDealers{
		bottom:15px;
		left:15px;
		width:240px;
		padding:0;
	}
	.wellAll{
		padding:3% 2% 2% !important;
		margin:95px 0 25px !important;
	}
	.wellAll h1{
		font-size:38px !important;
	}
	.wellState h3{
		font-size:30px !important;
	}
	.wellAllDealers h3{
		font-size:22px !important;
		margin-bottom:-3px !important;
	}
	.wellAllDealers .btn{
		margin:0 0 5px !important;
	}
	.wellAllDealers .social a{
		font-size:28px;
	}
	
}

/* Tablet (landscape) */
@media(min-width:992px){
	.wellLocate{
		width:35%;
		height:28%;
	}
	.wellLocate h2{
		font-size:40px !important;
	}
	.wellLocate .btn, .wellAllDealers .btn, .dealerWindow .btn, #viewAllDealers .btn{
		font-size:20px;
	}
	.dealerWindow{
		min-width:250px !important;
	}
	#dealerList{
		width:350px;
		top:69px;
	}
	#dealerList h1{
		font-size:30px !important;
	}
	.wellDealers{
		font-size:15px !important;
	}
	.wellDealers h3{
		font-size:22px !important;
	}
	.wellDealers .distance{
		font-size:13px;
	}
	.wellDealers .btn{
		font-size:20px !important;
	}
	.wellDealers .social a{
		font-size:30px;
	}
	.wellAll{
		margin:115px 0 35px !important;
	}
	.wellAll h1{
		font-size:42px !important;
	}
	.wellAllDealers .social a{
		font-size:30px;
	}
	
}

/* Desktop */
@media(min-width:1200px){
	.wellLocate{
		width:25%;
		max-width:380px !important;
		min-height: 235px !important;
	}
	.wellLocate h2{
		font-size:46px !important;
	}
	.wellLocate .btn, .wellAllDealers .btn, .dealerWindow .btn, #viewAllDealers .btn{
		font-size:22px;
	}
	#dealerList{
		width:425px;
		top:76px;
	}
	#dealerList h1{
		font-size:36px !important;
	}
	.wellDealers .distance{
		margin-top:0;
		font-size:10px;
	}
	.wellDealers .distance i{
		font-size:12px;
	}
	.wellDealers .btn{
		margin:7px 0 0 !important;
		padding:10px 0 4px;
		font-size:17px !important;
	}
	.wellDealers .social a{
		margin-right:1px;
		font-size:22px;
	}
	.wellDealers .social a:last-child{
		margin-right:0;
	}
	#viewAllDealers{
		width:260px;
	}
	#viewAllDealers .btn{
		font-size:16px !important;
	}
	.wellAll{
		margin:135px 0 45px !important;
	}
	.wellAll h1{
		font-size:56px !important;
	}
	.wellAllDealers .social a{
		font-size:32px;
	}
	.wellState{
		margin:20px 0 10px 0;
	}
	.wellState h3{
		font-size:32px !important;
	}
	.wellAllDealers{	
		padding:12px !important;
	}
	.wellAllDealers .social a{
		font-size:32px;
	}
	
}