* {
  box-sizing: border-box;
}

/*html,
body {
  font-size: 10px;
}*/

#banners {
  height: 10rem;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
#banners .banner {
  animation: bannerOne 20s linear infinite;
  height: 10rem;
  position: absolute;
  width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1, #banners .banner.four h1 {
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
  margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span, #banners .banner.four h1 span {
  display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image, #banners .banner.four .image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}
#banners .banner.one {
  background: red;
}
#banners .banner.one h1 {
  text-align: center;
}
#banners .banner.one .image {
  background: url("http://placehold.it/400x400") no-repeat right center;
  background-size: 100%;
  right: 0;
}
#banners .banner.two {
  animation-name: bannerTwo;
  background: blue;
}
#banners .banner.two h1 {
  text-align: center;
}
#banners .banner.two .image {
  background: url("http://placehold.it/1000x200") no-repeat center bottom;
  background-size: 100%;
  top: 50%;
  height: 50%;
  width: 100%;
}
#banners .banner.three {
  animation-name: bannerThree;
  background: green;
}
#banners .banner.three h1 {
  text-align: center;
}
#banners .banner.three .image {
  background: url("http://placehold.it/400x400") no-repeat left center;
  background-size: 100%;
  left: 0;
}
#banners .banner.four {
  animation-name: bannerFour;
  background: purple;
}
#banners .banner.four h1 {
  text-align: center;
  font-size: 10px;
}
#banners .banner.four .image {
  background: url("http://placehold.it/400x400") no-repeat left center;
  background-size: 100%;
  left: 0;
}

@keyframes bannerOne {
  0% {
    left: 0;
  }
  23% {
    left: 0;
  }
  27% {
    left: -100%;
  }
  48% {
    left: -100%;
  }
  52% {
    left: -100%;
  }
  73% {
    left: -100%;
  }
  77% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}
@keyframes bannerTwo {
  0% {
    left: 100%;
  }
  23% {
    left: 100%;
  }
  27% {
    left: 0;
  }
  48% {
    left: 0;
  }
  52% {
    left: -100%;
  }
  73% {
    left: -100%;
  }
  77% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerThree {
  0% {
    left: 100%;
  }
  23% {
    left: 100%;
  }
  27% {
    left: 100%;
  }
  48% {
    left: 100%;
  }
  52% {
    left: 0;
  }
  73% {
    left: 0;
  }
  77% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerFour {
  0% {
    left: 100%;
  }
  23% {
    left: 100%;
  }
  27% {
    left: 100%;
  }
  48% {
    left: 100%;
  }
  52% {
    left: 100%;
  }
  73% {
    left: 100%;
  }
  77% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
/* smallest */
/*@media (max-width: 320px;) {
  #banners {
    height: 10rem;
    .banner {
      &.one,
      &.two,
      &.three,
      &.four {
        height: 10rem;
        h1 {
          font-size: 2rem;
        }
      }
    }
  }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) {
  #banners {
    height: 12rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three, #banners .banner.four {
    height: 12rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1, #banners .banner.four h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three, #banners .banner.four {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1, #banners .banner.four h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* large */
@media (min-width: 961px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three, #banners .banner.four {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1, #banners .banner.four h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}