*{
  margin:0;
  padding:0;
  color: #black;
  box-sizing: border-box;
  }
  html {
	scroll-behavior: smooth;
  }
  @font-face {font-family: corit; src:url('./fonts/Cormorant-Italic-VariableFont_wght.ttf');}
  @font-face {font-family: cor; src:url('./fonts/Cormorant-VariableFont_wght.ttf');}
  @font-face {font-family: blabla; src:url('./fonts/Kuhlenbach2.ttf');}

  @font-face {font-family: kuhlenba; src:url('./fonts/Cormorant-Italic-VariableFont_wght.ttf');}
  @font-face {font-family: blabla; src:url('./fonts/Kuhlenbach2.ttf');}

  @media screen and (prefers-reduced-motion: reduce) {
  	html {
  		scroll-behavior: auto;
  	}
  }


  body{
  background-color: #948374;
  background-position: top right;
  /* background-size: 100%;
  */
  background-attachment: scroll;
  background-size: cover;
  }
  @media only screen and (min-device-width: 1060px) {
  body {
    background-attachment: fixed;
  }
}
@media screen and (min-width: 300px) {
  body{
  background-image: url("./img/background-800px.jpg");}
}
@media screen and (min-width: 801px) {
  body{
  background-image: url("./img/background-2000px.jpg");}
}
@media screen and (min-width: 2000px) {
  body{
  background-image: url("./img/background-2560px.jpg");}
}


  h1{
  width:100%;
  background-color: rgba(82, 71, 61, 1);
  /* FARBWECHSEL rgba(78, 65, 51, 1);????????????????????????!!!!!!!!!!!!!!!!!!!!!!!???????????!!!!!!! */
  text-align: center;
  font-family:'blabla';
  text-align: center;
  color:#a4a389;
  font-size: 2.2rem;
  letter-spacing:.6rem;
  padding-top:1rem;
  padding-bottom:1rem;
  text-shadow: 0px 0px 8px #3c352f;
  }
    @media screen and (min-width: 230px){
  .ueberschrift{
    height:90px;
    line-height: 65px;
  }
}
 @media screen and (min-width: 460px){
.ueberschrift{
  height:90px;
  line-height: 70px;
}
}

  @media screen and (min-width: 530px){
    h1{
      font-size: 2.6rem;
      letter-spacing:.7rem;
  }
  }
  @media screen and (min-width: 671px){
    h1{
    font-size: 3.5rem;
    letter-spacing:.3rem;
  }
  }
  #topbanner{
    border-bottom: solid thin black;
    border-bottom-style: solid black;
  }
  .svg{
  width: 85%;
  }
  @media screen and (min-width: 671px){
  .svg{
  width: 70%;
  }
}
@media screen and (min-width: 1070px){
.svg{
width: 55%;
}
}
@media screen and (min-width: 1370px){
.svg{
width: 40%;
}
}
  .menulink{
  height:27px;
  width:18%;
  margin: 0rem 44.5% 0rem 0%;
  color:#a4a389;
  font-family: "blabla";
  /* background-color:rgba(0, 0, 0, .15); */
  border-top-right-radius: 1rem;
  border-bottom-right-radius:1rem;
  padding:0rem 2rem 0 2rem;
  font-size: 1.7rem;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  line-height: 2.2rem;
  }

  @media screen and (min-width: 530px){
    .menulink{
    width:18%;
    margin: 0rem 44.5% 0rem 0%;
    color:#a4a389;
    background-color: transparent;
    padding:0rem 2rem 0rem 2rem;
    font-size: 1.9rem;
    line-height: 2.5rem;
    }
    }
        @media  screen and (min-width: 671px){
        .menulink{
        width:18%;
        margin: 0rem 7.5% 0rem 7.5%;
        color:#a4a389;
        background-color:transparent;
        padding:0 0rem 0 0rem;
        /* TEMP:  */font-size: 1.8rem;
        }
        }

  .menulink:hover{
    color:#86856f;
  }
