*{margin:0;padding:0;}
ul{list-style:none}
.container{
	position:absolute;
	bottom:10px;
	left:10px;
	width:50px;
	height:50px;
	box-shadow:0 0 10px rgba(0,0,0,0.7);
	border-radius:25px;
}
.circle{
	width:40px;
	height:40px;
	position:absolute;
	top:5px;
	left:5px;
	text-align:center;
	font-size:30px;
	line-height:40px;
	color:#fff;
	cursor:pointer;
	border-radius:20px;
	background-image:-webkit-linear-gradient(#E85738, #CB2C16);
	-webkit-transform: rotate(45deg);
	-webkit-transform-style:preserve-3d;
	-webkit-transition: all 0.2s linear;
}
.circle:active:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none; 
  -webkit-border-radius: 20px;
}
.items li{
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: -1;
	display: block;
	height: 26px;
	width: 26px;
	color: white;
	text-align: center;
	line-height: 26px;
	font-size: 18px;
	background-image: -webkit-linear-gradient(#433f3c, #44403d);
	-webkit-box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px black, 0 0 0 5px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 13px;
	-webkit-transform-style: preserve-3d;
}
#menu:checked ~ .items li:nth-child(1) {
  -webkit-animation-name: appear-1;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 20ms;
}
#menu:not(:checked) ~ .items li:nth-child(1) {
  -webkit-animation-name: disappear-1;
  -webkit-animation-duration: 387.5ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: translate3d(228px, -30px, 0px) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(198px, -26px, 0px);
  }
}
@-webkit-keyframes disappear-1 {
  0% {
    -webkit-transform: translate3d(198px, -26px, 0px) rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(228px, -30px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}

#menu:checked ~ .items li:nth-child(2) {
  -webkit-animation-name: appear-2;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 40ms;
}
#menu:not(:checked) ~ .items li:nth-child(2) {
  -webkit-animation-name: disappear-2;
  -webkit-animation-duration: 411.125ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: translate3d(213px, -89px, 0px) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(185px, -77px, 0px);
  }
}
@-webkit-keyframes disappear-2 {
  0% {
    -webkit-transform: translate3d(185px, -77px, 0px) rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(213px, -89px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}


#menu:checked ~ .items li:nth-child(3) {
  -webkit-animation-name: appear-3;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 60ms;
}
#menu:not(:checked) ~ .items li:nth-child(3) {
  -webkit-animation-name: disappear-3;
  -webkit-animation-duration: 443.019ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: ranslate3d(183px, -140px, 0px) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(159px, -122px, 0px);
  }
}
@-webkit-keyframes disappear-3 {
  0% {
    -webkit-transform: translate3d(159px, -122px, 0px) rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(183px, -140px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}



#menu:checked ~ .items li:nth-child(4) {
  -webkit-animation-name: appear-4;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 80ms;
}
#menu:not(:checked) ~ .items li:nth-child(4) {
  -webkit-animation-name: disappear-4;
  -webkit-animation-duration: 486.075ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-4 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: translate3d(140px, -183px, 0px) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(122px, -159px, 0px);
  }
}
@-webkit-keyframes disappear-4 {
  0% {
    -webkit-transform: translate3d(122px, -159px, 0px) rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(140px, -183px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}



#menu:checked ~ .items li:nth-child(5) {
  -webkit-animation-name: appear-5;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 100ms;
}
#menu:not(:checked) ~ .items li:nth-child(5) {
  -webkit-animation-name: disappear-5;
  -webkit-animation-duration: 544.202ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-5 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: translate3d(89px, -213px, 0px) rotateZ(0deg)
  }
  100% {
    -webkit-transform: translate3d(77px, -185px, 0px);
  }
}
@-webkit-keyframes disappear-5 {
  0% {
    -webkit-transform: translate3d(77px, -185px, 0px) rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(89px, -213px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}


#menu:checked ~ .items li:nth-child(6) {
  -webkit-animation-name: appear-6;
  -webkit-animation-duration: 240ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 120ms;
}
#menu:not(:checked) ~ .items li:nth-child(6) {
  -webkit-animation-name: disappear-6;
  -webkit-animation-duration: 544.202ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes appear-6 {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    -webkit-transform: translate3d(30px, -228px, 0px) rotateZ(0deg)
  }
  100% {
    -webkit-transform: translate3d(26px, -198px, 0px);
  }
}
@-webkit-keyframes disappear-6 {
  0% {
    -webkit-transform: translate3d(26px, -198px, 0px); rotateZ(0deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
  }
  70% {
    -webkit-transform: translate3d(30px, -228px, 0px) rotateZ(360deg);
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
  }
}