@mixin prefixed($property, $value, $second:false) {
  @if $second {
    -webkit-#{$property}: $value, $second;
       -moz-#{$property}: $value, $second;
        -ms-#{$property}: $value, $second;
         -o-#{$property}: $value, $second;
            #{$property}: $value, $second;
  } @else {
    -webkit-#{$property}: $value;
       -moz-#{$property}: $value;
        -ms-#{$property}: $value;
         -o-#{$property}: $value;
            #{$property}: $value;
  }
}

body.pg-loading {
  overflow: hidden;
}

.pg-loading-screen {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000000;
  opacity: 1;
  background-color: #FFF;
  @include prefixed(transition, background-color 0.4s ease-in-out 0s);

  &.pg-loaded {
    opacity: 0;
    @include prefixed(animation, pgAnimLoaded 0.5s cubic-bezier(0.7,0,0.3,1) both);
  }

  &.pg-loading {
    .pg-loading-logo-header, .pg-loading-html {
      opacity: 1;
    }

    .pg-loading-logo-header, .pg-loading-html:not(.pg-loaded) {
      @include prefixed(animation, pgAnimLoading 1s cubic-bezier(0.7,0,0.3,1) both);
    }

    .pg-loading-html:not(.pg-loaded) {
      @include prefixed(animation-delay, 0.3s);
    }
  }

  .pg-loading-inner {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: static;
  }

  .pg-loading-center-outer {
    width: 100%;
    padding: 0;
    display: table !important;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .pg-loading-center-middle {
    padding: 0;
    vertical-align: middle;
    display: table-cell  !important;
    margin: 0;
    text-align: center;
  }

  .pg-loading-logo-header, .pg-loading-html {
    width: 100%;
    opacity: 0;
  }

  .pg-loading-logo-header {
    text-align: center;

    img {
      display: inline-block !important;
    }
  }

  .pg-loading-html {
    margin-top: 90px;

    &.pg-loaded {
      @include prefixed(transition, opacity 0.5s cubic-bezier(0.7,0,0.3,1));

      &.pg-removing {
        opacity: 0;
      }

      &.pg-loading {
        opacity: 1;
      }
    }
  }
}

@-webkit-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}
@-moz-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}
@-o-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}
@-ms-keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}
@keyframes pgAnimLoading {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}
@-moz-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}
@-o-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}
@-ms-keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}
@keyframes pgAnimLoaded {
  from {
    opacity: 1;
  }
}