html, body {margin: 0; padding: 0; height: 100%; text-align: center;}
section {min-height: 100%;}
a {text-decoration: none;}
li {list-style-type: none;}

/* cormorant-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/cormorant-garamond-v21-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* cormorant-garamond-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/cormorant-garamond-v21-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

h1, h2, h3, a {
  font-family: 'Cormorant Garamond';
  color: #FCC88D;}

p {
  font-family: 'Cormorant Garamond';
  } 
h1 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}
h2 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}
h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}

a, li, #logo, h1, h2, h3, img{transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}

html{scroll-behavior: smooth;}
/* HEADER **********************/

header {
  width: 100%;
  height: 62px;
  position:relative;
  top: 0;
  left: 0;
  background-color: #3D3D3D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1}

  #logo {
    width: 300px;
    float: left;
    margin: 10px 0 0 50px;
  }

  #logo:hover {
    opacity: 0.5;
  }

  #logo img {
    width: 100%
  }

  header nav {
    float: right;
    margin: 8px 50px 0 0;
  }

  header nav ul li {
    float: left;
    margin-right: 25px;
  }


  header nav ul li a {
    font-size: 16px;
    color: #808080;
  }

  #gallerie {
    color:  #FCC88D;
    font-family: 'Cormorant Garamond';
  }

  header nav ul li a:hover {
    padding-top: 3px;
    color: #FCC88D;
  }

  header nav ul li:hover {
    padding-top: 3px;
    color: #FCC88D;
  }
  /* Hurdy_Gurdy Games **********************/

  #Hurdy-Gurdy_Games {
    background: url(img/Hurdy-Gurdy_Games.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
  }



  #Hurdy-Gurdy_Games hr {
    margin: 0px;
    padding: 0px;
    color: #808080;
  }

  /* #Hurdy-Gurdy_Games h1 a img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
  }******/


  #Hurdy-Gurdy_Games h8 a img{
   float: right;
   width: 25%;
   position: absolute;
   right: 6.5%;
   top: 5%;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.0);
   border-color: #3D3D3D;
   border-width: 0px;
   border-style: solid;}
  
