diff --git a/book-page-0.jpg b/book-page-0.jpg
new file mode 100644
index 0000000..7e51600
Binary files /dev/null and b/book-page-0.jpg differ
diff --git a/book-page-5.jpg b/book-page-5.jpg
new file mode 100644
index 0000000..32a507f
Binary files /dev/null and b/book-page-5.jpg differ
diff --git a/book-page-6.jpg b/book-page-6.jpg
new file mode 100644
index 0000000..01088c6
Binary files /dev/null and b/book-page-6.jpg differ
diff --git a/book-page-devo-1.JPG b/book-page-devo-1.JPG
deleted file mode 100644
index bcde119..0000000
Binary files a/book-page-devo-1.JPG and /dev/null differ
diff --git a/book-page-devo-2.JPG b/book-page-devo-2.JPG
deleted file mode 100644
index 63ae11d..0000000
Binary files a/book-page-devo-2.JPG and /dev/null differ
diff --git a/book-page-intro-left.JPG b/book-page-intro-left.JPG
deleted file mode 100644
index 121ccee..0000000
Binary files a/book-page-intro-left.JPG and /dev/null differ
diff --git a/book-page-intro-right.JPG b/book-page-intro-right.JPG
deleted file mode 100644
index 7387504..0000000
Binary files a/book-page-intro-right.JPG and /dev/null differ
diff --git a/index.html b/index.html
index 7664dc8..7b15100 100644
--- a/index.html
+++ b/index.html
@@ -2,193 +2,193 @@
 <html>
 <head>
 <meta charset="utf-8">
-
+<meta name="viewport" content="width=device-width, initial-scale=1" >
 </head>
 <body>
 <main>
+<style>
+.Shot
+{
+    transform: perspective(1000px);
+    transform-style: preserve-3d;
+    width:500px;
+    height: 400px;
+    margin:20px auto 0 auto;
+    text-align:center;
+    transition: transform 1s;
+}
+.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
+.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg)   rotateY(180deg); }
+.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
+.Shot[show="pages"]{ transform: perspective(800px)  rotateX(-7deg)   rotateY(0deg); }
 
