/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

#smartpath .init-spinner-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
         -webkit-box-pack: center;
            -ms-flex-pack: center;
          justify-content: center;
  height: 300px;
  width: 100%;
  margin: auto;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 8px;
}

#smartpath .init-spinner {
  background: url( '../img/spinner.svg' ) no-repeat center;
  height: 86px;
  width: 86px;
  -webkit-animation: 0.8s ease-in infinite spin;
          animation: 0.8s ease-in infinite spin;
}