.system_menu {
  position: relative;
  width: 100%;
  height: 115px;
  left: calc( 50% - 100px);
  border-radius: 50%;
}
.system_menu-button {
  position: absolute;
  top: calc( 50% - 0px);
  left: calc( 50% - 15px);
  width: 45px;
  height: 45px;
  border-radius: 0%;
  /*background-color: rgba(255, 255, 255, .3);*/
  background: url(../images/sys_icon.png)0 0 no-repeat;
  cursor: pointer;
  transition: transform .3s;
  z-index: 1;
}

.system_menu-line {
  position: absolute;
  display: block;
  
}

.system_menu-button:hover {
  transform: scale(1.2);
  background: url(../images/sys_icon_h.png) 0 0 no-repeat;
}
  .system_menu-line:before, .system_menu-line:after {
    content: "";
    position: absolute;
    display: block;
    
  }
  .system_menu-line:before {
    top: -11px;
  }
  .system_menu-line:after {
    top: 11px;
  }
.system_active {
  display: block;
  position: absolute;
} 
.system_active:after {
  content: "";
  display: block;
  position: absolute;
}
.system_rotate {
  transform: rotate(360deg);
}
 /*---- MENU ITEM BACKGROUND ----*/
.system_menu-item {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .3);
  opacity: 0;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  cursor: pointer;
  transition: all .3s;
} /* --- HOVER EFFECT --- */
  .system_menu-item:hover {
    background-color: rgba(255, 255, 255, .8);
  }
  .system_menu-item:hover .system_donut, .system_menu-item:hover .system_square {
    border-color: rgba(1, 1, 1, .7);
  }
  .system_menu-item:hover .system_triangle {
    border-color: transparent transparent rgba(1, 1, 1, .7) transparent; 
  }
  .system_menu-item:hover .system_vk, .system_menu-item:hover .system_twitter, .system_menu-item:hover .system_facebook, .system_menu-item:hover .system_google {
    color: rgba(1, 1, 1, .7);
  }
  .system_menu-item:hover .system_cross, .system_menu-item:hover .system_cross:after {
    background-color: rgba(1, 1, 1, .7);
  }
 /* --- ICONS --- */
.system_first {
  left: calc(50% - 11px);
  top: 0;
  opacity: 1;
  transform: rotate(360deg);
}
.system_first span {
   width:30px; 
   height:30px; 
 }
  .system_donut {
      display: block;
      position: absolute;
      width: 34px;
      height: 34px;
      top: 8px;
      left: 8px;
      border-radius: 50%;
      border: 5px solid rgba(255, 255, 255, .7);
  }
.system_second {
  left: 0;
  top: calc(50% + 10px);
  left: 9px;
  opacity: 1;
  transform: rotate(360deg);
}
  .system_triangle {
    display: block;
    position: absolute;
    top: 7px;
    left: 9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 32px 16px;
    border-color: transparent transparent rgba(255, 255, 255, .7) transparent;
 }
.system_third {
  left: calc(100% - 35px);
  top: calc(50% + 10px);
  opacity: 1;
  transform: rotate(360deg);
}
  .system_square {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
    border: 5px solid rgba(255, 255, 255, .7);
  }
.system_fourth {
  left: calc(50% - 25px);
  top: calc(100% - 50px);
  opacity: 1;
  transform: rotate(360deg);
}
  .system_cross {
     display: block;
     position: absolute;
     top: 23px;
     left: 8px;
     width: 34px;
     height: 5px;
     border-radius: 3px;
     background-color: rgba(255, 255, 255, .7);
     transform: rotate(45deg);
  } .system_cross:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 34px;
     height: 5px;
     border-radius: 3px;
     background-color: rgba(255, 255, 255, .7);
     transform: rotate(90deg);
  }
.system_fifth {
  left: 126px;
  top: 126px;
  opacity: 1;
  transform: rotate(360deg);
}
 .system_facebook {
   color: rgba(255, 255, 255, .7);
   line-height: 50px;
   font-size: 40px;
   font-weight: bold;
   font-family: sans-serif;
 }
 
.system_sixth {
  left: 22px;
  top: 126px;
  opacity: 1;
  transform: rotate(360deg);
}
 .system_google {
   position: absolute;
   color: rgba(255, 255, 255, .7);
   line-height: 50px;
   font-size: 40px;
   font-weight: bold;
   font-family: serif;
   top: -6px;
   left: 6px;
 }
.system_seven {
  left: 30px;
  top: 20px;
  opacity: 1;
  transform: rotate(360deg);
}
 .system_vk {
   font-family: 'Permanent Marker', cursive;
   position: absolute;
   color: rgba(255, 255, 255, .7);
   line-height: 50px;
   font-size: 37px;
   left: 3px;
   top: -3px;
 }
.system_eight {
  left: 136px;
  top: 20px;
  opacity: 1;
  transform: rotate(360deg);
}
 .system_twitter {
   color: rgba(255, 255, 255, .7);
   line-height: 50px;
   font-size: 40px;
   font-weight: bold;
   font-family: sans-serif;
   display: block;
 }
 
 #content_2 li{display:inline-block;width:300px;}