﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Open Sans', sans-serif; font-style:normal; line-height:normal; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:20px;}
ul {padding:0 0;}
.clear {clear: both; height:0px; margin:0;}

h1 {font-size:32px; line-height:40px; text-transform:uppercase; font-weight:700;}
h2 {font-size:28px; text-transform:uppercase; font-weight:700; line-height:1.75em;}
h3 {font-size:24px; font-weight:700; margin:5px 0; border-bottom:1px solid #ffee41; padding-bottom:5px;}
h4 {font-size:20px; text-transform:uppercase; color:#000; margin-top:5px;}
h5 {font-size:16px; font-weight:700; margin-bottom:2px;}
h6 {font-size:20px; font-weight:700; margin:20px 0 -3px; text-transform:uppercase;}

p {font-size:16px; line-height:1.75rem;}

a {text-decoration:none;}

/* BASIC STYLES */
body {overflow-x:hidden; background:#fff;}
#contentwrap {width:90%; margin:0 auto;}
#pagewrap {width:75%; margin:2% auto 30px;}

.breadwrap {background:#f5f5f5; width:100%; padding:0 0 0 1.5%; margin-bottom:30px;}
ul.breadcrumb {float:right; list-style: none; font-size: 14px;}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {padding: 3px; color: #000; content: "/\00a0";}
ul.breadcrumb li a {color: #0148e0;}


/* HEADER */
header {padding:10px 0 0;}
.logo {float:left; width:25%; padding:5px 0 10px;}
.logo img {width:100%;}
.headerright {float:right; text-align:right; width:50%; font-size:20px; padding:30px 0;}
.headerright a {color:#000;}
.socialmedia a {color:#fedd3b;}
.navwrap {background:#0148e0;}

.logo_col_one {display:inline-block; width:38%; text-align:center; vertical-align:middle;}
.logo_col_two {display:inline-block; width:60%; text-align:center; vertical-align:middle;}
.logo_col_two a {color:#0148e0; font-weight:700; font-size:26px;}

/* CONTENT STYLES */

/* EQUIP LINKS STYLES */
.equip-boxes {width:100%; display:block; box-sizing: border-box;}
.equip-thumb {width: 16.66%; height: 325px; float:left; position:relative; background-size:cover !important; overflow:hidden; box-sizing: border-box;}
.equip-links {width:96%; display:block; position:absolute; left:0px; top: 163px; background: rgba(254, 214, 19, 0.8); padding:8px 2%; height: 100%; -webkit-transform:translateY(128px); -moz-transform:translateY(128px); -ms-transform:translateY(128px); -o-transform:translateY(128px); transform:translateY(128px); -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; color: #000;  text-align: center;}
.equip-thumb:hover > .equip-links {top: 0px; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
.equip-thumb:active > .equip-links {top: 0px; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
.equip-links a {color:#000 !important;}
.equip-links a:hover {color:#474747 !important;}

.col_one {background:#0148e0; display:inline-block; width:33.1%; color:#fff; vertical-align:top; height:275px; padding:20px 0;}
.col_two {background:#0543c8; display:inline-block; width:33.2%; color:#fff; vertical-align:top; height:275px; padding:20px 0;}
.col_three {background:#1451d6; display:inline-block; width:33.2%; color:#fff; vertical-align:top; height:275px; padding:20px 0;}
 
.col_three h3 {font-size:18px;}

button {background:#213b73; color:#fff; padding:5px 0; width:150px; fontweight:700; margin-top:10px; cursor:pointer;}
button:hover {background:linear-gradient(#213b73, #26478d);}
.pagebtn {background:#fedd3b; color:#000; font-weight: 700;  padding:5px 0; width:400px; font-size:16px; fontweight:700; margin-top:10px; text-transform:uppercase; cursor:pointer;}
.pagebtn:hover {background:linear-gradient(#fedd3b, #eac928);}
.rightpagebtn {background:#fedd3b; display:block; color:#000; font-weight: 700;  padding:5px 0; width:100%; font-size:16px; fontweight:700; margin-top:5px; text-transform:uppercase; cursor:pointer;}
.rightpagebtn:hover {background:linear-gradient(#fedd3b, #eac928);}

.team_col {display:inline-block; width:30%; margin:.25% .5% .25% 0; border:1px solid #ccc; padding:1%;}
.team_col a {color:#0148e0;}


#main {width:100%;}
#main img {width:100%;}

.pageleft {float:left; width:60%;}
.pageright {float:right; width:30%;}
.pageright img {width:100%;}
.pageleftimage {display:inline-block; width:15%; vertical-align:top;}
.pageleftimage img {width:100%;}
.pagetext {display:inline-block; width:70%; margin-left:2%; vertical-align:top;}


/* PARTS BANNER */

.parts-banner{
	display: flex; 
	justify-content: center;
	align-items: center;
	background: #0148e0;
	gap: 40px;
}
.parts-banner a{
	padding: 18px 12px;
	text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    line-height: normal;
	
	font-size: 14px;
	background: #213b73;
	display: block;
	max-width: 300px;
    width: 100%;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 5px;
	color: #fff;
}
.parts-banner img{
	max-width: 80%;
	margin: -30px 20px;
	z-index: 400;
	width: 280px;
}

/* ZOOM */
.zoom-container {
	float:left;
	width: 20%;
	position: relative;
	overflow: hidden;
	display: inline-block;
	border: 1px solid #fff;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.zoom-container img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.zoom-container .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, .6);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.zoom-container .zoom-caption h4 {display: block; text-align: center; font-size: 22px; text-transform: uppercase; font-weight:bold; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); width:95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.zoom-container:hover .zoom-caption {background: none;}



 /* FORM */
#formpage {vertical-align:top;}
#formpage div {vertical-align:top; padding:5px;}

.field {display:inline-block; width:49%; margin:0 .5% 0 0;}

#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
.field {display:inline-block; width:49%; margin:0 .5% 0 0;}
 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#8e8d8d; vertical-align:middle; font-size:12px; line-height:normal; padding:6px 5px; width:98%;}
#formpage input  {width:98%;}
#formpage input.larger  {width:98%;}
#formpage textarea {width:98%; height:85px;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #74ac3d; outline-style:none;}
 
#formpage input.button,#formpage input.button:focus {width:430px; margin:0; padding:10px 0; background:#292929; border:2px #292929 solid; font-size:16px; font-weight:bold; color:#fff;}
#formpage input.button:hover {background:linear-gradient(#74ac3d, #6b9c3b); color:#fff; text-shadow:none; border:2px #74ac3d solid;}

/*control the Captcha */
.captcha {width:450px; margin:0;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px;}
.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;}  
   

/* FOOTER */
footer {background:#0148e0; color:#fff; font-size:15px; margin-top:-10px;}
footer a {color:#fff; line-height:25px;}
footer a:hover {color:#fed613;}
.col_three_foot {display:inline-block; width:32.5%; vertical-align:top;}
.col_left {float:left; width:50%; padding-top:30px;}
.col_right {float:right; width: 50%;}
#colorblock {background:#fed613; color:#000; padding:10px 0; margin-top:-5px;}
#colorblock a {color:#000;}
  
/************************************************ Responsive Styles **/

@media screen and (max-width: 1780px)  {
.logo_col_one {width:37%;}
.logo_col_two a {font-size:22px;}
.logo {width:30%;}

.col_one {width:32.6%; height:325px;}
.col_two {width:33%; height:325px;}
.col_three {width:32.6%; height:325px;}

.team_col {width:46%;}	
	
}

@media screen and (max-width: 1280px)  {
h1 {font-size:28px;}
h3 {font-size:22px;}
p {font-size:14px; line-height:24px;} 

.logo {width:50%;}
.headerright {width:30%; padding-top:12px;}
	
.rightpagebtn {font-size:14px;}	
	
}

@media screen and (max-width: 1024px)  {
#pagewrap {width:90%; margin:2% auto 20px;}
.equip-thumb {width: 33.33%;}

.logo {width:48%;}
.headerright {width:50%; padding-top:12px;}

.col_left {float:none; width:100%; font-size:12px; padding-bottom:30px;}	
.col_right {float:none; width:100%; margin-top:0;}	

.rightpagebtn {font-size:12px;}	
	
.zoom-container {width: 33.33%;}
.zoom-container .zoom-caption h4 {font-size:18px;}	

.pageleftimage {display:block; width:25%; margin:0 auto;}	
.pagetext {display:block; width:100%;}	

.team_col {display:block; width:94%; margin-bottom:1%; padding:3%;}	

}


@media screen and (max-width: 780px)  {
	
.parts-banner{
	flex-wrap: wrap;
	gap: 20px;
	padding: 0 20px 30px;
}
.parts-banner img{
	margin-bottom: 0;
	margin-top: -50px;
}
.parts-banner a{
	max-width: unset;
	padding: 12px;
}
	
h1 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
p {font-size:12px; line-height:18px;} 

.logo {width:25%;}
.logo_col_one {display:block; width:100%;}
.logo_col_two {display:block; width:100%; text-align:left;}
.logo_col_two a {font-size:11px;}	
	
.headerright {width:60%; padding-top:12px;}

.equip-thumb {width: 50%;}

.col_one {display:block; width:100%; height:auto;}
.col_two {display:block; width:100%; height:auto;}
.col_three {display:block; width:100%; height:auto;}
	
button {font-size:12px; padding:5px 0; margin-top:10px;}	
	
.zoom-container {width: 50%;}
.zoom-container .zoom-caption h4 {font-size:16px;}	
	
.promo {width:100%;}	
	
.pageleftimage {width:50%;}	
	
#colorblock {font-size:12px;}
#colorblock a {font-size:12px;}
	
}

@media screen and (max-width: 500px)  {
.logo {width:30%;}
	
.col_three {display:block; width:100%;}
	
.equip-thumb {width: 100%;}
	
.pageleft {float:none; width:100%;}
.pageright {float:none; width:100%; margin-top:10px;}
	
.pagebtn {width:100%;}	
		
.col_three_foot {display:block; width:100%; margin-bottom:10px;}
	
}

@media screen and (max-width: 375px)  {
	
.zoom-container {float:none; width: 100%;}
	
button {width:100%;}
	
}





