/* cmsms stylesheet: Firow - Media Queries modified: 06/17/26 10:11:39 */
/* =Responsive Structure
----------------------------------------------- */


@media (max-width: 1250px) {

#footer { padding: 50px 3%; width: 94%; }

}


@media (max-width: 1150px) {

#header-logo-nav-bar { height: 220px; }
nav#menu ul li { font-size: 18px; padding: 50px 5px 46px; margin: 0 9px; }
nav#menu ul li a { font-size: 18px; }
nav#menu ul li ul { width: 230px; }
nav#menu ul li ul li a { font-size: 16px; }
#our-services .service-section .content { min-height: 200px; }
#internal-usps .usp-box { min-height: 190px; }

}



@media (max-width: 1050px) {

nav#menu ul li { font-size: 16px; padding: 51px 5px 47px; }
nav#menu ul li a { font-size: 16px; }
nav#menu ul li ul { width: 210px; }
nav#menu ul li ul li a { font-size: 14px; }
#header-image-bar { min-height: 450px; }
#header-image-bar .filter .wrapper .content { width: 70%; margin: 0 15%; }

}

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

#header-contact-details-bar { padding: 8px 3%; }
nav#menu { display:none; }
#hamburgerContainer, .popupMenuContainer { display: block; }

#header-logo-nav-bar { height: 200px; }
#header-logo-nav-bar #logo { width: 25%; }
#header-logo-nav-bar #logo img { max-width: 200px; }
#header-image-bar .filter .wrapper .content p { font-size: 50px; line-height: 62px; }
#internal-usps .usp-box { min-height: 240px; }
#our-services .service-section .content { min-height: 220px; }

}

@media (max-width: 900px) {

#internal-header-bar .filter .wrapper .content { margin-left: 30%; }
#internal-usps .usp-box { min-height: 280px; }
#footer .logo-col { margin-bottom: 20px; }
#footer .logo-col, #footer .links-col { width: 47.5%; margin-right: 4%; }
#footer .news-col, #footer .contact-col { width: 47.5%; margin-right: 0%; }
#footer .news-col .NewsSummaryLink { width: 100%; }

}

@media(max-width:850px) {

#header-image-bar { min-height: 400px; }
#header-image-bar .filter .wrapper .content p { font-size: 44px; line-height: 56px; }
#header-image-bar .filter .wrapper .content a.button { padding: 8px 30px; font-size: 16px; line-height: 24px; }
#vehicles ul { width: 90%; text-align: left; }
#vehicles ul li { width: 36%; }


}


@media (max-width: 750px) {

#header-contact-details-bar { text-align: center; }
#header-contact-details-bar span a { font-size: 16px; }
#header-contact-details-bar span a.email:before { background-size: 15px 14px; width: 20px; height: 16px; }
#header-contact-details-bar span a.tel::before { background-size: 17px 14px; width: 20px; height: 16px; }
#header-logo-nav-bar { height: 185px; }
#hamburgerContainer { top: 78px; }
#header-image-bar .filter .wrapper .content { width: 80%; margin: 0 10%; }
#internal-header-bar .filter .wrapper .content h1 { font-size: 32px; line-height: 36px; }
#content .wrapper { display: block; }
body.home #content #main-content { width: 88%; margin: 10px 1% 0px; padding: 30px 5%; }
#content #usp-section { width: 92%; margin: 0px 1% 10px; padding: 30px 3%; }
#content #usp-section .usp-box { margin: 15px auto; }
#content #int-left-content { width: 88%; margin: 10px 1% 0px; padding: 30px 4.9% 0px; min-height: auto; }
#content #int-left-content img { width: 80%; margin: 30px auto; }
#content #int-left-content .corner-image { display: none; }
#content #int-main-content { width: 92%; margin: 0px 1% 10px; padding: 0px 3% 30px; min-height: auto; }
#internal-usps { width: 92%; margin: 0px 1% 10px; padding: 30px 3%; }
#internal-usps .wrapper { padding: 0; }
#internal-usps .usp-box { display: block; width: 85.5%; margin: 15px auto; min-height: auto; }
#our-services .service-section { display: block; width: 80%; max-width: 500px; margin: 0 auto 20px; }
#our-services .service-section.middle { margin: 0 auto 20px; }
#our-services .service-section .content { min-height: auto; }
#vehicles ul li { width: 35%; font-size: 16px; line-height: 24px; }
#testimonials .wrapper { width: 94%; padding: 70px 3%; }
#testimonials .testimonial-section { display: block; width: 80%; max-width: 500px; margin: 0 auto; }
#bottom-contact-form .callbackForm { overflow: scroll; max-height: 370px; height:75vh; }
#internal-info .info-section .one-half {width:92%; text-align:center;}
}

