stylesheet.css

@font-face{
  font-family: 'BebasNeueThin';
  src: url("material/bebas_neue/BebasNeue Thin.otf") format("opentype");
}

@font-face{
  font-family: 'BebasNeueRegular';
  src: url("material/bebas_neue/BebasNeue Regular.otf") format("opentype");
}

@font-face{
  font-family: 'BebasNeueBold';
  src: url("material/bebas_neue/BebasNeue Bold.otf") format("opentype");
}

@font-face{
  font-family: 'BebasNeueLight';
  src: url("material/bebas_neue/BebasNeue Light.otf") format("opentype");
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@font-face{
  font-family: 'MuliRegular';
  src: url("material/Muli/Muli-Regular.ttf") format("opentype");
}

/*GENERELLES*/

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'BebasNeueRegular';
  width: 100vw;
  overflow-x: hidden;
}

header {
  height: 150px;
  background-image: url("material/bilder/nav_bg_notext_small_wide.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: relative;
  background-color: rgba(0, 0, 0, 0)
}

#ie-redirect {
  display: none;
  height: 100vh;
  width: 100vw;
  font-size: 7vw;
}

.grid-container {
  height: 100vh;
  display: grid;
  grid-template-columns: 5.2vw 20.8vw 2.3vw 20.8vw 2.3vw 20.8vw 2.3vw 20.8vw 4.7vw;
  grid-template-rows:  41vh 5vh 3vh 20.5vh 3vh 3vh 7.4vh;
  grid-template-areas:
  '. name . bild . text text text .'
  '. . . . . . . . .'
  '. s s s . s2 s2 s2 .'
  '. erk erk erk . jahr jahr jahr .'
  '. . . . . . . . .'
  '. s3 s3 s3 . s4 s4 s4 .'
  '. . . . . . . . .';
}

.flex-container {
  display: flex;
  position: absolute;
  bottom: 60px;
  width: 99vw;
  align-items: baseline;
}

.flex-container > div {
  font-size: 1.5vw;
}

.grid-container > div {
  font-size: 0.5vw;
  text-align: center;
}

#border-left{
  flex: 0 0 5.2vw;
}

#border-right{
  flex: 0 0 4.7vw;
}

/* Language-switcher*/
.en {
  display: none;
}

.button-lang {
  width: 1.5vw;
  height: 1.5vw;
  margin-left: 0.3vw;
  float: right;
  color: black;
  font-size: 0.7vw;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 50%;
  background-image: url("material/bilder/nav_bg_notext_small.png")
}

 .current-lang {
  /*background-color: #777;*/
  background-color:#375f79;
  color: white;
}

#button-border{
  flex: 0 0 4.7vw;
  height:75px;
}

/*Logo*/
#ueberleben {
  flex: 0 0 23.1vw;
  font-size: 3vw;
  font-family: 'BebasNeueLight';
}

#ueberleben strong{
  font-family: 'BebasNeueRegular';
}

#ueberleben a {
  text-decoration: none;
  color: black;
}

/*Nav*/
.nav-element.active {
  background-color:#375f79;
  color: white;
}

/*Personen-nav*/
#navigation{
  flex: 0 0 45.2vw;
  text-align: center;
}

nav a {
  float: left;
  color: black;
  text-decoration: none;
  font-size: 2vw;
}

.active{
  background-color:#375f79;
  color: white;
}

nav a:hover:not(.active) {
  background-color:#375f79;
  color: white;
}

/*mini-Nav rechts*/
#navigation-right{
  flex: 0 0 20.8vw;
}

.sidenav {
  position: relative;
  right: 0;
}

.sidenav a {
  color: black;
  text-decoration: none;
  font-size: 1vw;
  float: right;
}

/*Name*/
#name{
  grid-area: name;
  font-family: 'MuliRegular';
  text-align: right;
  align-self: end;
}

#name1, #name2, #name3, #name4{
  background-color: black;
  color: white;
  font-size: 3vw;
  float: right;
  clear: both;
}

#name2, #name3, #name4 {
  margin-top: 1vh;
}

/*Portrait*/
#portrait {
  grid-area: bild;
  position: relative;
}

