.absolute-center, .radial, .radial .btn .fa, .radial .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

.radial {
  width: 100%;
  height: 100%;
}

.radial .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -10;
  cursor: pointer;
  -webkit-transition: opacity 1s, z-index 0.9s, -webkit-transform 1s; 
  transition: opacity 1s, z-index 0.3s, -webkit-transform 1s; 
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  -webkit-transform: translateX(0); 
  transform: translateX(0);
}

.radial .btn.trigger {
  opacity: 1;
  top:10px;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: 
  -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, 
  -webkit-transform 0.3s;
}

.radial .btn.img {
  opacity: 1;
  z-index: 50;
  cursor: pointer;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

.radial .btn.trigger:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.radial .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}

.radial .btn.trigger:hover .line:before, .radial .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
}

.radial .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.radial.active .btn-img {
  opacity: 1;
  z-index: 50;
}

.radial .btn-img {
  opacity: 1;
  z-index: 50;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
		  		    


.rotater:nth-child(1) {
  -webkit-transform: rotate(115deg);
          transform: rotate(115deg);   
}

.radial.active .rotater:nth-child(1) .btn-img {
  -webkit-transform: translateY(-20em) rotate(-115deg);
          transform: translateY(-20em) rotate(-115deg);
}

.rotater:nth-child(2) {
  -webkit-transform: rotate(157deg);
          transform: rotate(157deg);
}

.radial.active .rotater:nth-child(2) .btn-img {
  -webkit-transform: translateY(-20em) rotate(-157deg);
          transform: translateY(-20em) rotate(-157deg);
}

.rotater:nth-child(3) {
  -webkit-transform: rotate(203deg);
          transform: rotate(203deg);
}

.radial.active .rotater:nth-child(3) .btn-img {
  -webkit-transform: translateY(-20em) rotate(-203deg);
          transform: translateY(-20em) rotate(-203deg);
}

.rotater:nth-child(4) {
  -webkit-transform: rotate(245deg);
          transform: rotate(245deg);
}

.radial.active .rotater:nth-child(4) .btn-img {
  -webkit-transform: translateY(-20em) rotate(-245deg);
          transform: translateY(-20em) rotate(-245deg);
}