@charset "UTF-8"; /** * reveal.js * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ /********************************************* * RESET STYLES *********************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /********************************************* * GLOBAL STYLES *********************************************/ html, body { padding: 0; margin: 0; width: 100%; height: 100%; min-height: 600px; overflow: hidden; } body { position: relative; line-height: 1; } @media screen and (max-width: 900px) { body { font-size: 30px; } } ::selection { background:#FF5E99; color:#fff; text-shadow: none; } /********************************************* * HEADERS *********************************************/ .reveal h1 { font-size: 3.77em; } .reveal h2 { font-size: 2.11em; } .reveal h3 { font-size: 1.55em; } .reveal h4 { font-size: 1em; } /********************************************* * VIEW FRAGMENTS *********************************************/ .reveal .slides section .fragment { opacity: 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .reveal .slides section .fragment.visible { opacity: 1; } /********************************************* * DEFAULT ELEMENT STYLES *********************************************/ .reveal .slides section { line-height: 1.2em; font-weight: normal; } .reveal img { /* preserve aspect ratio and scale image so it's bound within the section */ max-width: 100%; max-height: 100%; } .reveal strong, .reveal b { font-weight: bold; } .reveal em, .reveal i { font-style: italic; } .reveal ol, .reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } .reveal ol { list-style-type: decimal; } .reveal ul { list-style-type: disc; } .reveal ul ul { list-style-type: square; } .reveal ul ul ul { list-style-type: circle; } .reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { display: block; margin-left: 40px; } .reveal p { margin-bottom: 10px; line-height: 1.2em; } .reveal q, .reveal blockquote { quotes: none; } .reveal blockquote { display: block; position: relative; width: 70%; margin: 5px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } .reveal blockquote:before { content: '“'; } .reveal blockquote:after { content: '”'; } .reveal q { font-style: italic; } .reveal q:before { content: '“'; } .reveal q:after { content: '”'; } .reveal pre { display: block; position: relative; width: 90%; margin: 10px auto; text-align: left; font-size: 0.55em; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } .reveal code { font-family: monospace; overflow: auto; max-height: 400px; } .reveal table th, .reveal table td { text-align: left; padding-right: .3em; } .reveal table th { text-shadow: rgb(255,255,255) 1px 1px 2px; } .reveal sup { vertical-align: super; } .reveal sub { vertical-align: sub; } .reveal small { display: inline-block; font-size: 0.6em; line-height: 1.2em; vertical-align: top; } .reveal small * { vertical-align: top; } /********************************************* * CONTROLS *********************************************/ .reveal .controls { display: none; position: fixed; width: 100px; height: 100px; z-index: 30; right: 0; bottom: 0; } .reveal .controls a { font-family: Arial; font-size: 0.83em; position: absolute; opacity: 0.1; } .reveal .controls a.enabled { opacity: 0.6; } .reveal .controls a.enabled:active { margin-top: 1px; } .reveal .controls .left { top: 30px; } .reveal .controls .right { left: 60px; top: 30px; } .reveal .controls .up { left: 30px; } .reveal .controls .down { left: 30px; top: 60px; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { position: fixed; display: none; height: 3px; width: 100%; bottom: 0; left: 0; } .reveal .progress span { display: block; height: 100%; width: 0px; -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } /********************************************* * ROLLING LINKS *********************************************/ .reveal .roll { display: inline-block; line-height: 1.2; overflow: hidden; vertical-align: top; -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .reveal .roll:hover { background: none; text-shadow: none; } .reveal .roll span { display: block; position: relative; padding: 0 2px; pointer-events: none; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .reveal .roll:hover span { background: rgba(0,0,0,0.5); -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); } .reveal .roll span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); } /********************************************* * SLIDES *********************************************/ .reveal .slides { position: absolute; max-width: 900px; width: 80%; height: 60%; left: 50%; top: 50%; margin-top: -320px; padding: 20px 0px; overflow: visible; text-align: center; -webkit-transition: -webkit-perspective .4s ease; -moz-transition: -moz-perspective .4s ease; -ms-transition: -ms-perspective .4s ease; -o-transition: -o-perspective .4s ease; transition: perspective .4s ease; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 25%; -moz-perspective-origin: 0% 25%; -ms-perspective-origin: 0% 25%; perspective-origin: 0% 25%; } .reveal .slides>section, .reveal .slides>section>section { display: none; position: absolute; width: 100%; min-height: 600px; z-index: 10; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } .reveal .slides>section.present { display: block; z-index: 11; opacity: 1; } .reveal .slides>section { margin-left: -50%; } /********************************************* * DEFAULT TRANSITION *********************************************/ .reveal .slides>section.past { display: block; opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } .reveal .slides>section.future { display: block; opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } .reveal .slides>section>section.past { display: block; opacity: 0; -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); } .reveal .slides>section>section.future { display: block; opacity: 0; -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); } /********************************************* * CONCAVE TRANSITION *********************************************/ .reveal.concave .slides>section.past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } .reveal.concave .slides>section.future { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } .reveal.concave .slides>section>section.past { -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } .reveal.concave .slides>section>section.future { -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } /********************************************* * LINEAR TRANSITION *********************************************/ .reveal.linear .slides>section.past { -webkit-transform: translate(-150%, 0); -moz-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0); -o-transform: translate(-150%, 0); transform: translate(-150%, 0); } .reveal.linear .slides>section.future { -webkit-transform: translate(150%, 0); -moz-transform: translate(150%, 0); -ms-transform: translate(150%, 0); -o-transform: translate(150%, 0); transform: translate(150%, 0); } .reveal.linear .slides>section>section.past { -webkit-transform: translate(0, -150%); -moz-transform: translate(0, -150%); -ms-transform: translate(0, -150%); -o-transform: translate(0, -150%); transform: translate(0, -150%); } .reveal.linear .slides>section>section.future { -webkit-transform: translate(0, 150%); -moz-transform: translate(0, 150%); -ms-transform: translate(0, 150%); -o-transform: translate(0, 150%); transform: translate(0, 150%); } /********************************************* * CUBE TRANSITION *********************************************/ .reveal.cube .slides { margin-top: -350px; -webkit-perspective-origin: 50% 25%; -moz-perspective-origin: 50% 25%; -ms-perspective-origin: 50% 25%; perspective-origin: 50% 25%; -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px; perspective: 1300px; } .reveal.cube .slides section { padding: 30px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .reveal.cube .slides section:not(.stack):before { content: ''; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: #232628; border-radius: 4px; -webkit-transform: translateZ( -20px ); -moz-transform: translateZ( -20px ); -ms-transform: translateZ( -20px ); -o-transform: translateZ( -20px ); transform: translateZ( -20px ); } .reveal.cube .slides section:not(.stack):after { content: ''; position: absolute; display: block; width: 90%; height: 30px; left: 5%; bottom: 0; background: none; z-index: 1; border-radius: 4px; box-shadow: 0px 95px 25px rgba(0,0,0,0.2); -webkit-transform: translateZ(-90px) rotateX( 65deg ); -moz-transform: translateZ(-90px) rotateX( 65deg ); -ms-transform: translateZ(-90px) rotateX( 65deg ); -o-transform: translateZ(-90px) rotateX( 65deg ); transform: translateZ(-90px) rotateX( 65deg ); } .reveal.cube .slides>section.stack { padding: 0; background: none; } .reveal.cube .slides>section.past { -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform: translate3d(-100%, 0, 0) rotateY(-90deg); } .reveal.cube .slides>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg); transform: translate3d(100%, 0, 0) rotateY(90deg); } .reveal.cube .slides>section>section.past { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg); -moz-transform: translate3d(0, -100%, 0) rotateX(90deg); -ms-transform: translate3d(0, -100%, 0) rotateX(90deg); transform: translate3d(0, -100%, 0) rotateX(90deg); } .reveal.cube .slides>section>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg); -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg); -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg); transform: translate3d(0, 100%, 0) rotateX(-90deg); } /********************************************* * PAGE TRANSITION *********************************************/ .reveal.page .slides { margin-top: -350px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 3000px; -moz-perspective: 3000px; -ms-perspective: 3000px; perspective: 3000px; } .reveal.page .slides section { padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .reveal.page .slides section.past { z-index: 12; } .reveal.page .slides section:not(.stack):before { content: ''; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.2); -webkit-transform: translateZ( -20px ); -moz-transform: translateZ( -20px ); -ms-transform: translateZ( -20px ); -o-transform: translateZ( -20px ); transform: translateZ( -20px ); } .reveal.page .slides section:not(.stack):after { content: ''; position: absolute; display: block; width: 90%; height: 30px; left: 5%; bottom: 0; background: none; z-index: 1; border-radius: 4px; box-shadow: 0px 95px 25px rgba(0,0,0,0.2); -webkit-transform: translateZ(-90px) rotateX( 65deg ); } .reveal.page .slides>section.stack { padding: 0; background: none; } .reveal.page .slides>section.past { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg); -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg); -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg); transform: translate3d(-40%, 0, 0) rotateY(-80deg); } .reveal.page .slides>section.future { -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .reveal.page .slides>section>section.past { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg); -moz-transform: translate3d(0, -40%, 0) rotateX(80deg); -ms-transform: translate3d(0, -40%, 0) rotateX(80deg); transform: translate3d(0, -40%, 0) rotateX(80deg); } .reveal.page .slides>section>section.future { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /********************************************* * TILE-FLIP TRANSITION (CSS shader) *********************************************/ .reveal.tileflip .slides section.present { -webkit-transform: none; -webkit-transition-duration: 800ms; -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1 ); } .reveal.tileflip .slides section.past { -webkit-transform: none; -webkit-transition-duration: 800ms; -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 ); } .reveal.tileflip .slides section.future { -webkit-transform: none; -webkit-transition-duration: 800ms; -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 ); } .reveal.tileflip .slides>section>section.present { -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1 ); } .reveal.tileflip .slides>section>section.past { -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 ); } .reveal.tileflip .slides>section>section.future { -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 ); } /********************************************* * NO TRANSITION *********************************************/ .reveal.none .slides section { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /********************************************* * OVERVIEW *********************************************/ .reveal.overview .slides { -webkit-perspective: 700px; -moz-perspective: 700px; -ms-perspective: 700px; perspective: 700px; } .reveal.overview .slides section { padding: 20px 0; max-height: 600px; overflow: hidden; opacity: 1; cursor: pointer; background: rgba(0,0,0,0.1); } .reveal.overview .slides section .fragment { opacity: 1; } .reveal.overview .slides section:after, .reveal.overview .slides section:before { display: none !important; } .reveal.overview .slides section>section { opacity: 1; cursor: pointer; } .reveal.overview .slides section:hover { background: rgba(0,0,0,0.3); } .reveal.overview .slides section.present { background: rgba(0,0,0,0.3); } .reveal.overview .slides>section.stack { background: none; padding: 0; overflow: visible; } /********************************************* * FALLBACK *********************************************/ .no-transforms { overflow-y: auto; } .no-transforms .slides section { display: block!important; opacity: 1!important; position: relative!important; height: auto; min-height: auto; margin-bottom: 100px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } /********************************************* * DEFAULT STATES *********************************************/ .state-background { position: absolute; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0 ); -webkit-transition: background 800ms ease; -moz-transition: background 800ms ease; -ms-transition: background 800ms ease; -o-transition: background 800ms ease; transition: background 800ms ease; } .alert .state-background { background: rgba( 200, 50, 30, 0.6 ); } .soothe .state-background { background: rgba( 50, 200, 90, 0.4 ); } .blackout .state-background { background: rgba( 0, 0, 0, 0.6 ); } /********************************************* * SPEAKER NOTES *********************************************/ .reveal aside.notes { display: none; }