@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Overrides */
body {
  overflow-x: hidden;
  background: #fff;
}
#homenew .header {
  margin: 0;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
  display: block !important;
  width: 100%; 
  height: 100%;
}
.content {
  /* background: #fff; */
}
.content .container {
  padding: 1% 0;
}

/* Header */
.header-title {
  position: absolute;
  margin: -42px 0 0 140px;
  transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -webkit-transition: margin 0.2s;
}
  .header-title .pipe {
    border: 1px solid;
    height: 40px;
    display: block;
    width: 0;
    position: absolute;
    margin: -2px 0 0 -15px;
    border-radius: 40px;
    color: #ccc;
    border-width: 1px 1px 1px 2px;
    transition: margin 0.2s;
    -moz-transition: margin 0.2s;
    -webkit-transition: margin 0.2s;
  }
  .header-title h2 {
    font-size: 150%;
    color: #999;
  }
    .header-title h2 a, .header-title h2 a:hover {
      color: #999;
      text-decoration: none;
    }

/* Map */
#map_canvas img { max-width: none; }
.map-wrap {
  position: relative;
  margin-top: -1px;
}
.map-reset {
  right: 93px; 
  cursor: pointer; 
  top: 5px; 
  font-size: 10px; 
  font-weight: bold;
  position: absolute;
  z-index: 1000;
  background: #fff;
  padding: 1px 6px;
  border: 1px solid #999;
  height: 20px;
}
.map-reset:hover {
  background: #eee;
}
.map-wrap #container {
  height: 400px;
}

/* Main Styles */
.section-divider {
  background: #ecebe8;
  padding: 10px 0;
  margin: 0;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid #d4d4d4;
}
.social {
  position: relative;
  top: 3px;
}
  .social li {
    display: inline-block;
    vertical-align: top;
  }
.content-section {
  border-radius: 5px;
}
.content-section h2 {
  background: #36263b;
  margin: 0;
  padding: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
#locations {
}
#locations .tile {
  display: inline-block;
  width: 32.5%;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.1);
  background: #fff;
  margin: 0.5% 1% 0 0;
  cursor: pointer;
  transition: width 0.2s linear;
  -moz-transition: width 0.2s linear;
  -webkit-transition: width 0.2s linear;
  position: relative;
}
  #locations .tile h3 {
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 15px 0 15px;
    width: 100%;
    line-height: 18px;
    font-weight: 700;
    color: #555;
    max-width: 130px;
    text-align: left;
    text-decoration: none;
    font-size: 1.25em;
  }
  #locations .tile.three-three {
    margin-right: 0;
  }
  #locations li .item-body {
    border: 1px solid #e4e4e4;
  }
    #locations li .location {
      height: 300px;
      border-bottom: 1px solid #e4e4e4;
      background-size: 100% 100%;
    }
    #locations li .location.eastern-cape { background-image:url('../img/eastern cape.jpg'); }
    #locations li .location.free-state { background-image:url('../img/free state.jpg'); }
    #locations li .location.gauteng { background-image:url('../img/gauteng.jpg'); }
    #locations li .location.kwazulu-natal { background-image:url('../img/kwazulu natal.jpg'); }
    #locations li .location.limpopo { background-image:url('../img/limpopo.jpg'); }
    #locations li .location.mpumalanga { background-image:url('../img/mpumalanga.jpg'); }
    #locations li .location.northern-cape { background-image:url('../img/northern cape.jpg'); }
    #locations li .location.north-west { background-image:url('../img/north west.jpg'); }
    #locations li .location.western-cape { background-image:url('../img/western cape.jpg'); }
    #locations li:hover {
      text-decoration: underline;
    }
  #locations li h2 {
    height: 48px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px 0 15px;
    width: 100%;
    line-height: 18px;
  }
    #locations li h2 a,
    #locations li h2 p {
      font-weight: 700;
      color: #555;
      margin: 0;
      font-size: 88%;
    }
    #locations li h2 a:hover {
      background: transparent;
      color: #555;
    }
.content-section.guide {
  margin-top: 1em;
}
.guide .guide-banner {
  width: 100%;
}

/* Guides */
.tabs-menu {
  width: 100%;
  background-color: #468100;
  margin-top: -5px;
  position: relative;
}
.tabs-menu li {
  background-color: #468100;
  display: inline-block;
  width: 16.667%;
  cursor: pointer;
  transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
}
  .tabs-menu li:hover {
    background-color: #82AD00;
  }
.tabs-menu li.current a {
  background-color: #90bf00;
  z-index: 5;
}
.tabs-menu li a {
  color: #fff;
  text-decoration: none;
  padding: 20px 10px;
  display: block;
}
  .tabs-menu li a:hover {
    background: transparent;
  }
