/***** 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 --------*/
:root{--heading:"Open Sans", sans-serif;
    --body: "Open Sans", sans-serif;
    --primary:#FF993F;
    --darker:#ed7b23;
    --secondary:#5F5F5F;
    --offwhite:#F5EFE2;
    --offwhite2:rgba(235, 225, 205, 0.60);
    --navy:#1D242C;
    --dark:#0B0E11;
    --black:#000;
    --white:#ffffff}
/*---BODY STYLES--------------------------------*/
body{font-family:var(--body)!important}
p{font-family:var(--body);font-size:16px;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-family:var(--heading)}
a:active,a:link,a:visited{text-decoration:none}
a:hover{text-decoration:none}
hr {height: 1px;width: 100%;background: #5f5f5f;border: none;}
.wid90{width:90%;margin:0 auto}
.flex-container{display:flex}
.grid-container{display:grid}
.page-wid{max-width:1200px}
.center{text-align:center}
.pad-xl{padding-top:50px!important;padding-bottom:50px!important}
.pad-xl-top{padding-top:50px!important}
.pad-l-top{padding-top:25px!important}
.pad-l-bottom{padding-bottom:25px!important}
.pad-xl-bottom{padding-bottom:50px!important}
.pad-l{padding-top:25px!important;padding-bottom:25px!important}
.relative{position:relative}
.base-align{align-items:baseline}
.align-center{align-items:center}
.align-top{align-items:flex-start!important}
.content-center{align-content:center!important}
.just-center{justify-content:center}
.just-between{justify-content:space-between}
.just-end{justify-content:flex-end}
.align-right{text-align:right}
.align-left{text-align:left}
#block,.block{display:block}
.inline{display:inline}
.half-pg{flex-basis:50%}
.third-pg{flex-basis:33%}
.full-pg{flex:1}
.quarter-pg{flex-basis:25%}
.full-pg{flex:1}
.page-img{overflow:hidden;display:inline-flex!important}
.page-img img{height:100%;width:100%;object-fit:cover;border-radius:15px}
.page-content a{color:var(--secondary);transition:.3s all;font-weight:800}
.page-content a:hover{color:var(--primary)}
.flex-pg{gap:5%}
.half-map {min-height: 300px;position:relative;}
.half-map iframe{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%}
/*--------HEADER STYLES--------------------*/
header {box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;}
.grid-header {grid-template-columns: 1fr 300px 1fr;
    gap: 25px;
    align-items: center;}
.logo img {max-width: 100%;width: 100%;}
.logo a {display: inline-flex;align-items: center;}
header .page-wid {
    padding: 15px 0 5px 0;
}
.right-side {text-align:right;}
.left-side p {
    color: var(--darker) !important;
}
.left-side p, .right-side p, .right-side a {color: var(--primary);font-weight: 600;margin-bottom: 10px;
    display: block;}
.right-side a[href^="tel:"] { font-size: 22px;font-weight: 700;color:var(--darker)}
.left-side p, .right-side p {}
/*--HOME---*/
.grid-cats {
    grid-template-columns: repeat(4, 1fr);
}
.cat {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cat-overlay {
    position: absolute;
    inset: 0;
    padding: 45px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;

    background: linear-gradient(
        180deg,
        rgba(51, 51, 51, 0.15) 0%,
        rgba(51, 51, 51, 0.47) 100%
    );
}

.cat-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 153, 63, 0.33) 0%,
        rgba(255, 153, 63, 0.65) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.cat-overlay > * {
    position: relative;
    z-index: 1;text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.6);
}

.cat:hover .cat-overlay::before {
    opacity: 1;
}

.cat-overlay h2 {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    font-weight: 900;
}
.cat-overlay p {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.flex-logos {
    gap: 10%;
    align-items: center;
}
.flex-logos a {
    flex: 1;opacity:.5;
    transition:.3s all;
    max-width: 250px;filter:grayscale(1.0)
}
.flex-logos img {max-width: 100%;width: 100%;}
.flex-logos a:hover {filter:grayscale(.0);opacity:1.0;}

/*---landing pages----*/
.orange-header {
    background: var(--primary);
    padding: 25px 0;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--secondary);
}
.contact-pg ul li a, .contact-pg ul li {
    color: #000;
    line-height: 2;
}
.contact-pg ul li {
    margin-bottom: 10px;
}

.contact-pg ul li i {color:var(--primary)}
.contact-pg .third-pg h2 {color:var(--secondary);font-size: 18px;margin-bottom: 15px;font-weight: 700;}
.contact-pg h2 {color:var(--secondary);font-size: 22px;margin-bottom: 10px;font-weight: 800;}
/*--------FORM STYLES--------------------*/
.primary-btn {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 20px;
    -webkit-transition: .2s all;
    -moz-transition: .2s all;
    -o-transition: .2s all;
    transition: .2s all;
    background: #fff !important;
    border: 1px solid var(--primary);
    color: var(--primary);
}
.primary-btn:hover {
    color: #fff;
    background: var(--primary) !important;
}


/*-------- FOOTER STYLES ----------------*/
footer{    background: var(--secondary);
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;}
.flex-foot {
    gap: 10%;
}
.foot-col {
    flex-basis: 50%;
}
ul.foot-nav {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 10px;
}
ul.foot-nav li a {
    font-weight: 600;
    font-size: 14px;
    display: block;
    padding: 8px 10px;
    /* margin: 5px auto; */
    line-height: 1;
    text-decoration: none;
    color: #ff993f;
    border: 1px solid #ababab;
    text-align: center;
    /* height: auto; */
    transition: .4s all;
    font-family: var(--body);
}

ul.foot-nav li a:hover {background:var(--primary);color:#fff;}

#foot-txt {
    font-size: 10px;
    color: #ABABAB;
    line-height: 22px;
}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







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

@media only screen and (max-width:1450px) {
	.cat-overlay h2 {font-size: 22px;}
}
@media only screen and (max-width:1200px) {
.grid-cats {
    grid-template-columns: repeat(2, 1fr);
}
.cat{max-height: 300px;}
}
@media only screen and (max-width:915px) {
.right-side a[href^="tel:"] {
    font-size: 18px;}
}
@media only screen and (min-width:768px) and (max-width: 1130px) {
	
}


@media only screen and (max-width: 767px) {
.grid-header {    gap: 10px;
    grid-template-columns: 1fr;    text-align: center;}
    .left-side p, .right-side p {
    text-align: center !important;
}
.logo img {max-width: 350px;}
	.left-side {
    flex-wrap: wrap-reverse;justify-content: center;gap: 15px;
    display: flex;
}
 .left-side p,.left-side a {flex-basis: 100%;}
 .foot-col:first-of-type {display:none;}
 .foot-col {flex-basis: 100%;justify-self: center;text-align:center;}
 .cat-overlay {padding: 25px}
	.flex-pg {flex-wrap:wrap;}
	.flex-pg div {flex-basis: 100%;}
}

@media only screen and (max-width: 550px) {
        .grid-cats {
        grid-template-columns: repeat(1, 1fr);
    }
    .orange-header h1 {
    font-size: 28px;text-align:center;
}
	.flex-pg div {text-align: center;}
}