html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }
@font-face {
 font-family: 'myFont';
 src: url('../font/Intro1.ttf');
}
html { 
  background: url(../pics/home/Hintergrund_blanco.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ul { display: inline; list-style-type: none; margin: 0; padding: 0; width: 100%}
li { display: inline-block; }
.quadrat1 img {
position: absolute;
    top: -9999px;
        bottom: -9999px;
            left: -9999px;
                right: -9999px;
                    margin: auto;
}
.quadrat2 img{
position: absolute;
    top: -9999px;
        bottom: -9999px;
            left: -9999px;
                right: -9999px;
                    margin: auto;
                    }
.quadrat3 img {
position: absolute;
    top: -9999px;
        bottom: -9999px;
            left: -9999px;
                right: -9999px;
                    margin: auto;
}
@media screen and (min-width: 1474px) {
#body { margin: 0 auto; margin-top: 100px; width: 1400px; position: relative; }

  body {
    background-size: auto auto;
  }

  aside { float: left; width: 30%; }
  main { float: left; width: 70%; }


  #info { margin-left:110px; }
  #kontakt { margin-left:50px; }
  #impressum { margin-left:50px; }

  #info img { height: 70px; }
  #navi img { width: 200px;  margin-left: 15%;}
  #clara_bosch img { height: 70px; width: 300px;  margin-left: 80px;}
  #clara_bosch_1 img { height: 70px; width: 300px;  margin-left: 80px; margin-top: 20px;}

  #info-tafel   { margin-left: 80px; width: 300px; margin-top: 38px; background-color: white; font-family: myFont; font-size: 25px;}
  #info-tafel p { padding-left:20px; padding-top: 20px; padding-bottom: 45px; padding-right: 20px; text-align: justify; letter-spacing: 0.06em;}

  #info-tafel2 { display: none; }

  #InfoBox   { background-color: white; margin-top: 108px; margin-left: 163px; margin-right: 49px; margin-bottom: 600px;}
  #InfoBoxBild { float: left; width: 40%; margin: 18px; }
  figure { position: relative; margin: 5px; }
  figure img { width: 100%; height:auto;  }
  figcaption { font-family: myFont; font-size: 18px; padding: 0px; text-align: center; }
  #InfoBoxText p { font-family: myFont; font-size: 25px; margin-bottom: 20px; margin-left: 20px; padding-top: 20px; padding-bottom: 25px; padding-right: 20px; text-align: justify;}
  .center { display: block; margin-left: 55%; margin-right: auto; width: 30%; }

  #InfoBox2   { background-color: white; margin-top: 108px; margin-left: 163px; margin-right: 49px;}
  #InfoBox2 p { font-family: myFont; font-size: 25px; margin-bottom: 600px; padding-left: 320px; padding-top: 60px; padding-bottom: 60px; padding-right: 10px; }

  #InfoBox3   { background-color: white; margin-top: 108px; margin-left: 163px; margin-right: 49px;}
  #InfoBox3 p { font-family: myFont; font-size: 150%; margin-bottom: 600px; padding-left: 10px; padding-top: 60px; padding-bottom: 60px; padding-right: 10px; }


  .bilder_ueberblick1 { margin-top: 108px; margin-left:162px; }
  .bilder_ueberblick2 { margin-top: 100px; margin-left:162px;}
  .bilder_ueberblick3 { margin-top: 100px; margin-left:162px; margin-bottom: 200px;}

  .quadrat1 { position:relative; width: 200px; height: 200px; overflow: hidden; }
  .quadrat2 { position:relative; margin-left: 75px; width: 200px; height: 200px; overflow: hidden; }
  .quadrat3 { position:relative; margin-left: 85px; width: 200px; height: 200px; overflow: hidden; }
  
  .quadrat1T img{ width: 200px; height: 200px; }
  .quadrat2T img{ margin-left: 75px; width: 200px; height: 200px;}
  .quadrat3T img{ margin-left: 85px; width: 200px; height: 200px;}
}



@media screen and (min-width: 500px) and (max-width: 1473px) {
#body { margin: 0 auto; margin-top: 5%; width: 1000px; position: relative; }

  body { background-size: auto auto; }

  aside { float: left; width: 300px; }
  main { float: left; width: 700px; }

  #info { margin-left: 10px; }
  #kontakt { margin-left: 19px; }
  #impressum { margin-left: 19px; }

  #info img { height: 52px; }
  #navi img { width: 150px; margin-left: 50px;}
  #clara_bosch img { width: 224px; margin-left: 24px; margin-right: 40px; }
  #clara_bosch_1 img { width: 224px; height: 53px; margin-left: 24px; margin-right: 40px; margin-top: 20px;}

  #info-tafel { font-family: myFont; font-size: 20px; margin-left: 24px; width: 224px; margin-top: 33px; background-color: white;}
  #info-tafel p {padding-left:20px; padding-top: 20px; padding-bottom: 45px; padding-right: 20px; text-align: justify; letter-spacing: 0.06em;}

  #info-tafel2 { display: none; }

  #InfoBox   { background-color: white; margin-top: 108px; margin-left: 60px; margin-right: 40px; margin-bottom: 120px;}
  #InfoBoxBild { float: left; width: 40%; margin: 20px; margin-bottom: 0px; padding-bottom: 20px; }
  figure { position: relative; margin: 5px; }
  figure img { width: 100%; }
  figcaption { font-family: myFont; font-size: 120%; padding: 0px; padding-bottom: 50px; text-align: center; }
  #InfoBoxText p { font-family: myFont; font-size: 150%; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; text-align: justify;}
  .center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

  #InfoBox2   { background-color: white; margin-top: 108px; margin-left: 60px; margin-right: 40px;}
  #InfoBox2 p { font-family: myFont; font-size: 150%; margin-bottom: 300px; padding-left: 210px; padding-top: 60px; padding-bottom: 60px; padding-right: 10px; }

  #InfoBox3   { background-color: white; margin-top: 108px; margin-left: 60px; margin-right: 40px;}
  #InfoBox3 p { font-family: myFont; font-size: 150%; margin-bottom: 300px; padding-left: 10px; padding-top: 60px; padding-bottom: 60px; padding-right: 10px; }

  .bilder_ueberblick1 { margin-top: 108px; margin-left:60px; }
  .bilder_ueberblick2 { margin-top: 100px; margin-left:60px; }
  .bilder_ueberblick3 { margin-top: 100px; margin-left:60px; margin-bottom: 200px; }

  .quadrat1 { position:relative; width: 150px; height: 150px; overflow: hidden; }
  .quadrat2 { position:relative; margin-left: 70px; width: 150px; height: 150px; overflow: hidden; }
  .quadrat3 { position:relative; margin-left: 70px; width: 150px; height: 150px; overflow: hidden; }

  .quadrat1T img{ width: 150px; height: 150px; }
  .quadrat2T img{ margin-left: 70px; width: 150px; height: 150px; }
  .quadrat3T img{ margin-left: 70px; width: 150px; height: 150px; }

}

@media screen and (max-width: 499px) {
#body { margin: 0 auto; margin-top: 5%; position: relative; width: auto; }

  ul { margin: 0; padding: 0; width: 100%;}
  li { display: block; }

  html { 
    background: url(../pics/home/Hintergrund_blanco.jpg) repeat right top fixed; 
    background-size: 1200px;
  }



  #info img        { height: 52px; }
  #navi img        { display: block; margin-left: auto; margin-right: auto;  width: 150px; margin-top: 10px; }
  #clara_bosch img { display: block; margin-left: auto; margin-right: auto; width: 224px; margin-top: 40px; }
  #clara_bosch_1 img { display: block; margin-left: auto; margin-right: auto; width: 224px; height: 53px;  margin-top: 20px; margin-bottom: 20px; }
  #navi #bilder_ueberblick1 {width:100%;}

  #info-tafel { display: none; }

  #info-tafel2 {font-family: myFont; font-size: 20px;  display: block; margin-left: auto; margin-right: auto; margin-top: 50px; background-color: white; }
  #info-tafel2 p {padding-left:10px; padding-top: 20px; padding-bottom: 45px; padding-right: 10px; text-align: justify; letter-spacing: 0.06em;}

  #InfoBox   { background-color: white; margin-top: 50px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px;}
  #InfoBoxBild { float: left; width: 40%; margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 1px; padding-bottom: 1px; }
  figure { position: relative; margin: 0px; }
  figure img { width: 100%; }
  figcaption { font-family: myFont; font-size: 100%; margin-bottom: 10px; text-align: center; }
  #InfoBoxText p { font-family: myfont; font-size: 150%; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; text-align: justify; }
  .center { display: block; margin-left: auto; margin-right: auto; width: 60%; }

  #InfoBox2   { background-color: white; margin-top: 50px;  display: block; margin-left: auto; margin-right: auto;}
  #InfoBox2 p { text-align: center; padding-top: 60px; padding-bottom: 60px; }
  #InfoBox2 p { font-family: myFont; font-size: 150%; margin-bottom: 100px;}

  #InfoBox3   { background-color: white; margin-top: 50px; display: block;  margin-left: auto; margin-right: auto;}
  #InfoBox3 p { padding-left: 10px; padding-top: 60px; padding-bottom: 60px; padding-right: 10px; }
  #InfoBox3 p { font-family: myFont; font-size: 150%;margin-bottom: 100px; }



  .bilder_ueberblick1 { margin-top: 50px;}
  .bilder_ueberblick2 { margin-top: 50px;}
  .bilder_ueberblick3 { margin-top: 50px; margin-bottom: 30px;}

  .quadrat1 {position:relative; margin-top:50px;  margin-left:auto; margin-right: auto; width: 150px; height: 150px; overflow: hidden; }
  .quadrat2 {position:relative; margin-top:50px;  margin-left:auto; margin-right: auto; width: 150px; height: 150px; overflow: hidden; }
  .quadrat3 {position:relative; margin-top:50px;  margin-left:auto; margin-right: auto; width: 150px; height: 150px; overflow: hidden; }

  .quadrat1T img{display: block; width: 150px; height: 150px; margin-left: auto; margin-right: auto;}
  .quadrat2T img{display: block; width: 150px; height: 150px; margin-left: auto; margin-right: auto; margin-top: 50px;}
  .quadrat3T img{display: block; width: 150px; height: 150px; margin-left: auto; margin-right: auto; margin-top: 50px;}
}