* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  font-family: "AvenirLTStd-Medium";
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
/*  */
header, footer {
  /* height: 80vh !important; */
  /* height: 500px !important; */
}
footer {
  position: relative;
  width: 100%;
}
#cta1 {
  display: block;
  position: absolute;
  width: 15rem;
  margin-top: -200px;
  left: 30%;
  /* transform: translateX(-65%); */
  font-size: 1.25rem;
  line-height: 1;
}
#cta2 {
  display: block;
  position: absolute;
  width: 15rem;
  margin-top: -200px;
  left: 65%;
  /* transform: translateX(55%); */
  font-size: 1.25rem;
  line-height: 1;
}
#footer3 {
  text-transform: uppercase;
  font-size: 2rem;
  /* left:50%;
  transform: translateX(-50%); */
  text-align: center;
  margin: 4rem auto;
}
.footer_background {
  color: #fff;
  padding: 4rem;
  position: relative;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}
.footer_background::before {
    border-left: 100vw solid rgba(0, 24, 66, 1);
    box-shadow: 50vw 0 0 rgba(0, 24, 66, 1);
    transform: translateX(-100vw);
    box-sizing: content-box;
    content: "";
    position: absolute;
    width: 0;
    height: calc(100% - 0rem);
    left: calc(50% - 0vw);
    margin: -4rem 0 0 0;
    z-index: -1;
}
footer ul {
    display: flex;
    list-style-type: none;
    margin: 0 0 1rem 0;
}
footer ul li:not(:last-of-type), footer section div div a:not(:last-of-type) {
    margin-right: 2rem;
}
footer a, footer a.visited {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}
@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot');
	src: url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}

.icon-twitter:before {
	content: "\ea96";
	transition: all 0.3s;
}

.icon-facebook:before {
	content: "\ea91";
	transition: all 0.3s;
}

.icon-youtube:before {
	content: "\ea9d";
	transition: all 0.3s;
}

.icon-linkedin:before {
	content: "\eaca";
	transition: all 0.3s;
}

.icon-instagram:before {
	content: "\ea92";
	transition: all 0.3s;
}

a.twitter:hover i:before {
	color: #1DA1F2;
}

a.facebook:hover i:before {
	color: #3b5998;
}

a.youtube:hover i:before {
	color: #c4302b;
}

a.linkedin:hover i:before {
	color: #0e76a8;
}

a.instagram:hover i:before {
	color: #e64c94;
}
/*  */
/* Fonts */
h1 {
  text-transform: uppercase;
  font-size: 1.75rem;
  margin-bottom: 2rem;
}
h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

p {}
.lightbox_hl {
  font-size: 1.5rem;
  font-weight: bold;
  /* margin-bottom: 1rem; */
  margin-right: 3rem;
}
.lightbox_hl+p, p+p, p+a {
  margin-top: 1rem;
}
a {
  color: inherit;
  display: inline-block;
}
.text_darkblue {
  color: rgb(0, 24, 66);
}
.text_lightblue {
  color: #435395;
}
.text_green {
  color: rgb(100, 163, 66);
}
.text_darkgreen {
  color: #0B6822;
}

/* Legende */
.legende svg {
    width: 1rem;
    top: 2px;
    position: relative;
}
.legende span {
  margin-right: 1rem;
}
.circle_darkblue  g circle:first-of-type {
  stroke: rgb(0, 24, 66) !important;
}
.circle_darkblue  g circle:nth-of-type(3) {
  fill: rgb(0, 24, 66) !important;
}
.circle_lightblue  g circle:first-of-type {
  stroke: #435395 !important;
}
.circle_lightblue  g circle:nth-of-type(3) {
  fill: #435395 !important;
}
.circle_green  g circle:first-of-type {
  stroke: rgb(100, 163, 66) !important;
}
.circle_green  g circle:nth-of-type(3) {
  fill: rgb(100, 163, 66) !important;
}
/*  */
  .scrolldown {
      text-transform: uppercase;
      position: relative;
      left: 62%;
      transform: translateX(-50%);
      display: inline-block;
      margin-top: 4rem;
      margin-bottom: 4rem;
  }
.scrolldown::after {
  content: "";
  width: 6rem;
  height: 6rem;
  background: url('../img/pfeil.png') no-repeat;
  display: block;
  margin: 1rem 0 0 0;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/*  */
.position {
  position: absolute;
}
#wrapper {
  background: url('../img/bg.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
#header_wrapper {
  min-height: 75vh !important;
}
header {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem;
}
#header_content img {
  width: 100%;
  margin-bottom: 4rem;
}
/* Navigation */
.nav_wrapper {
  position: fixed;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 2rem 2rem 0 0;
  top: 0;
  z-index: 5;
}
#nav_content {
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: block;
  visibility: hidden;
  position: relative;
  left: 50px;
  opacity: 0;
}
#nav_content.active {
  display: block;
  position: relative;
  left: 0;
  opacity: 1;
  visibility: visible;
}
#nav_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 20px;
  line-height: 1.5rem
}
#nav_items a {
  margin-right: 1rem;
  text-decoration: none;
  transition: .3s;
}
#nav_items a:hover {
  color: #F7A823;
}
#nav_button {
  z-index: 20;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
