﻿/*===================== 
	Color information
	
	-
	-
	-
	-
		 
=======================*/
/* 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;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

html, body{font-family: 'Open Sans', sans-serif; line-height: 1.5; height: 100%; width: 100%;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}

.sidebarColumn{min-height: inherit !important;}
.main{padding: 35px 0;}
.wrap{max-width: 1240px; margin: 0 auto; padding: 0 20px;}

.prevButton-container-home-buttons, .nextButton-container-home-buttons{display: none;}

.main .wrap .col-sm-11, .main .wrap .col-sm-10, .main .wrap .col-sm-9, .main .wrap .col-sm-8, .main .wrap .col-sm-7, .main .wrap .col-sm-6, .main .wrap .col-sm-5, .main .wrap .col-sm-4, .main .wrap .col-sm-3, .main .wrap .col-sm-2, .main .wrap .col-sm-1{padding-right: 20px !important;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-weight: 700;}
h1{color: #013092; font-size: 36px; padding:2% 0 1% 0;}
h2{font-size: 28px; padding:0;}
h3{font-size: 24px; padding:0;}
h4{color: #000; font-size: 18px; padding:0 0 1% 0;}
p{font-size: 16px; padding:1% 0 0 0;}

a{transition: all .2s ease-in-out; text-decoration: none; color:inherit;}
a:hover{text-decoration: underline;}
.bold{font-weight: 700;}
.white{color:#fff;}
.blue{color:#013092;}


/* HEADER */

