body
{
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F6F6;
font-family: 'Nunito Sans', sans-serif;
}

svg
{
overflow: hidden;
}

svg text
{
fill: #221E1D;
stroke: none;
}

a:link, a:visited, a:hover, a:active
{
color: #6d80b0;
text-decoration: underline;
}

#container
{
position: relative;
width: 95vw;
margin: 0 auto 0 auto;
}

#sections
{
width: auto;
position: relative;
margin: 0px auto;
padding-top: 400px;
}

#sections div
{
background: #ffffff;
padding: 10px;
border-top: 1px solid #221E1D;
border-bottom: 1px solid #221E1D;
margin-bottom: 90vh;
opacity: 0.2;
}

#sections > div:first-child
{
margin-top: 40%;
}

#sections > div:last-child
{
opacity: 1;
margin-bottom: 30px;
}

#sections > div.graph-scroll-active
{
opacity: 1;
}

#graph
{
position: fixed;
width: 100%;
margin: 0px auto;
top: 30px;
}

#buttons
{
position: fixed;
top: 35px;
right: 15px;
text-align: right;
visibility: hidden;
}

#tool
{
position: absolute;
display: none;
pointer-events: none;
border: 1px solid #221E1D;
background-color: #ffffff;
max-width: 150px;
padding: 3px;
}

#toolhead
{
text-align: center;
font-size: 14px;
padding: 3px;
}

.trecttxt
{
font-size: 12px;
}

.button
{
margin: 5px;
padding: 3px 5px;
display: inline-block;
color: #6d80b0;
border-radius: 5px;
}

.button.pressed, .button:hover
{
cursor: pointer;
background-color: #b24b70;
color: #ffffff;
}

#selector
{
margin-top: 5px;
visibility: hidden;
}

.axis path, .grid, .pgrid
{
stroke: #221E1D;
stroke-opacity: 0.1;
}

.axis text, .gtext, .ltwtext, .xfinal, .questions, .tgrid, .bartext, .barval, .ltwyear, .vals_shown.text, .cubetext, .legtext
{
font-size: 10px;
}

.gtext.desc
{
font-size: 8px;
}

.ltwyear
{
font-size: 12px;
}

.questions, .xfinal, .bartext, .barval, .ltwyear, .vals_shown.text
{
text-anchor: middle;
}

.legtext, .cubetext
{
text-anchor: end;
}

#legend, #legend_p
{
display: none;
}

.ltwtext
{
fill: #6d80b0;
display: none;
}

.connect
{
pointer-events: none;
stroke: #DFE2DB;
fill: none;
}

.units
{
stroke: #6d80b0;
}

.circles
{
stroke: #ffffff;
}

.vals_shown.rect
{
fill: #ffffff;
}

.low, .high
{
font-weight: bold;
color: #b24b70;
}

.high
{
color: #6d80b0;
}

.startscroll
{
font-size: 1vw;
text-anchor: end;
}

@media screen and (min-width: 900px)
{
#graph
{
width: auto;
margin: 0 0 0 40px;
position: fixed;
top: 30px;
right: 30px;
}

#sections
{
margin: 0;
width: 260px;
padding-top: 150px;
}

#sections > div
{
border: none;
background: #ffffff;
opacity: .2;
margin-bottom: 50vh; /*mehr*/
}

#sections > div:last-child
{
margin-bottom: 50%; /*mehr*/
}

#buttons
{
right: 35px;
}
}


@media screen and (min-width: 1024px)
{
body
{
font-size: 16px;
}

#sections
{
width: 340px;
}

.axis text, .gtext, .ltwtext, .xfinal, .questions, .tgrid, .bartext, .barval, .ltwyear, .vals_shown.text, .cubetext, .legtext
{
font-size: 12px;
}

.gtext.desc
{
font-size: 10px;
}

.ltwyear, .questions
{
font-size: 14px;
}
}