/* Reset CSS */

html, body {
  background: #8460ff;
  z-index: 1;
  padding: 0;
  font-family: 'futura';
  font-weight: bold;
  margin: 0;
  color: white;
  font-size: 2.4vw;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button, input, label {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

a:hover {
  color: green;
}

::-webkit-scrollbar {
  display: none;
}

p, span {
  margin: 0;
}

@font-face {
  font-family: 'futura';
  src: url("../font/FuturaCondensedRegular.woff2") format("woff2")
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.box {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 80;
  pointer-events: none;
  top: 0;
  left: 0;
  border: 8px solid red;
}

.link-right:hover {
   color: #8c98ff;
}


/* INFO CONTAINER */
.info-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 40vw;
  margin-bottom: 24px;
  margin-right: 8px;
  color: black;
  text-transform: uppercase;
  font-size: 1.6vw;
  font-weight: bold;
}
.info-c {
  color: red;
}
.info-content span {
  text-align: left;
}
.info-content-1 {
  width: 100%;
  padding-left: 2vw;
}
.info-content-1 p {
  padding: 0.5vw;
}
.info-content div {
  margin-bottom: 2.5vw;
  background: white;
  color: black;
  padding: 0.5vw;
  border: 8px solid black;
}
.info-menu {
  margin-bottom: 3vw;
  text-align: right;
}

.info-menu a {
  border: 8px solid black;
  padding: 0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  background: white;
  color: black;
  margin-left: 1vw;
  font-size: 2vw;
}
.info-menu a:hover {
    color: blue;
}

.link-right {
  text-align: right;
  color: black;
  font-size: 4.6vw;
}
.a-2 {
  background: black;
  padding-left: 2vw;
  padding-right: 2vw;
  border: 8px solid black;
  background: white;
  color: black;
}

.a-1 {
  background: blue;
  margin-right: 1vw;
  border: 8px solid black;
  padding-left: 2vw;
  padding-right: 2vw;

}
.info-content-hide {
  border: 8px solid black;
  padding: 0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  background: white;
  color: black;
}
.info-content-hide-c {
  margin-bottom: 2vw;
  font-size: 3vw;
}

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

  .info-container {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 86vw;
    margin-bottom: 21px;
    margin-right: 8px;
    color: black;
    text-transform: uppercase;
    font-size: 7vw;
    font-weight: bold;
    z-index: 9000;
  }
  .info-menu {
    margin-bottom: 11vw;
    text-align: right;
  }
  .link-right {
    text-align: right;
    color: black;
    font-size: 7vw;
  }
  .info-content {
    font-size: 4vw;
    margin-bottom: 5vw;
  }
  .info-content-1 {
    font-size: 4vw;
  }
  .info-content-hide-c {
    margin-bottom: 7vw;
  }


}

.link-left {
  text-align: left;
}
.link-middle {
  text-align: center;
}


/* NAMES */
.name-index-wrapper-1  {
  position: fixed;
  text-align: center;
  top: 0;
  z-index: 7000;
  right: 0;
  width: 100%;
  height: 100%;
  line-height: 95vh;
}
.name {
  position: fixed;
  top: 0;
  right: 0;
  margin: 8px;
  padding: 1vw;
  font-size: 3vw;
  color: black;
  border: 10px solid blue;
  background: grey;
}
.name-index {
  border: 8px solid #7ac943;
  background: red;
  padding: 1vw;
  padding-top: 0.5vw;
  padding-bottom: 0.8vw;
  font-size: 5vw;

}
.name-index:hover {
  border: 8px solid red;
  background: blue;
  color: yellow;
}
@media screen and (max-width:500px){
  .name {
    position: fixed;
    top: 0;
    right: 0;
    margin: 8px;
    font-size: 6vw;
    border: 6px solid blue;
  }
}

/* PROJECT MENU */
.project-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: auto;
  color: black;
  margin: 8px;
  overflow-y: scroll;
}
.project-menu-c-link{
  font-size: 2.5vw;
  box-sizing: border-box;
}
.project-menu-c {
  border: 7px solid grey;
  margin-bottom: 1vw;
  padding: 1vw;
  text-align: center;
  background: red;
}

@media screen and (max-width:500px){
  .project-menu-c {
    background: red;
    border: 7px solid grey;
    margin-bottom: 1vw;
    padding: 2vw;
  }
  .project-menu-c-link {
    font-size: 5vw;
  }

}


