main.easing-page{margin:0;padding:0}main.easing-page h1{font-size:4em;margin-bottom:15px}main.easing-page h3{font-size:2.5em;margin-bottom:10px;font-weight:700}main.easing-page h4{font-size:1.5em;font-weight:700}main.easing-page #curvewrap{font-family:"Roboto",sans-serif;position:relative}main.easing-page #curvewrap button{background:0 0;border:none;border-radius:2px;position:relative;height:36px;min-width:64px;padding:0 8px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow,transform;-webkit-transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);-webkit-transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle;background:rgba(158,158,158,.2);-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background:#3f51b5;color:#fff}main.easing-page #curvewrap button::-moz-focus-inner{border:0}main.easing-page #curvewrap button:hover{background-color:rgba(158,158,158,.2)}main.easing-page #curvewrap button:focus:not(.active){-webkit-box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4);background-color:#3f51b5}main.easing-page #curvewrap button.active{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4);background-color:#3f51b5}main.easing-page #curvewrap button:hover{background-color:#3f51b5}main.easing-page #curvewrap .easingwrap{position:absolute;left:750px;right:0;top:100px}main.easing-page #curvewrap .easingwrap .easing{position:relative;display:inline-block;width:100px;height:120px;margin:5px;color:#222;-webkit-transition:background .5s;transition:background .5s}main.easing-page #curvewrap .easingwrap .easing canvas{position:absolute;top:30px;width:80px;height:80px;border:1px solid rgba(0,0,0,.5);left:10px}main.easing-page #curvewrap .easingwrap .easing:hover{cursor:pointer;background:#e74c3c;color:#fff}main.easing-page #curvewrap .easingwrap .easing h5{position:absolute;top:0;left:0;right:0;text-align:center;margin:0;padding:0;font-weight:400;font-size:17px;-webkit-transition:color .5s;transition:color .5s}main.easing-page #curvewrap #curve{width:525px;height:520px;position:absolute;top:30px;left:200px;border:1px solid #222}main.easing-page #curvewrap #curve canvas{position:absolute;top:10px;left:10px;width:500px;height:500px}main.easing-page #curvewrap #curve #handle1{top:500px;left:0;background:#2980b9;border:2px solid #2472a4}main.easing-page #curvewrap #curve #handle2{top:0;left:500px;background:#e74c3c;border:2px solid #e43725}main.easing-page #curvewrap #curve i{position:absolute;width:20px;height:20px;border-radius:50%;background:#7986cb}main.easing-page #curvewrap #curvebuttons{position:absolute;left:0;width:200px;top:0;text-align:center}main.easing-page #curvewrap #curvebuttons button{display:block;margin:10px auto}main.easing-page #curvewrap #curvetext{position:absolute;left:750px;top:0;right:0;text-align:center;font-size:42px}main.easing-page #curvewrap #curvetext input[type=text]{border:none;margin:0 .1em;width:2em;border-bottom:2px solid #fff;font-size:.8em}main.easing-page #curvewrap #curvetext input[type=text]:focus{border-bottom:2px solid #27ae60}main.easing-page #curvewrap #curvetext input[type=text]#text1,main.easing-page #curvewrap #curvetext input[type=text]#text2{color:#2980b9}main.easing-page #curvewrap #curvetext input[type=text]#text3,main.easing-page #curvewrap #curvetext input[type=text]#text4{color:#e74c3c}main.easing-page #curvewrap #curvedemo{position:absolute;left:75px;top:150px;width:50px;height:200px}main.easing-page #curvewrap #curvedemo i{background:#f44336;top:185px}main.easing-page #curvewrap #curvedemo.play i,main.easing-page .graph.play .circle,main.easing-page .graph.play .square{-webkit-animation:rise 2.4s infinite;animation:rise 2.4s infinite}main.easing-page article{max-width:1000px;padding:30px;margin:auto;color:#333;font-family:"Quattrocento Sans"}@media (max-width:480px){main.easing-page article{padding:10px}}main.easing-page header{margin-top:-50px;font-family:"Roboto";background:#3f51b5;padding:70px 15px 20px}main.easing-page header h1{text-align:center;color:#fff;font-weight:300}main.easing-page .example{margin:30px auto;position:relative;min-height:440px}main.easing-page .demo{display:block;width:100%;position:relative;text-align:center}main.easing-page .demo .graph,main.easing-page .graph{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}main.easing-page .demo .graph{position:absolute;left:50%}@media (min-width:300px){main.easing-page .demo .graph{-webkit-transform:translateY(-50%) scale(.2);-ms-transform:translateY(-50%) scale(.2);transform:translateY(-50%) scale(.2)}}main.easing-page .graph{-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3);width:285px;height:138px}@media (min-width:400px){main.easing-page .graph{-webkit-transform:scale(.4);-ms-transform:scale(.4);transform:scale(.4);width:380px;height:184px}}@media (min-width:500px){main.easing-page .graph{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);width:475px;height:230px}}@media (min-width:600px){main.easing-page .graph{-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);width:570px;height:276px}}@media (min-width:700px){main.easing-page .graph{-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);width:665px;height:322px}}@media (min-width:800px){main.easing-page .graph{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);width:760px;height:368px}}@media (min-width:900px){main.easing-page .graph{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9);width:855px;height:414px}}@media (min-width:1000px){main.easing-page .graph{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);width:950px;height:460px}}main.easing-page .red{background:#e74c3c}main.easing-page .blue{background:#2ecc71}main.easing-page .circle,main.easing-page .square{width:50px;height:50px;position:absolute}main.easing-page .circle{border-radius:50%}main.easing-page .graph{position:relative;margin:45px auto 30px}main.easing-page .graph canvas{position:absolute;top:0;left:20px}main.easing-page .graph .guide,main.easing-page .graph .speedguide,main.easing-page .graph .speedguide2{position:absolute;z-index:20;border-bottom:2px solid rgba(0,0,0,.7);border-left:2px solid rgba(0,0,0,.7);top:10px;left:29px;height:200px;width:600px}main.easing-page .graph .guide:after{content:"Time";position:absolute;bottom:-20px;text-align:center;left:0;right:0;font-size:15px}main.easing-page .graph .guide:before,main.easing-page .graph .speedguide:before{content:"Distance";position:absolute;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;left:-25px;top:120px;font-size:15px}main.easing-page .graph .speedguide,main.easing-page .graph .speedguide2{top:230px;height:100px}main.easing-page .graph .speedguide:before{content:"Velocity"}main.easing-page .graph .speedguide2{top:340px}main.easing-page .graph .button{position:absolute;top:-30px;left:0;width:950px;height:505px;background:rgba(0,0,0,.5);color:#fff;opacity:0;z-index:50;-webkit-transition:opacity .5s;transition:opacity .5s}main.easing-page .graph .button i{font-size:80px;position:absolute;z-index:50;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0}main.easing-page .graph:not(.play):hover .button{opacity:1;cursor:pointer}main.easing-page .graph:not(.play):hover .button i.fa-play{opacity:1}main.easing-page .graph.play.pause:hover .button{opacity:1;cursor:pointer}main.easing-page .graph.play.pause:hover .button i.fa-pause{opacity:1}main.easing-page .graph .circle,main.easing-page .graph .square{top:175px}main.easing-page .graph div.blind{position:absolute;z-index:5;top:0;left:30px;width:600px;height:440px}main.easing-page .graph div.blind>div{background:#fff;position:absolute;top:0;left:0;right:0;bottom:0}main.easing-page .graph>span{text-align:center;font-size:18px;white-space:nowrap}main.easing-page .graph>span canvas{position:absolute;width:100px;height:100px;top:30px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border:1px solid #444}main.easing-page .graph>span .bezier,main.easing-page .graph>span.first,main.easing-page .graph>span.second{position:absolute;top:140px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}main.easing-page .graph>span.first,main.easing-page .graph>span.second{left:750px;top:250px}main.easing-page .graph>i.first{left:725px}main.easing-page .graph>span.second{left:875px}main.easing-page .graph>i.second{left:850px}main.easing-page .graph .wall{position:absolute;background:#fff;left:700px;width:250px;height:70px;z-index:7;top:175px;border-top:1px solid #222}main.easing-page .graph.play.enter .circle,main.easing-page .graph.play.enter .square{-webkit-animation:enter 2.4s infinite;animation:enter 2.4s infinite}main.easing-page .graph.play.leave .circle,main.easing-page .graph.play.leave .square{-webkit-animation:leave 2.4s infinite;animation:leave 2.4s infinite}main.easing-page .graph.play.enter .blind>div,main.easing-page .graph.play.leave .blind>div{-webkit-animation:fastreveal 2.4s infinite linear;animation:fastreveal 2.4s infinite linear}main.easing-page .graph.play .blind>div{-webkit-animation:reveal 2.4s infinite linear;animation:reveal 2.4s infinite linear}@-webkit-keyframes rise{0%,75%,to{top:185px}25%,50%{top:-15px}}@keyframes rise{0%,75%,to{top:185px}25%,50%{top:-15px}}@-webkit-keyframes leave{0%,50%{top:-15px}25%,49.9%,75%,to{top:185px}}@keyframes leave{0%,50%{top:-15px}25%,49.9%,75%,to{top:185px}}@-webkit-keyframes enter{0%,50%{top:185px}25%,49.9%,75%,to{top:-15px}}@keyframes enter{0%,50%{top:185px}25%,49.9%,75%,to{top:-15px}}@-webkit-keyframes fastreveal{0%,50%{left:0}49.9%,to{left:66.7%}}@keyframes fastreveal{0%,50%{left:0}49.9%,to{left:66.7%}}@-webkit-keyframes reveal{0%{left:0}75%,to{left:100%}}@keyframes reveal{0%{left:0}75%,to{left:100%}}