@media (max-width: 650px) {

#header-contact-details-bar { padding: 12px 3%; z-index:350; }
#header-contact-details-bar .social { display: none; }
#header-contact-details-bar .email { margin: 0; }
#hamburgerContainer.sticky { top: 3px; border:1px solid #50c9ce; }
#header-logo-nav-bar { height: auto; padding-top:42px;z-index: auto; }
#header-logo-nav-bar #logo { display: block; width: 50%; text-align: center; margin: 0 auto; }
#header-logo-nav-bar #logo img { max-width: 175px; }
#header-image-bar { margin: 0; min-height: 325px; }
#header-image-bar .filter .wrapper .content p { font-size: 40px; line-height: 46px; margin-bottom: 10px; }
#header-image-bar .filter .wrapper .content a.button { padding: 6px 25px; font-size: 15px; line-height: 23px; }
#internal-header-bar { margin-top: 0; }
#internal-header-bar .filter .wrapper .content { margin: 0 auto; width: 80%; display: block; text-align: center;  }
nav#menu ul { width: 100%; border: 0; padding: 0; }
nav#menu ul li { display: block; width: 100%; border: 0; padding: 5px 0; text-align:center; }
#hamburgerContainer { top: 60px; }
#content #main-content p:first-of-type { font-size: 24px; line-height: 34px; }
#content #main-content p { font-size: 16px; line-height: 26px; }
#our-services p.ourservices { font-size: 32px; line-height: 38px; }
#vehicles ul li { width: 37%; margin: 0 4% 15px; }
#vehicles p.supply { font-size: 32px; line-height: 38px; }
#testimonials p.customers { font-size: 32px; line-height: 38px; }
#footer { width: 89.5%; padding: 50px 5%; }
#footer .logo-col, #footer .links-col, #footer .news-col, #footer .contact-col { width: 100%; margin-right: 0%; margin-bottom: 20px; }
}
@media (max-width: 600px) {
  #vehicles ul li { width: 38%; margin: 0 3% 15px; }
}
@media (max-width: 575px) {
  #header-contact-details-bar span a {font-size:15px;}
}
@media (max-width: 550px) {
  #vehicles ul { width: 215px; }
  #vehicles ul li { width: 94%; }
  #content table.parts { overflow-x: scroll; display: block; }
}
@media (max-width: 480px) {
  #header-contact-details-bar { text-align:center; padding: 8px 1%; width:98%;}
  #header-contact-details-bar span { display: block; line-height: 22px; padding-left: 0; width:100%; }
  #hamburgerContainer { top: 75px; }
  #hamburgerContainer.sticky { top: 14px; }
  #internal-header-bar .filter .wrapper .content { width: 90%; }
  #internal-header-bar .filter .wrapper .content h1 { font-size: 30px; line-height: 34px; }
  #getintouch { width: 60%; }
  #testimonials .testimonial-section {  width: 100%; }
  #footer { width: 89%; }
}
@media (max-width: 410px) {
  #footer { width: 88%; }
}
/* cmsms stylesheet: Pop Up Form modified: 09/04/19 10:18:59 */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    z-index: 3500;
}

.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 125px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    font-family: 'Lato', sans-serif;
    z-index: 3500;
}



@media (max-width: 900px) {
.modal, .modal2 { padding-top:10px; z-index: 9000; }
}


/* Modal Content */
.modal-content {
    position: relative;
    background-color: #dcf4f5;
    margin: 0 auto;
    padding: 2% 2%;
    border: 10px solid #ffffff;
    border-radius: 15px;
    width: 80%;
    max-width: 900px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.8s;
    animation-name: animatetop;
    animation-duration: 0.8s;
}

.modal::after, .modal2::after, .modalc::after, .modalTwo::after {
    content: "";
    display: block;
    height: 150px;
    width: 96%;
}

.modal-content h3 {
    font-size: 50px;
    line-height: 60px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    color: #19144a;
    text-transform: uppercase;
}

.modal-content p {
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    color: #000000;
    margin-top:13px
}

.modal-content p.form-tel-email span {
    margin: 0 1%;
    white-space: nowrap;
}

.modal-content p.form-tel-email a {
    color: #211452;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}

.modal-content p.form-tel-email a:hover { border-bottom: 0px solid #00f2bd; }

.modal-content p.form-tel-email i {
    color: #211452;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.closew {
    color: #211452;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closew:hover,
.closew:focus {
    color: #00f2bd;
    text-decoration: none;
    cursor: pointer;
}

.close2 {
    color: #211452;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close2:hover,
.close2:focus {
    color: #00f2bd;
    text-decoration: none;
    cursor: pointer;
}

.closec {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    font-style: normal;
}

.closec:hover,
.closec:focus {
    color: #00f2bd;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;

    
}

.modal-header span.closew:hover {
    color: #000000;
    
}

.modal-header b.close2:hover {
    color: #000000;
    
}

.modal-header em.closec:hover {
    color: #00f2bd;
    
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;

}


.modal-body div.formsection {
 display: block;
 width: 90%;
 max-width: 500px;
 margin: auto;
 border-radius: 15px;
}


div#customform,
div#defaultform {
display: none;
}

#myModal form input, form textarea{

}
.name, .email, .phone, .company{

  display:inline-block;
  margin-bottom:10px
}
.name, .phone{
  margin-right:0.8%
}
form textarea{
  padding:10px 1.8%;
  width:96.4%;
  height:83px
}
form .submit{
  margin-top:1em;
  margin-bottom:0.5em.
}

@media (max-width: 800px) {
   .modal-content { width: 85%; }
   .modal-content p { font-size: 18px; }
   .modal-footer { padding: 2px 0; }
}

@media (max-width: 650px) {



   .modal-content h3 {
    font-size: 36px;
    line-height: 46px;
   }

   .modal-content p {
    font-size: 16px;
    line-height: 26px;
   }

   .modal-content p.form-tel-email span {
       display: block;
       width: 100%;
   }
}
@media(max-width:637px){
  .name, .email, .phone, .company{
    margin-right:0;
    width:100%
  }
}
@media (max-width: 480px) {
   .modal-content h3 {
    font-size: 28px;
    line-height: 38px;
   }

}

@media (max-width: 380px) {
   .modal-content { width: 90%; }
   .modal-content p { font-size: 14px; }
}