@charset "utf-8";

.up, .down, .transform1, .transform2 {
	position: relative;
	opacity: 0;	
}

.upstyle, .downstyle, .transform1style, .transform2style {
	opacity: 1;
	transition: 1s 0.5s;
}

.up {
	bottom: -20px;
}

.upstyle {
	bottom: 0px;
}

.down {
	top: -20px;
}

.downstyle {
	top: 0px;
}

.transform1 {
	transform: scaleX(0);
}

.transform1style {
	transform: scaleX(1);
}

.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}

.blur {
	opacity: 0;	
	filter: blur(30px);
	transform: scale(1.1);
}

.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}

@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.1);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

.transform3 {
	transform: scale(0);
}

.transform3style {
	animation: transform3 0.3s ease-out 0.5s both;
}

.video-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.video-fade.show {
  opacity: 1;
}