@font-face {
  font-family: "AvenirNextLTPro-Demi";
  src: url("./fonts/AvenirNextLTPro-Demi.eot"); /* IE9 Compat Modes */
  src: url("./fonts/AvenirNextLTPro-Demi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/AvenirNextLTPro-Demi.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/AvenirNextLTPro-Demi.woff") format("woff"), /* Modern Browsers */
    url("./fonts/AvenirNextLTPro-Demi.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background: url('bg.jpg') center no-repeat;
    background-size: cover;
    min-height: 90vh;
}

#startpage {
    display: flex;
    flex-flow: column;
    padding: 5vh 0;
    height: 90vh;
}

#logo { 
    display: flex;
    flex-flow: column;
    margin: 0 auto;
    height: 20vh;
    max-width: 90%;
}

#logo img {
    max-height: 100%;
    width: auto;
}

#split_range {
    background: rgba(167,53,58,0.58);
    margin: 5vh 0 }

#split_range .wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 10vh 0 10vh;
}

#split_range .wrapper * {
    color: #fff;
    font-size: 130px;
    font-family: "AvenirNextLTPro-Demi";
    text-decoration: none;
}

#first,
#secound { width: 40%;}

#first { margin: 0 3% 0 auto; text-align: right; }

#secound { margin: 0 auto 0 3%; }

#first::before {
    content: "LEBEN";
    border-bottom: 5px solid transparent;
    transition: all 0.5s;
}

#secound::after {
    content: "ERLEBEN";
    border-bottom: 5px solid transparent;
    transition: all 0.5s;
}

#first:hover::before {
    content: "GEMEINDE";
    border-bottom: 5px solid rgba(167,53,58,1);
    transition: all 0.5s;
}

#secound:hover::after {
    content: "TOURISMUS";
    border-bottom: 5px solid rgba(167,53,58,1);
    transition: all 0.5s;
}

#banner {
    display: flex;
    flex-flow: column;
    margin: 0 auto;
    height: 25vh;
    max-width: 90%;
}

#banner a{
  display: flex;
  flex-flow: column;
  height: 100% !important;
}

#banner img {
    max-height: 100%;
    width: auto;
}

@media(max-width: 1800px){
  #split_range .wrapper * {
    font-size: 120px;
  }
}

@media(max-width: 1700px){
  #split_range .wrapper * {
    font-size: 110px;
  }
}

@media(max-width: 1600px){
  #split_range .wrapper * {
    font-size: 100px;
  }
}

@media(max-width: 1500px){
  #split_range .wrapper * {
    font-size: 90px;
  }
}

@media(max-width: 1280px){
  #split_range .wrapper * {
    font-size: 75px;
  }
}

@media(max-width: 1024px){
  #split_range .wrapper * {
    font-size: 60px;
  }
  #logo { max-width: 80% !important; height: auto; }
}

@media(max-width: 1023px){
  #split_range .wrapper * {
    font-size: 65px;
  }
}