a:visited
{
    color: #EEE;
}

#ju_zeitstrahl_container
{
    box-sizing: border-box;
    height: calc(100vh - 80px);
}

/*******
* MENU *
*******/

#ju_zeitstrahl_menu_container
{
    position: relative;
}

#ju_zeitstrahl_menu_background
{
    position: absolute;
    right: 0px;

    box-sizing: border-box;
    width: 20%;
    height: calc(100vh - 80px);

    background-color: #373E4B;
    opacity: 0.9;
}

#ju_zeitstrahl_menu_list
{
    position: absolute;
    right: 0px;

    box-sizing: border-box;
    width: 20%;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);

    overflow-y: auto;

    padding-top: 10vh;
    padding-bottom: 10vh;
}

.ju_zeitstrahl_menu_entry
{
    display: block;

    margin-top: 100px;

    box-sizing: border-box;

    color: #EEE;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: 300;
    font-style: italic;
    text-align: center;
}

.ju_zeitstrahl_menu_entry:first-of-type
{
    margin-top: 0px;
}

.ju_zeitstrahl_menu_entry:hover
{
    cursor: pointer;
}

/**********
* CONTENT *
**********/

#ju_zeitstrahl_content_container
{
    position: relative;

    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 80px);
}

.ju_zeitstrahl_content
{
    position: absolute;

    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 80px);
}

.ju_zeitstrahl_picture
{
    position: absolute;
    top: 0px;
    left: 0px;

    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 80px);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ju_zeitstrahl_info
{
    position: absolute;
    top: 0px;
    right: 20%;

    box-sizing: border-box;
    width: 30%;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);

    overflow-y: auto;

    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(55, 62, 75, 0.8), rgba(55, 62, 75, 0.9), rgba(55, 62, 75, 0.9));

    padding-left: 10%;
}

.ju_zeitstrahl_info_container
{
    position: absolute;
    bottom: 10vh;
}

.ju_zeitstrahl_info_date
{
    color: #EEE;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: 300;
    font-style: italic;
    text-align: right;
}

.ju_zeitstrahl_info_title
{
    margin-top: 10px;

    color: #EEE;
    font-size: 50px;
    text-align: right;
    font-weight: bold;
}

.ju_zeitstrahl_info_text
{
    margin-top: 10px;

    color: #EEE;
    font-size: 16px;
    text-align: right;
}