/* The magic here that makes animations wait */

.js-loading *, .js-loading *:before, .js-loading *:after {
  animation-play-state: paused !important;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(235,39,42,0.65);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container-animated {
  position: relative;
  width: 100%;
}

.image-animated {
  display: block;
  width: 100%;
  height: auto;
}

.text-animated {
  font-weight: bold;
  color: white;
  font-size: 2vw;
  position: absolute;
  /*top: 50%;*/
  left: 55%;
  bottom: 0%;
  /*left: 1%;*/
  width: 100%;
  text-align: start;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.container-animated:hover .overlay {
  width: 100%;
}