﻿/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
.site-header {
	position:fixed; 
	top:0; 
	left:0; 
	width:100%;
	z-index:9999;
}
.header-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    align-items: center;
}
.header-top {
    background: #000;
    width: 100%;
    height: 34px;
}

.header-top .header-inner {
    height: 100%;
    justify-content: flex-end;
    gap: 26px;
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

header {
    width: 100%;
    background: #F2f2f2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    height: 90.2px;
	margin-bottom: 40px;
}

.headerinner .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1080px;
    padding: 0 30px;
}

/* Logo */
.logo img {
	max-width:100%;
	display: inline-block;
	vertical-align:middle;
    height: 115.2px;
	margin-top: -20px;
	margin-left: 10px;
}

/* Navigation */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
	margin-top:-2px;
	margin-right: 4px;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 8.3px;
	justify-content: flex-end;
	margin-inline-start: auto;
}
.main-nav ul li {
	display: flex;
	position: relative;
	margin:0;
	padding:0; 
	border-bottom: 3px solid transparent;
}
.main-nav ul li:hover{	
	border-bottom:3px solid #e60000;
}
.main-nav a {
	font-family: "Roboto", Sans-serif;
    text-decoration: none;
    color: #3B3B3B;
    font-weight: 400;
    font-size:18.5px;
    letter-spacing: 0.4px;
	line-height:20px;
    text-transform: uppercase;
	padding-left: 8.54px;
    padding-right: 8.54px;
    padding-top: 13px;
    padding-bottom: 13px;
	vertical-align: baseline;
}

.main-nav a:hover {
    color: #e60000;
	
}

/* Header Icons */
.header-top {
    background: #000;
    width: 100%;
}

.header-icons {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 27px; 
    padding: 0 20px;
}
.header-icons .social {
    font-size: 15px;
    color: #333;
    text-decoration: none;
	text-align:right;
	margin-top: 6px;
}

.header-icons .locations-btn {
	font-family: "Roboto", Sans-serif;
    font-size: 14px;
    font-weight: 400;
	color:#fff;
    text-transform: uppercase;
    background-color: transparent;
    background-image: linear-gradient(180deg, #E20E17 20%, #B00000 100%);
    border-radius: 0px 0px 0px 0px;
    padding: 7.21px 20px 7.21px 20px;
	margin-left: 26px;
	margin-right:40px;
}

.header-icons .icon img {
    height: 24px;
    width: 24px;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: 15px;
	border-radius: 50%;
	margin-top:-2px;
}

.hamburger span {
    width: 26.25px;
    height: 4px;
    background: #333;
}

@media (max-width: 1024px) {
    .main-nav a{
        font-size:17px; /* hide menu on smaller screens */
    }

    .hamburger {
        display: flex;
    }
	header {
    height:68px;
}
	.main-nav a {
	padding-left: 3px;
    padding-right: 3px;

}
	.main-nav {
	margin-top:-25px;
}
}
@media (max-width: 899px) {
	.main-nav ul{
		display: none;
	}
	.main-nav {
		justify-content: right;
	}
	.header-icons .locations-btn {
		display: none;
	}
	.header-icons {
		justify-content: right;
		padding: 0;
		}
	.logo img {
	max-width:100%;
    height: 80px;
	margin-top: 0px;
	margin-left: 10px;
}
	header {
	align-content: center;
    height:90px;
}
	.hamburger {
        display: flex;
		margin-top:20px;
    }
	}


/*---BODY--------------------------------*/

.flex-container {
	display: flex;
	align-items: center;
}

.center {
	text-align: center;
}



/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
footer{	
}
.site-footer {
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
}

/* MAIN FOOTER */
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 0px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 80px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  container-widget-width: 100%;
  container-widget-height: initial;
  container-widget-flex-grow: 0;
  container-widget-align-self: initial;
  flex-wrap-mobile: wrap;
  margin-top: -20px;
  margin-bottom: 0px;
  margin-left: -30px;
  margin-right: 0px;
  padding-top: 0%;
  padding-bottom: 0%;
  padding-left: 0%;
  hyphens: none;
  padding-right: 15%;
}
.footer-inner h4 {
  font-family: "Roboto", Sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 0px;
}

/* BRAND */
.footer-brand img {
  display: inline-block;
  vertical-align:middle;
  margin-top: -22px;
  margin-left:0px;
  width: 265px;
  height: 125px;
  object-fit: contain;
  object-position: left center;
  max-width:110%;
  margin-bottom: 28px;
}

.footer-brand p {
  hyphens: none;
  font-family: "Inter", Sans-serif;
  font-size: 16.8px;
  font-weight: 500;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: 1.4em;
  letter-spacing: -0.7px;
  word-spacing: 0px;
  color: #D4D4D4;
}

/* LINKS */
.footer-links {
  margin-left: -95px;
  margin-top: 3px; 
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 17px;
}

.footer-links a {
  color: #e00000;
  text-decoration: none;
  font-size: 15.5px;
}

.footer-links a:hover {
  color:#15316C;
}

/* CONTACT */
.footer-contact {
  margin-left: -215px;
  margin-top: 3px;
}
.footer-contact p {
  font-size: 15.5px;
  margin-bottom: 17px;
}

.footer-contact span {
  display:block;
  font-weight: 100;
  font-size:15.5px;
  margin-bottom: -5px;
  text-decoration: underline;
}

.footer-contact a {
  color: #e00000;
  text-decoration: none;
}

.footer-contact a:hover {
  color:#15316C;
}

/* BOTTOM BAR */
.footer-bottom {
  background: #111;
  padding: 20px 0;
}

.footer-bottom-inner {
  max-width: 1080px;
  margin: 0 auto;            
  display: flex;
  justify-content: center;      
  align-items: center;          
  gap: 80px;                    
  flex-wrap: wrap;            
}

.copyright,
.footer-legal,
.footer-social {
  margin: 0;
}

.copyright {
  font-size: 13px;
  font-weight: 800;
  color: #ccc;
}

.footer-legal {
  color: #e00000 !important;
}

.footer-legal a {
  color: #e00000 !important;
  font-size: 13px;
  text-decoration: none;
}

.footer-legal span {
  margin: 0 8px;
}

.footer-legal a:hover {
  color: #15316C !important;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  color: #fff;
  font-size: 16px;
}






/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

/* MOBILE */
@media (max-width: 1350px) {
	  .footer-inner {
		  padding-left:15%;}}
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
	padding-left: 0%;
  }

  .footer-brand {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    text-align: center;
  }

  .footer-brand .logo {
    justify-content: center;
  }

  .footer-brand img {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links,
  .footer-contact {
    margin-left: 0;
  }
	.footer-brand img {
  display: inline-block;
  vertical-align:middle;
  margin-top: -60px;
  margin-left:0px;;
  object-fit: contain;
  object-position: center;
  max-width:120%;
  margin-bottom: 28px;
}
	.footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    justify-content: center;
  }

  .footer-links,
  .footer-contact {
    margin-left: 0;
    justify-self: center; 
    text-align: left;    
  }
	.site-footer {
		padding-left:0;
	}
}
	@media (max-width: 767px) {

  .footer-inner {
    grid-template-columns: 1fr; 
    gap: 50px;
	padding-left:40px;
  }

  .footer-links,
  .footer-contact {
    grid-column: 1 / -1; 
    justify-self: stretch; 
    margin-left: 0;
  }
@media (max-width: 767px) {
  .footer-bottom-inner {
	  padding: 0 20px;
    flex-direction: column;   
    gap: 20px;                 
  }
}

}






