@charset "UTF-8";

@keyframes trickleOpacity {
  from {
    opacity: 0%; 
  }
		
  to {
    opacity: 100%;
  }
}

@keyframes trickleMoveFromLeft {
  from {
    margin-left: -3em;
    width: 300%; 
  }
		
  50% {
    width: 150%;
  }
  to {
    margin-left: 6em;
    width: 50%;
  }
}

@keyframes trickleMoveFromCenter {
  from {
    margin-left: 0%;
/*     margin-top: 7em; */
/*     width: 50%; */
/*     font-size: 0.5em;  */
  }
  to {
	margin-left: 100%;
/*     margin-top: 7em; */
/*     width: 100%; */
    font-size: 1em;
  }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    font-size: 200%;
/*     width: 175%;  */
  }

	35% {
    font-size: 200%;
/*     margin-left: 25%; */
    width: 200%;
  }
  to {
    margin-left:  0em;
    width: 100%;
  }
}

@keyframes slidein50 {
  from {
    margin-left: 50%;
  }

  }
  to {
    margin-left:  0em;
  }
}

@keyframes slideinLeft {
  from {
    margin-left: 100%;
  }

  }
  to {
    margin-left:  0em;
  }
}

@keyframes trickleMoveToRight {
  from {
    margin-left: -200%;
/*     margin-top: 7em; */
/*     width: 50%; */
    font-size: 1.2em; 
  }
  to {
	margin-left: 0;
/*     margin-top: 7em; */
/*     width: 100%; */
/*     font-size: 1em; */
  }
}

@keyframes lightOn {
  from {
    margin-left: 0;
	background-color: white;
  }
  to {
	margin-left: 0;
  }
}

@keyframes lightOff {
  from {
    margin-left: 0;
	background-color: navy;
  }
  to {
	margin-left: 0;
  }
}



@keyframes trickleMoveFromLeft {
  from {
    margin-left: -3em;
    width: 300%; 
  }
		
  50% {
    width: 150%;
  }
  to {
    margin-left: 6em;
    width: 50%;
  }
}


@keyframes moveBorderBottom {
  from {
    margin-left:0;
/*     opacity: 0;  */
    top: -0.25em;
    top: calc(-0.25em);
    background-color: var(--borderHighlight);
  }
		
  50% {
    opacity: 0.5;
  }
  to {
    margin-left: 100%;
    top: -1em;
    top: calc(-1em);
/*     opacity: 1; */
  }
}


@keyframes moveBorderTop {
  from {
    margin-left:100%;
/*     opacity: 0;  */
    top: -1.5em;
    background-color: var(--borderHighlight);
  }
		
  50% {
    opacity: 0.5;
  }
  to {
    margin-left: 0;
/*     opacity: 1; */
  }
}