@charset "utf-8";
/* CSS Document */

html, body {
	box-sizing:border-box;
	height:100%;
	margin:0;
	padding:0;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	background: #f9f9f9;
	color: #555;
	font-family: 'Roboto', sans-serif;
	font-size: 17.5px;
	line-height: 1.65;
	overflow-x: hidden;
}

.bg-primary { 
	background:#005ea8!important
}

.top-left-bg {
	background: url("../images/WING-TopL.png") left bottom no-repeat;
}
.navbar {
   
    padding-top: 12px!important;
    padding-bottom: 12px!important;
}
/*  ANCHOR TAGS  */

a:hover, a:active, a:focus {
	color: #555;
	text-decoration: none;
}

a:visited {
	color:#06539b;

}

a:link {
	color: #06539b;
	text-decoration: none;
}
.content a {
	color: #5e9732;
}

/*  BASICS  */

p {
    margin: 0 0 1.5em 0;
    line-height: 1.65;
    text-align: justify;
}

p.title {
	font-weight:700;
	line-height:1.1;
	margin:0;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin-bottom: 0;
	font-family: 'Montserrat', sans-serif;

}

h1, .h1 {
	color: #201d1d;
	font-size: 2em;
	padding-bottom: .5em;
	letter-spacing: -.7px;
}

h2, .h2 {
	color: #007dc3!important;
	font-size: 1.75rem;
	}
	
h2 a {
	color: #007dc3!important;
}	

h3, .h3 {
	color: #000;
	font-size: 1.5rem;
	padding-bottom:.5rem;
	margin-top:1rem;
}

h4, .h4 {
	font-size: 1.25rem;
	color: #939393!important;
	text-transform: uppercase;
}

h5, .h5 {
	font-size: 1rem;
	color: #5e9732!important;
	font-weight: 500;
}

h6, .h6 {
	font-size: 1rem;
	color: #00529c!important;
	font-weight: 500;
}

form, iframe {
	border:0 none;
	display:block;
	padding-top:0;
}

label {
    font-weight: normal;
    font-family: 'Roboto';
    font-size: 90%;
    text-transform: uppercase;
}

/*  LISTS  */

ul, ol, li {
	margin:0;
	padding:0px 0 0 40px;
}


li {
    padding-left: 17px;
}
li:last-child {
    padding-bottom: 0;
}


/* breadcrumbs */

#breadcrumb {
    font-size: 90%;
    padding: 1.5em 0 1em;
    margin: 0;
    display: inline-block;
}

#breadcrumb li+li:before {
    content: '>';
    margin: 0 10px 0 0;
}

#breadcrumb li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding-right: 15px;
    padding-left: 0;

}

#breadcrumb li:before {
    content: '';
    font-family: '';
    float: left;
    margin-left: -1.65em;
    color: #000;
}

/* Background Colors */

.clr-ltblue {
	color:#54bceb;
}

.clr-bg-ltblue {
	background-color:#54bceb;
}

.clr-bg-vlb {
	background-color:#b9e0f7;
}

.clr-green {
	color:#5e9732;
}

.clr-bg-green {
	background-color:#5e9732;
}

.clr-orange {
	color:#f47b20;
} 

.clr-bg-orange {
	background-color:#f47b20;
}

.clr-yellow {
	color:#d9c826;
}

.clr-bg-yellow {
	background-color:#d9c826;
}