.tabs-menu li h2 {
  font-size: 15px;
  padding: 0;
  background: transparent;
  text-transform: none;
  line-height: 16px;
  white-space: nowrap;
}
.tabs-menu .current a {
  color: #2e7da3;
}
.tab {
  background-color: #fff;
  width: auto;
}
.tab-content {
  width: 100%;
  padding: 20px 20px 0;
  display: none;
}
  .tab-content h2 {
    background: transparent;
    text-align: left;
    color: #333;
    padding: 0;
    margin-bottom: 10px;
    font-size: 18px;
  }
  .tab-content h3 {                        
    margin-bottom: 5px;      
    font-weight: bold;
  }
#johannesburg-1,
#capetown-1 {
 display: block;   
}

/* Slider */
.slider {
  background-color: #f2f2f2;
  height: 5px;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}
.slider .bar {
  background-color: #f89301;
  position: relative;
  height: 100%;
  left: 0;
  transition: left 1s;
  -moz-transition: left 1s;
  -webkit-transition: left 1s;
}

/* Buttons */
.button{background: #3baa33;}
.button{font-weight:700;color:#fff !important;padding:10px;margin-bottom:10px;border:0;line-height:1.3em;text-align:center;font-size:1.3em;display:block;max-width:100%}
.button {
  position: absolute;
  right: 10px;
  margin-top: -50px;
}
  
/* Links */
.location-wrap {background: #fff;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);}
.location-body {
  text-align: center;
  border-top: 0;
  margin-bottom: 10px;
  padding: 5px 8px;
}
.location-wrap h2 {
  font-size: 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #d4d4d4;
  box-shadow: none;
}
.location-wrap h2 a {
  color: #3baa33;
}
.location-wrap h2 a:hover {
  text-decoration: underline;
}
#canberra, #darwin {
  margin-right: 0;
}
#links {
  display: none;
}
#location-links {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ecebe8;
  padding-top: 10px;
  margin-bottom: 8px;
  text-align: left;
}
#links ul,
#location-links ul {
  padding: 0.25em 1em 0.5em;
  margin: 0;
  list-style: none;
  width: 100%;
  -moz-column-count: 6;
  -webkit-column-count: 6;
  column-count: 6;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}
#location-links h3 {
  padding: 0.25em 0.85em 0.5em;
  font-size: 16px;
  text-decoration: underline;
}
#location-links p {
  color: #468100;
  cursor: pointer;
  margin: 0;
}
#location-links p:hover {
  text-decoration: underline;
}
#location-links a:hover {
  background: transparent;
}
#location-links ul li {
  padding: 0.15em 0;
}

.categories {
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
  margin-bottom: 50px;
}
.categories li {
  list-style-type: none;
  line-height: 20px;
  -webkit-break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  -moz-break-inside: avoid-column;
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
  column-break-inside: avoid;
}
.categories li a {
  font-weight: 700;
  text-decoration: none;
}
.categories li a:hover {
  text-decoration: underline;
}
.categories ul li {
  padding-left: 1em;
}
.categories ul li a {
  font-weight: 300;
}

.module-content ul {
  list-style-type: none;
}
.module-content ul > ul {
  padding-left: 1em;
}
.module-content a {
  text-decoration: none;
}
.module-content a.current {
  font-weight: bold;
}

@media screen and (max-width: 950px) {
  .tabs-menu li h2 {
    font-size: 13px;
  }
}

@media screen and (max-width: 900px) {
  #locations .tile { width: 49%; }
  #locations .tile.two-three, #locations .tile.three-three { margin-right: 2%; }
  #locations .tile.two-two { margin-right: 0; }
  #directions button {
    font-size: 23px;
  }
  #location-links ul {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media screen and (max-width: 840px) {
  .tabs-menu li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #639428;
  }
    .tabs-menu li h2 {
      font-size: 15px;
    }
    .tabs-menu li a {
      padding: 10px;
    }
  .slider {
    display: none;
  }
}

@media screen and (max-width: 650px) {
  #locations .tile { 
    width: 100%;
  }
  .social {
    padding: 5px 0 0;
  }
  .social li.title {
    display: none;
  }
  #location-links ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media screen and (max-width: 600px) {
  .nav-menu .top-item .j-menu-parent {
    display: none !important;
  }
  .header.new .welcome {
    height: 79px;
  }
  .nav-bar {
    float: none;
    margin: 0 auto;
  }
  .nav-bar a {
    padding: 10px 0;
  }
  .header.new .lower-deck {
    min-height: 0;
  }
}

@media screen and (max-width: 560px) {
  .header-title {
    margin: -36px 0 0 60px;
  }
    .header-title .pipe {
      height: 26px;
      margin: -2px 0 0 -10px;
    }
    .header-title h2 {
      font-size: 100%;
    }
}