.flyout-wrap {
  position: fixed;
    height: 191px;
    direction: ltr;
    bottom: 55px;
    left: 55px;
    z-index:9999999;
    }

.flyout-wrap .flyout {
  position: relative;
  margin: 0 0 1px 6px;
  line-height: 0
}

.flyout-wrap .flyout>li {
  position: absolute;
  display: block;
  height: 170px;
  background: #ff0;
  -webkit-transform-origin: 12.5px bottom;
  -ms-transform-origin: 12.5px bottom;
  transform-origin: 12.5px bottom
}

.flyout-wrap .flyout>li:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout>li:nth-of-type(2) {
  -webkit-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  transform: rotate(18deg)
}

.flyout-wrap .flyout>li:nth-of-type(3) {
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  transform: rotate(36deg)
}

.flyout-wrap .flyout>li:nth-of-type(4) {
  -webkit-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  transform: rotate(54deg)
}

.flyout-wrap .flyout>li:nth-of-type(5) {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  transform: rotate(72deg)
}

.flyout-wrap .flyout>li:nth-of-type(6) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg)
}

.flyout-wrap .flyout>li a {
  position: absolute;
  display: block;
 
  	
	 /*background: #444;*/
  

  
 
}

.flyout-wrap .flyout>li a:active {
  background: #000;
  border-color: #555
}

.flyout-wrap .flyout>li a:active span { opacity: .3 }

.flyout-wrap .flyout>li a span {
    display: block;
    position: relative;
  /*display: block;*/
  /*width: 26px;
  height: 26px;*/
  /*background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNnB4JyBoZWlnaHQ9JzE2cHgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00xMS4wNDUsOS44NzlsMS45MDYsNi4xMTRsLTQuOTQ5LTMuNzkxTDMuMDU5LDE2bDEuOS02LjExN0wwLDYuMTE0bDYuMTIzLDAuMDEzTDcuOTk4LDBsMS44NzksNi4xMkwxNiw2LjEwNEwxMS4wNDUsOS44Nzl6Jy8+PC9zdmc+DQo=) no-repeat center center;
  -webkit-background-size: 16px 16px;
  background-size: 16px 16px*/
  width: 40px;
  height: 40px;

  border: 3px solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: rgba(0,0,0,.4)0 0 5px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.5)0 0 2px 0;
  box-shadow: rgba(0,0,0,.4)0 0 5px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.5)0 0 2px 0
     }

.flyout-wrap .flyout-init li { display: none }

