.circle-menu li {
  list-style: none;
  display: inline;
}

.circle-menu {
    position: relative;
    width: 24em;
    height: 24em;
    border: dashed 1px #53575a;
    border-radius: 50%;
    margin: 5em auto 7em;
  background: url(../img/icon-image/Hipower-logo-1.svg) no-repeat;
  background-position: center center;
  background-size: 15em;
  max-size: 120px;
}
.circle-menu a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 8em; height: 8em;
  padding-top: 2.7em;
  line-height:1.2em;
  margin: -3.5em;
  -moz-border-radius: 4em;
  -webkit-border-radius: 4em;
  border-radius: 4em;
  text-align: center;
  text-decoration: none;
  color: transparent;
  box-sizing: border-box;
  font-family: sans-serif;
}

.circle-menu a:hover {
  color: #fff;
}

.circle-menu a.push {background:#ffffff; border: solid 2px #84BD00;background-image: url( );-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.crash {background:#ffffff; border: solid 2px #84BD00;background-image: url();-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.analytics {background:#ffffff; border: solid 2px #84BD00;background-image: url();-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.portal {background:#ffffff; border: solid 2px #84BD00;background-image: url(.);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.console {background:#ffffff; border: solid 2px #84BD00;background-image: url();-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.mbaas {background:#ffffff; border: solid 2px #84BD00;background-image: url(g);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.aso {background:#ffffff; border: solid 2px #84BD00;Motor driver hardware design;background-image: url();-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}

.circle-menu a.push:hover {background:#84BD00; -moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.crash:hover {background:#84BD00;}
.circle-menu a.analytics:hover {background:#84BD00;}
  .circle-menu a.portal:hover {background:#84BD00;}
.circle-menu a.console:hover {background:#84BD00;}
.circle-menu a.mbaas:hover {background:#84BD00;}
.circle-menu a.aso:hover {background:#84BD00;}


 /* 360/7= 51 roughly so for 7 elements rotate the element every 51deg. 12em translate is half the container */
.circle-menu .push { transform: rotate(300deg) translate(12em) rotate(-300deg); -webkit-transform: rotate(300deg) translate(12em) rotate(-300deg); -ms-transform: rotate(300deg) translate(12em) rotate(-300deg);}
.circle-menu .crash{ transform: rotate(3600deg) translate(12em) rotate(-360deg); -webkit-transform: rotate(360deg) translate(12em) rotate(-360deg); -ms-transform: rotate(360deg) translate(12em) rotate(-360deg);}
.circle-menu .analytics { transform: rotate(60deg) translate(12em) rotate(-60deg); -webkit-transform: rotate(60deg) translate(12em) rotate(-60deg); -ms-transform: rotate(60deg) translate(12em) rotate(-60deg);}
.circle-menu .portal { transform: rotate(120deg) translate(12em) rotate(-120deg); -webkit-transform: rotate(120deg) translate(12em) rotate(-120deg); -ms-transform:rotate(120deg) translate(12em) rotate(-120deg);}
.circle-menu .console { transform: rotate(180deg) translate(12em) rotate(-180deg); -webkit-transform: rotate(180deg) translate(12em) rotate(-180deg); -ms-transform: rotate(180deg) translate(12em) rotate(-180eg);}
.circle-menu .mbaas { transform: rotate(240deg) translate(12em) rotate(-240deg); -webkit-transform: rotate(240deg) translate(12em) rotate(-240deg); -ms-transform: rotate(240deg) translate(12em) rotate(-240deg);}