/* ////////////////////////////////////////WELCOME/////////////////////////////////////// */

  .welcome{
  width:100%;
  background-color: rgba(82, 71, 61, 1);
  padding:1rem 3rem 1rem 0rem;
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: thin;
  }
  @media screen and (min-width: 671px){
    .welcome{
  padding:1rem 3rem 1rem 0rem;
}
}
  .welcomespaceimg{
    display: block;
    margin:0 0 0vh 0;

    width:100%;

  }
  @media only screen and (min-device-width: 1060px) {
    .welcome{
      margin:0 0 30vh 0;
    }
    .welcomespaceimg{
      display:none;
    }
  }
  @media  screen and (min-width: 671px){
  .welcome{
    display:flex;
    padding:1rem 3rem 1rem 3rem;
    border-bottom-style: solid;
    border-bottom-color: black;
    border-bottom-width: thin;
  }
}

/* ////////////////////////////////////////ABOUT/////////////////////////////////////// */
.about{
  width:100%;
  background-color: rgba(82, 71, 61, 1);
  padding:0rem 2rem 3rem 2rem;
  border-bottom: thin black;
  border-bottom-style:ridge;
  /* box-shadow: 0rem 0px 25px #26211c; */
}

  #aboutbanner{
    border-bottom: thin solid black;
    border-top: thin solid black;

  }
  .aboutpic{
    margin-top:2rem;
    width:40%;
    height:40%;
    flex-shrink: 0;
    border-color: black;
    border-radius: .4rem;
    border-width: thin;
    border-style: solid;
    box-shadow: 0rem 0px 5px #26211c;
  }

  @media  screen and (min-width: 201px){

  .fillpatternimg{
    margin-left: 2.5rem;
  display:inline;
  width:39%;
  }
}
@media  screen and (min-width: 348px){

.fillpatternimg{
  margin-left: 3.5rem;
display:inline;
width:39%;
}
}
  @media  screen and (min-width: 381px){

  .fillpatternimg{
    margin-left: 3.3rem;
  display:inline;
  width:39%;
  }
}
@media  screen and (min-width: 671px){

.fillpatternimg{
width:40%;
display:none;
}
}


  .abouttextcont{
    font-family: "cor";
    margin-top:2rem;
    color:#a4a389;
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin-left: 0rem;
    background-color: rgba(77, 76, 59, .3);
    padding:1rem;
    border-color: black;
    border-radius: .4rem;
    border-width: thin;
    border-style: solid;
    box-shadow: 0rem 0px 5px #26211c;
  }
  @media  screen and (min-width: 530px){
.abouttextcont{
  font-size: 1.5rem;
  line-height: 1.7rem;
  padding:2rem;
}

}
@media  screen and (min-width: 671px){
  .about{
    display:flex;
    padding:0rem 3rem 3rem 3rem;

  }
  .abouttextcont{
    /* font-family: "kuhlenbach"; */

     padding:2.5rem;
     margin-left: 2rem;
     font-size: 1.3rem;
     line-height: 1.9rem;
  }

  .aboutpic{
    width:25%;
    height:25%;
}
}
/* /////////////////////QUOTE/////////////////////// */

  .quote{
    width:100%;
    /* background-color: rgba(82, 71, 61, 1); */
    border: thin black;
    border-style:ridge;
    border-right-style: hidden;
    border-left-style: hidden;
    background-color: rgba(82, 71, 61, 1);
    padding:2rem 1rem 2rem 1rem;
    text-align: center;
    justify-content: center;
    color:#a4a389;
    font-family:'corit';
    font-size: 1.5rem;
    line-height: 2.2rem;
    text-shadow: 0px 0px 8px #3c352f;
    /* box-shadow: 0rem 10px 10px 5px rgba(38, 33, 28,.8); */
  }
  .quotetopspaceimg{
    display:block;
    width:100%;
  }
  .quotebottomspaceimg{
    display:block;
    width:100%;

  }
  @media only screen and (min-device-width: 1060px) {
    .quote{
      margin:20vh 0 20vh 0;
    }
    .quotetopspaceimg{
      display:none;
    }
    .quotebottomspaceimg{
      display:none;
    }
  }
  @media  screen and (min-width: 530px){
.quote{
  padding:2rem 3rem 2rem 3rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
}
}

  @media  screen and (min-width: 671px){
.quote{
  padding:2rem 3rem 2rem 3rem;
  font-size: 2rem;
  line-height: 3rem;
}
}

  /* ////////////////////////////////////////GALLERY////////////////////////////// */
  .gallerydescription{
    /* background-color: rgba(78, 67, 54, 1); */
    width: 100%;
    box-shadow: 0px 8px 12px #3c352f;
    margin: 0rem 0rem 0rem 0rem;
    border-bottom:thin solid black;
    /* border-radius: 5px; */
    padding:1.5rem;
    color:#a4a389;
    font-family: "cor";
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none;
  }
  .gallerydescriptionhint{
    font-size: 1.2rem;
    text-decoration: none;

}
    .spacer{
    height:5px;
    background-color: rgba(43, 36, 29, 1);
    box-shadow: 0px 0px 8px black;
    }
    .gallery{
    border-bottom: thin solid black;
    border-top: thin solid black;
    background-color: rgba(82, 71, 61, 1);
    margin:0 0 0 0;
    min-height:105vh;
    }
    .flexcontpics{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    }
  .homepagepics{
    /* overflow: hidden; */
    /* width:23vw; */
    max-width: 300px;
     margin: 2rem 1rem 2rem 1rem ;
    /* display:flex; */
    border-color: #6c5f54;
    border-radius: .4rem;T
    border-width: thin;
    border-style: solid;
    box-shadow: 0rem 0px 5px #26211c;
    }
   .homepagepics:hover{

     max-width: 300px;
      margin: 2rem 1rem 2rem 1rem ;
        display:flex;
        border-color: rgb(51, 45, 41);
        border-radius: .4rem;
        border-width: thin;
        border-style: solid;
        box-shadow: 0rem 0px 8px #000;
    }
    @media screen and (min-width: 100px){
    .homepagepics{
    max-width:300px;
    }
    .homepagepics:hover{
      max-width:300px;    }
    }

    @media screen and (min-width: 1037px){
    .homepagepics{
    max-width:210px;
    }
    .homepagepics:hover{
      max-width:210px;    }
    }

    /*}*/

    .bookpics{
      max-width: 200px;
      margin: 2rem 6rem 2rem 6rem ;
      border-color: #6c5f54;
      border-radius: .4rem;
      border-width: thin;
      display:block;
      border-style: solid;
      box-shadow: 0rem 0px 5px #26211c;
    }
