.buttonbox {
  height: 490px;
}
.multibutton {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items: center;
  /* transform:skew(45deg, -15deg); */
  height:650px;
  transform-origin: top center;
  transform:scale(0.75);
}

.mbutton:before,
.mbutton:after {
  content:'';
  display:block;
  z-index:-1;
  background-color:#009900;
}
.mbutton,
.mbutton:before,
.mbutton:after {
  width: 100px;
  height: 100px;
  border-radius:50%;
  position:absolute;
}
.mbutton.child {
  box-shadow: -1px 1px 0px #009900;
}
.mbutton.child:after {
  box-shadow: -2px 2px 0px #009900;
}
.mbutton {
  background-color: #00cc00;
  margin-bottom:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.mbutton.child:before {
  animation: button-shadow 6s 2s infinite;
}
.mbutton.main {
  width: 150px;
  height: 150px;
  background-color: #009900;
  position:relative;
  position:absolute;
  bottom:calc(50% - 75px);
  box-shadow: -1px 1px 0px #006600;
  animation: buttonMain 6s 2s infinite;
}
.mbutton.main:before {
  width: 150px;
  height: 150px;
  box-shadow: -10px 10px 10px rgba(0,0,0,0.5);

}
.mbutton.main:after {
  width: 150px;
  height: 150px;
  box-shadow: -2px 2px 0px #006600;
}
.mbutton-4 {
  bottom:calc(50% - 50px);
  animation: button4 6s 2s infinite;
}
.mbutton-3 {
  bottom:calc(50% - 50px);
  animation: button3 6s 2s infinite;
}
.mbutton-2 {
  bottom:calc(50% - 50px);
  animation: button2 6s 2s infinite;
}
.mbutton-1 {
  bottom:calc(50% - 50px);
  animation: button1 6s 2s infinite;
}
.mbutton.main .open,
.mbutton.main .close {
  position:absolute;
  width:100px;
  height:100px;
  transition-property: all;
}
.mbutton.main .open {
  opacity:100;
  transform: rotate(0deg);
  transition-property: opacity;
  animation: buttonOpen 6s 2s infinite;
}
.mbutton.main .close {
  opacity: 0;
  transform: rotate(-90deg);
  animation: buttonClose 6s 2s infinite;
}

.main svg,
.child svg {
  fill: #fff;

}
.child svg {
  width:65px;
  height:65px;
}

@keyframes buttonOpen {
  0%   {opacity: 100; transform: rotate(0deg);}
  5%  {opacity: 0; transform: rotate(90deg);}
  55%  {opacity: 0; transform: rotate(90deg);}
  60%  {opacity: 100; transform: rotate(0deg);}
}
@keyframes buttonClose {
  0%   {opacity: 0; transform: rotate(-90deg);}
  5%  {opacity: 100; transform: rotate(0deg);}
  55%  {opacity: 100; transform: rotate(0deg);}
  60%  {opacity: 0; transform: rotate(-90deg);}
}
@keyframes button4 {
  0% {bottom: calc(50% - 50px);}
  5% {bottom:530px;}
  55% {bottom:530px;}
  60% {bottom: calc(50% - 50px);}
}
@keyframes button3 {
  0% {bottom: calc(50% - 50px);}
  5% {bottom:410px;}
  55% {bottom:410px;}
  60% {bottom: calc(50% - 50px);}
}
@keyframes button2 {
  0% {bottom: calc(50% - 50px);}
  5% {bottom:290px;}
  55% {bottom:290px;}
  60% {bottom: calc(50% - 50px);}
}
@keyframes button1 {
  0% {bottom: calc(50% - 50px);}
  5% {bottom:170px;}
  55% {bottom:170px;}
  60% {bottom: calc(50% - 50px);}
}
@keyframes buttonMain {
  0% {bottom:calc(50% - 75px);}
  5% {bottom:0;}
  55% {bottom:0;}
  60% {bottom:calc(50% - 75px);}
}
@keyframes button-shadow {
  0% {box-shadow:none;}
  5% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  55% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  60% {box-shadow:none;}
}
@keyframes button2-shadow {
  0% {box-shadow:none;}
  5% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  55% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  60% {box-shadow:none;}
}
@keyframes button1-shadow {
  0% {box-shadow:none;}
  5% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  55% {box-shadow: -10px 10px 10px rgba(0,0,0,0.5);}
  60% {box-shadow:none;}
}