@media (max-width: 1200px) {
	#cssSlider {
		width: 450px;
		height: 175px;
		overflow: hidden;
		border: 2px solid #666;
		margin: auto;
		margin-bottom: 3.5em;
	}
	#sliderImages {
		width : 2277.5px;
		height: 175px;
		overflow: hidden;
		
		/* animation duration: 8s : 5x ~3s display image + 5x ~0.2s slide */
		animation: slide 15s infinite;
		-moz-animation: slide 15s infinite;
		-webkit-animation: slide 15s infinite;
		-o-animation: slide 15s infinite;

	}
	#si_1 {width: 455.5px}
	#si_2 {width: 455.5px}
	#si_3 {width: 455.5px}
	#si_4 {width: 455.5px}
	#si_5 {width: 455.5px}
	#sliderImages img {
		float: left;
	}

	@keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -455.1px;}
		30%{margin-left: -455.1px;}
		40%{margin-left: -911px;}
		50%{margin-left: -911px;}
		60%{margin-left: -1366.5px;}
		70%{margin-left: -1366.5px;}
		80%{margin-left: -1822px;}
		90%{margin-left: -1822px;}
		100% {margin-left: -0px;}
	}

	@-moz-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -455.1px;}
		30%{margin-left: -455.1px;}
		40%{margin-left: -911px;}
		50%{margin-left: -911px;}
		60%{margin-left: -1366.5px;}
		70%{margin-left: -1366.5px;}
		80%{margin-left: -1822px;}
		90%{margin-left: -1822px;}
		100% {margin-left: -0px;}
	}

	@-webkit-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -455.1px;}
		30%{margin-left: -455.1px;}
		40%{margin-left: -911px;}
		50%{margin-left: -911px;}
		60%{margin-left: -1366.5px;}
		70%{margin-left: -1366.5px;}
		80%{margin-left: -1822px;}
		90%{margin-left: -1822px;}
		100% {margin-left: -0px;}
	}

	@-o-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -455.1px;}
		30%{margin-left: -455.1px;}
		40%{margin-left: -911px;}
		50%{margin-left: -911px;}
		60%{margin-left: -1366.5px;}
		70%{margin-left: -1366.5px;}
		80%{margin-left: -1822px;}
		90%{margin-left: -1822px;}
		100% {margin-left: -0px;}
	}
}

    @media (max-width: 600px) {
	#cssSlider {
		width: 225px;
		height: 87.5px;
		overflow: hidden;
		border: 2px solid #666;
		margin: auto;
		margin-bottom: 3.5em;
	}

	#sliderImages {
		width : 1138.75px;
		height: 87.5px;
		overflow: hidden;
		
		/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
		animation: slide 15s infinite;
		-moz-animation: slide 15s infinite;
		-webkit-animation: slide 15s infinite;
		-o-animation: slide 15s infinite;

	}
	
	#si_1 {width: 227.75px}
	#si_2 {width: 227.75px}
	#si_3 {width: 227.75px}
	#si_4 {width: 227.75px}
	#si_5 {width: 227.75px}
	#sliderImages img {
		float: left;
	}

	@keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -227.55px;}
		30%{margin-left: -227.55px;}
		40%{margin-left: -455.5px;}
		50%{margin-left: -455.5px;}
		60%{margin-left: -683.25px;}
		70%{margin-left: -683.25px;}
		80%{margin-left: -911px;}
		90%{margin-left: -911px;}
		100% {margin-left: -0px;}
	}

	@-moz-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -227.55px;}
		30%{margin-left: -227.55px;}
		40%{margin-left: -455.5px;}
		50%{margin-left: -455.5px;}
		60%{margin-left: -683.25px;}
		70%{margin-left: -683.25px;}
		80%{margin-left: -911px;}
		90%{margin-left: -911px;}
		100% {margin-left: -0px;}
	}

	@-webkit-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -227.55px;}
		30%{margin-left: -227.55px;}
		40%{margin-left: -455.5px;}
		50%{margin-left: -455.5px;}
		60%{margin-left: -683.25px;}
		70%{margin-left: -683.25px;}
		80%{margin-left: -911px;}
		90%{margin-left: -911px;}
		100% {margin-left: -0px;}
	}

	@-o-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -227.55px;}
		30%{margin-left: -227.55px;}
		40%{margin-left: -455.5px;}
		50%{margin-left: -455.5px;}
		60%{margin-left: -683.25px;}
		70%{margin-left: -683.25px;}
		80%{margin-left: -911px;}
		90%{margin-left: -911px;}
		100% {margin-left: -0px;}
	}
}
	
	@media (min-width: 1200px) {
	#cssSlider {
		width: 900px;
		height: 350px;
		overflow: hidden;
		border: 2px solid #666;
		margin: auto;
		margin-bottom: 7em;
	}
	

	#sliderImages {
		width : 4555px;
		height: 350px;
		overflow: hidden;
		
		/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
		animation: slide 30s infinite;
		-moz-animation: slide 30s infinite;
		-webkit-animation: slide 30s infinite;
		-o-animation: slide 30s infinite;

	}

	#sliderImages img {
		float: left;
	}

	@keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -911px;}
		30%{margin-left: -911px;}
		40%{margin-left: -1822px;}
		50%{margin-left: -1822px;}
		60%{margin-left: -2733px;}
		70%{margin-left: -2733px;}
		80%{margin-left: -3644px;}
		90%{margin-left: -3644px;}
		100% {margin-left: -0px;}
	}

	@-moz-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -911px;}
		30%{margin-left: -911px;}
		40%{margin-left: -1822px;}
		50%{margin-left: -1822px;}
		60%{margin-left: -2733px;}
		70%{margin-left: -2733px;}
		80%{margin-left: -3644px;}
		90%{margin-left: -3644px;}
		100% {margin-left: -0px;}
	}

	@-webkit-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -911px;}
		30%{margin-left: -911px;}
		40%{margin-left: -1822px;}
		50%{margin-left: -1822px;}
		60%{margin-left: -2733px;}
		70%{margin-left: -2733px;}
		80%{margin-left: -3644px;}
		90%{margin-left: -3644px;}
		100% {margin-left: -0px;}
	}

	@-o-keyframes slide{
		0%{margin-left: 0px;}
		10%{margin-left: 0px;}
		20%{margin-left: -911px;}
		30%{margin-left: -911px;}
		40%{margin-left: -1822px;}
		50%{margin-left: -1822px;}
		60%{margin-left: -2733px;}
		70%{margin-left: -2733px;}
		80%{margin-left: -3644px;}
		90%{margin-left: -3644px;}
		100% {margin-left: -0px;}
	}
}