@font-face {
    font-family: 'alte_haas_groteskbold';
    src: url('altehaasgroteskbold-webfont.woff2') format('woff2'),
         url('altehaasgroteskbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'alte_haas_groteskregular';
    src: url('altehaasgroteskregular-webfont.woff2') format('woff2'),
         url('altehaasgroteskregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



body, html{
    width: 100%;
    height: auto;
      margin: 0px;
      padding: 0px;
      color: #000;
    
      font-size: 24px;
      font-family: 'Old Standard TT', serif;
/*   text-shadow: 0px 0px 0px #D8D8D7;*/
     

      
}
html{
  background-color: #e0efda;
  padding: 0;
  margin: 0;
}

iframe{
  width: 100%;
  height: 100%;
  overflow: scroll;


}



.dwrap, .dwrap-top{
 border-bottom: 1px solid #000;
width: 80vw;
padding-left:10vw;
padding-right:10vw;
padding-top: 4vh;
padding-bottom: 4vh;
}

.dwrap-about{
border-bottom: 0px solid #000;
width: 80vw;
padding-left:10vw;
padding-right:10vw;
padding-top: 4vh;
padding-bottom: 4vh;

}


input{
  font-size: 24px;
      font-family: 'Old Standard TT', serif;
}

.dwraptop{

}







.about-btn {
    cursor: pointer;
}



/* Overlay styling */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(224, 239, 218, 0.9); /* Opaque background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Allow scrolling if content overflows */
    z-index: 9999; /* Make sure it appears above other content */
}

.overlay-content {
    background-color: rgba(255, 255, 159, 1.0);
    padding: 20px;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    color: #f15a38;
}

/* Close button in overlay */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    color: black;
    font-size: 20px;
    cursor: pointer;
}

/* Scroll locking when overlay is open */
body.lock-scroll {
    overflow: hidden;
}







.field{
 border: none;
}


.subscribe{
  background-color: transparent;
}


.dleft{
  width: 70%;
  display: inline-block;
  vertical-align: top;
  text-align: normal;
}

.dright{
  width: 27%;
  display: inline-block;
  vertical-align: top;
   


}

.dright img  {
  max-width: 175px;
width: 75%;
  height: auto;
   vertical-align: top;
   float: right;

}



a{
    color: #000;
    text-decoration: none;
    border-bottom: 1px dotted #000;
    overflow-wrap: break-word;

}

a:hover{
       /*color: #6a0fe0; */
       color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;


 
}



p.button {
  -webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
 position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 4vh;
}






p.small{
font-size: 14px;
text-align: center;
padding: 3vh 20vw 0vh 20vw;
font-family: 'alte_haas_groteskregular';
}

a.bold{
    text-decoration: none;
    
}

.bold{

font-family: 'alte_haas_groteskbold';
letter-spacing: 1px;
}


.reg{

font-family: 'alte_haas_groteskregular';
letter-spacing: 1px;
}




.mono{

font-family: 'IBM Plex Mono', monospace;
font-weight: 300;
letter-spacing: 1px;
}


.image{
 
  -webkit-margin-before: 0em;
-webkit-margin-after: 2em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin: 0 auto;
text-align: center;

}




img{
  height: 45vh;
  width: auto;
  padding: 20px 20px 0px 0px;
  display: inline-block;
 
}

img.logos{
  width: auto;
  height: 90px;
  vertical-align: top;
  padding: 5px 7px 0px 0px;
}




img.alone{
  height: 45vh;
  width: auto;
  padding: 20px 20px 0px 0px;
  display: block;
  margin: 0 auto;
 
}

img.alone-landscape{
   width: 45%;
  height: auto;
  padding: 20px 20px 0px 0px;
  display: block;
  margin: 0 auto;
 
}

img.landscape{
  width: 45%;
  height: auto;
  padding: 20px 20px 0px 0px;
  display: inline-block;
}

img.triple-landscape{
   width: 30%;
  height: auto;
  padding: 20px 20px 0px 0px;
  display: inline-block;
  margin: 0 auto;
 
}



img.big {
height: auto;
  width: 70vw;
  padding: 20px 20px 0px 0px;
  display: block;
  margin: 0 auto;

}

img.medium {
height: 75vh;
  width: auto;
  padding: 20px 20px 0px 0px;
  display: block;
  margin: 0 auto;

}


img.medium-inline {
height: 75vh;
  width: auto;
  padding: 20px 20px 0px 0px;
  display: inline-block;
  margin: 0 auto;

}









/* BUTTON TOP */


/*
#button {
  display: inline-block;
  background-color: transparent;
  width: 60px;
  height: 60px;
  text-align: center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  font-family: Arial;
}
#button::after {
  content: "⤴";
  font-weight: bold;
  font-style: normal;
  font-size: 2em;
  line-height: 60px;
  color: #000;
}
#button:hover {
  cursor: pointer;
  
}
#button:active {
  
}
#button.show {
  opacity: 1;
  visibility: visible;
}

*/










@media only screen and (max-width: 800px) {
 



      body {
        font-size: 14px;
      }



    
      .dwrap, .dwraptop{
       border-bottom: 1px solid #000;
      width: 86vw;
      padding-left:7vw;
      padding-right:7vw;
      padding-top: 2vh;
      padding-bottom: 2vh;
      }



      .dwraptop{
      
  top: 2vh;
      }
      




    .dleft{
  width: 70%;
  display: inline-block;
  vertical-align: top;
  
}

.dright{
  width: 28%;
  display: inline-block;
  vertical-align: top;
  text-align: right;


}

.dright img {
  max-width: 100px;
width: 75%;


}


   
      img,
      img.alone,
      img.big, 
     img.medium,
     img.medium-inline,
     img.landscape,
     img.triple-landscape {
      width: 70vw;
      height: auto;
      display: block;
      margin: 0 auto;
    }

img.logos{
  display: inline-block;
  width: auto;
  height: 60px;
  vertical-align: top;
  padding: 5px 7px 0px 0px;
}
  



    .image{
     
      -webkit-margin-before: 0em;
    -webkit-margin-after: 2em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin: 0 auto;
    text-align: center;

    }


    p.small{
    font-size: 9px;
    text-align: center;
    padding: 2vh 9vw 0vh 9vw;
    }



p.button {
 
  top: 2vh;
}



#button {
  width: 40px;
  height: 40px;
 

}
#button::after {

  font-size: 1,5em;
  line-height: 40px;

}






}