@charset "UTF-8";

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

:root {
	--white:#fff;	
	--nearwhite: #fcfcfc;
	--offwhite:#f3f3f3;

	--lightgray: #e8e8e8;
	
	--portred:#ae090c;

	--gray:#dbdbdb;
	
	--offblack: #272727;
	--nearblack: #181818;
	--black: #111;
}


/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
html {scroll-behavior: smooth;}
body {font-size:100%; font-family: komet, sans-serif !important; background:var(--white);}

/* SELECTION */	
::selection {color:var(--white); background:var(--portred);}
::-moz-selection {color:var(--white); background:var(--portred);}


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

/* HEADERS */
h1, h2, h3, h4 ,h5 ,h6 {line-height: 1.2; font-family: bahnschrift-semicondensed, sans-serif;}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b{font-weight:700; }
h1 {font-size:40px; font-weight:normal;}
h2 {font-size:36px; font-weight:normal;}
h3 {font-size:33px; 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{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;}




.redtext {color:var(--portred);}
.center-text {text-align:center;}




.ltgray-background{background:var(--lightgray);}


/*
font-family: "bahnschrift", sans-serif;
font-family: bahnschrift-condensed, sans-serif;
font-family: bahnschrift-semicondensed, sans-serif;

font-weight: 400 / 700
*/


/*
font-family: komet, sans-serif;
font-weight: 400;
font-style: normal;
*/


.col-tainer {display:flex; flex-flow:row wrap; gap:1%;}
.col-tainer p {font-size:19px; line-height:28px;}

.col-1-1 {width:100%; margin:0;}

.col-1-2 {width:49.5%; margin:0 auto;}

.col-1-3 {width:32.8%; margin:0;}
.col-2-3 {width:66.1%; margin:0;}



.inner-wrap {margin:0 7.5%; }


/* VISIBLE FOCUS
------------------------------------------------*/	
a:focus,
button:focus,
input:focus {
  outline: 2px solid var(--portred);
  outline-offset: 2px;
}


/*  BRAND / LOGO RE-COLORING
------------------------------------------------*/
.brand-black img {filter: brightness(0) saturate(100%)}
.brand-white img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(268deg) brightness(107%) contrast(102%);}
.brand-red img {filter: brightness(0) saturate(100%) invert(14%) sepia(72%) saturate(4181%) hue-rotate(349deg) brightness(87%) contrast(108%);}







/*  BUTTONS
------------------------------------------------*/
a.solid-button {position:relative; display:inline-block; margin:5px; padding:18px 25px 16px 25px; line-height:1; font-weight:800; color:var(--white); border-radius:1px; background:var(--nearblack);}
a.solid-button:hover {background:var(--offblack); transform: scale(1.05);}

a.solid-alt {color:var(--nearblack); background:var(--gray);}
a.solid-alt:hover {color:var(--nearwhite);}

a.pill-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--white); border-radius:35px; background:var(--portred);}
a.pill-button:hover {background:var(--nearblack); transform: scale(1.05);}

a.outline-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--nearwhite); border:2px var(--nearwhite) solid; border-radius:4px; background:transparent;}
a.outline-button:hover {color:var(--nearblack); border:2px var(--nearblack) solid; /*background:#efefef;*/ /*transform: scale(1.1)*/;}

a.outline-pill-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--nearwhite); border:2px var(--nearwhite) solid; border-radius:35px; background:transparent;}
a.outline-pill-button:hover {color:var(--offwhite); border:2px var(--portred) solid; /*background:#efefef;*/}

a.cta-button {padding:18px 45px 18px 25px; font-weight:700;}
a.cta-button::after {content: "\f105"; position: absolute; z-index:2; top: 50%; right:20px; font-size:16px; font-weight:400; rotate:-2deg; color:var(--white); transform: translatey(-50%); transition:.5s ease-in-out; font-family: FontAwesome;}
a.cta-button:hover::after {rotate:-12deg;}

