/*input.button-add {
/*    background-image: url(/images/buttons/add.png); /* 16px x 16px */
 /*   background-color: transparent; /* make the button transparent */
   /* background-repeat: no-repeat;  /* make the background image appear only once */
/*    background-position: 0px 0px;  /* equivalent to 'top left' */
 /*   border: none;           /* assuming we don't want any borders */
/*    cursor: pointer;        /* make the cursor like hovering over an <a> element */
 /*   height: 16px;           /* make this the size of your image */
 /*   padding-left: 16px;     /* make text start to the right of the image */
 /*   vertical-align: middle; /* align the text vertically centered */
/*}*/

.container {
  color: white;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw
}
.container h2 {
  padding: 0 0 0 0;
  text-align: center;
  font-size: 4.6em;
  color: white;
  font-family: 'Anton', sans-serif
}

.container p {
  padding: 0;
  text-align: center;
  font-size: 1.6em;
  color: white;
  font-family: 'Anton', sans-serif
}

/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN NAVIGATIONSPUNKTE an die HANDYs															   */
/* ------------------------------------------------------------------------------------------------------- */

.container input[type="radio"] {
  position: absolute;
  z-index: 10;
  top: 80%;
  transform: scale(3); /*  transform: scale(3, 0.25); */
  background-color: #ffffff;
  color: #c2c2c2;
}
.container #s1 { left: 20% }
.container #s2 { left: 40% }
.container #s3 { left: 60% }
.container #s4 { left: 80% }
.container #s5 { left: 100% }
.container .slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
  transition: left 0s 1s
}

/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN NAVIGATIONSPUNKTE an die PCs						  										   */
/* ------------------------------------------------------------------------------------------------------- */

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {

.container input[type="radio"] {	
/*.container input[type="image"] {	*/
  width: 1%;
  position: absolute;
  z-index: 10;
  top: 95%;
  transform: scale(2); /*  transform: scale(3, 0.25); */
  background-color: #ffffff;
  color: #c2c2c2;
}
.container #s1 { left: 41% }
.container #s2 { left: 45% }
.container #s3 { left: 49% }
.container #s4 { left: 53% }
.container #s5 { left: 57% }
.container .slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
  transition: left 0s 1s
}
}

.container [id^="s"]:checked+.slide {
  transition: all 0.65s ease-out;
  left: 0;
  z-index: 3
}
.container [id^="s"]:checked+.slide h2 {
  transition: transform 0.82s 0.5s ease, opacity 0.8s 0.7s ease;
  opacity: 1;
  transform: translateY(0)
}


/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN an die HANDY							   */
/* ------------------------------------------------------------------------------------------------------- */


.container .slide1 {
  background-image: url("../images-slider/slider01small_unscharf.jpg");
  background-size: cover 
}
.container .slide1 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide2 {
  background-image: url("../images-slider/slider02small_unscharf.jpg");
  background-size: cover
}
.container .slide2 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide3 {
  background-image: url("../images-slider/slider03small_unscharf.jpg");
  background-size: cover
}
.container .slide3 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide4 {
  background-image: url("../images-slider/slider04small_unscharf.jpg");
  background-size: cover
}
.container .slide4 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide5 {
  background-image: url("../images-slider/slider05small_unscharf.jpg");
  background-size: cover
}
.container .slide5 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN an die PC							   */
/* ------------------------------------------------------------------------------------------------------- */
/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {


.container .slide1 {
  background-image: url("../images-slider/slider01.jpg");
  background-size: cover 
}
.container .slide1 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide2 {
  background-image: url("../images-slider/slider02.jpg");
  background-size: cover
}
.container .slide2 h2 {
  opacity: 0;
  transform: translateY(-100%)
}
.container .slide3 {
  background-image: url("../images-slider/slider03.jpg");
  background-size: cover
}
.container .slide3 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide4 {
  background-image: url("../images-slider/slider04.jpg");
  background-size: cover
}
.container .slide4 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide5 {
  background-image: url("../images-slider/slider05.jpg");
  background-size: cover
}
.container .slide5 h2 {
  opacity: 0;
  transform: translateY(-100%)
}