body {
margin:0;
padding:0;
background-color:#f8f8ff;
font-family: Abel;
font-size: 1.2rem;
letter-spacing: -.01rem;
}

#content {
position: absolute;
top: 0;
right: 0;
width: 49%;
margin-left: 50%
padding-left: 1%;
border-left: 0px solid #666;
}

#content_seiten {
position: absolute;
top: 0;
right: 0;
width: 49%;
margin-left: 50%
padding-left: 1%;
border-left: 0px solid #666;
}

#text {
width: 100%;
border-left: 0px solid;
margin: 1rem 0 0 0;
padding: 0 0 4rem 0;
color: #282828;
opacity: 1;
letter-spacing: -.01rem;
word-spacing: .1rem;
}

#navigation {
z-index: 1;
position: fixed;
top: 2px;
right: 52%;
width: auto;
text-align: right;
line-height: 1.5rem;
padding: 0;
font-size: 1.05rem;/*3vw*/
font-family: ;
font-weight: 200;
letter-spacing: rem;
opacity: .4;
color:#282828;
}

#scrolldown {
visibility: hidden;
}

.media {
    float: ;
    background-color: #f8f8ff;
    width: 160px;
    margin: 0 .8rem 1rem -1.25rem;
    padding: 0;
}
.text {
	padding: 0;
	z-index: 1;
}
.video {
	padding: 0;
	z-index: 1;
}
hr {
	height: 1px solid;
}

.navigation {
	visibility: hidden;
}

 .vertical-line {
 	visibility: hidden;
            width: 2px;
            /* Adjust the width as needed */
          
            height: 100px;
            /* Adjust the height as needed */
          
            background-color: #000;
            /* Change color if desired */
          
            margin: 0 auto;
            /* Center the line horizontally */
          
            transform: rotate(180deg);
            /* Rotate the line to make it vertical */
          
        }
table {
}

pre {
	font-size: .8rem;
	letter-spacing: -.1rem;
}

sup {
	font-size: .8rem;
}

h1 {
	font-size: 3rem;
	line-height: 3.5rem;
	margin: 0;
	letter-spacing: .1rem;
}
h2 {
	margin: 0;
	padding: 0;
}
h3 {
	margin: 0;
	padding: 0;
}
td {
	vertical-align: top;
}
li {
	margin-left: 19px;
}

a:link { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a:visited { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a:hover { color:black; text-decoration:none;opacity:1; cursor:pointer;  }
a:active { color:black; text-decoration:none;opacity:1; cursor:pointer; }

a.red:link { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.red:visited { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.red:active { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }


.embed-container {
	border-left:0px;
	margin-left:-1px;
}

iframe {
	border:0;
}

li {
padding-bottom:.6rem;
}


.embed-container {
  position: relative; 
  padding-bottom: 56.25%;
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: 100%;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 110%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 100%;
}





@media only screen and (max-width:768px) {
body {
margin: 0;
padding: 0;
background-color:;
}

#content {
position: absolute;
top: 100%;
left: 0;
width: 95%;
padding-left: 3%;
border-left: 0px solid #666;
}

#content_seiten {
position: absolute;
top: 2%;
left: 0;
width: 95%;
padding-left: 3%;
border-left: 0px solid #666;
}

#text {
position: absolute;
left: 0;
font-size: 1.35rem;
line-height: 1.8rem;
letter-spacing: -.05rem;
width: 95%;
border-left: 0px solid;
padding: 0 0 4rem 4%;
margin-top: 2rem;
color:;
opacity:1;
}

#navigation {
position: absolute;
top: 10px;
left: 5%;
text-align: left;
font-size: 1.3rem; 
line-height: 3rem;
font-family:;
font-weight: 600;
letter-spacing: -.1rem;
}

.navigation {
	position: relative;
	top: 0;
	left: 0;
	font-size: 2rem;
	font-weight: 600;
}

#scrolldown {
z-index: 1;
position: absolute;
left: 0;
top: 10%;
font-size: 1.8rem;
width: 100%;
text-align: center;
}

 .vertical-line {
 	visibility: hidden;
            width: 2px;
            /* Adjust the width as needed */
          
            height: 100px;
            /* Adjust the height as needed */
          
            background-color: #000;
            /* Change color if desired */
          
            margin: 0 auto;
            /* Center the line horizontally */
          
            transform: rotate(180deg);
            /* Rotate the line to make it vertical */
          
        }
table {
}
pre {
	font-size: .8rem;
	letter-spacing: -.1rem;
	line-height: 1rem;
}
sup {
	font-size: .6rem;
}
h1 {
	font-size: 3rem;
	line-height: 3.5rem;
	margin: 0 0 0 -3px;
	letter-spacing: -.3rem;
}
h4 {
	margin: 0;
}
}


#jukebox-player {
  width: 100%;
  max-width: 600px;
  background: #777;
  padding: 1em;
}

#jukebox-player__tracklist {
  background: #fff;
  padding: 1em;
  overflow-y: auto;
}
.jukebox-song {
  width: 100%;
  display: flex;
}
.jukebox-song__playbtn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 4px;
  border-radius: 50%;
  cursor: pointer;
}
.jukebox-song__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 4px;
  width: 100%;
}
.jukebox-song__active {
  background: rgba(200, 200, 0, 0.5);
}
.jukebox-song__duration {
  color: grey;
}