a.solid-icon,
i.solid-icon {position:relative; display:inline-block; margin:5px; padding:18px 16px 16px 16px;  /*font-size:24px;*/ line-height:1; color:var(--white); border-radius:1px; background:var(--nearblack); transition:.5s ease-in-out;}

a.solid-icon:hover,
i.solid-icon:hover {background:var(--offblack); transform: scale(1.05);}







/* HEADER
------------------------------------------------*/	
.head-top {display:flex; /*flex-flow:row wrap; align-items:center;*/ justify-content:flex-end; gap:3%; padding:15px 5%; background:var(--lightgray);}
.head-top a {display:inline-block;}
.head-top-logo img{width: 100%; max-width:89px;}


.site-header {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:15px 5%;background:var(--nearwhite);}	
	

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

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

nav.primary {z-index:500; position:relative; margin:0 0 0 auto; 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.dropdown-icon {position: relative; margin-right:17px;}
nav.primary ul li.dropdown-icon::after {content: "\f013"; position: absolute; z-index:2; top:18px; right:-6px; font-size:12px; font-weight:400; color:var(--portred); transition:.5s ease-in-out; font-family: FontAwesome;}

nav.primary ul li a {
	display:block; margin:0 10px; padding:12px 0;
    font-size:22px; line-height:1; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase; color:var(--nearblack); cursor:pointer; font-family: "bahnschrift", sans-serif; transition:.5s ease-in;	
}	

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

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li a {padding:8px 5px; font-size:19px; line-height:1; font-weight: 400; text-align: left;  color:var(--darkblue);}
nav.primary ul li li a:hover {padding-left:10px; padding-right:0; color:var(--altblue); background: transparent;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute; width: max-content; padding:12px 15px; background:var(--nearwhite); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.075); }
nav.primary ul ul ul {position: absolute; left: 100%; top:-13px;}
nav.primary ul li:hover>ul {display: block !important; z-index: 100; animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}










.hero-section {position:relative; margin-bottom:calc(5% + 50px);}
.hero-section::after {position:absolute; content:''; z-index:0; top:0; left:0; width:100%; height:308px; background:var(--portred) url("/siteart/hero/hero-background-texture.jpg") no-repeat center; background-size: cover;}

.hero-grid {position:relative; z-index: 5; display:flex; flex-flow:row wrap; justify-content:space-between;  gap:35px; margin:0 35px;}

.hero {
	position:relative; overflow:hidden; box-sizing:border-box; width:100%; height:545px; margin-top:35px;
	background:var(--nearblack) url(/siteart/hero/port-city-machinery-heavy-equipment-ravenel-bridge.jpg) no-repeat center; background-size: cover;
}
.hero h1 {margin-bottom:20px; font-size:64px; line-height:1; text-transform: uppercase; color:var(--nearwhite);}
.hero::after {
	position:absolute; z-index:1; content:''; top:0; left:0; width:100%; height:100%; background: linear-gradient(270deg, rgba(25, 20, 20, 0.15) 0%, rgba(25, 20, 20, 0.7) 100%);
}
.hero-overlay {position:absolute; top: 50%; left:3.5%; z-index:5; margin-right: 3.5%; transform: translatey(-50%);}

.hero-block {display:inline-block; box-sizing:border-box;  position:relative; width:calc(50% - 18px); padding:25px 35px 50px 35px; color:var(--nearwhite); background:var(--nearblack);}
.hero-block h2 {margin-bottom:30px; font-size:40px; line-height:1; text-transform: uppercase;}
.hero-block h2 span {font-size:23px; text-transform:none;}
.hero-block p {font-size:18px; line-height:28px;}

.hero-brand-logo img {width:100%; max-width: 90px;}

.tracks-bg {background: var(--nearblack) url('/siteart/hero/tracks-hub.jpg') no-repeat top center; background-blend-mode: overlay; background-size: cover;}
.internals-bg {background:var(--nearblack); background-image: url('/siteart/hero/hydraulic-connections-hoses.jpg'); background-blend-mode: overlay; background-repeat:no-repeat;}

