-    <style>
-        .Shot
-        {
-            transform: perspective(1000px);
-            transform-style: preserve-3d;
-            width:500px;
-            height: 400px;
-            margin:20px auto 0 auto;
-            text-align:center;
-            transition: transform 1s;
-        }
-        .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
-        .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg)   rotateY(180deg); }
-        .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
-        .Shot[show="pages"]{ transform: perspective(800px)  rotateX(-7deg)   rotateY(0deg); }
+.Book
+{
+    height:100%;
+    transform-style: preserve-3d;
+    transform: translateZ(-100px);
+    position: relative;
+    display:inline-block;
+}
+.Spine
+{
+    display:flex;
+    justify-content:space-between;
+    margin:0 auto;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
 
-        .Book
-        {
-            height:100%;
-            transform-style: preserve-3d;
-            transform: translateZ(-100px);
-            position: relative;
-            display:inline-block;
-        }
-        .Spine
-        {
-            display:flex;
-            justify-content:space-between;
-            margin:0 auto;
-            position:absolute;
-            top:0;
-            left:0;
-            width:100%;
-            height:100%;
-        }
+.Page
+{
+    display: inline-block;
+    position: relative;
+    transition: transform 1s;
+    transform-style: preserve-3d;
+}
+.Page[swing="closed"]{ transform: translateX(0px)  rotateY(-90deg); }
+.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
+.Page[swing="left"  ]{ transform: translateX(3px)  rotateY(-160deg); }
+.Page .Front, .Page .Back
+{
+    float:left;
+    position:absolute;
+    top:0;
+    left:0;
+    height:100%;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    transform: rotateY(180deg);
+}
+.Page .Back
+{
+    transform: rotateY(0deg);
+}
+.Page img
+{
+    height:100%;
+    width:auto;
+}
 
-        .Page
-        {
-            display: inline-block;
-            position: relative;
-            transition: transform 1s;
-            transform-style: preserve-3d;
-        }
-        .Page[swing="closed"]{ transform: translateX(0px)  rotateY(-90deg); }
-        .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
-        .Page[swing="left"  ]{ transform: translateX(3px)  rotateY(-160deg); }
-        .Page .Front, .Page .Back
-        {
-            float:left;
-            position:absolute;
-            top:0;
-            left:0;
-            height:100%;
-            backface-visibility: hidden;
-            transform-style: preserve-3d;
-            transform: rotateY(180deg);
-        }
-        .Page .Back
-        {
-            transform: rotateY(0deg);
-        }
-        .Page img
-        {
-            height:100%;
-            width:auto;
-        }
+.Page--Fill
+{
+    display: block;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
+.Page--Shrink
+{
+    height:98%;
+    top:1%;
+}
+.Shadow--Drop::before
+{
+    transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
+    box-shadow: 0px 100px 60px black, 0px 100px 17px black;
+    display: block;
+    position: absolute;
+    top: 100%;
+    content: " ";
+    width: 100%;
+    height: 8px;
+    border-radius: 39px;
+}
 
-        .Page--Fill
-        {
-            display: block;
-            position:absolute;
-            top:0;
-            left:0;
-            width:100%;
-            height:100%;
-        }
-        .Page--Shrink
-        {
-            height:98%;
-            top:1%;
-        }
-        .Shadow--Drop::before
-        {
-            transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
-            box-shadow: 0px 100px 60px black, 0px 100px 17px black;
-            display: block;
-            position: absolute;
-            top: 100%;
-            content: " ";
-            width: 100%;
-            height: 8px;
-            border-radius: 39px;
-        }
+.Shadow--Sheet::after
+{
+    content:" ";
 
-        .Shadow--Sheet::after
-        {
-            content:" ";
+    background-size: 100% 100%;
+    background-position: 0px 0px;
+    background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
 
-            background-size: 100% 100%;
-            background-position: 0px 0px;
-            background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
+    display:block;
+    position:absolute;
+    z-index:100;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
 
-            display:block;
-            position:absolute;
-            z-index:100;
-            top:0;
-            left:0;
-            width:100%;
-            height:100%;
+    backface-visibility: hidden;
+    transform:scaleX(-1);
+}
+.Shadow--Sheet--Flip::after
+{
+    transform:scaleX(1);
+}
 
-            backface-visibility: hidden;
-            transform:scaleX(-1);
-        }
-        .Shadow--Sheet--Flip::after
-        {
-            transform:scaleX(1);
-        }
+.Shadow--Radiosity::after
+{
+    content: " ";
+    background-size: 100% 100%;
+    background-position: 0px 0px;
+    background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index:100;
+    width: 100%;
+    height: 100%;
+}
+</style>
+<div class="Shot" show="cover">
+    <div class="Book">
+        <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
+        <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
+        <div class="Spine">
+            <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 
-        .Shadow--Radiosity::after
-        {
-            content: " ";
-            background-size: 100% 100%;
-            background-position: 0px 0px;
-            background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            z-index:100;
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-
-    <div class="Shot" show="cover">
-        <div class="Book">
-            <img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
-            <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
-            <div class="Spine">
-                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
-            </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
             
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+            <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
         </div>
     </div>
-
-    <div>
-        <button onclick="bookPose('cover'); bookClose();">Front</button>
-        <button onclick="bookPose('spine'); bookClose();">Spine</button>
-        <button onclick="bookPose('back');  bookClose();">Back</button>
-        <button onclick="bookPose('pages'); bookOpen(3);">Intro</button>
-        <button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button>
-        <button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button>
-        <button onclick="bookPose('pages'); bookOpen(6);">3</button>
-        <button onclick="bookPose('pages'); bookOpen(7);">4</button>
-    </div>
-</main>
+</div>
+<div>
+    <button onclick="bookPose('cover'); bookClose();">Front</button>
+    <button onclick="bookPose('spine'); bookClose();">Spine</button>
+    <button onclick="bookPose('back');  bookClose();">Back</button>
+    <button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
+    <button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
+    <button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
+</div>
 <script>
-let $ = query => Array.from(document.querySelectorAll(query));
-let pages = $("[swing]");
-let table = $(".Shot")[0];
-let bookOpen = index =>
-{
-    pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
-};
-let bookClose = () => 
-{
-    pages.forEach(p=>p.setAttribute("swing", "closed"));
-};
-let bookPose = inPanel => 
-{
-    table.setAttribute("show", inPanel);
-    bookClose();
-};
+    let $ = query => Array.from(document.querySelectorAll(query));
+    let pages = $("[swing]");
+    let table = $(".Shot")[0];
+    let bookOpen = index =>
+    {
+        pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
+    };
+    let bookClose = () => 
+    {
+        pages.forEach(p=>p.setAttribute("swing", "closed"));
+    };
+    let bookPose = inPanel => 
+    {
+        table.setAttribute("show", inPanel);
+        bookClose();
+    };
 </script>
+</main>
+
 </body>
 </html>
\ No newline at end of file
