#slides {}

.inner {
  width: 1100%;
}

.inner:after {
  content: '';
  display: block;
  height: 0;
  clear: both
}

.page {
  float: left;
  width: calc(100% / 11)
}

/*.page img {
  width: 800px;
  max-width: 100%;
  height: 400px
}*/

#overflow {
  overflow: hidden
}

input {
  display: none
}

#controls {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 0;
  height: 50px
}

#controls label {
  display: none;
  opacity: 0.7;
  cursor: pointer
}

#controls label:hover {
  opacity: 0.8
}


/* перелистывание фотографий */

#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(6),
#slide6:checked~#controls label:nth-child(7),
#slide7:checked~#controls label:nth-child(8),
#slide8:checked~#controls label:nth-child(9),
#slide9:checked~#controls label:nth-child(10),
#slide10:checked~#controls label:nth-child(11),
#slide11:checked~#controls label:nth-child(1) {
  background-image: url(../gallery/right.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 80px;
  float: right;
  margin-right: 10px;
  display: block;
  z-index: 1000;
}

#slide1:checked~#controls label:nth-child(11),
#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),
#slide6:checked~#controls label:nth-child(5),
#slide7:checked~#controls label:nth-child(6),
#slide8:checked~#controls label:nth-child(7),
#slide9:checked~#controls label:nth-child(8),
#slide10:checked~#controls label:nth-child(9),
#slide11:checked~#controls label:nth-child(10) {
  /*стрелка слева*/
  background-image: url(../gallery/left.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 80px;
  float: left;
  display: block;
  margin-left: 10px;
  z-index: 1000
}

#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%;
}

#slide6:checked~#slides .inner {
  margin-left: -500%;
}

#slide7:checked~#slides .inner {
  margin-left: -600%;
}

#slide8:checked~#slides .inner {
  margin-left: -700%;
}

#slide9:checked~#slides .inner {
  margin-left: -800%;
}

#slide10:checked~#slides .inner {
  margin-left: -900%;
}

#slide11:checked~#slides .inner {
  margin-left: -1000%;
}


/*точки для перелистывания*/

#active {
  text-align: center;
  margin-top: 10px
}

#active label {
  width: 15px;
  height: 15px;
  background: #333;
  display: inline-block;
  cursor: pointer;
  border-radius: 10px
}

#active label:hover {
  background: #76c8ff
}

#slide1:checked~#active label:nth-child(1),
#slide2:checked~#active label:nth-child(2),
#slide3:checked~#active label:nth-child(3),
#slide4:checked~#active label:nth-child(4),
#slide5:checked~#active label:nth-child(5),
#slide6:checked~#active label:nth-child(6),
#slide7:checked~#active label:nth-child(7),
#slide8:checked~#active label:nth-child(8),
#slide9:checked~#active label:nth-child(9),
#slide10:checked~#active label:nth-child(10),
#slide11:checked~#active label:nth-child(11) {
  background: #bbb;
}

#slides .inner {
  transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}