/* We start with a good ol' reset. That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ */ 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* We set up styles with default font and nice gradient in the background. */ body { font-family: 'Aller'; min-height: 740px; color: #212121; background: rgb(215, 215, 215); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(171, 171, 171))); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(171, 171, 171)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(171, 171, 171)); background: -ms-radial-gradient(rgb(240, 240, 240), rgb(171, 171, 171)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(171, 171, 171)); background: radial-gradient(rgb(240, 240, 240), rgb(171, 171, 171)); } /* Now let's bring some text styles back ... */ b, strong { font-weight: bold ; color: #82b1a3; } i, em { font-style: italic } /* ... and give links a nice look. */ a { color: inherit; text-decoration: none; padding: 0 0.1em; background: rgba(255,255,255,0.5); text-shadow: -1px -1px 2px rgba(100,100,100,0.9); border-radius: 0.2em; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:focus { background: rgba(255,255,255,1); text-shadow: -1px -1px 2px rgba(100,100,100,0.5); } /* Presentation steps. We start with basics to make sure it displays correctly in everywhere ... */ .step { position: relative; width: 900px; padding: 40px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: 'Aller', georgia, serif; font-size: 48px; line-height: 1.5; } /* ... and we enhance the styles for impress.js. Basically we remove the margin and make inactive steps a little bit transparent. */ .impress-enabled .step { margin: 0; opacity: 0.3; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .impress-enabled .step.active { opacity: 1 } /* And now we start to style each step separately. */ /* the terminal like slide */ .terminal { display: block; width: 900px; height: 700px; padding: 40px 60px; background-color: #1e1e1e; color: #D8Dcdc; border: 8px solid #798B98; outline:2px solid #304863; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); font-family: 'Monospace', Arial, sans-serif; font-size: 60px; line-height: 80px; letter-spacing: -1px; } .terminal .PS1 { color: #87CEEB; } .terminal .prompt { font-size: 80px; color: #B6E354;} .terminal ul { list-style: none; } #cloud { width: 730px; height: 240px; background: #f2f9fe; background: linear-gradient(top, #f2f9fe 3%, #d6f0fd 100%); background: -webkit-linear-gradient(top, #f2f9fe 3%, #d6f0fd 100%); background: -moz-linear-gradient(top, #f2f9fe 3%, #d6f0fd 100%); background: -ms-linear-gradient(top, #f2f9fe 3%, #d6f0fd 100%); background: -o-linear-gradient(top, #f2f9fe 3%, #d6f0fd 100%); border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; position: relative; box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); } #cloud:after, #cloud:before { content: ''; position: absolute; background: #f2f9fe; z-index: -1 } #cloud:after { width: 200px; height: 200px; top: -100px; left: 100px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; } #cloud:before { width: 360px; height: 360px; top: -180px; right: 100px; border-radius: 400px; -webkit-border-radius: 400px; -moz-border-radius: 400px; } #pushTech { padding: 0; left:-40px; background-image: url("../arrow.svg"); background-size: 90px 90px; background-position: bottom left; background-repeat: no-repeat; line-height: 110px; } #pushTech h1 { font-size: 100px; } #pushTech ul { padding-left: 150px; } #wsExplained ul { padding-left: 250px; } #why { width: 600px; text-align: center; line-height: 1; } #why b { font-family: "Titillium"; display: block; font-size: 250px; line-height: 250px; } #why.present b { display: inline-block; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition-delay: 0.50s; -moz-transition-delay: 0.50s; -ms-transition-delay: 0.50s; -o-transition-delay: 0.50s; transition-delay: 0.50s; } .title { width: 4000px; font-style: bold,underline; font-size: 240px; text-align:center; } #ajaxTitle { position:relative; left: -2800px; top: 1900px; } #wsTitle { position:relative; left: 2200px; top: -200px; } .schemaPart { border: 40px solid #FD971F; background: #212121; color: #FFF; font-size:400px; } .DB { width: 700px; height: 800px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; position: relative; } .DBText { position:relative; top: 350px; left: 80px; } .DB:before { content: ''; position: absolute; background: #212121; } .DB:before { width: 700px; height: 360px; top: -180px; right: -40px; border: 40px solid #FD971F; border-radius: 400px; -webkit-border-radius: 400px; -moz-border-radius: 400px; } #DBLeft { position:relative; left: -1300px; top: 2500px; } #DBRight { position:relative; left: 3800px; top: 335px; } #backend { text-align: center; width: 1700px; position: relative; top: 2800px; left: -1800px; } #clientLeft { text-align: center; width: 1700px; position: relative; top: 3100px; left: -1800px; } #daemon { text-align: center; width: 1700px; position: relative; top: 700px; left: 3300px; } #wsSrv{ text-align: center; width: 1700px; position: relative; top: 900px; left: 3300px; } #clientRight{ text-align: center; width: 1700px; position: relative; top: 1100px; left: 3300px; } .arrows { padding: 0; width: 3000px; height: 3000px; background-image: url("../arrow2.svg"); background-size: 1488px 2104px; background-position: bottom left; background-repeat: no-repeat; } #arrow1 { position:relative; left:-280px; top: -1800px; } #arrow2 { position:relative; left:-600px; top: -5950px; } #arrow3 { position:relative; left:-3000px; top: -8350px; -moz-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1); -ms-filter: "FlipH"; } #arrow4 { position:relative; left: 500px; top: -10050px; -moz-transform: scaleX(1.5) scaleY(-1.5); -o-transform: scaleX(1.5) scaleY(-1.5); -webkit-transform: scaleX(1.5) scaleY(-1.5); transform: scaleX(1.5) scaleY(-1.5); } #arrow5 { position:relative; left:-1900px; top: -14250px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); } #arrow6 { position:relative; left:-4400px; top: -18000px; -moz-transform: scaleX(-1) scaleY(-1) rotate(30deg); -o-transform: scaleX(-1) scaleY(-1) rotate(30deg); -webkit-transform: scaleX(-1) scaleY(-1) rotate(30deg); transform: scaleX(-1) scaleY(-1) rotate(30deg); } #arrow7 { position:relative; left:-4550px; top: -20000px; -moz-transform: scaleX(-1) scaleY(1.4); -o-transform: scaleX(-1) scaleY(1.4) ; -webkit-transform: scaleX(-1) scaleY(1.4) ; transform: scaleX(-1) scaleY(1.4) ; } #arrow8 { position:relative; left:-5150px; top: -22100px; -moz-transform: scaleX(-1.4) scaleY(-1.6); -o-transform: scaleX(-1.4) scaleY(-1.6) ; -webkit-transform: scaleX(-1.4) scaleY(-1.6) ; transform: scaleX(-1.4) scaleY(-1.6) ; } #arrow9 { position:relative; left:4720px; top: -25150px; -moz-transform: scaleX(0.9) scaleY(0.9); -o-transform: scaleX(0.9) scaleY(0.9) ; -webkit-transform: scaleX(0.9) scaleY(0.9) ; transform: scaleX(0.9) scaleY(0.9) ; } #arrow10 { position:relative; left:4720px; top: -27575px; -moz-transform: scaleX(0.9) scaleY(-0.9); -o-transform: scaleX(0.9) scaleY(-0.9) ; -webkit-transform: scaleX(0.9) scaleY(-0.9) ; transform: scaleX(0.9) scaleY(-0.9) ; } #arrow11 { position:relative; left:800px; top: -31800px; -moz-transform: scaleX(-0.8) scaleY(0.8); -o-transform: scaleX(-0.8) scaleY(0.8) ; -webkit-transform: scaleX(-0.8) scaleY(0.8) ; transform: scaleX(-0.8) scaleY(0.8) ; } #arrow12 { position:relative; left:1700px; top: -35600px; -moz-transform: scaleX(-0.5) scaleY(0.5); -o-transform: scaleX(-0.5) scaleY(0.5) ; -webkit-transform: scaleX(-0.5) scaleY(0.5) ; transform: scaleX(-0.5) scaleY(0.5) ; } #arrow13 { position:relative; left:3700px; top: -38300px; -moz-transform: scaleX(0.5) scaleY(-0.5); -o-transform: scaleX(0.5) scaleY(-0.5) ; -webkit-transform: scaleX(0.5) scaleY(-0.5) ; transform: scaleX(0.5) scaleY(-0.5) ; } #arrow14 { position:relative; left:4700px; top: -40500px; -moz-transform: scaleX(0.9) scaleY(-0.9); -o-transform: scaleX(0.9) scaleY(-0.9) ; -webkit-transform: scaleX(0.9) scaleY(-0.9) ; transform: scaleX(0.9) scaleY(-0.9) ; } .specialNumber { padding: 60px; background-color: #82b1a3; ; color: #FFFFFF; width: 00px; height: 00px; border-radius: 900px; text-align: center; } .schemaText { padding: 0px; font-size : 100px; color: #454545; text-align: center; } #leftText1 { position:relative; left:-1290px; top: -42000px; } #leftText2 { position:relative; left:-1700px; top: -43300px; } #leftText3 { position:relative; left:-1470px; top: -42900px; } #leftText4 { position:relative; left:-2700px; top: -42500px; max-width: 2000px; } #rightText1 { position:relative; left:5300px; top: -42030px; max-width: 2000px; } #rightText2 { position:relative; left:3000px; top: -42830px; max-width: 2000px; } #rightText3 { position:relative; left:4000px; top: -43800px; max-width: 2400px; } #rightText4 { position:relative; left:5000px; top: -43600px; max-width: 1800px; } #rightText5 { position:relative; left:5100px; top: -42400px; max-width: 1800px; } .stats { padding: 0px; font-size : 210px; color: #454545; text-align: left; background-color: #1e1e1e; border-radius: 30px; padding: 30px; color: #FFF; width: 4500px; } #statsAJAX { position:relative; left:-2850px; top: -41000px; } #statsWS { position:relative; left:1900px; top: -42110px; } #graph { color: #212121; position: absolute; width: 1202px; height: 780px; top: -180px; left: 7000px; background-size: 1202px 775px; background-image: url("../plot.svg"); background-position: bottom left; background-repeat: no-repeat; } #graph.past, #graph.future{ display: none; } #overview { display: none } .impress-on-overview .step { opacity: 1; cursor: pointer; }