/*loading animation*/
#loaderwrap {
  background-color: black;
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  display: none;
  text-align: center;
}
#daruload {
  position: absolute;
  margin: 0 auto;
  top: 5vh;
  left: calc(50vw - 153px);
  display: none;
}
.darucircle {
  position:absolute;
  overflow:hidden;
  border-radius: 0;
}
#daruhead {
  top: 100px;
  left: 100px;
  width: 100px;
  height:100px;
  transform: rotate(-150deg);
}
#darubody {
  top:181px;
  left:75px;
  width: 150px;
  height:150px;
  transform: rotate(19.5deg);
}
.darucircle::before, .darucircle::after {
  content:"";
  box-sizing:border-box;
  position:absolute;
  top:0;
  right:0; 
  border-style:solid;
  border-color:darkslategray;
  border-width:6px 6px 0;
}
#daruhead::before, #daruhead::after {
  width:100px;
  height:50px;
  border-radius:50px 50px 0 0;
  transform-origin:50px 50px;
}
#darubody::before, #darubody::after { 
  width:150px;
  height:75px;
  border-radius:75px 75px 0 0;
  transform-origin:75px 75px;
}
#daruhead::before{
  z-index:1;
  transform:rotate(210deg);
}
#daruhead::after{
  opacity:1;
  z-index:2;
  transform:rotate(90deg);
}
#darubody:before{
  z-index:1;
  transform:rotate(231deg);
}
#darubody:after{
  opacity:1;
  z-index:2;
  transform:rotate(90deg);
}
.daruloader {
  color: #ffffff;  
  text-indent: -9999em;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  z-index: 3;
}
#daruloader1 {
  font-size: 57px;
  width: 0.95em;
  height: 0.95em; 
  left: 124px;
  top: 124px;
  -webkit-animation: round1 1.5s infinite linear;
  animation: round1 1.5s infinite linear;
  opacity: 1;
}
#daruloader2 {
  font-size: 86.5px;
  width: 0.9em;
  height: 0.9em;
  left: 110px;
  top: 218px;
  position: absolute;
  -webkit-animation: round2 1.5s infinite linear;
  animation: round2 1.5s infinite linear;
  opacity: 0;
}
@-webkit-keyframes round1 {
  0% {
    opacity: 1:
    -webkit-transform: rotate(-150deg);
    transform: rotate(-150deg);
  }
  44.9% {
    opacity: 1;
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(-150deg);
    transform: rotate(-150deg);
  } 
}
@keyframes round1 {
    0% {
      opacity: 1;
    -webkit-transform: rotate(-150deg);
    transform: rotate(-150deg);
  }
  44.9% {
    opacity: 1;
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(-150deg);
    transform: rotate(-150deg);
  } 
}
@-webkit-keyframes round2 {
  0% {
    opacity: 0;
  }
  44.9% {
    opacity: 0;
  }
  45% {
    opacity: 1;
    -webkit-transform: rotate(19.5deg);
    transform: rotate(19.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(340.5deg);
    transform: rotate(340.5deg);
  } 
}
@keyframes round2 {
  0% {
    opacity: 0;
  }
  44.9% {
    opacity: 0;
  }
  45% {
    opacity: 1;
    -webkit-transform: rotate(19.5deg);
    transform: rotate(19.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(340.5deg);
    transform: rotate(340.5deg);
  } 
}
#darutextbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
}
#darutext {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 70vh;

}
#darutext p {
  position: relative;
  display: inline;
  color: white;
  font-size: 4.5vh;
}
#p1 {
  -webkit-animation: t1 2.8s linear;
  animation: t1 2.8s linear;
}
#p2 {
  -webkit-animation: t2 2.8s linear;
  animation: t2 2.8s linear;
}
#p3 {
  -webkit-animation: t3 2.8s linear;
  animation: t3 2.8s linear;
}
#p4 {
  -webkit-animation: t4 2.8s linear;
  animation: t4 2.8s linear;
}
#p5 {
  -webkit-animation: t5 2.8s linear;
  animation: t5 2.8s linear;
}
#p6 {
  -webkit-animation: t6 2.8s linear;
  animation: t6 2.8s linear;
}
#p7 {
  -webkit-animation: t7 2.8s linear;
  animation: t7 2.8s linear;
}
#p8 {
  -webkit-animation: t8 2.8s linear;
  animation: t8 2.8s linear;
}
#p9 {
  -webkit-animation: t9 2.8s linear;
  animation: t9 2.8s linear;
}
#p10 {
  -webkit-animation: t10 2.8s linear;
  animation: t10 2.8s linear;
}
#p11 {
  -webkit-animation: t11 2.8s linear;
  animation: t11 2.8s linear;
}
#p12 {
  -webkit-animation: t12 2.8s linear;
  animation: t12 2.8s linear;
}
#p13 {
  -webkit-animation: t13 2.8s linear;
  animation: t13 2.8s linear;
}
#p14 {
  -webkit-animation: t14 2.8s linear;
  animation: t14 2.8s linear;
}
@-webkit-keyframes t1 {
  0% {
    bottom: 10px;
  }
  6.99% {
    bottom: 10px;
  }
  7% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t1 {
  0% {
    bottom: 10px;
  }
  6.99% {
    bottom: 10px;
  }
  7% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t2 {
  0% {
    bottom: 0px;
  }
  6.99% {
    bottom: 0px;
  }
  7% {  
    bottom: 10px;
  }
  13.99% {
    bottom: 10px;
  }
  14% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t2 {
  0% {
    bottom: 0px;
  }
  6.99% {
    bottom: 0px;
  }
  7% {
    
    bottom: 10px;
  }
  13.99% {
    bottom: 10px;
  }
  14% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t3 {
  0% {
    bottom: 0px;
  }
  13.99% {
    bottom: 0px;
  }
  14% { 
    bottom: 10px;
  }
  20.99% {
    bottom: 10px;
  }
  21% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t3 {
  0% {
    bottom: 0px;
  }
  13.99% {
    bottom: 0px;
  }
  14% { 
    bottom: 10px;
  }
  20.99% {
    bottom: 10px;
  }
  21% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t4 {
  0% {
    bottom: 0px;
  }
  20.99% {
    bottom: 0px;
  }
  21% {
    bottom: 10px;
  }
  27.99% {
    bottom: 10px;
  }
  28% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t4 {
  0% {
    bottom: 0px;
  }
  20.99% {
    bottom: 0px;
  }
  21% {
    bottom: 10px;
  }
  27.99% {
    bottom: 10px;
  }
  28% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t5 {
  0% {
    bottom: 0px;
  }
  27.99% {
    bottom: 0px;
  }
  28% {
    bottom: 10px;
  }
  34.99% {
    bottom: 10px;
  }
  35% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t5 {
  0% {
    bottom: 0px;
  }
  27.99% {
    bottom: 0px;
  }
  28% {
    bottom: 10px;
  }
  34.99% {
    bottom: 10px;
  }
  35% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t6 {
  0% {
    bottom: 0px;
  }
  34.99% {
    bottom: 0px;
  }
  35% {
    bottom: 10px;
  }
  41.99% {
    bottom: 10px;
  }
  42% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t6 {
  0% {
    bottom: 0px;
  }
  34.99% {
    bottom: 0px;
  }
  35% {
    
    bottom: 10px;
  }
  41.99% {
    bottom: 10px;
  }
  42% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t7 {
  0% {
    bottom: 0px;
  }
  41.99% {
    bottom: 0px;
  }
  42% {  
    bottom: 10px;
  }
  48.99% {
    bottom: 10px;
  }
  49% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t7 {
  0% {
    bottom: 0px;
  }
  41.99% {
    bottom: 0px;
  }
  42% {
    bottom: 10px;
  }
  48.99% {
    bottom: 10px;
  }
  49% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t8 {
  0% {
    bottom: 0px;
  }
  48.99% {
    bottom: 0px;
  }
  49% {  
    bottom: 10px;
  }
  55.99% {
    bottom: 10px;
  }
  56% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t8 {
  0% {
    bottom: 0px;
  }
  48.99% {
    bottom: 0px;
  }
  49% {
    bottom: 10px;
  }
  55.99% {
    bottom: 10px;
  }
  56% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t9 {
  0% {
    bottom: 0px;
  }
  55.99% {
    bottom: 0px;
  }
  56% {
    bottom: 10px;
  }
  62.99% {
    bottom: 10px;
  }
  63% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t9 {
  0% {
    bottom: 0px;
  }
  55.99% {
    bottom: 0px;
  }
  56% {
    bottom: 10px;
  }
  62.99% {
    bottom: 10px;
  }
  63% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t10 {
  0% {
    bottom: 0px;
  }
  62.99% {
    bottom: 0px;
  }
  63% {
    bottom: 10px;
  }
  69.99% {
    bottom: 10px;
  }
  70% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t10 {
  0% {
    bottom: 0px;
  }
  62.99% {
    bottom: 0px;
  }
  63% {
    bottom: 10px;
  }
  69.99% {
    bottom: 10px;
  }
  70% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t11 {
  0% {
    bottom: 0px;
  }
  69.99% {
    bottom: 0px;
  }
  70% { 
    bottom: 10px;
  }
  76.99% {
    bottom: 10px;
  }
  77% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t11 {
  0% {
    bottom: 0px;
  }
  69.99% {
    bottom: 0px;
  }
  70% { 
    bottom: 10px;
  }
  76.99% {
    bottom: 10px;
  }
  77% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t12 {
  0% {
    bottom: 0px;
  }
  76.99% {
    bottom: 0px;
  }
  77% { 
    bottom: 10px;
  }
  83.99% {
    bottom: 10px;
  }
  84% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t12 {
  0% {
    bottom: 0px;
  }
  76.99% {
    bottom: 0px;
  }
  77% { 
    bottom: 10px;
  }
  83.99% {
    bottom: 10px;
  }
  84% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t13 {
  0% {
    bottom: 0px;
  }
  83.99% {
    bottom: 0px;
  }
  84% { 
    bottom: 10px;
  }
  90.99% {
    bottom: 10px;
  }
  91% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t13 {
  0% {
    bottom: 0px;
  }
  83.99% {
    bottom: 0px;
  }
  84% { 
    bottom: 10px;
  }
  90.99% {
    bottom: 10px;
  }
  91% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@-webkit-keyframes t14 {
  0% {
    bottom: 0px;
  }
  90.99% {
    bottom: 0px;
  }
  91% { 
    bottom: 10px;
  }
  97.99% {
    bottom: 10px;
  }
  98% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes t14 {
  0% {
    bottom: 0px;
  }
  90.99% {
    bottom: 0px;
  }
  91% { 
    bottom: 10px;
  }
  97.99% {
    bottom: 10px;
  }
  98% {
    bottom: 0px;
  }
  100% {
    bottom: 0px;
  }
}
/*loading animation*/