#portrait > img {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: -2;
}

/*Zitat*/
#text {
  grid-area: text;
  font-family: 'MuliRegular';
  text-align: left;
  font-size: 1.3vw;
  align-self: end;
}

/*Trennstriche*/
.s {
  grid-area: s;
  border-top: solid 1px #c6c6c6;
}

.s2 {
  grid-area: s2;
  border-top: solid 1px #c6c6c6;
}

.s3 {
  grid-area: s3;
  border-top: solid 1px #c6c6c6;
}

.s4 {
  grid-area: s4 ;
  border-top: solid 1px #c6c6c6;
}

/*Stationen*/
#year {
  grid-area: jahr;
  font-family: 'MuliRegular';
  text-align: left;
  font-size: 1.3vw;
  overflow: auto;
}

#year > ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
}


/*Scroll Buttons*/
.scroll-button {
  width: 3vw;
  height: 3vw;
  position: fixed;
  bottom: 5vh;
  left: 50vw;
  margin-left: -1.5vw;
  z-index: 98;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 20px;
  border-radius: 50%;
}

.scroll-button:hover {
  width: 3.5vw;
  height: 3.5vw;
  margin-left: -1.75vw;
  margin-bottom: -0.25vw;
}

#down-button {
  display: none;
  background: url(material/bilder/PfeilDownOrange.png);
  background-size: 100%;
}

#down-button:hover {
  background: url(material/bilder/PfeilDownBlue.png);
  background-size: 100%;
}

#up-button {
  display: none;
  background: url(material/bilder/PfeilUpOrange.png);
  background-size: 100%;
}

#up-button:hover {
  background: url(material/bilder/PfeilUpBlue.png);
  background-size: 100%;
}

/*Karten-screen*/
#section2 {
  height: 100vh;
  width: 99vw;
  position: absolute;
  overflow: scroll;
}

.map-background {
  width: 1920px;
  height: 1080px;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
}

#video-popup {
  visibility: hidden;
  position: fixed;
  top: 3vh;
  left: 3vw;
  height: 93vh;
  width: 93vw;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  border-radius: 10px;
  z-index: 99;
}

#video-close {
  position: fixed;
  top: 4vh;
  right: 5vw;
  width: 3vw;
  height: 3vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: url(material/bilder/X-Button.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.video-switch {
  position: fixed;
  top: 4vh;
  width: 3vw;
  height: 3vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
}

#video-switch-sd {
  left: 5vw;
  background-image: url(material/bilder/SD-Button.png);
  border-right: 2px solid #c6c6c6;
}

#video-switch-hd {
  left: 8vw;
  background-image: url(material/bilder/HD-Button.png);
}

#video-container {
  height: 100%;
  width: 100%;
}

#video-player {
  position: relative;
  top: 5%;
  height: 90%;
  width: 90%;
}

.map-button {
  position: relative;
  z-index: 2;
  border: none;
  outline: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background-image: url(material/bilder/PlayOrange.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.map-button.clicked {
  background-image: url(material/bilder/PlayGray.png);
}

.map-popup {
  visibility: hidden;
  position: absolute;
  margin-left: 25px;
  padding: 3px;
  width: 250px;
  background: rgba(0, 0, 0, 0.5);
  font-family: "MuliRegular";
  font-size: 10pt;
  color: white;
  text-align: center;
  border-radius: 6px;
  z-index: 97;
}

#section2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/*SEITEN-SPEZIFISCHES*/

/*Landing Page*/
#background-video-container {
  z-index: -1;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

#background-video {
  width: 100%;
}

/*Avishay*/
#avishay-map {
  background-image: url(material/bilder/maps/map_avishay.jpg)
}

#avishay-map.en-map {
  background-image: url(material/bilder/maps/map_avishay_en.jpg)
}

.avishay-station1-1 {
  top: 302px;
  left: 749px;
}

.avishay-station2-1 {
  top: 269px;
  left: 572px;
}

.avishay-station3-1 {
  top: 826px;
  left: 1510px;
}

.avishay-station3-2 {
  top: 837px;
  left: 1510px;
}

