@charset "UTF-8";

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

:root {
	--white:#fff;	
	--nearwhite: #fbfbfb;
	--offwhite:#e8e8e8;	
		
	--rosered:#ce2026;
	--drkred:#ad1b20;
	
	--ltgray:#e8e8e8;
	--gray:#797979;
	
	--offblack: #2f2e2e;
	--nearblack: #1c1c1c;	
	--black: #151515;
}

/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
html {scroll-behavior: smooth;}
body {position:relative; font-size:100%; font-family:"elza", sans-serif !important; background:#fff;}

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

.clear {clear: both;}

/* HEADERS */
/*Remove or simplify font-weight and font-height */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal; font-family: "elza-narrow", sans-serif;}
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{transition:.5s ease-in;}
a:link, a:visited {color:inherit; text-decoration:underline;}
a:hover, a:active {color:inherit; text-decoration:none;}

a[href^="tel:"] {color:inherit;  text-decoration: none;}

img {display:block;}

em {font-style:italic;}
b,strong {font-weight: 700;}

.red-text {color:var(--rosered);}



/*

Headings

font-family: "elza-narrow", sans-serif;


Body

font-family: "elza", sans-serif;
font-family: "elza-text", sans-serif;

*/




/*  SECTION WIDTH
------------------------------------------------*/
.section-width {max-width:1100px; margin:0 auto;}

/*  COL-TAINERS
------------------------------------------------*/
.col-tainer {position:relative; display:flex; flex-flow:row wrap; gap:2%;}

.col-1-1 {width:100%; margin:0;}
.col-1-2 {width:49%; margin:0 auto;}
.col-1-3 {width:32.3%; margin:0;}
.col-2-3 {width:65.6%; margin:0 auto;}



/*  BUTTONS
------------------------------------------------*/
a.solid-button {position:relative; display:inline-block; box-sizing:border-box; margin:5px; padding:16px 35px; line-height:1; font-weight:800; text-decoration:none; text-transform:uppercase; color:var(--white); border-radius:5px; background:var(--rosered);}
a.solid-button:hover {background:var(--offblack);}

a.outline-button {position:relative; display:inline-block; box-sizing:border-box; margin:5px; padding:16px 25px 14px 25px; line-height:1; font-weight:800; text-decoration:none; text-transform:uppercase; color:var(--rosered); border:2px var(--rosered) solid; border-radius:4px; background:transparent;}
a.outline-button:hover {color:var(--nearblack); border:2px var(--nearblack) solid;}




/* ----------------------------------------------
 * Generated by Animista on 2025-12-2 14:42:55 / Licensed under FreeBSD License. / See http://animista.net/license for more info.  w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**  fade-in-top  */
@keyframes fade-in-top {
  0% {transform: translateY(-15px); opacity: 0; z-index:0;}
  100% {transform: translateY(0); opacity:1;}
}





/* POPUP / MODAL
------------------------------------------------*/	
#popupContainer {display:none; box-sizing:border-box; position:fixed; z-index:12000; transform: translateY(-50%); top:50% !important; left:0; right:0; width:55%; height:auto; margin:auto; padding:30px; font-size:19px; line-height: 135%; font-weight: 300; color:var(--nearblack); border-radius:20px; background:var(--white); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.33);}
#popupContainer img {width:100%;}
#popupClose {position:absolute; top:16px; right:16px; padding:8px; font-size:20px; line-height:22px; color:var(--white); border-radius: 50%; background:rgba(0,0,0,.33); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.23); cursor:pointer;}
#popupOverlay {position:fixed; z-index:11000; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}

@media screen and (max-width: 1375px) {
	#popupContainer {width:75%;}
}

@media screen and (max-width: 875px) {
	#popupContainer {width:92.5%;}
}




/* HEADER
------------------------------------------------*/	
.global-header {display:flex; flex-flow:row; align-items:center; gap:50px;}	
	

/* LOGO
------------------------------------------------*/	
.head-logo {margin:0 3%;}	
.head-logo img {width:100%; max-width:371px;}
.head-logo a {display:inline-block; text-decoration:none;}	
.head-logo span {display:block; margin:-11px 3px 0 auto; font-size:15px; font-weight:700; text-align:right; text-transform: uppercase;}


