diff --git a/index.html b/index.html
index aa4913f3aad3cc21850a44af98dba85e24f57134..e09ca91f9f1f0ed37c5feaa2a5649c16bed0b121 100644
--- a/index.html
+++ b/index.html
@@ -191,6 +191,18 @@
 					</p>
 				</section>
 
+				<section data-state="customevent">
+					<h2>Custom Events</h2>
+					<p>
+						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
+					</p>
+					<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+					</code></pre>
+				</section>
+
 				<section>
 					<section data-background="#007777">
 						<h2>Slide Backgrounds</h2>
@@ -211,18 +223,6 @@
 					</section>
 				</section>
 
-				<section data-state="customevent">
-					<h2>Custom Events</h2>
-					<p>
-						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
-					</p>
-					<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
-Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-					</code></pre>
-				</section>
-
 				<section>
 					<h2>Clever Quotes</h2>
 					<p>