/* 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: 'Oswald', sans-serif; font-size: 14px; -webkit-text-size-adjust: none}
::-moz-selection{background: #E00000; color: #fff; text-shadow: none} ::selection{background: #E00000; color: #fff; text-shadow: none}

.main{padding: 50px 0;}
.container{max-width: 1400px; margin: 0 auto; padding: 0 20px;}

.column12, .column11, .column10, .column9, .column8, .column7, .column6, .column5, .column4, .column3, .column2, .column1{float: left; padding: 0 35px 0 0;} .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;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{text-transform: uppercase;}
p{font-size: 18px; line-height: 26px;}
a{text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.blue{color: #0C1C8D;}
.bold{font-weight: 700;}

/* HEADER */

.header{padding: 20px 0;}
.header .logo{font-weight: 700; text-align: center;}
.header .logo span{position: relative; top: -20px;}
.header .locations{display: flex; max-width: 550px; margin: 20px auto; font-size: 24px; font-weight: 700; text-align: center; line-height: 30px; color: #333;}
.header .locations a:hover{opacity: .75;}
.header .locations div{flex: 1;}
.header .assistance{font-size: 24px; font-weight: 700; text-align: center; color: #E00000;}

/* NAVIGATION */

#cssmenu{background: #0C1C8D; position: relative; font-size: 0; text-align: center; border-top: 1px #fff solid; border-bottom: 1px #fff solid; z-index: 99999;}
#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: 15px 20px;}
#cssmenu ul li:hover > a{background: #2030A6;}
#cssmenu #menu-button{display: none;}

/* BODY */

.zoom-container{display: flex; flex-wrap: wrap;}
.zoom-container .zoom{width: 25%; position: relative; overflow: hidden; border: 1px solid #fff; box-sizing: border-box;}
.zoom-container .zoom img{display: block; width: 100%; height: auto; transition: all .5s ease;}
.zoom-container .zoom .zoom-caption{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .5); text-transform: uppercase; color: #fff; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); transition: all .5s ease;}
.zoom-container .zoom .zoom-caption .zoom-caption-text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 700; text-align: center; line-height: 32px;}
.zoom-container .zoom .zoom-caption .zoom-caption-text .products{font-size: 24px; font-weight: 400; line-height: 26px;}
.zoom-container .zoom:hover .zoom-caption{background: rgba(223,1,0,.75);}

.map{background: url("../siteart/map-bg.jpg"); background-size: cover; padding: 50px 0;}
.map h2{font-size: 30px; font-weight: 400; text-align: center; margin-bottom: 25px;}
.map ul{display: flex; flex-wrap: wrap; font-size: 18px; text-align: center;}
.map ul li{width: 33.3333%; padding: 5px;}
.map ul li:before{font-family: FontAwesome; content: '\f041'; margin-right: 10px;}
.map a{display: block; background: #0C1C8D; max-width: 350px; width: 100%; margin: 25px auto 0; padding: 15px; font-size: 18px; font-weight: 700; text-align: center; color: #fff;}
.map a:hover{background: #2030A6;}

.logo-container{padding: 20px 0; text-align: center; border-top: 1px #ddd solid;}
.logo-container div{display: inline-block; padding: 10px 20px; font-size: 16px; color: #333;}
.logo-container img{display: block; max-height: 60px; margin: 0 auto;}

.inventory-blurb{display: none; max-width: 1360px; background: #f5f5f5; margin: 25px auto 0; padding: 20px 20px 25px; border: 1px #ddd solid; border-radius: 3px;}
.inventory-blurb h1, .inventory-blurb h2{color: #0C1C8D; margin-bottom: 10px;}
.inventory-blurb ul{display: flex; flex-wrap: wrap;}
.inventory-blurb ul li{width: 33.3333%; padding: 5px; font-size: 18px;}
.inventory-blurb ul li:before{font-family: FontAwesome; content: '\f105'; margin-right: 10px;}

.bullet-list li{padding: 5px 0; font-size: 18px;}
.bullet-list li:before{font-family: FontAwesome; content: '\f105'; margin-right: 10px;}

img.fluid{display: block; width: 100%;}

/* FORM */

#form{background: #fafafa; padding: 25px; border: 1px #ddd solid;}
#form .form-row{display: block; margin: 0 0 5px;}
#form .form-row .label-left{float: left; width: 300px; padding-right: 25px;}
#form .form-row .input-right{float: left; width: calc(100% - 300px);}
#form .form-row .input-right label{margin-right: 15px; cursor: pointer;}
#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="checkbox"], #form input[type="radio"]{margin: 0 10px 25px 0;}
#form input[type="submit"]{display: block; width: 100%; max-width: 250px; background: #0C1C8D; margin: 5px auto; padding: 10px 0; font-family: 'Oswald', sans-serif; font-size: 14px; color: #fff; border: none; transition: all .2s ease-in-out; cursor: pointer;} #form input[type="submit"]:hover{background: #2030A6;}
#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 */

.footer{background: #333; padding: 50px 0; color: #fff;}
.footer strong{font-size: 18px; text-transform: uppercase;}
.footer a{text-transform: uppercase;} .footer a:hover{opacity: .5;}
.footer ul li{display: block; padding: 2px 0;}
.footer .divfooter{font-size: 10px; line-height: 18px;}
.footer .divfooter a{font-weight: 700;}
.footer .footertext, .footer .footerlink{display: inline-block; font-size: 11px; margin: 5px 0;}

/* RESPONSIVE */

@media screen and (max-width: 1024px){
	.main{padding: 30px 0;}
	
    #form .form-row .label-left, #form .form-row .input-right{float: none; width: 100%; padding: 0;}
    #form input[type="text"], #form input[type="email"], #form select, #form textarea{margin: 5px 0 10px;}
}
@media screen and (max-width: 840px){
	.hide-768{display: none;}
	.column8, .column6, .column4{width: 100%; padding: 0; margin-bottom: 15px;}
	
	#cssmenu{width: 100%; text-align: left;}
	#cssmenu ul{width: 100%; display: none;}
	#cssmenu ul li{width: 100%; border: none; border-top: 1px solid #ccc;}
	#cssmenu ul li a{background: #333; width: 100%; font-size: 12px; padding: 16px 20px;}
	#cssmenu #menu-button{display: block; padding: 20px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase;}
	#cssmenu #menu-button::after{position: absolute; top: 19px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
	
	.header .logo span{top: 0;}
	.header .locations{font-size: 18px; line-height: 24px;}
	.header .assistance{font-size: 20px; line-height: 24px;}
	
	.zoom-container .zoom{width: 50%;}
	.zoom-container .zoom .zoom-caption .zoom-caption-text{font-size: 20px; line-height: 28px;}
	.map h2{font-size: 20px;}
	.map ul li, .inventory-blurb ul li{width: 50%;}
	
	.footer .column2{width: 50%; margin-bottom: 25px;}
}
@media screen and (max-width: 480px){
	input, select{-webkit-appearance: none;}
	
	.map ul{text-align: left;}
	.map ul li, .inventory-blurb ul li{width: 100%; padding: 5px 0;}
	.footer{font-size: 12px;}
}