@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');

body, h1, h2, h3, h4, h5, h6, p{font-family: 'Open Sans', sans-serif;}

#top-area{color:#fff; line-height:50px; }
#top-area {background-color:#204c81; min-height:50px;}
#top-area a .fa{color:#fff; transition:1s all ease; -webkit-transition:1s all ease; -moz-transition:1s all ease; -o-transition:1s all ease;}
#top-area a:hover .fa{
	color:#228AE6;
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	
	}
	
.navbar{height:120px; background-color:#fff; margin-bottom:5px;}	
.navbar-nav{padding-top:40px}

.menu{border:none; margin-top:40px;}

.navbar-toggle{z-index:999;}
.navbar-right li a{
	color:#777;	
}
.navbar-right li:hover{
	background-color:#204c81;
	color:#fff;	
}
.navbar-right li a:hover{
	background-color:#204c81;
	color:#fff;	
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{color:#fff;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover{background-color:#204c81;color:#fff;}	




/*****************video container*********************/

section#topbanner,#block {
    position: relative;
    height: 600px;
	width:100%;
}
* {
	box-sizing: border-box;
}
/*.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background-color: rgba(0, 0, 0, 0.7);
	padding-left: 6%;
	padding-right: 6%;
	display: table;
}*/




.header-container{
	width:100%;
	min-height:600px;
	border-left:none;
	border-right:none;
	position:relative;
	padding:100px;
	background-color:#204C81 ;
	background-size:cover;
}

.video-container{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	overflow:hidden;
	opacity: 0.5;
	
}

.embed-responsive-4by3{
	padding-bottom: 52.25%;
}

#topbanner h1{color:#fff; text-align:center; margin-top:100px; font-size:60px;}
#topbanner p{color:#fff; text-align:center; font-size:20px; margin-top:20px; 
background-color:#041830; padding-top:10px; padding-bottom:10px;}



video{
	position:absolute;
	z-index:-1;
	opacity:0.78;
	width:100%;
	background-size:cover;
}

#mainmenu{
	background-color:#F4F4F4;
	min-height:200px;
	text-align:center;
	
		
}


#mainmenu .menueff .menueffect1{
	
	border-right:#1A3F71 2px solid;
	padding-top:135px;
	line-height:36px;
	background-color:#F4F4F4;
	background-image:url(../images/birdbtn1.png);
	background-position:center;
	background-repeat:no-repeat;
	color:#010000;	
	transition:all 200ms ease-in-out;

}
#mainmenu .menueff:hover .menueffect1{
	background-color:#1A3F71;
	background-image:url(../images/birdbtn1x.png);
	background-position:center;
	background-repeat:no-repeat;
	border:#B30104 solid 2px;
	transform:scale(1.1);
	z-index:999;
	
}


#mainmenu .menueff p{
	color:#000;
	font-weight:bold;
	font-size:14px;
	text-align:center;
	transition:all 200ms ease-in-out;
}
#mainmenu .menueff:hover p{
	color:#fff;
	transform:scale(1.1);
	z-index:999;
	
}

#mainmenu .menueff .menueffect2{
	
	border-right:#1A3F71 2px solid;
	padding-top:135px;
	line-height:40px;
	background-color:#F4F4F4;
	background-image:url(../images/birdbtn2.png);
	background-position:center;
	background-repeat:no-repeat;
	color:#010000;	
	transition:all 200ms ease-in-out;
	
	
}

#mainmenu .menueff:hover .menueffect2{
	background-color:#1A3F71;
	background-image:url(../images/birdbtn2x.png);
	background-position:center;
	background-repeat:no-repeat;
	border:#B30104 solid 2px;
	transform:scale(1.1);
	z-index:999;
	
}

#mainmenu .menueff .menueffect3{
	
	border-right:#1A3F71 2px solid;
	padding-top:135px;
	line-height:40px;
	background-color:#F4F4F4;
	background-image:url(../images/birdbtn3.png);
	background-position:center;
	background-repeat:no-repeat;
	color:#010000;	
	transition:all 200ms ease-in-out;
	
}

#mainmenu .menueff:hover .menueffect3{
	background-color:#1A3F71;
	background-image:url(../images/birdbtn3x.png);
	background-position:center;
	background-repeat:no-repeat;
	border:#B30104 solid 2px;
	transform:scale(1.1);
	z-index:999;
	
}

#mainmenu .menueff .menueffect4{
	
	border-right:#1A3F71 2px solid;
	padding-top:135px;
	line-height:40px;
	background-color:#F4F4F4;
	background-image:url(../images/birdbtn4.png);
	background-position:center;
	background-repeat:no-repeat;
	color:#010000;	
	transition:all 200ms ease-in-out;
	
}

