.flyout-wrap {
  position: fixed;
  bottom: 15px;
  left: 20px;
}

.flyout-wrap .flyout {
  position: relative;
  margin: 0 0 1px 6px;
  line-height: 0;
}

.flyout-wrap .flyout>li {
  position: relative;
  display: block;
  height: 50px;
  -webkit-transform-origin: 60px bottom;
  -ms-transform-origin: 60px bottom;
  transform-origin: 60px bottom;
}

.flyout-wrap .flyout>li:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout>li:nth-of-type(2) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flyout-wrap .flyout>li:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg)
}

.flyout-wrap .flyout>li:nth-of-type(2) img{
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
}
.flyout-wrap .flyout>li:nth-of-type(3) img{
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.flyout-wrap .flyout>li a {
  position: absolute;
  display: block;
  width: 65px;
  height: 65px;
  overflow: hidden;
}

.flyout-wrap .flyout>li a:active {
  background: #000;
  border-color: #555
}

.flyout-wrap .flyout>li a:active span { opacity: .3 }

.flyout-wrap .flyout>li a span {
  display: block;
  width: 26px;
  height: 26px;
  -webkit-background-size: 16px 16px;
  background-size: 16px 16px
}

.flyout-wrap .flyout-init li { display: none }

.flyout-wrap .flyout li a {
  top: 150px;
  -webkit-animation: contract .35s ease-out 1 backwards;
  animation: contract .35s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li a {
  top: -45px;
  -webkit-animation: expand .3s ease 1 backwards;
  animation: expand .3s ease 1 backwards;
}

.flyout-wrap .flyout.fade li a.clicked {
  top: -45px;
  -webkit-animation: fade .5s ease-out 1 forwards;
  animation: fade .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) {
  top: 10px;
  -webkit-animation: fade .5s ease-out 1 forwards;
  animation: fade .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) span {
  opacity: .1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease
}

.flyout-wrap .flyout li:nth-of-type(1) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout li:nth-of-type(1) a:not(.clicked) span {
  -webkit-animation: spin1-contract .9s ease-out 1 backwards;
  animation: spin1-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: spin1-expand .6s ease-out 1 backwards;
  animation: spin1-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(1) a.clicked span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout li:nth-of-type(2) a {
  -webkit-animation-delay: .12s;
  animation-delay: .12s
}

.flyout-wrap .flyout li:nth-of-type(2) a:not(.clicked) span {
  -webkit-animation: spin2-contract .9s ease-out 1 backwards;
  animation: spin2-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a {
  -webkit-animation-delay: .08s;
  animation-delay: .08s
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a span {
  -webkit-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  transform: rotate(-80deg);
  -webkit-animation: spin2-expand .6s ease-out 1 backwards;
  animation: spin2-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(2) a.clicked span {
  -webkit-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  transform: rotate(-80deg)
}

.flyout-wrap .flyout li:nth-of-type(3) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout li:nth-of-type(3) a:not(.clicked) span {
  -webkit-animation: spin3-contract .9s ease-out 1 backwards;
  animation: spin3-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-animation: spin3-expand .6s ease-out 1 backwards;
  animation: spin3-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(3) a.clicked span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.flyout-wrap .flyout-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

.flyout-wrap .flyout-btn span {
  display: block;
  width: 36px;
  height: 36px;
  -webkit-transition: -webkit-transform .4s ease;
  transition: transform .4s ease
}

.flyout-wrap .flyout-btn.btn-rotate span {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg)
}
.flyout-wrap .ani-expand 0 {
top:150px
}
.flyout-wrap .ani-expand 50% {
top:-10px
}
.flyout-wrap .ani-expand 70% {
top:15px
}
.flyout-wrap .ani-contract 0, .flyout-wrap .ani-expand 100% {
top:10px
}
.flyout-wrap .ani-contract 40% {
top:-25px
}
.flyout-wrap .ani-contract 100% {
top:150px
}
.flyout-wrap .ani-clicked 0 {
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
.flyout-wrap .ani-clicked 100% {
opacity:0;
-webkit-transform:scale(5);
-ms-transform:scale(5);
transform:scale(5)
}
@-webkit-keyframes 
expand { 0% {
top:50px
}
50% {
top:-60px
}
100% {
top:-55px
}
}
@keyframes 
expand { 0% {
top:50px
}
50% {
top:-60px
}
100% {
top:-55px
}
}
@-webkit-keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:50px;
}
}
@keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:50px;
}
}
@-webkit-keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:50px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:50px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:50px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:50px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@-webkit-keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(180deg);
transform:rotate(180deg)
}
}
@keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg)
}
100%, 60% {
-webkit-transform:rotate(-420deg);
transform:rotate(-420deg)
}
}
@keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-80deg);
transform:rotate(-80deg)
}
100%, 60% {
-webkit-transform:rotate(-440deg);
transform:rotate(-440deg)
}
}
@-webkit-keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-80deg);
transform:rotate(-80deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-80deg);
transform:rotate(-80deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@-webkit-keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}