#hero-container {
  /*background: url(../images/meri-sorgaard-a2VNcdMEbOI-unsplash.jpg) no-repeat center;
  background-size: cover;
 /* background-position-x: 70%;
  opacity: 1;*/
  position: relative;
  height: 100vh;
  max-height: 600px;
}

nava {
  background-color: rgba(0,0,0,.5) !important;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}

#smallsun {
  content: "";
  background: url(../images/smallsun.jpg) no-repeat center;
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -3;
  background-size: cover;
  animation: zoom12 2s;
/*  animation: fadein .5s;
  animation-timing-function: ease-in-out;*/
}

#frontleaves {
  content: "";
  background: url(../images/frontleaves.png) no-repeat center;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  background-size: cover;
  /*animation: fadeout 3s;
  /*-webkit-animation: fadein 1s;
  animation-timing-function: ease-in-out;*/
  animation: zoom15 2s;
}

@keyframes zoom15 {
  0% {transform: matrix(1,0,0,1.04,0,-3); opacity:1;}
  30% {opacity:1;}
  50% {transform: matrix(1,0,0,1.02,0,-1);}
  100% {transform: matrix(1,0,0,1,0,0);opacity: 0;}
}

@keyframes zoom12 {
  0% {opacity:0;}
  49%{opacity:1;}
  50% {transform: matrix(1,0,0,1,0,0);}
}

#frontleaves.scrolled {
  transform: matrix(1,0,0,1,0,-1); opacity: 1;
}

#hero-spacer {
  position: relative;
  height: 100px;
}

#face-container {
  /*https://unsplash.com/@merifoodface*/
  background: url(../images/dougie-md.jpg) no-repeat center;
  background-size: cover; /*proportional resize*/
  background-position-x: 70%;
  background-position-y: 40%;
  /*opacity: 1;*/
}

#hero, #face {
  background: none;
}

#hero>h1, #face>h1 {
  font-size: 3rem;
}

#hero>h1, #hero>h2, #hero>p, #face>h1, #face>h2, #face>p {
  text-shadow: 0px 5px 10px darkgreen, -2px 0px 10px darkgreen, 0px -5px 10px darkgreen, 2px 0px 10px darkgreen;
}

.navbar {
  background: rgba(0,0,0,0);
}

.bs-component {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

/* Add the below transitions to allow a smooth color change similar to lyft */
.navbar, .navbar-collapse.collapse, .nav-link, .hidefade, .hidescale, .hideleft, .hidelow, #frontleaves, #logo, #darklogo {
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

.navbar.scrolled {
  background: rgb(233, 234, 235); /* IE */
  background: rgba(248, 249, 250, 0.95); /* NON-IE */
}

.navbar-collapse.collapse.show {
  background: rgb(233, 234, 235); /* IE */
  background: rgba(248, 249, 250, 0.95); /* NON-IE */
  border-radius: 5px;
}

.navbar-collapse.collapse.show .nav-link {
  color: black;
}

.nav-link.scrolled {
  color: black !important;
}

#logo.scrolled {
  opacity: 0;
}

#darklogo.scrolled {
  opacity: 1;
}
/*
#logo.scrolled>img, #darklogo.scrolled>img {
  width: 90px;
}
*/
.hidefade {
  opacity: 0;
}

.hidefade.in-view {
  opacity: 1;
}

.hidescale {
  transform: scale(.95);
}

.hidescale.in-view {
  transform: scale(1);
}

.hideleft {
  transform: matrix(1.5, 0, 0, 1.5, -100, 0) !important;
}

.hideleft.in-view {
  transform: matrix(1, 0, 0, 1, 0, 0) !important;
}

.hidelow {
  transform: matrix(1, 0, 0, 0.1, 0, 0) !important;
}

.hidelow.in-view {
  transform: matrix(1, 0, 0, 1, 0, 0) !important;
}

.divWithBgImage1 {
    /*position: fixed;*/
    width: 100%;
    height: 500px;
    background: url(../images/ape-hand.png) no-repeat center center fixed;
    background-size: cover; /*proportional resize*/
    -webkit-transition: background 2s;
    -moz-transition: background 2s;
    -o-transition: background 2s;
    transition: background 2s ease-in-out;
  }
  .far {
    color: white;
  }
  .centred1 {
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     height: 40px;
     width:100%;
     text-align:center
  }
  .ctr {
    opacity: 0;
  }
  .far:hover {
    color: black;
  }
  .capability {
    text-shadow: 0px 5px 10px black, 0px -5px 10px black;
  }
  body {
    font-family: 'Comfortaa', cursive;
    /*font-weight: 800;*/
  }

  .btn-info {
    background-color: #4ca170;
    border-color: #4ca170;
  }

  .btn-success {
    background-color: #b1b87b;
    border-color: #b1b87b ;
  }

