.navbar-brand{position: relative}

.logo{
  height: 46px;
  left: 2px!important;
  top:2%;  
 opacity: 0;
  animation: logo .3s linear;
}

@keyframes logo {
  0% {
   display: none;
    position: absolute;
   top:40%;
  }
  59% {
    display: block;
    opacity: 0;
     position: absolute;
    top:40%;
   }
   
 60% {
  display: block;
  opacity: 1;
   position: absolute;
  top:-10px;
 }
  100% {  opacity: 1;
  top:-10px;
   z-index: 1
  }
}


.logo1{

  left: 8%;
  position: absolute;
  top:45%;
  animation: logo1 .3s linear;
}

@keyframes logo1 {
  0% {
    height: auto;
    width: 80%;
    max-width:500px
  }
 42% {
   height:90px;
   width: auto;
   max-width:500px;
  z-index: 999999;
 }
89% {
     height:90px;
     width: auto;
     max-width:500px;
   top:25%;
   opacity: 1
 }
 90% {
      height:90px;
      width: auto;
      max-width:500px;
    top:25%;
    opacity: 1
  }
  100% {
      height:90px;
      width: auto;
      max-width:500px;
    top:25%;
    opacity: 0
  }
}

 .nav-home{animation: navw .2s linear;}
 
 @keyframes navw {
   0% {
     width:auto;
   }
  
   90% {
    min-width: 80px;
   }
   100% {
     min-width: 80px;
    }
 }
 
 

:root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}