reveal.scss 42,1 ko
Newer Older
/*!
 * reveal.js
 * http://lab.hakim.se/reveal-js
 * MIT licensed
 *
Hakim El Hattab's avatar
Hakim El Hattab a validé
 * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
 */


/*********************************************
 * RESET STYLES
 *********************************************/

html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
Yves Delley's avatar
Yves Delley a validé
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
	display: block;
}


/*********************************************
 * GLOBAL STYLES
 *********************************************/

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	position: relative;
	line-height: 1;
Yves Delley's avatar
Yves Delley a validé

	background-color: #fff;
	color: #000;
}


/*********************************************
 * VIEW FRAGMENTS
 *********************************************/

.reveal .slides section .fragment {
	opacity: 0;
Yves Delley's avatar
Yves Delley a validé
	visibility: hidden;

	&.visible {
		opacity: 1;

.reveal .slides section .fragment.grow {
	opacity: 1;

	&.visible {

.reveal .slides section .fragment.shrink {
	opacity: 1;

	&.visible {

.reveal .slides section .fragment.zoom-in {
	&.visible {
		transform: none;

.reveal .slides section .fragment.fade-out {
	opacity: 1;
Yves Delley's avatar
Yves Delley a validé
		visibility: hidden;

.reveal .slides section .fragment.semi-fade-out {
	opacity: 1;
		opacity: 0.5;
}

.reveal .slides section .fragment.strike {
	opacity: 1;

	&.visible {
		text-decoration: line-through;
	}
}
.reveal .slides section .fragment.fade-up {
	transform: translate(0, 20%);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-down {
	transform: translate(0, -20%);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-right {
	transform: translate(-20%, 0);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.fade-left {
	transform: translate(20%, 0);

	&.visible {
		transform: translate(0, 0);
	}
}

.reveal .slides section .fragment.current-visible {
Yves Delley's avatar
Yves Delley a validé
	opacity: 0;
	visibility: hidden;

	&.current-fragment {
Yves Delley's avatar
Yves Delley a validé
		opacity: 1;
Yves Delley's avatar
Yves Delley a validé
	}

.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
	opacity: 1;
}
	.reveal .slides section .fragment.highlight-red.visible {
		color: #ff2c2d
	}
	.reveal .slides section .fragment.highlight-green.visible {
		color: #17ff2e;
	}
	.reveal .slides section .fragment.highlight-blue.visible {
		color: #1b91ff;
	}

.reveal .slides section .fragment.highlight-current-red.current-fragment {
	color: #ff2c2d
}
.reveal .slides section .fragment.highlight-current-green.current-fragment {
	color: #17ff2e;
}
.reveal .slides section .fragment.highlight-current-blue.current-fragment {
	color: #1b91ff;
}


/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/

/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
.reveal:after {
  content: '';
  font-style: italic;
}

.reveal iframe {
	z-index: 1;
}

/** Prevents layering issues in certain browser/transition combinations */
.reveal a {
	position: relative;
}

Yves Delley's avatar
Yves Delley a validé
.reveal .stretch {
	max-width: none;
	max-height: none;
}

.reveal pre.stretch code {
	height: 100%;
	max-height: 100%;
}


/*********************************************
 * CONTROLS
 *********************************************/

@keyframes bounce-right {
	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
	20% {transform: translateX(10px);}
	30% {transform: translateX(-5px);}
}

@keyframes bounce-down {
	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
	20% {transform: translateY(10px);}
	30% {transform: translateY(-5px);}
}

$controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;
$controlsArrowAngle: 45deg;
$controlsArrowAngleHover: 40deg;
$controlsArrowAngleActive: 36deg;
@mixin controlsArrowTransform( $angle ) {
	&:before {
		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
	}
	&:after {
		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
}

.reveal .controls {
	$spacing: 12px;

	display: none;
	position: absolute;
	top: auto;
	bottom: $spacing;
	right: $spacing;
	left: auto;
	font-size: 10px;

	button {
		position: absolute;
		padding: 0;
		background-color: transparent;
		border: 0;
		outline: 0;
		cursor: pointer;
		color: currentColor;
		transform: scale(.9999);
		transition: color 0.2s ease,
					opacity 0.2s ease,
					transform 0.2s ease;
		z-index: 2; // above slides
		font-size: inherit;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

	.controls-arrow:before,
	.controls-arrow:after {
		content: '';
		position: absolute;
		width: $controlArrowLength;
		height: $controlArrowThickness;
		border-radius: $controlArrowThickness/2;
		background-color: currentColor;
		transition: all 0.15s ease, background-color 0.8s ease;
		transform-origin: $controlArrowThickness/2 50%;
		will-change: transform;
		width: $controlArrowSize;
		height: $controlArrowSize;
		@include controlsArrowTransform( $controlsArrowAngle );
			@include controlsArrowTransform( $controlsArrowAngleHover );
			@include controlsArrowTransform( $controlsArrowAngleActive );
		right: $controlArrowSize + $controlArrowSpacing*2;
		bottom: $controlArrowSpacing + $controlArrowSize/2;
		transform: translateX( -10px );
		bottom: $controlArrowSpacing + $controlArrowSize/2;
		transform: translateX( 10px );
			transform: rotate( 180deg );
		&.highlight {
Hakim El Hattab's avatar
Hakim El Hattab a validé
		right: $controlArrowSpacing + $controlArrowSize/2;
		bottom: $controlArrowSpacing*2 + $controlArrowSize;
		transform: translateY( -10px );
		right: $controlArrowSpacing + $controlArrowSize/2;
		transform: translateY( 10px );
			transform: rotate( -90deg );
		&.highlight {
	// Back arrow style: "faded":
	// Deemphasize backwards navigation arrows in favor of drawing
	// attention to forwards navigation
	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
	// Back arrow style: "hidden":
	// Never show arrows for backwards navigation
	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
		opacity: 0;
		visibility: hidden;
	}

	// Any control button that can be clicked is "enabled"
	.enabled {
Hakim El Hattab's avatar
Hakim El Hattab a validé
		opacity: 0.9;
		transform: none;
	}

	// Any control button that leads to showing or hiding
	// a fragment
	.enabled.fragmented {
Hakim El Hattab's avatar
Hakim El Hattab a validé
		opacity: 0.5;
	}

	.enabled:hover,
	.enabled.fragmented:hover {
		opacity: 1;
	}
// Adjust the layout when there are no vertical slides
Hakim El Hattab's avatar
Hakim El Hattab a validé
.reveal:not(.has-vertical-slides) .controls .navigate-left {
	bottom: $controlArrowSpacing;
	right: $controlArrowSpacing*2 + $controlArrowSize;
Hakim El Hattab's avatar
Hakim El Hattab a validé
.reveal:not(.has-vertical-slides) .controls .navigate-right {
	bottom: $controlArrowSpacing;
	right: $controlArrowSpacing;
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
	right: $controlArrowSpacing;
	bottom: $controlArrowSpacing*2 + $controlArrowSize;
Hakim El Hattab's avatar
Hakim El Hattab a validé
}
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
	right: $controlArrowSpacing;
	bottom: $controlArrowSpacing;
// Invert arrows based on background color
Hakim El Hattab's avatar
Hakim El Hattab a validé
.reveal.has-dark-background .controls {
	color: #fff;
Hakim El Hattab's avatar
Hakim El Hattab a validé
.reveal.has-light-background .controls {
	color: #000;
// Disable active states on touch devices
.reveal.no-hover .controls .controls-arrow:hover,
.reveal.no-hover .controls .controls-arrow:active {
	@include controlsArrowTransform( $controlsArrowAngle );
}

// Edge aligned controls layout
@media screen and (min-width: 500px) {

	$spacing: 8px;

	.reveal .controls[data-controls-layout="edges"] {
		& {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.navigate-left,
		.navigate-right,
		.navigate-up,
		.navigate-down {
			bottom: auto;
			right: auto;
		}

		.navigate-left {
			top: 50%;
			left: $spacing;
		}

		.navigate-right {
			top: 50%;
			right: $spacing;
		}

		.navigate-up {
			top: $spacing;
			left: 50%;
		}

		.navigate-down {
			bottom: $spacing;
			left: 50%;
		}
	}

}


/*********************************************
 * PROGRESS BAR
 *********************************************/

.reveal .progress {
	position: fixed;
	display: none;
	height: 3px;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 10;
Yves Delley's avatar
Yves Delley a validé

	background-color: rgba( 0, 0, 0, 0.2 );
}
	.reveal .progress:after {
		content: '';
Yves Delley's avatar
Yves Delley a validé
		display: block;
		position: absolute;
		height: 10px;
		width: 100%;
		top: -10px;
	}
	.reveal .progress span {
		display: block;
		height: 100%;
		width: 0px;
Yves Delley's avatar
Yves Delley a validé

		background-color: currentColor;
		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	}

/*********************************************
 * SLIDE NUMBER
 *********************************************/

.reveal .slide-number {
	position: fixed;
	display: block;
	z-index: 31;
Hakim El Hattab's avatar
Hakim El Hattab a validé
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1;
	background-color: rgba( 0, 0, 0, 0.4 );
.reveal .slide-number-delimiter {
/*********************************************
 * SLIDES
 *********************************************/

.reveal {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
Yves Delley's avatar
Yves Delley a validé
	touch-action: none;
}

.reveal .slides {
	position: absolute;
	width: 100%;
	height: 100%;
Yves Delley's avatar
Yves Delley a validé
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

	overflow: visible;
	z-index: 1;
	text-align: center;
	perspective: 600px;
	perspective-origin: 50% 40%;
}

.reveal .slides>section {
	-ms-perspective: 600px;
}

.reveal .slides>section,
.reveal .slides>section>section {
	display: none;
	position: absolute;
	width: 100%;
	padding: 20px 0px;
	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
				transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
				visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
				opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
}
.reveal[data-transition-speed="slow"] .slides section {
}

/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
}
.reveal .slides section[data-transition-speed="slow"] {
}

.reveal .slides>section.stack {
	padding-top: 0;
	padding-bottom: 0;
}

.reveal .slides>section.present,
.reveal .slides>section>section.present {
	display: block;
	z-index: 11;
	opacity: 1;
}

.reveal .slides>section>section:empty,
.reveal .slides>section[data-background-interactive],
.reveal .slides>section>section[data-background-interactive] {
.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
	min-height: 0 !important;
}

/* Don't allow interaction with invisible slides */
.reveal .slides>section.future,
.reveal .slides>section>section.future,
.reveal .slides>section.past,
.reveal .slides>section>section.past {
	pointer-events: none;
}

.reveal.overview .slides>section,
.reveal.overview .slides>section>section {
	pointer-events: auto;
}

Yves Delley's avatar
Yves Delley a validé
.reveal .slides>section.past,
.reveal .slides>section.future,
.reveal .slides>section>section.past,
.reveal .slides>section>section.future {
	opacity: 0;
}


/*********************************************
 * Mixins for readability of transitions
Yves Delley's avatar
Yves Delley a validé
 *********************************************/

@mixin transition-global($style) {
	.reveal .slides section[data-transition=#{$style}],
	.reveal.#{$style} .slides section:not([data-transition]) {
Yves Delley's avatar
Yves Delley a validé
}
@mixin transition-stack($style) {
	.reveal .slides section[data-transition=#{$style}].stack,
	.reveal.#{$style} .slides section.stack {
		@content;
	}
}
@mixin transition-horizontal-past($style) {
	.reveal .slides>section[data-transition=#{$style}].past,
	.reveal .slides>section[data-transition~=#{$style}-out].past,
	.reveal.#{$style} .slides>section:not([data-transition]).past {
		@content;
	}
Yves Delley's avatar
Yves Delley a validé
}
@mixin transition-horizontal-future($style) {
	.reveal .slides>section[data-transition=#{$style}].future,
	.reveal .slides>section[data-transition~=#{$style}-in].future,
	.reveal.#{$style} .slides>section:not([data-transition]).future {
		@content;
	}
Yves Delley's avatar
Yves Delley a validé
}

@mixin transition-vertical-past($style) {
	.reveal .slides>section>section[data-transition=#{$style}].past,
	.reveal .slides>section>section[data-transition~=#{$style}-out].past,
	.reveal.#{$style} .slides>section>section:not([data-transition]).past {
		@content;
	}
Yves Delley's avatar
Yves Delley a validé
}
@mixin transition-vertical-future($style) {
	.reveal .slides>section>section[data-transition=#{$style}].future,
	.reveal .slides>section>section[data-transition~=#{$style}-in].future,
	.reveal.#{$style} .slides>section>section:not([data-transition]).future {
		@content;
	}
Yves Delley's avatar
Yves Delley a validé
}

/*********************************************
 * SLIDE TRANSITION
 * Aliased 'linear' for backwards compatibility
 *********************************************/
Yves Delley's avatar
Yves Delley a validé

@each $stylename in slide, linear {
	.reveal.#{$stylename} section {
		backface-visibility: hidden;
	}
	@include transition-horizontal-past(#{$stylename}) {
		transform: translate(-150%, 0);
	}
	@include transition-horizontal-future(#{$stylename}) {
		transform: translate(150%, 0);
	}
	@include transition-vertical-past(#{$stylename}) {
		transform: translate(0, -150%);
	}
	@include transition-vertical-future(#{$stylename}) {
		transform: translate(0, 150%);
	}
Yves Delley's avatar
Yves Delley a validé
}

/*********************************************
 * CONVEX TRANSITION
 * Aliased 'default' for backwards compatibility
 *********************************************/

@each $stylename in default, convex {
	@include transition-stack(#{$stylename}) {
	@include transition-horizontal-past(#{$stylename}) {
		transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
	}
	@include transition-horizontal-future(#{$stylename}) {
		transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
	}
	@include transition-vertical-past(#{$stylename}) {
		transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
	}
	@include transition-vertical-future(#{$stylename}) {
		transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
	}
}

/*********************************************
 * CONCAVE TRANSITION
 *********************************************/

@include transition-stack(concave) {
@include transition-horizontal-past(concave) {
	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
@include transition-horizontal-future(concave) {
	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
@include transition-vertical-past(concave) {
	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
@include transition-vertical-future(concave) {
	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}


/*********************************************
 * ZOOM TRANSITION
 *********************************************/

@include transition-global(zoom) {
	transition-timing-function: ease;
@include transition-horizontal-past(zoom) {
	visibility: hidden;
	transform: scale(16);
@include transition-horizontal-future(zoom) {
	visibility: hidden;
	transform: scale(0.2);
@include transition-vertical-past(zoom) {
@include transition-vertical-future(zoom) {
}


/*********************************************
 * CUBE TRANSITION
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
 *********************************************/

.reveal.cube .slides {
	perspective: 1300px;
}

.reveal.cube .slides section {
	padding: 30px;
	min-height: 700px;
	backface-visibility: hidden;
}
	.reveal.center.cube .slides section {
	}
	.reveal.cube .slides section:not(.stack):before {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.1);
		border-radius: 4px;
	}
	.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);
		transform: translateZ(-90px) rotateX( 65deg );
	}

.reveal.cube .slides>section.stack {
	padding: 0;
	background: none;
}

.reveal.cube .slides>section.past {
	transform-origin: 100% 0%;
	transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}

.reveal.cube .slides>section.future {
	transform-origin: 0% 0%;
	transform: translate3d(100%, 0, 0) rotateY(90deg);
}

.reveal.cube .slides>section>section.past {
	transform-origin: 0% 100%;
	transform: translate3d(0, -100%, 0) rotateX(90deg);
}

.reveal.cube .slides>section>section.future {
	transform-origin: 0% 0%;
	transform: translate3d(0, 100%, 0) rotateX(-90deg);
}


/*********************************************
 * PAGE TRANSITION
 *
 * WARNING:
 * this is deprecated and will be removed in a
 * future version.
 *********************************************/

.reveal.page .slides {
	perspective-origin: 0% 50%;
	perspective: 3000px;
}

.reveal.page .slides section {
	padding: 30px;
	min-height: 700px;
}
	.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.1);
	}
	.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 {
	transform-origin: 0% 0%;
	transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}

.reveal.page .slides>section.future {
	transform-origin: 100% 0%;
	transform: translate3d(0, 0, 0);
}

.reveal.page .slides>section>section.past {
	transform-origin: 0% 0%;
	transform: translate3d(0, -40%, 0) rotateX(80deg);
}

.reveal.page .slides>section>section.future {
	transform-origin: 0% 100%;
	transform: translate3d(0, 0, 0);
}


/*********************************************
 * FADE TRANSITION
 *********************************************/

.reveal .slides section[data-transition=fade],
Yves Delley's avatar
Yves Delley a validé
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
}


.reveal.fade.overview .slides section,
Yves Delley's avatar
Yves Delley a validé
.reveal.fade.overview .slides>section>section {
}


/*********************************************
 * NO TRANSITION
 *********************************************/

@include transition-global(none) {
}


/*********************************************
 * PAUSED MODE
 *********************************************/

.reveal .pause-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	visibility: hidden;
	opacity: 0;
	z-index: 100;
}
.reveal.paused .pause-overlay {
	visibility: visible;
	opacity: 1;
}


/*********************************************
 * FALLBACK
 *********************************************/

.no-transforms {
	overflow-y: auto;
}

.no-transforms .reveal .slides {
	position: relative;
	width: 80%;
	height: auto !important;
	top: 0;
	left: 50%;
	margin: 0;
	text-align: center;
}

.no-transforms .reveal .controls,
.no-transforms .reveal .progress {
	display: none !important;
}

.no-transforms .reveal .slides section {
	display: block !important;
	opacity: 1 !important;
	position: relative !important;
	height: auto;
	top: 0;
	left: -50%;
	margin: 70px 0;
}

.no-transforms .reveal .slides section section {
	left: 0;
}

.reveal .no-transition,
.reveal .no-transition * {
}


/*********************************************
 * PER-SLIDE BACKGROUNDS
 *********************************************/

Hakim El Hattab's avatar
Hakim El Hattab a validé
.reveal .backgrounds {
	position: absolute;
	width: 100%;
	height: 100%;
Yves Delley's avatar
Yves Delley a validé
	top: 0;
	left: 0;
	perspective: 600px;
}
	.reveal .slide-background {
Yves Delley's avatar
Yves Delley a validé
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		visibility: hidden;

		background-color: rgba( 0, 0, 0, 0 );
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
Yves Delley's avatar
Yves Delley a validé

	.reveal .slide-background.stack {
		display: block;
	}

	.reveal .slide-background.present {
		opacity: 1;
		visibility: visible;
	}

	.print-pdf .reveal .slide-background {
		opacity: 1 !important;
		visibility: visible !important;
	}

Yves Delley's avatar
Yves Delley a validé
/* Video backgrounds */
.reveal .slide-background video {
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	top: 0;
	left: 0;
Yves Delley's avatar
Yves Delley a validé
}
	.reveal .slide-background[data-background-size="contain"] video {
		object-fit: contain;
	}
Yves Delley's avatar
Yves Delley a validé

/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=none] {
Yves Delley's avatar
Yves Delley a validé
/* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
	opacity: 1;
	backface-visibility: hidden;
}
	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
	}
	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
	.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
	}

	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
	.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
	}
	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
	.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
	}


/* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
	opacity: 0;
	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
	opacity: 0;
	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}

.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
	opacity: 0;
	transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
	opacity: 0;
	transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
}


/* Concave */
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
	opacity: 0;
	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
	opacity: 0;
	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}

.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
	opacity: 0;
	transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
	opacity: 0;
	transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
}

/* Zoom */
.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
}

.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
	opacity: 0;
	visibility: hidden;
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
	opacity: 0;
	visibility: hidden;
}

.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
	opacity: 0;
		visibility: hidden;
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
	opacity: 0;
	visibility: hidden;
}


/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
}
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
/*********************************************
 * OVERVIEW
 *********************************************/

.reveal.overview {
	perspective-origin: 50% 50%;
	perspective: 700px;

	.slides {
		// Fixes overview rendering errors in FF48+, not applied to
		// other browsers since it degrades performance
		-moz-transform-style: preserve-3d;
	}

	.slides section {
		height: 100%;
		top: 0 !important;
		opacity: 1 !important;
		overflow: hidden;
		visibility: visible !important;
		cursor: pointer;
		box-sizing: border-box;
	}
	.slides section:hover,
	.slides section.present {
		outline: 10px solid rgba(150,150,150,0.4);
		outline-offset: 10px;
	}
	.slides section .fragment {
		opacity: 1;
		transition: none;
	}
	.slides section:after,
	.slides section:before {
		display: none !important;
	}
	.slides>section.stack {
		padding: 0;
		top: 0 !important;
		background: none;
		outline: none;
		overflow: visible;
	}

	.backgrounds {
		perspective: inherit;

		// Fixes overview rendering errors in FF48+, not applied to
		// other browsers since it degrades performance
		-moz-transform-style: preserve-3d;
	}

	.backgrounds .slide-background {
		opacity: 1;
		visibility: visible;

		// This can't be applied to the slide itself in Safari
		outline: 10px solid rgba(150,150,150,0.1);
		outline-offset: 10px;
	}

	.backgrounds .slide-background.stack {
		overflow: visible;
	}
}

// Disable transitions transitions while we're activating
// or deactivating the overview mode.
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
	transition: none;
}

.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
	transition: none;
}


/*********************************************
 * RTL SUPPORT
 *********************************************/

.reveal.rtl .slides,
.reveal.rtl .slides h1,
.reveal.rtl .slides h2,
.reveal.rtl .slides h3,
.reveal.rtl .slides h4,
.reveal.rtl .slides h5,
.reveal.rtl .slides h6 {
	direction: rtl;
	font-family: sans-serif;
}

.reveal.rtl pre,
.reveal.rtl code {
	direction: ltr;
}

.reveal.rtl ol,
.reveal.rtl ul {
	text-align: right;
}

.reveal.rtl .progress span {
	float: right
}

/*********************************************
 * PARALLAX BACKGROUND
 *********************************************/

.reveal.has-parallax-background .backgrounds {
}

/* Global transition speed settings */
.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
}
.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
}


/*********************************************
 * LINK PREVIEW OVERLAY
 *********************************************/

Yves Delley's avatar
Yves Delley a validé
.reveal .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: rgba( 0, 0, 0, 0.9 );
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
	.reveal .overlay.visible {
		opacity: 1;
		visibility: visible;
	}

	.reveal .overlay .spinner {
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 32px;
		margin: -16px 0 0 -16px;
		z-index: 10;
		background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);

		visibility: visible;
		opacity: 0.6;
		transition: all 0.3s ease;
	}

	.reveal .overlay header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 40px;
		z-index: 2;
		border-bottom: 1px solid #222;
	}
		.reveal .overlay header a {
			display: inline-block;
			width: 40px;
			height: 40px;
Yves Delley's avatar
Yves Delley a validé
			padding: 0 10px;
			float: right;
			opacity: 0.6;

			box-sizing: border-box;
		}
			.reveal .overlay header a:hover {
				opacity: 1;
			}
			.reveal .overlay header a .icon {
				display: inline-block;
				width: 20px;
				height: 20px;

				background-position: 50% 50%;
				background-size: 100%;
				background-repeat: no-repeat;
			}
			.reveal .overlay header a.close .icon {
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
			}
			.reveal .overlay header a.external .icon {
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
			}

	.reveal .overlay .viewport {
		position: absolute;
		display: flex;
Yves Delley's avatar
Yves Delley a validé
		top: 40px;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.reveal .overlay.overlay-preview .viewport iframe {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border: 0;

		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.reveal .overlay.overlay-preview.loaded .viewport iframe {
		opacity: 1;
		visibility: visible;
	}

	.reveal .overlay.overlay-preview.loaded .viewport-inner  {
		position: absolute;
		z-index: -1;
		left: 0;
		width: 100%;
		text-align: center;
		letter-spacing: normal;
	}
	.reveal .overlay.overlay-preview .x-frame-error  {
		opacity: 0;
		transition: opacity 0.3s ease 0.3s;
	}
	.reveal .overlay.overlay-preview.loaded .x-frame-error  {
		opacity: 1;
	}
Yves Delley's avatar
Yves Delley a validé
	.reveal .overlay.overlay-preview.loaded .spinner {
		opacity: 0;
		visibility: hidden;
		transform: scale(0.2);
	}

	.reveal .overlay.overlay-help .viewport {
		overflow: auto;
		color: #fff;
	}

	.reveal .overlay.overlay-help .viewport .viewport-inner {
		width: 600px;
		margin: auto;
		padding: 20px 20px 80px 20px;
Yves Delley's avatar
Yves Delley a validé
		text-align: center;
		letter-spacing: normal;
	}

	.reveal .overlay.overlay-help .viewport .viewport-inner .title {
		font-size: 20px;
	}

	.reveal .overlay.overlay-help .viewport .viewport-inner table {
		border: 1px solid #fff;
		border-collapse: collapse;
		font-size: 16px;
Yves Delley's avatar
Yves Delley a validé
	}

	.reveal .overlay.overlay-help .viewport .viewport-inner table th,
	.reveal .overlay.overlay-help .viewport .viewport-inner table td {
		width: 200px;
		padding: 14px;
Yves Delley's avatar
Yves Delley a validé
		border: 1px solid #fff;
		vertical-align: middle;
	}

	.reveal .overlay.overlay-help .viewport .viewport-inner table th {
		padding-top: 20px;
		padding-bottom: 20px;
	}



/*********************************************
 * PLAYBACK COMPONENT
 *********************************************/

.reveal .playback {
	position: fixed;
	left: 15px;
Hakim El Hattab's avatar
Hakim El Hattab a validé
	bottom: 20px;
	z-index: 30;
	cursor: pointer;
}

.reveal.overview .playback {
	opacity: 0;
	visibility: hidden;
}


/*********************************************
 * ROLLING LINKS
 *********************************************/

.reveal .roll {
	display: inline-block;
	line-height: 1.2;
	overflow: hidden;

	vertical-align: top;
	perspective: 400px;
	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;
	transition: all 400ms ease;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
}
	.reveal .roll:hover span {
	    background: rgba(0,0,0,0.5);
	    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;
	backface-visibility: hidden;
	transform-origin: 50% 0%;
	transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
}


/*********************************************
 * SPEAKER NOTES
 *********************************************/

.reveal aside.notes {
	display: none;
}

// An interface element that can optionally be used to show the
// speaker notes to all viewers, on top of the presentation
.reveal .speaker-notes {
	width: 20vw;
	height: 100%;
	top: 0;
	left: 100%;
	padding: 14px;
	z-index: 1;
	font-size: 18px;
	line-height: 1.4;
	color: #222;
	background-color: #f5f5f5;
	overflow: auto;
	box-sizing: border-box;
	text-align: left;
	font-family: Helvetica, sans-serif;
	-webkit-overflow-scrolling: touch;

	&:before {
		content: 'Speaker notes';
		display: block;
		margin-bottom: 10px;
		opacity: 0.5;
	}
}

.reveal.show-notes {
	max-width: 80vw;
	overflow: visible;
.reveal.show-notes .speaker-notes {
Hakim El Hattab's avatar
Hakim El Hattab a validé
@media screen and (max-width: 1024px) {
	.reveal.show-notes {
		max-width: none;
		max-height: 70vh;
		overflow: visible;
	}

	.reveal.show-notes .speaker-notes {
		top: 70vh;
		left: 0;
		width: 100%;
		height: 30vh;
Hakim El Hattab's avatar
Hakim El Hattab a validé
	}
}

@media screen and (max-width: 600px) {
	.reveal .speaker-notes {
		font-size: 14px;

/*********************************************
 * ZOOM PLUGIN
 *********************************************/

.zoomed .reveal *,
.zoomed .reveal *:before,
.zoomed .reveal *:after {
	backface-visibility: visible !important;
}

.zoomed .reveal .progress,
.zoomed .reveal .controls {
	opacity: 0;
}

.zoomed .reveal .roll span {
	background: none;
}

.zoomed .reveal .roll span:after {
	visibility: hidden;
}