@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

@font-face{
    font-family: "PoplarStd";
    src: url("../font/PoplarStd.otf");
    
}

.font-small
{
    font-size: 12px;
}

.spacer
{
    margin-left: 5em;
}

/* Parallax Scrolling Background*/
.parallax 
{
  /* The image used */
  background-image: url("../content/hh_home_holidays_parallax.png");

  /* Set a specific height */
  height: 50vh;
    

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 
{
  /* The image used */
  background-image: url("../content/hh_about_our_protects_parallax_image.png");

  /* Set a specific height */
  height: 50vh;
    

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nowrap
{
  white-space: nowrap; 
}

.header-font
{
    font-family: "PoplarStd" !important;
    font-size: 18px;
    color: #066E4A !important;
}

@media (min-width: 576px) {
  .project-font
{
    font-family: "Open Sans" !important;
    font-size: 2.4vw;
    color: #76b14f !important;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    
}
.copy-font2
    {
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 1.4vw;
}
}

@media (max-width: 575px) {
  .project-font
{
    font-family: "Open Sans" !important;
    font-size: 6.6vw;
    color: #76b14f !important;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    
}
 .copy-font2
{
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 3.4vw;
}
}


.jumbotron .header-font
{
    font-family: "PoplarStd" !important;
    font-size: 52px;
    letter-spacing: 8px;
    color: #76b14f !important;
}

.copy-font
{
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 1.7vw;
}

.review-font
{
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 1vw;
}

.review-header
{
   font-family: "PoplarStd" !important;
    font-size: 4.5vw;
    letter-spacing: 8px;
    color: #FFFFFF !important; 
}

.about-header
{
   font-family: "PoplarStd" !important;
    font-size: 4.5vw;
    letter-spacing: 8px;
    color: #f58635 !important; 
}

.review-shift-l
{
    transform: translateX(20%);
}

.review-shift-r
{
    transform: translateX(-20%);
    transform: translateY(1%);
}



@media (max-width: 575.98px) {
  .img-half {
    max-width: 40%;
    height: auto;
  }
}

@media (min-width: 768px) {
  .img-half {
    max-width: 100%;
    height: auto;
  }
}

.button-font
{
    font-family: "PoplarStd" !important;
    font-size 4em; !important;
    letter-spacing: 1.5px;
    color: #FFFFFF !important;
}

.button-font:hover
{
    font-family: "PoplarStd" !important;
    font-size 4vw; !important;
    letter-spacing: 1.5px;
    color: #0494c9 !important;
}

.header-active
{
    font-family: "PoplarStd" !important;
    font-size: 18px;
    font-weight: boldfont-weight: bold;
    color: #F58635 !important;
}

.footer-active
{
    font-family: "Open Sans" !important;
    color: #F58635 !important;
    font-weight: bold;
}

.jumbotron img{
    display:block;
    margin-left:auto;
    margin-right:auto;
} 



.drop-cap
{
  color: #FFFFFF;
  float: left;
  font-size: 4em;
  line-height: 0.4em;
  padding-top: 4px;
  padding-right: 2px;
  padding-left: 3px;
}


.drop-cap2
{
  color: #000000;
  float: left;
  font-size: 4em;
  line-height: 0.4em;
  padding-top: 4px;
  padding-right: 2px;
  padding-left: 3px;
}


/* Colour tags*/
.hero-white
{
    background: #FFFFFF;
}

.hero-grey
{
    background: #a8adb0;
}

.hero-green
{
   background: #537473;
}

.hero-blue
{
    background-color:rgba(26, 184, 236, 1) !important;
    
}

.hero-darkblue
{
    background: #296195;
    
}

.hero-avo
{
    background: #76b14f;
}

.hero-orange
{
    background: #f58635;
}

.hero-brown
{
    background: #f58635;
}

/*end of color tags*/

.footer-font
{
    font-family: "Open Sans";
    color: #FFFFFF !important;
}

/*Button Hover Effects*/
.btn-success {
    color: #fff;
    background-color: #0495c9;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:active:focus .btn-success.active, .open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #FFFFFF;
    border-color: #285e8e; /*set the color you want here*/
    
}

/* Carousel indicators*/
.carousel-control-prev,
    .carousel-control-next{
        
        
        outline: $color-white;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid $color-white;
        background-color: $color-white;
    }

    .carousel-control-prev-icon { 
        background-image:url("../content/hh_home_partners_arrow_left.png"); 
        width: 30px;
        height: 48px;
    }
    .carousel-control-next-icon { 
        background-image: url("../content/hh_home_partners_arrow_right.png");
        width: 30px;
        height: 48px;
    }

/* Overlay Kung Fu*/
.hero {
    position: absolute;
    top: 82%;
    left: 43%;
    z-index: 3;
    color: #fff;
    text-align: center;
    
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}




.hero h1 {
   
    font-family: "Open Sans" !important;
    font-size: 2.4vw;    
    font-style: italic; !important;
    color: #373535;
    margin: 0;
    padding: 0;
}

.overlay {
    position: absolute;
    top: 72%;
    left: 7%;
    width: 73%;
    height: 20%;
    z-index: 2;
    background-color: #d4d7d8;
    opacity: .85;
}

.fix-img{
    height: 100vh; !important;
    width: 100%;
    object-fit: cover; 
}
   

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}


.carousel-item .col-md-3,.col-md-4,.col-md-6{
  display: inline-block;
  margin-left:-4px;
}
.carousel-item .col-md-3,.col-md-4,.col-md-6 img{
  width:100%;
  height:auto;
}

/* overlay code for projects*/
@media (max-width: 1499px)
{

    .imgoverlay
    {
        position:absolute;
        top:50%;
        left:50%;
        background-color:rgba(212, 215, 216, 0.804);
        height:85%;
        width:85%;
        opacity:0;
        transition: 0.5s ease;
    }
    .reposition-text-a
    {
        transform:translateY(-165%);
    }

    .reposition-text-b
    {
      transform:translateY(-55%);
    }
    
    .fix-btn
    {
        transform: translate(0,-95%);
    }
    
    .holiday-shift
    {   
        position: relative;
        transform:translate(9%,150%);
        background-color: #d4d7d8;
        opacity: .85;
        width: 85%;
    }

}

@media (min-width: 1500px)
{

    .imgoverlay
    {
        position:absolute;
        top:50%;
        left:50%;
        background-color:rgba(212, 215, 216, 0.804);
        height:85%;
        width:65%;
        opacity:0;
        transition: 0.5s ease;
    }
    
    .reposition-text-a
    {
        transform:translateY(-230%);
    }

    .reposition-text-b
    {
      transform:translateY(-75%);
    }
    
    .fix-btn
    {
        transform: translate(0,-220%);
    }
    
    .holiday-shift
    {   
        position: relative;
        transform:translate(9%,90%);
        background-color: #d4d7d8;
        opacity: .85;
        width: 85%;
    }
}

.imgctr{
    position:absolute;
    transform:translate(-50%,-50%);
    text-align:center;
    padding-top:27%;
    
}

.imghov:hover .imgoverlay {
    opacity:1;
    
}

.holiday-btn
{   
    
    transform: translate(500%,200%);
    background-color: white;
}

/*FAQ Accordion CSS*/
.faq-border
{
    border: 4px solid #FFFFFF; !important;
    border-radius: 0;
}

.faq-border-in
{
    border-top: 4px solid #FFFFFF; !important;
}

.faq-header-font
{
    font-family: "PoplarStd";
    font-weight: 500;
    font-size: 3vw;
    color: white;
}

.faq-copy-font
{
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 2vw;
    color: white;
}

.contact-text
{
    font-family: "Open Sans";
    font-weight: 650;
    font
    font-size: 0.8vw;
    color: black;
}

/*contact us button*/
.btn-contact {
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #ffffff;
  background-color: #f58635;
  border-color: #f58635;
}

.btn-contact:hover {
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #f58635;
  background-color: #ffffff;
  border-color: #000000;
}

/*green button*/
.btn-green {
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #ffffff;
  background-color: #b3d45d;
  border-color: #b3d45d;
}

.btn-green:hover {
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #b3d45d;
  background-color: #ffffff;
  border-color: #000000;
}

.btn-blue {
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #ffffff;
  background-color: #1ab9ed;
  border-color: #1ab9ed;
}

.btn-blue:hover{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #1ab9ed;
  background-color: #ffffff;
  border-color: #000000;
}

.btn-orange
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #ffffff;
  background-color: #f58535;
  border-color: #f58535;
}