/*  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; align-items:center; justify-content:flex-end; gap:8%; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none;}
nav.primary ul li a {
	display:block; position:relative;  margin:0; padding:15px; font-size:18px; line-height:1; font-weight:500; text-align:center; text-decoration:none; text-transform:uppercase; color:var(--nearblack); cursor:pointer; transition:.5s ease-in;	
}	

nav.primary ul li a:hover {color:#121212;}
nav.primary ul li a[aria-label="Home"] {color:var(--rosered);}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width: auto;}
nav.primary ul li li a {padding:8px 5px; font-size: 18px; line-height:1; text-align:left; text-transform: none; color:var(--gray); border:0; transition: .25s ease-in-out;}
nav.primary ul li li a:hover {padding-left:7px; padding-right:0; color:var(--nearblack); background: transparent;}

nav.primary ul li li a::before {content: "\f105"; position: absolute; z-index:2; opacity:0; transform: translateY(-50%); top:50%; left:-18px; font-size:10px; font-weight:400; color:var(--rosered); font-family: FontAwesome; transition: .25s ease-in-out;}
nav.primary ul li li a:hover::before {opacity: 1; left:-8px;}



/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute; min-width:200px; padding:12px 15px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background:var(--nearwhite); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); }
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover>ul {display: block; z-index: 100; animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}



/*  HEADER CONTACT
------------------------------------------------*/
.head-contact {display:flex; flex-flow:column; justify-content:space-between;}
.head-phone {text-align: center; color:var(--white); background:var(--rosered);}
.head-phone a {display:inline-block; padding:20px;font-size:20px; font-weight:700;}
.head-social {display:flex; justify-content: center; padding:0 20px; color:var(--white); background:var(--nearblack);}
.head-social a {display:inline-block; padding:20px; font-size:20px;}






/*  HERO
------------------------------------------------*/
.hero {position:relative; overflow:hidden;  z-index: 1; height:600px; background:var(--nearblack) url("/siteart/hero/rose-equipment-dealership-cimline-highlight.jpg") no-repeat center center; background-size: cover;}

.hero-overlay {position:absolute; z-index: 5; bottom:-4%; right:6%; line-height:.9; font-weight:900; text-align: center; text-transform: uppercase; color:var(--white); font-family: "elza-narrow", sans-serif;}

.hero-motto {font-size:calc(16px + 2.25vw);}
.hero-year {font-size:calc(16px + 18vw);}




.intro-section {display: flex; flex-flow:row; align-items: flex-start; gap:4.5%; margin:0 4.5%;}


.catgeory-showcase {position:relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:25px 15px; z-index:10; width: 45%; margin-top:-9.5%; padding:30px; color:var(--white); border-radius:8px; background:var(--black);}
.catgeory-showcase a.solid-button {grid-column: 1 / -1; box-sizing:border-box; width:100%; margin:0; font-size:22px; line-height:1.2;  text-align:left;}

.category-item {position:relative; overflow:hidden; height:350px; background:var(--gray);}
.category-item::after {content:''; position:absolute; z-index: 1; top:0; left:0; width:100%; height:100%; background:var(--nearblack); background: linear-gradient(203deg, rgba(18, 18, 18, 0.17) 0%, rgba(18, 18, 18, 0.62) 100%); transition:.5s ease-in-out;}
.category-item a {display:block; position:relative; z-index:2;  width:100%; height:100%;}
.category-item span {position:absolute; z-index: 2; bottom:5px; left:5px; padding:15px;}
.category-item strong {font-size:33px; line-height:1; text-transform: uppercase; letter-spacing:1px; font-family: "elza-narrow", sans-serif;}
.category-item em {position:relative; transition: .45s ease-in-out;}
.category-item em::after {content: "\00BB"; position: absolute; z-index:2; transform: translateY(-50%); top:45%; right:-10px; font-size:14px; font-weight:300; color:var(--white);transition: .25s ease-in-out;}

.category-item:hover::after {opacity:0.1;}
.category-item:hover span {text-shadow:0px 0px 6px rgba(0, 0, 0, 0.83);}
.category-item:hover em {margin-left: 4px;}
.category-item:hover em::after {right:-8px;}

