.herocontainer {width:100%; height:600px; background-image: url(../img/stafford-ground-care-management.jpg); background-position:top center; background-size:cover; background-repeat:no-repeat; margin-top:0px; position:relative; }

p {font-weight:400; font-size:17px; line-height:28px; margin-bottom:25px; color:#34473d}

.leftsms p a {font-weight:600; text-decoration: underline}


.leftsms li {font-weight:400; font-size:17px; line-height:28px; margin-bottom:15px; color:#34473d}

p:last-child{
    margin-bottom: 0px;}



h3 {font-family: 'Work Sans', serif; font-size:12px; line-height:16px; font-weight:700; text-transform:uppercase; color:#22cdff; margin-bottom:25px; letter-spacing:4px}



@media screen and (max-width: 992px) {.herocontainer {height:400px; margin-top:0px}}

.herocontent {width:600px; height:auto; padding:25px 55px 0px 55px; background:#fff;
position:absolute; left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
 }                       
   
.herocontent h1 { font-size:36px; line-height:42px; color:#34483d; font-family: 'Work Sans', san-serif; text-align:center}
  
 
 @media screen and (max-width: 992px) {.herocontent {width:90%; height:auto; padding:25px 25px 0px 25px;  
position:absolute; left: 50%;
  bottom: -55px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);margin-bottom:15px;
 } 
 
 .herocontent h1 { font-size:22px; line-height:28px; color:#34483d; font-family: 'Work Sans', san-serif; text-align:center}
 
  }
  
  .about { text-align:center; padding:45px 55px 35px 55px}
  
   @media screen and (max-width: 992px) {  .about {padding:35px 45px}}
   
    @media screen and (max-width: 768px) {  .about {padding:35px 10px 35px 10px}}
  

  

  
  .about h2 {font-family: 'Work Sans', san-serif; text-align:center; position:relative; font-size:32px; line-height:38px; font-weight:300; color:#34483d; margin-bottom:85px}
  
  .about h2:after
{
content: '';
position: absolute;
background-color:#34483d;
display: block;
width: 1px;
height:35px;
left: 50%;
margin-top:25px}

@media screen and (max-width: 768px) { .about h2 {font-size:26px; line-height:32px;}}

.aboutlink {font-family: 'Montserrat', serif; text-align:center; font-size:12px; line-height:16px; font-weight:600; text-transform:uppercase; color:#34483d; margin-bottom:25px; letter-spacing:4px; border-bottom:1px solid #34483d;padding-bottom:7px}

.aboutlinkright {font-family: 'Montserrat', serif; text-align:center; font-size:12px; line-height:16px; font-weight:300; text-transform:uppercase; color:#34483d; margin-bottom:45px; letter-spacing:4px; border-bottom:1px solid #34483d; padding-bottom:12px;  float:right }

.greybg {background-color:#efefef}



.aboutaltright {background:url(../img/smspic1.jpg); background-size:cover; background-repeat:no-repeat; background-position:center}

.aboutaltright2 {background:url("../img/fleet-repair2.jpg"); background-size:cover; background-repeat:no-repeat; background-position:center}

@media screen and (max-width: 992px) {.aboutaltright {height:300px}}

@media screen and (max-width: 768px) {.aboutaltright {height:250px}}



.profile {background-image:url(../img/lotus-badge.svg); background-repeat:no-repeat; background-size:auto 285px; background-position:top right; padding:55px 45px 0px 0px; margin-top:55px; margin-bottom:45px }

@media screen and (max-width: 992px) {.profile {margin-bottom:5px }}

.profile h2 {font-family: 'Work Sans', san-serif; position:relative; font-size:32px; line-height:38px; font-weight:300; color:#34483d; margin-bottom:40px; margin-left:0}
  
.profile h2:after
{
content: '';
position: absolute;
background-color:#34483d;
display: block;
width: 35px;
height:1px;
left: 0;
margin-top:45px}



.profile p {padding-left:55px; margin-bottom:0}

.profilepic {background-image: url(../img/staffordshire-ground-maintenance.jpg); background-position:center; background-size:cover; background-repeat:no-repeat; height:450px}

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

.profilepic {height:350px} 

.profile {padding:35px 0px 35px 0px; background-size:auto 215px;}

.profile p {padding-left:0px}
	
.profile h2 {font-family: 'Work Sans', san-serif; position:relative; font-size:26px; line-height:32px; font-weight:300; color:#34483d; margin-bottom:80px; margin-left:0}
  
.profile h2:after
{
content: '';
position: absolute;
background-color:#34483d;
display: block;
width: 1px;
height:35px;
left: 0;
margin-top:25px}
	
}

.storysection {padding-top:45px;}

@media screen and (max-width: 768px) { .storysection {padding-top:0px !important;  padding-bottom:0px !important}}

.story {background-color:#efefef; position:relative; width:860px; padding:0 !important; height: auto; margin:auto; margin-bottom:0px}

.story h2 {font-family: 'Work Sans', san-serif; text-align:center; position:relative; font-size:32px; line-height:38px; font-weight:300; color:#34483d; margin-bottom:85px}
  
.story h2:after
{
content: '';
position: absolute;
background-color:#34483d;
display: block;
width: 1px;
height:35px;
left: 50%;
margin-top:25px}

@media screen and (max-width: 768px) { .story h2 {font-size:26px; line-height:32px;}}

.storypic1 {width:375px; height:555px;  top:-45px; left:-45px; position:absolute; background-position:center; background-image: url(../img/stafford-tree-surgeon.jpg); background-size:cover; background-repeat:no-repeat; }


.storypic2 {width:325px; height:505px; right:-45px; position:absolute ;background-position:center;  background-image: url(../img/residential-ground-care.jpg); background-size:cover; background-repeat:no-repeat; bottom:-45px;}

.storyright {padding:55px 0 25px 0; text-align:center;  margin-right:35px; margin-top:35px; margin-bottom:35px; position:relative; width:445px; left:165px; }

.storyright p {text-align:left;}

.storyleft {padding:55px 0 25px 0; text-align:left;  margin-right:0px; margin-top:0px; margin-bottom:35px; margin-left:25px; position:relative; left:-155px }

.storyleft p {margin-left:85px}

.storyleft h4 {font-family: 'Work Sans', san-serif; font-size:26px; line-height:33px; font-weight:300; color:#34483d; margin-bottom:35px; margin-left:0}

@media screen and (max-width: 992px) { 
.story {width:auto; padding:0}

.storypic1 {width:35%; height:425px; position:relative; left:0; margin:35px 35px 0 0; padding:0; top:-45px}

.storypic2 {width:35%; height:425px; position:relative; left:0; margin:0 0 0 35px; padding:0; bottom:-35px}
.storyright {width:auto; height:auto; position:relative; left:0; margin:45px 0 0 0; padding:0}

.storyleft {width:auto; height:auto; position:relative; left:0; margin:35px 0 0 45px 0; padding:0}

.storyleft p {margin-left:25px}

}

@media screen and (max-width: 768px) { 
.story {width:auto; padding:25px}

.storypic1 {width:100%; height:355px; position:relative; left:-25px; margin:35px 0 35px 0; padding:0; top:0}

.storypic2 {width:100%; height:355px; position:relative; left:25px; margin:0 0 35px 0; padding:0; bottom:-0}

.storyright {width:auto; height:auto; position:relative; left:0; margin:45px 25px 0 25px; padding:0}

.storyleft {width:auto; height:auto; position:relative; left:0;  margin:0 25px 45px 25px; padding:0}

.storyleft p {margin-left:0px}

}


.eventlink { padding:35px}

.eventlink a {margin:25px; display:block; color:#34483d;font-family: 'Work Sans', san-serif; font-weight:300; font-size:32px; line-height:38px; width:55%}

@media screen and (max-width: 1200px) { 
.eventlink {padding:25px 10px}

.eventlink a {margin:20px; font-size:28px; line-height:32px; width:65%}}

@media screen and (max-width: 768px) { 
.eventlink { padding:10px 10px}

.eventlink a {margin:25px 0 25px 0; font-size:24px; line-height:28px; width:100%}}

.sectiontitle {text-align:center; margin-top:50px;  margin-bottom:50px }

@media screen and (max-width: 768px) {.sectiontitle {margin-top:35px;  margin-bottom:35px }}


  .sectiontitle h2 {font-family: 'Work Sans', san-serif; text-align:center; position:relative; font-size:32px; line-height:38px; font-weight:300; color:#34483d; margin-bottom:85px}
  
  .sectiontitle h2:after
{
content: '';
position: absolute;
background-color:#34483d;
display: block;
width: 1px;
height:35px;
left: 50%;
margin-top:25px}

@media screen and (max-width: 768px) { .sectiontitle h2 {font-size:26px; line-height:32px;}}

.jumbotest {background:#131f63; padding:55px 35px; color:#fff; font-size:24px; line-height:38px; font-weight:600; text-align:center}

@media screen and (max-width: 768px) {.jumbotest {padding:35px 35px; font-size:18px; line-height:28px}}



.jumbotestbtn {margin:0 auto 0 auto; display:inline-block; font-family: 'Work Sans', serif; font-size:24px; line-height:24px; color:#fff;  padding:15px 25px; font-weight:600; border-radius:3px; background-color:#22cdff }

.jumbotestbtn:hover {
background:#0b56a4 ; color:#fff;
 transition: ease-in-out 0.3s;}
 
 @media screen and (max-width: 768px) { .jumbotestbtn { font-size:18px; line-height:28px; margin-top:25px}}


.split {background-color:#CCC; padding:0}

.splitpic {background-image:url(../img/pic.jpg); background-repeat:no-repeat; background-size:cover; background-position:center; min-height:600px}

.splittext {text-align:center; padding:125px 125px}

@media screen and (max-width: 1400px) {.splittext {padding:125px 75px}}

@media screen and (max-width: 1200px) {.splittext {padding:95px 45px}}

@media screen and (max-width: 1200px) {.splittext {padding:35px 25px}}

.splittext h3 {color:#fff}


.splittext h2 {font-family: 'Work Sans', san-serif; text-align:center; position:relative; font-size:52px; line-height:52px; font-weight:300; color:#fff; margin-bottom:85px}
  
.splittext h2:after
{
content: '';
position: absolute;
background-color:#fff;
display: block;
width: 1px;
height:35px;
left: 50%;
margin-top:25px}

@media screen and (max-width: 768px) { .splittext h2 {font-size:26px; line-height:32px;}}

.splittext {color:#fff}

.newfooter {background-color:#34483d}

.newfooter-content {text-align:center; }

@media screen and (max-width: 992px) {.newfooter-content { margin-bottom:30px}}

 .newfooter-content p {color:#fff; font-family: 'Work Sans', san-serif; font-size:18px; line-height:18px; text-transform:uppercase; letter-spacing:2px; font-weight:600; margin:0 auto;  margin-bottom:15px}

.newfooter-content a {text-align:center; color:#fff; font-family: 'Montserrat', serif; font-size:14px; line-height:14px; text-transform:uppercase; letter-spacing:2px; font-weight:400;}

.newfooter-content p span {text-align:center; color:#fff; font-family: 'Montserrat', serif; font-size:14px; line-height:18px; text-transform:uppercase; letter-spacing:2px; font-weight:400;}

.footerlogo {width:185px; margin-bottom:25px}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {background-color:#34483d}

.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}
.testimonials .testimonial-item h3 {
  font-size: 18px; font-family:'Work Sans', Sans Serif;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #fff;
}
.testimonials .testimonial-item h4 {
  font-size: 14px;font-family:'Work Sans', Sans Serif;
  color: #fff;
  margin: 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  color: #fff;
  font-size: 22px;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}
.testimonials .testimonial-item p {
  font-style: normal;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background: #efefef;
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  color:#fff
}
.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid #efefef;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}
.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #efefef;
  opacity: 1;
  border: 1px solid #efefef;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #fff;
}

.dateitem {background-color:#fff; padding: 5px 8px; font-size:12px; font-weight:500; display:inline-block; color:#121c65; margin-bottom: 10px}


.newsectionitem {text-align:center; padding:35px 25px;  }

.newsectionitem h4 {color:#fff; font-family: 'Work Sans', serif;  font-size:14px; line-height:18px; display:block; height: 36px; margin:0; text-transform:uppercase; letter-spacing:1px; padding-top:15px; font-weight:500 }

.greentype {color:#34483d !important}

.lotusicon {height:75px;}

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

.newsectionitem {text-align:center; padding:25px 15px}

.newsectionitem h4 { font-size:12px; line-height:16px; height: 36px; }

.lotusicon {height:65px;}


}

.green1 {background-color:#34483d}

.green2 {background-color:#3b8560}

.green3 {background-color:#469788}

.green4 {background-color:#a0c46d}

.green5 {background-color:#cee5dd}

.sector {}

.sectoritem {text-align:center; position:relative;  margin:0; padding:40px 10px; vertical-align: middle; background: linear-gradient(45deg, #FFFFFF, #efefef); }

@media screen and (max-width: 768px) { .sectoritem { padding:20px 10px;}}

.sectorimage {height:45px}

.sectortext h4 {display:block; font-size:12px; line-height:14px; margin:0; color:#34483d; position:relative; margin-top:15px; margin-bottom:0; font-weight:600}

#quiz { height:80vh; position:relative; padding:0; margin-top:0px}

@media screen and (max-width: 768px) { #quiz { height: 100vh; text-align:center}}

#quiz:before {
  content: "";
  background: #131f63;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;opacity: 0.8;
}

#quiz .container {z-index:2; text-align:left;  z-index:3; position:relative; margin:auto; padding-top:75px}

@media screen and (max-width: 768px) {#quiz .container { text-align:center; }}

#quiz h1 {color:#FFF;  font-size:68px; line-height:70px; font-weight:700; text-transform:uppercase; font-family:'work sans'}

@media screen and (max-width: 992px) {#quiz h1 {font-size:48px; line-height:52px; margin-bottom:25px }}

@media screen and (max-width: 768px) {#quiz h1 {font-size:36px; line-height:40px; margin-bottom:25px}}

#quiz p {color:#FFF; text-shadow: 0px 0px 5px #000;}

.quizpic {background-image: url(../img/lorry.jpg); background-size:cover; background-repeat:no-repeat; background-position:center;}

.quizpic2 {background-image: url("../img/sms-yard3.jpg"); background-size:cover; background-repeat:no-repeat; background-position:center;}

.logowhite { filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 9)); width:275px; margin-bottom:35px}

@media (max-width: 992px) {.logowhite {width:200px}}

.sectorpicleft {background-image:url(../img/stafford-garden.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; height:455px}

.sectorpicright {background-image:url(../img/stafford-grounds.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; height:455px}

@media (max-width: 1200px) {
	
.sectorpicleft {height:355px}

.sectorpicright {height:355px}

}

@media (max-width: 992px) {
	
.sectorpicleft {height:255px}

.sectorpicright {display:none}}

@media (min-width: 768px) {.stickyfooter {display:none}}

.stickyfooter { font-family: 'Open Sans Condensed', sans-serif;  font-weight:normal; font-size:24px; line-height:24px; position:fixed; bottom:65px; right:0; text-align:center; z-index:999; width:60px; color:#FFF; }

.stickyfooter a {color:#FFF}

 .herolink {margin:25px 0; display:inline-block; color:#fff;font-family: 'Work Sans', san-serif; font-weight:600; font-size:22px; line-height:22px; background-color:#22cdff; padding:15px 35px }


.herolink:hover {color:#FFF; background-color:#1cabe5;}

@media (max-width: 768px) { .herolink {margin:25px auto; display:inline-block; color:#fff;font-family: 'Work Sans', san-serif; font-weight:600; font-size:18px; line-height:18px; padding:10px auto }}

.contactbanner {background-color:#131f63; padding:35px 25px}

.contactbannerinfo {color:#fff; padding:0px 0px 0px 65px; background-size:45px 45px; background-repeat:no-repeat; margin:35px auto}

.contactbannerinfo a {color:#fff;}

.phoneicon {background-image:url(../img/phone-icon.svg)}

.visiticon {background-image:url(../img/visit-icon.svg)}

.openicon {background-image:url(../img/open-icon.svg)}

@media (max-width: 768px) {.contactbannerinfo {margin:15px auto 15px auto}}

.contactbannerinfo p {color:#FFF; font-weight:400; font-size:16px; line-height:22px; margin:0}

.contactbannerinfo p span {font-weight:600; color:#22cdff}

.projectinfo4 {width:25%; height:250px; background-color:#131f63; position:relative; float:left; 
	background-size:cover !important;   z-index: 2 !important; margin: 0 0 0 0; padding:0; background-position:center !important; }
	
	

.projectinfo4overlay {width:100%; height:250px; background: rgba(19, 31, 99, 0.6);
  z-index: 1 !important; position:absolute; display:block;display: table-cell;vertical-align: bottom;transition: 0.5s;}
  
  .projectinfo4overlay:hover { background: rgba(19, 31, 99, 0.8); background-size:cover;-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
  
.projectinfo4overlaytext {text-transform:uppercase;  top: 0px;position: absolute; padding:20px 50px 20px 30px; width:100% }


.projectinfo4overlaytext h3 {text-decoration:none !important; font-family: 'Work Sans'; font-size:32px; line-height:34px; margin: 0 0 10px 0; color:#FFF; padding:0; letter-spacing:0  }

.projectinfo4overlaytext h3:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 3px solid  #22cdff; /* This creates the border. Replace black with whatever color you want. */
}


.projectinfo4overlay p {font-family: 'Work Sans'; font-size:18px; line-height:24px; text-transform:none;  color:#fff; margin:0; }

@media (max-width: 768px) {.projectinfo4 {width:50%; height:200px; background-color:#555; position:relative; float:left}

.projectinfo4overlay {height:200px; }

.projectinfo4overlaytext {text-transform:uppercase;  bottom: 0px;position: absolute; padding:10px 15px 15px 15px; width:100% }

.projectinfo4overlay p {font-family: 'Work Sans'; font-size:14px; line-height:16px; text-transform:none;  color:#fff; margin:0; }
}

@media (max-width: 1400px) {.projectinfo4overlaytext h3 {text-decoration:none !important; font-family: 'Work Sans'; font-size:22px; line-height:24px; margin: 0 0 10px 0; color:#FFF; padding:0;  }}

@media (max-width: 600px) {.projectinfo4overlaytext h3 {text-decoration:none !important; font-family: 'Work Sans'; font-size:14px; line-height:15px; margin: 0 0 10px 0; color:#fff !important; padding:0;  }

.projectinfo4overlay p {font-family: 'Work Sans'; font-size:12px; line-height:14px; text-transform:none;  color:#fff; margin:0; }

.projectinfo4overlaytext {text-transform:uppercase;  bottom: 0px;position: absolute; padding:10px 15px 5px 15px; width:100% }

.projectinfo4 {width:50%; height:150px; background-color:#555; position:relative; float:left}

.projectinfo4overlay {height:150px; }

.projectinfo4overlaytext {text-transform:uppercase;  bottom: 0px;position: absolute; padding:8px 8px 8px 8px; width:100% }}

.rightsms {background: linear-gradient(rgba(11, 86, 164, 0.1), rgba(19, 31, 99, 0.8)), url(../img/smspic4.jpg) center center; background-size:cover; padding:75px 55px ; }

@media (max-width: 768px) {.rightsms {padding:25px; }}

.rightsmscontent p {color:#fff;}

.rightsmscontent a {color:#fff; font-weight:600}

.rightsmscontent h3 {font-family: 'Work Sans'; font-size:22px; line-height:28px; text-transform:none;  color:#fff;  font-style: italic; letter-spacing:0; font-weight:400}

.rightsmscontent h3:before {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-top: 3px solid  #22cdff; /* This creates the border. Replace black with whatever color you want. */
}

.rightsmscontent h4 {font-family: 'Work Sans'; font-size:32px; line-height:36px; text-transform:none;  color:#fff;  letter-spacing:0; font-weight:600}

.rightsmscontent h4 span {color:#22cdff}

.leftsms { width:auto; float:right; position:relative; padding:75px;  margin:45px auto;}

.leftsms h2 {font-size:42px; line-height:48px; color:#131f63; margin:0 0 45px 0; position:relative; font-weight:600; font-family: 'Work Sans'; }

.leftsms h2:after
{
content: '';
position: absolute;
background-color:#22cdff;
display: block;
width:60px;
height:3px;
left: 0px;
margin-top:20px}

@media (max-width: 768px) { .leftsms h2 {font-size:32px; line-height:38px; color:#131f63; margin:0 0 45px 0; position:relative; font-weight:600; font-family: 'Work Sans'; }

.leftsms h2:after
{
content: '';
position: absolute;
background-color:#22cdff;
display: block;
width:60px;
height:3px;
left: 0px;
margin-top:15px}}
 

.rightsmscontent {background-color:rgba(19,31,99,0.8); padding:55px 35px; width:65%}

.rightsmscontent2 { padding:55px 35px; width:75%}

@media (max-width: 1420px) {
	
	.leftsms {padding:25px; margin:25px auto; width:100%;}

.rightsmscontent {padding:55px 35px; width:100%}

.rightsmscontent2 {padding:55px 35px; width:100%}

}

@media (max-width: 992px) {.leftsms {padding:25px; margin:0px auto; width:100%;}}

.sfmslist {padding:0 0 0 65px; background-repeat:no-repeat; background-size:45px 45px; margin:0 0 35px 0;}

.sfmslist h4 {font-family: 'Work Sans'; font-size:22px; line-height:26px; text-transform:none;  color:#121c65;  letter-spacing:0; font-weight:600; margin:0 auto 5px auto}

.list1 {background-image:url(../img/icon-tick.svg)}

#smservices {background:#efefef }

.smservices {text-align:center; margin:15px auto; }

.smservices h4 {font-family: 'Work Sans'; font-size:18px; line-height:22px; text-transform:none;  color:#121c65;  letter-spacing:0; font-weight:600; margin:15px auto 0 auto}

.smsicon {width:75px; height:75px}

.smssectiontitle h2 {font-family: 'Work Sans', san-serif; text-align:center; position:relative; font-size:32px; line-height:38px; font-weight:600; color:#131f63; margin:35px auto 45px auto}
  
.smssectiontitle h2:after
{
content: '';
position: absolute;
background-color:#22cdff;
display: block;
width:60px;
height:3px;
left: calc(50% - 30px);
margin-top:10px}

.smsfooter {background-color:#131f63;}

.footerrow {padding:25px auto; margin:35px 0}

.smsfooteritem {margin:45px auto;}

@media (max-width: 992px) {.smsfooteritem {margin:15px auto 0 auto; text-align:center}}

.smsfooter p {color:#fff; font-weight:600; text-transform:uppercase; font-size:14px; line-height:22px; margin:0 0 0 0;}

.smsfooter a {color:#fff}

.smsfooter a:hover {
  color: #22cdff;
  text-decoration: none;}

.smsfooter p span {color:#22cdff}

.smsfooter h5 {color:#22cdff; font-size:14px; line-height:22px; margin:0 0 0 0; text-transform:uppercase; font-weight:600;}

.copyrightsms {text-align:center; }

.extrasms {padding:35px 25px 35px 25px}

.extrasmsitem { background-repeat:no-repeat; background-size:50px 50px; padding-left:65px;  margin-bottom:20px; padding-right:45px; margin-top:20px;}

.repair {background-image: url(../img/commercial-repair.svg);}

.service {background-image: url(../img/commercial-service.svg);}

.maintain {background-image: url(../img/commercial-maintenance.svg);}

.braketest {background-image: url(../img/brake-testing.svg);}

.premot {background-image: url(../img/pre-mot.svg);}

.breakdown {background-image: url(../img/breakdown.svg);}

.extrasmsitem h4 {font-size:20px; line-height:26px; color:#131f63; margin:0 0 10px 0; font-weight:600}

.extrasmsitem p {font-size:16px; line-height:24px;  margin:0 0 15px 0}

.footerinner {text-align:center; margin: auto; display:inline-block}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}
.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #131f63; text-transform:none; letter-spacing:0px
}
.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #131f63;
  margin: 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  color: #131f63;
  font-size: 18px;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 5px;
}
.testimonials .testimonial-item p {
  font-style: italic; font-size:18px; line-height:25px;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background: #fff;
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px; color:#131f63
}
.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}
.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: none;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #131f63;
}

.conbtn {background-color:#1cabe5; padding:15px 35px; border-radius:4px; border:2px solid #1981be; display:inline-block; font-size:16px; line-height:16px; color:#FFF; margin-right:15px; margin-top:25px}


.conbtn:hover {
background-color: #1981be; color:#FFF;
 transition: ease-in-out 0.3s;}
 
 .conbtn2 {background:none; padding:15px 35px; border-radius:4px; border:2px solid #fff; display:inline-block; font-size:16px; line-height:16px; color:#FFF; margin-right:15px}


.conbtn2:hover {
background:none ; color:#1cabe5;border:2px solid #1cabe5;
 transition: ease-in-out 0.3s;}

.smslogo { margin-bottom:25px; box-shadow: 0px 0px 12px #cfcfcf; opacity: .5;}

.smslogo:hover {
opacity: 1;
 transition: ease-in-out 0.3s;}
 
 .aboutbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner3.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .aboutbanner2 {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url("../img/aboutbanner.jpg") center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .servicebanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner4.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .contactpagebanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner7.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .quotebanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner5.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .motbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner2.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .repairbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner9.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .brakebanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner10.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .fleetbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner8.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .newsbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url("../img/sms-yard3.jpg") center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .r2cbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url("../img/r2c-banner.jpg") center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

 .breakdownbanner {
  background: linear-gradient(rgba(11, 86, 164, 0.8), rgba(19, 31, 99, 0.8)), url(../img/smsbanner7.jpg) center center;
  background-size: cover;
  padding: 170px 0 75px 0;
}

.aboutinfocontent { border-left:2px solid #1cabe5; background:linear-gradient(to right, rgba(19, 31, 99, 0.8), transparent); padding:35px; margin:25px;}

.aboutinfocontent h1 {color:#fff; font-size:58px; line-height:64px; font-weight:600; font-family:'Work Sans'}

.aboutinfocontent { padding:20px; margin:25px}
	
@media (max-width: 992px) {	.aboutinfocontent h1 {font-size:36px; line-height:42px;}}

@media (max-width: 992px) {
	
	 .aboutbanner {

  padding: 100px 0 35px 0;}
    
    .aboutbanner2 {

  padding: 100px 0 35px 0;}
  
  .servicebanner {

  padding: 100px 0 35px 0;}
  
 .contactpagebanner {

  padding: 100px 0 35px 0;}
  
   .quotebanner {

  padding: 100px 0 35px 0;}
  
     .motbanner {

  padding: 100px 0 35px 0;}
  
     .repairbanner {

  padding: 100px 0 35px 0;}
  
     .fleetbanner {

  padding: 100px 0 35px 0;}
    
     .newsbanner {

  padding: 100px 0 35px 0;}
    
    .r2cbanner {

  padding: 100px 0 35px 0;}
  
     .breakdownbanner {

  padding: 100px 0 35px 0;}
  
     .brakebanner {

  padding: 100px 0 35px 0;}
  

  
  
  
  
}
	
	
	
	.aboutpic {background-image:url(../img/smspic4.jpg); background-position:center}
	
	.aboutpic2 {background-image:url(../img/smspic8.jpg); background-position:center}
	
	
	
	.smspic9 {background-image:url(../img/smspic9.jpg); background-position:center}
	
	.smspic10 {background-image:url(../img/smspic10.jpg); background-position:center}
	
	.smspic11 {background-image:url(../img/smspic11.jpg); background-position:center}