@-webkit-keyframes CHANGE  {
    0%   	{ margin-left: 0; 		}
	1%   	{ margin-left: 0; 		}
    20%   	{ margin-left: -100%; 	}
	21%   	{ margin-left: -100%; 	}
	60%		{ margin-left: -200%; 	}
	61%		{ margin-left: -200%; 	}
	100%   	{ margin-left: -300%; 	}
}

@-moz-keyframes  CHANGE  {
    0%   	{ margin-left: 0; 		}
	1%   	{ margin-left: 0; 		}
    20%   	{ margin-left: -100%; 	}
	21%   	{ margin-left: -100%; 	}
	60%		{ margin-left: -200%; 	}
	61%		{ margin-left: -200%; 	}
	100%   	{ margin-left: -300%; 	}
}

@-ms-keyframes  CHANGE  {
    0%   	{ margin-left: 0; 		}
	1%   	{ margin-left: 0; 		}
    20%   	{ margin-left: -100%; 	}
	21%   	{ margin-left: -100%; 	}
	60%		{ margin-left: -200%; 	}
	61%		{ margin-left: -200%; 	}
	100%   	{ margin-left: -300%; 	}
}

@-o-keyframes  CHANGE  {
    0%   	{ margin-left: 0; 		}
	1%   	{ margin-left: 0; 		}
    20%   	{ margin-left: -100%; 	}
	21%   	{ margin-left: -100%; 	}
	60%		{ margin-left: -200%; 	}
	61%		{ margin-left: -200%; 	}
	100%   	{ margin-left: -300%; 	}
}

#slider {
  max-width: 640px;
  /*max-height: 225px;*/
  height:auto;
  text-align: center;
  margin: 0 auto;
}

#slider img{
	width:100%;
	height:auto;
	max-height:440px;
	background:url(../images/BIKE-BIG-BG.jpg) no-repeat top left;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slides .inner {
  width: 400%;
}

#slides .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slides article {
  width: 25%;
  float: left;
}

#slide1:checked ~ #slides .inner {
  margin-left: 0;
}

#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}

input[type="radio"] {
  display: none;
}

label {
  background: rgb(150,150,150);
  display: inline-block;
  cursor: pointer;
  width: 50px;
  height: 5px;
  border-radius: none;
}
label:hover {
	background: rgb(50,50,50);
}

#slide1:checked ~ label[for="slide1"],
#slide2:checked ~ label[for="slide2"],
#slide3:checked ~ label[for="slide3"],
#slide4:checked ~ label[for="slide4"] {
  background: rgb(50,50,50);
}