#post-22 ul li {

    width: 33.33% !important;

    margin: 0px 0!important;

    background: #ea4335;

    color: #fff;

}

#post-22 ul li:nth-of-type(2) {

    background: #fbbc05;

}

#post-22 ul li:nth-of-type(3) {

    background: #4285f4;

}

#post-22 ul li:nth-of-type(4) {

    background: #ffa500;

}

#post-22 ul li:nth-of-type(5) {

    background: indianred;

}

#post-22 ul li:nth-of-type(6) {

    background: orange;

}

#post-22 ul{display: flex;flex-wrap: wrap;}

.navbar-box li.current-menu-item a {color: #fff; font-style: normal;}

.home .navbar-box li.current-menu-item a {color: #ae822c!important; font-style: normal;}

.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a{color: #ae822c!important; font-style: normal;}









.sub-menu{

  visibility: hidden; 

  

  filter:alpha(opacity=0);

  -moz-opacity:0;

  -khtml-opacity: 0;

  opacity: 0;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  transform: translateY(-2em);

  -webkit-transform: translateY(-2em);

  -moz-transform: translateY(-2em);

  -o-transform: translateY(-2em);

  -ms-transform: translateY(-2em);

  z-index: -1;

  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;



  -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  -moz-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  -o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  -ms-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  

}





 #primary-menu .menu-item:hover .sub-menu {

    visibility: visible;

    filter: alpha(opacity=1);

    -moz-opacity: 1;

    -khtml-opacity: 1;

    opacity: 1;

    z-index: 1;

    transform: translateY(0%);

    -webkit-transform: translateY(0%);

    -moz-transform: translateY(0%);

    -o-transform: translateY(0%);

    -ms-transform: translateY(0%);

    transition-delay: 0s, 0s, 0.3s;

}





#primary-menu > ul.sub-menu {

    position: relative;

}

#primary-menu > li > ul.sub-menu:before {

    border-bottom: 7px solid #dfb44d;

    border-left: 7px solid rgba(0, 0, 0, 0);

    border-right: 7px solid rgba(0, 0, 0, 0);

    border-top: 0;

    content: "";

    height: 0;

    right: 39px;

    position: absolute;

    top: -7px;

    width: 0;

}





.nav-menu .sub-menu, .nav-menu .children{line-height: normal!important;}

ul.nav-menu, div.nav-menu > ul{padding: 0; position: relative;}

