@font-face {
  font-family: "Agrandir Medium";
  src:   url("../fonts/Agrandir-Medium.otf");
  src:   url("../fonts/Agrandir-Medium.woff") format("woff"),
    url("../fonts/Agrandir-Medium.ttf")  format("truetype"),
    url("../fonts/Agrandir-Medium.eot");
}
@font-face {
  font-family: "Knile SemiBold";
  src:   url("../fonts/Agrandir-Bold.otf");
  src:   url("../fonts/Agrandir-Bold.woff") format("woff"),
    url("../fonts/Agrandir-Bold.ttf")  format("truetype"),
    url("../fonts/Agrandir-Bold.eot");
}
@font-face {
  font-family: "Agrandir Heavy";
  src:   url("../fonts/Agrandir-Heavy.otf");
  src:   url("../fonts/Agrandir-Heavy.woff") format("woff"),
    url("../fonts/Agrandir-Heavy.ttf")  format("truetype"),
    url("../fonts/Agrandir-Heavy.eot");
}
html {
  scroll-behavior: smooth;
}
body {
    margin: 0;
}

.slideshow-container {
  max-width: 80%;
  position: relative;
  margin: auto
}

.numbertext {
  color: #65c8d0;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color .6s ease
}

.active {
  background-color: #717171
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s
}
.responsive {
  width: 10%;
  height: auto;
}

#icon{
  width: 5%;
  height: auto;
}



h1 {
  font-family: "Agrandir Heavy";
  color: #65c8d0;
  font-size: 24px;
  font-style: normal;
  text-align: center;
  
}

h2 {
  font-family: "Agrandir Bold";
  color: white;
  font-size: 32px;
  font-style: normal;
}

#header_name, #header_slogan {
  display: inline;
  text-align: center;
}

h3{
  font-family: "Agrandir Heavy";
  color: black;
  font-size: 36px;
  text-decoration: underline;
  text-decoration-color: black;
  text-decoration-style: solid;
  text-align: center;
}

p {
  font-family: Agrandir Medium;
  font-size: 14px;
  text-align: left;
  hyphens: auto;

}
td {
  font-family: Agrandir Medium;
  font-size: 18px;
  padding-left: 10pt;
  hyphens: auto;

}
details {
  cursor: pointer;
}
#stelli1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;

}

sup {
  font-size: 12px;
}
table {
  width: fixed;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
}


div.content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#banner {
  width: 100%;
  height: auto;
}

#header {
  background-color: #65c8d0;
}

.sumtext {
  font-family: "Agrandir Heavy";
  color: #65c8d0;
  font-size: 20px;
  text-decoration: none;
  text-decoration-color: black;
  text-align: center;
}
#mehrperson {
  font-size: 28px;
  color: #65c8d0;
}
#zurwahl li{
  font-family: knile;
  font-size: 14px;
  text-align: center;
  hyphens: auto;
}

.topnav {
    background-color: #65c8d0;
    overflow: hidden;
}

.topnav a {
    float: right;
    font-family: Agrandir Medium;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 1.3% 1.25%; 
    text-decoration: none;
    font-size: 18px;

  }
  .topnav button {
    float: right;
    font-family: Agrandir Medium;
    display: block;
    color: #FFFFFF;
    background-color: #65c8d0;
    text-align: center;
    padding: 1.3% 1.25%; 
    text-decoration: none;
    font-size: 18px;
    border: none;

  }
  .topnav button:hover {
    background-color: #fcd404;
  }
  #trennstrich {
  font-family: "Agrandir Medium";
  color: white;
  font-size: 18px;
  font-weight: 100;
  letter-spacing: 1px;
  padding: 2px;
  vertical-align: 5px;
  }
  #footer a {
  
  font-family: "Agrandir Medium";
  color: white;
  font-size: 18px;
  font-weight: 100;
  letter-spacing: 1px;
  padding: 2px;
  vertical-align: 5px;
  }
  #footer  {
  background-color: #65c8d0;
  text-align: center;
  margin-top: 25px;
  padding-top: 10px;
  
  }
  
  /*
  .topnav a:hover {
      background-color: white;
      color: red;   
  }
  */
  .topnav a:hover {
    background-color: #fcd404;  
}
  .active {
    background-color: #fcd404;
    color: white;
  }
  .topnav .icon {
    display: none;
  }

  #backtotop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #65c8d0; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    /*font-family: Agrandir Medium;*/
    text-decoration: none;
  }

  #facebookbar {
    position: fixed;
    right: 0px;
    top: 325px;
    z-index: 98;
    
  }
  #facebookfeed {
    display: block;
  }
  .fb-invisible
  {
    display: none !important;
  }
  #profilbild img {
    float: left;
    width: 100%;
    height: auto;
   }
#stellisitzend {
  height: auto;
  width: 21%;
  float: right;
  margin-left: 50px
}

#meineideen {
  width: 90%
}
  
  
  #backtotop:hover {
    background-color: gray; /* Add a dark-grey background on hover */
  }

  #icontoggle {
    float: left;
    padding-top: auto;
    padding-bottom: auto;
    cursor: pointer;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .contacttable {
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }
    .contacttable td {
      font-size: 12px;
    }
    .contacttable img {
      width: 30px;
    }
    .datetable {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .datetable td {
      font-size: 12px;
      padding-left: 0;
    }
    .datetable img {
      width: 30px;
      margin-left: 10px;
    }
    .sumtext {
      font-size: 16px;
    }
    #mehrperson {
      font-size: 22px;
      padding-top: 15px;
    }
    #facebookbar {
     
      display:none;
    }

    h3{
      font-family: "Agrandir Heavy";
      color: black;
      font-size: 28px;
      text-decoration: underline;
      text-decoration-color: black;
      text-decoration-style: solid;
      text-align: center;
    }
    .topnav button {
      display: none;
  
    }
#stellisitzend {
    height: auto;
    width: 27%;
    display: none
  }
.dot {
 display: none;
}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto
}
#ubermich img {
  width: 100%;
  }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive-menu {position: relative;}
    .topnav.responsive-menu a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive-menu a {
      float: none;
      display: block;
      text-align: left;
    }

    .sumtext {
      font-family: "Agrandir Heavy";
      color: #65c8d0;
      font-size: 16px;
      text-decoration: none;
      text-decoration-color: black;
      text-align: center;
    }

  }