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

.demo {
  padding: 40px 0;
	max-width: 1100px;
		float: left;
}

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

#button1:checked ~ .slides .slides-wrap {	
  margin-left: 0;

}
#button1:checked ~ .dots label:nth-child(1) {
  opacity: 005;
}

#button2:checked ~ .slides .slides-wrap {
  transform: translateX(-10%);
}
#button2:checked ~ .dots label:nth-child(2) {
  opacity: 0.5;
}

#button3:checked ~ .slides .slides-wrap {
  transform: translateX(-20%);
}
#button3:checked ~ .dots label:nth-child(3) {
  opacity: 0.5;
}

#button4:checked ~ .slides .slides-wrap {
  transform: translateX(-30%);
}
#button4:checked ~ .dots label:nth-child(4) {
  opacity: 0.5;
}
#button5:checked ~ .slides .slides-wrap {
  margin-left: 0;
  transform: translateX(-40%); 
}
#button5:checked ~ .dots label:nth-child(5) {
  opacity: 0.5;
}

#button6:checked ~ .slides .slides-wrap {
  transform: translateX(-50%);
}
#button6:checked ~ .dots label:nth-child(6) {
  opacity: 0.5;
}

#button7:checked ~ .slides .slides-wrap {
  transform: translateX(-60%);
}
#button7:checked ~ .dots label:nth-child(7) {
  opacity: 0.5;
}

#button8:checked ~ .slides .slides-wrap {
  transform: translateX(-70%);
}
#button8:checked ~ .dots label:nth-child(8) {
  opacity: 0.5;
}
#button9:checked ~ .slides .slides-wrap {
  transform: translateX(-80%);
}
#button9:checked ~ .dots label:nth-child(9) {
  opacity: 0.5;
}

#button10:checked ~ .slides .slides-wrap {
  transform: translateX(-90%);
}
#button10:checked ~ .dots label:nth-child(10) {
  opacity: 0.5;
}
.slides {
  overflow: hidden;
  background: transparent;
	float: left;	
}

.slides-wrap {
  overflow: hidden;
  list-style-type: none;
  /*   animation: slideshow 25s infinite; */
  transition: all .3s ease-out;
	float: left;width: 1000%;
}

.slide {
  position: relative;
  float: left;
width: calc(100% / 10);
}
.slide img {
  vertical-align: bottom;
  width: 100%;
}

.dots {
  margin: 15px 0;
  text-align: center;
}
.dots label {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  margin-right: 14px;
  background: #888;
  border-radius: 50%;
  cursor: pointer;
  transition: all .1s ease-out;
}
.dots label:last-child {
margin-top: 5%;	
  margin-right: 0;
}

.title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-size: 32px;
  text-align: center;
}

div.box{
	height: 300%
	background-size: 10%;
}

/* Auto Play 
* Buttons don't work when this is on though....
*/




/*----------------Anfang Galerie----------------------------------*/

/*Bildinhalt erster Button*/
		a.bild1 {
		background-image: url(../img/frauen_800_4.png);
			
}

		a:hover.bild1 {
		background-image: url(../img/frauen_800_5.png);
			
}
/*Ende Bildinhalt erster Button*/


/*Bildinhalt zweiter Button*/
		a.bild2 {
		background-image: url(../img/Kinder_300px_4.png);
}

		a:hover.bild2 {
		background-image: url(../img/Kinder_300px_5.png);
}
/*Ende Bildinhalt zweiter Button*/

/*Bildinhalt dritter Button*/
		a.bild3 {
		background-image:url(../img/events_500px_4.png);
}

		a:hover.bild3 {
		background-image: url(../img/events_500px_5.png);
}
/*Ende Bildinhalt dritter Button*/

/*Bildinhalt vierter Button*/
		a.bild4 {
		background-image:url(../img/architektur_250px_4.png);
}

		a:hover.bild4 {
		background-image: url(../img/architektur_250px_5.png);
}
/*Ende Bildinhalt vierterButton*/

/*Bildinhalt fünfter Button*/
		a.bild5 {
		background-image:url(../img/tiere_200px_4.png);
}

		a:hover.bild5 {
		background-image: url(../img/tiere_200px_5.png);
}
/*Ende Bildinhalt fünfter Button*/

/*Bildinhalt sechster Button*/
		a.bild6 {
		background-image:url(../img/frauen2_4.png);
}

		a:hover.bild6 {
		background-image: url(../img/frauen2_5.png);
}
/*Ende Bildinhalt sechster Button*/



/*----------------Ende Galerie----------------------------------*/


				

/*-----------------------------------------mein Slider*/


/*-----------------------------------------EndeSlider*/

main.kugeln{
	display: none;
}

	div.meinebilder {
			display:none;
		}
				
@media (max-width:600px){
	
		div.demo{
		display:none;
		}
		
		div.slides{
			display:none;
		}
		
		
		div.meinebilder {
			display:block;
		}

		
			main.kugeln{
			padding-top: 10%;
			margin: 0 auto;
			padding-left: 0%;	
			}



			p.img{
			display: none;
			}	

			main.kugeln{display:flex;
			align-content: center;}


			.kugeln div{
			float: none;
			margin: 20px auto;	
			}
		
			div.kugeln{
			max-width: none;
			}
			div:hover kugeln{
			text-align: center;
			}

	
}