#mainmenu .menueff:hover .menueffect4{
	background-color:#1A3F71;
	background-image:url(../images/birdbtn4x.png);
	background-position:center;
	background-repeat:no-repeat;
	border:#B30104 solid 2px;
	transform:scale(1.1);
	z-index:999;
	
}

/*-------------------------------PRODUCT-1-----------------------------*/

.title-top  h1 {color:#204c81;padding-top:20px;padding-bottom:25px;}
#bus  h1 {color:#204c81;padding:25px 0;}
#off_road h1 {color:#204c81;padding:25px 0;}
#Wip_Sys h1 {color:#204c81;padding:25px 0;}
#Wip_Sys {margin-bottom:25px;}

#win_was_sys h1 {color:#204c81;padding:25px 0;}
#win_was_sys {margin-bottom:25px;}

section#prod{min-height:100px; background-color:#fff; /*padding-top:50px; padding-bottom:0px;*/}
/*section#prod h1{border-bottom:#B90003 2px solid; color:#1a3f71; }*/

section#prod1{min-height:100px; background-color:#F4F4F4; padding-top:40px; padding-bottom:40px;}

section#prod1 .panel .panel-heading{background-color:#002384;}
section#prod1 .panel .panel-title{color:#fff;}



.prod1 {padding:100px 0px;}

.point1{
	height:20px; width:20px; background:#2D58D1; border-radius:50px; position:absolute; top: 65px; left: 760px; opacity:0.7;
	}
.point2{
	height:20px; width:20px; background-color:#2D58D1; border-radius:50px; position:absolute; top:65px; left:850px; opacity:0.7;
	}
.point3{
	height:20px; width:20px; background-color:#002384; border-radius:50px; position:absolute; top:130px; left:650px; opacity:0.7;
	}
.point4{
	height:20px; width:20px; background-color:#002384; border-radius:50px; position:absolute; top:180px; left:800px; opacity:0.7;
	}
	
.autolink1{background:url(../images/prodwiplink1.png) no-repeat top left; background-size:cover; height:180px; width:520px; position:absolute; top:-25px; left:180px; display:none;}

.autolink2{background:url(../images/prodwiplink2.png) no-repeat top left; background-size:cover; height:200px; width:520px; position:absolute; top:0px; left:875px; display:none;}

.autolink3{background:url(../images/prodwiplink3.png) no-repeat top left; background-size:cover; height:180px; width:520px; position:absolute; top:40px; left:100px; display:none;}

.autolink4{background:url(../images/prodwiplink4.png) no-repeat top left; background-size:cover; height:181px; width:520px; position:absolute; top:100px; left:820px; display:none;}

section#prod2{min-height:450px; padding-top:50px; padding-/*background-image:url(../images/prod2bg1.png);background-attachment:fixed; background-repeat:no-repeat;*/}

section#prod2 .panel .panel-heading{background-color:#002384;}
#prod2{background-repeat: no-repeat ;
			background-attachment: fixed;
    		background-position: center;
			background-size: cover;
   			width: 100%;
			min-height:400px; }
			
#prod2 .panel .panel-title{color:#fff;}

#prod2 .non-am p{ color:#000;}
#prod2 .btn btn-info btn-md p{ color:#fff;}



#batteryisolation,
#sparetyrelifter,
#awning
 {margin-bottom:50px;}





  /*---------- Fade effect----------*/


.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
    overflow:hidden;
}/*
.item.active img {
    transition: transform 2000ms linear 1s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/

}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}




.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }




/*-------------------------OUR CLIENT------------------------------*/
section#homeourclient{background-color:#E90003; }

section#home_ourclient{background-color:#fff; }
/*section#home_ourclient h1{border-bottom:#B90003 2px solid; color:#1a3f71; }*/
section#home_ourclient h1 {padding:40px 0;}

.thinborder{
	/*border: 1px solid #ccc;*/
	transition:all 1s ease;
	
		
	}
.thinborder:hover{	
	border:none;
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);	
	}
	
	
section#prod {
    background-color: #fff;
    padding-top: 25px;
    padding-bottom:25px;
}	
#hoc {
	padding-bottom:25px;

}	



	


	
/*-----------------------------top footer-----------------------------------------*/	

.footer{
	background:#204c81;
}

