/* used for background */
@keyframes diag {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 10% 10%;
    }
}

/* used for title */
@keyframes bounce {
    0%,
    100% {
     transform:translateY(-25%);
     animation-timing-function:cubic-bezier(.8,0,1,1)
    }
    50% {
     transform:none;
     animation-timing-function:cubic-bezier(0,0,.2,1)
    }
}

/* used in footer videos */
@keyframes flip {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    50%  {
        transform: rotateY(3000deg) rotateX(3000deg);
    }
}

/* used in ie button */
@keyframes strobe {
    0%, 100% {
        background-color: rgba(255,0,0,.4);
    }
    20% {
        background-color: rgba(255,255,0,.4);
    }
    40% {
        background-color: rgba(0,255,0,.4);
    }
    60% {
        background-color: rgba(0,255,255,.4);
    }
    80% {
        background-color: rgba(0,0,255,.4);
    }
}

/* LITHIUM ION BATTERIES!!! */
@keyframes cube {
    from {
        transform: translateX(-50%) rotateY(var(--rot)) translateZ(calc(var(--width)/2));
    }
	to {
		transform: translateX(-50%) rotateY(calc(var(--rot) + 90deg)) translateZ(calc(var(--width)/2));
	}
}

/* used in motd */
@keyframes flash {
    50% {
        opacity: 0;
    }
}

@keyframes colorflash {
    0%, 100%, 49% {
        border: 5px solid orange;
        background-color: black;
        color: orange;
    }
    50%, 99% {
        border: 5px solid black;
        background-color: orange;
        color: black;
    }
}

@keyframes border {
    0%,
    100% {
        border: 2px solid rgb(255, 0, 0);
    }
    33% {
        border: 2px solid rgb(0, 255, 0);
    }
    66% {
        border: 2px solid rgb(0, 0, 255);
    }
}

@keyframes across {
    0%,
    100% {
      transform: translateX(0%);
    }
    50% {
      transform: translateX(calc(80vw - 100%));
    }
}

@keyframes scale {
    from {
        transform: scale3d(100%, 100%, 100%);
    }
    to {
        transform: scale3d(120%, 120%, 120%);
    }
}