﻿/*====================================== 
		CSS reset/normalize 
========================================*/

/*===== Correct `block` display not defined in IE 8/9. =====*/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small {font-size: 80%;}
svg:not(:root) {overflow: hidden;}

/* Hides giant arrows that show up on inventory pages on Chrome *smh* */
.widgets svg[class*="fa"], .widgets-details svg[class*="fa"] {display: none !important;}

/* Fixes padding issue on mobile */
@media screen and (max-width: 575px) {
	.primary-content {}
}

#content {box-shadow: 0 0 8px 3px rgba(0,0,0,0.4);}


	
/*====================================== 

			Typography

=======================================*/

.roboto {font-family: 'Roboto'; font-weight: 400;}
.roboto a {  color: #000000; text-decoration: none;}
.roboto-bold {font-family: 'Roboto'; font-weight: 700;}
.roboto-bold-italic {font-family: 'Roboto'; font-weight: 700; font-style: italic;}
.roboto-italic {font-family: 'Roboto'; font-weight: 400; font-style: italic;}
.roboto-light {font-family: 'Roboto'; font-weight: 300;}

.oswald {font-family: Oswald, sans-serif; font-weight: 400;}
.oswald-light {font-family: Oswald, sans-serif; font-weight: 300;}
.oswald-bold {font-family: Oswald, sans-serif; font-weight: 700;}

html {font-size: 16px;}

.white {color: #fff;}
.grey {color: #666;}
.light-grey {color: #999;}
.orange {color: #D3662B;}

h1.extralarge {font-size: 4em;}

.text-shadow {text-shadow: 2px 2px 2px rgba(0,0,0,0.6);}
.text-capitalize {text-transform: uppercase !important;}
.underline {text-decoration: underline;}

h1 {font-size: 2.4rem;}
h2 {font-size: 2.0rem;}
h3 {font-size: 1.7rem;}
h4 {font-size: 1.4rem;}
h5 {font-size: 1.2rem;}
h6 {font-size: 0.8rem;}

.large {font-size: 1.6rem;}
.medium {font-size: 1.2rem;}
.small {font-size: 0.8rem;}


@media screen and (min-width: 992px) {
	.text-right-lg {text-align: right !important;}
	.text-left-lg {text-align: left !important;}
	.text-center-lg {text-align: center !important;}
}

@media screen and (min-width: 768px) {
	.text-right-md {text-align: right !important;}
	.text-left-md {text-align: left !important;}
	.text-center-md {text-align: center !important;}
}

@media screen and (min-width: 575px) {
	.text-right-sm {text-align: right !important;}
	.text-left-sm {text-align: left !important;}
	.text-center-sm {text-align: center !important;}
}





/*====================================== 

			Base Styles

========================================*/
* {box-sizing: border-box;}

.clear {clear: both;}
img {border: 0; width: auto;} 

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
	padding:0;
	background-color: #fff;
	color: #111;
	font-size: 1.0rem;
	overflow-x: hidden;
}

.z-100 {z-index: 0;}
.z-200 {z-index: 200;}
.z-300 {z-index: 300;}
.z-400 {z-index: 400;}
.z-500 {z-index: 500;}
.z-600 {z-index: 600;}
.z-700 {z-index: 700;}
.z-800 {z-index: 800;}
.z-900 {z-index: 900;}

@media screen and (min-width: 992px) { .position-lg-absolute {position: absolute !important;} }

/* Scroll back to the top */
#to-top {
	position: fixed;
	top: 30px;
	left: 10px;
	color: #ccc;
	border: 4px solid #ccc;
	border-radius: 25%;
	display: none;
	z-index: 999;
}





/*====================================== 

	Borders, Backgrounds, Shadows

========================================*/

@media screen and (min-width: 992px) { 
	.extra-rounded-bottom-lg {border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;} 
	.orange-bg-lg {background-color: #FF7F00 !important;}
	.orange-bg-lg.trans-bg {background-color: rgba(255,127,0,0.5) !important;}
}

.cubes-bg {background: url(../siteart/subtle-patterns/cubes-bg.png) repeat;}
.gun-bg {background: url(../siteart/subtle-patterns/gun-metal.png) repeat;}
.light-grey-bg {background: url(../siteart/subtle-patterns/white-wall-hash.png) repeat;}
.grey-bg {background-color: #363636;}
.white-bg {background-color: white;}
.black-bg {background-color: #111;}
.orange-bg {background-color: #D3662B;}

.drop-shadow {box-shadow: 1px 1px 2px 3px rgba(0,0,0,0.2);}

hr.thick {border-width: 5px;}
hr.white {border-color: white;}
hr.orange {border-color: #D3662B;}


/*====================================== 

			Link Styles

=======================================*/

a {text-decoration: none; color: #136cab;}
a:hover  {color: #303030;}
a.white {color: #fff;}
p.white > a {color: #fff;}
a.dark {color: #333}
a.hov-under:hover {text-decoration: underline;}
.light-grey a {color: #999; text-decoration: underline;}

a#expresslink:hover > img {width: 70% !important; transition: 0.3s;}




/*======================================

			Header Styles

=======================================*/

header{
	width:100%;
	background: transparent;
	display: block;
	position: absolute;
}

/* Shrink the hamburger icon a little on mobile */
.navbar-toggler {padding: 0.2rem;}
.navbar-toggler-icon {width: 1.2rem; height: 1.2rem; z-index: 300;}
/* Edit Nav Items */
nav .nav-item {padding: 0.3rem 0.8rem; text-transform: uppercase; font-family: Oswald, sans-serif; font-weight: 600; background-color: rgba(255,255,255,0.9);}
@media screen and (min-width: 768px) {nav .nav-item {background-color: transparent;}}
nav .nav-item > .nav-link {padding: 0 0;}
/* Edit Active Nav */
nav .nav-item.active {}





/*======================================

		Background Row Styles

======================================*/
#background-row {
	height: 300px;
	background-image:url(../siteart/home-bg.jpg);
	background-size: 200%;
	background-attachment: fixed;
}

@media screen and (min-width: 575px) {
	#background-row {height: 310px !important;}
}

@media screen and (min-width: 768px) {
	#background-row {background-size: contain;}
}

@media screen and (min-width: 992px) {
	#background-row {height: 400px !important;}
}




/*======================================

		Quick Link Styles

======================================*/
.quick-link-img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: 0.3s;
}

div:hover > a > div > img.quick-link-img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}








/*======================================

		Contact Form Styles

======================================*/

form#contact-form input, form#contact-form textarea, form#contact-form select, form#contact-form input#CaptchaAnswer {
	width: 100%;
	padding: 5px 10px;
	margin: 6px 0;
	border: 1px solid #ddd;
	border-radius: 0;
}

form#contact-form textarea {height: 150px;}

form#contact-form select {color: #6f6f6f;}

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

form#contact-form input, form#contact-form textarea {-webkit-appearance: none;}

form#contact-form input[type="checkbox"] {
	width: 15px;
	height: 15px;
	border: 1px solid #aaa;
	border-radius: 0;
	background-color: white;
	outline-color: rgba(255,127,0,0.7);
	padding: 0;
}

form#contact-form input[type="checkbox"]:checked {
	border: 1px solid #aaa;
	background-color: #FF7F00;
	box-shadow: inset -1px -1px 1px 0px #fff, inset 1px 1px 1px 0px #fff;
}

form#contact-form input:focus, form#contact-form textarea:focus {
	border: 1px solid #bbb;
}

/* One line Captcha */
.CaptchaPanel {
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
	width: 50%;
	display: inline-block;
	float: left;
}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:11px;
	line-height:13px;
	width: 50%;
	display: inline-block;
	float: left;
}

.CaptchaAnswerPanel {
	margin:0 0 0 0;
	padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}

.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
#CaptchaImage {margin-top: 10px !important;}
#CaptchaAnswer {width: 40% !important;}



/* Quick Parts Search */
form#quick-search input {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	width: 70%;
	color: white;
}

form#quick-search input:focus {box-shadow: none;}





/*======================================

		Scrolling Inv Styles

======================================*/
.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}






/*======================================

			Footer Styles

======================================*/






/*======================================

		  Responsive Styles

======================================*/

@media screen and (max-width: 1120px) {
	
}

/*===== Bootstrap col-lg breakpoint =====*/
@media screen and (max-width: 992px) {
	html {font-size: 16px;}
}

@media screen and (max-width: 800px) {
	html {font-size: 14px;}	
}

/*===== Bootstrap col-md breakpoint =====*/
@media screen and (max-width: 768px) {
	html {font-size: 18px;}	
}

@media screen and (max-width: 670px) {
	
}

/*===== Bootstrap col-sm breakpoint =====*/
@media screen and (max-width: 575px) {
	h4 {font-size: 18px!important;padding: 0 30px!important;
    line-height: 30px!important;
}
	
	h2 {font-size: 30px!important;padding: 0 30px!important;
    line-height: 30px!important;
}	
}

@media only screen and (max-width: 480px) {
	
}

@media screen and (max-width: 447px){
	
}

@media screen and (max-width: 414px){
	
}
	
