@charset "UTF-8";

/* RESET */
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
	
@media screen and (prefers-reduced-motion: reduce) {
  * {animation: none !important; transition: none !important;
	animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
	}
}

:root {
	--white:#fff;	
	--nearwhite: #f7f7f7;
	--offwhite:#f2f1f0;	
	
	
	--etcblue: #113869;
	--ltblue: #1f5a95;
	--drkblue: #011d32;
	
	/*Logo color, but contrast too light for text
	--etcred: #c5000f;*/
	--etcred: #d50411;
	--drkred: #9b0007;
	
	
	--lightgray: #e8e8e8;
	--gray:#dbdbdb;
	
	--offblack: #282828;
	--nearblack: #0f0f0f;	
	--black: #000;
}


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

::selection {color:var(--white); background:var(--etcblue);}
::-moz-selection {color:var(--white); background:var(--etcblue);}

.clear {clear: both;}

/* HEADERS */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}

h1 {display: flex; flex-flow:column; align-items: flex-start; font-size:36px; font-weight:600;}
h1 span {font-size: 21px; font-weight: 600;text-transform: uppercase;}
h2 {display: flex; flex-flow:column; align-items: flex-start; margin-bottom: 15px; font-size:34px; font-weight:700;}
h2 span {font-size: 18px; font-weight: 600; text-transform: uppercase;}
h3 {display: flex; flex-flow:column; align-items: flex-start; margin-bottom: 15px; font-size:30px; font-weight:600;}
h3 span {font-size: 17px; font-weight: 600;text-transform: uppercase;}


h1 {font-size:26px; font-weight:normal;}
h2 {font-size:24px; font-weight:normal;}
h3 {font-size:28px; font-weight:600;}


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;}
b,strong {font-weight: 600;}



/*

font-family: "franklin-gothic", sans-serif;
400, 400i,500,500i,600,600i,700,700i

font-family: "franklin-gothic-compressed", sans-serif;
400,400i,600,600i,

font-family: "franklin-gothic-condensed", sans-serif;
400, 400i,500,500i,600,600i

font-family: "franklin-gothic-extra-compre", sans-serif;
400,600


--

font-family: "roster", serif;
400, 400i,700,700i

*/


/* VISIBLE FOCUS
------------------------------------------------*/	
/*a:focus,
button:focus,
input:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
*/



p.text-indent {padding:0 45px;}













/* BUTTON CONTAINER
------------------------------------------------*/	
.button-container {display: flex; align-items: center; gap:25px; margin-top:30px;}
.button-container button {border: none; color: var(--white); border-radius:8px; background: var(--etcred); font-family: "franklin-gothic", sans-serif; transition: .25s;}
.button-container button.blue-btn {color:var(--white); background:var(--etcblue);}
.button-container button.white-btn {color:var(--nearblack); background:var(--nearwhite);}
.button-container button a {display:inline-block; position:relative; padding:18px 35px 18px 25px; font-size: 16px; line-height: 1; font-weight:600; font-style: italic; font-family:"futura-pt", sans-serif; transition: .25s;}
.button-container button a::after {content: "\f061"; position:absolute; z-index:5; top:57%; right:5px; margin:auto; padding-left:15px; font-size:12px; font-weight:400; color:var(--white); font-family: FontAwesome; rotate:-45deg; transform: translateY(-50%); transition:.5s ease-out;}



/* COLUMN CONTAINER
------------------------------------------------*/
.col-tainer {position:relative; z-index:1; display:flex; flex-flow:row wrap; gap:50px 3%;}
.inner-wrap {margin:calc(15px + 3%) 0 calc(25px + 3.75%) 0;}
.col-1-1 {width:100%; margin:0;}
.col-1-2 {width:48.5%; margin:0 auto;}
.col-1-3 {width:31.7%; margin:0;}
.col-2-3 {width:65.1%; margin:0;}
.col-1-4 {width:23.5%; margin:0;}
.col-3-4 {width:73.5%; margin:0;}

.col-border {border:1px var(--white) solid;}

.col-image {display: inline-flex !important; overflow: hidden; margin:0 0 25px 0; border-radius:30px;}
.col-image img, .col-image iframe{width: 100%; height: 100%; object-fit: cover;}

.col-video {position: relative;}
/*.col-video video{position: sticky; top:115px; align-self: flex-start;}*/

.col-right {margin:0 0 0 auto;}

.col-center {text-align:center; margin:0 auto;}

