﻿/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=Teko:wght@300;400;500;600;700&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	font-size:16px;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

p {font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 26px;}
h1, h2, h3, h4, h5 {font-family: 'Teko', sans-serif; letter-spacing: 1.5px;}

.width-90 {width: 90%; margin: 0 auto}
.width-80 {width: 80%; margin: 0 auto;}
.width-70 {width: 70%; margin: 0 auto;}

#padding25 {padding: 25px 0;}
#padding35 {padding: 40px 0;}
#padding50 {padding: 50px 0;}
#padding100 {padding: 100px 0;}

.flex-stretch {display: flex; flex-direction: row; align-items: stretch}
.flex-center {display: flex; flex-direction: row; align-items: center;}

.red-text {color:#d12229 }
.bl-text {color:#1f108d }
.white-text {color:#fff;}
.condensed {font-family: 'Teko', sans-serif; letter-spacing: .75px;}

hr {width: 75px; height: 10px; background: #d12229; margin: 15px 0; border:0;}

.outline-btn {border:1px solid #fff; padding: 10px 0; width: 100%; max-width: 350px; text-align: center; color:#fff;font-family: 'Teko', sans-serif; font-size: 18px; letter-spacing: 1px; font-weight: 800; line-height: normal; transition:.3s ease;}
.outline-btn:hover {border:1px solid #fff; background: #fff; color:#d12229}


.red-btn {background: #d12229; padding: 10px 0; width: 100%; max-width: 350px; text-align: center; color:#fff;font-family: 'Teko', sans-serif; font-size: 18px; letter-spacing: 1px; font-weight: 800; line-height: normal; transition:.3s ease;}
.red-btn:hover {background: #B31D23}


/*--- HEADER STYLES ---------------------*/
header {position: relative;}
.logo {position: absolute; left: 2%; top:5px; display: inherit}
.logo img {max-width: 250px; width: 100%}
.red-banner {background:#d12229; text-align: right; }
 a.social { display: inline-block; vertical-align: middle}
 a.social .fa-brands {color:#fff; font-size: 25px; padding: 10px 10px; display: inline-block;}
.header-searchbtn {display: inline-block;background: #000; text-align: center; padding: 10.25px 10px;vertical-align: middle; margin-right: -4px;}

a.header-phone {display: inline-block; background: #fff; padding: 10px 25px ; vertical-align: middle; text-align: center; color:#000; font-family: 'Teko', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 1px; line-height: inherit; margin-top:-0.25px; transition: .3s ease;}
a.header-phone:hover {background: #f1f1f1}
a.header-phone .fa-solid {color:#d12229 }

a.header-address {display: inline-block; background: #fff; padding: 10px 25px ; vertical-align: middle; text-align: center; color:#000; font-family: 'Teko', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 1px; line-height: inherit; margin-top:-0.25px; transition: .3s ease; text-transform: uppercase;}
a.header-address:hover {background: #f1f1f1}
a.header-address .fa-solid {color:#d12229 }
.nav-container {background: #000; text-align: right; padding-right: 2%; width: 98%;}

.mobile-address { display: none; background: #fff; padding: 10px 0 2px 0; text-align: center; color:#000; font-family: 'Teko', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 1px; line-height: inherit; margin-top:-0.25px; transition: .3s ease; text-transform: uppercase; }
.mobile-address:hover {background:#f1f1f1 }
.mobile-address a {color:#000;}
.mobile-address a .fa-solid {color:#d12229 }
/* Header Search */

.initiallyHidden {
    display: none;
}
.searchbox-icon {
    cursor: pointer;
	text-align: center;
    height: 100%;
	margin: 0 auto;
    width: 50px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.searchbox-icon i:hover {color: #ddd}

.searchbox-icon i {
    font-size: 22px;
    color: #fff;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
	text-align: center;
	margin: 0 auto;
}

.search-slide-down {
	width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e5e5e5;
    box-shadow: inset 0px 11px 8px -10px #CCC;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

.form-group {width: 99%;}

.header-search {
    display: flex;
    padding: 0 5%;
}

.header-search input[type=text] {
    font-size: 50px;
    font-weight: 500;
    font-size: 15px !important;
    color: #2e2e2e !important;
    text-transform: uppercase;
    background: #fcfcfc;
    border: none;
	letter-spacing: 2px;

}

.header-search ::placeholder {
    font-weight: 300;
    font-size: 15px !important;
    color: #2e2e2e !important;
    text-transform: uppercase;
}

.header-search i:hover {
    color: #a09f9f;
    cursor: pointer;
}

.header-search input:focus {
    outline: none !important;
    outline-style: none;
    box-shadow: none;
    border-color: transparent;
    caret-color: #c1bfbf;
}

#mobile-form-submit {
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    -ms-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

#mobile-form-submit:hover {
    background: #000 !important;
}



/*---BODY--------------------------------*/
.hero {background: #000; background-image: url('/siteart/hero.png'); background-size: cover; background-position: bottom center; margin-top:-15px;border-bottom: 10px solid #000;}
.hero-text {width: 70%; padding: 250px 0 50px 0; margin: 0 auto;}
.hero-text h3 {font-size: 35px; line-height: 40px;}
.hero-text h1 {font-size:50px; line-height: 52px;}
.hero-text .red-btn {width: 225px; background:#D12229; padding: 10px 0; text-align: center; color:#fff;font-weight: 800; font-family: 'Teko', sans-serif; letter-spacing: 1px; display: inline-block; vertical-align: middle; transition: .3s ease;animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;}
.hero-text .red-btn:hover {background:#B31D23;}
.hero-text .outline-btn {width: 225px; background:transparent; border:1px solid #fff; padding: 10px 0; text-align: center; color:#fff;font-weight: 800; font-family: 'Teko', sans-serif; letter-spacing: 1px; display: inline-block; vertical-align: middle; margin-left: 10px; transition: .3s ease;animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;}
.hero-text .outline-btn:hover > .fa-solid {color:#D12229}
.hero-text .outline-btn:hover {background: #fff; color:#000}

.ql-bg {background: #000; background-image:url('/siteart/truck-bg-img.png'); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat}
.ql {box-shadow: 1px 1px 4px #212121; width: 20%; margin: 1% 1%; padding: 2%;}
a.ql:hover > .fa-solid {color:#D12229; margin-right: 0px; transition: .2s ease;}
.ql h3 {color:#fff; font-size: 22px; line-height:25px; padding-bottom: 25px;}
.ql p {display: inline-block; vertical-align: middle; text-align: left;font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600; color:#fff; font-size: 18px;}
.ql .fa-solid {color:#fff; display: inline-block; vertical-align: middle; text-align: right; float: right;transition: .2s ease;margin-right: 10px;}

.ql-new {box-shadow: 1px 1px 4px #212121; width: 20%; margin: 1% 1%; padding: 2%;background:#B31D23; display: none }
a.ql-new:hover > .fa-solid {color:#D12229; margin-right: 0px; transition: .2s ease;}
.ql-new h3 {color:#fff; font-size: 22px; line-height:25px; padding-bottom: 25px;}
.ql-new p {display: inline-block; vertical-align: middle; text-align: left;font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600; color:#fff; font-size: 18px;}
.ql-new .fa-solid {color:#fff; display: inline-block; vertical-align: middle; text-align: right; float: right;transition: .2s ease;margin-right: 10px;}
.red-line {height: 2px; background:#D12229; width: 100%; margin: 10px 0; }
#sleeper {background: url(/siteart/quicklinks/sleeper.png); background-size: cover; background-position: center center;  }
#daycab {background: url(/siteart/quicklinks/daycab.png); background-size: cover; background-position: center center;  }
#dumptruck {background: url(/siteart/quicklinks/dumptrucks.png); background-size: cover; background-position: center center;  }
#ltduty {background: url(/siteart/quicklinks/lt-med-trucks.png); background-size: cover; background-position: center center;  }
#trailer {background: url(/siteart/quicklinks/trailers.png); background-size: cover; background-position: center center;  }

.hp-flex {display: flex; flex-direction: row; align-items: center; margin:15px 0;}
.img-left {background: url(/siteart/truck.png); background-size: cover; min-height: 400px; width: 25%; margin-right: 1%; background-position: center center;margin-top:-25px;}
.custom-bodies {background: #c12128; width: 25%; min-height: 200px; padding:23px 0;position: relative; z-index: 9999; margin-top:-25px;}
.custom-bodies h3 {font-size: 34px; line-height: 35px;}
.custom-bodies h3 span {color:#1f108d;}
.custom-bodies p {padding:15px 0;font-size: 18px; line-height: 26px; margin-bottom: 25%;}
.hp-text {width: 52%; background: #fff; padding: 3% 3%; margin-left: -1%; box-shadow:1px 2px 6px #ccc; min-height: 370px; margin-top:-15px;}
.hp-text h3 {font-size: 34px;line-height: 35px;}
.hp-text h2 {font-size: 50px;line-height: 48px;}
.hp-text p {padding: 15px 0;}
.hp-text a {font-weight: 700; font-size: 18px; transition: .3s ease;}
.hp-text a:hover {color:#1f108d}

.contact-title {background: #c12128; padding: 25px 50px; text-align: center; color:#fff;display: inline-block; margin-left: -20px;margin-bottom: -15px; }
.contact-title h2 {font-size: 35px;}
.lt-truck-bg {background: url(/siteart/truck-bg-white.png); background-size: cover; padding: 50px 0; margin-top:-25px;background-attachment: fixed}
.hpinfo {background: #fff; padding: 4%; width: 50%; margin-right: 1%;box-shadow: 1px 2px 5px #ccc;}
.hpinfo .col-2 {display: inline-block; vertical-align: top; width: 45%}
.hpinfo .col-2 h3 {font-size: 30px;color:#1f108d}
.hpinfo .col-2 p {font-size: 18px; font-weight: 600;}
.hpinfo .col-2 p a{color:#d12229; letter-spacing: 1px; transition: .3s ease;}
.hpinfo .col-2 p a:hover{color:#1f108d; letter-spacing: 1px;}
.map {width: 40%}
.map iframe {box-shadow: 1px 2px 5px #ccc;}



.gallery-wrap {
  padding: 20px 0;
}

.gallery-images {
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto;
  position: relative;
  float: none;
  align-content: center;
}

.gallery-box img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}
.gallery-box {
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  display: inline;
  vertical-align: top;
  margin: 0 auto;
  padding: 2.5px;
}

.gallery-box img {
  border: 1px solid #000;
  max-width: 100%;
}

.gallery-box a:hover {
  color: #fab337; /*yellow*/
  text-decoration: none;
  width: 100%;
  height: 120px;
}

.thumbnail-size {
  height: 155px;
  margin: 0 auto;
}




/*--------FORM STYLES--------------------*/

.field {margin:6px;}
.field-half {float:left; width:calc(50% - 12px); margin:6px;}
.field-third {float:left; width:calc(33.33% - 12px); margin:6px;}


#formpage { vertical-align:top; margin: 0 auto;  text-align:center;}

#formpage div {
	vertical-align:top;
	padding:5px 5px;
	color: #000;	
	font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600;
	font-size:16px; text-align: left;

}

#formpage input {
	padding:6px 5px 10px;
	border:1px solid #8e8d8d;
	font-size:13px;
	background:#fff;
}

#formpage textarea {
	padding:6px 0px;
	border:1px solid #8e8d8d;
	font-weight: 700;
	color:#000;
	font-size:12px;
	background:#fff;
	margin-top: 5px;
}

/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border:1px solid #8e8d8d;
	color:#202e3b;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:8px 5px;
	margin-top:4px;
	width:100%;
}

.formfield {
	width:31.2%; 
	display:inline-block; 
	margin-right: 12px; 
	margin-top: 10px;
	color: #000;
	text-align:left;
	font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600;
	
}
#formpage input  {
    width:100%;
	margin-top: 5px;
}
 
#formpage input.larger  {
    width:100%;
}

#formpage textarea {
    width:98.5%;
    height:85px;
	font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600;}

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
	
 }

/* focus states of various types of fields */
#formpage a {color:#000; font-style: 800; font-weight: bold; font-family: 'Teko', sans-serif; letter-spacing: 1px; }
#formpage a:hover {color:#000; font-style: italic; font-weight: bold; letter-spacing: 1px; text-decoration: underline}
#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#F4F4F4; 
	color:#000;
	border:1px solid #abacac;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}

#formpage input.button,
#formpage input.button:focus {
    width:115px;
    margin:0;
    background: #D12229; /* For browsers that do not support gradients */
    color:#fff;
	padding: 10px 20px;
	font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 600;
	font-weight: 500;
	letter-spacing:1px;
	font-size: 18px;
}
#formpage input.button:hover {
	width:115px;
    margin:0;
    padding:10px 0px;
    background: #000; /* For browsers that do not support gradients */
    color:#fff;
}

/* for plain text next to an input field, if not using a table structure */
#formpage label{
	color:#212121;
    font-size:16px;
    text-align:left;
	font-family: 'Teko', sans-serif; letter-spacing: 1px; font-weight: 800;
	text-transform: uppercase;
	
}
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
	padding:10px 10px;
} 



/*-------- FOOTER STYLES ----------------*/
footer{ background: #000}
.footer-col {width: 20%; text-align: left; margin: 1% 1%;}
.footer-col img {max-width:200px; width: 100%;}
.footer-col a {color:#fff; font-weight: 800; font-family: 'Teko', sans-serif; letter-spacing: 1px; transition: .2s ease;}
.footer-col a:hover {color:#ddd; font-style: italic;transition: .2s ease;}
.inspection-col {width: 30%; text-align: right;}
.inspection-col img {max-width: 150px; width: 100%;}







/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/




#inv{padding: 5% 0;}
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: 'Teko', sans-serif !important;} /* Reset font, ignore icons */


.list-content .list-title .list-title-text, .faceted-search-content .faceted-section-head .faceted-section-title,.list-content .listing-portion-title, .list-content .list-listing .dealer-name, .view-listing-details-link, .list-content .list-listing .listing-top-right .listing-dealer-info, .list-content .list-container .contact-btn, .grouped-faceted-header, .detail-wrapper .detail-title, .detail-wrapper .offer-btn, .breadcrumbs .breadcrumbs-element, .dealer-info .phone-and-email .send-email-btn span, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button, .media-buttons .print-this, .media-buttons .email-this {font-family: 'Teko', sans-serif !important;}
.list-content .list-listing .listing-top-right .listing-dealer-info, .list-content .list-container .contact-btn, .view-listing-details-link , .detail-wrapper .offer-btn, .dealer-info .phone-and-email .send-email-btn span, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button, .media-buttons .print-this, .media-buttons .email-this{text-transform: uppercase; letter-spacing: 1px; font-weight: 800;}

.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 2px 3px 3px 4px;}
.faceted-text-input-searchType .search-type input[type=checkbox], .faceted-text-input-searchType .search-type  input[type=radio] {margin: 0px 3px 0px 6px;}


.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:#1f108d !important;font-family: 'Teko', sans-serif; }
.faceted-search-content .faceted-section-head .faceted-section-title,.grouped-faceted-header,.breadcrumbs .breadcrumbs-element {font-size: 16px !important; letter-spacing: 1px;}

.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.view-listing-details-link, .selected-facet, .view-listing-details-link, .buy-now-link, .check-availability-link, .email-seller-link, .offer-btn, .buy-btn, .dealer-phone-mobile, .offer-btn-mobile, .send-email-btn-mobile, .send-wholesale-email-btn-mobile, .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button, .dealer-btns-bottom a, .list-content .list-error-container .info button {background:#1f108d !important; color:#fff !important}

.selected-facet, .dealer-phone-mobile, .offer-btn, .offer-btn-mobile, .fin-calc-btn-mobile, .send-wholesale-email-btn-mobile, .send-email-btn-mobile, .buy-now-link, .view-listing-details-link, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button{border: solid 1px #1f108d !important; transition: ease all 0.2s !important;}

.selected-facet:hover, .dealer-phone-mobile:hover, .offer-btn:hover, .offer-btn-mobile:hover, .fin-calc-btn-mobile:hover, .send-wholesale-email-btn-mobile:hover, .send-email-btn-mobile:hover, .buy-now-link:hover, .view-listing-details-link:hover, .main-detail-data .contact-options a:hover, button.g-recaptcha.button:hover, .page-nav:hover, .apply-button:hover, .mobile-done-button:hover, .dealer-btns-bottom a:hover {background: #fff !important; color: #1f108d !important;}

.check-availability-link, .email-seller-link, .video-chat-link, .faceted-search, .faceted-show-all-btn, .cs-btns a, .calculator-btn {background: #000 !important; border: solid 1px #000 !important; transition: ease all 0.2s !important;}
.check-availability-link:hover, .email-seller-link:hover, .video-chat-link:hover, .faceted-search:hover, .faceted-show-all-btn:hover, .cs-btns a:hover, .calculator-btn:hover {background: #fff !important; color: #000 !important;}

.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, #parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, #inv .error-message, #inv .info, .detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .search-results, .list-content .list-top-section .listing-option-bar .list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}
 
/* heading */
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .main-detail-data .detail-title, .parts-title-text {
	padding-left: 4px; 
}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label, .part-detail-additional-data .data-label, .part-detail-content .detail-contact-bar {background: #000 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .list-page-nav, .contact-options a {background: #000 !important;}
.list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.list-main-section .contact-options a:hover {background: transparent !important; color: #000!important;}

.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a, .back-button {border-color: #000!important; color: #000!important;}

.material-icons, .collapsible-content a {color:#fff!important;}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {background-color: #000!important;}

.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile{margin-right:0!important;}

.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{height: 48px !important; box-sizing: border-box;}







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1200px) {
	.hero-text {width: 90%}
	.flex-stretch {display: block;}
	.ql {width: 26%; display: inline-block; vertical-align: middle;}
	.ql-new {display: inline-block; width: 26%; vertical-align: middle; }
	.width-80 {width: 90%;}
	.hpinfo {width: 95%; position: relative; z-index: 300; padding: 4% 2.5%}
	.map {width: 100%; margin: 0 auto; margin-top:10px;}
	.footer-col  {display: inline-block; width: 23%; vertical-align: top}
	.inspection-col {display: inline-block; width: 20%; vertical-align: top;}
}

@media only screen and (max-width: 1000px) {
	.mobile-address {display: block;}
	.hp-flex {display: block; margin: 15px 0;}
	.red-banner {width: 67.5%;display: inline-block; vertical-align: middle;}
	.img-left {display: inline-block; width: 45%; vertical-align:middle; align-items: stretch;margin-top:15px;}
	a.header-address {display: none;}
	.custom-bodies {display: inline-block; width: 52%; vertical-align: middle;align-items: stretch; margin-top:15px;}
	.custom-bodies p {margin-bottom: 10%;}
	.custom-bodies, .img-left {height: 350px; min-height: auto;}
	.hp-text {width: 100%; padding: 50px 0;}
	.footer-col {width: 100%; margin: 0 auto;text-align: center;}
	.footer-col img {padding-bottom: 15px;}
	
	.inspection-col {width:100%; margin: 0 auto; text-align: center;}
	.inspection-col img{text-align: left; float: none; padding-top:15px;}
	.logo {position: relative; text-align: center; background: #d12229; margin: 0 auto; left:0; right: 0;border-bottom: 1px solid #fff}
	.header-searchbtn {padding: 11px 10px;}
	.nav-container {display: inline-block; vertical-align: middle; width: auto;width: 30%; }
	.hero {margin-top:0}
}


@media only screen and (max-width: 800px) {
	.red-banner {width: 67.1%;display: inline-block; vertical-align: middle;}

	.hero-text {padding: 50px 0 25px 0;}
	.hero-text h3 {font-size: 20px; line-height: 20px; text-shadow: 1px 2px 3px #333;}
	.hero-text h1 {font-size: 32px; line-height: 32px;text-shadow: 1px 2px 3px #333;}
	.hero-text .red-btn, .hero-text .outline-btn {width: 45%; padding: 10px 0;}
	.ql, .ql-new {width: 41%}
	.formfield {width: 95%}
	
}
@media only screen and (max-width: 600px) {
	.red-banner {display: inline-block; vertical-align: middle; width: 67%}
	.hero {margin-top:0;}
	.hpinfo .col-2 {display: block; width: 90%; text-align: left; margin: 10px auto;}
	.img-left {width: 20%;}
	.custom-bodies {width: 76%}
	.ql p, .ql-new p {font-size: 16px;}
	
	
}

@media only screen and (max-width: 500px) {
	.logo {padding: 10px 0;}
	.red-banner, .nav-container {display: inline-block; vertical-align: middle;  }
	.nav-container {padding-right: 0; float: right;}
	.hero-text .red-btn, .hero-text .outline-btn {width:100%; padding: 10px 0; margin: 5px auto;}	
	.ql, .ql-new {width: 95%; margin: 1% auto;}
	.img-left {height: 100px; background-attachment: fixed; width: 100%; background-size: contain; margin-right: 0;}
	.custom-bodies {width: 100%;margin: 0px auto 25px auto;}
	.hp-text {margin-left: 0;}
}






