@charset "utf-8";
/* CSS Document */
@media screen and (minwidth:1367px) {   
   
}

@media screen and (max-width:1850px) {
.brandsliderdiv {width: 1350px;}
    .modal-wrapper
    {
         height:calc(100% - 100px);
        overflow-y: scroll;
    overflow-x:hidden;top:3%;
    }  
}

@media screen and (max-width:1700px) {
.brandsliderdiv {width: 1220px;}
.innerpgcontainer .gallerybox .item {width: calc(32.4% - 10px);}
.contactinfobox {padding: 60px 20px;}
    
.detailcontainerupper img{width:520px; max-width: 50% }
    .customscrollcontainer {float: right; width: calc(100% - 52%);}
    .customscrollcontainer ul li {width: 100%;}
    
}

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

footer .footerlinks {width: calc(100% - 330px);}
footer .wrapper .servicelinksdiv {padding: 0 0 0 60px;}
.brandsliderdiv {width: 1150px;}
    


}

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

footer .quicklinksdiv {width: 230px;}
footer .servicelinksdiv {width: calc(100% - 230px);}
footer .footerlinks {width: calc(100% - 280px);}
footer .wrapper .servicelinksdiv {padding: 0 0 0 30px;}
.brandsliderdiv {width: 1050px;}
.ctaright {width: 230px; float: right;}
.ctabtnbar {width:100%; float: right; margin: 30px 0 0 0;}
.ctabtnbar a.bookservice {margin: 20px 0 0 0;}
.ctacenter {width: calc(100% - 500px);}
    
}

@media screen and (max-width:1440px) {
   
    .brandsliderdiv {width: 1030px;}
    .testimonialright {width: 100%;}
    .testimonialleft {float: left;width: 50%;margin: 0 0 0 31%;}
    .abtguranteeleft {width: 100%;}
    .abtguranteeright {width: 100%;}
    .absolutecontent {width: 80%;}
    .innerpgcontainer .gallerybox .item {width: calc(32.3% - 10px);}
    
}
    
@media screen and (max-width:1366px) {
#menu ul li > a {padding: 19px 30px 19px;}
footer .wrapper {padding: 65px 50px 0;}
footer .quicklinksdiv {padding: 0 38px 0 0; width: 180px;}
footer .servicelinksdiv {width: calc(100% - 180px);}
.brandsliderdiv {width: 940px;}
.gallerybox .item {width: calc(23.5% - 10px);}
    
.contactinfobox dl {width: 43%; margin: 0 3.5% 30px;}
.contactinfobox {padding: 60px 20px 20px;}
.aboutboxone img.fright {margin-bottom: 20px;}
.aboutboxone {padding: 0 0 20px 0;}
.innerpgcontainer .gallerybox .item {width: calc(32.2% - 10px);}
    
   
}

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

.innerpgcontainer .innerleft {width: 100%; margin-bottom:30px;}
.innerpgcontainer .innerright {max-width: 455px;float: none;background: #f04230;padding: 30px;width: 100%;margin: 20px auto;display: table;}
    
}


@media screen and (max-width:1280px) {    
footer .footercontact {width: 100%;float: right;border-top: 3px double #232425;padding: 20px 0 0 0;margin: 30px 0 0 0; height: auto!important}
footer .footercontact dl {width: 25%; margin: 0 0 25px 0;}
footer .footerlinks {width: 100%; border-right: 0px solid;}
    
.brandsliderdiv {width: 840px;}
    .modal-wrapper {width: 85%;}
    
    
    
}
@media(max-width:1280px){
    .modal-wrapper{
        width:85%;
        margin-left:-42.5%;
      
    }
}

@media screen and (max-width:1200px) {
    
#menu ul li > a {padding: 19px 21px 19px;}
.footerlogosection ul {text-align: center!important;}
.footerlogosection ul li:last-child {float: none!important;}   
.footerlogosection ul li:first-child, .footerlogosection ul li:nth-child(2) {float: none!important; display: inline-block;}
.brandsliderdiv {width: 750px;}
.welcomesection .wrapper {width: 96%;}
    
    .aboutboxone{text-align: center}
    .aboutboxone p:first-child{clear: both}
    .aboutboxone img.fright {margin: 0 auto 20px;float: none;width: 100%;max-width: 540px;}
    .absolutecontent {width: 96%; padding: 20px;}
    .innerpgcontainer .gallerybox .item { width: calc(32% - 10px);}
    .innerservicecontainer .servicebox {width: 31%;}
    .innerservicecontainer .servicebox.guranteebox {width: 64%;}
    
    
}

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

#menu ul li > a {padding: 18px 15px 20px;}
    footer .footercontact dl {width: 50%;margin: 0 0 25px 0;display: inline-block;min-height: 60px;}
    .brandsliderdiv {width: 690px;}
    .formmapcontainer .mapdiv {width: 100%;}
    .formmapcontainer .formdiv {width: 100%;float: right;text-align: center;margin: 30px 0 0;}
    .contactinfobox dl {min-height: 80px;}
    .suburbtext ul li {width: 49%;}
}