/* BOTTOM NEWS TEXT */
.bottom-content {
  height: auto;
  width: 70%;
  padding: 3vw;
  padding-top: 0.8vw;
  padding-bottom: 0.8vw;
  position: fixed;
  bottom: 0;
  height: 8vw;
  font-size: 5vw;
  background: white;
  left: 0;
  margin: 8px;
  z-index: 30;
  color: black;
  border: 8px solid #7ac943;
}

.marquee {
  overflow: hidden;
}

.marquee p {
    margin: 0;
    white-space: nowrap;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
}


@media screen and (max-width:500px){
  .bottom-content {
    height: auto;
    width: 55%;
    padding: 3vw;
    padding-top: 1.3vw;
    padding-bottom: 0.8vw;
    position: fixed;
    bottom: 0;
    height: 15vw;
    font-size: 9vw;
    background: white;
    left: 0;
    margin: 8px;
    color: black;
    z-index: 30;
    border: 8px solid #7ac943;
  }
}




/* NEWS */

.content-news {
  padding-left: 30vw;
  padding-right: 30vw;
}
.content-years-column {
  width: auto;
  padding-top: 6vw;
}

.news-content-years-column {
  width: 40vw;
  padding-top: 4vw;
  height: 100vh;
  overflow-y: scroll;
  padding-bottom: 20vw;
}
.news-content-years-column-title {
  font-size: 4vw;
  text-align: center;
  margin-bottom: 2vw;
}
.news-content-years-column-img {
  width: 100%;
  margin-top: 2vw;
  text-align: center;
}
.news-content-years-column-text-1 {
  font-size: 2vw;
}
.news-content-years-column-date {
  font-size: 3vw;
  margin-top: 2vw;

  text-align: center;
  margin-bottom: 2vw;
}
.news-content-years-column-text {
  font-size: 2vw;
  color: white;
  margin-top: 2vw;
  margin-bottom: 2vw;
}

.content-years-column-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.c-y-c-i {
  width: 100%;
}


/* CONTENT */
.content-container {
  margin-bottom: 20vw;
}

.grid-1 {
  display: grid;
  grid-template-columns: 100%;
  padding: 2vw;
  text-align: center;
}
.grid-2 {
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
}
.grid-3 {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  padding: 2vw;
  text-align: center;
}
.grid-4 {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 2vw;
  text-align: center;
}

.c-image-1 {
  width: 100%;
  padding-left: 10vw;
  padding-right: 10vw;
}
.c-image-2 {
  width: 100%;
  padding-left: 4vw;
  padding-right: 4vw;
}
.c-image-3 {
width: 100%;
padding: 6vw;
}
.c-image-4 {
  width: 100%;
  padding: 4vw;

}
.c-image-6 {
  height: 90vh;
  padding: 1vw;

}
.c-image-7 {
  margin-top: 5vw;
  height: 50vh;
  padding: 1vw;

}
.c-image-5 {
  width: 100%;
  padding: 0vw;

}
.c-image-10 {
  width: 100%;
  padding-left: 40vw;
  padding-right: 40vw;

}

.links-eingerueckt-1 {
  margin-left: 8vw;
}

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

  .c-image-6 {
    width: 100%;
    height: auto;
    padding: 1vw;

  }
  .c-image-7 {
    margin-top: 5vw;
    width: 100%;
    height: auto;
    padding: 1vw;

  }
}



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



  .news-content-years-column {
    width: 80vw;
    padding-top: 40vw;
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 20vw;
  }
  .news-content-years-column-title {
    font-size: 9vw;
    text-align: center;
    margin-bottom: 2vw;
  }
  .news-content-years-column-img {
    width: 100%;
    margin-top: 2vw;
    text-align: center;
  }
  .news-content-years-column-text-1 {
    font-size: 5vw;
  }
  .news-content-years-column-date {
    font-size: 9vw;
    margin-top: 2vw;

    text-align: center;
    margin-bottom: 2vw;
  }
  .news-content-years-column-text {
    font-size: 5vw;
    color: white;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

}



/* OVERLAY */
.bild-wrap {
  display: inline-block;
  height: auto;
  width: 20vw;
  white-space: nowrap;
}

.bild-container-3 {
  display: grid;
  position: fixed;
  height: 40vh;
  grid-template-columns: auto auto auto;
}

