.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(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/Logo_FCTM.png) 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:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/eca.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.crash {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/edeca.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.analytics {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/ecg.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.portal {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/iret.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.console {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/icomvis.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.mbaas {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/inisefor.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.aso {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/ovsicori.jpg);-moz-transition: all 100ms linear;-o-transition: all 100ms linear;-webkit-transition: all 100ms linear;transition: all 100ms linear;}
.circle-menu a.aso1 {background:white; border: solid 2px #0060a9;background-image: url(http://www.fctm.una.ac.cr/decanato_sitio_2020/images/logos/cinat.jpg);-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:#0060a9; -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:#0060a9;}
.circle-menu a.analytics:hover {background:#0060a9;}
.circle-menu a.portal:hover {background:#0060a9;}
.circle-menu a.console:hover {background:#0060a9;}
.circle-menu a.mbaas:hover {background:#0060a9;}
.circle-menu a.aso:hover {background:#0060a9;}
.circle-menu a.aso1:hover {background:#0060a9;}*/


 /* 360/7= 51 roughly so for 7 elements rotate the element every 51deg. 12em translate is half the container */
.circle-menu .push { transform: rotate(45deg) translate(12em) rotate(-45deg); -webkit-transform: rotate(45deg) translate(12em) rotate(-45deg); -ms-transform: rotate(45deg) translate(12em) rotate(-45deg);}
.circle-menu .crash{ transform: rotate(90deg) translate(12em) rotate(-90deg); -webkit-transform: rotate(90deg) translate(12em) rotate(-90deg); -ms-transform: rotate(90deg) translate(12em) rotate(-90deg);}
.circle-menu .analytics { transform: rotate(135deg) translate(12em) rotate(-135deg); -webkit-transform: rotate(135deg) translate(12em) rotate(-135deg); -ms-transform: rotate(135deg) translate(12em) rotate(-135deg);}
.circle-menu .portal { transform: rotate(180deg) translate(12em) rotate(-180deg); -webkit-transform: rotate(180deg) translate(12em) rotate(-180deg); -ms-transform:rotate(180deg) translate(12em) rotate(-180deg);}
.circle-menu .console { transform: rotate(225deg) translate(12em) rotate(-225deg); -webkit-transform: rotate(225deg) translate(12em) rotate(-225deg); -ms-transform: rotate(225deg) translate(12em) rotate(-225eg);}
.circle-menu .mbaas { transform: rotate(270deg) translate(12em) rotate(-270deg); -webkit-transform: rotate(270deg) translate(12em) rotate(-270deg); -ms-transform: rotate(270deg) translate(12em) rotate(-270deg);}
.circle-menu .aso { transform: rotate(315deg) translate(12em) rotate(-315deg); -webkit-transform: rotate(315deg) translate(12em) rotate(-315deg); -ms-transform: rotate(315deg) translate(12em) rotate(-315deg);}
.circle-menu .aso1 { transform: rotate(360deg) translate(12em) rotate(-360deg); -webkit-transform: rotate(360deg) translate(12em) rotate(-360deg); -ms-transform: rotate(360deg) translate(12em) rotate(-360deg);}

.circle-menu a.push span {
	display: none;
}

.circle-menu a.push:hover span {
	display: block;
	position: relative;
	top: -10px;
	left: 90px;
	width: 230px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.crash span {
	display: none;
}

.circle-menu a.crash:hover span {
	display: block;
	position: relative;
	top: 30px;
	left: 100px;
	width: 320px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.analytics span {
	display: none;
}

.circle-menu a.analytics:hover span {
	display: block;
	position: relative;
	top: -10px;
	left: -220px;
	width: 230px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.portal span {
	display: none;
}

.circle-menu a.portal:hover span {
	display: block;
	position: relative;
	top: -20px;
	left: -170px;
	width: 180px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.console span {
	display: none;
}

.circle-menu a.console:hover span {
	display: block;
	position: absolute;
	top: -20px;
	left: -220px;
	width: 230px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.mbaas span {
	display: none;
}

.circle-menu a.mbaas:hover span {
	display: block;
	position: absolute;
	top: -20px;
	left: 100px;
	width: 320px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.aso span {
	display: none;
}

.circle-menu a.aso:hover span {
	display: block;
	position: relative;
	top: -20px;
	left: 90px;
	width: 220px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}

.circle-menu a.aso1 span {
	display: none;
}

.circle-menu a.aso1:hover span {
	display: block;
	position: relative;
	top: -20px;
	left: 80px;
	width: 180px;
	margin: 0px;
	padding: 10px;
	color: #0060a9;
	font-weight: normal;
	background: #e5e5e5;
	text-align: center;
	border: 1px solid #666;
}