﻿@charset "UTF-8";

* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}
	
:root {
	--white:#fff;
	--nearwhite: #f2f2f2;
	
	--offwhite:#f5f8fb;
	
	
	--lightgray: #bababa;
	
	--gray:#727272;
	
	
	
	--ironblue:#008afc;
	
	--darkblue:#1e2226;
	--bluegray:#464b4f;
	
	
	--darkgray: #3a3a3a;
	
	--blackalt: #202020;
	--black: #0c0c0c;
}


/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
body {font-size:100%; font-family: stevie-sans, sans-serif !important; background:var(--nearwhite);}

/* SELECTION */	
::selection {color:var(--white); background:var(--ironblue);}
::-moz-selection {color:var(--white); background:var(--ironblue);}

.clear {clear: both;}

h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}
h1 {font-size:26px; font-weight:normal;}
h2 {font-size:24px; font-weight:normal;}
h3 {font-size:20px; font-weight:normal;}
h4 {font-size:18px; font-weight:normal;}
h5 {font-size:16px; font-weight:normal;}
h6 {font-size:14px; font-weight:normal;}

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;}

img {display:block;}

em {font-style:italic;}
strong {font-weight:600;}

.center {text-align:center;}

.blue-text {color:var(--ironblue);}

hr {border-top:1px var(--lightgray) solid;}


/* VISIBLE FOCUS
------------------------------------------------*/	
/*a:focus,
button:focus,
input:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}*/



a.blue-pill {display:inline-block; position:relative; padding:20px 50px; font-size:20px; line-height:1; font-weight:600; text-align:center; text-decoration:none; color:var(--white); border-radius:40px; background:var(--ironblue); transition:.33s ease-in;}
a.blue-pill:hover {color:var(--white) !important; background:var(--black);}

.outline-pill {margin:3px;  border:3px var(--white) solid; outline:3px var(--ironblue) solid;}
.outline-pill:hover {outline:3px var(--black) solid;}



a.clear-pill {display:inline-block; position:relative; padding:20px 50px; font-size:20px; line-height:1; font-weight:600; text-align:center; text-decoration:none; color:var(--ironblue) !important; border:2px var(--ironblue) solid; border-radius:40px; background:transparent; transition:.33s ease-in;}
a.clear-pill:hover {color:var(--white) !important; background:var(--ironblue); }

.pill-container {
	text-align: center; 
	margin-top: 60px;  
	margin-bottom: 60px;
}
.pill-container {
  display: flex;
  justify-content: center;   
  gap: 15px;                 
  flex-wrap: wrap;          
}

.pill-container a {          
  text-align: center;
}




.home-intro {background: #F7FBFF; background: linear-gradient(180deg, rgba(247, 251, 255, 1) 0%, rgba(230, 243, 254, 1) 100%);}




/* HEADER
------------------------------------------------*/	
.head-contact-bar {padding:10px 4.5%; text-align:right; color:var(--white); background:var(--ironblue);}
.head-contact-bar a {display:inline-block; margin:0 4.5% 0 0; font-size:18px; font-weight:600;}
.head-contact-bar a span {margin:0 0 0 8px;}
.head-contact-bar a:last-of-type {margin: 0;}
.head-contact-bar a .fa-solid,
.head-contact-bar a .fa-brands{width:28px; height:28px; font-size:16px; line-height:28px; text-align:center; border-radius:40px; color:var(--ironblue); background:var(--white);}


.site-header {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:18px 3.5%;}	
	

/* LOGO
------------------------------------------------*/	
.logo {}
.logo img {max-width:100%;}


/*  NAVIGATION
------------------------------------------------*/
#menu-button{display:none;}
nav.mobile {display:none;}

nav.primary {z-index:500; position:relative; margin:0; padding:0;}

nav.primary ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; margin:0; padding:0;}
nav.primary ul li {position:relative; margin:0; padding:0; list-style-type:none; }
nav.primary ul li:after {content:url("/siteart/diamond-divider.png"); position: absolute; z-index: 2; top:12px; right:-5px; width:11px; height:11px;}

