main.css 26 KB

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