.animate {
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}

@keyframes slideIn {
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
	100% {
		transform:translateY(0rem);
		opacity: 1;
	}
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
}

@-webkit-keyframes slideIn {
	0% {top: 110px; left: 0;}
	20% {top: 0; left: 0;}
	50% {top: 0; left: 200px;}
	70% {top: 110px; left: 200px;}
	100% {top: 110px; left: 0;}
}

.slideIn {
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}

@keyframes header {
	0%{
		top: -100px;
	}
	100%{
		top: 0px;
	}
}

.header{
	animation-name: header;
}

@keyframes footer {
	0%{
		width: 400px;
	}
	100%{
		width: 100%;
	}
}

.footer{
	animation-name: footer;
}

@keyframes feature {
	0%{
		left: 100px;
		opacity: 0;
		width: 400px;
	}
	100%{
		left: 0;
		opacity: 1;
		width: 100%;
	}
}

.feature{
	animation-name: feature;
}

@keyframes image {
	0%{
		transform: translateY(20px);
	}
	100%{
		transform: translateY(-20px);
	}
}

.image{
	transition: 0.6s;
	animation-name: image;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes img-perspective-main{
	0%{
		transform:
		perspective(800px)
		rotateY(-100deg) scale(0.9)
		rotateX(-100deg) translateY(20px);
	}
	100%{
		transform:
		perspective(800px)
		rotateY(10deg) scale(0.9)
		rotateX(10deg) translateY(-20px);
	}
}

.img-perspective-main{
	transform:
	perspective(800px)
	rotateY(-25deg) scale(0.9)
	rotateX(10deg);
	transition: 0.6s;
	animation-duration: 4s;
	-webkit-animation-duration: 4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-name: img-perspective-main;
	animation-direction: alternate;
}

.img-perspective{
	transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  transition: 0.6s ease all;
}

.img-perspective:hover{
	transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
}

.img-perspective-reverse{
	transform:
    perspective(800px)
    rotateY(-25deg) scale(0.9)
    rotateX(10deg);
  transition: 0.6s ease all;
}

.img-perspective-reverse:hover{
	transform:
      perspective(800px)
      rotateY(15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
}