.col-border-left {position:relative;}
.col-border-left::before {content:''; position:absolute; z-index: 1; top:0; left:-20px; width:6px; height:117px; background:var(--etcred); background: linear-gradient(180deg,rgba(189, 2, 14, 1) 20%, rgba(213, 4, 17, 0.9) 100%); transition:.5s ease;}
.col-border-left:hover::before {height:80px; transition:.5s ease;}








/* HEADER
------------------------------------------------*/	
.head-upper {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:36px; padding:15px 40px; font-size:18px; font-weight:300; color:var(--black); background:var(--nearwhite);}

.head-language {position:relative; /*flex:100%;*/ margin:0 0 0 auto; text-align: right;}
.head-language .lang-select::before {content: "\f0ac"; position: relative; z-index:2; left:0; margin-right:12px; font-size:18px;color:var(--black); font-family: FontAwesome;}
.head-language .lang-select{display:inline-block; position:relative; margin:0 0 0 auto; padding:5px; color:var(--black); cursor:pointer;}
.head-language .lang-select::after {content: "\f107"; position: relative; z-index:2; right:4px; margin-left:16px; font-size:13px;color:var(--black); font-family: FontAwesome;}

.head-language ul.lang-select-dropdwn {display:none; position: absolute; left:0; top:100%; min-width: 184px;}
.head-language:hover > ul.lang-select-dropdwn {display: block; line-height:18px; z-index:1005; list-style:none; animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
.head-language:hover > ul li{width:auto; float: none; position: relative; margin:0;}
.head-language:hover > ul li a {display:block; box-sizing:border-box; width:100%; padding:15px 20px; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background:var(--nearblack); transition:.25s ease-in;}
.head-language:hover > ul li a:hover {background:var(--etcblue);}

.head-upper a.head-link {position:relative;}
.head-upper a.head-link::before {content:""; position: absolute; top:50%; left:-18px; display:inline-flex; width:1px; height:25px; font-weight: 300; background:var(--gray); transform: translateY(-50%);}


/* GLOBAL HEADER
------------------------------------------------*/	
.global-header {position: sticky; top:0; z-index:1000; box-sizing: border-box; display:flex; flex-flow:row /*wrap*/; align-items:center; justify-content:space-between; gap:35px; width:100%; padding:12px 40px; background:var(--white);}	
	
/* LOGO
------------------------------------------------*/	
.logo {max-width:175px;}
.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; gap:35px; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none; }		
nav.primary ul li a {position:relative; display:block; margin:0; padding:12px 0; font-size:18px; line-height:1; font-weight:500; text-align:center; text-decoration:none; color:var(--black); cursor:pointer; transition:.25s ease;}
nav.primary ul li a:hover {color:var(--etcblue);} 
nav.primary ul li a:hover::after{content:""; position: absolute; top:4px; left:0; width: 100%; height:2px; font-weight: 300; background:var(--etcred); animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}


