main.css 26 KB

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