body {
	background: #0089b5;
	//color: #dae7b9; //hellgrün
}

article,
aside  {	
	border-radius: 0px 2em 2em;
	border: 4px solid;
	padding: 10px;
	spacing: 10px;
	margin: 10px;
	border-color: #97bf38; 
	background: #dae7b9;
	text-align: justify;

}


article {
	order : 3;
}


aside {
	border-color: #97bf38;

}

#bigaside {
	background: #0089b5; //blau
}


@media all and (max-width: 41em) {
p {	
	//width: 80%;
  }
}



#kontakt_titel {
        border: 1px solid #97bf38; //grün

}

#kontakt_titel p {
	color: #0089b5;
}

#kontakt {
	background-color: #dae7b9;
}


/* style the main menu 8*/
.sf-menu{
    border: 1px solid #97bf38; //grün
}


/* style the main nav list items */
.sf-menu li {
    background: #dae7b9;//hellgrün
    border-top: 2px solid #97bf38; //grün
    border-top: 1px solid #97bf38; //grün
    border-bottom: 1px solid #97bf38; //grün
}
/* change the main nav list items on hover */ 
.sf-menu li:hover {
     color: #dae7b9; //hellgrün
}



/*Gallery Container*/
.image-gallery{
  position:relative;  
  margin:0 auto;
  width: 60em;  
  //border-radius:20px;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 60em;
  height: 36em;   
  margin:0 auto;  
  position:relative;
}
.image-gallery .big-image img{
  opacity:0;position:absolute;left:0px;top:0px; width: 60em;
  margin:0 auto;
  transition: opacity 350ms;
}


/*Selected image display*/
.image-gallery .big-image img:target{opacity:1;}

/*on select image display none the default image*/
.image-gallery .big-image img:target ~ img#default{opacity:0;}

/*Show Default Image in first load*/
.image-gallery .big-image img#default{opacity:1;}



.image-gallery .thumbs ul{
  float:left; transition:999999s all; transform:translateX(0);
}
.image-gallery .thumbs li{display:inline-block; margin-right:1px;}
.image-gallery .thumbs li a:hover{opacity:1;}
.image-gallery .thumbs li a{opacity:0.8;}
.image-gallery .thumbs li a:focus{opacity:1;}
.image-gallery .thumbs li img{width:10em;}


@media all and (min-width: 150em) {
.image-gallery{
  width: 120em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 120em;
  height: 80em;   
}
.image-gallery .big-image img{
  width: 120em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:5px 11px;
}

.image-gallery .thumbs li img{width:20em;}
  
}




@media all and (max-width: 150em) {
.image-gallery{
  width: 81em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 81em;
  height: 48em;   
}
.image-gallery .big-image img{
  width: 81em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:85px 11px;
}

.image-gallery .thumbs li img{width:15em;}
  
}


@media all and (max-width: 120em) {
.image-gallery{
  width: 60em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 60em;
  height: 40em;   
}
.image-gallery .big-image img{
  width: 60em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:-11px 11px;
}

.image-gallery .thumbs li img{width:10em;}
  
}


@media all and (max-width: 90em) {
.image-gallery{
  width: 40em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 40em;
  height: 24em;   
}
.image-gallery .big-image img{
  width: 40em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:30px 1px;
}

.image-gallery .thumbs li img{width:7em;}
  
}

@media all and (max-width: 75em) {
.image-gallery{
  width: 30em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 30em;
  height: 20em;   
}
.image-gallery .big-image img{
  width: 30em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:-12px 1px;
}

.image-gallery .thumbs li img{width:5em;}
  
}

@media all and (max-width: 65em) {
.image-gallery{
  width: 21em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 21em;
  height: 14em;   
}
.image-gallery .big-image img{
  width: 21em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:-12px 1px;
}

.image-gallery .thumbs li img{width:7em;}
  
}

@media all and (max-width: 40em) {
.image-gallery{
  width: 18em;  
}
/*Sets Big Image style*/
.image-gallery .big-image{
  width: 18em;
  height: 12em;   
}
.image-gallery .big-image img{
  width: 18em;
}

/***thumbs***/
.image-gallery .thumbs{
  overflow:hidden; white-space:wrap; margin:-12px 1px;
}

.image-gallery .thumbs li img{width:5em;}
  
}