/* Service Area 3 */

#service-area-list {
  position: relative;
  text-align: center;
}
.full-width #service-area-list > .width-limiter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.full-width #service-area-list > .width-limiter > div {
  width: 50%;
}
#service-area-list .view-all {
  text-align: center;
}
#service-area-list > .width-limiter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#service-area-list .map-area {
  width: 100%;
  height: 270px;
  background-image: url(/assets/templates/main/images/bgs/bg-map-small.jpg);
  background-position: left center;
  -webkit-box-ordinal-group: 0;
 -ms-flex-order: -1;
 order: -1;
}
@media all and (min-width: 801px) {
  .full-width #service-area-list:after {
    content: '';
    height: 100%;
    width: 50%;
    background-image: url(/assets/templates/main/images/bgs/bg-map.jpg);
    background-position: left center;
    background-size: cover;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .full-width #service-area-list .map-area {
    display: none;
  }
  .full-width #service-area-list > .width-limiter {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media all and (max-width: 800px) {
  .full-width #service-area-list > .width-limiter {
    width: 100%;
  }
  .full-width #service-area-list > .width-limiter > div {
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media all and (max-width: 570px) {
  .full-width #service-area-list .map-area {
    height: 200px;
  }
}

/* Content Pattern */
ul.service-cities {
  padding: 0px;
}
ul.service-cities li {
  display: inline-block;
  margin: 0px 5px;
}
@media all and (max-width: 570px) {
  #service-area-list ul.service-cities {
    display: block;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    text-align: left;
  }
  #service-area-list ul.service-cities li {
    display: block;
  }
}