@charset "UTF-8";

@keyframes contenttop {
  0% {
    -webkit-transform: perspective(4000px) rotateY(-180deg) scale(1);
    -ms-transform: perspective(4000px) rotateY(-180deg) scale(1);
    transform: perspective(4000px) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: perspective(4000px) rotateY(0deg) scale(1);
    -ms-transform: perspective(4000px) rotateY(0deg) scale(1);
    transform: perspective(4000px)  rotateY(0deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.top_outer {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: contenttop;
  animation-name: contenttop;
}

.kachel8x2_outer {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: contenttop;
  animation-name: contenttop;
}


.kachel8x2_outer {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: contenttop;
  animation-name: contenttop;
}


.top_inner {
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
}

.top_inner:hover {
    -webkit-transform: perspective(4000px) rotateX(30deg);
    transform: perspective(4000px) rotateX(30deg);
    -ms-transform: perspective(4000px) rotateX(30deg);
    transform: perspective(4000px) rotateX(20deg);
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

.kachel8x2 {
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
}

.kachel8x2:hover {
    -webkit-transform: perspective(4000px) rotateX(30deg);
    transform: perspective(4000px) rotateX(30deg);
    -ms-transform: perspective(4000px) rotateX(30deg);
    transform: perspective(4000px) rotateX(20deg);
	animation-direction: alternate;
	animation-iteration-count: infinite;
}


#content_top1_outer {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

#content_top2_outer {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

#content_top3_outer {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

#content_top4_outer {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.categories-list li {
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
}

.categories-list li:hover {
    -webkit-transform: perspective(8000px) rotateY(-10deg);
    transform: perspective(8000px) rotateY(-10deg);
    -ms-transform: perspective(8000px) rotateY(-10deg);
    transform: perspective(8000px) rotateY(-10deg);
	animation-direction: alternate;
	animation-iteration-count: infinite;
}