.clr-bg-darkblue {background: #06539b;}

.clr-wpt {
	color:#00529c !important;
}

.clr-bg-wpt {
	background-color:#00529c !important;
}

.clr-285 {
	color:#007DC3;
} 

.clr-bg-285 {
	background-color:#007DC3;
}

.clr-white {
	color:#fff !important;
}

.clr-bg-white {
	background-color:#fff;
}

.clr-ltg {
	color:#dadada;
}

.clr-bg-ltg {
	background-color:#dadada;
}

.clr-bg-vlg {
	background-color:#e3e3e3;
}

.clr-mdg {
	color:#949ca1;
} /* 430C */

.clr-bg-mdg {
	background-color:#949ca1;
}

.clr-dkg {
	color:#596885;
} /* FPO */

.clr-bg-dkg {
	background-color:#596885;
}

.clr-br-dkg {
	border:1px solid #596885;
}

.clr-bg-grey {
	box-shadow:inset 1px -20px 130px 14px rgba(185, 224, 247, 0.32);
	background: rgba(255, 255, 255, 0.1);
	padding: 0 1em;
}

.clr-ld, .clr-ltblue {
	color:#54bceb;
} /* light-blue 2915C */

.clr-bg-ld, .clr-bg-ltblue {
	background-color:#54bceb;
}

.clr-bg-vlb {
	background-color:#b9e0f7;
} /* very light-blue 290C */

.clr-hhp, .clr-green {
	color:#5e9732;
} /* green 370C */

.clr-bg-hhp, .clr-bg-green {
	background-color:#5e9732;
}

.clr-hd, .clr-orange {
	color:#f47b20;
} /* orange 166C */

.clr-bg-hd, .clr-bg-orange {
	background-color:#f47b20;
}

.clr-md, .clr-yellow {
	color:#d9c826;
} /* yellow 611C */

.clr-bg-md, .clr-bg-yellow {
	background-color:#d9c826;
}

.clr-wpt {
	color:#00529c !important;
} /* dark-blue */

.clr-bg-wpt {
	background-color:#00529c !important;
}

.clr-white {
	color:#fff !important;
}

.clr-bg-white {
	background-color:#fff;
}

.clr-ltg {
	color:#dadada;
}

.clr-bg-ltg {
	background-color:#dadada;
}

.clr-bg-vlg {
	background-color:#f2f2f2;
}

.clr-mdg {
	color:#949ca1;
}
/* 430C */
.clr-bg-mdg {
	background-color:#949ca1;
}

.clr-dkg {
	color:#888;
}

.clr-bg-dkg {
	background-color:#888;
}

.clr-bg-vdg {
	background-color:#222;
}

.clr-br-dkg {
	border:1px solid #888;
}

.clr-wcp {
	color:#73C167;
}

.clr-wpt-ld, .clr-285 {
	color:#007DC3;
} 

.clr-bg-wpt-ld, .clr-bg-285 {
	background-color:#007DC3;
}

.clr-bg-cng {
	background-color:#417a9b;
}

.clr-bg-grey {
	background-color:#CCC;
}

.clr-red, .clr-186 {
	color:#cc092f !important;
}

.clr-bg {
	background-color:#e3e3e3;
}
}
/* Text sizes & format */

.text-xsmall {
	font-size:70%;
}

.text-smaller {
	font-size:75%;
}

.text-small {
	font-size:90%;
}

.text-large {
	font-size:110%;
}

.text-xlarge {
	font-size:125%;
}


/* Quick Modifiers */


.bullet {
	color:#ccc;
	font-weight:700;
	margin:0 10px;
}

.bordered {
	border: 1px solid #dadada;
}

.cm {
	margin-left:auto;
	margin-right:auto;
}

.c {
	text-align:center!important;
}

.dib {
	margin:0
}

.error {
    color: #cc0000;
    margin: 0;
    font-size: 90%;
}

.error-box {
	background-color:#cc0000;
	display:inline-block;
	padding:0.5em;
	text-align:center;
}

.error-box .error {
	color:#fff;
}

.fl {
	float:left !important;
}

.flm {
	float:left !important;
	margin-bottom:1em;
	margin-right:1em;
}

.fr {
	float:right !important;
}

.frm {
	float:right !important;
	margin-left:1em;
	margin-bottom:0.25em;
	padding: 0 1em;
}

.hidden, .hide {
	display:none;
}

.l {
	text-align:left !important;
}

.lh1 {
	line-height:1;
}

.margined {
	margin:10px;
}

.mb0{
    margin-bottom:0!important;
}

.b0 {
	border:0!important;
}

.mb {
	margin-bottom:1.5em !important;
}

.mb-no-mt {
    margin: 0 0 1.5em 0  !important;
}

.mb2 {
	margin-bottom:2.5em !important;
}

.mb5 {
	margin-bottom:.5em !important;
}

.mb25 {
	margin-bottom:.25em !important;
}

.mt {
	margin-top:1em !important;
}

.mt2 {
	margin-top:2em !important;
}
.mr {
    margin-right: .5em;
}

.nomargin {
	margin:0 !important;
}

.nmt {
	margin-top:0!important;
}

