/*----- Tags -----*/
a {
  color: black; 
}

h1{
  font-size: 3em;
  font-weight: normal;
}

h2{
  font-size: 1.5em;
  font-weight: normal;
}

/*----- HTML -----*/

body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 100vh;
 
  background: #FFCC99;

}

/*----- HTML > Body -----*/
header{
  display: flex;
  flex-flow: row;
  justify-content: center;
 
}

#content{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  
  flex: 1;

}

footer{
  display: none;
  flex-flow: row wrap;

 
}



/*----- HTML > Body > Header -----*/
header > div.logo{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

header > div.logo > img{
  height: 5em;
}

header > h1{
  display: flex;
  flex: 7;
  justify-content: center;
  align-items: center;
}

/*----- HTML > Body > Content -----*/
nav{
  flex: 1;  
  text-align: center;
}

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: 7;  

}

/*----- HTML > Body > Content > Nav -----*/
 
nav ul li a {
  position: relative;
  padding: 0 0 2em 0;
  display: inline-block;
  text-decoration: none;
  text-transform: none;
}
 
nav ul.menu li a:hover {
  color: #b85402ec;
}

/*----- HTML > Body > Content > Main -----*/
article {
  display: flex;
  flex-flow: row wrap ;  
  justify-content: center;
}

/*----- HTML > Body > Content > Main > Article -----*/
article >  .home{
  display: inline-block;
}

article > .picture{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  flex: 1;
  align-content: flex-start;
}

article > .picture-imp{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  flex: 1;
  align-content: flex-start;
}

article > .picture-gal{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  flex: 1;
  align-content: flex-start;
}

article > .textblock{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  flex: 1;  
  margin-left: 0.5em;
}

article > div > .text{
  display: flex;
  flex-flow: row wrap;
  flex: 1;    
  align-items: flex-start ;
}

article > div > .text > h2{ 
  margin: 0em;
}

article > div> .side{
  flex: 1;  
}

/*----- Galerie -----*/
#galerie { 

}

#galerie figure {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
  height: 133px;
  width: 100px;
/*	margin: 0 0 5px 5px;
  */
  overflow: hidden;
	padding: 0;
	transition: all 0.25s ease-in;
}

#galerie figure img {
  margin: 0px 0px 0px 0px;
  height: 133px;
  width: 100px;
}

#galerie figure:hover,
#galerie figure:focus {
  
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	/*width: 15em;*/
	z-index: 2;
	transform: scale(2);
}

#galerie figcaption {
	color: #333;
	font: cursive 10px/150%;
	position: relative;
	text-align: center;
  /*width: 15em;*/
}

#galerie figure:nth-child(3n-2):hover,
#galerie figure:nth-child(3n-2):focus {
	transform: scale(2) rotate(-2.5deg);
}

#galerie figure:nth-child(5n):hover,
#galerie figure:nth-child(5n):focus {
	transform: scale(2) rotate(2.5deg);
}

#galerie:after {
	clear: both;
	content: " ";
	display: block;
}

/*----------------*/

@media screen and (min-width: 961px) {
  nav a#nav-m,
  nav a.close {
    display: none;
  }
 
  nav ul li {
    margin: 0 10px 0 0;
    display: block;
    text-align: center;
    color: black;
  }

}
   
@media screen and (max-width: 960px) {
  footer{
    display: flex;
    flex-flow: row wrap;
  
    margin: 1em;
  }
  
  #content{
    display: flex;
    flex-flow: column;
  }

  main {
    margin-left: 0em;
  }

nav{
  text-align: left;
}

nav a{
  color: rgb(158, 2, 2);
  font-weight: bold;
}

  /*Hamburger-Icon*/

  nav > .close,
  nav a#nav-m:target {
    display: none;

 }

  nav a:target ~ ul,
  nav a:target ~ .close {
    display: inline-block;

	z-index:9999;
  }

  nav a:target ~ ul {
    left: 0;
 
    
  }

  /*Formatierung Mobiles Menue*/
  nav ul {
    top: 8.5em;
    
    position: absolute;
    width: 100%;
	height: 100%;
    left: -120%;
    list-style-type:none;
    margin: 0;
    padding: 0;
    background: #FFCC99;

    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
 
  nav ul li{
    text-align: left;
    padding: 0em 0.5em;
    border-bottom: 1px solid #fff;
  }
 
  nav ul li a {
    width: 100%;
    font-weight: normal;
    color: rgb(158, 2, 2);
    padding: 1em 0;
  }
 
  nav ul.menu li a:hover {
    border-bottom: 0;
  }

  h1{
    font-size: 2.5em;
    font-weight: normal;
  }
  

  article {
    display: flex;
    flex-flow: column;  
 
 
  }

  article >  .home{
    display: flex;
    flex: 1;
    justify-content: center;
 
    align-content: flex-start;
    align-items: flex-start;
  }

  article > .picture{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
 
    align-content: flex-start;
    align-items: flex-start;
  }
  
  article > .picture-imp{
    display: none;
  }

  article > .picture-gal{
    display: flex;
    flex-flow: row wrap;
 
  }
  
  article > .textblock{
    display: flex;
    flex-flow: column ;
    justify-content: center;
    align-content: flex-start;
    align-items: center ;
 
 
  }

  article > div > .text{
 
    display: flex;
    flex-flow: column ;
    justify-content: center;
    align-content: flex-start;
    align-items: center ;
 
  }
 
}
/*---------------------------------