*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}section{background:#eceff1;width:100%;padding:50px;min-height:200px}.btn-list{display:-webkit-box;display:-ms-flexbox;display:flex}.btn-float{width:50px;height:50px;line-height:50px;display:inline-block;border:none;font-size:18px;color:#fff;text-align:center;position:relative;-webkit-transition:.3s;transition:.3s;border-radius:50%;cursor:pointer;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.11);box-shadow:0 2px 5px 0 rgba(0,0,0,.11)}.btn-float:hover{text-decoration:none;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15),0 4px 15px rgba(0,0,0,.13);box-shadow:0 5px 10px rgba(0,0,0,.15),0 4px 15px rgba(0,0,0,.13)}.btn-float:active,.btn-float:focus{outline:none}.btn-float+.btn-float{margin-left:5px}.yellow{background:#ffa000}.blue{background:#40c4ff}.green{background:#00e676}.purple{background:#8e24aa}.pink{background:#e91e63}.icon-bars{background:#fff;height:1px;width:22px;margin:auto;display:block;position:relative;-moz-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s;-webkit-transition-delay:.3s;-webkit-transition:.3s .3s;transition:.3s .3s}.icon-bars:after{content:"";position:absolute;height:22px;width:1px;background:#fff;top:-10px}.float-btn-group{position:relative;float:right;-webkit-transition:.3s;transition:.3s}.float-btn-group .btn-triger{z-index:15;float:left}.float-btn-group .btn-list{position:absolute;right:0;-webkit-transition:.3s;transition:.3s}.float-btn-group .btn-list li{display:inline-block}.float-btn-group.open .icon-bars{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.model-0 .float-btn-group{width:65px;padding-left:15px;min-height:65px;overflow:hidden}.model-0 .float-btn-group .btn-list{opacity:0;width:215px}.model-0 .float-btn-group.open{width:285px}.model-0 .float-btn-group.open .btn-list{opacity:1}.model-1{background:#cfd8dc}.model-1 .float-btn-group{margin:auto;float:none;width:50px}.model-1 .float-btn-group .icon-bars{-webkit-transition:.3s;transition:.3s}.model-1 .float-btn-group .btn-list{background:rgba(0,0,0,.2);width:50px;height:50px;overflow:hidden;left:0;top:0;opacity:0;-moz-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s;-webkit-transition-delay:.3s;-webkit-transition:.3s .3s;transition:.3s .3s;border-radius:50%}.model-1 .float-btn-group .btn-list .btn-float{position:absolute;background:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:scale(0);transform:scale(0);margin:auto}.model-1 .float-btn-group .btn-list .btn-float:first-child{left:0;right:0;top:10px}.model-1 .float-btn-group .btn-list .btn-float:nth-child(2){left:10px;top:0;bottom:0}.model-1 .float-btn-group .btn-list .btn-float:nth-child(3){left:0;right:0;bottom:10px}.model-1 .float-btn-group .btn-list .btn-float:nth-child(4){right:10px;top:0;bottom:0}.model-1 .float-btn-group.open .btn-list{width:200px;height:200px;left:-75px;top:-75px;opacity:1}.model-1 .float-btn-group.open .btn-list .btn-float{-webkit-transform:scale(1.1);transform:scale(1.1);-moz-transition:.3s .6s;-o-transition:.3s .6s;-webkit-transition:.3s;-webkit-transition-delay:.6s;-webkit-transition:.3s .6s;transition:.3s .6s}.model-1 .float-btn-group.open .btn-list .btn-float:hover{-webkit-transition:.3s;transition:.3s;text-shadow:1px 4px 1px #666}.model-2{background:#b0bec5}.model-2 .float-btn-group{float:left}.model-2 .float-btn-group .icon-bars{-webkit-transition:.3s;transition:.3s}.model-2 .float-btn-group .btn-list .btn-float{position:absolute;right:0;top:0;opacity:0;-webkit-transform:scale(0);transform:scale(0)}.model-2 .float-btn-group .btn-list .btn-float:first-child{-moz-transition:.2s .3s;-o-transition:.2s .3s;-webkit-transition:.2s;-webkit-transition-delay:.3s;-webkit-transition:.2s .3s;transition:.2s .3s}.model-2 .float-btn-group .btn-list .btn-float:nth-child(2){-moz-transition:.2s .5s;-o-transition:.2s .5s;-webkit-transition:.2s;-webkit-transition-delay:.5s;-webkit-transition:.2s .5s;transition:.2s .5s}.model-2 .float-btn-group .btn-list .btn-float:nth-child(3){-moz-transition:.2s .7s;-o-transition:.2s .7s;-webkit-transition:.2s;-webkit-transition-delay:.7s;-webkit-transition:.2s .7s;transition:.2s .7s}.model-2 .float-btn-group .btn-list .btn-float:nth-child(4){-moz-transition:.2s .92s;-o-transition:.2s .92s;-webkit-transition:.2s;-webkit-transition-delay:.92s;-webkit-transition:.2s .92s;transition:.2s .92s}.model-2 .float-btn-group.open .btn-list .btn-float{opacity:1;-webkit-transform:scale(.9);transform:scale(.9)}.model-2 .float-btn-group.open .btn-list .btn-float:first-child{top:-220px;-moz-transition:.2s .9s;-o-transition:.2s .9s;-webkit-transition:.2s;-webkit-transition-delay:.9s;-webkit-transition:.2s .9s;transition:.2s .9s}.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(2){top:-165px;-moz-transition:.2s .7s;-o-transition:.2s .7s;-webkit-transition:.2s;-webkit-transition-delay:.7s;-webkit-transition:.2s .7s;transition:.2s .7s}.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(3){top:-110px;-moz-transition:.2s .5s;-o-transition:.2s .5s;-webkit-transition:.2s;-webkit-transition-delay:.5s;-webkit-transition:.2s .5s;transition:.2s .5s}.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(4){top:-55px;-moz-transition:.2s .3s;-o-transition:.2s .3s;-webkit-transition:.2s;-webkit-transition-delay:.3s;-webkit-transition:.2s .3s;transition:.2s .3s}.model-3{background:#90a4ae}.model-3 .float-btn-group{float:none;width:50px;margin:auto}.model-3 .float-btn-group .icon-bars{-webkit-transition:.3s;transition:.3s}.model-3 .float-btn-group .btn-list{background:#fff;border-radius:50px;width:50px;height:50px;left:0;overflow:hidden;opacity:0}.model-3 .float-btn-group .btn-list .btn-float{-webkit-transition:.2s;transition:.2s;position:absolute;top:0;left:0;-webkit-transform:scale(0);transform:scale(0)}.model-3 .float-btn-group .btn-list .btn-float:nth-child(2){left:50px}.model-3 .float-btn-group .btn-list .btn-float:nth-child(3){left:160px}.model-3 .float-btn-group .btn-list .btn-float:nth-child(4){left:215px}.model-3 .float-btn-group.open .btn-list{width:270px;left:-110px;opacity:1}.model-3 .float-btn-group.open .btn-list .btn-float{-moz-transition:.2s .3s;-o-transition:.2s .3s;-webkit-transition:.2s;-webkit-transition-delay:.3s;-webkit-transition:.2s .3s;transition:.2s .3s;-webkit-transform:scale(.9);transform:scale(.9)}.model-4{background:#78909c}.model-4 .float-btn-group .icon-bars{-webkit-transition:.3s;transition:.3s}.model-4 .float-btn-group .btn-list .btn-float{position:absolute;right:0;top:0;opacity:0}.model-4 .float-btn-group .btn-list .btn-float:first-child{-moz-transition:.3s 1.2s;-o-transition:.3s 1.2s;-webkit-transition:.3s;-webkit-transition-delay:1.2s;-webkit-transition:.3s 1.2s;transition:.3s 1.2s}.model-4 .float-btn-group .btn-list .btn-float:nth-child(2){-moz-transition:.3s .9s;-o-transition:.3s .9s;-webkit-transition:.3s;-webkit-transition-delay:.9s;-webkit-transition:.3s .9s;transition:.3s .9s}.model-4 .float-btn-group .btn-list .btn-float:nth-child(3){-moz-transition:.3s .6s;-o-transition:.3s .6s;-webkit-transition:.3s;-webkit-transition-delay:.6s;-webkit-transition:.3s .6s;transition:.3s .6s}.model-4 .float-btn-group .btn-list .btn-float:nth-child(4){-moz-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s;-webkit-transition-delay:.3s;-webkit-transition:.3s .3s;transition:.3s .3s}.model-4 .float-btn-group.open .btn-list .btn-float{opacity:1}.model-4 .float-btn-group.open .btn-list .btn-float:first-child{right:230px;-moz-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s;-webkit-transition-delay:.3s;-webkit-transition:.3s .3s;transition:.3s .3s}.model-4 .float-btn-group.open .btn-list .btn-float:nth-child(2){right:165px;-moz-transition:.3s .6s;-o-transition:.3s .6s;-webkit-transition:.3s;-webkit-transition-delay:.6s;-webkit-transition:.3s .6s;transition:.3s .6s}.model-4 .float-btn-group.open .btn-list .btn-float:nth-child(3){right:110px;-moz-transition:.3s .9s;-o-transition:.3s .9s;-webkit-transition:.3s;-webkit-transition-delay:.9s;-webkit-transition:.3s .9s;transition:.3s .9s}.model-4 .float-btn-group.open .btn-list .btn-float:nth-child(4){right:55px;-moz-transition:.3s 1.2s;-o-transition:.3s 1.2s;-webkit-transition:.3s;-webkit-transition-delay:1.2s;-webkit-transition:.3s 1.2s;transition:.3s 1.2s}.model-5{background:#607d8b}.model-5 .float-btn-group{float:none;width:50px;margin:auto}.model-5 .float-btn-group .icon-bars{-webkit-transition:.4s;transition:.4s}.model-5 .float-btn-group .btn-list{border-radius:50px;-webkit-transform:rotate(1turn);transform:rotate(1turn);-moz-transition:-moz-transform .4s,width .3s .5s,opacity .3s .1s,left .3s .5s;-o-transition:-o-transform .4s,width .3s .5s,opacity .3s .1s,left .3s .5s;-webkit-transition:-webkit-transform .4s,width .3s,opacity .3s,left .3s;-webkit-transition-delay:0s,.5s,.1s,.5s;-webkit-transition:width .3s .5s,opacity .3s .1s,left .3s .5s,-webkit-transform .4s;transition:width .3s .5s,opacity .3s .1s,left .3s .5s,-webkit-transform .4s;transition:transform .4s,width .3s .5s,opacity .3s .1s,left .3s .5s;transition:transform .4s,width .3s .5s,opacity .3s .1s,left .3s .5s,-webkit-transform .4s;width:50px;height:50px;left:0;overflow:hidden;opacity:0}.model-5 .float-btn-group .btn-list .btn-float{-webkit-transition:.2s;transition:.2s;position:absolute;top:0;left:0;-webkit-transform:scale(1.5);transform:scale(1.5)}.model-5 .float-btn-group .btn-list .btn-float:nth-child(2){left:50px}.model-5 .float-btn-group .btn-list .btn-float:nth-child(3){left:160px}.model-5 .float-btn-group .btn-list .btn-float:nth-child(4){left:215px}.model-5 .float-btn-group.open .icon-bars{-webkit-transform:rotate(-225deg);transform:rotate(-225deg)}.model-5 .float-btn-group.open .btn-list{-moz-transition:-moz-transform .4s .1s,opacity .3s .1s;-o-transition:-o-transform .4s .1s,opacity .3s .1s;-webkit-transition:-webkit-transform .4s,opacity .3s;-webkit-transition-delay:.1s,.1s;-webkit-transition:opacity .3s .1s,-webkit-transform .4s .1s;transition:opacity .3s .1s,-webkit-transform .4s .1s;transition:transform .4s .1s,opacity .3s .1s;transition:transform .4s .1s,opacity .3s .1s,-webkit-transform .4s .1s;-webkit-transform:rotate(0);transform:rotate(0);width:270px;left:-110px;opacity:1}.model-6{background:#546e7a}.model-6 .float-btn-group{float:none;margin:auto;width:50px}.model-6 .float-btn-group .icon-bars{-moz-transition:.3s 1.3s;-o-transition:.3s 1.3s;-webkit-transition:.3s;-webkit-transition-delay:1.3s;-webkit-transition:.3s 1.3s;transition:.3s 1.3s}.model-6 .float-btn-group .btn-list{width:50px;height:50px;left:0;top:0}.model-6 .float-btn-group .btn-list .btn-float{position:absolute;-webkit-transform:scale(0);transform:scale(0);left:0;top:0;margin:auto}.model-6 .float-btn-group .btn-list .btn-float:first-child{-moz-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s;-webkit-transition-delay:.3s;-webkit-transition:.3s .3s;transition:.3s .3s}.model-6 .float-btn-group .btn-list .btn-float:nth-child(2){-moz-transition:.3s .6s;-o-transition:.3s .6s;-webkit-transition:.3s;-webkit-transition-delay:.6s;-webkit-transition:.3s .6s;transition:.3s .6s}.model-6 .float-btn-group .btn-list .btn-float:nth-child(3){-moz-transition:.3s .9s;-o-transition:.3s .9s;-webkit-transition:.3s;-webkit-transition-delay:.9s;-webkit-transition:.3s .9s;transition:.3s .9s}.model-6 .float-btn-group .btn-list .btn-float:nth-child(4){-moz-transition:.3s 1.2s;-o-transition:.3s 1.2s;-webkit-transition:.3s;-webkit-transition-delay:1.2s;-webkit-transition:.3s 1.2s;transition:.3s 1.2s}.model-6 .float-btn-group.open .icon-bars{-webkit-transition:.3s;transition:.3s}.model-6 .float-btn-group.open .btn-list .btn-float{-webkit-transform:scale(.9);transform:scale(.9)}.model-6 .float-btn-group.open .btn-list .btn-float:first-child{left:-75px;top:0}.model-6 .float-btn-group.open .btn-list .btn-float:nth-child(2){left:-40px;top:-65px}.model-6 .float-btn-group.open .btn-list .btn-float:nth-child(3){left:40px;top:-65px}.model-6 .float-btn-group.open .btn-list .btn-float:nth-child(4){left:75px;top:0}.model-6 .float-btn-group.open .btn-list .btn-float:hover{-webkit-transition:.3s;transition:.3s;text-shadow:1px 4px 1px #666}