/*!
 * Percent-percentageloader CSS - v1
 * @author JDM Digital - https://jdmdigital.co
 * Copyright (c) 2022
 */
.percentageloader {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, #1d1d1d 0%, #000 100%);
  opacity: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 999999999999;
  transition-delay: 0.65s
}

.percentageloader .inner {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.percentageloader:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 100vh 0;
  border-color: transparent #333333 transparent transparent;
  position: absolute;
  left: -200px;
  top: 0
}

.percentageloader:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100vh 0 0 200px;
  border-color: transparent transparent transparent #333333;
  position: absolute;
  right: -200px;
  top: 0
}

.percentageloader * {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

.transition-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  right: calc(-100% - 200px);
  bottom: 0;
  background: #B0D41A;
  z-index: 9999;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  visibility: hidden
}

.percentageloader .inner .percentage {
  width: 100%;
  font-size: 28vw;
  line-height: 1;
  font-weight: 800;
  font-family: 'Dala Moa', cursive;
  color: #B0D41A;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 1;
  transition-delay: 0.10s
}

.navigation__transparent.navbar {
  visibility: hidden
}

.page-loaded .percentageloader .percentage {
  margin-left: 100px;
  opacity: 0
}

.page-loaded .percentageloader {
  left: calc(-100% - 200px);
  visibility: hidden
}