/*  FRENCH MAIN-PRIMARY STYLES
------------------------------------------------*/
nav.primary.fr-primary ul{gap:25px;}
nav.primary.fr-primary ul li a {font-size:16px;}	

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width:100%;}
nav.primary ul li li a {margin:0; padding:12px; font-size:18px; line-height:1.5; font-weight:500; text-align:right; text-transform: none; color:var(--offwhite); border:0; transition: .25s ease-in-out;}
nav.primary ul li li a:hover {color:var(--etcred); background: transparent;}
nav.primary ul li li a:hover::after {content:none;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute; right:0; box-sizing:content-box; min-width:140px; padding:12px; background:var(--drkblue); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover>ul {display: block; z-index: 100; animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}

/*  HEAD PHONE BUTTON
------------------------------------------------*/
button.head-phone {color:var(--nearwhite); border:none; border-radius:30px; background:var(--etcred); transition: .25s; font-family:"franklin-gothic", sans-serif;}
button.head-phone a {display:inline-block; padding:13px 15px; font-size:17px; font-weight:500; white-space: nowrap; color: var(--nearwhite); transition:.25s;}


/*  HERO
------------------------------------------------*/	
.hero {position:relative; z-index:5; overflow:hidden; height:500px; /*background:var(--drkred);*/ background:linear-gradient(224deg,rgba(7, 7, 7, 0.65) 0%, rgba(30, 26, 26, 0.15) 83%), url("/siteart/hero/tow-trucks-on-display-red-black-peterbilt.jpg") no-repeat right center; background-size: cover;}

.hero-overlay {position:absolute; right:80px; top:50%; margin-left:140px; max-width:730px; text-transform:uppercase; text-align:right; color:var(--nearwhite); font-family: "roster", serif; transform: translateY(-50%);}
.hero-overlay span {font-size:55px; font-weight:400; font-style:italic;}
.hero-overlay span > b {font-size:55px; font-weight:700; font-style:italic;}


/* HERO SOCIAL SIDEBAR
------------------------------------------------*/	
.social-sidebar {
	display:flex; flex-flow: column; justify-content: space-around; gap:10px; position:absolute; top:50%; left:60px; width:fit-content; padding:8px; text-align:center; border-radius:20px; background:var(--offwhite); transform: translateY(-50%);
}
.social-sidebar a {display:inline-flex; padding:15px; font-size:24px; color:var(--nearblack); transition:.2s ease-in-out;}
.social-sidebar a:hover {color:var(--etcblue); transform: scale(1.1);}



/* CATEGORY SLIDER
------------------------------------------------*/	
.category-slider{display:grid; grid-template-columns: repeat(4, 1fr); gap:33px; padding:0 80px 65px 170px; background:var(--ltblue);}
.category-slider .category-item {position:relative; z-index:8; overflow:hidden; height:430px; margin-top:-65px; color:var(--white); border-radius:20px; background:var(--nearblack);}
.category-slider .category-item a {position:relative; z-index:5; box-sizing:border-box; display:flex; flex-flow: column; align-items: flex-start; justify-content: flex-end; width:100%; height:100%; padding:40px 30px; font-size:28px; font-weight: 800; text-transform: uppercase; -webkit-transform:translate3d(0,0,0);}

/*.category-slider .category-item a .cat-title {position:absolute; bottom:40px; left:30px; z-index: 6; margin-right:30px;  }*/
.category-slider .category-item a .link-cta {margin-left:3px; font-size:20px; font-weight: 400; }
.category-slider .category-item a .link-cta::after {content: "\f105"; position: relative; z-index:2; top:-2px; right:4px; margin-left:16px; font-size:13px; color:var(--white); font-family: FontAwesome;}

.category-slider .category-item figure {position:absolute; z-index:1; top:0; height:100%;}
.category-slider .category-item figure img {width:auto; height:100%; object-fit: cover; object-position:right center; transition:.75s;}
.category-slider .category-item figure::before {content:""; position:absolute; z-index:2; width:100%; height:100%; top:0; left:0; background: #070707; background: linear-gradient(180deg, rgba(7, 7, 7, 0) 20%, rgba(7, 7, 7, 0.9) 100%);}

.category-slider .category-item:hover figure img {object-position:-50px center;}








.home-showcase {overflow:hidden; display: flex; align-items:center; justify-content: space-between;margin:100px 0;}

.company-intro {width: 48%;}
.company-intro .button-container {margin-left:60px;}

.intro-heading {margin:20px 40px;}
.intro-heading h1 {font-size:45px; line-height:1; text-transform: uppercase; color:var(--drkblue);}
.intro-heading h1 strong {font-weight: 800;}

.intro-body {position:relative; z-index:3; padding:30px 60px; color:var(--white); background:var(--etcblue); background: linear-gradient(90deg, rgba(5, 35, 58, 1) 19%, rgba(6, 52, 87, 1) 100%); }
.intro-body p {font-size: 20px; line-height:1.4;}

.equipment-highlight::before {content:""; position:absolute; z-index:1; top:0; right:0; width:800px; height:480px; background:linear-gradient(180deg, rgba(232, 237, 241, .6) 19%, rgba(232, 237, 241, 1) 100%);}
.equipment-highlight {position:relative;}
.equipment-highlight::after {content:""; position:absolute; z-index:0; top:0; right:0; width:800px; height:480px; background:#96aec0 url("/siteart/wrecker-righting-cement-truck.webp") no-repeat center; background-blend-mode:luminosity;}
.equipment-highlight figure {position:relative; z-index:5; margin:80px -80px 0 0;}
.equipment-highlight figure img {width:100%; max-width: 950px;}
	









/*  HOME LOWER
------------------------------------------------*/	
.home-lower {background:var(--offwhite);}


.gallery-section{padding:40px 0 65px 0;}
.insta-slider .swiper-wrapper {align-items: center;}

.insta-slider .swiper-slide {
    width: 500px; /* adjust as needed */
    height: 260px;

    display: flex; justify-content: center; align-items: center;
}

.insta-slider .swiper-slide a {
    display: flex; justify-content: center; align-items: center;

    width: 100%;
   /* height: 100%;*/
	background:var(--offwhite);
}

.insta-slider .swiper-slide img {
    display: block;

/*    max-width: 100%;
    max-height: 260px;*/

    width: 100%;
    height: 100%;

    object-fit: contain;
}







.gallery-intro {display:flex; flex-flow:row; align-items:flex-start; justify-content: space-between; gap:40px; padding:30px 60px;}
.gallery-intro > .gallery-text {max-width:770px;}
.gallery-intro > .gallery-text h2{display:inline-block;  font-size:40px; text-transform: uppercase;}
.gallery-intro > .gallery-text p {font-size:20px; line-height:1.4; font-style: italic;}

.social-media-tag {font-size:30px;}
.social-media-tag b {font-weight: 500;}


/*  SIMPLE SIGN UP FORM
------------------------------------------------*/	
.simple-signup-section {padding:65px 0; background:var(--etcblue);}

.signup-intro {max-width:450px; text-align:right; font-style: italic; color:var(--white)}
.signup-intro h5 {margin-bottom:8px; font-size:30px; font-weight:700; letter-spacing:2px;  font-family: "roster", serif;}
.signup-intro p {font-size:20px; font-family: "franklin-gothic-condensed", sans-serif;}




.brands-section {max-width:1440px; margin:0 auto; padding:130px 0 60px 0;}
.brands-section > .brands-intro {display:flex; flex-flow:row; align-items:center; gap:40px;  margin-bottom:75px; padding:0 30px;}
.brands-section > .brands-intro img {max-width:100%;}
.brands-section > .brands-intro > .brands-text {flex:1;}
.brands-section > .brands-intro > .brands-text h3 {margin-bottom:12px;}
.brands-section > .brands-intro > .brands-text p {font-size:17px; line-height:1.4;}

.brands-slider {display:grid; grid-template-columns: repeat(5, 1fr); /*flex-flow:row; justify-content: center;*/ gap:33px; margin:0 33px;}
.brands-item {box-sizing:border-box; /*width:280px;*/ padding:25px; padding-bottom:35px; border-radius:20px; background:var(--white);}
.brands-item img {max-width:100%; margin-bottom:30px;}
.brands-item p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size:17px; line-height:1.4;}






.accordion-section {display: flex; flex-flow:row; padding:calc(60px + 3.5%) 0;}

.accordion-aside {overflow:hidden;}
.accordion-aside img{width: 100%; height: 100%; object-fit: cover;}

.accordion-main {align-self:center; width:100%; max-width:940px; margin:0 auto; padding:0 30px; box-sizing:border-box; }

/* Generated on cssgen.org */
details.accordion-item {overflow: hidden; color: var(--nearblack); border-bottom: 1px solid #e2e8f0; border-radius: 0px;}
details.accordion-item:last-child {margin-bottom:0; border-bottom:none;}

details.accordion-item summary {display: flex; align-items: center; justify-content: space-between; list-style: none; padding:25px 0; font-size:28px; line-height:1; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;}
details.accordion-item summary::-webkit-details-marker {display:none;}
details.accordion-item[open] summary {font-size:28px;}

details.accordion-item summary::after {content: '\f078'; margin-left: 8px; font-size:18px; line-height: 1; transition: transform 0.3s ease; font-family:fontawesome;}
details.accordion-item[open] summary::after {transform: rotate(180deg);}

details.accordion-item .accordion-content {padding:20px; font-size:20px; line-height:1.5;}
details.accordion-item .accordion-content p {margin-bottom: 20px;}
details.accordion-item .accordion-content p a {font-weight:500;}
details.accordion-item .accordion-content p a[href^="tel:"] { white-space: nowrap; }

details.accordion-item .accordion-content .hours-grid {display:grid; grid-template-columns: repeat(2, minmax(100px, 250px)); gap:8px 0; margin-bottom: 20px; padding:0 45px;} 
details.accordion-item .accordion-content .hours-grid > .hours-day:nth-of-type(even) {margin:0 -10px; padding:5px 10px; background:var(--nearwhite);}
details.accordion-item .accordion-content .hours-grid > .hours-time:nth-of-type(even) {margin:0 -10px; padding:5px 10px; background:var(--nearwhite);}


/*  MOTTO BANNER
------------------------------------------------*/
.motto-section {position:relative; z-index:1; width:90%; margin:0 auto -75px auto; background:var(--nearblack);}

.motto-overlay {position:absolute; z-index:5; bottom:calc(30px + 3.5%); left:calc(30px + 2%); margin-right: calc(30px + 2%); font-size:60px; line-height:1; font-weight:600; text-transform: uppercase; color:var(--offwhite); text-shadow:
  -1px -1px 1px rgba(255,255,255,0.30),
  1px 1px 1px rgba(0,0,0,0.50);}
.motto-overlay em {font-size:1.39em; line-height:.8;}

.motto-section figure{position:relative; z-index:1; width: 100%; height:400px; overflow:hidden;}
.motto-section figure::after {content:""; position:absolute; z-index: 1; top:0; left:0; width:100%; height:100%; background: linear-gradient(350deg,rgba(7, 7, 7, 0.78) 27%, rgba(30, 26, 26, 0.28) 91%);}
.motto-section figure img {width: 100%; max-width: 100%; height: 100%; object-fit: cover;}








/*

.hero {position:relative; z-index:5; overflow:hidden; height:500px; background:linear-gradient(224deg,rgba(7, 7, 7, 0.65) 0%, rgba(30, 26, 26, 0.15) 83%), url("/siteart/hero/tow-trucks-on-display-red-black-peterbilt.jpg") no-repeat right center; background-size: cover;}

.hero-overlay {position:absolute; right:80px; top:50%; margin-left:140px; max-width:730px; text-transform:uppercase; text-align:right; color:var(--nearwhite); font-family: "roster", serif; transform: translateY(-50%);}
.hero-overlay span {font-size:55px; font-weight:400; font-style:italic;}
.hero-overlay span > b {font-size:55px; font-weight:700; font-style:italic;}
*/



/*  SUBHERO
------------------------------------------------*/
.subhero {overflow:hidden; position:relative; width:100%; height:400px; background:var(--nearblack);}
.subhero::after{content:""; position:absolute; z-index: 2; top:0; left:0; width:100%; height:100%; background: linear-gradient(270deg,rgba(32, 32, 32, 0.3) 27%, rgba(32, 32, 32, 0.8) 96%)}
.subhero img {position:relative; z-index: 1; width:100%; height:100%; object-fit: cover; object-position:center right;}

.subhero-overlay {box-sizing:border-box; position:absolute; z-index: 5; top:50%; width:100%; /*max-width:850px;*/ padding: 80px; color:var(--white); transform: translateY(-50%);}
.subhero h1 {margin-bottom:15px; font-size:38px; line-height:1.2; font-weight:700; font-style:italic; text-transform: uppercase; font-family: "roster", serif;}

.subhero-crumbs {display: flex;  gap: 10px; margin: 0 0 0 5px; padding: 20px 0; font-size: 20px; line-height:1; color:var(--white);}
.subhero-crumbs a {font-weight:600;}



/*  MAIN
------------------------------------------------*/	
.global-main {}
.global-main.inv-main {padding:60px 40px;}
.global-main.sub-main {box-sizing:content-box; max-width:1250px; margin:0 auto; padding:0 30px;}


/*  GALLERY
------------------------------------------------*/	

.gallery-images .image-container {display: flex;gap: 15px;width: 100%;padding: 10px;box-sizing: border-box;}
.gallery-images .image-container img {flex: 1;min-width: 0;height: 250px;object-fit: cover;border-radius: 10px;}

/*  ARTICLE
------------------------------------------------*/
article {}
article h1 {margin-bottom:20px; font-size:36px; line-height:1; font-weight:800; }
article h2 {margin-top:10px; margin-bottom:10px; font-size:30px; /*font-size:33px; line-height:1;*/ font-weight:600;}
article h3 {margin-top: 30px; margin-bottom: 17px;font-size:28px; line-height:1.1; font-weight:600;}
article h4 {margin-top: 30px; margin-bottom: 20px; font-size:26px; font-weight:500;}
article h5 {font-size:24px; font-weight:700;}

article p {margin-bottom:20px; font-size:20px; line-height:28px; font-weight:300;}
article p a {font-weight:600;}

article ul,
article ol {margin-bottom: 20px; margin-left:15px; font-size: 20px; line-height:33px; font-weight:300; list-style:inside;}

article ul.split-list {column-count: 2; column-fill: balance;}

.association-badge {margin: 30px auto;}
.association-badge img{margin:0 auto; text-align:center;}

/*.article-image {width:100%; height:100%;   margin:25px; margin-left:-50px;}*/

p.small-text {font-size: 18px; line-height:26px;}
.center-text {text-align:center;}





.video-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 65.25%;
    height: 0;
    overflow: hidden;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	object-fit: cover;}


.video-desktop {}
.video-mobile {display:none;}


/*  FOOTER
------------------------------------------------*/
.home-footer > .global-footer {padding:calc(80px + 3.5%) 3.5% calc(30px + 3.5%) 3.5%;}
.inv-footer > .global-footer {padding:calc(30px + 3.5%) 3.5% calc(80px + 3.5%) 3.5%;}

.global-footer {
	padding:calc(30px + 3.5%) 3.5%; position:relative; z-index:0;
	color:var(--white); background:linear-gradient(270deg, rgba(1, 34, 57, 0.55) 0%, rgba(1, 34, 57, 0.9) 83%), url("/siteart/footer-roadway-background.webp") no-repeat right top; background-size: cover;
}

.global-footer > .foot-wrapper {max-width:1400px; margin:0 auto;}
.global-footer > .foot-wrapper > .foot-body {display:flex; flex-flow:row wrap; justify-content: space-between; gap:5px 2%; margin-bottom:calc(30px + 6.5%);}

.foot-body > .foot-intro {display:flex; flex-flow:column; gap:30px; max-width:450px;}
.foot-body > .foot-intro p {font-size:1em; line-height: normal;}

.foot-body > .foot-intro > .foot-logo img{max-width:100%; margin:0 auto; filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(295deg) brightness(103%) contrast(105%);}

.foot-body > .foot-intro > .foot-social {display:flex; flex-flow:row wrap; justify-content:center; gap:15px;}
.foot-body > .foot-intro > .foot-social a {width:40px; height:40px; font-size:18px; line-height:43px; text-align:center; border-radius:50%; background:rgba(0,9,16,0.7);}

.foot-body > .foot-intro > .foot-contact {font-size:18px; text-align:center;}
.foot-body > .foot-intro > .foot-contact > span.contact-name {font-size:20px; font-weight:800; text-transform: uppercase;}
.foot-body > .foot-intro > .foot-contact b {font-weight:600;}

.foot-body > .foot-nav {margin-top:33px;}
.foot-body > .foot-nav strong {font-size:20px; font-weight:600;}
.foot-body > .foot-nav ul {margin-top:8px;list-style:none;}
.foot-body > .foot-nav ul a {display:inline-block; padding:6px 0;font-size:16px; line-height: 26px; font-weight:300;}


.foot-language {position:relative; margin:0 0 50px auto; text-align: right;}
.foot-language .lang-select::before {content: "\f0ac"; position: relative; z-index:2; left:0; margin-right:12px; font-size:18px;color:var(--white); font-family: FontAwesome;}
.foot-language .lang-select{display:inline-block; position:relative; margin:0 0 0 auto; padding:15px 20px; color:var(--white); border:1px var(--white) solid; border-radius:2px; cursor:pointer;}
.foot-language .lang-select::after {content: "\f107"; position: relative; z-index:2; right:4px; margin-left:16px; font-size:13px;color:var(--white); font-family: FontAwesome;}
.foot-language .lang-select:hover {border:1px var(--offwhite) solid; background:rgba(1,34,56,0.5);}

.foot-language ul.lang-select-dropdwn {display:none; position: absolute; right:0; bottom:100%; min-width: 184px;}
.foot-language:hover > ul.lang-select-dropdwn {display: block; line-height:18px; z-index:500; list-style:none; animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
.foot-language:hover > ul li{width:auto; float: none; position: relative; margin:0;}
.foot-language:hover > ul li a {display:block; box-sizing:border-box; width:100%; padding:15px 20px; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background:var(--nearblack); transition:.25s ease-in;}
.foot-language:hover > ul li a:hover {background:var(--etcblue);}

.foot-bottom {display:flex; flex-flow:row wrap; justify-content: space-between; gap:50px 25px; font-size:1em;}

.foot-bottom > .foot-copyright {}
.foot-bottom > .foot-address {}






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

@media screen and (max-width: 1600px) {
	.logo {max-width:175px;}
	nav.primary ul {gap:25px;}
	nav.primary ul li a {font-size:17px;}	
	nav.primary.fr-primary ul li a {margin:0; font-size:16px;}	
}

@media screen and (max-width: 1400px) {
	.logo {max-width:150px;}
	nav.primary ul {gap:20px;}
	nav.primary ul li a {font-size:16px;}	
	nav.primary.fr-primary ul li a {font-size:15px;}	
	button.head-phone a {font-size: 15px;}
	
	
	.category-slider{grid-template-columns: repeat(2, 1fr);}	
	.category-slider .category-item:nth-child(n+3) {margin:0;}
	.category-slider .category-item a .cat-title {font-size:26px;}

}

@media screen and (max-width: 1350px) {
	.global-header {gap: 25px; padding: 12px 30px;}
	
	.intro-heading h1 {font-size:40px; line-height:1; color:var(--drkblue);}
	.intro-body {position:relative; z-index:3; padding:30px 40px;}
	.equipment-highlight::before {width:600px; height:450px;}
	.equipment-highlight::after {width:600px; height:450px;}
	.equipment-highlight figure img {max-width: 750px;}
}

@media screen and (max-width: 1250px) {
	nav.primary{display:none;}
	#menu-button{position:relative; z-index:400; display:block; margin:0 0 0 auto;}
	#menu-button a{font-size:22px; line-height:1; font-weight:600; color:var(--offblack); 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-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: 5000;
		overflow:auto;
		padding-bottom:40px;
		background:#fbfbfb;
	}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		position:relative; 
		color:var(--offwhite);
		height:37px; 
		padding:12px 0;
		font-size: 18px;
		background:var(--nearblack);
	}	
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:900;
		display: inline-block;
				
		top: 50%;
		right: 15px;
		font-size:16px;
		word-spacing:13px;
		transform: translateY(-50%);
	}
	
	nav.mobile .social-media a {color:#ccc; text-decoration:none; cursor:pointer;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}
	
	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: 50%; left: 15px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; text-decoration: none; vertical-align: top; cursor:pointer; transform: translateY(-50%);}
	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;
		text-align:left;
		text-decoration: none;
		padding: 18px 35px 18px 20px;
		cursor:pointer;
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.75); color: #fff;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {color: #ccc; background: #444; 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;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}
}