.booktitle{
font-size: 2.5rem;
font-family: "kuhlenba";
}
    /* @media  screen and (max-width: 5540px) and (min-width: 1540px){
      .homepagepics{
        max-width: 240px;
        min-width: 200px;
      }
      .homepagepics:hover{
        max-width: 240px;
        min-width: 200px;

      }
    } */
    @media  screen and (max-width: 1540px) and (min-width: 1034px){
      .homepagepics{
        max-width: 200px;
      }
      .homepagepics:hover{
        max-width: 200px;
      }
    }
    @media screen and (max-width: 1034px) and (min-width: 600px){
    .homepagepics{
      max-width: 160px;
      min-width:150px;

    }
    .homepagepics:hover{
      max-width: 160px;
      min-width:150px;

    }
    }
    @media screen  and (max-width:600px){
      .homepagepics{
        max-width: 110px;
        min-width: 100px;
      }
      .homepagepics:hover{
        max-width: 110px;
        min-width: 100px;
      }
    }

.buyinginfo{
  background-color: rgba(82, 71, 61, 1);
  width: 100%;
  box-shadow: 0px -8px 12px #3c352f;
  background:
  margin: 0rem 0rem 0rem 0rem;
  border-bottom:thin solid black;
  border-top:thin solid black;

  padding:1.5rem;
  color:#a4a389;
  font-family: "cor";
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
}
.buysmall{
font-size: 1.2rem;

}
    .flexconttabs {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

    }
    #series8{
    justify-content:center;
}
    .series{

      text-align: center;
      color:#a4a389;
      font-size: 1.8rem;
      text-align: center;
      font-weight: bold;
      text-decoration: none;
      justify-content: center;
      align-items: center;
      font-family: 'blabla';
      display:flex;
      padding: 1rem;
      padding-top: 1.6rem;
      flex-grow: 1;
      background:rgba(82, 71, 61, 1);
      height:3rem;
      border-bottom: thin solid black;
      border-left: thin solid black;
      border-top: thin solid black;
      transition: background-color 0.2s ease;

    }
    .series:hover{
      cursor: pointer;
      background:rgba(79, 68, 59, 1);
      border-top: 2px solid rgba(43, 36, 29, 1);
      transition: background-color 0.2s ease;
    }
    .lightbox{
      position:fixed;
      top:0;
      left:0;
      width:100vw;
      height:100vh;
      background: rgba(0, 0, 0, 0.7);
      display:none;
      align-items: center;
      justify-content: center;
    }
    .lightbox:target{
      display:flex;
    }
    .lightbox-content{
      width:auto;
      background:rgba(60, 47, 36, 1);
      padding:.2rem .2rem 0 .2rem;
      border-color: rgba(0, 0, 0, .8);
      border-radius: 1rem;
      border-width: thin;
      border-style: solid;
      margin-left:.5rem;
      /* // position:relative; */
    }
    @media screen and (min-width: 230px){
      .lightboxpics{
      width: 160px;
      height: 273px;
      border: medium solid rgba(0, 0, 0, .3);
      border-radius: 1rem;
      }
    }
    @media screen and (min-width: 348px){
      .lightboxpics{
      width: 200px;
      height: 333px;
      border: medium solid rgba(0, 0, 0, .3);
      border-radius: 1rem;

      }
    }
    @media screen and (min-width: 480px){
      .lightboxpics{
      width: 300px;
      height:500px;
      border: medium solid rgba(0, 0, 0, .3);
      border-radius: 1rem;
      }
    }

    .bookdecontainer{
      max-width: 80%;
      color:#a4a389;
      margin-left: 0rem;
      background-color: rgba(77, 76, 59, .3);
      padding:1rem 2rem 2rem 2rem;
      margin-bottom: 2rem;
      border-color: black;
      border-radius: .4rem;
      border-width: thin;
      border-style: solid;
      box-shadow: 0rem 0px 5px #26211c;

    }
    #whale-animal-horizontal {
      width: 582px;
      height:360px;
    }
    #vortex-recent-horizontal {
      width: 533px;
      height:392px;
    }
    #vortex-recent-horizontal {
      width: 533px;
      height:392px;
    }
    .close{
    position:fixed;
    width:100vw;
    height:100vh;
    /* background:black; */
    top:0em;
    right:0em;
    display:flex;
    align-items: center;
    text-decoration: none;
    justify-content: center;
    }
    @media screen and (min-width: 230px){

    .description{
      display: block;
      font-family:'kuhlenbach';
      color: #a4a389;
      font-size: 1.0rem;
      padding: .6rem;
      padding-top: 13rem;
    }
  }
  @media screen and (min-width: 348px){

  .description{
    display: block;
    font-family:'kuhlenbach';
    color: #a4a389;
    font-size: 1.2rem;
    padding: 1rem;
    padding-top: 16rem;
  }
}
  @media screen and (min-width: 480px){
  .description{
    display: block;
    font-family:'kuhlenbach';
    color: #a4a389;
    font-size: 1.5rem;
    padding: 1.6rem;
    padding-top: 22rem;
  }
}
@media screen and (min-width: 550px){
.description{
  display: block;
  font-family:'kuhlenbach';
  color: #a4a389;
  font-size: 2rem;
  padding: 2rem;
  padding-top: 24rem;
}
}
    .description-horizontal{
      padding-top: 2rem;
    }
