/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0;} ol, ul{list-style: none;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

/* FRAMEWORK */

html, body{font-family: industry, sans-serif; font-size: 14px; -webkit-text-size-adjust: none}
::-moz-selection{background: #17426C; color: #fff; text-shadow: none} ::selection{background: #17426C; color: #fff; text-shadow: none}

.main{background: url("../siteart/bg.jpg"); min-height: 700px; padding: 50px 0;}
.container{max-width: 1400px; margin: 0 auto; padding: 0 20px;}
hr{border: none; border-top: 1px #ddd solid; margin: 25px 0;}

.column12, .column11, .column10, .column9, .column8, .column7, .column6, .column5, .column4, .column3, .column2, .column1{float: left; padding-right: 25px;} .column12{width: 100%;} .column11{width: 91.6666%;} .column10{width: 83.3333%;} .column9{width: 75%;} .column8{width: 66.6666%;} .column7{width: 58.3333%;} .column6{width: 50%;} .column5{width: 41.6666%;} .column4{width: 33.3333%;} .column3{width: 25%;} .column2{width: 16.6666%;} .column1{width: 8.3333%;} .last{padding: 0;} .cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}

.border-left{border-left: 1px #ddd solid; padding-left: 25px;}
.img-right{float: right; padding: 0 0 25px 25px;}

/* TYPOGRAPHY */

h1{font-size: 30px;}
h2{font-size: 24px;}
h3{font-size: 20px;}

p{font-size: 16px; line-height: 26px;}
a{text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.blue{color: #17426C;}
.red{color: #A61515;}
.italic{font-style: italic;}

.btn{display: block; background: #17426C; width: 300px; padding: 12px; font-weight: 700; text-align: center; color: #fff;}
.btn:hover{background: #285683; color: #fff;}

/* HEADER */
.header .container {padding: 0 20px!important;}
.header .logo{float: left; width: 250px; padding: 5px 0;}
.header .phone{float: right; padding: 40px 0; line-height: 32px;}
.header .phone a{font-size: 24px; font-weight: 700; color: #17426C;}
.header .phone a:hover{opacity: .5;}
.header .phone a:before{font-family: FontAwesome; content: '\f095'; padding-right: 15px;}

/* NAVIGATION */

#cssmenu{display: block; background: #17426C; position: relative; font-size: 0; text-align: center; z-index: 999; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); border-bottom: 1px #fff solid;}
#cssmenu ul li{display: inline-block; position: relative;}
#cssmenu ul li a{display: block; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; padding: 18px 15px 13px; border-bottom: 5px transparent solid;}
#cssmenu ul li:hover > a{border-bottom: 5px #fff solid;}
#cssmenu #menu-button{display: none;}

/* BODY */

.welcome{font-size: 20px; font-style: italic; text-transform: uppercase; color: #17426C;}
.brands{margin-top: 50px;}
.brands img{transition: all .2s ease-in-out;}
.brands img:hover{opacity: .5;}
.brands h3{font-style: italic; text-transform: uppercase; color: #17426C;}
.brands h3 .fa{margin-right: 5px; color: #FE0000;}

/* FORM */

#form{background: #fafafa; padding: 25px; border: 1px #ddd solid;}
#form .column6 .column6{padding-right: 5px;}
#form input[type="text"], #form input[type="email"], #form select, #form textarea{width: 100%; margin: 5px 0 20px; padding: 10px 5px; border: 1px solid #ccc;}
#form input[type="submit"]{display: block; width: 100%; max-width: 250px; background: #17426C; margin: 5px auto; padding: 10px 0; font-family: industry, sans-serif; font-size: 14px; font-weight: 700; color: #fff; border: none; transition: all .2s ease-in-out; cursor: pointer;} #form input[type="submit"]:hover{background: #333;}
#form textarea{height: 90px;}

.CaptchaPanel{margin: 0 !important; padding: 0 !important; line-height: normal !important;}
.CaptchaAnswerPanel input{width: 250px; max-width: 100%; padding: 5px; margin: 5px 0;}
.CaptchaMessagePanel{padding: 0 !important; margin: 0 !important; font-weight: normal !important; font-size: 12px; line-height: 14px;}
.CaptchaAnswerPanel{margin: 0; padding: 2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel{line-height: 0; margin: 0; padding: 8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a{font-size: 12px; color: #000;} .CaptchaWhatsThisPanel a:hover{text-decoration: none;}

/* FOOTER */

.scrolling-wrap{position: relative; width: 100%; height: 110px; border-top: 10px #17426C solid; border-bottom: 10px #17426C solid;}
.scrolling-wrap .scroll-banner{display: flex; position: relative; top: -10px; background: #17426C; height: 110px; width: 250px; transform: skew(20deg); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); z-index: 99; transition: all .2s ease-in-out;}
.scrolling-wrap .scroll-banner:hover{background: #285683;}
.scrolling-wrap .scroll-banner a{width: 100%; height: 100%; padding: 32px 0; font-size: 16px; text-transform: uppercase; text-align: center; line-height: 22px; color: #fff; transform: skew(-20deg);}
.scrolling-wrap .scroll-banner a strong{display: block; font-size: 18px;}
.scrolling-wrap .scrolling{position: absolute; top: 0; width: 100%; height: 90px; z-index: 0}

.footer{background: #000; padding: 25px 0;font-size: 12px; text-align: center; line-height: 18px; color: #fff;}

/* RESPONSIVE */

@media screen and (max-width: 1024px){
	.main{padding: 30px 0;}
	#cssmenu ul li a{font-size: 14px; padding: 15px 10px 10px;}
}
@media screen and (max-width: 768px){
	.img-right{float: none; padding: 0;}
	.mobile-center{text-align: center;}
	.column9, .column3{float: none; width: 100%; padding-right: 0; margin-bottom: 15px;}
	.border-left{border-left: none; border-top: 1px #ddd solid; padding-left: 0; padding-top: 25px;}

	#cssmenu ul{display: none; text-align: left;}
	#cssmenu ul li{display: block; border-top: 1px #555 solid;}
	#cssmenu ul li a{background: #333; padding: 15px 20px; font-size: 12px; color: #fff; border-bottom: none;}
	#cssmenu ul li:hover > a{background: #444; border-bottom: none;}
	#cssmenu #menu-button{display: block; background: #17426C; padding: 15px 20px; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; color: #fff; cursor: pointer;}
	#cssmenu #menu-button:after{position: absolute; top: 16px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
	#cssmenu #menu-button.menu-opened:after{content: '\f00d';}

	.header .contact a{font-size: 20px;}
}
@media screen and (max-width: 600px){
	#form .column12, #form .column6{float: none; width: 100%; padding: 0;}
	#form .column6 .column6{padding-right: 0;}

	.header .logo{float: none; width: 100%; padding: 10px 0 0; text-align: center;}
	.header .phone{float: none; width: 100%; padding: 0 0 10px 0; text-align: center;}
	.header .phone div{display: inline; padding: 0 7px;}
	.header .phone a{font-size: 14px;}
	.header .phone a:before{padding-right: 10px;}
}