.btn-review
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #296195;
  background-color: #ffffff;
  border-color: #296195;
  border-radius: 0;
}

.btn-review:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #296195;
  border-color: #ffffff;
  border-radius: 0;
}

.btn-faq:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #1ab8ec;
  border-color: #ffffff;
  border-radius: 0;
}

.btn-faq
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #1ab8ec;
  background-color: #ffffff;
  border-color: #1ab8ec;
  border-radius: 0;
}

.btn-avo
{
font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #76b14f;
  background-color: #ffffff;
  border-color: #76b14f;
  border-radius: 0;
}


.btn-avo:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #76b14f;
  border-color: #ffffff;
  border-radius: 0;
}

.btn-avo-rev:hover
{
font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #76b14f;
  background-color: #ffffff;
  border-color: #76b14f;
  border-radius: 0;
  opacity: 1;
}


.btn-avo-rev
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #76b14f;
  border-color: #76b14f;
  border-radius: 0;
}

.btn-blue-read
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color: #ffffff; !important;
  background-color:  #1ab8ec;
  border-color: #1ab8ec;
  border-radius: 0;
}

.btn-blue-read:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  font-size: 1.4em;
  color:  #1ab8ec !important;
  background-color: #ffffff;
  border-color:  #1ab8ec;
  border-radius: 0;
}



