:root {
    --themebg: #1c2b34;
    --themebg2: #f4f5fb;
    --themebg3: #febd11;
    --btnprimary: #0073b6;
    --btnsecondary: #febd11;
    --mainpad: 5vw;
    --ppad: 2em;
	--body: 'Raleway', sans-serif;
	--heading: 'Oswald', sans-serif; 
}

/** Example of use var(--primary) **/

/*
NOTE: Variables do not work in IE. Here is a workaround:

1.	Code using the variables as you normally would.
2.  When you are finished, save everything and make a backup copy of the file in a convenient location. This file will be useful in case you need to change any colors in the future, since we are going to be overwriting the variables in the main file.
3.	Paste your css into the left section here: https://madlittlemods.github.io/postcss-css-variables/playground/
4.	Copy the css to the right, and paste it over everything in this document.
*/

/*===================== 
	Color information

		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

ol, ul, dl {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/**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%;}

.cta-dlag {transform: skew(-45deg, 0deg);padding:1em;transition:ease-in-out 300ms;}
.cta-dlag h2 {transform: skew(45deg, 0deg); text-transform:uppercase; font-size:24px !important;}
.cta-dlag.left {position: relative;left: -1%;margin: 1em 0px;}
.cta-dlag.right {position: relative;right: -1%;margin: 1em 0px;}
#wshield {background: #82addb;}
#rchip {background: #0079c0;}
#wshield:after {border-left: outset 50px #82addb;}
#rchip:after {border-left: outset 50px #0079c0;}
#wshield:after, #rchip:after {
    content: "";
    position: absolute;
    top: 0;
    left: -49px;
    width: 50px;
    height: 100%;
}
#aglass:after, #service:after {
    content: "";
    position: absolute;
    top: 0;
    right: -49px;
    width: 50px;
    height: 100%;
}
#aglass {background: #389bcf;}
#service {background: #00587b;}
#aglass:after {border-right: outset 50px #389bcf;}
#service:after {border-right: outset 50px #389bcf;}

div#ws-btn {background-image: url('/siteart/Wholesale-login-dark.jpg');background-size: cover;background-position: center center;transition: ease-in-out 300ms;}
div#ws-btn:hover {background-image: url('/siteart/Wholesale login active.jpg');}
div#brands * {text-align: center;}
.cta-dlag:hover {opacity: .75;}
/*===================== 
	THEME
=======================*/
#headz * {box-sizing: border-box !important;}
.main-bg {background-image:url('/siteart/Gun Metal Background@2x.jpg'); background-size:cover; background-repeat:no-repeat;}
.accent-bg {background: var(--themebg2);}
.accent-bg2 {background: var(--themebg3);}
.btn-primary {background: var(--btnprimary);}
.btn-secondary {background: var(--btnsecondary);}
.finance-bg {background-image:url("../siteart/financing - bg .png"); background-size:cover; background-position:center; background-repeat: no-repeat;}

.bg-poly {background-image: url(../siteart/polygon.png);background-position: center;background-size: cover;width: 100%;min-height: 125px;position: absolute;z-index: 10;bottom: 0;}
/*===================== 
	base styles 
=======================*/
.pad25 {padding:calc(var(--mainpad) * .25);}
.pad50 {padding:calc(var(--mainpad) * .5);}
.pad100 {padding:var(--mainpad);}
.tb50 {margin-top:50px; margin-bottom:50px;}
.pad-top-50	{padding-top:50px;}
.pad-bottom-50 {padding-bottom:50px;}
.p-pad {padding:var(--ppad);}
.p-pad2 {padding:calc(var(--ppad) * 2);}
.z-hi {position:relative; z-index: 1001;}
.z-low {position:relative; z-index: 101;}

.secondary {color: var(--themebg3);}


html {
    font-family: 'Noto Sans JP', sans-serif;
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    margin: 0;
	background-image:url("../siteart/body-bg2.jpg"); background-position: center;
	
	}
svg:not(:root) {overflow: hidden;/*reset*/}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}
	
/*image replacement*/
.hide-text {text-indent:  100%;white-space:  nowrap;overflow:  hidden;}	

hr {-moz-box-sizing: content-box;box-sizing: content-box;border-style: solid;height: 0;} 

img { border: 0;} 
	
