figure {   margin: 0;  width: 100%;  height: 29.5vw;  background: url("winter-hat.jpg");    background-size: 100%;     transform-origin: center bottom;    transform-style: preserve-3d;    transition: 1s transform; }figure figcaption {   width: 100%;  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),         url("winter-hat.jpg");    background-size: 100%; height: 50px;    background-repeat: no-repeat;  background-position: bottom;  color: #fff;     position: relative; top: 29.5vw;    transform-origin: center top;    transform: rotateX(-89.9deg);    font-size: 1.2vw;  font-family: Montserrat, Arial, sans-serif;  text-align: center;    line-height: 3;}figure:before {  content: ‘‘;  position: absolute; top: 0; left: 0;  width: 100%; height: 100%;    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);    transition: 1s;    transform: rotateX(95deg) translateZ(-80px) scale(0.75);    transform-origin: inherit;}div:hover figure {   transform: rotateX(75deg) translateZ(5vw); }div:hover figure:before {    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);    transform: rotateX(-5deg) translateZ(-80px) scale(1);    }@media screen and (max-width: 800px) {  div { width: 50%; }   figure { height: 45vw; }   figure figcaption {     top: 45vw;    font-size: 2vw;  } }@media screen and (max-width: 500px) {  div {     width: 80%;     margin-top: 1rem;   }   figure {     height: 70vw;  }   figure figcaption {     top: 70vw;    font-size: 3vw;  } }

