main.css 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024
  1. @charset "UTF-8";
  2. /**
  3. * Main styles for reveal.js
  4. *
  5. * @author Hakim El Hattab
  6. */
  7. /*********************************************
  8. * FONT-FACE DEFINITIONS
  9. *********************************************/
  10. @font-face {
  11. font-family: 'League Gothic';
  12. src: url('../lib/font/league_gothic-webfont.eot');
  13. src: url('../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
  14. url('../lib/font/league_gothic-webfont.ttf') format('truetype');
  15. font-weight: normal;
  16. font-style: normal;
  17. }
  18. /*********************************************
  19. * GLOBAL STYLES
  20. *********************************************/
  21. html, body {
  22. padding: 0;
  23. margin: 0;
  24. width: 100%;
  25. height: 100%;
  26. min-height: 600px;
  27. }
  28. body {
  29. position: relative;
  30. padding: 0;
  31. margin: 0;
  32. overflow: hidden;
  33. font-family: 'Lato', Times, 'Times New Roman', serif;
  34. font-size: 36px;
  35. font-weight: 200;
  36. letter-spacing: -0.02em;
  37. color: #eee;
  38. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  39. background-color: #2b2b2b;
  40. background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%);
  41. background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1)));
  42. background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
  43. background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
  44. background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
  45. background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
  46. }
  47. /*********************************************
  48. * HEADERS
  49. *********************************************/
  50. .reveal h1,
  51. .reveal h2,
  52. .reveal h3,
  53. .reveal h4 {
  54. margin: 0 0 20px 0;
  55. color: #eee;
  56. font-family: 'League Gothic', sans-serif;
  57. line-height: 0.9em;
  58. letter-spacing: 0.02em;
  59. text-transform: uppercase;
  60. text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
  61. }
  62. .reveal h1 { font-size: 136px; }
  63. .reveal h2 { font-size: 76px; }
  64. .reveal h3 { font-size: 56px; }
  65. .reveal h4 { font-size: 36px; }
  66. .reveal h1.inverted,
  67. .reveal h2.inverted,
  68. .reveal h3.inverted,
  69. .reveal h4.inverted {
  70. color: #fff;
  71. text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  72. }
  73. .reveal h1 {
  74. text-shadow: 0 1px 0 #ccc,
  75. 0 2px 0 #c9c9c9,
  76. 0 3px 0 #bbb,
  77. 0 4px 0 #b9b9b9,
  78. 0 5px 0 #aaa,
  79. 0 6px 1px rgba(0,0,0,.1),
  80. 0 0 5px rgba(0,0,0,.1),
  81. 0 1px 3px rgba(0,0,0,.3),
  82. 0 3px 5px rgba(0,0,0,.2),
  83. 0 5px 10px rgba(0,0,0,.25),
  84. 0 20px 20px rgba(0,0,0,.15);
  85. }
  86. /*********************************************
  87. * VIEW FRAGMENTS
  88. *********************************************/
  89. .reveal .slides section .fragment {
  90. opacity: 0;
  91. -webkit-transition: all .2s ease;
  92. -moz-transition: all .2s ease;
  93. -ms-transition: all .2s ease;
  94. -o-transition: all .2s ease;
  95. transition: all .2s ease;
  96. }
  97. .reveal .slides section .fragment.visible {
  98. opacity: 1;
  99. }
  100. /*********************************************
  101. * DEFAULT ELEMENT STYLES
  102. *********************************************/
  103. .reveal .slides section {
  104. line-height: 1.2em;
  105. font-weight: normal;
  106. }
  107. .reveal strong,
  108. .reveal b {
  109. font-weight: bold;
  110. }
  111. .reveal em,
  112. .reveal i {
  113. font-style: italic;
  114. }
  115. .reveal ol,
  116. .reveal ul {
  117. display: inline-block;
  118. text-align: left;
  119. margin: 0 auto;
  120. }
  121. .reveal ol {
  122. list-style-type: decimal;
  123. }
  124. .reveal ul {
  125. list-style-type: disc;
  126. }
  127. .reveal ul ul {
  128. list-style-type: square;
  129. }
  130. .reveal ul ul ul {
  131. list-style-type: circle;
  132. }
  133. .reveal ul ul,
  134. .reveal ul ol,
  135. .reveal ol ol,
  136. .reveal ol ul {
  137. display: block;
  138. margin-left: 40px;
  139. }
  140. .reveal p {
  141. margin-bottom: 10px;
  142. }
  143. .reveal blockquote {
  144. display: block;
  145. position: relative;
  146. width: 70%;
  147. margin: 5px auto;
  148. padding: 5px;
  149. font-style: italic;
  150. background: rgba(255, 255, 255, 0.05);
  151. box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  152. }
  153. .reveal blockquote:before {
  154. content: '“';
  155. }
  156. .reveal blockquote:after {
  157. content: '”';
  158. }
  159. .reveal pre {
  160. display: block;
  161. position: relative;
  162. width: 90%;
  163. margin: 10px auto;
  164. text-align: left;
  165. font-size: 20px;
  166. font-family: monospace;
  167. line-height: 1.2em;
  168. word-wrap: break-word;
  169. box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  170. }
  171. .reveal code {
  172. font-family: monospace;
  173. }
  174. .reveal table th,
  175. .reveal table td {
  176.   text-align: left;
  177.    padding-right: .3em;
  178. }
  179. .reveal table th {
  180.   text-shadow: rgb(255,255,255) 1px 1px 2px;
  181. }
  182. .reveal sup {
  183. vertical-align: super;
  184. }
  185. .reveal sub {
  186. vertical-align: sub;
  187. }
  188. .reveal small {
  189. font-size: 60%;
  190. line-height: 1em;
  191. vertical-align: top;
  192. }
  193. .reveal small * {
  194. vertical-align: top;
  195. }
  196. .reveal q {
  197. font-style: italic;
  198. }
  199. .reveal q:before {
  200. content: '“';
  201. }
  202. .reveal q:after {
  203. content: '”';
  204. }
  205. .reveal a:not(.image) {
  206. color: hsl(185, 85%, 50%);
  207. text-decoration: none;
  208. -webkit-transition: color .15s ease;
  209. -moz-transition: color .15s ease;
  210. -ms-transition: color .15s ease;
  211. -o-transition: color .15s ease;
  212. transition: color .15s ease;
  213. }
  214. .reveal a:not(.image):hover {
  215. color: hsl(185, 85%, 70%);
  216. text-shadow: none;
  217. border: none;
  218. border-radius: 2px;
  219. }
  220. .reveal section img {
  221. margin: 30px 0 0 0;
  222. background: rgba(255,255,255,0.12);
  223. border: 4px solid #eee;
  224. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  225. -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  226. box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  227. -webkit-transition: all .2s linear;
  228. -moz-transition: all .2s linear;
  229. -ms-transition: all .2s linear;
  230. -o-transition: all .2s linear;
  231. transition: all .2s linear;
  232. }
  233. .reveal a:hover img {
  234. background: rgba(255,255,255,0.2);
  235. border-color: #13DAEC;
  236. -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  237. -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  238. box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  239. }
  240. /*********************************************
  241. * CONTROLS
  242. *********************************************/
  243. .reveal .controls {
  244. display: none;
  245. position: fixed;
  246. width: 100px;
  247. height: 100px;
  248. z-index: 30;
  249. right: 0;
  250. bottom: 0;
  251. }
  252. .reveal .controls a {
  253. font-size: 30px;
  254. position: absolute;
  255. opacity: 0.1;
  256. color: #fff;
  257. }
  258. .reveal .controls a.enabled {
  259. opacity: 0.6;
  260. color: hsl(185, 85%, 70%);
  261. text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
  262. }
  263. .reveal .controls a.enabled:active {
  264. margin-top: 1px;
  265. }
  266. .reveal .controls .left {
  267. top: 30px;
  268. }
  269. .reveal .controls .right {
  270. left: 60px;
  271. top: 30px;
  272. }
  273. .reveal .controls .up {
  274. left: 30px;
  275. }
  276. .reveal .controls .down {
  277. left: 30px;
  278. top: 60px;
  279. }
  280. /*********************************************
  281. * PROGRESS BAR
  282. *********************************************/
  283. .reveal .progress {
  284. position: fixed;
  285. display: none;
  286. height: 3px;
  287. width: 100%;
  288. bottom: 0;
  289. left: 0;
  290. background: rgba(0,0,0,0.2);
  291. }
  292. .reveal .progress span {
  293. display: block;
  294. background: hsl(185, 85%, 50%);
  295. height: 100%;
  296. width: 0px;
  297. -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  298. -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  299. -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  300. -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  301. transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  302. }
  303. /*********************************************
  304. * ROLLING LINKS
  305. *********************************************/
  306. .reveal .roll {
  307. display: inline-block;
  308. overflow: hidden;
  309. vertical-align: top;
  310. -webkit-perspective: 400px;
  311. -moz-perspective: 400px;
  312. -ms-perspective: 400px;
  313. perspective: 400px;
  314. -webkit-perspective-origin: 50% 50%;
  315. -moz-perspective-origin: 50% 50%;
  316. -ms-perspective-origin: 50% 50%;
  317. perspective-origin: 50% 50%;
  318. }
  319. .reveal .roll:hover {
  320. background: none;
  321. text-shadow: none;
  322. }
  323. .reveal .roll span {
  324. display: block;
  325. position: relative;
  326. padding: 0 2px;
  327. pointer-events: none;
  328. -webkit-transition: all 400ms ease;
  329. -moz-transition: all 400ms ease;
  330. -ms-transition: all 400ms ease;
  331. transition: all 400ms ease;
  332. -webkit-transform-origin: 50% 0%;
  333. -moz-transform-origin: 50% 0%;
  334. -ms-transform-origin: 50% 0%;
  335. transform-origin: 50% 0%;
  336. -webkit-transform-style: preserve-3d;
  337. -moz-transform-style: preserve-3d;
  338. -ms-transform-style: preserve-3d;
  339. transform-style: preserve-3d;
  340. -webkit-backface-visibility: hidden;
  341. -moz-backface-visibility: hidden;
  342. backface-visibility: hidden;
  343. }
  344. .reveal .roll:hover span {
  345. background: rgba(0,0,0,0.5);
  346. -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  347. -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  348. -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  349. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  350. }
  351. .reveal .roll span:after {
  352. content: attr(data-title);
  353. display: block;
  354. position: absolute;
  355. left: 0;
  356. top: 0;
  357. padding: 0 2px;
  358. color: #fff;
  359. background: hsl(185, 60%, 35%);
  360. -webkit-transform-origin: 50% 0%;
  361. -moz-transform-origin: 50% 0%;
  362. -ms-transform-origin: 50% 0%;
  363. transform-origin: 50% 0%;
  364. -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  365. -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  366. -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  367. transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
  368. }
  369. /*********************************************
  370. * SLIDES
  371. *********************************************/
  372. .reveal .slides {
  373. position: absolute;
  374. width: 900px;
  375. height: 600px;
  376. left: 50%;
  377. top: 50%;
  378. margin-left: -450px;
  379. margin-top: -320px;
  380. padding: 20px 0px;
  381. text-align: center;
  382. -webkit-transition: -webkit-perspective .4s ease;
  383. -moz-transition: -moz-perspective .4s ease;
  384. -ms-transition: -ms-perspective .4s ease;
  385. -o-transition: -o-perspective .4s ease;
  386. transition: perspective .4s ease;
  387. -webkit-perspective: 600px;
  388. -moz-perspective: 600px;
  389. -ms-perspective: 600px;
  390. perspective: 600px;
  391. -webkit-perspective-origin: 50% 25%;
  392. -moz-perspective-origin: 50% 25%;
  393. -ms-perspective-origin: 50% 25%;
  394. perspective-origin: 50% 25%;
  395. }
  396. .reveal .slides>section,
  397. .reveal .slides>section>section {
  398. display: none;
  399. position: absolute;
  400. width: 100%;
  401. min-height: 600px;
  402. z-index: 10;
  403. -webkit-transform-style: preserve-3d;
  404. -moz-transform-style: preserve-3d;
  405. -ms-transform-style: preserve-3d;
  406. transform-style: preserve-3d;
  407. -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  408. -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  409. -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  410. -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  411. transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  412. }
  413. .reveal .slides>section.present {
  414. display: block;
  415. z-index: 11;
  416. opacity: 1;
  417. }
  418. /*********************************************
  419. * DEFAULT TRANSITION
  420. *********************************************/
  421. .reveal .slides>section.past {
  422. display: block;
  423. opacity: 0;
  424. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  425. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  426. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  427. transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
  428. }
  429. .reveal .slides>section.future {
  430. display: block;
  431. opacity: 0;
  432. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  433. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  434. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  435. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  436. }
  437. .reveal .slides>section>section.past {
  438. display: block;
  439. opacity: 0;
  440. -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  441. -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  442. -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  443. transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  444. }
  445. .reveal .slides>section>section.future {
  446. display: block;
  447. opacity: 0;
  448. -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  449. -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  450. -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  451. transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  452. }
  453. /*********************************************
  454. * CONCAVE TRANSITION
  455. *********************************************/
  456. .reveal.concave .slides>section.past {
  457. -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  458. -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  459. -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  460. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  461. }
  462. .reveal.concave .slides>section.future {
  463. -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  464. -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  465. -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  466. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  467. }
  468. .reveal.concave .slides>section>section.past {
  469. -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  470. -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  471. -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  472. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  473. }
  474. .reveal.concave .slides>section>section.future {
  475. -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  476. -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  477. -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  478. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  479. }
  480. /*********************************************
  481. * LINEAR TRANSITION
  482. *********************************************/
  483. .reveal.linear .slides>section.past {
  484. -webkit-transform: translate(-150%, 0);
  485. -moz-transform: translate(-150%, 0);
  486. -ms-transform: translate(-150%, 0);
  487. -o-transform: translate(-150%, 0);
  488. transform: translate(-150%, 0);
  489. }
  490. .reveal.linear .slides>section.future {
  491. -webkit-transform: translate(150%, 0);
  492. -moz-transform: translate(150%, 0);
  493. -ms-transform: translate(150%, 0);
  494. -o-transform: translate(150%, 0);
  495. transform: translate(150%, 0);
  496. }
  497. .reveal.linear .slides>section>section.past {
  498. -webkit-transform: translate(0, -150%);
  499. -moz-transform: translate(0, -150%);
  500. -ms-transform: translate(0, -150%);
  501. -o-transform: translate(0, -150%);
  502. transform: translate(0, -150%);
  503. }
  504. .reveal.linear .slides>section>section.future {
  505. -webkit-transform: translate(0, 150%);
  506. -moz-transform: translate(0, 150%);
  507. -ms-transform: translate(0, 150%);
  508. -o-transform: translate(0, 150%);
  509. transform: translate(0, 150%);
  510. }
  511. /*********************************************
  512. * BOX TRANSITION
  513. *********************************************/
  514. .reveal.cube .slides {
  515. margin-top: -350px;
  516. -webkit-perspective-origin: 50% 25%;
  517. -moz-perspective-origin: 50% 25%;
  518. -ms-perspective-origin: 50% 25%;
  519. perspective-origin: 50% 25%;
  520. -webkit-perspective: 1300px;
  521. -moz-perspective: 1300px;
  522. -ms-perspective: 1300px;
  523. perspective: 1300px;
  524. }
  525. .reveal.cube .slides section {
  526. padding: 30px;
  527. -webkit-backface-visibility: hidden;
  528. -moz-backface-visibility: hidden;
  529. -ms-backface-visibility: hidden;
  530. backface-visibility: hidden;
  531. -webkit-box-sizing: border-box;
  532. -moz-box-sizing: border-box;
  533. box-sizing: border-box;
  534. }
  535. .reveal.cube .slides section:not(.stack):before {
  536. content: '';
  537. position: absolute;
  538. display: block;
  539. width: 100%;
  540. height: 100%;
  541. left: 0;
  542. top: 0;
  543. background: #232628;
  544. border-radius: 4px;
  545. -webkit-transform: translateZ( -20px );
  546. -moz-transform: translateZ( -20px );
  547. -ms-transform: translateZ( -20px );
  548. -o-transform: translateZ( -20px );
  549. transform: translateZ( -20px );
  550. }
  551. .reveal.cube .slides section:not(.stack):after {
  552. content: '';
  553. position: absolute;
  554. display: block;
  555. width: 90%;
  556. height: 30px;
  557. left: 5%;
  558. bottom: 0;
  559. background: none;
  560. z-index: 1;
  561. border-radius: 4px;
  562. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  563. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  564. -moz-transform: translateZ(-90px) rotateX( 65deg );
  565. -ms-transform: translateZ(-90px) rotateX( 65deg );
  566. -o-transform: translateZ(-90px) rotateX( 65deg );
  567. transform: translateZ(-90px) rotateX( 65deg );
  568. }
  569. .reveal.cube .slides>section.stack {
  570. padding: 0;
  571. background: none;
  572. }
  573. .reveal.cube .slides>section.past {
  574. -webkit-transform-origin: 100% 0%;
  575. -moz-transform-origin: 100% 0%;
  576. -ms-transform-origin: 100% 0%;
  577. transform-origin: 100% 0%;
  578. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  579. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  580. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  581. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  582. }
  583. .reveal.cube .slides>section.future {
  584. -webkit-transform-origin: 0% 0%;
  585. -moz-transform-origin: 0% 0%;
  586. -ms-transform-origin: 0% 0%;
  587. transform-origin: 0% 0%;
  588. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  589. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  590. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  591. transform: translate3d(100%, 0, 0) rotateY(90deg);
  592. }
  593. .reveal.cube .slides>section>section.past {
  594. -webkit-transform-origin: 0% 100%;
  595. -moz-transform-origin: 0% 100%;
  596. -ms-transform-origin: 0% 100%;
  597. transform-origin: 0% 100%;
  598. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  599. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  600. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  601. transform: translate3d(0, -100%, 0) rotateX(90deg);
  602. }
  603. .reveal.cube .slides>section>section.future {
  604. -webkit-transform-origin: 0% 0%;
  605. -moz-transform-origin: 0% 0%;
  606. -ms-transform-origin: 0% 0%;
  607. transform-origin: 0% 0%;
  608. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  609. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  610. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  611. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  612. }
  613. /*********************************************
  614. * PAGE TRANSITION
  615. *********************************************/
  616. .reveal.page .slides {
  617. margin-top: -350px;
  618. -webkit-perspective-origin: 50% 50%;
  619. -moz-perspective-origin: 50% 50%;
  620. -ms-perspective-origin: 50% 50%;
  621. perspective-origin: 50% 50%;
  622. -webkit-perspective: 3000px;
  623. -moz-perspective: 3000px;
  624. -ms-perspective: 3000px;
  625. perspective: 3000px;
  626. }
  627. .reveal.page .slides section {
  628. padding: 30px;
  629. -webkit-box-sizing: border-box;
  630. -moz-box-sizing: border-box;
  631. box-sizing: border-box;
  632. }
  633. .reveal.page .slides section.past {
  634. z-index: 12;
  635. }
  636. .reveal.page .slides section:not(.stack):before {
  637. content: '';
  638. position: absolute;
  639. display: block;
  640. width: 100%;
  641. height: 100%;
  642. left: 0;
  643. top: 0;
  644. background: rgba(0,0,0,0.2);
  645. -webkit-transform: translateZ( -20px );
  646. -moz-transform: translateZ( -20px );
  647. -ms-transform: translateZ( -20px );
  648. -o-transform: translateZ( -20px );
  649. transform: translateZ( -20px );
  650. }
  651. .reveal.page .slides section:not(.stack):after {
  652. content: '';
  653. position: absolute;
  654. display: block;
  655. width: 90%;
  656. height: 30px;
  657. left: 5%;
  658. bottom: 0;
  659. background: none;
  660. z-index: 1;
  661. border-radius: 4px;
  662. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  663. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  664. }
  665. .reveal.page .slides>section.stack {
  666. padding: 0;
  667. background: none;
  668. }
  669. .reveal.page .slides>section.past {
  670. -webkit-transform-origin: 0% 0%;
  671. -moz-transform-origin: 0% 0%;
  672. -ms-transform-origin: 0% 0%;
  673. transform-origin: 0% 0%;
  674. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  675. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  676. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  677. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  678. }
  679. .reveal.page .slides>section.future {
  680. -webkit-transform-origin: 100% 0%;
  681. -moz-transform-origin: 100% 0%;
  682. -ms-transform-origin: 100% 0%;
  683. transform-origin: 100% 0%;
  684. -webkit-transform: translate3d(0, 0, 0);
  685. -moz-transform: translate3d(0, 0, 0);
  686. -ms-transform: translate3d(0, 0, 0);
  687. transform: translate3d(0, 0, 0);
  688. }
  689. .reveal.page .slides>section>section.past {
  690. -webkit-transform-origin: 0% 0%;
  691. -moz-transform-origin: 0% 0%;
  692. -ms-transform-origin: 0% 0%;
  693. transform-origin: 0% 0%;
  694. -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
  695. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  696. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  697. transform: translate3d(0, -40%, 0) rotateX(80deg);
  698. }
  699. .reveal.page .slides>section>section.future {
  700. -webkit-transform-origin: 0% 100%;
  701. -moz-transform-origin: 0% 100%;
  702. -ms-transform-origin: 0% 100%;
  703. transform-origin: 0% 100%;
  704. -webkit-transform: translate3d(0, 0, 0);
  705. -moz-transform: translate3d(0, 0, 0);
  706. -ms-transform: translate3d(0, 0, 0);
  707. transform: translate3d(0, 0, 0);
  708. }
  709. /*********************************************
  710. * OVERVIEW
  711. *********************************************/
  712. .reveal.overview .slides {
  713. -webkit-perspective: 700px;
  714. -moz-perspective: 700px;
  715. -ms-perspective: 700px;
  716. perspective: 700px;
  717. }
  718. .reveal.overview .slides section {
  719. padding: 20px 0;
  720. opacity: 1;
  721. cursor: pointer;
  722. background: rgba(0,0,0,0.1);
  723. }
  724. .reveal.overview .slides section .fragment {
  725. opacity: 1;
  726. }
  727. .reveal.overview .slides section:after,
  728. .reveal.overview .slides section:before {
  729. display: none !important;
  730. }
  731. .reveal.overview .slides section>section {
  732. opacity: 1;
  733. cursor: pointer;
  734. }
  735. .reveal.overview .slides section:hover {
  736. background: rgba(0,0,0,0.3);
  737. }
  738. .reveal.overview .slides section.present {
  739. background: rgba(0,0,0,0.3);
  740. }
  741. .reveal.overview .slides>section.stack {
  742. background: none;
  743. padding: 0;
  744. }
  745. /*********************************************
  746. * FALLBACK
  747. *********************************************/
  748. .no-transforms {
  749. overflow-y: auto;
  750. }
  751. .no-transforms .slides section {
  752. display: block!important;
  753. opacity: 1!important;
  754. position: relative!important;
  755. height: auto;
  756. min-height: auto;
  757. margin-bottom: 100px;
  758. -webkit-transform: none;
  759. -moz-transform: none;
  760. -ms-transform: none;
  761. transform: none;
  762. }
  763. /*********************************************
  764. * DEFAULT STATES
  765. *********************************************/
  766. .state-background {
  767. position: absolute;
  768. width: 100%;
  769. height: 100%;
  770. background: rgba( 0, 0, 0, 0 );
  771. -webkit-transition: background 800ms ease;
  772. -moz-transition: background 800ms ease;
  773. -ms-transition: background 800ms ease;
  774. -o-transition: background 800ms ease;
  775. transition: background 800ms ease;
  776. }
  777. .alert .state-background {
  778. background: rgba( 200, 50, 30, 0.6 );
  779. }
  780. .soothe .state-background {
  781. background: rgba( 50, 200, 90, 0.4 );
  782. }
  783. .blackout .state-background {
  784. background: rgba( 0, 0, 0, 0.6 );
  785. }
  786. /*********************************************
  787. * SPEAKER NOTES
  788. *********************************************/
  789. .reveal aside.notes {
  790. display: none;
  791. }
  792. /*********************************************
  793. * NEON THEME
  794. *********************************************/
  795. .theme-neon .reveal a,
  796. .theme-neon .reveal a:hover,
  797. .theme-neon .reveal .controls a.enabled {
  798. color: #5de048;
  799. }
  800. .theme-neon .reveal .progress span,
  801. .theme-neon .reveal .roll span:after {
  802. background: #5de048;
  803. }
  804. .theme-neon .reveal a.image:hover img {
  805. border-color: #5de048;
  806. }
  807. /*********************************************
  808. * BEIGE THEME
  809. *********************************************/
  810. .theme-beige body {
  811. color: #333;
  812. background: #f7f3de;
  813. background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
  814. background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
  815. background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  816. background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  817. background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  818. background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  819. }
  820. .theme-beige .reveal h1,
  821. .theme-beige .reveal h2,
  822. .theme-beige .reveal h3,
  823. .theme-beige .reveal h4,
  824. .theme-beige .reveal h5,
  825. .theme-beige .reveal h6 {
  826. color: #333;
  827. text-shadow: none;
  828. }
  829. .theme-beige .reveal a,
  830. .theme-beige .reveal a:hover,
  831. .theme-beige .reveal .controls a.enabled {
  832. color: #8b743d;
  833. }
  834. .theme-beige .reveal .progress span,
  835. .theme-beige .reveal .roll span:after {
  836. background: #8b743d;
  837. }
  838. .theme-beige .reveal a.image:hover img {
  839. border-color: #8b743d;
  840. }