.flyout-wrap .flyout li a {
  top: 145px;
  -webkit-animation: contract .35s ease-out 1 backwards;
  animation: contract .35s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li a {
  top: 10px;
  -webkit-animation: expand .6s ease 1 backwards;
  animation: expand .6s ease 1 backwards
}

.flyout-wrap .flyout.fade li a.clicked {
  top: 10px;
  -webkit-animation: clicked .5s ease-out 1 forwards;
  animation: clicked .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) {
  top: 10px;
  -webkit-animation: fade .5s ease-out 1 forwards;
  animation: fade .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) span {
  opacity: .1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease
}

.flyout-wrap .flyout li:nth-of-type(1) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout li:nth-of-type(1) a:not(.clicked) span {
  -webkit-animation: spin1-contract .9s ease-out 1 backwards;
  animation: spin1-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: spin1-expand .6s ease-out 1 backwards;
  animation: spin1-expand .6s ease-out 1 backwards;

}

.flyout-wrap .flyout.fade li:nth-of-type(1) a.clicked span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout li:nth-of-type(2) a {
  -webkit-animation-delay: .16s;
  animation-delay: .16s
}

.flyout-wrap .flyout li:nth-of-type(2) a:not(.clicked) span {
  -webkit-animation: spin2-contract .9s ease-out 1 backwards;
  animation: spin2-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a {
  -webkit-animation-delay: .04s;
  animation-delay: .04s
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a span {
  -webkit-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg);
  -webkit-animation: spin2-expand .6s ease-out 1 backwards;
  animation: spin2-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(2) a.clicked span {
  -webkit-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg)
}

.flyout-wrap .flyout li:nth-of-type(3) a {
  -webkit-animation-delay: .12s;
  animation-delay: .12s
}

.flyout-wrap .flyout li:nth-of-type(3) a:not(.clicked) span {
  -webkit-animation: spin3-contract .9s ease-out 1 backwards;
  animation: spin3-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a {
  -webkit-animation-delay: .08s;
  animation-delay: .08s
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a span {
  -webkit-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  transform: rotate(-36deg);
  -webkit-animation: spin3-expand .6s ease-out 1 backwards;
  animation: spin3-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(3) a.clicked span {
  -webkit-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  transform: rotate(-36deg)
}

.flyout-wrap .flyout li:nth-of-type(4) a {
  -webkit-animation-delay: .08s;
  animation-delay: .08s
}

.flyout-wrap .flyout li:nth-of-type(4) a:not(.clicked) span {
  -webkit-animation: spin4-contract .9s ease-out 1 backwards;
  animation: spin4-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(4) a {
  -webkit-animation-delay: .12s;
  animation-delay: .12s
}

.flyout-wrap .flyout.expand li:nth-of-type(4) a span {
  -webkit-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg);
  -webkit-animation: spin4-expand .6s ease-out 1 backwards;
  animation: spin4-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(4) a.clicked span {
  -webkit-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg)
}

.flyout-wrap .flyout li:nth-of-type(5) a {
  -webkit-animation-delay: .04s;
  animation-delay: .04s
}

.flyout-wrap .flyout li:nth-of-type(5) a:not(.clicked) span {
  -webkit-animation: spin5-contract .9s ease-out 1 backwards;
  animation: spin5-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(5) a {
  -webkit-animation-delay: .16s;
  animation-delay: .16s
}

.flyout-wrap .flyout.expand li:nth-of-type(5) a span {
  -webkit-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  transform: rotate(-72deg);
  -webkit-animation: spin5-expand .6s ease-out 1 backwards;
  animation: spin5-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(5) a.clicked span {
  -webkit-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  transform: rotate(-72deg)
}

.flyout-wrap .flyout li:nth-of-type(6) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout li:nth-of-type(6) a:not(.clicked) span {
  -webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(6) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout.expand li:nth-of-type(6) a span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(6) a.clicked span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg)
}


.flyout-wrap .flyout-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 50px;
  height: 50px;
  overflow: hidden;
  text-indent: -99999px;
  background: url("/Style Library/ar-sa/New/images/decoration.png") repeat 0 0 rgba(180,151,89,1)!important;
  border: 4px solid #fff;
  border-radius: 50%;
  outline: 0;
  -webkit-box-shadow: rgba(0,0,0,.3)0 3px 8px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.3)0 0 0 1px, inset rgba(255,255,255,.3)0 1px 0 1px;
  box-shadow: rgba(0,0,0,.3)0 3px 8px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.3)0 0 0 1px, inset rgba(255,255,255,.3)0 1px 0 1px;
  cursor:pointer;
}


.flyout-wrap .flyout-btn span {
  display: block;
   line-height: 40px;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMHB4JyBoZWlnaHQ9JzIwcHgnPjxnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00yMCwxMS40MDJjMCwwLjQ1My0wLjM2NywwLjgyLTAuODIyLDAuODJIMC44MmMtMC40NTMsMC0wLjgyLTAuMzY3LTAuODItMC44MlY4LjU5OC") no-repeat center center;
  -webkit-transition: -webkit-transform .4s ease;
  transition: transform .4s ease
}

.flyout-wrap .flyout-btn.btn-rotate span {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg)
}
.flyout-wrap .ani-expand 0 {
top:150px
}
.flyout-wrap .ani-expand 50% {
top:-10px
}
.flyout-wrap .ani-expand 70% {
top:15px
}
.flyout-wrap .ani-contract 0, .flyout-wrap .ani-expand 100% {
top:10px
}
.flyout-wrap .ani-contract 40% {
top:-25px
}
.flyout-wrap .ani-contract 100% {
top:150px
}
.flyout-wrap .ani-clicked 0 {
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
.flyout-wrap .ani-clicked 100% {
opacity:0;
-webkit-transform:scale(5);
-ms-transform:scale(5);
transform:scale(5)
}
@-webkit-keyframes 
expand { 0% {
top:150px
}
50% {
top:-10px
}
70% {
top:15px
}
100% {
top:10px
}
}
@keyframes 
expand { 0% {
top:150px
}
50% {
top:-10px
}
70% {
top:15px
}
100% {
top:10px
}
}
@-webkit-keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:150px
}
}
@keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:150px
}
}
@-webkit-keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@-webkit-keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 60% {
-webkit-transform:rotate(-378deg);
transform:rotate(-378deg)
}
}
@keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 60% {
-webkit-transform:rotate(-378deg);
transform:rotate(-378deg)
}
}
@-webkit-keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 60% {
-webkit-transform:rotate(-396deg);
transform:rotate(-396deg)
}
}
@keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 60% {
-webkit-transform:rotate(-396deg);
transform:rotate(-396deg)
}
}
@-webkit-keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin4-expand { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 60% {
-webkit-transform:rotate(-414deg);
transform:rotate(-414deg)
}
}
@keyframes 
spin4-expand { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 60% {
-webkit-transform:rotate(-414deg);
transform:rotate(-414deg)
}
}
@-webkit-keyframes 
spin4-contract { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin4-contract { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin5-expand { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 60% {
-webkit-transform:rotate(-432deg);
transform:rotate(-432deg)
}
}
@keyframes 
spin5-expand { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 60% {
-webkit-transform:rotate(-432deg);
transform:rotate(-432deg)
}
}
@-webkit-keyframes 
spin5-contract { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin5-contract { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin6-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@keyframes 
spin6-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@-webkit-keyframes 
spin6-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin6-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}




/****************************************/


  
  

  
.ring-info {
   
   list-style: none;
	margin: 0;
	padding: 0;

	  z-index: 99;
		 transition: 0.5s;
    	z-index: 9999;
    	width: 100%;
    	position:absolute;
    	right: auto;
    	bottom:0px;
  	margin-left: auto;
    margin-right: auto;
    left: 50%;
    transform: translate(-50%, 0);
	/*background-color: rgba(0,0,0,.5);*/
	background: linear-gradient(180deg,rgba(0,0,0,.0005) 0,rgba(0,0,0,.8) 100%)!important;
	min-height: 76px;
}






 
 .ring-info > li {
	opacity: 1;
	transition: 0.5s;
}
.ring-info>li:hover
{
	background: none;
    border: 0px solid #fff;
    color: #fff;
    transition: 0.5s;
}
  
  .ring-info>li:hover > a
  {
	color: #fff!important;
}
      /*.ring-info>li.ring-1 {
	transform: rotate(160deg) translate(233px) rotate(-160deg);
	
}*/

/*
      .ring-info>li.ring-1 .ring-border
       {
	transform: rotate(180deg);
	
}




      .ring-info>li.ring-2 {
	transform: rotate(125deg) translate(233px) rotate(-125deg);
	
}


      .ring-info>li.ring-2 .ring-border{
	transform: rotate(315deg);
	
}

 
      .ring-info>li.ring-3 {
	transform: rotate(158deg) translate(233px) rotate(-158deg);
	
}


      .ring-info>li.ring-3 .ring-border{
	transform: rotate(45deg);
	
}

 
     

 

  
      .ring-info>li.ring-4 .ring-border {
	transform: rotate(315deg);
	
}

  
      .ring-info>li.ring-5{
	transform: rotate(340deg) translate(233px) rotate(-340deg);

}

  
      .ring-info>li.ring-5 .ring-border {
	transform: rotate(45deg);
	
}


     
 
      .ring-info>li.ring-6 {
	transform: rotate(20deg) translate(233px) rotate(-20deg);
	
}


      .ring-info>li.ring-6 .ring-border{
	transform: rotate(315deg);
	
}


      .ring-info>li.ring-7 {
	transform: rotate(0deg) translate(136px) rotate(0deg);
	
}


      .ring-info>li.ring-7 .ring-border {
	transform: rotate(315deg);
	
}

  
     
      .ring-info>li.ring-8 {
	transform: rotate(180deg) translate(136px) rotate(-180deg);
	
}

 
      .ring-info>li.ring-8 .ring-border {
	transform: rotate(45deg);
	
}
*/
  

  .ring-info> li a {
	display: table-cell;
	text-decoration: none;
	z-index: 999;
	color: #2d2d2d;
	font-family: 'fncbold';
    padding: 5px;
    box-sizing: border-box;
    font-size: 15px;
    vertical-align:middle;
    text-align:center;
    cursor:pointer;
   
    font-weight: bold;
    min-width: 130px;
    
    transition: all 1s ease-out;

    color: #ffffff;
    display: block;
    text-align: center;
    float: right;
    font-size: 14px;
    
    
    

	}
	.ring-info> li > span
	{

	padding: 24px 0 10px 0px;
    border: 0px solid #ccc;
    border-top: 0px solid #ddd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    opacity: 0.8;
    transition: all 1s ease-out;

	 background-color:transparent!important;
}
	
	.ring-info> li:nth-child(1) > span  {
   		background-color: #ffa500;
	}	

	.ring-info> li:nth-child(2) > span {
   		background-color: #f47107;
	}
	.ring-info> li:nth-child(3)> span  {
   		background-color: #aa592a;
	}
	.ring-info> li:nth-child(4) > span {
   		background-color: #f47107;
	}
	.ring-info> li:nth-child(5)> span {
   		background-color: #ffa500;
	}

 .ring-info>li a:before
 {
	    font-family: 'icomoon';
    speak: none;
    font-size: 30px;
    line-height: unset;
    vertical-align: bottom;
    content: "\e917";
    vertical-align: middle;
    transform: scale(1);
    animation: zoominoutsinglefeatured 15s forwards;
    position: inherit!important;
    vertical-align: middle!important;
    display: block;
    color: #ffffff;
    font-weight: normal;
    line-height: initial;
}


   ul.ring-info > li{
	
	z-index: 9999999;
	display:inline-block;
	transition: all 1s ease-out;
	cursor:pointer;
	padding-right: 10px;
    padding-left: 10px;

	
}

 ul.ring-info > li > span
 {
	border-radius: 5px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    width:120px;
    height:120px;
    display: inline-block;
    vertical-align:middle;
    text-align:center;
}
ul.ring-info > li:hover a:before
{
	color:white;
    transition: all 1s ease-out;
}

ul.ring-info > li:hover span
{
	color: #fff;
    background-color: rgba(197,170,115,1);
    transition: all 1s ease-out;
    
    background-color: #4b4b4d !important;
    -ms-transform: translate(2px,3px);
    -webkit-transform: translate(2px,3px);
    transform: translate(2px,3px);
}

ul.ring-info > li:hover span a
{
	    transform: rotate(0deg);
	    transition: all 1s ease-out;
}
  


 

  
/*
  .ring-info>li.ring-4{
	
	transform: rotate(380deg) translate(233px) rotate(-380deg)
}

   

  
   .ring-info>li.ring-5 {
	
	transform: rotate(415deg) translate(233px) rotate(-415deg)
}

  .ring-info>li.ring-5 .ring-border {
	transform: rotate(45deg)
}

  
   .ring-info>li.ring-6 {
	
	transform: rotate(20deg) translate(233px) rotate(-20deg)
}

    .ring-info>li.ring-6 .ring-border {
	transform: rotate(315deg)
}

  
  .ring-info>li.ring-7 {
	
	transform: rotate(0deg) translate(136px) rotate(0deg)
}

  .ring-info>li.ring-7 .ring-border {
	transform: rotate(315deg)
}

   
  .ring-info>li.ring-8 {
	
	transform: rotate(180deg) translate(136px) rotate(-180deg)
}

  .ring-info>li.ring-8 .ring-border
 {
	transform: rotate(45deg)
}
*/



/*****************************************/