* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } @media print { * { -webkit-print-color-adjust: exact; } } @page { width: landscape; height: landscape; margin: 0; } article { -webkit-transition: background 0.6s ease; -moz-transition: background 0.6s ease; -o-transition: background 0.6s ease; -ms-transition: background 0.6s ease; transition: background 0.6s ease; display: none; } article.bespoke-parent { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; } @media print { article.bespoke-parent { overflow: visible; position: static; } } .bespoke-slide { -webkit-transition: -webkit-transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; -moz-transition: -moz-transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; -o-transition: -o-transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; -ms-transition: -ms-transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; transition: transform 0.6s ease, opacity 0.6s ease, background 0.6s ease; -webkit-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flex; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -ms-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-box-align: center; -webkit-align-items: center; align-items: center; text-align: center; width: 640px; height: 480px; position: absolute; top: 50%; margin-top: -240px; left: 50%; margin-left: -320px; background: #fff; padding: 40px; -webkit-border-radius: 0; border-radius: 0; } @media print { .bespoke-slide { zoom: 1 !important; height: 743px; width: 100%; page-break-before: always; position: static; margin: 0; } } .bespoke-before { -webkit-transform: translateX(100px) translateX(-320px) rotateY(-90deg) translateX(-320px); -moz-transform: translateX(100px) translateX(-320px) rotateY(-90deg) translateX(-320px); -o-transform: translateX(100px) translateX(-320px) rotateY(-90deg) translateX(-320px); -ms-transform: translateX(100px) translateX(-320px) rotateY(-90deg) translateX(-320px); transform: translateX(100px) translateX(-320px) rotateY(-90deg) translateX(-320px); } .bespoke-after { -webkit-transform: translateX(-100px) translateX(320px) rotateY(90deg) translateX(320px); -moz-transform: translateX(-100px) translateX(320px) rotateY(90deg) translateX(320px); -o-transform: translateX(-100px) translateX(320px) rotateY(90deg) translateX(320px); -ms-transform: translateX(-100px) translateX(320px) rotateY(90deg) translateX(320px); transform: translateX(-100px) translateX(320px) rotateY(90deg) translateX(320px); } @media print { .bespoke-after { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } .bespoke-inactive { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); pointer-events: none; } @media print { .bespoke-inactive { opacity: 1; -ms-filter: none; filter: none; } } .bespoke-active { opacity: 1; -ms-filter: none; filter: none; } .bespoke-bullet { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .bespoke-bullet-inactive { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } li.bespoke-bullet-inactive { -webkit-transform: translateX(16px); -moz-transform: translateX(16px); -o-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } @media print { .bespoke-bullet-inactive { opacity: 1; -ms-filter: none; filter: none; } } .bespoke-bullet-active { opacity: 1; -ms-filter: none; filter: none; } .bespoke-progress-parent { position: absolute; top: 0; left: 0; right: 0; height: 2px; } @media only screen and (min-width: 1366px) { .bespoke-progress-parent { height: 4px; } } @media print { .bespoke-progress-parent { display: none; } } .bespoke-progress-bar { -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; -ms-transition: width 0.6s ease; transition: width 0.6s ease; position: absolute; height: 100%; background: #0089f3; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .emphatic, .emphatic .bespoke-slide { background: #fff; } .head { position: fixed; left: 0; right: 0; top: 0; z-index: 0; width: 100%; } .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; } .body { z-index: 100; width: 70%; } code { display: block; padding: 26px !important; } body { font-family: helvetica, arial, sans-serif; font-size: 18px; color: #404040; } h1 { font-family: 'Underdog'; font-size: 72px; line-height: 82px; letter-spacing: -2px; margin-bottom: 16px; } h2 { font-family: 'Scada', sans-serif; font-size: 42px; letter-spacing: -1px; margin-bottom: 8px; } h3 { font-size: 24px; font-weight: normal; margin-bottom: 24px; color: #606060; } hr { visibility: hidden; height: 20px; } ul { list-style: circle; } li { margin-bottom: 12px; text-align: left; } p { margin: 0 100px 12px; line-height: 22px; } a { color: #0089f3; text-decoration: none; } .token.function, .token.constant { color: #07a; } .token.variable { color: #e90; } .token.deliminator { font-weight: bold; }