p.lead, .card-subtitle {
  font-family: 'Lora', serif;
}

.card>img {
  height: 100px;
  width: 150px;
  margin: auto !important;
}

  .navbar-brand {
      font-size: 3rem;
  }

  #logo {
    position: absolute;
  }

  #darklogo {
    opacity: 0;
  }
/*
  #logo>img, #darklogo>img {
    width: 120px;
  }
  */
  i {
    opacity: 1;
  }

  i.fa-bars.scrolled {
    color: black !important;
  }

  .navbar-toggler {
    border: none;
  }

  html {
    font-size: 1rem;
  }

  #hero>h1>div, #face>h1>div {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    padding: 10px;
    z-index: 10;
  }



#hi {
  animation: showup 6s ;
}

#we-are {
width:300px;
animation: reveal 6s ;
}

#ape-it {
  animation: colorify 8s;
}

#we-do {
  display: block !important;
  z-index: 5 !important;
  margin-top: -0px;
  animation: slidein 6s ;
}

#web {
  animation: calltoaction 5.8s;
}


#stuff {
  animation: calltoaction 6.3s;
}

#say-hi {
  animation: calltoaction 7.6s;
  margin: 30px;
  text-shadow: none;
}

#hero>h1, #face>h1 {
  position: absolute;
  top: 40%;
  left: 0;
}

@keyframes showup {
0% {opacity:0;}
17% {opacity:0;}
34% {opacity:1;}
80% {opacity:1;}
100% {opacity:1;}
}

@keyframes reveal {
0% {opacity:0;width:0px;}
30% {opacity:0;width:0px;}
40% {opacity:0;}
42% {width:300px;}
60% {opacity:1;}
100% {opacity:1;width:300px;}
}

@keyframes colorify {
  0% {color: #fff;}
  95% {color: #fff;}
  100% {color: #e6e26d;}
}

@keyframes slidein {
  0% { opacity:0; margin-top:-70px;}
  64% { opacity:0; margin-top:-70px;}
  68% { opacity:0.2; }
  77% { opacity: 1; margin-top:0px; }
  100% { margin-top:0px; }
  }

@keyframes calltoaction {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}


.navbar-toggler[aria-expanded="true"] {
  transform: rotate(90deg);
}


/*for the animation*/
.navbar-toggler {
  transition: 0.5s;
  outline: 0 !important;
}

  @media only screen and (max-width: 480px) {
    .quote {
      font-size: 1rem;
    }

    #hero-container {
      height: 90vh;
    }

    #hero>h1, #face>h1 {
      font-size: 2rem;
      top: 50%;
    }

    h2 {
      font-size: 1.5rem;
    }

    #hero>p.lead, #face>p.lead {
      font-size: 1.2rem;
    }

    #hero>p, #face>p {
      font-size: 1rem;
    }

    p.bio {
      font-size: 1rem;
    }

    .container, .service {
      padding: 0 !important;
    }

    .jumbotron {
      border-radius: 0;
    }

    #hero, #face {
      border-radius: 0;
    }

    #steps>h2, #steps h4 {
      text-align: left !important;
    }

    #we-are {
      width:220px;
      animation: reveal 6s ;
    }

    @keyframes showup {
      0% {opacity:0; transform: scale(3); margin-left: 50px;}
      17% {opacity:0; transform: scale(3); margin-left: 50px;}
      30% {transform: scale(3);  margin-left: 50px;}
      34% {opacity:1; margin-left: 0px;}
      43% {transform: scale(1);}
    }

    @keyframes reveal {
      0% {opacity:0;width:0px;}
      30% {opacity:0;width:0px;}
      40% {opacity:0;}
      42% {width:220px;}
      60% {opacity:1;}
      100% {opacity:1;width:220px;}
    }

    #hero>h1, #hero>h2, #hero>p, #face>h1, #face>h2, #face>p {
      text-shadow: 0px 5px 5px darkgreen, -2px 0px 5px darkgreen, 0px -5px 5px darkgreen, 2px 0px 5px darkgreen;
      animation: late-shadow 4s;
    }

    @keyframes late-shadow {
      0% {text-shadow: none;}
      40% {text-shadow: none;}
      100% {text-shadow: 0px 5px 5px darkgreen, -2px 0px 5px darkgreen, 0px -5px 5px darkgreen, 2px 0px 5px darkgreen;}
    }

  }