.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

.center img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
}

.center.main_done img {
    opacity: 1;
}

.center.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
}

@keyframes breathe {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(0.95)
    }
}

@keyframes zooooom {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(6)
    }
}

/* Loading indicator */

.loader {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: absolute;
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    box-sizing: border-box;
    animation: shadowPulse 2s linear infinite;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px;
  }
  
  @keyframes shadowPulse {
    33% {
      background: #FFF;
      box-shadow: -24px 0 #36688B, 24px 0 #FFF;
    }
    66% {
      background: #36688B;
      box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }
    100% {
      background: #FFF;
      box-shadow: -24px 0 #FFF, 24px 0 #36688B;
    }
  }