/*  CATEGORY SELECTOR
------------------------------------------------*/
.category-selector {margin:50px 0 calc(5% + 35px); display:flex; flex-flow:row wrap;}

.cat-selector-controls {position:relative; z-index:1; display:flex; flex-flow:column wrap; justify-content: flex-end; /*width:8%;*/ width:160px; margin-bottom:35px; text-align:center; }

.cat-selector-controls div {display:block; width:45px; height:45px; margin:8px auto; line-height:45px; text-align:center; background:var(--offwhite);}
.cat-selector-controls div.prev::after {content: "\f104"; position: relative; z-index:2; font-size:22px; color:var(--black); font-family: FontAwesome;}
.cat-selector-controls div.next::after {content: "\f105"; position: relative; z-index:2; font-size:22px; color:var(--black); font-family: FontAwesome;}

.category-selector .cycle-slideshow {overflow:hidden; position:relative; width:calc(100% - 160px); margin:0 auto; padding:0; box-sizing: border-box;}

.showroom-category {
	overflow:hidden; position:relative; 
	width:445px; height:510px; margin:0 0 0 10px; font-size:2.15em; line-height:1.15; font-weight:600; border:2px var(--offwhite) solid;
	
}

.showroom-category a {display:block; position:absolute; z-index:10; width:445px; height:510px;}
.showroom-category .cat-overlay {position:absolute; bottom:0; left:0px; z-index:10; padding:35px; padding-left:85px; line-height:1; text-align:left; text-decoration:none; color:var(--black);}
.showroom-category .cat-overlay span {font-size:23px;}
.showroom-category .cat-overlay::before {
	width:45px; height:45px; margin:8px auto; line-height:45px; text-align:center; 
	content: "\f02b"; position:absolute; z-index:2; top:50%; left:25px; font-size:22px; color:var(--black); background:var(--offwhite); font-family: FontAwesome; transform: translatey(-50%); 
}

.showroom-category img {z-index:1; width:100%; /*width:90%; margin:0 auto;*/  transition: all 0.3s linear;}
.showroom-category:hover img {transform:scale(.95);}














/*  SUB HERO
------------------------------------------------*/
.sub-hero {color:var(--nearwhite); background:var(--portred);}

.sub-hero-wrap {width: 95%; margin: 0 auto; padding:50px 0 30px 0; text-align: center;}
.sub-hero-wrap h1 {margin-bottom: 20px; font-size:42px; font-weight:900;  text-align:center; text-transform: uppercase;}
.sub-hero.gallery-hero h1{font-size:28px; text-transform: none;}
.sub-hero-wrap .sub-hero-intro {margin-bottom: 20px; font-size:20px; line-height:1.5; font-weight:300; text-align:center;}


/*  BREADCRUMBS
------------------------------------------------*/
.bread-nav {display: flex;  gap: 10px; width: 95%; margin: 0 auto; padding: 20px 0;}
.bread-nav p,
.bread-nav p a {font-size: 16px; line-height:1; color:var(--offblack);}


/*  INV MAIN
------------------------------------------------*/
.inv-main {margin: 0 auto; padding: calc(35px + 1.5%) 5%;}


/*  SUB MAIN
------------------------------------------------*/
.sub-main {
	box-sizing:content-box; /*max-width:1200px; margin:0 auto; padding:calc(3.5% + 30px) 5%;*/
	
	width: 95%;
    margin: 0 auto;
    padding: 20px 0 80px 0;
	/*padding-right: min(50px, 5%); padding-left: min(50px, 5%);*/
}

.sub-main h1 {font-size:26px;}
.sub-main h2 {margin-bottom: 20px; font-size:33px; text-transform: uppercase; font-weight:700;}
.sub-main h3 {margin-top: 30px; margin-bottom: 20px; font-size:28px; font-weight:700; color:var(--offblack);}
.sub-main h4 {margin-bottom: 20px; font-size:26px; font-weight:700; color:var(--portred);}

