@keyframes dotAnime{
	0%{
		left:calc(0% - 7.5px);
		top:calc(0% - 7.5px);
	}
	25%{
		left:calc(100% - 2.5px);
		top:calc(0% - 7.5px);
	}
	50%{
		left:calc(100% - 2.5px);
		top:calc(100% - 2.5px);
	}
	75%{
		left:calc(0% - 7.5px);
		top:calc(100% - 2.5px);
	}
	100%{
		left:calc(0% - 7.5px);
    top:calc(0% - 7.5px);
	}
}
@keyframes bottomright {
  0% {
    width: 0;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  50% {
    height: 100%;
    width: 100%;
    visibility: visible;
  }
  75% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}

@keyframes revbottomright {
  0% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  50% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  75% {
    width: 100%;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  100% {
    width: 0;
    height: 0;
    padding-top: 0;
    visibility: hidden;
  }
}

@keyframes topleft {
  0% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  25% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  50% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  75% {
    width: 100%;
    height: 0;
    padding-bottom: 0;
    visibility: visible;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
  }
}

@keyframes revtopleft {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 0;
    padding-bottom: 0;
    visibility: visible;
  }
  50% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  75% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  100% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
}

@keyframes cycle-colors {
  0% { border-color: hsl(0, 100%, 50%); }
  25% { border-color: hsl(90, 100%, 50%); }
  50% { border-color: hsl(180, 100%, 50%); }
  75% { border-color: hsl(270, 100%, 50%); }
  100% { border-color: hsl(360, 100%, 50%); }
}

@keyframes pulse {
  to {
    opacity: 0;
    transform: scale(1);
  }
}