.fullLockcontainer {
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lock:before{
    content: "";
    display: block;
    padding-top: 100%;
  }

  .lockBg {
    position: absolute;
    width: 150%;
    height: auto;

    top: -25%;
    right: -25%;
  }

  .lock .instruction {
    position: absolute;
    color: white;
    text-align: center;
    top: -100px;
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    width: 400px;
    margin-left: -100px;
  }
  .lock .ring {
    position: absolute;
    border: 5px solid #FFDF8C;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    background-color: #36190847;
  }
  .lock .ring.checked {
    animation: blink 2s ease-in-out;
  }
  @keyframes blink {
    0%,
    50%,
    100% {
      border: 5px solid rgba(255, 255, 255, 1);
    }
    25%,
    75% {
      border: 5px solid rgba(255, 255, 255, 0.5);
    }
  }
  .lock .lockpick {
    position: absolute;
    width: 5px;
    height: 48%;
    left: 50%;
    top: 0px;
    margin-left: -2px;
    background: linear-gradient(180deg, #FFDF8C 0%, #FF9B63 100%);
    transform-origin: bottom;
  }
  .lock .stage {
    position: absolute;
    padding: 0;
    display: flex;
    top: 46%;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .lock .stage li {
    width: 0.5vw;
    height: 3.5vw;
    background: #8D502D;    
    margin: 0 0.3vw;
    border-radius: 50px;
    transition: all 1s ease;
    list-style: none;
  }
  .lock .stage li.active,
  .lock .stage li.done {
    background: #8D502D;
  }
  .lock .stage li.done {
    margin-top: -5%;
  }
  .lock > .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .lock .lockpick .fas {
    position: absolute;
    color: linear-gradient(180deg, #FFDF8C 0%, #FF9B63 100%);
    display: none;
  }
  .lock .lockpick .fas.fa-caret-right {
    top: 3px;
    right: -8px;
  }
  .lock .lockpick .fas.fa-caret-left {
    top: 3px;
    left: -8px;
  }

  .lockIcon {
    position: absolute;
    top: 26%;
    bottom: 50%;

    width: 30%;
    height: auto;

    left: 35%;

  }
  @keyframes shake-little {
    2% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    4% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    6% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    8% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    10% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    12% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    14% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    16% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    18% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    20% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    22% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    24% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    26% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    28% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    30% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    32% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    34% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    36% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    38% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    40% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    42% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    44% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    46% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    48% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    50% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    52% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    54% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    56% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    58% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    60% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    62% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    64% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    66% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    68% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    70% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    72% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    74% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    76% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    78% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    80% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    82% {
      transform: translate(5px, 0px) rotate(0.5deg);
    }
    84% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    86% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    88% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    90% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    92% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    94% {
      transform: translate(5px, 5px) rotate(0.5deg);
    }
    96% {
      transform: translate(0px, 5px) rotate(0.5deg);
    }
    98% {
      transform: translate(0px, 0px) rotate(0.5deg);
    }
    0%,
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }
  .shake-little:hover,
  .shake-trigger:hover .shake-little,
  .shake-little.shake-freeze,
  .shake-little.shake-constant {
    animation-name: shake-little;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .lockItemContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
  }
  .lockItem {
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 100%;

    background-image: url("../images/assets/itemsBg.png");
    background-size: cover !important;
    background-position: bottom right, left !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  .lockItem:hover {
    width: 21%;
    height: 21%;
  }
  
  .itemImage {
    position:absolute;
    width: 80%;
    height: 80%;
    border-radius: 1000px;
    top: 10%;
    left: 10%;

  }
  .lockItem:first-child {
    position: absolute;
    right: 40%;
    top: -10%;
  }

  .lockItem:nth-child(2) {
    position: absolute;
    right: 5%;
    top: 5%;
  }
  .lockItem:nth-child(3) {
    position: absolute;
    right: -10%;
    top: 40%;
  }

  .lockItem:nth-child(4) {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }
  .lockItem:nth-child(5) {
    position: absolute;
    right: 40%;
    bottom: -10%;
  }
  .lockItem:nth-child(6) {
    position: absolute;
    left: 5%;
    bottom: 5%;
  }
  .lockItem:nth-child(7) {
    position: absolute;
    left: -10%;
    top: 40%;
  }
  .lockItem:nth-child(8) {
    position: absolute;
    left: 5%;
    top: 5%;
  }