diff --git a/css/reveal.css b/css/reveal.css
index dc12ee4..ebc399f 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1488,7 +1488,7 @@ body {
 .reveal .speaker-notes {
   display: none;
   position: absolute;
-  width: 25vw;
+  width: 33.3333333333%;
   height: 100%;
   top: 0;
   left: 100%;
@@ -1516,7 +1516,7 @@ body {
     opacity: 0.5; }
 
 .reveal.show-notes {
-  max-width: 75vw;
+  max-width: 75%;
   overflow: visible; }
 
 .reveal.show-notes .speaker-notes {
diff --git a/css/reveal.scss b/css/reveal.scss
index 8715762..75ffb72 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1619,6 +1619,8 @@ $controlsArrowAngleActive: 36deg;
  * SPEAKER NOTES
  *********************************************/
 
+$notesWidthPercent: 25%;
+
 // Hide on-page notes
 .reveal aside.notes {
 	display: none;
@@ -1629,7 +1631,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: 25vw;
+	width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@@ -1665,7 +1667,7 @@ $controlsArrowAngleActive: 36deg;
 
 
 .reveal.show-notes {
-	max-width: 75vw;
+	max-width: 100% - $notesWidthPercent;
 	overflow: visible;
 }