﻿/***** 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: #e82028; color: #fff;text-shadow: none;}
::selection {background: #e82028;color: #fff;text-shadow: none;}

/* Clearfix */
.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

/*-------- BODY STYLES --------*/
body {font-family: "Roboto Condensed", sans-serif !important;}
h1,h2,h3,h4,h5,h6 {font-family: "Hind", sans-serif !important;}
p {font-family: "Roboto Condensed", sans-serif !important;font-size: 16px;line-height: 1.5;}
a:link, a:visited, a:active {text-decoration:none;font-family: "Roboto Condensed", sans-serif !important;}
a:hover {text-decoration:none;}
hr{border:#000 1px solid;}
/*--- HEADER STYLES ---------------------*/
header {}
.grey-bg{background:#2c2c2c;}
.red-bg {background:#e82028}
.flex-head {justify-content: space-between;align-items: center;text-align: center;padding: 15px 0;}
.head-location,.logo,.head-phone {flex: 1;}
.head-location a,.head-phone a {font-family: "Hind", sans-serif !important;color: #fff;font-size: 28px;font-weight: 800;transition:.3s all;}
.head-location a:hover,.head-phone a:hover{color:#e82028;}
.logo img {max-width: 300px; width: 100%;}
.slideshow {margin-bottom: 0 !important;}
.slideshow div {height: 50vh;overflow: hidden; min-height: 250px;}
.slideshow img {height: 100%;width: 100%;object-fit: cover;object-position: center center;}
.slideshow .slick-dots {bottom: 20px !important;}
/*---BODY--------------------------------*/
.wid90{width: 90%;margin:0 auto;}
.flex-container {display: flex;}
.grid-container {display: grid;}
.center {text-align: center;}
/*--HERO---*/
.hero {position:relative;}
.overlay-txt{position:absolute; top: 0;bottom:0;left:0;right:0;height:100%;width:100%;background: rgba(0,0,0,0.50);display:flex;justify-content: center;align-items: center;z-index: 9999;color: #fff;text-align: center;}
.hero-txt {width: 90%;margin: 0 auto;}
.hero-txt h1 {text-transform: uppercase;font-size: 52px;line-height: 1;}
.hero-txt h1 span {display: block;font-weight: 500;font-size: 36px;letter-spacing: 1px;margin-bottom: 10px}
.hero-txt hr {border: none;background: #fff;height: 2px;max-width: 900px;margin: 20px auto;}
.home-txt {gap: 5%;}
.hero-txt p {font-size: 22px;font-weight: 500;}
/*--HOME TEXT---*/
.home-img, .txt-half {flex-basis: 50%;}
.txt-half {display: flex;align-items: center;}
#pad-l {padding: 50px 0;}
.home-img{overflow: hidden;max-height: 450px}
.home-img img {height: 100%;width: 100%;object-fit: cover;}
.service-banner {background:url("/siteart/service-bg.jpg") no-repeat;background-size: cover;background-position: center center;}
.grid-services {grid-template-columns: repeat(4, 1fr);gap: 50px;}
a.service {text-align: center;}
a.service:hover .white-outline{background: #fff;color: #000;}
.service img {max-width: 300px;width: 100%;margin-bottom:5px}
.service-wrap button {display: block;text-align: center;margin: 0 auto;}
.customer-reviews .wid90{max-width:1300px;}
.review {padding: 30px;background: #fff;text-align: center;}
.review-wrap i {font-size: 48px;opacity: .15;margin-bottom: 10px;}
.review-wrap p.customer-name { text-transform: uppercase;font-size: 22px;font-weight: 800;font-family: "Hind", sans-serif !important;}
/*---SUBPAGE---*/
.page-wid {max-width: 1400px;}
.sub-pg h1 {font-size: 38px;font-weight: 700;line-height: 95%;letter-spacing: 3px;padding: 0px 0px 20px 0px;color: #e82028;text-transform: uppercase;}
.sub-pg a {color: #000;text-decoration: underline;transition:.3s all;}
.sub-pg a:hover {text-decoration: none;}
.about-pg .flex-container,.service-pg .flex-container {gap: 5%;}
.about-img,.contact-txt {flex-basis: 33%;}
.about-txt {flex: 1;}
.about-img img {width: 100%;height: 100%;object-fit: cover;}
.sub-pg h2 {text-transform: uppercase;font-weight: 600;letter-spacing: 1px;}
.about-txt .center h3 {color:#e82028;}
.service-box {padding: 20px;border: 1px solid #eee;box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;background: #f8f8f8;flex: 1;}
.service-box h2 {font-size: 20px;margin-bottom: 5px;font-weight: 900;}
.service-box ul {padding-inline-start: 5px;}
.service-box li{margin-bottom: 10px;}
.service-box li::Before {content: "\f00c";font-weight: 900;font-family: "Font Awesome 6 Free";margin-right: 10px;color:#e82028;}
ul.flex-list {display: flex;justify-content: space-between;flex-wrap:wrap;}
ul.flex-list span {flex: 1;}
.contact-form {order: -1;}
.contact-txt a {color: #000;transition:.3s all;}
.contact-txt a:hover {color:#e82028;}
a.phone-link {font-size: 22px;font-weight: 900;color: #000;text-decoration: none !important;}

/*---HOVER EFFECTS---*/
/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover img, .hvr-bob:focus img, .hvr-bob:active img {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
/*--------BUTTON STYLES--------------------*/
button {transition:.3s all;}
.red-btn {cursor: pointer; background:#e82028;color: #fff;font-family: "Roboto Condensed", sans-serif !important;text-transform: uppercase;text-align: center;font-weight: 600;letter-spacing: 1px;padding: 15px 10px;min-width: 150px;border-radius: 3px;border:1px solid #e82028 !important;font-size: 16px;transition:.3s all;}
.hero .red-btn:hover {background: #fff;border-color: #fff !important;color:#e82028; }
.red-btn:hover {background: #000;color: #fff;border-color: #000 !important;}
.white-outline{cursor: pointer; background:transparent;color: #fff;font-family: "Roboto Condensed", sans-serif !important;text-transform: uppercase;text-align: center;font-weight: 600;letter-spacing: 1px;padding: 15px 10px;min-width: 150px;border-radius: 3px;border:2px solid #fff !important;font-size: 16px;transition:.3s all;}
/*-------- FOOTER STYLES ----------------*/
footer{}
a.foot-phone {font-family: "Hind", sans-serif !important;text-transform: uppercase;font-weight: 900;font-size: 28px;color: #e82028;transition: .3s all;}
a.foot-phone:hover {color: #fff;}
.flex-foot.flex-container {justify-content: center;gap: 10%;margin: 30px 0 0;color: #fff;}
.foot-address  i,.foot-hours i {font-size: 22px;color: #e82028;margin-bottom: 10px;}
.foot-address a,.foot-hours {color: #fff;text-transform: uppercase;line-height: 1.5}
.foot-about {
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}
.foot-about p {
    font-size: 14px !important;}

.foot-logo img{max-width: 100%;width: 300px;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width:1200px) {
	.about-pg .flex-container,.service-pg .flex-container {flex-wrap:wrap; gap: 30px;}
	.about-txt,.about-img,.contact-txt {flex-basis: 100%;}
	.contact-form {order: 0;}
	.head-location a, .head-phone a {font-size: 18px;}
	.grid-services {gap:20px;}
	.slideshow div {
    height: 40vh;
	}
	
}

@media only screen and (max-width: 850px) {

		.hero-txt h1 {font-size: 44px;}
	.hero-txt h1 span {font-size: 28px;}
	.nav-wrap {text-align: center;}
	
}
@media only screen and (max-width: 767px) {
	.home-img {display: none;}
	.txt-half {flex-basis: 100%;}
		.hero-txt h1 {font-size: 36px;}
	.hero-txt h1 span {font-size:24px;}
	.grid-services {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px !important;
}

}
@media only screen and (max-width: 690px) {
	.flex-head {flex-wrap:wrap;gap:10px;}
	
	.service-box,.head-location, .logo, .head-phone {flex-basis:100%;}
	
}
@media only screen and (max-width: 550px) {
	ul.flex-list span {flex-basis:100%;}
		.hero-txt h1 {font-size: 28px;}
	.hero-txt h1 span {font-size:20px;}
	.hero-txt hr {margin: 10px auto;}
	    .slideshow div {
        height: 32vh;min-height: 355px !important;
    }
	.hero-txt p {font-size: 16px;}
	.logo img {
		max-width: 200px;}
}

@media only screen and (max-width: 490px) {
	.grid-services {
    grid-template-columns: repeat(1, 1fr);
}
	.flex-foot.flex-container {flex-wrap:wrap;gap:10px}
	.flex-foot.flex-container div {flex-basis: 100%;}
}






