html{ overflow-y:scroll; }
nav{
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
  box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.50);
  z-index: 999;
  -webkit-transition: ease .8s;
  transition:ease .8s;
}

nav a{
  color: #B2B2B2;
  cursor: pointer;
  text-decoration: none;
}
nav a:hover{
  color: #787878!important;
}

.hidenav{
  bottom: -50px;
}

.navactive{
  height: 100%;
}

.burger {
  position: absolute;
  left: 20px;
  bottom: -20px;
  margin-left: 14px;
  margin-top: 8px;
  display: inline-block;
  width: 23px;
  height: 60px;
}
.burger span,
.burger span:before,
.burger span:after {
  display: block;
  width: 100%;
  height: 4px;
  background: #B2B2B2;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.burger span {
  position: relative;
  margin: 13px 0 0;
}
.burger span:before,
.burger span:after {
  position: absolute;
  content: "";
}
.burger span:before {
  top: -8px;
}
.burger span:after {
  top: 8px;
}
.burger.selected span:before {
  -webkit-transform: translate(0px, 8px) rotate(90deg);
          transform: translate(0px, 8px) rotate(90deg);
}
.burger.selected span:after {
  -webkit-transform: translate(0px, -8px) rotate(90deg);
          transform: translate(0px, -8px) rotate(90deg);
}
.burger.selected span {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#year{
  position: absolute;
  display: none;
  top: 0px;
  left: 13px;
  font-family: 'Karla', sans-serif;
  color: #B2B2B2;
  font-size: 20px;
  line-height: 50px;
}


#bigyear{
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  height: 100vh;
  text-align: center;
  font-family: 'Karla', sans-serif;
  color: #fff;
  font-size: 5vw;
  z-index: 999;
  line-height: 100vh;
  pointer-events:none;
}

#bigyear span{
  background: rgba(0,0,0,0.5);
  padding: 0px 2vw;
  border-radius: 10px;
}

#menu{
  text-align: center;
  position: absolute;
  left:50%;
  width: 400px;
  bottom: 0px;
  height: 50px;
  line-height: 50px;
  color: #B2B2B2;
  margin-left: -200px;
  font-family: 'Karla', sans-serif;
  font-size: 20px;
  word-spacing: 30px;
}

#main{
  max-width: 100vw;
  width: auto;
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
}

#info_container{
  height: 100%;
  width: 100%;
  z-index: 9999;
  position: fixed;
  left: 0px;
  top: 0px;
  pointer-events:none;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
}

#intro_container{
  height: 100%;
  width: 100%;
  z-index: 9999;
  position: fixed;
  left: 0px;
  top: 0px;
  pointer-events:none;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  background: #fff;
  -webkit-transition: ease 0.5s;
  transition:ease 0.5s;
}

#how_text{
  width: 400px;
  height: 200px;
  color: #333;
  z-index: 9999;
  font-family: 'Karla', sans-serif;
  font-size: 1.5em;
  line-height: 50px;
}

#about_text{
  font-family: 'Karla', sans-serif;
  width: 80%;
  color: #333;
  z-index: 9999;
  font-size: 1.5em;
  margin-top: -50px;
  pointer-events: visible!important;
}

#about_text a{
  color: #333;
}

#intro{
  font-family: 'Karla', sans-serif;
  width: 80%;
  color: #333;
  z-index: 9999;
  font-size: 1.5em;
  margin-top: -50px;
  background: #fff;
  text-align: center;
  line-height: 1.5em;
  -webkit-transition: ease .5s;
  transition:ease .5s;
}

#intro span{
  opacity: 0;
  -webkit-transition: ease 0.5s;
  transition:ease 0.5s;
}


.hiding1{
    -webkit-transform: scale(.2);
            transform: scale(.2);
}
.hiding2{
    opacity: 0;
}

.key{
  width: 30px;
  height: 30px;
  background: #E0E0E0;
  border-radius: 8px;
  display: inline-block;
  color: #979797;
  text-align: center;
  line-height: 30px;
  margin-left: 15px;
  font-size: 18px;
}

#slide_intro{
  opacity: 0;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  margin-top: 40px;
  -webkit-transition: ease .5s;
  transition:ease .5s;
}
.slide_intro_bg{
  width: 300px;
  height: 14px;
  background: #E8E8E8;
}
.slide_intro_thumb{
  width: 55px;
  height: 25px;
  background: #C4C4C4;
  margin-top: -20px;
  margin-left: 246px;
  -webkit-transition: ease 3s;
  transition:ease 3s;
  -webkit-box-shadow: 3px 2px 4px 0px rgba(50, 50, 50, .4);
  -moz-box-shadow:    3px 2px 4px 0px rgba(50, 50, 50, .4);
  box-shadow:         3px 2px 4px 0px rgba(50, 50, 50, .4);
}
.slide_it{
  margin-left: 0px;
}
.showing{
  opacity: 1!important;
}

.slide_intro_year{
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.mobile_bottom{
    position: absolute;
    bottom: 16px;
    width: 60%;
    left: 20%;
    margin: 0;
    padding: 0;
    font-size: 0.6em;
}



#mobile_hint{
  font-family: 'Karla', sans-serif;
height: 100%;
width: 80%;
position: absolute;
left: 10%;
top: 0;
  color: #333;
display:none;
justify-content:center;
align-items:center;
}
.mobile_wrapper{
  text-align: center;
  margin-top: -50px;
}
#mobile_hint .heady{
  font-size: 2em;
}
#mobile_hint p{
  font-size: 1em;
  margin-bottom: 50px;
}

#reminder{
  height: auto;
  padding: 10px 20px;
  background: #B2B2B2;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
  font-family: 'Karla', sans-serif;
}
#mailadresse{
  font-family: 'Karla', sans-serif;
  height: auto;
  border: 1px solid #b2b2b2;
  padding: 5px 10px;
  font-size: 1em;
  outline: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  width: 80%;
  position: relative;
  margin-bottom: 30px;
}


@media (max-device-width: 480px){
    #evolution_wrapper{
      display: none;
    }
    #mobile_hint{
        display: flex;
    }
}