/*    
font-family: 'Kanit', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
    
Logo Blue #0084c7
Navy #003d5c rgba(0,61,92,1)
Light Blue #27aae1
Castrol Green #098e3f
Castrol Red #e40b1e

 --- --- LAYOUT   
 
1. Offcanvas
2. Static Nav & Mainpage
3. Castrol
4. Header
5. Main
*/   

/* *** 1. Offcanvas */
    
.offcanvas {max-width:300px; background-color:#f9f9f9;}   
.offcanvas .logo-wrapper {padding:20px;}    
    
.offcanvas .nav {text-transform: uppercase; font-size:13px;}
.offcanvas .nav .nav-link {
    background-color:#f9f9f9; 
    color:#003d5c; 
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-image:url(/assets/css/icons/chevron-right-blue.png);
    padding:13px 20px;}
    
.offcanvas .nav .nav-link.active {background-color:#fff;}
.offcanvas .nav .nav-link:hover {background-color:#003d5c; color:#fff; background-image:url(/assets/css/icons/chevron-right-white.png);}

/* *** 2. Static Nav & Mainpage */ 
    
 .nav-static .logo-wrapper {padding:20px;}  
    
 .nav-static {
    display:none;
    background-color:#f1f3f4;
    width:250px; 
    height:100%;  
    position:fixed; 
    overflow-y:auto; 
    overflow-x:hidden;
    top:0; left:0;
    border-right:1px solid rgba(0,0,0,0.1);}
    
.nav-static .nav {text-transform: uppercase; font-size:13px;}
.nav-static .nav .nav-link {
    background-color:#f1f3f4; 
    color:#003d5c; 
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-image:url(/assets/css/icons/chevron-right-blue.png);
    padding:9px 18px;}
    
.nav-static .nav .nav-link.active {background-color:#fff;}
.nav-static .nav .nav-link:hover {background-color:#003d5c; color:#fff; background-image:url(/assets/css/icons/chevron-right-white.png);}

.nav-static .nav-cta {font-size:18px; background-color:#003d5c; color:#fff;}
.nav-static .nav-tel {font-weight:800; font-size:22px;}

@media (min-width: 1200px) {
    .nav-static {display:block;}
    .mainpage {padding-left:250px;}
}
@media (min-width: 1500px) {
    .nav-static {width:300px;}
    .mainpage {padding-left:300px;}

    .nav-static .nav .nav-link {padding:14px 20px;}
}
    
/* *** 3. Castrol */   
 
.castrol-banner {
background-color:#098e3f;
background-image:url(/assets/css/images/castrol-green-banner.jpg);
background-repeat:repeat-x;
background-size:auto 100%;} 
    
.header-castrol-logo {display:block; background-color:#fff; width:100%; max-width:240px;}    
.castrol-banner-desc {font-size:12px;} 
    
.castrol-box .title {color:#098e3f; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight:400; font-size:20px;}
.castrol-box .description {color:#aaa; font-family: 'Roboto Condensed', sans-serif;}
.castrol-box .small {color:#ccc; font-size:10px; font-family: 'Roboto', sans-serif;}
    
@media (min-width: 768px) {
    .castrol-banner-desc {font-size:14px;}    
}

/* *** 4. Header XS & XL */    
    
.xs-header {background-color:#fff; padding:20px 0 0 0;}
.xs-header-logo {display:block; max-width:150px;}
.xs-header-brand {color:#000; font-size:13px; text-align:center; padding:4px;}   
.xl-header {display:none; color:#003d5c;}  
.xl-header {padding:45px 0 30px 0;}
.xl-header-tel {font-weight:500; color:#e40b1e;}
.xl-header-brand {font-size:18px; font-weight:500;}
.xl-header .topmenu {font-size:15px;}
.xl-header .topmenu a {color:#003d5c; text-decoration: none; margin:0 5px; text-transform: uppercase; font-weight:600;}
.xl-header .topmenu span {font-size:15px; margin-right:9px;}
    
.xl-header .social-media-links {padding-top:12px;}   
.xl-header .social-media-links a {color:#003d5c; font-size:16px; margin:0 15px; text-decoration: none;}  

@media (min-width: 1200px) {
    .xs-header {display:none;}
    .xl-header {display:block;}
    .xl-header-tel {font-size:24px;}
}
@media (min-width: 1400px) {
    .xl-header-tel {font-size:28px;}
    .xl-header-brand {font-size:20px;}
}    
@media (min-width: 1600px) {
    .xl-header-tel {font-size:30px;}
    .xl-header-brand {font-size:22px;}
}    
    
/* *** 5. Main */
 
body {font-family: 'Kanit', sans-serif; color:#000; font-size:17px;}
    
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 900px;
  }
}
@media (min-width: 1300px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 980px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1000px;
  }
}
@media (min-width: 1550px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1200px;
  }
}
@media (min-width: 1600px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1250px;
  }
}
@media (min-width: 1700px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

.bg-white {background-color:#fff;} 
.bg-navy {background-color:#003d5c;}
.bg-light-blue {background-color:#27aae1;}
.bg-pale-navy {background-color: #f2f5f7;} 
.bg-castrol-green {background-color:#098e3f;}    
.bg-castrol-red {background-color:#e40b1e;}
    
.text-white {color:#fff;}
.text-castrol-red {color:#e40b1e;}
.text-castrol-green {color:#098e3f;}
  
.roboto-condensed {font-family: 'Roboto Condensed', sans-serif;}
    
h1 {font-size:35px; font-weight:500; text-transform: uppercase;}  
 
p {font-family: 'Roboto Condensed', sans-serif; text-align: justify; line-height:1.75;}
    
@media (min-width: 768px) {
    h1 {font-size:40px;} 
}

.opening-times {text-align: center; color:#003d5c;}
.opening-times .title {font-size:23px; font-weight:600; margin-bottom:20px;}
.opening-times .description {font-size:19px; font-family: 'Roboto Condensed', sans-serif; color:#888;}   
    
.title-block {
    background-size:cover;
    background-repeat: no-repeat;
    background-color:#003d5c;
    background-position: center;
    color:#fff;
    padding:50px 0;}

.title-block#car-servicing {background-image:url(/assets/css/images/banner-03.jpg);}
.title-block#brakes {background-image:url(/assets/css/images/banner-07.jpg);}
.title-block#diagnostics {background-image:url(/assets/css/images/banner-08.jpg);}    
.title-block#suspension {background-image:url(/assets/css/images/banner-09.jpg);}    
.title-block#repairs {background-image:url(/assets/css/images/banner-11.jpg); background-position: bottom;}
.title-block#tyres {background-image:url(/assets/css/images/banner-12.jpg);}  
.title-block#ecu-remapping {background-image:url(/assets/css/images/banner-05.jpg);}
.title-block#air-conditioning {background-image:url(/assets/css/images/banner-04.jpg);}
.title-block#terraclean {background-image:url(/assets/css/images/banner-13.jpg);}
.title-block#mot {background-image:url(/assets/css/images/banner-01.jpg);}
.title-block#digitalrecords {background-image:url(/assets/css/images/banner-14.jpg);}


.call-now-box {
    background-color: #f2f5f7;
    background-size:200px;
    background-repeat: no-repeat;
    background-position:110% 0;
    background-image:url(/assets/css/images/mot-icon.png);
    border:1px solid #dee2e6;  
    border-radius:5px;
    padding:20px;}

.call-now-box .title {font-family: 'Montserrat', sans-serif; color:#003d5c; font-weight:800; font-style: italic; font-size:16px; text-transform: uppercase;}
.call-now-box .description {font-size:14px; margin-bottom:12px;}
.call-now-box .tel {
    color:#003d5c; font-weight:600; font-size:28px;
    background-image:url(/assets/css/icons/footer-tel.png);
    background-repeat: no-repeat;
    background-size: 40px auto;
    padding-left:55px;
    background-position: left center;}

.ticks-section ul{margin:0; padding:0; list-style: none;}
.ticks-section li {
    display:block;
    background-image:url(/assets/css/icons/checkmark-blue-box.png);
    background-repeat: no-repeat;
    background-size: 22px auto;
    background-position: left center;
    padding-left:37px;
    margin-bottom:15px;}
    
.gridlink .title {
    padding:12px 0;
    background-image:url(/assets/css/icons/arrow-right-blue.png);
    background-size:13px;
    background-repeat: no-repeat;
    background-position: right center;
    transition: 1s all ease;}
    
.gridlink .title:hover {background-position: 95% center;}
.gridlink .title a:hover {color:#27aae1;}   
.gridlink .title a {text-transform:uppercase; color:#003d5c; text-decoration: none; letter-spacing:1px; font-size:18px;}  
.gridlink .description {font-family: 'Roboto Condensed', sans-serif; color:#777;}
    
.gridlink img {
        height:200px;
        object-fit: cover;
        object-position: 100% 50%;
        margin-bottom:20px;}    
    
.google-rated {
    font-family: 'Roboto Condensed', sans-serif;
    color:#777;
    padding-left:45px;
    background-image:url(/assets/css/images/google-logo.jpg);
    background-size:24px;
    background-repeat: no-repeat;
    background-position: left center;} 
    
    
/* *** Payment Assist */  
.pa-sidebar-section .pa-title {font-size:15px; font-weight:400; font-family: 'Roboto Condensed', sans-serif; color:#000;}
.pa-sidebar-section .pa-desc {font-size:14px; font-weight:300; font-family: 'Roboto Condensed', sans-serif; color:#2a569d;}
.pa-homepage-section .pa-title {font-size:19px; font-weight:500; font-family: 'Roboto Condensed', sans-serif; color:#000;}
.pa-homepage-section .pa-desc {font-size:17px; font-weight:400; font-family: 'Roboto Condensed', sans-serif; color:#2a569d;}
    
/* Footer */
    
footer {
    font-family: 'Roboto Condensed', sans-serif;
    color:#555;
    background:#f1f3f4;}
    
footer a {color:#555; text-decoration: none;}

.footer-mobile-buttons a {
    display:inline-block;
    text-decoration: none;
    text-align: center;
    padding:50px 10px 10px 10px;
    background-size:40px;
    background-repeat: no-repeat;
    background-position: center top;
    color:#003d5c;
    text-transform: uppercase;
    font-weight:600;
    margin:0 25px;
    font-size:14px;
}
    
.footer-mobile-buttons a#footer-home {background-image:url(/assets/css/icons/footer-home.png);}
.footer-mobile-buttons a#footer-mot {background-image:url(/assets/css/icons/footer-mot.png);}
.footer-mobile-buttons a#footer-tel {background-image:url(/assets/css/icons/footer-tel.png);}
    
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}