lab.hakim.se/reveal-js -> revealjs.com

3.6.0
make it possible to load/unload slides via the api
2025-09-17 18:12:07 +02:00 · 2017-11-22 14:46:55 +01:00 · 2017-11-22 14:10:33 +01:00 · 2017-11-21 15:38:44 +01:00 · 2017-11-21 15:29:40 +01:00 · 2017-11-09 11:52:11 +01:00
36 changed files with 1675 additions and 1014 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,7 @@
 language: node_js
 node_js:
-  - 4.1.1
+  - 4
 before_script:
-  - npm install -g grunt-cli
+  - npm install -g grunt-cli
+after_script:
+  - grunt retire
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -12,10 +12,10 @@ module.exports = function(grunt) {
 			banner:
 				'/*!\n' +
 				' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
-				' * http://lab.hakim.se/reveal-js\n' +
+				' * http://revealjs.com\n' +
 				' * MIT licensed\n' +
 				' *\n' +
-				' * Copyright (C) 2016 Hakim El Hattab, http://hakim.se\n' +
+				' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
 				' */'
 		},

@@ -25,7 +25,8 @@ module.exports = function(grunt) {

 		uglify: {
 			options: {
-				banner: '<%= meta.banner %>\n'
+				banner: '<%= meta.banner %>\n',
+				screwIE8: false
 			},
 			build: {
 				src: 'js/reveal.js',
@@ -35,34 +36,31 @@ module.exports = function(grunt) {

 		sass: {
 			core: {
-				files: {
-					'css/reveal.css': 'css/reveal.scss',
-				}
+				src: 'css/reveal.scss',
+				dest: 'css/reveal.css'
 			},
 			themes: {
-				files: [
-					{
-						expand: true,
-						cwd: 'css/theme/source',
-						src: ['*.scss'],
-						dest: 'css/theme',
-						ext: '.css'
-					}
-				]
+				expand: true,
+				cwd: 'css/theme/source',
+				src: ['*.sass', '*.scss'],
+				dest: 'css/theme',
+				ext: '.css'
 			}
 		},

 		autoprefixer: {
-			dist: {
+			core: {
 				src: 'css/reveal.css'
 			}
 		},

 		cssmin: {
+			options: {
+				compatibility: 'ie9'
+			},
 			compress: {
-				files: {
-					'css/reveal.min.css': [ 'css/reveal.css' ]
-				}
+				src: 'css/reveal.css',
+				dest: 'css/reveal.min.css'
 			}
 		},

@@ -72,7 +70,7 @@ module.exports = function(grunt) {
 				eqeqeq: true,
 				immed: true,
 				esnext: true,
-				latedef: true,
+				latedef: 'nofunc',
 				newcap: true,
 				noarg: true,
 				sub: true,
@@ -98,22 +96,25 @@ module.exports = function(grunt) {
 					port: port,
 					base: root,
 					livereload: true,
-					open: true
+					open: true,
+					useAvailablePort: true
 				}
-			},
-
+			}
 		},

 		zip: {
-			'reveal-js-presentation.zip': [
-				'index.html',
-				'css/**',
-				'js/**',
-				'lib/**',
-				'images/**',
-				'plugin/**',
-				'**.md'
-			]
+			bundle: {
+				src: [
+					'index.html',
+					'css/**',
+					'js/**',
+					'lib/**',
+					'images/**',
+					'plugin/**',
+					'**.md'
+				],
+				dest: 'reveal-js-presentation.zip'
+			}
 		},

 		watch: {
@@ -122,7 +123,12 @@ module.exports = function(grunt) {
 				tasks: 'js'
 			},
 			theme: {
-				files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
+				files: [
+					'css/theme/source/*.sass',
+					'css/theme/source/*.scss',
+					'css/theme/template/*.sass',
+					'css/theme/template/*.scss'
+				],
 				tasks: 'css-themes'
 			},
 			css: {
@@ -141,25 +147,24 @@ module.exports = function(grunt) {
 		},

 		retire: {
-			js: ['js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js'],
-			node: ['.'],
-			options: {}
+			js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
+			node: [ '.' ]
 		}

 	});

 	// Dependencies
-	grunt.loadNpmTasks( 'grunt-contrib-qunit' );
-	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
+	grunt.loadNpmTasks( 'grunt-contrib-connect' );
 	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
+	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
+	grunt.loadNpmTasks( 'grunt-contrib-qunit' );
 	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
 	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-sass' );
-	grunt.loadNpmTasks( 'grunt-contrib-connect' );
 	grunt.loadNpmTasks( 'grunt-autoprefixer' );
-	grunt.loadNpmTasks( 'grunt-zip' );
 	grunt.loadNpmTasks( 'grunt-retire' );
-
+	grunt.loadNpmTasks( 'grunt-sass' );
+	grunt.loadNpmTasks( 'grunt-zip' );
+	
 	// Default task
 	grunt.registerTask( 'default', [ 'css', 'js' ] );

--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-Copyright (C) 2016 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2017 Hakim El Hattab, http://hakim.se, and reveal.js contributors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js) <a href="https://slides.com?ref=github"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>

-A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
+A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://revealjs.com/).

 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github).

@@ -105,17 +105,17 @@ The presentation markup hierarchy needs to be `.reveal > .slides > section` wher

 ### Markdown

-It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<script type="text/template">` like the example below.
+It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file.

 This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

 ```html
 <section data-markdown>
-	<script type="text/template">
+	<textarea data-template>
 		## Page title

 		A paragraph with some text and a [link](http://hakim.se).
-	</script>
+	</textarea>
 </section>
 ```

@@ -181,12 +181,26 @@ At the end of your page you need to initialize reveal by running the following c
 ```javascript
 Reveal.initialize({

-	// Display controls in the bottom right corner
+	// Display presentation control arrows
 	controls: true,

+	// Help the user learn the controls by providing hints, for example by
+	// bouncing the down arrow when they first encounter a vertical slide
+	controlsTutorial: true,
+
+	// Determines where controls appear, "edges" or "bottom-right"
+	controlsLayout: 'bottom-right',
+
+	// Visibility rule for backwards navigation arrows; "faded", "hidden"
+	// or "visible"
+	controlsBackArrows: 'faded',
+
 	// Display a presentation progress bar
 	progress: true,

+	// Set default timing of 2 minutes per slide
+	defaultTiming: 120,
+
 	// Display the page number of the current slide
 	slideNumber: false,

@@ -228,6 +242,12 @@ Reveal.initialize({
 	// Flags if speaker notes should be visible to all viewers
 	showNotes: false,

+	// Global override for autoplaying embedded media (video/audio/iframe)
+	// - null: Media will only autoplay if data-autoplay is present
+	// - true: All media will autoplay, regardless of individual setting
+	// - false: No media will autoplay, regardless of individual setting
+	autoPlayMedia: null,
+
 	// Number of milliseconds between automatically proceeding to the
 	// next slide, disabled when set to 0, this value can be overwritten
 	// by using a data-autoslide attribute on your slides
@@ -270,7 +290,10 @@ Reveal.initialize({
 	// - Calculated automatically unless specified
 	// - Set to 0 to disable movement along an axis
 	parallaxBackgroundHorizontal: null,
-	parallaxBackgroundVertical: null
+	parallaxBackgroundVertical: null,
+
+	// The display mode that will be used to show slides
+	display: 'block'

 });
 ```
@@ -463,14 +486,15 @@ Reveal.nextFragment();
 // Randomize the order of slides
 Reveal.shuffle();

-// Shows a help overlay with keyboard shortcuts
-Reveal.showHelp();
-
 // Toggle presentation states, optionally pass true/false to force on/off
 Reveal.toggleOverview();
 Reveal.togglePause();
 Reveal.toggleAutoSlide();

+// Shows a help overlay with keyboard shortcuts, optionally pass true/false
+// to force on/off
+Reveal.toggleHelp();
+
 // Change a config value at runtime
 Reveal.configure({ controls: true });

@@ -484,9 +508,11 @@ Reveal.getScale();
 Reveal.getPreviousSlide();
 Reveal.getCurrentSlide();

-Reveal.getIndices(); // { h: 0, v: 0 } }
-Reveal.getProgress(); // 0-1
-Reveal.getTotalSlides();
+Reveal.getIndices();        // { h: 0, v: 0 } }
+Reveal.getPastSlideCount();
+Reveal.getProgress();       // (0 == first slide, 1 == last slide)
+Reveal.getSlides();         // Array of all slides
+Reveal.getTotalSlides();    // total number of slides

 // Returns the speaker notes for the current slide
 Reveal.getSlideNotes();
@@ -544,7 +570,7 @@ Reveal.addEventListener( 'somestate', function() {

 Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe.

-##### Color Backgrounds
+#### Color Backgrounds
 All CSS color formats are supported, like rgba() or hsl().
 ```html
 <section data-background-color="#ff0000">
@@ -552,7 +578,7 @@ All CSS color formats are supported, like rgba() or hsl().
 </section>
 ```

-##### Image Backgrounds
+#### Image Backgrounds
 By default, background images are resized to cover the full page. Available options:

 | Attribute                    | Default    | Description |
@@ -570,7 +596,7 @@ By default, background images are resized to cover the full page. Available opti
 </section>
 ```

-##### Video Backgrounds
+#### Video Backgrounds
 Automatically plays a full size video behind the slide.

 | Attribute                    | Default | Description |
@@ -578,6 +604,7 @@ Automatically plays a full size video behind the slide.
 | data-background-video        |         | A single video source, or a comma separated list of video sources. |
 | data-background-video-loop   | false   | Flags if the video should play repeatedly. |
 | data-background-video-muted  | false   | Flags if the audio should be muted. |
+| data-background-size         | cover   | Use `cover` for full screen and some cropping or `contain` for letterboxing. |

 ```html
 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
@@ -585,15 +612,15 @@ Automatically plays a full size video behind the slide.
 </section>
 ```

-##### Iframe Backgrounds
-Embeds a web page as a background. Note that since the iframe is in the background layer, behind your slides, it is not possible to interact with the embedded page.
+#### Iframe Backgrounds
+Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
 ```html
-<section data-background-iframe="https://slides.com">
+<section data-background-iframe="https://slides.com" data-background-interactive>
 	<h2>Iframe</h2>
 </section>
 ```

-##### Background Transitions
+#### Background Transitions
 Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.


@@ -619,7 +646,7 @@ Reveal.initialize({
 });
 ```

-Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px).
+Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://revealjs.com/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px).



@@ -679,7 +706,7 @@ You can also add relative navigation links, similar to the built in reveal.js co


 ### Fragments
-Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/fragments
+Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://revealjs.com/#/fragments

 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:

@@ -749,7 +776,7 @@ By default, Reveal is configured with [highlight.js](https://highlightjs.org/) f
 ```

 ### Slide number
-If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value.
+If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values.

 ```javascript
 // Shows the slide number using default formatting
@@ -762,6 +789,12 @@ Reveal.configure({ slideNumber: true });
 //  "c/t": 	flattened slide number / total slides
 Reveal.configure({ slideNumber: 'c/t' });

+// Control which views the slide number displays on using the "showSlideNumber" value:
+//     "all": show on all views (default)
+// "speaker": only show slide numbers on speaker notes view
+//   "print": only show slide numbers when printing to PDF
+Reveal.configure({ showSlideNumber: 'speaker' });
+
 ```


@@ -778,20 +811,26 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
 Reveal.toggleOverview();
 ```

+
 ### Fullscreen mode
 Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.


 ### Embedded media
-Embedded HTML5 `<video>`/`<audio>` and YouTube iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
-
 Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:

 ```html
 <video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
 ```

-Additionally the framework automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to all iframes, ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden.
+If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay.
+
+Note that embedded HTML5 `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
+
+
+### Embedded iframes
+
+reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden.


 ### Stretching elements
@@ -844,18 +883,34 @@ Reveal.initialize({

 ## PDF Export

-Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presention from a webserver.
+Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.

+### Page size
 Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.

-1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf#/. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
-2. Open the in-browser print dialog (CTRL/CMD+P).
-3. Change the **Destination** setting to **Save as PDF**.
-4. Change the **Layout** to **Landscape**.
-5. Change the **Margins** to **None**.
-6. Enable the **Background graphics** option.
-7. Click **Save**.
+### Print stylesheet
+To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD:
+
+```html
+<script>
+	var link = document.createElement( 'link' );
+	link.rel = 'stylesheet';
+	link.type = 'text/css';
+	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
+	document.getElementsByTagName( 'head' )[0].appendChild( link );
+</script>
+```
+
+### Instructions
+1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [revealjs.com?print-pdf](http://revealjs.com?print-pdf).
+  * If you want to include [speaker notes](#speaker-notes) in your export, you can append `showNotes=true` to the query string: http://localhost:8000/?print-pdf&showNotes=true
+1. Open the in-browser print dialog (CTRL/CMD+P).
+1. Change the **Destination** setting to **Save as PDF**.
+1. Change the **Layout** to **Landscape**.
+1. Change the **Margins** to **None**.
+1. Enable the **Background graphics** option.
+1. Click **Save**.

 ![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings-2.png)

@@ -924,7 +979,18 @@ This will only display in the notes window.

 Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations.

-When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`.
+When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`.
+
+#### Speaker notes clock and timers
+
+The speaker notes window will also show:
+
+- Time elapsed since the beginning of the presentation.  If you hover the mouse above this section, a timer reset button will appear.
+- Current wall-clock time
+- (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue).
+
+The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide.  120 can be a reasonable rule of thumb.  Timings can also be given per slide `<section>` by setting the `data-timing` attribute.  Both values are in numbers of seconds.
+

 ## Server Side Speaker Notes

@@ -1026,11 +1092,13 @@ Server that receives the slideChanged events from the master presentation and br
 1. ```npm install```
 2. ```node plugin/multiplex```

-Or you use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).
+Or you can use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).

 You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token).

-You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. It is simple to deploy to nodejitsu, heroku, your own environment, etc.
+You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed.
+
+For anything mission critical I recommend you run your own server. The easiest way to do this is by installing [now](https://zeit.co/now). With that installed, deploying your own Multiplex server is as easy running the following command from the reveal.js folder: `now plugin/multiplex`.

 ##### socket.io server as file static server

@@ -1096,7 +1164,7 @@ Reveal.initialize({
 	// other options ...

 	math: {
-		mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
+		mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
 		config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
 	},

@@ -1153,7 +1221,7 @@ Some reveal.js features, like external Markdown and speaker notes, require that

 1. Open <http://localhost:8000> to view your presentation

-   You can change the port by using `npm start -- --port 8001`.
+   You can change the port by using `npm start -- --port=8001`.


 ### Folder Structure
@@ -1167,4 +1235,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that

 MIT licensed

-Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+Copyright (C) 2017 Hakim El Hattab, http://hakim.se
--- a/bower.json
+++ b/bower.json
@@ -1,11 +1,11 @@
 {
  "name": "reveal.js",
-  "version": "3.4.1",
+  "version": "3.6.0",
  "main": [
    "js/reveal.js",
    "css/reveal.css"
  ],
-  "homepage": "http://lab.hakim.se/reveal-js/",
+  "homepage": "http://revealjs.com",
  "license": "MIT",
  "description": "The HTML Presentation Framework",
  "authors": [
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -87,14 +87,14 @@ ul, ol, div, p {
 	position: relative;
 	overflow: hidden;
 	z-index: 1;
+
+	page-break-after: always;
 }

 .reveal .slides section {
-	page-break-after: always !important;
-
 	visibility: visible !important;
 	display: block !important;
-	position: relative !important;
+	position: absolute !important;

 	margin: 0 !important;
 	padding: 0 !important;
@@ -115,6 +115,7 @@ ul, ol, div, p {
 }

 .reveal section.stack {
+	position: relative !important;
 	margin: 0 !important;
 	padding: 0 !important;
 	page-break-after: avoid !important;
@@ -143,9 +144,14 @@ ul, ol, div, p {
 }

 /* Display slide speaker notes when 'showNotes' is enabled */
+.reveal.show-notes {
+	max-width: none;
+	max-height: none;
+}
 .reveal .speaker-notes-pdf {
 	display: block;
 	width: 100%;
+	height: auto;
 	max-height: none;
 	top: auto;
 	right: auto;
@@ -161,6 +167,7 @@ ul, ol, div, p {
 	background-color: transparent;
 	padding: 20px;
 	page-break-after: always;
+	border: 0;
 }

 /* Display slide numbers when 'slideNumber' is enabled */
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1,9 +1,9 @@
 /*!
 * reveal.js
- * http://lab.hakim.se/reveal-js
+ * http://revealjs.com
 * MIT licensed
 *
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
 */
 /*********************************************
 * RESET STYLES
@@ -53,8 +53,7 @@ body {
 .reveal .slides section .fragment {
  opacity: 0;
  visibility: hidden;
-  -webkit-transition: all .2s ease;
-          transition: all .2s ease; }
+  transition: all .2s ease; }
  .reveal .slides section .fragment.visible {
    opacity: 1;
    visibility: inherit; }
@@ -189,100 +188,261 @@ body {
 /*********************************************
 * CONTROLS
 *********************************************/
+@-webkit-keyframes bounce-right {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px); }
+  30% {
+    -webkit-transform: translateX(-5px);
+            transform: translateX(-5px); } }
+@keyframes bounce-right {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px); }
+  30% {
+    -webkit-transform: translateX(-5px);
+            transform: translateX(-5px); } }
+
+@-webkit-keyframes bounce-down {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  20% {
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px); }
+  30% {
+    -webkit-transform: translateY(-5px);
+            transform: translateY(-5px); } }
+
+@keyframes bounce-down {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  20% {
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px); }
+  30% {
+    -webkit-transform: translateY(-5px);
+            transform: translateY(-5px); } }
+
 .reveal .controls {
  display: none;
-  position: fixed;
-  width: 110px;
-  height: 110px;
-  z-index: 30;
-  right: 10px;
-  bottom: 10px;
-  -webkit-user-select: none; }
-
-.reveal .controls button {
-  padding: 0;
  position: absolute;
-  opacity: 0.05;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-  border: 12px solid transparent;
-  -webkit-transform: scale(0.9999);
-          transform: scale(0.9999);
-  -webkit-transition: all 0.2s ease;
-          transition: all 0.2s ease;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent; }
+  top: auto;
+  bottom: 12px;
+  right: 12px;
+  left: auto;
+  z-index: 1;
+  color: #000;
+  pointer-events: none;
+  font-size: 10px; }
+  .reveal .controls button {
+    position: absolute;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    color: currentColor;
+    -webkit-transform: scale(0.9999);
+            transform: scale(0.9999);
+    transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
+    z-index: 2;
+    pointer-events: auto;
+    font-size: inherit;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent; }
+  .reveal .controls .controls-arrow:before,
+  .reveal .controls .controls-arrow:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2.6em;
+    height: 0.5em;
+    border-radius: 0.25em;
+    background-color: currentColor;
+    transition: all 0.15s ease, background-color 0.8s ease;
+    -webkit-transform-origin: 0.2em 50%;
+            transform-origin: 0.2em 50%;
+    will-change: transform; }
+  .reveal .controls .controls-arrow {
+    position: relative;
+    width: 3.6em;
+    height: 3.6em; }
+    .reveal .controls .controls-arrow:before {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
+    .reveal .controls .controls-arrow:after {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
+    .reveal .controls .controls-arrow:hover:before {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }
+    .reveal .controls .controls-arrow:hover:after {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }
+    .reveal .controls .controls-arrow:active:before {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }
+    .reveal .controls .controls-arrow:active:after {
+      -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);
+              transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }
+  .reveal .controls .navigate-left {
+    right: 6.4em;
+    bottom: 3.2em;
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
+  .reveal .controls .navigate-right {
+    right: 0;
+    bottom: 3.2em;
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px); }
+    .reveal .controls .navigate-right .controls-arrow {
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .reveal .controls .navigate-right.highlight {
+      -webkit-animation: bounce-right 2s 50 both ease-out;
+              animation: bounce-right 2s 50 both ease-out; }
+  .reveal .controls .navigate-up {
+    right: 3.2em;
+    bottom: 6.4em;
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px); }
+    .reveal .controls .navigate-up .controls-arrow {
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+  .reveal .controls .navigate-down {
+    right: 3.2em;
+    bottom: 0;
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px); }
+    .reveal .controls .navigate-down .controls-arrow {
+      -webkit-transform: rotate(-90deg);
+              transform: rotate(-90deg); }
+    .reveal .controls .navigate-down.highlight {
+      -webkit-animation: bounce-down 2s 50 both ease-out;
+              animation: bounce-down 2s 50 both ease-out; }
+  .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
+  .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
+    opacity: 0.3; }
+    .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
+    .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
+      opacity: 1; }
+  .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
+  .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+    opacity: 0;
+    visibility: hidden; }
+  .reveal .controls .enabled {
+    visibility: visible;
+    opacity: 0.9;
+    cursor: pointer;
+    -webkit-transform: none;
+            transform: none; }
+  .reveal .controls .enabled.fragmented {
+    opacity: 0.5; }
+  .reveal .controls .enabled:hover,
+  .reveal .controls .enabled.fragmented:hover {
+    opacity: 1; }

-.reveal .controls .enabled {
-  opacity: 0.7;
-  cursor: pointer; }
+.reveal:not(.has-vertical-slides) .controls .navigate-left {
+  bottom: 1.4em;
+  right: 5.5em; }

-.reveal .controls .enabled:active {
-  margin-top: 1px; }
+.reveal:not(.has-vertical-slides) .controls .navigate-right {
+  bottom: 1.4em;
+  right: 0.5em; }

-.reveal .controls .navigate-left {
-  top: 42px;
-  border-right-width: 22px;
-  border-right-color: #000; }
+.reveal:not(.has-horizontal-slides) .controls .navigate-up {
+  right: 1.4em;
+  bottom: 5em; }

-.reveal .controls .navigate-left.fragmented {
-  opacity: 0.3; }
+.reveal:not(.has-horizontal-slides) .controls .navigate-down {
+  right: 1.4em;
+  bottom: 0.5em; }

-.reveal .controls .navigate-right {
-  left: 74px;
-  top: 42px;
-  border-left-width: 22px;
-  border-left-color: #000; }
+.reveal.has-dark-background .controls {
+  color: #fff; }

-.reveal .controls .navigate-right.fragmented {
-  opacity: 0.3; }
+.reveal.has-light-background .controls {
+  color: #000; }

-.reveal .controls .navigate-up {
-  left: 42px;
-  border-bottom-width: 22px;
-  border-bottom-color: #000; }
+.reveal.no-hover .controls .controls-arrow:hover:before,
+.reveal.no-hover .controls .controls-arrow:active:before {
+  -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
+          transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }

-.reveal .controls .navigate-up.fragmented {
-  opacity: 0.3; }
+.reveal.no-hover .controls .controls-arrow:hover:after,
+.reveal.no-hover .controls .controls-arrow:active:after {
+  -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
+          transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

-.reveal .controls .navigate-down {
-  left: 42px;
-  top: 74px;
-  border-top-width: 22px;
-  border-top-color: #000; }
-
-.reveal .controls .navigate-down.fragmented {
-  opacity: 0.3; }
+@media screen and (min-width: 500px) {
+  .reveal .controls[data-controls-layout="edges"] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+  .reveal .controls[data-controls-layout="edges"] .navigate-left,
+  .reveal .controls[data-controls-layout="edges"] .navigate-right,
+  .reveal .controls[data-controls-layout="edges"] .navigate-up,
+  .reveal .controls[data-controls-layout="edges"] .navigate-down {
+    bottom: auto;
+    right: auto; }
+  .reveal .controls[data-controls-layout="edges"] .navigate-left {
+    top: 50%;
+    left: 8px;
+    margin-top: -1.8em; }
+  .reveal .controls[data-controls-layout="edges"] .navigate-right {
+    top: 50%;
+    right: 8px;
+    margin-top: -1.8em; }
+  .reveal .controls[data-controls-layout="edges"] .navigate-up {
+    top: 8px;
+    left: 50%;
+    margin-left: -1.8em; }
+  .reveal .controls[data-controls-layout="edges"] .navigate-down {
+    bottom: 8px;
+    left: 50%;
+    margin-left: -1.8em; } }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  position: fixed;
+  position: absolute;
  display: none;
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2); }
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff; }

 .reveal .progress:after {
  content: '';
  display: block;
  position: absolute;
-  height: 20px;
+  height: 10px;
  width: 100%;
-  top: -20px; }
+  top: -10px; }

 .reveal .progress span {
  display: block;
  height: 100%;
  width: 0px;
-  background-color: #000;
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-          transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+  background-color: currentColor;
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

 /*********************************************
 * SLIDE NUMBER
@@ -314,6 +474,10 @@ body {
  -ms-touch-action: none;
      touch-action: none; }

+@media only screen and (orientation: landscape) {
+  .reveal.ua-iphone {
+    position: fixed; } }
+
 .reveal .slides {
  position: absolute;
  width: 100%;
@@ -323,6 +487,7 @@ body {
  bottom: 0;
  left: 0;
  margin: auto;
+  pointer-events: none;
  overflow: visible;
  z-index: 1;
  text-align: center;
@@ -340,29 +505,26 @@ body {
  position: absolute;
  width: 100%;
  padding: 20px 0px;
+  pointer-events: auto;
  z-index: 10;
  -webkit-transform-style: flat;
          transform-style: flat;
-  -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-          transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+  transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

 /* Global transition speed settings */
 .reveal[data-transition-speed="fast"] .slides section {
-  -webkit-transition-duration: 400ms;
-          transition-duration: 400ms; }
+  transition-duration: 400ms; }

 .reveal[data-transition-speed="slow"] .slides section {
-  -webkit-transition-duration: 1200ms;
-          transition-duration: 1200ms; }
+  transition-duration: 1200ms; }

 /* Slide-specific transition speed overrides */
 .reveal .slides section[data-transition-speed="fast"] {
-  -webkit-transition-duration: 400ms;
-          transition-duration: 400ms; }
+  transition-duration: 400ms; }

 .reveal .slides section[data-transition-speed="slow"] {
-  -webkit-transition-duration: 1200ms;
-          transition-duration: 1200ms; }
+  transition-duration: 1200ms; }

 .reveal .slides > section.stack {
  padding-top: 0;
@@ -374,6 +536,12 @@ body {
  z-index: 11;
  opacity: 1; }

+.reveal .slides > section:empty,
+.reveal .slides > section > section:empty,
+.reveal .slides > section[data-background-interactive],
+.reveal .slides > section > section[data-background-interactive] {
+  pointer-events: none; }
+
 .reveal.center,
 .reveal.center .slides,
 .reveal.center .slides section {
@@ -558,8 +726,7 @@ body {
 *********************************************/
 .reveal .slides section[data-transition=zoom],
 .reveal.zoom .slides section:not([data-transition]) {
-  -webkit-transition-timing-function: ease;
-          transition-timing-function: ease; }
+  transition-timing-function: ease; }

 .reveal .slides > section[data-transition=zoom].past,
 .reveal .slides > section[data-transition~=zoom-out].past,
@@ -589,6 +756,10 @@ body {

 /*********************************************
 * CUBE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
 *********************************************/
 .reveal.cube .slides {
  -webkit-perspective: 1300px;
@@ -664,6 +835,10 @@ body {

 /*********************************************
 * PAGE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
 *********************************************/
 .reveal.page .slides {
  -webkit-perspective-origin: 0% 50%;
@@ -743,13 +918,11 @@ body {
 .reveal.fade .slides > section > section:not([data-transition]) {
  -webkit-transform: none;
          transform: none;
-  -webkit-transition: opacity 0.5s;
-          transition: opacity 0.5s; }
+  transition: opacity 0.5s; }

 .reveal.fade.overview .slides section,
 .reveal.fade.overview .slides > section > section {
-  -webkit-transition: none;
-          transition: none; }
+  transition: none; }

 /*********************************************
 * NO TRANSITION
@@ -758,8 +931,7 @@ body {
 .reveal.none .slides section:not([data-transition]) {
  -webkit-transform: none;
          transform: none;
-  -webkit-transition: none;
-          transition: none; }
+  transition: none; }

 /*********************************************
 * PAUSED MODE
@@ -774,8 +946,7 @@ body {
  visibility: hidden;
  opacity: 0;
  z-index: 100;
-  -webkit-transition: all 1s ease;
-          transition: all 1s ease; }
+  transition: all 1s ease; }

 .reveal.paused .pause-overlay {
  visibility: visible;
@@ -817,8 +988,7 @@ body {

 .reveal .no-transition,
 .reveal .no-transition * {
-  -webkit-transition: none !important;
-          transition: none !important; }
+  transition: none !important; }

 /*********************************************
 * PER-SLIDE BACKGROUNDS
@@ -839,19 +1009,20 @@ body {
  height: 100%;
  opacity: 0;
  visibility: hidden;
+  overflow: hidden;
  background-color: transparent;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
-  -webkit-transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-          transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+  transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

 .reveal .slide-background.stack {
  display: block; }

 .reveal .slide-background.present {
  opacity: 1;
-  visibility: visible; }
+  visibility: visible;
+  z-index: 2; }

 .print-pdf .reveal .slide-background {
  opacity: 1 !important;
@@ -865,13 +1036,18 @@ body {
  max-width: none;
  max-height: none;
  top: 0;
-  left: 0; }
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover; }
+
+.reveal .slide-background[data-background-size="contain"] video {
+  -o-object-fit: contain;
+     object-fit: contain; }

 /* Immediate transition style */
 .reveal[data-background-transition=none] > .backgrounds .slide-background,
 .reveal > .backgrounds .slide-background[data-background-transition=none] {
-  -webkit-transition: none;
-          transition: none; }
+  transition: none; }

 /* Slide */
 .reveal[data-background-transition=slide] > .backgrounds .slide-background,
@@ -953,8 +1129,7 @@ body {
 /* Zoom */
 .reveal[data-background-transition=zoom] > .backgrounds .slide-background,
 .reveal > .backgrounds .slide-background[data-background-transition=zoom] {
-  -webkit-transition-timing-function: ease;
-          transition-timing-function: ease; }
+  transition-timing-function: ease; }

 .reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,
 .reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {
@@ -986,12 +1161,10 @@ body {

 /* Global transition speed settings */
 .reveal[data-transition-speed="fast"] > .backgrounds .slide-background {
-  -webkit-transition-duration: 400ms;
-          transition-duration: 400ms; }
+  transition-duration: 400ms; }

 .reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
-  -webkit-transition-duration: 1200ms;
-          transition-duration: 1200ms; }
+  transition-duration: 1200ms; }

 /*********************************************
 * OVERVIEW
@@ -1017,8 +1190,7 @@ body {
    outline-offset: 10px; }
  .reveal.overview .slides section .fragment {
    opacity: 1;
-    -webkit-transition: none;
-            transition: none; }
+    transition: none; }
  .reveal.overview .slides section:after,
  .reveal.overview .slides section:before {
    display: none !important; }
@@ -1037,20 +1209,16 @@ body {
    visibility: visible;
    outline: 10px solid rgba(150, 150, 150, 0.1);
    outline-offset: 10px; }
+  .reveal.overview .backgrounds .slide-background.stack {
+    overflow: visible; }

 .reveal.overview .slides section,
 .reveal.overview-deactivating .slides section {
-  -webkit-transition: none;
-          transition: none; }
+  transition: none; }

 .reveal.overview .backgrounds .slide-background,
 .reveal.overview-deactivating .backgrounds .slide-background {
-  -webkit-transition: none;
-          transition: none; }
-
-.reveal.overview-animated .slides {
-  -webkit-transition: -webkit-transform 0.4s ease;
-          transition: transform 0.4s ease; }
+  transition: none; }

 /*********************************************
 * RTL SUPPORT
@@ -1080,17 +1248,14 @@ body {
 * PARALLAX BACKGROUND
 *********************************************/
 .reveal.has-parallax-background .backgrounds {
-  -webkit-transition: all 0.8s ease;
-          transition: all 0.8s ease; }
+  transition: all 0.8s ease; }

 /* Global transition speed settings */
 .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
-  -webkit-transition-duration: 400ms;
-          transition-duration: 400ms; }
+  transition-duration: 400ms; }

 .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
-  -webkit-transition-duration: 1200ms;
-          transition-duration: 1200ms; }
+  transition-duration: 1200ms; }

 /*********************************************
 * LINK PREVIEW OVERLAY
@@ -1105,8 +1270,7 @@ body {
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
-  -webkit-transition: all 0.3s ease;
-          transition: all 0.3s ease; }
+  transition: all 0.3s ease; }

 .reveal .overlay.visible {
  opacity: 1;
@@ -1124,8 +1288,7 @@ body {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
  visibility: visible;
  opacity: 0.6;
-  -webkit-transition: all 0.3s ease;
-          transition: all 0.3s ease; }
+  transition: all 0.3s ease; }

 .reveal .overlay header {
  position: absolute;
@@ -1166,7 +1329,6 @@ body {
 .reveal .overlay .viewport {
  position: absolute;
  display: -webkit-box;
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 40px;
@@ -1182,8 +1344,7 @@ body {
  border: 0;
  opacity: 0;
  visibility: hidden;
-  -webkit-transition: all 0.3s ease;
-          transition: all 0.3s ease; }
+  transition: all 0.3s ease; }

 .reveal .overlay.overlay-preview.loaded .viewport iframe {
  opacity: 1;
@@ -1200,8 +1361,7 @@ body {

 .reveal .overlay.overlay-preview .x-frame-error {
  opacity: 0;
-  -webkit-transition: opacity 0.3s ease 0.3s;
-          transition: opacity 0.3s ease 0.3s; }
+  transition: opacity 0.3s ease 0.3s; }

 .reveal .overlay.overlay-preview.loaded .x-frame-error {
  opacity: 1; }
@@ -1246,13 +1406,13 @@ body {
 * PLAYBACK COMPONENT
 *********************************************/
 .reveal .playback {
-  position: fixed;
+  position: absolute;
  left: 15px;
  bottom: 20px;
  z-index: 30;
  cursor: pointer;
-  -webkit-transition: all 400ms ease;
-          transition: all 400ms ease; }
+  transition: all 400ms ease;
+  -webkit-tap-highlight-color: transparent; }

 .reveal.overview .playback {
  opacity: 0;
@@ -1280,8 +1440,7 @@ body {
  position: relative;
  padding: 0 2px;
  pointer-events: none;
-  -webkit-transition: all 400ms ease;
-          transition: all 400ms ease;
+  transition: all 400ms ease;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
@@ -1317,33 +1476,64 @@ body {
 .reveal .speaker-notes {
  display: none;
  position: absolute;
-  width: 70%;
-  max-height: 15%;
-  left: 15%;
-  bottom: 26px;
-  padding: 10px;
+  width: 25vw;
+  height: 100%;
+  top: 0;
+  left: 100%;
+  padding: 14px 18px 14px 18px;
  z-index: 1;
  font-size: 18px;
  line-height: 1.4;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  color: #222;
+  background-color: #f5f5f5;
  overflow: auto;
  box-sizing: border-box;
  text-align: left;
  font-family: Helvetica, sans-serif;
  -webkit-overflow-scrolling: touch; }
+  .reveal .speaker-notes .notes-placeholder {
+    color: #ccc;
+    font-style: italic; }
+  .reveal .speaker-notes:focus {
+    outline: none; }
+  .reveal .speaker-notes:before {
+    content: 'Speaker notes';
+    display: block;
+    margin-bottom: 10px;
+    opacity: 0.5; }

-.reveal .speaker-notes.visible:not(:empty) {
+.reveal.show-notes {
+  max-width: 75vw;
+  overflow: visible; }
+
+.reveal.show-notes .speaker-notes {
  display: block; }

-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1600px) {
  .reveal .speaker-notes {
-    font-size: 14px; } }
+    font-size: 20px; } }
+
+@media screen and (max-width: 1024px) {
+  .reveal.show-notes {
+    border-left: 0;
+    max-width: none;
+    max-height: 70%;
+    overflow: visible; }
+  .reveal.show-notes .speaker-notes {
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 42.8571428571%; } }

@media screen and (max-width: 600px) {
+  .reveal.show-notes {
+    max-height: 60%; }
+  .reveal.show-notes .speaker-notes {
+    top: 100%;
+    height: 66.6666666667%; }
  .reveal .speaker-notes {
-    width: 90%;
-    left: 5%; } }
+    font-size: 14px; } }

 /*********************************************
 * ZOOM PLUGIN
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1,9 +1,9 @@
 /*!
 * reveal.js
- * http://lab.hakim.se/reveal-js
+ * http://revealjs.com
 * MIT licensed
 *
- * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
 */


@@ -235,90 +235,279 @@ body {
 * CONTROLS
 *********************************************/

+@keyframes bounce-right {
+	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+	20% {transform: translateX(10px);}
+	30% {transform: translateX(-5px);}
+}
+
+@keyframes bounce-down {
+	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
+	20% {transform: translateY(10px);}
+	30% {transform: translateY(-5px);}
+}
+
+$controlArrowSize: 3.6em;
+$controlArrowSpacing: 1.4em;
+$controlArrowLength: 2.6em;
+$controlArrowThickness: 0.5em;
+$controlsArrowAngle: 45deg;
+$controlsArrowAngleHover: 40deg;
+$controlsArrowAngleActive: 36deg;
+
+@mixin controlsArrowTransform( $angle ) {
+	&:before {
+		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+	}
+
+	&:after {
+		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
+	}
+}
+
 .reveal .controls {
+	$spacing: 12px;
+
 	display: none;
-	position: fixed;
-	width: 110px;
-	height: 110px;
-	z-index: 30;
-	right: 10px;
-	bottom: 10px;
-
-	-webkit-user-select: none;
-}
-
-.reveal .controls button {
-	padding: 0;
 	position: absolute;
-	opacity: 0.05;
-	width: 0;
-	height: 0;
-	background-color: transparent;
-	border: 12px solid transparent;
-	transform: scale(.9999);
-	transition: all 0.2s ease;
-	-webkit-appearance: none;
-	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	top: auto;
+	bottom: $spacing;
+	right: $spacing;
+	left: auto;
+	z-index: 1;
+	color: #000;
+	pointer-events: none;
+	font-size: 10px;
+
+	button {
+		position: absolute;
+		padding: 0;
+		background-color: transparent;
+		border: 0;
+		outline: 0;
+		cursor: pointer;
+		color: currentColor;
+		transform: scale(.9999);
+		transition: color 0.2s ease,
+					opacity 0.2s ease,
+					transform 0.2s ease;
+		z-index: 2; // above slides
+		pointer-events: auto;
+		font-size: inherit;
+
+		visibility: hidden;
+		opacity: 0;
+
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	}
+
+	.controls-arrow:before,
+	.controls-arrow:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: $controlArrowLength;
+		height: $controlArrowThickness;
+		border-radius: $controlArrowThickness/2;
+		background-color: currentColor;
+
+		transition: all 0.15s ease, background-color 0.8s ease;
+		transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
+		will-change: transform;
+	}
+
+	.controls-arrow {
+		position: relative;
+		width: $controlArrowSize;
+		height: $controlArrowSize;
+
+		@include controlsArrowTransform( $controlsArrowAngle );
+
+		&:hover {
+			@include controlsArrowTransform( $controlsArrowAngleHover );
+		}
+
+		&:active {
+			@include controlsArrowTransform( $controlsArrowAngleActive );
+		}
+	}
+
+	.navigate-left {
+		right: $controlArrowSize + $controlArrowSpacing*2;
+		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		transform: translateX( -10px );
+	}
+
+	.navigate-right {
+		right: 0;
+		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		transform: translateX( 10px );
+
+		.controls-arrow {
+			transform: rotate( 180deg );
+		}
+
+		&.highlight {
+			animation: bounce-right 2s 50 both ease-out;
+		}
+	}
+
+	.navigate-up {
+		right: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing*2 + $controlArrowSize;
+		transform: translateY( -10px );
+
+		.controls-arrow {
+			transform: rotate( 90deg );
+		}
+	}
+
+	.navigate-down {
+		right: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: 0;
+		transform: translateY( 10px );
+
+		.controls-arrow {
+			transform: rotate( -90deg );
+		}
+
+		&.highlight {
+			animation: bounce-down 2s 50 both ease-out;
+		}
+	}
+
+	// Back arrow style: "faded":
+	// Deemphasize backwards navigation arrows in favor of drawing
+	// attention to forwards navigation
+	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
+	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
+		opacity: 0.3;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	// Back arrow style: "hidden":
+	// Never show arrows for backwards navigation
+	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
+	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	// Any control button that can be clicked is "enabled"
+	.enabled {
+		visibility: visible;
+		opacity: 0.9;
+		cursor: pointer;
+		transform: none;
+	}
+
+	// Any control button that leads to showing or hiding
+	// a fragment
+	.enabled.fragmented {
+		opacity: 0.5;
+	}
+
+	.enabled:hover,
+	.enabled.fragmented:hover {
+		opacity: 1;
+	}
 }

-.reveal .controls .enabled {
-	opacity: 0.7;
-	cursor: pointer;
+// Adjust the layout when there are no vertical slides
+.reveal:not(.has-vertical-slides) .controls .navigate-left {
+	bottom: $controlArrowSpacing;
+	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
 }

-.reveal .controls .enabled:active {
-	margin-top: 1px;
+.reveal:not(.has-vertical-slides) .controls .navigate-right {
+	bottom: $controlArrowSpacing;
+	right: 0.5em;
 }

-	.reveal .controls .navigate-left {
-		top: 42px;
+// Adjust the layout when there are no horizontal slides
+.reveal:not(.has-horizontal-slides) .controls .navigate-up {
+	right: $controlArrowSpacing;
+	bottom: $controlArrowSpacing + $controlArrowSize;
+}
+.reveal:not(.has-horizontal-slides) .controls .navigate-down {
+	right: $controlArrowSpacing;
+	bottom: 0.5em;
+}

-		border-right-width: 22px;
-		border-right-color: #000;
-	}
-		.reveal .controls .navigate-left.fragmented {
-			opacity: 0.3;
+// Invert arrows based on background color
+.reveal.has-dark-background .controls {
+	color: #fff;
+}
+.reveal.has-light-background .controls {
+	color: #000;
+}
+
+// Disable active states on touch devices
+.reveal.no-hover .controls .controls-arrow:hover,
+.reveal.no-hover .controls .controls-arrow:active {
+	@include controlsArrowTransform( $controlsArrowAngle );
+}
+
+// Edge aligned controls layout
+@media screen and (min-width: 500px) {
+
+	$spacing: 8px;
+
+	.reveal .controls[data-controls-layout="edges"] {
+		& {
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
 		}

-	.reveal .controls .navigate-right {
-		left: 74px;
-		top: 42px;
-
-		border-left-width: 22px;
-		border-left-color: #000;
-	}
-		.reveal .controls .navigate-right.fragmented {
-			opacity: 0.3;
+		.navigate-left,
+		.navigate-right,
+		.navigate-up,
+		.navigate-down {
+			bottom: auto;
+			right: auto;
 		}

-	.reveal .controls .navigate-up {
-		left: 42px;
-
-		border-bottom-width: 22px;
-		border-bottom-color: #000;
-	}
-		.reveal .controls .navigate-up.fragmented {
-			opacity: 0.3;
+		.navigate-left {
+			top: 50%;
+			left: $spacing;
+			margin-top: -$controlArrowSize/2;
 		}

-	.reveal .controls .navigate-down {
-		left: 42px;
-		top: 74px;
-
-		border-top-width: 22px;
-		border-top-color: #000;
-	}
-		.reveal .controls .navigate-down.fragmented {
-			opacity: 0.3;
+		.navigate-right {
+			top: 50%;
+			right: $spacing;
+			margin-top: -$controlArrowSize/2;
 		}

+		.navigate-up {
+			top: $spacing;
+			left: 50%;
+			margin-left: -$controlArrowSize/2;
+		}
+
+		.navigate-down {
+			bottom: $spacing;
+			left: 50%;
+			margin-left: -$controlArrowSize/2;
+		}
+	}
+
+}
+

 /*********************************************
 * PROGRESS BAR
 *********************************************/

 .reveal .progress {
-	position: fixed;
+	position: absolute;
 	display: none;
 	height: 3px;
 	width: 100%;
@@ -327,21 +516,22 @@ body {
 	z-index: 10;

 	background-color: rgba( 0, 0, 0, 0.2 );
+	color: #fff;
 }
 	.reveal .progress:after {
 		content: '';
 		display: block;
 		position: absolute;
-		height: 20px;
+		height: 10px;
 		width: 100%;
-		top: -20px;
+		top: -10px;
 	}
 	.reveal .progress span {
 		display: block;
 		height: 100%;
 		width: 0px;

-		background-color: #000;
+		background-color: currentColor;
 		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}

@@ -379,6 +569,16 @@ body {
 	touch-action: none;
 }

+// Mobile Safari sometimes overlays a header at the top
+// of the page when in landscape mode. Using fixed
+// positioning ensures that reveal.js reduces its height
+// when this header is visible.
+@media only screen and (orientation : landscape) {
+	.reveal.ua-iphone {
+		position: fixed;
+	}
+}
+
 .reveal .slides {
 	position: absolute;
 	width: 100%;
@@ -388,6 +588,7 @@ body {
 	bottom: 0;
 	left: 0;
 	margin: auto;
+	pointer-events: none;

 	overflow: visible;
 	z-index: 1;
@@ -406,6 +607,7 @@ body {
 	position: absolute;
 	width: 100%;
 	padding: 20px 0px;
+	pointer-events: auto;

 	z-index: 10;
 	transform-style: flat;
@@ -443,6 +645,13 @@ body {
 	opacity: 1;
 }

+.reveal .slides>section:empty,
+.reveal .slides>section>section:empty,
+.reveal .slides>section[data-background-interactive],
+.reveal .slides>section>section[data-background-interactive] {
+	pointer-events: none;
+}
+
 .reveal.center,
 .reveal.center .slides,
 .reveal.center .slides section {
@@ -610,6 +819,10 @@ body {

 /*********************************************
 * CUBE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
 *********************************************/

 .reveal.cube .slides {
@@ -682,6 +895,10 @@ body {

 /*********************************************
 * PAGE TRANSITION
+ *
+ * WARNING:
+ * this is deprecated and will be removed in a
+ * future version.
 *********************************************/

 .reveal.page .slides {
@@ -866,6 +1083,7 @@ body {
 		height: 100%;
 		opacity: 0;
 		visibility: hidden;
+		overflow: hidden;

 		background-color: rgba( 0, 0, 0, 0 );
 		background-position: 50% 50%;
@@ -882,6 +1100,7 @@ body {
 	.reveal .slide-background.present {
 		opacity: 1;
 		visibility: visible;
+		z-index: 2;
 	}

 	.print-pdf .reveal .slide-background {
@@ -898,7 +1117,11 @@ body {
 	max-height: none;
 	top: 0;
 	left: 0;
+	object-fit: cover;
 }
+	.reveal .slide-background[data-background-size="contain"] video {
+		object-fit: contain;
+	}

 /* Immediate transition style */
 .reveal[data-background-transition=none]>.backgrounds .slide-background,
@@ -1080,6 +1303,10 @@ body {
 		outline: 10px solid rgba(150,150,150,0.1);
 		outline-offset: 10px;
 	}
+
+	.backgrounds .slide-background.stack {
+		overflow: visible;
+	}
 }

 // Disable transitions transitions while we're activating
@@ -1094,10 +1321,6 @@ body {
 	transition: none;
 }

-.reveal.overview-animated .slides {
-	transition: transform 0.4s ease;
-}
-

 /*********************************************
 * RTL SUPPORT
@@ -1313,12 +1536,13 @@ body {
 *********************************************/

 .reveal .playback {
-	position: fixed;
+	position: absolute;
 	left: 15px;
 	bottom: 20px;
 	z-index: 30;
 	cursor: pointer;
 	transition: all 400ms ease;
+	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
 }

 .reveal.overview .playback {
@@ -1387,37 +1611,84 @@ body {
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: 70%;
-	max-height: 15%;
-	left: 15%;
-	bottom: 26px;
-	padding: 10px;
+	width: 25vw;
+	height: 100%;
+	top: 0;
+	left: 100%;
+	padding: 14px 18px 14px 18px;
 	z-index: 1;
 	font-size: 18px;
 	line-height: 1.4;
-	color: #fff;
-	background-color: rgba(0,0,0,0.5);
+	border: 1px solid rgba( 0, 0, 0, 0.05 );
+	color: #222;
+	background-color: #f5f5f5;
 	overflow: auto;
 	box-sizing: border-box;
 	text-align: left;
 	font-family: Helvetica, sans-serif;
 	-webkit-overflow-scrolling: touch;
+
+	.notes-placeholder {
+		color: #ccc;
+		font-style: italic;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:before {
+		content: 'Speaker notes';
+		display: block;
+		margin-bottom: 10px;
+		opacity: 0.5;
+	}
 }

-.reveal .speaker-notes.visible:not(:empty) {
+
+.reveal.show-notes {
+	max-width: 75vw;
+	overflow: visible;
+}
+
+.reveal.show-notes .speaker-notes {
 	display: block;
 }

-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1600px) {
 	.reveal .speaker-notes {
-		font-size: 14px;
+		font-size: 20px;
+	}
+}
+
+@media screen and (max-width: 1024px) {
+	.reveal.show-notes {
+		border-left: 0;
+		max-width: none;
+		max-height: 70%;
+		overflow: visible;
+	}
+
+	.reveal.show-notes .speaker-notes {
+		top: 100%;
+		left: 0;
+		width: 100%;
+		height: (30/0.7)*1%;
 	}
 }

@media screen and (max-width: 600px) {
+	.reveal.show-notes {
+		max-height: 60%;
+	}
+
+	.reveal.show-notes .speaker-notes {
+		top: 100%;
+		height: (40/0.6)*1%;
+	}
+
 	.reveal .speaker-notes {
-		width: 90%;
-		left: 5%;
+		font-size: 14px;
 	}
 }

--- a/css/theme/README.md
+++ b/css/theme/README.md
@@ -1,6 +1,6 @@
 ## Dependencies

-Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup
+Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup

 ## Creating a Theme

--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -126,10 +126,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -160,7 +156,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -255,42 +252,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #8b743d; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #8b743d; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #8b743d; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #8b743d; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #c0a86e; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #c0a86e; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #c0a86e; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #c0a86e; }
+.reveal .controls {
+  color: #8b743d; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #8b743d; }

 .reveal .progress span {
-  background: #8b743d;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -122,10 +122,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -156,7 +152,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -251,42 +248,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #42affa; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #42affa; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #42affa; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #42affa; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #8dcffc; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #8dcffc; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #8dcffc; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #8dcffc; }
+.reveal .controls {
+  color: #42affa; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #42affa; }

 .reveal .progress span {
-  background: #42affa;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -125,10 +125,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -159,7 +155,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -254,42 +251,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #a23; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #a23; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #a23; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #a23; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #dd5566; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #dd5566; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #dd5566; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #dd5566; }
+.reveal .controls {
+  color: #a23; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #a23; }

 .reveal .progress span {
-  background: #a23;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -128,10 +128,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -162,7 +158,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -257,42 +254,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #13DAEC; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #13DAEC; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #13DAEC; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #13DAEC; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #71e9f4; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #71e9f4; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #71e9f4; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #71e9f4; }
+.reveal .controls {
+  color: #13DAEC; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #13DAEC; }

 .reveal .progress span {
-  background: #13DAEC;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -126,10 +126,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -160,7 +156,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -255,42 +252,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #268bd2; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #268bd2; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #268bd2; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #268bd2; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #78b9e6; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #78b9e6; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #78b9e6; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #78b9e6; }
+.reveal .controls {
+  color: #268bd2; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }

 .reveal .progress span {
-  background: #268bd2;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -120,10 +120,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -154,7 +150,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -249,42 +246,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #e7ad52; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #e7ad52; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #e7ad52; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #e7ad52; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #f3d7ac; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #f3d7ac; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #f3d7ac; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #f3d7ac; }
+.reveal .controls {
+  color: #e7ad52; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #e7ad52; }

 .reveal .progress span {
-  background: #e7ad52;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -122,10 +122,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -156,7 +152,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -251,42 +248,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #51483D; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #51483D; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #51483D; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #51483D; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #8b7c69; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #8b7c69; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #8b7c69; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #8b7c69; }
+.reveal .controls {
+  color: #51483D; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #51483D; }

 .reveal .progress span {
-  background: #51483D;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -125,10 +125,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -159,7 +155,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -254,42 +251,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #00008B; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #00008B; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #00008B; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #00008B; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #0000f1; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #0000f1; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #0000f1; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #0000f1; }
+.reveal .controls {
+  color: #00008B; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #00008B; }

 .reveal .progress span {
-  background: #00008B;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -129,10 +129,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -163,7 +159,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -258,42 +255,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #3b759e; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #3b759e; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #3b759e; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #3b759e; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #74a7cb; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #74a7cb; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #74a7cb; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #74a7cb; }
+.reveal .controls {
+  color: #3b759e; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #3b759e; }

 .reveal .progress span {
-  background: #3b759e;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -126,10 +126,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -160,7 +156,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -255,42 +252,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #268bd2; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #268bd2; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #268bd2; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #268bd2; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #78b9e6; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #78b9e6; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #78b9e6; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #78b9e6; }
+.reveal .controls {
+  color: #268bd2; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }

 .reveal .progress span {
-  background: #268bd2;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -134,11 +134,6 @@ body {
 	margin-left: 40px;
 }

-.reveal q,
-.reveal blockquote {
-	quotes: none;
-}
-
 .reveal blockquote {
 	display: block;
 	position: relative;
@@ -174,8 +169,10 @@ body {

 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 }
+
 .reveal code {
 	font-family: monospace;
+	text-transform: none;
 }

 .reveal pre code {
@@ -297,40 +294,8 @@ body {
 * NAVIGATION CONTROLS
 *********************************************/

-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-	border-right-color: $linkColor;
-}
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-	border-left-color: $linkColor;
-}
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-	border-bottom-color: $linkColor;
-}
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-	border-top-color: $linkColor;
-}
-
-.reveal .controls .navigate-left.enabled:hover {
-	border-right-color: $linkColorHover;
-}
-
-.reveal .controls .navigate-right.enabled:hover {
-	border-left-color: $linkColorHover;
-}
-
-.reveal .controls .navigate-up.enabled:hover {
-	border-bottom-color: $linkColorHover;
-}
-
-.reveal .controls .navigate-down.enabled:hover {
-	border-top-color: $linkColorHover;
+.reveal .controls {
+	color: $linkColor;
 }


@@ -340,10 +305,9 @@ body {

 .reveal .progress {
 	background: rgba(0,0,0,0.2);
+	color: $linkColor;
 }
 	.reveal .progress span {
-		background: $linkColor;
-
 		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -122,10 +122,6 @@ body {
 .reveal dd {
  margin-left: 40px; }

-.reveal q,
-.reveal blockquote {
-  quotes: none; }
-
 .reveal blockquote {
  display: block;
  position: relative;
@@ -156,7 +152,8 @@ body {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

 .reveal code {
-  font-family: monospace; }
+  font-family: monospace;
+  text-transform: none; }

 .reveal pre code {
  display: block;
@@ -251,42 +248,17 @@ body {
 /*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
-  border-right-color: #2a76dd; }
-
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
-  border-left-color: #2a76dd; }
-
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
-  border-bottom-color: #2a76dd; }
-
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
-  border-top-color: #2a76dd; }
-
-.reveal .controls .navigate-left.enabled:hover {
-  border-right-color: #6ca0e8; }
-
-.reveal .controls .navigate-right.enabled:hover {
-  border-left-color: #6ca0e8; }
-
-.reveal .controls .navigate-up.enabled:hover {
-  border-bottom-color: #6ca0e8; }
-
-.reveal .controls .navigate-down.enabled:hover {
-  border-top-color: #6ca0e8; }
+.reveal .controls {
+  color: #2a76dd; }

 /*********************************************
 * PROGRESS BAR
 *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #2a76dd; }

 .reveal .progress span {
-  background: #2a76dd;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
--- a/demo.html
+++ b/demo.html
@@ -44,7 +44,7 @@
 					<h1>Reveal.js</h1>
 					<h3>The HTML Presentation Framework</h3>
 					<p>
-						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
+						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
 					</p>
 				</section>

@@ -83,7 +83,7 @@
 				<section>
 					<h2>Slides</h2>
 					<p>
-						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
+						Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
 					</p>
 				</section>

@@ -295,8 +295,7 @@ function linkify( selector ) {
 				<section>
 					<h2>Clever Quotes</h2>
 					<p>
-						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
+						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
 					</p>
 					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 						&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
@@ -370,7 +369,7 @@ Reveal.addEventListener( 'customevent', function() {
 				<section style="text-align: left;">
 					<h1>THE END</h1>
 					<p>
-						- <a href="http://slides.com">Try the online editor</a> <br>
+						- <a href="https://slides.com">Try the online editor</a> <br>
 						- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
 					</p>
 				</section>
@@ -399,6 +398,7 @@ Reveal.addEventListener( 'customevent', function() {
 					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+					{ src: 'plugin/search/search.js', async: true },
 					{ src: 'plugin/zoom-js/zoom.js', async: true },
 					{ src: 'plugin/notes/notes.js', async: true }
 				]
--- a/index.html
+++ b/index.html
@@ -33,11 +33,10 @@
 		<script src="js/reveal.js"></script>

 		<script>
-			// More info https://github.com/hakimel/reveal.js#configuration
+			// More info about config & dependencies:
+			// - https://github.com/hakimel/reveal.js#configuration
+			// - https://github.com/hakimel/reveal.js#dependencies
 			Reveal.initialize({
-				history: true,
-
-				// More info https://github.com/hakimel/reveal.js#dependencies
 				dependencies: [
 					{ src: 'plugin/markdown/marked.js' },
 					{ src: 'plugin/markdown/markdown.js' },
--- a/js/reveal.js
+++ b/js/reveal.js
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
  "name": "reveal.js",
-  "version": "3.4.1",
+  "version": "3.6.0",
  "description": "The HTML Presentation Framework",
-  "homepage": "http://lab.hakim.se/reveal-js",
+  "homepage": "http://revealjs.com",
  "subdomain": "revealjs",
  "main": "js/reveal.js",
  "scripts": {
    "test": "grunt test",
-    "start": "grunt serve"
+    "start": "grunt serve",
+    "build": "grunt"
  },
  "author": {
    "name": "Hakim El Hattab",
@@ -21,25 +22,22 @@
  "engines": {
    "node": ">=4.0.0"
  },
-  "dependencies": {
-    "express": "~4.14.0",
-    "grunt-cli": "~1.2.0",
-    "mustache": "~2.2.1",
-    "socket.io": "^1.4.8"
-  },
  "devDependencies": {
-    "grunt": "~1.0.1",
-    "grunt-autoprefixer": "~3.0.3",
-    "grunt-contrib-connect": "~0.11.2",
-    "grunt-contrib-cssmin": "~0.14.0",
-    "grunt-contrib-jshint": "~0.11.3",
+    "express": "^4.15.2",
+    "grunt": "^1.0.1",
+    "grunt-autoprefixer": "^3.0.4",
+    "grunt-cli": "^1.2.0",
+    "grunt-contrib-connect": "^1.0.2",
+    "grunt-contrib-cssmin": "^2.1.0",
+    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-qunit": "~1.2.0",
-    "grunt-contrib-uglify": "~0.9.2",
-    "grunt-contrib-watch": "~1.0.0",
-    "grunt-sass": "~1.2.0",
-    "grunt-retire": "~0.3.10",
+    "grunt-contrib-uglify": "^2.3.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-sass": "^2.0.0",
+    "grunt-retire": "^1.0.7",
    "grunt-zip": "~0.17.1",
-    "node-sass": "~3.13.0"
+    "mustache": "^2.3.0",
+    "socket.io": "^1.7.3"
  },
  "license": "MIT"
 }
--- a/plugin/highlight/highlight.js
+++ b/plugin/highlight/highlight.js
--- a/plugin/markdown/markdown.js
+++ b/plugin/markdown/markdown.js
@@ -18,7 +18,7 @@
 }( this, function( marked ) {

 	var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
-		DEFAULT_NOTES_SEPARATOR = 'note:',
+		DEFAULT_NOTES_SEPARATOR = 'notes?:',
 		DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
 		DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';

@@ -31,7 +31,8 @@
 	 */
 	function getMarkdownFromSlide( section ) {

-		var template = section.querySelector( 'script' );
+		// look for a <script> or <textarea data-template> wrapper
+		var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );

 		// strip leading whitespace so it isn't evaluated as code
 		var text = ( template || section ).textContent;
--- a/plugin/math/math.js
+++ b/plugin/math/math.js
@@ -7,7 +7,7 @@
 var RevealMath = window.RevealMath || (function(){

 	var options = Reveal.getConfig().math || {};
-	options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
+	options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
 	options.config = options.config || 'TeX-AMS_HTML-full';

 	loadScript( options.mathjax + '?config=' + options.config, function() {
--- a/plugin/multiplex/master.js
+++ b/plugin/multiplex/master.js
@@ -19,6 +19,9 @@

 	};

+	// post once the page is loaded, so the client follows also on "open URL".
+	window.addEventListener( 'load', post );
+
 	// Monitor events that trigger a change in state
 	Reveal.addEventListener( 'slidechanged', post );
 	Reveal.addEventListener( 'fragmentshown', post );
@@ -28,4 +31,4 @@
 	Reveal.addEventListener( 'paused', post );
 	Reveal.addEventListener( 'resumed', post );

-}());
+}());
--- a/plugin/multiplex/package.json
+++ b/plugin/multiplex/package.json
@@ -2,7 +2,7 @@
  "name": "reveal-js-multiplex",
  "version": "1.0.0",
  "description": "reveal.js multiplex server",
-  "homepage": "http://lab.hakim.se/reveal-js",
+  "homepage": "http://revealjs.com",
  "scripts": {
    "start": "node index.js"
  },
--- a/plugin/notes/notes.html
+++ b/plugin/notes/notes.html
@@ -82,6 +82,7 @@
 				}

 				.speaker-controls-time .label,
+				.speaker-controls-pace .label,
 				.speaker-controls-notes .label {
 					text-transform: uppercase;
 					font-weight: normal;
@@ -90,7 +91,7 @@
 					margin: 0;
 				}

-				.speaker-controls-time {
+				.speaker-controls-time, .speaker-controls-pace {
 					border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
 					margin-bottom: 10px;
 					padding: 10px 16px;
@@ -111,6 +112,13 @@
 				.speaker-controls-time .timer,
 				.speaker-controls-time .clock {
 					width: 50%;
+				}
+
+				.speaker-controls-time .timer,
+				.speaker-controls-time .clock,
+				.speaker-controls-time .pacing .hours-value,
+				.speaker-controls-time .pacing .minutes-value,
+				.speaker-controls-time .pacing .seconds-value {
 					font-size: 1.9em;
 				}

@@ -124,7 +132,23 @@
 				}

 				.speaker-controls-time span.mute {
-					color: #bbb;
+					opacity: 0.3;
+				}
+
+				.speaker-controls-time .pacing-title {
+					margin-top: 5px;
+				}
+
+				.speaker-controls-time .pacing.ahead {
+					color: blue;
+				}
+
+				.speaker-controls-time .pacing.on-track {
+					color: green;
+				}
+
+				.speaker-controls-time .pacing.behind {
+					color: red;
 				}

 				.speaker-controls-notes {
@@ -276,6 +300,11 @@
 					<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
 				</div>
 				<div class="clear"></div>
+
+				<h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
+				<div class="pacing" style="display: none">
+					<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
+				</div>
 			</div>

 			<div class="speaker-controls-notes hidden">
@@ -450,6 +479,47 @@

 				}

+				function getTimings() {
+
+					var slides = Reveal.getSlides();
+					var defaultTiming = Reveal.getConfig().defaultTiming;
+					if (defaultTiming == null) {
+						return null;
+					}
+					var timings = [];
+					for ( var i in slides ) {
+						var slide = slides[i];
+						var timing = defaultTiming;
+						if( slide.hasAttribute( 'data-timing' )) {
+							var t = slide.getAttribute( 'data-timing' );
+							timing = parseInt(t);
+							if( isNaN(timing) ) {
+								console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
+								timing = defaultTiming;
+							}
+						}
+						timings.push(timing);
+					}
+					return timings;
+
+				}
+
+				/**
+				 * Return the number of seconds allocated for presenting
+				 * all slides up to and including this one.
+				 */
+				function getTimeAllocated(timings) {
+
+					var slides = Reveal.getSlides();
+					var allocated = 0;
+					var currentSlide = Reveal.getSlidePastCount();
+					for (var i in slides.slice(0, currentSlide + 1)) {
+						allocated += timings[i];
+					}
+					return allocated;
+
+				}
+
 				/**
 				 * Create the timer and clock and start updating them
 				 * at an interval.
@@ -457,28 +527,78 @@
 				function setupTimer() {

 					var start = new Date(),
-						timeEl = document.querySelector( '.speaker-controls-time' ),
-						clockEl = timeEl.querySelector( '.clock-value' ),
-						hoursEl = timeEl.querySelector( '.hours-value' ),
-						minutesEl = timeEl.querySelector( '.minutes-value' ),
-						secondsEl = timeEl.querySelector( '.seconds-value' );
+					timeEl = document.querySelector( '.speaker-controls-time' ),
+					clockEl = timeEl.querySelector( '.clock-value' ),
+					hoursEl = timeEl.querySelector( '.hours-value' ),
+					minutesEl = timeEl.querySelector( '.minutes-value' ),
+					secondsEl = timeEl.querySelector( '.seconds-value' ),
+					pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
+					pacingEl = timeEl.querySelector( '.pacing' ),
+					pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
+					pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
+					pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
+
+					var timings = getTimings();
+					if (timings !== null) {
+						pacingTitleEl.style.removeProperty('display');
+						pacingEl.style.removeProperty('display');
+					}
+
+					function _displayTime( hrEl, minEl, secEl, time) {
+
+						var sign = Math.sign(time) == -1 ? "-" : "";
+						time = Math.abs(Math.round(time / 1000));
+						var seconds = time % 60;
+						var minutes = Math.floor( time / 60 ) % 60 ;
+						var hours = Math.floor( time / ( 60 * 60 )) ;
+						hrEl.innerHTML = sign + zeroPadInteger( hours );
+						if (hours == 0) {
+							hrEl.classList.add( 'mute' );
+						}
+						else {
+							hrEl.classList.remove( 'mute' );
+						}
+						minEl.innerHTML = ':' + zeroPadInteger( minutes );
+						if (hours == 0 && minutes == 0) {
+							minEl.classList.add( 'mute' );
+						}
+						else {
+							minEl.classList.remove( 'mute' );
+						}
+						secEl.innerHTML = ':' + zeroPadInteger( seconds );
+					}

 					function _updateTimer() {

 						var diff, hours, minutes, seconds,
-							now = new Date();
+						now = new Date();

 						diff = now.getTime() - start.getTime();
-						hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
-						minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
-						seconds = Math.floor( ( diff / 1000 ) % 60 );

 						clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
-						hoursEl.innerHTML = zeroPadInteger( hours );
-						hoursEl.className = hours > 0 ? '' : 'mute';
-						minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
-						minutesEl.className = minutes > 0 ? '' : 'mute';
-						secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
+						_displayTime( hoursEl, minutesEl, secondsEl, diff );
+						if (timings !== null) {
+							_updatePacing(diff);
+						}
+
+					}
+
+					function _updatePacing(diff) {
+
+						var slideEndTiming = getTimeAllocated(timings) * 1000;
+						var currentSlide = Reveal.getSlidePastCount();
+						var currentSlideTiming = timings[currentSlide] * 1000;
+						var timeLeftCurrentSlide = slideEndTiming - diff;
+						if (timeLeftCurrentSlide < 0) {
+							pacingEl.className = 'pacing behind';
+						}
+						else if (timeLeftCurrentSlide < currentSlideTiming) {
+							pacingEl.className = 'pacing on-track';
+						}
+						else {
+							pacingEl.className = 'pacing ahead';
+						}
+						_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );

 					}

@@ -488,9 +608,26 @@
 					// Then update every second
 					setInterval( _updateTimer, 1000 );

-					timeEl.addEventListener( 'click', function() {
-						start = new Date();
+					function _resetTimer() {
+
+						if (timings == null) {
+							start = new Date();
+						}
+						else {
+							// Reset timer to beginning of current slide
+							var slideEndTiming = getTimeAllocated(timings) * 1000;
+							var currentSlide = Reveal.getSlidePastCount();
+							var currentSlideTiming = timings[currentSlide] * 1000;
+							var previousSlidesTiming = slideEndTiming - currentSlideTiming;
+							var now = new Date();
+							start = new Date(now.getTime() - previousSlidesTiming);
+						}
 						_updateTimer();
+
+					}
+
+					timeEl.addEventListener( 'click', function() {
+						_resetTimer();
 						return false;
 					} );

@@ -538,7 +675,7 @@
 					document.body.setAttribute( 'data-speaker-layout', value );

 					// Persist locally
-					if( window.localStorage ) {
+					if( supportsLocalStorage() ) {
 						window.localStorage.setItem( 'reveal-speaker-layout', value );
 					}

@@ -550,7 +687,7 @@
 				 */
 				function getLayout() {

-					if( window.localStorage ) {
+					if( supportsLocalStorage() ) {
 						var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
 						if( layout ) {
 							return layout;
@@ -564,6 +701,19 @@

 				}

+				function supportsLocalStorage() {
+
+					try {
+						localStorage.setItem('test', 'test');
+						localStorage.removeItem('test');
+						return true;
+					}
+					catch( e ) {
+						return false;
+					}
+
+				}
+
 				function zeroPadInteger( num ) {

 					var str = '00' + parseInt( num );
--- a/plugin/notes/notes.js
+++ b/plugin/notes/notes.js
@@ -21,6 +21,9 @@ var RevealNotes = (function() {

 		var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );

+		// Allow popup window access to Reveal API
+		notesPopup.Reveal = this.Reveal;
+
 		/**
 		 * Connect to the notes window through a postmessage handshake.
 		 * Using postmessage enables us to work in situations where the
@@ -50,10 +53,11 @@ var RevealNotes = (function() {
 		/**
 		 * Posts the current slide data to the notes window
 		 */
-		function post() {
+		function post( event ) {

 			var slideElement = Reveal.getCurrentSlide(),
-				notesElement = slideElement.querySelector( 'aside.notes' );
+				notesElement = slideElement.querySelector( 'aside.notes' ),
+				fragmentElement = slideElement.querySelector( '.current-fragment' );

 			var messageData = {
 				namespace: 'reveal-notes',
@@ -70,6 +74,21 @@ var RevealNotes = (function() {
 				messageData.whitespace = 'pre-wrap';
 			}

+			// Look for notes defined in a fragment
+			if( fragmentElement ) {
+				var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
+				if( fragmentNotes ) {
+					notesElement = fragmentNotes;
+				}
+				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
+					messageData.notes = fragmentElement.getAttribute( 'data-notes' );
+					messageData.whitespace = 'pre-wrap';
+
+					// In case there are slide notes
+					notesElement = null;
+				}
+			}
+
 			// Look for notes defined in an aside element
 			if( notesElement ) {
 				messageData.notes = notesElement.innerHTML;
--- a/plugin/print-pdf/print-pdf.js
+++ b/plugin/print-pdf/print-pdf.js
@@ -2,32 +2,18 @@
 * phantomjs script for printing presentations to PDF.
 *
 * Example:
- * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
+ * phantomjs print-pdf.js "http://revealjs.com?print-pdf" reveal-demo.pdf
 *
- * By Manuel Bieh (https://github.com/manuelbieh)
+ * @author Manuel Bieh (https://github.com/manuelbieh)
+ * @author Hakim El Hattab (https://github.com/hakimel)
+ * @author Manuel Riezebosch (https://github.com/riezebosch)
 */

 // html2pdf.js
-var page = new WebPage();
 var system = require( 'system' );

-var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
-var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
-
-page.viewportSize = {
-	width: slideWidth,
-	height: slideHeight
-};
-
-// TODO
-// Something is wrong with these config values. An input
-// paper width of 1920px actually results in a 756px wide
-// PDF.
-page.paperSize = {
-	width: Math.round( slideWidth * 2 ),
-	height: Math.round( slideHeight * 2 ),
-	border: 0
-};
+var probePage = new WebPage();
+var printPage = new WebPage();

 var inputFile = system.args[1] || 'index.html?print-pdf';
 var outputFile = system.args[2] || 'slides.pdf';
@@ -36,13 +22,48 @@ if( outputFile.match( /\.pdf$/gi ) === null ) {
 	outputFile += '.pdf';
 }

-console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
+console.log( 'Export PDF: Reading reveal.js config [1/4]' );

-page.open( inputFile, function( status ) {
-	window.setTimeout( function() {
-		console.log( 'Printed successfully' );
-		page.render( outputFile );
-		phantom.exit();
-	}, 1000 );
+probePage.open( inputFile, function( status ) {
+
+	console.log( 'Export PDF: Preparing print layout [2/4]' );
+
+	var config = probePage.evaluate( function() {
+		return Reveal.getConfig();
+	} );
+
+	if( config ) {
+
+		printPage.paperSize = {
+			width: Math.floor( config.width * ( 1 + config.margin ) ),
+			height: Math.floor( config.height * ( 1 + config.margin ) ),
+			border: 0
+		};
+
+		printPage.open( inputFile, function( status ) {
+			console.log( 'Export PDF: Preparing pdf [3/4]')
+			printPage.evaluate(function() {
+				Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
+			});
+		} );
+
+		printPage.onCallback = function(data) {
+			// For some reason we need to "jump the queue" for syntax highlighting to work.
+			// See: http://stackoverflow.com/a/3580132/129269
+			setTimeout(function() {
+				console.log( 'Export PDF: Writing file [4/4]' );
+				printPage.render( outputFile );
+				console.log( 'Export PDF: Finished successfully!' );
+				phantom.exit();
+			}, 0);
+		};
+	}
+	else {
+
+        console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
+        phantom.exit(1);
+
+    }
 } );

+
--- a/plugin/search/search.js
+++ b/plugin/search/search.js
@@ -21,7 +21,7 @@ function Hilitor(id, tag)

  var targetNode = document.getElementById(id) || document.body;
  var hiliteTag = tag || "EM";
-  var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
+  var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
  var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
  var wordColor = [];
  var colorIdx = 0;
@@ -53,11 +53,11 @@ function Hilitor(id, tag)
    if(node.nodeType == 3) { // NODE_TEXT
      if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
      	//find the slide's section element and save it in our list of matching slides
-      	var secnode = node.parentNode;
-      	while (secnode.nodeName != 'SECTION') {
+      	var secnode = node;
+      	while (secnode != null && secnode.nodeName != 'SECTION') {
      		secnode = secnode.parentNode;
      	}
-      	
+
      	var slideIndex = Reveal.getIndices(secnode);
      	var slidelen = matchingSlides.length;
      	var alreadyAdded = false;
@@ -69,7 +69,7 @@ function Hilitor(id, tag)
      	if (! alreadyAdded) {
      		matchingSlides.push(slideIndex);
      	}
-      	
+
        if(!wordColor[regs[0].toLowerCase()]) {
          wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
        }
@@ -110,20 +110,26 @@ function Hilitor(id, tag)

 	function openSearch() {
 		//ensure the search term input dialog is visible and has focus:
+		var inputboxdiv = document.getElementById("searchinputdiv");
 		var inputbox = document.getElementById("searchinput");
-		inputbox.style.display = "inline";
+		inputboxdiv.style.display = "inline";
 		inputbox.focus();
 		inputbox.select();
 	}

+	function closeSearch() {
+		var inputboxdiv = document.getElementById("searchinputdiv");
+		inputboxdiv.style.display = "none";
+		if(myHilitor) myHilitor.remove();
+	}
+
 	function toggleSearch() {
-		var inputbox = document.getElementById("searchinput");
-		if (inputbox.style.display !== "inline") {
+		var inputboxdiv = document.getElementById("searchinputdiv");
+		if (inputboxdiv.style.display !== "inline") {
 			openSearch();
 		}
 		else {
-			inputbox.style.display = "none";
-			myHilitor.remove();
+			closeSearch();
 		}
 	}

@@ -132,19 +138,27 @@ function Hilitor(id, tag)
 		if (searchboxDirty) {
 			var searchstring = document.getElementById("searchinput").value;

-			//find the keyword amongst the slides
-			myHilitor = new Hilitor("slidecontent");
-			matchedSlides = myHilitor.apply(searchstring);
-			currentMatchedIndex = 0;
+			if (searchstring === '') {
+				if(myHilitor) myHilitor.remove();
+				matchedSlides = null;
+			}
+			else {
+				//find the keyword amongst the slides
+				myHilitor = new Hilitor("slidecontent");
+				matchedSlides = myHilitor.apply(searchstring);
+				currentMatchedIndex = 0;
+			}
 		}

-		//navigate to the next slide that has the keyword, wrapping to the first if necessary
-		if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
-			currentMatchedIndex = 0;
-		}
-		if (matchedSlides.length > currentMatchedIndex) {
-			Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
-			currentMatchedIndex++;
+    if (matchedSlides) {
+			//navigate to the next slide that has the keyword, wrapping to the first if necessary
+			if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
+				currentMatchedIndex = 0;
+			}
+			if (matchedSlides.length > currentMatchedIndex) {
+				Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
+				currentMatchedIndex++;
+			}
 		}
 	}

@@ -157,7 +171,8 @@ function Hilitor(id, tag)
 			searchElement.classList.add( 'searchdiv' );
      searchElement.style.position = 'absolute';
      searchElement.style.top = '10px';
-      searchElement.style.left = '10px';
+      searchElement.style.right = '10px';
+			searchElement.style.zIndex = 10;
      //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
 			searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
 			dom.wrapper.appendChild( searchElement );
@@ -179,18 +194,13 @@ function Hilitor(id, tag)
 		}
 	}, false );

-	// Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
-	/*
 	document.addEventListener( 'keydown', function( event ) {
-		// Disregard the event if the target is editable or a
-		// modifier is present
-		if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
-
-		if( event.keyCode === 83 ) {
+		if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
 			event.preventDefault();
-			openSearch();
+			toggleSearch();
 		}
 	}, false );
-*/
+	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
+	closeSearch();
 	return { open: openSearch };
 })();
--- a/plugin/zoom-js/zoom.js
+++ b/plugin/zoom-js/zoom.js
@@ -1,40 +1,27 @@
 // Custom reveal.js integration
 (function(){
-	var isEnabled = true;
+	var revealElement = document.querySelector( '.reveal' );
+	if( revealElement ) {

-	document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) {
-		var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
+		revealElement.addEventListener( 'mousedown', function( event ) {
+			var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';

-		var zoomPadding = 20;
-		var revealScale = Reveal.getScale();
+			var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
+			var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );

-		if( event[ modifier ] && isEnabled ) {
-			event.preventDefault();
+			if( event[ modifier ] && !Reveal.isOverview() ) {
+				event.preventDefault();

-			var bounds;
-			var originalDisplay = event.target.style.display;
-
-			// Get the bounding rect of the contents, not the containing box
-			if( window.getComputedStyle( event.target ).display === 'block' ) {
-				event.target.style.display = 'inline-block';
-				bounds = event.target.getBoundingClientRect();
-				event.target.style.display = originalDisplay;
-			} else {
-				bounds = event.target.getBoundingClientRect();
+				zoom.to({
+					x: event.clientX,
+					y: event.clientY,
+					scale: zoomLevel,
+					pan: false
+				});
 			}
+		} );

-			zoom.to({
-				x: ( bounds.left * revealScale ) - zoomPadding,
-				y: ( bounds.top * revealScale ) - zoomPadding,
-				width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
-				height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
-				pan: false
-			});
-		}
-	} );
-
-	Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
-	Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
+	}
 })();

 /*!
@@ -283,6 +270,3 @@ var zoom = (function(){
 	}

 })();
-
-
-
--- a/test/examples/math.html
+++ b/test/examples/math.html
@@ -169,7 +169,7 @@
 				transition: 'linear',

 				math: {
-					// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
+					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
 					config: 'TeX-AMS_HTML-full'
 				},