.card {
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  width: 290px;
  height: 100%;
  background-color: #000;
}

.imageqr {
   position: absolute;
   z-index: 3;
   width: 131px;
   height: 131px;  
   top: 12%;
   left: 28%;
}

.imagelogo {
   position: absolute;
   z-index: 3;
   width: 166px;
   height: 166px;  
   top: 8%;
   left: 21%;
}

.options {
   padding-left: 36px;
}

.dot {
   margin-bottom: 10px;
}

.image {
    /* position: absolute;
    top: 50%;
    left: 50%; */
    width: 198px;
    height: 198px;
    margin: 0px 0px 0px 0px;
    -webkit-animation:spin 12s linear infinite;
    -moz-animation:spin 12s linear infinite;
    animation:spin 12s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }




@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.dot_box a {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.dot_box a:nth-child(1) { animation-delay: 0.1s; }
.dot_box a:nth-child(2) { animation-delay: 0.2s; }
.dot_box a:nth-child(3) { animation-delay: 0.3s; }
.dot_box a:nth-child(4) { animation-delay: 0.4s; }
.dot_box a:nth-child(5) { animation-delay: 0.5s; }