/*********************************
 Animations
 *********************************/
@keyframes slideRightPopUp {
  0% {
    transform: translate(-100%, -50%);
  }
  100% {
    transform: translate(0%, -50%);
  }
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.04);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes scaleDownward {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 160rem;
  }
}

@keyframes shrinkUpward {
  0% {
    max-height: 160rem;
  }
  100% {
    max-height: 0px;
  }
}

@keyframes shadow-pop-tr {
  0% {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    -webkit-transform: translateX(-6px) translateY(6px);
    transform: translateX(-6px) translateY(6px);
  }
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) rotateX(-60deg);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) rotateX(-60deg);
  }
}

.zoom {
  animation-name: zoom;
  animation-duration: 0.3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.zoomOut {
  animation-name: zoomOut;
  animation-duration: 0.3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 0.3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.scaleDownward {
  animation-name: scaleDownward;
  animation-duration: 0.6s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.shrinkUpward {
  animation-name: shrinkUpward;
  animation-duration: 0.6s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

/************************
another way to do animations
************************/
.zoomAppear {
  transform: scale(1) translate(-50%, 0%);
  transform-origin: 0 0;
  transition: transform 0.2s ease-in;
}

.zoomDissapear {
  transform: scale(0) translate(-50%, 0%);
  transform-origin: 0 0;
  transition: transform 0.2s ease-out;
}