.coin p{
  font-family: georgia;
  font-style: italic;
  position: absolute;
  font-size: 28px;
  z-index: 700;
  top: -19px;
  left: 19px;
  }

.coin.bronze p{  color: rgba(223,182,103,1);}
.coin.silver p{  color: rgba(160,160,160,1);}
.coin.gold p{  color: rgba(242,215,50,1);}

.coin{
  cursor: pointer;
  content: "";
  width: 32px; 
  height: 32px;
  display: inline-block;
  position: relative;
  margin: 5px;
  top: 6px;
  border-radius: 50px;
  z-index: 500;
  box-shadow:  2px 2px 2px 1px rgba(0, 0, 0, .1);
  }

.coin:after{
  content: "";
  width: 22px; 
  height: 22px;
  display: block;
  top: 4px;
  left: 4px;
  position: absolute;
  border-radius: 50px;
  z-index: 600;
  }

.coin:before{
  content: "";
  width: 30px; 
  height: 30px;
  display: block;
  position: absolute;
  border-radius: 50px;
  z-index: 500;
  }

.coin:hover{
  top: -1px;
  transition: all .5s ease-in-out;
  box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, .2);
  }

.bronze{
  background: linear-gradient(45deg,  rgba(223,182,103,1) 0%,rgba(249,243,232,1) 56%,rgba(231,192,116,1) 96%); 
  }

.bronze:before{
  background: linear-gradient(135deg,  #d19c35 0%,#f7e6c5 50%,#e8b558 100%);
  border: 1px solid #e6b86a;
  }

.bronze:after{
  background: linear-gradient(45deg,  rgba(223,182,103,1) 0%,rgba(249,243,232,1) 56%,rgba(231,192,116,1) 96%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(209,156,53,0.3);
  border-right: 1px solid rgba(209,156,53,0.5);
  box-shadow: inset 0px 0px 2px 2px rgba(153, 106, 26, .05);
  }

.bronze:hover:after{
  background: linear-gradient(45deg,  rgba(223,182,103,1) 0%,rgba(249,243,232,1) 41%,rgba(231,192,116,1) 96%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(209,156,53,0.3);
  border-right: 1px solid rgba(209,156,53,0.5);
  box-shadow: inset 0px 0px 2px 2px rgba(153, 106, 26, .05);
  }

.silver{
  background: linear-gradient(45deg,  rgba(160,160,160,1) 0%,rgba(232,232,232,1) 56%);
  }

.silver:before{
  background: linear-gradient(45deg,  rgba(181,181,181,1) 0%,rgba(252,252,252,1) 56%,rgba(232,232,232,1) 96%);
  border: 1px solid rgba(181,181,181,1);
  }


.silver:after{
  background: linear-gradient(45deg,  rgba(181,181,181,1) 0%,rgba(252,252,252,1) 56%,rgba(232,232,232,1) 96%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(160,160,160,0.3);
  border-right: 1px solid rgba(160,160,160,0.5);
  box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
  }

.silver:hover:after{
  background: linear-gradient(45deg,  rgba(181,181,181,1) 0%,rgba(252,252,252,1) 38%,rgba(232,232,232,1) 96%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(160,160,160,0.3);
  border-right: 1px solid rgba(160,160,160,0.5);
  box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
  }

.gold{
background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
}

.gold:before{
  background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
  border: 1px solid rgba(242,215,12,1);
  }


.gold:after{
  background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(242,215,12,0.3);
  border-right: 1px solid rgba(242,215,12,0.3);
  box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
  }

.gold:hover:after{
  background: linear-gradient(45deg,  rgba(242,215,12,1) 3%,rgba(255,255,255,1) 39%,rgba(252,235,0,1) 100%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(242,215,12,0.3);
  border-right: 1px solid rgba(242,215,12,0.3);
  box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
  }