@charset "UTF-8";


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

/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {font-size:100%; font-family: tablet-gothic, sans-serif !important; background:#faf5f2;}

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


/* 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; font-family: "mortise", serif;}
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:#f30601; 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 {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}






a.buttonLink {
	padding:8px 10px 10px 10px; line-height:2.5; font-size:1.125em; text-decoration:none; color:#fff; background:#2a7093; 

-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}

a.buttonCTA {
	display:flex; flex-flow:row wrap; align-items: center;  justify-content: space-between; box-sizing: content-box; text-decoration:none; 
	width:180px; height:auto; padding:12px 30px; font-size:18px; letter-spacing:.5px; color:#fff;
	-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
a.buttonCTA i {
	font-size:.8em;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.buttonCTA:hover i {
  transform: translateX(5px); -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); -o-transform: translateX(5px);
}


/* HEADER
------------------------------------------------*/	
.siteHeader {display:flex; flex-flow:row wrap; align-items:center; /* justify-content:space-between;*/ padding:1.5% 2.5%; border-top:1px #321c02 double; background:#fff;}	
	

/* LOGO
------------------------------------------------*/	
.logo {margin:0 0 -3.5% 0;}	
.logo img {width:100%; max-width:456px;}





.headerContact{display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; margin:0 0 0 auto; font-weight:300; font-style:italic; color:#321c02;}

.contactIcon {
	width:43px; height:43px; margin:0 15px 0 30px; font-size:1.25em; line-height:43px; text-align:center; color:#fff; background:#82705a;
	-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
}
.contactIcon a {color:#fff;}

.lightIcon {background:#b6aca0;}

.contactDetails {font-size:1.15em; line-height:1.25; text-align:right; }

.contactDetails a {color:#321c02;}
.contactDetails a:hover {color:#968b7e;}
.contactDetails a[href^="tel:"]{font-size:1.125em; font-weight:500;}






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

nav.primary {z-index:500; position:relative; margin:1.2% 0 0 auto; padding:0; width: 80%;}

nav.primary ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; 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 5px; padding:12px 45px;
    font-size:1.25em; line-height:24px; text-align:center; text-decoration:none; font-weight:600; color:#5a5a5a;
	-webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in;	
}	
nav.primary ul li:last-of-type a {padding:12px 0 12px 45px;}
nav.primary ul li a:hover {color:#121212;}

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





.hero {position:relative; width:100%; height:778px; background:url("/siteart/hero/hero-rail-excavator.jpg") no-repeat center center; background-size: cover;}

.heroOverlay {
	display:flex; flex-flow:row wrap; align-items: center; justify-content: space-between;
	position:absolute; z-index:5; bottom:3.5%; right:0; left:0; 
	max-width:1260px; margin:0 auto; padding:1.5% 2.5% 4.5% 2.5%;
}


.heroSubTitle {margin:0 0 1.5% 0; font-size:2.5em; line-height:1.2; font-style:italic; color:#fff;}
.heroTitle{margin:0 1em 0 0; font-size:3em; line-height:1.2; font-weight:700; font-style:italic; text-transform:uppercase; color:#fff;}



.heroTablet {display:none;}
.heroTablet img{width:100%;}

.heroMobile {display:none; }
.heroMobile img{width:100%;}






.subHero {position:relative; width:93%; height:200px; margin:3.5% auto 0 auto;}
.subHero h3{position:absolute; bottom:28%; right:0; left:0; text-align: center;  font-size:4em; font-weight:700; text-transform: uppercase; color:#fff; text-shadow: #000 1px 0 40px; font-family: "mortise", serif;}


.railTracks {background:url("/siteart/hero/rail-hero.jpg") no-repeat center center; background-size: cover;}
.railHighway {background:url("/siteart/hero/consignment-hero.jpg") no-repeat center center; background-size: cover;}
.railYard {background:url("/siteart/hero/contact-hero.jpg") no-repeat center center; background-size: cover;}
.railLine {background:url("/siteart/hero/thankyou-hero.jpg") no-repeat center center; background-size: cover;}






.categorySection {
	max-width:1340px; margin:0 auto; padding:1.5% 0 4.5%;
	display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:space-between;
}


.categoryItem {
	position:relative; width:22%; min-width:208px; margin: 3% 0 0 0; text-align:center; 
	-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;
}

.categoryItem h3 {font-size:2.4375em; font-weight:600; color:#4b2b04; font-family: "mortise", serif;}
.categoryItem p{font-size:1.25em; line-height:1.75}

.categoryImage{
	position:relative; width:100%; height:200px; margin:0 auto 5% auto; text-align:center; 
	-webkit-border-top-left-radius: 12px; -webkit-border-top-right-radius: 12px; -moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px; border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.categoryTitle {position:absolute; bottom:8%; right:0; left:0; margin:0 auto; padding:0 5%; font-size:1.5em; line-height:1; font-weight:600; text-align:center; text-transform:uppercase; text-shadow:1px 1px 5px rgba(0,0,0,0.5); color:#fff; font-family: "mortise", serif;}



.serviceTrucks {background:url("/siteart/categories/service-utility-trucks.jpg") no-repeat center center; background-size: cover;}
.bucketTrucks {background:url("/siteart/categories/bucket-trucks.jpg") no-repeat center center; background-size: cover;}
.craneTrucks {background:url("/siteart/categories/crane-trucks.jpg") no-repeat center center; background-size: cover;}
.mechanicTrucks {background:url("/siteart/categories/mechanic-trucks.jpg") no-repeat center center; background-size: cover;}
.grappleTrucks {background:url("/siteart/categories/grapple-trucks.jpg") no-repeat center center; background-size: cover;}
.materialTrucks {background:url("/siteart/categories/material-handling-trucks.jpg") no-repeat center center; background-size: cover;}



.sellTrucks {
	/*width:25%;*/ /*max-width:293px;*/ height:293px; padding:1% 0; color:#fff;
	background:url("/siteart/categories/sell-consignment.jpg") no-repeat center center; background-size: cover;
	-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
}

.sellTrucks .categoryTitle {position:relative; bottom:auto; top:5%; margin:0 0 1.5% 0; padding:0 8%; font-size:1.4em; text-align:left; }
.sellTrucks p {position:relative; padding:0 8%; line-height:1.25;}

.sellTrucks a.buttonLink {position:absolute; left:14%; bottom:6%; line-height:1;}

.main {padding:4.5% 5%;}




/*  INTRO SECTION
------------------------------------------------*/	
.introSection {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:3.5% 0; border-top:3px #fff solid; background-color: #e3e9ec;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");}



/*  ARTICLE
------------------------------------------------*/
article {color:#7a7a7a;}
article h1 {font-size:2.4375em; line-height:1.2; font-weight:600; color:#4b2b04;}
article h2 {font-size:1.375em; line-height:1.2; font-weight:600; font-style:italic; color:#4c453c;}
article p {font-size:1.375em; line-height:1.875; font-weight:200;}

.subMain {display:flex; flex-flow:row wrap; align-items:flex-start;justify-content: space-between;}
.subMain article {width:70%; margin:0 auto 0 8%;}
.subMain article.contactDetails {width:355px; margin:0 auto 0 8%; text-align:left; }
.subMain aside {width:calc(85% - 355px); margin:0; }

.subMain aside iframe {border:1px #999 solid; -webkit-border-top-right-radius: 50px; -moz-border-radius-topright: 50px; border-top-right-radius: 50px;}

.introSection article {width:40%; margin:0 3% 0 7%}
.introSection article h2 {margin:0 0 2% 0;}


.catList {margin:3% 0 0 0; padding:1.5% 2% 1.5% 6%; font-style:italic; color:#686868; border-left:5px #2a7093 solid; background:#f6f8f9;}
.catList ul {column-count:3;}
.catList ul li{list-style:none; line-height:2;}

.introSideBar {
	 width:48%; /*max-width:900px;*/ height:400px;  background:url("/siteart/intro-highlight-rail-truck-promo.jpg") no-repeat center center; background-size: cover;
	-webkit-border-top-left-radius: 60px; -moz-border-radius-topleft: 60px; border-top-left-radius: 60px;
}






/*  ASIDE
------------------------------------------------*/
aside {}








/*  FOOTER
------------------------------------------------*/
.siteFooter {
	display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;
	padding:3.5% 5%; color:#fff; background:#3d2100 url("/siteart/footer-rail-bg.jpg") no-repeat center center; background-size:cover;
}

.footContact{align-self:flex-start;font-size:1.25em; line-height:1.2; font-weight:300;}
.footContact a{color:#fff;}
.footContact img {width:100%; max-width:240px;}

.footNav {margin:0;}
.footNav h5 {margin:0 0 6px 0; font-size:1.25em; font-weight:600; font-family: "mortise", serif;}
.footNav ul {columns:2;  list-style:none;}
.footNav ul li {margin:0 20px 0 0;}
.footNav ul li a {font-size:1.25em; line-height:1.5; font-weight:300; color:#fff;}


.footLinks {display:flex; flex-flow:row wrap; align-items:flex-end; justify-content:space-between; width:42.5%;}
.footLinkItem {margin:30px 0 0 30px;}
.footLinkItem h3 {margin:0 0 8px 0; font-size:1.5625em; line-height:1.1; font-weight:700;}


/*  FOOTER COPYRIGHT
------------------------------------------------*/
.footerCopyright{padding:.85% 5%; font-size:.9em; font-weight:300; color:#fff; background:#241400;}




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

@media screen and (max-width: 1650px) {
	nav.primary {margin:1% 0 0 auto;}
	nav.primary ul li a {padding:12px 25px;}	
	nav.primary ul li:last-of-type a {padding:12px 0 12px 25px;}
	
	
	
	.footLinks {width:48%;}
}

@media screen and (max-width: 1465px) {
	.logo {margin:0 0 -6% 0;}	
	.logo img {max-width:325px;}
	
	nav.primary ul li a {padding:12px 15px;}	
	nav.primary ul li:last-of-type a {padding:12px 0 12px 15px;}
	
	.heroDesktop {display:none;}
	.heroTablet {display:block;}
	
	.hero {height:700px; background:url("/siteart/hero/hero-rail-excavator-tablet.jpg") no-repeat center right; background-size: cover;}
	
	
	
	.introSideBar {height:475px;}
}

@media screen and (max-width: 1385px) {
	.categorySection {
	max-width:1340px; margin:0 3%; padding:1.5% 0 4.5%;
}

}

@media screen and (max-width: 1250px) {
	nav.primary ul li a {padding:12px 10px;font-size:1.05em;}
	nav.primary ul li:last-of-type a {padding:12px 0 12px 15px;}
	
	.heroTitle{font-size:2.45em;}
	.subMain article {width:95%; margin:0 auto;}
	
	.footLinks {width:270px;}
}

@media screen and (max-width: 1024px) {
	.logo {order:2; width:50%; margin:0;}
	.logo img {max-width:297px;}
	.headerContact {order:1; justify-content:center; width:100%; margin:0 auto 2% auto;}
	.contactIcon {margin:0 15px 0 30px;}
	.contactIcon:first-of-type {margin:0 15px 0 0;}
	
	nav.primary{display:none;}
	#menu-button{display: block; order:3; width:50%; margin:2% 0 0 0; font-size: 1.25em; line-height:60px; text-align:right;  position: relative; z-index:400;}
	#menu-button a{color:#5a5a5a; font-weight:600; text-decoration:none; padding:0 35px;}
	
	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;
		left: -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:right;
		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 #321c02 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:13px; line-height:16px; padding:15px 0;}
	
	
	
	
	.introSection article {width:100%; margin:0 5% 7.5% 5%;}
	
	.introSection {padding:5% 0 0 0;}
	.introSideBar {width:100%; height:435px; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;}
}

@media screen and (max-width: 950px) {
	
	.categorySection {
		padding:3.5% 0 4.5%;
		display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:center;
	}


	.categoryItem {width:30%; margin:3% 1.5% 0 1.5%;}
	
	
	.heroOverlay {justify-content:center;}
	.heroTitle{width:100%; margin:0; font-size:2.85em; text-align:center; }
	
	.footContact {order:2;}
	.footNav {order:3;}
	.footLinks {order:1;width:100%; margin:0 0 5% 0;}
	.footLinkItem {margin:0;}
}

@media screen and (max-width: 768px) {
	.headerContact{justify-content:flex-end; margin:0 auto;}
	.contactDetails {display:none;}
	
	
	.hero {height:600px; background:url("/siteart/hero/hero-rail-excavator-mobile.jpg") no-repeat center right; background-size: cover;}
	
	.categoryItem {width:46%; margin:5% 2% 1.5% 2%;}
	
	.catList ul {column-count:2;}
	
	.site-footer {background:#3d2100 url("/siteart/footer-rail-bg-mobile.jpg") no-repeat center center; background-size:cover;}
}

@media screen and (max-width: 650px) {
	.footContact,
	.footNav,
	.footLinkItem {width:100%; margin:30px auto 0 auto; text-align:center;}
	.footLinkItem a {margin:0 auto;}
	.footContact {order:3;}
	.footContact img {margin:0 auto;}
	.footNav {order:2;}
	
	.footNav ul {columns:1;}
	.footNav ul li {margin:0;}
}

@media screen and (max-width: 485px){
	.categoryItem {width:97%; margin:8.5% 1.5% 3.5% 1.5%;}
	
	.hero {height:300px;}
	.heroSubTitle {display:none;}
}

@media screen and (max-width: 450px){
	.catList {padding:5% 2% 5% 12%;}
	.catList ul {column-count:1;}
}

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

}