#modeling h9 img{
   float: right;
   width: 800px;
   position: absolute;
   right: 0px;
   bottom: 5%;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.0);
   border-color: #3D3D3D;
   border-width: 0px;
   border-style: solid;}
   #Hurdy-Gurdy_Games table{
     position: absolute;
     float: left;
     left: 80px;
     bottom: 5%;
     color: #FCFCFC;
     font-family: 'Cormorant Garamond';
     font-size: 20px;
     display: inline-table;
     width: 20%;

     margin: 0% 0% 0% 0%;
     padding: 0px 0px 0px 0px;

  }

   #Hurdy-Gurdy_Games a img{

     width: 80%;
     float: right;
     margin-left: 0px;
     padding-top: 0;
     color: #C1C1C1;
  }

  #Hurdy-Gurdy_Games a img:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
 }

  #Hurdy-Gurdy_Games a:hover {
    padding-top: 3px;
    color: #FCC88D;
  }

   #Hurdy-Gurdy_Games p{
   position: absolute;
      top: 15%;
      right: 0%;
      width: 30%;
      font-size: 25px;
     font-family: 'Cormorant Garamond';
      text-align: right;
      color: #C1C1C1;
      padding: 5px 60px 30px 10px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(55,55,55,0.8);
      border-color: #3D3D3D;
      border-width: 2px 0px 0px 0px;

      border-style: solid;}

  /* 3D MODELING **********************/

  #modeling {
    background: url(img/Bestiarium_YT.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
  }



  #modeling hr {
    margin: 0px;
    padding: 0px;
    color: #808080;
  }

  #modeling h1 a img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
  }


  #modeling h1 a img{
   float: left;
   width: 30%;
   position: absolute;
   left: 60px;
   top: 5%;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.0);
   border-color: #3D3D3D;
   border-width: 0px;
   border-style: solid;}

   #modeling table{
     position: absolute;
     float: left;
     left: 80px;
     bottom: 5%;
     color: #FCFCFC;
     font-family: 'Cormorant Garamond';
     font-size: 20px;
     display: inline-table;
     width: 20%;

     margin: 0% 0% 0% 0%;
     padding: 0px 0px 0px 0px;

  }

   #modeling a img{

     width: 80%;
     float: left;
     margin-left: 0px;
     padding-top: 0;
     color: #C1C1C1;
  }

  #modeling a img:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
 }

  #modeling a:hover {
    padding-top: 3px;
    color: #FCC88D;
  }

   #modeling p{
    position: absolute;
    top: 15%;
    width: 30%;
    font-size: 20px;
    text-align: left;
    color: #C1C1C1;
    padding: 5px 1px 30px 60px;
    margin: 0px 0px 0px 0px;
    background-color: rgb(0,0,0);
    background-color: rgba(55,55,55,0.8);
    border-color: #3D3D3D;
    border-width: 2px 0px 0px 0px;

    border-style: solid;}


    /* Hieronymus2 **********************/

    #hieronymus2 {
      background: url(img/H_Environment.jpg);
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
      position: relative;
    }



    #hieronymus2 hr {
      margin: 0px;
      padding: 0px;
      color: #808080;
    }

    #hieronymus2 p{
      position: absolute;
      top: 15%;
      right: 0%;
      width: 30%;
      font-size: 20px;
      text-align: right;
      color: #C1C1C1;
      padding: 5px 60px 30px 10px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(55,55,55,0.8);
      border-color: #3D3D3D;
      border-width: 2px 0px 0px 0px;

      border-style: solid;}

     /* Hieronymus2 **********************/

     #hieronymus3 {
       background: url(img/H_Items.jpg);
       background-position: center center;
       background-size: cover;
       background-attachment: fixed;
       position: relative;
     }



     #hieronymus3 hr {
       margin: 0px;
       padding: 0px;
       color: #808080;
     }

     #hieronymus3 p{
       position: absolute;
       top: 15%;
       width: 30%;
       font-size: 20px;
       text-align: left;
       color: #C1C1C1;
       padding: 5px 1px 30px 60px;
       margin: 0px 0px 0px 0px;
       background-color: rgb(0,0,0);
       background-color: rgba(55,55,55,0.0);
       border-color: #3D3D3D;
       border-width: 2px 0px 0px 0px;

       border-style: solid;}

    /* Bauernkrieg **********************/

    #bauernkrieg {
      background: url(img/Bauernkrieg.jpg);
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
      position: relative;
    }

    #bauernkrieg hr {
      margin: 0px;
      padding: 0px;
      color: #808080;
    }
    #bauernkrieg h2 a img{
     float:right;
     width: 30%;
     position: absolute;
  right: 60px;
     top: 5%;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.0);
     border-color: #3D3D3D;
     border-width: 0px;
     border-style: solid;}

    #bauernkrieg p{
     position: absolute;
     top: 15%;
     right: 0%;
     width: 30%;
     font-size: 20px;
     text-align: right;
     color: #C1C1C1;
     padding: 5px 60px 30px 10px;
     margin: 0px 0px 0px 0px;
     background-color: rgb(0,0,0);
     background-color: rgba(55,55,55,0.0);
     border-color: #3D3D3D;
     border-width: 2px 0px 0px 0px;

      border-style: solid;}

      #bauernkrieg a img:hover{
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
     }

      #bauernkrieg table{
        position: absolute;
        float: right;
        right: 80px;
        bottom: 5%;
        color: #FCFCFC;
        font-family: 'Cormorant Garamond';
        font-size: 10px;
        display: inline-table;
        width: 10%;}

     /* Karneval **********************/

     #davinci {
       background: url(img/DaVinci.jpg);
       background-position: center center;
       background-size: cover;
       background-attachment: fixed;
       position: relative;
     }

     #davinci hr {
       margin: 0px;
       padding: 0px;
       color: #808080;
     }
     #davinci h3 a img{
      float:left;
      width: 30%;
      position: absolute;
  left: 60px;
      top: 5%;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.0);
      border-color: #3D3D3D;
      border-width: 0px;
      border-style: solid;}

     #davinci p{
      position: absolute;
      top: 15%;
    left: : 5%;
      width: 30%;
      font-size: 20px;
      text-align: left;
      color: #C1C1C1;
      padding: 5px 30px 30px 60px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(55,55,55,0.6);
      border-color: #3D3D3D;
      border-width: 2px 0px 0px 0px;

      border-style: solid;}
     /* Karneval **********************/

     #karneval {
       background: url(img/karneval.jpg);
       background-position: center center;
       background-size: cover;
       background-attachment: fixed;
       position: relative;
     }

     #karneval hr {
       margin: 0px;
       padding: 0px;
       color: #808080;
     }
     #karneval h4 a img{
      float:left;
      width: 30%;
      position: absolute;
   right: 60px;
      top: 5%;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.0);
      border-color: #3D3D3D;
      border-width: 0px;
      border-style: solid;}

     #karneval p{
      position: absolute;
      top: 15%;
      right: 5%;
      width: 30%;
      font-size: 20px;
      text-align: right;
      color: #C1C1C1;
      padding: 5px 30px 30px 60px;
      margin: 0px 0px 0px 0px;
      background-color: rgb(0,0,0);
      background-color: rgba(55,55,55,0.0);
      border-color: #3D3D3D;
      border-width: 2px 0px 0px 0px;

      border-style: solid;}

      /* Karneval **********************/

      #exposia {
        background: url(img/Exposia.jpg);
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
      }

      #exposia hr {
        margin: 0px;
        padding: 0px;
        color: #808080;
      }
      #exposia h5 a img{
       float:left;
       width: 30%;
       position: absolute;
    left: 60px;
       top: 5%;
       padding: 0px 0px 0px 0px;
       margin: 0px 0px 0px 0px;
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.0);
       border-color: #3D3D3D;
       border-width: 0px;
       border-style: solid;}

      #exposia p{
       position: absolute;
       top: 30%;
       left: 0%;
       width: 30%;
       font-size: 20px;
       text-align: right;
       color: #C1C1C1;
       padding: 5px 30px 30px 60px;
       margin: 0px 0px 0px 0px;
       background-color: rgb(0,0,0);
       background-color: rgba(55,55,55,0.6);
       border-color: #3D3D3D;
       border-width: 2px 0px 0px 0px;

       border-style: solid;}

       #exposia table{
         position: absolute;
         float: left;
         left: 80px;
         bottom: 5%;
         color: #FCFCFC;
         font-family: 'Cormorant Garamond';
         font-size: 20px;
         display: inline-table;
         width: 5%;
         margin: 0% 0% 0% 0%;
         padding: 0px 0px 0px 0px;

      }

      #exposia a img{

        width: 80%;
        float: left;
        margin-left: 0px;
        padding-top: 0;
        color: #C1C1C1;
     }


       /* Prospect **********************/

       #prospect {
         background: url(img/Prospect_Armor.png);
         background-position: center center;
         background-size: cover;
         background-attachment: fixed;
         position: relative;
       }

       #prospect hr {
         margin: 0px;
         padding: 0px;
         color: #808080;
       }
       #prospect h6 a img{
        float:left;
        width: 10%;
        position: absolute;
     left: 60px;
        top: 5%;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.0);
        border-color: #3D3D3D;
        border-width: 0px;
        border-style: solid;}

       #prospect p{
        position: absolute;
        top: 15%;
        left: 0%;
        width: 30%;
        font-size: 20px;
        text-align: right;
        color: #C1C1C1;
        padding: 5px 30px 30px 60px;
        margin: 0px 0px 0px 0px;
        background-color: rgb(0,0,0);
        background-color: rgba(55,55,55,0.6);
        border-color: #3D3D3D;
        border-width: 2px 0px 0px 0px;

        border-style: solid;}

        #prospect table{
          position: absolute;
          float: left;
          left: 80px;
          bottom: 5%;
          color: #FCFCFC;
          font-family: 'Cormorant Garamond';
          font-size: 20px;
          display: inline-table;
          width: 5%;
          margin: 0% 0% 0% 0%;
          padding: 0px 0px 0px 0px;

       }

       #prospect a img{

         width: 80%;
         float: left;
         margin-left: 0px;
         padding-top: 0;
         color: #C1C1C1;
      }


  /* BILDHAUEREI **********************/

  #sculpture {
    background: url(img/leerb.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
  }

  #sculpture hr {
    margin: 0px;
    padding: 0px;
    color: #808080;
  }
  #sculpture img{
   float: left;
   width: 30%;
   position: absolute;
   right: 60px;
   top: 5%;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.0);
   border-color: #3D3D3D;
   border-width: 0px;
   border-style: solid;}

  #sculpture p{
   position: absolute;
   top: 15%;
   right: 0%;
   width: 30%;
   font-size: 20px;
   text-align: right;
   color: #C1C1C1;
   padding: 5px 60px 30px 10px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(55,55,55,0.8);
   border-color: #3D3D3D;
   border-width: 2px 0px 0px 0px;

    border-style: solid;}

    #sculpture table{
      position: absolute;
      float: left;
      left: 80px;
      bottom: 5%;
      color: #FCFCFC;
      font-family: 'Cormorant Garamond';
      font-size: 10px;
      display: inline-table;
      width: 10%;
    }


  /* GRAPHIC NOVEL **********************/

  #graphicnovel {
    background: url(img/blatta.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
  }





  #graphicnovel hr {
    margin: 0px;
    padding: 0px;
    color: #808080;
  }

  #graphicnovel p{
   position: absolute;
   top: 15%;
   right: 0%;
   width: 30%;
   font-size: 20px;
   text-align: right;
   color: #C1C1C1;
   padding: 5px 60px 30px 10px;
   margin: 0px 0px 0px 0px;
   background-color: rgb(0,0,0);
   background-color: rgba(55,55,55,0.8);
   border-color: #3D3D3D;
   border-width: 2px 0px 0px 0px;
     }

  /* FOOTER **********************/
  footer {
    width: 100%;
    height: 65px;
    background-color: #3D3D3D;
    clear: both;

  }

  footer hr {
    margin: 0px;
    padding: 0px;
    color: #808080;
  }

  footer div p {
    float: left;
    font-size: 15px;
    color: #808080;
    margin: 10px 0 0 50px;
  }

  footer a img{

    width: 44px;
    margin: 10px 0 0 0px;
    float:none;
  }

  footer div a {

    float: right;
    position: relative;
    font-size: 15px;
    color: #808080;
    margin: 10px 50px 0 0px;
    padding: 0;
  }

