.animate__animated {
  opacity: 0;
}

.animate__slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 1s;
    opacity: 1;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-40%);
        visibility: visible;
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

.fade-in-element {
    opacity: 0;
}

.fade-in {
    opacity: 1;
    animation: fadeIn 1s ease-in-out forwards;
}


@keyframes slideInBottom {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

.slide-in-bottom-animation
{
    opacity: 0;
}

.slide-in-bottom {
  animation: slideInBottom 1.5s ease forwards;
  opacity: 1;
}


.zoom-inout-animation
{
  opacity: 0;
}

.zoom-inout
{
  animation: zoom-in-zoom-out 1s ease forwards;
  opacity: 1;
}


  

  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(0.3, 1);
      opacity: 0;
    }
    100% {
      transform: scale(1, 1);
      opacity: 1;
    }
  }


/* progressive image CSS */
.progressive {
  position: relative;
  display: block;
  overflow: hidden;
  outline: none;
}

.progressive img {
  display: block;
  width: 100%;
  max-width: none;
  border: 0 none;
}

@media (min-width: 992px) 
{
  .progressive img
  {
    height: 100vh;
  }
}

.progressive img.preview {
  filter: blur(2vw);
  transform: scale(1.5);
}

.progressive img.reveal {
  position: absolute;
  left: 0;
  top: 0;
  animation: progressiveReveal 1s linear;
}

@keyframes progressiveReveal {
	0% { transform: scale(1.05); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}