@media screen and (max-width: 1200px) {
	.hero-overlay {max-width:600px; right:40px;}
	.hero-overlay span,
	.hero-overlay span > b {font-size:45px;}
	
	.home-showcase {overflow:visible; flex-flow:column;}
	.company-intro {z-index: 10; width:auto; margin:0 30px;}
	.company-intro .button-container {justify-content:center; margin:30px auto;}
	.intro-heading {margin:20px 30px; text-align: center;}
	.intro-heading h1 {font-size:36px;}
	.intro-body {padding:30px; text-align: center;}
	.equipment-highlight::before {width:100%;}
	.equipment-highlight {width:100%; height:450px; margin-top: -50px;}
	.equipment-highlight::after {width:100%; background-size: cover;}
	.equipment-highlight figure {position:absolute; z-index:5;  right:0; bottom:-80px; left:0; margin: 0 auto;}
	.equipment-highlight figure img {width:auto; max-width:100%; max-height: 400px; margin:0 auto;}
	
	.gallery-intro > .gallery-text h2 {font-size:35px;}
	
	.brands-slider {grid-template-columns: repeat(2, 1fr);}
	.brands-item:first-of-type {grid-column: span 2 / span 2;}
	
	.foot-body > .foot-intro {flex:100%; max-width:none; margin-bottom:calc(30px + 2.5%);}
	.foot-body > .foot-intro {max-width:none;}
	.foot-body > .foot-intro p {line-height:1.35;}
}