/*
.w3-agile-footer-grid h3{
    color: #FFFFFF;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 4px;
	text-align: center;
	font-family: 'Arimo', sans-serif;
}
.w3-agile-footer-grid p{
    color: #8a8a8a;
    font-size: .9em;
    line-height: 1.8em;
    margin: 0;
}
.w3-agile-footer-grid ul{
	padding:0;
	margin:0;
}
.w3-agile-footer-grid ul li{
    display: block;
    margin-bottom: .5em;
    color: #8a8a8a;
    font-size: .9em;
	text-align: center;
}
.w3-agile-footer-grid ul li a{
    color: #FFFFFF;
    text-decoration: none;
    margin-left: .5em;
}
.w3-agile-footer-grid ul li a:focus{
	outline:none;
}
.w3-agile-footer-grid ul li a:hover{
	color:#8a8a8a;
}
.w3-agile-footer-grid ul li:last-child{
	margin-bottom:0;
}
.w3-agile-footer-grid ul li.text a{
    color: #8a8a8a !important;
    margin-bottom: .5em !important;
    font-size: .9em !important;
}
.w3-agile-footer-grid ul li.text a:hover{
	color:#FFFFFF !important;
}



.footer-social-grids {
    margin: 1em 0 0 0;
}
.footer-social-grids ul {
    padding: 0;
    margin: 0;
	text-align: center;
}
.footer-social-grids ul li {
    display: inline-block !important;
    margin: 0 .5em 0 0 !important;
}
.footer-social-grids ul li a {
    text-align: center;
}
.footer-social-grids ul li a i.fa.fa-facebook, .footer-social-grids ul li a i.fa.fa-twitter,.footer-social-grids ul li a i.fa.fa-google-plus, .footer-social-grids ul li a i.fa.fa-youtube-square {
    height: 30px;
    width: 30px;
    border: solid 2px #b5b5b5;
    line-height: 29px;
    background: none;
    color: #b5b5b5;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
.footer-social-grids ul li a i.fa.fa-facebook:hover {
	border: solid 2px #3b5998;
	background:#3b5998;
    color: #FFFFFF;
}
.footer-social-grids ul li a i.fa.fa-twitter:hover{
	border: solid 2px #55acee;
	background:#55acee;
	color: #FFFFFF;
}
.footer-social-grids ul li a i.fa.fa-google-plus:hover{
	border: solid 2px #f26522;
	background:#f26522;
	color: #FFFFFF;
}
.footer-social-grids ul li a i.fa.fa-youtube-square:hover{
	border: solid 2px red;
	background:red;
	color: #FFFFFF;
}
.agile-footer-grids {
	padding-top:30px;
	padding-bottom:10px;
}
.w3-agile-footer-grid ul li {
	font-size:15px;
}*/
.footer-bottom p {
    text-align: center;
	margin-top: 2em;
	background-color:#000;
}
#footer-bottom  {
 	background-color:#002384;
	padding-top: 1em;
	color:#fff;
}

.copyright {
	float:left;
	color:#fff;
}

.text-gray{
    color: #fff;;
}
.text-gray:hover{
    color: #894299;
    text-decoration: none;
}

/*-- //footer --*/
/*-----------------second page --------------------*/



#Wheeler {margin:50px;}
#Wheeler h1 {color:#204c81;padding-bottom:35px;}

.prodImg{text-align:center; transition:all 0.5s ease-in;}
.prodImg:hover {
				transform:scale(1.05, 1.05); 
				-webkit-transform:scale(1.05, 1.05);
				-moz-transform:scale(1.05, 1.05);
				-o-transform:scale(1.05, 1.05);
				
				}

.prodTitle h3 {font-weight:600;}

#Wheeler h1 {color:#204c81;padding-bottom:35px;}



