@charset "UTF-8"; @font-face { font-family: 'Yanone Kaffeesatz'; font-style: normal; font-weight: 200; src: local("Yanone Kaffeesatz ExtraLight"), local("YanoneKaffeesatz-ExtraLight"), url(../fonts/YanoneKaffeesatz.ExtraLight.woff) format("woff"); } @font-face { font-family: 'Yanone Kaffeesatz'; font-style: normal; font-weight: 300; src: local("Yanone Kaffeesatz Light"), local("YanoneKaffeesatz-Light"), url(../fonts/YanoneKaffeesatz.Light.woff) format("woff"); } @font-face { font-family: 'Yanone Kaffeesatz'; font-style: normal; font-weight: 400; src: local("Yanone Kaffeesatz Regular"), local("YanoneKaffeesatz-Regular"), url(../fonts/YanoneKaffeesatz.Regular.woff) format("woff"); } @font-face { font-family: 'Yanone Kaffeesatz'; font-style: normal; font-weight: 700; src: local("Yanone Kaffeesatz Bold"), local("YanoneKaffeesatz-Bold"), url(../fonts/YanoneKaffeesatz.Bold.woff) format("woff"); } @font-face { font-family: 'Goudy Bookletter 1911'; src: url(../fonts/GoudyBookletter.1911.woff) format("woff"); } @font-face { font-family: 'Raleway'; src: url(../fonts/Raleway.Thin.woff) format("woff"); } @font-face { font-family: 'Junction'; src: url(../fonts/Junction.woff) format("woff"); } @font-face { font-family: 'Open Sans'; src: url(../fonts/OpenSans.Regular.woff) format("woff"); } @font-face { font-weight: 700; font-family: 'Open Sans'; src: url(../fonts/OpenSans.Bold.woff) format("woff"); } @font-face { font-weight: 700; font-style: italic; font-family: 'Open Sans'; src: url(../fonts/OpenSans.BoldItalic.woff) format("woff"); } @font-face { font-weight: 600; font-family: 'Open Sans'; src: url(../fonts/OpenSans.Semibold.woff) format("woff"); } @font-face { font-weight: 600; font-style: italic; font-family: 'Open Sans'; src: url(../fonts/OpenSans.SemiboldItalic.woff) format("woff"); } @font-face { font-weight: 800; font-family: 'Open Sans'; src: url(../fonts/OpenSans.ExtraBold.woff) format("woff"); } @font-face { font-weight: 800; font-style: italic; font-family: 'Open Sans'; src: url(../fonts/OpenSans.ExtraBoldItalic.woff) format("woff"); } @font-face { font-style: italic; font-family: 'Open Sans'; src: url(../fonts/OpenSans.Italic.woff) format("woff"); } @font-face { font-weight: 300; font-family: 'Open Sans'; src: url(../fonts/OpenSans.Light.woff) format("woff"); } @font-face { font-family: 'Open Sans Light'; src: url(../fonts/OpenSans.Light.woff) format("woff"); } @font-face { font-weight: 300; font-style: italic; font-family: 'Open Sans'; src: url(../fonts/OpenSans.LightItalic.woff) format("woff"); } /* PTSans */ @font-face { font-family: 'PT Sans'; src: local("PT Sans"), local("PTSansRegular"), url(../fonts/PTSans.woff) format("woff"); } @font-face { font-weight: bold; font-family: 'PT Sans'; src: local("PT Sans Bold"), local("PTSansBold"), url(../fonts/PTSans.Bold.woff) format("woff"); } @font-face { font-style: italic; font-family: 'PT Sans'; src: local("PT Sans Italic"), local("PTSansItalic"), url(../fonts/PTSans.Italic.woff) format("woff"); } @font-face { font-style: italic; font-weight: bold; font-family: 'PT Sans'; src: local("PT Sans Bold Italic"), local("PTSansBoldItalic"), url(../fonts/PTSans.Bold.Italic.woff) format("woff"); } @font-face { font-family: 'PT Sans Narrow'; src: local("PT Sans Narrow"), local("PTSansNarrow"), url(../fonts/PTSans.Narrow.woff) format("woff"); } @font-face { font-family: 'PT Sans Narrow'; font-weight: bold; src: local("PT Sans Narrow Bold"), local("PTSansNarrowBold"), url(../fonts/PTSans.Narrow.Bold.woff) format("woff"); } /* PT Mono */ @font-face { font-family: 'PT Mono'; src: local("PT Mono"), local("PTMonoRegular"), url(../fonts/PTMono.woff) format("woff"); } /* Linker */ @font-face { font-family: 'Target Blank'; src: url(../fonts/TargetBlank.otf) format("opentype"), url(../fonts/TargetBlank.svg#TargetBlank) format("svg"); } /* Inconcolata */ @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; src: local("Inconsolata"), url(../fonts/Inconsolata.woff) format("woff"); } @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 700; src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url(../fonts/Inconsolata.Bold.woff) format("woff"); } @font-face { font-family: 'Stix'; src: url(../fonts/STIXGeneral.Regular.woff) format("woff"); } @font-face { font-family: 'Stix'; font-style: normal; font-weight: bold; src: url(../fonts/STIXGeneral.Bold.woff) format("woff"); } @font-face { font-family: 'Stix'; font-style: italic; font-weight: bold; src: url(../fonts/STIXGeneral.BoldItalic.woff) format("woff"); } @font-face { font-family: 'Stix'; font-style: italic; src: url(../fonts/STIXGeneral.Italic.woff) format("woff"); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-success, .text-green { color: #697D19; } .text-alert, .text-red { color: #96000F; } .text-info, .text-blue { color: #327D91; } .text-purple { color: #560F32; } .text-bluegreen { color: #006450; } .text-orange { color: #AA5500; } .bg-black { background-color: black !important; } .bg-white { background-color: white !important; } .bg-blue, .slide mark.blue, .slide mark.info.blue { background-color: #327D91 !important; } .bg-bluegreen, .slide mark.bluegreen, .slide.solution { background-color: #006450 !important; } .bg-gray, .slide mark.gray { background-color: #46413C !important; } .bg-red, .slide mark.red, .slide mark.alert.red, .slide.problem { background-color: #96000F !important; } .bg-green, .slide mark.green, .slide mark.success.green { background-color: #697D19 !important; } .bg-orange, .slide mark.orange { background-color: #AA5500 !important; } .bg-purple, .slide mark.purple { background-color: #560F32 !important; } @-webkit-keyframes blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } body { font: 30px/2 'Open Sans', sans-serif; counter-reset: problem 0; } a { text-decoration: none; } .caption { display: none; margin: 0 0 60px; padding: 0 50px 0 0; color: #555; } .caption h1 { font: 50px 'Open Sans', sans-serif; font-weight: lighter; } .caption a { color: #327D91; } .caption a:hover { border-bottom: 0.1em solid; } .badge { position: absolute; top: 0; right: 0; display: none; overflow: hidden; visibility: hidden; width: 11em; height: 11em; line-height: 2.5; font-size: 15px; } .badge a { position: absolute; bottom: 50%; right: -50%; left: -50%; visibility: visible; background: #46413C; color: #FFF; text-align: center; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate(45deg) translateY(-1em); transform: rotate(45deg) translateY(-1em); } .slide { position: relative; width: 1024px; height: 768px; background: #FFF; color: #000; -webkit-print-color-adjust: exact; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } .slide > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 60px 96px 38px 78px; width: 850px; height: 670px; } .slide:after { font-family: 'Open Sans', sans-serif; font-weight: lighter; position: absolute; right: 96px; bottom: 15px; color: #46413C; content: attr(data-slide) " / " attr(data-slides); line-height: 1; font-size: 17px; } .debug .slide { background-image: url(../images/grid-4x3.svg); } .slide hgroup { margin: -60px -96px 28px -78px; padding: 60px 96px 20px 78px; background-color: #46413C; color: white; position: relative; min-height: 20px; } .slide hgroup h1 { float: right; font: 30px/1 'Open Sans', sans-serif; font-weight: lighter; text-transform: uppercase; color: #dddad7; } .slide hgroup h2 { font: 44px/1 'Open Sans', sans-serif; font-weight: lighter; } .slide h3 { margin-bottom: 28px; font: 28px/1 'Open Sans', sans-serif; font-weight: lighter; } .slide.chapter h2 { text-transform: uppercase; } .slide hr { border: none; background-color: #46413C; height: 0.1em; margin: 0 0 28px; } .slide p { margin: 0 0 28px; } .slide p.pause { margin: 0; } .slide a { border-bottom: 0.1em solid; color: #327D91; } .slide b, .slide strong { font-weight: bold; } .slide i, .slide em { font-style: italic; } .slide kbd, .slide code, .slide samp { background: rgba(0, 0, 0, 0.1); tab-size: 4; line-height: 1; font-family: 'Inconsolata', monospace, sans-serif; } .slide kbd.inline, .slide code.inline, .slide samp.inline { padding: 2px 7px; } .slide blink { -webkit-animation: blink 1.0s infinite; } .slide mark { padding-left: 5px; padding-right: 5px; color: #46413C; cursor: default; background-color: white; } .slide mark.blue { color: white; } .slide mark.bluegreen { color: white; } .slide mark.gray { color: white; } .slide mark.red { color: white; } .slide mark.green { color: white; } .slide mark.orange { color: white; } .slide mark.purple { color: white; } .slide mark.success.green { color: white; } .slide mark.alert.red { color: white; } .slide mark.info.blue { color: white; } .slide blockquote { font-style: italic; margin: 80px; } .slide blockquote:before { position: absolute; margin: -50px 0 0 -70px; color: #DDD; content: '\201C'; font: 200px/1 'PT Sans', sans-serif; line-height: 1; font-size: 200px; } .slide blockquote p:last-child { margin: -28px 0 28px; font-style: italic; font-weight: bold; } .slide blockquote p:last-child:before { content: ''; position: relative; top: 0.75em; border-top: 2px solid #AAA5A0; color: #AAA5A0; padding-right: 20px; margin-right: 15px; } .slide.cover figure, .slide.chapter figure, .slide.section figure { position: initial; max-height: initial; text-align: initial; vertical-align: initial; } .slide.cover figure img, .slide.chapter figure img, .slide.section figure img { max-height: initial; } .slide figure { position: relative; max-height: 450px; text-align: right; vertical-align: bottom; } .slide figure img { max-height: 100%; } .slide figure figcaption { font: 9px 'Open Sans', sans-serif; position: absolute; float: right; bottom: 1em; right: 0; padding: 1px 3px; background: rgba(0, 0, 0, 0.66); color: rgba(255, 255, 255, 0.66); } .slide figure figcaption > * { vertical-align: middle; line-height: 16px; float: left; margin-left: 3px; } .slide figure figcaption > *:first-child { margin-left: 0px; } .slide figure figcaption > *:last-child:after { display: table; content: ''; } .slide figure figcaption .flickr { background-image: url(../images/flickr.svg); background-size: 15px; height: 15px; width: 15px; } .slide figure figcaption .license { vertical-align: middle; display: inline-block; height: 14px; width: 14px; background-size: 12px; background-repeat: no-repeat; } .slide figure figcaption .license.license-cc { background-image: url("../images/cc/cc.svg"); } .slide figure figcaption .license.license-by { background-image: url("../images/cc/by.svg"); } .slide figure figcaption .license.license-nc { background-image: url("../images/cc/nc.svg"); } .slide figure figcaption .license.license-nd { background-image: url("../images/cc/nd.svg"); } .slide figure figcaption .license.license-sa { background-image: url("../images/cc/sa.svg"); } .slide figure figcaption .license.license-pd { background-image: url("../images/cc/pd.svg"); } .slide figure figcaption .license.license-cc:hover { background-image: url(../images/cc/cc-white.svg); } .slide figure figcaption a { border: none; color: rgba(255, 255, 255, 0.66); } .slide figure figcaption a:hover { color: #FFF; } .slide ol, .slide ul { margin: 0 0 28px; counter-reset: list; } .slide ol ol, .slide ol ul, .slide ul ol, .slide ul ul { margin: 0 0 0 2em; } .slide ol li, .slide ul li { text-indent: -2em; } .slide ol li.divider, .slide ul li.divider { border-bottom: 1px solid; height: 0; margin: 0.2em 0; } .slide ol li.divider:before, .slide ul li.divider:before { content: ''; } .slide ol li:before, .slide ul li:before { display: inline-block; width: 2em; color: #AAA5A0; font-weight: normal; text-align: right; } .slide ol.border-separated li, .slide ul.border-separated li { border-bottom: 2px solid #615a54; } .slide ol.border-separated li:before, .slide ul.border-separated li:before { content: ''; } .slide ol.border-separated li:first-child, .slide ul.border-separated li:first-child { border-top: 2px solid #615a54; } .slide ul > li:before { content: '\2023\00A0\00A0\2009'; } .slide ul > li:lang(ru):before { content: '\2014\00A0\2009'; } .slide ol > li:before { counter-increment: list; content: counter(list) ".  "; } .slide dl { margin: 0 0 28px; } .slide dl dt { font-weight: bolder; float: left; width: 180px; clear: left; text-align: right; margin-right: 10px; } .slide dl dd { margin-left: 200px; } .slide.small hgroup { padding-top: 20px; } .slide.small pre { font-size: 19px; min-height: 23px; } .slide.small pre code { line-height: 1.3em; } .slide.small pre code:before { line-height: 1.6em; } .slide pre { margin: 0 -10px 28px; margin-left: -78px; counter-reset: code; background-color: #E6E6E6; white-space: normal; font-size: 26px; padding: 0px 5px; padding-left: 78px; min-height: 33px; white-space: pre-wrap; position: relative; } .slide pre code { display: block; position: relative; line-height: 1.5; background-color: transparent; } .slide pre code:before { position: absolute; margin-left: -40px; font-size: 0.8em; line-height: 2.0em; vertical-align: middle; color: #a6a6a6; counter-increment: code; content: counter(code,decimal-leading-zero); } .slide pre code:only-child { font-size: 30px; } .slide pre code:only-child:before { content: ''; } .slide pre:after { background-color: #46413C; color: #dddad7; right: 0; top: 0; position: absolute; font-size: 16px; line-height: 25px; padding: 0px 15px; text-transform: uppercase; } .slide pre[data-lang]:after { content: attr(data-lang); } .slide table { left: 50%; position: relative; -webkit-transform: translateX(-50%); margin: 0 0 28px; width: 100%; border-collapse: collapse; border-spacing: 0; } .slide table th, .slide table td { padding: 0px 10px; border-bottom: 1px solid #46413C; } .slide table th { color: white; background-color: #46413C; } .slide table.striped tr:nth-child(even) { background: #f0efef; } .slide img, .slide iframe { position: absolute; left: 50%; -webkit-transform: translateX(-50%); max-height: 580px; max-width: 850px; } .slide img.inline, .slide iframe.inline { position: initial; -webkit-transform: none; } .slide iframe { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); border: 1px solid #e6e6e6; width: 100%; height: 100%; } .slide iframe::-webkit-scrollbar { display: none; } .slide.cover, .slide.chapter, .slide.section, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution { z-index: 1; } .slide.cover:after, .slide.chapter:after, .slide.section:after, .slide.shout:after, .slide.chapter:after, .slide.chapter-html:after, .slide.problem-solution:after, .slide.problem:after, .slide.solution:after { content: ''; border: none; } .slide.cover h1, .slide.chapter h1, .slide.section h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 { display: none; } .slide.cover h2, .slide.chapter h2, .slide.section h2, .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 { border: none; } .slide.cover code, .slide.chapter code, .slide.section code, .slide.shout code, .slide.chapter code, .slide.chapter-html code, .slide.problem-solution code, .slide.problem code, .slide.solution code { color: white; font-size: 0.8em; padding: 20px; background-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.33); text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); } .slide.cover footer, .slide.chapter footer, .slide.section footer, .slide.shout footer, .slide.chapter footer, .slide.chapter-html footer, .slide.problem-solution footer, .slide.problem footer, .slide.solution footer { display: none; } .slide.cover, .slide.chapter, .slide.section { background: #000; } .slide.cover hgroup, .slide.chapter hgroup, .slide.section hgroup { background-color: transparent; } .slide.cover > div, .slide.chapter > div, .slide.section > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 0; width: 1024px; height: 768px; } .slide.cover .left-33, .slide.chapter .left-33, .slide.section .left-33 { padding: 60px 0px; font: 38px/1 'Open Sans', sans-serif; font-weight: lighter; background-color: #46413C; color: white; width: 36%; height: 768px; position: relative; box-sizing: border-box; } .slide.cover .left-33 h1, .slide.chapter .left-33 h1, .slide.section .left-33 h1 { font: 500 46px/1 'Open Sans'; display: block; margin-bottom: 0.6em; } .slide.cover .left-33 h2, .slide.chapter .left-33 h2, .slide.section .left-33 h2 { font-size: 28px; margin-bottom: 0.6em; vertical-align: middle; line-height: 38px; } .slide.cover .left-33 p, .slide.chapter .left-33 p, .slide.section .left-33 p { padding-left: 50px; padding-right: 50px; } .slide.cover .left-33 .vcenter, .slide.chapter .left-33 .vcenter, .slide.section .left-33 .vcenter { height: 460px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; } .slide.cover .left-33 ul, .slide.chapter .left-33 ul, .slide.section .left-33 ul { width: 100%; margin: 0; } .slide.cover .left-33 ul li, .slide.chapter .left-33 ul li, .slide.section .left-33 ul li { padding: 0.5em 50px; } .slide.cover img, .slide.chapter img, .slide.section img, .slide.cover svg, .slide.chapter svg, .slide.section svg, .slide.cover video, .slide.chapter video, .slide.section video, .slide.cover object, .slide.chapter object, .slide.section object, .slide.cover canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover iframe, .slide.chapter iframe, .slide.section iframe { position: absolute; top: 0; left: 0; z-index: -1; } .slide.cover iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover img, .slide.chapter img, .slide.section img { max-height: none; max-width: none; } .slide.cover iframe, .slide.chapter iframe, .slide.section iframe { z-index: 0; } .slide.cover.w img, .slide.chapter img, .slide.section img, .slide.cover.w svg, .slide.chapter svg, .slide.section svg, .slide.cover.w video, .slide.chapter video, .slide.section video, .slide.cover.w object, .slide.chapter object, .slide.section object, .slide.cover.w canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe { top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover.w img, .slide.chapter img, .slide.section img { max-height: none; max-width: none; } .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe { z-index: 0; } .slide.cover.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.h video, .slide.h.chapter video, .slide.h.section video, .slide.cover.h object, .slide.h.chapter object, .slide.h.section object, .slide.cover.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { left: 50%; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.h img, .slide.h.chapter img, .slide.h.section img { max-height: none; max-width: none; } .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { z-index: 0; } .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.w.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.w.h video, .slide.h.chapter video, .slide.h.section video, .slide.cover.w.h object, .slide.h.chapter object, .slide.h.section object, .slide.cover.w.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { top: 0; left: 0; -webkit-transform: none; transform: none; } .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img { max-height: none; max-width: none; } .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { z-index: 0; } .slide.noheader hgroup { display: none; } .slide.huge, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution { background: #46413C; } .slide.huge hgroup, .slide.shout hgroup, .slide.chapter hgroup, .slide.chapter-html hgroup, .slide.problem-solution hgroup, .slide.problem hgroup, .slide.solution hgroup { position: initial; background-color: transparent; } .slide.huge h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 { visibility: hidden; } .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 { position: absolute; top: 50%; left: 128px; color: #FFF; font-size: 100px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-bottom: none; z-index: 1; } .slide.shout h2 a, .slide.chapter h2 a, .slide.chapter-html h2 a, .slide.problem-solution h2 a, .slide.problem h2 a, .slide.solution h2 a { border-bottom: none; color: #FFF; } .slide.shout p, .slide.chapter p, .slide.chapter-html p, .slide.problem-solution p, .slide.problem p, .slide.solution p { position: absolute; left: 0; right: 0; top: 50%; color: #FFF; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 100px; line-height: 1em; text-align: center; border: none; padding: 20px; font-family: 'Open Sans'; font-weight: lighter; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } .slide.chapter h2 { padding: 20px; padding-right: 1em; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgba(70, 65, 60, 0.8); right: 0; } .slide.chapter-html p { font-size: 4.5em; text-align: left; left: 10%; } .slide.chapter-html .tag { top: 3.2em; font-size: 3em; opacity: 0.3; text-shadow: none; text-transform: lowercase; } .slide.chapter-html .title { top: 3em; } .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 { left: 0; right: 0; text-align: center; text-transform: uppercase; top: 33%; font-size: 2.8em; opacity: 0.5; letter-spacing: 0.1em; font-style: italic; } .slide.problem-solution h2:before, .slide.problem h2:before, .slide.solution h2:before { content: "#" counter(problem); font-weight: 700; margin-right: 0.5em; } .slide.problem-solution .solution, .slide.problem .solution, .slide.solution .solution { position: absolute; padding: 100% 0; background-color: #006450; } .slide.problem h2:before { counter-increment: problem; } .slide.section > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 60px 96px 38px 78px; width: 850px; height: 670px; } .slide.section hgroup { background-color: #46413C; } .slide.section h2 { background-color: rgba(70, 65, 60, 0.8); } .slide.img-place-middle img { margin-top: 50px; } .slide .col2 { position: relative; -webkit-columns: 2; } .slide .col2 li { margin-left: 2em; text-indent: -2em; } .slide .col3 { position: relative; -webkit-columns: 3; } .slide .col3 li { margin-left: 2em; text-indent: -2em; } .slide .col4 { position: relative; -webkit-columns: 4; } .slide .col4 li { margin-left: 2em; text-indent: -2em; } .slide .col4 img { position: initial; -webkit-transform: none; } .slide .place, .slide.img-place-middle img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r, .slide .place.b.r, .slide.img-place-middle img.b.r, .slide .place.b.l, .slide.img-place-middle img.b.l { -webkit-transform: none; transform: none; } .slide .place.t, .slide.img-place-middle img.t, .slide .place.b, .slide.img-place-middle img.b { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slide .place.l, .slide.img-place-middle img.l, .slide .place.r, .slide.img-place-middle img.r { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .slide .place.t, .slide.img-place-middle img.t, .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r { top: 0; } .slide .place.r, .slide.img-place-middle img.r { right: 0; left: auto; } .slide .place.b, .slide.img-place-middle img.b, .slide .place.b.r, .slide.img-place-middle img.b.r, .slide .place.b.l, .slide.img-place-middle img.b.l { top: auto; bottom: 0; } .slide .place.l, .slide.img-place-middle img.l { left: 0; } .slide .box { color: white; margin-bottom: 28px; } .slide .box div { margin: 0; padding: 1px 15px; font-size: 26px; background-color: #AAA5A0; } .slide .box div.box-header, .slide .box div:first-child { font-size: 30px; background-color: #46413C; } .slide .box div.box-header:not(:first-child), .slide .box div:not(:first-child):first-child { text-indent: 0.5em; } .slide .box div:first-child { border-top-right-radius: 3px; border-top-left-radius: 3px; } .slide .box div:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .slide .box ul, .slide .box ol { margin: 0; background-color: #AAA5A0; } .slide .box ul ol, .slide .box ul ul, .slide .box ol ol, .slide .box ol ul { margin: 0 0 0 2em; } .slide .box ul li, .slide .box ol li { color: white; text-indent: 0em; margin-left: 0; background-color: #AAA5A0; } .slide .box ul li:before, .slide .box ol li:before { color: white; } .slide .box code { color: white; background-color: rgba(0, 0, 0, 0.33); padding: 0px 0.3em; font-size: 1.1em; } .slide .box-bluegreen div, .slide .box-success div { background-color: #009682; } .slide .box-bluegreen div.box-header, .slide .box-bluegreen div:first-child, .slide .box-success div.box-header, .slide .box-success div:first-child { background-color: #006450; } .slide .box-bluegreen ul, .slide .box-bluegreen ol, .slide .box-success ul, .slide .box-success ol { background-color: #009682; } .slide .box-bluegreen ul li, .slide .box-bluegreen ol li, .slide .box-success ul li, .slide .box-success ol li { background-color: #009682; } .slide .box-green div, .slide .box-example div { background-color: #9BC328; } .slide .box-green div.box-header, .slide .box-green div:first-child, .slide .box-example div.box-header, .slide .box-example div:first-child { background-color: #697D19; } .slide .box-green ul, .slide .box-green ol, .slide .box-example ul, .slide .box-example ol { background-color: #9BC328; } .slide .box-green ul li, .slide .box-green ol li, .slide .box-example ul li, .slide .box-example ol li { background-color: #9BC328; } .slide .box-red div, .slide .box-alert div { background-color: #E10019; } .slide .box-red div.box-header, .slide .box-red div:first-child, .slide .box-alert div.box-header, .slide .box-alert div:first-child { background-color: #96000F; } .slide .box-red ul, .slide .box-red ol, .slide .box-alert ul, .slide .box-alert ol { background-color: #E10019; } .slide .box-red ul li, .slide .box-red ol li, .slide .box-alert ul li, .slide .box-alert ol li { background-color: #E10019; } .slide .box-blue div, .slide .box-info div { background-color: #4BBEE1; } .slide .box-blue div.box-header, .slide .box-blue div:first-child, .slide .box-info div.box-header, .slide .box-info div:first-child { background-color: #327D91; } .slide .box-blue ul, .slide .box-blue ol, .slide .box-info ul, .slide .box-info ol { background-color: #4BBEE1; } .slide .box-blue ul li, .slide .box-blue ol li, .slide .box-info ul li, .slide .box-info ol li { background-color: #4BBEE1; } .slide .box-purple div { background-color: #821350; } .slide .box-purple div.box-header, .slide .box-purple div:first-child { background-color: #560F32; } .slide .box-purple ul, .slide .box-purple ol { background-color: #821350; } .slide .box-purple ul li, .slide .box-purple ol li { background-color: #821350; } .slide .box-warning div, .slide .box-orange div { background-color: #FF8200; } .slide .box-warning div.box-header, .slide .box-warning div:first-child, .slide .box-orange div.box-header, .slide .box-orange div:first-child { background-color: #AA5500; } .slide .box-warning ul, .slide .box-warning ol, .slide .box-orange ul, .slide .box-orange ol { background-color: #FF8200; } .slide .box-warning ul li, .slide .box-warning ol li, .slide .box-orange ul li, .slide .box-orange ol li { background-color: #FF8200; } .slide footer { font-family: 'Open Sans', sans-serif; font-weight: lighter; position: absolute; left: 0; right: 0; bottom: 5px; text-align: left; padding: 10px 96px 10px 78px; color: #46413C; line-height: 1; font-size: 17px; } #slide-0-0 { color: #46413C; font-size: 70px; font-weight: 700; font: 100 50px/1.4 'Open Sans',sans-serif; } #slide-0-0 hgroup { background-color: #46413C; } #slide-0-0 dl { font: 100 30px/1.6 'Open Sans', sans-serif; } #slide-0-0 > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 60px 96px 38px 78px; width: 850px; height: 670px; } #slide-0-0 footer { display: block; } #slide-0-0 hgroup { margin-bottom: 0; } #slide-0-0 hgroup h1, #slide-0-0 hgroup h2 { text-transform: none; color: white; float: none; font: 300 59px/1.3 'PT Sans Narrow',sans-serif; visibility: visible; display: block; position: relative; left: 0; right: 0; } #slide-0-0 p { font: 30px/1.6 'Open Sans', sans-serif; color: #46413C; margin: 30px 0; } #slide-0-0 p.date { font-family: 'Open Sans', sans-serif; font-size: 16px; } @media screen { .list { position: absolute; clip: rect(0, auto, auto, 0); padding: 50px 0 50px 50px; background: #E2E2E2 url(../images/mesh.png) 50% 0; text-align: center; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { .list { background-image: url(../images/mesh@2x.png); background-size: 256px; } } @media screen { .list .caption, .list .badge { display: block; } .list .slide { position: relative; top: 334px; display: inline-block; margin: -334px -462px 0 0; text-align: left; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @media screen and (max-width: 1180px) { .list .slide { top: 526px; margin: -526px -718px 0 0; -webkit-transform: scale(0.25); transform: scale(0.25); } } @media screen { .list .slide:before { position: absolute; top: 0; left: 0; z-index: -1; width: 512px; height: 384px; box-shadow: 0 0 0 1px #DDD; content: ''; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(2); transform: scale(2); } } @media screen and (max-width: 1180px) { .list .slide:before { width: 256px; height: 192px; -webkit-transform: scale(4); transform: scale(4); } } @media screen { .list .slide:after { top: 100%; bottom: auto; padding-top: 50px; } } @media screen and (max-width: 1180px) { .list .slide:after { width: 512px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(2); transform: scale(2); } } @media screen { .list .slide:hover:before { box-shadow: 0 0 0 1px #EEE, 0 0 0 12px rgba(255, 255, 255, 0.5); } .list .slide:target:before { box-shadow: 0 0 10px 0 #383430, 0 0 0 12px #46413C; } .list .slide:target:after { color: #46413C; } .list .slide > div:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; content: ''; } .list .slide.cover:after, .list .slide.chapter:after, .list .slide.section:after, .list .slide.shout:after, .list .slide.chapter:after, .list .slide.chapter-html:after, .list .slide.problem-solution:after, .list .slide.problem:after, .list .slide.solution:after { content: counter(slide) "/" attr(data-slides); } .list .slide.disabled { opacity: 0.8; -webkit-filter: grayscale(100%); } .list .slide.disabled:before { content: ''; position: absolute; /* opacity: 0.1; */ top: 0; bottom: 0; left: 0; right: 0; text-align: center; /* vertical-align: middle; */ line-height: 310px; font-size: 100px; color: #F5F5F5; background: rgba(255, 255, 255, 0.4); z-index: 1; /* -webkit-transform: rotate(45deg); */ text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); text-transform: uppercase; } .full { position: absolute; top: 50%; left: 50%; overflow: hidden; margin: -384px 0 0 -512px; width: 1024px; height: 768px; background: #000; } .full.wide-layout { margin: -384px 0 0 -512px; width: 1024px; height: 768px; } .full .slide { position: absolute; top: 0; left: 0; margin-left: 150%; } .full .slide .next { visibility: hidden; } .full .slide .next.active { visibility: visible; } .full .slide:target { margin: 0; } .full .slide.shout.right h1, .full .slide.right.chapter h1, .full .slide.right.chapter-html h1, .full .slide.right.problem-solution h1, .full .slide.right.problem h1, .full .slide.right.solution h1, .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2, .full .slide.shout.up h1, .full .slide.up.chapter h1, .full .slide.up.chapter-html h1, .full .slide.up.problem-solution h1, .full .slide.up.problem h1, .full .slide.up.solution h1, .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2, .full .slide.shout.left h1, .full .slide.chapter h1, .full .slide.left.chapter-html h1, .full .slide.chapter-html.chapter h1, .full .slide.left.problem-solution h1, .full .slide.problem-solution.chapter h1, .full .slide.chapter.problem h1, .full .slide.chapter.solution h1, .full .slide.left.problem h1, .full .slide.left.solution h1, .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2, .full .slide.shout.down h1, .full .slide.down.chapter h1, .full .slide.down.chapter-html h1, .full .slide.down.problem-solution h1, .full .slide.down.problem h1, .full .slide.down.solution h1, .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 { opacity: 0; transition: all 0.7s ease-out; } .full .slide.shout.right:target h2, .full .slide.right.chapter:target h2, .full .slide.right.chapter-html:target h2, .full .slide.right.problem-solution:target h2, .full .slide.right.problem:target h2, .full .slide.right.solution:target h2, .full .slide.shout.up:target h2, .full .slide.up.chapter:target h2, .full .slide.up.chapter-html:target h2, .full .slide.up.problem-solution:target h2, .full .slide.up.problem:target h2, .full .slide.up.solution:target h2, .full .slide.shout.left:target h2, .full .slide.chapter:target h2, .full .slide.left.chapter-html:target h2, .full .slide.chapter-html.chapter:target h2, .full .slide.left.problem-solution:target h2, .full .slide.problem-solution.chapter:target h2, .full .slide.chapter.problem:target h2, .full .slide.chapter.solution:target h2, .full .slide.left.problem:target h2, .full .slide.left.solution:target h2, .full .slide.shout.down:target h2, .full .slide.down.chapter:target h2, .full .slide.down.chapter-html:target h2, .full .slide.down.problem-solution:target h2, .full .slide.down.problem:target h2, .full .slide.down.solution:target h2 { opacity: 1; -webkit-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2 { -webkit-transform: translateX(-100%) translateY(-50%); transform: translateX(-100%) translateY(-50%); } .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2 { -webkit-transform: translateX(100%) translateY(-50%); transform: translateX(100%) translateY(-50%); } .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2 { -webkit-transform: translateX(0) translateY(100%); transform: translateX(0) translateY(100%); } .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 { -webkit-transform: translateX(0) translateY(-100%); transform: translateX(0) translateY(-100%); } .full .inactive, .full .current { -webkit-transition: opacity 0.5s ease-in-out 0.0s; } .full .inactive { opacity: 0; } .full .visited { -webkit-transition: opacity 0.5s ease-in-out 0.3s; } .full .visited .hide-visited { display: none; } .full .visited.hide-visited { display: none; } .full .hover li.visited { opacity: 0.5; } .full li.current { opacity: 1; } .full li.current:before { content: '\2023\00A0\00A0\2009'; } .full .border-separated li { -webkit-transition: all 0.5s; } .full .border-separated li.inactive { margin-left: -400px; } .full .border-separated li.current, .full .border-separated li.visited { margin-left: 0; } .full .progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; } .full .progress div { position: absolute; left: 0; bottom: 0; width: 0; height: 8px; padding-left: -10px; background: url(../images/progress-grayDark.svg) 100% 0 no-repeat; -webkit-background-clip: content-box; background-clip: content-box; transition: width 0.3s linear; } .full .box.shadow { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 3px; } .full .disabled { display: none; } } @page { margin: 0; size: 1024px 768px; }