.oh {
	overflow:hidden;
}

.pad5 {
	padding: 5px;
}

.paddedTable {
	padding:10px;
}

.padded-thumb {
	padding:10px;
}

.plain {
	font-weight:normal;
	text-decoration:none;
}

.wb{
    border:1px solid #FFF;
}

.r {
	text-align:right;
}

.tl {
    text-align:left!important;
}

.white{
    color:#FFF!important;
}

.pt {
    padding-top:2em;
}

.shadowed {
	box-shadow: 0 5px 9px -5px #4B4B4B;
}

.vbase {
	vertical-align:baseline !important;
}

.vmid {
	vertical-align:middle !important;
}


.brochure {
	border:1px solid #ccc;
	display:inline-block;
	height:320px;
	overflow:hidden;
	position:relative;
	width:200px;
}

.brochure .title {
	display:none;
}

.brochure:hover .title {
	display:block;
}




*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-top: 1px solid #eee;
}

.sbt {border-top: 1px solid #ddd}
.sbt2 {border-top: 2px solid #ccc}
.sbb {border-bottom: 1px solid #ddd;}
.sbb2 {border-bottom: 2px solid #ccc;}
.sbl {border-left: 1px solid #ddd;}
.sbr {border-right: 1px solid #ddd;}
.dbt {
	border-top: 4px double #bbb;
}

.dbb {
	border-bottom: 4px double #bbb;
}
.pl {padding-left:2em!important;}

.fi1 {width:110px;}
.fi2 {width:140px;}
.fi3 {width:115px;}
.fi4 {width:80px;}
.fi5 {width:170px;}
.fi6 {width:50px;}
.fi7 {width:60px;}


b, strong {
    font-weight:600;
}

.p0
{padding:0!important;}

.pr0 {
	padding-right: 0;
}
.q185 {border-right: 1px solid #ccc;padding-right: 2em;margin-bottom:2em;}

.bg-dark {background-color:#06539b!important;}
#wing-logo-sm {padding: 1em 0;max-width: 130px;float: left;display:none;}
@media only screen and (max-width: 1140px) {

.q185 {margin-left: 0; border-right: 0;padding-right: 0;margin-bottom:2em;}
#wing-logo-sm {display:block}


}

@media only screen and (max-width:1200px){
  ul#topnav li{padding-left:11px;}

}
.navbar .megamenu{ padding: 1rem; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
  }
   ul#topnav li {
    float: left;
    width: 100%;
    padding-bottom: 1em;
}
  .col-lg-4.d-sm-none.d-md-none.d-lg-block.top-left-bg {display:none}
  #toparea {text-align:center!important}
  
}
/* ============ mobile view .end// ============ */

.nav-link {
	padding:0!important
}

.padded{
	padding: 0.5em
}

#main_nav ul {
	list-style: none;
	padding-left: 0;
}

.dropdown-item {
    font-weight: 500;
    color: #52bae5!important;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
	display: block;
}


#stock-prices h3 {
	font-size:1.4em;
	padding-top:.25em;
	padding-bottom:.25em;
	margin-bottom:0;
}

.flat-blockquote {
	color: #252525;
	background: #FFE66B;
	text-align: justify;
    border-left: 12px solid #EF911C;
	position: relative;
	max-width: 500px;
	width: 100%;
	padding: 40px 60px 30px 70px;
	margin: 0;
}

.flat-blockquote:before {
	font-size: 220%;
	display:block;
	position: absolute;
}

.word {
	width: 100%;
	margin-right: 0;
	height: 8px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	border-top: 1px solid rgba(0,0,0,0.4);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
	-webkit-mask-box-image: -webkit-gradient(linear,left top,right top,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
}

.shadowtop {
	width: 100%;
	margin-right: 0;
	height: 15px;
	position: absolute;
	border-top: 1px solid rgba(0,0,0,0.4);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
	-webkit-mask-box-image: -webkit-gradient(linear,left top,right top,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
}

ul.cd-hero-slider, ul.breadth-of-reach {
	margin: 0;
}

ul.dot4 {
	padding-top: .75em;
}


li.step1.active.self {
	background: none;
}

.col-md-2.col-md-pull-10 {
	padding-right: 0;
}

.logo.smaller {
	animation-name: moveToLeft;
	margin-right: 3em;
	padding: 0 1.25em 0 0;
}

p.quarter-foot {
	background: #00529c;
	font-size: 90%;
	border-bottom: 1px solid #dadada;
	border-width: 1px;
	padding-left: 1em;
	color: #fff;
}

.col-sm-12.col-md-10.col-md-push-2.content-middle.sbl {
	padding-bottom: 1.5em;
}

li.step1.active.self {
	background: none!important;
}
#left-navigation ul > li > ul > li.active:first-child {
}



#leftmenu nav ul li ul li {

    font-size: 95%;
}
.hero::before {
	content: '';
	position: absolute;
	background: white;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 100px;
	clip-path: polygon(260% 0, 0 100%, 100% 100%);
}
	
	#colpad .col-sm-4.col-md-4:first-child {
		padding-top: 0;
	}
	div#left-navigation {
	    padding-right: 2em;
	}
	#colpad .col-sm-4.col-md-4 {
		padding-top: 2.5em;
		text-align:left;
	}
	#leftmenu nav ul li {
	    margin-left: 0!important;
	}
	
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
     div#header2-i::before,.hero::before{height:0!important}
}


