@-webkit-keyframes moveArrow {
  0% {
    left: 6%;
  }
  25% {
    left: 30%;
  }
  60% {
    left: 6%;
  }
}

@keyframes moveArrow {
  0% {
    left: 6%;
  }
  25% {
    left: 30%;
  }
  60% {
    left: 6%;
  }
}

@-webkit-keyframes moveArrowSimple {
  0% {
    -webkit-transform: translate(0%, 5%);
            transform: translate(0%, 5%);
  }
  15% {
    -webkit-transform: translate(110%, 5%);
            transform: translate(110%, 5%);
  }
  30% {
    -webkit-transform: translate(0%, 5%);
            transform: translate(0%, 5%);
  }
}

@keyframes moveArrowSimple {
  0% {
    -webkit-transform: translate(0%, 5%);
            transform: translate(0%, 5%);
  }
  15% {
    -webkit-transform: translate(110%, 5%);
            transform: translate(110%, 5%);
  }
  30% {
    -webkit-transform: translate(0%, 5%);
            transform: translate(0%, 5%);
  }
}

.banner > * {
  position: relative;
  display: block;
  padding: 20.83vw 0 2.77vw 2.77vw;
  width: 100%;
  border-radius: 1.39vw;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  font-family: Roboto;
}

.banner__text {
  width: 55%;
  font-size: 2.22vw;
  line-height: 1.15;
  color: white;
}

.banner__arrow {
  position: absolute;
  right: 5.4%;
  bottom: 17.7%;
  width: 3.15%;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.banner__arrow svg {
  display: block;
  width: 100%;
}

.banner:hover .banner__arrow {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.banner.dark > * {
  background-color: #1e6de4;
}

.banner.dark > *:hover {
  background-color: #1556b8;
}

.banner.light > * {
  background-color: #d7e5f5;
}

.banner.light > * .banner__text {
  color: #242424;
}

.banner.light > *:hover {
  background-color: #7bb7f9;
}

.banner.simple > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F6F6F6;
  padding: 1.7% 0;
  border-radius: 13.89vw;
  border: 1px solid #797979;
  font-family: RobotoMedium;
}

.banner.simple .banner__text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #242424;
}

.banner.simple .banner__arrow {
  position: static;
  margin-left: 4%;
}

.banner.simple .banner__arrow svg {
  -webkit-transform: translateY(5%);
          transform: translateY(5%);
}

.banner.simple:hover > * {
  background-color: #BBBBBB;
}

@media screen and (max-width: 630px) {
  .banner.dark {
    margin-bottom: 16.41vw;
  }
  .banner a {
    border-radius: 20px;
  }
  .banner__text {
    padding: 17.5vw 3.4vw 3.15vw;
    font-size: 4.1vw;
    width: 80%;
  }
  .banner__arrow {
    top: 9%;
    left: 6%;
    width: 8%;
    -webkit-animation: moveArrow 4s ease-in-out infinite;
            animation: moveArrow 4s ease-in-out infinite;
  }
  .banner.simple .banner__text {
    padding: 1.6vw 0;
    font-size: 4.61vw;
    width: 57%;
  }
  .banner.simple .banner__arrow {
    padding: 1.4vw 0;
  }
  .banner.simple .banner__arrow svg {
    -webkit-animation: moveArrowSimple 4s ease-in-out infinite;
            animation: moveArrowSimple 4s ease-in-out infinite;
  }
}