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

/*Slideshow auf der Startseite---------------------*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  float:left;
  width: 600px; 
  position: relative;
  margin:0 auto; 
}

/* Hide the images by default */
.mySlides {display: none;}

/* Next & previous buttons */
.prev, .next {
  position: absolute;
  top: 397px;
  width: auto;
/* margin-top: -22px;
  margin-bottom:-10px;*/
  padding: 8px;
  
  color: #ccc;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  /*border-radius: 0 3px 3px 0;*/ 
  cursor: pointer;
}

.next {right: 0; border-radius: 3px 0 0 3px;}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 color:#fff; /*background-color: rgba(0,0,0,0.8);*/
}

/* Caption text */
.text {
  position: relative;
  width: 100%; min-height:30px;  
  padding: 1% 5px 1% 5px;

  color: #FFF;
  font-size: 15px;
  text-align: center;
  line-height:1.7em;
  
  background:#444;/*Hintergrundfarbe*/}


.thumbs{margin:20px 0 0 0px; max-width:615px;}

/* Six columns side by side */
.column {float: left; width: 23%; margin-right:2%; margin-bottom:2%;}

/* Add a transparency effect for thumnbail images */
.demo {opacity: 0.6;}

.demo:hover {opacity: 1; cursor:pointer;}


/* Fading animation-------------------------------- */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/*--------------------------------*/



/* Smartphones*/
@media screen and (min-width: 320px) and (max-width: 800px){

/* Slideshow container */
.slideshow-container {clear:both; width: 100%;}

.slideshow-container .mySlides img{margin:0 auto ; max-width: 100%; }

.prev, .next{top:75%;}
.prev{left:4%;}
.next {right:4%;}

/* Caption text */
.text {margin:0 auto; max-width: 100%;}
 
.thumbs{margin:0 0 20px 2% ; max-width:100%;}
}


/*Tablet, portrait
@media screen and (width: 768px)  and (max-width: 800px){

.slideshow-container {clear:both;  width: 600px; margin:10px 0 10px 0; padding:0; }
.slideshow-container .mySlides img{margin:0 auto ; max-width: 600px; }



.prev, .next{top:93%;	}
.prev{left:12%;	}
.next {right:12%;}	
.portfolio .main-column{}
.thumbs{margin:0 0 20px 2% ; width:100%; background:#0F0;}
}
*/
/*Tablet, Landscape*/
@media screen and (min-width: 801px) and (max-width: 1023px){
	
/* Slideshow container */
.slideshow-container { width: 600px;  margin-left:2%; }

.prev, .next{top:90%;	}
.prev{left:4%;	}
.next {right:4%;}	

.thumbs{margin:0 0 20px 2% ; max-width:100%;}
}