@charset "UTF-8";
/* tb loading */

.tb-loading {
    width:100vw;
    height: 100svh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--tb-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all .5s linear;
    z-index: 10000;
}
.tb-loading.loaded{
    transform: translateY(-100svh);
}
.tb-loading .tb-loading-mes {
    color: #000;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 3px;
}
.tb-loading-sabo {
    max-width: 768px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-loading-sabo>img {
    height: 50%;
    animation: move 4s infinite linear;
}
.tb-loading-sabo>img.-sabo1,.tb-loading-sabo>img.-sabo5 {
    animation: move 5s infinite linear;
}

.tb-loading-sabo>img.-sabo4 {
    height: 40%;
}

.tb-loading-sabo>img.-sabo1 { animation-delay: 0s; transform-origin: center; }
.tb-loading-sabo>img.-sabo5 { animation-delay: 0.2s; }
.tb-loading-sabo>img.-sabo3 { animation-delay: 0.33s; }
.tb-loading-sabo>img.-sabo6 { animation-delay: 0.55s; }
.tb-loading-sabo>img.-sabo2 { animation-delay: 0.7s; }
.tb-loading-sabo>img.-sabo4 { animation-delay: 0.9s; }

@keyframes move {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(0, -5px); }
  40%  { transform: translate(5px, 0); }
  60%  { transform: translate(0, 5px); }
  80%  { transform: translate(-5px, 0); }
  100% { transform: translate(0, 0); }
}
@media screen and (max-width: 768px) {
  .tb-loading-sabo>img {
      width: 16%;
  }
}