/***** text *****/

@font-face {font-family: "Erika Ormig";
    src: url("https://crossandborder.com/sp/fonts/Erika_Ormig.ttf") format("truetype"),
    url("https://crossandborder.com/sp/fonts/Erika_Ormig.woff2") format("woff2"),
    url("https://crossandborder.com/sp/fonts/Erika_Ormig.woff") format("woff"),
    url("https://crossandborder.com/sp/fonts/Erika_Ormig.oft") format("opentype"),
    url("https://crossandborder.com/sp/fonts/Erika_Ormig.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}


.text-container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: white;
  /*font-family: 'Cutive Mono', monospace;*/
  letter-spacing: 4px;
  font-size: 34px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

span {
  display: inline-block;
}

.reg-text {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  transition: opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
  transition: transform 3.3333333333s ease-out, opacity 5s ease;
  transition: transform 3.3333333333s ease-out, opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
}
.reg-text.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.letter {
  transition: opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.letter:nth-of-type(2) {
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(3) {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px);
  transition-duration: 3.8461538462s;
}
.letter:nth-of-type(4) {
  -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
  transition-duration: 3.3333333333s;
}
.letter:nth-of-type(5) {
  -webkit-transform: translateY(-150px);
          transform: translateY(-150px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(6) {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(-180px);
          transform: translateY(-180px);
  transition-duration: 2.1739130435s;
}
.letter.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-filter: blur(0);
          filter: blur(0);
}.text-container {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: white;
  /*font-family: 'Cutive Mono', monospace;*/
  letter-spacing: 3px;
  font-size: 30px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

span {
  display: inline-block;
}

.reg-text {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  transition: opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
  transition: transform 3.3333333333s ease-out, opacity 5s ease;
  transition: transform 3.3333333333s ease-out, opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
}
.reg-text.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.letter {
  transition: opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.letter:nth-of-type(2) {
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(3) {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px);
  transition-duration: 3.8461538462s;
}
.letter:nth-of-type(4) {
  -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
  transition-duration: 3.3333333333s;
}
.letter:nth-of-type(5) {
  -webkit-transform: translateY(-150px);
          transform: translateY(-150px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(6) {
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(-180px);
          transform: translateY(-180px);
  transition-duration: 2.1739130435s;
}
.letter.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-filter: blur(0);
          filter: blur(0);
}

/**********/

@import url('https://fonts.googleapis.com/css?family=Barlow');




.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
.sp-container h2 {
	position: absolute;
	/*top: 55%;*/
	bottom: 5%;
	line-height: 100px;
	height: 90px;
	margin-top: -50px;
	font-size: 85%;
	font-weight:normal;
	width: 100%;
	text-align: center;
	color: transparent;
	-webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards;
}

.sp-container h2.frame-5 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	color: transparent;
	text-shadow: 0px 0px 0px #fff;
	z-index:999;
}
.sp-container h2.frame-5 span {
	-webkit-animation: blurFadeIn 3s ease-in 6s backwards;
	-moz-animation: blurFadeIn 3s ease-in 6s backwards;
	-ms-animation: blurFadeIn 3s ease-in 6s backwards;
	animation: blurFadeIn 3s ease-in 6s backwards;
	color: transparent;
	text-shadow: 0px 0px 0px #fff;
	text-decoration: underline;
	letter-spacing: 1px;
}
.sp-container h2.frame-5 span:nth-child(2) {
	-webkit-animation-delay: 7s;
	-moz-animation-delay: 7s;
	-ms-animation-delay: 7s;
	animation-delay: 7s;
}

/*
.sp-container h2.frame-5 span:nth-child(3) {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	animation-delay: 8s;
}
*/


/**/

@-webkit-keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-webkit-transform: scale(0);
	}
}
@-webkit-keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	50% {
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		-webkit-transform: scale(1.1);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50% {
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100% {
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate {
	0% {
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/

@-moz-keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-moz-transform: scale(0);
	}
}
@-moz-keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes fadeInBack {
	0% {
		opacity: 0;
		-moz-transform: scale(0);
	}
	50% {
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100% {
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate {
	0% {
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
/**/

@keyframes blurFadeInOut {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%, 75% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}
@keyframes blurFadeIn {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50% {
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes fadeInBack {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 0.4;
		transform: scale(2);
	}
	100% {
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate {
	0% {
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/*************/

/* General Demo Style 
@import url(https://fonts.googleapis.com/css?family=Dosis:200,600);

*/




.os-phrases h2 {
  /*font-family: 'Dosis', 'Lato', sans-serif;*/
  font-size: 30px;
  font-weight: 200;
  width: 100%;
  overflow: hidden;
  /*text-transform: uppercase;*/
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 5px;
  text-align: center;
  opacity: 0;
}

.os-phrases h2,
.os-phrases h2 > span {
  height: 100%;
  /* Centering with flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.os-phrases h2 > span {
  margin: 0 0 5% 10px;
}

.os-phrases h2 > span > span {
  display: inline-block;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  perspective: 400px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.os-phrases h2 > span > span > span {
  display: inline-block;
  color: rgba(0, 0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
/*

  -webkit-animation: OpeningSequence 6s linear forwards;
  -moz-animation: OpeningSequence 6s linear forwards;
  animation: OpeningSequence 6s linear forwards;
*/
}


.os-phrases h2:nth-child(2) > span > span > span {
  font-size: 17px;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
/*
.os-phrases h2:nth-child(3) > span > span > span {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  animation-delay: 15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
  /*font-size: 80px;*/
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  animation-delay: 21s;
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
  animation-duration: 8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  animation-delay: 30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
  -webkit-animation-delay: 34s;
  -moz-animation-delay: 34s;
  animation-delay: 34s;
}
*/


@-webkit-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 70px;
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 10px;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -webkit-transform: translateZ(130px);
    pointer-events: none;
  }
}
@-moz-keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 70px;
    opacity: 0.2;
    -moz-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 10px;
    opacity: 0.8;
    -moz-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -moz-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    -moz-transform: translateZ(130px);
    pointer-events: none;
  }
}
@keyframes OpeningSequence {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 70px;
    opacity: 0.2;
    transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 10px;
    opacity: 0.8;
    transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 0;
    transform: translateZ(130px);
    pointer-events: none;
  }
}
.os-phrases h2:nth-child(1) > span > span > span {
  font-size: 15px;
  -webkit-animation: FadeIn 5s linear .4s forwards;
  -moz-animation: FadeIn 5s linear .4s forwards;
  animation: FadeIn 5s linear .4s forwards;
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 50px #fff;
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 1px #fff;
  }
}
/* Bold words 
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
  font-weight: 600;
}
*/

/*******************************/


.cascading-text {
  position: relative;
letter-spacing: -.8px;

/**
   * [data-animated] is merely used as a trigger
   * attribute for replay purposes. If you were going
   * to use cascading text effects on a site, just let
   * them play once on entry
  */
}


.cascading-text[data-animated] .cascading-text__replay {
  display: none;
}
.cascading-text--enter[data-animated] .cascading-text__letter {
  opacity: 0;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--fade[data-animated] .cascading-text__letter {
  opacity: 0;
  -webkit-animation-name: fade;
          animation-name: fade;
}
.cascading-text--flip[data-animated] .cascading-text__letter {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-animation-name: flip;
          animation-name: flip;
}
.cascading-text--scale[data-animated] .cascading-text__letter {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation-name: scale;
          animation-name: scale;
}
.cascading-text--turn[data-animated] .cascading-text__letter {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-animation-name: turn;
          animation-name: turn;
}
.cascading-text--fold[data-animated] .cascading-text__letter {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  -webkit-animation-name: fold;
          animation-name: fold;
}
.cascading-text--bulge[data-animated] .cascading-text__letter {
  -webkit-animation-name: bulge;
          animation-name: bulge;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(1) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(2) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(3) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(4) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(5) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(6) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(7) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(8) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(9) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(10) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(11) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(12) {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.cascading-text--swap[data-animated] .cascading-text__letter:nth-of-type(13) {
  -webkit-transform: translateX(-15px);
          transform: translateX(-15px);
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
.cascading-text--slide[data-animated] .cascading-text__letter {
  -webkit-animation-name: slide;
          animation-name: slide;
  opacity: 0;
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(1) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(2) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(4) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(5) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(6) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(8) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(9) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(10) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(11) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(12) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.cascading-text--slide[data-animated] .cascading-text__letter:nth-of-type(13) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.cascading-text--far[data-animated] {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.cascading-text--far[data-animated] .cascading-text__letter {
  opacity: 0;
  -webkit-transform: translateX(-25px) translateY(-20px) translateZ(-800px);
          transform: translateX(-25px) translateY(-20px) translateZ(-800px);
  -webkit-animation-name: far;
          animation-name: far;
}
.cascading-text--teeth[data-animated] .cascading-text__letter {
  opacity: 0;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(1) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(2) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(3) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(4) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(5) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(6) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(7) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(8) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(9) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(10) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(11) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(12) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}
.cascading-text--teeth[data-animated] .cascading-text__letter:nth-of-type(13) {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-name: enter;
          animation-name: enter;
}
.cascading-text--random[data-animated] .cascading-text__letter {
  -webkit-animation-name: random;
          animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(1) {
  -webkit-transform: translateX(-205%) translateY(-231%);
          transform: translateX(-205%) translateY(-231%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(2) {
  -webkit-transform: translateX(174%) translateY(198%);
          transform: translateX(174%) translateY(198%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(3) {
  -webkit-transform: translateX(250%) translateY(172%);
          transform: translateX(250%) translateY(172%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(4) {
  -webkit-transform: translateX(38%) translateY(96%);
          transform: translateX(38%) translateY(96%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(5) {
  -webkit-transform: translateX(-123%) translateY(-103%);
          transform: translateX(-123%) translateY(-103%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(6) {
  -webkit-transform: translateX(-233%) translateY(88%);
          transform: translateX(-233%) translateY(88%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(7) {
  -webkit-transform: translateX(206%) translateY(-111%);
          transform: translateX(206%) translateY(-111%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(8) {
  -webkit-transform: translateX(-131%) translateY(78%);
          transform: translateX(-131%) translateY(78%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(9) {
  -webkit-transform: translateX(-171%) translateY(202%);
          transform: translateX(-171%) translateY(202%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(10) {
  -webkit-transform: translateX(176%) translateY(-61%);
          transform: translateX(176%) translateY(-61%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(11) {
  -webkit-transform: translateX(-109%) translateY(-203%);
          transform: translateX(-109%) translateY(-203%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(12) {
  -webkit-transform: translateX(90%) translateY(230%);
          transform: translateX(90%) translateY(230%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(13) {
  -webkit-transform: translateX(-187%) translateY(56%);
          transform: translateX(-187%) translateY(56%);
}
.cascading-text__letter {
font-family: "Erika Ormig", "verdana", "Geneva", "sans-serif";
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.cascading-text__letter:nth-of-type(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.cascading-text__letter:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.cascading-text__letter:nth-of-type(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.cascading-text__letter:nth-of-type(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.cascading-text__letter:nth-of-type(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.cascading-text__letter:nth-of-type(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.cascading-text__letter:nth-of-type(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.cascading-text__letter:nth-of-type(8) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.cascading-text__letter:nth-of-type(9) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.cascading-text__letter:nth-of-type(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.cascading-text__letter:nth-of-type(11) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.cascading-text__letter:nth-of-type(12) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.cascading-text__letter:nth-of-type(13) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.cascading-text__letter:nth-of-type(14) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.cascading-text__letter:nth-of-type(15) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.cascading-text__letter:nth-of-type(16) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
/**
  * Theme
*/
* {
  box-sizing: border-box;
}

.cascading-text {
top:40%;
  text-align: center;
}
@media (min-width: 768px) {
  .cascading-text {
    width: 100%;
    display: inline-block;
    float: left;
  }
}
@media (min-width: 992px) {
  .cascading-text {
    width: 100%;
  }
}
.tx--red {
  color: #fff;
}
.tx--white {
  color: #fff;
}
@-webkit-keyframes enter {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes enter {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes enter-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes enter-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes flip {
  from {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes flip {
  from {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@-webkit-keyframes turn {
  to {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes turn {
  to {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@-webkit-keyframes fold {
  to {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
@keyframes fold {
  to {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
@-webkit-keyframes bulge {
  25% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes bulge {
  25% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@-webkit-keyframes swap-right {
  25% {
    -webkit-transform: translateX(-15px) translateY(-100%);
            transform: translateX(-15px) translateY(-100%);
  }
  75% {
    -webkit-transform: translateX(0) translateY(-100%);
            transform: translateX(0) translateY(-100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@keyframes swap-right {
  25% {
    -webkit-transform: translateX(-15px) translateY(-100%);
            transform: translateX(-15px) translateY(-100%);
  }
  75% {
    -webkit-transform: translateX(0) translateY(-100%);
            transform: translateX(0) translateY(-100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes swap-left {
  25% {
    -webkit-transform: translateX(15px) translateY(100%);
            transform: translateX(15px) translateY(100%);
  }
  75% {
    -webkit-transform: translateX(0) translateY(100%);
            transform: translateX(0) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@keyframes swap-left {
  25% {
    -webkit-transform: translateX(15px) translateY(100%);
            transform: translateX(15px) translateY(100%);
  }
  75% {
    -webkit-transform: translateX(0) translateY(100%);
            transform: translateX(0) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes far {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0) translateX(0);
            transform: translateY(0) translateZ(0) translateX(0);
  }
}
@keyframes far {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0) translateX(0);
            transform: translateY(0) translateZ(0) translateX(0);
  }
}
@-webkit-keyframes random {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@keyframes random {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
