.extrenal-player a {
    display: block;
    color: #fff;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  padding: 0;
  width: 100%;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #323232;
  background: #fff;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #323232;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  margin: 0;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #323232, 0px 0px 1px #323232;
  background: #fff;
  border-radius: 0;
  border: none;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #323232;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;

}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #323232;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fff;
}
.volume-control {
    width: 6rem !important;
}
.player {
    min-width: 32px;
    min-height: 32px;
    width: 1rem;
    height: 1rem;
    background-color: #FF911E;
    cursor: pointer;
/*    border: 1px solid #323232; */
    border-radius: 50%;
}
header .player {
    background-color: #fff !important;
}

header .player::after {
    background-color: #323232 !important;
}
.player::after {
    content: '';
    display: block;
    height: 60%;
    width: 60%;
    position: relative;
}
.player:not(.is-play):not(.is-loading)::after {
    left: 30%;
    top: 20%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 494.942 494.942' height='512' viewBox='0 0 494.942 494.942' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m35.353 0 424.236 247.471-424.236 247.471z'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 494.942 494.942' height='512' viewBox='0 0 494.942 494.942' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m35.353 0 424.236 247.471-424.236 247.471z'/%3E%3C/svg%3E") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #fff;
}
.player.is-play::after {
    left: 22%;
    top: 20%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='353.562px' height='353.562px' viewBox='0 0 353.562 353.562' style='enable-background:new 0 0 353.562 353.562;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M41.064,353.562h109.014V0H41.064V353.562z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M203.482,0v353.562h109.017V0H203.482z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='353.562px' height='353.562px' viewBox='0 0 353.562 353.562' style='enable-background:new 0 0 353.562 353.562;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M41.064,353.562h109.014V0H41.064V353.562z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M203.482,0v353.562h109.017V0H203.482z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #fff;
}
.player.is-loading::after {
    left: 22%;
    top: 20%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='135' height='140' viewBox='0 0 135 140' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Crect y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='30' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='60' width='15' height='140' rx='6'%3E%3Canimate attributeName='height' begin='0s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='90' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='120' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3Csvg width='135' height='140' viewBox='0 0 135 140' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Crect y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='30' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='60' width='15' height='140' rx='6'%3E%3Canimate attributeName='height' begin='0s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='90' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='120' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #fff;
}

header .play-button {
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    width: 3rem;
    height: 3rem;
    padding: .3rem;
    margin-right: .2rem;
    display: flex;
    border-color: transparent;
}

.play-button a {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #323232;
    text-decoration: none !important;
    padding-left: .2rem;
    
}
.tds {
    height: 2rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    margin-right: 1rem;
}

.tds span {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    -moz-animation: scroll-left 10s linear infinite;
    -webkit-animation: scroll-left 10s linear infinite;
    animation: scroll-left 10s linear infinite;
}
@-moz-keyframes scroll-left {
    0% { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
    0% { 
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}