reveal.scss

/*!
 * reveal.js
 * http://revealjs.com
 * MIT licensed
 *
 * Copyright (C) 2018 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,
.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;

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


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

.reveal .slides section .fragment {
	opacity: 0;
	visibility: hidden;
	transition: all .2s ease;

	&.visible {
		opacity: 1;
		visibility: inherit;
	}
}

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

	&.visible {
		transform: scale( 1.3 );
	}
}

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

	&.visible {
		transform: scale( 0.7 );
	}
}

.reveal .slides section .fragment.zoom-in {
	transform: scale( 0.1 );

	&.visible {
		transform: none;
	}
}

.reveal .slides section .fragment.fade-out {
	opacity: 1;
	visibility: inherit;

	&.visible {
		opacity: 0;
		visibility: hidden;
	}
}

.reveal .slides section .fragment.semi-fade-out {
	opacity: 1;
	visibility: inherit;

	&.visible {
		opacity: 0.5;
		visibility: inherit;
	}
}

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

	&.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 {
	opacity: 0;
	visibility: hidden;

	&.current-fragment {
		opacity: 1;
		visibility: inherit;
	}
}

.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;
	visibility: inherit;
}
	.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;
}

.reveal .stretch {
	max-width: none;
	max-height: none;
}

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


/*********************************************
 * 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;
	z-index: 1;
	color: #000;
	pointer-events: none;
	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
		pointer-events: auto;
		font-size: inherit;

		visibility: hidden;
		opacity: 0;

		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

	.controls-arrow:before,
	.controls-arrow:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: $controlArrowLength;
		height: $controlArrowThickness;
		border-radius: $controlArrowThickness/2;
		background-color: currentColor;

		transition: all 0.15s ease, background-color 0.8s ease;
		transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
		will-change: transform;
	}

	.controls-arrow {
		position: relative;
		width: $controlArrowSize;
		height: $controlArrowSize;

		@include controlsArrowTransform( $controlsArrowAngle );

		&:hover {
			@include controlsArrowTransform( $controlsArrowAngleHover );
		}

		&:active {
			@include controlsArrowTransform( $controlsArrowAngleActive );
		}
	}

	.navigate-left {
		right: $controlArrowSize + $controlArrowSpacing*2;
		bottom: $controlArrowSpacing + $controlArrowSize/2;
		transform: translateX( -10px );
	}

	.navigate-right {
		right: 0;
		bottom: $controlArrowSpacing + $controlArrowSize/2;
		transform: translateX( 10px );

		.controls-arrow {
			transform: rotate( 180deg );
		}

		&.highlight {
			animation: bounce-right 2s 50 both ease-out;
		}
	}

	.navigate-up {
		right: $controlArrowSpacing + $controlArrowSize/2;
		bottom: $controlArrowSpacing*2 + $controlArrowSize;
		transform: translateY( -10px );

		.controls-arrow {
			transform: rotate( 90deg );
		}
	}

	.navigate-down {
		right: $controlArrowSpacing + $controlArrowSize/2;
		bottom: 0;
		transform: translateY( 10px );

		.controls-arrow {
			transform: rotate( -90deg );
		}

		&.highlight {
			animation: bounce-down 2s 50 both ease-out;
		}
	}

	// 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 {
		opacity: 0.3;

		&:hover {
			opacity: 1;
		}
	}

	// 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 {
		visibility: visible;
		opacity: 0.9;
		cursor: pointer;
		transform: none;
	}

	// Any control button that leads to showing or hiding
	// a fragment
	.enabled.fragmented {
		opacity: 0.5;
	}

	.enabled:hover,
	.enabled.fragmented:hover {
		opacity: 1;
	}
}

// Adjust the layout when there are no vertical slides
.reveal:not(.has-vertical-slides) .controls .navigate-left {
	bottom: $controlArrowSpacing;
	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
}

.reveal:not(.has-vertical-slides) .controls .navigate-right {
	bottom: $controlArrowSpacing;
	right: 0.5em;
}

// Adjust the layout when there are no horizontal slides
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
	right: $controlArrowSpacing;
	bottom: $controlArrowSpacing + $controlArrowSize;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
	right: $controlArrowSpacing;
	bottom: 0.5em;
}

// Invert arrows based on background color
.reveal.has-dark-background .controls {
	color: #fff;
}
.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;
			margin-top: -$controlArrowSize/2;
		}

		.navigate-right {
			top: 50%;
			right: $spacing;
			margin-top: -$controlArrowSize/2;
		}

		.navigate-up {
			top: $spacing;
			left: 50%;
			margin-left: -$controlArrowSize/2;
		}

		.navigate-down {
			bottom: $spacing;
			left: 50%;
			margin-left: -$controlArrowSize/2;
		}
	}

}


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

.reveal .progress {
	position: absolute;
	display: none;
	height: 3px;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 10;

	background-color: rgba( 0, 0, 0, 0.2 );
	color: #fff;
}
	.reveal .progress:after {
		content: '';
		display: block;
		position: absolute;
		height: 10px;
		width: 100%;
		top: -10px;
	}
	.reveal .progress span {
		display: block;
		height: 100%;
		width: 0px;

		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;
	right: 8px;
	bottom: 8px;
	z-index: 31;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	background-color: rgba( 0, 0, 0, 0.4 );
	padding: 5px;
}

.reveal .slide-number a {
	color: currentColor;
}

.reveal .slide-number-delimiter {
	margin: 0 3px;
}

/*********************************************
 * SLIDES
 *********************************************/

