.ringMenu {
margin: -3% 0 0 31%;
width: 0;
display: block;
float: left;
/* clear: none; */
}
.navbar-default .ringMenu ul {
list-style: none;
position: relative;
display: block;
width: 200px;
height: 160px;
background: url(img/logo.png) no-repeat scroll right/ 75% 85%;
}

.ringMenu ul li {
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
display: block;
}

.ringMenu ul li a {
padding: 0 1% 0 0;
display: block;
width: 160px;
height: 160px;
text-align: center;
line-height: 130px;
border-radius: 50px;
}

.ringMenu ul li.sub-ring {
bottom: 0;
display: block;
left: 30px;
opacity: 0;
position: absolute;
right: 0px;
top: 20px;
transition: all 0.3s ease-in-out 0s;
z-index: 1;
margin: -25px 0 0 35px;
}
.ringMenu:hover ul .sub-ring{opacity: 1;}

.ringMenu ul li.sub-ring a{
display: block;
width: 110px;
height: 130px;
/* background: url(img/submenuring.png) no-repeat scroll left/ 95% 80%; */
font-family:arial narrow;
font-weight: 550;
font-size: 1.8rem;
}

/* top ring */

.ringMenu:hover ul li.top {
display: block;
top: 80px;
left: -230px;
background: url(img/aboutus.png) no-repeat scroll left/ 65% 85%;
}

.ringMenu:hover ul li.top a {
color: #fff;
text-decoration: none;
}

.ringMenu:hover ul li.top a:hover {
color: #ccc;
}

/* Bottom ring */
.ringMenu:hover ul li.bottom {

bottom: -280px;
left: -50px;
background: url(img/fanart.png) no-repeat scroll left/ 55% 35%;
padding: 19rem 0 0 0;
font-weight: 400;
font-size: 1.8rem;
}

.ringMenu:hover ul li.bottom a {
color: #fff;
text-decoration: none;
}

.ringMenu:hover ul li.bottom a:hover {
color: #ccc;
}

/* Right Ring */

.ringMenu:hover ul li.right {
bottom: -280px;
left: 95px;
padding: 19rem 0 0 0;
background: url(img/community.png) no-repeat scroll left/155% 35%;
}

.ringMenu:hover ul li.right a {
color: #fff;
text-decoration: none;
}

.ringMenu:hover ul li.right a:hover {
color: #ccc;
}

/*Right2 Ring */

.ringMenu:hover ul li.right2{
top: 146px;
left: 185px;
}

.ringMenu:hover ul li.right2 a {
background: url(img/ourgames.png) no-repeat scroll right/180% 90%;
color: #fff;
text-decoration: none;
padding: 20px 0 0 0;

}

.ringMenu:hover ul li.right2 a:hover {
color: #ccc;
}

/*Left Ring */

.ringMenu:hover ul li.left {
left: -150px;
bottom: -200px;
background: url(img/news.png) no-repeat scroll left/ 57% 40%;
padding: 13rem 0 0 0;
}

.ringMenu:hover ul li.left a {
color: #fff;
text-decoration: none;
}

.ringMenu:hover ul li.left a:hover {
color: #ccc;
}

/* Left 2 Ring */

.ringMenu:hover ul li.left2 {
display: block;
top: 86px;
right: -230px;
padding: 0 0 10px 26rem;
background: url(img/support.png) no-repeat scroll right/ 66% 90%;

}

.ringMenu:hover ul li.left2 a {
color: #fff;
text-decoration: none;
}

.ringMenu:hover ul li.left2 a:hover {
color: #ccc;
}