@char.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bend 3s linear 4s alternate;
  -webkit-animation-fill-mode: forwards;
}

.vinyl {
  
  & {
    background: $black;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    animation: moveLeft 3s linear 4s alternate, spin 3s linear 4s infinite;
    //-webkit-animation-fill-mode: forwards;
    
  }
  
  &:hover {
    
  }
  
  div {
    border: 1px solid #222;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: $padding-xs;
    border-radius: 50%;
  }
  
  &__label {
    
    & {
      border: none;
      background: $blue;
      color: white;
      text-align: center;
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/macklemore_album.jpg);
      background-size: cover;
      background-position: center;
      
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    &--header {
      display: block;
      font-size: 20px;
    }
    
    i {
      font-size: 22px;
      text-align: center;
    }
    
  }
  
}

.message {
  font-family: 'Circular Book';
  font-size: 36px;
}

@keyframes spin {
  0% {
    transform:rotateZ(0deg) rotateY(0deg);
  }
  25% {
    transform:rotateZ(90deg) rotateY(20deg);
  }
  75% {
    transform:rotateZ(270deg) rotateY(-20deg);
  }
  100% {
    transform:rotateZ(360deg) rotateY(0deg);
  }
}

@keyframes bend {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(75deg);
  }
}

@keyframes moveLeft {
  
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
  
  from {
    transform: translate(350px,0);
  }
  to {
    transform: translate(350px,0);
  }
}