*{  box-sizing: border-box; font-size: 30px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; }
body{background-image: url("../Bilder_HT/HG2.jpg"); background-repeat: no-repeat; background-attachment: fixed; color: darkblue;} 

  .flex-containerNav {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: flex-end; align-items: center; }
  .flex-containerNav a {text-align: center; }

  .flex-container2 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: flex-start; align-items: center; }
  .flex-container2 div{text-align: center; }

  .flex-container3 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: center; align-items: center;}
  .flex-container3 div{ text-align: center; }
  
  .flex-container4 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: center; align-items: center;}
  .flex-container4 div{ text-align: center; }

a:visited { color: darkgreen;}
a:hover { color: red;}
a:active { color: royalblue;}

.example { display: block;  color: white;}


/* Extra small devices (phones portrain, 600px and down)*/
@media only screen and (max-width: 600px){
  .containerPC{display: none;}
  .containerTP  {display: none;}
  .flex-container4 {  display: none}
  .example { background:  maroon;  display: none;}
  .flex-containerNav {padding-right: 5px; padding-top: 15px;}
  .flex-containerNav a {font-size: 2em; }
  .flex-container2 {padding-left: 5px; padding-top: 20px;  }
  .flex-container2 div{font-size: 1em; }
  .flex-container3 {padding-top: 30px;  }
  .flex-container3 div{font-size: 0.75em;  }

  .containerSP  {display: flex; justify-content:center; margin-top: 40px;}
  .containerSP img {width: 150px;  } 
  .containerSP  a{ padding-right: 10px; font-size: 0.75em;  text-align: center; color: darkgreen;  text-decoration: none;} 
 
}

/* Small devices (large phones, 600px and up) */
@media only screen and (orientation: landscape) and (min-width: 600px){
  .containerSP {  display: none;}
  .containerTP  {display: none;}
  .flex-container3{display: none}
  .example { background:  black;  display: none;}
  
  .flex-containerNav {padding-right: 5px; padding-top: 0px;}
  .flex-containerNav a{font-size: 0.5em; padding-right: 10px;}
  
  .flex-container2 {padding-left: 10px; padding-top: 5px;}
  .flex-container2 div{font-size: 0.95em;}

  .flex-container4 {padding-top: 8px;}
  .flex-container4 div{display: block; font-size: 0.75em;}
  
  .containerPC {  display: flex;  justify-content:  center;  margin-top: 15px;}
  .containerPC img {  width: 115px;  height: auto;  padding-right: 0px;  padding-left: 0px; }
  .containerPC a{  font-size: 0.55em; text-align: center;  text-decoration: none;  color: darkgreen;}
  
  
  
  
}

 /*Small devices (portrain tablets, 600px and up) */
@media only screen and (orientation: portrait) and (min-width: 600px){
  .containerSP {  display: none;}
  .containerPC{display: none;}
  .containerTP  {display: none;}
  .flex-container4 {  display: none;}
  .example {display: none;  background:  yellowgreen;}

  .flex-containerNav {padding-right: 5px; padding-top: 15px;}
  .flex-containerNav a{font-size: 0.6em; padding-right: 10px;}

  .flex-container2 {padding-left: 10px; padding-top: 30px;}
  .flex-container2 div{font-size: 0.9em;}

  .flex-container3 {padding-top: 50px;}
  .flex-container3 div{display: block;}

  .containerTP  {display: flex; justify-content:center; margin-top: 50px;}
  .containerTP img {width: 175px; padding-left: 4px;  padding-right: 15px; } 
  .containerTP  a{ font-size: 0.75em;  text-align: center; color: darkgreen;  text-decoration: none;} 
}
  

/* Medium devices (landscape tablets, 1000px and up) */
@media only screen and (min-width: 1000px) {
  .containerSP {  display: none;}
  .containerPC{display: none;}
  .containerTP { display: none;} 
  .flex-container4 {  display: none;}
  .example { display: none; background:  red;}

  .flex-containerNav {display: flex;}
  .flex-containerNav a {font-size: 1.5em; padding-right: 10px;}

  .flex-container2 {display: flex; padding-top: 5px; padding-left: 15px;}
  .flex-container2 div {font-size: 1.50em; font-weight: bold;}

  .flex-container3 {display: flex; padding-top: 45px;}
  .flex-container3 div {font-size: 1.25em; }

  .containerPC {display: flex;  justify-content:  center;  margin-top: 25px; margin-left: 20px;}
  .containerPC img {  width: 200px;  height: auto;  padding-right: 35px;  padding-left: 10px; }
  .containerPC a{  font-size: 0.75em;  text-align: center;  text-decoration: none;  color: darkgreen;}
} 


/* Extra large devices (desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
  .containerSP {  display: none;}
  .containerTP { display: none;} 
  .containerPC{display: none;}
  .flex-container4 {  display: none;}
  .example { display: none; background-color: aquamarine;}


  .flex-containerNav {display: flex;}
  .flex-containerNav a {font-size: 1.5em; padding-right: 20px;}

  .flex-container2 {display: flex; padding-top: 5px; padding-left: 150px; }
  .flex-container2 div {font-size: 1.75em; font-weight: bold;}

  .flex-container3 {display: flex; padding-top: 115px; display: flex;}
  .flex-container3 div {font-size: 1.5em; }

  .containerPC {  display: flex;  justify-content:  center;  margin-top: 25px;}
  .containerPC img {  width: 300px;  height: auto;  padding-right: 35px;  padding-left: 10px; }
  .containerPC a{  font-size: 1.5em; text-align: center;  text-decoration: none;  color: darkgreen;}
 
}