.reveal {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	touch-action: none;
}

// Mobile Safari sometimes overlays a header at the top
// of the page when in landscape mode. Using fixed
// positioning ensures that reveal.js reduces its height
// when this header is visible.
@media only screen and (orientation : landscape) {
	.reveal.ua-iphone {
		position: fixed;
	}
}

.reveal .slides {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	pointer-events: none;

	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;
	pointer-events: auto;

	z-index: 10;
	transform-style: flat;
	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 {
	transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"] .slides section {
	transition-duration: 1200ms;
}

/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
	transition-duration: 400ms;
}
.reveal .slides section[data-transition-speed="slow"] {
	transition-duration: 1200ms;
}

.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:empty,
.reveal .slides>section>section:empty,
.reveal .slides>section[data-background-interactive],
.reveal .slides>section>section[data-background-interactive] {
	pointer-events: none;
}

.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;
}

.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
 *********************************************/

@mixin transition-global($style) {
	.reveal .slides section[data-transition=#{$style}],
	.reveal.#{$style} .slides section:not([data-transition]) {
		@content;
	}
}
@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;
	}
}
@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;
	}
}

@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;
	}
}
@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;
	}
}

/*********************************************
 * SLIDE TRANSITION
 * Aliased 'linear' for backwards compatibility
 *********************************************/

@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%);
	}
}

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

@each $stylename in default, convex {
	@include transition-stack(#{$stylename}) {
		transform-style: preserve-3d;
	}

	@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) {
	transform-style: preserve-3d;
}

@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) {
	transform: translate(0, -150%);
}
@include transition-vertical-future(zoom) {
	transform: translate(0, 150%);
}


/*********************************************
 * 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;
	box-sizing: border-box;
	transform-style: preserve-3d;
}
	.reveal.center.cube .slides section {
		min-height: 0;
	}
	.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;
		transform: translateZ( -20px );
	}
	.reveal.cube .slides section:not(.stack):after {
		content: '';
		position: absolute;
		display: block;
		width: 90%;
		height: 30px;
		left: 5%;
		bottom: 0;
		background: none;
		z-index: 1;

		border-radius: 4px;
		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
		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;
	box-sizing: border-box;
	transform-style: preserve-3d;
}
	.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);
		transform: translateZ( -20px );
	}
	.reveal.page .slides section:not(.stack):after {
		content: '';
		position: absolute;
		display: block;
		width: 90%;
		height: 30px;
		left: 5%;
		bottom: 0;
		background: none;
		z-index: 1;

		border-radius: 4px;
		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);

		-webkit-transform: translateZ(-90px) rotateX( 65deg );
	}

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

.reveal.page .slides>section.past {
	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],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
	transform: none;
	transition: opacity 0.5s;
}


.reveal.fade.overview .slides section,
.reveal.fade.overview .slides>section>section {
	transition: none;
}


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

@include transition-global(none) {
	transform: none;
	transition: none;