.overlay-container {
  display: grid;
  grid-template-columns: auto auto auto;
  top: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  height: 100%;
  width: 100%;
}

.overlay {
  background: white;
  text-align: center;
  border: 6px solid black;
}

.caption {
  width: 16vw;
  height: auto;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  text-align: center;
  color: black;
  z-index: 9999;
}

.caption p {
  font-size: 1.3vw;
  margin: 2vw;
  color: black;
  margin-bottom: 3vw;
}
.overlay img {
  margin-top: 4vw;
  border: none;
  height: 80vh;
}

.hide {
  width: 2vw;
  bottom: 0;
  right: 0;
  z-index: 9999;
  position: fixed;
  margin: 1vw;

}

.close-link {
  background: grey;
  padding: 0.8vw;
  border: 6px solid red;
  position: fixed;
  font-size: 3vw;
  bottom: 0;
  z-index: 9999;
  left: 0;
}

@media screen and (max-width:500px){
  .overlay-container {
    display: grid;
    grid-template-columns: 0% auto 0%;
    top: 0;
    position: fixed;
    z-index: 9999;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .caption p {
    font-size: 4vw;
    margin: 2vw;
    color: black;
    margin-bottom: 15vw;
  }
  .overlay img {
    margin-top: 4vw;
    border: none;
    height: auto;
    width: 90%;
  }
  .close-link {
    background: grey;
    padding: 1.8vw;
    border: 4px solid red;
    position: fixed;
    font-size: 5vw;
    bottom: 0;
    z-index: 9999;
    left: 0;
    margin: 6px;
  }

}

/*
@keyframes menu-animation {
  0% { opacity: 0 }
  90% { opacity: 0 }
  100% { opacity: 1 }
}
 */

.project-menu-years {
  animation: menu-animation 2s ;
}

.bottom-content {
  animation: menu-animation 2s ;
}

.links {
  animation: menu-animation 2s ;
}

.content-years {
  animation: menu-animation 2s ;
}




/* INDEX */
.content-index {
  height: 100vh;
  width: 100vw;

}

@keyframes gif {
  0% { opacity: 1 }
  90% { opacity: 1 }
  100% { opacity: 0 }
}



.gif {
  border: 0px solid white;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  padding: 5vw;
  border: 8px solid red;
  animation: gif 2s ;
  opacity: 0;
}

/* TOP LEFT */
@keyframes popup1 {
  0% { opacity: 0 }
  70% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes popup2 {
  0% { opacity: 0 }
  80% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes popup3 {
  0% { opacity: 0 }
  90% { opacity: 0 }
  100% { opacity: 1 }
}

.bild-1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 2vw;
  width: 6vw;
  animation: popup1 4s ;
}

.bild-2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 4vw;
  margin-top: 14vw;
  width: 10vw;
  animation: popup2 4s ;
}

.bild-3 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 8vw;
  margin-left: 18vw;
  width: 17vw;
  animation: popup3 4.7s ;
}

/* TOP RIGHT */
.bild-4 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 2vw;
  margin-right: 11vw;
  width: 11vw;
  animation: popup3 2.7s ;
  border: 8px solid green;
}

.bild-5 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 2vw;
  margin-right: 25vw;
  width: 13vw;
  animation: popup3 6.7s ;
  border: 8px solid green;
}

.bild-6 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10vw;
  margin-right: 4vw;
  width: 20vw;
  animation: popup3 5.7s ;
  border: 8px solid green;
}

/* BOTTOM LEFT */
.bild-7 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2vw;
  margin-bottom: 9vw;
  width: 24vw;
  animation: popup3 8.7s ;
}

.bild-8 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2vw;
  margin-left: 12vw;
  width: 12vw;
  animation: popup3 5.7s ;
  z-index: 10;
}

.bild-9 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 9vw;
  margin-left: 24vw;
  width: 20vw;
  animation: popup3 7.7s ;
}


/* BOTTOM RIGHT */
.bild-10 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 6vw;
  width: 16vw;
  animation: popup3 2.7s ;
}

.bild-11 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 8vw;
  margin-right: 32vw;
  width: 11vw;
  animation: popup3 10s ;
}

.bild-12 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 19vw;
  margin-bottom: 10vw;
  width: 17vw;
  animation: popup3 3s ;
}


@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}







h1, h2, h3, h4 {
  font-size: 1.5vw;
  line-height: 1;
  margin: 0;
}

a:hover {
  color: red;
}