.progress
{
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  border-radius: 2px;
  background-clip: padding-box;
  overflow: hidden;
}
.progress .determinate
{
  position: absolute;
  background-color: inherit;
  top: 0;
  bottom: 0;
  transition: width .3s linear;
}
.progress .indeterminate:before
{
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after
{
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;

  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate
{
  0%
  {
    left: -35%;
    right: 100%;
  }

  60%
  {
    left: 100%;
    right: -90%;
  }
  100%
  {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate
{
  0%
  {
    left: -35%;
    right: 100%;
  }
  60%
  {
    left: 100%;
    right: -90%;
  }
  100%
  {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes indeterminate-short
{
  0%
  {
    left: -200%;
    right: 100%;
  }
  60%
  {
    left: 107%;
    right: -8%;
  }
  100%
  {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short
{
  0%
  {
    left: -200%;
    right: 100%;
  }
  60%
  {
    left: 107%;
    right: -8%;
  }
  100%
  {
    left: 107%;
    right: -8%;
  }
}

/* loading screen - always the very topp */
.card
{
  z-index: 0;
}

.loading
{
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  opacity: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor:progress;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.loading.show-loading
{
  /* animation: loading-fade-in .4s ease 1 both; */
  animation: loading-fade-in .4s ease both;
  overflow: overlay;
  position: static;
}
.loading.hide-loading
{
  /* animation: loading-fade-out .6s ease .5s 1 both; */
  /* animation: loading-fade-out .6s ease both; */
  display: none;
}

/*
.loading > *
{
  animation: opacity .4s ease;
}
.loading.hide-loading > *
{
  opacity: 0;
  animation: opacity .4s ease 1s;
}
.loading.show-loading > *
{
  opacity: 1;
}
*/

@keyframes loading-fade-in
{
  0%
  {
    width: 0;
    height: 0;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  1%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@-webkit-keyframes loading-fade-in
{
  0%
  {
    width: 0;
    height: 0;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  1%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@keyframes loading-fade-out
{
  0%
  {
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  99%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    width: 0;
    height: 0;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}
@-webkit-keyframes loading-fade-out
{
  0%
  {
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  99%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    width: 0;
    height: 0;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}

/* folding-cube */

.sk-folding-cube-wrapper
{
  position: absolute;
  top: 0;
  margin-top: -50px;
  left: 0;
  right: 0;
  height: 100%;
}

.sk-folding-cube
{
  margin: 35% auto;
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube
{
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2
{
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3
{
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4
{
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before
{
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before
{
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before
{
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle
{
  0%, 10%
  {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75%
  {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100%
  {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle
{
  0%, 10%
  {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75%
  {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100%
  {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}