.image-construction {
  opacity: 1;
  display: block;
  width: 100%;
  backface-visibility: hidden;
}

.flip {
  position: absolute;
  top: 25vh;
  left: 50vw;
  transform: translateX(-50%) translateY(0%);
  max-width: 80vw;
  max-height: 80vh;
}

.flip img {
  height: auto;
  width: 100%;
  -webkit-transition: background-color .5s, opacity .2s, width 1s;
   -moz-transition: background-color .5s, opacity .2s, width 1s;
     -o-transition: background-color .5s, opacity .2s, width 1s;
        transition: background-color .5ss, opacity .2s, width 1s;
}


.flip img:hover {
  background-color: #FBFBFB;
}

#fade-in-slow {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion linear and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  animation-duration:2s;
}