svg.menu_button {
  width: 20px;
  height: 20px;
  cursor: pointer;
  fill: #0B6822;
}
#nav_button.rotate-90 svg path {
  fill: #F7A823;
}
.rotate-90 {
  transform: rotate(-90deg) !important;
}
/*  */
/*  */
#route {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* overflow: hidden; */
}
#route svg {
  /* margin: 0 auto; */
  position: relative;
  display: block;
  /* width: 1400px;
    height: 7680px; */
  /* left: 50%;
    transform: translateX(-50%); */
  /* margin-top: 500px; */
}
#route svg text {
  font-size: 20px !important;
  font-family: "AvenirLTStd-Light" !important;
}
#path1 {
  stroke: rgb(100, 163, 66);
}
#dot1 {
  fill: rgb(100, 163, 66);
}
#path2 {
  stroke: #435395;
}
#dot2 {
  fill: #435395;
}
#path3 {
  stroke: #001842;
}
#dot3 {
  fill: #001842;
}
/* Jahr */
.yearparent::before {
  position: fixed;
  content: '';
}
.yearwrapper {
  position: absolute;
}
.year2010 {
  top: 0.5%;
  left: 5%;
}
.year2011 {
  top: 3%;
  right: 5%;
}
.year2012 {
  top: 8%;
  left: 5%;
}
.year2013 {
  top: 17%;
  right: 5%;
}
.year2014 {
  top: 28%;
  left: 5%;
}
.year2015 {
  top: 34%;
  right: 5%;
}
.year2016 {
  top: 39.5%;
  left: 5%;
}
.year2017 {
  top: 54%;
  right: 5%;
}
.year2018 {
  top: 62%;
  left: 5%;
}
.year2019 {
  top: 68%;
  right: 5%;
}
.year2020 {
  top: 80%;
  left: 5%;
}
.yearchild {
  font-size: 10rem;
  color: #fff;
}
/*  */
/* Dots */
/*  */
.dot_wrapper .linedot {
  fill-opacity: 0;
  stroke-opacity: 0;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}