/*Bella*/
#bella-map {
  background-image: url(material/bilder/maps/map_bella.jpg)
}

#bella-map.en-map {
  background-image: url(material/bilder/maps/map_bella_en.jpg)
}

.bella-station1-1 {
  top: 328px;
  left: 701px;
}

.bella-station1-2 {
  top: 318px;
  left: 723px;
}

.bella-station1-3 {
  top: 330px;
  left: 701px;
}

.bella-station1-4 {
  top: 320px;
  left: 723px;
}

.bella-station2-1 {
  top: 549px;
  left: 879px;
}

.bella-station3-1 {
  top: 804px;
  left: 1503px;
}

.bella-station3-2 {
  top: 812px;
  left: 1492px;
}

.bella-station3-3 {
  top: 802px;
  left: 1513px;
}

/*Karla*/
#karla-map {
  background-image: url(material/bilder/maps/map_karla.jpg)
}

#karla-map.en-map {
  background-image: url(material/bilder/maps/map_karla_en.jpg)
}

.karla-station1-1 {
  top: 254px;
  left: 746px;
}

.karla-station1-2 {
  top: 265px;
  left: 746px;
}

.karla-station2-1 {
  top: 232px;
  left: 435px;
}

.karla-station2-2 {
  top: 243px;
  left: 435px;
}

.karla-station3-1 {
  top: 814px;
  left: 1492px;
}

.karla-station3-2 {
  top: 804px;
  left: 1514px;
}

.karla-station3-3 {
  top: 817px;
  left: 1491px;
}

.karla-station3-4 {
  top: 807px;
  left: 1514px;
}

/*Josef*/
#josef-map {
  background-image: url(material/bilder/maps/map_josef.jpg)
}

#josef-map.en-map {
  background-image: url(material/bilder/maps/map_josef_en.jpg)
}

.josef-station1-1 {
  top: 334px;
  left: 662px;
}

.josef-station2-1 {
  top: 447px;
  left: 473px;
}

.josef-station2-2 {
  top: 437px;
  left: 495px;
}

.josef-station3-1 {
  top: 205px;
  left: 685px;
}

.josef-station3-2 {
  top: 195px;
  left: 707px;
}

.josef-station4-1 {
  top: 804px;
  left: 1503px;
}

.josef-station4-2 {
  top: 812px;
  left: 1492px;
}

.josef-station4-3 {
  top: 802px;
  left: 1513px;
}

/*Nathan*/
#nathan-map {
  background-image: url(material/bilder/maps/map_nathan.jpg)
}

#nathan-map.en-map {
  background-image: url(material/bilder/maps/map_nathan_en.jpg)
}

.nathan-station1-1 {
  top: 247px;
  left: 963px;
}

.nathan-station1-2 {
  top: 237px;
  left: 985px;
}

.nathan-station2-1 {
  top: 309px;
  left: 914px;
}

.nathan-station2-2 {
  top: 299px;
  left: 936px;
}

.nathan-station3-1 {
  top: 814px;
  left: 1503px;
}

.nathan-station3-2 {
  top: 822px;
  left: 1492px;
}

.nathan-station3-3 {
  top: 812px;
  left: 1513px;
}

/*Steffi*/
#steffi-map {
  background-image: url(material/bilder/maps/map_steffi.jpg)
}

#steffi-map.en-map {
  background-image: url(material/bilder/maps/map_steffi_en.jpg)
}

.steffi-station1-1 {
  top: 324px;
  left: 729px;
}

.steffi-station1-2 {
  top: 333px;
  left: 719px;
}

.steffi-station1-3 {
  top: 323px;
  left: 740px;
}

.steffi-station2-1 {
  top: 233px;
  left: 424px;
}

.steffi-station2-2 {
  top: 223px;
  left: 446px;
}

.steffi-station3-1 {
  top: 804px;
  left: 1503px;
}

.steffi-station3-2 {
  top: 812px;
  left: 1492px;
}

.steffi-station3-3 {
  top: 802px;
  left: 1513px;
}

/*Impressum*/

.legal-flex-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.legal-information-wrapper {
  width: 43.9vw;
  display: flex;
  flex-direction: row;
}

