/*--------------------------------------------------------------
Nucleare Pro Loader
--------------------------------------------------------------*/
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999999;
	background: #f2f2f2;
	height: 100%;
}

/* Animation 1 */
.cLoader1 {  
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.cLoader1:before {
    content: '';
    width: 50px;
    height: 5px;
    background: black;
    opacity: 0.1;
    position: absolute;
    top: 59px;
    left: 0;
    border-radius: 50%;
    animation: shadow .5s linear infinite;
}
.cLoader1:after {
    content: '';
    width: 50px;
    height: 50px;
    background: #eb911c;
    animation: animate .5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
}

@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}


@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}

/* Animation 2 */
.cLoader2 {
	margin: -45px -60px;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
}
#dot {
  background: #eb911c;
  border-radius: 50%; 
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  left: 27px;
  transform-origin: center bottom;
  animation: dot .6s ease-in-out infinite;
}
@-webkit-keyframes dot {
 0% { transform: scale(1,.7) }
 20% { transform: scale(.7,1.2) }
 40% { transform: scale(1,1)} 
 50% { bottom: 100px;} 
 46% { transform: scale(1,1)} 
 80% { transform: scale(.7,1.2) } 
 90% { transform: scale(.7,1.2) } 
 100% { transform: scale(1,.7) }
}
.step {
  position: absolute;
  width: 30px;
  height: 30px;
  border-top: 2px solid #eb911c;
  top: 0;
  right:0;
}
@-webkit-keyframes anim { 
	0% { 
    opacity: 0;
    top: 0; 
    right: 0; 
  }
  50% { opacity: 1; }
	100% { 
    top: 90px; 
    right: 90px;
    opacity: 0;
  }
}
#s1 { animation: anim 1.8s linear infinite; }
#s2 { animation: anim 1.8s linear infinite -.6s; }
#s3 { animation: anim 1.8s linear infinite -1.2s; }

/* Animation 3 */
.cLoader3 {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}

.cLoader3, .cLoader3:before, .cLoader3:after {
  position: absolute;
  border: 3px solid transparent;
  border-top: 3px solid #eb911c;
  border-radius: 50%;
  animation: rotate linear infinite;
  content: '';
}

.cLoader3 {
  height: 100px;
  width: 100px;
  animation-duration: 1.05s;
}

.cLoader3:before {
  height: 75px;
  width: 75px;
  top: 10px;
  left: 10px;
  animation-duration: 10s;
}

.cLoader3:after {
  height: 50px;
  width: 50px;
  top: 22px;
  left: 22px;
  animation-duration: 4s;
}

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

/* Animation 4 */
.cLoader4 {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #eb911c;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #eb911c;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #eb911c;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

/* Animation 5 */
.cLoader5 {
	position:fixed;
	margin: auto;
	left:0;
	right:0;
	top:50%;
	width : 90px;
}
  
.cLoader5 ul {
    margin : 0;
    list-style:none;
    width:90px;
    position : relative;
    padding : 0;
    height:10px;
}

.cLoader5 ul li {
      position : absolute;
      width:2px;
      height : 0;
      background: #eb911c;
      bottom : 0;
}
  

@keyframes sequence1 {
	0%{ height: 10px; }
	50%{ height:50px; }
	100%{ height: 10px; }
}

@keyframes sequence2 {
	0%{ height: 20px; }
	50%{ height: 65px; }
	100%{ height: 20px; }
}

.cLoader5 li:nth-child(1){
  left : 0;
  animation: sequence1 1s ease infinite 0;
}
.cLoader5 li:nth-child(2){
  left : 15px;
  animation: sequence2 1s ease infinite 0.1s;
}
.cLoader5 li:nth-child(3){
  left : 30px;
  animation: sequence1 1s ease-in-out infinite 0.2s;
}
.cLoader5 li:nth-child(4){
  left : 45px;
  animation: sequence2 1s ease-in infinite 0.3s;
}

.cLoader5 li:nth-child(5){
  left : 60px;
  animation: sequence1 1s ease-in-out infinite 0.4s;
}
.cLoader5 li:nth-child(6){
  left : 75px;
  animation: sequence2 1s ease infinite 0.5s;
}