.transition-1 {
  transition: 0.1s;
}

.transition-2 {
  transition: 0.2s;
}

.transition-3 {
  transition: 0.3s;
}

.transition-4 {
  transition: 0.4s;
}

.transition-5 {
  transition: 0.5s;
}

.zoom-in {
  animation: zoomIn 0.3s forwards;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid white;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
}

.scale-and-shadow-hover {
  box-shadow: none;
  background: #fff;
  border: 1px dotted rgba(0, 0, 0, 0);
  transform: scale(1);
  transition: transform 200ms cubic-bezier(0.345, 0.115, 0.135, 1.42), opacity 150ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
  border-radius: 8px;
}
.scale-and-shadow-hover:hover {
  box-shadow: 0 2px 18px rgba(34, 34, 34, 0.2);
  transform: scale(1.02);
  z-index: 1;
}

.rb-hover-zoom:hover {
  transform: scale(1.02);
}

.rb-hover-border:hover {
  border: 1px solid #818181;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.zoom-out {
  animation: zoomOut 0.3s forwards;
}

@keyframes zoom {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px transparent;
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}