nav.primary ul li:last-of-type::after {content:none;}

nav.primary ul li a {
	display:block; margin:0 5px; padding:12px 15px; font-size:19px; line-height:1; font-weight:900; text-align:center; text-decoration:none; text-transform:uppercase; color:var(--darkgray); transition:.5s ease-in;	
}	

nav.primary ul li a:hover {color:var(--ironblue);}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width: auto;}
nav.primary ul li li a:link, nav.primary ul li li a:visited{
padding:15px 0; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background: #181818;
}

nav.primary ul li li a:hover,nav.primary ul li li a:active {line-height:18px; color:#fff; background:#058fce;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute;} 
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover > ul {display: block; line-height:18px; z-index: 500;}
nav.primary ul ul li {float: none; position: relative; margin:0;}





.hero {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;}

.hero-image {
	width:52%; height:100%; min-height:500px;  clip-path: polygon(13% 0%, 100% 0%, 100% 100%, 0% 100%);
	background:url("/siteart/cat-lineup-hero.jpg") no-repeat center right; background-size: cover; }


.hero-intro {box-sizing:border-box; width: 46%; padding:0 3.5%;}
.hero-intro h1 {margin:0 0 30px 0; font-size: calc(16px + 1.85vw); font-weight:900; text-transform: uppercase;}
.hero-intro p {font-size: 23px; line-height:38px;}




/*  INVENTORY CATEGORIES
------------------------------------------------*/
.inventory-categories {display:flex; flex-flow:row wrap; justify-content:flex-start; max-width:1800px; margin:0 auto; padding:150px 3.25% 175px 3.25%;}

.inv-cat-title {display:flex; flex-flow:row wrap; align-items:baseline; justify-content:flex-end; width:100%; margin:0 0 40px 0; font-size:47px; font-weight:600;}
.inv-cat-title a {margin:0 0 0 45px; font-size:23px;}
.inv-cat-title a i {color:var(--ironblue);}



.inv-cat-item::before {content:''; position:absolute; z-index:0; width:100%; height: 100%; background:#151515; background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0.7) 100%); transition:.5s ease-in;}
.inv-cat-item:hover::before {opacity:.5;}
.inv-cat-item {overflow:hidden; position:relative; width:31.33%; max-width:443px; height:auto; margin:1%; border-radius:3px; border-top-left-radius:125px;}

.inv-cat-item a {display:block; position:absolute; z-index:1; width:100%; height: 100%;color:var(--white);}

.inv-cat-overlay {position:absolute; bottom:33px; right:33px; display: block; font-size:33px; font-weight:600; text-transform: uppercase; text-align:right; }
.inv-cat-overlay span {font-size:23px; font-weight:500; text-transform:none;}

.inv-cat-item:nth-last-of-type(-n+3) .inv-cat-overlay {right:auto; left:33px; text-align:left;}

.inv-cat-item:nth-last-of-type(3) {margin:1% 1% 1% auto;}
.inv-cat-item:nth-last-of-type(-n+3) {border-radius:3px; border-top-left-radius:3px; border-bottom-right-radius:125px;}



.inv-cat-icon {position:absolute; z-index:0; top:30px; left:42px; opacity:.7; }
.inv-cat-icon img { aspect-ratio:1.89 /1 !important; width:100%;}

.inv-cat-item:nth-last-of-type(-n+3) .inv-cat-icon {right:42px; left:auto;}

.inv-cat-item img { aspect-ratio:1.08 /1; width:100%;}






/*  MAIN
------------------------------------------------*/	
.main {}
.main-inv {padding:45px 5%;}
.main-sub {padding:5%;}

.main-sub h1 {margin:0 0 8px 0; font-size:38px; font-weight:900; text-transform: uppercase; text-align: center; color:var(--ironblue);}
.main-sub h2 {margin:0 0 15px 0; font-size:26px; text-align: center; font-weight: 600;}
.main-sub h3 {margin:0 0 8px 0;}
.main-sub h4 {margin:0 0 8px 0; font-weight: 600;}
.main-sub .sub-heading {margin:0 5% 15px 5%; font-size:23px; line-height:36px; font-weight:300; text-transform:capitalize; text-align: center;}


.sub-hero {
	overflow:hidden; position:relative; display:flex; flex-flow:row wrap; justify-content:center; 
	width:100%; margin:3.5rem 0 5rem 0; border:1px var(--lightgray) solid; border-radius: 40px; line-height:0;
}
.sub-hero img {width:100%; object-fit:cover;}
.sub-hero iframe {width:calc(100% - 450px); height:390px; object-fit:cover;}

.sub-hero .sub-hero-contact {display:flex; flex-flow:column wrap; justify-content:center; box-sizing:border-box; width:450px; height:auto; padding:35px 85px; font-size:20px; line-height:30px; font-weight: 300; background:var(--white);}
.sub-hero .sub-hero-contact strong {font-size:28px; line-height:30px; font-weight:900;}


.sub-hero .sub-hero-contact a[href^="tel:"] {position:relative;}
.sub-hero .sub-hero-contact a[href^="tel:"]::before {
	content: "\f095"; position: absolute; z-index:2; top:-5px; left:-45px; width:35px; height:35px; transition:1.2s all;  
	font-size:15px; line-height:35px;  text-align: center; color:#fff; border-radius:35px; background:var(--ironblue); font-family: FontAwesome;
}

.sub-hero .sub-hero-contact a[href^="mailto:"] {position:relative; }
.sub-hero .sub-hero-contact a[href^="mailto:"]::before {
	content: "\f0e0"; position: absolute; z-index:2;  top:-5px; left:-45px; width:35px; height:35px; transition:1.2s all;
	font-size:15px; line-height:35px;  text-align: center; color:#fff; border-radius:35px; background:var(--ironblue); font-family: FontAwesome;
}

.sub-hero .sub-hero-contact a[target="_blank"] {position:relative;}
.sub-hero .sub-hero-contact a[target="_blank"]::before {
	content: "\f3c5"; position: absolute; z-index:2; top:9px; left:-45px; width:35px; height:35px; transition:1.2s all;
	font-size:15px; line-height:35px;  text-align: center; color:#fff; border-radius:35px; background:var(--ironblue); font-family: FontAwesome;
}

.sub-hero .sub-hero-contact a:hover::before {background:#555;}



.main-sub article {margin:0 15%}
.main-sub article h1, .main-sub article h2 {text-align:left;}

.sub-body-section {margin:3.5rem 0; padding:3rem 2.5rem;  border:1px #e7e7e7 solid; border-radius:40px; background:var(--white);}
.sub-body-section h3 {margin:0 0 15px 0; font-size: 25px; color:var(--ironblue);}
.sub-body-section img {max-width:100%;}


/*  ARTICLE
------------------------------------------------*/
article {}
article h1 {margin:0 0 38px 0;}
article h2 {font-weight:900; text-transform: uppercase;}
article h3 {font-weight:900; text-transform: uppercase;}
article p {font-size:20px; line-height:30px; font-weight: 300;}

article ul {margin:8px 0 8px 35px; list-style: none;}
article ol {margin:8px 0 8px 35px; list-style: inside decimal;}

article ul li,
article ol li {font-size:20px; line-height:33px; font-weight: 300;}





/*  COMPANY INTRO
------------------------------------------------*/
.company-intro {padding:170px 0 190px 15%; color:var(--white); background:var(--blackalt);}
.company-intro article {width:57%;}
.company-intro h2 {margin:0 0 38px 0; font-size:48px; line-height:1; color:var(--white);}
.company-intro h2 span.sub-heading {font-size:32px; color:var(--lightgray);}


/*  FINANCING INTRO
------------------------------------------------*/
.financing-intro {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:115px 0;}

.financing-hero::before {content:url("/siteart/hero-flair-stripes.png"); position:absolute; z-index:1; left:0; width:100%;}
.financing-hero {overflow:hidden; position:relative; width:46%; border-top-right-radius: 350px; border-bottom-right-radius: 350px;}
.financing-hero img {object-fit:cover; aspect-ratio:1.76 /1; width: 100%;}


.financing-intro article {flex:1; padding:0 7%;}
.financing-intro h3 {margin:0 0 28px 0; font-size:40px; line-height:1; text-transform: none; color:var(--ironblue);}
.financing-intro h3 span.sub-heading {font-size:24px; text-transform: uppercase; color:var(--gray);}



 

/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling{width:100%; height:90px;}


/*  FOOTER
------------------------------------------------*/
.site-footer {display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:space-between; padding:90px 7.5% 30px 7.5%; color:var(--white); background:var(--darkblue);}

.foot-nav {display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start;}

.foot-links {margin:0 65px 0 0;}
.foot-links:last-of-type {margin: 0;}
.foot-links strong {font-size:20px; font-weight: 600; line-height:2; }
.foot-links ul {list-style:none; }
.foot-links ul li{font-size:18px; font-weight: 400; line-height: 32px;}

.foot-company {display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-end;}
.foot-logo {margin:0 45px 0 0;}
.foot-logo a {display:inline-block;}
.foot-logo img {max-width:100%; filter: brightness(0) invert(100%);}

.foot-contact {font-weight:300; }
.foot-contact .fa-brands {width:28px; height:28px; font-size:16px; line-height:28px; text-align:center; border-radius:40px; color:var(--darkblue); background:var(--lightgray);}

.foot-legal::before {content:''; width:90%;  height:1px; margin:30px auto;  background:var(--bluegray);}
.foot-legal {display:flex; flex-flow:row wrap; align-items:center; justify-content: space-between; width:100%; margin:55px 0 0 0;}
.foot-copyright {width:50%; font-size:15px; font-weight:300;}
.foot-privacy {width:50%; font-size:15px; font-weight:400; text-align: right;}


.about-inline-image {
  text-align: center;
  margin: 30px 0;
}

.about-inline-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.about-inline-caption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 6px;
}

/************************************************ Responsive Styles **/

@media screen and (max-width: 1500px) {
	nav.primary ul li a {font-size: 14px;}
}

@media screen and (max-width: 1285px) {
	nav.primary ul li a {font-size:14px;}
	.inv-cat-overlay {font-size:28px;}

	nav.primary{display:none;}
	#menu-button{display: block; font-size:20px; line-height:1; position: relative; z-index:400; cursor:pointer;}
	#menu-button a{color:var(--darkgray); font-weight:900; text-decoration: none;  cursor:pointer;}
	#menu-button a i {color:var(--ironblue);}
	
	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: 500;
		overflow:auto;
		padding-bottom:40px;
		background:#333;
	}
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:9999;
		display: inline-block;
		
		top: 15px;
		left: 15px;
		font-size:16px;
		word-spacing:13px;
		color: #ccc !important;
	}
	
	nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:var(--gray); text-decoration:none;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:var(--ironblue); text-decoration:underline;}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: #ccc;
		padding: 23px 0;
		position: relative;
		font-size: 18px;
		background:#313131;
	}			
	nav.mobile .menu-title {position: absolute; vertical-align: top; top: 16px; right: 47px; text-transform:uppercase; font-size:12px; color: #ccc;}
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; right: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color: #ccc; text-decoration: none; vertical-align: top; cursor:pointer; font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color: #fff;}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {color: #999; font-size:15px; border-bottom: 1px solid #303030;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color: #999;
		position: relative;
		display: block;
		font-size:15px;
		text-align:left;
		text-decoration: none;
		border-left:4px #333 solid;
		padding: 15px 35px 15px 20px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px var(--ironblue) solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {color: #ccc; background: #444; border-left:4px #444 solid; padding: 15px 10px 15px 15px;}
	nav.mobile ul li li a:hover {background:rgba(65,65,65,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li:last-child {border:none;}
	nav.mobile ul li li li a {color: #ccc; background: #555; border-left:4px #555 solid;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}	
	
	
	.site-footer {flex-flow:column; align-items:center; justify-content:space-between;}
	.foot-nav {margin:0 0 70px 0;}
}

@media screen and (max-width: 1024px) {	
	.hero {flex-flow:column-reverse wrap;}
	.hero-image {width:105%; height:345px; margin:0 0 0 -5%;}
	.hero-intro {width:100%; margin:45px 0 0 0; padding:0 5%;}
	.hero-intro h1 {margin:0 0 30px 0; font-size: calc(30px + 2vw);}
	.inventory-categories {justify-content:center;}
	.inv-cat-item {width:48%; max-width:none; height:auto;}
	.inv-cat-overlay {position:absolute; bottom:33px; right:33px; display: block; font-size:calc(22px + 1vw); font-weight:600; text-transform: uppercase; text-align:right ;}
	.inv-cat-overlay span {font-size:23px; font-weight:500; text-transform:none;}
	.inv-cat-item:nth-last-of-type(-n+3) .inv-cat-overlay {right:33px; left:auto; text-align:right;}
	.inv-cat-item:nth-last-of-type(3) {margin:1%;}
	.inv-cat-item:nth-last-of-type(-n+3) {border-radius:3px; border-top-left-radius:125px; border-bottom-right-radius:3px;}
	.inv-cat-item:nth-last-of-type(-n+3) .inv-cat-icon {right:auto; left:42px;}
	.company-intro {padding:170px 10% 190px 10%;}
	.company-intro article {width:100%;}
	.financing-intro {flex-flow:column-reverse wrap; align-items:stretch; padding:115px 0;}
	.financing-hero {width:90%; margin:75px auto 0 0;}

	.main-sub .sub-heading { font-size:19px; line-height:30px;}
	.sub-hero {overflow:hidden; position:relative; width:100%; height:325px; margin:5rem 0 8rem 0;}
	.sub-hero img {width:auto; height:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	.sub-hero iframe {height:325px;}
	.main-sub article {margin:0 10%}
}

@media screen and (max-width: 768px) {
	.head-contact-bar a span {display:none;}
	.inv-cat-title {display:flex; flex-flow:column wrap; align-items:stretch; justify-content:flex-end; text-align:left;}
	.inv-cat-title a {margin:30px 0 0; text-align:right;}

	.main-sub {display: flex; flex-flow:column wrap;}
	.main-sub h1 {order:1;}
	.main-sub .sub-heading {order:3; line-height:28px;}
	
	.sub-hero {order:2;flex-flow:column wrap; height:auto; min-height: 280px; margin:1.5rem 0 3.5rem 0;}
	.sub-hero iframe {width:100%; height:280px;}
	.sub-hero .sub-hero-contact {align-items: flex-start; width:100%; padding:35px 5% 35px 65px;}
	.main-sub article {order:4; margin:0 8%}
	.about-wrapper {
    flex-direction: column;
  }
  .about-image {
    margin-top: 20px;
  }
}

@media screen and (max-width: 600px){
	.inv-cat-item {width:98%;}
	.inv-cat-item .inv-cat-overlay {font-size:8vw;}	
	.main-sub {padding:11% 5% 1% 7%;}
	
	.main-sub article {margin: 0 15%;}
	
	.site-footer {flex-flow:column; align-items:center; justify-content:space-between;}
	.foot-nav {display:flex; flex-flow:column; align-items:center; justify-content:center;}
	.foot-links {margin:0 0 45px 0; text-align:center; }
	.foot-company {display:flex; flex-flow:column wrap; align-items:center; justify-content:center;}
	.foot-logo {margin:0 0 45px 0;}
	.foot-contact {text-align:center;}
	.foot-legal {display:flex; flex-flow:column wrap; line-height: 1.5;}
	.foot-copyright,
	.foot-privacy{width:100%; text-align: center;}
}

@media screen and (max-width: 550px) {
	.main-sub article {margin:0 5%}
	.sub-hero {min-height:250px;}
	.sub-body-section {padding: 2rem 1.25rem;}
}