#hoverArea{margin:0.6em auto;padding:0.6em 1.2em;cursor:pointer;border-radius:50px;display:table;animation:pulse 1s infinite;background:var(--theme-ui-colors-main);}
.btn-media{border-radius:50px;padding:0.3em 1em 0.3em 0.3em;margin-bottom:0.8em;display:inline-flex;align-items:center;background:var(--theme-ui-colors-main);cursor:pointer;transition:all 0.2s ease-out;}
.btn-media:hover,#hoverArea:hover{background:var(--theme-ui-colors-secondary);}

#playBtn{border:none;width:40px;height:40px;margin:auto 0.4em auto 0;display:block;background-size:100%;background-position:center;background-repeat:no-repeat;background-color:transparent;background-image:url('../../imgs/icon-play-white.svg');position:relative;}

#playBtn:after{width:40px;height:40px;position:absolute;top:0;left:0;border-radius:50%;animation:pulse 1s infinite;content:'';border:0.4em solid var(--theme-ui-colors-white);}

.state-play,.state-pause{}
.state-play{}
#playBtn.state-pause{background-image:url('../../imgs/icon-pause-white.svg');}

@keyframes pulse{
0%{box-shadow:0 0 0 6px rgba(255,255,255,0.6);}
100%{box-shadow:0 0 0 20px transparent;}
}