@font-face {
	font-family: 'Array';
	src: url('Array-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #FFF;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line {
  width: 100vw;
}
.left, .right {
  width: 50vw;
  overflow: hidden;
  display: inline-block;
}
.left {
  color: #000;
  transform: skew(0deg, -15deg);
}
.right {
  color: #000;
  transform: skew(0deg, 15deg);
}
.left .content {
  width: 100vw;
  text-align: center;
}
.right .content {
  width: 100vw;
  text-align: center;
  transform: translate(-50vw);
}
span {
  display: inline-block;
  font-family: 'Array';
  font-size: 10vw;
  line-height: 0.8;
  transition: ease-out .6s;
}
.animate {
	-webkit-animation: animate .6s cubic-bezier(.2, .6, .2, 1);
	-moz-animation: animate .6s cubic-bezier(.2, .6, .2, 1);
	animation: animate .6s cubic-bezier(.2, .6, .2, 1);
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
}
.delay04 {-webkit-animation-delay: .4s;animation-delay: .4s;}
.delay08 { -webkit-animation-delay: .8s; animation-delay: .8s; }
.delay12 { -webkit-animation-delay: 1.2s; animation-delay:1.2s; }
@-webkit-keyframes animate {
	0% {opacity: 0;-webkit-transform: translateY(100%);}
	100% {opacity: 1;-webkit-transform: translateY(0%);}	
}
@keyframes animate {
	0% {opacity: 0;transform: translateY(100%);}
	100% {opacity: 1;transform: translateY(0%);}	
}