﻿
/*** BANNER BATTERIES RESPONSIVE DESIGN ***/

.mobile-show { display:none; }
#button-small-hide2 { display:none; }
.mobile-menu { display:none; padding-top:40px; }
.mobile-menu { display:none;     position: fixed;
    top: 0px;
    bottom: 0;
    z-index: 2;
    background-color: rgba(0,0,0,0.8);
    right: 0px;
        border-right: 6px solid #FECD08;
    left: 0px; }
.mobile-menu a { font-size:25px; color:#fff; text-decoration:none; display:block; padding:20px 20px; text-align:right; font-weight:400; }
#mobile-close {     position: absolute;
    left: 15px;
    top: 5px;
    padding: 10px;
    cursor:pointer;
    color: #fff;
    font-size: 35px; }

#mobile-open {     position: absolute;
    right: 15px;
    top: 0px;
    padding: 10px;
    cursor:pointer;
    color: #fff;
   /*display:none;*/
    font-size: 30px; }

.header_buttons { display:none; }

#background { /*min-width:430px;*/ }

@-ms-viewport{
  width: device-width;
}                     
.mobile-logo-container { display:none; }
.home-text-container .fa { display:none; }
.file_prev { display:none; }
.home-text-container-mobile { display:none; }

#button-small-hide { display:none; }

@media only screen and (max-width: 963px) 
{
#pnlEngine {     float: right;
    margin-bottom: 15px; clear:both; }
#pnlYear  {     float: right;
    margin-bottom: 15px; clear:both; }
#pnlFuelType  {     float: right;
    margin-bottom: 15px; clear:both; }
#pnlBodyType  {     float: right;
    margin-bottom: 15px; }
#pnlButton  {     float: right;
    margin-bottom: 15px; clear:both; }
.moreinfo-form br { display:none; }
.loginRegister-text { height:auto; }
}

@media only screen and (max-width: 920px) 
{
#battery-desc-right { width:100%; margin-left:0px; }
}


@media only screen and (max-width: 880px) 
{
    .home_search img { margin-top:8px; }
}

@media only screen and (max-width: 855px) 
{
    #battery-desc-right { max-width:100%; margin-right:0px; max-width:100%; }
    #battery-desc-right table.desc { width:100%; margin-right:0px; max-width:100%; }
}

@media only screen and (max-width: 830px) 
{
    .home_search img { margin-top:10px; }
    .button_img_size { position:relative; float:left; margin-top:10px; clear:both; }
}

@media only screen and (max-width: 810px) 
{
    .home-content-bottom input { width:56%; }
    .home_search img { margin-top:13px; }
    #main-container-right { margin-right:10% !important; }
}

@media only screen and (max-width: 800px) 
{
    .main-cont-left { display:none; }
    #mobile-open { display:block; }
    .logo_container { width:auto; }
    /*
    .mobile-menu { display:none;     position: fixed;
    top: 0px;
    bottom: 0;
    z-index: 2;
    background-color: rgba(0,0,0,0.8);
    right: 0px;
        border-right: 6px solid #FECD08;
    left: 0px; }
    */
    #main-background {
        height:735px;
        background-color: #CD1426;
        background-image:none;
        background-repeat:no-repeat;
    }
    #main-container-right {
    /*max-height: 0px;*/
   }
   .header_buttons { display:none; }
   /*.header_buttons a { float:right; display:block; }
   .header_buttons_left { float:none; padding:0px; }
   .header_buttons_right { float:none; padding:0px; }
   */
   
   .no-brand-style { height:10px !important; }
    
    #home-text { max-height:0px; margin:0px !important; padding-bottom:0px !important;  overflow: hidden; }
    .text-toggle { max-height:400px !important; }
    #mobile-text { max-height: 0px;
    margin: 0px !important;
    padding-bottom: 0px !important;
    overflow: hidden;
    border-left: 2px solid #fff;
    margin: 0px !important;
    margin-left:9px !important;
    padding-left: 10px !important;
    -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
    }
    .home-text-container-mobile { display:block; margin-bottom:10px; float:left; }
    .home-text-container-mobile .fa { color:#FECD08; cursor:pointer; font-size:20px; float:left; margin-right:10px; }
    .logo_container a { color:#ffffff; }
    .mobile-logo-container { width:35%; float:left; text-align:center; display:block; }
    .mobile-logo-container img { max-width:70%;}
    #main-container-header { height:auto; }
    .home_content_bottom_left {
    margin-left: 5%;
    width: 95%;
    }
    .home_content_bottom_right h1 { font-size:24px; }
    
    .home_content_bottom_left img {
    width: 90%;
    max-width: 180px;
    floaT: right;
    margin: 10px 10% 10px 0px;
    }
    .home-text-container { background-color: rgba(0,0,0,0.3); float:right; display:none; }
    .home-text-container .fa { float:right; font-size:20px; margin:10px; }
    
    #button-small-hide { display:block; }
    #button-hide { display:none; }
    
    #battery-desc-container  h1 { margin-top:0px; font-size:30px; margin-bottom:0px; }
    #main-container-results h1 { margin-top:0px; font-size:30px; margin-bottom:10px; }
    #main-container-results h2 { font-size:22px; }
    #battery-desc-container h2 { font-size:22px; }
    #battery-desc-container h3 { margin:5px auto; }
    
    .main-header-search { color:#FECD08 !important; float:none; background-color:Transparent; margin-right:0px; }
    .main-header-garage { background-color:Transparent; }
    .brand_image_container { margin-top:50px; }
}


@media only screen and (max-width: 780px) 
{
#main-background { background-size:inherit; background-position:inherit; }
.header_buttons_left { float:right; }
.main-header-garage {  }
.header_buttons_right { padding:10px; }
.results { width:47%; margin:10px 1.5%; }


}
@media only screen and (max-width: 720px) 
{

.loginRegister-text { width:auto; height:auto; }
.loginRegister2 fieldset { float:left; margin-left:10px; }
.loginRegister-login { float:left; }


}

@media only screen and (max-width: 680px) 
{
    .header_buttons  
    {
        float: left;
    position: relative;
    width: 100%;
    margin-top: 10px;
    }
    .logo_container { width:auto; }
    .brand_image_container { margin-top:10px; }
    #battery-desc-left {
    width: 50%;
    }
}

@media only screen and (max-width: 650px) 
{
.home_content_bottom_right { float:none; margin:10px auto ; width:80%;}

.home_search img { margin-top:7px; }
.mobile-show { display:block; }
.desktop-show { display:none; }
.mobile-logo-container img {
    margin-bottom: 13px;
    max-width: 200px;
}

#main-container-text {
    /* position: relative; */
    margin-top: 0px;
    color: #FFF;
    /* font-size: medium; */
    float: left;
    padding: 10px;
    /* width: 100%; */
    /*background-color: rgba(0,0,0,0.3);*/
    width:auto;
}

#main-container-right {
    float: none;
    position: relative;
    /* width: 55%; */
    width: 90%;
    margin: 10px auto !important;
    margin-top:30px !important;
    /*background-color: rgba(255,255,255,0.3);*/
    /* position: relative; */
}