.sub-main p {font-size: 20px; line-height:28px; font-weight:300;}
.sub-main p a {font-weight:600;  color:var(--portred) !important;}
.sub-main p a:hover {text-decoration:none;}

.sub-main ul,
.sub-main ol {margin-left:15px; font-size: 20px; line-height:33px; list-style:inside;}








/*  SERVICES GRID
------------------------------------------------*/
.service-grid {display:grid; grid-template-columns: repeat(2, 1fr); gap:35px; margin:calc(3% + 15px) 5% calc(5% + 35px) 5%;}
.service-item {position:relative; padding:35px; padding-left:135px;border:2px var(--portred) solid; border-radius:12px;}

.service-item .service-icon img {
	position: absolute; left:25px; top: 50%; transform: translatey(-50%); 
	max-width: 85px;
	filter: brightness(0) saturate(100%) invert(19%) sepia(27%) saturate(5900%) hue-rotate(340deg) brightness(98%) contrast(124%);
}


/*  ACCORDIAN FUNCTION
------------------------------------------------*/
.accordion-section {display: flex; flex-flow: column;}
.accordion-title {position: relative; cursor: pointer;margin:0 0 10px 0; padding:30px 15px; padding-right:45px; font-size:22px; font-weight:800; text-transform: capitalize; color:var(--nearblack); border-bottom:1px var(--gray) solid;}
.accordion-title::after {
	content: "\2b"; position: absolute; right:10px; width:30px; height:30px; line-height:30px; text-align: center;
	color:var(--white); border-radius:50%; background:var(--nearblack); font-family: "Font Awesome 7 Free";
}

.accordion-body {overflow: hidden; height: 0px; padding: 0 16px; background:var(--white); transition: all 0.3s linear;}
.accordion-body p {font-size:20px; line-height:1.65;}

.accordion-active {margin:0; border:0; background:var(--white);}
.accordion-active::after {content: "\f068"; position: absolute; background:var(--portred);font-family: "Font Awesome 7 Free";}
.accordion-active + .accordion-body {height: unset; padding:35px; padding-top:5px;}




/*  CONTACT DETAIL ICONS
------------------------------------------------*/
.contact-details {/*width:45%;*/ margin:25px 0; font-size:20px; line-height:1.25;}
.contact-details a{position:relative;  display:inline-block; margin:25px 0 25px 55px; font-weight:700; word-break: break-all;}
.contact-details a:hover {color:var(--nearblack);}

.contact-details a[href^="tel:"] {position:relative;}
.contact-details a[href^="tel:"]::before {
	content: "\f095"; position: absolute; z-index:2; top:-16px; left:-65px; width:55px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--white); border-radius:55px; background:var(--nearblack); font-family: FontAwesome;
}

.contact-details a[href^="mailto:"] {position:relative; }
.contact-details a[href^="mailto:"]::before {
	content: "\f0e0"; position: absolute; z-index:2;  top:-16px; left:-65px; width:55px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--white); border-radius:55px; background:var(--nearblack); font-family: FontAwesome;
}

.contact-details a[href^="fax:"] {position:relative;}
.contact-details a[href^="fax:"]::before {
	content: "\f1ac"; position: absolute; z-index:2; top:-16px; left:-65px; width:55px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--white); border-radius:55px; background:var(--nearblack); font-family: FontAwesome;
}

.contact-details a[target="_blank"] {}
.contact-details a[target="_blank"]::before {
	content: "\f3c5"; position: absolute; z-index:2;  top:-16px; left:-65px; width:55px; height:55px; transition:1.2s all;  	
	font-size:30px; line-height:55px;  text-align: center; color:var(--white); border-radius:55px; background:var(--nearblack); font-family: FontAwesome;
}

