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


body {
	background: linear-gradient(red,transparent,transparent,transparent,transparent,blue),url(logo2.png),url(cn.jpg)no-repeat;
width: 100vw;
height: 100vh; 
background-repeat: no-repeat;
	background-size: cover;
	font-family: 'Barlow',sans-serif;
	overflow:hidden;
}

 @-webkit-keyframes vanishOut {
	 0% {
		 opacity: 1;
		 transform-origin: 50% 50%;
		 transform: scale(1, 1);
		 filter: blur(0px);
	}
	 100% {
		 opacity: 0;
		 transform-origin: 50% 50%;
		 transform: scale(2, 2);
		 filter: blur(20px);
	}
}
 @keyframes vanishOut {
	 0% {
		 opacity: 1;
		 transform-origin: 50% 50%;
		 transform: scale(1, 1);
		 
	}
	 100% {
		 opacity: 0.95;
		 transform-origin: 50% 50%;
		 transform: scale(2, 2);
		
	}
}
 .sp-container {
	position: fixed;
	
	
	left: 10%;
	top:50%;
	width: 500px;
	height: 500px;
	z-index: 0;
	
}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(cn.png);
	left: 0px;
	top: 0px;
	z-index: 1000;
	perspective:1000;
}
.sp-container h2 {
	position: absolute;
	top: 0;
	
	opacity:0;
	height: 500px;
	margin-top: -50px;
	font-size: 90px;
	width: 600px;
	text-align: center;
	color: transparent;
	
	animation: spaceInLeft 6s  linear forwards;
	
}
.sp-container h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;

}
 
.sp-content2 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(cn.png);
	left: 0px;
	top: 0px;
	z-index: 1000;
	perspective:1000;
}
.sp-container2 h2 {
	position: absolute;
	top: 0;
	
	opacity:0;
	height: 500px;
	margin-top: -50px;
	font-size: 90px;
	width: 600px;
	text-align: center;
	color: transparent;
	
	animation: tinLeftOut 6s  linear forwards;
	
}
.sp-container2 h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;

}
.sp-container2 {
	position: fixed;
	
	
	left: 10%;
	top:35%;
	width: 500px;
	height: 500px;
	z-index: 0;
	
}
 .sp-container02 {
	position: fixed;
	
	
	left: 10%;
	top:50%;
	width: 500px;
	height: 500px;
	z-index: 0;
	
}
.sp-content02 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(cn.png);
	left: 0px;
	top: 0px;
	z-index: 1000;
	perspective:1000;
}
.sp-container02 h2 {
	position: absolute;
	top: 0;
	
	opacity:0;
	height: 500px;
	margin-top: -50px;
	font-size: 90px;
	width: 600px;
	text-align: center;
	color: transparent;
	
	animation: spaceInDown 6s  linear forwards;
	
}
.sp-container02 h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;

}

 @keyframes spaceInLeft {
	 0% {
		 opacity: 1;
		 -webkit-transform-origin: 0% 50%;
		 transform-origin: 0% 50%;
		 -webkit-transform: scale(0.2) translate(-200%, 0%);
		 transform: scale(0.2) translate(-200%, 0%);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform-origin: 0% 50%;
		 transform-origin: 0% 50%;
		 -webkit-transform: scale(1) translate(0%, 0%);
		 transform: scale(1) translate(200%, 0%);
	}
}
  @keyframes tinLeftOut {
	 0%, 20%, 40%, 50% {
		 opacity: 1;
		 -webkit-transform: scale(1, 1) translateX(0);
		 transform: scale(1, 1) translateX(100%);
	}
	 10%, 30% {
		 opacity: 1;
		 -webkit-transform: scale(1.1, 1.1) translateX(0);
		 transform: scale(1.1, 1.1) translateX(100%);
	}
	 100% {
		 opacity: 0;
		 -webkit-transform: scale(1, 1) translateX(-900%);
		 transform: scale(1, 1) translateX(-900%);
	}
}
  @keyframes spaceInDown {
	 0% {
		 opacity: 1;
		 -webkit-transform-origin: 50% 100%;
		 transform-origin: 50% 100%;
		 -webkit-transform: scale(0.2) translate(0%, 200%);
		 transform: scale(0.2) translate(0%, 800%);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform-origin: 50% 100%;
		 transform-origin: 50% 100%;
		 -webkit-transform: scale(1) translate(0%, 0%);
		 transform: scale(1) translate(0%, -800%);
	}
}