/*

<div class="category-item">
	<a href="/inventory/?/listings/for-sale/equipment/all?DSCompanyID=174006&dlr=1&SettingsCRMID=34322684">

	<img src="/siteart/equipment-categories/asphalt-equipment.jpg" alt="Asphalt Equipment inventory"/>
	<span><strong>Asphalt Equipment</strong><br>
	Start Exploring	<i class="fa-solid fa-angles-right"></i></span></a>
</div>

*/




/*  COMPANY INTRO
------------------------------------------------*/
.company-intro {width:45%; margin-top:80px;}
.company-intro h1 {margin-bottom:35px; font-size:50px; line-height:1.15; font-weight:900; text-transform: uppercase;}
.company-intro p {margin-bottom:35px; font-size:21px; line-height: 32px; font-weight:300; }




/*  BRANDS SECTION
------------------------------------------------*/
.brands-section {display: flex; flex-flow:row wrap; align-items: center; margin:8.5% 0 45px 0;}
.brands-section h4 {position:relative; width:100%;  margin-bottom:5px; margin-left:7.5%; font-size:28px; line-height:1; font-weight:900; color:var(--offblack);}
.brands-section h4::after {content:''; position: absolute; bottom:-15px; left:0; width:70px; height:8px; background:var(--rosered);}

.brands-section .cycle-slideshow {width:65%;}
.brands-section .cycle-slideshow a {padding:5px}
.brands-section .cycle-slideshow img {margin:5px; padding:30px; width:100%; max-width:136px; background:var(--nearwhite);}

.brands-sidebar {box-sizing:border-box; width:35%; padding:40px 40px; border-top-left-radius:10px; border-bottom-left-radius:10px; background:var(--offblack);}
.brands-sidebar h3 {margin-bottom:10px; font-size:26px; line-height:1.35; font-weight: 900; font-style:italic; text-transform: uppercase; color:var(--white);}
  
/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {overflow:hidden; width:100%; height:90px; margin:60px 0;}
.scrollinginv{width:100%; height:90px;}



/*  SCROLLING INVENTORY
------------------------------------------------*/
.news-section {margin:80px 5%;}
.news-section h2 {font-size:50px; line-height:1; font-weight:900;  text-transform: uppercase; }


/*  NEWSTAND
------------------------------------------------*/
.newstand {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:35px; width:100%; margin:35px auto;}

.newstand .news-item {position:relative; overflow:hidden; display:none; padding:70px; padding-top:35%; border-radius:15px; color:var(--white); background:var(--nearblack);}
.newstand .news-item:nth-of-type(-n + 2) {display:flex;}
.newstand .news-item::before {content:"NEW STORY"; position: absolute; top:10px; left:10px; z-index: 5; padding:12px 25px; font-size:15px; font-weight:500; letter-spacing:1px; color:var(--white); border-radius:40px;background: var(--rosered);}
.newstand .news-item::after {content:''; position:absolute; z-index: 1; top:0; left:0; width:100%; height:100%; background:var(--nearblack); background: linear-gradient(203deg, rgba(18, 18, 18, 0.75) 0%, rgba(18, 18, 18, 0.9) 100%);}

.newstand .news-item .news-body {position:relative; z-index: 5;}
.newstand .news-item h3.news-title{margin-bottom:30px; font-size:70px; line-height:1; font-weight:900; text-transform:uppercase;}
.newstand .news-item .news-date {display:none;}
.newstand .news-item p {font-size:20px; line-height:30px; font-weight:300;}
.newstand .news-item .news-link {margin-top:20px;}
.newstand .news-item .news-link a {font-size:24px; font-weight:700; text-decoration:none; text-transform:uppercase;}
.newstand .news-item .news-image {position:absolute; z-index:0; top:0; left:0;}
.newstand .news-item .news-image img {/*width:100%;*/ object-fit: cover; object-position:center;}





