@charset "UTF-8";



	/***********************************************/
	/*************** Text Animations ***************/
	/***********************************************/

	.colorFade {
		animation-name: colorFade;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
		animation-delay: 1s;
	}
	@keyframes colorFade {
		0% {color: #444;}
		50% {color: #777;}
		100% {color: #444;}
	}


	.rainbow {
		animation-name: rainbow;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease;
		animation-delay: 1s;
	}
	@keyframes rainbow {
		0% {color: #444;}
		20% {color: red;}
		40% {color: green;}
		60% {color: blue;}
		80% {color: yellow;}
		100% {color: #444;}
	}


	.rotate {
		animation-name: rotate;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease;
		animation-delay: 1s;
	}
	@keyframes rotate {
		0% {transform: rotateY(0deg);}
		50% {transform: rotateY(180deg);}
		100% {transform: rotateY(360deg);}
	}
	

	.breathe {
		animation-name: breathe;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
		animation-delay: 500ms;
	}
	@keyframes breathe {
		0% {transform: scale(1);}
		50% {transform: scale(1.5)}
		100% {transform: scale(1);}
	}


	.stretch {
		animation-name: stretch;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease;
		animation-delay: 500ms;
	}
	@keyframes stretch {
		0% {transform: scale(1);}
		50% {transform: scaleY(0.75) scaleX(1.5);}
		100% {transform: scale(1);}
	}


	.spin {
		animation-name: spin;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(1, 3, 5, .5);
		animation-delay: 1s;
	}
	@keyframes spin {
		0% {transform: rotateZ(0deg);}
		100% {transform: rotateZ(360deg);}
	}


	.disappear {
		animation-name: disappear;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
		animation-delay: 1s;
	}
	@keyframes disappear {
		0% {opacity: 1;}
		50% {opacity: .2;}
		100% {opacity: 1;}
	}


	.rounded-top {
		animation-name: rounded-top;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		animation-delay: 1s;
	}
	@keyframes rounded-top {
		0% {border-radius: 0% 0% 0% 0%;}
		100% {border-radius: 100% 100% 0px 0px;}
	}


	.rounded-bottom {
		animation-name: rounded-bottom;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		animation-delay: 1s;
	}
	@keyframes rounded-bottom {
		0% {border-radius: 0% 0% 0% 0%;}
		100% {border-radius: 0% 0% 100% 100%;}
	}


	.skew-snap {
		animation-name: skew-snap;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.1, 0.1, 1, 0.1);
		animation-delay: 1s;
	}
	@keyframes skew-snap {
		0% {transform: skew(0);}
		50% {transform: skew(45deg);}
		100% {transform: skew(0deg);}
	}

	
	.fade-in {
		animation-name: fade-in;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease;
		animation-delay: 1s;
	}
	@keyframes fade-in {
		0% {opacity: 0;}
		100% {opacity:1;}
	}

	.fade-out {
		animation-name: fade-out;
		animation-duration: 2.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease;
		animation-delay: 1s;
	}
	@keyframes fade-out {
		0% {opacity: 1;}
		100% {opacity: 0;}
	}


	.hue-rotate {
		animation-name: hue-rotate;
		animation-duration: 10s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-timing-function: ease;
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes hue-rotate {
		0% {filter: hue-rotate(0deg);}
		100% {filter: hue-rotate(360deg);}
	}


	.drop-in {
		animation-name: drop-in;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes drop-in {
		0% {transform: translateY(-6rem); opacity: 0;}
		100% {transform: translateY(0px); opacity: 1}
	}


	.drop-in-angled {
		animation-name: drop-in-angled;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes drop-in-angled {
		0% {transform: translateY(-6rem) translateX(-8rem); opacity: 0;}
		100% {transform: translateY(0px) translateY(0px); opacity: 1}
	}


	.drop-in-angled-spin {
		animation-name: drop-in-angled-spin;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes drop-in-angled-spin {
		0% {transform: translateY(-16rem) translateX(-64rem) rotateY(0deg); scale: 0.3; opacity: 0;}
		100% {transform: translateY(0px) translateY(0px) rotateY(360deg); scale: 1.0; opacity: 1}
	}


	.top-spin-down {
		animation-name: top-spin-down;
		animation-duration: 3s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes top-spin-down {
		0% {transform: translateY(-6rem) rotateY(0deg); opacity: 0;}
		100% {transform: translateY(0px) rotateY(360deg); opacity: 1}
	}


	.fly-in {
		animation-name: fly-in;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes fly-in {
		0% {transform: translateY(-8rem); scale: 0.1; opacity: 0;}
		100% {transform: translateY(0px); scale: 1.0; opacity: 1}
	}


	.fly-in-left {
		animation-name: fly-in-left;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes fly-in-left {
		0% {transform: translateY(-16rem) translateX(-64rem) rotateY(0deg); scale: 0.3; opacity: 0;}
		50% {transform: rotateY(360deg);}
		100% {transform: translateY(0px) translateY(0px) rotateY(360deg); scale: 1.0; opacity: 1}
	}


	.top-roll-down {
		animation-name: top-roll-down;
		animation-duration: 2s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes top-roll-down {
		0% {transform: translateY(-6rem) rotateX(0deg); opacity: 0;}
		100% {transform: translateY(0px) rotateX(360deg); opacity: 1}
	}


	.slide-in-left {
		animation-name: slide-in-left;
		animation-duration: 2s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes slide-in-left {
		0% {transform: translateX(-64rem); opacity: .5;}
		50% {transform: translateX(2rem); opacity: 1;}
		100% {transform: translateX(0px); opacity: 1}
	}


	.border-color-rotate {
		animation-name: border-color-rotate;
		animation-duration: 2s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes border-color-rotate {
		0% {border-top-color: #222; border-right-color: #333; border-bottom-color: #444; border-left-color: #555;}
		25% {border-top-color: #555; border-right-color: #222; border-bottom-color: #333; border-left-color: #444;}
		50% {border-top-color: #444; border-right-color: #555; border-bottom-color: #222; border-left-color: #333;}
		75% {border-top-color: #333; border-right-color: #444; border-bottom-color: #555; border-left-color: #222;}
		100% {border-top-color: #222; border-right-color: #333; border-bottom-color: #444; border-left-color: #555;}
	}


	.border-pulsate {
		animation-name: border-pulsate;
		animation-duration: 3s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes border-pulsate {
		0% {border-color: #222;}
		25% {border-color: #333;}
		50% {border-color: #444;}
		75% {border-color: #333;}
		100% {border-color: #222;}
	}


	.flying-letters {
		animation-name: flying-letters;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(1, 0.5, .2, 1);
		animation-delay: 0s;
		animation-direction: ;
		word-break: none;
		overflow: hidden;
	}
	@keyframes flying-letters {
		0% {letter-spacing: 40px;}
		50% {letter-spacing: -32px;}
		100% {letter-spacing: 0rem;}
	}


	.jump {
		animation-name: jump;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(1, 0.5, .2, 1);
		animation-delay: 0s;
		animation-direction: ;
		word-break: none;
		overflow: hidden;
	}
	@keyframes jump {
		0% {letter-spacing: 40px; transform: translateY(-32px);}
		50% {letter-spacing: -32px; transform: translateY(-64px);}
		100% {letter-spacing: 0rem; transform: translateY(0px);}
	}


	.jump-and-bounce {
		animation-name: jump-and-bounce;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(1, 0.5, .2, 1);
		animation-delay: 0s;
		animation-direction: ;
		word-break: none;
		overflow: hidden;
	}
	@keyframes jump-and-bounce {
		0% {letter-spacing: 40px; transform: translateY(-32px);}
		50% {letter-spacing: -32px; transform: translateY(-64px);}
		70% {letter-spacing: -32px; transform: translateY(32px);}
		100% {letter-spacing: 0rem; transform: translateY(0px);}
	}


	.zig-zag {
		animation-name: zig-zag;
		animation-duration: 1.5s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function:  cubic-bezier(1, 0.1);
		animation-delay: 0s;
		animation-direction: ;
	}
	@keyframes zig-zag {
		0% {transform: translateY(-32rem) translateX(0rem) rotateY(0deg); scale: 0; opacity: 0; letter-spacing: 0px;}
		30% {transform: translateY(0rem) translateX(-32rem) rotateY(-90deg); scale: 0.5; opacity: 1; letter-spacing: 0px;}
		60% {transform: translateY(0rem) translateX(32rem) rotateY(-180deg); scale: 0.5; opacity: 1; letter-spacing: 32px;}
		100% {transform: translateY(0px) translateY(0px) rotateY(360deg); scale: 1.0; opacity: 1; letter-spacing: 0px;}
	}




	/***********************************************/
	/***************** Animations ******************/
	/***********************************************/

	.animated {
	  animation-duration: 2.5s;
	  animation-fill-mode: both;
	  animation-iteration-count: 1;
	}


	@keyframes bounce {
	  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	  40% {transform: translateY(-30px);}
	  60% {transform: translateY(-15px);}
	}
	.bounce {
	  animation-name: bounce;
	}

	@keyframes flash {
	  0%, 50%, 100% {opacity: 1;}
	  25%, 75% {opacity: 0;}
	}
	.flash {
	  animation-name: flash;
	}

	@keyframes pulse {
	  0% {transform: scale(1);}
	  50% {transform: scale(1.1);}
	  100% {transform: scale(1);}
	}
	.pulse {
	  animation-name: pulse;
	  animation-duration: 1s;
	}

	@keyframes rubberBand {
	  0% {transform: scale(1);}
	  30% {transform: scaleX(1.25) scaleY(0.75);}
	  40% {transform: scaleX(0.75) scaleY(1.25);}
	  60% {transform: scaleX(1.15) scaleY(0.85);}
	  100% {transform: scale(1);}
	}
	.rubberBand {
	  animation-name: rubberBand;
	}

	@keyframes shake {
	  0%, 100% {transform: translateX(0);}
	  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	  20%, 40%, 60%, 80% {transform: translateX(10px);}
	}
	.shake {
	  animation-name: shake;
	}

	@keyframes swing {
	  20% {transform: rotate(15deg);}
	  40% {transform: rotate(-10deg);}
	  60% {transform: rotate(5deg);}
	  80% {transform: rotate(-5deg);}
	  100% {transform: rotate(0deg);}
	}
	.swing {
	  transform-origin: top center;
	  animation-name: swing;
	}

	@keyframes wobble {
	  0% {transform: translateX(0%);}
	  15% {transform: translateX(-25%) rotate(-5deg);}
	  30% {transform: translateX(20%) rotate(3deg);}
	  45% {transform: translateX(-15%) rotate(-3deg);}
	  60% {transform: translateX(10%) rotate(2deg);}
	  75% {transform: translateX(-5%) rotate(-1deg);}
	  100% {transform: translateX(0%);}
	}
	.wobble {
	  animation-name: wobble;
	}

	@keyframes flip {
	  0% {transform: perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function: ease-out;}
	  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function: ease-out;}
	  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
	  80% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
	  100% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function: ease-in;}
	}
	.animated.flip {
	  backface-visibility: visible;
	  animation-name: flip;
	}

	@keyframes lightSpeedIn {
	  0% {transform: translateX(100%) skewX(-30deg);opacity: 0;}
	  60% {transform: translateX(-20%) skewX(30deg);opacity: 1;}
	  80% {transform: translateX(0%) skewX(-15deg);opacity: 1;}
	  100% {transform: translateX(0%) skewX(0deg);opacity: 1;}
	}
	.lightSpeedIn {
	  animation-name: lightSpeedIn;
	  animation-timing-function: ease-out;
	}

	@keyframes rollIn {
	  0% {opacity: 0;transform: translateX(-100%) rotate(-120deg);}
	  100% {opacity: 1;transform: translateX(0px) rotate(0deg);}
	}
	.rollIn {
	  animation-name: rollIn;
	}

	@keyframes rotateIn {
	  0% {transform-origin: center center;transform: rotate(-200deg);opacity: 0;}
	  100% {transform-origin: center center;transform: rotate(0);opacity: 1;}
	}
	.rotateIn {
	  animation-name: rotateIn;
	}

	@keyframes hinge {
	  0% {transform: rotate(0);transform-origin: top left;animation-timing-function: ease-in-out;}
	  20%, 60% {transform: rotate(80deg);transform-origin: top left;animation-timing-function: ease-in-out;}
	  40% {transform: rotate(60deg);transform-origin: top left;animation-timing-function: ease-in-out;}
	  80% {transform: rotate(60deg) translateY(0);transform-origin: top left;animation-timing-function: ease-in-out;}
	  100% {transform: translateY(700px);}
	}
	.hinge {
	  margin: 20px;
	  animation-name: hinge;
	}


	.shine-on-black {
		background: linear-gradient(90deg, #000, #fff, #000);
		background-repeat: no-repeat;
		background-size: 80%;
		animation: animate 3s linear infinite;
		-webkit-background-clip: text;
		-webkit-text-fill-color: rgba(255, 255, 255, 0);
	}

	@keyframes animate {
	  0% {
	    background-position: -500%;
	  }
	  100% {
	    background-position: 500%;
	  }
	}


	/***********************************************/
  	/*************** Text with Ants ****************/
	/***********************************************/

	svg {
	    display: block;
	    font: 10.5em 'Arial';
	    width: 100%;
	    height: 300px;
	    margin: 0 auto;
	    box-sizing: border-box;
	}

	.text-copy {
	    fill: none;
	    stroke: white;
	    stroke-dasharray: 6% 29%;
	    stroke-width: 5px;
	    stroke-dashoffset: 0%;
	    animation: stroke-offset 5.5s infinite linear;
	}

	.text-copy:nth-child(1){
	  stroke: #334866;
	  animation-delay: -1;
	}

	.text-copy:nth-child(2){
	  stroke: #31425c;
	  animation-delay: -2s;
	}

	.text-copy:nth-child(3){
	  stroke: #2f3d52;
	  animation-delay: -3s;
	}

	.text-copy:nth-child(4){
	  stroke: #2d3748;
	  animation-delay: -4s;
	}

	.text-copy:nth-child(5){
	  stroke: #2b323e;
	  animation-delay: -5s;
	}

	@keyframes stroke-offset{
	  100% {stroke-dashoffset: -35%;}
	}


	/***********************************************/
	/***************** BACKGROUNDS *****************/
	/***********************************************/

	.gradient-background-1 {
		width: 100%;
	  	height:100%;
	    background: linear-gradient(45deg, #1b3a4e, #39496a, #625580, #90608c, #bc6b8c, #e07c84, #f79576, #ffb56b);
	    background-size: 400% 400%;
	    animation: gradient 15s ease infinite;
	}

	.gradient-background-2 {
		width: 100%;
	  	height:100%;
	    background: linear-gradient(-45deg, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
	    background-size: 400% 400%;
	    animation: gradient 15s ease infinite;
	}

	.gradient-background-3 {
		width: 100%;
	  	height:100%;
	    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	    background-size: 400% 400%;
	    animation: gradient 15s ease infinite;
	}

	@keyframes gradient {
	    0% {
	        background-position: 0% 50%;
	    }
	    50% {
	        background-position: 100% 50%;
	    }
	    100% {
	        background-position: 0% 50%;
	    }
	}