@import "http://fonts.googleapis.com/css?family=Lato";
@keyframes bounce{0%{transform:translate(3px)}25%{transform:translate(-3px)}50%{transform:translate(3px)}to{transform:translate(0)}}@keyframes shine{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes rise{0%{transform:translateY(0)}50%{transform:translateY(3px)}to{transform:translateY(0)}}@keyframes classicCircle{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.wrapper{color:#4f5160;margin:30px;font-family:Lato,sans-serif}.wrapper h1{margin-left:5px}.wrapper p{margin-bottom:5px;margin-left:5px;font-size:14px;font-weight:700}.wrapper .bar{display:flex}@media screen and (max-width:776px){.wrapper .bar{display:block}}.wrapper .bar .btn{color:#3fc3bf;cursor:pointer;background:#fff;border:1px solid #3fc3bf;border-radius:4px;margin:0 5px;padding:8px 12px;transition:all .2s ease-in;display:inline-block}.wrapper .bar .btn:hover{transform:scale(1.05)}.wrapper .bar .btn.inverted{color:#fff;background:#3fc3bf}.wrapper .bar .demo{display:flex}@media screen and (max-width:776px){.wrapper .bar .demo{display:none}}.wrapper .bar .demo .text{margin-left:30px;margin-right:10px;padding-top:8px}.wrapper .bar .demo .demo-btn{color:#3fc3bf;cursor:pointer;background:#fff;border:1px solid #3fc3bf;border-radius:4px;min-width:90px;min-height:18px;margin-right:5px;padding:8px 12px;position:relative;overflow:hidden}.wrapper .bar .demo .demo-btn svg{opacity:1;transform:translateY(5px)scale(1.7)}.wrapper .bar .demo .demo-btn svg path{fill:#3fc3bf}.wrapper .bar .demo .demo-btn.inverted{color:#fff;background:#3fc3bf}.wrapper .bar .demo .demo-btn.inverted svg path{fill:#fff}.wrapper .bar .demo .demo-btn.inactive span{opacity:1}.wrapper .bar .demo .demo-btn.inactive svg{opacity:0}.wrapper .bar .demo span{opacity:0;text-align:center;height:0;display:block;transform:translateY(2px)}.wrapper .loaders{opacity:0;border-radius:5px;margin-bottom:70px;transition:opacity .2s ease-in;position:absolute;top:162px;left:40px;right:40px}@media screen and (max-width:776px){.wrapper .loaders{top:220px}}.wrapper .loaders.active{opacity:1}.wrapper .loaders.inverted .container .item{background:#3fc3bf;border:1px solid #3fc3bf}.wrapper .loaders.inverted .container .item h3{color:#fff}.wrapper .loaders.inverted .container .item svg path{fill:#fff}.wrapper .loaders .container{flex-wrap:wrap;margin-top:30px;display:flex}.wrapper .loaders .container .item{text-align:center;border:1px solid #4f5160;border-radius:5px;width:calc(33% - 80px);margin-bottom:40px;margin-right:40px;padding:20px;position:relative;overflow:hidden}@media screen and (max-width:776px){.wrapper .loaders .container .item{width:100%}}.wrapper .loaders .container .item .tag{color:#fff;background:orange;width:88px;padding:4px;font-size:12px;font-weight:700;position:absolute;top:6px;left:-29px;transform:rotate(-45deg)}.wrapper #shine .st0{opacity:.2;animation:2.4s ease-out 2.4s infinite shine}.wrapper #shine .leaf-1{animation-delay:0s}.wrapper #shine .leaf-2{animation-delay:.2s}.wrapper #shine .leaf-3,.wrapper #shine .leaf-6{animation-delay:.4s}.wrapper #shine .leaf-4{animation-delay:.6s}.wrapper #shine .leaf-5{animation-delay:.8s}.wrapper #rise .st0{animation:2s ease-out 2s infinite rise}.wrapper #rise .leaf-1{animation-delay:0s}.wrapper #rise .leaf-2{animation-delay:.2s}.wrapper #rise .leaf-3{animation-delay:.4s}.wrapper #rise .leaf-4{animation-delay:.6s}.wrapper #rise .leaf-5{animation-delay:.8s}.wrapper #riseAndShine .st0{opacity:.2;animation-name:shine,rise;animation-duration:2.4s,2s;animation-timing-function:ease-out,ease-out;animation-iteration-count:infinite,infinite;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:2.2s;animation-fill-mode:none,none;animation-timeline:auto,auto}.wrapper #riseAndShine .leaf-1{animation-delay:0s}.wrapper #riseAndShine .leaf-2{animation-delay:.2s}.wrapper #riseAndShine .leaf-3,.wrapper #riseAndShine .leaf-6{animation-delay:.4s}.wrapper #riseAndShine .leaf-4{animation-delay:.6s}.wrapper #riseAndShine .leaf-5{animation-delay:.8s}.wrapper #classicCircle .st0{opacity:.2;animation:1s 1s infinite classicCircle}.wrapper #classicCircle .leaf-1{animation-delay:0s}.wrapper #classicCircle .leaf-2{animation-delay:.1s}.wrapper #classicCircle .leaf-3{animation-delay:.2s}.wrapper #classicCircle .leaf-4{animation-delay:.3s}.wrapper #classicCircle .leaf-5{animation-delay:.4s}.wrapper #classicCircle .leaf-6{animation-delay:.5s}