.legal{
font-size: 30px !important;
font-family: 'BebasNeueLight';
font-weight: bold;
border-bottom: solid 1px #c6c6c6;
text-align: left !important;
height: 50px;
width: 43.9vw;
margin-bottom: 10px;
}

.legal-information, .legal-information2 {
  text-align: left !important;
  border-bottom: solid 1px #c6c6c6;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  width: 43.9vw;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.legal-information3, .liability, .data-protection {
  text-align: left !important;
  border-bottom: solid 1px #c6c6c6;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  width: 43.9vw;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#data-protection-header {
  font-size: 1.2vw;
  font-weight: bold;
}

/*Verein*/

.association{
  grid-area: name;
  grid-column: 2/ span 3;
  text-align: left !important;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  align-self: end;
}

#association-img{
  margin-top: 25px;
  grid-area: text;
  text-align: left;
}

.data{
  grid-area: jahr;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  text-align: left !important;
  height: 115px;
  border-bottom: solid 1px #c6c6c6;
}

.data > a {
  color: black;
  text-decoration: none;
}

.explanation{
  grid-area: erk;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  text-align: left !important;
  height: 115px;
  border-bottom: solid 1px #c6c6c6;
}

.students{
  margin-top: 135px;
  grid-area: jahr;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  text-align: left !important;
  border-bottom: solid 1px #c6c6c6;
  height: 220px;
}

.students > a {
  color: black;
  text-decoration: none;
}

.fhd{
  grid-area: erk;
  margin-top: 135px;
  border-bottom: solid 1px #c6c6c6;
  height: 50px;
  grid-column: 2/ span 3;
  height: 220px;
  text-align: right !important;
}

/*Film*/

#film-trailer {
  grid-column: 2 / 7;
  grid-row: 1 / 6;
}

#film-trailer > iframe {
width: 100%;
height: 100%;
}

.film-aside {
  grid-column: 8 / 9;
  grid-row: 1 / 6;
  font-family: 'MuliRegular' !important;
  text-align: left !important;
  font-size: 1.3vw !important;
}

#schmidt-link {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#schmidt-link > a {
  text-decoration: none;
  color: black;
}

#film-s {
  grid-column: 8 / 9;
  grid-row: 6 / 7;
  border-top: solid 1px #c6c6c6;
}

.film-purchase {
  grid-column: 2 / 9;
  grid-row: 8 / 9;
  font-family: 'MuliRegular' !important;
  text-align: center;
  font-size: 1.3vw !important;
}

.film-purchase > a {
  color: black;
}

.second-grid {
  height: 100vh;
  display: grid;
  grid-template-columns: 5.2vw 20.8vw 2.3vw 20.8vw 2.3vw 43.9vw 4.7vw;
  grid-template-rows:  45.8vh 1vh 45.8 7.4vh;
  grid-template-areas:
  '. . . . . . .'
  '. . . . . . .'
  '. . . . . . .'
  '. . . . . . .';
}

.film-text {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  font-family: 'MuliRegular' !important;
  text-align: left !important;
  font-size: 1.3vw !important;
  border-bottom: solid 1px #c6c6c6;
}

#film-picture1 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

#film-picture2 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;

}
#film-picture3 {
  grid-column: 6 / 7;
  grid-row: 1 / 4;
}

#film-picture1 > img, #film-picture2 > img, #film-picture3 > img {
  width: 100%;
  height: 100%;
}

/*Kontakt*/

.contact-wrapper {
  grid-column: 2 / 7;
  grid-row: 1 / 7;
  font-family: 'MuliRegular' !important;
  text-align: left !important;
  font-size: 1.3vw !important;
}

