/***** BEGIN RESET *****/

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; cursor: pointer !important;}
button:hover {cursor: pointer !important;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/

header {background: #333;}
.header-wrap {width: 88%; margin: 0 auto; padding: 12px 0; display: flex; justify-content: flex-end; align-items: center;}
.header-links {display: flex; gap: 15px; align-items: center;}
.header-socials {display: flex; gap: 10px;}
.header-socials i {color: #fff; font-size: 14px; line-height: 14px; width: 35px; height: 25px; border: 2px #fff solid; display: flex; justify-content: center; align-items: center; border-radius: 8px;}
.header-phone a {color: #fff; font-size: 14px; line-height: 14px; font-family: 'barlow', sans-serif; letter-spacing: 5px; padding: 6px 12px; border-radius: 8px;}
.header-socials a:hover i {background: #fff; color: #333; transition: .5s;}
.header-phone a:hover {color: #fcb03f; background: #1e1e1e; transition: .5s;}

.header-nav {background: #F1F1F1; border-bottom: 5px #fcb03f solid; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}
.nav-wrapper {display: flex; justify-content: space-between; width: 90%; margin: 0 auto; padding: 20px 0; align-items: center;}
.nav-wrapper img {width: 220px;}

#mobile-nav {display: none;}
.mobile-nav-wrap img {width: 120px;}
.mobile-nav-wrap {display: flex; justify-content: space-between; width: 95%; margin: 0 auto; align-items: center; padding: 5px 0;}
.mobile-nav-wrap > div a i {color: #ff9901; font-size: 16px; line-height: 16px;}
.mobile-nav-wrap > div a:hover i {color: #920f08;}
.mobile-nav-wrap > div nav a i {color: #fff;}
.mobile-nav-wrap > div nav a:hover i {color: #fff;}
.mobile-nav-wrap .sub-nav {background: #fff;}
.mobile-nav-wrap .sub-nav p {color: #333; font-family: 'barlow', sans-serif; font-size: 21px; font-weight: bold; padding: 10px 10px 10px 15px;}
.mobile-nav-wrap .sub-nav a i {color: #333 !important;}
nav.mobile .sub-nav li, nav.mobile .sub-nav-pad li {border-bottom: none !important;}

/*-------- FOOTER STYLES ----------------*/

footer {background: #F1F1F1; border-top: 5px #fcb03f solid; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}
.footer-wrap {display: flex; justify-content: space-between; width: 90%; margin: 0 auto; padding: 50px 0; gap: 120px;}
.footer-wrap > div {width: 100%;}
.footer-wrap > div:nth-child(2) {text-align: center;}
.footer-wrap > div:last-child {text-align: right;}
.footer-wrap > div:first-child p, .footer-wrap > div:last-child > div:first-child p {font-family: 'barlow', sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; color: #333; margin-bottom: 5px;}
.footer-wrap > div:first-child p span, .footer-wrap > div:first-child p span a, .footer-wrap > div:last-child p span {color: #383838; font-size: 27px; font-family: 'barlow', sans-serif; font-weight: bold;}
.footer-wrap > div:first-child > div:nth-child(2) {margin: 30px 0 30px 0;}
.footer-wrap > div:first-child > div:nth-child(2) a, .footer-wrap > div:first-child > div:last-child a, .footer-wrap > div:first-child > div:nth-child(2) p span, .footer-wrap > div:first-child > div:last-child p span {font-size: 23px;}
.footer-wrap > div:nth-child(2) img {width: 200px;}
.footer-wrap > div:nth-child(2) hr {border: 1px #fcb03f solid;}
.footer-socials {display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; margin-top: 20px;}
.footer-socials i {color: #383838; font-size: 20px; line-height: 20px; width: 55px; height: 45px; border: 2px #383838 solid; display: flex; justify-content: center; align-items: center; border-radius: 8px;}
.footer-wrap > div:nth-child(2) p {font-family: 'barlow', sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; color: #383838;}
.footer-wrap > div:nth-child(2) p span {font-weight: bold; color: #183153;}
.footer-wrap > div:first-child > div:nth-child(2) a:hover, .footer-wrap > div:first-child > div:last-child a:hover {color: #ff9901;}
.footer-socials a:hover i {color: #ff9901;}
.footer-wrap > div:last-child > div:first-child a {color: #383838; font-size: 18px; font-weight: bold; font-family: 'barlow', sans-serif;}
.footer-wrap > div:last-child > div:first-child p  {margin-top: 5px;}
.footer-wrap > div:last-child > div:first-child i {color: #183153;}
.footer-wrap > div:last-child > div:last-child {margin-top: 30px;}
.footer-wrap > div:last-child > div:last-child li a {font-size: 17px; font-family: 'barlow', sans-serif; line-height: 28px; color: #383838;}
.footer-wrap > div:last-child > div:last-child li a:hover {color: #ff9901;}
.footer-wrap > div:last-child > div:last-child ul {margin-top: 10px;}

.footer-footer {background: #333;}
.footer-footer-wrap {width: 90%; margin: 0 auto; padding: 10px 0; display: flex; justify-content: center; align-items: center;}
.footer-footer-wrap > img:first-child, .footer-footer-wrap > img:last-child {width: 75px;}
.footer-footer-wrap > img:nth-child(2) {width: 50px;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1560px) {
	.nav-wrapper img {width: 165px;}
}

@media only screen and (max-width: 1270px) {
	.nav-wrapper img {width: 132px;}
	.nav-wrapper {width: 98%;}
}

@media only screen and (max-width: 1100px) {
	.header-wrap {width: 90%;}
}

@media only screen and (max-width: 1020px) {
	header, #desktop-nav {display: none;}
	#mobile-nav {display: contents;}
	.footer-wrap {flex-wrap: wrap;}
	.footer-wrap > div:first-child, .footer-wrap > div:last-child {text-align: center;}
	.footer-wrap {gap: 50px;}
}

@media only screen and (max-width: 350px) {
	.footer-wrap > div:first-child > div:nth-child(2) a, .footer-wrap > div:first-child > div:last-child a, .footer-wrap > div:first-child > div:nth-child(2) p span, .footer-wrap > div:first-child > div:last-child p span {font-size: 20px;}
}