.contact-details a:hover::before {background:var(--portred);}














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


/*  SERVICES
------------------------------------------------*/
.services-section {padding-top:calc(5% + 50px); padding-bottom:calc(1% + 15px); background:var(--lightgray);}
  
/*  SERVICES HIGHLIGHT
------------------------------------------------*/
.services-highlights {
	display:flex;
	flex-flow:row wrap; 
	
	gap:1.5%; 
	width:calc(100% - 70px); 
	margin:35px; 
	
}
.service-position{
	justify-content: space-between; 
	margin-top: 50px;
}
.category-grid{
	

    padding-left: 300px;
    padding-right: 300px;

	
}
.category-item{
	margin-bottom: 1.5%;
	width:31.875% !important;
	height: 370px !important;
	background: linear-gradient(rgb(249, 249, 249) 60%, rgb(255, 255, 255) 60%)!important;
	
	border:2px var(--offwhite) solid;
	
	
}
.category-item img{
	top: 26% !important;
    left: 50% !important;
	height: 50% !important
}
.category-item::after{
	background: transparent !important;
} 
.category-item .cat-overlay{
	position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    line-height: 1.5;
    text-align: left;
    color: var(--black);
    padding: 35px 35px 40px 85px;
    text-decoration: none;
}
.category-item .cat-overlay::before{
	width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    content: "";
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 25px;
    font-size: 22px;
    color: var(--black);
    font-family: FontAwesome;
    transform: translateY(-50%);
    margin: 8px auto;
    background: var(--offwhite);

}


.services-highlights-item {
	position:relative; overflow:hidden;
	display:flex; flex-flow:column wrap;align-items:flex-start; justify-content: flex-end; box-sizing: border-box;
	width:23.875%; height:575px; padding:50px 20px; color:var(--white); background:var(--nearblack); font-family: bahnschrift-condensed, sans-serif;
}

.services-highlights-item::after {
	position:absolute; z-index:1; content:''; top:0; left:0; width:100%; height:100%; background: linear-gradient(223deg, rgba(25, 20, 20, 0.35) 0%, rgba(25, 20, 20, 0.7) 100%);
}
.services-highlights-item h4 {z-index:2; font-size:48px; line-height:1.175; font-weight:700; text-transform: uppercase; font-family: bahnschrift-condensed, sans-serif;}
.services-highlights-item a {z-index:2; margin-top:35px; font-size:21px; font-weight:400;}
.services-highlights-item img {position:absolute; z-index:0; top: 50%; left: 50%; transform: translate(-50%, -50%); width:auto; height: 101%; margin: 0; transition: all 0.3s linear;}
.services-highlights-item:hover img {transform:translate(-50%, -50%) scale(1.1)}


/*  QUICK CONTACT BAR
------------------------------------------------*/
.quick-contact-bar {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:35px; padding:10px 35px; text-align: center; color:var(--nearwhite); background:var(--portred);}
.quick-contact-bar .quick-inventory {font-size:21px;}
.quick-contact-bar .quick-contact {font-size:23px;}


/*  CONTACT SECTION
------------------------------------------------*/
.contact-section {
	display:flex; flex-flow:row wrap; justify-content:flex-end; padding:310px 8.5% 185px;
	background:var(--offwhite) url("/siteart/united-states-map.png") no-repeat; background-position: -5% 0;
}

.contact-section .contact-heading {margin-right:65px; font-size:66px; line-height:1.2; text-align:right; text-transform:uppercase; font-family: bahnschrift-semicondensed, sans-serif;}
.contact-section .contact-methods::before {position:absolute; content:''; z-index:1; top:-2.5%; left:-30px; width:5px; height:105%; background:var(--portred);}
.contact-section .contact-methods {position:relative; margin-left:20px; font-size:20px;}


