*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
  
}

html, body{
  width: 100%;
  height: 100%;
  background: rgba(20,130,20,100);
  -webkit-transform: translate3d(10, 20,    10);
  -webkit-transform-style: preserve-3d;
}

.epos{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 10;
}

.eball{
  height: 400px;
  width: 400px;
  background: rgb(130,60,0);
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: inset 10px 20px 50px rgba(255,255,255,10.4), inset 25px -5px 50px rgba(0,0,0,1), inset 50px -50px 200px rgba(30,0,0,1), inset 0px -20px 20px rgba(60,0,60, 1);
}

.egrad{
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%,rgba(242,242,242,0.2) 7%,rgba(30,30,130,0.1) 30%,rgba(30,30,130,0.00) 100%);
  width: 400px;
  height: 400px;
  border-radius: 100%;
  left: 60%;
  top: 30%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(50%,-50%);
}

.ewin{
  position: absolute;
  background: linear-gradient(45deg, rgba(20,0,20,1) 0%, rgba(40,120,40,1) 100%);
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: solid 4px rgba(20,20,20,0.8);
  box-shadow: 10px -10px 10px rgba(20,20,20,0.6), 10px -10px 1px rgba(20,20,20,0.5),-10px -10px 1px rgba(20,20,20,0.5),10px 10px 1px rgba(50,50,50,0.5),-10px 10px 1px rgba(50,50,50,0.5), 8px -10px 10px rgba(20,20,20,0.6), -8px 10px 10px rgba(60,60,60,0.6), inset -10px 10px 40px rgba(200,0,20,0.05), inset 10px -10px 40px rgba(20,0,200,0.1);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.triangle{
  -webkit-transform: translate(-50%,-50%) rotate(5deg);
  transform: translate(-50%,-50%) rotate(5deg);
  position: absolute;
	width: 0px; 
	height: 0px;
  left: 50%;
  top: 60%;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 90px solid rgba(60,10,120,0.0);
  opacity: 0;
  transition: ease-in all 0.2s;
}

.textbox{
  font: 400 11px Oswald;
  text-shadow: 1px 1px 2px rgba(40,0,200,0.8);
  color: rgba(240,220,240,0.8);
  text-align: center;
  line-height: 1.1;
  -webkit-transform: translate(-50%,-50%) rotate(5deg);
  transform: translate(-50%,-50%) rotate(5deg);
  position: absolute;
  text-transform: uppercase;
	width: 48px; 
	height: 50px;
  left: 50%;
  top: 53%;
  opacity: 0;
  transition: ease-in all 0.2s;
}

.eball:hover .textbox{
   opacity: 1;
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
   transition: ease-in-out all .8s;
}

.eball:hover .triangle{
  border-top: 90px solid rgba(160,10,120,0.9);
  -webkit-transform: translate(-50%,-50%) rotate(0deg);
  transform: translate(-50%,-50%) rotate(0deg);
  opacity: 1;
   transition: ease-in all 0.8s;
}

.shadow{
  background: rgba(10,10,10,1);
  border-radius: 100%;
  height: 200px;
  width: 200px; 
  filter: blur(40px);
  -webkit-filter: blur(150px);
  position: absolute;
  margin-top: 200px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) scaleY(0.1);
  transform: translate(-50%,-50%) scaleY(0.1);
  z-index: 1;
}