* { /*box-sizing: border-box;*/ }

.container { width: 100%; padding-bottom: 10px; }

.loading-anim { position: relative; width: 100px; height: 100px; margin: auto; perspective: 800px; transform-style: preserve-3d; transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5); opacity: 0; transition: all 0.2s ease-out; }
.loading-anim .circle { width: 100%; height: 100%; animation: spin 5s linear infinite; }

.loading .loading-anim { display: flex; transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); opacity: 1; }

.loading .loading-overlay { background: rgba(255, 255, 255, 0.5); }

.underCircle { width: 100%; font-size: 1.2rem; display: block; margin-top: 20px; text-align: center; }

.dot { position: absolute; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #2ab2e4; animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite; }

.dot:nth-child(1) { top: 40px; left: 80px; animation-delay: 0s; }

.dot:nth-child(2) { top: 68px; left: 68px; animation-delay: 0.625s; }

.dot:nth-child(3) { top: 80px; left: 40px; animation-delay: 1.25s; }

.dot:nth-child(4) { top: 68px; left: 12px; animation-delay: 1.875s; }

.dot:nth-child(5) { top: 40px; left: 0px; animation-delay: 2.5s; }

.dot:nth-child(6) { top: 12px; left: 12px; animation-delay: 3.125s; }

.dot:nth-child(7) { top: 0px; left: 40px; animation-delay: 3.75s; }

.dot:nth-child(8) { top: 12px; left: 68px; animation-delay: 4.375s; }

@keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@keyframes jitter { 0% { transform: scale(0.9, 0.9); }
  25% { transform: scale(0.6, 0.6); }
  50% { transform: scale(0.9, 0.9); }
  75% { transform: scale(1.2, 1.2); }
  100% { transform: scale(0.9, 0.9); } }
@keyframes fade-in-out { 0% { opacity: 0.8; }
  25% { opacity: 0.6; }
  75% { opacity: 1; }
  100% { opacity: 0.8; } }

/*# sourceMappingURL=loading.css.map */