Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                %body
  .wrap
    .cassette-back
      %span.a A
      %span.hd90 HD90
      .plate
        .reel
          %div
          %div
          %div
          %div
          %div
          %div
        .reel
          %div
          %div
          %div
          %div
          %div
          %div
      .screws
        %div
        %div
        %div
        %div
        %div
      .holes
        %div
        %div
        %div
        %div
      .shadow

              
            
!

CSS

              
                @import "compass/css3";

html {
  height: 100%;
  overflow-y: hidden;
}

body {
  font: normal bold 13px/11px arial, helvetica, sans-serif;
  background: #c7cdce;
  background-image: -webkit-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -webkit-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -moz-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -moz-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -o-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -o-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -ms-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -ms-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
}

.wrap {
  position: relative;
  height: 500px;
  width: 486px;
  margin: 7% auto 0;
}

.a, .hd90 {
  padding: 2px;
  position: absolute;
}

.a {
  background: #f0e9d6;
  top: 26px;
  left: 30px;
  -webkit-box-shadow: -11px 0 0 white;
  box-shadow: -11px 0 0 white;
}

.hd90 {
  top: 96px;
  left: 208px;
  color: white;
  letter-spacing: 1px;
}

.cassette-back {
  margin: 0 auto;
  width: 269px;
  height: 164px;
  position: relative;
  border-radius: 15px;
  z-index: 3;
  -webkit-box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  border: 1px solid #c2c2c2;
  border-bottom-color: #3f3f3f;
  border-left-color: #8b8b8b;
  border-right-color: #8b8b8b;
  background-image: -webkit-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -moz-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -o-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -ms-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
}

.cassette-back:before {
  display: block;
  content: "";
  height: 100px;
  width: 233px;
  border-radius: 8px;
  top: 14px;
  left: 16px;
  position: relative;
  border: 2px solid black;
  -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  background: #f0e9d6;
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
}

.plate {
  width: 168px;
  height: 43px;
  border-radius: 6px;
  border: 1px solid #fffee7;
  background: #393034;
  position: absolute;
  top: 46px;
  left: 50px;
  box-shadow: inset 0 0 4px black;
}

.plate:before {
  display: block;
  content: "";
  width: 69px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #bbbbbb;
  position: absolute;
  top: 7px;
  left: 49px;
  -webkit-box-shadow: inset 0 0 3px black, 0 0 3px black;
  box-shadow: inset 0 0 3px black, 0 0 3px black;
  background: #f7f4f2;
  background-image: -webkit-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -webkit-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: -moz-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -moz-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);  
  background-image: -ms-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -ms-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: -o-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -o-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);    
}


.plate:after {
  display: block;
  content: "";
  width: 214px;
  height: 46px;
  position: absolute;
  top: 72px;
  left: -25px;
 background-image: -webkit-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -webkit-linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), -webkit-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -webkit-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
}

.reel {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black;
  box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black;
  top: 5px;
  left: 10px;
  background-image: -webkit-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -moz-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -o-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -ms-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  &:last-child  {
   left:  126px;
}

  div {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #000;
    &:nth-child(1) {  
      transform: rotate(193deg);    
      top: 1px; 
      left: 16px;
    }
    &:nth-child(2) {  
      transform: rotate(257deg);    
      top: 10px; 
      left: 25px;
    }
    &:nth-child(3) {  
      transform: rotate(128deg);    
      top: 22px; 
      left: 22px;
    }
    &:nth-child(4) {  
      transform: rotate(156deg);    
      top: 19px; 
      left: 2px;
    }
    &:nth-child(5) {  
      transform: rotate(189deg);     
      top: 26px; 
      left: 11px;
    }
    &:nth-child(6) {  
      transform: rotate(220deg);   
      top: 6px; 
      left: 3px;
    }
  }
}