.bookdescription{
  text-align: center;
  padding: 0rem;
  text-decoration: none;
  font-family: "cor";
  color:#a4a389;
  font-size: 1.2rem;
}
    /* ////////////////////////////////////////CONTACT/////////////////////////////////////// */
    #contactbanner{
      border-bottom: thin solid black;
      border-top: thin solid black;
    }

    .formcontainer{
      border: thin solid rgba(0,0,0, 0.9);
      border-radius: 1rem;
      width:80%;
      margin:1rem auto 1rem auto;
      background-color: rgba(78, 67, 54, 1);
      box-shadow: 0rem 0px 5px #26211c;

    }
    @media  screen and (min-width: 671px){
      .formcontainer{
      margin: 2rem auto 1rem auto;
    }
    }

    .contacttext{
      text-align: center;
      justify-content: center;
      background-color: rgba(59, 52, 45, 1);
      color:#a4a389;
      font-family:'cor';
      font-size: 1.4rem;
      line-height: 2rem;
      text-shadow: 0px 0px 8px #3c352f;
      padding: 1rem 1.5rem 1rem 1.5rem;
      border-bottom: thin solid black;
    }

    @media  screen and (min-width: 530px){
  .contacttext{
    padding:1rem 2rem 1rem 2rem;
    font-size: 1.5rem;
    line-height: 2.2rem;
  }
  }

    @media  screen and (min-width: 671px){
  .contacttext{
    padding:1rem 3rem 1rem 3rem;
    font-size: 1.7rem;
    line-height: 2.3rem;
  }
  }

    .contacttext2{
      text-align: center;
      justify-content: center;
      color:#a4a389;
      font-family:'blabla';
      font-size: 1.5rem;
      line-height: 1.9rem;
      text-shadow: 0px 0px 8px #3c352f;
      padding: 2rem 0rem 1rem 0rem;

    }
    @media  screen and (min-width: 530px){
      .contacttext2{
        font-size: 2.1rem;
        line-height: 2.8rem;
        padding: 2rem 3rem 1rem 3rem;
      }
    }
    @media  screen and (min-width: 671px){
      .contacttext2{
        font-size: 2.3rem;
        line-height: 3rem;
        padding: 2rem 3rem 1rem 3rem;

      }
    }
    .contact{
      background-color: rgba(82, 71, 61, 1);
      padding-bottom: .8rem;
      margin:0vh 0 0 0;
      text-align: center;
      }
    .contactspaceimg{
      display:block;
      width:100%;
    }
      @media only screen and (min-device-width: 1060px) {
        .contact{
          margin:30vh 0 0 0;
        }
        .contactspaceimg{
          display:none;
        }
      }
      .copyrightdiv{
        border-top: thin solid black;
      background-color:rgba(78, 67, 54, 1);
      font-family: monospace;
      font-size: 1.2rem;
      color: #a4a389;
      text-align: center;
      padding:1rem;
      }
    .formelement{
      border: thin solid black;
      border-radius: .4rem;
      color:black;
      margin: 0rem 1rem 0rem 1rem;
      padding: 1rem;
      background-color: #61584a;
    }
    .input{
      border: thin solid black;
      border-radius: .4rem;
      color:#a4a389;
      margin-top: 1rem;
      margin-bottom: 4rem;
      padding: .6rem;
      background-color: #413b32;
    }

    .input:hover {
      background-color: #37322a;
}
.icons{
  /* FARBE IST #1e1e1e */
  width:  29px;
  height: 29px;
}
    #messagefield{
      width: 30rem;
      height: 5rem;

    }
.constructioncomment{
  font-size: .7rem;
  font-family: monospace;
}