diff --git a/httpdocs/theme/react/product-media-slider/style/product-media-slider.css b/httpdocs/theme/react/product-media-slider/style/product-media-slider.css
index 29ba55704..79dfb71ae 100644
--- a/httpdocs/theme/react/product-media-slider/style/product-media-slider.css
+++ b/httpdocs/theme/react/product-media-slider/style/product-media-slider.css
@@ -1,547 +1,547 @@
 /*---------------------------------------------------
     LESS Elements 0.9
   ---------------------------------------------------
     A set of useful LESS mixins
     More info at: http://lesselements.com
   ---------------------------------------------------*/
 /* MIXINS */
 /* /MIXINS */
 /* COLORS */
 /* /COLORS */
 video:focus {
   outline: none;
   outline-style: none;
 }
 #product-media-slider-container {
   width: 100%;
   margin-bottom: 15px;
 }
 #media-slider {
   box-sizing: content-box;
   overflow: hidden;
   position: relative;
   padding-bottom: 110px;
   background-color: white;
 }
 #media-slider .carousel-control {
   width: 50px;
   height: 100%;
   z-index: 100;
   cursor: pointer;
   opacity: 1;
 }
 #media-slider .carousel-control .visible-container {
   background: rgba(0, 0, 0, 0.35);
   top: 50%;
   width: 50px;
   height: 50px;
   display: block;
   position: absolute;
   left: 0;
 }
 #media-slider .carousel-control .visible-container .glyphicon {
   margin-top: -15px;
 }
 #media-slider .swiper-pagination {
   bottom: 0;
 }
 #media-slider .swiper-pagination-bullet {
   width: 14px;
   height: 14px;
   background: white;
   border: 1px solid #ccc;
   background: #ccc;
 }
 #media-slider .slider-navigation-toggle {
   position: absolute;
   right: 5px;
   height: 31px;
   width: 31px;
   background-size: 25px 25px;
   z-index: 100;
   cursor: pointer;
   background-image: url(../../assets/img/playlist-toggle.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-color: white;
   border: 2px solid black;
 }
 #media-slider #slider-container {
   padding-bottom: 30px;
 }
 #media-slider .swiper-wrapper .react-player-container {
   width: inherit;
   position: relative;
 }
 #media-slider .swiper-wrapper .react-player-container .video-render-mask {
   background-color: white;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react {
   font-family: inherit;
   overflow: hidden;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-slider:focus {
   box-shadow: none;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-control-bar {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex !important;
   visibility: visible;
   opacity: 1;
   height: 4em;
-  background-color: rgba(43, 51, 63, 0.9);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-control::before {
   font-size: 2.8em;
   line-height: 1.4;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-current-time,
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-duration {
   line-height: 2.7em;
   font-size: 1.5em;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-bar.video-react-slider-vertical {
   width: 100%;
   height: 8.5em;
   padding: 1.35em;
   margin-right: 0 !important;
   margin-left: 0 !important;
   background-color: transparent;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level {
   width: 0.3em;
   left: 50%;
   margin-left: -0.15em;
   z-index: 10;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level::before {
   position: absolute;
   font-size: 1.4em;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level::before {
   top: -0.2em;
   left: -0.4em;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-bar.video-react-slider-vertical::after {
   width: 0.3em;
   left: 50%;
   margin-left: -0.15em;
   height: 100%;
   content: "";
   display: block;
   background-color: rgba(115, 133, 159, 0.5);
   position: absolute;
   top: 0;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content {
   height: 12em;
   width: 2.9em;
   bottom: 2.5em;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-time-divider {
   display: none !important;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-progress-control.video-react-control .video-react-progress-holder {
   height: 100%;
   padding: 13px 0;
   background: none;
 }
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-progress-control.video-react-control .video-react-slider-bar,
 #media-slider .swiper-wrapper .react-player-container .video-react .video-react-progress-control.video-react-control .video-react-load-progress {
   top: 50%;
   margin-top: -0.15em;
 }
 #media-slider .swiper-wrapper .react-player-container .cinema-mode-button {
   line-height: 30px;
   display: inline-block;
   color: white;
   font-size: 10px;
   text-transform: uppercase;
   cursor: pointer;
 }
 #media-slider .swiper-wrapper .react-player-container .cinema-mode-button span {
   display: block;
   width: 20px;
   height: 12px;
   border: 2px solid white;
   margin: 13px 8px;
 }
 #media-slider .swiper-wrapper .react-player-container.hide {
   opacity: 0;
 }
 #media-slider .swiper-wrapper .slide-item {
   float: left;
   height: inherit;
   position: relative;
   margin: 0;
   padding: 0;
   text-align: center;
 }
 #media-slider .swiper-wrapper .slide-item.image {
   background-color: white !important;
   max-height: 100%;
 }
 #media-slider .swiper-wrapper .slide-item > div {
   text-align: center;
 }
 #media-slider .swiper-wrapper .slide-item > div > div {
   margin: 0 auto;
 }
 #media-slider .swiper-wrapper .slide-item img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: auto;
   margin-bottom: auto;
   max-width: 100%;
   max-height: 100%;
   cursor: -moz-zoom-in;
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
 }
 #media-slider .swiper-wrapper .slide-item #book-container {
   width: auto;
   display: table;
 }
 #media-slider .swiper-pagination {
   display: none;
 }
 #media-slider #slide-navigation {
   width: 100%;
   text-align: center;
   position: absolute;
   height: 110px;
   bottom: 0;
   padding: 10px 0;
 }
 #media-slider #slide-navigation .swiper-slide {
   width: 25%;
   height: 100%;
   opacity: 0.7;
   border: 5px solid white;
 }
 #media-slider #slide-navigation .swiper-slide.active {
   border-color: #2673b0;
 }
 #media-slider #slide-navigation .swiper-slide.book {
   background-color: #524631;
   padding: 10px;
 }
 #media-slider #slide-navigation .swiper-slide.book .preview-image {
   background-color: white;
 }
 #media-slider #slide-navigation .swiper-slide-thumb-active {
   opacity: 1;
 }
 #media-slider #slide-navigation .swiper-wrapper .swiper-slide .preview-image {
   width: 100%;
   height: 100%;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 #media-slider.hide-arrows .carousel-control {
   opacity: 0;
 }
 #media-slider.cinema-mode .swiper-wrapper .slide-item img {
   cursor: -moz-zoom-out;
   cursor: -webkit-zoom-out;
   cursor: zoom-out;
 }
 #media-slider.cinema-mode .swiper-wrapper .swiper-pagination-bullet {
   background: white !important;
 }
 #media-slider.cinema-mode #slide-navigation {
   background: black;
 }
 #media-slider.cinema-mode #slide-navigation.dots {
   background-color: white;
 }
 #media-slider.hide-playlist {
   padding-bottom: 30px;
 }
 #media-slider.hide-playlist #slide-navigation {
   display: none;
 }
 #media-slider.hide-playlist .swiper-pagination {
   display: blocK;
 }
 #media-slider.fade-controls .carousel-control,
 #media-slider.fade-controls .slider-navigation-toggle {
   opacity: 0 !important;
 }
 #media-slider.fade-controls .video-react-playing .video-react-control-bar {
   opacity: 0 !important;
 }
 #media-slider.disable-gallery {
   padding-bottom: 0;
 }
 #media-slider.disable-gallery .carousel-control,
 #media-slider.disable-gallery .slider-navigation-toggle,
 #media-slider.disable-gallery #slide-navigation {
   display: none;
 }
 #media-slider.is-mobile .video-react-playing .video-react-video {
   pointer-events: none;
 }
 #book-reader-wrapper {
   position: relative;
 }
 #book-reader-wrapper #book-container {
   border: 1px solid #ccc;
   width: 100% !important;
   display: block !important;
   padding: 20px;
   box-sizing: border-box;
   height: 100%;
   background-color: #524631;
 }
 #book-reader-wrapper #book-container .epub-container {
   border: 1px solid #eee;
   background: white;
 }
 #book-reader-wrapper .arrow {
   position: fixed;
   top: 50%;
   margin-top: -13px !important;
   font-size: 32px;
   color: #E2E2E2;
   font-family: arial, sans-serif;
   font-weight: bold;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   text-decoration: none;
   z-index: 1000;
 }
 #book-reader-wrapper .arrow:hover,
 #book-reader-wrapper .navlink:hover {
   color: #777;
 }
 #book-reader-wrapper .arrow:active,
 #book-reader-wrapper .navlink:hover {
   color: #000;
 }
 #book-reader-wrapper #prev {
   left: 50px;
 }
 #book-reader-wrapper #next {
   right: 50px;
 }
 #book-reader-wrapper #title {
   width: 900px;
   min-height: 18px;
   margin: 10px auto;
   text-align: center;
   font-size: 16px;
   color: #E2E2E2;
   font-weight: 400;
 }
 #book-reader-wrapper #title:hover {
   color: #777;
 }
 #book-reader-wrapper #viewer.spreads {
   width: 900px;
   height: 600px;
   box-shadow: 0 0 4px #ccc;
   border-radius: 5px;
   padding: 0;
   position: relative;
   margin: 10px auto;
   background: white url('ajax-loader.gif') center center no-repeat;
   top: calc(-350vh);
 }
 #book-reader-wrapper #viewer.spreads .epub-view > iframe {
   background: white;
 }
 #book-reader-wrapper #viewer.scrolled {
   overflow: hidden;
   width: 800px;
   margin: 0 auto;
   position: relative;
   background: url('ajax-loader.gif') center center no-repeat;
 }
 #book-reader-wrapper #viewer.scrolled .epub-container {
   background: white;
   box-shadow: 0 0 4px #ccc;
   margin: 10px;
   padding: 20px;
 }
 #book-reader-wrapper #viewer.scrolled .epub-view > iframe {
   background: white;
 }
 #book-reader-wrapper #toc {
   display: block;
   margin: 10px auto;
 }
 @media (min-width: 1000px) {
   #book-reader-wrapper #viewer.spreads:after {
     position: absolute;
     width: 1px;
     border-right: 1px #000 solid;
     height: 90%;
     z-index: 1;
     left: 50%;
     margin-left: -1px;
     top: 5%;
     opacity: .15;
     box-shadow: -2px 0 15px #000000;
     content: "";
   }
   #book-reader-wrapper #viewer.spreads.single:after {
     display: none;
   }
   #book-reader-wrapper #prev {
     left: 40px;
   }
   #book-reader-wrapper #next {
     right: 40px;
   }
 }
 #book-reader-wrapper .navlink {
   margin: 14px;
   display: block;
   text-align: center;
   text-decoration: none;
   color: #ccc;
 }
 #book-reader-wrapper #book-wrapper {
   width: 480px;
   height: 640px;
   overflow: hidden;
   border: 1px solid #ccc;
   margin: 28px auto;
   background: #fff;
   border-radius: 0 5px 5px 0;
   position: absolute;
 }
 #book-reader-wrapper #book-viewer {
   width: 480px;
   height: 660px;
   margin: -30px auto;
   -moz-box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.1);
   box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.1);
 }
 #book-reader-wrapper #book-viewer iframe {
   padding: 40px 40px;
 }
 #book-reader-wrapper #controls {
   position: absolute;
   bottom: 16px;
   left: 50%;
   width: 400px;
   margin-left: -200px;
   text-align: center;
   display: none;
 }
 #book-reader-wrapper #controls > input[type=range] {
   width: 400px;
 }
 #book-reader-wrapper #navigation {
   width: 400px;
   height: 100vh;
   position: absolute;
   overflow: auto;
   top: 0;
   left: 0;
   background: #777;
   -webkit-transition: -webkit-transform 0.25s ease-out;
   -moz-transition: -moz-transform 0.25s ease-out;
   -ms-transition: -moz-transform 0.25s ease-out;
   transition: transform 0.25s ease-out;
 }
 #book-reader-wrapper #navigation.fixed {
   position: fixed;
 }
 #book-reader-wrapper #navigation h1 {
   width: 200px;
   font-size: 16px;
   font-weight: normal;
   color: #fff;
   margin-bottom: 10px;
 }
 #book-reader-wrapper #navigation h2 {
   font-size: 14px;
   font-weight: normal;
   color: #B0B0B0;
   margin-bottom: 20px;
 }
 #book-reader-wrapper #navigation ul {
   padding-left: 36px;
   margin-left: 0;
   margin-top: 12px;
   margin-bottom: 12px;
   width: 340px;
 }
 #book-reader-wrapper #navigation ul li {
   list-style: decimal;
   margin-bottom: 10px;
   color: #cccddd;
   font-size: 12px;
   padding-left: 0;
   margin-left: 0;
 }
 #book-reader-wrapper #navigation ul li a {
   color: #ccc;
   text-decoration: none;
 }
 #book-reader-wrapper #navigation ul li a:hover {
   color: #fff;
   text-decoration: underline;
 }
 #book-reader-wrapper #navigation ul li a.active {
   color: #fff;
 }
 #book-reader-wrapper #navigation #cover {
   display: block;
   margin: 24px auto;
 }
 #book-reader-wrapper #navigation #closer {
   position: absolute;
   top: 0;
   right: 0;
   padding: 12px;
   color: #cccddd;
   width: 24px;
 }
 #book-reader-wrapper #navigation.closed {
   -webkit-transform: translate(-400px, 0);
   -moz-transform: translate(-400px, 0);
   -ms-transform: translate(-400px, 0);
   transform: translate(-400px, 0);
 }
 #book-reader-wrapper svg {
   display: block;
 }
 #book-reader-wrapper .close-x {
   stroke: #cccddd;
   fill: transparent;
   stroke-linecap: round;
   stroke-width: 5;
 }
 #book-reader-wrapper .close-x:hover {
   stroke: #fff;
 }
 #book-reader-wrapper #opener {
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px;
   stroke: #E2E2E2;
   fill: #E2E2E2;
 }
 #book-reader-wrapper #opener:hover {
   stroke: #777;
   fill: #777;
 }
