@charset "UTF-8";


/* RESET 
------------------------------------------------*/
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
	

/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {/*margin:0; line-height:12px;*/ font-size:100%; font-family: "itc-avant-garde-gothic-pro", sans-serif !important; background:#fff;}

/* SELECTION */	
::selection {color:#fff; background: #244ca1;}
::-moz-selection {color:#fff; background: #244ca1;}


/* CLEAR */
.clear {clear: both;}

/* HEADERS */
/*Remove or simplify font-weight and font-height */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}
h1 {font-size:26px; font-weight:normal;}
h2 {font-size:24px; font-weight:normal;}
h3 {font-size:20px; font-weight:normal;}
h4 {font-size:18px; font-weight:normal;}
h5 {font-size:16px; font-weight:normal;}
h6 {font-size:14px; font-weight:normal;}


/* PARAGRAPH/LIST/GENERAL TEXT */

/* LINKS */
a{-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;}
a:link, a:visited {color:#202020; text-decoration:none;}
a:hover, a:active {color:#244ca1; text-decoration:none;}

a[href^="tel:"] {color:inherit;  text-decoration: none;}

/* IMAGES */
img {display:block;}

/* TEXT EMPHASIS */
em {font-style:italic;}
strong {font-weight: 700;}

/* TEXT STYLINGS */
.dark {color:#131313;}
.gray {color:#4F4F4F;}
.blue-text {color: #244ca1; }
.heavy {font-weight:800;}

/* ALIGNMENT */
.left {float:left;}
.right {float:right;}
.center {text-align:center;}



/*
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 500;
font-style: normal;
*/






/* LINK BUTTON - PILL
------------------------------------------------*/
button.linkButtonPill,
a.linkButtonPill {
	display:inline-block; position:relative; box-sizing:content-box; width:250px; min-width:210px; margin:8px 15px; padding:14px 25px 12px 25px; font-size:1em !important; line-height:2.5; font-weight:400; text-align:left; color:#fff; cursor:pointer; background-color: #244ca1; 
	-webkit-transition:.5s ease; -moz-transition:.5s ease; -o-transition:.5s ease; transition:.5s ease;
	-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius:40px;	
}
button:hover.linkButtonPill,
a:hover.linkButtonPill {background:rgba(0,0,0,0.75);}

button.linkButtonPill::after,
a.linkButtonPill::after {content:'\f101'; position:absolute; right:1.25em; top:.5em;  margin:0 0 0 0; font-size:1.15em; color:#fff; font-family: FontAwesome;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	}

button:hover.linkButtonPill::after,
a:hover.linkButtonPill::after {right:1em;}


/* LINK BUTTON - PHONE ICON
------------------------------------------------*/
button.linkPhone::after,
a.linkPhone::after {content:'\f095';}


/* LINK BUTTON - PILL RED
------------------------------------------------*/
button.linkButtonPillRed,
a.linkButtonPillRed {background-color: #E32327!important;}


/* LINK BUTTON - SIDE BUTTON
------------------------------------------------*/
button.sideButton,
a.sideButton {
	display:inline-block; box-sizing:content-box; width:calc(100% - 50px); margin:8px 0; padding:20px 25px 17px 25px; font-size:1.15em !important; line-height:1.5; font-weight:400; text-align:center; color:#fff !important; cursor:pointer; background-color: #244ca1; 
	-webkit-transition:.5s ease; -moz-transition:.5s ease; -o-transition:.5s ease; transition:.5s ease;
	-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius:40px;	
}
button:hover.sideButton,
a:hover.sideButton {background:rgba(0,0,0,0.75);}




/* LINK BUTTON - BOX
------------------------------------------------*/
button.linkButtonBox,
a.linkButtonBox {
	display:inline-block; position:relative; box-sizing:content-box; width:250px; min-width:210px; margin:8px 15px; padding:14px 25px 12px 25px; font-size:1.15em !important; line-height:2.5; font-weight:400; text-align:left; color:#fff; cursor:pointer; background-color: #244ca1; 
	-webkit-transition:.5s ease; -moz-transition:.5s ease; -o-transition:.5s ease; transition:.5s ease;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius:2px;	
}
button:hover.linkButtonBox,
a:hover.linkButtonBox {background:rgba(0,0,0,0.75);}


button.linkButtonBox::after,
a.linkButtonBox::after {content:'\f138'; position:absolute; right:1.25em; top:.5em;  margin:0 0 0 0; font-size:1.15em; color:#fff; font-family: FontAwesome;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	}

button:hover.linkButtonBox::after,
a:hover.linkButtonBox::after {right:1em;}








/* HEADER
------------------------------------------------*/	
.site-header {position:relative; display:flex; flex-flow:row wrap;  justify-content:space-between; padding:2em 5%;}

.header-buttons {position:absolute; top:0; right:3.5%; display:flex; flex-flow:row wrap; justify-content:flex-end; width:90%;}

.phone-icon {display:flex; flex-flow:row wrap; justify-content:space-between; margin:0 1em 0 0;}
.phone-icon .badge-icon {margin:0; }
.social-icon a {color:#fff;}

.badge-icon {display:flex; flex-flow:row wrap; align-items: center; justify-content:center; /*margin:0 1em 0 0; */font-weight:500; background:#244ca1;}
.badge-icon span {font-weight:300;}
.badge-icon a {display:block; max-height:60px; padding:0 .75em; font-size:1.15em; color:#fff;}
.badge-icon i {padding:.45em 0;}

.badge-alt-icon {background:#eaedf4 !important;}
.badge-alt-icon a {color:#212121;}

.badge-left {width: 0; height: 0; border-left: 12px solid transparent; border-bottom: 60px solid #244ca1;}
.badge-right {width: 0; height: 0; border-right: 12px solid transparent; border-top:60px solid #244ca1;}

.badge-alt-left {margin:0 0 0 -12px; border-bottom: 60px solid #eaedf4 !important;}
.badge-alt-right {margin:0 -12px 0 0; border-top:60px solid #eaedf4 !important;}


/* LOGO
------------------------------------------------*/	
.logo a {display:contents;}
.logo img {width:100%; max-width:310px;}


/*  NAVIGATION
------------------------------------------------*/
#menu-button{display:none;}
nav.mobile {display:none;}

nav.primary {z-index:500; position:relative; align-self:flex-end;  margin:0; padding:0;}

nav.primary ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-around; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none;}
				
nav.primary ul li a {
	display:block; margin:0; padding:12px 30px 10px 30px;
    font-size:1.25em; line-height:24px; text-align:center; text-decoration:none; text-transform:uppercase; color:#454545;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	
	-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}	

nav.primary ul li a.drop-icon {position:relative;}
nav.primary ul li a.drop-icon::after {
	content:'\f078'; position:absolute; right:1.5em; top:1em;  margin:0 0 0 0; font-size:.5em; color:#f3363a; font-family: FontAwesome;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	
}
nav.primary ul li a:hover {color:#fff; text-shadow: 0px 0px 2px rgba(0,0,0,0.5); background:#a5b3d1;}

nav.primary ul li a:hover.drop-icon::after {color:#fff;}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width: 220px;}
nav.primary ul li li a:link, nav.primary ul li li a:visited{
	width: 220px; padding:15px 0; font-size:.94em; line-height:18px; text-indent:20px; text-align:left; color:#fff; border:0; background: #244ca1;
	-webkit-border-radius: 0; -moz-border-radius: 0; border-radius:0;
}

nav.primary ul li li a:hover,nav.primary ul li li a:active {line-height:18px; color:#fff;background:#091f4e;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute;} 
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover > ul {display: block; line-height:18px; z-index: 500;}
nav.primary ul ul li {float: none; position: relative; margin:0;}




/*  HERO
------------------------------------------------*/	
.hero {margin:1em;}
.hero img {width:100%;}

.hero .cycle-slideshow {z-index:5; position:relative; margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color:#000; }
.hero .cycle-slideshow img {position:relative; width:100%; margin:0; padding:0;}

.hero .cycle-pager {position:absolute; overflow: hidden; z-index:500; bottom:15px; left:30px; width:12%; text-align:left;}
.hero .cycle-pager span {display: inline-block; width:25px; height:25px; font-size:40px; color: #fff; font-family: arial; cursor: pointer;}
.hero .cycle-pager span.cycle-pager-active {color:#f3363a;}
.hero .cycle-pager > * {cursor:pointer;}

.hero-overlay {
	position:relative; z-index:10; max-width:1485px; margin:-100px 12% 0 12%; padding:2% 5%; text-align: center;
	background:#fff url("/siteart/mason-icon-background.jpg") no-repeat left center;
	-webkit-box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.15); -moz-box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.15); box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.15);
}
.hero-overlay p {font-size:1.5em; line-height:1.4; font-weight:300; color:#202020;}
.hero-overlay-title {margin:0 0 .45em 0; font-size:2.35em; font-weight:600; color:#244ca1;}




/*  MAIN INTRO
------------------------------------------------*/
.main-intro {
	margin:0 auto; padding:4.5%;
	background: rgb(225,225,225); background: linear-gradient(0deg, rgba(225,225,225,1) 0%, rgba(236,236,236,1) 100%);
}
.main-intro .main-intro-logo img {width:100%; max-width:204px; margin:0 auto 15px auto;}
.main-intro .main-intro-title {font-size:2.5em; font-weight:700; text-transform:uppercase; text-align: center; color:#244ca1;}
.main-intro .main-intro-subtitle {font-size:1em; font-weight:400; text-align: center; color:#434343;}
.main-intro .main-intro-subtitle span {color:#244ca1;}



/*  MAIN
------------------------------------------------*/	
.main {padding:5% 0 8.5% 0; background:#f5f5f5;}

.main-body {width:100%; max-width:80%; margin:0 auto;}
.main-inv {margin:0 5%;}
.main-subsection {
	box-sizing:border-box; width:100%; max-width:80%; margin:5% auto 0 auto; padding:3.5%; background:#fff; 
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}




/*  ARTICLE
------------------------------------------------*/
article {}
article h1 {font-size:1.75em; margin:15px 0; font-weight:600; text-transform:capitalize; /*color:#244ca1;*/ color: #393939;}
article h2 {font-size:1.25em; margin:0 0 15px 0; font-weight:600; text-transform:capitalize; color:#244ca1;}
article h3 {font-size:1.15em; margin:0 0 15px 0; font-weight:600; text-transform:capitalize; color:#244ca1;}
article h4 {font-size:1.15em; margin:0 0 5px 0; font-weight:600; text-transform:capitalize; color:#244ca1;}

article p {font-size:1.125em; line-height:1.5; font-weight:300;}

article ul {margin-inline-start:1.5em; list-style: none; font-size:1.25em; line-height:1.5;}
article ul.striped {width:80%; margin-inline-start:0; margin:0;}
article ul.striped li{list-style:none; display:flex; flex-flow:row wrap; justify-content: space-between;  padding:.25em .5em; font-size:1em; line-height:1.85; color:#3d3d3d;}
article ul.striped li:nth-of-type(odd) {color:#2d2d2d; background:#e7e7e7;}


.about-right {float:right; margin:30px 0 30px 30px;}
.about-right img {width:100%; max-width: 321px;}

.about-left {float:left; margin:30px 30px 30px 0;}
.about-left img {width:100%; max-width: 466px;}

.subCol {display:flex; flex-flow:row wrap; justify-content:space-between;}
.sub-1-2 {width:49%;}

.sub-2-3 {width:64.6%;}
.sub-1-3 {width:31.3%;}





/*  SIDEBAR
------------------------------------------------*/
.sub-sidebar {
	display:flex; flex-flow:column wrap; /*width:33.9%; margin:0 0 0 3.5%;*/  background: #e8e8e8;
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
.sub-sidebar a {white-space: normal; word-break: break-word;}



/*  SIDENAV HEADING
------------------------------------------------*/
.sidenav-heading {
	padding:25px; background: #17377d;
	-webkit-border-top-left-radius: 30px; -webkit-border-top-right-radius: 30px; -moz-border-radius-topleft: 30px;
	-moz-border-radius-topright: 30px; border-top-left-radius: 30px; border-top-right-radius: 30px;
}
.sidenav-heading h3 {margin-bottom:0; font-size:1.47em; font-weight:700;text-align:center; text-transform:uppercase; color:#f1f1f1;}
.location-page .sidenav-heading {background: #0741ac;}
.location-page .sidenav-heading h3 {color:#fff;}

/*  SIDENAV MAIN
------------------------------------------------*/
.sidenav-main {padding:25px;}

.sidenav-main h4 {text-align:center; }
.location-page .sidenav-main h5 {color:#0741ac;}
.sidenav-main h5,
.sidenav-main .sidenav-list {color: #757575;}
.sidenav-main .sidenav-list li {font-size: 16px;}

.sidenav-main p {font-size:1.205em; line-height:1.45; color:#454545;}
.sidenav-main a {font-variation-settings: "wght" 700;text-decoration:none; color: #757575;}



.embed-map{}
.embed-map iframe{width:100%; height:350px;}




/*  GRID
------------------------------------------------*/
.grid-content {display:flex; flex-flow:row wrap; /*align-items:center;*/ justify-content:space-between; margin:0; /*padding:3% 10%;*/ /*background:#dbdbdb;*/}

.grid-content .brand-link {
	box-sizing:border-box; width:48%; margin:1%; text-align: center; border:1px #c3c3c3 solid; background:#f1f1f1;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.grid-content .brand-link a {display:block; padding:20px; font-weight:600; color:#fff;}
.grid-content .brand-link img{width:100%; max-width:204px; margin:0 auto 4px auto;}

.light-link a {color:#000 !important;}

.nh-ag-bg {background:#004b93 !important;}
.nh-con-bg {background:#000 !important;}
.agco-bg {background:#e3e3e3 !important;}
.aps-bg {background:#d5d4c3 !important;}


.white-bg {background:#fff !important;}
.mf-bg {background:#f9f9f9 !important;}
.gp-bg {background:#f2ead9 !important;}
.mac-bg {background:#aa192d !important;}
.sup-bg {background:#ff0000 !important;}
.stih-bg {background:#f46717 !important;}
.cc-bg {background:#ffc20f !important;}


/*  CAREER ACCORDIAN
------------------------------------------------*/
.career-button {
	width:calc(95% - 35px);  background:#004aad;
	position:relative; cursor: pointer; padding:28px calc(2.5% + 35px) 25px 2.5% !important; text-align: left; outline: none; border: none; transition: 0.4s;
	-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius:40px;	
}
.career-button h3 {margin:0; color:#fff;}

.career-button:after {content:'\2b'; position:absolute; right:1.25em; top:1.5em; margin:0 0 0 0; font-size:1.15em; color:#fff; font-family: FontAwesome;}
.career-open:after {content: "\f068";}

.career-open, .career-button:hover {background-color:#00357c;}

.panel {
	overflow:hidden; width:calc(100% - 80px); max-height: 0; margin:0 auto; padding:0; background-color: #fff; transition: max-height 0.2s ease-out;
	-webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;
}

.careerListing {padding:3.5%;}



/*  DIRECTORY ACCORDIAN
------------------------------------------------*/
.directory-button {
	width:calc(95% - 35px); background:#004aad;
	position:relative; cursor: pointer; padding:28px calc(2.5% + 35px) 25px 2.5% !important; text-align: left; outline: none; border: none; transition:0.4s;
	-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius:40px;	
}
.directory-button h3 {margin:0; color:#fff;}

.directory-button:after {content:'\2b'; position:absolute; right:1.25em; top:1.5em; margin:0 0 0 0; font-size:1.15em; color:#fff; font-family: FontAwesome;}
.directory-open:after {content: "\f068";}

.directory-open, .directory-button:hover {background-color:#00357c;}

.panel {
	overflow:hidden; width:calc(100% - 80px); max-height: 0; margin:0 auto; padding:0; background-color: #fff; transition: max-height 2s ease-out;
	-webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;
}

.directoryWrap {padding:3.5%;}



/*  DIRECTORY SECTION
------------------------------------------------*/
.directory-section {display:flex; flex-flow:row wrap; justify-content:space-between; margin:1em 0 2em 0;}
.directory-section:last-of-type {margin:1em 0 0 0;}
.directory-contact {
	width:calc(49% - 2em); margin:0 0 2% 0; padding:1em; font-size:1.15em; line-height:1.35; border:1px #ccc solid;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.directory-contact strong {text-transform:uppercase; color:#244ca1;}

.directory-contact a.contactButton {display:inline-block; box-sizing:content-box; width:calc(100% - 50px); margin:8px 0; padding:13px 25px 10px 25px; font-size:.85em !important; line-height:1.15; font-variation-settings: "wght" 400; text-align:center; color:#fff; cursor:pointer; background-color: #244ca1; 
	-webkit-transition:.5s ease; -moz-transition:.5s ease; -o-transition:.5s ease; transition:.5s ease;
	-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius:40px;	}
.directory-contact a:hover.contactButton {background-color:#333;}



/*  CATEGORY SECTION
------------------------------------------------*/
.category-section {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; max-width:1350px; margin:5% auto 0 auto;}

.cat-item {width:236px; height:240px; margin:0 1% calc(.5% + 67px) 1%; text-align:center; font-size:1.625em; font-weight:300; color:#484848; background:url("/siteart/categories/icon-background.png") no-repeat center;}
.cat-item a {position:relative; display:block; width:100%; height:100%;}
.cat-item a img {
	position:absolute; top:67px; left:26px; /*transform: translate(-50%, -50%);*/ width:100%; max-width:184px; margin:auto;
	-webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
}

.cat-item a:hover img {transform: scale(1.1);}

.cat-title {position:absolute; bottom:-45px; right:0; left:0; margin:auto;}


/*  DEPARTMENT SECTION
------------------------------------------------*/
.department-section {display:flex; flex-flow:row wrap; justify-content:center; max-width:1350px; margin:8.5% auto;}

.department-section-intro {width:90%; margin:0 auto 4% auto; text-align:center;}
.department-section-intro p {font-size:1.3125em; font-weight:500; color:#676767;}
.dept-section-intro-title {margin:0 0 .15em 0; font-size:2.5625em; font-weight:500; color:#244ca1;}
.dept-section-intro-title span {font-weight:700;}


.department-intro {display:flex; flex-flow:column wrap; justify-content:center; width:40%; padding:8.5% 5%;}
.department-intro p {font-size:1.35em; line-height:1.5; font-weight:300;}
.department-intro a.linkButtonPill {margin:2.5em 0 0 0;}
.dept-intro-title {margin:0 0 .75em 0; font-size:1.875em; font-weight:700; color:#212121;}


.department-intro-image {position:relative; width:50%; height:650px;}
.department-intro-image img {position:absolute; bottom:30px; left:30px;}
.parts-department {background:url("/siteart/intros/parts-department-intro.jpg") no-repeat center; background-size:cover;}
.service-department {background:url("/siteart/intros/service-department-intro.jpg") no-repeat center; background-size:cover;}
.sales-department {background:url("/siteart/intros/sales-department-intro.jpg") no-repeat center; background-size:cover;}


/*  COMPANY INTRO
------------------------------------------------*/
.company-intro {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:0 0 8.5% 0;}

.company-intro .intro-body {width:100%; max-width:950px; box-sizing: border-box; padding:5.5% 8.5% 6.5% 5.7%;color:#fff; background:#244ca1;}
.company-intro .intro-body .intro-title {font-size:3em; line-height:1; font-weight:700;}
.company-intro .intro-body .intro-subtitle {margin:0 0 7.5% 0; font-size:1.4375em; line-height:1; font-weight:500;}
.company-intro .intro-body p {font-size:1em; line-height:1.5; font-weight:300;}

.company-intro .intro-photo {margin:0 0 0 -4.6%;}
.company-intro .intro-photo img {width:100%; max-width:650px;}


/*  BRANDS SECTION
------------------------------------------------*/
.brands-section {
	display:flex; flex-flow:row wrap; align-items:center; justify-content:center;
	padding:3% 12%; text-align:center; background: url("/siteart/brands/brands-field-background.jpg") no-repeat top center; background-size:cover;
}
.brands-section a {width:18%; margin:.5%; padding:.75% .5%; background:#fff;}
.brands-section img {width:100%; max-width:204px; margin:0 auto;}

.brands-title {width:90%; margin:0 auto 2% auto; font-size:3.25em; line-height:1.1; font-weight:500; color:#2c354c;}
.brands-title span {font-weight:600;}


/*  FOOTER
------------------------------------------------*/
.site-footer {display:flex; flex-flow:row wrap; align-content:center; justify-content:space-between; max-width:1350px; margin:0 auto; padding:5% 3.5%;}

.foot-links {font-size:1em; line-height:1.5; font-weight:300;}
.foot-links ul {list-style:none;}

.links-title {margin:0 0 .25em 0;font-size:1.375em; font-weight:600; color:#244ca1;}


/*  LOWER FOOTER
------------------------------------------------*/
.lower-footer {display:flex; flex-flow:row wrap; align-content:center; justify-content:space-between; padding:2em 12%; color:#fff; background:#091f4e;}

.lower-brand {display:flex; flex-flow:row wrap; align-content:center; justify-content:flex-start; font-size:1em;}
.lower-brand img {width:54px; height:44px;}
.lower-brand span {margin:.75em 0 0 .5em;}

.lower-social {font-size:1.375em;}
.lower-social a{
	display:inline-block; box-sizing:border-box; width:44px; height:44px; padding:.485em 0 0 0; text-align:center; color:#fafafa; border:1px #fafafa solid;
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
.lower-social a:hover {background:rgba(0,0,0,0.35);}




/************************************************ Responsive Styles **/

@media screen and (max-width: 1650px) {
	.site-header {padding:5em 3.5% 1em 3.5%;}
	.header-buttons {width:100%;}
	.logo img {max-width:250px;}
	
	nav.primary ul li a {padding: 12px 20px 10px 20px;}
	nav.primary ul li a.drop-icon::after {right:.5em;}
	
	.company-intro .intro-body {max-width:750px; box-sizing: border-box;}
}

@media screen and (max-width: 1350px) {
	.company-intro {flex-flow:column wrap;}
	
	.company-intro .intro-body {order:2; z-index:2; width:100%; max-width:950px; padding:8.5% 5.7% 6.5% 5.7%;}
	.company-intro .intro-photo {order:1; z-index:5; margin:0 0 -4.6% 0;}
	.company-intro .intro-photo img {width:100%; max-width:650px;}
}

@media screen and (max-width: 1250px) {
	nav.primary ul li a {padding: 12px 10px 10px 10px;}
	nav.primary ul li a.drop-icon::after {display:none;}
	
	.category-section {margin:8.5% auto 0 auto;}
	
	.brands-section {padding:3% 6%;}
	.brands-title {width:90%; margin:0 auto 5% auto; font-size:2.65em;}	
}

@media screen and (max-width: 1175px) {
	.badge-icon a {font-size:.95em;}
	.phone-icon .badge-icon span {display:none;}
}

@media screen and (max-width: 1024px) {
	nav.primary{display:none;}
	#menu-button{display: block; align-self: center; font-size: 1.25em; line-height:60px; position: relative; z-index:400; color:#454545;}
	#menu-button a{color:#454545; text-decoration: none;font-weight:500;}
	#menu-button  i{color:#f3363a}
	
	nav.mobile ul li a .fa{
		width:25px;
		font-weight:100;
		padding:8px 3px;
		margin:0 0 0 5px;
		text-align:center;
		background:#292929;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	
	nav.mobile ul li .fa-chevron-down {position:absolute; right:10px; margin:18px 0 0 0;}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		right: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		background:#333;
	}
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:9999;
		display: inline-block;
		
		top: 15px;
		left: 15px;
		font-size:16px;
		word-spacing:13px;
		color: #ccc !important;
	}
	
	nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:#ccc; text-decoration:none;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}
	
	/* MENU HEADER STYLES */
	nav.mobile h3 {	
		color: #ccc;
		padding: 23px 0;
		position: relative;
		font-size: 18px;
		background:#313131;
	}			
	nav.mobile .menu-title {position: absolute; vertical-align: top; top: 16px; right: 47px; text-transform:uppercase; font-size:12px; color: #ccc;}
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; right: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color: #ccc; text-decoration: none; vertical-align: top; font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color: #fff;}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {color: #999; font-size:15px; border-bottom: 1px solid #303030;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color: #999;
		position: relative;
		display: block;
		font-size:15px;
		text-align:left;
		text-decoration: none;
		border-left:4px #333 solid;
		padding: 15px 35px 15px 20px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px #244ca1 solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {color: #ccc; background: #444; border-left:4px #444 solid; padding: 15px 10px 15px 15px;}
	nav.mobile ul li li a:hover {background:rgba(65,65,65,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li:last-child {border:none;}
	nav.mobile ul li li li a {color: #ccc; background: #555; border-left:4px #555 solid;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}
	
	.nav-footer {color:#777; position:relative; text-align:center; font-size:.875rem; line-height:.875rem; padding:15px 0;}
	
	.hero .cycle-pager {display:none;}
	
	.hero-overlay {margin:-50px 5% 0 5%;}
	.hero-overlay-title {margin:0 0 .5em 0; font-size: 2.15em;}
	.department-intro-image {height:500px;}
	
	.sub-1-2 {width:100%; margin:0 0 40px 0;}
	.sub-2-3 {width:100%; margin:0 0 30px 0;}
	.sub-1-3 {width:100%; margin:0 0 30px 0;}
	
	.mobile-center {text-align:center;}
	
	.about-right {float:none; margin:30px auto;}
	.about-right img {margin:0 auto;}
	.about-left {float:none; margin:30px auto;}
	.about-left img {margin:0 auto;}
	
	.panel {width:calc(100% - 60px);}
	.directoryWrap {padding:8.5% 3.5% 5% 3.5%;}
	
	.brands-section {padding:3%;}
	.brands-section a {width:31.3%;}
	.brands-title {margin:1% auto 5% auto; font-size:2.65em;}

	.site-footer {justify-content:center;}
	.foot-links {width:33.3%; margin:0 0 1.5em 0;}
}

@media screen and (max-width:850px) {
	.header-buttons .phone-icon {display:none;}
}

@media screen and (max-width: 768px) {
	.badge-icon span {display:none;}
	
	.hero-overlay {margin:-25px 3.5% 0 3.5%; padding:5%;}
	.hero-overlay p {font-size:1.2em;}
	.hero-overlay-title {font-size:1.85em;}
	
	.category-section {margin:10% auto 0 auto;}
	
	.department-section-intro {width: 90%; margin: 0 auto 6% auto;}
	.dept-section-intro-title {margin:0 0 .5em 0; font-size:2em;}
	.department-intro {width:90%;}
	.department-intro-image {width:100%; height:500px;}
	.parts-department {order:1;}
	.parts-intro {order:2;}
	.service-department {order:3;}
	.service-intro {order:4;}
	.sales-department {order:5;}
	.sales-intro {order:6;}
	
	.company-intro {margin:0 0 15% 0;}
	.company-intro .intro-body {padding:15% 5% 12.5% 5%;}
	
	.brands-section {padding:3%;}
	.brands-section a {width:48%;}
	.brands-title {margin:1% auto 5% auto; font-size:2.25em;}
	
	
	.main-intro {padding:6.5%;}
	.main-intro .main-intro-title {font-size:1.85em;}
	
	.main {padding:8.5% 0 10% 0;}
	.main-body {width:100%; max-width:92%; margin:0 auto;}
	.main-subsection {
		box-sizing:border-box; width:100%; max-width:88%; margin:7.5% auto 0 auto; padding:5% 3.5%; background:#fff; 
		-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
	}
	
	.grid-content .brand-link {width:100%; margin:1% 0;}
	
	.career-button,
	.directory-button {width:calc(90% - 35px); padding:28px calc(5% + 35px) 25px 5% !important;}
	
	.directory-contact {width:100%; margin:0 0 1.5em 0;}
	
	
	.site-footer {padding:5%;}
	.foot-links {width:100%; text-align: center;}
}

	
@media screen and (max-width: 500px) {
	button.linkButtonPill, a.linkButtonPill {width:calc(100% - 10px); min-width:0; margin:8px 0; padding:14px 5px 12px 5px; text-align: center;}
	button.linkButtonPill::after, a.linkButtonPill::after {content:none;}
	button.linkButtonBox, a.linkButtonBox {width:calc(100% - 10px); min-width:0; margin:8px 0; padding:14px 5px 12px 5px; text-align: center;}
	button.linkButtonBox::after, a.linkButtonBox::after {content:none;}

}

@media screen and (max-width: 460px) {
	.site-header {padding:1em 2.5%;}
	.header-buttons {display:none;}
}

@media screen and (max-width: 450px) {
	.category-section {margin:15% auto 0 auto;}
	.brands-title {margin:1% auto 8.5% auto; font-size:2em;}	
	.lower-footer {flex-flow:column wrap; justify-content:center; padding:2em 5%;}
	.lower-social {margin:1em 0 0 0; text-align:center;}
   
}

@media screen and (max-width: 320px){

}