* { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; margin: 0; padding: 0; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 740px; background: rgb(215, 215, 215); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); } #main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } article { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } section { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: absolute; top: 50%; left: 50%; margin-left: -512px; margin-top: -384px; opacity: 0; } body, section.bespoke-slide { -webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease; -moz-transition: -moz-transform .7s ease, opacity .7s ease, background-color .7s ease; -ms-transition: -ms-transform .7s ease, opacity .7s ease, background-color .7s ease; -o-transition: -o-transform .7s ease, opacity .7s ease, background-color .7s ease; transition: transform .7s ease, opacity .7s ease, background-color .7s ease; } section.bespoke-active { opacity: 1; z-index: 1; } section.bespoke-inactive { pointer-events: none; }