body {
    background: #202020;
    font-family: 'Titillium Web';
    padding: 0 0 0 0;
    margin:  0 0 0 0;
    text-align: center;
    font-size: 0px;
}

div,
a {
    padding: 0 0 0 0;
    margin:  0 0 0 0;
    border: none 0px white;
    text-decoration: none;
    font-size: 72px;
}

div.tagLine {
    width: 20%;
    padding: 20px 40% 0 40%;
    text-transform: uppercase;
    font-size: 12px;
    /*color: #0080a0;*/
    color: #fff;
    text-align: left;
    position: absolute;
    display: block;
    background: rgba(40,40,40,0.8);
    padding: 20px 10px 40px 20px;
    top: 30%;
    right: 9%;

}

div.tagLine > a {
    font-size: 10px;
}
/*div#controls {*/
/*    display: block;*/
/*    position: absolute;*/
/*    top:   60%;*/
/*    width: 20%;*/
/*    left:  10%;*/
/*    color: #e06060;*/
/*    vertical-align: bottom;*/
/*    background: rgba(40,40,40,0.8);*/
/*    padding: 20px 10px 40px 10px;*/
/*    text-align: right;*/
/*    font-size: 12px;*/
/*}*/


div.tagLine > span {
    color: #0080a0 !important;
}

div#hover,
div#footer,
div#console,
div#controls {
    padding: 0 0 0 0;
    margin:  0 0 0 0;
    border: 0px none white;
    text-transform: uppercase;
    font-size: 10px;
    color: #0080a0;
    position: absolute;
    display: block;
    top:  0px;
    left: 0px;
}

div#console {
    vertical-align: bottom;
    text-align: left;
    background: rgba(255,255,255,0.1);
    border: 1px solid gray;
    border-radius: 12px;
    min-width: 200px;
    min-height: 80px;
    padding: 10px 10px 20px 40px;
    color: white;
    font-family: Roboto;
    font-size: 10px;
    visibility: hidden;
}

div#hover {
    position: absolute;
    top:  0px;
    left: 0px;
    min-width: 24px;
    height: 13px;
    width: auto;
    border-radius: 8px;
    font-weight: 300;
    display: block;
    vertical-align: baseline;
    text-align: center;
    font-size: 12px;
    padding: 2px 10px 8px;
    /*top right/left*/
    /*bottom*/
    margin: 0 0 0 0;
    color: black;
    color: blue;
    background: white;
    visibility: hidden;
    margin-left:  12px;
    margin-top:  -12px;
}


div#controls {
    display: block;
    position: absolute;
    top:   60%;
    width: 20%;
    left:  10%;
    color: #e06060;
    vertical-align: bottom;
    background: rgba(40,40,40,0.8);
    padding: 20px 10px 40px 10px;
    text-align: right;
    font-size: 12px;
}

.fieldLinkText {
    display: inline-block;
    font-size: 32px;
    padding: 0px 4px 0px 4px;
    text-decoration: none;
    border: 0px node black;
    font-size: 11px;
    border-radius: 8px;
    margin: 0 4px 0 4px;
}

div#controls span {
    font-weight: bold;
    font-size: 12px;
    color: #d0d0d0;
    border-bottom: 1px dotted gray;
}

div#controls a {
    font-size: 12px;
    color: #d0d0d0;
}

span.projectname {
    font-size: 48px;
    display: block;
}


div#footer {
    font-size: 12px;
    display: block;
    position: absolute;
    top:  50%;
    left: 80%;
    font-size: 10px;
}
div#footer a {
    text-decoration: none;
    color: white;
    font-size: 10px;
}

svg {
    width: 60%;
    height: 95vh;
    margin-top: 2vh;
}

img.arrowIcon {
    height: 12px;
    display: block;
    position: absolute;
    top: 10px;
    text-align: center;
    width: 100%;
}

div.sliderBox {
    height: auto;
    background: red;
    display: block;
    position: absolute;
}

div:focus,
div:focus-visible {
    border: 0px node black;
    text-decoration: none;
    outline: none;
}

.affiliated-institution {
    color: #e06060;
    font-size: 12px;
}

#topItem {
    border-bottom: 1px dotted gray;
    font-weight: 900;
}