fix responsive issue with speaker notes

css/reveal.css

@@ -1433,12 +1433,8 @@ body {
 .reveal aside.notes {
   display: none; }
 
-.reveal.show-notes {
-  max-width: 80vw;
-  overflow: visible; }
-
 .reveal .speaker-notes {
-  display: block;
+  display: none;
   position: absolute;
   width: 20vw;
   height: 100%;
@@ -1455,19 +1451,25 @@ body {
   text-align: left;
   font-family: Helvetica, sans-serif;
   -webkit-overflow-scrolling: touch; }
-
   .reveal .speaker-notes:before {
     content: 'Speaker notes';
     display: block;
     margin-bottom: 10px;
     opacity: 0.5; }
 
+.reveal.show-notes {
+  max-width: 80vw;
+  overflow: visible; }
+
+.reveal.show-notes .speaker-notes {
+  display: block; }
+
 @media screen and (max-width: 1024px) {
   .reveal.show-notes {
     max-width: none;
     max-height: 70vh;
     overflow: visible; }
-  .reveal .speaker-notes {
+  .reveal.show-notes .speaker-notes {
     top: 70vh;
     left: 0;
     width: 100%;

css/reveal.scss

@@ -1521,15 +1521,10 @@ body {
 	display: none;
 }
 
-.reveal.show-notes {
-	max-width: 80vw;
-	overflow: visible;
-}
-
 // An interface element that can optionally be used to show the
 // speaker notes to all viewers, on top of the presentation
 .reveal .speaker-notes {
-	display: block;
+	display: none;
 	position: absolute;
 	width: 20vw;
 	height: 100%;
@@ -1546,14 +1541,23 @@ body {
 	text-align: left;
 	font-family: Helvetica, sans-serif;
 	-webkit-overflow-scrolling: touch;
-}
 
-.reveal .speaker-notes:before {
+	&:before {
 		content: 'Speaker notes';
 		display: block;
 		margin-bottom: 10px;
 		opacity: 0.5;
 	}
+}
+
+.reveal.show-notes {
+	max-width: 80vw;
+	overflow: visible;
+}
+
+.reveal.show-notes .speaker-notes {
+	display: block;
+}
 
 @media screen and (max-width: 1024px) {
 	.reveal.show-notes {
@@ -1562,7 +1566,7 @@ body {
 		overflow: visible;
 	}
 
-	.reveal .speaker-notes {
+	.reveal.show-notes .speaker-notes {
 		top: 70vh;
 		left: 0;
 		width: 100%;