/* Loaded */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  top: 45%;
  margin: 0 auto;
  z-index: 1001;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #16131B;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

#loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
  display:block;
}

.loader-mail {
  -webkit-perspective: 120px;
  -moz-perspective: 120px;
  -ms-perspective: 120px;
  perspective: 120px;
}
.loader-mail:after {
  content: "";
  position: absolute;
  left: 12px;
  top: 3px;
  animation: flip2 1.5s infinite;
  border: 38px solid transparent;
  border-top: 25px solid #16131B;
}
.loader-mail:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0px;
  width: 80px;
  height: 60px;
  background-color: #9D51EC;
  animation: flip 1.5s infinite;
}

@keyframes flip {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes flip2 {
  0% {
    transform: rotateY(-180deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}