@charset "UTF-8";


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

/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {font-size:100%; font-family: "akzidenz-grotesk-next-pro", sans-serif !important; font-weight: 400; font-style: normal; background:#fff;}





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


/* 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:inherit; text-decoration:none;}
a:hover, a:active {color:inherit; 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;}
.heavy {font-weight:800;}

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



/* SPECIAL LINKS
------------------------------------------------*/	
a.ol-yeller-button {display:inline-block; padding:15px 25px; text-transform:uppercase; font-weight:700; border-radius:3px;  background:#ffd202; transition:1s ease;}
a.ol-yeller-button:hover {color:#f1f1f1; background:#222;}


a.social-link-body {display:inline-block;margin-right:8px; padding:14px; font-size:26px;}




/* CONTACT BAR
------------------------------------------------*/	
.contact-bar {padding:5px 5%; background:#222423;}
.contact-bar .social-icons {margin: 0 0 0 auto; text-align:right;}
.contact-bar .social-icons a{display:inline-block; padding:12px; font-size:24px; color:#fff;}


/* SITE HEADER
------------------------------------------------*/	
.site-header {padding:0 5%;}	
	

/* LOGO
------------------------------------------------*/	
.site-header .logo {width:100%; max-width:400px; margin:-38px auto 0 auto;}
.site-header .logo img {width:100%;}


/* SITE NAVIGATION
------------------------------------------------*/	
.site-navigation {position:relative; padding:2rem 0 3rem 0;}
.site-navigation:before {content:""; position:absolute; z-index:1; top:10px ;right:0; width:88%; height:6px; background:#ffd202;}
.site-navigation:after {content:""; position:absolute; z-index:1; bottom:23px ;right:0; width:92.5%; height:6px; background:#ffd202;}


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

nav.primary {z-index:500; position:relative; margin:0 8.5%; 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; position:relative; margin:0 5px; padding:12px 10px;
    font-size:15px; line-height:1; text-align:center; font-weight:700; text-decoration:none; text-transform:uppercase; color:#111;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	
}	

nav.primary ul li a.drpdwn::after{content:'+'; position:absolute; z-index: -1; top:10px; right:-15px; font-size:18px; font-weight:800; color:#000;}

nav.primary ul li a:hover {color:#121212;}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width:200px;}
nav.primary ul li li a:link, nav.primary ul li li a:visited{margin:0; padding:15px 25px; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background: #181818;}
nav.primary ul li li a:hover,nav.primary ul li li a:active {color:#000; background:#ffd202;}

/*  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; z-index: 500; margin:0 0 0 15px;}
nav.primary ul ul li {float: none; position: relative; margin:0;}


/*  HERO
------------------------------------------------*/
.hero {position:relative;}

.hero-tagline{position: absolute; z-index:15; top:0; right:0; left:0; height: 300px; margin:auto; text-align: center;}

.tagline-basis{
	/*display: inline-block;*/
	
	
	line-height: 100px;
	font-size: 72px;
	font-weight:700; 
	color: #ffd202;
	position: relative;
	text-transform:uppercase; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: -375px;
}

.tagline-services{
	display: inline-block;
	position: relative;
	color:#fff;
}

.tagline-services div{
	display: inline-block;
	position: absolute;
	top: -200px;
	transform: rotateX(-90deg);
	opacity: 0;
	animation-timing-function: ease;
}

.tagline-services div:nth-child(1){animation: rollDown 10s forwards infinite;}
.tagline-services div:nth-child(2){animation: rollDown2 10s forwards infinite;}
.tagline-services div:nth-child(3){animation: rollDown3 10s forwards infinite;}

@keyframes rollDown {
	0%{top: -200px;transform: rotateX(-90deg);}
	11%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	22%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	33%{top: 50px; transform: rotateX(30deg); opacity: 0;}
}

@keyframes rollDown2 {
	33%{top: -200px; transform: rotateX(-90deg);}
	44%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	55%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	66%{top: 50px; transform: rotateX(30deg); opacity: 0;}
}

@keyframes rollDown3 {
	66%{top: -200px; transform: rotateX(-90deg);}
	77%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	88%{top: -74px; transform: rotateX(0deg); opacity: 1;}
	99%{top: 50px; transform: rotateX(30deg); opacity: 0;}
}




.hero .cycle-slideshow {z-index:5; position:relative;overflow:hidden; margin:0; padding:0; box-sizing: border-box;}
.hero .cycle-slideshow img {position:relative; width:100%; margin:0; padding:0;}

.hero .cycle-pager {text-align: center; width: 100%; z-index:20; position: absolute; bottom: 10px; overflow: hidden;}
.hero .cycle-pager span {font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer;}
.hero .cycle-pager span.cycle-pager-active {color: #ffe000;}
.hero .cycle-pager > * {cursor: pointer;}

.hero .cycle-prev, .hero  .cycle-next { position: absolute; top: 0; width:10%; opacity:.25; z-index:100; height: 100%; cursor: pointer; transition:.4s ease-in;}
.hero .cycle-prev {left:0;}
.hero .cycle-prev:before {position:absolute; z-index:0; top:50%; left:60%; transform: translate(-50%, -50%); font-size:3em; color:#fff; content: "\f104"; font-family: FontAwesome;}
.hero .cycle-next {right:0;}
.hero .cycle-next:before {position:absolute; z-index:0; top:50%; right:60%; transform: translate(50%, -50%); font-size:3em; color:#fff; content: "\f105"; font-family: FontAwesome;}
.hero .cycle-prev:hover, .cycle-next:hover {opacity:.85;}


.hero-item {position:relative; width:100%; }
.hero-item::after {content:''; position:absolute; z-index:0; top:0; right:0; width: 100%; height:100%; background: #000; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(27, 27, 27, 0.6) 100%);}
.hero-item img {position:relative; width:100%;}

.hero-overlay {
	position:absolute; right:0; bottom:12%; left:0; z-index:1;
	display:flex; flex-flow:row wrap; align-items: center; width:90%; max-width:1200px; margin:auto; padding:2.5%;
	
	background: rgba(34,36,35,.75);
}
.hero-overlay a {display: inline-block; position:relative; z-index: 1; width:336px; padding:23px 25px 20px; font-size:25px; font-weight:500; text-align:left; text-transform:uppercase; color:#000; background:#ffd202;}
.hero-overlay a:after {content:"\f138"; position:absolute; z-index:-1; top:21px; right:3.5%; font-size:33px; /*width:60%; max-width:260px; height:6px; background:#ffd202;*/ font-family: FontAwesome; color:#cba90c;}

.hero-overlay .cta-text {margin:0 0 0 auto; font-size:40px; font-weight:700; text-transform:uppercase; color:#fff;}


/* SECONDARY SHOW - NAVIGATION
------------------------------------------------*/
.hero-lower {display: flex; flex-flow:row wrap; justify-content: space-between;}

#slideshow-2 {z-index:8; position:relative; width: 76%; margin:-5px 0 0 0;}

.icon-slideshow {overflow: visible !important;}

.slide-icon {overflow:hidden; position:relative !important; height:138px; cursor:pointer; border-top:5px #000 solid; background:#1f1f1f;}
.slide-icon:after {content:""; position:absolute; z-index:2; top:0; right:0;width:2px; height:100%; background:#090909;}

.slide-icon .eq-icon {
	position:absolute; z-index:1; top:50%; left:50%; margin:auto; text-align:center; text-transform:uppercase; font-weight:500; color:#fff;
	opacity:.1; transform: translate(-40%, -50%); 
}
.icon-title {
	position:relative; z-index:5; top:75%; left:50%; margin:auto; font-size:1.25vw; text-align:center; text-transform:uppercase; font-weight:800; color:#fff;
	transform: translate(-50%, -60%);
}

#cycle-2 .cycle-slide-active.slide-icon {position:relative; height:138px; margin-bottom:-8px; color:#565656; border-top:9px #ffd202 solid; border-bottom:9px #ffd202 solid; border-right:0; background:#dfdfdf;}
#cycle-2 .cycle-slide-active.slide-icon:after {content:none; }
#cycle-2 .cycle-slide-active.slide-icon .eq-icon {filter: grayscale(100%) brightness(200%); opacity:.75;}
#cycle-2 .cycle-slide-active .icon-title {/*font-size:1.5em;*/ color:#565656;}

/* Brands SECTION
------------------------------------------------*/
.brand-section {
    max-width: 90%;
    margin: 0 auto;
    background: white;
    padding: 40px 40px;
    border-radius: 12px;
    box-shadow: 0 0px 50px rgba(0, 0, 0, 0.2);
}

.brand-section h2 {
    font-size: 33px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 7px;
}

.brand-section p {
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 12px;
    line-height: 1.6;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 800px) {
    .brand-grid {
        grid-template-columns: 1fr;
    }
}

.brand-box {
    background: white;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.brand-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.brand-image {
    width: 100%;
    height: 60px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-name {
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
}

@media (max-width: 768px) {
    .brand-section {
        padding: 40px 20px;
    }
    .brand-section h2 {
        font-size: 2rem;
    }
    .brand-image {
        height: 120px; /* Smaller height on mobile */
    }
}

/* CATGEORY SECTION
------------------------------------------------*/
.category-highlights {display:flex; flex-flow:row wrap; align-items: center; justify-content:center; margin:8rem 0;}

.cat-highlight-item {position:relative; overflow: hidden; width:35%; margin:0 2%; background:#000;}
.cat-highlight-item img {z-index:1; width:100%;   transition:1s ease;}

.cat-highlight-item:hover img{/*filter: blur(8px);*/ transform: scale(1.35);}

.cat-highlight-overlay {position:absolute; bottom:20%; left:0; right:0; z-index:5; font-size:60px; line-height:50px; text-align:center; text-transform:uppercase; font-weight:800; color:#fff; transition:1s ease;}
.cat-highlight-overlay span {padding:5px 25px 3px 25px; font-size:30px; color:#050706; background:#ffd202;}


/* SERVICES BANNER - VIP
------------------------------------------------*/
.services-banner {
	position:relative; box-sizing:border-box; overflow:hidden; z-index: 2; display:flex; flex-flow:column wrap; align-items:flex-start; justify-content: flex-start; margin:5rem 0; 
	background:#111 url("/siteart/excavator-bucket-dirt.webp") no-repeat right center; background-size:cover;
}
.services-banner::after {content:""; position:absolute; z-index:-1; width:100%; height:100%; background: 000; background: linear-gradient(270deg, rgba(0, 0, 0, 0.3) 0%, rgba(17, 17, 17, 1) 100%);}

.services-body {width:90%; max-width:650px; margin:5rem 5% 1rem 5%; font-size:20px; line-height:33px; font-weight:400;  text-align:left; color:#fff;}
.services-body strong {font-size:33px; font-weight:800; font-style:italic;}

.services-body ul {text-align: left; list-style:inside;}

.services-badge {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:.5rem 5% 3rem 5%;}

.services-link{margin:0 0 0 20px; padding:2px; transition:1s ease;}
.services-link a {display:block; padding:15px 25px; text-transform:uppercase; font-weight:700; border-radius:3px;  background:#ffd202; transition:1s ease;}
.services-link a:hover {color:#f1f1f1; background:#222;}







/*  HOME INTRO / QUCIK CATEGORIES
------------------------------------------------*/
.home-intro {display:flex; flex-flow:row wrap; align-items:center; justify-content: space-between; margin:10rem 0;}

.product-highlight {width:845px; border-top-right-radius: 250px; overflow:hidden;}
.product-highlight img {width: 100%;}


.company-intro {width:calc(92.5% - 845px); margin:0 auto;}
.company-intro h1{font-size:33px; font-weight:800; text-transform: uppercase;}
.company-intro h2{position:relative; margin:0 0 3.25rem 0; font-size:23px; font-weight:500; text-transform: uppercase;}
.company-intro h2:after {content:""; position:absolute; z-index:1; bottom:-18px ;left:0; width:60%; max-width:260px; height:6px; background:#ffd202;}
.company-intro p {font-size:19px; line-height:32px; font-weight:300;}

.quick-categories {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:2.25rem 0;}
.quick-categories a {width:calc(22% - 16px); /*min-width:155px;*/ margin:1%; padding:8px;font-size:15px; font-weight:800; text-align:center; text-transform:uppercase; border:1px #e1e1e1 solid; border-radius:8px; transition:.5s ease;}
.quick-categories a img {width:85%; padding:10px; transition:.5s ease;}
.quick-categories a:hover {text-decoration:none; color:#333; background:#f5f5f5;}
.quick-categories a:hover img{ transform: scale(1.1);}



/*  ARTICLE
------------------------------------------------*/
article {}
article h1 {font-size:33px; font-weight:800; text-transform: uppercase;}
article h2 {font-size:23px; font-weight:800; text-transform: uppercase;}
article h3 {font-size:20px; font-weight:800; text-transform: uppercase;}
article p {font-size:20px; line-height:30px; font-weight:300;}



.sub-hero {position:relative; width:100%; height:200px; color:#fff; background:pink;}
.sub-hero h1 {position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); font-size:33px; font-weight:800; text-transform: uppercase; text-align:center;}


/*  INV MAIN
------------------------------------------------*/	
.inv-main {margin:1.5rem 5% }




/*  SUB MAIN
------------------------------------------------*/	
.sub-main {display:flex; flex-flow:row wrap; /*margin:8rem 5%;*/}
.sub-main h1 {font-size:33px; font-weight:800; text-transform: uppercase;}
.sub-main h2 {font-size:23px; font-weight:600; text-transform: uppercase;}
.sub-main h3 {font-size:20px; font-weight:800; text-transform: uppercase;}

.sub-main .sub-body {width:100%; max-width:850px; padding:8rem 5% 15rem 5%; box-sizing:border-box;}
.sub-main .sub-body article {margin:3.25rem 0 0 0;}
.sub-main .sub-body article ul {margin:1.5rem;}
.sub-main .sub-body article ul li {list-style:inside; font-size:19px; line-height:30px; font-weight:500;}

.sub-main .sub-hero {display: block; position: relative; width:calc(100% - 850px); height:auto; margin:0;}
.sub-main .sub-hero.showroom-hero {background:#111 url("/siteart/sub-hero/showroom-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.parts-hero {background:#111 url("/siteart/sub-hero/parts-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.service-hero {background:#111 url("/siteart/sub-hero/service-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.transport-hero {background:#111 url("/siteart/sub-hero/transport-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.about-hero {background:#111 url("/siteart/sub-hero/about-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.contact-hero {background:#111 url("/siteart/sub-hero/contact-hero.webp") no-repeat center; background-size: cover;}
.sub-main .sub-hero.thankyou-hero {background:#111 url("/siteart/sub-hero/thankyou-hero.webp") no-repeat center; background-size: cover;}

.sub-hero .sub-header {position: absolute; top:0; left:-2.65vh; font-size:6vh; font-weight:800; letter-spacing:-2.75vh; text-transform: uppercase; text-align:right;  writing-mode: vertical-lr; text-orientation: upright; color:#fff; cursor:default;}



.video-text-section {
	background-color: #ffd202; /* Yellow background */
	padding: 60px 20px;
}

.video-text-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
}

.video-text-content {
	flex: 1;
	padding-right: 20px;
}

.video-text-content h2 {
	font-size: 40px;
	margin-bottom: 20px;
	color: #333;
	font-weight: 800;
}

.video-text-content p {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 15px;
	color: #444;
}

.video-text-iframe {
	flex: 1;
}

.video-text-iframe video {
	width: 100%;
	height: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: block;
}

/* Responsive design */
@media (max-width: 768px) {
	.video-text-container {
		flex-direction: column;
	}
	
	.video-text-content {
		padding-right: 0;
		margin-bottom: 20px;
	}
}



/*  BRANDS
------------------------------------------------*/
.brands-header {background:#ffd202;}
.brands-header span {display: inline-block; padding:8px 3% 6px 3%; font-size:28px; font-weight:800; text-transform:uppercase; color:#fff; background:#090909;}

.brands-banner {display:flex;flex-flow:row wrap; align-items:center; justify-content:space-around; padding:30px; background:#eaeaea;}
.brands-banner a {margin:1%}
.brands-banner img {filter: grayscale(100%) opacity(40%); transition:.5s ease; width:100%; max-width:282px;}
.brands-banner a:hover img {filter: grayscale(0%) opacity(100%);}  


/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling{width:100%; height:90px;}


/*  QUICK CONTACT BANNER - TRANSPORT
------------------------------------------------*/
.quick-contact-banner {display:flex; flex-flow:row wrap; align-items:center; justify-content: center; margin:3.5rem 0; padding:3.15rem 5%; background:#101010;}
.qc-heading {font-size:24px; line-height:30px; font-weight:500; font-style:italic; text-align:right; color:#fff;}
.qc-heading strong {font-size:28px; font-weight:800;}

.qc-link{margin:0 0 0 2%; padding:2px; border:1px #ffd202 solid; transition:1s ease;}
.qc-link a {display:block; padding:15px 25px; text-transform:uppercase; font-weight:700; background:#ffd202; transition:1s ease;}
.qc-link:hover {border:1px #fff solid;}
.qc-link a:hover {color:#f1f1f1; background:#222;}


/*  Department Select
------------------------------------------------*/
.dept-select-section{display:flex; flex-flow:row wrap; /*align-items:center; justify-content: center;*/}
.dept-selector {position:relative; width:25%; height:480px; overflow: hidden;  transition:.5s ease;}
.dept-selector a { position:relative; z-index:1;}

.dept-selector:before{
	content:""; position:absolute; z-index:2; width:100%; height:100%;
	background: rgb(21,21,21); background: linear-gradient(0deg, rgba(21,21,21,0.4) 0%, rgba(21,21,21,0.8519782913165266) 100%); opacity:0.7; transition:.35s ease-in;
}
.dept-selector:hover:before {z-index:-1; margin:4.25vw 0 0 0; opacity:.3;}

.dept-selector img {object-fit: contain; /*height:100%; */ background:#222;  transition:.35s ease-in;}
.dept-selector:hover img {margin:4.25vw 0 0 0;}


.dept-select-title {
	position:absolute; z-index:5; top:2vw; right:0; left:0; margin:auto;
	font-size:3.15vw; font-weight:900; text-transform:uppercase; text-align:center; color:#fff; opacity:.85; transition:.5s ease-in;
}

.dept-selector:hover .dept-select-title {top:0.15vw; opacity:1; color:#111;}


/*  FOOTER
------------------------------------------------*/
.site-footer { 
	position:relative; display:flex; flex-flow:column wrap; align-items: center; justify-content: space-between;
	padding:7.5rem 5% 6rem 5%; font-size:15px; line-height:1; font-weight:500; color:#fff; border-bottom:20px #ffd202 solid;
	background:#1c1716 url("/siteart/footer-bg-excavator-tracks.webp") no-repeat 50% 50%; background-attachment: fixed; background-size: cover;
}
.site-footer:before {
	content:""; position:absolute; z-index:1; top:0 ;left:0; width:100%; height:100%;
	background: #242424;background: linear-gradient(0deg, rgba(36, 36, 36, 0.75) 0%, rgba(20, 20, 20, 1) 100%);
}

.foot-logo {position:absolute; z-index:5; top:-38px; left:0; right:0;max-width:365px; margin:0 auto;}
.foot-logo a {display:inline-block; }
.foot-logo img {width:100%; margin:0 auto;}

.foot-nav {position:relative; z-index:2; margin:0 0 3.5rem 0; }
.foot-nav ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:0; padding:0;}
.foot-nav ul li {margin:5px; padding:0; list-style-type:none; }
.foot-nav ul li a {
	 position: relative;
  z-index: 1; display:block; margin:0; padding:12px;  text-align:center; text-decoration:none; text-transform:uppercase; transition:.2s ease-in-out;	
}	
.foot-nav ul li a::before {position: absolute; z-index: -1; content: ''; top: 0; bottom: 0; left: -0.25em; right: -0.25em; background-color: rgba(255, 255, 255, 0.65);
  transform-origin: center right; transform: scaleX(0); transition: transform 0.2s ease-in-out;}
.foot-nav ul li a:hover::before {transform: scaleX(1); transform-origin: center left;}
.foot-nav ul li a:hover {color:#4a3427;}

.foot-contact {position:relative; z-index:2;}

.foot-social {position:relative; z-index:2; margin:3.5rem 0 0 0;}
.foot-social a {display: inline-block; width:56px; height:56px; font-size:24px; line-height:56px; text-align:center; color:#4a3427; background:#fff;}



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

@media screen and (max-width: 1485px) {
	nav.primary {margin:0 5%;} 
	nav.primary ul li a {margin:0 2px; padding:12px 8px; font-size:14px;}
	
	.tagline-basis{font-size: 50px; line-height: 115px; margin-left: -255px;}
}

@media screen and (max-width: 1400px) {
	.product-highlight {width:700px; border-top-right-radius: 200px;}
	.company-intro {width:calc(92.5% - 700px);}
	.dept-selector {height:380px;}
}

@media screen and (max-width: 1400px) {
	.hero-item {width:130%; margin:0 0 0 -15%;}
	
	.hero-overlay {max-width:885px;}
	.hero-overlay .cta-text {font-size:24px;}
}

@media screen and (max-width: 1250px) {
	.cat-highlight-item {width:44%;}
	.product-highlight {width:500px; border-top-right-radius: 145px;}
	.company-intro {width:calc(92.5% - 500px);}
}

@media screen and (max-width: 1200px) {
	.site-navigation {position:relative; padding:3rem 0 3.5rem 0;}
	.site-navigation:before {top:27px}
	.site-navigation:after {bottom:35px;}

	nav.primary{display:none;}
	#menu-button{display: block; position: relative; z-index:400; text-align:center;}
	#menu-button a{display:inline-block; margin:0 auto; padding:12px; font-size:18px; line-height:1; text-align:center; font-weight:700; text-decoration:none; text-transform:uppercase; color:#111; cursor:pointer;}
	
	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;
		padding-bottom:40px;
		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 .menu-header {	
		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; cursor:pointer; 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:17px;
		text-align:left;
		cursor:pointer; 
		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 #ffd202 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);}	
	
	
	
	.hero-item {width:140%; margin:0 0 0 -20%;}
	#slideshow-2 {overflow:hidden; width:100%; margin:-9px auto 0 auto;}
	.slide-icon {height:18px; background:#000;}
	#cycle-2 .cycle-slide-active.slide-icon {height:25px; margin-bottom:-8px; border-top:7px #ffd202 solid; border-bottom:7px #ffd202 solid; background:#ffd202;}
	.eq-icon, .icon-title {display:none;}
		
	.sub-main .sub-body {order:2; width:100%; padding:4rem 5% 8rem 5%;}
	.sub-main .sub-hero {order:1; width:100%; padding:0 0 30% 0;}
	
	.dept-selector {width:50%; height:400px;}
	.dept-selector:hover:before {margin: 7.75vw 0 0 0;}
	.dept-selector:hover img {margin: 7.75vw 0 0 0;}
	.dept-select-title {top:5vw; font-size:5.5vw;}
}

@media screen and (max-width: 1024px) {	
	.hero-tagline {height: 130px;}
	.tagline-basis{font-size: 35px; line-height: 125px; margin-left: -180px;}
	
	.hero-overlay {justify-content:center; width:100%; background:transparent; }	
	.hero-overlay .cta-text {display:none;}
	
	
	.cat-highlight-item {width:47%; margin:0 1%;}
	
	.home-intro {margin:7rem 0;}
	.product-highlight {order:2; margin:5rem 0 0 0; width:100%; height: 0; padding: 0 0 48.5% 0; border-top-right-radius:0;}
	.company-intro {width:92.5%;}
	
	/*.product-highlight {orde2:2; width:90%;}*/	
	
	.brands-banner img {max-width:212px;}
}

@media screen and (max-width: 900px) {
	
	
	
	.cat-highlight-overlay {position:absolute; bottom:20%; left:0; right:0; z-index:5; font-size:45px; line-height:50px;}
	/*.cat-highlight-item {width:100%; margin:2% 0;}*/
	
	
	.quick-contact-banner {flex-flow:column wrap;}
	.qc-heading {text-align:center;}
	.qc-link{margin:.75rem 0 0 0;}
}

@media screen and (max-width: 768px) {
	.hero-overlay a {width:235px; padding:8px 25px; font-size:18px;}
	.hero-overlay a:after {top:7px; font-size:25px;}
	.contact-bar {padding: 5px 5% 40px 5%;}
	.contact-bar .social-icons {margin:0 auto; text-align:center;}
	.contact-bar .social-icons a{font-size:26px;}
	.brands-header span {padding:8px 5% 6px 5%; font-size:20px;}
	
	.sub-main .sub-hero {padding:0 0 50% 0;}
}

@media screen and (max-width: 650px) {
	.hero-tagline {display:none; }
	.cat-highlight-item {width:94%; margin:2% 2%;}
	.cat-highlight-overlay {position:absolute; bottom:20%; left:0; right:0; z-index:5; font-size:50px;}
	.quick-categories a {width:calc(47% - 16px);}
	
	.dept-selector {width:100%; height:300px;}
	.dept-selector:hover:before {margin:16.75vw 0 0 0;}
	.dept-selector:hover img {margin: 16.75vw 0 0 0;}
	.dept-select-title {top:5vw; font-size:12vw;}
	
	.sub-main .sub-hero {padding:0 0 65% 0;}
}

@media screen and (max-width: 450px){
	.hero-overlay {display:none; }
}