/*задаём главному блоку ширину и позиционируем его по центру браузера*/
#slider 
{
	width: 3360px;
	max-width: 100%;
}

/*скрывает стадартные радио-кнопки input-ов*/
#slider input[type=radio] 
{
	display: none;
}

#slider label 
{
	cursor: pointer;
	text-decoration: none;
}

/*оформление блока в котором находятся картинки*/
#slides 
{
	position: relative;
	z-index: 1;
}

/*скрывает все картинки не попадающие в слайдер*/
#overflow 
{
	width: 100%;
	overflow: hidden;
}

#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%;}
#slide5:checked ~ #slides .inner {margin-left: -400%;}

#slides .inner 
{
	/*-webkit-transform: translateZ(0);*/
	transform: translateZ(0);
	transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

/*ширина блока с картинками*/
#slides .inner 
{
	width: 500%;
	line-height: 0;
	height: 1632px;
}

#slides .slide 
{
	width: 20%;
	float: left;
	display: block;
	height: 100%;
	color: #FFFFFF;
}

#slides .slide_1 {background: url(../slides/d1.png);}
#slides .slide_2 {background: url(../slides/d2.png);}
#slides .slide_3 {background: url(../slides/d3.png);}
#slides .slide_4 {background: url(../slides/d4.png);}
#slides .slide_5 {background: url(../slides/d5.png);}

#controls 
{
	margin: -1632px 0 0 0;
	width: 100%;
	z-index: 3;
	position: relative;
}

#controls label 
{
	display: none;
	width: 90px;
	height: 90px;
	opacity: 0.4;
	padding: 41px;
}

#controls label:hover 
{
	transition: opacity 0.2s ease-out;
	opacity: 1;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) 
{
	background: url(../images/button_right.png) no-repeat;
	float: right;
	margin-right: 51px;
	margin-top: 724px;
	display: block;
}

#slide1:checked ~ #controls label:nth-child(5), 
#slide2:checked ~ #controls label:nth-child(1), 
#slide3:checked ~ #controls label:nth-child(2), 
#slide4:checked ~ #controls label:nth-child(3), 
#slide5:checked ~ #controls label:nth-child(4) 
{
	background: url(../images/button_left.png) no-repeat;
	float: left;
	margin-left: 141px;
	margin-top: 724px;
	display: block;
}