Center Animated Object in iPad Safari Browser - html

Question

I am trying to make my website http://www.TheTapReport.com lower bottom scroll animation "arrow" display center on an iPad Safari Browser instead of left justified. The text "scroll" and the mouse objects appear to be centered, however, the arrow is not. I have tested this animation on most browsers and all appears to be always centered except for with the iPad.
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: fixed;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}
#scrolldown > p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}
.mouse {
border: 2px solid #7C7D7F;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}
.mouse span {
display: block;
font-size: 1 em;
margin: 6px auto;
}
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
Thank you