@import url("burgernav.css");
/* Global */
html, li {
  font-family: "Didot", Times, Georgia, serif;
}
body {
  margin: 0;
  padding: 0;
  background-color: white;
}

#bigcon {
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  flex-basis: 50%;
}

img {
  width: 100%;
  display: block;
}

.midword {
  position: fixed;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 25%;
  font-size: 3em;
  color: white;
}

@media screen and (max-width: 1200px) {
  .midword{
    top:1.52em;
    right: 1em;
    font-size: 2em;
    transform: translateY(-50%);
    margin: 0;
  }
  #bigcon{
    display: block;
  }
}


/* Pageswitcher */
.page{
  display: none;
}

[data-active="home"] #page-home{
  display: block;
}

[data-active="street"] #page-street{
 display: block;
}
[data-active="events"] #page-events{
  display: block;
 }
 

[data-active="video"] #page-video{
  display: block;
 }

/* Navigation */

#navcontainer {
  width: 100%;
  background-color: white;
  position: fixed;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 1em;
  top: 0;
  z-index: 1;
}

[data-active="video"] #navcontainer{
  background-color: black;
}


#nav {
  list-style: none;
  font-family: 'Playfair Display', serif;
  margin: 0;
}

#nav>li {
  margin-left: 2em;
  margin-right: 2em;
  float: left;
}

#nav li a,
#nav li a:visited,
#nav li label{
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5em;
  color: black;
  transition: all .25s ease-in-out;
  line-height: 0.95em;
  display: block;
}

[data-active="video"] #nav li a,
[data-active="video"] #nav li a:visited,
[data-active="video"] #nav li label{
  color: white;
}

#nav li > a:hover,
#nav li > a:visited:hover,
#nav li > label:hover {
  opacity: 0.5;
}

/*Subnav*/
.subnav {
  position: absolute;
  padding: 0.5em;
  float: left;
  display: none;
  list-style: none;
  background: white;
  margin-left: -0.5em;
}
[data-active="video"] .subnav{
  background: black;
}

#nav #subnavopener:checked ~ .subnav{
 max-height: 200px;
}

#nav #subnavopener{
  display: none;
}

#nav li:hover .subnav {
  display: block;
}




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

#navcontainer{
  display: none;
}
}

/* Home */
[data-active="home"] #navcontainer{
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
}

[data-active="home"] ol#nav{
  font-weight: bold;
}

[data-active="home"] ol#nav li{
  display: block;
  float: none;
  
}

[data-active="home"] #nav ol.subnav {
  max-height: 0;
  overflow: hidden;
  transition: all .5s ease-in-out;
  background: transparent;
  float: none;
  position: static;
  padding: 0;
}

[data-active="home"] #nav a,
[data-active="home"] #nav a:visited,
[data-active="home"] #nav label {
  font-size: 2.5em;
  color:white;
  transition: all .25s ease-in-out;
  line-height: 1.5em;
}
[data-active="home"] #nav li a:hover,
[data-active="home"] #nav li label:hover {
  padding-left: 0.5em;
  opacity: 1;
}

[data-active="home"] #nav li .subnav {
  display: block;
}

[data-active="home"] h1 {
  position: absolute;
  top: 50%;
  right: 1em;
  font-size: 3em;
  transform: translateY(-50%);
  margin: 0;
  float: right;
  color: white;
  z-index: 5;
}

#video_background {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
  display: flex;
}

@media screen and (max-width: 1200px) {
  [data-active="home"] h1 {
    position: absolute;
    top:1.52em;
    right: 1em;
    font-size: 2em;
    transform: translateY(-50%);
    margin: 0;
  }

}

/* Street */
[data-active="street"] #nav a:visited, #nav a {
  color:black;
}
/* Video */
.columnvid:first-child{
  margin-top: 50px;
}

.videopos {
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 10%;
  min-width: auto;
  min-height: 600px;
  display: block;
  z-index: -10000;
}

.videopos_f{
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 25%;
  min-width: auto;
  min-height: 600px;
  display: block;
  z-index: -10000;
}


@media screen and (max-width: 1200px) {
  .videopos {
      width: 90%;
      position: relative;
      min-height: 0;
      min-width: 100%;
      margin-top: 100%;
  }
  .hidebar {
      display: none;
  }
  #navbcon {
      display: none;
  }
  #page-video {
      background-color: gray;
  }
  .columnvid {
      margin-top: 10px;
  }
  .videopos_f{
      min-width: 100%;
  }
}
/* Burgermenu */



#burgermenu {
  display: none;
}

@media screen and (max-width: 1200px) {
  
  #burgermenu {
    display: block;
    position: fixed;
    top:0;
  }
}

/* todo: checken ob das nötig ist*/
#form {
  width: 70%;
  max-width: 1280px;
  min-width: 480px;
}