var points = 20;/* jquery slider pips plugin, version 0.1 */    (function($) {        var extensionMethods = {            pips: function( settings ) {                options = {                    first:     "number",     // "pip" , false                    last:     "number",     // "pip" , false                    rest:     "pip"         // "number" , false                };                $.extend( options, settings );                // get rid of all pips that might already exist.                this.element.addClass(‘ui-slider-pips‘).find( ‘.ui-slider-pip‘ ).remove();                // we need teh amount of pips to create.                var pips = this.options.max - this.options.min;                                        // for every stop in the slider, we create a pip.                    for( i=0; i<=pips; i++ ) {                        // hold a span element for the pip                        var s = $(‘<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">‘+i+‘</span></span>‘);                        // add a class so css can handle the display                        // we‘ll hide numbers by default in CSS, and show them if set.                        // we‘ll also use CSS to hide the pip altogether.                        if( 0 == i ) {                            s.addClass(‘ui-slider-pip-first‘);                            if( "number" == options.first ) { s.addClass(‘ui-slider-pip-number‘); }                            if( false == options.first ) { s.addClass(‘ui-slider-pip-hide‘); }                        } else if ( pips == i ) {                            s.addClass(‘ui-slider-pip-last‘);                            if( "number" == options.last ) { s.addClass(‘ui-slider-pip-number‘); }                            if( false == options.last ) { s.addClass(‘ui-slider-pip-hide‘); }                        } else {                            if( "number" == options.rest ) { s.addClass(‘ui-slider-pip-number‘); }                            if( false == options.rest ) { s.addClass(‘ui-slider-pip-hide‘); }                        }                        // if it‘s a horizontal slider we‘ll set the left offset,                        // and the top if it‘s vertical.                        if( this.options.orientation == "horizontal" )                             s.css({ left: ‘‘ + (100/pips)*i + ‘%‘  });                        else                            s.css({ top: ‘‘ + (100/pips)*i + ‘%‘  });                        // append the span to the slider.                        this.element.append( s );                    }            }        };        $.extend(true, $[‘ui‘][‘slider‘].prototype, extensionMethods);    })(jQuery);(function($) {        var extensionMethods = {            float: function( settings ) {                options = {};                $.extend( options, settings );                // add a class for the CSS                this.element.addClass(‘ui-slider-float‘);                        // if this is a range slider        if( this.options.values ) {                     var $tip = [            $(‘<span class="ui-slider-tip">‘+ this.options.values[0]+‘</span>‘),            $(‘<span class="ui-slider-tip">‘+ this.options.values[1]+‘</span>‘)          ];                            // else if its just a normal slider        } else {                    // create a tip element          var $tip = $(‘<span class="ui-slider-tip">‘+ this.options.value+‘</span>‘);                  }                // now we append it to all the handles        this.element.find(‘.ui-slider-handle‘).each( function(k,v) {          $(v).append($tip[k]);        })                // if this slider also has numbers, we‘ll make those into tips, too; by cloning and changing class.        this.element.find(‘.ui-slider-number‘).each(function(k,v) {          var $e = $(v).clone().removeClass(‘ui-slider-number‘).addClass(‘ui-slider-tip-number‘);          $e.insertAfter($(v));        });                // when slider changes, update handle tip value.        this.element.on(‘slidechange slide‘, function(e,ui) {          $(ui.handle).find(‘.ui-slider-tip‘).text( ui.value );        });                    }        };        $.extend(true, $[‘ui‘][‘slider‘].prototype, extensionMethods);    })(jQuery);/* ------------------------- *//* demo stuff */$(document).ready(function() {  $(‘.slider, .slider2‘).slider({min:0,max:points,animate:true, value:3});  $(‘.slider3‘).slider({min:0,max:points,animate:true,range:true, values:[2,18]});  $(‘.slider‘).slider(‘pips‘);  $(‘.slider2‘).slider(‘pips‘, {rest:‘number‘});  $(‘.slider3‘).slider(‘pips‘, {first:‘pip‘, last: ‘pip‘});    $(‘.slider4‘).slider({min:0,max:points,animate:true,value:4});  $(‘.slider6‘).slider({min:0,max:points,animate:true,range: true,values:[3,6] });    $(‘.slider4‘).slider(‘pips‘);  $(‘.slider4, .slider6‘).slider(‘float‘);});

jQuery(document).ready(function(){  function doStep(){    // Next Button    $(‘a.next-step‘).click(function(event){      event.preventDefault();      // Part 1      if($(‘.alpha‘).hasClass("in")) {        $(‘.alpha‘).removeClass("in");      }      $(‘.alpha‘).addClass("out");      // Part 2      if($(‘.beta‘).hasClass("out")) {        $(‘.beta‘).removeClass("out");      }      $(‘.beta‘).addClass("in");    });        // Previous Button    $(‘a.prev-step‘).click(function(event){      event.preventDefault();       $(‘.alpha‘).removeClass("out").addClass("in");      $(‘.beta‘).removeClass("in").addClass("out");    });        // Submit & Complete    $(‘.submit‘).click(function(event){      event.preventDefault();      // Part 1      if($(‘.beta‘).hasClass("in")) {        $(‘.beta‘).removeClass("in");      }      $(‘.beta‘).addClass("out");      // Part 2      if($(‘.charlie‘).hasClass("out")) {        $(‘.charlie‘).removeClass("out");      }      $(‘.charlie‘).addClass("in");    });  }  // Active Functions  doStep();});

form {  float: left;  display: block;  width: 100%;  position: relative;}form fieldset {  float: left;  position: absolute;  width: 100%;  padding: 20px;  border: none;  border-radius: 5px;  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);  background: #fff;  background: whitesmoke;  background: -webkit-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);  background: -moz-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);  background: -o-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);  background: linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);  /* W3C */}form fieldset legend {  float: left;  display: block;  width: 100%;  position: relative;  border-bottom: 1px solid #dfdfdf;  top: 0;  left: 0;  clear: both;  margin-bottom: 20px;  padding-bottom: 10px;  line-height: 30px;  color: #444;  text-shadow: 0 1px 0 #fff;}form fieldset.beta, form fieldset.charlie {  display: none;}form fieldset .frow {  float: left;  display: block;  width: 100%;  margin-bottom: 10px;}form fieldset .frow:last-child {  margin-bottom: 0px;}form fieldset input {  float: left;  width: 100%;  padding: 12px 6px;  font-size: 14px;  font-weight: 400;  font-family: "Open Sans", sans-serif;  border: 1px solid #dedede;  border-radius: 5px;  box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;  -webkit-transition: all 0.2s ease-in-out;}form fieldset input::-webkit-input-placeholder {  color: #ccc;  opacity: 1;  -webkit-transition: opacity 0.2s ease-in-out;}form fieldset input:focus {  outline: none;  border: 1px solid #27c1bf;  box-shadow: 0 0 10px #27c1bf;  -webkit-transition: all 0.2s ease-in-out;}form fieldset input:focus::-webkit-input-placeholder {  opacity: 0.5;}form fieldset a.next-step,form fieldset a.prev-step,form fieldset input[type="submit"] {  display: block;  width: 100%;  height: 50px;  padding: 0;  background: #31dddb;  line-height: 50px;  text-align: center;  text-decoration: none;  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);  font-size: 1.2em;  font-family: "Helvetica Neue", sans-serif;  font-weight: 400;  color: #fff;  border: 1px solid #27c1bf;  border-radius: 4px;  box-shadow: 0 0 0 transparent;}form fieldset a.prev-step {  background: #4a76a8;  border: 1px solid #1d5b90;}.out, .alpha.out, .beta.out {  z-index: 0;  opacity: 1;  display: block;  -webkit-animation: out 0.75s ease forwards;  -moz-animation: out 0.75s ease forwards;  -o-animation: out 0.75s ease forwards;  animation: out 0.75s ease forwards;}@-webkit-keyframes out {  0% {    -webkit-transform: scale(1);    opacity: 1;  }  25% {    -webkit-transform: scale(1.05);  }  99% {    -webkit-transform: scale(0.8);  }  100% {    opacity: 0;    display: none;  }}@-moz-keyframes out {  0% {    -moz-transform: scale(1);    opacity: 1;  }  25% {    -moz-transform: scale(1.05);  }  99% {    -moz-transform: scale(0.8);  }  100% {    opacity: 0;    display: none;  }}@-o-keyframes out {  0% {    -o-transform: scale(1);    opacity: 1;  }  25% {    -o-transform: scale(1.05);  }  99% {    -o-transform: scale(0.8);  }  100% {    opacity: 0;    display: none;  }}@keyframes out {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1;  }  25% {    -webkit-transform: scale(1.05);    transform: scale(1.05);  }  99% {    -webkit-transform: scale(0.8);    transform: scale(0.8);  }  100% {    opacity: 0;    display: none;  }}.in, .beta.in {  z-index: 30;  display: block;  opacity: 0;  -webkit-animation: in 0.75s ease forwards 0.25s;  -moz-animation: in 0.75s ease forwards 0.25s;  -o-animation: in 0.75s ease forwards 0.25s;  animation: in 0.75s ease forwards 0.25s;}@-webkit-keyframes in {  0% {    -webkit-transform: translate3d(150px, 0, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@-moz-keyframes in {  0% {    -moz-transform: translate3d(150px, 0, 0);    opacity: 0;  }  100% {    -moz-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@-o-keyframes in {  0% {    -o-transform: translate3d(150px, 0, 0);    opacity: 0;  }  100% {    -o-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@keyframes in {  0% {    -webkit-transform: translate3d(150px, 0, 0);    -moz-transform: translate3d(150px, 0, 0);    -o-transform: translate3d(150px, 0, 0);    transform: translate3d(150px, 0, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0px, 0, 0);    -moz-transform: translate3d(0px, 0, 0);    -o-transform: translate3d(0px, 0, 0);    transform: translate3d(0px, 0, 0);    opacity: 1;  }}.alpha.in {  z-index: 30;  display: block;  opacity: 0;  -webkit-animation: in-prev 0.75s ease forwards 0.25s;  -moz-animation: in-prev 0.75s ease forwards 0.25s;  -o-animation: in-prev 0.75s ease forwards 0.25s;  animation: in-prev 0.75s ease forwards 0.25s;}@-webkit-keyframes in-prev {  0% {    -webkit-transform: translate3d(-150px, 0, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@-moz-keyframes in-prev {  0% {    -moz-transform: translate3d(-150px, 0, 0);    opacity: 0;  }  100% {    -moz-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@-o-keyframes in-prev {  0% {    -o-transform: translate3d(-150px, 0, 0);    opacity: 0;  }  100% {    -o-transform: translate3d(0px, 0, 0);    opacity: 1;  }}@keyframes in-prev {  0% {    -webkit-transform: translate3d(-150px, 0, 0);    -moz-transform: translate3d(-150px, 0, 0);    -o-transform: translate3d(-150px, 0, 0);    transform: translate3d(-150px, 0, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0px, 0, 0);    -moz-transform: translate3d(0px, 0, 0);    -o-transform: translate3d(0px, 0, 0);    transform: translate3d(0px, 0, 0);    opacity: 1;  }}.charlie.in {  z-index: 30;  display: block;  opacity: 0;  -webkit-animation: in-charlie 0.75s ease-out forwards 0.25s;  -moz-animation: in-charlie 0.75s ease-out forwards 0.25s;  -o-animation: in-charlie 0.75s ease-out forwards 0.25s;  animation: in-charlie 0.75s ease-out forwards 0.25s;}@-webkit-keyframes in-charlie {  0% {    -webkit-transform: translate3d(0, 150px, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0, 0, 0);    opacity: 1;  }}@-moz-keyframes in-charlie {  0% {    -moz-transform: translate3d(0, 150px, 0);    opacity: 0;  }  100% {    -moz-transform: translate3d(0, 0, 0);    opacity: 1;  }}@-o-keyframes in-charlie {  0% {    -o-transform: translate3d(0, 150px, 0);    opacity: 0;  }  100% {    -o-transform: translate3d(0, 0, 0);    opacity: 1;  }}@keyframes in-charlie {  0% {    -webkit-transform: translate3d(0, 150px, 0);    -moz-transform: translate3d(0, 150px, 0);    -o-transform: translate3d(0, 150px, 0);    transform: translate3d(0, 150px, 0);    opacity: 0;  }  100% {    -webkit-transform: translate3d(0, 0, 0);    -moz-transform: translate3d(0, 0, 0);    -o-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);    opacity: 1;  }}

$(document).ready(function(){    $(".dropdown").click(function(){    $(".menu").toggleClass("showMenu");      $(".menu > li").click(function(){        $(".dropdown > p").html($(this).html());          $(".menu").removeClass("showMenu");      });  });  });

/*    1. container*/.book {    position: relative;    width: 160px;     height: 220px;    -webkit-perspective: 1000px;    -moz-perspective: 1000px;    perspective: 1000px;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    transform-style: preserve-3d;}/*    2. background & color*//* HARDCOVER FRONT */.hardcover_front li:first-child {    background-color: #eee;    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;    backface-visibility: hidden;}/* reverse */.hardcover_front li:last-child {    background: #fffbec;}/* HARDCOVER BACK */.hardcover_back li:first-child {    background: #fffbec;}/* reverse */.hardcover_back li:last-child {    background: #fffbec;}.book_spine li:first-child {    background: #eee;}.book_spine li:last-child {    background: #333;}/* thickness of cover */.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back li:first-child:before,.hardcover_back li:last-child:after,.hardcover_back li:last-child:before,.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine li:last-child:before {    background: #999;}/* page */.page > li {    background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);    background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);    background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);    background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);    box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);    border-radius: 0px 5px 5px 0px;}/*    3. opening cover, back cover and pages*/.hardcover_front {    -webkit-transform: rotateY(-34deg) translateZ(8px);    -moz-transform: rotateY(-34deg) translateZ(8px);    transform: rotateY(-34deg) translateZ(8px);    z-index: 100;}.hardcover_back {    -webkit-transform: rotateY(-15deg) translateZ(-8px);    -moz-transform: rotateY(-15deg) translateZ(-8px);    transform: rotateY(-15deg) translateZ(-8px);}.page li:nth-child(1) {    -webkit-transform: rotateY(-28deg);    -moz-transform: rotateY(-28deg);    transform: rotateY(-28deg);}.page li:nth-child(2) {    -webkit-transform: rotateY(-30deg);    -moz-transform: rotateY(-30deg);    transform: rotateY(-30deg);}.page li:nth-child(3) {    -webkit-transform: rotateY(-32deg);    -moz-transform: rotateY(-32deg);    transform: rotateY(-32deg);}.page li:nth-child(4) {    -webkit-transform: rotateY(-34deg);    -moz-transform: rotateY(-34deg);    transform: rotateY(-34deg);}.page li:nth-child(5) {    -webkit-transform: rotateY(-36deg);    -moz-transform: rotateY(-36deg);    transform: rotateY(-36deg);}/*    4. position, transform & transition*/.hardcover_front,.hardcover_back,.book_spine,.hardcover_front li,.hardcover_back li,.book_spine li {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    transform-style: preserve-3d;}.hardcover_front,.hardcover_back {    -webkit-transform-origin: 0% 100%;    -moz-transform-origin: 0% 100%;    transform-origin: 0% 100%;}.hardcover_front {    -webkit-transition: all 0.8s ease, z-index 0.6s;    -moz-transition: all 0.8s ease, z-index 0.6s;    transition: all 0.8s ease, z-index 0.6s;}/* HARDCOVER front */.hardcover_front li:first-child {    cursor: default;    -webkit-user-select: none;    -moz-user-select: none;    user-select: none;    -webkit-transform: translateZ(2px);    -moz-transform: translateZ(2px);    transform: translateZ(2px);}.hardcover_front li:last-child {    -webkit-transform: rotateY(180deg) translateZ(2px);    -moz-transform: rotateY(180deg) translateZ(2px);    transform: rotateY(180deg) translateZ(2px);}/* HARDCOVER back */.hardcover_back li:first-child {    -webkit-transform: translateZ(2px);    -moz-transform: translateZ(2px);    transform: translateZ(2px);}.hardcover_back li:last-child {    -webkit-transform: translateZ(-2px);    -moz-transform: translateZ(-2px);    transform: translateZ(-2px);}/* thickness of cover */.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back li:first-child:before,.hardcover_back li:last-child:after,.hardcover_back li:last-child:before,.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine li:last-child:before {    position: absolute;    top: 0;    left: 0;}/* HARDCOVER front */.hardcover_front li:first-child:after,.hardcover_front li:first-child:before {    width: 4px;    height: 100%;}.hardcover_front li:first-child:after {    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    transform: rotateY(90deg) translateZ(-2px) translateX(2px);}.hardcover_front li:first-child:before {    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);    transform: rotateY(90deg) translateZ(158px) translateX(2px);}.hardcover_front li:last-child:after,.hardcover_front li:last-child:before {    width: 4px;    height: 160px;}.hardcover_front li:last-child:after {    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);}.hardcover_front li:last-child:before {    box-shadow: 0px 0px 30px 5px #333;    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);}/* thickness of cover */.hardcover_back li:first-child:after,.hardcover_back li:first-child:before {    width: 4px;    height: 100%;}.hardcover_back li:first-child:after {    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    transform: rotateY(90deg) translateZ(-2px) translateX(2px);}.hardcover_back li:first-child:before {    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);    transform: rotateY(90deg) translateZ(158px) translateX(2px);}.hardcover_back li:last-child:after,.hardcover_back li:last-child:before {    width: 4px;    height: 160px;}.hardcover_back li:last-child:after {    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);}.hardcover_back li:last-child:before {    box-shadow: 10px -1px 80px 20px #666;    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);}/* BOOK SPINE */.book_spine {    -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);    -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);    transform: rotateY(60deg) translateX(-5px) translateZ(-12px);    width: 16px;    z-index: 0;}.book_spine li:first-child {    -webkit-transform: translateZ(2px);    -moz-transform: translateZ(2px);    transform: translateZ(2px);}.book_spine li:last-child {    -webkit-transform: translateZ(-2px);    -moz-transform: translateZ(-2px);    transform: translateZ(-2px);}/* thickness of book spine */.book_spine li:first-child:after,.book_spine li:first-child:before {    width: 4px;    height: 100%;}.book_spine li:first-child:after {    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);    transform: rotateY(90deg) translateZ(-2px) translateX(2px);}.book_spine li:first-child:before {    -webkit-transform: rotateY(-90deg) translateZ(-12px);    -moz-transform: rotateY(-90deg) translateZ(-12px);    transform: rotateY(-90deg) translateZ(-12px);}.book_spine li:last-child:after,.book_spine li:last-child:before {    width: 4px;    height: 16px;}.book_spine li:last-child:after {    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);}.book_spine li:last-child:before {    box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);    transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);}.page,.page > li {    position: absolute;    top: 0;    left: 0;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    transform-style: preserve-3d;}.page {    width: 100%;    height: 98%;    top: 1%;    left: 3%;    z-index: 10;}.page > li {    width: 100%;    height: 100%;    -webkit-transform-origin: left center;    -moz-transform-origin: left center;    transform-origin: left center;    -webkit-transition-property: transform;    -moz-transition-property: transform;    transition-property: transform;    -webkit-transition-timing-function: ease;    -moz-transition-timing-function: ease;    transition-timing-function: ease;}.page > li:nth-child(1) {    -webkit-transition-duration: 0.6s;    -moz-transition-duration: 0.6s;    transition-duration: 0.6s;}.page > li:nth-child(2) {    -webkit-transition-duration: 0.6s;    -moz-transition-duration: 0.6s;    transition-duration: 0.6s;}.page > li:nth-child(3) {    -webkit-transition-duration: 0.4s;    -moz-transition-duration: 0.4s;    transition-duration: 0.4s;}.page > li:nth-child(4) {    -webkit-transition-duration: 0.5s;    -moz-transition-duration: 0.5s;    transition-duration: 0.5s;}.page > li:nth-child(5) {    -webkit-transition-duration: 0.6s;    -moz-transition-duration: 0.6s;    transition-duration: 0.6s;}/*    5. events*/.book:hover > .hardcover_front {    -webkit-transform: rotateY(-145deg) translateZ(0);    -moz-transform: rotateY(-145deg) translateZ(0);    transform: rotateY(-145deg) translateZ(0);    z-index: 0;}.book:hover > .page li:nth-child(1) {    -webkit-transform: rotateY(-30deg);    -moz-transform: rotateY(-30deg);    transform: rotateY(-30deg);    -webkit-transition-duration: 1.5s;    -moz-transition-duration: 1.5s;    transition-duration: 1.5s;}.book:hover > .page li:nth-child(2) {    -webkit-transform: rotateY(-35deg);    -moz-transform: rotateY(-35deg);    transform: rotateY(-35deg);    -webkit-transition-duration: 1.8s;    -moz-transition-duration: 1.8s;    transition-duration: 1.8s;}.book:hover > .page li:nth-child(3) {    -webkit-transform: rotateY(-118deg);    -moz-transform: rotateY(-118deg);    transform: rotateY(-118deg);    -webkit-transition-duration: 1.6s;    -moz-transition-duration: 1.6s;    transition-duration: 1.6s;}.book:hover > .page li:nth-child(4) {    -webkit-transform: rotateY(-130deg);    -moz-transform: rotateY(-130deg);    transform: rotateY(-130deg);    -webkit-transition-duration: 1.4s;    -moz-transition-duration: 1.4s;    transition-duration: 1.4s;}.book:hover > .page li:nth-child(5) {    -webkit-transform: rotateY(-140deg);    -moz-transform: rotateY(-140deg);    transform: rotateY(-140deg);    -webkit-transition-duration: 1.2s;    -moz-transition-duration: 1.2s;    transition-duration: 1.2s;}/*    6. Bonus*//* cover CSS */.coverDesign {    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    overflow: hidden;    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;    backface-visibility: hidden;}.coverDesign::after {    background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);    background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);    background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;}.coverDesign h1 {    color: #fff;    font-size: 2.2em;    letter-spacing: 0.05em;    text-align: center;    margin: 54% 0 0 0;    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);}.coverDesign p {    color: #f8f8f8;    font-size: 1em;    text-align: center;    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);}.yellow {    background-color: #f1c40f;    background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);    background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);    background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);}.blue {    background-color: #3498db;    background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);    background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);    background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);}.grey {    background-color: #f8e9d1;    background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);    background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);    background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);}/* Basic ribbon */.ribbon {    background: #c0392b;    color: #fff;    display: block;    font-size: 0.7em;    position: absolute;    top: 11px;    right: 1px;    width: 40px;    height: 20px;    line-height: 20px;    letter-spacing: 0.15em;     text-align: center;    -webkit-transform: rotateZ(45deg) translateZ(1px);    -moz-transform: rotateZ(45deg) translateZ(1px);    transform: rotateZ(45deg) translateZ(1px);    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;    backface-visibility: hidden;    z-index: 10;}.ribbon::before,.ribbon::after{    position: absolute;    top: -20px;    width: 0;    height: 0;    border-bottom: 20px solid #c0392b;    border-top: 20px solid transparent;}.ribbon::before{    left: -20px;    border-left: 20px solid transparent;}.ribbon::after{    right: -20px;    border-right: 20px solid transparent;}/* figcaption */figcaption {    padding-left: 40px;    text-align: left;    position: absolute;    top: 0%;    left: 160px;    width: 310px;}figcaption h1 {    margin: 0;}figcaption span {    color: #16a085;    padding: 0.6em 0 1em 0;    display: block;}figcaption p {    color: #63707d;    line-height: 1.3;}/* Media Queries */@media screen and (max-width: 37.8125em) {    .align > li {        width: 100%;        min-height: 440px;        height: auto;        padding: 0;        margin: 0 0 30px 0;    }    .book {        margin: 0 auto;    }    figcaption {        text-align: center;        width: 320px;        top: 250px;        padding-left: 0;        left: -80px;        font-size: 90%;    }}

$(‘.track‘).click( function() {    $indicator = $(‘.indicator‘);    if( $indicator.hasClass(‘switch-on‘) ) {        $indicator.removeClass(‘switch-on‘).addClass(‘switch-off‘);        }    else {        $indicator.removeClass(‘switch-off‘).addClass(‘switch-on‘);    }});

.track {  position: relative;  margin: 10em auto;  /* padding: .2em; */  background: #b7b7b7;  width: 10em;  height: 4em;  border: .1em solid #575757;  border-radius: 10em;  box-shadow: inset 0 .5em .5em #666,    inset 0 -.2em .5em #666;  cursor: pointer;}.track:after {  position: absolute;  content: "";  display: block;  margin-top: -4.5em;  margin-left: -.6em;  width: 11em;  height: 5em;  border: .1em solid #979797;  border-radius: 10em;  box-shadow: inset 0 1em 1em #979797, inset 0 -1em 1em #e7e7e7, 0 .1em .2em #fff;  z-index: -1;}.indicator {  position: relative;  background: #ddd;  height: 100%;  width: 40%;  border-radius: 50%;  border: .1em solid #666;  box-shadow: inset 0 .5em .5em #f7f7f7,    inset 0 -.3em .3em #666;}.indicator:after {  content: "";  display: block;  margin: 1.2em auto;  background: #ff3434;  width: 1em;  height: 1em;  box-shadow: inset 0 .15em #499,    0 .15em #faa;  border-radius: 50%;}.indicator.switch-on {  -webkit-animation:           switch-on .3s;  -moz-animation:              switch-on .3s;  -o-animation:                switch-on .3s;  animation:                   switch-on .3s;  -webkit-animation-fill-mode: forwards;  -moz-animation-fill-mode:    forwards;  -o-animation-fill-mode:      forwards;  animation-fill-mode:        forwards;}.indicator.switch-off {  -webkit-animation:           switch-off .3s;  -moz-animation:              switch-off .3s;  -o-animation:                switch-off .3s;  animation:                   switch-off .3s;  -webkit-animation-fill-mode: forwards;  -moz-animation-fill-mode:    forwards;  -o-animation-fill-mode:      forwards;  -animation-fill-mode:        forwards;}@-webkit-keyframes switch-on {  0% {    margin-left: 0;  }  100% {    margin-left: 60%;  }}@-moz-keyframes switch-on {  0% {    margin-left: 0;  }  100% {    margin-left: 60%;  }}@-o-keyframes switch-on {  0% {    margin-left: 0;  }  100% {    margin-left: 60%;  }}@keyframes switch-on {  0% {    margin-left: 0;  }  100% {    margin-left: 60%;  }}@-webkit-keyframes switch-off {  0% {    margin-left: 60%;  }  100% {    margin-left: 0;  }}@-moz-keyframes switch-off {  0% {    margin-left: 60%;  }  100% {    margin-left: 0;  }}@-o-keyframes switch-off {  0% {    margin-left: 60%;  }  100% {    margin-left: 0;  }}@keyframes switch-off {  0% {    margin-left: 60%;  }  100% {    margin-left: 0;  }}.indicator.switch-on:after {  -webkit-animation:           light-on .3s;  -moz-animation:              light-on .3s;  -o-animation:                light-on .3s;  animation:                   light-on .3s;  -webkit-animation-fill-mode: forwards;  -moz-animation-fill-mode:    forwards;  -o-animation-fill-mode:      forwards;  -animation-fill-mode:        forwards;}.indicator.switch-off:after {  -webkit-animation:           light-off .3s;  -moz-animation:              light-off .3s;  -o-animation:                light-off .3s;  animation:                   light-off .3s;  -webkit-animation-fill-mode: forwards;  -moz-animation-fill-mode:    forwards;  -o-animation-fill-mode:      forwards;  -animation-fill-mode:        forwards;}@-webkit-keyframes light-on {  0% {    background: #fa3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }    100% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }}@-moz-keyframes light-on {  0% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }    100% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }}@-o-keyframes light-on {  0% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }    100% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }}@keyframes light-on {  0% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }    100% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }}@-webkit-keyframes light-off {  0% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }    100% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }}@-moz-keyframes light-off {  0% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }    100% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }}@-o-keyframes light-off {  0% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }    100% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }}@keyframes light-off {  0% {    background: #0f0;    box-shadow: inset 0 .15em #494,    0 .15em #afa;  }    100% {    background: #ff3434;    box-shadow: inset 0 .15em #499,    0 .15em #faa;  }}

var menuItems = $(‘.main-navigation li‘);menuItems.on("click", function(event) {      menuItems.removeClass("active");    $(this).addClass("active");    $(".main-content").css({    "background": $(this).data("bg-color")  });    event.preventDefault();});