apjames93/mui-storyblok

.shadowCenter {
    -webkit-animation: shadowCenter 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadowCenter 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadowTop {
    -webkit-animation: shadowTop 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadowTop 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadowRight {
  -webkit-animation: shadowRight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadowRight 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadowLeft {
    -webkit-animation: shadowLeft 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadowLeft 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadowBottom {
    -webkit-animation: shadowBottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadowBottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadow3dTR {
    -webkit-animation: shadow3dTR 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: shadow3dTR 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.shadow3dBR {
    -webkit-animation: shadow3dBR 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: shadow3dBR 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.shadow3dBL {
    -webkit-animation: shadow3dBL 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: shadow3dBL 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.shadow3dTL {
    -webkit-animation: shadow3dTL 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: shadow3dTL 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@keyframes shadowCenter {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}

@keyframes shadowTop {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes shadowRight {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
    box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes shadowLeft {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
    box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes shadowBottom {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
    box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes shadow3dTR {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px);
  }
}

@keyframes shadow3dBR {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
    box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(-8px);
    transform: translateX(-8px) translateY(-8px);
  }
}

@keyframes shadow3dBL {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
   transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
    box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
    -webkit-transform: translateX(8px) translateY(-8px);
    transform: translateX(8px) translateY(-8px);
  }
}

@keyframes shadow3dTL {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e, -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e;
    box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e, -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e;
    -webkit-transform: translateX(8px) translateY(8px);
    transform: translateX(8px) translateY(8px);
  }
}