/* use class */
/* data-aos="fade-up"
data-aos="fade-down"
data-aos="fade-right"
data-aos="fade-left"
data-aos="zoom-in"
data-aos="zoom-out"
data-aos="slide-up"
data-aos="flip-up"
data-aos="flip-down"
data-aos="flip-right"
data-aos="flip-left" */

@keyframes toLeft{
    0% {left: 50%;}
    50% {left: -10%;}
    100%{left: 50%;}
}
@keyframes toRight{
    0% {left: 50%;}
    50% {left: 110%;}
    100%{left: 50%;}
}
@keyframes scalable{
    form {transform: scale(0.1);}
    to{transform: scale(0.9);}
}
@keyframes rotable{
    form {transform: rotate(10deg);}
    to{transform: rotate(-10deg);}
}
@keyframes tangable{
    0% {transform: rotate(0deg);}
    25% {transform: rotate(10deg);}
    75%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

/* continuously pulse animation start apply shop button animation*/
.pulse {
	animation: 1.6s playShadow ease-out infinite;
  }
  @keyframes playShadow {
	0% {
	  box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
	  transform: scale(1);
	}
	18% {
	  box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
	}
	35% {
	  transform: scale(1.08);
	}
	76% {
	  transform: scale(0.96);
	}
	100% {
	  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0), 0 0 0 27px rgba(255, 255, 255, 0);
	  transform: scale(1);
	}
  }
/* continuously pulse animation start */

/* text hove animation apply on Splendid Features text animation*/
.s-hover {
  transition: all 0.5s ease 0s !important;
  padding: 0;
}
.s-hover:hover {
  padding: 0px 20px;
}
.footer-list .s-hover:hover{
  padding: 0px 15px !important;
}
/* text hove animation */


/* cursor animation for webpage please add js for this also name(cursor.js)*/
.cursor {
  width: 40px;
  height: 40px;
  border: 1px solid #ff6b35;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim .5s infinite alternate;
  pointer-events: none;
  z-index: 99999999;;
}
  
  .cursor::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    border: 9px solid #ff6b35;
    border-radius: 50%;
    opacity: .5;
    animation: cursorAnim2 .5s infinite alternate;
    top: 10%;
    left: 13%;
  }
  
  @keyframes cursorAnim {
	from {
	  transform: scale(1);
	}
	to {
	  transform: scale(0.7);
	}
  }
  @keyframes cursorAnim2 {
	from {
	  transform: scale(1);
	}
	to {
	  transform: scale(0.4);
	}
  }
  @keyframes cursorAnim3 {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(3);
	}
	100% {
	  transform: scale(1);
	  opacity: 0;
	}
  }
  /* cursor animation for webpage*/

/* image move Continuously top to bottom and bottom to top */
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* backgoound move infinite animation */
.bg-moving {
  background: gray url(https://subtlepatterns.com/patterns/geometry2.png) repeat 0 0;
  -webkit-animation: slide 20s linear infinite;
}
@-webkit-keyframes slide {
  from { background-position: 0 0; }
  to { background-position: -400px 0; }
}

/* backgoound move infinite animation */


/* bottom to top button */
#button {
  display: inline-block;
  background-color: #ff6b35;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-size: 20px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/* bottom to top button */

/* icon hover animation */

.hover-animate:hover {
  animation: shake 1300ms;
}
/* use this css in your hover classs */
/* animation: pulsehover 1500ms; 
   animation: shake 1300ms; 
   animation: spin 3000ms;
   animation: shake 1300ms;

*/
/* use this css in your hover classs */

@keyframes pulsehover {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  10% {
    transform: scaleX(0.85) scaleY(0.85);
  }
  20% {
    transform: scaleX(1) scaleY(1);
  }
  30% {
    transform: scaleX(0.85) scaleY(0.85);
  }
  40% {
    transform: scaleX(1) scaleY(1);
  }
  50% {
    transform: scaleX(0.85) scaleY(0.85);
  }
  60% {
    transform: scaleX(1) scaleY(1);
  }
  70% {
    transform: scaleX(0.85) scaleY(0.85);
  }
  80% {
    transform: scaleX(1) scaleY(1);
  }
  90% {
    transform: scaleX(0.85) scaleY(0.85);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@keyframes shake {
  0% {
    transform: rotateZ(0);
  }
  10% {
    transform: rotateZ(-30deg);
  }
  20% {
    transform: rotateZ(15deg);
  }
  30% {
    transform: rotateZ(-10deg);
  }
  40% {
    transform: rotateZ(7.5deg);
  }
  50% {
    transform: rotateZ(-6deg);
  }
  60% {
    transform: rotateZ(5deg);
  }
  70% {
    transform: rotateZ(-4.28571deg);
  }
  80% {
    transform: rotateZ(3.75deg);
  }
  90% {
    transform: rotateZ(-3.33333deg);
  }
  100% {
    transform: rotateZ(0);
  }
}
@keyframes spin {
  to {
    transform: rotateZ(720deg);
  }
}


/* Website Loader */
.loader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loadmain{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #0c0c0c;
  z-index: 9999;
}


@media (max-width: 991.98px) {
  .loadtext{
     font-size: 60px; 
     top: 60%;
     left: 50%;} }

@keyframes animate3{      
     0%{
        background-image: url(https://images.pexels.com/photos/1616403/pexels-photo-1616403.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
     }
     10%{
        background-image: url(https://images.pexels.com/photos/194098/pexels-photo-194098.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     20%{
        background-image: url(https://images.pexels.com/photos/1111369/pexels-photo-1111369.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
     }
     30%{
        background-image: url(https://images.pexels.com/photos/459799/pexels-photo-459799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     40%{
        background-image: url(https://images.pexels.com/photos/1428171/pexels-photo-1428171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     50%{
        background-image: url(https://images.pexels.com/photos/952670/pexels-photo-952670.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     60%{
        background-image: url(https://images.pexels.com/photos/1389460/pexels-photo-1389460.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     70%{
        background-image: url(https://images.pexels.com/photos/2832382/pexels-photo-2832382.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     80%{
        background-image: url(https://images.pexels.com/photos/1793525/pexels-photo-1793525.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
     }
     90%{
        background-image: url(https://images.pexels.com/photos/2690323/pexels-photo-2690323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
     }
     100%{
        background-image: url(https://images.pexels.com/photos/2340254/pexels-photo-2340254.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
     }
}

@keyframes animate4{
     from{color: #D2006B;}
     to{color: transparent;}
}

.loadtitle{
  font-family: monospace;
  font-size: 12px;
  color: white;
  letter-spacing: 5px;
}

.loadbar{
  width: 80px;
  height: 2px;
  background-color: #994fff;
  margin: 10px auto;
  border-radius:5px;
}

#fill{
     width: 0%;
     height: 100%;
     background-color: white;
     position: relative;
     top: 0px;
     left: 0px;
     border-radius:5px;
}