.words {
	position: relative;
	animation: move-words 4.5s linear;
	margin: 0;
	animation-fill-mode: both;
}


@keyframes move-words {
	0% {
	  left: 80%;
	  opacity: 0;
	}
	20% {
	  left: 0%;
	  opacity: 1;
	}
	95% {
		left: 0%;
		opacity: 1;
	  }
	100% {
		left: 0%;
		opacity: 0;
	  }

  }

/* highest z index is the chosen item. 
// everything goes left and stacks
// lower items fade out a bit.
*/
.people_places_left {
	position: relative;
	animation: move-choice-left 1s linear;
	animation-fill-mode: forwards;
}

@keyframes move-choice-left {
	0% {
	  left: 0%;
	  opacity: 1;
	}
	20% {
	  left: 0%;
	  opacity: .5;
	}
	100% {
		left: -100%;
		opacity: 0;
	  }
  }

  .people_places_right {
	position: relative;
	animation: move-choice-right 3s linear;
	animation-fill-mode: forwards;
	transform: translateX(66.66%)
}

@keyframes move-choice-right {
	0% {
	  left: 0%;
	  opacity: 1;
	}
	20% {
	  left: 0%;
	  opacity: .75;
	}
	100% {
		left: 100%;
		opacity: 0;
	  }
  }

  .squeeze_this {
	position: relative;
	animation: squeeze_box 2s linear;
	animation-fill-mode: forwards;
}

  @keyframes squeeze_box {
	0% {
	  width: 100%;
	}
	100% {
width: 33.33%
	  }
  }

/* loading animation */

.loader {
	border: 4px solid var(--light_grey); /* Light grey */
	border-top: 4px solid var(--our_blue); /* Blue */
	border-bottom: 4px solid var(--our_blue); /* Blue */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

  .fade_tag
  {
      opacity: 1;
      animation: animate_fade 500ms linear;
    animation-fill-mode: forwards;
  }
  .delete_tag
  {
    opacity: 0;
    transform-origin: left top;
      animation: animate_shrink 500ms ease;
      animation-fill-mode: forwards;
      overflow: hidden;
  }
    
@keyframes animate_fade {
    0% {opacity: 1;}
    100% { opacity: 0;}
}

@keyframes animate_shrink{
    0% {max-height: 500px;
        opacity: 0;}
    100% {max-height: 0;
    padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;}
}

@keyframes animate_shrink2{
    0% {transform: scale(10 1);}
    100% {transform: scale(1, 0);}
}

.flash {
	animation: animate_flash .5s linear;
  }

@keyframes animate_flash{
    0% { opacity: 1;}
    50% {opacity: .5;}
    100% { opacity: 1;}
}