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