/*@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i");*/

body {
  padding: 0;
  margin: 0;
}

#app-site {
  display: flex;
  width: 100%;
  height: 100vh;
}

.loader {
  position: relative;
  margin: 0 auto;
  width: 60px;
  height: 100vh;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.loading {
  width: 120px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.loader-container{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100vh;
  width: 100vw;
  margin:0;
  background:black;
}
.loader-container2{
  border-radius: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
  width: 100%;
  margin:0;
  background:black;
}

.brand {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  text-align: center;
  
}
.brand:before {
  
  background-size: 100% 100%;
  content: "Pers Fx";
  line-height: 205px;
  color: #ff004e;
  font-size: 20px;
  font-family: "HEAVITAS", "Helvetica Rounded", Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  width: 200px;
  height: 200px;
  margin: 0 -100px;
  position: absolute;
  
  z-index: 99999 !important;
}

.logo{
  animation: 5s linear infinite;
  animation-name: rotate-0;
  animation-delay: 0s;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  
}


svg path{
  positon:absolute;
  fill:none;
  stroke-width:2;
  top:0;
  left:0;
  /*mix-blend-mode: multiply;*/
  transform-origin: 50% 50%;
  transform: rotate(0deg) ;
  animation: 4s linear infinite;
}

.logo svg path:nth-child(1) {
  opacity: 1;
  animation-name: rotate-1;
  animation-delay: .5s;
}
.logo svg path:nth-child(2) {
  opacity: .5;
  animation-name: rotate-2;
  animation-delay: .6s;
}
.logo svg path:nth-child(3) {
  opacity: .8;
  animation-name: rotate-3;
  animation-delay: .7s;
}


@keyframes scale-1 {
  0%{
    transform: scale(1);
  }50% {
    transform: scale(.9);
  }100% {
    transform: scale(1);
  } 
}

@keyframes rotate-0 {
  from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
} 

@keyframes rotate-1 {
  from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-2 {
  from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes rotate-3 {
  from { transform: rotate(0deg); }
    to { transform: rotate(0deg); }
}

/*# sourceMappingURL=loader.css.map */