/**HeaderOn HeaderOff =  under header animated bar   header-off header-on= header animation */

.btn {
    text-decoration: none;
    display: inline-block;
    position: relative;
    color: white;
  }
  .btn::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
  }
  .btn:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
.HeaderOn{
  position: fixed;
  background-color: #A0937D;
  width: 100%;
  height: 400px;
  top: 60px;
  animation: underHeaderOn .25s;
  animation-duration: 0.5s;
  z-index: 20;
}
@keyframes underHeaderOn{
  from{
    height: 0px;
  }to {
    height: 400px;
  }
}
.HeaderOff{
  position: fixed;
  top: 60px;
  background-color: #A0937D;
  width: 100%;
  height: 0px;
  animation: underHeaderOff .25s forwards;
  animation-duration: 0.5s;
  z-index: 20;
}
@keyframes underHeaderOff{
  from{
    height: 400px;
  }to{
    height: 0px;
  }
}
.header-off{
  background-color: #A0937D;
    background-image: none;
    display: none;
  }
.header-on{
  height: 60px;
  display: visible;
  animation: headerr-on .25s;
  animation-duration: 1s;
}
@keyframes headerr-on{
  from{
    height: 0px;
  }to{
    height: 60px;
  }
}
@media (min-width: 1920px){
  .HeaderOn{
    top: 60px;
  }
  .HeaderOff{
    top: 60px;
  }
  .header-on{
    height: 60px;
    display: visible;
    animation: headerr-on .25s forwards;
    animation-duration: 1s;
}
  @keyframes headerr-on{
    from{
      height: 0px;
    }to{
      height: 60px;
    }
  }
  .header-off{
    background-color: transparent;
    background-image: none;
    display: none;
  }
}