@media screen and (max-width: 1100px) {
	.col-tainer {flex-flow: column wrap; gap: 35px;}
	.col-1-2,
	.col-1-3,
	.col-2-3,
	.col-1-4,
	.col-3-4{width:100%;}
	article ul.split-list {column-count:1;}
}

@media screen and (max-width: 1024px) {
	.hero-overlay span,
	.hero-overlay span > b {font-size:38px;}
	
	.signup-intro {text-align: center;}
	
	.brands-section > .brands-intro {flex-flow:column wrap; justify-content: center; text-align: center;}
	
	.accordion-aside img{object-position:70% 50%;}
	
	.motto-overlay {font-size:45px;}
}

@media screen and (max-width: 1000px) {
	.head-upper {font-size:16px;}
	.head-upper a.head-link.head-address {display:none;}
	nav.mobile .menu-header {height:36px;}
	.insta-slider .swiper-slide {width: 400px;}
}

@media screen and (max-width: 768px) {
	.social-sidebar {left:30px;}
	.hero-overlay span,
	.hero-overlay span > b {font-size:30px;}
	
	.equipment-highlight::before,
	.equipment-highlight,
	.equipment-highlight::after {height: 350px;}
	
	.category-slider{padding:65px 40px;}	
	.category-slider .category-item {margin:0;}
	
	.equipment-highlight figure {bottom:-30px; margin: 100px 30px 0 30px;}
	
	.insta-slider .swiper-slide {width: 300px; height: 220px;}
	.gallery-intro {display:flex; flex-flow:column-reverse; align-items:flex-start; justify-content: space-between; padding:30px;}
	
	.video-desktop {display:none;}
	.video-mobile {display:block;}
	
	.foot-body > .foot-nav {flex:100%;}
	.foot-language {position:relative; margin:0 auto 50px auto; text-align: center;}
	.foot-bottom {display:flex; flex-flow:column wrap; align-items:center; justify-content:center; gap:15px;}
	.foot-bottom > .foot-language {order:1; margin:0 auto 30px auto;}
	.foot-bottom > .foot-copyright {order:3; }
	.foot-bottom > .foot-address {order:2;}
}