.bottom img {margin:15px 0px;border:1	px solid #002384;}

/*--------------------- END OF WIPER MOTOR ---------------------*/


/*###########################  THIRD PAGES ################################*/

/*-------------------------FOUNDER------------------------------*/
.founder {
	
}
.founder h3 {
	color:#000066;
	padding-bottom:50px;
}
.founder p{
	color:#000;
	
}


/*-------------------- END OF  FOUNDER-----------------*/

/*--------------------KEY MEMBER-----------------------*/

section#keymember1{ padding-top:50px; padding-bottom:50px;}
section#keymember1 .img-circle{border:#949494 2px solid}
section#keymember1 h1{color:#fff; padding-bottom:5px; }

.key span  {
	color:#FFF;
}
.key h3 {
	color:#fff;
}
section#keymember2{ padding-top:50px; padding-bottom:50px; color:#000000}
section#keymember2 .img-circle{border:#949494 2px solid}
section#keymember2 p{color:#000;}

/*----------------- END OF KEY MEMBER------------------*/

/*------------------- Gallery ----------------*/


.gallery-title
{
    font-size: 36px;
    color:#204c81;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #002384;
    border-radius: 5px;
    text-align: center;
    color: #204c81;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #002384;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: #204c81;

}
.btn-default:active .filter-button:active
{
    background-color: #204c81;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}
.btn-default.focus, .btn-default:focus {
    color: #fff;
    background-color: #204c81;
    border-color:none;

}
#gallery_img {padding:30px;}

/*-------------End Of Gallery-------------	*/

/*--------------contact*-----------------*/
.contact {padding-bottom:25px;}
.contact-title {color:#204c81;padding:25px;}
	
.contact-left input[type="text"],.contact-left input[type="email"]{
	border:1px solid #ccc;
	font-size:1em;
	color:#828282;
	background:none;
	width:100%;
	padding:.8em 1em;
	outline:none;
}
.contact-left input[type="text"]:hover,.contact-left input[type="email"]:hover,.contact-right textarea:hover{
	border-color:#4497fc;	
}
.contact-right textarea{
	border:1px solid #ccc;
	font-size:1em;
	color:#828282;
	background:none;
	width:100%;
	padding:.8em 1em;
	outline:none;
    min-height: 8em;
	resize:none;
}
.contact-left input[type="email"]{
	margin:1.5em 0;
}
.contact-right input[type="submit"] { 
    padding: .6em 1em;
    color: #fff;
    font-size: 1.1em;
    background: #4497fc; 
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
	transition: 0.5s all;
    outline: none;
    margin: 1em 0 0;
    width: 100%;
	border:1px solid #4497fc;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.contact-right input[type="submit"]:hover{
    background: transparent;	
	color:#4497fc;
}
.address-row {
    margin:0 0 4em;
}
.address-right {
    text-align: left;
    padding-left: 2em;
}
.contact-w3lsright h6 {
    font-size: 1.8em;
    color: #595c65;
    font-weight: 300;
    line-height: 1.8em;
    text-transform: uppercase; 
}
.contact-w3lsright h6 span {
    color: #03A9F4; 
} 
.address-left {
    padding: 0;
    text-align: center;
}
.address-row span.glyphicon {
    font-size: 1.2em;
    border: 1px solid ;
    padding: 1em;
    color: #4497fc;
	-webkit-transition:.5s all;
	-moz-transition:.5s all; 
	transition:.5s all;
}
.address-row:hover span.glyphicon {
    border-color: #4497fc; 
	-webkit-transform: rotatey(360deg);
	-moz-transform: rotatey(360deg);
    transform: rotatey(360deg);	
	-o-transform: rotatey(360deg);
	-ms-transform: rotatey(360deg);
}
.address-row h5 {
    font-size: 1.6em;
    color: #000;
    margin-bottom: .3em;
    font-weight: 300;
}
.address-row p a {
    color: #4497fc;
}
.address-row p a:hover{
    color: #999;
}
.address h4 {
    font-size: 1.8em;
    color: #00BCD4;
    margin-bottom: 0.6em;
    text-transform: uppercase;
}
/*-- //contact --*/  

/*--------------  about------------- */

#about,#corevalue,#keymembers,#csr {padding:50px;}
#milestones{padding-top:10px; padding-bottom:30px; background-color:#F4FBFF}
#mission{padding-top:10px; padding-bottom:30px; background-color:#fff}
#about{background:#FFFFFF;}

#corevalue{background:#FFFFFF;}
#csr{ background:#ECF1F2}
#keymembers .thumbnail{ border:none;}



#prod_ws {padding-top:0px; padding-bottom:50px;}



/*about accordian*/

#corevalue a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
#accordion .panel{
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 15px 10px;
}
#accordion .panel-heading{
    padding: 0;
    border-radius: 30px;
}
#accordion .panel-title a{
    display: block;
    padding: 12px 20px 12px 50px;
    background: #6ba9dc;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 30px;
    position: relative;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed{
    background: #fff;
    color: #0d345d;
    border: 1px solid #ddd;
}
#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{
    content: "\f107";
    font-family: fontawesome;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    background: #6ba9dc;
    font-size: 25px;
    color: #fff;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    position: absolute;
    top: -5px;
    left: -20px;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:after{
    content: "\f105";
    background: #fff;
    color: #0d345d;
    border: 1px solid #ddd;
    box-shadow: none;
}
#accordion .panel-body{
    padding: 20px 25px 10px 9px;
    background: transparent;
    font-size: 14px;
    color: #8c8c8c;
    line-height: 25px;
    border-top: none;
    position: relative;
}
#accordion .panel-body p{
    padding-left: 25px;
    border-left: 1px dashed #8c8c8c;
}