@charset "UTF-8";

* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}

:root {
	--white:#fff;	
	--nearwhite: #f9f9f9;
	--offwhite:#e5e5e5;	
	--stsred:#b9041a;
	--ltgray: #999;
	--gray:#636363;
	--offblack: #333;
	--nearblack: #1e1e1e;	
	--black: #000;
}

/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
html {scroll-behavior: smooth;}
body {font-size:100%; font-family: "raleway", sans-serif !important; background:#fff;}

::selection {color:var(--white); background:var(--stsred);}
::-moz-selection {color:var(--white); background:var(--stsred);}

.clear {clear: both;}

h1, h2, h3, h4 ,h5 ,h6 {line-height: normal; font-family: "oswald", sans-serif;}
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:underline;}
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: 700;}

/*
font-family: "oswald", sans-serif;
400, 500, 600

font-family: "raleway", sans-serif;
400, 400i, 700, 700i

font-family: "open-sans", sans-serif;
400, 700
*/


/*  SECTION WIDTH
------------------------------------------------*/
.section-width {max-width:1280px; margin:0 auto;}

/*  COL-TAINERS
------------------------------------------------*/
.col-tainer {position:relative; display:flex; flex-flow:row wrap; gap:2%;}

.col-1-1 {width:100%; margin:0;}
.col-1-2 {width:49%; margin:0 auto;}
.col-1-3 {width:32.3%; margin:0;}
.col-2-3 {width:65.6%; margin:0 auto;}

/*  BUTTONS
------------------------------------------------*/
a.solid-button {position:relative; display:inline-block; margin:5px; padding:0 20px; padding-bottom:2px; font-size:18px; line-height:38px; font-weight:400; text-transform: uppercase; text-decoration: none; color:var(--white); border-radius:3px; background:var(--stsred); transition:.2s ease-in-out; font-family: "oswald", sans-serif;}
a.solid-button:hover {background:var(--nearblack);}

a.solid-button.solid-alt {color:var(--white); background:var(--black);}
a.solid-button.solid-alt:hover {color:var(--nearwhite); background:var(--stsred);}

a.outline-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--white); border:2px var(--white) solid; border-radius:4px; background:transparent;}
a.outline-button:hover {color:var(--nearblack); border:2px var(--nearblack) solid; background:var(--white);}








/* HEADER
------------------------------------------------*/	
.global-header {background:var(--offwhite) url("/siteart/header-technician-background.jpg") no-repeat top center; background-size: cover;}	

/*  HEADER / PAGE TITLE H1
------------------------------------------------*/	
.global-header h1 {padding-top:5px; padding-bottom:30px; font-size:50px; font-weight:600; text-transform:uppercase; color:var(--offblack);}

.head-body {display:flex; flex-flow:row wrap; justify-content:space-between; max-width:1280px; margin:0 auto; padding:25px 0 35px 0;}

/* LOGO
------------------------------------------------*/	
.head-logo a {display:inline-block;}

.head-main {display:flex; flex-flow:column; /*justify-content:space-between;*/}

.head-main-top {display:flex; flex-flow:row wrap; align-items: center; justify-content:space-between; margin-right: 5px; padding-top:15px; padding-bottom: 20px;}
.head-phone {margin:0 auto;}
.head-phone a::before {content: "\f095"; position: absolute; z-index:2; top:50%; transform: translateY(-50%); left:-21px; font-size:15px; line-height:1; text-align: center; color:var(--black); font-family: FontAwesome;}
.head-phone a{position:relative;  font-size:24px; line-height:1; font-weight:400; font-family: "oswald", sans-serif;}

.head-accounts ul {display:flex; flex-flow:row wrap; justify-content:flex-end; gap:18px; margin:0; padding:0;}
.head-accounts ul li{position: relative; margin:0; padding:0; list-style-type:none;}
.head-accounts ul li a{font-size:18px; font-weight:400; text-decoration:none; color:var(--stsred); font-family: "oswald", sans-serif; }

