fix the touch devices issues with the down arrow

2 files changed, 6 insertions, 4 deletions

diff --git a/css/reveal.css b/css/reveal.css
index 91ee6dc..50b14c4 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -227,7 +227,7 @@ body {
   bottom: 12px;
   right: 12px;
   left: auto;
-  z-index: 1;
+  z-index: 11;
   color: #000;
   pointer-events: none;
   font-size: 10px; }
@@ -312,7 +312,8 @@ body {
               transform: rotate(90deg); }
   .reveal .controls .navigate-down {
     right: 3.2em;
-    bottom: 0;
+    bottom: -1.4em;
+    padding-bottom: 1.4em;
     -webkit-transform: translateY(10px);
             transform: translateY(10px); }
     .reveal .controls .navigate-down .controls-arrow {
diff --git a/css/reveal.scss b/css/reveal.scss
index a6cb9bc..ff98311 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -263,7 +263,7 @@ $controlsArrowAngleActive: 36deg;
 	bottom: $spacing;
 	right: $spacing;
 	left: auto;
-	z-index: 1;
+	z-index: 11;
 	color: #000;
 	pointer-events: none;
 	font-size: 10px;
@@ -355,7 +355,8 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-down {
 		right: $controlArrowSpacing + $controlArrowSize/2;
-		bottom: 0;
+		bottom: -$controlArrowSpacing;
+		padding-bottom: $controlArrowSpacing;
 		transform: translateY( 10px );
 
 		.controls-arrow {