@charset "UTF-8";

/* RESET 
------------------------------------------------*/
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
	
/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {font-size:100%; font-family: "open-sans", sans-serif !important; background:#fff;}

/* SELECTION
------------------------------------------------*/
::selection {color:#111; background: #f9c629;}

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

/* HEADERS
------------------------------------------------*/
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;}





/* LINK BUTTONS
------------------------------------------------*/	
a.linkButtonBox {
	display:inline-block;
	box-sizing:content-box; min-width:170px; padding:15px; font-size:20px; font-weight:700; text-align:center; text-transform:uppercase; color:#111; cursor:pointer;
	background-color: #f9c629; 
	transition:.5s ease; border-radius: 1px;	
}
a:hover.linkButtonBox {color:#f1f1f1; background-color:#333;}


a.linkButtonBox.altLinkBox{color:#f1f1f1;background-color:#d20c0c;} 
a:hover.linkButtonBox.altLinkBox{color:#f1f1f1;background-color:#333;} 







/* HEADER
------------------------------------------------*/	
.site-header {position:relative; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:45px 8.5%; text-align:right; color:#f8f8f8; background:#1a1a1a;}
.site-header:before {content: ""; position: absolute; top:0; left:0; width: 32%; height: 4px; background-color: #f1c61a;}
.site-header:after {content: ""; position: absolute; top:0; right:0; width: 68%; height: 4px; background-color: #595959;}	

/* LOGO
------------------------------------------------*/	
.logo img {width:100%; max-width:263px;}

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

nav.primary {z-index:500; position:relative; margin:0 auto 0 4.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; margin:0 10px; padding:12px 0;
    font-size:1.375em; line-height:1; text-align:center; text-decoration:none; color:#f1f1f1;
	-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:#d20c0c;}

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

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

/*  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;}



.head-contact {}
.head-contact a[href^="tel:"] {position:relative; font-size:26px; font-weight:600;}
.head-contact a[href^="tel:"]:before {content:'\f095'; position:absolute; z-index:5; top:10px; left:-30px; margin:0; font-size:20px; color:#d20c0c; font-family: FontAwesome;}

.head-contact a:hover {letter-spacing:.5px; transform:scale(1.01,1.01); }




.head-search {padding:0 8.5%; background:#e9e6e6;}








/*  HERO
------------------------------------------------*/
.hero {
	/*position:relative;*/ display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;
	padding:4% 0 0 0;
	background:#1a1a1a url("/siteart/machine-parts-blue-print-pattern.jpg") repeat;
}

.hero-body {margin:-3% 0 0 8.5%;}
.hero-title {font-size:4.25vw; line-height:1; font-weight: 900; text-transform:uppercase; color:#fafafa;}
.hero-subtitle {font-size:2vw; line-height:1.5; font-weight:500; color:#fafafa;}

.hero-links {}
.hero-links a {margin:15px 8px;}

.hero-overlay {/*position:absolute;*/ z-index:10; flex:1; margin:0 3.5% -18px 0;}
.hero-overlay img {width:100%; max-width:981px;}
  
/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling{width:100%; height:90px;}



/*  BRAND SECTION
------------------------------------------------*/
.brands-section {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; margin:2% 2% 2% 0;}
.brands-title {
	box-sizing:border-box; margin:0 auto 0 0; padding:32px 60px 32px 40px; font-size:26px; font-weight:600; font-style:italic; background:#f9c629; clip-path: polygon(100% 0%, 90% 100%, 0% 100%,0% 0%);
}

.brands-items {display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; width:calc(100% - 298px);}
.brands-items img {width:20%; max-width:312px; padding:20px 0;}













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

.intro-body {box-sizing:border-box; width:50%; padding:3.5% 6.5% 3.5% 6.5%; background:#faf8f8;}
.intro-body p {font-size:20px; line-height:1.5; font-weight:300;}

.intro-body .intro-title {margin:0 0 24px 0}
.intro-body .intro-title h1{font-size:2.5vw; font-weight:900; line-height:1; color:#181818}
.intro-body .intro-title h1 span{font-size:26px; font-weight:400; line-height:1; font-style:italic; color:#3a3a3a;}

a.intro-link {position:relative; font-size:18px; font-weight:600; color:#d20c0c;}
a.intro-link:after {content:'\f061'; position:relative; z-index:5; top:1px; right:-8px; margin:0; font-size:1em; color:#f1c61a; font-family: FontAwesome;}

.intro-video {width:52.5%; margin:0 0 0 -2.5%;}
.desktopVideo {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
	border-bottom:5px #ccc solid; border-top-left-radius: 51px; border-bottom-left-radius: 51px;
	background:#a8c2c6 url("/siteart/videos/route40-desktop-poster.jpg") no-repeat center; background-size: cover;
}
.desktopVideo video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.mobileVideo {display: none;}





/*  MAIN - SUB PAGES
------------------------------------------------*/	
.main {margin:4% 0;}

.inv-main {margin:5em auto; padding:0 5%;}

.sub-main {overflow:hidden; display:flex; flex-flow:row wrap; justify-content: space-between; margin:5em auto; padding:0 5%;}
.sub-main article {
	box-sizing:border-box; width:50%; padding:0 4.5% 0 0;
	-webkit-animation: slide-in-left 0.85s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.85s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.sub-main .embed-map {width:100%; height:auto; }
.sub-main .embed-map iframe {width:100%; height:335px; }

.sub-main .split-map {width:50%; height:auto; }
.sub-main .split-map iframe {width:100%; height:335px; }


.promo-banner{
	display: flex; flex-flow:row wrap; align-items: center; justify-content:center;
	padding:30px 5%; font-size:28px; font-weight:800; text-transform:uppercase; text-align:center; color:#f9f9f9;
	background: rgb(165,13,13); background: linear-gradient(275deg, rgba(165,13,13,1) 0%, rgba(210,12,12,1) 91%);
}



/*  ARTICLE
------------------------------------------------*/
article h1 {font-size:38px; font-weight:900; line-height:1.4; text-transform:uppercase; color:#181818}
article h2 {font-weight:700; line-height:1.4; text-transform:uppercase; font-style: italic; color:#a50d0d;}
article p {font-size:1.25em; line-height: 1.5; font-weight:300;}




.equipment-category-section {}
.equipment-category-title {margin:0 2%; font-size:33px; font-weight:700;}
.equipment-category-title span {display:none; }

/*  BRAND SHOWCASE
------------------------------------------------*/
.category-showcase {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; margin:1% 1% calc(5em - 1%) 1%;}


/*.category-showcase .cycle-slideshow {z-index:5; position:relative; margin:0; padding:0; box-sizing: border-box; }*/
/*.category-showcase .cycle-slideshow img {position:relative; width:100%; margin:0; padding:0;}*/



/*.category-showcase .cycle-pager {
	position:absolute; overflow: hidden; z-index:500; bottom:25px; left:20px; width:auto; padding:0 6px 0 15px; text-align:left; background:rgba(15,15,15,0.52);
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.category-showcase .cycle-pager span {display: inline-block; width:30px; height:58px; font-size:60px; line-height:1; color:#c7cedb; font-family: arial; cursor: pointer;}
.category-showcase .cycle-pager span.cycle-pager-active {color:#ffd204;}
.category-showcase .cycle-pager > * {cursor:pointer;}*/



.category-item {
	display: inline-block; position:relative; overflow:hidden; box-sizing: border-box; flex:18%; min-width:275px; margin:1%; padding:0; border-radius: 1px; background: #e9e9e9;
}

.category-item:hover img {
	display: block; transform: scale(1.15);
}

.category-bg {
	overflow:hidden; position:relative; z-index: 10; height:350px;
	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
}

.category-bg img {
    display: block !important; width:auto; height: 100%; margin:0 auto; padding: 0;
	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
}

.category-item-logo {
	position: absolute; top:0; right: 0; bottom: 0; left: 0; z-index: 10;
    -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
}

.category-item-logo img {display:block; position: absolute; top: 50%; left: 50%; width:90%; max-width:238px; height:auto; margin:0 auto; transform: translate(-50%, -90%);}

.category-item:hover .category-item-logo img {
	-webkit-transform:translate(-50%, -120%); -moz-transform:translate(-50%, -120%); -ms-transform:translate(-50%, -120%); -o-transform:translate(-50%, -120%); transform:translate(-50%, -120%);
}

.category-title {
	position: absolute; right: 0; bottom: 100px; left: 0; z-index: 10; font-weight:800;text-align:center; font-size:24px; 
   transition: all .5s ease;
}

.category-item:hover .category-title {
	bottom: 140px;
}


.category-cta {
	position:absolute; bottom:0; z-index:15; width:100%; margin:0 auto -129px auto; padding:2em 0; font-size:1.3em; line-height:1.1; font-weight:700; text-transform:uppercase; text-align:center; color:#f7f7f7; background:#f7f7f7;
	transition: all .5s ease;
}
.category-cta a {padding:10px 20px; font-size:18px; font-weight:400;color:#f1f1f1; border-radius:20px;  background:#d20c0c;}
.category-cta a:nth-of-type(even) {color:#f1f1f1; background:#111;}
.category-item:hover .category-cta {margin:-129px auto 0 auto;}


/*.category-link {width:100%; margin:2em 0 0 0; text-align: center;}*/









/*  CONTACT SECTION
------------------------------------------------*/
.contact-section {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:5% 8.5% 5% 0; background:#090909;}
.contact-section iframe {width:75%; height:375px; border-top-right-radius: 51px; border-bottom-right-radius: 51px;}
.contact-section .contact-details {flex:.85; line-height:1.75; color:#fff;}
.contact-section .contact-details strong {font-size:1.2em;}



/*  CONTACT BANNER
------------------------------------------------*/
.contact-banner {
	display: flex; flex-flow:row wrap; align-items: center; justify-content:center;
	padding:30px 3.5%; font-size:28px; font-weight:600; text-transform:uppercase; text-align:center; color:#f9f9f9;
	background: rgb(165,13,13); background: linear-gradient(275deg, rgba(165,13,13,1) 0%, rgba(210,12,12,1) 91%);
}

.cb-text {margin:0 2%;}
a.contact-button {/*display:inline-block; */padding:.25em 1em;font-size:22px; font-weight:700; border-radius:8px; color:#000; border-bottom:4px #dbb10a solid; background:#f1c61a; transition:.5s ease-in-out;}
a.contact-button:hover {color:#fff; background:#806705;}



/*  FOOTER
------------------------------------------------*/
.site-footer {
	display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:space-between; 
	padding:65px 6.5%; color:#f8f8f8; background: rgb(41,41,41); background: linear-gradient(275deg, rgba(41,41,41,1) 0%, rgba(34,34,34,1) 91%);
}

.foot-logo a {display: inline-block;}
.foot-logo img {width:100%; max-width:263px;}

.foot-nav strong {font-size:20px;}
.foot-nav ul {list-style:none;}
.foot-nav a {display:inline-block; margin:3px 0; padding:6px 0; font-size:18px; line-height:1.5; font-weight:300;}


/*  Footer Copyright
------------------------------------------------*/
.site-copyright {position:relative; padding:25px 8.5%; text-align:right; color:#f8f8f8; background:#1a1a1a;}
.site-copyright:before {content: ""; position: absolute; top:0; left:0; width: 32%; height: 6px; background-color: #f1c61a;}
.site-copyright:after {content: ""; position: absolute; top:0; right:0; width: 68%; height: 6px; background-color: #595959;}



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

@media screen and (max-width: 1620px) {
	.site-header {padding: 45px 3.5%;}
	
	.intro-body {width:38%;}
	.intro-video {width:64.5%; margin:0 0 0 -3.5%;}
	.intro-body p {font-size: 18px;}
}

@media screen and (max-width: 1285px) {
	nav.primary ul li a {font-size:1.25em;}
	.head-contact a[href^="tel:"] {font-size:1.25em;}
	.head-contact a[href^="tel:"]:before {top: 6px;}
	.intro-body,
	.intro-video {width:100%; margin:0;}
	.desktopVideo{border-radius: 0; border:none;}
	.intro-body {padding:3.5% 6.5% 5% 6.5%;}
	.intro-body .intro-title h1 {font-size: 49px;}
	.intro-body p {font-size:20px;}
	
	.contact-section iframe {width: 60%;}

}

@media screen and (max-width: 1150px) {
	nav.primary{display:none;}
	#menu-button{/*width:100%;*/ display: block; font-size: 1.375em; line-height:60px; position: relative; z-index:400;}
	#menu-button a{color:#f1f1f1; text-decoration: none; font-weight:600; 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; }

	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:16px;
		text-align:left;
		font-weight:700; 
		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 #C8102E 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);}	
	
	
	.brands-section {display:flex; flex-flow:column wrap;  }
	.brands-title {position:relative; margin:0 auto; padding:20px 40px; background:transparent; clip-path:none;}
	.brands-title:after {content: ""; position: absolute; bottom:0; right:0; left:0; width:175px; height: 8px; margin:0 auto; background-color: #f1c61a;}
	.brands-items {justify-content:space-evenly; width:100%;}
	.brands-items img {width:auto; max-width:255px; padding:10px 0;}
	
	.foot-logo {width:100%; margin:0 0 45px 0; text-align:center; }
	
	
	
	.hero {flex-flow: column wrap;}
	.hero-body {margin:3.5%; text-align: center;}
	.hero-overlay {flex:1; margin: 1% 3.5% -18px 3.5%;}
	.hero-overlay img {max-width:650px;}
}

@media screen and (max-width: 1024px) {
	
	.sub-main article {width:100%; padding:0;}
	.sub-main .split-map {width:100%; margin:4em 0 0 0;}

	
	
	.contact-section iframe {width:50%;}
}

@media screen and (max-width: 850px) {
	.site-footer {flex-flow:column wrap;} 
	.foot-nav{width: 100%; text-align: left; }
	.footer-item {display:flex; flex-flow:column wrap; flex: 0 0 100%;  max-width: 100%;}
	.footer-title {cursor: pointer; position:relative; margin: 0; padding:25px 0; font-size: 1rem; text-align: left; border: none; outline: none;}
	.footer-title:after {content:'\002B'; position:absolute; right:0; top:.8em; width: 1.5rem; height: 1.5rem; margin:0; font-size:2rem; font-weight:300; color:#fefefe;}
	.footopen:after {content: "\2212";}
	.expansion{overflow: hidden; max-height: 0; min-height:0 !important; padding:0; border-bottom: 1px solid #fefefe; transition: max-height 0s ease-out;}
	.footer-item ul {position: relative; margin-top:0; margin-bottom:2rem; padding-left:0;}
	.footer-item ul.menu-footer:after {content:none;}
	.foot-contact {margin:45px 0 0 0;text-align:center;}
	.site-copyright {text-align:center;}
}

@media screen and (max-width: 768px) {
	.head-search {padding:0 3.5%;}
		
	.hero-title {font-size:calc(4.25vw + 16px);}
	.hero-subtitle {font-size:calc(1.5vw + 16px);}
	
	.desktopVideo {display: none;}
	.mobileVideo {display: block; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background:#a8c2c6 url("/siteart/videos/route40-mobile-poster.jpg") no-repeat center;
	background-size: cover;}
	.mobileVideo video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

	.equipment-category-title {font-size: 23px;}
	.equipment-category-title span {display:inline; }
	.equipment-category-title strong {font-size:33px; }
	
	.contact-section {flex-flow: column-reverse; padding:8.5% 0 0 0; }
	.contact-section iframe {width:100%; border-radius:0;}
	.contact-section .contact-details {flex:1; margin:0 0 8.5% 0; text-align:center;}
	.contact-banner {font-size:23px;}	
}

@media screen and (max-width: 685px) {
	
	.site-header .logo {order:2;}
	.site-header #menu-button {order:3;}
	.site-header .head-contact {order:1; width:100%;}
}

@media screen and (max-width: 500px){
	.site-header {text-align: center;}
	.site-header .logo img {max-width:230px;}
	.site-header .head-contact {margin:0 0 25px 0;}
}

@media screen and (max-width: 380px){
	.site-header {flex-flow:column wrap;}
	.intro-video {display:none;}
}

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