.preview { width: 144px; height: 168px; position: relative; margin: 10px auto; overflow: hidden; margin-top: 40px; z-index: 50; } .round-preview { width: 179px; height: 179px; border-radius: 90px; } .round-preview .preview-scaler { position: relative; top: 6px; left: 17px; } .preview-r { top: -1px; left: -1px; } .round-preview .preview-b-round { width: 180px; height: 180px; } .preview img { image-rendering: crisp-edges; } .preview-scaler.scaled { zoom: 1.2; position: absolute; top: -15px; left: -12px; } .preview-n, .preview-o, .preview-o2, .preview-b, .preview-r, .preview-zero, .preview-zero2, .preview-eurodate, .preview-eurodate2, .preview-centeralign, .preview-centeralign-digit2 { position: absolute; } .preview-zero { width: 75px; height: 75px; overflow: hidden; } .preview-zero2 { width: 30px; height: 31px; top: 132px; left: 10px; overflow: hidden; } .preview-zero2.smallzero .preview-o2 { top: -132px; left: -10px; } .showzero { display: none; } .showzero.activeshowzero { display: block; } .preview-zero2.eurodate.activeeurodate { left: 70px; } .preview-eurodate, .preview-eurodate2 { width: 55px; height: 27px; overflow: hidden; top: 130px; display: none; } .preview-eurodate img, .preview-eurodate2 img { top: -130px; } .preview-eurodate img { left: -15px; } .preview-eurodate2 img { left: -75px; } .preview-eurodate { left: 75px; } .preview-eurodate2 { left: 15px; } .preview-eurodate .preview-o2 { left: -15px; top: -130px; } .preview-eurodate .preview-b.showzero { left: -120px; } .preview-eurodate.activeeurodate, .preview-eurodate2.activeeurodate { display: block; } .preview-centeralign { display: none; } .preview-centeralign.activecenteralign { display: block; } .preview-centeralign .preview-n { left: -45px; } .preview-centeralign-digit2 { width: 30px; height: 30px; left: 30px; overflow: hidden; } .hide { display: none; } .previewbezel { width: 250px; height: 250px; margin: 0 auto; margin-bottom: -220px; background-size: cover; top: -225px; position: relative; background-position: 0 -50px; } .previewbezel.for-basalt { width: 244px; height: 280px; margin: 0 auto; margin-bottom: -230px; background-size: cover; top: -235px; position: relative; background-position: 0 -34px; } .preview.for-basalt { margin-top: 60px; border-radius: 9px; } .previewbezel.for-aplite { width: 236px; height: 280px; margin: 0 auto; margin-bottom: -230px; background-size: cover; top: -233px; position: relative; background-position: 0 -49px; } .preview.for-aplite { margin-top: 73px; border-radius: 4px; }