/* GLOBAL */

body {
  margin: 0;
}

.active {
  text-decoration: underline;
}

/* IMPRESSUM */

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 6;
}

main > p{
  font-size: 1.1rem;
	text-decoration: none;
}


/* VITA */

vita {
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 1.4rem;
}

#ich {
  width: 320px;
  height: 260px;
}

/* NAVIGATION */

.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: 24px 24px 24px 24px;
-moz-border-radius: 24px 24px 24px 24px;
-webkit-border-radius: 24px 24px 24px 24px;
border: 2px solid #848484;
font-size: 1.1em;
font-weight: 400;
margin-top: 2px;
color: #424242;
}

ul {
  list-style: none;
  padding-left: 20px;
}

.navigation > li {
	list-style: none;
}

.logonavi {
  font-size: 1.3rem;
  padding: 10px;
  font-weight: 700;
  font-style: italic;
}

a {
  color: #424242;
  text-decoration: none;
}

.items{
  display: flex;
}

.items > li > a{
  display: flex;
  margin-left: 120px;
}

#impressum {
  padding-right: 60px;
}

.topnav {
  display: none;
}


/* a: visited {
		text-decoration: underline;
	} */

a:hover {
	color: grey;
}


/*   MOBILE NAVIGATION */

#myLinks {
  display: none;
  background-color: grey;
  text-align: center;
}

.topnav a {
  color: white;
  padding: 11px 16px;
  text-decoration: none;
  font-size: 1.1rem;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.logo {
  background-color: #585858;
  color: white;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-family: serif;
}

/* BILDERGALERIE */

.Bildergalerie {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.Bildergalerie > a {
	margin: 14px;
}

.Bildergalerie > a > img{
  width: 400px;
  height: 266px;
}

#waldlichtung {
  width: 266px;
  height: 400px;
}

#straßebeinacht {
  width: 266px;
  height: 400px;
}

#landschaftsimpression {
  width: 266px;
  height: 400px;
}

#bruecke {
  width: 266px;
  height: 400px;
}

#blumen {
  width: 266px;
  height: 400px;
}

/* FOOTER */

.footer > li {
	list-style: none;
}

.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 24px 24px 24px 24px;
-moz-border-radius: 24px 24px 24px 24px;
-webkit-border-radius: 24px 24px 24px 24px;
border: 2px solid #424242;
font-size: 1.1em;
font-weight: 400;
margin: 2px;
padding: 2px;
margin-left: auto;
margin-right: auto;
color: #424242;
}

/*   MEDIA QUERIES Queries */

@media (max-width: 1100px) {
  .navigation {
    display: none;
  }
  .topnav {
    display: block;
  }
  .footer {
    font-size: .9rem;
      }
  .Bildergalerie > a > img{
        width: 150px;
        height: 100px;
      }
  #waldlichtung {
      width: 100px;
      height: 150px;
      }
  #straßebeinacht {
        width: 100px;
        height: 150px;
      }
  #landschaftsimpression {
        width: 100px;
        height: 150px;
      }
  #bruecke {
        width: 100px;
        height: 150px;
      }
  #ich {
        width: 240px;
        height: 200px;
      }
  #lupinen {
    width: 240px;
    height: 200px;
  }

  #blumen {
    width: 100px;
    height: 150px;
  }

  vita {
        font-size: .8rem;
      }
  main > p{
        font-size: 1rem;
      }
 .footer > li {
        font-size: .8rem;
      }
 .navigation > li {
        font-size: .8rem;
      }
}


/*
@media (max-width: 1100px) {
    .navigation {
    		flex-direction: column;
        align-items: center;
        font-size: .9rem;
        }
    .footer {
      font-size: .9rem;
        }
    .Bildergalerie > a > img{
          width: 150px;
          height: 100px;
        }
    #waldlichtung {
        width: 100px;
        height: 150px;
        }
    #straßebeinacht {
          width: 100px;
          height: 150px;
        }
    #landschaftsimpression {
          width: 100px;
          height: 150px;
        }
    #ich {
          width: 240px;
          height: 200px;
        }
    vita {
          font-size: .8rem;
        }
    main > p{
          font-size: 1rem;
        }
   .footer > li {
        	font-size: .8rem;
        }
   .navigation > li {
        	font-size: .8rem;
        }
    #impressum {
          padding-right: 20px;
        }
    .items > li > a{
          display: flex;
          margin-left: 0px;
          padding-right: 70px;
        }
    #logoneu {
          padding-right: 45px;
          width: 150px;
          height: 30px;
        }
    .topnav {
          display: none;
        }
}
*/