/*  FOOTER
------------------------------------------------*/
.site-footer {overflow:hidden; position: relative; color:var(--white); background:#111; }
.site-footer::after {
	content:'PORT CITY MACHINERY'; position: absolute; z-index:0; bottom:10px; left:0; white-space: nowrap;
	font-size:220px; line-height:1; font-weight:700; word-break: keep-all; color:var(--nearblack); font-family: "bahnschrift-semicondensed", sans-serif;
}

/* Should this have been .sock? */
.foot-wrap {display:flex; flex-flow:row wrap; gap:1%; position: relative; z-index:1; max-width:1440px; margin:0 auto; padding:50px 3.5%;}

.foot-logo {margin-bottom:20px}
.foot-logo img{width: 100%; max-width:153px;}

.foot-social {display:flex; gap:8px;}
.foot-social a {display:inline-block; width:42px; height:42px; font-size:20px; line-height:42px; text-align: center; color:var(--nearwhite); background:var(--offblack);}

.foot-motto {font-size:32px; line-height:1.1; text-align:right; font-family: "bahnschrift-semicondensed", sans-serif;}

.foot-copyright {width:100%; margin-top:180px; font-weight:300;}





/************************************************ Responsive Styles **/
@media screen and (max-width: 1600px) {
	.category-grid{
		padding-left: 0 !important;
		padding-right: 0!important;
	}
}
@media screen and (max-width: 1250px) {
	nav.primary ul li a {margin:0 8px; font-size:20px;}	
	
	.services-highlights-item h4 {font-size:40px;}
	
	.contact-section {flex-flow:column wrap; align-items: flex-end; padding:285px 5% 50px;}
	.contact-section .contact-heading {margin-right:0; margin-bottom:50px;}
	.contact-section .contact-methods::before {position:absolute; content:''; z-index:1; top:-30px; left:-2.5%; width:105%; height:5px;}
	.contact-section .contact-methods {position:relative; margin-top:20px; margin-left:0; text-align:right;}
	
}

@media screen and (max-width: 1150px) {
	nav.primary{display:none;}
	#menu-button{display:block; position: relative; z-index:400; margin:0 0 0 auto;}
	#menu-button a{display:inline-block; font-size:28px; line-height:1; color:var(--nearblack); text-decoration: none; padding:0; 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-gear {position:absolute; right:8px; margin:18px 0 0 0; color:var(--portred);}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		right: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		padding-bottom:40px;
		background: rgb(255,255,255);
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);		
	}
	
	/* 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:var(--nearblack) !important;
	}
	
	nav.mobile .social-media a {color:var(--nearblack); text-decoration:none; cursor:pointer;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:var(--portred);}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: var(--nearblack);
		padding: 23px 0;
		position: relative;
		font-size: 18px;
	}			
		
	/* 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: var(--nearwhite); text-decoration: none; vertical-align: top; cursor:pointer; background: var(--nearblack); 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;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color:var(--nearblack);
		position: relative;
		display: block;
		font-size:16px;
		font-weight:700;
		text-align:left;
		text-decoration: none;
		text-transform: uppercase;
		padding: 15px 35px 15px 20px;
		cursor:pointer;
		transition:.5s ease;	
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px var(--portred) solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li a {padding: 15px 10px 15px 15px; font-size:16px; font-weight:500;background: #cdcdcd; text-transform: none;}
	nav.mobile ul li li a:hover {background:rgba(55,55,55,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li a {font-weight:400; background: #dfdfdf;}
	nav.mobile ul li li li a:hover {background:rgba(65,65,65,0.5);}	
}

@media screen and (max-width: 1024px) {	
	.head-top {display:flex; /*flex-flow:row wrap; align-items:center;*/ justify-content:flex-end; gap:3%; padding:15px 5%; background:var(--lightgray);}
	.head-top a {display:inline-block;}
	.head-top-logo img{width: 100%; max-width:89px;}
	
	a.hidemobile {display:none;}
	a.mainmobile{margin:0 auto 0 0;}
	
	.hero-block {width:100%;}
	.tracks-bg {background: var(--nearblack) url('/siteart/hero/tracks-hub-mobile.jpg') no-repeat center; background-size: cover;}
	.internals-bg {background:var(--nearblack) url('/siteart/hero/hydraulic-connections-hoses-mobile.jpg') no-repeat center; background-size: cover;}
		
	.services-highlights {display:flex; flex-flow:row wrap; justify-content: space-between; gap:30px;}
	.services-highlights-item {width:calc(50% - 15px); padding:35px 20px;}
	.services-highlights-item a {margin-top:25px;}
	
	.quick-contact-bar .quick-inventory {display:none;}
	.quick-contact-bar .quick-contact {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; width:100%; }
	.quick-contact-bar .quick-contact a[href^="tel:"] {margin:0 auto 0 0;}
	
	.contact-section {background-position:-250px -50px;}
		
	.service-grid {grid-template-columns: repeat(1, 1fr);}

	.category-grid{
		gap: 19px;

	}
}
@media screen and (max-width: 939px) {
	.category-grid{
		justify-content: center;
		
	}
	.category-item{
		width: 40.875%!important; 
	}
}