diff --git a/httpdocs/theme/react/product-media-slider/style/product-media-slider.less b/httpdocs/theme/react/product-media-slider/style/product-media-slider.less
index dba317537..d4cabf533 100644
--- a/httpdocs/theme/react/product-media-slider/style/product-media-slider.less
+++ b/httpdocs/theme/react/product-media-slider/style/product-media-slider.less
@@ -1,670 +1,670 @@
 @import "../../assets/less/elements.less";
 
 video:focus {
     outline: none;
     outline-style: none;
 }
 
 #product-media-slider-container {
     width:100%;
     margin-bottom: 15px;
 }
 
 #media-slider {
     box-sizing: content-box;
     overflow: hidden;
     position: relative;
     padding-bottom: 110px;
     background-color: white;
 
     .carousel-control {
         width: 50px;
         height: 100%;
         z-index: 100;
         cursor: pointer;
         opacity: 1;
 
         .visible-container {
           background: rgba(0,0,0,0.35);
           top:50%;
           width:50px;
           height:50px;
           display: block;
           position: absolute;
           left:0;
           
           .glyphicon {
             margin-top: -15px;
           }
         }
     }
 
     .swiper-pagination {
       bottom: 0;
     }
 
     .swiper-pagination-bullet {
         width: 14px;
         height: 14px;
         background: white;
         border: 1px solid #ccc;
         background: #ccc;
     }
 
     .slider-navigation-toggle {
         position: absolute;
         right: 5px;
         height: 31px;
         width: 31px;
         background-size: 25px 25px;
         z-index: 100;
         cursor: pointer;
         background-image: url(../../assets/img/playlist-toggle.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-color: white;
         border: 2px solid black;
     }
 
     #slider-container {
         padding-bottom: 30px;
     }
 
     .swiper-wrapper {
         
         .react-player-container {
             width:inherit;
             position: relative;
 
             .video-render-mask {
               background-color:white;
               position: absolute;
               top: 0;
               left: 0;
               width:100%;
               height:100%;
               z-index: 1;
             }
 
             .video-react {
                 font-family: inherit;
                 overflow: hidden;
 
                 .video-react-slider:focus {
                     box-shadow: none;
                 }
 
                 .video-react-control-bar {
                   display: -webkit-box;
                   display: -webkit-flex;
                   display: -ms-flexbox;
                   display: flex !important;
                   visibility: visible;
                   opacity: 1;
                   height: 4em;
-                  background-color: rgba(43, 51, 63, 0.9);
+                  background-color: rgba(0, 0, 0, 0.7);
                 }
 
                 .video-react-control {
                   &::before {
                     font-size: 2.8em;
                     line-height: 1.4;
                   }
                 }
 
                 .video-react-current-time,
                 .video-react-duration {
                   line-height: 2.7em;
                   font-size: 1.5em;
                 }
 
                 .video-react-volume-bar.video-react-slider-vertical {
                     width: 100%;
                     height: 8.5em;
                     padding: 1.35em;
                     margin-right: 0 !important;
                     margin-left: 0 !important;
                     background-color: transparent;
 
                     .video-react-volume-level {
                         width: 0.3em;
                         left: 50%;
                         margin-left: -0.15em;
                         z-index: 10;
 
                         &::before {
                           position: absolute;
                           font-size: 1.4em;
                         }
                     }
 
                     .video-react-volume-level {
                       &::before {
                         top: -0.2em;
                         left: -0.4em;
                       }
                     }
 
                     &::after {
                       width: 0.3em;
                       left: 50%;
                       margin-left: -0.15em;
                       height: 100%;
                       content: "";
                       display: block;
                       background-color:rgba(115, 133, 159, 0.5);
                       position: absolute;
                       top: 0;
                     }
                 }
 
                 .video-react-volume-menu-button-vertical:hover .video-react-menu-content {
                   height: 12em;
                   width: 2.9em;
                   bottom: 2.5em;
                 }
 
                 .video-react-time-divider {
                     display: none !important;
                 }
 
                 .video-react-progress-control.video-react-control{
                     .video-react-progress-holder {
                         height: 100%;
                         padding: 13px 0;
                         background: none;
                     }
                     .video-react-slider-bar,
                     .video-react-load-progress {
                         top: 50%;
                         margin-top: -0.15em;  
                     }
                 }
             }
 
             .cinema-mode-button {
                 line-height: 30px;
                 display: inline-block;
                 color: white;
                 font-size: 10px;
                 text-transform: uppercase;
                 cursor: pointer;
 
                 span {
                   display: block;
                   width: 20px;
                   height: 12px;
                   border: 2px solid white;
                   margin: 13px 8px;
                 }
             }
 
             &.hide {
               opacity: 0;
             }
         }
 
         .slide-item {
             float:left;
             height: inherit;
             position: relative;
             margin:0;
             padding:0;
             text-align: center;
 
             &.image {
                 background-color:white !important;
                 max-height: 100%;
             }
 
             > div { 
                 text-align: center;
 
                 > div {
                     margin: 0 auto;
                 }
             }
 
             img {
                 display: block;
                 margin-left: auto;
                 margin-right: auto;
                 margin-top: auto;
                 margin-bottom:auto;
                 max-width: 100%;
                 max-height: 100%;
                 cursor: -moz-zoom-in; 
                 cursor: -webkit-zoom-in; 
                 cursor: zoom-in;
             }
 
             #book-container {
                 width: auto;
                 display: table;
             }
         }
     }
 
     .swiper-pagination {
         display: none;
     }
 
     #slide-navigation {
         width:100%;
         text-align: center;
         position: absolute;
         height: 110px;
         bottom: 0;
         padding: 10px 0;
         
         .swiper-slide {
             width: 25%;
             height: 100%;
             opacity: 0.7;
             border: 5px solid white;
 
             &.active {
                 border-color: #2673b0;
             }
 
             &.book {
               background-color: #524631;
               padding:10px;
 
               .preview-image {
                 background-color:white;
               }
             }
         }
         
         .swiper-slide-thumb-active {
             opacity: 1;
         }
         
         .swiper-wrapper {
 
             .swiper-slide {
 
                 .preview-image {
                     width:100%;
                     height: 100%;
                     background-size: contain;
                     background-position: center center;
                     background-repeat: no-repeat;
                     cursor: pointer;
                 }
             }
         }
     }
 
     &.hide-arrows {
         .carousel-control {
             opacity: 0;
         }
     }
 
     &.cinema-mode {
 
         .swiper-wrapper {
 
             .slide-item {
 
                 img {
                     cursor: -moz-zoom-out; 
                     cursor: -webkit-zoom-out; 
                     cursor: zoom-out;
                 }
             }
 
             .swiper-pagination-bullet {
                 background: white !important;
             }
         }
 
         #slide-navigation {
             background: black;
             &.dots {
                 background-color: white;
             }
         }
     }
 
     &.hide-playlist {
         padding-bottom: 30px;
 
         #slide-navigation {
             display: none;
         }
 
         .swiper-pagination {
             display: blocK;
         }
     }
 
     &.fade-controls {
         .carousel-control,
         .slider-navigation-toggle { 
             opacity: 0 !important;
         }
 
         .video-react-playing {
             .video-react-control-bar {
                 opacity: 0 !important;
             }
         }
     }
 
     &.disable-gallery {
         padding-bottom:0;
         .carousel-control,
         .slider-navigation-toggle,
         #slide-navigation { 
             display: none;
         }
     }
 
     &.is-mobile {
       .video-react-playing {
         .video-react-video {
           pointer-events: none;
         } 
       }
     }
 }
 
 
 #book-reader-wrapper {
     position: relative;
 
     #book-container {
       border: 1px solid #ccc;
       width: 100% !important;
       display: block !important;
       padding: 20px;
       box-sizing: border-box;
       height: 100%;
       background-color: #524631;
 
       .epub-container {
         border: 1px solid #eee;
         background: white;
       }
     }
 
     .arrow {
       position: fixed;
       top: 50%;
       margin-top: -13px !important;
       font-size: 32px;
       color: #E2E2E2;
       font-family: arial, sans-serif;
       font-weight: bold;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;
       user-select: none;
       text-decoration: none;
       z-index: 1000;
     }
     
     .arrow:hover, .navlink:hover {
       color: #777;
     }
     
     .arrow:active, .navlink:hover {
       color: #000;
     }
 
     #prev {
       left: 50px;
     }
     
     #next {
       right: 50px;
     }
 
     #title {
       width: 900px;
       min-height: 18px;
       margin: 10px auto;
       text-align: center;
       font-size: 16px;
       color: #E2E2E2;
       font-weight: 400;
     }
     
     #title:hover {
       color: #777;
     }
     
     #viewer.spreads {
       width: 900px;
       height: 600px;
       box-shadow: 0 0 4px #ccc;
       border-radius: 5px;
       padding: 0;
       position: relative;
       margin: 10px auto;
       background: white url('ajax-loader.gif') center center no-repeat;
       top: calc(50vh - 400px);
     }
     
     #viewer.spreads .epub-view > iframe {
         background: white;
     }
     
     #viewer.scrolled {
       overflow: hidden;
       width: 800px;
       margin: 0 auto;
       position: relative;
       background: url('ajax-loader.gif') center center no-repeat;
     
     }
     
     #viewer.scrolled .epub-container {
       background: white;
       box-shadow: 0 0 4px #ccc;
       margin: 10px;
       padding: 20px;
     }
     
     #viewer.scrolled .epub-view > iframe {
         background: white;
     }
     
     #toc {
       display: block;
       margin: 10px auto;
     }
     
     @media (min-width: 1000px) {
       #viewer.spreads:after {
         position: absolute;
         width: 1px;
         border-right: 1px #000 solid;
         height: 90%;
         z-index: 1;
         left: 50%;
         margin-left: -1px;
         top: 5%;
         opacity: .15;
         box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
         content:  "";
       }
     
       #viewer.spreads.single:after {
         display: none;
       }
     
       #prev {
         left: 40px;
       }
     
       #next {
         right: 40px;
       }
     }
 
     .navlink {
       margin: 14px;
       display: block;
       text-align: center;
       text-decoration: none;
       color: #ccc;
     }
     
     #book-wrapper {
       width: 480px;
       height: 640px;
       overflow: hidden;
       border: 1px solid #ccc;
       margin: 28px auto;
       background: #fff;
       border-radius: 0 5px 5px 0;
       position: absolute;
     }
     
     #book-viewer {
       width: 480px;
       height: 660px;
       margin: -30px auto;
       -moz-box-shadow:      inset 10px 0 20px rgba(0,0,0,.1);
       -webkit-box-shadow:   inset 10px 0 20px rgba(0,0,0,.1);
       box-shadow:           inset 10px 0 20px rgba(0,0,0,.1);
     }
     
     #book-viewer iframe {
       padding: 40px 40px;
     }
     
     #controls {
       position: absolute;
       bottom: 16px;
       left: 50%;
       width: 400px;
       margin-left: -200px;
       text-align: center;
       display: none;
     }
     
     #controls > input[type=range] {
         width: 400px;
     }
     
     #navigation {
       width: 400px;
       height: 100vh;
       position: absolute;
       overflow: auto;
       top: 0;
       left: 0;
       background: #777;
       -webkit-transition: -webkit-transform .25s ease-out;
       -moz-transition: -moz-transform .25s ease-out;
       -ms-transition: -moz-transform .25s ease-out;
       transition: transform .25s ease-out;
     
     }
     
     #navigation.fixed {
       position: fixed;
     }
     
     #navigation h1 {
       width: 200px;
       font-size: 16px;
       font-weight: normal;
       color: #fff;
       margin-bottom: 10px;
     }
     
     #navigation h2 {
       font-size: 14px;
       font-weight: normal;
       color: #B0B0B0;
       margin-bottom: 20px;
     }
     
     #navigation ul {
       padding-left: 36px;
       margin-left: 0;
       margin-top: 12px;
       margin-bottom: 12px;
       width: 340px;
     }
     
     #navigation ul li {
       list-style: decimal;
       margin-bottom: 10px;
       color: #cccddd;
       font-size: 12px;
       padding-left: 0;
       margin-left: 0;
     }
     
     #navigation ul li a {
       color: #ccc;
       text-decoration: none;
     }
     
     #navigation ul li a:hover {
       color: #fff;
       text-decoration: underline;
     }
     
     #navigation ul li a.active {
       color: #fff;
     }
     
     #navigation #cover {
       display: block;
       margin: 24px auto;
     }
     
     #navigation #closer {
       position: absolute;
       top: 0;
       right: 0;
       padding: 12px;
       color: #cccddd;
       width: 24px;
     }
     
     #navigation.closed {
       -webkit-transform: translate(-400px, 0);
       -moz-transform: translate(-400px, 0);
       -ms-transform: translate(-400px, 0);
       transform: translate(-400px, 0);
     }
     
     svg {
       display: block;
     }
     
     .close-x {
       stroke: #cccddd;
       fill: transparent;
       stroke-linecap: round;
       stroke-width: 5;
     }
     
     .close-x:hover {
       stroke: #fff;
     }
     
     #opener {
       position: absolute;
       top: 0;
       left: 0;
       padding: 10px;
       stroke: #E2E2E2;
       fill: #E2E2E2;
     
     }
     
     #opener:hover {
       stroke: #777;
       fill: #777;
     }
 }
\ No newline at end of file