﻿@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,500,700);
/*===================== 
	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%;}
img{max-width:100%;height:auto;}
.padit{padding:25px 0;}
.white{color:#fff;}
.green{color:#6aad51;}
.yellow{color:#e9b637;}
.blue{color:#314d91;}
.shadow{text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);}

/* ROOT FONT STYLES */

* {
  font-family: 'Oswald', sans-serif;
  line-height: 1.5;
}

/* TYPOGRAPHY */

body{font-size:16px;}
header{padding:0 0 5px 0;}
.header-left{float:left;width:35%;box-sizing:border-box;padding:10px 0;}
.header-right{float:left;width:65%;box-sizing:border-box;padding:10px 0;}
.header-right h3{display:inline-block;vertical-align:top;margin-bottom:0;font-size:1.25em;}
.header-right a{text-decoration:none;color:#314d91;}
.address{text-align:right;padding-top:20px;padding-bottom:10px;}
h1,h2,h3,h4,h5,h6{color:#314d91;font-weight:700;text-transform:uppercase;margin-top:0;margin-bottom:15px;}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.375em;
}

h4 {
  font-size: 1.125em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.875em;
}

p {
  font-size: 1.125em;
  font-weight: 300;
  line-height: 1.5;
	margin:0 0 10px 0;
}

a{color:#314d91;}
a:hover{text-decoration:none;}

.categorybutton{display:block;padding:8px;background:#314d91;color:#fff;text-transform:uppercase;text-decoration:none;text-align:center;float:left;width:48%;box-sizing:border-box;margin:1%;}
.categorybutton:hover{background:#efc545;color:#fff;}
.categoryborder{border:#4d4d4d 1px solid;}

/*===================== 
	base styles 
=======================*/
.company-logo{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    font-style: italic;
}
.company-logo img{display:block;max-height:105px;}

.hero{background:url(../siteart/hero-bg.jpg) center center no-repeat;background-size:cover;padding:3% 0;border-bottom:#e9b637 4px solid;}
.hero h1{font-size:36px;}
.hero h3{font-size:18px;}
.hero a{color:#efc545;text-decoration:none;}
.hero a:hover{color:#6aad51;}

.border-green{float:left;width:33.333%;height:4px;background:#6aad51;}
.border-yellow{float:left;width:33.333%;height:4px;background:#e9b637;}
.border-blue{float:left;width:33.333%;height:4px;background:#446cb0;}

.welcome{}
.welcome p{line-height:1.3em;font-size:1em;}
.welcome-logos{text-align:center;}
.welcome-logos img{width:auto;max-height: 105px;margin: 10px 0;}

.welcome-left{float:left;width:50%;box-sizing:border-box;padding:1% 2% 1% 0;}
.welcome-right{float:left;width:50%;box-sizing:border-box;padding:1% 0 1% 2%;}

.linkbox{float:left;font-size:16px;width: 46%;margin: 0 0 0 0;box-sizing: border-box;height:280px;margin:2%;position:relative;overflow:hidden;background-position:center center;background-repeat:no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;text-align:center;}

.linkbox .textbox{text-align:center;width:90%;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);z-index:100;}
.linkbox .textbox h2{color:#fff;fline-height:1em;margin:0 0 0 0;text-transform:uppercase;}
.linkbox:after {content: " ";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.0; transition: .3s all;display:block;}
.linkbox:hover:after {opacity: 0.8;background: #0561c3;}

a .linkbox{color:#fff;-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
a:hover .linkbox{color:#000;}
.titlebox{background:#131e39;padding: 12px 0;z-index: 99;position: relative;}
.titlebox h2{color:#fff;font-size:24px;line-height: 1em;margin: 0;padding: 0;}

#gen-sets{background-image:url(../siteart/gen-sets.jpg);}
#engines{background-image:url(../siteart/engines.jpg);}
#power-plants{background-image:url(../siteart/power-plants.jpg);}
#accessories{background-image:url(../siteart/accessories.jpg);}

.logos{text-align:center;padding:1% 0;background:#f1f1f1;border-top:2px solid #262626;border-bottom:2px solid #262626;}
.logos img{margin:10px 30px;vertical-align:middle;opacity: 1;display:inline-block;}
.logos a:hover img:hover{opacity: .8;}

.poptitle{text-align:center;font-size:36px;}
.poptext{text-align:center;font-size:16px;padding-bottom:15px;}

/*===================== 
	Form styles 
=======================*/
.order-form{display:block;background:#fafafa;padding:15px;border:#ccc 1px solid;}

#formpage{padding:0 10px;}

.order-form form{
	margin:0 0 0;
}
.order-form label{
	display:block;
	font-size:16px;
	padding-top: 4%;
	width:100%;
}
.order-form input{
	border: #999999 solid 1px;
	border-radius: 2px;
	padding: 1%;
	font-size:14px;
	box-sizing:border-box;
	margin:0 1% 10px;
}
input.half{width:48%;float:left;}

input:focus{
	border: #2885b3 solid 1px;
}

input.button2{
	display:block;
	width:50%;
	margin:0 auto 20px;
	border: #6db054 solid 1px;
	background-color: #6db054;
	color:#fff;
	border-radius: 2px;
}

input.button2:hover{
	background-color:#e29912!important;
	cursor:pointer;
}

select{
	border: #999999 solid 1px;
	padding: 1%;
	font-size:14px;
	width:102%;
}
textarea{
	border: #999999 solid 1px;
	border-radius: 2px;
	padding: 1%;
	font-size:14px;
	width:98%;
	margin:0 1% 10px;
	box-sizing:border-box;
}

.CaptchaPanel {
    margin: 0px 0px 0px 0px !important;
    text-align: center;
    padding: 0px !important;
}

.CaptchaImagePanel,
.CaptchaMessagePanel,  
.CaptchaAnswerPanel, 
.CaptchaWhatsThisPanel {
	margin:0px 0px 0px !important;
	font-size: 12px;
	color: #000;
	text-align: left !important;
	font-weight:normal!important;
	padding:0px 0 0!important;
	box-sizing:border-box;
	}

.CaptchaImagePanel{float:left;margin-right:10px !important;}
.CaptchaMessagePanel{}
#CaptchaAnswer{margin:5px 0; width:50%;}
fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

.quicksearch{width: 220px;display:inline-block;margin-left: 15px;}
.quicksearch input {
    float: left;
    width: calc(100% - 65px) !important;
    height: 32px !important;
    margin: 0 0 0 0;
    border-radius: 0px !important;
    font-size: 12px !important;
    padding: 6px !important;
    line-height: normal !important;
    box-sizing: border-box;
}
.quicksearch .button2 {
    position: relative;
    width: 65px!important;
    height: 32px!important;
    float: left!important;
    margin: 0 0 0 0!important;
    border-radius: 0px!important;
    background-image: url(../siteart/search-icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #6db054!important;
}


.pagebottom{background:#131e39;}
.pagebottom h4{color:#fff;}
.pagebottom p{color:#fff;font-size: .8rem;}
.pagebottom a{color:#fff;}
.pagebottom a:hover{color:#efc545;}
.pagebottom i{color:#fff;font-size: 1.1rem;margin:5px 5px 0 0;}
.hosted-content .col{margin:0 0 0 0;}
.hosted-content input{width:auto;}
.hosted-content select{width:auto;}

/*===================== 
	Responsive styles 
=======================*/

@media screen and (max-width: 1024px) {
	body{font-size:16px;}
	.linkbox{font-size:11px;}
	.welcome-logos img{max-height: 65px;}
}
@media screen and (max-width: 960px) {
	.welcome-left{float:left;width:100%;box-sizing:border-box;padding:1% 0% 1% 0;}
	.welcome-right{float:left;width:100%;box-sizing:border-box;padding:1% 0 1% 0%;text-align:center;border-top:#ccc 1px solid;}
}

@media screen and (max-width: 740px) {
	.hero h3{font-size: 14px;}
	.header-left{float:left;width:50%;box-sizing:border-box;padding:10px 0;}
	.header-right{float:left;width:50%;box-sizing:border-box;padding:10px 0;}
	.quicksearch{display:none;}

}
@media screen and (max-width: 540px) {
	.titlebox h2{font-size: 18px;}
	.linkbox{height:190px;}
	.hero h1{font-size: 22px;}
	.hero h3{font-size: 12px;}
	.header-left{float:left;width:40%;box-sizing:border-box;padding:10px 0;}
	.header-right{float:left;width:60%;box-sizing:border-box;padding:10px 0;}
	.header-right h3{text-align:right;padding-top:0px;font-size:16px;}
	.address{padding-top:10px;}
	.header-right h3 span{display:none;}
	.company-logo span{display:none;}
	.categorybutton{width:98%;}

}

	