.purpose-header
{
    font-family: "PoplarStd";
    color: #76b14f;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}

.values-header
{
    font-family: "PoplarStd";
    color: #b2d45d;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}


.card-header .btn-focus[aria-expanded=true] {
    color: #296195;
    background-color: #ffffff;
}

.full-div-button
{
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/*Projects Landing grouped css*/
.project-header
{
   font-family: "PoplarStd" !important;
    font-size: 4.5vw;
    letter-spacing: 8px;
    color: #537474 !important; 
}


.babies-header
{
    font-family: "PoplarStd";
    color: #f58635;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}
.btn-babies
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #f58635;
  border-color: #f58635;
  border-radius: 0;
}
.btn-babies:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #f58635;
  background-color: #ffffff;
  border-color: #f58635;
  border-radius: 0;
}

.skills-header
{
    font-family: "PoplarStd";
    color: #1ab8ec;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}

.btn-skills
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #1ab8ec;
  border-color: #1ab8ec;
  border-radius: 0;
}
.btn-skills:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #1ab8ec;
  background-color: #ffffff;
  border-color: #1ab8ec;
  border-radius: 0;
}

.maboneng-header
{
    font-family: "PoplarStd";
    color: #76b14f;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}

.btn-mandela2
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #537473;
  background-color: #ffffff;
  border-color: #537473;
  border-radius: 0;
}


.btn-mandela2:hover
{ 
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #537473;
  border-color: #ffffff;
  border-radius: 0;
}



.btn-mabo
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #76b14f;
  border-color: #76b14f;
  border-radius: 0;
}
.btn-mabo:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #76b14f;
  background-color: #ffffff;
  border-color: #76b14f;
  border-radius: 0;
}

.mandela-header
{
    font-family: "PoplarStd";
    color: #537474;
    font-weight: 500;
    font-size: 4vw;
    letter-spacing: 0.3vw;
}

.btn-mandela
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #537474;
  border-color: #537474;
  border-radius: 0;
}
.btn-mandela:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #537474;
  background-color: #ffffff;
  border-color: #537474;
  border-radius: 0;
}

/*project standalones*/
.proj-header-font
{
    font-family: "PoplarStd";
    font-weight: 500;
    font-size: 1.1vw;
    color: white;
}

.large-proj-font
{
    font-family: "PoplarStd";
    font-weight: 500;
    font-size: 4.4vw;
    letter-spacing: 4px;
    color: white;
}

.btn-white-border
{
    border-width: 0.2em;
    border-color: white;
    border-radius: 0;
}

.card-header .btn-focus2[aria-expanded=true] {
    color: #f58635;
    background-color: #ffffff;
}


.card-header .btn-focus2:hover{
    color: #f58635;
    background-color: #ffffff;
}

.card-header .btn-focus3[aria-expanded=true] {
    color: rgba(26, 184, 236, 1) !important;
    background-color: #ffffff;
}

.card-header .btn-focus3:hover {
    color: rgba(26, 184, 236, 1) !important;
    background-color: #ffffff;
}

.card-header .btn-focus4[aria-expanded=true] {
    color: #76b14f !important;
    background-color: #ffffff;
}

.card-header .btn-focus4:hover {
    color: #76b14f !important;
    background-color: #ffffff;
}

.card-header .btn-focus5[aria-expanded=true] {
    color: #537473 !important;
    background-color: #ffffff;
}

.card-header .btn-focus5:hover {
    color: #537473 !important;
    background-color: #ffffff;
}



.proj-border
{
    border: 4px solid #FFFFFF; !important;
    border-radius: 0;
}

.btn-bab
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #f58535;
  background-color: #ffffff;
  border-color: #f58535;
  border-radius: 0;
}

.btn-bab:hover
{
  font-family: "PoplarStd";
  letter-spacing: 0.15em;
  
  font-size: 1.4em;
  color: #ffffff;
  background-color: #f58535;
  border-color: #ffffff;
  border-radius: 0;
}