.head-accounts ul li ul {display:none; position: absolute; left:-15px; box-sizing:border-box; width: 140px; padding: 10px; background: #ddd;}
.head-accounts ul li:hover > ul {display: block; z-index:600;}
.head-accounts ul ul li {position: relative; margin:0;}
.head-accounts ul li li {display: block; position: relative; width:100%; margin: 0; padding:0;  border-bottom: 1px solid #ccc; text-align: left;}
.head-accounts ul li li:last-of-type {border-bottom:none;}
.head-accounts ul li li a{
/*padding:15px 0; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background: #181818;*/
	/*display: block; width: 100%; margin:0;  padding: 5px 15px; font-weight: 300; opacity: 1; font-size: 18px;  */
	display: block;  padding: 6px 14px 6px 5px; color:var(--black); transition:0s ease-in;
   	
}

.head-accounts ul li li a:hover {background:var(--nearblack) !important; color:var(--white) !important;}



.cart-count::before {content: "0"; position: absolute; z-index:2; top:-3px; left:-18px; width:15px; height:15px; padding-bottom:1px; font-size:10px; line-height:15px; text-align: center; color:var(--white); border-radius:50%; background:var(--black); font-family: "oswald", sans-serif;}
a.cart-count {position:relative;}


.head-search {display:flex; flex-flow:row wrap; gap:27px;}
.head-search a.solid-button {margin: 0;}





/*  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:space-between; margin:0; padding:0;}
nav.primary ul > li {margin:0; padding:0; list-style-type:none;}		
nav.primary ul > li > a::before {content:""; position: absolute; height:3px; width:0; right: 0; bottom:0; left:0; margin:0 auto; background:var(--stsred); transition: width .3s;}
nav.primary ul > li:hover > a::before, nav.primary ul > li.currentpage > a::before{width:100%;}
nav.primary ul li.dropdown-icon {position: relative;  padding-right:30px;}
nav.primary ul li.dropdown-icon::after {content: "\f107"; position: absolute; z-index:2; top:6px; right:5px; font-size:11px; font-weight:400; color:var(--ltbrown); transition:.5s ease-in-out; font-family: FontAwesome;}
nav.primary ul > li > a {display:block; position: relative; margin:0; padding:0 0 4px 0; font-size:18px; /*line-height:1;*/ font-weight:400; text-align:center; text-decoration:none; text-transform:uppercase; color:var(--black); font-family: "oswald", sans-serif; cursor:pointer; transition: all .4s ease-in-out;}	
nav.primary ul > li > a:hover {opacity:.7;}

/*  SUB NAV
------------------------------------------------*/
nav.primary li ul {border-top:3px var(--offblack) solid; background-color: #ddd;}
nav.primary ul li li {width: auto; padding:0;  border-bottom: 1px solid #ccc;}
nav.primary ul li li a::before {content:none; }
nav.primary ul li li a{display: block; margin:0; padding: 5px 15px !important; font-weight: 300; opacity: 1; font-size: 18px; text-transform:capitalize; text-align:left;}
nav.primary ul li li a:hover {opacity: 1; color: #fff !important; background: #222 !important;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute; width:240px;} 
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover > ul {display: block; z-index: 500;}
nav.primary ul ul li {float: none; position: relative; margin:0;}















/*  BREADCRUMBS
------------------------------------------------*/	
.global-breadcrumbs {padding: 7px 0;font-size:14px; line-height: 1.7em; color:var(--stsred); border-bottom:1px var(--offwhite) solid; background:var(--white);}
.global-breadcrumbs a,
.global-breadcrumbs span {color:var(--offblack);}

/*  MAINS
------------------------------------------------*/	
.inv-main {padding:58px 10% 0;}
.sub-main {padding:65px 0 75px 0;}
.sub-main h2 {margin-bottom:10px; font-size:36px; font-weight: 300; text-transform: capitalize; color:var(--offblack);}
.sub-main h2 strong {font-weight:400; color:var(--stsred);}
.sub-main p {padding-bottom: 20px; font-size:16px; line-height: 25px; font-weight: 400; color:var(--black);}

/*  FOOTER
------------------------------------------------*/
.global-footer {color:var(--gray); border-top:1px var(--offwhite) solid; background:var(--nearwhite);}
.foot-body {display:flex; flex-flow:row wrap; justify-content: space-between; padding:40px 0 10px 0;}

/*  FOOTER NAVIGATION
------------------------------------------------*/
.foot-nav {width:400px;}
.foot-nav .nav-title {padding-bottom:10px; font-size:22px; color:var(--black); font-family: "oswald", sans-serif;}
.foot-nav ul {position:relative; column-count:2; column-gap:5px; column-width:160px;}
.foot-nav ul::before {content:""; position: absolute; z-index:0; top:0; left:175px; width:1px; height:100%; background:var(--offwhite);}
.foot-nav ul li {margin:0; margin-bottom: .5em; padding:0; line-height: 1.7em; list-style:none;}
.foot-nav ul li a::before {content:"\f105"; position: absolute; top: 50%; transform: translateY(-45%); left:0; margin:0 auto; font-size:10px; color:var(--ltgray); font-family: FontAwesome;}
.foot-nav ul li a {position: relative; padding:0 0 0 20px; font-size:15px; color:var(--gray);}

/*  FOOTER INFO
------------------------------------------------*/
.foot-info {width:500px; padding:0 45px 0 15px;}
.foot-banner img {max-width:100%; margin:0 auto;}
.foot-social {display:flex; align-items:center; justify-content:center; margin-top:25px; margin-bottom:0; padding-top: 15px; padding-bottom:20px; text-align:center; border-top: 1px solid var(--offwhite);}
.foot-social a {font-size:22px;line-height:1; color:var(--stsred);}
.foot-social .social-title {margin-right:5px; font-size: 18px; line-height:1; text-transform: uppercase; color:var(--black); font-family: "oswald", sans-serif;}

/*  FOOTER CONTACT INFO
------------------------------------------------*/
.foot-contact {display:flex; flex-flow:column; width:290px; font-family: "open-sans", sans-serif;}
.foot-contact a {text-decoration:none;}
.foot-logo img{width:100%; max-width:333px;} 

/*  FOOTER CONTACT ITEMS
------------------------------------------------*/
.foot-contact .contact-items a {position:relative; display:inline-block; padding: 0 0 5px 80px; font-size: 15px; line-height: 22px; font-weight:400; word-break: break-all;}
.contact-items a[href^="mailto:"] {color:var(--stsred);}
.contact-items a[aria-label="Location"]::before {content: "\f3c5"; position: absolute; z-index:2; top:4px; left:45px; font-size:13px; line-height:1; color:var(--gray); font-family: FontAwesome;}
.contact-items a[aria-label="Toll-Free"]::before {content: "TOLL FREE"; position: absolute; z-index:2; top:4px; left:0; font-size:11px; line-height:1; text-align: center; color:var(--gray); font-family: "open-sans", sans-serif;}
.contact-items a[aria-label="Office"]::before {content: "\f095"; position: absolute; z-index:2; top:4px; left:41px; font-size:13px; line-height:1; text-align: center; color:var(--gray); font-family: FontAwesome;}
.contact-items a[aria-label="Fax"]::before {content:"FAX"; position: absolute; z-index:2; top:4px; left:35px; font-size:11px; line-height:1; color:var(--gray); font-family: "open-sans", sans-serif;}
.contact-items a[href^="mailto:"]::before {content: "\f0e0"; position: absolute; z-index:2; top:4px; left:40px; font-size:13px; line-height:1;  color:var(--gray); font-family: FontAwesome;}

/*  FOOTER COPYRIGHT
------------------------------------------------*/
.foot-copyright {display:flex; flex-flow:row wrap; justify-content:center; padding: 10px 0; font-size: 13px; line-height:25px; text-align:center; color:var(--ltgray); background:var(--nearblack) url("/siteart/footer-texture-background.jpg") repeat; font-family: "open-sans", sans-serif;}
.foot-copyright a::before {content:"|"; position: absolute; top:0; left:0; margin:0 auto; color:var(--ltgray);}
.foot-copyright a {position:relative; margin:0; padding:0 2px 0 9px; }


/************************************************ Responsive Styles **/

@media screen and (max-width: 1400px) {
	.section-width {width:90%;}
	.sub-main {padding:calc(20px + 4%) 0 calc(30px + 4%) 0;}
	.head-body {padding:25px 5% 35px 5%;}
	.foot-info {width:390px;}
}

@media screen and (max-width: 1300px) {
	.foot-nav {width:370px;}
	.foot-info {width:300px;}
}

@media screen and (max-width: 1200px) {
	.global-header h1 {padding:15px 0;}
	.head-body {flex-flow:column wrap; align-items: center; justify-content: center; background: #eee;}

	nav.primary{display:none;}
	#menu-button{width:100%; display: block; position: relative; z-index:400; padding:11px 0 15px 0; background:var(--gray);}
	#menu-button a{display:flex; flex-flow:row; justify-content: space-between; font-size:18px; line-height:1; color:var(--white); text-decoration: none; padding:0; cursor:pointer; font-family: "oswald", sans-serif;}
	
	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;
		cursor:pointer;
	}
	
	/* 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 {color:#ccc; text-decoration:none; cursor:pointer;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; 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;
		cursor:pointer;
		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 #C8102E 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);}
	
	
	.foot-nav {width:48%;}
	.foot-info {width:500px; padding:20px 0 0 0;}
	.foot-contact {display:flex; flex-flow:row; align-items: flex-start; justify-content:center; width:100%; padding-top: 25px; border-top: 1px solid var(--offwhite);}
	.foot-logo {padding: 40px 25px 0 0;}
}

@media screen and (max-width: 1100px) {		
	.foot-info {width:50%;}
}

@media screen and (max-width: 1099px) {
	.section-width {width:80%;}
	
	.col-tainer {flex-flow: column wrap; gap: 35px;}
	.col-1-2,
	.col-1-3,
	.col-2-3 {width:auto;}
	
	.sub-main {padding:70px 0;}
	
	.head-body {padding:0 10% 15px 10%;}
	
	.foot-nav {width:60%; margin-bottom:7.5%;}
	.foot-info {width:40%;}
}

@media screen and (max-width: 785px) {
	.inv-main {padding:58px 5% 0;}
}

@media screen and (max-width: 768px) {
	.global-header h1 {padding:8px 0 10px 0; font-size:40px;}
	.head-body {display:flex; flex-flow:column wrap; align-items: center; justify-content:space-between; padding-top:20px;}
	.head-logo img {max-width:100%;}
	.head-search {justify-content:center; gap:15px;}

	.foot-body {flex-flow:column;}
	.foot-nav {width:100%;}
	.foot-nav ul {column-count:1; column-gap:normal; column-width:auto; column-rule:none;}
	.foot-nav ul::before {content:none;}
	.foot-info {width:100%;}
	.foot-contact {display:flex; flex-flow:column; align-items: flex-start; justify-content:center; width:100%; padding-top:0;}
	.foot-logo {padding: 40px 25px 20px 0;}
	.foot-copyright p {width:100%;}
	.foot-copyright a:first-of-type::before {content:none;}
}

@media screen and (max-width: 400px) {
	.head-main-top {flex-flow: column wrap; gap:15px;}
}