/* PAGE STRUCTURE */

body{font-family: 'montserratlight'; font-size: 14px; line-height: 26px; margin-bottom: 0 !important;}

.main{padding: 50px 0;}
.container{max-width:1100px; margin: 0 auto;}

.column2, .column3, .column4, .column5, .column6{float:left; padding-right: 25px; box-sizing: border-box;}
.column2{width:50%;} .column3{width:33.33333%;} .column4{width:25%;} .column5{width:20%;} .column6{width:16.66666%;} .last{padding-right:0;}

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

/* HEADER */

.header{width: 100%; padding: 15px 0;}
#logo{float: left; max-width: 288px;}
.case, .locations{float: right; text-align: right; padding: 2px 0; width: calc(100% - 288px);}
.case img{display: inline-block !important;}

/* STYLES */

.hero img{display:block;}
.welcome{background:url(../images/welcome.jpg) center center; padding: 50px 0;}
#partsiframe{border: 1px #dfdfdf solid; width: 100%; height: 900px; padding: 25px; box-sizing: border-box;}
.parts-brand select{width: 250px; font-size: 14px; color: #333; padding: 10px; margin: 10px 0; display: inline-block; overflow: hidden; border: 1px #dfdfdf solid!important; box-sizing: border-box; border-radius: 3px;}
.contact{margin: 0 0 25px 0;}
.contact-map{float: left; width: 75%; padding: 0 50px 25px 0; box-sizing: border-box;}
.contact-address{float: left; width: 25%;}
.brand{padding: 30px 0; border-bottom: 1px #aaa solid;}
.brand-logo{float: left; width: 50%; padding: 0 50px; box-sizing: border-box;}
.brand-info{float: left; width: 50%;}

/* DETAILED SEARCH */

.detailed-form{background: #b41e29; color: #fff; font-family: 'montserratbold'; padding: 25px 0; border-top: 5px #730911 solid; border-bottom: 5px #730911 solid;}
.detailed-form h3{font-size: 24px; text-align: center; text-transform: uppercase; margin-bottom: 15px;}
.detailed-search input, .detailed-search select{width: 100%; padding: 10px; font-size: 12px; background-color: #fff; border: 1px solid #dad9d9; box-sizing: border-box;}
.detailed-search input[type="submit"]{margin: 18px 0 0;}
.detailed-row{margin: 10px 0; color: #fff; font-size: 12px;}
.detailed-search input[type="submit"]{font-family: 'montserratbold'; font-size: 12px; background: #333; width: 100%; height: 42px; color: #fff; display: inline-block; border-radius: 0 !important; outline: none; border: none; transition: all .2s ease-in-out;}
.detailed-search input[type="submit"]:hover{background: #555;}

/* ZOOM */

.zoom-container{float:left; width: 25%; position: relative; overflow: hidden; display: inline-block; border: 1px solid #fff; vertical-align: top; box-sizing: border-box;}
.zoom-container img{display: block; width: 100%; height: auto; transition: all .5s ease;}
.zoom-container .zoom-caption{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .5); transition: all .5s ease;}
.zoom-container .zoom-caption h3{display: block; text-align: center; font-size: 16px; padding: 10px 0; text-transform: uppercase; color: #fff; margin: 40% 0 0; background: rgba(0, 0, 0, 0.6);}
.zoom-container:hover .zoom-caption{background: none;}

/* FOOTER */

.top-footer{background: #b41e29;}
.our-locations, .map{float:left; width: 50%; box-sizing: border-box;}
.our-locations{padding: 30px 0;}
.our-locations h3{padding: 0 20px;}
.location-list{float: left; width: 33.3333%; padding: 0 20px; box-sizing: border-box;}
.map iframe{display: block;}
.mid-footer{background: #333; padding: 50px 0; width: 100%;}
.bottom-footer{background: #000; border-top: 2px #b41e29 solid; padding: 10px 0;}
#footer-logo{float: right; width: 288px; padding: 15px 0;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:10px; color:#aaa;}
a.footerlink:hover{text-decoration:none; color:#b41e29;}
.footertext{font-size:10px; color:#aaa;}
.smallfootertext{font-size:10px; color:#aaa;}
.divfooter{float: left; width: calc(100% - 350px);}

.clear{clear:both;}	
*{box-sizing: border-box;}

/* RESPONSIVE STYLES */

.spacer{display: inline-block; padding: 0 10px;}

@media screen and (max-width: 1280px) and (min-width:1121px){
	.container{padding: 0 25px;}
	.location-list p{font-size: 12px;}
	.location-list{float: left; width: 30%; padding: 0 0 0 20px; box-sizing: border-box;}
}

@media screen and (max-width: 1120px) and (min-width:1041px){
	.container{padding: 0 25px;}
	.our-locations, .map{float: none; width: 100%;}
}

@media screen and (max-width: 1040px) and (min-width: 781px){
	.container{padding: 0 25px;}
	.our-locations, .map{float: none; width: 100%;}
	.locations{clear: both; float: none; width: 100%; text-align: center; padding: 10px 0;}
}

@media screen and (max-width: 780px) and (min-width: 691px){
	.container{padding: 0 25px;}
	.our-locations, .map{float: none; width: 100%;}
	.column4{width: 50%;}
	.locations{clear: both; float: none; width: 100%; text-align: center; padding: 10px 0; font-size: 12px;}
	.zoom-container{width: 50%;}
}

@media screen and (max-width: 690px) and (min-width: 501px){
	.hide-690{display: none;}
	.container{padding: 0 25px;}
	.spacer{display: block; padding: 0;}
	.contact-map{float: none; width: 100%; padding: 0 0 25px 0;}
	.contact-address{float: none; width: 100%;}
	.column4{width: 50%;}
	#logo{float: none; max-width: 288px; margin: 0 auto;}
	.case{display: none;}
	.locations{clear: both; float: none; width: 100%; text-align: center; padding: 10px 0; font-size: 12px;}
	.zoom-container{width: 50%;}
	.brand-logo{float: none; width: 100%; padding: 0 50px; box-sizing: border-box;}
	.brand-info{float: none; width: 100%;}
	.our-locations, .map{float: none; width: 100%;}
	.location-list{float: none; width: 100%; padding: 20px 25px;}
	.divfooter{float: none; width: 100%; text-align: center;}
	#footer-logo{float: none; width: 288px; margin: 0 auto;}
}

@media screen and (max-width: 500px){
	.hide-690{display: none;}
	.container{padding: 0 25px;}
	.spacer{display: block; padding: 0;}
	.contact-map{float: none; width: 100%; padding: 0 0 25px 0;}
	.contact-address{float: none; width: 100%;}
	.column4{float: none; width: 100%; padding-right: 0; margin-bottom: 5px;}
	#logo{float: none; max-width: 288px; margin: 0 auto;}
	.case{display: none;}
	.locations{clear: both; float: none; width: 100%; text-align: center; padding: 10px 0; font-size: 12px;}
	.zoom-container{float: none; width: 100%;}
	.brand-logo{float: none; width: 100%; padding: 0 50px; box-sizing: border-box;}
	.brand-info{float: none; width: 100%;}
	.our-locations, .map{float: none; width: 100%;}
	.location-list{float: none; width: 100%; padding: 20px 25px;}
	.divfooter{float: none; width: 100%; text-align: center;}
	#footer-logo{float: none; width: 288px; margin: 0 auto;}
}