@media screen and (max-width:1024px) {
    
#menu ul li > a {padding: 18px 12px 20px;}
.brandsliderdiv {width: 650px;}
.gallerybox .item {width: calc(48.5% - 10px);}
.testimonialleft {margin: 0 0 0 44%;}
    
    .innerpgcontainer .gallerybox .item {width: calc(31.7% - 10px);}
    
    .detailcontainerupper img {width: 520px; max-width: 40%;}
    .customscrollcontainer {float: right; width: calc(100% - 45%);}
    
	
    
}

@media screen and (max-width:992px) {
.testimonialpg .item{width:calc(50% - 22px); margin:0px 10px 20px 10px; float:left;}
.processsection{margin-bottom:40px;}
/* for responsive menu */    
a#toggle { display: block; }
main#content {margin-top: 65px; transition: all ease-out 0.3s;}
#menu {
  position: fixed;
  width: 250px;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  background:rgb(228, 53, 35);
  transform: translateX(-250px);
  border-right: 1px solid rgba(255,255,255,0.2);font-family: 'AvenirNextLTPro-Bold';
}
#menu ul {text-align: left; background-color: transparent; border:0px solid #ffffff}
#menu ul li { display: block; width: 100%; }
#menu ul li a { display: block; padding: 12px 15px; border-right: 0px solid #666666; color:#ffffff}
    
    
#menu ul li a > i {float: right;width: 35px;height: 35px;text-align: center;margin: -5px 0 0 0;padding: 8px 0 0 0;font-size: 20px;color: #ffffff;}
    
    #menu ul li.activepg a > i {color: #333333;}
#menu ul li ul {display: none;position: static;width: 100%;background: #9f2518;}
#menu ul li:hover > ul { display: none; }
#menu ul li:hover > a > i { transform: rotateZ(0); }
#menu ul li.open > a { background-color: rgba(0, 0, 0, 0.3); }
#menu ul li.open > a > i { transform: rotateZ(90deg); }
#menu ul li.open > ul { display: block; }
    
#menu ul li ul li.activepg a {color: #333333;} 
    

div#overlay {
  display: block;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all ease-out 0.3s;
  z-index: 100;
  opacity: 0;
}

#menu ul li i.fa.fa-caret-down.mysubmenu {display: block;position: absolute;top: 0;right: 0;background: rgba(255,255,255,0.2);width: 30px;height: 30px;margin: 7px 0 0 0;text-align: center;color: #ffffff;
padding: 8px 0 0; cursor:pointer}
	
#menu ul li i.fa.fa-caret-down.mysubmenu:before {content: "\f067"; }
#menu ul li.open i.fa.fa-caret-down.mysubmenu:before {content: "\f068";}
.open-menu a#toggle .fa-bars:before {content:"\f00d"}	

html.open-menu {overflow: hidden;}

html.open-menu div#overlay {
  visibility: visible;
  opacity: 1;
  width: calc(150%);
  left: 250px;
}

html.open-menu a#toggle,
html.open-menu main#content { transform: translateX(0); }
html.open-menu nav#menu {z-index: 10; transform: translateX(0);}