.screws {
  div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: black;
    position: absolute;
    top: 3px;
    left: 6px;
    -webkit-box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e;
    box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e;
    border: 1px solid #2e2e2e;
    background-image: -webkit-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -moz-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -ms-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -o-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    &:nth-child(1) { top: 3px; left: 6px; }
    &:nth-child(2) { top: 3px; left: 255px; }
    &:nth-child(3) { top: 147px; left: 6px; }
    &:nth-child(4) { top: 147px; left: 255px; } 
    &:nth-child(5) { top: 130px; left: 132px; }
    &:nth-child(1):before,
    &:nth-child(2):before,
    &:nth-child(3):before,
    &:nth-child(4):before,
    &:nth-child(5):before {
      display: block;
      content: "x";
      font-size: 7px;
      line-height: 6px;
      text-shadow: -1px -1px 1px gray;
      position: absolute;
      left: 2px;
      color: #222;
      top: 1px;
    }
  }
}

.holes {
  div {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    z-index: 100;
    -webkit-box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
    box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
    &:nth-child(2) {
      bottom: 57px;
      left: 25px;
    }
    &:nth-child(3) {
      bottom: 57px;
      left: 96px;
    }
    &:nth-child(4) {
      left: 122px;
    }
  }
}
html {
  height: 100%;
  overflow-y: hidden;
}

body {
  font: normal bold 13px/11px arial, helvetica, sans-serif;
  background: #c7cdce;
  background-image: -webkit-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -webkit-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -moz-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -moz-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -o-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -o-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: -ms-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -ms-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
  background-image: radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
}

.wrap {
  position: relative;
  height: 500px;
  width: 486px;
  margin: 7% auto 0;
}

.a, .hd90 {
  padding: 2px;
  position: absolute;
}

.a {
  background: #f0e9d6;
  top: 26px;
  left: 30px;
  -webkit-box-shadow: -11px 0 0 white;
  box-shadow: -11px 0 0 white;
}

.hd90 {
  top: 96px;
  left: 208px;
  color: white;
  letter-spacing: 1px;
}

.cassette-back {
  margin: 0 auto;
  width: 269px;
  height: 164px;
  position: relative;
  border-radius: 15px;
  z-index: 3;
  -webkit-box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  border: 1px solid #c2c2c2;
  border-bottom-color: #3f3f3f;
  border-left-color: #8b8b8b;
  border-right-color: #8b8b8b;
  background-image: -webkit-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -moz-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -o-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: -ms-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
  background-image: radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%);
}

.cassette-back:before {
  display: block;
  content: "";
  height: 100px;
  width: 233px;
  border-radius: 8px;
  top: 14px;
  left: 16px;
  position: relative;
  border: 2px solid black;
  -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  background: #f0e9d6;
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
  background-image: radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%);
}

.plate {
  width: 168px;
  height: 43px;
  border-radius: 6px;
  border: 1px solid #fffee7;
  background: #393034;
  position: absolute;
  top: 46px;
  left: 50px;
  box-shadow: inset 0 0 4px black;
}

.plate:before {
  display: block;
  content: "";
  width: 69px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #bbbbbb;
  position: absolute;
  top: 7px;
  left: 49px;
  -webkit-box-shadow: inset 0 0 3px black, 0 0 3px black;
  box-shadow: inset 0 0 3px black, 0 0 3px black;
  background: #f7f4f2;
  background-image: -webkit-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -webkit-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: -moz-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -moz-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);  
  background-image: -ms-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -ms-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: -o-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    -o-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);
  background-image: radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%),
    radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%);    
}


.plate:after {
  display: block;
  content: "";
  width: 214px;
  height: 46px;
  position: absolute;
  top: 72px;
  left: -25px;
  background-image: -webkit-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -webkit-linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), -webkit-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -webkit-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
  background-image: -moz-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -moz-linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), -moz-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -moz-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
  background-image: -o-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -o-linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), -o-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -o-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
  background-image: -ms-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -ms-linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), -ms-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -ms-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
  background-image: linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), linear-gradient(10deg, transparent 93%, black 93%,#3F3B3C 94%), radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);      
}

