@keyframes blink {
    0% {
        border-color:#ffffff;
    }
    
    50% {
        border-color:var(--turquoise);
    }
    
    100% {
        border-color:#ffffff;
    }
}

div.part-content .article-intro {
    margin-bottom:32px;
}

div.part-content .article-content {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:20px;
}

div.part-content .article-content p {
    display:flex;
    background-color:#ffffff;
    padding:20px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    border-radius:5px;
    border:solid 3px #ffffff;
    margin:0;
}

div.part-content .article-content p.playing {
    animation-name:blink;
    animation-duration:1s;
    animation-iteration-count:infinite;
}

div.part-content .article-content p a {
    display:block;
    font-size:24px;
    color:var(--turquoise);
    pointer-events:none;
    flex-grow:1;
    padding-right:20px;
}

div.part-content .article-content p.nofile > span {
    pointer-events:none;
    opacity:0.3;
}

div.part-content .article-content p > span {
    display:flex;
}

div.part-content .article-content p > span span {
    display:block;
    float:left;
    margin-right:5px;
    border-radius:5px;
    width:72px;
    height:72px;
    background-color:var(--turquoise);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:32px;
    text-indent:-9999px;
    transition:0.3s;
    cursor:pointer;
}

div.part-content .article-content p > span span:last-child {
    margin-right:0;
}

div.part-content .article-content p > span span:hover {
    background-color:var(--orange);
}

div.part-content .article-content p > span span.play {
    background-image:url('../gfx/play.svg');
}

div.part-content .article-content p.playing:not(.paused) > span span.play {
    background-image:url('../gfx/pause.svg');
}

div.part-content .article-content p.playing > span span.play {
    background-color:var(--orange);
}

div.part-content .article-content p > span span.stop {
    background-image:url('../gfx/stop.svg');
}

@media only screen and (max-width:993px) {
    div.part-content .article-content {
        grid-template-columns: repeat(1,1fr);
    }
    
    div.part-content .article-content p > span span {
        
    }
    
}

@media only screen and (max-width:639px) {
    
    div.part-content .article-content p > span span {
        width:36px;
        height:36px;
    }
    
}

@media only screen and (max-width:639px) {
    
    div.part-content .article-content {
        grid-gap:10px;
    }
    
    div.part-content .article-content p {
        padding:10px;
    }
    
    div.part-content .article-content p a {
        font-size:18px;
    }
    
}