/* TIMELINE */
.timeline-container .btn-download {position: absolute; z-index: 99999; left: 7.5%; top: -3.5em;}

.timeline-container {position: relative; z-index: 1; width: 100%; margin: 2em 0 -1.0em 0;}

.timeline-box {position: relative; width: 110%; margin: 0 -5%; height:30em;}
.timeline-box {
    background-image: url(../images/RIZ_Berg_neu_2.jpg);
    background-repeat: repeat-x;
    background-size:cover;
    background-position: bottom;
}

/* dots */
.timeline-box {z-index: 999; }
.timeline-container .null {position: absolute; z-index: 2; left: 8em; top: 8em; cursor: pointer;}
.timeline-container .eins {position: absolute; left: 8em; top: 8em; cursor: pointer;}
.timeline-container .zwei {position: absolute; left: 19em; top: 5em; cursor: pointer;}
.timeline-container .drei {position: absolute; left: 26em; top: 9em; cursor: pointer;}
.timeline-container .vier {position: absolute; left: 38em; top: 3em; cursor: pointer;}
.timeline-container .fuenf {position: absolute; left: 44em; top: 7em; cursor: pointer;}
.timeline-container .sechs {position: absolute; left: 56em; top: 3em; cursor: pointer;}
.timeline-container .sieben {position: absolute; left: 64em; top: 6em; cursor: pointer;}

.h--line-eins {position: absolute;z-index: 999; left: 8.4em; top: 8em; width: 1px; height: 8.2em; background: #000052;display: block;}
.h--line-zwei {position: absolute;z-index: 999; left: 19.45em; top: 5.1em; width: 1px; height: 15.9em; background: #000052;display: block;}
.h--line-drei {position: absolute;z-index: 999; left: 26.45em; top: 9.1em; width: 1px; height: 9.6em; background: #000052;display: block;}
.h--line-vier {position: absolute;z-index: 999; left: 38.45em; top: 3.1em; width: 1px; height: 9.5em; background: #000052;display: block;}
.h--line-fuenf {position: absolute;z-index: 999; left: 44.45em; top: 7.2em; width: 1px; height: 6.4em; background: #000052;display: block;}
.h--line-sechs {position: absolute;z-index: 999; left: 56.45em; top: 3.2em; width: 1px; height: 6.7em; background: #000052;display: block;}
.h--line-sieben {position: absolute;z-index: 999; left: 64.45em; top: 6.2em; width: 1px; height: 18.4em; background: #000052;display: block;}

.timeline-date-box {
   display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}

.timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 2.2em;
    height: 2.2em;
    font-size: 0.6vw;
    line-height: 0.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #000052;
    transition: 0.0s ease-out;
}

.timeline-box .box {
    padding: 0 0 0 4.7em;
    margin: -5.5em 0 0 0;
    text-align: left;
    color: #000052;
    font-weight: 700;
    font-size: 1.0vw;
    line-height: 1.3vw;
    width: 11em;
}

.timeline-box .date {display: none;}
.timeline-box .null .date {display:block;}

.timeline-box .eins:hover .date {display:block;}
.timeline-box .zwei:hover .date {display:block;}
.timeline-box .drei:hover .date {display:block;}
.timeline-box .vier:hover .date {display:block;}
.timeline-box .fuenf:hover .date {display:block;}
.timeline-box .sechs:hover .date {display:block;}
.timeline-box .sieben:hover .date {display:block;}

.timeline-box .box {display: none;}

.timeline-box .null .box {display:block;}
.timeline-box .eins:hover .box {display:block;}
.timeline-box .zwei:hover .box {display:block;}
.timeline-box .drei:hover .box {display:block;}
.timeline-box .vier:hover .box {display:block;}
.timeline-box .fuenf:hover .box {display:block;}
.timeline-box .sechs:hover .box {display:block;}
.timeline-box .sieben:hover .box {display:block;}

.timeline-container .null .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}

.timeline-container .eins:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}

.timeline-container .zwei:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
.timeline-container .drei:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
.timeline-container .vier:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
.timeline-container .fuenf:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
.timeline-container .sechs:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
.timeline-container .sieben:hover .timeline-date-box {
  pointer-events: none;
    background-color: #000052;
    width: 4.2em;
    height: 4.2em;
    font-size: 1.6vw;
    line-height: 1.6vw;
    cursor: pointer;
    border-radius: 100%;
    color: #60D804;
    margin: -1.8em 0 0 -1.8em;
}
/*arrow-green.png*/
.timeline-navigation{
    background-image: url(../images/icons/arrow-blue.png);
    background-repeat: no-repeat;
    background-size: auto 1.8vw;
    background-position: center;
    position: absolute;
    z-index: 99999;
    top: 45%;
    right: 1.5%;
    width: 2em;
    height: 2em;
    cursor: not-allowed;
}


.h--timeline-navigation--prev {
    left: 100px;
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);    
}

.h--timeline-navigation--next {
  right: 100px;
}

.h--timeline-navigation--inactive {
  cursor: not-allowed;
}

.h--timeline-navigation--inactive::after {
  background-position: 0 -16px;
}

.h--timeline-navigation--inactive:hover {
  border-color: #f7f7f7;
}