#menu ul li:before, #menu ul li:first-child:after {display:none} 
    #menu ul li.activepg a {color: #333333;}
    #menu ul li.activepg {background: #ffffff}
    
    #menu ul li:hover {background: rgba(0,0,0,0.6);} 
    #menu ul li:hover a {color:#ffffff}
    #menu ul li ul li:hover {background: rgba(0,0,0,0.6);}
    #menu ul li ul li a {color: #ffffff;font-size: 14px;padding-left: 25px;}
    #menu ul li:hover a > i {color: #ffffff;}
    #menu ul li ul li:hover > a {background: rgba(0,0,0,0.1);}
    #menu ul li:hover > a:after{display: none}
    #menu ul li ul li.activepg a {
    background: green!important;
    color: #ffffff!important;
}
    #menu ul li ul li.activepg a {background: rgba(255,255,255,0.2)!important;color: #333!important;}
    #menu ul li ul li.activepg:hover > a {background: #390d09!important; color: #ffffff!important;}
    #menu ul li ul li:last-child > a {padding: 10px 10px 10px 25px;}
    
    
     
    
    .headerright ul li.address {background: url(../images/header-address-icon.png)no-repeat 10px 15px #ffffff;padding: 12px 12px 12px 50px;margin: 0 10px 0 0;}
    
    .headerright ul li.call {background: url(../images/header-phone-icon.png)no-repeat 10px 15px #e43523; padding: 15px 15px 15px 55px;}
    .logo {width: 280px;}
    .headerright {width: 533px;margin: 17px 0 0 0;}
    .brandtitlediv {width: 100%;float: left;background: #e43624;height: 100px;color: #ffffff;font-size: 30px;font-family: 'Proxima Nova exTh';text-transform: uppercase;padding: 40px 0 0 0;line-height: 100%;text-align: center;}
    .brandsliderdiv {width: 100%;}
    .ctaleft, .ctaright {width: 100%; float: left; text-align: center;}
    .ctacenter {width: 100%; text-align: center; margin: 30px 0 0;}
    .ctacenter p{text-align: center;}
    .ctabtnbar {margin: 0;}
    .carimg {width: 750px; height: auto; margin: 0 0 0 -375px;}
    .modal-text,.bookasevicecar{display:none;}
   
}

@media screen and (max-width:900px) {
    
footer .quicklinksdiv {padding: 0 38px 0 0;width: 100%;border: 0px;border-bottom: 3px double #232425; height: auto!important}
footer .wrapper .servicelinksdiv {height: auto!important;width: 100%;margin: 30px 0 0 0;padding: 0 0 0 0;}

    footer .quicklinksdiv ul{width:100%; float:left}
    footer .quicklinksdiv ul li{width:33.33%; float:left}
    .innerservicecontainer .servicebox {width: 48%;}
    .innerservicecontainer .servicebox.guranteebox {width: 98%; height: auto!important}
    img.guranteeseal {margin: 0 0 20px;}
    .welcomesection.sububgsection .suburbtext {width: 100%;}
    .welcomesection.sububgsection .suburbmap {width: 100%;}
    .welcomesection.sububgsection .suburbtext {height: auto;}

}

@media screen and (max-width:860px) {
    
  .gallerybox .item {width: calc(48% - 10px);}
    .innerpgcontainer.aboutpg .innerright {width: 100%;float: none;background: #181617;padding: 0;max-width: 400px;clear: both;margin: 0 auto;display: table;}
    .innerpgcontainer .innerleft {width: 100%; float: left;}
    .innerpgcontainer .gallerybox .item {width: calc(48% - 10px); }
   .servicecontainer ul.slick-dots{display:none !important;}
    
}


@media screen and (max-width:800px) {
    
    .headerright {width: 490px; margin: 17px 0 0 0;}
    .headerright ul li.social{margin:0 0 0 6px;}
    .headerright ul li.address {background: url(../images/header-address-icon.png)no-repeat 6px 15px #ffffff;padding: 12px 12px 12px 45px;margin: 0 10px 0 0;}
    .headerright ul li.call {background: url(../images/header-phone-icon.png)no-repeat 6px 15px #e43523; padding: 15px 15px 15px 46px;}
    .headerright ul {margin: 0 0 10px;}
    
    
}


@media screen and (max-width:768px) {
   .carimg {width: 100%;height: auto;margin: 0 0 0 -50%;}
    .tyreimg , .engineimg {display: none}

}

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

.logo {float: none;margin: 10px auto 10px;}
.headerright {width: 460px;margin: 10px auto 0;float: none;padding: 0 0 10px 0;}
.headerright ul li.social a{margin-top: 5px;}
.headerright ul li.call {background: url(../images/header-phone-icon.png)no-repeat 6px 6px #e43523; padding: 5px 15px 5px 46px;}
.headerright ul li.call:hover {background: url(../images/header-phone-icon.png)no-repeat 6px 6px #c93020;}
.headerright ul li.address {background: url(../images/header-address-icon.png)no-repeat 6px 5px #ffffff;padding: 5px 12px 5px 45px;margin: 0 10px 0 0;line-height: 110%;}
    .testimonialright {padding: 0 40px;}
    .modal-text p {width: 100%;}
    .modal-text {height:auto;}
    .bookasevicecar {display: none;}
    
    .detaillowerleft {width: 100%;height: 500px;padding: 50px 10px 50px 20px;position: inherit;}
    .absoluteserviceimg img {width: 100%; height: auto;}
    .absoluteserviceimg {height: auto;}
    .detailcontainerlower {padding: 20px;}
    .customscrollcontainer {float: right;width: 100%;clear: both;margin: 20px 0 0;text-align: left}
    .detailcontainerupper {padding: 20px; text-align: center;}
    .detailcontainerupper img {width: 520px;max-width: 80%;margin: 0 auto;float: none;}
     .modal-wrapper
    {
            height:calc(100% - 50px);
    }
    
}

@media screen and (max-width:700px) {
    
footer .wrapper {padding: 65px 30px 0;}
.contactinfobox dl {width: 100%; margin: 0 3.5% 10px;}
    .innerpgcontainer .gallerybox .item {
    width: calc(47.8% - 10px);
}
    
}

@media screen and (max-width:640px) {
	.innerpgcontainer.aboutpg .innerright .whychooseusdiv .whychooselogobar img{clear: inherit; margin: 0 5px 20px; float: left; width:calc(50% - 10px);}
    footer .footercontact dl {width: 100%;}
    footer .quicklinksdiv ul li {width: 50%;}
    footer .wrapper .servicelinksdiv ul li {width: 100%;}
    .whychooseusdiv:before {display: none}
    .testimonialleft {margin: 0 0 0 5%; width: 90%; background: green;}
    .whychooseusdiv {max-width: 100%;}
    .testimonialright {padding: 0 10px;}
    
    .testimonialright .slick-next, .testimonialright .slick-prev {bottom: 50px;}
    .formmapcontainer {padding: 50px 10px;}
    .modal .g-recaptcha{transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
    .modal .buttonbar {float: right; width:234px; margin-right:0}
    
    
    .modal input[type="text"], .modal input[type="email"], .modal input[type="tel"], .modal textarea, .modal select { width: 98%; margin-bottom:10px;}
    .modal .contactform ul li {margin: 0}


    
 
}

@media screen and (max-width:600px) {
	input[type="text"], input[type="email"], input[type="tel"], textarea{width: 98%;}
	.g-recaptcha{transform: scale(0.69); -webkit-transform: scale(0.69); transform-origin: 0 0; -webkit-transform-origin: 0 0;}
	.detaillowerleft{height:auto; float:left;}
	.detaillowerleft .btn_sb{float:left;}
	.detaillowerleft .buttonbar .captchadiv{float:left; margin-bottom:15px; height:52px;}
	.detaillowerleft .buttonbar{float: left; width: 100%;margin: 0px 10px 0px 0;
	.testimonialcontainer.testimonialpg{padding:15px 0px;}
	.testimonialpg .item{width:calc(100% - 22px); margin:0px 10px 20px 10px; float:left;}
	.ctabtnbar a.phonebtn{ margin-right: 0px; }
    .servicecontainer ul.slick-dots{display:none !important;}
.gallerybox .item {width: calc(47% - 10px);}
    
    .formmapcontainer input[type="text"], .formmapcontainer input[type="email"], .formmapcontainer input[type="tel"], .formmapcontainer textarea {width: 98%; margin: 0 0 10px}
    .formmapcontainer ul li {margin: 0;}
    .formmapcontainer .buttonbar {margin: 0 0 10px 0; width: 239px;}
 .buttonbar .captchadiv {width: 233px;float: right;margin: 0 10px 0 0;}
    .btn_sb {margin: 0 10px 0 0;}
    .g-recaptcha{transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
    .innerpgcontainer .gallerybox .item {width: 96%;}
    .pictures_eyes_in .prev, .pictures_eyes_in .next {top: 100%;}
    .innerservicecontainer .servicebox {width: 98%;}
    .servicpg_container {padding: 50px 30px;}

}


@media screen and (max-width:480px) {
 
    footer .quicklinksdiv ul li {width: 100%;}
    .footerlogosection ul li img{max-width: 100%}
    .footerlogosection ul li:last-child {width: 100%!important; padding: 15px 10px 0 55px;}
    .ctabox {background: #292929;width: 96%;float: left;padding: 25px 20px;margin: 0 0 0 2%;}    
    .gallerybox .item {width: 94%;}
    .innerservicecontainer .servicebox.guranteebox {background-size: 350px;}
    .rightctablock {min-height: 450px;}
}

@media screen and (max-width:420px) {
    
.logo {float: left;margin: 0 auto 10px;width: 235px;}
    
.headerright ul li.address {display: none}
.headerright ul li.social a {
    margin-top: 5px;}
.headerright {width: 300px;margin: 0 auto 0;float: none;padding: 10px 0 10px 0;text-align: center;clear: both;}
.headerright ul li.call {background: url(../images/header-phone-icon.png)no-repeat 6px 6px #e43523;padding: 5px 15px 5px 46px;display: inline-block;float: none;}
    
}

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

.footerlogosection ul li:last-child span {padding: 30px 10px;}
.offerdivbx {width: 94%; margin: 0 0 0 -47%;}
    .contactinfobox {padding: 60px 10px 20px;}
    .modal .contactform {padding: 40px 10px;}
    
}



@media screen and (max-width:360px) {
    
}