.justify-content-center {
  justify-content: center;
}

.d-flex{
  display: flex;
} 

.align-items-center{
  align-items: center;
}
.top-bar {
  gap: 20px;
  color: #fff;
  font-family: 'Noto Sans';
  padding: 15px;
  position: relative;
}

.top-bar .button--outlined {
    border: 1px solid #fff;
    padding: 8px 45px;
    color: #fff;
}

.top-bar .button--outlined:hover {
 background-color: #f47637!important;
    border: 1px solid #f47637!important;
}


header.kl-header {
    transition: top 0.1s ease;
}

.header-fixed {
  top: 0!important;
}

.top-bar-star-content-left,.top-bar-star-content-right {
  width: 90px;
}

@keyframes star-1 {
  to {
    zoom:10%;
    opacity:0;
  }
  from{
    zoom:100%
      opacity:1;
  }
}
.star-1 {
  animation-name: star-1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
  top: 8px;
  left: -8px;
  position: relative;
}
@keyframes star-2 {
  to {
 
    opacity:0;
  }
  from{
 
      opacity:1;
  }
}
.star-2 {
  animation-name: star-2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
}
@keyframes star-3 {
    0% {
    opacity:1;
  }
  45% {
  opacity:1;
  }
  55% {
  opacity:0;
  }
  100% {
  opacity:0;
  }

}
.star-3 {
  animation-name: star-3;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes star-4 {
  to {
    zoom:10%;
    opacity:0;
  }
  from{
    zoom:100%
      opacity:1;
  }
}
.star-4 {
  animation-name: star-4;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
  top: 8px;
  left: 8px;
  position: relative;
}

@media(max-width: 700px) {
    .top-bar {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      display: grid;
      align-items: center;
      justify-content: center;
      text-align: center;
  }
  .top-bar-star-content-right  {
    position: absolute;
    top: 50%;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .top-bar-star-content-left  {
    position: absolute;
    top: 50%;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }
  
  .top-bar-star-content-left,.top-bar-star-content-right {
    width: auto;
  }
} 

@media(max-width:1165px) {
  .kl-navbar__button {
      line-height: 1.5em;
      font-size: 12px;
  }
}

@media(max-width:920px) {
  .kl-navbar__button {
    font-size: 1rem;
    line-height: 2em;
  }
}