main.css 26 KB

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