/*  COMPANY BIO
------------------------------------------------*/
.company-bio::before {content:url("/siteart/rose-icon.png"); position:absolute; z-index: 1; transform:translateY(-50%); top:50%; right:30px; width:475px; height:494px; opacity:.15; filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(4%) hue-rotate(339deg) brightness(106%) contrast(100%);}
.company-bio {position:relative; padding:calc(5% + 80px) 7.5%; color:var(--white); background:var(--rosered); background: linear-gradient(250deg, rgba(206, 32, 38, 1) 0%, rgba(173, 27, 32, 1) 100%);}
.company-bio .section-width {margin-left:0;}
.company-bio h3 {margin-bottom:20px; font-size:28px; line-height:1.2; font-weight:700; font-style:italic; text-transform:uppercase;}
.company-bio h3 span{ font-size:50px;  font-weight:800; font-style:normal;}
.company-bio p {font-size:22px; line-height:32px; font-weight:300;}








/*  SUB HERO
------------------------------------------------*/
.sub-hero {position:relative; width:100%; color:var(--nearwhite); background:var(--nearblack);}
.sub-hero::after {content:''; position: absolute; z-index:1; bottom:0; width:100%; height:100%; background:var(--nearblack); background: linear-gradient(15deg, rgba(28, 28, 28, 0.67) 0%, rgba(28, 28, 28, 0) 100%);}

.sub-hero-wrap {position:absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index:5; width: 95%; margin: 0 auto; padding:50px 0 30px 0; text-align: center;}
.sub-hero-wrap h1 {margin-bottom: 20px; font-size:64px; font-weight:900; text-align:left; 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;}

.sub-hero img {width: 100%; height:550px; object-fit: cover; object-position: center center;}
.sub-hero-mobile {display: none;}





/*  BREADCRUMBS
------------------------------------------------*/	
.global-breadcrumbs {display: flex;  gap: 10px; padding:20px 3%; font-size:14px; line-height: 1.7em; color:var(--rosered); /*border-top:1px var(--offwhite) solid;*/ border-bottom:1px var(--offwhite) solid; background:var(--nearwhite);}
.global-breadcrumbs a {position:relative; margin-right:25px; color:var(--rosered);}
.global-breadcrumbs a::after {content: "\f101"; position: absolute; z-index:2; right:-20px; font-size:10px; font-weight:400; color:var(--black); font-family: FontAwesome;}
.global-breadcrumbs p,
.global-breadcrumbs span {color:var(--offblack);}


/*  INVENTORY INTRO
------------------------------------------------*/
.inv-intro {padding:65px 8% 35px 8%; border-top:1px var(--offwhite) solid;}
.inv-intro h1 {margin-bottom:10px; font-size:33px; line-height:1.2; text-transform:uppercase; font-weight:700; color:var(--offblack);}
.inv-intro p {padding-bottom: 20px; font-size:18px; line-height:28px; font-weight: 300; color:var(--black); font-family: "elza-text", sans-serif;}


/*  MAINS
------------------------------------------------*/	
.inv-main {padding:58px 10% 0;}
.inv-main h1 {margin-bottom:10px; font-size:33px; line-height:1.2; text-transform:uppercase; font-weight:700; color:var(--offblack);}


/*  SUB MAIN
------------------------------------------------*/
.sub-main {padding:65px 8% 35px 8%;}
.sub-main h1 {margin-bottom:10px; font-size:33px; line-height:1.2; text-transform:uppercase; font-weight:700; color:var(--offblack);}
.sub-main h2 {margin-bottom:10px; font-size:30px; font-weight:700; text-transform: capitalize; color:var(--rosered);}
.sub-main h3 {margin-top:15px; margin-bottom:10px; font-size:28px; font-weight:600; text-transform: capitalize; color:var(--offblack);}
.sub-main h4 {margin-top:15px; margin-bottom:20px; font-size:23px; font-weight:600; text-transform: capitalize; color:var(--offblack);}
.sub-main p {padding-bottom: 20px; font-size:18px; line-height:28px; font-weight: 300; color:var(--black); font-family: "elza-text", sans-serif;}
.sub-main ol,
.sub-main ul {margin-left: 30px; padding-bottom:20px;}
.sub-main ol li,
.sub-main ul li {font-size:18px; line-height:28px; font-weight: 300;}


/*  SUB VIDEO
------------------------------------------------*/
.sub-video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.sub-video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/*  NEWS MAIN
------------------------------------------------*/
.news-main h2 {margin-bottom:8px; font-size:38px;}


