main.css 22 KB

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