@media only screen and (max-width: 759px)
{

.headerline 
{
visibility: visible;

position: fixed;

width: 100%;

z-index: 9999999999;

}
} 

.headerline

{
border:solid#fc7a32;

border-width: 2px 1px 1px 1px;

}


body
{
margin:0; padding: 0;

overflow-x: hidden;

width:100%;

font-size: 16px;



}
html
{
overflow:auto;}



/*header starts*/



header{
max-width: 1280px;
margin: 0 auto;
height: 100px;
}





div.HeaderRightSection 

{

text-align: right; 

margin-top: 15px;
}



.HeaderRightSectionBorder{border-bottom: 2px solid #fc7a32;display:inline-block; }

.CallNow, 
.Num{ font-weight: bold ; color: #2c3e61; font-family: 'Roboto Condensed',sans-serif;}

.Num{ color: #fc7a32; font-size: 16px;}

.HeaderPlaceholer{border:none; outline: none}


.Headerimage 
{

  padding-left: 7%;
}




/*header ends*/

/*navigation menu*/

div.NavigationMenu
{ 
  padding-left: 2%;
max-width: 1280px;
margin: 0 auto;
height: 70px; 
}

nav ul li

{

list-style: none;

display:inline-block;

color: #2f4267;
}

a.ak{ 
color: #2f4267; 
font-family: 'Roboto Condensed',sans-serif;
font-style: italic; text-transform: uppercase;}



a.ak:hover {

text-decoration: none; 

color: #fe7630;

font-weight: 500;
}


a.MobileCall

{

font-weight: bold ; 

font-family: 'Roboto Condensed',sans-serif;

text-decoration: none;

color: #fe7630;



}



.ChatImage

{

width: 50px;

height: 55px;

padding: 4px 0px;



}

span.ChatLine {

float: right;

padding: 5px;

color: #2f4267;

font-weight: bold;

}

/*nav ends*/



/*main*/



main.BackgroundImage

{

background: url(./images/home.jpg);

background-repeat: no-repeat;

height: 900px; 

width: 100%;

color: #ffffff; 

overflow-x: hidden;
overflow-y: hidden;

}

/*section*/

h1.Boldcolor{color:#2b4463}

h1.Icolor{color:#fe7630 !important}





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

.HeaderRightSection
{

display: none;

}

div.Creditcard
{

display: none;
}

.NavigationMenu .DesktopNav

{
  
display: none;

}

.NavigationMenu .MobileNav

{

display: block;
} 

.HamburgerRight
{
display: block;
}



}

@media only screen and (min-width: 768px){

.NavigationMenu .MobileNav

{
display: none;
} 

.HamburgerRight
{
display: none;
}

}
/***hambue=rger menu*/

a
{

text-decoration: none;

color:#fe7630;


transition: color 0.3s ease;

}

a 
li:hover

{

color:#fe7630;

text-decoration: none;

}

#menuToggle
{

display: block;

position: absolute;

top: 27px;

right: 50px;


z-index: 1;


-webkit-user-select: none;

user-select: none;

}

#menuToggle 
input

{

display: block;

width: 40px;

height: 32px;

position: absolute;

top: -7px;

left: -5px;

cursor: pointer;

opacity: 0; /* hide this */

z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;

}


/*Just a quick hamburger*/

#menuToggle 
span

{

display: block;

width: 33px;

height: 4px;

margin-bottom: 5px;

position: relative;




background: #fe7630;

border-radius: 3px;


z-index: 1;


transform-origin: 4px 0px;


transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

opacity 0.55s ease;

}



#menuToggle 
span:first-child

{

transform-origin: 0% 0%;

}



#menuToggle 
span:nth-last-child(2)

{

transform-origin: 0% 100%;

}



/* 

* Transform all the slices of hamburger

* into a crossmark.

*/

#menuToggle 
input:checked ~ span

{

opacity: 1;

transform: rotate(45deg) translate(-2px, -1px);

background: #fe7630;

}



/*

* But let's hide the middle one.

*/

#menuToggle 
input:checked ~ span:nth-last-child(3)

{

opacity: 0;

transform: rotate(0deg) scale(0.2, 0.2);

}



/*

* Ohyeah and the last one should go the other direction

*/

#menuToggle 
input:checked ~ span:nth-last-child(2)

{

opacity: 1;

transform: rotate(-45deg) translate(0, -1px);

}



/*

* Make this absolute positioned

* at the top left of the screen

*/

#menu

{

position: absolute;

width: 300px;

margin: -100px 0 0 0;

padding: 50px;

padding-top: 125px;

right: -100px;


background: #ededed;

list-style-type: none;

-webkit-font-smoothing: antialiased;

/* to stop flickering of text in safari */


transform-origin: 0% 0%;

transform: translate(100%, 0);


transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}



#menu 
li
{

display: block;

padding: 10px 0;

font-size: 22px;






}



/*

* And let's fade it in from the left

*/

#menuToggle 
input:checked ~ ul

{

transform: 
scale(1.0, 1.0);

opacity: 1;

}



/* hamburger menu ends*/
/*

*/





.border_new
{ 
  border: 1px solid  #2f4267;
  width: 54%;
  /* float: none; */
  margin: 0 auto;
  background-color: white;
  height: 75px;
  
}

.image_new1{
  background: url(images/compare-icon@3x.png);
}
.image_new2{
  background: url(images/universal-icon@3x_R2.png);
}
.image_new3{
  background: url(images/discount-icon@3x.png);
}
.image_new4{
  background: url(images/van_Shift2_3x_R2.png);
}


.image_new1, .image_new2, .image_new3, .image_new4 
{
 
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13%;
}


.content_new{
  text-align: center;
    color: #2f4267;

}

.image_new1:hover
{
  background: url(images/compare-icon_hover@3x.png);
}
.image_new2:hover
{
  background: url(images/hvr-universal-icon@3x_R2.png);
}
.image_new3:hover
{
  background: url(images/discount-icon_hover@3x.png);
}
.image_new4:hover
{
  background: url(images/hvr-van_SHIFT_3x_R2.png);
}


.image_new1:hover, .image_new2:hover, .image_new3:hover, .image_new4:hover
{
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  
}





.content_new:hover {
  text-align: center;
  
  color: white;
}


@media only screen and (max-width: 767px)
{
 form {
    width: auto !important;
    height: 454px !important;
    }
.Boldcolor,.Icolor{
  font-size: 1.5rem;
}

.image_new1, .image_new2, .image_new3 ,.image_new4
{
  background-size: 30%;
}
.border_new
{
  width: 80%;
}

div.border_new:hover
{
text-decoration: none; 

background-color:#fe7630;

border: 2px solid #fff;
transition: background-color 0.5s ease;
width: 80%;
height: 85px;
transition: width 0.1s;
}

.image_new1:hover, .image_new2:hover, .image_new3:hover, .image_new4:hover
{
 
  background-size:27%;
}



}

@media only screen and (min-width: 768px)
{


  .Boldcolor,.Icolor{
    font-size: 2rem;
  }

  .image_new1, .image_new2, .image_new3 ,.image_new4
{
  background-size: 12%;
}
.border_new
{
  width: 54%;
}
div.border_new:hover
{
text-decoration: none; 

background-color:#fe7630;
padding: 10px;
border: 2px solid #fff;
transition: background-color 0.5s ease;
width: 55%;
height: 85px;
transition: width 0.1s;
}



.image_new1:hover, .image_new2:hover, .image_new3:hover, .image_new4:hover
{
 
  background-size:15%;
}


}









/*form*/
  

form{
  margin:auto;
  height: 391px;
  width:1200px;
  padding-left: 50px;
  box-shadow: 1px 5px lightgray;
  
  border: 3px solid white;
  
  float:center;
  background-color: white;

  }
  
  
  form .FormInput
  input{
  
      outline: none;
  border: 0;
  
  
  border-bottom: 2px solid orangered;
  
  
  }
  
  form .FormInput
  .FormText{
  
  color: #2c3e61;
  
  font-size: 25px;
  
  align-content:center;
  
  
  }
  
  form .FormButton{
  
  align-self: auto;
  color: red;
  }

  .but{


    color:white;
    
    
    background-color: 
    #2f4267;
    
    
    border: none;
    
    
    width:200px;
    
    
    height:50px;
    
    
    float: right;
    
    
    margin-right: 
    90px;
    
  
    
    
    }
    
  

/*form*/

/*images*/

.Images
{
width: 100px;

}

.AcceptLine
{
    font-size: 1.5rem!important;
    color: #2b4463 !important;
    margin: 0px 0px 0px 0px;
}

/*images ends*/




h3 {
  font-size: 3rem!important;
  color: #2b4463 !important;
  text-shadow: 0px 0px 1px #f7f4f3;
 
  }
  .TextSection{
  font-family: 'Roboto Condensed',sans-serif;
  
    
  }
  .Paragraph{
      font-size: 16px;
      line-height: 20px;
      text-align: left;
      margin-left: 150px;
      margin-top: 1rem;
      margin-bottom: 3rem;
      margin: 0 0 10px;
      font-family: 'Roboto Condensed',sans-serif;
      box-sizing: border-box;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      color:#666666;
  } 
  .row {
      margin-right: -15px;
      margin-left: -15px;
  }
.FuelImage
{

height: 205px;
width: 240px;

}

/*footer starts*/

nav ul
li a, 
footer .FooterClass 
ul li a,footer
.FooterClass h5

{



text-decoration: 
none;

}



nav

{

max-width:1280px;

margin:0
auto;

height:60px;



}



footer{



background: url(images/footer-bg-pump@2x.png)

}



footer .FooterClass
ul li

{

margin-bottom:20px;


}

footer .FooterClass
ul li 
a

{

padding: 0
10px 10px;

}




footer .FooterClass
ul li 
a,footer .FooterClass
h5, footer 
.CopyRightClass,footer 
.LastFooterSection

{


color: white;



}







.buttonvv{

-ms-transform: 
rotate(90deg); 
/* IE 9 */

-webkit-transform: 
rotate(90deg); 
/* Safari 3-8 */

transform: rotate(90deg);

position: fixed;

right: -46px;

bottom: 240px;

}





.LastFooterSection

{

background-color:#1c284599;

max-width: 100%;

margin: 0px;

height: 50px;

}







.no_margin{ margin:
0px}

.no_padding{padding:
0px}



.div_five{width:
220px; padding:
0 10px; 
display:inline; }



footer .footer_text

{

display: inline;

color: #FFF;

padding-right: 
10px;

}
.modal-header
{
display:block;}