.contact-text-wrapper {
  width: 100%;
  height: 15vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.contact-text-spacer {
  width: 23.1vw;
  height: 100%;
}

.contact-text {
  width: 43.9vw;
  height: 100%;
  border-bottom: solid 2px #c6c6c6;
}

.contact-text > * {
  margin-top: 0;
}

.contact-label {
  width: 20.8vw;
  height: 100%;
}

.contact-label-text {
  font-family: "MuliRegular" !important;
  font-weight: bold;
  font-size: 3.5vh;
  color: white;
  background-color: black;
  float: right;
  clear: both;
}

.contact-form {
  height: 60.5vh;
  width: 100%;
}

.contact-form input {
  height: 5vh;
  border: solid 2px #c6c6c6;
  font-family: 'MuliRegular';
  text-align: left;
  font-size: 3.5vh;
}

.contact-flex-wrapper {
  height: 50.5vh;
  width: 100%;
  margin-top: 2.625vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-confirmation-wrapper {
  width: 100%;
  height: 12.625vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.contact-flex-wrapper2 {
  width: 43.9vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-name-wrapper, .contact-email-wrapper {
  height: 5vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.contact-name, .contact-email {
  width: 20.8vw;
  height: 100%;
}

.contact-confirmation {
  display: none;
  width: 20.8vw;
  height: 100%;
  position: relative;
  border: 2px solid green;
  background-color: lightgreen;
  text-align: center;
}

.contact-confirmation > p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contact-subject-wrapper {
  width: 100%;
  height: 5vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.contact-subject {
  width: 43.9vw;
  height: 100%;
}

.contact-message-wrapper {
  width: 100%;
  height: 25vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.contact-message {
  height: 100%;
  width: 43.9vw;
  resize: none;
  border: solid 2px #c6c6c6;
  font-family: 'MuliRegular';
  text-align: left;
  font-size: 3.5vh;
}

.contact-submit-wrapper {
  height: 10vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  font-family: 'BebasNeueLight';
  font-weight: bold;
}

.contact-submit {
  width: 7vh;
  height: 7vh;
  border-radius: 50%;
  margin-left: 1vw;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(material/bilder/PfeilSend.png);
  background-size: 100%;
}

.contact-submit:focus {
  box-shadow: 0 0 0 2pt skyblue;
}

/*IE stuff*/

.flex-container2{
  height: 41vh;
  display: flex;
}

.flex-container3{
  height: 5vh;
  display: flex;
}

.flex-container4{
  height: 3vh;
  display: flex;
}

.flex-container5{
  height: 20.5vh;
  display: flex;
}

.flex-container6{
  height: 3vh;
  display: flex;
}

.flex-container7{
  height: 3vh;
  display: flex;
}

.flex-container8{
  height: 7.4vh;
  display: flex;
}

.flex-container9{
  height: 75.5vh;
  display:flex;
}

.flex-container10{
  height:92.6vh;
  display:flex;
}

.flex-container11{
  height:17.16vh;
  display:flex;
}

.flex-container12{
  height:8vh;
  display:flex;
}

.flex-container13{
  height: 85vh;
  display: flex;
}

.flex-container14{
  height: 15vh;
  display: flex;
  justify-content: center;
}

.border-left{
flex: 0 0 5.2vw;
display: flex;
}

.column1{
  flex: 0 0 20.8vw;
}

.column2{
  flex: 0 0 2.3vw;
}

.column3{
  flex: 0 0 20.8vw;
}

.column4{
  flex: 0 0 2.3vw;
}

.column5{
  flex: 0 0 20.8vw;
}

.column6{
  flex: 0 0 2.3vw;
}

.column7{
  flex: 0 0 20.8vw;
}

.column8{
  flex: 0 0 67;
  font-family: 'MuliRegular' !important;
  text-align: center;
  font-size: 25px !important;
}

.border-right{
  flex: 0 0 4.7vw;
  display: flex;
}

.blank{
  flex: 0 0 100vw;
}

.film-column-ie{
  flex: 0 0 64.7vw;
}

.film-survive-text-ie{
  font-family: 'MuliRegular';
  text-align: center;
  font-size: 1.3vw;
}

.explanation-column-ie{
  flex: 0 0 23.1vw;
  font-family: 'MuliRegular';
  font-size: 1.3vw;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
}

.explanation-column-img-ie{
  float: right;
}

.erklärung2-spalte-ie{
  flex: 0 0 23.1vw;
}

.explanation-text-ie{
  font-family: 'MuliRegular';
  font-size: 1.3vw;
  flex: 0 0 20.8vw;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
}

.line{
  flex: 0 0 43.9vw;
  border-top: 1px solid #c6c6c6;
}

.line2{
  flex: 0 0 43.9vw;
  border-top: 1px solid #c6c6c6;
}

.line3{
  flex: 0 0 43.9vw;
  border-top: 1px solid #c6c6c6;
}

.line4{
  flex: 0 0 43.9vw;
  border-top: 1px solid #c6c6c6;
}

.ie-text{
  flex: 0 0 43.9vw;
  align-self: flex-end; 
  font-family: 'MuliRegular';
  text-align: left;
  font-size: 1.3vw;
}

.ie-statement{
  flex: 0 0 43.9vw;
}

.ie-year{
  flex: 0 0 43.9vw;
  font-family: 'MuliRegular';
  font-size: 1.3vw;
  display: flex;
  overflow: auto;
}

.ie-year > ul {
  
  list-style-type: disc;
}

#ie-name{
  /*height: 27vh;*/
  font-family: 'MuliRegular'; 
  flex: 0 0 20.8vw;
  align-self: flex-end;
  text-align: end;
  overflow: auto;
}

/*IE-Impressum*/

.ie-legal{
  font-size: 30px !important;
  font-family: 'BebasNeueLight';
  border-bottom: solid 1px #c6c6c6;
  text-align: left;
  flex: 0 0 43.9vw;
  height: 50px;
}

.ie-information{
  text-align: left;
  font-size: 0.9vw;
  font-family: 'MuliRegular';
  flex: 0 0 21.95vw;
  border-bottom: solid 1px #c6c6c6;
}

.container1{
  height: 50px;
  display: flex;
}

.container2{
  height: 160px;
  display:flex;
  margin-top: 20px;
}

.container3{
  height: 310px;
  display: flex;
  margin-top: 20px;
}

.ie-data-protection{
  flex: 0 0 43.9vw;
  border-bottom: 1px solid #c6c6c6;
  font-size: 0.9vw;
  font-family: 'MuliRegular';
}

/* IE-Verein*/

.ie-tnz-logo{
  margin-top: 175px;
  flex: 0 0 43.9vw;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  height: 320px;
}

.ie-association-img{
  flex: 0 0 43.9vw;
  border: 1px solid #c6c6c6;
}

.ie-line{
  border-bottom: 1px solid #c6c6c6;
  flex: 0 0 43.9vw;
}

.container4{
  height: 125px;
  display:flex;
  margin-top: 25px;
}

.ie-explanation{
  flex: 0 0 43.9vw;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  border-bottom: 1px solid #c6c6c6;
}

.ie-explanation > a {
  color: black;
  text-decoration: none;
}

.ie-students{
  flex: 0 0 43.9vw;
  font-family: 'MuliRegular';
  font-size: 0.9vw !important;
  border-bottom: 1px solid #c6c6c6;
  height: 240px;
}

.ie-students > a {
  color: black;
  text-decoration: none;
}

.ie-fhd-logo{
  margin-top: 20px;
  flex: 0 0 43.9vw;
  text-align:right;
}

.film-foto-ie{
  flex: 0 0 43.9vw;
}

/*Ie Formular stuff*/

.portrait-ie1{
  position: relative;
  height: 41vh;
}

.portrait-ie2{
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: -2;
}

/*IE Kontakt*/

.contact-text-ie {
  width: 43.9vw;
  height: 100%;
}

/*header-ie*/
/*Personen-nav*/
#navigation-ie{
  flex: 0 0 45.2vw;
  text-align: center;
}

#navigation-ie2 a {
  float: left;
  color: black;
  text-decoration: none;
  font-size: 2vw !important;
}

.active{
  background-color:#375f79;
  color: white;
}

nav a:hover:not(.active) {
  background-color:#375f79;
  color: white;
}

/*mini-Nav rechts*/
#navigation-right-ie{
  flex: 0 0 20.8vw;
}

.sidenav-ie {
  position: relative;
  right: 0;
}

.sidenav-ie a {
  color: black;
  text-decoration: none;
  font-size: 1vw;
  float: right;
}