/* Scss Document */
.loaderPage {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(white, white 25%, #cdcac6);
  background-attachment: fixed;
  z-index: 5;
  transition: 250ms cubic-bezier(0.17, 0.67, 0.48, 1); }

.stage {
  position: relative;
  width: 100px;
  height: 100px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); }

.shape {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0; }

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
/* example:-  animation: 3s ease-in 1s 2 reverse both paused slidein;*/
.shape1 {
  background-color: #d0eea6;
  -webkit-clip-path: polygon(6.6% 20.5%, 6.6% 33.7%, 6.6% 85.3%);
  clip-path: polygon(6.6% 20.5%, 6.6% 33.7%, 6.6% 85.3%);
  animation: 0.5s forwards shape1build; }

.shape2 {
  background: #99dc38;
  -webkit-clip-path: polygon(29.6% 34.8%, 16.2% 65.1%, 7% 85.9%);
  clip-path: polygon(29.6% 34.8%, 16.2% 65.1%, 7% 85.9%);
  animation: 0.5s 0.15s forwards shape2build; }

.shape3 {
  background: #66e49c;
  -webkit-clip-path: polygon(29.6% 73.4%, 18.3% 79.9%, 6.95% 86.5%);
  clip-path: polygon(29.6% 73.4%, 18.3% 79.9%, 6.95% 86.5%);
  animation: 0.5s 0.3s forwards shape3build; }

.shape4 {
  background: #33b5d5;
  -webkit-clip-path: polygon(30.1% 73.2%, 30.1% 86.5%, 30.1% 99.6%);
  clip-path: polygon(30.1% 73.2%, 30.1% 86.5%, 30.1% 99.6%);
  animation: 0.5s 0.45s forwards shape4build; }

.shape5 {
  background: #00a2cb;
  -webkit-clip-path: polygon(68.9% 66.85%, 92.65% 63.3%, 31.3% 72.5%);
  clip-path: polygon(68.9% 66.85%, 92.65% 63.3%, 31.3% 72.5%);
  animation: 0.5s 0.6s forwards shape5build; }

.shape6 {
  background: #8064be;
  -webkit-clip-path: polygon(81.8% 56.5%, 93.1% 63%, 70.45% 50%);
  clip-path: polygon(81.8% 56.5%, 93.1% 63%, 70.45% 50%);
  animation: 0.5s 0.75s forwards shape6build; }

.shape7 {
  background: #ff6a1d;
  -webkit-clip-path: polygon(81.8% 42.8%, 92.9% 36.4%, 70.1% 49.55%);
  clip-path: polygon(81.8% 42.8%, 92.9% 36.4%, 70.1% 49.55%);
  animation: 0.5s 0.9s forwards shape7build; }

.shape8 {
  background: #ff4f19;
  -webkit-clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 55.45% 28.1%);
  clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 55.45% 28.1%);
  animation: 0.5s 1.1s forwards shape8build; }

.shape9 {
  background: #ff9423;
  -webkit-clip-path: polygon(35.65% 16.4%, 41.1% 6.7%, 30.1% 26.1%);
  clip-path: polygon(35.65% 16.4%, 41.1% 6.7%, 30.1% 26.1%);
  animation: 0.5s 1.25s forwards shape9build; }

/* animation presets */
@-webkit-keyframes shape1build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(6.6% 20.5%, 6.6% 33.7%, 6.6% 85.3%);
    clip-path: polygon(6.6% 20.5%, 6.6% 33.7%, 6.6% 85.3%); }
  100% {
    opacity: 1;
    background-color: #ade360;
    -webkit-clip-path: polygon(6.6% 20.5%, 29.5% 33.7%, 6.6% 85.3%);
    clip-path: polygon(6.6% 20.5%, 29.5% 33.7%, 6.6% 85.3%); } }