@media screen and (max-width: 1100px) {
  section {min-height: 33%;
  height: 44%;
  width: 100% }
  
    #Hurdy-Gurdy_Games {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  
  #modeling {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }

  #hieronymus2 {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  #hieronymus3 {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  #bauernkrieg {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  #davinci {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  #exposia {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }
  #prospect {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }

  #sculpture {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }

  #graphicnovel {
    background-position: center center;
    background-size:cover;
    background-attachment: scroll;
  }

  #Hurdy-Gurdy_Games p{
    font-size: 18px;
      }
  
  #modeling p{
    font-size: 18px;
      }
  #hieronymus2 p{
    font-size: 18px;
  }
  #hieronymus3 p{
    font-size: 18px;
  }
  #bauernkrieg p{
    font-size: 18px;
  }
  #davinci p{
    font-size: 18px;
  }
  #karneval p{
    font-size: 18px;
  }
  #exposia p{
    font-size: 18px;
  }
  #prospect p{
    font-size: 18px;
  }
  #sculpture p{
    font-size: 18px;
  }
  #graphicnovel p{
    font-size: 18x;
  }

  #bauernkrieg table{
    position: absolute;
    float: left;
    left:  80px;
    bottom: 5%;
}

  #modeling h1 {
    margin: 40px auto 0 auto;
    font-size: 30px;
  }

  #modeling h1 a:hover {
    font-size: 33px;
  }

  #bildhauerei h2 {
    margin: 50px auto 0 auto;
    font-size: 30px;

  }
#Hurdy-Gurdy_Games h9 img{
   float: right;
   width: 600px;
 }
  #bildhauerei h2 a:hover {
    font-size: 33px;
  }
  #graphicnovel h3 {
    margin: 30px auto 0 auto;
    font-size: 80px;
  }
  #logo {
    width: 300px;
    float: left;
    margin: 10px 0 0 20px;
  }
  header nav {
    float: right;
    margin: 8px 20px 0 0;
  }

  header nav ul li {
    float: left;
    margin-right: 15px;
    font-size: 25px;
  }

  header nav ul li a {
    font-size: 25px;
    color: #808080;
  }
#pfeil2 img{
  display: none;
}
#pfeil3 img{
  display: none;
}
  }

  @media screen and (max-width: 730px) {
  /*  header {
      height: 60px;
      margin: 0;
      padding: 0;
    }
    #logo {
      width: 37%;
      float: left;
      margin: 2px 0 0 0px;
      margin-bottom: -7px;
      padding: 0;
    }
    header nav {
      clear:both;
      float: none;
      margin-top: 4px;
      padding-bottom: 0px;
    }

    header nav ul li {
      float: none;
      display: inline;
    }

    header nav ul li a {
      font-size: 15px;
}***/