/** Robot **/

.top-robot {
	position: absolute;
	left: 5%;
	-ms-transform: translate( 0, -193px ) rotate(195deg); /* make sure robot is visible in IE9, since keyframes are not supported */
	transform: translate( 0, -400px ) rotate(195deg);
	-webkit-animation: .2s 1s 1 forwards TopRobotDrop;
	-moz-animation: .2s 1s 1 forwards TopRobotDrop;
	-o-animation: .2s 1s 1 forwards TopRobotDrop;
	animation: .2s 1s 1 forwards TopRobotDrop;
	width: 230px;
	height: 350px;
	z-index: 10;
}

.eyes {
	-webkit-animation: 3s 5s infinite forwards EyeBlink;
	-moz-animation: 3s 5s infinite forwards EyeBlink;
	-o-animation: 3s 5s infinite forwards EyeBlink;
	animation: 3s 5s infinite forwards EyeBlink;
	opacity: 1;
}

.robot-head {
	-webkit-animation: 20s 3s infinite forwards HeadShake;
	-moz-animation: 20s 3s infinite forwards HeadShake;
	-o-animation: 20s 3s infinite forwards HeadShake;
	animation: 20s 3s infinite forwards HeadShake;
	transform-origin: center center;
}

/* Keyframes */

/* Robot shaky head */
@-webkit-keyframes HeadShake {
	0%, 28% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotateY(180deg);
	}
	70% {
		transform: rotateY(180deg);
	}
	72%, 100% {
		transform: rotate(0deg);
	}
}

@-moz-keyframes HeadShake {
	0%, 28% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotateY(180deg);
	}
	70% {
		transform: rotateY(180deg);
	}
	72%, 100% {
		transform: rotate(0deg);
	}
}

@-o-keyframes HeadShake {
	0%, 28% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotateY(180deg);
	}
	70% {
		transform: rotateY(180deg);
	}
	72%, 100% {
		transform: rotate(0deg);
	}
}

@keyframes HeadShake {
	0%, 28% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotateY(180deg);
	}
	70% {
		transform: rotateY(180deg);
	}
	72%, 100% {
		transform: rotate(0deg);
	}
}

/* Robot blinky eyes */
@-webkit-keyframes EyeBlink {
	0%, 45% {
		opacity: 1;
	}
	45.1% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

@-moz-keyframes EyeBlink {
	0%, 45% {
		opacity: 1;
	}
	45.1% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

@-o-keyframes EyeBlink {
	0%, 45% {
		opacity: 1;
	}
	45.1% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

@keyframes EyeBlink {
	0%, 45% {
		opacity: 1;
	}
	45.1% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

/* Robot dropping from the top */
@-webkit-keyframes TopRobotDrop{
	0% {
		transform: translate( 0, -400px ) rotate(195deg);
	}
	100% {
		transform: translate( 0, -193px ) rotate(195deg);
	}
}

@-moz-keyframes TopRobotDrop{
	0% {
		transform: translate( 0, -400px ) rotate(195deg);
	}
	100% {
		transform: translate( 0, -193px ) rotate(195deg);
	}
}
@-o-keyframes TopRobotDrop{
	0% {
		transform: translate( 0, -400px ) rotate(195deg);
	}
	100% {
		transform: translate( 0, -193px ) rotate(195deg);
	}
}

@keyframes TopRobotDrop{
	0%, 10% {
		transform: translate( 0, -400px ) rotate(195deg);
	}
	90%, 100% {
		transform: translate( 0, -193px ) rotate(195deg);
	}
}

@include mobile {
	.top-robot {
		left: auto;
		position: relative;
		transform: translate( 0, 0 ) rotate( 9deg );
		-webkit-animation: none;
		-moz-animation: none;
		-o-animation: none;
		animation: none;
	}

	.top-robot-container {
		height: 200px;
		position: absolute;
		overflow: hidden;
		text-align: center;
		top: 10px;
		width: 100%;
	}
}