@-webkit-keyframes shape2build {
  0% {
    opacity: 1;
    background-color: #000000;
    -webkit-clip-path: polygon(29.6% 34.8%, 16.2% 65.1%, 7% 85.9%);
    clip-path: polygon(29.6% 34.8%, 16.2% 65.1%, 7% 85.9%); }
  100% {
    opacity: 1;
    background-color: #99dc38;
    -webkit-clip-path: polygon(29.6% 34.8%, 29.6% 72.8%, 7% 85.9%);
    clip-path: polygon(29.6% 34.8%, 29.6% 72.8%, 7% 85.9%); } }
@-webkit-keyframes shape3build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(29.6% 73.4%, 18.3% 79.9%, 6.95% 86.5%);
    clip-path: polygon(29.6% 73.4%, 18.3% 79.9%, 6.95% 86.5%); }
  100% {
    opacity: 1;
    background-color: #66e49c;
    -webkit-clip-path: polygon(29.6% 73.4%, 29.6% 99.6%, 6.95% 86.5%);
    clip-path: polygon(29.6% 73.4%, 29.6% 99.6%, 6.95% 86.5%); } }
@-webkit-keyframes shape4build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(30.1% 73.2%, 30.1% 86.5%, 30.1% 99.6%);
    clip-path: polygon(30.1% 73.2%, 30.1% 86.5%, 30.1% 99.6%); }
  100% {
    opacity: 1;
    background-color: #33b5d5;
    -webkit-clip-path: polygon(30.1% 73.2%, 92% 63.85%, 30.1% 99.6%);
    clip-path: polygon(30.1% 73.2%, 92% 63.85%, 30.1% 99.6%); } }
@-webkit-keyframes shape5build {
  0% {
    opacity: 1;
    background-color: #000000;
    -webkit-clip-path: polygon(68.9% 66.85%, 92.65% 63.3%, 31.3% 72.5%);
    clip-path: polygon(68.9% 66.85%, 92.65% 63.3%, 31.3% 72.5%); }
  100% {
    opacity: 1;
    background-color: #00a2cb;
    -webkit-clip-path: polygon(70% 50.2%, 92.65% 63.3%, 31.3% 72.5%);
    clip-path: polygon(70% 50.2%, 92.65% 63.3%, 31.3% 72.5%); } }
@-webkit-keyframes shape6build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(81.8% 56.4%, 93.1% 63%, 70.45% 50%);
    clip-path: polygon(81.8% 56.4%, 93.1% 63%, 70.45% 50%); }
  100% {
    opacity: 1;
    background-color: #8064be;
    -webkit-clip-path: polygon(93.1% 36.8%, 93.1% 63%, 70.45% 50%);
    clip-path: polygon(93.1% 36.8%, 93.1% 63%, 70.45% 50%); } }
@-webkit-keyframes shape7build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(81.8% 42.8%, 92.9% 36.4%, 70.1% 49.55%);
    clip-path: polygon(81.8% 42.8%, 92.9% 36.4%, 70.1% 49.55%); }
  100% {
    opacity: 1;
    background-color: #ff6a1d;
    -webkit-clip-path: polygon(42.4% 7.3%, 92.9% 36.4%, 70.1% 49.55%);
    clip-path: polygon(42.4% 7.3%, 92.9% 36.4%, 70.1% 49.55%); } }
@-webkit-keyframes shape8build {
  0% {
    opacity: 1;
    background-color: #000000;
    -webkit-clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 55.45% 28.1%);
    clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 55.45% 28.1%); }
  100% {
    opacity: 1;
    background-color: #ff4f19;
    -webkit-clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 30.35% 26.9%);
    clip-path: polygon(41.7% 7.1%, 69.2% 49.2%, 30.35% 26.9%); } }
@-webkit-keyframes shape9build {
  0% {
    opacity: 1;
    background-color: #ffffff;
    -webkit-clip-path: polygon(35.65% 16.4%, 41.1% 6.7%, 30.1% 26.1%);
    clip-path: polygon(35.65% 16.4%, 41.1% 6.7%, 30.1% 26.1%); }
  100% {
    opacity: 1;
    background-color: #ff9423;
    -webkit-clip-path: polygon(30.1% 0.4%, 41.1% 6.7%, 30.1% 26.1%);
    clip-path: polygon(30.1% 0.4%, 41.1% 6.7%, 30.1% 26.1%); } }