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

#anim {
	/*width: 939px;
	height: 454px;*/
	width: 99%;
	max-width: 939px;
	min-width: 321px;
	height: auto;
	margin:0px auto;
	overflow:hidden;
	overflow-y: hidden;
	white-space:nowrap;
}
main {
	/*width:945px;
	height:auto;*/
	width: 90%;
	max-width: 945px;
	min-width: 324px;
	margin:0px auto;
}
#anim img {
	position:relative;
	display:inline-block;
	bottom:0px;
}
#center {
	width: 99%;
	max-width: 938px;
	height: auto;
	/*width: 938px;
	height: 454px;	*/
	-webkit-animation-duration:4s;
	-webkit-animation-delay:3s;
	-webkit-animation-timing-function: ease;
 	-webkit-animation-name: shift;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-direction: normal;
	-moz-animation-duration: 4s;
	-moz-animation-delay:3s;
	-moz-animation-timing-function: ease;
 	-moz-animation-name: shift;
  	-moz-animation-iteration-count: infinite;
  	-moz-animation-direction: normal;
	animation-duration: 4s;
	animation-delay:3s;
	animation-timing-function: ease;
 	animation-name: shift;
  	animation-iteration-count: infinite;
  	animation-direction: normal;
}
#right {
	width: 99%;
	max-width: 938px;
	min-width: 320px;
	height: auto;
	left: 99%;
	/*width: 938px;
	height: 454px;	
	left:938px;*/
	-webkit-animation-duration: 4s;
 	-webkit-animation-name: moof;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-direction: normal;
	-webkit-animation-delay:3s;
	-webkit-animation-timing-function: ease;
	-moz-animation-duration: 4s;
 	-moz-animation-name: moof;
  	-moz-animation-iteration-count: infinite;
  	-moz-animation-direction: normal;
	-moz-animation-delay:3s;
	-moz-animation-timing-function: ease;
	animation-duration: 4s;
 	animation-name: moof;
  	animation-iteration-count: infinite;
  	animation-direction: normal;
	animation-delay:3s;
	animation-timing-function: ease;
}
@keyframes shift {
  0% {
	width: 99%;
	max-width: 938px;
	min-width: 320px;
	height: auto;
	/*width: 938px;
	height: 454px;*/
	bottom:0px;
	left:0px;
  }

  33% {
	width: 0px;
	height: 0px;
	bottom:0px;
	/*left:-20px;*/
	left: -3%;
  }
  100% {
	width: 0px;
	height: 0px;
	bottom:0px;
	/*left:-20px;*/
	left: -3%;
  }
}
@-webkit-keyframes shift {
  0% {
	width: 99%;
	max-width: 938px;
	min-width: 320px;
	height: auto;
	/*width: 938px;
	height: 454px;*/
	bottom:0px;
	left:0px;
  }

  33% {
	width: 0px;
	height: 0px;
	bottom:0px;
	/*left:-20px;*/
	left: -3%;
  }
  100% {
	width: 0px;
	height: 0px;
	bottom:0px;
	/*left:-20px;*/
	left: -3%;
  }
}
@keyframes moof {
  0% {
	left: 100%;
	/*left:938px;*/
  }

  33% {
 	left:0px;
  }
  100% {
 	left:0px;
  }
}
@-webkit-keyframes moof {
  0% {
	left: 100%;
	/*left:938px;*/
  }

  33% {
 	left:0px;
  }
  100% {
 	left:0px;
  }
}
#info {
	width: 66%;
	/*width: 650px;*/
	margin:10px auto 0px auto;
}
main p {
	color:#555;
}
@media screen and (max-width: 400px) {
	main {
		width: 324px;
	}
	#center {
		width: 320px;
		height: 155px;
	}
	#right {
		width: 320px;
		height: 155px;
	}
	div#anim {
		width: 321px;
		height: 156px;
	}
	#info {
		width: 300px;
	}
	@keyframes shift {
		0% {
		width: 320px;
		height: 155px;
		bottom:0px;
		left:0px;
		}
		
		33% {
		width: 0px;
		height: 0px;
		bottom:0px;
		left:-20px;
		}
		100% {
		width: 0px;
		height: 0px;
		bottom:0px;
		left:-20px;
		}
	}
	@-webkit-keyframes shift {
		0% {
		width: 320px;
		height: 155px;
		bottom:0px;
		left:0px;
		}
		
		33% {
		width: 0px;
		height: 0px;
		bottom:0px;
		left:-20px;
		}
		100% {
		width: 0px;
		height: 0px;
		bottom:0px;
		left:-20px;
		}
	}
}