@charset "utf-8";
/* CSS Document */

@keyframes slidy {
0% { left: 400%; }
20% { left: 400%; }
25% { left: 300%; }
45% { left: 300%; }
50% { left: 200%; }
70% { left: 200%; }
75% { left: 100%; }
95% { left: 100%; }
100% { left: 0%; }
}

/*body { margin: 0; } */
div#slider {
	overflow: hidden;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: list-item;
	margin-top: 7px;
	
}

div#slider figure img {
	width: 20%;
	float: right;
}

div#slider figure {
	
	position: relative;
	width: 500%;
	margin: 0;
	animation: 10s slidy infinite;
	left: -351px;
}
div#slider figure:hover {
    animation-play-state: paused
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

@ rotating {
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(180deg);
    }
}


.rotating {
    animation: rotating 2s linear infinite;
}

.face {
  position: absolute;;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}