@import url('https://fonts.googleapis.com/css2?family=Kufam&display=swap');
body {
	margin: 0.5em auto;
	background: #97bf38;
	font-family: 'Kufam', Verdana,Arial, cursive;
	color:#0089b5; // blau
	text-align: center;
	display: flex;
	flex-flow: row wrap;
}


h1 {
	font-variant:small-caps;
	font-size: 1.6em;
	text-align: center;
	// color: #7d4993; // lila
	// color:#0089b5; //blau
	// color: #97bf38; //grün
	// color: #dae7b9; //hellgrün
}

h2 {
	margin : 0;
	font-variant:small-caps;
	font-size: 1.2em;
	color: #7d4993; // lila
	text-align: center;
	// color:#0089b5; //blau
	// color: #97bf38; //grün
	// color: #dae7b9; //hellgrün
}

p {	
	text-align: justify;
}

i {
	font-size: 1.2em;
}

b {
	color: #7d4993; // lila
}

a {
   cursor:pointer;
   text-decoration: none;
   color:#0089b5; //blau		
}

img {
  width: 100%;
}

ul {
  text-align: left;
  indent : 10em; 
}


article,
aside {
	border-radius: 0px 0.8em 0.8em;
	border: 3px solid;
	padding: 10px;
	spacing: 10px;
	margin: 10px;
	flex: 1 100%;
}

article {
	order : 3;
	background: #dae7b9;
	border-color: #0089b5; //blau
	
}

article img{

	width: 50%;
}

aside {
	order : 2;
	font-variant:small-caps;
	background: #dae7b9;
	border-color: #0089b5; //blau
}

#bigaside {
	order : 4;
	background: #dae7b9;
	//flex: 3 1 0%;
	
}

#bigaside img{
	
    width : 90%;	
}

#bigaside iframe{
	
    width : 90%;
    height : 40vh;		
}


#kontakt {
	background-color: #97bf38;
	min-width: 18em;
	max-width: 18em;
}

/* nebeneinander bei ausreichender Breite */
@media all and (min-width: 47em) {
  article {
    flex: 5 1 0%;
  }
  aside {
    flex: 1 1 0%;
    order : 2;	  
  }
	
}

@media (max-width: 47em) { 
  aside {
    order : 5;
  }
  i {
	font-size: 1em;
  }
  #kontakt {
	  max-width: 100%;
  }
}



#kontakt_titel {
	background-color: white;
	background-image: url(logo.jpg);
	background-size: cover;
	padding: 5px;
	spacing: 2px;
	margin: 5px;
        border: 1px solid #0089b5; //blau
	text-decoration: none;

}

#kontakt_titel a {
    color: #0089b5; //blau
    

}

#kontakt h3 {
	font-size: 2em;
	color: #7d4993;;
}
#kontakt p {
	color: #0089b5;
}

/* style the main menu 8*/
.sf-menu{
    border: 1px solid #0089b5; //blau
    border-top: none;

}
/* get rid of padding and margin off all ul's (not sure about using * here, could be better) */
.sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
}

/* style the main nav list items */
.sf-menu li {
    background: #dae7b9;
    border-top: 1px solid #0089b5;
    border-bottom: 1px solid #0089b5;
    position:relative;
    width: 100%;
}
/* change the main nav list items on hover */ 
.sf-menu li:hover {
    background: #97bf38; //grün
    visibility:inherit; /* fixes IE7 'sticky bug' */
}
/* style all the links */
.sf-menu a {
    font-size: .9em;
    color: #0089b5; //blau
    display:block;
    padding: 6px 0;
    text-decoration: none;
    text-indent: 12px;
}

#gallery {

	position: relative;
	margin: 0;
	background: none;
	border: none;
}

#gallery figure {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 2em;
	z-index: 1;
	animation: wechseln 60s infinite;
}

#gallery figure:last-of-type {
	position: relative;
}

#gallery > figure figcaption {
	//position: absolute;
	left: 1em;
	font-size: 1.2em;
	font-weight: bold;
	top: 0.5em;
	z-index: 2;
	
	color: #7d4993; // lila
	//color: #dae7b9; // hellgrün
}

@keyframes wechseln {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	15% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

#gallery figure:nth-of-type(2) {
	animation-delay: 5s;
	opacity: 0;
}

#gallery figure:nth-of-type(3) {
	animation-delay: 10s;
	opacity: 0;
}
#gallery figure:nth-of-type(4) {
	animation-delay: 15s;
	opacity: 0;
}
#gallery figure:nth-of-type(5) {
	animation-delay: 20s;
	opacity: 0;
}
#gallery figure:nth-of-type(6) {
	animation-delay: 25s;
	opacity: 0;
}
#gallery figure:nth-of-type(7) {
	animation-delay: 30s;
	opacity: 0;
}
#gallery figure:nth-of-type(8) {
	animation-delay: 35s;
	opacity: 0;
}
#gallery figure:nth-of-type(9) {
	animation-delay: 40s;
	opacity: 0;
}
#gallery figure:nth-of-type(10) {
	animation-delay: 45s;
	opacity: 0;
}
#gallery figure:nth-of-type(11) {
	animation-delay: 50s;
	opacity: 0;
}
#gallery figure:nth-of-type(12) {
	animation-delay: 55s;
	opacity: 0;
}




#gallery img {
	width: min(100%, 600px);
	margin: 0;
	padding: 0;
}