.coin {
   position: relative;
   width: 100px;
   height: 100px;
   margin: 50px auto;
   transform-style: preserve-3d;
   animation: rotate3d 8s linear infinite;
   transition: all 0.3s;
}
 .coin__front, .coin__back {
   position: absolute;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   overflow: hidden;
   background-color: #00c8ff;
}
 .coin__front:after, .coin__back:after {
   content: "";
   position: absolute;
   left: -50px;
   bottom: 100%;
   display: block;
   height: 66.6666666667px;
   width: 200px;
   background: #fff;
   opacity: 0.3;
   animation: shine linear 4s infinite;
}
 .coin__front {
   background-image: url("../images/icons/logo/photoshop.png");
   background-size: cover;
   transform: translateZ(10px);
}
 .coin__back {
   background-image: url("../images/icons/logo/photoshop.png");
   background-size: cover;
   transform: translateZ(-10px) rotateY(180deg);
}
 .coin__edge div:nth-child(1) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(94.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(2) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(99deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(3) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(103.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(4) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(108deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(5) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(112.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(6) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(117deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(7) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00090c;
   transform: translateY(48.0375px) translateX(40px) rotateZ(121.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(8) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00151b;
   transform: translateY(48.0375px) translateX(40px) rotateZ(126deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(9) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #002029;
   transform: translateY(48.0375px) translateX(40px) rotateZ(130.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(10) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #002b36;
   transform: translateY(48.0375px) translateX(40px) rotateZ(135deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(11) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #003543;
   transform: translateY(48.0375px) translateX(40px) rotateZ(139.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(12) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #003f50;
   transform: translateY(48.0375px) translateX(40px) rotateZ(144deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(13) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00485c;
   transform: translateY(48.0375px) translateX(40px) rotateZ(148.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(14) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #005268;
   transform: translateY(48.0375px) translateX(40px) rotateZ(153deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(15) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #005b74;
   transform: translateY(48.0375px) translateX(40px) rotateZ(157.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(16) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00637e;
   transform: translateY(48.0375px) translateX(40px) rotateZ(162deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(17) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #006b89;
   transform: translateY(48.0375px) translateX(40px) rotateZ(166.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(18) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #007393;
   transform: translateY(48.0375px) translateX(40px) rotateZ(171deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(19) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #007b9d;
   transform: translateY(48.0375px) translateX(40px) rotateZ(175.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(20) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0082a6;
   transform: translateY(48.0375px) translateX(40px) rotateZ(180deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(21) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0089ae;
   transform: translateY(48.0375px) translateX(40px) rotateZ(184.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(22) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #008fb7;
   transform: translateY(48.0375px) translateX(40px) rotateZ(189deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(23) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0095bf;
   transform: translateY(48.0375px) translateX(40px) rotateZ(193.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(24) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #009bc6;
   transform: translateY(48.0375px) translateX(40px) rotateZ(198deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(25) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00a1cd;
   transform: translateY(48.0375px) translateX(40px) rotateZ(202.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(26) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00a6d3;
   transform: translateY(48.0375px) translateX(40px) rotateZ(207deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(27) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00aad9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(211.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(28) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00afdf;
   transform: translateY(48.0375px) translateX(40px) rotateZ(216deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(29) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00b3e4;
   transform: translateY(48.0375px) translateX(40px) rotateZ(220.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(30) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00b7e9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(225deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(31) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00baed;
   transform: translateY(48.0375px) translateX(40px) rotateZ(229.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(32) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00bdf1;
   transform: translateY(48.0375px) translateX(40px) rotateZ(234deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(33) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00bff4;
   transform: translateY(48.0375px) translateX(40px) rotateZ(238.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(34) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c2f7;
   transform: translateY(48.0375px) translateX(40px) rotateZ(243deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(35) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c4f9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(247.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(36) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c5fb;
   transform: translateY(48.0375px) translateX(40px) rotateZ(252deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(37) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c6fd;
   transform: translateY(48.0375px) translateX(40px) rotateZ(256.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(38) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c7fe;
   transform: translateY(48.0375px) translateX(40px) rotateZ(261deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(39) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c8ff;
   transform: translateY(48.0375px) translateX(40px) rotateZ(265.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(40) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c8ff;
   transform: translateY(48.0375px) translateX(40px) rotateZ(270deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(41) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c8ff;
   transform: translateY(48.0375px) translateX(40px) rotateZ(274.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(42) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c7fe;
   transform: translateY(48.0375px) translateX(40px) rotateZ(279deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(43) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c6fd;
   transform: translateY(48.0375px) translateX(40px) rotateZ(283.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(44) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c5fb;
   transform: translateY(48.0375px) translateX(40px) rotateZ(288deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(45) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c4f9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(292.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(46) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00c2f7;
   transform: translateY(48.0375px) translateX(40px) rotateZ(297deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(47) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00bff4;
   transform: translateY(48.0375px) translateX(40px) rotateZ(301.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(48) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00bdf1;
   transform: translateY(48.0375px) translateX(40px) rotateZ(306deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(49) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00baed;
   transform: translateY(48.0375px) translateX(40px) rotateZ(310.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(50) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00b7e9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(315deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(51) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00b3e4;
   transform: translateY(48.0375px) translateX(40px) rotateZ(319.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(52) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00afdf;
   transform: translateY(48.0375px) translateX(40px) rotateZ(324deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(53) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00aad9;
   transform: translateY(48.0375px) translateX(40px) rotateZ(328.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(54) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00a6d3;
   transform: translateY(48.0375px) translateX(40px) rotateZ(333deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(55) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00a1cd;
   transform: translateY(48.0375px) translateX(40px) rotateZ(337.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(56) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #009bc6;
   transform: translateY(48.0375px) translateX(40px) rotateZ(342deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(57) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0095bf;
   transform: translateY(48.0375px) translateX(40px) rotateZ(346.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(58) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #008fb7;
   transform: translateY(48.0375px) translateX(40px) rotateZ(351deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(59) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0089ae;
   transform: translateY(48.0375px) translateX(40px) rotateZ(355.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(60) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #0082a6;
   transform: translateY(48.0375px) translateX(40px) rotateZ(360deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(61) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #007b9d;
   transform: translateY(48.0375px) translateX(40px) rotateZ(364.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(62) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #007393;
   transform: translateY(48.0375px) translateX(40px) rotateZ(369deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(63) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #006b89;
   transform: translateY(48.0375px) translateX(40px) rotateZ(373.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(64) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00637e;
   transform: translateY(48.0375px) translateX(40px) rotateZ(378deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(65) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #005b74;
   transform: translateY(48.0375px) translateX(40px) rotateZ(382.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(66) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #005268;
   transform: translateY(48.0375px) translateX(40px) rotateZ(387deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(67) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00485c;
   transform: translateY(48.0375px) translateX(40px) rotateZ(391.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(68) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #003f50;
   transform: translateY(48.0375px) translateX(40px) rotateZ(396deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(69) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #003543;
   transform: translateY(48.0375px) translateX(40px) rotateZ(400.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(70) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #002b36;
   transform: translateY(48.0375px) translateX(40px) rotateZ(405deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(71) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #002029;
   transform: translateY(48.0375px) translateX(40px) rotateZ(409.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(72) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00151b;
   transform: translateY(48.0375px) translateX(40px) rotateZ(414deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(73) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #00090c;
   transform: translateY(48.0375px) translateX(40px) rotateZ(418.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(74) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(423deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(75) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(427.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(76) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(432deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(77) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(436.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(78) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(441deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(79) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(445.5deg) translateX(50px) rotateY(90deg);
}
 .coin__edge div:nth-child(80) {
   position: absolute;
   height: 3.925px;
   width: 20px;
   background: #000;
   transform: translateY(48.0375px) translateX(40px) rotateZ(450deg) translateX(50px) rotateY(90deg);
}
 .coin__shadow {
   position: absolute;
   width: 100px;
   height: 20px;
   border-radius: 50%;
   background: #000;
   box-shadow: 0 0 100px 100px #000;
   opacity: 0.125;
   transform: rotateX(90deg) translateZ(-110px) scale(0.5);
}
 @keyframes rotate3d {
   0% {
     transform: perspective(1000px) rotateY(0deg);
  }
   100% {
     transform: perspective(1000px) rotateY(360deg);
  }
}
 @keyframes shine {
   0%, 15% {
     transform: translateY(200px) rotate(-40deg);
  }
   50% {
     transform: translateY(-100px) rotate(-40deg);
  }
}