.containerr {
	 display: flex;
	 justify-content: center;
	 align-content: center;
	 flex-direction: column;
	 height: 100vh;
	 width: 100vw;
	 background: #000;
}
 .tt {
	 text-align: center;
	 text-transform: uppercase;
	 font-family: Helvetica, Arial, sans-serif;
	 font-size: 50px;
	 color: #fff;
	 margin: 0 auto;
}
 @media screen and (max-width: 800px) {
	 .tt {
		 font-size: 30px;
	}
}
 .animation {
	 position: relative;
	 width: 100%;
}
 .animation div {
	 overflow: hidden;
	 width: 100%;
	 height: 100%;
	 transform: skewX(-20deg);
}
 .animation div::before {
	 content: "";
	 position: absolute;
	 width: 100%;
	 height: 4px;
	 background: #fff;
}
 .animation span {
	 padding: 0 10px;
}
 .animation-left::before {
	 left: 0;
	 animation: widthLineLeft 1.2s 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.1) forwards;
}
 .animation-left span {
	 display: block;
	 animation: slideLeft 1.2s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.1) forwards;
	 transform: translateX(200px) skewX(20deg);
}
 .animation-right {
	 position: absolute;
	 right: 0;
	 top: 0;
}
 .animation-right:before {
	 bottom: 0;
	 right: 0;
	 animation: widthLineRight 1.2s 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.1) forwards;
}
 .animation-right span {
	 position: absolute;
	 width: 100%;
	 left: -100%;
	 transform: translateX(-200px) skewX(20deg);
	 animation: slideRight 1.2s 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.1) forwards;
}
 @keyframes slideLeft {
	 from {
		 transform: translateX(200px) skewX(20deg);
	}
	 to {
		 transform: translateX(0%) skewX(20deg);
	}
}
 @keyframes slideRight {
	 from {
		 transform: translateX(-200px) skewX(20deg);
	}
	 to {
		 transform: translateX(0%) skewX(20deg);
	}
}
 @keyframes widthLineLeft {
	 0% {
		 width: 0%;
		 left: 0%;
	}
	 50% {
		 width: 100%;
		 left: 0%;
	}
	 100% {
		 width: 0%;
		 left: 100%;
	}
}
 @keyframes widthLineRight {
	 0% {
		 width: 0%;
		 right: 0%;
	}
	 50% {
		 width: 100%;
		 right: 0%;
	}
	 100% {
		 width: 0%;
		 right: 100%;
	}
}