@-webkit-keyframes mousemove {
	21% {
		-webkit-transform: translate(0px, 2px);
		transform: translate(0px, 2px)
	}
	56% {
		-webkit-transform: translate(10px, 1px);
		transform: translate(10px, 1px)
	}
	98% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@keyframes mousemove {
	21% {
		-webkit-transform: translate(0px, 2px);
		transform: translate(0px, 2px)
	}
	56% {
		-webkit-transform: translate(10px, 1px);
		transform: translate(10px, 1px)
	}
	98% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@-webkit-keyframes mouseinner {
	8% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
	38% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	62% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	90% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@keyframes mouseinner {
	8% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
	38% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	62% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	90% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@-webkit-keyframes mouserotate {
	8% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	27% {
		-webkit-transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px)
	}
	57% {
		-webkit-transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px)
	}
}

@keyframes mouserotate {
	8% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	27% {
		-webkit-transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px)
	}
	57% {
		-webkit-transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px)
	}
}

@-webkit-keyframes leftclick {
	10% {
		background-color: #aeaeae
	}
	50% {
		background-color: #aeaeae
	}
	56% {
		background-color: #999
	}
}

@keyframes leftclick {
	10% {
		background-color: #aeaeae
	}
	50% {
		background-color: #aeaeae
	}
	56% {
		background-color: #999
	}
}

.animated-mouse-wrapper {
	z-index: 400;
	bottom: 12px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1)
}

.animated-mouse-move {
	bottom: 24px;
	height: 32px;
	left: 50%;
	margin-left: -9px;
	position: absolute;
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	width: 18px
}

.animated-mouse-bg {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 11px;
	height: 36px;
	position: absolute;
	-webkit-transform: translate(-2px, -11px);
	transform: translate(-2px, -11px);
	width: 22px
}

.animated-mouse-buttons {
	border-radius: 9px 9px 0 0;
	height: 9px;
	overflow: hidden;
	position: absolute;
	-webkit-transform: translate(0px, -9px);
	transform: translate(0px, -9px);
	width: 18px
}

.animated-mouse-left-button {
	background-color: #fff;
	height: 9px;
	position: absolute;
	width: 9px
}

.animated-mouse-right-button {
	background-color: #fff;
	height: 9px;
	position: absolute;
	-webkit-transform: translate(9px, 0);
	transform: translate(9px, 0);
	width: 9px
}

.animated-mouse-scroll-wheel {
	position: absolute;
	height: 3px;
	width: 3px;
	border-radius: 1.5px;
	-webkit-transform: translate(7.5px, -1px);
	transform: translate(7.5px, -1px);
	background: #aeaeae
}

.animated-mouse-body {
	background-color: #fff;
	border-radius: 9px;
	height: 32px;
	margin-top: -9px;
	position: absolute;
	width: 18px
}

.animated-mouse-helptext {
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 4px;
	border-radius: 3px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.58em;
	font-weight: 500;
	margin: 2px;
	text-align: center;
	white-space: nowrap
}

.animated-mouse--animate.animated-mouse-wrapper {
	opacity: 1
}

.animated-mouse--animate div {
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.animated-mouse--animate .animated-mouse-move {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: mousemove;
	animation-name: mousemove;
	height: 32px;
	width: 18px
}

.animated-mouse--animate .animated-mouse-rotate {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: mouserotate;
	animation-name: mouserotate
}

.animated-mouse--animate .animated-mouse-inner {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: mouseinner;
	animation-name: mouseinner
}

.animated-mouse--animate .animated-mouse-left-button {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: leftclick;
	animation-name: leftclick
}

@-webkit-keyframes touchmove {
	21% {
		-webkit-transform: translate(0px, 2px);
		transform: translate(0px, 2px)
	}
	56% {
		-webkit-transform: translate(30px, 10px);
		transform: translate(30px, 10px)
	}
	98% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@keyframes touchmove {
	21% {
		-webkit-transform: translate(0px, 2px);
		transform: translate(0px, 2px)
	}
	56% {
		-webkit-transform: translate(30px, 10px);
		transform: translate(30px, 10px)
	}
	98% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@-webkit-keyframes touchinner {
	8% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
	38% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	62% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	90% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@keyframes touchinner {
	8% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
	38% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	62% {
		-webkit-transform: translate(1px, 4px);
		transform: translate(1px, 4px)
	}
	90% {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0)
	}
}

@-webkit-keyframes touchrotate {
	8% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	27% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	57% {
		-webkit-transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px)
	}
}

@keyframes touchrotate {
	8% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	27% {
		-webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px)
	}
	57% {
		-webkit-transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px);
		transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px)
	}
}

@-webkit-keyframes touch {
	10% {
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
		-webkit-transform: scale(1.15);
		transform: scale(1.15)
	}
	50% {
		background-color: #aeaeae;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 4px;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	56% {
		background-color: #999;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 5px;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes touch {
	10% {
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
		-webkit-transform: scale(1.15);
		transform: scale(1.15)
	}
	50% {
		background-color: #aeaeae;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 4px;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	56% {
		background-color: #999;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 5px;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

.animated-touch-wrapper {
	z-index: 400;
	bottom: 12px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1)
}

.animated-touch-move {
	position: relative;
	left: 50%;
	margin-left: -16px;
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	width: 32px
}

.animated-touch-fingers {
	-webkit-transform: translate(0px, -10px);
	transform: translate(0px, -10px)
}

.animated-touch-finger {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;
	border-radius: 16px;
	background-color: #fff;
	height: 24px;
	width: 24px;
	margin-bottom: 15px;
	-webkit-transform: scale(1.15);
	transform: scale(1.15)
}

.animated-touch-helptext {
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 4px;
	border-radius: 3px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.58em;
	font-weight: 500;
	margin: 2px;
	text-align: center;
	white-space: nowrap
}

.animated-touch--animate.animated-touch-wrapper {
	opacity: 1
}

.animated-touch--animate div {
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.animated-touch--animate .animated-touch-move {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: touchmove;
	animation-name: touchmove
}

.animated-touch--animate .animated-touch-rotate {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: touchrotate;
	animation-name: touchrotate
}

.animated-touch--animate .animated-touch-inner {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: touchinner;
	animation-name: touchinner
}

.animated-touch--animate .animated-touch-finger {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: touch;
	animation-name: touch
}



.animated-mouse-wrapper {
	bottom: 170px
}

.animated-touch-wrapper {
	bottom: 110px
}


.tip-overlay {
	 
	opacity: 0;
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	transition: opacity 300ms ease-out
}

#tip-container{
	opacity: .5;
    transform: scale(1.5);
    position: fixed;
	width:100%;
	height: 800px;
	bottom:150px;
}
 

@media screen and  (min-width: 2048px)
{
	
	#tip-container{
		transform: scale(2);
		bottom:300px;
	}
}