@import url('https://fonts.googleapis.com/css?family=Coustard:300,400&display=swap');
@import url(https://fonts.googleapis.com/css?family=Lato:300,900);



.item{
  width: auto;
  height: auto;
  background-color: white;
  position: relative;
  display: inline-block;
  /*margin: 1% 2% 1% 0%;*/
  overflow: hidden;
  /*box-shadow: 2px 3px 10px #444444;*/
}

.item .overlay{
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #f39c12;
  opacity: 0;
  transition: all 0.5s ease;
  position: absolute;
  top: 0; 
  bottom: 0;
}

/* effect-clean*/
.clean .overlay span:nth-child(1){
  position: absolute;
  left: 30%;
  top: 35%;
  font-size: 80px;
  font-weight: bold;
  font-family: coustard;
  transform: translateX(-50%);
}

.clean .overlay span:nth-child(2){
  position: absolute;
  top: 45%;
  left: 50%;
  font-weight:600;
  font-size: 25px;
  transform: translateX(-75%);
}

.clean .overlay span:nth-child(3){
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 60%;
  left: 0;
}

.clean .overlay:hover{
  opacity: 0.93;
}

.clean .overlay:hover span:nth-child(1){
  animation: slide 0.4s;
}

.clean .overlay:hover span:nth-child(2){
  animation: slide 0.7s;
}

.clean .overlay:hover span:nth-child(3){
  animation: line 0.5s forwards;
}

@keyframes slide{
  0%   {transform:translateX(-10%);}
  100% {transform:translateX(-50%);}
}

@keyframes line{
  0%   {width: 0;}
  100% {width: 50%}
}