.home_content_bottom_left {
   float:none;
   display:none;
    /* position: relative; */
    margin-left:0px;
    max-width: 370px;
    width: auto;
    margin: 10px auto;
}

}

@media only screen and (max-width: 650px) 
{
.loginRegister2 input { font-size:18px; }
.loginRegister2 textarea { font-size:14px; }
#main-container-results { padding-top:0px; }
.mobile-logo-container { width:100%; }
}
@media only screen and (max-width: 600px) 
{
#main-background {     background-size: 280%; }
.login-left { width:100%; }
.login-right { width:100%; float:left; }
#footer-logo {
    float:none;
    position:relative;
    right: 0px;
    display: block;
    bottom:0px;
    text-align: center;
    position: relative;
    margin: 5px auto;
}
}

@media only screen and (max-width: 525px) 
{
.results { width:97%; margin:10px 1.5%; }
.brand_image_container { width:100%; }
.home_search img { margin-top:13px; }
#battery-desc-left {
    width: 70%;
    
    max-width: 313px;
    }
    .drop_list { width:100%; }
    .home-content-bottom select { width:100%; }
}
@media only screen and (max-width: 420px) 
{
    .no-brand-style { margin-top:10px !important; height:0px !important; }
    .home_content_bottom_right h1 { font-size:21px; }
    .home-content-bottom input[type="text"] 
    {
        margin-left: 35px;
        font-size: 28px;
        line-height: 42px;
    }
    
    .bx-viewport { /*height:auto !important;*/ }
      .mobile-logo-container img { max-width: 155px; }

    .home_search {
        background-image: url('../img/Number-Plate.png');
        background-position: initial;
        background-size: 99% 91%;
    }
      
      
      #button-small-hide { display:none; }
      #button-small-hide2 { display: block; color: #fff;font-size: 25px;text-decoration: none; padding: 20px; }
      a#btnSearch1 { text-decoration:none; }
      .home_search img { margin-top:6px; }
}

@media only screen and (max-width: 400px) 
{
    .home_search {
    /*background-size: 140% 100%;
    border-radius:10px;*/
    }
    
    .home_search img { /*margin:10px 0px; float:right;*/ }
    .home_button_img_size { /*
    floaT: right;
    width: 40%; */
    }
    .home-content-bottom input { width:52%; }
    .loginRegister2 tr { width:85%; }
    
    .loginRegister2 fieldset { margin-left:0px; }
    
    .loginRegister2 input[type="text"], .loginRegister2 input[type=password], input, textarea { -webkit-width: calc(90% - 30px); -moz-width: calc(90% - 30px);  width: calc(90% - 30px); }
}
@media only screen and (max-width: 380px) 
{
    .loginRegister select { width:auto; }
    .home_content_bottom_right h1 { font-size:19px; }
    .home_content_bottom_right p { font-size:13px; }
}
@media only screen and (max-width: 360px) 
{
   .home_search img { margin-top:8px; }
   .home_content_bottom_right h1 { font-size:17px; }
   
}
@media only screen and (max-width: 340px) 
{
   .home_search img { margin-top:10px; }
   #button-small-hide2 {     padding-left: 18px; }
}
@media only screen and (max-width: 318px) 
{
   .home_button_img_size { width:18%;  }
   #button-small-hide2 {   padding:20px 5px; }
}