/**
 * FR Welcome Video 1
 */

@keyframes zoomIn {
	from{
		transform: scale(1);
		transform-origin: left top;
	}
	to {
		transform: scale(1.5);
		transform-origin: left top;
	}
}

@keyframes zoomOut {
	from {
		transform: scale(1.5);
		transform-origin: left top;
	}
	to {
		transform: scale(1);
		transform-origin: left top;
	}
}

@keyframes moveTitle {
	to {
		left: 58px;
		top: 144px;
		width: 188px;
		transform-origin: left top;
	}
}

@keyframes cursorMove {
	7% {
		transform: translate(-150px, 70px);
	}
	15%, 20% {
		transform: translate(-365px, 41px);
	}
	35% {
		transform: translate(-410px, 200px);
	}
	45% {
		transform: translate(-170px, 300px);
	}
	55%, 63% {
		transform: translate(-25px, -10px);
	}
	75% {
		transform: translate(-115px, 75px);
	}
	85%, 88% {
		transform: translate(-120px, 105px);
	}
	100% {
		transform: translate(-120px, 120px);
	}
}

@keyframes clickButton {
	0% {
		opacity: 1;
		top: 78px;
		left: 133px;
	}
	10%, 89% {
		opacity: 0;
		top: 78px;
		left: 133px;
	}
	90% {
		opacity: 1;
		top: 24px;
		right: 0;
		left: auto;
	}
	100% {
		opacity: 0;
		top: 24px;
		right: 0;
		left: auto;
	}
}

@keyframes clickTitle {
	to {
		opacity: 1;
		border: 2px solid #338bff;
	}
}

@keyframes hide {
	to {
		opacity: 0;
	}
}

@keyframes show {
	to {
		opacity: 1;
	}
}

@keyframes typing {
	from {
		width: 0;
	}
}

@keyframes caret {
	50% {
		border-right-color: transparent;
	}
}

.container {
	width: 506px;
	height: 460px;
	position: relative;
	overflow: hidden;
}

.screenshot {
	height: 460px;
	width: auto;
	position: absolute;
	top: 0;
	left: 0;
}

.startscreen {
	/*z-index: 30;*/
}

.screenshot_1 {
	animation: zoomIn 1s linear forwards, hide 250 steps(1) forwards 3s;
	animation-play-state: running;
	/*animation-iteration-count: infinite;*/
}

.screenshot_2 {
	opacity: 0;
	transform: scale(1.5);
	transform-origin: left top;
	animation: show 250ms steps(1) forwards 2200ms, zoomOut 1s linear forwards 5s, hide 250ms steps(1) forwards 6750s;
	animation-play-state: running;
}

.screenshot_3 {
	opacity: 0;
	animation: show 250ms steps(1) forwards 6750ms, hide 250ms steps(1) forwards 8250ms;
	animation-play-state: running;
}

.screenshot_4 {
	opacity: 0;
	animation: show 250ms steps(1) forwards 8s;
	animation-play-state: running;
}

.screenshot_5 {
	width: 130px;
	position: absolute;
	top: 112px;
	right: 0;
	opacity: 0;
	animation: show 250ms steps(1) forwards 9750ms;
	animation-play-state: running;
}

.cursor {
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 10;
	border: 1px solid #b0b0b0;
	border-radius: 50%;
	background-color: #f5f5f5;
	opacity: 0.6;
	top: 10%;
	right: -20px;
	transition: all ease-in-out;
	animation: cursorMove 10500ms ease-in forwards 500ms, hide 250ms steps(1) forwards 11500ms;
	animation-play-state: running;
}

.buttonAB {
	position: absolute;
	width: 33px;
	height: 33px;
	border: 2px solid red;
	opacity: 0;
	animation: clickButton 5s steps(3) forwards 2100ms;
	animation-play-state: running;
}

.title {
	position: absolute;
	top: 216px;
	left: 87px;
	width: 283px;
	opacity: 0;
	z-index: 5;
	animation: show 250ms steps(1) forwards 3750ms, moveTitle 1s linear forwards 5s, hide 250ms steps(1) forwards 7s;
	animation-play-state: running;
}

.comment {
	position: absolute;
	top: 169px;
	left: 387px;
	z-index: 20;
	font-size: 6px !important;
	line-height: 6px;
	font-family: Consolas, Monaco, monospace;
	color: #000;
	width: 26ch;
	white-space: nowrap;
	overflow: hidden;
	border-right: 0.05em solid;
	opacity: 0;
	animation: show 250ms steps(1) forwards 11s, typing 6s steps(26) 11250ms, caret 1s steps(1) infinite 11250ms;
	animation-play-state: running;
}