:root {
  --color: #f1df40;
  --color-b: #625aee;
}

.box {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 10%;
  margin-bottom: 13px;
  /*background-color: var(--color-b);*/
}

.box--1 span {
  color: #000 !important;
  font-size: 1em;
  display: inline-block;
  text-align: center;
  width: 100%;
  -moz-animation: marquee 4s linear infinite;
  -webkit-animation: marquee 4s linear infinite;
  animation: marquee 4s linear infinite;
}
/*
.box--1 span:nth-child(1) {
  position: absolute;
  left: -100%;
  -moz-animation: marquee 4s 2s linear infinite;
  -webkit-animation: marquee 4s 2s linear infinite;
  animation: marquee 4s 2s linear infinite;
}*/

.box--1 span:nth-child(1) {
    position: absolute;
    /*left: -100%;*/
    -moz-animation: marquee 4s 2s linear infinite;
    -webkit-animation: marquee 4s 2s linear infinite;
    animation: marquee 3s 51s linear infinite;
}

.box--1 .line {
  border-radius: 5px !important;
  color: #0b0b0b;
  font-weight: bolder;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25px;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  background-color: #FFC700;
}

@keyframes marquee {
  0% {
    left: 0;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    left: 0;
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
};

@media (max-width: 1200px) {
  body {
    font-size: 16px;
  }
}
@media (max-width: 1150px) {
  body {
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  body {
    display: block;
  }

  .container {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
  }

  .box {
    height: 200px;
    width: 100%;
    max-width: 300px;
    margin: 30px;
  }
}
@media (max-width: 400px) {
  .container {
    padding: 0 15px;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
  }

  .box {
    /*height: 200px;*/
    width: 100%;
    max-width: 280px;
    margin: 20px auto;
  }
}