main.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922
  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: #1c1e20;
  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: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: 3px;
  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-backface-visibility: hidden;
  492. -moz-backface-visibility: hidden;
  493. -ms-backface-visibility: hidden;
  494. backface-visibility: hidden;
  495. -webkit-box-sizing: border-box;
  496. -moz-box-sizing: border-box;
  497. box-sizing: border-box;
  498. }
  499. #reveal.cube .slides section:not(.stack):before {
  500. content: '';
  501. position: absolute;
  502. display: block;
  503. width: 100%;
  504. height: 100%;
  505. left: 0;
  506. top: 0;
  507. background: #232628;
  508. border-radius: 4px;
  509. -webkit-transform: translateZ( -20px );
  510. -moz-transform: translateZ( -20px );
  511. -ms-transform: translateZ( -20px );
  512. -o-transform: translateZ( -20px );
  513. transform: translateZ( -20px );
  514. }
  515. #reveal.cube .slides section:not(.stack):after {
  516. content: '';
  517. position: absolute;
  518. display: block;
  519. width: 90%;
  520. height: 30px;
  521. left: 5%;
  522. bottom: 0;
  523. background: none;
  524. z-index: 1;
  525. border-radius: 4px;
  526. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  527. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  528. -moz-transform: translateZ(-90px) rotateX( 65deg );
  529. -ms-transform: translateZ(-90px) rotateX( 65deg );
  530. -o-transform: translateZ(-90px) rotateX( 65deg );
  531. transform: translateZ(-90px) rotateX( 65deg );
  532. }
  533. #reveal.cube .slides>section.stack {
  534. padding: 0;
  535. background: none;
  536. }
  537. #reveal.cube .slides>section.past {
  538. -webkit-transform-origin: 100% 0%;
  539. -moz-transform-origin: 100% 0%;
  540. -ms-transform-origin: 100% 0%;
  541. transform-origin: 100% 0%;
  542. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  543. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  544. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  545. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  546. }
  547. #reveal.cube .slides>section.future {
  548. -webkit-transform-origin: 0% 0%;
  549. -moz-transform-origin: 0% 0%;
  550. -ms-transform-origin: 0% 0%;
  551. transform-origin: 0% 0%;
  552. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  553. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  554. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  555. transform: translate3d(100%, 0, 0) rotateY(90deg);
  556. }
  557. #reveal.cube .slides>section>section.past {
  558. -webkit-transform-origin: 0% 100%;
  559. -moz-transform-origin: 0% 100%;
  560. -ms-transform-origin: 0% 100%;
  561. transform-origin: 0% 100%;
  562. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  563. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  564. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  565. transform: translate3d(0, -100%, 0) rotateX(90deg);
  566. }
  567. #reveal.cube .slides>section>section.future {
  568. -webkit-transform-origin: 0% 0%;
  569. -moz-transform-origin: 0% 0%;
  570. -ms-transform-origin: 0% 0%;
  571. transform-origin: 0% 0%;
  572. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  573. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  574. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  575. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  576. }
  577. /*********************************************
  578. * PAGE TRANSITION
  579. *********************************************/
  580. #reveal.page .slides {
  581. margin-top: -350px;
  582. -webkit-perspective-origin: 50% 50%;
  583. -moz-perspective-origin: 50% 50%;
  584. -ms-perspective-origin: 50% 50%;
  585. perspective-origin: 50% 50%;
  586. -webkit-perspective: 3000px;
  587. -moz-perspective: 3000px;
  588. -ms-perspective: 3000px;
  589. perspective: 3000px;
  590. }
  591. #reveal.page .slides section {
  592. padding: 30px;
  593. -webkit-box-sizing: border-box;
  594. -moz-box-sizing: border-box;
  595. box-sizing: border-box;
  596. }
  597. #reveal.page .slides section.past {
  598. z-index: 12;
  599. }
  600. #reveal.page .slides section:not(.stack):before {
  601. content: '';
  602. position: absolute;
  603. display: block;
  604. width: 100%;
  605. height: 100%;
  606. left: 0;
  607. top: 0;
  608. background: #232628;
  609. -webkit-transform: translateZ( -20px );
  610. -moz-transform: translateZ( -20px );
  611. -ms-transform: translateZ( -20px );
  612. -o-transform: translateZ( -20px );
  613. transform: translateZ( -20px );
  614. }
  615. #reveal.page .slides section:not(.stack):after {
  616. content: '';
  617. position: absolute;
  618. display: block;
  619. width: 90%;
  620. height: 30px;
  621. left: 5%;
  622. bottom: 0;
  623. background: none;
  624. z-index: 1;
  625. border-radius: 4px;
  626. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  627. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  628. }
  629. #reveal.page .slides>section.stack {
  630. padding: 0;
  631. background: none;
  632. }
  633. #reveal.page .slides>section.past {
  634. -webkit-transform-origin: 0% 0%;
  635. -moz-transform-origin: 0% 0%;
  636. -ms-transform-origin: 0% 0%;
  637. transform-origin: 0% 0%;
  638. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  639. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  640. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  641. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  642. }
  643. #reveal.page .slides>section.future {
  644. -webkit-transform-origin: 100% 0%;
  645. -moz-transform-origin: 100% 0%;
  646. -ms-transform-origin: 100% 0%;
  647. transform-origin: 100% 0%;
  648. -webkit-transform: translate3d(0, 0, 0);
  649. -moz-transform: translate3d(0, 0, 0);
  650. -ms-transform: translate3d(0, 0, 0);
  651. transform: translate3d(0, 0, 0);
  652. }
  653. #reveal.page .slides>section>section.past {
  654. -webkit-transform-origin: 0% 0%;
  655. -moz-transform-origin: 0% 0%;
  656. -ms-transform-origin: 0% 0%;
  657. transform-origin: 0% 0%;
  658. -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
  659. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  660. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  661. transform: translate3d(0, -40%, 0) rotateX(80deg);
  662. }
  663. #reveal.page .slides>section>section.future {
  664. -webkit-transform-origin: 0% 100%;
  665. -moz-transform-origin: 0% 100%;
  666. -ms-transform-origin: 0% 100%;
  667. transform-origin: 0% 100%;
  668. -webkit-transform: translate3d(0, 0, 0);
  669. -moz-transform: translate3d(0, 0, 0);
  670. -ms-transform: translate3d(0, 0, 0);
  671. transform: translate3d(0, 0, 0);
  672. }
  673. /*********************************************
  674. * NEON THEME
  675. *********************************************/
  676. #reveal.neon a,
  677. #reveal.neon a:hover,
  678. #reveal.neon .controls a.enabled {
  679. color: #5de048;
  680. }
  681. #reveal.neon .progress span,
  682. #reveal.neon .roll span:after {
  683. background: #5de048;
  684. }
  685. #reveal.neon a.image:hover img {
  686. border-color: #5de048;
  687. }
  688. /*********************************************
  689. * OVERVIEW
  690. *********************************************/
  691. #reveal.overview .slides {
  692. -webkit-perspective: 700px;
  693. -moz-perspective: 700px;
  694. -ms-perspective: 700px;
  695. perspective: 700px;
  696. }
  697. #reveal.overview .slides section {
  698. padding: 20px 0;
  699. opacity: 1;
  700. cursor: pointer;
  701. background: rgba(0,0,0,0.1);
  702. }
  703. #reveal.overview .slides section:after,
  704. #reveal.overview .slides section:before {
  705. display: none !important;
  706. }
  707. #reveal.overview .slides section>section {
  708. opacity: 1;
  709. cursor: pointer;
  710. }
  711. #reveal.overview .slides section:hover {
  712. background: rgba(0,0,0,0.3);
  713. }
  714. #reveal.overview .slides section.present {
  715. background: rgba(0,0,0,0.3);
  716. }
  717. #reveal.overview .slides>section.stack {
  718. background: none;
  719. padding: 0;
  720. }
  721. /*********************************************
  722. * FALLBACK
  723. *********************************************/
  724. .no-transforms {
  725. overflow-y: auto;
  726. }
  727. .no-transforms .slides section {
  728. -webkit-transform: none;
  729. -moz-transform: none;
  730. -ms-transform: none;
  731. transform: none;
  732. display: block!important;
  733. opacity: 1!important;
  734. position: relative!important;
  735. }
  736. /*********************************************
  737. * STATES
  738. *********************************************/
  739. .blurred #reveal * {
  740. color: rgba( 255, 255, 255, 0 );
  741. text-shadow: 0px 0px 5px #fff;
  742. -webkit-transition: color .8s ease,
  743. text-shadow .8s ease;
  744. -moz-transition: color .8s ease,
  745. text-shadow .8s ease;
  746. -ms-transition: color .8s ease,
  747. text-shadow .8s ease;
  748. -o-transition: color .8s ease,
  749. text-shadow .8s ease;
  750. transition: color .8s ease,
  751. text-shadow .8s ease;
  752. }