/*Body*/
body{
  margin: 0px !important;
  padding: 0px !important;
}

.div-orange{
  background-color: orange;
}

.btn{
  border-radius: 0px;
  background-color: white;
  border-color: orange;
  color: orange;
  padding-left: 15px;
  padding-right: 15px;
}

.btn:hover {
  border-radius: 0px;
  background-color: orange;
  border-color: orange;
  color: black;
  padding-left: 15px;
  padding-right: 15px;
}


p{
  font-family: 'Open Sans', sans-serif !important;
  color: black;
}

h1{
  font-family: 'Open Sans', sans-serif !important;
  color: black;
  font-size: 40px !important;
}

h2{
  font-family: 'Open Sans', sans-serif !important;
  color: black;
}

h3{
  font-family: 'Open Sans', sans-serif !important;
  color: black;
}

.black{
  color: black !important;
}

.orange{
  color: #ff9800;
}

.gold{
  color: #ff9800;
}

.white{
  color: white;
}

.grey{
  color: #212121;
}

.center{
  text-align: center;
}

.intro-icon{
  font-size: 50px;
}

.anton{
  font-family: 'Anton', sans-serif !important;
}

.logo-accred{
  height: 50px;
  max-width: 70px;
}

/*Loading*/
#loading{
  position: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  padding-top: 15%;
  background-color: orange;
  z-index: 9999 !important
}

#spinner{
  -webkit-animation-duration: 5s;
}

/*Navbar*/
.navbar-default {
  background-color: white;
  border-color: none;
  font-family: 'Open Sans', sans-serif;
}

.navbar-default .navbar-nav > li > a {
  color: black; /*Change active text color here*/
  font-family: 'Open Sans', sans-serif;
 }

.navbar-default .navbar-nav > li > a:hover {
   color: orange; /*Change hover text color here*/
   font-family: 'Open Sans', sans-serif;
   font-weight: bold;
}

.navbar-default .navbar-nav > li > a:active {
    color: orange; /*Change active text color here*/
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: bold;
}

.navbar-default {
  box-shadow: none !important; /*remove bottom line*/
  border: none !important;  /*remove bottom line*/
}

/*Home*/
#home-page{
  width: 100%;
}

#home-header-container{
  padding-top: 50px;
  height: 100vh;
  width: 100%;
  background-color: white;
}

#home-header{
  position: absolute;
  top: 15%;
}

#home-slogan{
  animation-duration: 5s;
}

#home-buttons-div{
  padding-left: 30%;
  padding-right: 30%;
}

/*Home-End*/

#management{
  background-color: #ff9800;
  padding-left: 7%;
  padding-right: 7%;
}

#methodology{
  padding-top: 50px;
  background-color: #ff9800;
  padding-left: 7%;
  padding-right: 7%;
}

#home-vision-div{
  padding-left: 10%;
  padding-right: 10%;
}

#rocket{
  font-size: 50px;
}

#management-div{
  padding-left: 7%;
  padding-right: 7%;
}

.manager{
  background-color: #ffa726;
  margin-top: 5px;
  margin-bottom: 5px;
}

#home-wilma{
  border-width: medium;
  border-color: white;
}

#home-dean{
  border-width: medium;
  border-color: white;
}

.bounce {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-top:-25px;
  margin-left:-25px;
  -webkit-animation:bounce 1s infinite;
}

@-webkit-keyframes bounce {
  0%       { bottom:5px; }
  25%, 75% { bottom:15px; }
  50%      { bottom:20px; }
  100%     {bottom:0;}
}

.shake:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


/*About*/
#about-page{
  padding-top: 50px;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#about-header{
  background-color: white;
}

#about-intro{
  background-color: #ff9800;
  padding-left: 7%;
  padding-right: 7%;
}

#about-learning{
  width: 30%;
}

#about-vision{
  background-color: white;
  padding-left: 7%;
  padding-right: 7%;
}

#about-values{
  background-color: #ff9800;
  padding-left: 7%;
  padding-right: 7%;
}

.about-value-div{
  background-color: orange;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
}

#about-guiding-principles{
  background-color: white;
  padding-left: 10%;
  padding-right: 10%;
}

#about-heritage{
  width: 35%;
}

#mission-statement{
  background-color: #ff9800;
  padding-left: 7%;
  padding-right: 7%;
}

.jumbotron{
  background-color: white !important;
}

/*Training Courses*/
#training-courses-page{
  padding-top: 50px;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#learnersips{
  background-color: #ff9800;
  padding-left: 10%;
  padding-right: 10%;
}

#skills-programmes{
  background-color: #ff9800;
  padding-left: 10%;
  padding-right: 10%;
}

#other-programmes{
  background-color: white;
  padding-left: 10%;
  padding-right: 10%;
}

/*Clients*/
#clients-page{
  padding-top: 50px;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#clients-intro{
  background-color: #ff9800;
  padding-left: 15%;
  padding-right: 15%;
}

.carousel-control.right, .carousel-control.left {
  background-image:none;
}


/*Contact*/
#contact{
  padding-top: 50px;
  width: 100%;
  min-height: 100vh;
  padding-left: 0px;
  padding-right: 0px;
}

#contact-form-div{
  padding-left: 20%;
  padding-right: 20%;
}

#clients{
  padding-left: 10%;
  padding-right: 10%;
}

.client{
  width: 60%;
}

/*Gallery*/
#gallery{
  padding-top: 50px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  padding-left: 0px;
  padding-right: 0px;
}


/*Accreditation*/
#accreditation{
  padding-top: 50px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  padding-left: 0px;
  padding-right: 0px;
}

#accreditation-intro{
  padding-left: 10%;
  padding-right: 10%;
  background-color: orange;
}

#accreditations{
}

.accreditor{
  text-decoration: none;
}
/*Footer*/
#footer{
  background-color: #212121;
  position: relative;
  bottom: 0;
  width: 100%;
  height: 120px;
}

#contact-footer{
  background-color: #212121;
  position: relative;
  bottom: 0;
  width: 100%;
  height: 120px;
}

/*Media Queries*/
@media screen and (max-width: 740px){
  #our-methodology-header{
    font-size: 25px !important;
  }

  .intro-icon{
    font-size: 10px !important;
  }

  #about-learning{
    width: 60%;
  }

}