.news-count {margin-bottom:45px; rfont-size:18px; color:var(--offblack);}


/*  NEWS LANDING PAGE
------------------------------------------------*/
.news-cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:25px 15px;}
.news-cards .news-item {display: none; position:relative; flex-flow:column; justify-content: flex-start; background:var(--white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease;}
.news-cards .news-item:hover {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

.news-cards .news-item:nth-of-type(-n + 10) {display: flex;}

.news-cards.archive-cards {grid-template-columns: repeat(3, minmax(0, 1fr));}
.news-cards.archive-cards .news-item {display: flex !important;}

.news-cards .news-item .news-body {order:2; display:flex; flex-flow:column; justify-content: flex-start; /*gap:25px;*/ height:100%; padding:30px; padding-top:5px;}
.news-cards .news-item h3.news-title{font-size:28px; font-weight:700;}
.news-cards .news-item .news-date {margin:0 0 20px 0;color:var(--gray);}
.news-cards .news-item p {font-size:17px; line-height:28px; font-weight:300;}

.news-cards .news-item .news-link {margin-top: auto;}
.news-cards .news-item .news-link a {position:relative; display:inline-block; box-sizing:border-box; margin:5px; padding:16px 35px; line-height:1; font-weight:800; text-decoration:none; text-transform:uppercase; color:var(--white); border-radius:5px; background:var(--rosered);}
.news-cards .news-item .news-link a:hover {background:var(--offblack);}

.news-cards .news-item .news-image {order:1; position: relative; position: relative; width: 100%; padding-top:40%;}
.news-cards .news-item:nth-of-type(1) .news-image::before {content:"NEW"; position: absolute; top:10px; left:10px; z-index: 5; padding:8px 10px; font-size:13px; font-weight:300; letter-spacing:1px;  color:var(--white);background: var(--rosered);}
.news-cards .news-item:nth-of-type(-n+2) .news-image::before {content:"RECENT STORY"; position: absolute; top:10px; left:10px; z-index: 5; padding:8px 10px; font-size:13px; font-weight:300; letter-spacing:1px; color:var(--white);background: var(--black);}
.news-cards .news-item .news-image img {position: absolute; top: 0; left: 0;width: 100%; height: 100%; object-fit: cover;}



/*  ARTICLE MAIN
------------------------------------------------*/
.article-main {max-width:1024px; margin:0 auto; padding:65px 5% 75px 5%;}
.article-main img {max-width:100%;}

.article-main .col-tainer {position:relative; display:flex; flex-flow:row wrap; gap:50px 2%;}

.article-date {position:relative; margin:0 0 45px 20px; font-style: italic; font-weight:400; color:var(--offblack);}
.article-date:nth-of-type(n+2) {margin:-35px 0 45px 20px;}

.article-hero {position: relative; width:80%; margin:0 auto 65px auto;}
.article-hero img {/*width:100%;*/ max-width:100%; margin:0 auto;/*position: absolute; top: 0; left: 0;width: 100%; height: 100%; object-fit: cover;*/}

.article-hero.article-video {width:80%; margin:0 auto 65px auto;  padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.article-hero.article-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.article-image {width:100%; margin:0 auto;}
.article-main .article-image {margin:35px auto;}
.article-image img{max-width:100%; margin:0 auto;}

.gallery-section {margin:0 auto; padding:105px 5%; background:var(--offwhite);}

.article-gallery {position: relative; width:100%; max-width:1024px; margin:0 auto;}

.article-gallery .prev, .article-gallery .next {position:absolute;  z-index:5; top:50%; transform: translatey(-50%); display:block; width:60px; height:60px; margin:0; line-height:60px; text-align:center; border:4px var(--white) solid; border-radius:50%; background:var(--black); cursor:pointer;}

.article-gallery .prev {left:-35px;}
.article-gallery .next {right:-35px;}
.article-gallery .prev::after {content: "\f104"; position:relative; z-index:2; font-size:33px; color:var(--white); font-family: FontAwesome;}
.article-gallery .next::after {content: "\f105"; position:relative; z-index:2; font-size:33px; color:var(--white); font-family: FontAwesome;}

.article-gallery .cycle-slideshow {position:relative; z-index:1; width:100%; margin:0; padding:0; box-sizing: border-box;}
.article-gallery .cycle-slideshow img {width:100%; max-width: none;}

.article-video {position: relative; margin:15px auto 35px auto; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.article-video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}




/*  TEAM PAGE
------------------------------------------------*/
.team-section {margin-top:25px; text-align: center;}
.team-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 30px; box-sizing: border-box; margin: 0 auto 0 0;}
.team-card {display: flex; flex-direction: column; overflow: hidden; height: 100%; border-radius: 8px; background-color:var(--white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease;}
.team-card:hover {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}
.team-info {padding:14px; text-align: left;}
.team-info h4 {margin: 0 0 6px; font-size: 24px; font-weight:700; text-transform: uppercase; color:var(--rosered);}
.team-info p {margin:3px 0; font-size:15px; line-height: 1.6; color:var(--nearblack);}




/*  SHOWROOM PRODUCTS
------------------------------------------------*/
.product-grid{position:relative; display: flex; flex-flow: row wrap; justify-content: center; gap: 30px 1%; margin:65px 0;}

.product-brand-listing-item {position: relative; overflow:hidden; display:flex; flex-flow:column; justify-content: space-between; width:calc(19.05% - 2px); border:1px var(--offwhite) solid; border-radius:15px; transition: .25s ease-in;}
.product-brand-listing-item:hover {box-shadow: 0 1px 16px 6px rgba(0, 0, 0, 0.05);}

.product-brand-intro {position: relative; width:100%; aspect-ratio: 1 / .65; background-color:var(--offwhite) !important; background-size: cover !important; background-blend-mode: overlay;}
.product-brand-intro a.product-manu-icon i{position:absolute; top:10px; right:10px; width:35px; height:35px; font-size:18px; line-height:35px; text-align:center; color:var(--offwhite); border-radius:50%; background:var(--offblack); transition: .5s ease-in;}
.product-brand-intro a.product-manu-icon:hover i {background:var(--black);}
.product-brand-intro img.product-brand-logo {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:100%; height:auto; transition: .25s ease-in;}
.product-brand-listing-item:hover img.product-brand-logo {transform:translate(-50%, -50%) scale(1.1);}

.product-brand-details {display:flex; flex-flow:row; align-items:center; justify-content:center; /*min-height: 128px;*/ padding:20px; text-align: center;}
/*.product-brand-details .product-link-icon-wrap {margin-right:20px; display:inline-flex; flex-flow:row wrap; align-items:center;}*/
.product-brand-details a.product-link-icon i{width:45px; height:45px; font-size:18px; line-height:45px; text-align:center; color:var(--white); border-radius:50%; background:var(--rosered);transition: .5s ease-in;}
.product-brand-details a.product-link-icon:hover i {background:var(--gray);}
.product-brand-details .product-brand-listing-title {font-size:20px; line-height:1.15; font-weight: 900;}
.product-brand-details .product-brand-listing-title span {font-size:16px; font-weight:300;}


a.product-inv-link {display:block; padding:15px 15px; font-size:18px; font-weight:800; text-align:center; text-decoration:none; text-transform: uppercase; color:var(--white); background:var(--rosered); transition: .5s ease-in;}
a.product-inv-link:hover {background:var(--nearblack);} 


/*  CONTACT ITEMS ICONS
------------------------------------------------*/
.contact-items {/*width:45%;*/ margin:25px 0 25px 15px; font-size:20px; line-height:1.25;}
.contact-items a{position:relative; display:inline-block; margin:25px 0 25px 65px; font-size:20px; font-weight:800; text-decoration:none; word-break: break-all;}
.contact-items a span {font-size:16px; font-weight:500;}
.contact-items a:hover {color:var(--nearblack);}

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

.contact-items a[href^="mailto:"] {position:relative; }
.contact-items a[href^="mailto:"]::before {
	content: "\40"; position: absolute; z-index:2;  top:-3px; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
}

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

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

.contact-items a[aria-label="Facebook"] {}
.contact-items a[aria-label="Facebook"]::before {
	content: "\f39e"; position: absolute; z-index:2;  top:-3px; left:-75px; width:55px; height:55px; border-radius:50%; transition:1.2s all;  	
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
}

.contact-items a:hover::before {color:var(--rosered); background:var(--nearwhite);}



/*  FOOTER
------------------------------------------------*/
.global-footer {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:5%; padding:35px 7.5%; color:var(--white); background:var(--nearblack);}

.foot-logo img {max-width:100%;}
.foot-logo .foot-copyright {display:block; margin:-7px 2px 0 auto; font-size:15px; font-weight:300; text-align:right;}

.foot-contact {display:flex; flex-flow:row wrap; gap:40px; margin:0 0 0 auto;}
.foot-phone {position:relative; padding-left:25px; font-size:24px; line-height:1; font-weight:700;}
.foot-phone i.fa-solid {margin-right:5px; font-size:15px; line-height:1; text-align: center; color:var(--rosered); transition:.5s ease-in-out;}
.foot-phone a:hover i.fa-solid {color:var(--white);}
.foot-social {display:flex; flex-flow:row wrap; gap:40px; font-size:20px; line-height:1; color:var(--white);}





/************************************************ Responsive Styles **/
@media screen and (max-width: 1600px) {
	.catgeory-showcase {position:relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
	.category-item {height:220px;}
	.category-item strong {font-size:26px;}
	
}

@media screen and (max-width: 1500px) {
	.global-header {gap:40px;}
	.head-logo span {margin:-10px 3px 0 auto;font-size:13px;}
	.head-logo img {width:320px;}
	.head-phone a,
	.head-social a {padding: 15px 20px;}
	nav.primary ul {gap:4%;}
	.hero-overlay {right:3.5%;}
	.hero-motto {font-size:calc(16px + 2.5vw);}
	.hero-year {font-size:calc(16px + 21vw);}
	.brands-sidebar h3 {font-size:22px;}
	.company-bio::before {opacity:.07;}
	.product-brand-listing-item {width:calc(24.05% - 2px);}
	.article-gallery {max-width: calc(95% - 30px);}
	.article-gallery .prev, .article-gallery .next {width:40px; height:40px; line-height:40px; border:2px var(--white) solid;}
	.article-gallery .prev {left:-15px;}
	.article-gallery .next {right:-15px;}
	.article-gallery .prev::after, 
	.article-gallery .next::after {font-size:22px;}
}

@media screen and (max-width: 1350px) {
	nav.primary ul {gap:1%;}
}

@media screen and (max-width: 1250px) {
	nav.primary{display:none;}
	#menu-button{display:inline-block; position: relative; z-index:400; margin:0 0 0 auto;}
	#menu-button a{font-size:24px; line-height:1; text-decoration: none; padding:0; color:var(--rosered); cursor:pointer;}

	nav.mobile ul li .fa-solid {position:absolute; right:10px; margin:18px 0 0 0;}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		right: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		padding-bottom:40px;
		
		background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
	}
	
	nav.mobile ul li a.click::after {content: "\2b"; position: absolute; z-index:2; transform: translateY(-50%); top:50%; right:15px; font-size:13px; font-weight:400; color:var(--rosered); font-family: FontAwesome; transition: .25s ease-in-out;}
	

	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: #ccc;
		padding: 23px 0;
		position: relative;
		font-size: 18px;
	}			
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; left: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color:var(--offblack); text-decoration: none; vertical-align: top; cursor:pointer; font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color:var(--rosered);}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {
		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:20px;
		padding-right: 35px;
		font-weight:400; 
		cursor:pointer; 
		transition:.75s ease-in;	
	}
	nav.mobile ul li a:hover {background:rgba(215,215,215,0.5); color:var(--offblack); border-left:4px var(--rosered) solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li a {background:rgba(215,215,215,1);  padding: 15px 10px 15px 15px;}
	nav.mobile ul li li a:hover {background:rgba(160,160,160,0.35);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li a {background: #555;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}	
	
	
	.sub-hero img {height:300px;}
	.product-brand-listing-item {width:calc(32.05% - 2px);}
	.news-cards.archive-cards {grid-template-columns: repeat(2, minmax(0, 1fr));}	
}

@media screen and (max-width: 1024px) {
	.col-tainer {flex-flow: column wrap; gap: 35px;}
	.col-1-2,
	.col-1-3,
	.col-2-3 {width:100%;}

	.hero-motto {font-size:48px;}
	.hero-year {font-size:300px}
	.intro-section {display: flex; flex-flow:column; margin:0; }
	.catgeory-showcase {box-sizing:border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:30px 15px; width:100%; margin-top:30px; padding:30px; border-radius:0;}
	.category-item {height:300px;}
	.company-intro {width:auto; margin:80px 5% 100px 5%;}
	.company-intro h1 {font-size:40px;}	
	.brands-section .cycle-slideshow {width:100%; margin:25px 0;}
	.brands-sidebar {box-sizing:border-box; width:95%; margin:0 0 0 auto; padding:40px 40px; border-top-left-radius:10px; border-bottom-left-radius:10px; background:var(--offblack);}
	.brands-sidebar h3 {font-size:30px;}
	.foot-phone a span {display:none;}
	.foot-phone i.fa-solid {margin-right:5px; font-size:20px;}
}

@media screen and (max-width:960px) {
	.newstand {grid-template-columns: repeat(1, minmax(0, 1fr));}
	.newstand .news-item {padding:40px; padding-top:calc(10% + 65px);}
	.newstand .news-item h3.news-title {font-size:40px;}
}

@media screen and (max-width:850px) {
	.head-logo {margin:0 3%;}	
	.head-logo span {margin: -8px 3px 0 auto;font-size:12px; font-weight:600;}
	.head-logo img {width:300px;}
	.product-brand-listing-item {width:calc(49.05% - 2px);}
	.article-hero {width:100%;}
}

@media screen and (max-width: 768px) {
	.head-contact {display:flex; flex-flow:row; justify-content:space-between;}
	.head-phone a::before {content: "\f095"; position: relative; z-index:2;  right:0; left:0; margin:0 auto; font-size:20px; font-weight:400; color:var(--white); font-family: FontAwesome;}
	.head-phone span {display:none;}
	.global-header {flex-flow:row wrap; gap: 20px; padding-bottom:10px;}		
	.head-logo {order:2; margin:0 0 0 3%;}
	.head-logo img {width:100%; max-width:250px;}
	.head-logo span {display:none;}
	#menu-button {order:3; margin-right: 3%}
	.head-contact { order:1; width: 100%;}
	.head-phone {width:35%;}
	.head-social {display:flex; width:65%; gap:5%; padding:0 10px;}
	.sub-hero h1 {font-size:33px;}
	.sub-hero-desktop {display:none;}
	.sub-hero-mobile {display:block}
	.sub-main h1 {font-size:28px;}
	.inv-main {padding:50px 5% 0;}
	.sub-main {padding:65px 5% 35px 5%;}
	.news-cards {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
	.news-cards.archive-cards {grid-template-columns: repeat(1, minmax(0, 1fr));}
	.team-grid {grid-template-columns: repeat(1, minmax(0, 1fr));}
	.global-footer {flex-flow:column-reverse wrap; gap:30px;}
	.foot-contact {margin:0;}
}

@media screen and (max-width: 680px){
	.hero {height: 500px;}
	.hero-motto {font-size:35px;}
	.hero-year {font-size:200px}
	.sub-hero img {height:400px;}
	.brands-sidebar h3 {font-size:26px;}
	.inv-main {padding:50px 25px 0;}
	.article-video {padding-bottom:75%;}
}

@media screen and (max-width:550px){
	.sub-main h1 {font-size:26px;}
	.product-brand-listing-item {width:100%;}
}

@media screen and (max-width:450px){
	a.solid-button,
	a.outline-button {width: calc(100% - 10px);}
	.head-logo img {max-width:220px;}
	.hero {height: 400px;}
	.hero-motto {font-size: calc(16px + 3.8vw);}
	.hero-year {font-size: calc(16px + 43vw);}
	.catgeory-showcase {grid-template-columns: repeat(1, minmax(0, 1fr));}
	.category-item {height:220px;}
	.article-gallery .prev, .article-gallery .next {display:none;}
}