/*-----------------------inview------------------------*/
.box{
	opacity:0;
}
.slideUp{
	opacity:1;
	animation:slideUp .5s ease-in-out forwards;
}
.box2{
	opacity:0;
}
.slideUp2{
	opacity:1;
	animation:slideUp 2s ease-in-out forwards;
}
@keyframes slideUp{
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.side{
	opacity:0;
}
.sideIn{
	opacity:1;
	animation:sideInRight .5s ease-in-out forwards;
}
.side2{
	opacity:0;
}
.sideIn2{
	opacity:1;
	animation:sideInLeft .8s ease-in-out forwards;
}
@keyframes sideInRight{
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%,0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes sideInLeft{
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%,0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.delay02{
	opacity: 0;
	animation-delay: .2s;
}
.delay04{
	opacity: 0;
	animation-delay: .4s;
}
.delay06{
	opacity: 0;
	animation-delay: .6s;
}
.delay08{
	opacity: 0;
	animation-delay: .8s;
}
.delay10{
	opacity: 0;
	animation-delay: 1s;
}
.delay12{
	opacity: 0;
	animation-delay: 1.2s;
}
.delay14{
	opacity: 0;
	animation-delay: 1.4s;
}

/*-----------------------TOP------------------------*/
.top_anime{
	animation:rotate-anime 20s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}
@keyframes updown {
    0% {
        transform: translate(0,0px);
    }
	25% {
        transform: translate(0,5px)
    }
	50% {
        transform: translate(0,0px)
    }
    75% {
        transform: translate(0,-5px)
    }
	100% {
        transform: translate(0,0)
    }
}
@keyframes service-anime {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: .3;
  }
  100% {
    transform: translate(-50%, -50%) scale(2, 2);
   filter: blur(5px);
    opacity: 0;
  }
}

@keyframes slide-anime{
	0%{
	  transform: translateX(180%);
	}
	100%{
  transform: translateX(-100%);
  }
}