.page-transition {
  display: none;
  background: #FFF;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  z-index: 9999;
  background-repeat: no-repeat;
  background-position: center center;
}
.page-transition--loading {
  display: block;
}
.page-transition--hide {
  display: block;
  animation: page-transition-hide 0.1s linear forwards;
}
@supports (clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%)) {
  .page-transition--open {
    display: block;
    animation: page-transition-slide-out .4s linear forwards;
  }
  .page-transition--close {
    display: block;
    animation: page-transition-slide-in 0.4s linear forwards;
  }
}
.page-transition--style-1 {
  background-image: url("./assets/images/1.svg");
}
.page-transition--style-2 {
  background-image: url("./assets/images/1.svg");
}
.page-transition--style-3 {
  /*background-image: url("./assets/images/3.gif"); The USA Gif I am changing to just use the Cabinet Delivery guy svg*/
	background-image: url("./assets/images/1.svg");
}

@keyframes page-transition-hide {
  to {
    opacity: 0;
  }
}
@keyframes page-transition-slide-out {
  0% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
  25% {
    clip-path: polygon(100% 0, 34.125% 0, 25% 100%, 100% 100%);
  }
  45% {
    clip-path: polygon(100% 0, 59.905% 0, 45% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(100% 0, 64.5% 0, 50% 100%, 100% 100%);
  }
  55% {
    clip-path: polygon(100% 0, 69.795% 0, 55% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(100% 0, 87.375% 0, 75% 100%, 100% 100%);
  }
  95% {
    clip-path: polygon(100% 0, 97.755% 0, 95% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes page-transition-slide-in {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  25% {
    clip-path: polygon(34.125% 0, 0 0, 0 100%, 25% 100%);
  }
  45% {
    clip-path: polygon(59.905% 0, 0 0, 0 100%, 45% 100%);
  }
  50% {
    clip-path: polygon(64.5% 0, 0 0, 0 100%, 50% 100%);
  }
  55% {
    clip-path: polygon(69.795% 0, 0 0, 0 100%, 55% 100%);
  }
  75% {
    clip-path: polygon(87.375% 0, 0 0, 0 100%, 75% 100%);
  }
  95% {
    clip-path: polygon(97.755% 0, 0 0, 0 100%, 95% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}