@keyframes ArrowTutorial {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-moz-keyframes ArrowTutorial {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-webkit-keyframes ArrowTutorial {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-ms-keyframes ArrowTutorial {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-o-keyframes ArrowTutorial {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}

@keyframes ArrowTutorial_simple {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-moz-keyframes ArrowTutorial_simple {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-webkit-keyframes ArrowTutorial_simple {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-ms-keyframes ArrowTutorial_simple {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}
@-o-keyframes ArrowTutorial_simple {
    0% { background-position: 0 0; }
    50% { background-position: 0 75%; }
    100% { background-position: 0 0; }
}


.ArrowTutorial{
	width: 100%;
	max-width: 75px;
	z-index: 900;
	background: url('../i/mobile_view/ArrowTutorial.png') no-repeat top center;
	background-size: contain;
	position: absolute;
	animation: ArrowTutorial 1s infinite;
	-webkit-animation: ArrowTutorial 1s infinite;
	-moz-animation: ArrowTutorial 1s infinite;
	-o-animation: ArrowTutorial 1s infinite;
	animation: ArrowTutorial 1s infinite;
}

.ArrowTutorial_simple{
	width: 100%;
	max-width: 75px;
	z-index: 900;
	background: url('../i/mobile_view/ArrowTutorial.png') no-repeat top center;
	background-size: contain;
	position: absolute;
	animation: ArrowTutorial 1s infinite;
	-webkit-animation: ArrowTutorial 1s infinite;
	-moz-animation: ArrowTutorial 1s infinite;
	-o-animation: ArrowTutorial 1s infinite;
	animation: ArrowTutorial 1s infinite;
}

.ArrowTutorial:before{
	content: "";
	padding-top: 120%;
	float: left; 
}

.ArrowTutorial_simple:before{
	content: "";
	padding-top: 120%;
	float: left; 
}

.ArrowTutorial_army{
	width: 100%;
	max-width: 75px;
	z-index: 900;
	background: url('../i/mobile_view/ArrowTutorial.png') no-repeat top center;
	background-size: contain;
	position: absolute;
	animation: ArrowTutorial 1s infinite;
	-webkit-animation: ArrowTutorial 1s infinite;
	-moz-animation: ArrowTutorial 1s infinite;
	-o-animation: ArrowTutorial 1s infinite;
	animation: ArrowTutorial 1s infinite;
}

.ArrowTutorial_army:before{
	content: "";
	padding-top: 120%;
	float: left; 
}

.ArrowTutorialToUP{
    top: 50%;
	left: 0%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(180deg);        /* FF */
    -o-transform: rotate(180deg);          /* Opera */
    -ms-transform: rotate(180deg);         /* IE9 */
    transform: rotate(180deg);             /* W3C compliant browsers */
}

.ArrowTutorialToUP2{
    top: 50%;
	left: 50%;

	-moz-transform: translate(-50%, 0) rotate(180deg);
	-o-transform: translate(-50%, 0) rotate(180deg);
	-ms-transform: translate(-50%, 0) rotate(180deg);
	-webkit-transform: translate(-50%, 0) rotate(180deg);
    transform: translate(-50%, 0) rotate(180deg);
}

.ArrowTutorialToUPOnly{
	left: 50%;

	-moz-transform: translate(-50%, 0) rotate(180deg);
	-o-transform: translate(-50%, 0) rotate(180deg);
	-ms-transform: translate(-50%, 0) rotate(180deg);
	-webkit-transform: translate(-50%, 0) rotate(180deg);
    transform: translate(-50%, 0) rotate(180deg);
}


.ArrowTutorialToLeft{
    top: -10%;
	left: 60%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(90deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(90deg);        /* FF */
    -o-transform: rotate(90deg);          /* Opera */
    -ms-transform: rotate(90deg);         /* IE9 */
    transform: rotate(90deg);             /* W3C compliant browsers */
}

.ArrowTutorialToLeftOnly{
    top: -10%;
	left: 60%;
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(90deg)!important;     /* Chrome and other webkit browsers */
    -moz-transform: rotate(90deg)!important;        /* FF */
    -o-transform: rotate(90deg)!important;          /* Opera */
    -ms-transform: rotate(90deg)!important;         /* IE9 */
    transform: rotate(90deg)!important;             /* W3C compliant browsers */
}

.ArrowTutorialToRightOnly{
    top: 0;
	left: 0;
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(-90deg)!important;     /* Chrome and other webkit browsers */
    -moz-transform: rotate(-90deg)!important;        /* FF */
    -o-transform: rotate(-90deg)!important;          /* Opera */
    -ms-transform: rotate(-90deg)!important;         /* IE9 */
    transform: rotate(-90deg)!important;             /* W3C compliant browsers */
}

.ArrowTutorialToDownOnly{
	left: 50%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ArrowTutorialToDown2{
    top: -80%;
	left: 50%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ArrowTutorialToLeft2{
    top: 55%;
	left: 70%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(90deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(90deg);        /* FF */
    -o-transform: rotate(90deg);          /* Opera */
    -ms-transform: rotate(90deg);         /* IE9 */
    transform: rotate(90deg);             /* W3C compliant browsers */
}

.ArrowTutorialToRight2{
    top: 55%;
	left: -70%;

	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: rotate(-90deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(-90deg);        /* FF */
    -o-transform: rotate(-90deg);          /* Opera */
    -ms-transform: rotate(-90deg);         /* IE9 */
    transform: rotate(-90deg);             /* W3C compliant browsers */
}