.assist, .assistc {
	background: #060636; color: #ececec; cursor:pointer; float: left; height: 37px; margin: 7px 10px 0 10px; overflow: hidden; text-align: center; width: 10%;
}

.assist:hover, .assistc:hover {
	filter: alpha(opacity=50);
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.assist {
	margin-left: 20px;
}

.assistc {
	float: right;
}

/* Index Help */

@keyframes runHelp {
	0%   {left:5%; top:10px; visibility: visible;}
	5%, 10%   {left:5%; top:30px; transform:none;}
    15%, 29%  {left:5%; top:230px; transform:none;}
    30%, 45%  {left:4%; top:250px; transform:none;}
	50%  {left:80%; top:140px; transform:none;}
	75%  {left:85%; top:140px; transform:none;}
	76%, 78%  {left:81%; top:115px; transform:rotateX(180deg);}
	79%, 80%  {left:81%; top:110px; transform:rotateX(180deg);}
	81%, 83%  {left:81%; top:115px; transform:rotateX(180deg);}
	84%, 86%  {left:81%; top:110px; transform:rotateX(180deg);}
	87%, 89%  {left:81%; top:115px; transform:rotateX(180deg);}
	90%, 91%  {left:81%; top:110px; transform:rotateX(180deg);}
	92%, 99%  {left:81%; top:115px; transform:rotateX(180deg);}
	100% {left:81%; top:115px; visibility: hidden;}
}

.run {
	background: url(../img/hand.png);
	display: block;
	height: 50px;
	margin: 25px;
	position: absolute;
	visibility: hidden;
	width: 50px;
	z-index: 1010;
	
	-webkit-animation: runHelp 15s 1600ms linear;
	-moz-animation: runHelp 15s 1600ms linear;
	-o-animation: runHelp 15s 1600ms linear;
	animation: runHelp 15s 1600ms linear;
}

/* End Index Help */

/* Help Words */

#helpwords {
	position: fixed;
	visibility: hidden;
	top: -100%;
}

@keyframes runHelpW {
	0%   {left:10%; top:10px; visibility: visible;}
	5%, 10%  {left:10%; top:50px;}
    15%, 29%  {left:10%; top:210px;}
    30%, 45%  {left:9%; top:230px;}
	50%  {left:78%; top:190px;}
	75%  {left:82%; top:190px;}
	76%, 99%  {left:78%; top:180px;}
	100% {left:78%; top:210px; visibility: hidden; width: 140px;}
}

.helpwords {
	display: block;
	height: 50px;
	margin: 25px;
	position: absolute;
	visibility: hidden;
	width: 100px;
	z-index: 1010;
	
	-webkit-animation: runHelpW 15s 1600ms linear;
	-moz-animation: runHelpW 15s 1600ms linear;
	-o-animation: runHelpW 15s 1600ms linear;
	animation: runHelpW 15s 1600ms linear;
}

.helpwords span{
	font-weight: bold;
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #ff0000;
}

@keyframes rotateWordsFirst {
     0% { opacity: 1; animation-timing-function: ease-in; width: 100%; }
	 5%, 10%  { opacity: 1; width: 100%; }
    15%, 29%  { opacity: 1; width: 100%; }
    30%, 45%  { opacity: 1; width: 100%; }
	50%  { opacity: 1; width: 100%; }
	75%  { opacity: 1; width: 100%; }
	76%, 99%  { opacity: 1; width: 100%; }
	100% { opacity: 0; width: 0px; }
}

.helpwords-1 span:nth-child(1) {
	-webkit-animation: rotateWordsFirst 15s 1600ms linear;
	-moz-animation: rotateWordsFirst 15s 1600ms linear;
	-o-animation: rotateWordsFirst 15s 1600ms linear;
	animation: rotateWordsFirst 15s 1600ms linear ;
}

.helpwords span:nth-child(2) {
	-webkit-animation: rotateWordsFirst 2s 1600ms linear;
	-moz-animation: rotateWordsFirst 2s 1600ms linear;
	-o-animation: rotateWordsFirst 2s 1600ms linear;
	animation: rotateWordsFirst 2s 1600ms linear ;
}

.helpwords span:nth-child(3) {
	background: #060636;
	text-align: center;
	
	-webkit-animation: rotateWordsFirst 3s 5s linear;
	-moz-animation: rotateWordsFirst 3s 5s linear;
	-o-animation: rotateWordsFirst 3s 5s linear;
	animation: rotateWordsFirst 3s 5s linear ;
}

.helpwords span:nth-child(4) {
	background: #060636;
	text-align: center;
	
	-webkit-animation: rotateWordsFirst 3s 10s linear;
	-moz-animation: rotateWordsFirst 3s 10s linear;
	-o-animation: rotateWordsFirst 3s 10s linear;
	animation: rotateWordsFirst 3s 10s linear ;
}

.helpwords span:nth-child(5) {
	background: #060636;
	text-align: center;
	
	-webkit-animation: rotateWordsFirst 3s 14s linear;
	-moz-animation: rotateWordsFirst 3s 14s linear;
	-o-animation: rotateWordsFirst 3s 14s linear;
	animation: rotateWordsFirst 3s 14s linear ;
}

