button {
  outline:none;
}

.container {
  position: relative;
  width: 910px;
  max-width: 910px;
  height: 443px;
  max-height: 443px;
  display: inline-block;
  overflow: hidden;
}

.topbar {
  position: relative;
  top: 0px;
  width: 100%;
  max-width: 100%;
  height: 0px;
  max-height: 00px;
  display: inline-block;
}

.timeline {
  position: relative;
  left: 0px;
  width: 910px;
  max-width: 910px;
  height: 370px;
  max-height: 370px;
  /* overflow-x: hidden; */
  overflow: scroll;
  overflow-y: hidden;
  display: inline-block;
  background-image: url(../images/zeitleiste/background.jpg);
}

 /* Hide scrollbar for Chrome, Safari and Opera */
.timeline::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.timeline {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 


.timeline .top {
  position: relative;
  left: 0px;
  top: 0px;
  width: 67000px;
  height: 50%;
  display: inline-block;
}
.timeline .bottom {
  position: relative;
  left: 0px;
  top: 0px;
  width: 67000px;
  height: 50%;
  display: inline-block;
}

.timeline_btn {
  position: absolute;
  width: 50px;
  height: 18px;
  top: 40.6%;
  opacity: 0.5;
  border: 0;
  transition: opacity 1s;
  background-image: url(../images/zeitleiste/66.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white;
  cursor: pointer;
}

#timeline_btn_right {
  right: 10px;
}

#timeline_btn_left {
  left: 10px;
}

.timeline_btn:hover{
  opacity: 1;
}

#timeline_info {
  position: absolute;
  left: 10px;
  top: 35px;
  transition: opacity 0.5s;
  pointer-events: none;
}

#timeline_political {
  position: absolute;
  top: 0px;
  left: 364px;
  transition: top 1s;
}

#timeline_political_img {
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-filter: drop-shadow(0px 3px 3px #666);
  filter: drop-shadow(0px 3px 3px #666);  
}

#timeline_political_text {
  position: absolute;
  color: white;
  font-size: 12px;
  width: 181px;
  text-align: center;
}

#timeline_family {
  position: absolute;
  bottom: 96px;
  left: 364px;
  transition: bottom 1s;
}

#timeline_family_img {
  position: absolute;
  left: 0px;
  transform: rotate(180deg);
  -webkit-filter: drop-shadow(0px 3px 3px #aaa);
  filter: drop-shadow(0px 3px 3px #aaa);  
}

#timeline_family_text {
  position: absolute;
  color: white;
  font-size: 12px;
  width: 181px;
  text-align: center;
  top: 8px;
}

.elem {
  position: absolute;
  top: 35px;
  min-width: 50px;
  max-width: 300px;
  min-height: 50px;
  max-height: 106px;
  /*display: inline-flex;*/
  border: 5px solid white;
  cursor: pointer;
  -webkit-filter: drop-shadow(0px 0px 5px #888);
  filter: drop-shadow(0px 0px 5px #888);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.elem_title {
  position: absolute;
  width: 300px;
  text-align: center;
  font-size: 13px;
  filter: drop-shadow(0px 0px 1px #eee);    
}

.controls {
  position: relative;
  margin: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  max-width: 100%;
  height: 71px;
  max-height: 71px;
  display: inline-flex;
  background-image: url(../images/zeitleiste/background.jpg);
}

#controls_background {
  position: absolute;
  left: -10px;
  top: -14px;
}

#controls_slider {
  position: absolute;
  left: 64px;
  top: -12px;
  width: 780px;
  height: 16px;
  -webkit-appearance: none;
  background: #d3d3d300;
  outline: none;
  cursor: pointer;
}

//mozilla
#controls_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 14px;
  background: #302C21;
  cursor: pointer;
}

#controls_slider::-moz-range-thumb {
  width: 30px;
  height: 15px;
  background: #302C21;
  cursor: pointer;
}

#btn_1914 {
    position: absolute;
    width: 65px;
    height: 30px;
    left: 0px;
    top: -10px;
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    font-weight:bold;
}

#btn_heute {
    position: absolute;
    width: 65px;
    height: 30px;
    right: 0px;
    top: -10px;
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    font-weight:bold;
}

