main.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
  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. }
  341. .reveal .roll:hover span {
  342. background: rgba(0,0,0,0.5);
  343. -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  344. -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  345. -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  346. transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
  347. }
  348. .reveal .roll span:after {
  349. content: attr(data-title);
  350. display: block;
  351. position: absolute;
  352. left: 0;
  353. top: 0;
  354. padding: 0 2px;
  355. color: #fff;
  356. background: hsl(185, 60%, 35%);
  357. -webkit-transform-origin: 50% 0%;
  358. -moz-transform-origin: 50% 0%;
  359. -ms-transform-origin: 50% 0%;
  360. transform-origin: 50% 0%;
  361. -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  362. -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  363. -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  364. transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  365. }
  366. /*********************************************
  367. * SLIDES
  368. *********************************************/
  369. .reveal .slides {
  370. position: absolute;
  371. width: 900px;
  372. height: 600px;
  373. left: 50%;
  374. top: 50%;
  375. margin-left: -450px;
  376. margin-top: -320px;
  377. padding: 20px 0px;
  378. text-align: center;
  379. -webkit-transition: -webkit-perspective .4s ease;
  380. -moz-transition: -moz-perspective .4s ease;
  381. -ms-transition: -ms-perspective .4s ease;
  382. -o-transition: -o-perspective .4s ease;
  383. transition: perspective .4s ease;
  384. -webkit-perspective: 600px;
  385. -moz-perspective: 600px;
  386. -ms-perspective: 600px;
  387. perspective: 600px;
  388. -webkit-perspective-origin: 50% 25%;
  389. -moz-perspective-origin: 50% 25%;
  390. -ms-perspective-origin: 50% 25%;
  391. perspective-origin: 50% 25%;
  392. }
  393. .reveal .slides>section,
  394. .reveal .slides>section>section {
  395. display: none;
  396. position: absolute;
  397. width: 100%;
  398. min-height: 600px;
  399. z-index: 10;
  400. -webkit-transform-style: preserve-3d;
  401. -moz-transform-style: preserve-3d;
  402. -ms-transform-style: preserve-3d;
  403. transform-style: preserve-3d;
  404. -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  405. -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  406. -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  407. -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  408. transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  409. }
  410. .reveal .slides>section.present {
  411. display: block;
  412. z-index: 11;
  413. opacity: 1;
  414. }
  415. /*********************************************
  416. * DEFAULT TRANSITION
  417. *********************************************/
  418. .reveal .slides>section.past {
  419. display: block;
  420. opacity: 0;
  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 .slides>section.future {
  427. display: block;
  428. opacity: 0;
  429. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  430. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  431. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  432. transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
  433. }
  434. .reveal .slides>section>section.past {
  435. display: block;
  436. opacity: 0;
  437. -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  438. -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  439. -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  440. transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
  441. }
  442. .reveal .slides>section>section.future {
  443. display: block;
  444. opacity: 0;
  445. -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  446. -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  447. -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  448. transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
  449. }
  450. /*********************************************
  451. * CONCAVE TRANSITION
  452. *********************************************/
  453. .reveal.concave .slides>section.past {
  454. -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  455. -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  456. -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  457. transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
  458. }
  459. .reveal.concave .slides>section.future {
  460. -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  461. -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  462. -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  463. transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
  464. }
  465. .reveal.concave .slides>section>section.past {
  466. -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  467. -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  468. -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  469. transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
  470. }
  471. .reveal.concave .slides>section>section.future {
  472. -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  473. -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  474. -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  475. transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
  476. }
  477. /*********************************************
  478. * LINEAR TRANSITION
  479. *********************************************/
  480. .reveal.linear .slides>section.past {
  481. -webkit-transform: translate(-150%, 0);
  482. -moz-transform: translate(-150%, 0);
  483. -ms-transform: translate(-150%, 0);
  484. -o-transform: translate(-150%, 0);
  485. transform: translate(-150%, 0);
  486. }
  487. .reveal.linear .slides>section.future {
  488. -webkit-transform: translate(150%, 0);
  489. -moz-transform: translate(150%, 0);
  490. -ms-transform: translate(150%, 0);
  491. -o-transform: translate(150%, 0);
  492. transform: translate(150%, 0);
  493. }
  494. .reveal.linear .slides>section>section.past {
  495. -webkit-transform: translate(0, -150%);
  496. -moz-transform: translate(0, -150%);
  497. -ms-transform: translate(0, -150%);
  498. -o-transform: translate(0, -150%);
  499. transform: translate(0, -150%);
  500. }
  501. .reveal.linear .slides>section>section.future {
  502. -webkit-transform: translate(0, 150%);
  503. -moz-transform: translate(0, 150%);
  504. -ms-transform: translate(0, 150%);
  505. -o-transform: translate(0, 150%);
  506. transform: translate(0, 150%);
  507. }
  508. /*********************************************
  509. * BOX TRANSITION
  510. *********************************************/
  511. .reveal.cube .slides {
  512. margin-top: -350px;
  513. -webkit-perspective-origin: 50% 25%;
  514. -moz-perspective-origin: 50% 25%;
  515. -ms-perspective-origin: 50% 25%;
  516. perspective-origin: 50% 25%;
  517. -webkit-perspective: 1300px;
  518. -moz-perspective: 1300px;
  519. -ms-perspective: 1300px;
  520. perspective: 1300px;
  521. }
  522. .reveal.cube .slides section {
  523. padding: 30px;
  524. -webkit-backface-visibility: hidden;
  525. -moz-backface-visibility: hidden;
  526. -ms-backface-visibility: hidden;
  527. backface-visibility: hidden;
  528. -webkit-box-sizing: border-box;
  529. -moz-box-sizing: border-box;
  530. box-sizing: border-box;
  531. }
  532. .reveal.cube .slides section:not(.stack):before {
  533. content: '';
  534. position: absolute;
  535. display: block;
  536. width: 100%;
  537. height: 100%;
  538. left: 0;
  539. top: 0;
  540. background: #232628;
  541. border-radius: 4px;
  542. -webkit-transform: translateZ( -20px );
  543. -moz-transform: translateZ( -20px );
  544. -ms-transform: translateZ( -20px );
  545. -o-transform: translateZ( -20px );
  546. transform: translateZ( -20px );
  547. }
  548. .reveal.cube .slides section:not(.stack):after {
  549. content: '';
  550. position: absolute;
  551. display: block;
  552. width: 90%;
  553. height: 30px;
  554. left: 5%;
  555. bottom: 0;
  556. background: none;
  557. z-index: 1;
  558. border-radius: 4px;
  559. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  560. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  561. -moz-transform: translateZ(-90px) rotateX( 65deg );
  562. -ms-transform: translateZ(-90px) rotateX( 65deg );
  563. -o-transform: translateZ(-90px) rotateX( 65deg );
  564. transform: translateZ(-90px) rotateX( 65deg );
  565. }
  566. .reveal.cube .slides>section.stack {
  567. padding: 0;
  568. background: none;
  569. }
  570. .reveal.cube .slides>section.past {
  571. -webkit-transform-origin: 100% 0%;
  572. -moz-transform-origin: 100% 0%;
  573. -ms-transform-origin: 100% 0%;
  574. transform-origin: 100% 0%;
  575. -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  576. -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  577. -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  578. transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  579. }
  580. .reveal.cube .slides>section.future {
  581. -webkit-transform-origin: 0% 0%;
  582. -moz-transform-origin: 0% 0%;
  583. -ms-transform-origin: 0% 0%;
  584. transform-origin: 0% 0%;
  585. -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  586. -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
  587. -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
  588. transform: translate3d(100%, 0, 0) rotateY(90deg);
  589. }
  590. .reveal.cube .slides>section>section.past {
  591. -webkit-transform-origin: 0% 100%;
  592. -moz-transform-origin: 0% 100%;
  593. -ms-transform-origin: 0% 100%;
  594. transform-origin: 0% 100%;
  595. -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
  596. -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
  597. -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
  598. transform: translate3d(0, -100%, 0) rotateX(90deg);
  599. }
  600. .reveal.cube .slides>section>section.future {
  601. -webkit-transform-origin: 0% 0%;
  602. -moz-transform-origin: 0% 0%;
  603. -ms-transform-origin: 0% 0%;
  604. transform-origin: 0% 0%;
  605. -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  606. -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  607. -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
  608. transform: translate3d(0, 100%, 0) rotateX(-90deg);
  609. }
  610. /*********************************************
  611. * PAGE TRANSITION
  612. *********************************************/
  613. .reveal.page .slides {
  614. margin-top: -350px;
  615. -webkit-perspective-origin: 50% 50%;
  616. -moz-perspective-origin: 50% 50%;
  617. -ms-perspective-origin: 50% 50%;
  618. perspective-origin: 50% 50%;
  619. -webkit-perspective: 3000px;
  620. -moz-perspective: 3000px;
  621. -ms-perspective: 3000px;
  622. perspective: 3000px;
  623. }
  624. .reveal.page .slides section {
  625. padding: 30px;
  626. -webkit-box-sizing: border-box;
  627. -moz-box-sizing: border-box;
  628. box-sizing: border-box;
  629. }
  630. .reveal.page .slides section.past {
  631. z-index: 12;
  632. }
  633. .reveal.page .slides section:not(.stack):before {
  634. content: '';
  635. position: absolute;
  636. display: block;
  637. width: 100%;
  638. height: 100%;
  639. left: 0;
  640. top: 0;
  641. background: rgba(0,0,0,0.2);
  642. -webkit-transform: translateZ( -20px );
  643. -moz-transform: translateZ( -20px );
  644. -ms-transform: translateZ( -20px );
  645. -o-transform: translateZ( -20px );
  646. transform: translateZ( -20px );
  647. }
  648. .reveal.page .slides section:not(.stack):after {
  649. content: '';
  650. position: absolute;
  651. display: block;
  652. width: 90%;
  653. height: 30px;
  654. left: 5%;
  655. bottom: 0;
  656. background: none;
  657. z-index: 1;
  658. border-radius: 4px;
  659. box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
  660. -webkit-transform: translateZ(-90px) rotateX( 65deg );
  661. }
  662. .reveal.page .slides>section.stack {
  663. padding: 0;
  664. background: none;
  665. }
  666. .reveal.page .slides>section.past {
  667. -webkit-transform-origin: 0% 0%;
  668. -moz-transform-origin: 0% 0%;
  669. -ms-transform-origin: 0% 0%;
  670. transform-origin: 0% 0%;
  671. -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  672. -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  673. -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  674. transform: translate3d(-40%, 0, 0) rotateY(-80deg);
  675. }
  676. .reveal.page .slides>section.future {
  677. -webkit-transform-origin: 100% 0%;
  678. -moz-transform-origin: 100% 0%;
  679. -ms-transform-origin: 100% 0%;
  680. transform-origin: 100% 0%;
  681. -webkit-transform: translate3d(0, 0, 0);
  682. -moz-transform: translate3d(0, 0, 0);
  683. -ms-transform: translate3d(0, 0, 0);
  684. transform: translate3d(0, 0, 0);
  685. }
  686. .reveal.page .slides>section>section.past {
  687. -webkit-transform-origin: 0% 0%;
  688. -moz-transform-origin: 0% 0%;
  689. -ms-transform-origin: 0% 0%;
  690. transform-origin: 0% 0%;
  691. -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
  692. -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
  693. -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
  694. transform: translate3d(0, -40%, 0) rotateX(80deg);
  695. }
  696. .reveal.page .slides>section>section.future {
  697. -webkit-transform-origin: 0% 100%;
  698. -moz-transform-origin: 0% 100%;
  699. -ms-transform-origin: 0% 100%;
  700. transform-origin: 0% 100%;
  701. -webkit-transform: translate3d(0, 0, 0);
  702. -moz-transform: translate3d(0, 0, 0);
  703. -ms-transform: translate3d(0, 0, 0);
  704. transform: translate3d(0, 0, 0);
  705. }
  706. /*********************************************
  707. * OVERVIEW
  708. *********************************************/
  709. .reveal.overview .slides {
  710. -webkit-perspective: 700px;
  711. -moz-perspective: 700px;
  712. -ms-perspective: 700px;
  713. perspective: 700px;
  714. }
  715. .reveal.overview .slides section {
  716. padding: 20px 0;
  717. opacity: 1;
  718. cursor: pointer;
  719. background: rgba(0,0,0,0.1);
  720. }
  721. .reveal.overview .slides section .fragment {
  722. opacity: 1;
  723. }
  724. .reveal.overview .slides section:after,
  725. .reveal.overview .slides section:before {
  726. display: none !important;
  727. }
  728. .reveal.overview .slides section>section {
  729. opacity: 1;
  730. cursor: pointer;
  731. }
  732. .reveal.overview .slides section:hover {
  733. background: rgba(0,0,0,0.3);
  734. }
  735. .reveal.overview .slides section.present {
  736. background: rgba(0,0,0,0.3);
  737. }
  738. .reveal.overview .slides>section.stack {
  739. background: none;
  740. padding: 0;
  741. }
  742. /*********************************************
  743. * FALLBACK
  744. *********************************************/
  745. .no-transforms {
  746. overflow-y: auto;
  747. }
  748. .no-transforms .slides section {
  749. display: block!important;
  750. opacity: 1!important;
  751. position: relative!important;
  752. height: auto;
  753. min-height: auto;
  754. margin-bottom: 100px;
  755. -webkit-transform: none;
  756. -moz-transform: none;
  757. -ms-transform: none;
  758. transform: none;
  759. }
  760. /*********************************************
  761. * DEFAULT STATES
  762. *********************************************/
  763. .state-background {
  764. position: absolute;
  765. width: 100%;
  766. height: 100%;
  767. background: rgba( 0, 0, 0, 0 );
  768. -webkit-transition: background 800ms ease;
  769. -moz-transition: background 800ms ease;
  770. -ms-transition: background 800ms ease;
  771. -o-transition: background 800ms ease;
  772. transition: background 800ms ease;
  773. }
  774. .alert .state-background {
  775. background: rgba( 200, 50, 30, 0.6 );
  776. }
  777. .soothe .state-background {
  778. background: rgba( 50, 200, 90, 0.4 );
  779. }
  780. .blackout .state-background {
  781. background: rgba( 0, 0, 0, 0.6 );
  782. }
  783. /*********************************************
  784. * SPEAKER NOTES
  785. *********************************************/
  786. .reveal aside.notes {
  787. display: none;
  788. }
  789. /*********************************************
  790. * NEON THEME
  791. *********************************************/
  792. .theme-neon .reveal a,
  793. .theme-neon .reveal a:hover,
  794. .theme-neon .reveal .controls a.enabled {
  795. color: #5de048;
  796. }
  797. .theme-neon .reveal .progress span,
  798. .theme-neon .reveal .roll span:after {
  799. background: #5de048;
  800. }
  801. .theme-neon .reveal a.image:hover img {
  802. border-color: #5de048;
  803. }
  804. /*********************************************
  805. * BEIGE THEME
  806. *********************************************/
  807. .theme-beige body {
  808. color: #333;
  809. background: #f7f3de;
  810. background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
  811. 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)));
  812. background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  813. background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  814. background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  815. background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
  816. }
  817. .theme-beige .reveal h1,
  818. .theme-beige .reveal h2,
  819. .theme-beige .reveal h3,
  820. .theme-beige .reveal h4,
  821. .theme-beige .reveal h5,
  822. .theme-beige .reveal h6 {
  823. color: #333;
  824. text-shadow: none;
  825. }
  826. .theme-beige .reveal a,
  827. .theme-beige .reveal a:hover,
  828. .theme-beige .reveal .controls a.enabled {
  829. color: #8b743d;
  830. }
  831. .theme-beige .reveal .progress span,
  832. .theme-beige .reveal .roll span:after {
  833. background: #8b743d;
  834. }
  835. .theme-beige .reveal a.image:hover img {
  836. border-color: #8b743d;
  837. }