.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus{background-color: inherit; color:#000;}

.nav-menu .sub-menu, .nav-menu .children{background-color:#dfb44c;border: none;left: auto;  right: 0;}



.nav-menu .sub-menu ul, .nav-menu .children ul {

    border-left: 0;

    left: 0;

    top: 0;

    left: auto !important;

    right: 100% !important;

}



ul.nav-menu ul a, .nav-menu ul ul a {color: #000; margin: 0; width:260px;font-size: 15px; font-weight: normal;border-bottom: 1px solid #e8d8a5;}
.nav-menu > li > ul.sub-menu > li > a {
    width: 215px;
    line-height: 1.4;
}
ul.nav-menu ul li:last-of-type a, .nav-menu ul ul li:last-of-type a {
    border-bottom: 0px;
}
ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, ul.nav-menu ul a:focus, .nav-menu ul ul a:focus { background-color: #bf9e4d; color: #fff;}

ul.nav-menu li:hover > ul ul { background-color: #e4bc5d;}

ul.nav-menu li:hover > ul ul ul { background-color: #e4c57d;}

.navbar-box li ul li .current-menu-item a {color: #000!important;}













@media only screen and (min-width: 300px) and (max-width: 999px) {



.contact-box-footer li span i {margin: 0 16px 0 0;}

.main-footer p {width: 100%;}





}







@media only screen and (min-width: 300px) and (max-width: 991px) {

	

.main-footer .social-list {
    margin: 20px 0 20px 0;
    border-bottom: 1px solid #b3a066;
    padding: 0 0 20px 0;
}



}







@media only screen and (min-width: 300px) and (max-width: 767px) {



.menu-footer-menu-container {margin: 0 0 20px 0;border-bottom: 1px solid #b3a066;padding: 0 0 20px 0;}

#pull {display: block; margin-top: -66px;}

.navbar-toggle { position: relative;float: right;padding: 9px 10px;margin-top: 8px; margin-right: 0; margin-bottom: 8px;background-color: #a48a36;background-image: none;border: 1px solid transparent;border-radius: 4px;cursor: pointer;}

.navbar-toggle .icon-bar {background-color: #fff;}

.navbar-toggle .icon-bar {display: block; width: 22px; height: 2px;border-radius: 1px;}

.navbar-toggle .icon-bar+.icon-bar { margin-top: 4px;}

.navbar-box{display:none; width: 100%;line-height: 20px;}

.menu-menu-1-container { display: block; float: left;width: 100%;  background: #f6f4f4;}

.navbar-box li a {display: block;border-bottom: 1px solid #eaeaea;}

.header-top .col-sm-8 {width: 100%; max-width: 100%;flex: 100%; z-index: 99;}

.banner-tittle {width: 100%;margin: 50px 0;}

.banner-tittle h2 {font-size: 50px;}

.banner-tittle p { font-size: 22px;}

.homepage-laft-box {text-align: center; margin: 0 0 20px 0;}

.navbar-box li.current-menu-item a {color: #ae822c!important;}



ul#primary-menu li:hover ul{display: none;}



button#responsive-menu-button{top: 32px; z-index:3333!important;}





.sub-menu{

  visibility: hidden; 

  opacity: 0;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  z-index: -1;

  transform: none;

  transition-delay: inherit;

  transition:inherit;



}



#primary-menu .menu-item:focus .sub-menu,

#primary-menu .menu-item:focus-within .sub-menu,

#primary-menu .menu-item:hover .sub-menu {

  visibility: visible; 

  opacity: 1;

  z-index: 1;

  transform: translateY(0%);

  transition-delay: inherit;

}















.expand {

    cursor: pointer;

    display: inline-block;

    height: 28px;

    position: absolute;

    right: 10px;

    top: 6px;

    width: 40px;

}

.expand::after {

    border-left: 6px solid rgba(0, 0, 0, 0);

    border-right: 6px solid rgba(0, 0, 0, 0);

    border-top: 6px solid #e67809;

    content: "";

    position: absolute;

    right: 13px;

    top: 9px;

}

.expand.plus::after {

    transform: rotate(180deg);

}



.nav-menu li{width: 100%;}

ul.nav-menu ul a, .nav-menu ul ul a{width: 100%;}

.nav-menu .sub-menu, .nav-menu .children{position: relative;}

.nav-menu .sub-menu ul, .nav-menu .children ul{left: 0;}

.nav-menu .sub-menu li a { padding: 10px 25px;}

.nav-menu .sub-menu li ul li a {padding: 10px 40px;}

ul.nav-menu li:hover > ul ul ul li a{padding: 10px 50px;}



.homepage-right-box {text-align: center;}


.management-system {
    text-align: center;
    margin: 0 0 20px 0;
}
.system-pic {
    text-align: center;
}
.home-page-fuel-management {
    padding: 45px 0;
    border-bottom: 1px solid #fff;
}



/*About us page css*/



#post-22 ul li {width: 50%!important;}

.inner-page-content p{font-size: 14px; margin-bottom: 25px;}

#post-22 ul li {font-size: 14px;}



/*End About us page css*/





}







@media only screen and (min-width: 300px) and (max-width: 640px) {



.banner-tittle {margin: 20px 0; text-align: center;}

.banner-tittle h2 {font-size: 25px; line-height: 28px;}

.banner-tittle p {font-size: 18px;}

.home-page-about-us h1 {font-size: 25px;}

button#responsive-menu-button{top: 24px;}



/*About us page css*/

.inner-page-content h1 {font-size: 30px;}

.inner-page-content h2 {font-size: 22px;}

/*End About us page css*/



.left-popup-area{width:100%; float:left; }

.right-popup-area {width: 100%; float: left;}


/*inner page form css*/



.quote-free {
    width: 100%;
    display: block;
    margin-bottom: 20px !important;
}

.product-area-box .product-choose-content{flex-direction: column;}

/* End inner page form css*/

}





@media only screen and (min-width: 300px) and (max-width: 575px) {



.logo-header img {width: 40%;}





/*About us page css*/

#post-22 ul li {width: 100%!important;}

/*End About us page css*/











}





@media only screen and (min-width: 300px) and (max-width: 480px) {
.home-banner {padding: 0px 0px 0px;}
.banner-tittle h2 {font-size: 22px; text-align: center; line-height: 28px;}
.banner-tittle p {     font-size: 16px;    line-height: 18px; }
.logo-header img {width: 50%;}
.home-page-fuel-management h1{ width: 292px; font-size: 24px;}

.homepage-right-box .vc_row-fluid.fuel-management-system, .vc_row-fluid.about-section, .vc_row-fluid.services-section{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    
    }
    
.home-page-about-us p {
    font-size: 16px;
    line-height: 22px;
}    
.footer-social-icon{flex-direction: column;}  
.copy-right-footer{padding: 10px 0px;}
    
.homepage-right-box .vc_row-fluid.fuel-management-system .main-headin{
    font-size: 30px;
    line-height: 38px;
}    

/*About us page css*/

.inner-page-content h1 {margin-bottom: 10px;}

.banner-section {
	text-align:center;
    padding:35px 0px;
}

.second-heading {
 font-size: 26px !important;
    line-height: 32px !important;
    margin-top: 15px;
}
.call-to-section{flex-direction: column;}
.call-to-section h4{
    font-size: 26px;
    margin-bottom: 10px;
}

/*End About us page css*/



}





@media only screen and (min-width: 300px) and (max-width: 320px) {



button#responsive-menu-button {top: 17px;}



}


@media only screen and (max-width: 768px) {
	.form-get-in {
    	z-index:99;
    }
	.form-get-in.active .contentform .wpcf7-form {
         padding: 20px 9px 5px;
    }
    .form-get-in.active {
    	width: 330px;
        z-index:9999 !important;
    }
    button, input, select, textarea {
    	width:100%;
    }
    .contact-form h2 {
    	font-size:20px;
    }
    
}