@media screen and (max-width: 668px) {
	.head-language ul.lang-select-dropdwn {right:0; left:auto;}
	.head-upper a.head-link {display:none;}
	
	.category-slider{grid-template-columns: repeat(1, 1fr);}
	
	.accordion-section {display: flex; flex-flow:column-reverse;}
	.accordion-aside {margin-top: 40px;}
	
	.motto-overlay {font-size: calc(16px + 2.5vw);}
	.motto-section figure {height: 600px;}
	
	.brands-slider {grid-template-columns: repeat(1, 1fr);}
	.brands-item:first-of-type {grid-column:auto;}
	
	.subhero-overlay {padding: 40px;}
	.subhero-overlay h1,
	.subhero-crumbs {justify-content:center; margin:0 auto; text-align: center;}
	
	.home-footer > .global-footer {padding: calc(100px + 3.5%) 3.5% calc(30px + 3.5%) 3.5%;}
	
	.gallery-images .image-container {flex-direction: column;}
    .gallery-images .image-container img {width: 100%; max-height: 150px; }

}


@media screen and (max-width: 500px){
	.head-upper {flex-flow:row; flex-wrap:nowrap; }
	.head-language {margin:0;}
	.quick-search-form{width:100%; margin:0 auto 0 0;}
	.button-container {flex-flow:column; align-items:flex-start;}  
	.subhero {height: 250px;}
	.subhero-overlay h1 {font-size:28px;}
}
	