#btn_play {
  position: absolute;
  width: 28px;
  height: 28px;
  left: 441px;
  top: 32px;
  background: transparent;
  border: 0px;
  cursor: pointer;
}

#controls_play {
  visibility: visible;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
}

#controls_pause {
  visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
}

#btn_prev {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 405px;
  top: 17px;
  background: transparent;
  border: 0;
  transform: rotate(180deg);
  cursor: pointer;
}
#btn_next {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 405px;
  top: 17px;
  background: transparent;
  border: 0;
  cursor: pointer;
}



.player {
  position: absolute;
  margin: 0px;
  left: 200px;
  bottom: -303px;
  width: 500px;
  max-width: 500px;
  height: 300px;
  max-height: 300px;
  background: black;
  transition: bottom 1s;
  -webkit-filter: drop-shadow(0px 0px 6px #aaa);
  filter: drop-shadow(0px 0px 6px #aaa);   
}

.player_content {
    top: 0px;
    width: 100%;
    height: 270px;
    background: black;
    position: relative;
}

.player_controls {
    position: absolute;
    bottom: -100px;
    left: 174px;
    width: 561px;
    height: 51px;
    background-image: url(../images/zeitleiste/44.png);
    transition: bottom 1s;
  -webkit-filter: drop-shadow(0px 0px 3px #555);
  filter: drop-shadow(0px 0px 3px #555);       
}

.player_controls_title {
  position: absolute;
  max-width: 200px;
  color: white;
  top: 26px;
  left: 7px;
  font-size: 14px;
}

#player_controls_date {
  position: absolute;
  width: 116px;
  color: white;
  font-weight:bold;
  font-size:14px;
  text-align:center;
  top: 2px;
  left: 222px;
}

.playerIMG {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

.player_video {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

.player_slider {
  position: absolute;
  right: 100px;
  bottom: 4px;
  width: 200px;
  height: 3px;
  -webkit-appearance: none;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  padding:0;
}

//mozilla
.player_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.player_slider::-moz-range-thumb {
  width: 2px;
  height: 15px;
  background: #FFFFFF;
  cursor: pointer;
}

.player_volume {
  position: absolute;
  right: 20px;
  bottom: 4px;
  width: 50px;
  height: 3px;
  -webkit-appearance: none;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  padding:0;
}

//mozilla
.player_volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.player_volume::-moz-range-thumb {
  width: 2px;
  height: 15px;
  background: #FFFFFF;
  cursor: pointer;
}

#player_background {
  position: absolute;
  top: -10px;
  left: -7px;
}

#player_credits {
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 1.25%;
  width: 97.5%;
  height: 97.5%;
  background-color: #dbc8b2;
}

#player_credits span {
  clear:both;
  display:block;
  border-bottom: 1px #888 dotted;
  margin-bottom:1px;
}

#player_credits h2 {
    font-size:12px;
    font-weight:bold;
    margin:0px;
    border:none;
    padding:0px;
    display:inline;
    line-height:11px;
}
#player_credits p {
    font-size:12px;
    padding:0px;
    margin:0;
    display:inline;
    padding-left:5px;
    line-height:11px;
}

#btn_player_exit {
  position: absolute;
  width: 35;
  max-width:  35;
  min-width: 35;
  height: 35;
  max-height: 35;
  min-height: 35;
  right: -36px;
  top: 0px;
  transition: right 0.5s;
  cursor: pointer;
  background: transparent;
  border: 0;
}

#btn_player_credit {
  position: absolute;
  width: 35;
  max-width:  35;
  min-width: 35;
  height: 35;
  max-height: 35;
  min-height: 35;
  right: -31px;
  top: 35px;
  transition: right 0.5s;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.overlay {
  position: absolute;
  left: 0px;
  top: 0px;
}

.btn_exit_credits {
  position: relative;
  left: 0px;
}

.btn_exit_credits_overlay {
  position: absolute;
  right: 15px;
  top: 5px;
}

#year_display {
  position: absolute;
  left: 434px;
  bottom: 39px;
  background: #302C21;
  color: white;
  text-align: center;
  border-radius: 7px;
  padding: 3px;
  padding-left: 7px;
  padding-right: 7px;
  font-weight:bold;
  z-index:1000;
}