@media (max-width: 1300px){
.hero {
    background-position: top 0 left -250px!important;
    transition: background 500ms;
}}
@media (max-width: 1092px){
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0!important;
    padding-left: .5rem;
}}
@media (max-width: 1200px){
.hero {
    background-position: top 0 left -320px!important;
    transition: background 500ms;
}}
@media (max-width: 1000px){
.hero {
    background-position: top 0 left -620px!important;
    transition: background 500ms;
}}

@media (max-width: 776px){
.hero {
    background-position: top 0 left -1200px!important;
    transition: background 500ms;
    height: 350px;
}
	.hero::before {
    clip-path: none!important;
    background: none!important;
}
}
.mt0 {margin-top:0!important}
.webp #get-engaged {background: url('https://wingpowersystems.com/images/sustainability-report-bg-1.webp');}
.no-webp #get-engaged {background: url('https://wingpowersystems.com/images/sustainability-report-bg-1.jpg');}
.webp #bendy-road {background: url('https://wingpowersystems.com/images/bg/bendy-road.webp'); height: 300px;}
.no-webp #bendy-road {background: url('https://wingpowersystems.com/images/bendy-road.jpg'); height: 300px;}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.6);
}
.panel-prod {
    width: 32%;
    float: left;
    margin-right: 1%;
}

 h3 {margin-bottom: .5rem;}
 .pb {
    padding-bottom: 1em;
}
.pb2{padding-bottom:2em;}
#bar3c2 {
    overflow: hidden;
    padding: 11px 10px;
    text-align: right;
    background: #e9e9e9
}
#bar3c2 div { float:left; overflow:hidden; padding:0 5px; }
	#bar3c2 span { display:block; }
#bar3c { background-color:#ccc; border-top:1px solid #bbb; box-shadow:0 5px 3px -3px #888; color:#fff; overflow:hidden; padding:5px 10px; position:absolute; right:20px; text-align:center; top:0; }
	#bar3c div { float:left; overflow:hidden; padding:0 5px; }
	#bar3c span { display:block; }
	
