Skip to content
Snippets Groups Projects
main.css 20.9 KiB
Newer Older
  • Learn to ignore specific revisions
  • Hakim El Hattab's avatar
    Hakim El Hattab committed
    /**
    
     * Main styles for reveal.js 
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
     * @author Hakim El Hattab
     */
    
    
    /*********************************************
     * FONT-FACE DEFINITIONS
     *********************************************/
    
    @font-face {
    	font-family: 'League Gothic';
    	src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
    	font-weight: normal;
    	font-style: normal;
    }
    
    
    /*********************************************
     * GLOBAL STYLES
     *********************************************/
    
    html, body {
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	padding: 0;
    	margin: 0;
    
    	overflow: hidden;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	
    
    	font-family: 'Lato', Times, 'Times New Roman', serif;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	font-size: 36px;
    
    	font-weight: 200;
    	letter-spacing: -0.02em;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	
    	width: 100%;
    	height: 100%;
    
    
    	background: #555a5f;
    	background: -moz-radial-gradient(center, ellipse cover, #555a5f 0%, #1c1e20 100%);
    	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#555a5f), color-stop(100%,#1c1e20));
    	background: -webkit-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
    	background: -o-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
    	background: -ms-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
    	background: radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    }
    
    /*********************************************
     * HEADERS
     *********************************************/
    h1, h2, h3, h4 {
    	margin: 0 0 20px 0;
    
    	font-family: 'League Gothic', sans-serif;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	line-height: 0.9em;
    	letter-spacing: 0.02em;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	text-transform: uppercase;
    
    	text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    }
    
    h1 { font-size: 136px; 	}
    h2 { font-size: 76px;	}
    h3 { font-size: 56px;	}
    h4 { font-size: 36px;	}
    
    h1.inverted,
    h2.inverted,
    h3.inverted,
    h4.inverted {
    	color: #fff;
    
    	text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    }
    
    h1 {
    	text-shadow: 0 1px 0 #ccc,
                   0 2px 0 #c9c9c9,
                   0 3px 0 #bbb,
                   0 4px 0 #b9b9b9,
                   0 5px 0 #aaa,
                   0 6px 1px rgba(0,0,0,.1),
                   0 0 5px rgba(0,0,0,.1),
                   0 1px 3px rgba(0,0,0,.3),
                   0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.25),
                   0 20px 20px rgba(0,0,0,.15);
    
    /*********************************************
     * VIEW FRAGMENTS
     *********************************************/
    
    
    #reveal 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 section .fragment.visible {
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    /*********************************************
     * DEFAULT ELEMENT STYLES
     *********************************************/
    
    
    #reveal>section {
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	line-height: 1.2em;
    
    	font-weight: normal;
    }
    
    strong, b {
    	font-weight: bold;
    }
    
    em, i {
    	font-style: italic;
    }
    
    ol, ul {
    	display: inline-block;
    
    	text-align: left;
    	margin: 0 auto;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    }
    
    ol {
    	list-style: decimal;
    	list-style-position: inside;
    }
    
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	margin-bottom: 10px;
    }
    
    
    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);
    }
    	blockquote:before {
    		content: '“';
    	}
    	blockquote:after {
    		content: '”';
    	}
    
    pre {
    	display: block;
    	position: relative;
    	width: 90%;
    	margin: 10px auto;
    
    	text-align: left;
    	font-size: 14px;
    	font-family: monospace;
    	line-height: 1.1em;
    
    	word-wrap: break-word;
    
    	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
    }
    
    code {
    	font-family: monospace;
    }
    
    small {
    	font-size: 60%;
    
    	line-height: 1em;
    	vertical-align: top;
    
    }
    
    q {	
    	font-style: italic;
    }
    	q:before {
    		content: '“';
    	}
    	q:after {
    		content: '”';
    	}
    
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    a:not(.image) {
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	text-decoration: none;
    
    
    	-webkit-transition: all .2s ease;
    	   -moz-transition: all .2s ease;
    
    	    -ms-transition: all .2s ease;
    
    	     -o-transition: all .2s ease;
    	        transition: all .2s ease;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    }
    	
    	a:not(.image):hover {
    
    		color: hsl(185, 85%, 70%);
    		background: hsla(185, 25%, 20%, 0.4);
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    		text-shadow: none;
    		border: none;
    
    		border-radius: 2px;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	}
    
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	margin: 30px 0 0 0;
    	background: rgba(255,255,255,0.12);
    	border: 4px solid #eee;
    	
    	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    
    	     -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    	
    
    	-webkit-transition: all .2s linear;
    	   -moz-transition: all .2s linear;
    
    	    -ms-transition: all .2s linear;
    
    	     -o-transition: all .2s linear;
    	        transition: all .2s linear;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    }
    
    	a.image:hover img {
    		background: rgba(255,255,255,0.2);
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    		
    
    		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    		     -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    
    /*********************************************
     * CONTROLS
     *********************************************/
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    
    
    .controls {
    	display: none;
    	position: fixed;
    	width: 100px;
    	height: 100px;
    
    	right: 0;
    	bottom: 0;
    }
    	
    	.controls a {
    		font-size: 30px;
    		position: absolute;
    		opacity: 0.1;
    		color: #fff;
    	}
    		.controls a.enabled {
    			opacity: 0.6;
    			color: hsl(185, 85%, 70%);
    
    			text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
    		}
    		.controls a.enabled:active {
    			margin-top: 1px;
    		}
    
    	.controls .left {
    		top: 30px;
    	}
    
    	.controls .right {
    		left: 60px;
    		top: 30px;
    	}
    
    	.controls .up {
    		left: 30px;
    	}
    
    	.controls .down {
    		left: 30px;
    		top: 60px;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    
    
    
    /*********************************************
     * PROGRESS BAR
     *********************************************/
    
    
    	position: fixed;
    
    	display: none;
    
    	height: 4px;
    	width: 100%;
    	bottom: 0;
    	left: 0;
    
    
    	
    	.progress span {
    		display: block;
    		background: hsl(185, 85%, 50%);
    		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
     *********************************************/
    
    .roll {
        display: inline-block;
        overflow: hidden;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    
    
        -webkit-perspective: 400px;
           -moz-perspective: 400px;
    
            -ms-perspective: 400px;
    
    Hakim El Hattab's avatar
    Hakim El Hattab committed
    
    
        -webkit-perspective-origin: 50% 50%;
           -moz-perspective-origin: 50% 50%;
    
            -ms-perspective-origin: 50% 50%;
    
                perspective-origin: 50% 50%;
    }
    	.roll:hover {
    		background: none;
    		text-shadow: none;
    	}
    .roll span {
        display: block;
        position: relative;
        padding: 0 2px;
    
    
        -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;
    }
        .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 );
        }
    .roll span:after {
        content: attr(data-title);
    
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 2px;
    
        color: #fff;
        background: hsl(185, 60%, 35%);
    
        -webkit-transform-origin: 50% 0%;
           -moz-transform-origin: 50% 0%;
    
            -ms-transform-origin: 50% 0%;
    
                transform-origin: 50% 0%;
    
        -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
           -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    
            -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    
                transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    }
    
    /*********************************************
     * SLIDES
     *********************************************/
    
    
    	position: absolute;
    	width: 900px;
    	height: 600px;
    	
    	left: 50%;
    	top: 50%;
    	margin-left: -450px;
    	margin-top: -320px;
    	padding: 20px 0px;
    	
    	text-align: center;
    	
    	-webkit-perspective: 600px;
    	   -moz-perspective: 600px;
    	    -ms-perspective: 600px;
    	        perspective: 600px;
    
     	-webkit-perspective-origin: 50% 25%;
     	   -moz-perspective-origin: 50% 25%;
     	    -ms-perspective-origin: 50% 25%;
     	        perspective-origin: 50% 25%;
    }
    
    
    #reveal>section,
    #reveal>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 section.present {
    
    	display: block;
    	z-index: 11;
    	opacity: 1;
    }
    
    
    /*********************************************
     * DEFAULT TRANSITION
     *********************************************/
    
    
    #reveal 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 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 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 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
     *********************************************/
    
    
    .concave #reveal>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);
    }
    
    .concave #reveal>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);
    }
    
    
    .concave #reveal 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);
    }
    
    .concave #reveal 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
     *********************************************/
    
    
    .linear #reveal>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);
    }
    
    .linear #reveal>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);
    }
    
    
    .linear #reveal 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%);
    }
    
    .linear #reveal 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%);
    }
    
    /*********************************************
     * BOX TRANSITION
     *********************************************/
    
    
    	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;
    }
    
    
    .box #reveal section {
    
    	padding: 30px;
    	
    	-webkit-box-sizing: border-box;
    	   -moz-box-sizing: border-box;
    	        box-sizing: border-box;
    }
    
    	.box #reveal section:not(.stack):before {
    
    		content: '';
    		position: absolute;
    		display: block;
    		width: 100%;
    		height: 100%;
    		left: 0;
    		top: 0;
    		background: #292929;
    		border-radius: 4px;
    
    		-webkit-transform: translateZ( -20px );
    		   -moz-transform: translateZ( -20px );
    		    -ms-transform: translateZ( -20px );
    		     -o-transform: translateZ( -20px );
    		        transform: translateZ( -20px );
    	}
    
    	.box #reveal 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 );
    	}
    
    
    .box #reveal section.stack {
    
    .box #reveal>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);
    }
    
    
    .box #reveal>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);
    }
    
    
    .box #reveal 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);
    }
    
    
    .box #reveal 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
     *********************************************/
    
    
    	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;
    }
    
    
    .page #reveal section {
    
    	padding: 30px;
    
    	-webkit-box-sizing: border-box;
    	   -moz-box-sizing: border-box;
    	        box-sizing: border-box;
    }
    
    	.page #reveal section.past {
    
    	.page #reveal section:not(.stack):before {
    
    		content: '';
    		position: absolute;
    		display: block;
    		width: 100%;
    		height: 100%;
    		left: 0;
    		top: 0;
    		background: #292929;
    
    		-webkit-transform: translateZ( -20px );
    		   -moz-transform: translateZ( -20px );
    		    -ms-transform: translateZ( -20px );
    		     -o-transform: translateZ( -20px );
    		        transform: translateZ( -20px );
    	}
    
    	.page #reveal 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 );
    	}
    
    
    .page #reveal section.stack {
    
    .page #reveal>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);
    }
    
    
    .page #reveal>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);
    }
    
    
    .page #reveal 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);
    }
    
    
    .page #reveal 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);
    }
    
    
    /*********************************************
     * NEON THEME
     *********************************************/
    
    .neon a,
    .neon a:hover,
    .neon .controls a.enabled {
    	color: #5de048;
    }
    
    .neon .progress span,
    .neon .roll span:after {
    	background: #5de048;
    }
    
    a.image:hover img {
    	border-color: #5de048;
    }
    
    
    /*********************************************
     * OVERVIEW
     *********************************************/
    
    
    .overview #reveal section {
    
    	padding: 20px 0;
    	opacity: 1;
    	cursor: pointer;
    	background: rgba(0,0,0,0.1);
    }
    
    .overview #reveal section:after,
    .overview #reveal section:before {
    
    .overview #reveal section>section {
    
    	.overview #reveal section:hover {
    
    	.overview #reveal section.present {
    
    		background: rgba(0,0,0,0.3);
    	}
    
    .overview #reveal section.stack {