.pr {
     position: relative;
}
 .rd {
     border-radius: 50%;
}
 .cp {
     cursor: pointer;
}
 .icon {
     display: inline-block;
     position: relative;
     --w:22px;
     --h:22px;
     width: var(--w);
     height: var(--h);
}
/* иконка панеля управления */
 .cnt-1, .cnt-3 {
     -webkit-transition: .3s ease-in-out;
     -o-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
 .is .icon .cnt-1{
     -webkit-transform: translateX(16px);
     -ms-transform: translateX(16px);
     transform: translateX(16px);
}
 .is .icon .cnt-3{
     -webkit-transform: translateX(-16px);
     -ms-transform: translateX(-16px);
     transform: translateX(-16px);
}
 .cnt-1, .cnt-3 {
     --size: 8px;
     height: var(--size);
     width: var(--size);
     background-color: var(--n);
     border: 1px solid var(--l);
     top: 2px;
     z-index: 1;
}
 .cnt-2, .cnt-4 {
     --h: 1px;
     --w: 10px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
}
 .cnt-2 {
     top: -2px;
     left: 8px;
}
 .cnt-3 {
     left: 14px;
}
 .cnt-4 {
     top: -2px;
     left: 4px;
}
/* иконка след эпизод */
 .cnt-5 {
     --size: 0;
     width: var(--size);
     height: var(--size);
     border-style: solid;
     border-width: 10px 0 10px 16px;
     border-color: transparent transparent transparent var(--l);
     top: 1px;
}
 .cnt-6 {
     --w: 4px;
     --h: 22px;
     top: -20px;
     left: 18px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
}
/* иконка пред эпизод */
 button:hover .cnt-5 {
     -webkit-animation: rl 720ms ease-in-out infinite alternate;
     animation: rl 720ms ease-in-out infinite alternate;
}
 button:hover .cnt-7 {
     -webkit-animation: lr 720ms ease-in-out infinite alternate;
     animation: lr 720ms ease-in-out infinite alternate;
}
 .cnt-7 {
     --size: 0;
     width: var(--size);
     height: var(--size);
     border-style: solid;
     border-width: 10px 16px 10px 0;
     border-color: transparent var(--l) transparent transparent;
     top: 1px;
     left:5px;
}
 .cnt-8 {
     --w: 4px;
     --h: 22px;
     top:-20px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
}
/* лупа */
/* .icon:hover .cnt-9 {
     border-style: dashed;
     animation: rotate 2s linear infinite;
     transition: 720ms ease-in-out transform;
}
 */
 .cnt-9 {
     --size: 18px;
     width: var(--size);
     height: var(--size);
     border: 1px solid var(--l);
}
 .cnt-10 {
     --w: 1px;
     --h: 8px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
     -webkit-transform: rotate(-50deg);
     -ms-transform: rotate(-50deg);
     transform: rotate(-50deg);
     top: -4px;
     left: 18px;
}
/* ключ */
 .cnt-11 {
     --size: 10px;
     width: var(--size);
     height:var(--size);
     border:1px solid var(--l);
     top:6px;
}
 .cnt-12 {
     --w:12px;
     --h:1px;
     width: var(--w);
     height:var(--h);
     background-color:var(--l);
     left: 10px;
}
 .cnt-13, .cnt-14 {
     --w:1px;
     --h:3px;
     width: var(--w);
     height: var(--h);
     background: var(--l);
}
 .cnt-13 {
     left: 17px;
}
 .cnt-14 {
     top: -3px;
     left: 19px;
}
/* выход */
 .cnt-15 {
     --size: 20px;
     width: var(--size);
     height: var(--size);
     border: 2px solid var(--l);
     left: 1px;
     top: 2px;
}
 .cnt-16 {
     --w: 22px;
     width: var(--w);
     height: 6px;
     background: var(--n);
     top: -18px;
}
 .cnt-17 {
     --w: 2px;
     --h: 14px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
     left: 10px;
}
/* фильтр */
 .cnt-18 {
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 8px 8px 0 8px;
     border-color: var(--l) transparent transparent transparent;
     left: 3px;
     top: 2px;
}
 .cnt-19 {
     --size:13px;
     left: 10px;
     height: var(--size);
     width: 0;
     border-top: solid 3px var(--l);
     border-right: solid 3px var(--l);
     border-bottom: solid 3px transparent;
}
/* инфа */
 .cnt-20 {
     --w: 20px;
     --h: 20px;
     width: var(--w);
     height: var(--h);
     border: 1px solid var(--l);
     background-color: var(--n);
     left: 1px;
     top: 1px;
}
 .cnt-21 {
     --w: 2px;
     --h: 9px;
     width: var(--w);
     height: var(--h);
     background-color: var(--l);
     left: 8px;
     top: 2px;
}
 .cnt-22 {
     --size: 4px;
     width: var(--size);
     height: var(--size);
     background-color: var(--l);
     top: 3px;
     left: 7px;
}

/* плюс */

.cnt-23, .cnt-24 {
    top: 10px;
    left: 0;
    --size:100%;
    width: var(--size);
    height: 1px;
    background-color: var(--l);
}

.cnt-24 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 9px;
}
/* анимация */
 @-webkit-keyframes rotate {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
    }
     to {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes rotate {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
    }
     to {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes rl {
     from {
         -webkit-transform: translateX(0);
         transform: translateX(0);
    }
     to {
         -webkit-transform: translateX(3px);
         transform: translateX(3px);
    }
}
 @keyframes rl {
     from {
         -webkit-transform: translateX(0);
         transform: translateX(0);
    }
     to {
         -webkit-transform: translateX(3px);
         transform: translateX(3px);
    }
}
 @-webkit-keyframes lr {
     from {
         -webkit-transform: translateX(0);
         transform: translateX(0);
    }
     to {
         -webkit-transform: translateX(-2px);
         transform: translateX(-2px);
    }
}
 @keyframes lr {
     from {
         -webkit-transform: translateX(0);
         transform: translateX(0);
    }
     to {
         -webkit-transform: translateX(-2px);
         transform: translateX(-2px);
    }
}