@keyframes carousel {
  0% {
    left: 0;
  }
  11% {
    left: 0;
  }
  12.5% {
    left: -100%;
  }
  23.5% {
    left: -100%;
  }
  25% {
    left: -200%;
  }
  36% {
    left: -200%;
  }
  37.5% {
    left: -300%;
  }
  48.5% {
    left: -300%;
  }
  50% {
    left: -400%;
  }
  61% {
    left: -400%;
  }
  62.5% {
    left: -300%;
  }
  73.5% {
    left: -300%;
  }
  75% {
    left: -200%;
  }
  86% {
    left: -200%;
  }
  87.5% {
    left: -100%;
  }
  98.5% {
    left: -100%;
  }
  100% {
    left: 0;
  }
  /* daqui: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/ */
}
@keyframes go {
  100% {
    left: -300%;
  }
}
@keyframes back {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.carousel {
  width: 100%;
  overflow: hidden;
  height: 400px;
}

.carousel li {
  float: left;
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
}
.carousel li.ativo {
display: block;
}
.carousel li img {
  height: 100%;
  width: 100%;
}
.carousel input[type=checkbox]:checked ~ .paineis {
  animation-play-state: paused;
  animation: go 10s;
}
.banner-info {
width: 300px;
position: absolute;
left: 0;
bottom: 30px;
background-image: url('../img/bg-black-transparent.png');
color: #fff;
font-weight: normal;
font-size: 16px;
padding: 0 30px;
}