.reel {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black;
  box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black;
  top: 5px;
  left: 10px;
  background-image: -webkit-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -moz-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -o-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: -ms-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  background-image: radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%);
  &:last-child  {
   left:  126px;
}

  div {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #000;
    &:nth-child(1) {  
      -webkit-transform: rotate(193deg);
      -moz-transform: rotate(193deg);
      -o-transform: rotate(193deg);
      -ms-transform: rotate(193deg);
      transform: rotate(193deg);
      top: 1px; 
      left: 16px;
    }
    &:nth-child(2) {  
      -webkit-transform: rotate(257deg);
      -moz-transform: rotate(257deg);
      -o-transform: rotate(257deg);
      -ms-transform: rotate(257deg);
      transform: rotate(257deg);
      top: 10px; 
      left: 25px;
    }
    &:nth-child(3) {  
      -webkit-transform: rotate(128deg);
      -moz-transform: rotate(128deg);
      -o-transform: rotate(128deg);
      -ms-transform: rotate(128deg);
      transform: rotate(128deg);
      top: 22px; 
      left: 22px;
    }
    &:nth-child(4) {  
      -webkit-transform: rotate(156deg);
      -moz-transform: rotate(156deg);
      -o-transform: rotate(156deg);
      -ms-transform: rotate(156deg);
      transform: rotate(156deg);
      top: 19px; 
      left: 2px;
    }
    &:nth-child(5) {  
      -webkit-transform: rotate(189deg); 
      -moz-transform: rotate(189deg); 
      -o-transform: rotate(189deg); 
      -ms-transform: rotate(189deg); 
      transform: rotate(189deg); 
      top: 26px; 
      left: 11px;
    }
    &:nth-child(6) {  
      -webkit-transform: rotate(220deg);
      -moz-transform: rotate(220deg);
      -o-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
      transform: rotate(220deg);
      top: 6px; 
      left: 3px;
    }
  }
}

.screws {
  div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: black;
    position: absolute;
    top: 3px;
    left: 6px;
    -webkit-box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e;
    box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e;
    border: 1px solid #2e2e2e;
    background-image: -webkit-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -moz-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -ms-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: -o-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    background-image: radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%);
    &:nth-child(1) { top: 3px; left: 6px; }
    &:nth-child(2) { top: 3px; left: 255px; }
    &:nth-child(3) { top: 147px; left: 6px; }
    &:nth-child(4) { top: 147px; left: 255px; } 
    &:nth-child(5) { top: 130px; left: 132px; }
    &:nth-child(1):before,
    &:nth-child(2):before,
    &:nth-child(3):before,
    &:nth-child(4):before,
    &:nth-child(5):before {
      display: block;
      content: "x";
      font-size: 7px;
      line-height: 6px;
      text-shadow: -1px -1px 1px gray;
      position: absolute;
      left: 2px;
      color: #222;
      top: 1px;
    }
  }
}

.holes {
  div {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    z-index: 100;
    -webkit-box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
    box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
    &:nth-child(2) {
      bottom: 57px;
      left: 25px;
    }
    &:nth-child(3) {
      bottom: 57px;
      left: 96px;
    }
    &:nth-child(4) {
      left: 122px;
    }
  }
}

.shadow {
  height: 8px;
  width: 270px;
  -webkit-box-shadow: 0 18px 7px #111;
  box-shadow: 0 18px 7px #111;
  border-radius: 58%;
  position: absolute;
  bottom: 179px;
  z-index: 1;
  top: 143px;
}

.shadow {
  height: 8px;
  width: 270px;
  -webkit-box-shadow: 0 18px 7px #111;
  box-shadow: 0 18px 7px #111;
  border-radius: 58%;
  position: absolute;
  bottom: 179px;
  z-index: 1;
  top: 143px;
}

              
            
!

JS

              
                
              
            
!
999px

Console