.dot_wrapper.visible .linedot {
  fill-opacity: 1;
  stroke-opacity: 1;
  opacity: 1;
  visibility: visible;
}
g.darkblue circle:nth-of-type(1) {
  transition: .3s;
  stroke: rgb(0, 24, 66) !important;
}
g.darkblue text, g.darkblue circle:nth-of-type(3) {
  transition: .3s;
  fill: rgb(0, 24, 66) !important;
}
g.dot_wrapper:hover circle:nth-of-type(1), g.dot_wrapper.active circle:nth-of-type(1) {
  stroke: #F7A823 !important;
  cursor: pointer;
}
g.dot_wrapper:hover text, g.dot_wrapper:hover circle:nth-of-type(3), g.dot_wrapper.active text, g.dot_wrapper.active circle:nth-of-type(3) {
  fill: #F7A823 !important;
  cursor: pointer;
}
/* Lightbox */
.lightbox {
  position: absolute;
  left: 50%;
  margin: 0 auto;
  background: #fff;
  min-width: 300px;
  max-width: 620px;
  transition: .5s;
  opacity: 0;
  z-index: 3;
  visibility: hidden;
  top: 0 !important;
  position: fixed;
}
.lightbox.left {
  transform: translateX(-100%);
}
.lightbox.right {
  transform: translateX(0%);
}
.lightbox.active {
  opacity: 1;
  transform: translateX(-50%);
  z-index: 4;
  visibility: visible;
  top: 0 !important;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
}
/*  */
/* Position Lightbox */
/*  */
#g-1_lightbox {
  top: -3.1%;
}
#g-2_lightbox {
  top: -0.2%;
}
#g-3_lightbox {
  top: 1.5%;
}
#g-4_lightbox {
  top: 2.5%;
}
#g-5_lightbox {
  top: 4%;
}
#g-6_lightbox {
  top: 8.4%;
}
#g-7_lightbox {
  top: 10.4%;
}
#g-8_lightbox {
  top: 11.3%;
}
#g-9_lightbox {
  top: 14.9%;
}
#g-10_lightbox {
  top: 16.6%;
}
#g-11_lightbox {
  top: 18.1%;
}
#g-12_lightbox {
  top: 20.1%;
}
#g-13_lightbox {
  top: 21.5%;
}
#g-14_lightbox {
  top: 25.5%;
}
#g-15_lightbox {
  top: 27.2%;
}
#g-16_lightbox {
  top: 31.3%;
}
#g-17_lightbox {
  top: 33.2%;
}
#g-18_lightbox {
  top: 34%;
}
#g-19_lightbox {
  top: 35.1%;
}
#g-20_lightbox {
  top: 36.7%;
}
#g-21_lightbox {
  top: 38.9%;
}
#g-22_lightbox {
  top: 44%;
}
#g-23_lightbox {
  top: 46%;
}
#g-24_lightbox {
  top: 47.1%;
}
#g-25_lightbox {
  top: 53.4%;
}
#g-26_lightbox {
  top: 55%;
}
#g-27_lightbox {
  top: 56.4%;
}
#g-28_lightbox {
  top: 60.7%;
}
#g-29_lightbox {
  top: 65.4%;
}
#g-30_lightbox {
  top: 67%;
}
#g-31_lightbox {
  top: 68.8%;
}
#g-32_lightbox {
  top: 70%;
}
#g-33_lightbox {
  top: 71.7%;
}
#g-34_lightbox {
  top: 73.1%;
}
#g-35_lightbox {
  top: 80%;
}
#g-36_lightbox {
  top: 81.7%;
}
#g-37_lightbox {
  top: 83.3%;
}
#g-38_lightbox {
  top: 84.7%;
}
.lightbox.green {
  border: 10px solid rgb(100, 163, 66);
}
.lightbox.darkblue {
  border: 10px solid rgb(0, 24, 66);
}
.lightbox.lightblue {
  border: 10px solid rgb(67, 83, 149);
}
.lightbox figure {
  width: 100%;
  position: relative;
}
.lightbox figure img {
  width: 100%;
  display: block;
}
.lightbox figcaption {
  color: #fff;
  font-size: 0.75rem;
  position: absolute;
  bottom: 0;
  padding: .5rem 1rem .5rem calc(.5rem + 10px);
  margin-left: -10px;
}
.lightbox.green figcaption {
  background: rgb(100, 163, 66);
}
.lightbox.darkblue figcaption {
  background: rgb(0, 24, 66);
}
.lightbox.lightblue figcaption {
  background: rgb(67, 83, 149);
}
.close:after {
  display: inline-block;
  content: "\00d7";
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  margin: 1rem;
  line-height: 0.5;
  font-size: 1.25rem;
  color: #fff;
}
.lightbox.green .close:after {
  background: rgb(100, 163, 66);
}
.lightbox.darkblue .close:after {
  background: rgb(0, 24, 66);
}
.lightbox.lightblue .close:after {
  background: rgb(67, 83, 149);
}
.close:hover {
  cursor: pointer;
}
.tile_content {
  padding: 1rem;
  position: relative;
  background: #fff;
  color: #000;
}
hr {
  margin: 1rem 0;
  border: 0;
  border-bottom: 1px solid grey;
}
.tile_quote {
  padding: 1rem;
  position: relative;
}
.author {
  text-align: center;
  /* font-size: .75rem; */
  margin: 1rem 0;
  font-style: italic;
}
.quote {
  /* font-size: .75rem; */
  font-style: italic;
  font-weight: bold;
}
.tile_quote_wrapper_img {
  width: 30%;
  margin: 1rem auto 2rem auto;
  position: relative;
  /* padding-top: 50%; */
}
.circle_image {
  width: 100%;
  height: 100%;
  /* position: absolute; */
  position: relative;
  top: 0;
  left: 0;
  object-fit: cover;
  border-radius: 50%;
}
.green .circle_image {
  box-shadow: 0 0 0 5px rgb(100 163 66 / 100%), 0 0 0 8px rgb(255 255 255 / 100%);
}
.darkblue .circle_image {
  box-shadow: 0 0 0 5px rgb(0 24 66 / 100%), 0 0 0 8px rgb(255 255 255 / 100%);
}
.lightblue .circle_image {
  box-shadow: 0 0 0 5px rgb(67 83 149 / 100%), 0 0 0 8px rgb(255 255 255 / 100%);
}
.darkblue:not(.lightbox) {
  background: rgb(0, 24, 66);
  color: #fff;
}
.green:not(.lightbox) {
  background: rgb(100, 163, 66);
  color: #fff;
}
.lightblue:not(.lightbox) {
  background: rgb(67, 83, 149);
  color: #fff;
}
#route svg g:first-of-type circle {
  animation: circle_animation 2s alternate-reverse infinite;
}
@keyframes circle_animation {
  from {
    opacity: 0.4;
  }
}
@media (max-width: 1420px) {
  /* #route svg {
    width: 1225px;
    height: 6720px;
    margin: 0 auto;
  } */
}
@media (max-width: 1245px) {
  /* #route svg {
    width: 1050px;
    height: 5760px;
    margin: 0 auto;
  } */
}
@media (max-width: 1070px) {
  /* #route svg {
    width: 875px;
    height: 4800px;
    margin: 0 auto;
  } */
  #route svg text {
    font-size: 24px !important;
  }
}
@media (max-width: 895px) {
  /* #route svg {
    width: 700px;
    height: 3840px;
    margin: 0 auto;
  } */
  #route svg text {
    font-size: 28px !important;
  }
}
@media (max-width: 720px) {
  /* #route svg {
    width: 525px;
    height: 2880px;
    margin: 0 auto;
  } */
  #route svg text {
    font-size: 34px !important;
  }
}
@media (max-width: 600px) {
  #route svg text {
    font-size: 48px !important;
  }
}