.scrolling-wrap,iframe.scrolling {width:100%;}	
/*===================== 
	Card Styles
=======================*/


/*===================== 
	Button/ Link Styles
=======================*/
.btn.btn-danger.dag-btn {
    color: #fff !important;
    background: #cf0000 !important;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    transition: ease-in-out 300ms;
}
.btn.btn-danger.dag-btn:hover {
    background: #0079c0 !important;
    border-color: #00587b;
}
img.icon {max-height: 38px;}
.btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
}
/*===================== 
	typography 
=======================*/
.page-title h1 {
    color: #fff;
    text-shadow: 0px 0px 15px #00000080;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans JP', sans-serif;
	text-transform:uppercase;
	font-weight:900;
	color:#00587b;
	}

p {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	line-height:1.75;
	color:#00587b;
	}
.row.main-bg h2 {
    color: #fff;
}
	
h1 {
max-width:900px;	
}
		

h2 {
}

	
h3 {
}


h4 {
}


h5.sub-head {
    color: #cf0000;
}


h6 {
}

/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/
	}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #005b88; 
    text-decoration:none;
	transition: ease-in-ot 300ms;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		}  

/*===================== 
	header styles 
=======================*/
a.nav-link {color: #00587b !important;text-transform: uppercase;font-weight: 700;font-size: 14px;}
a.nav-link:hover {color:#389bcf !important;}
header {margin: 0 auto;width: 100%;}
div#headz {position: relative;z-index: 1001;border-bottom: solid 1px #fff;}
ul.navbar-nav.ml-auto {margin-bottom: 0px !important;}
/*===================== 
	nav styles 
=======================*/
.top-nav {background-color:#005b88; padding-top:15px;}





/*===================== 
	content styles 
=======================*/
ul.inline {list-style:none; width:300px; text-align:right; padding-right:15px;}
ul.inline > li  {display:inline;}
a.soc-cont { background-color:#ffc63e; padding:6px 9px; color:#005b88 !important; border-radius: 25px; margin-left:1em; transition: .5s;}
a.soc-cont:hover {background-color:#fff !important;}

.dash-left {top:49%; left:0px;}	
.dash-right {top:49%; right:0px;}

.manu-cta img {max-height: 80px; position: relative;}
	b, strong {color:#00587b !important}
/*===================== 
	slideshow styles 
=======================*/



/*===================== 
	banner styles 
=======================*/
.hero-png {max-width:760px;}
.about-bg {background-image:url('/siteart/banner-driving.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center;}
.product-bg {background-image:url('/siteart/banner-break.jpg'); background-size:cover; background-repeat:no-repeat; background-position:bottom; position:relative;}
.product-bg:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,
.3); z-index:1;}
.product-bg * {position:relative; z-index:101;}
.location-bg {background-image:url('/siteart/banner-shield.jpg'); background-size:cover; background-repeat:no-repeat; background-position:bottom;}
.contact-bg {background-image:url('/siteart/banner-driving.jpg'); background-size:cover; background-repeat:no-repeat; background-position:bottom;}
.bg-main {background: #efefef;}
img.img-fluid.offset {position: relative;top: -10px;right: 10px;}
/*===================== 
	layout styles 
=======================*/




/*===================== 
	footer styles 
=======================*/
ul.foot-nav li a {padding: 5px;color: #fff !important;font-size: 14px;}
ul.foot-nav li a:hover {color: #005b88 !important;}
ul.foot-nav li {display: inline-block;}
ul.foot-nav {display: inline;padding-left: 0px;list-style: none !important;}
footer {margin: 0;width: 100%;}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #222;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #fff;
		}

.footertext {font-size:13px; color:#666;}

.smallfootertext {font-size:10px; color:#666;}

.footer {
    background: #000;
    border-top: solid 2px #ffffff;
    box-shadow: 0px -5px 15px #0000002e;
}

/*========================= 
	 Responsive styles 
===========================*/

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {


}


/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	

}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {


}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 575px) {
 .cta-dlag {transform: none;}
 .cta-dlag h2 {transform: none;}
 .cta-dlag.left, .cta-dlag.right {position: relative;left: 0;margin: 0px;}
 div#brands .p-1 {padding: 10px !important;max-width: 200px;margin: 10px auto;}
 .center-cont {text-align: center;}
 body p {text-align: inherit;}

}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
 
 
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {


}