/* 2 Column (left menu) settings (for navigation on WiNG Service) */
.leftmenu {	background:#fff; }
.leftmenu .colleft {
	background:#fff;
	border-right: 1px solid #dadada;
	right:80%;			/* right column width */
}
.leftmenu .col1 {
	padding:20px 0;
	left:102%;			/* 100% plus left column left padding + plus right column left padding */
	width:78%;			/* right column content width */
}
.leftmenu .col2 {
	padding:20px 0;
	left:2%;			/* (right column left and right padding) plus (left column left padding) */
	width:20%;			/* left column content width (column width minus left and right padding) */
}
.title-row-leftmenu { clear:both; float:left; margin-left:22%; overflow:hidden; position:relative; }

/* 2 Column (right menu) settings for documents on WiNG Service Pages */
.rightmenu { background:#fff; }
.rightmenu .colleft {
	right:20%;			/* right column width */
	background:#fff;	/* left column background colour */
}
.rightmenu .col1 {
	width:80%;			/* left column content width (left column width minus left and right padding) */
	left:20%;			/* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
	padding:20px 0;
	width:18%;			/* right column content width (right column width minus left and right padding) */
	left:22%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
.colmask {clear:both;float:left;overflow:hidden;position:relative;width:100%;}
.colmask.threecol { border-top: 1px solid #dadada; }
.colright, .colmid, .colleft { float:left; position:relative; width:100%; } /* common column settings */
.col1, .col2, .col3 { float:left; overflow:visible; padding:0; position:relative; }
.breadcrumb {  line-height:1.2; margin-bottom:3em; text-transform:uppercase; }

.breadcrumb a, contentcrumb a {    
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 5px 0px 5px 0px;
	text-decoration: none;
	width: auto;
}
	.breadcrumb a:hover, .breadcrumb a:active, .breadcrumb a:focus,
	.contentcrumb a:hover, .contentcrumb a:active, .contentcrumb a:focus { color:#000; }
	.breadcrumb h2, contentcrumb h3 { background-color:#888; text-transform:lowercase; }
	.breadcrumb h2 a:link, .breadcrumb h2 a:visited, contentcrumb h3 a { color:#fff; }
	.breadcrumb li.self {
	    background-color: #dadada;
	    padding: 0 1em;
	}
	.breadcrumb ul { left:0; list-style: none outside none; margin:0; padding: 0;}
	.breadcrumb li { margin:0; padding:0; }
	.breadcrumb li.active { border-bottom: 1px solid #dadada; border-left: 1px solid #dadada; border-top: 1px solid #dadada;  border-right: 1px solid #dadada}
	.breadcrumb li.active a { font-weight:bold; }
	.breadcrumb li.active.self a { font-weight:normal; }
	.breadcrumb li.active ul a { font-weight:normal; }
	.breadcrumb li.self { background-color:#dadada; }
	.breadcrumb li.self ul { background-color:#fff; }
	.breadcrumb li li { margin:0 0 0 10px; }
	
#navigation > ul > li > ul > li > a {
    color: #989898!important;
    text-transform: capitalize;
}
#navigation > ul > li {
    border-bottom: 1px solid #ccc;
}
.frame{    max-height: 250px;
    max-width: 100%;
    border: 5px solid #ccc;
}
.email_address, .fullname {   border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;}
    
ul#topnav li {
    float: left;
}
input, button, select, optgroup, textarea {

    border: 0;
    background: #f9f9f9;
}
table th h4 {

    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}
span.clr-org {
    color: red;
}
ul>li>ul>li>ul>li>a {
    color: #888!important;
}
ul>li>ul>li>a {
    text-transform: capitalize;
    color: #000!important;
}
#topnav > li > div.dropdown-menu > div > ul > li {
    float: none;
}

.contactBox {width: 400px; 
	background: #fff; 
	padding: 2em; 
	border-radius: 1em; 
	margin-left: 3em; 
	margin-top: 3em; 
	margin-bottom:3em}
.truckFrontHero {
	background: url(../images/Homepage_HeroL.png);
	background-size: cover;	
}
.frontHeroText {
	padding:6em 2em 0 2em
}
#heroVehicleButton {
	border: 2px solid #FFF; 
	border-radius: 7px; 
	background: transparent; 
	color: #FFF; 
	padding: .5em 1em; 
	font-size: 1.25em;
}
.gplTruck {background: url(../images/GPL-CE.jpg);background-size: cover;min-height: 850px;}
@media (max-width: 776px){
.contactBox {
	background: #fff; 
	padding: 2em; 
	border-radius: 1em; 
	margin:1em 0;
	width:100%;
}
.truckFrontHero {background: url(../images/Homepage_HeroL.png); background-size: cover; height:500px;	}
.frontHeroText {
	padding:3em
}
.gplTruck {background: url(../images/GPL-CE.jpg);background-size: cover;min-height: 450px;}

}
div[class*='popup-gallery'] > a > img {
    margin: 0 0 0.25em 0;
    border: 3px solid #ccc;
}
div[class*='popup-gallery'] {
    padding-top: 1em;
}
#keybut {padding-right: 1em; border-right: 2px solid #fff; margin-right: 1em;}
#toparea {padding: 14px 2.75em; padding-bottom: 0;text-align:right;}