@media screen and (max-width: 768px) {
	.col-tainer {flex-flow: column wrap;}
	.col-1-2,
	.col-1-3,
	.col-2-3 {width:auto;}
	
	.hero-section::after {position:absolute; content:''; z-index:0; top:0; left:0; width:100%; height:308px; background:var(--portred) url("/siteart/hero/hero-background-texture-mobile.jpg") no-repeat center; background-size: cover;}

	.hero {height:450px; background:var(--nearblack) url(/siteart/hero/port-city-machinery-heavy-equipment-ravenel-bridge-mobile.jpg) no-repeat center; background-size: cover;}

	.category-selector {flex-flow: column-reverse wrap;}
	.cat-selector-controls {flex-flow: row wrap; margin:35px;}
	
	
	.category-selector .cycle-slideshow {width:95%; margin: 0 0 0 auto;}
		
	.services-highlights {flex-flow: column wrap; gap: 30px;}
	.services-highlights-item {width:100%; height:285px;}
	.services-highlights-item h4 {font-size:33px;}
	.services-highlights-item img {width:110%; height:auto; object-fit: cover; object-position:center;}
	
	.contact-section {background-position:top right;}
	
	.site-footer::after {font-size:150px;}
	.foot-motto {margin-top:25px; text-align:left;}
	.category-grid{
		flex-wrap: wrap;
		flex-direction: row;
	}
}

@media screen and (max-width: 600px) {
	.showroom-category {width:345px; height:400px; font-size:1.5em;}
	.showroom-category a {width:345px; height:400px;}
	.showroom-category .cat-overlay {position:absolute; bottom:0; left:0px; padding:25px; padding-left:55px;}
	.showroom-category .cat-overlay::before {width:35px; height:35px; line-height:35px; left:10px; font-size:18px; transform: translatey(-50%);}
	.showroom-category img {width:350px; margin:0 -20px;}
	.attachments img {width:70px; margin:0 -20px;}
	.attachments a {width:200px; height:200px;}
	
	
	
	
	.site-footer::after {font-size:100px;}
}

@media screen and (max-width: 500px) {
	.hero h1 {font-size:48px;}
	
	.quick-contact-bar .quick-contact a[href^="tel:"] {margin:0;}
	.quick-contact-bar .quick-contact a[href^="tel:"] strong {display:none;}
	.contact-section .contact-heading {font-size:50px;}
	
	
	.service-item {position:relative; padding:35px; padding-left:35px; padding-top:135px;}

	.service-item .service-icon img {
		position: absolute; top:25px; left: 50%; transform: translatex(-50%); max-width: 85px;
	}

}
@media screen and (max-width: 450px){
	.services-highlights-item {width:100%; height:355px;}
	.services-highlights-item img {width:auto; height:110%;}

	.category-item{
		width:100% !important;
	}

}

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

}