@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background: #F57E15;
  color: #fff;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lock {
  position: absolute;
  box-sizing: border-box;
  height: 240px;
  width: 160px;
  top: 75px;
  left: 120px;
  padding-top: 80px;
  cursor: pointer;
}
.lock:hover .ring {
  -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
          transform: rotate(360deg) translate3d(0, 0, 0);
}
.lock .hanger {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 20px;
  top: 0;
  border-radius: 60px 60px 0 0;
  background: #D1DDE5;
  box-shadow: inset 4px 4px 1px 0 rgba(255, 255, 255, 0.8), inset -3px -2px 1px 0 rgba(0, 0, 0, 0.3), 4px 8px 12px 0 rgba(0, 0, 0, 0.2);
}
.lock .hanger .inside {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 10px;
  background: #F57E15;
  border-radius: 50px 50px 0 0;
  box-shadow: 4px 4px 1px 0 rgba(255, 255, 255, 0.8), -3px -2px 1px 0 rgba(0, 0, 0, 0.3), inset 4px 8px 12px 0 rgba(0, 0, 0, 0.2);
}
.lock .base {
  position: relative;
  width: 160px;
  height: 160px;
  background: #D1DDE5;
  border-radius: 50%;
  box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -2px 1px 0 rgba(0, 0, 0, 0.3);
}
.lock .base .ring {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 5px;
  left: 5px;
  background: #333;
  border-radius: 50%;
  -webkit-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.lock .base .ring .line {
  position: absolute;
  width: 2px;
  height: 10px;
  background: #ccc;
  top: 70px;
  left: 74px;
}
.lock .base .ring .line:nth-child(5n+1) {
  width: 2px;
  height: 18px;
  top: 66px;
  left: 74px;
  background: #fff;
}
.lock .base .ring .line-1 {
  -webkit-transform: rotate(0deg) translateY(-65px);
          transform: rotate(0deg) translateY(-65px);
}
.lock .base .ring .line-1:nth-child(5n+1) {
  -webkit-transform: rotate(0deg) translateY(-61px);
          transform: rotate(0deg) translateY(-61px);
}
.lock .base .ring .line-2 {
  -webkit-transform: rotate(9deg) translateY(-65px);
          transform: rotate(9deg) translateY(-65px);
}
.lock .base .ring .line-2:nth-child(5n+1) {
  -webkit-transform: rotate(9deg) translateY(-61px);
          transform: rotate(9deg) translateY(-61px);
}
.lock .base .ring .line-3 {
  -webkit-transform: rotate(18deg) translateY(-65px);
          transform: rotate(18deg) translateY(-65px);
}
.lock .base .ring .line-3:nth-child(5n+1) {
  -webkit-transform: rotate(18deg) translateY(-61px);
          transform: rotate(18deg) translateY(-61px);
}
.lock .base .ring .line-4 {
  -webkit-transform: rotate(27deg) translateY(-65px);
          transform: rotate(27deg) translateY(-65px);
}
.lock .base .ring .line-4:nth-child(5n+1) {
  -webkit-transform: rotate(27deg) translateY(-61px);
          transform: rotate(27deg) translateY(-61px);
}
.lock .base .ring .line-5 {
  -webkit-transform: rotate(36deg) translateY(-65px);
          transform: rotate(36deg) translateY(-65px);
}
.lock .base .ring .line-5:nth-child(5n+1) {
  -webkit-transform: rotate(36deg) translateY(-61px);
          transform: rotate(36deg) translateY(-61px);
}
.lock .base .ring .line-6 {
  -webkit-transform: rotate(45deg) translateY(-65px);
          transform: rotate(45deg) translateY(-65px);
}
.lock .base .ring .line-6:nth-child(5n+1) {
  -webkit-transform: rotate(45deg) translateY(-61px);
          transform: rotate(45deg) translateY(-61px);
}
.lock .base .ring .line-7 {
  -webkit-transform: rotate(54deg) translateY(-65px);
          transform: rotate(54deg) translateY(-65px);
}
.lock .base .ring .line-7:nth-child(5n+1) {
  -webkit-transform: rotate(54deg) translateY(-61px);
          transform: rotate(54deg) translateY(-61px);
}
.lock .base .ring .line-8 {
  -webkit-transform: rotate(63deg) translateY(-65px);
          transform: rotate(63deg) translateY(-65px);
}
.lock .base .ring .line-8:nth-child(5n+1) {
  -webkit-transform: rotate(63deg) translateY(-61px);
          transform: rotate(63deg) translateY(-61px);
}
.lock .base .ring .line-9 {
  -webkit-transform: rotate(72deg) translateY(-65px);
          transform: rotate(72deg) translateY(-65px);
}
.lock .base .ring .line-9:nth-child(5n+1) {
  -webkit-transform: rotate(72deg) translateY(-61px);
          transform: rotate(72deg) translateY(-61px);
}
.lock .base .ring .line-10 {
  -webkit-transform: rotate(81deg) translateY(-65px);
          transform: rotate(81deg) translateY(-65px);
}
.lock .base .ring .line-10:nth-child(5n+1) {
  -webkit-transform: rotate(81deg) translateY(-61px);
          transform: rotate(81deg) translateY(-61px);
}
.lock .base .ring .line-11 {
  -webkit-transform: rotate(90deg) translateY(-65px);
          transform: rotate(90deg) translateY(-65px);
}
.lock .base .ring .line-11:nth-child(5n+1) {
  -webkit-transform: rotate(90deg) translateY(-61px);
          transform: rotate(90deg) translateY(-61px);
}
.lock .base .ring .line-12 {
  -webkit-transform: rotate(99deg) translateY(-65px);
          transform: rotate(99deg) translateY(-65px);
}
.lock .base .ring .line-12:nth-child(5n+1) {
  -webkit-transform: rotate(99deg) translateY(-61px);
          transform: rotate(99deg) translateY(-61px);
}
.lock .base .ring .line-13 {
  -webkit-transform: rotate(108deg) translateY(-65px);
          transform: rotate(108deg) translateY(-65px);
}
.lock .base .ring .line-13:nth-child(5n+1) {
  -webkit-transform: rotate(108deg) translateY(-61px);
          transform: rotate(108deg) translateY(-61px);
}
.lock .base .ring .line-14 {
  -webkit-transform: rotate(117deg) translateY(-65px);
          transform: rotate(117deg) translateY(-65px);
}
.lock .base .ring .line-14:nth-child(5n+1) {
  -webkit-transform: rotate(117deg) translateY(-61px);
          transform: rotate(117deg) translateY(-61px);
}
.lock .base .ring .line-15 {
  -webkit-transform: rotate(126deg) translateY(-65px);
          transform: rotate(126deg) translateY(-65px);
}
.lock .base .ring .line-15:nth-child(5n+1) {
  -webkit-transform: rotate(126deg) translateY(-61px);
          transform: rotate(126deg) translateY(-61px);
}
.lock .base .ring .line-16 {
  -webkit-transform: rotate(135deg) translateY(-65px);
          transform: rotate(135deg) translateY(-65px);
}
.lock .base .ring .line-16:nth-child(5n+1) {
  -webkit-transform: rotate(135deg) translateY(-61px);
          transform: rotate(135deg) translateY(-61px);
}
.lock .base .ring .line-17 {
  -webkit-transform: rotate(144deg) translateY(-65px);
          transform: rotate(144deg) translateY(-65px);
}
.lock .base .ring .line-17:nth-child(5n+1) {
  -webkit-transform: rotate(144deg) translateY(-61px);
          transform: rotate(144deg) translateY(-61px);
}
.lock .base .ring .line-18 {
  -webkit-transform: rotate(153deg) translateY(-65px);
          transform: rotate(153deg) translateY(-65px);
}
.lock .base .ring .line-18:nth-child(5n+1) {
  -webkit-transform: rotate(153deg) translateY(-61px);
          transform: rotate(153deg) translateY(-61px);
}
.lock .base .ring .line-19 {
  -webkit-transform: rotate(162deg) translateY(-65px);
          transform: rotate(162deg) translateY(-65px);
}
.lock .base .ring .line-19:nth-child(5n+1) {
  -webkit-transform: rotate(162deg) translateY(-61px);
          transform: rotate(162deg) translateY(-61px);
}
.lock .base .ring .line-20 {
  -webkit-transform: rotate(171deg) translateY(-65px);
          transform: rotate(171deg) translateY(-65px);
}
.lock .base .ring .line-20:nth-child(5n+1) {
  -webkit-transform: rotate(171deg) translateY(-61px);
          transform: rotate(171deg) translateY(-61px);
}
.lock .base .ring .line-21 {
  -webkit-transform: rotate(180deg) translateY(-65px);
          transform: rotate(180deg) translateY(-65px);
}
.lock .base .ring .line-21:nth-child(5n+1) {
  -webkit-transform: rotate(180deg) translateY(-61px);
          transform: rotate(180deg) translateY(-61px);
}
.lock .base .ring .line-22 {
  -webkit-transform: rotate(189deg) translateY(-65px);
          transform: rotate(189deg) translateY(-65px);
}
.lock .base .ring .line-22:nth-child(5n+1) {
  -webkit-transform: rotate(189deg) translateY(-61px);
          transform: rotate(189deg) translateY(-61px);
}
.lock .base .ring .line-23 {
  -webkit-transform: rotate(198deg) translateY(-65px);
          transform: rotate(198deg) translateY(-65px);
}
.lock .base .ring .line-23:nth-child(5n+1) {
  -webkit-transform: rotate(198deg) translateY(-61px);
          transform: rotate(198deg) translateY(-61px);
}
.lock .base .ring .line-24 {
  -webkit-transform: rotate(207deg) translateY(-65px);
          transform: rotate(207deg) translateY(-65px);
}
.lock .base .ring .line-24:nth-child(5n+1) {
  -webkit-transform: rotate(207deg) translateY(-61px);
          transform: rotate(207deg) translateY(-61px);
}
.lock .base .ring .line-25 {
  -webkit-transform: rotate(216deg) translateY(-65px);
          transform: rotate(216deg) translateY(-65px);
}
.lock .base .ring .line-25:nth-child(5n+1) {
  -webkit-transform: rotate(216deg) translateY(-61px);
          transform: rotate(216deg) translateY(-61px);
}
.lock .base .ring .line-26 {
  -webkit-transform: rotate(225deg) translateY(-65px);
          transform: rotate(225deg) translateY(-65px);
}
.lock .base .ring .line-26:nth-child(5n+1) {
  -webkit-transform: rotate(225deg) translateY(-61px);
          transform: rotate(225deg) translateY(-61px);
}
.lock .base .ring .line-27 {
  -webkit-transform: rotate(234deg) translateY(-65px);
          transform: rotate(234deg) translateY(-65px);
}
.lock .base .ring .line-27:nth-child(5n+1) {
  -webkit-transform: rotate(234deg) translateY(-61px);
          transform: rotate(234deg) translateY(-61px);
}
.lock .base .ring .line-28 {
  -webkit-transform: rotate(243deg) translateY(-65px);
          transform: rotate(243deg) translateY(-65px);
}
.lock .base .ring .line-28:nth-child(5n+1) {
  -webkit-transform: rotate(243deg) translateY(-61px);
          transform: rotate(243deg) translateY(-61px);
}
.lock .base .ring .line-29 {
  -webkit-transform: rotate(252deg) translateY(-65px);
          transform: rotate(252deg) translateY(-65px);
}
.lock .base .ring .line-29:nth-child(5n+1) {
  -webkit-transform: rotate(252deg) translateY(-61px);
          transform: rotate(252deg) translateY(-61px);
}
.lock .base .ring .line-30 {
  -webkit-transform: rotate(261deg) translateY(-65px);
          transform: rotate(261deg) translateY(-65px);
}
.lock .base .ring .line-30:nth-child(5n+1) {
  -webkit-transform: rotate(261deg) translateY(-61px);
          transform: rotate(261deg) translateY(-61px);
}
.lock .base .ring .line-31 {
  -webkit-transform: rotate(270deg) translateY(-65px);
          transform: rotate(270deg) translateY(-65px);
}
.lock .base .ring .line-31:nth-child(5n+1) {
  -webkit-transform: rotate(270deg) translateY(-61px);
          transform: rotate(270deg) translateY(-61px);
}
.lock .base .ring .line-32 {
  -webkit-transform: rotate(279deg) translateY(-65px);
          transform: rotate(279deg) translateY(-65px);
}
.lock .base .ring .line-32:nth-child(5n+1) {
  -webkit-transform: rotate(279deg) translateY(-61px);
          transform: rotate(279deg) translateY(-61px);
}
.lock .base .ring .line-33 {
  -webkit-transform: rotate(288deg) translateY(-65px);
          transform: rotate(288deg) translateY(-65px);
}
.lock .base .ring .line-33:nth-child(5n+1) {
  -webkit-transform: rotate(288deg) translateY(-61px);
          transform: rotate(288deg) translateY(-61px);
}
.lock .base .ring .line-34 {
  -webkit-transform: rotate(297deg) translateY(-65px);
          transform: rotate(297deg) translateY(-65px);
}
.lock .base .ring .line-34:nth-child(5n+1) {
  -webkit-transform: rotate(297deg) translateY(-61px);
          transform: rotate(297deg) translateY(-61px);
}
.lock .base .ring .line-35 {
  -webkit-transform: rotate(306deg) translateY(-65px);
          transform: rotate(306deg) translateY(-65px);
}
.lock .base .ring .line-35:nth-child(5n+1) {
  -webkit-transform: rotate(306deg) translateY(-61px);
          transform: rotate(306deg) translateY(-61px);
}
.lock .base .ring .line-36 {
  -webkit-transform: rotate(315deg) translateY(-65px);
          transform: rotate(315deg) translateY(-65px);
}
.lock .base .ring .line-36:nth-child(5n+1) {
  -webkit-transform: rotate(315deg) translateY(-61px);
          transform: rotate(315deg) translateY(-61px);
}
.lock .base .ring .line-37 {
  -webkit-transform: rotate(324deg) translateY(-65px);
          transform: rotate(324deg) translateY(-65px);
}
.lock .base .ring .line-37:nth-child(5n+1) {
  -webkit-transform: rotate(324deg) translateY(-61px);
          transform: rotate(324deg) translateY(-61px);
}
.lock .base .ring .line-38 {
  -webkit-transform: rotate(333deg) translateY(-65px);
          transform: rotate(333deg) translateY(-65px);
}
.lock .base .ring .line-38:nth-child(5n+1) {
  -webkit-transform: rotate(333deg) translateY(-61px);
          transform: rotate(333deg) translateY(-61px);
}
.lock .base .ring .line-39 {
  -webkit-transform: rotate(342deg) translateY(-65px);
          transform: rotate(342deg) translateY(-65px);
}
.lock .base .ring .line-39:nth-child(5n+1) {
  -webkit-transform: rotate(342deg) translateY(-61px);
          transform: rotate(342deg) translateY(-61px);
}
.lock .base .ring .line-40 {
  -webkit-transform: rotate(351deg) translateY(-65px);
          transform: rotate(351deg) translateY(-65px);
}
.lock .base .ring .line-40:nth-child(5n+1) {
  -webkit-transform: rotate(351deg) translateY(-61px);
          transform: rotate(351deg) translateY(-61px);
}
.lock .base .ring .number {
  position: absolute;
  width: 20px;
  height: 14px;
  top: 68px;
  left: 65px;
  font-size: 13px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
.lock .base .ring .number-0 {
  -webkit-transform: rotate(0deg) translateY(-40px);
          transform: rotate(0deg) translateY(-40px);
}
.lock .base .ring .number-1 {
  -webkit-transform: rotate(45deg) translateY(-40px);
          transform: rotate(45deg) translateY(-40px);
}
.lock .base .ring .number-2 {
  -webkit-transform: rotate(90deg) translateY(-40px);
          transform: rotate(90deg) translateY(-40px);
}
.lock .base .ring .number-3 {
  -webkit-transform: rotate(135deg) translateY(-40px);
          transform: rotate(135deg) translateY(-40px);
}
.lock .base .ring .number-4 {
  -webkit-transform: rotate(180deg) translateY(-40px);
          transform: rotate(180deg) translateY(-40px);
}
.lock .base .ring .number-5 {
  -webkit-transform: rotate(225deg) translateY(-40px);
          transform: rotate(225deg) translateY(-40px);
}
.lock .base .ring .number-6 {
  -webkit-transform: rotate(270deg) translateY(-40px);
          transform: rotate(270deg) translateY(-40px);
}
.lock .base .ring .number-7 {
  -webkit-transform: rotate(315deg) translateY(-40px);
          transform: rotate(315deg) translateY(-40px);
}
.lock .base .knob {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 55px;
  left: 55px;
  background: #E7ECF0;
  border-radius: 50%;
  box-shadow: inset 2px 4px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -2px 1px 0 rgba(0, 0, 0, 0.2);
}