.header{display: block; background: #000 url("/siteart/xl-trucks-bg.jpg") top center repeat-x; color: #fff;}
.header .sidebarColumn{min-height: inherit !important;}
.header a{color: #fff;} .header a:hover{color: #5288E2;}
.header .wrap{display: flex; align-items: center; flex-wrap: wrap; width: 100%;}

.header .contact{width: 100%; padding: 12px 0 0; font-size: 14px; text-align: right;}
.header .contact span{margin: 0 5px; opacity: .5;}
.header .logo{margin: -35px 0 5px;}
.header .main-manus img{display: inline-block; margin: 0 15px;}
.header .phone{margin-left: auto; font-size: 44px; font-weight: 800; text-transform: uppercase;}

/* HOME */

.parallax-window{min-height: 500px; background:url("../siteart/hero.jpg") no-repeat; background-size: cover;}
.hero{display: flex; width: 100%; height: 500px; padding: 0 20px; justify-content: center; align-items: center;}
.hero h1{font-size: 48px; margin-bottom: 15px; color: #fff;}
.hero p{font-size: 24px; color: #fff;}
.hero a{display: inline-block; margin-top: 15px; background: #013092; padding: 10px 50px; font-size: 20px; text-align: center; color: #fff; border-radius: 5px;}
.hero a:hover{background: #00287B;}

.post-container-home-buttons{display: flex; flex-wrap: wrap;}
.column-padding-home-buttons{width: calc(33.3333% - 10px); margin: 5px;}

.home-btn a{display: flex; align-items: center; justify-content: center; padding: 35px 15px; color: #fff;}
.home-btn a:hover{color: #5288E2;}
.home-btn img{position: absolute; z-index: 0;}
.home-btn h3{position: relative; font-size: 24px; font-weight: 800; text-transform: uppercase; z-index: 9;}

/* BODY */

.grey-box{padding: 20px; border: 1px #ddd solid; margin:2% 0;}

.contactForm h1{display: none;}
.contactForm .btn-success, .contactForm .btn-success:focus, .contactForm .btn-success:hover{background-color: #013092 !important; border-color: #013092 !important; font-weight: 700; color: #fff;}
.contactForm .contactFormLabel{font-size: 14px;}
.contactForm .form-control{height: auto; margin-top: 5px; padding: 10px;}

.wrap{width:100%;}
.container{max-width: 1300px; margin: auto; box-sizing: border-box; padding: 1% 2%;}

.flex-col{display: flex; flex-direction: row;}
.col-1-6 { width: 16%; box-sizing:border-box;}
.col-1-5 { width: 20%; box-sizing:border-box;}
.col-1-4 { width: 24%; box-sizing:border-box;}
.col-1-3 { width: 33%; box-sizing:border-box; padding:2%;}
.col-1-2 { width: 49%; box-sizing:border-box;}
.col-2-3 { width: 65%; box-sizing:border-box;}
.col-3-4 { width: 75%; box-sizing:border-box;}

/*===================== 
	Form styles 
=======================*/

.field {margin:6px;}
.field-half {float:left; width:calc(50% - 12px); margin:6px;}
.field-third {float:left; width:calc(33.33% - 12px); margin:6px;}
#required {color:#636466;}
input.text {padding:5px 0; border:1px solid #000;}
select {width:101.5%; padding:5px 0; border:1px solid #000;}
textarea {width:calc(100% - 25px); margin:6px; border:1px solid #333; padding:10px; font-family: 'Roboto Condensed', sans-serif; colpr:#000; height:80px;}
input.button{float:left; width:350px; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; text-align:center; font-size:16px;  padding:0 20px; background:#404040; border:0; margin:2px 0;}
input.button:hover {background-position:bottom; cursor:pointer; background:linear-gradient(#0f3c6c, #0F2F5B);}
form h3 {text-align: center; background: #0f3c6c; color: #fff; padding: 10px; margin: 20px 0; letter-spacing: 1px; clear: both;}

.sign-up {padding:10px 0; width:100%; margin-bottom:30px; }
.sign-up p {font-weight:bold; text-transform:uppercase; }
.sign-up input.text {width:100%; background:#fff; color:#000; margin-bottom:10px; padding-left:5px;}

a.button {width:350px; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; display:block; text-align:center; padding:0 0; float:left; background:#404040;margin:5px 0 10px;display:block!important;}
a.button:hover {background-position:bottom; text-decoration:none; color:#fff; background:linear-gradient(#0f3c6c, #0F2F5B);}

.CaptchaWhatsThisPanel a {color:#000!important; font-size:12px;}
.CaptchaMessagePanel {font-weight:normal!important; font-size:12px;}
.CaptchaAnswerPanel {padding:5px !important; border:1px solid #ccc; background:#fff; color:#000 !important; text-align:left;}
.CaptchaPanel {width:350px; text-align:left!important; display:block!important; padding:0!important;}
.CaptchaImage {text-align:left!important; display:block!important; width:60%;}

/* FOOTER */

.footer-flex{display: flex; flex-direction: row; flex-wrap: nowrap;}
.scrolling-wrap{background: url("/siteart/texture.png"); width: 100%; padding: 20px 0; border-top: 4px #ccc solid;}
.scrolling{width: 100%; height: 92px;}

.top-footer{background: url("/siteart/footer.jpg") center center no-repeat; background-size: cover; padding: 50px 0; line-height: 1.75; color: #fff;}
.top-footer .col-sm-3{padding-right: 20px !important;}
.top-footer h3{margin-bottom: 15px;}
.top-footer a{color: #fff;} .top-footer a:hover{color: #5288E2;}

footer{background: #013092; padding: 50px 0; text-align: center; font-size: 12px; color: #fff;}
footer a{text-decoration: underline; color: #fff;} .footer a:hover{text-decoration: none;}
footer .wrap{max-width: 750px;}

/* ANIMATIONS */

.scale-in-center{
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center{
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center{
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.slide-in-right{
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-right{
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right{
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/* RESPONSIVE */

@media screen and (max-width: 1200px){
	.header .phone{font-size: 24px;}
}
@media screen and (max-width: 1012px){
	.header{padding: 0 0 15px 0;}
	.header .phone{width: 100%; text-align: center; order: 4;}
	.header .main-manus{display: none;}
	
	.header .logo{width: 100%; text-align: center; margin: 0;}
	.header .logo img{margin: 0 auto;}
	.header .contact{text-align: center; order: 3;}
}
@media screen and (max-width: 768px){
	.main .wrap .col-sm-11, .main .wrap .col-sm-10, .main .wrap .col-sm-9, .main .wrap .col-sm-8, .main .wrap .col-sm-7, .main .wrap .col-sm-6, .main .wrap .col-sm-5, .main .wrap .col-sm-4, .main .wrap .col-sm-3, .main .wrap .col-sm-2, .main .wrap .col-sm-1{margin-bottom: 15px; padding-right: 0 !important;}
	
	.field, .field-half, form h3 {width:100%;}
textarea {width: 97.5%;}
	
	.parallax-window{min-height: 300px;}
	.hero{height: 300px;}
	.hero h1{font-size: 36px;}
	.hero p{font-size: 20px;}
	.column-padding-home-buttons{width: 100%; margin: 5px 0;}
	.col-1-3 { width: 50%; box-sizing:border-box; padding:1%;}
	.footer-flex{display: flex; flex-direction: row; flex-wrap: wrap;}
	.flex-col{flex-direction: column;}
}
@media screen and (max-width: 480px){
	.header{background: #000;}
	.top-footer{font-size: 13px; line-height: 1.5;}
}