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 .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%;