@font-face {
    font-family: 'alte';
    src: url('altehaasgroteskbold-webfont.woff2') format('woff2'),
         url('altehaasgroteskbold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}



body{
margin:0;
font-family: 'alte', 'helvetica bold', arial, sanserif;
font-style: normal;
font-size: 20px;
line-height: 1.2em;
background: #aaa;
color: #000;
font-weight: bold;
letter-spacing:0;
}

audio{
display: none;
}

.audio-player {

}

.audio-player i {
font-size: 24vw;
}

.audio-player i:hover {
color: #ddd;
cursor: pointer;
}


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#next-button {
font-size: 18vw;
}


.credits{
text-decoration: none;
font-size: 0.65em;
font-family: arial, helvetica, sanserif;
line-height: 1.3em;
font-weight: 800;
}

.sublink a {
text-decoration: none;
font-size: 0.65em;
font-family: arial, helvetica, sanserif;
color: inherit;
border-bottom: 1px solid; 
padding-bottom: 1px;
font-weight: 800;
}
.sublink a:hover{
cursor: pointer;

}

p {
margin-top:0;
padding-top:0;
margin-bottom:1.3em;
padding-bottom:0;
}

.about {
position: absolute;
margin: 0 2% 90px 1%;
top: 140vh;
}

.about a{
color: #000;
}


.about-text{
column-count: 4;
padding-bottom: 50px;
font-size: 16px;
line-height: 1.3em;
}

#now-playing {
display: ;
}

.progress {
overflow: visible;
z-index:900;
background: rgba(255,255,255,0.2);
}

li.active:before {
font-family: "Material Icons";
content: "\ef4a";
display: block;
padding-right: 0.8em;
vertical-align: middle;
font-size: 0.5em;
line-height: 2em;
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
margin-top:-2px;

}

.ui-slider-handle {
border-radius: 50%;
}

.sublink a {
text-decoration: none;
font-size: 0.6em;
font-family: arial;
color: inherit;
border-bottom: 1px solid; 
padding-bottom: 1px;
}
.sublink a:hover{
cursor: pointer;
}


ul {
list-style: none;
z-index:500;
display: flex;
flex-wrap: wrap;
width:100%;
}

li {
line-height: 1em;
display:inline-block;
background: none;
flex-basis: 13%;
min-height: 180px;
padding-right: 3%;
}

li:hover{
color: #ddd;
cursor: pointer;
}

li.active {
color: #ddd;
}

li:first-child {
margin-left:1%;
}

.playlist {
position: absolute;
z-index: 900;
top:40px;
padding:0;
margin:0;
}

.col {
width: 100vw;
height: 130vh;
position: fixed;
overflow: hidden;
z-index: 0;
top: 0;
}

.col img {
width: 100%;
height: 100%;
}

.row {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 300px;
height: 100px;
z-index: 200;
text-align: center;
}

.card-body{
position:static;


}

.signal {
position: absolute;
top:21%;
left:7%;
width:200px;
height:200px;
display:none;
z-index:500;
}

.signal img{
object-fit: contain;
height:100%;
width:100%;
}


div.keeptogether {
display: inline-block;
width: 100%;
}


@media screen and (min-width:560px) {
.audio-player i {
font-size: 90px;
}
#next-button {
font-size: 90px;
}
}

@media only screen and (max-width: 1400px) {
.about-text{
column-count: 4;
}
}


@media only screen and (max-width: 800px) {

body{
font-size: 20px;
letter-spacing:-0.03em;

}


li {
display:block;
flex-basis: 100%;
min-height: 0;
padding-bottom:.5em;
margin-left: 1%;
}

.about-text{
column-count: 1;
padding-bottom: 90px;
font-size: 20px;
letter-spacing:-0.03em;

}

.audio-player i {
font-size: 80px;
}
#next-button {
font-size: 80px;
}

.about {
top: 170vh;
}
}