/* =============================================================================
   Training Centers Page CSS
   
   -------- Table of Contents --------
   1. General / Element Layouts
   2. Header
   3. Section
   4. Footer
   5. Jquery Plugin CSS
   6. Mobile Layout
   -----------------------------------
   ========================================================================== */


/* =============================================================================
   2. Header
   ========================================================================== */
header.centers {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #0C1418;
  position: static;
}

/* =============================================================================
   3. Section
   ========================================================================== */
#main.centers{
  background: #0C1418;
  color: #fff;
  margin: 0;
  padding: 1px 0;
}

#main.centers .content h2 {
  font: 300 2.4em 'Oswald', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  margin: 30px 0 0;
}

#main.centers .content p{
  font-size: 1.3em;
}

#main.centers .content .campus {
  margin: 30px 0;
}

#main.centers .content #toronto h2 {
  background: #192A34 url(../../img/canada-center.jpg) no-repeat center right;
}

#main.centers .content #nairobi h2 {
  background: #192A34 url(../../img/kenya-center.jpg) no-repeat center right;
}

#main.centers .content #south-africa h2 {
  background: #192A34 url(../../img/south-africa-center.jpg) no-repeat center right;
}
#main.centers .content .campus h2{
  font-size: 2em;
  letter-spacing: .05em;
  padding: 0 0 0 20px;
  margin: 0;
  text-transform: uppercase;
}


#main.centers .content .campus .campus-info {
  padding: 20px;
  background: #112027; /* Old browsers */
  background: -moz-linear-gradient(top, #112027 55%, #0c1418 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(55%,#112027), color-stop(100%,#0c1418)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #112027 55%,#0c1418 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #112027 55%,#0c1418 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #112027 55%,#0c1418 100%); /* IE10+ */
  background: linear-gradient(to bottom, #112027 55%,#0c1418 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#112027', endColorstr='#0c1418',GradientType=0 ); /* IE6-9 */
}

#south-africa .slides {
  float: left;
}

.slides {
  float: right;
  clear: right;
  margin: 20px 20px 50px;
  overflow:hidden;
  width: 350px;
  height: 350px;
}

.to-top {
  clear: both;
  margin: 20px;
}

div.slides {
  transition: none;
}

div.slides * {
  transition: none;
}

/* =============================================================================
   4. Footer
   ========================================================================== */
footer.centers {
  height: 250px;
  padding: 40px 0;
  background: #0C1418;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* =============================================================================
    6. Mobile Layout
   ===========================================================================*/
@media screen and (min-width: 479px) and (max-width: 960px) {
  .half a span {
    font-size: 20px;
  }

  #main.centers .content #toronto h2,
  #main.centers .content #nairobi h2,
  #main.centers .content #south-africa h2 {
    background-image: none;
    font-size: 26px;
  }
  
  #main.centers .content #nairobi img,
  #main.centers .content #toronto img,
  #main.centers .content #south-africa img{
    clear: both;
    display: block;
    float: none;
    margin: 20px auto;
    width: 250px;
  }
  
  #main.centers .content #nairobi img.to-top,
  #main.centers .content #toronto img.to-top,
  #main.centers .content #south-africa img.to-top{
    width: 150px;
    margin-right: 20px;
  }
  
  #main.centers .content p {
    font-size: 16px;
  }
}

@media screen and (max-width: 478px) {
  .half a span {
    font-size: 20px;
  }
  
  #main.centers .content #toronto h2,
  #main.centers .content #nairobi h2,
  #main.centers .content #south-africa h2 {
    background-image: none;
    font-size: 26px;
  }
  
  #main.centers .content #nairobi img,
  #main.centers .content #toronto img,
  #main.centers .content #south-africa img{
    clear: both;
    display: block;
    float: none;
    margin: 20px auto;
    width: 250px;
  }
  
  #main.centers .content #nairobi img.to-top,
  #main.centers .content #toronto img.to-top,
  #main.centers .content #south-africa img.to-top{
    width: 150px;
    margin-right: 20px;
  }
  
  #main.centers .content p {
    font-size: 16px;
  }
}