@media screen and (max-width: 450px){
	.head-upper {gap:15px; padding: 15px 30px;}
	.global-main.inv-main {padding:50px 30px;}
	
	.hero {height: 400px;}
	.hero-overlay {top:35%; right:30px; left: 30px; margin: 0 auto; text-align: center;}
	.social-sidebar {top:auto; right:0; bottom:0; left:0; flex-flow: row wrap;justify-content:center; margin:auto; border-bottom-right-radius:0; border-bottom-left-radius: 0; transform:none;}
	.social-sidebar a {padding:10px; font-size: 20px;}
	
	.equipment-highlight::before,
	.equipment-highlight,
	.equipment-highlight::after {height:280px;}
	.equipment-highlight figure {bottom:-20px;}
	
	.gallery-intro > .gallery-text h2 {font-size:30px;}
}

@media screen and (max-width: 360px){
	.hero-overlay span, .hero-overlay span > b {font-size: 26px; word-break: break-word;}
	.social-sidebar {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);}
	.social-sidebar a {padding:12px; font-size: 20px;}
	
	.category-slider{padding:55px 30px;}
	.category-slider .category-item a .cat-title {bottom: 30px; left: 20px; margin-right: 20px; font-size: 24px;}
	
	.motto-overlay em {font-size:1.15em;}
	.motto-section figure {height:500px;}
	
	.subhero {height: 185px;}
	.subhero::after {display:none;}
	.subhero-overlay h1 {display:none;}
}