diff --git a/css/reveal.css b/css/reveal.css
index 9067fe4..8496082 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -354,24 +354,27 @@ body {
   .reveal .controls .enabled.fragmented:hover {
     opacity: 1; }
 
-.reveal:not(.has-vertical-slides) .controls .navigate-left,
-.reveal:not(.has-vertical-slides) .controls .navigate-right {
-  bottom: 10px; }
+.reveal:not(.has-vertical-slides) .controls .navigate-left {
+  bottom: 1.2em;
+  right: 5.8em; }
 
-.reveal:not(.has-horizontal-slides) .controls .navigate-up,
-.reveal:not(.has-horizontal-slides) .controls .navigate-down {
-  right: 10px; }
+.reveal:not(.has-vertical-slides) .controls .navigate-right {
+  bottom: 1.2em;
+  right: 1.2em; }
 
 .reveal:not(.has-horizontal-slides) .controls .navigate-up {
-  bottom: 3.9em; }
+  right: 1.2em;
+  bottom: 5.8em; }
 
-.reveal.has-dark-background .controls .pagination-arrow:after,
-.reveal.has-dark-background .controls .pagination-arrow:before {
-  background-color: #fff; }
+.reveal:not(.has-horizontal-slides) .controls .navigate-down {
+  right: 1.2em;
+  bottom: 1.2em; }
 
-.reveal.has-light-background .controls .pagination-arrow:after,
-.reveal.has-light-background .controls .pagination-arrow:before {
-  background-color: #000; }
+.reveal.has-dark-background .controls {
+  color: #fff; }
+
+.reveal.has-light-background .controls {
+  color: #000; }
 
 @media screen and (min-width: 500px) {
   .reveal .controls[data-controls-layout="edges"] {
diff --git a/css/reveal.scss b/css/reveal.scss
index 07483f6..2651772 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -419,27 +419,31 @@ $controlArrowThickness: 0.5em;
 }
 
 // Adjust the layout when there are no vertical slides
-.reveal:not(.has-vertical-slides) .controls .navigate-left,
+.reveal:not(.has-vertical-slides) .controls .navigate-left {
+	bottom: 1.2em;
+	right: 2.2em + $controlArrowSize;
+}
+
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
-	bottom: 10px;
+	bottom: 1.2em;
+	right: 1.2em;
 }
 
-.reveal:not(.has-horizontal-slides) .controls .navigate-up,
-.reveal:not(.has-horizontal-slides) .controls .navigate-down {
-	right: 10px;
-}
 .reveal:not(.has-horizontal-slides) .controls .navigate-up {
-	bottom: $controlArrowSpacing*1.5 + $controlArrowSize/2;
+	right: 1.2em;
+	bottom: 2.2em + $controlArrowSize;
+}
+.reveal:not(.has-horizontal-slides) .controls .navigate-down {
+	right: 1.2em;
+	bottom: 1.2em;
 }
 
-.reveal.has-dark-background .controls .pagination-arrow:after,
-.reveal.has-dark-background .controls .pagination-arrow:before {
-	background-color: #fff;
+.reveal.has-dark-background .controls {
+	color: #fff;
 }
 
-.reveal.has-light-background .controls .pagination-arrow:after,
-.reveal.has-light-background .controls .pagination-arrow:before {
-	background-color: #000;
+.reveal.has-light-background .controls {
+	color: #000;
 }
 
 // Edge aligned controls layout