.cproduk{text-align:center;width:500px;height:500px;max-width:500px;max-height:500px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;position:relative;margin:0 auto;-webkit-transition:all 1s;transition:all 1s}@media screen and (max-width:1024px){.cproduk{width:400px;height:400px;margin:20% auto}}@media screen and (max-width:768px){.cproduk{width:300px;height:300px;margin:30% auto}}@media screen and (max-width:684px){.cproduk{display:none}}.cproduk img{width:100%;height:100%;user-drag:none;user-select:none;border-radius:50%;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;filter:grayscale(10%);-webkit-filter:grayscale(10%)}.cproduk .cone,.cproduk .cthree,.cproduk .ctwo{border:2px solid #f7f7f7;border-radius:100%;margin:auto;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cproduk .cone{width:100%;height:100%}.cproduk .ctwo{width:75%;height:75%;position:absolute;top:12.5%;left:12.5%}.cproduk .cthree{width:60%;height:60%;position:absolute;top:20%;left:20%}.cproduk .theproduk,.cproduk a{height:50px;width:50px;background-color:#fff;border-radius:100%;position:absolute;z-index:3;border:1px solid #fff;padding:6px;text-align:center;vertical-align:middle}.cproduk i{font-size:32px!important;margin:auto;color:#720af3}