html, body, html * {
    box-sizing: border-box;
}

html {
    font-family: 'Noto Sans', sans-serif;
}

header {
    position: fixed;
    width: 100%;
    height: 7em;
    background: #328;
    color: #fff;
    padding: 0.5em 1em 1em 1em;
    z-index: 999;
}

section {
    width: 100%;
    min-height: 60vh;    
    background: #fff;
    color: #333;
    padding: 1em;
    border-top: 6px solid #328;
}

section.first {
    min-height: 100vh;
    padding-top: 8em;
}

section.hasExample {
    min-height: calc(100vh - 7em);    
}

section:nth-child(even) {
}

h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 3rem;
    margin: 0;
}

h2 {
    font-size: 1.5rem;
    margin: 0.5em 0 0;
}

h1+span {
}

blockquote {
    border-left: 3px solid #009;
    padding-left: 1em;
}

em {
    font-family: 'Roboto Slab', serif;
    font-style: normal;
    color: #009;
}

.examplebox {
    float: right;
    width: 40%;
    height: calc(100vh - 9em);
    margin: 0 0 0 1em;
    padding: 0.5em 0 0 0.5em;
    background: #e1ddff;
}

/* Special Elements */

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.cInvert {
    color: #fff;
}

#download {
    position: absolute;
    bottom: 1em;
    right: 1em;
    padding: 0.5em 1em;
    background: #fff;
    color: #328;
}


/* Style der Satelliten */

.example2 .orbitlistJS li {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 2px solid #000;
    background: #fff;
    text-align: center;
    line-height: 60px;
}

.example2 .orbitlistJS li {
    transition: all 0.2s linear;
}

.example2 .orbitlistJS li:hover {
    background: #24d;
}

.example3 .orbitlistJS .orbitlistJS-trace {
    background: #1ca;
}

.example3 .orbitlistJS .orbitlistJS-active {
    background: #2F4;
}

.example4 .orbitlistJS .orbitlistJS-orbit-1 {
    border: 2px solid #000;
}

.example4 .orbitlistJS .orbitlistJS-orbit-2 {
    border: 2px dotted #33f;
}


/* Style der Satelliten Top-Beispiel */

.exampleTop .orbitlistJS li {
    min-width: 80px;
    padding: 6px;
    height: 80px;
    border-radius: 80px;
    border: 3px solid rgba(255,255,255,0.25);
    background: #fff;
    text-align: center;
    line-height: 62px;
}

.exampleTop .orbitlistJS .orbitlistJS-orbit-2 {
    border: 3px solid rgba(255,255,255,0.25);
}

.exampleTop .orbitlistJS li {
    transition: all 0.2s linear;
}

.exampleTop .orbitlistJS li:hover {
    border: 3px solid rgba(0,0,0,1);
}

.exampleTop .orbitlistJS .orbitlistJS-trace {
    border: 3px solid rgba(255,255,255,1);
}

.exampleTop .orbitlistJS .orbitlistJS-orbit-1.orbitlistJS-active,
.exampleTop .orbitlistJS .orbitlistJS-orbit-2.orbitlistJS-active {
    background: #2F4;
}