/* ---------------------------- */
/* КАРТОЧКА В СТИЛЕ ЮТУБ ПЛЕЕРА */
/* ---------------------------- */

/* Добавить в начало ярлыка:

player-1-card-
player-2-card-
player-3-card-
player-gif-card-

*/

/* ----------------- */
/* БЫСТРЫЕ НАСТРОЙКИ */
/* ----------------- */

/* Анимация карточки при наведении - ТЕНЬ */

.folders-row .col-lg-3 > a[href*="wpm-category/player-"][class*="folder-wrap"]:hover {
	filter: drop-shadow(6px 12px 8px var(--shadow-color-player-card));
	-webkit-filter: drop-shadow(6px 12px 8px var(--shadow-color-player-card));
}

/* 1. Раскомментировать, чтобы скрыть иконку PLAY при НАВЕДЕНИИ на карточку */

/* .folders-row a[href*="wpm-category/player-"][class*="folder-wrap"]:hover:before {
	
	display: none!important;
} */

/* 2. Раскомментировать, чтобы принудительно запретить Индикаторы и Стикеры */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

/* .folders-row a[href*="wpm-category/player-"] > .folder-content > .bottom-icons,
.folders-row a[href*="wpm-category/player-"] .label
{
	display: none!important;
} */

/* ------------------------- */
/* 1. БЛОК - ССЫЛКА КАРТОЧКИ */

/* Убираем рамку - ТЕНЬ вокруг карточки */

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
	border: none;
	box-shadow: none;
}

/* Общие настройки блока карточки */

.folders-row .col-lg-3:has(a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]) {
	display: block!important;
	z-index: 501!important;
	/* 3 карточки в ряду на больших экранах */
    width: calc(100%/3)!important;
}

/* 2 карточки в ряду на средних экранах */

@media (min-width: 768px) and (max-width: 991px) {

.folders-row .col-lg-3:has(a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]) {
	width: calc(100%/2)!important;
}
}

/* 1 карточка в ряду на мобильных */

@media (min-width: 320px) and (max-width: 767px) {

.folders-row .col-lg-3:has(a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]),
.folders-row .col-lg-3:has(a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]) {
	width: 100%!important;
	/* Корректировка ширины карточки на узких экранах */
	padding-right: 0px;
    padding-left: 0px;
}
}

/* Высота карточки на разных экранах */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
	height: 349px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
	height: 312px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
	height: 274px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
    height: 303px;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
    height: 299px;
}
}

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] {
	height: 312px;
}
}

/* СОЗДАЁМ ИКОНКУ PLAY и стрелку внтури  */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
	position: absolute;
	z-index: 3;
	content: "\f04b";
	font-family: 'icomoon';
    font-size: 45px;
	opacity: var(--opacity-play-icon-player-card);
	scale: var(--size-play-icon-player-card);
	color: var(--color-bg-arrow-icon-player-card);
	background: var(--color-bg-play-icon-player-card);
    padding: 12px 20px;
    line-height: normal;
    border-radius: 100%;
    height: 70px;
    width: 70px;
    transition: .2s ease-out;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
    box-shadow: 0px 0px 40px 1vw rgb(255 255 255 / 60%);
}

/* Иконка PLAY и стрелка при наведении на карточку */

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:hover:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:hover:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:hover:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:hover:before {
	display: inherit;
	background: var(--color-bg-play-hover-icon-player-card);
	color: var(--color-bg-arrow-hover-icon-player-card);
    scale: 1.2;
    transition: .2s ease-out;
	-webkit-transition: .2s ease-out;
	-moz-transition: .2s ease-out;
	-ms-transition: .2s ease-out;
}

/* ПОЛОЖЕНИЕ иконки PLAY на разных экранах на Страницах и в Активации */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и Ютуб GIF */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 85px;
    left: 179px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 85px;
    left: 179px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 68px;
    left: 144px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 68px;
    left: 144px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 46px;
    left: 111px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 46px;
    left: 111px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 62px;
    left: 139px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 62px;
    left: 139px;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 62px;
    left: 134px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 62px;
    left: 134px;
}
}

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
    top: 68px;
    left: 145px;
}
.row-key-categories a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
.row-key-categories a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before { 
	top: 68px;
    left: 145px;
}
}

/* --------------------- */
/* 2. СТИКЕР НА КАРТОЧКЕ */

/* Общие настройки */

.folders-row a[href*="wpm-category/player-1-card-"] .label,
.folders-row a[href*="wpm-category/player-2-card-"] .label,
.folders-row a[href*="wpm-category/player-3-card-"] .label,
.folders-row a[href*="wpm-category/player-gif-card-"] .label {
    font-size: 17px;
    line-height: normal;
}

/* ПОЛОЖЕНИЕ стикера */
 /* для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row a[href*="wpm-category/player-1-card-"] .label,
.folders-row a[href*="wpm-category/player-2-card-"] .label,
.folders-row a[href*="wpm-category/player-3-card-"] .label,
.folders-row a[href*="wpm-category/player-gif-card-"] .label {
	top: calc(13px + var(--radius-top-player-card)/6);
    right: calc(13px + var(--radius-top-player-card)/4);
}

/* ---------- */
/* 3. ОБЛОЖКА */
/* ---------- */

/* Закругление обложки */

.folders-row a[href*="wpm-category/player-1-card-"] .folder-front,
.folders-row a[href*="wpm-category/player-2-card-"] .folder-front,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-front,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-front,

.folders-row a[href*="wpm-category/player-1-card-"] .folder-sub-front,
.folders-row a[href*="wpm-category/player-2-card-"] .folder-sub-front,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-sub-front,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-sub-front

 {
	border-radius: var(--radius-top-player-card) var(--radius-top-player-card) var(--radius-bottom-player-card) var(--radius-bottom-player-card);
	/* Убираем обрезку обложки */
	clip-path: none;
	-webkit-clip-path: none;
	/* исправляем глюк с закруглением (для clip-path) для Сафари */
	transform: translateZ(0);
    will-change: transform;
}

/* ---------------------------------------------------------- */
/* РАЗМЕР ОБЛОЖКИ на карточке с МАТЕРИАЛАМИ на разных экранах */
/* ---------------------------------------------------------- */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
    width: 262px;
    transform: translate(4px, 16px);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
    width: 248px;
    transform: translate(11px, 16px);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
    width: 230px;
    transform: translate(20px, 16px);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
    width: 244px;
    transform: translate(13px, 16px);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
    width: 244px;
    transform: translate(13px, 16px);
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-front pattern image {
	width: 248px;
    transform: translate(11px, 16px);
}
}

/* --------------------------------------------------------- */
/* РАЗМЕР ОБЛОЖКИ на карточке с КАРТОЧКАМИ на разных экранах */
/* --------------------------------------------------------- */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
	width: 283px;
    transform: translate(21px, 51px);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
	width: 279px;
    transform: translate(23px, 47px);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
	width: 262px;
    transform: translate(31px, 46px);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
	width: 276px;
    transform: translate(24px, 46px);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
    width: 274px;
    transform: translate(25px, 47px);
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-1-card-"][class*="folder-wrap"] .folder-sub-front  pattern image,
.folders-row a[href*="wpm-category/player-2-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"][class*="folder-wrap"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"] .folder-sub-front pattern image {
	width: 279px;
    transform: translate(23px, 47px);
}
}

/* -------------------- */
/* 4. НАЗВАНИЕ КАРТОЧКИ */
/* -------------------- */

/* Высота и закругление блока с названием карточки */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content .title,
.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content .title,
.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content .title,
.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content .title {
	height: 101px;
	border-radius: 0 0 var(--radius-bottom-player-card) var(--radius-bottom-player-card);
	/* Запрещаем скрывать длинное описание */
	text-wrap: inherit;
	white-space: normal;
	background: var(--color-subtitle-bg-player-card);
    color: var(--color-subtitle-player-card) !important;
}

/* ИКОНКА в описании блоков Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row .col-xs-12 > a[href*="wpm-category/player-"] > .folder-content .title:before,
.row-key-categories .col-xs-12 > a[href*="wpm-category/player-"] > .folder-content .title:before
{
	content: var(--icon-player-card);
	color: var(--color-icon-player-card);
}

/* ------------- */
/* 5. ИНДИКАТОРЫ */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */
/* ------------------------------------- */

/* Общие настройки */

.folders-row .col-xs-12 a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons,
.folders-row .col-xs-12 a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons,
.folders-row .col-xs-12 a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons,
.folders-row .col-xs-12 a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons {
    background: none!important;
    bottom: 111px;
    position: absolute;
    width: inherit;
	color: var(--color-indikator-player-card)!important;
	padding-left: 20px!important;
    padding-right: 10px!important;
	height: auto;
}

/* ----------- */
/* КОММЕНТАРИИ */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */
/* ----------------------------- */

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	background: var(--color-bg-indikator-player-card);
    padding: 4px 7px;
    border-radius: 10px;
	position: absolute;
}

/* Положение иконок Комментарии на разных экранах на Страницах и в Активации */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(157px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments { 
	bottom: calc(157px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(120px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {  
	bottom: calc(120px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(82px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {  
	bottom: calc(82px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(111px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments { 
	bottom: calc(111px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(107px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(107px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {
	bottom: calc(120px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .comments {  
	bottom: calc(120px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

/* --------- */
/* ПРОСМОТРЫ */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */
/* ----------------------------- */

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	background: var(--color-bg-indikator-player-card);
    padding: 4px 7px;
    border-radius: 10px;
	position: absolute;
}

/* Положение иконок Просмотры на разных экранах на Страницах и в Активации */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(194.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(194.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(156.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(156.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(120.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(120.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(149.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(149.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(145.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(145.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views {
	bottom: calc(158.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .views { 
	bottom: calc(158.5px - var(--radius-top-player-card)/6);
    left: calc(11px + var(--radius-top-player-card)/3);
}
}

/* ----------------------------- */
/* 6. ТАЙМЛАЙН - щкала прогресса */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */
/* ----------------------------- */

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap,
.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap,
.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap {
    margin-top: -5px;
}

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content .course-progress-wrap .progress-count,
.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content .course-progress-wrap .progress-count,
.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content .course-progress-wrap .progress-count {
	background: #fff;
    border-radius: 10px;
    padding: 5px 5px;
    vertical-align: bottom;
}

/* Цвет и фон неподвижного прогресса */
/* Дл Ютуб 3 */

.folders-row .col-xs-12 a[href*="wpm-category/player-3-card-"] > .folder-content .course-progress-wrap .progress-count {
	background: var(--color-bg-static-progress-player-card)!important;
	color: var(--color-static-progress-player-card)!important;
}

/* Цвет ЗАПОЛНЕННОЙ шкалы прогресса - ТАЙМЛАЙН */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock,

.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock,
.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt,
.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock,

.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock {
    background-image: linear-gradient(to right, var(--color-1-progress-bar-player-card) 0%, var(--color-2-progress-bar-player-card) 100%);
	border-radius: 10px;
}

/* Цвет НЕ ЗАПОЛНЕННОЙ шкалы прогресса - ТАЙМЛАЙН */
/* Для Ютуб 2, Ютуб 3 и GIF Ютуб */

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress,
.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress {
    background-color: var(--color-progress-bar-player-card)!important;
}

/* -------------------------------- */
/* 7. МАХИНАЦИИ СО ШКАЛОЙ ПРОГРЕССА */
/* -------------------------------- */

/* Использовать для рубрик с 1 уроком */

/* Общие настройки для Ютуб 1 */

/* СТАТУС */

.folders-row a[href*="wpm-category/player-1-card-"] .folder-content .bottom-icons .status,
.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .status,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .status,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .status {
    position: absolute;
    right: 10px;
    bottom: 7px;
    background: #fff;
    padding: 0px 7px;
    border-radius: 10px;
}

.folders-row a[href*="wpm-category/player-1-card-"] .folder-content .bottom-icons .status span[class*="icon-"],
.folders-row a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .status span[class*="icon-"],
.folders-row a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .status span[class*="icon-"],
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .status span[class*="icon-"]
 {
    top: 2px;
    position: relative;
}

/* КОММЕНТАРИИ */

.folders-row a[href*="wpm-category/player-1-card-"] .folder-content .bottom-icons .comments {
    position: absolute;
	background: var(--color-bg-indikator-player-card);
    padding: 4px 7px;
    border-radius: 10px;
	bottom: 78px;
}

/* ПРОСМОТРЫ */

.folders-row a[href*="wpm-category/player-1-card-"] .folder-content .bottom-icons .views {
	position: absolute;
    bottom: 40px;
	background: var(--color-bg-indikator-player-card);
    padding: 4px 7px;
    border-radius: 10px;
}

/* ШКАЛА ПРОГРЕССА */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
	width: auto;
}

/* --------------------------------------------------- */
/* ПРЕВРАЩАЕМ ШКАЛУ ПРОГРЕССА В СТАТУС ПРОСМОТРА УРОКА */
/* Для Ютуб 1 */
/* ---------- */

/* Общие настройки */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar 

{
    padding: 14px 10px;
    text-align: left;
	width: 100%!important;
	border-radius: 10px;
}

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress

{
    overflow: visible;
	background-color: transparent!important;
    margin-bottom: 8px;
    top: 0px;
}

/* Общие настройки для иконок */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar::before

{
    font-size: 17px;
    font-family: 'icomoon';
    position: relative; 
	top: -10px;
    right: 2px;
}

/* Общие настройки для текста */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar::after

{
    font-size: 17px;
    font-family: "PT Sans", sans-serif;
    position: relative;
    top: -12px;
}

/* Убираем количество процентов справа от шкалы */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress-count {
	display: none;
}

/* 1. Превращаем ЗАПОЛНЕННУЮ на 100% шкалу в ИКОНКУ + ТЕКСТ */
/* -------------------------------------------------------- */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar[style="width: 100%"] {
    background: var(--bg-status-done-player-card);
}

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar[style="width: 100%"]::after {

	content: var(--text-status-done-player-card);
    color: var(--color-status-done-player-card);
}

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar[style="width: 100%"]::before {

	content: var(--icon-status-done-player-card);
    color: var(--color-status-done-player-card);
}

/* 2. Превращаем НЕЗАПОЛНЕННУЮ шкалу в ИКОНКУ + ТЕКСТ */
/* -------------------------------------------------- */

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar {
    background: var(--bg-status-not-done-player-card);
}

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar::after {

	content: var(--text-status-not-done-player-card);
    color: var(--color-status-not-done-player-card);
}

.folders-row a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar::before {

	content: var(--icon-status-not-done-player-card);
    color: var(--color-status-not-done-player-card);
}

/* -------------------------------------------- */
/* 8. Имитируем ТАЙМЛАЙН С ПОЛЗУЩИМИ ПРОЦЕНТАМИ */
/* Использовать для рубрик с несколькими уроками или рубриками  */
/* Для Ютуб 2 */
/* ---------- */

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
	overflow: visible;  /* штобы шкала не перекрывала % before after */
    top: 0px;
}

/* Ширина Таймлана на разных экранах */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 85%;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 75%;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

/* Убрать количество процентов справа от шкалы */

.folders-row a[href*="wpm-category/player-2-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress-count {
	display: none;
}

/* Вывод АТРИБУТА "%" (индикатор) у шкалы прогресса */

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before {
	content: attr(title) "%";
    font-size: 16px;
    position: relative;
    background: var(--color-bg-animated-progress-player-card);
	color: var(--color-animated-progress-player-card);
    border-radius: 10px;
    padding: 5px 10px;
}

/* Положение ИНДИКАТОРА на отметке 100% */
/* Чтобы не залазил на правый край карточки */
/* Для Ютуб 2 */

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock[style="width: 100%"]::before,

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt[style="width: 100%"]::before,

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock[style="width: 100%"]::before {
    left: 43%;
}

/* Положение ИНДИКАТОРА на разных экранах */
/* Для Ютуб 2 */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before

	{
    bottom: 13%;
    left: 48%;
	}
}

@media (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before

	{
	bottom: 13%;
    left: 48%;
	padding: 2px 7px;
	}
}

/* --------------------------------------------------- */
/* 9. Имитируем ТАЙМЛАЙН С ШАРИКОМ и ПРОЦЕНТАМИ справа */
/* Использовать для рубрик с несколькими уроками или рубриками */
/* Для Ютуб 3 */
/* ---------- */

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	overflow: visible;  /* штобы шкала не перекрывала % before after */
	margin-right: 10px;
    top: 0px;
}

/* Ширина ТАЙМЛАНА на разных экранах */


@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	width: 70%;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	width: 65%;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	width: 55%;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	width: 63%;
}
}

@media (max-width: 767px) {

.folders-row a[href*="wpm-category/player-3-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {	
	width: 63%;
}
}

/* Добавляем ШАРИК на таймлайне */

.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before
 {
	display: inline-block;
	height: 25px;
    width: 25px;
	position: relative;
    bottom: 30%;
    left: 48%;
    background: var(--color-circle-progress-bar-player-card)!important;    
	border: 3px solid var(--color-bolder-circle-progress-bar-player-card);
	border-radius: 50%;
	content: "";
	opacity: var(--opacity-circle-progress-bar-player-card);
}

/* ---------------------------------------------- */
/* 10. Имитируем АНИМИРОВАННУЮ обложку и ТАЙМЛАЙН */
/* Идеально для рубрик с 1 уроком */
/* Обложка рубрики должна быть в GIF формате */
/* Для GIF Ютуб */
/* ------------ */

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
	overflow: visible;  /* штобы шкала не перекрывала % before after (шарик)*/
    top: 0px;
}

/* Ширина ТАЙМЛАЙНА на разных экранах */

@media (min-width: 1400px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 85%;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 75%;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress {
    width: 80%;
}
}

/* Убрать количество процентов справа от шкалы */

.folders-row a[href*="wpm-category/player-gif-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress-count {
	display: none;
}

/* Вариант 1 - ШАРИК на таймлайне */
/* ------------------------------ */

.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before
 {
	display: inline-block;
	height: 25px;
    width: 25px;
	position: relative;
    bottom: 30%;
    left: 48%;
    background: var(--color-circle-progress-bar-player-card)!important;    
	border: 3px solid var(--color-bolder-circle-progress-bar-player-card);
	border-radius: 50%;
	content: "";
	opacity: var(--opacity-circle-progress-bar-player-card);
}

/* Вариант 2 - ИКОНКА на таймлайне */
/* ------------------------------- */

.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
.folders-row a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:before {
    /* font-family: 'icomoon';
    content: "\f0d7";
    font-size: 35px;
    position: relative;
    bottom: 135%;
    left: 49%;
    color: #ffffff !important;
    -webkit-text-stroke: 0.05em #606060; */
}

/* Продолжительность анимации обложки при наведении */

.folders-row a[href*="wpm-category/player-gif-card-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"]:hover .folder-front pattern image {
	transition: all 3s!important;
	-moz-transition: all 3s!important;
	-webkit-transition: all 3s!important;
	-ms-transition: all 3s!important;
	-o-transition: all 3s!important;
}

/* Продолжительность анимации обложки карточки за пределами обложки */

.folders-row a[href*="wpm-category/player-gif-card-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-front pattern image {
	transition: all 0s linear;
	-moz-transition: all 0s linear;
	-webkit-transition: all 0s linear;
	-ms-transition: all 0s linear;
	-o-transition: all 0s linear;
}

/* Анимация шкалы прогресса - ТАЙМЛАЙНА при наведении на карточку */

.folders-row a[href*="wpm-category/player-gif-card-"]:hover > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar  {
	animation: timeline_ani 3s ease-in-out;
	-moz-animation: timeline_ani 3s ease-in-out;
	-webkit-animation: timeline_ani 3s ease-in-out;
	-ms-animation: timeline_ani 3s ease-in-out;
	animation-iteration-count: var(--animation-circle-progress-bar-player-card)!important;
}

/* Анимируем таймлайн */

	@keyframes timeline_ani {
        0%   { width: 0%; }
        100% { width: 100%; }
    }

   /* @keyframes timeline_ani {
        0%   { width: 0%; }
		90% { width: 100%; }
		100% { content: attr(title); }
    } */

/* --------------------------------- */
/* ЭФФЕКТЫ ОБЛОЖКИ - ОБЩИЕ НАСТРОЙКИ */
/* --------------------------------- */

/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */
/* ------------------------------------- */

/* Тонировка обложки */
/* Убираем эффект от классической карточки */

.folders-row a[href*="wpm-category/player-1-card-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-1-card-"] .folder-front pattern image,

.folders-row a[href*="wpm-category/player-2-card-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"] .folder-front pattern image,

.folders-row a[href*="wpm-category/player-3-card-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"] .folder-front pattern image,

.folders-row a[href*="wpm-category/player-gif-card-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"] .folder-front pattern image {
	/* эффекты */
	filter: none;
	-webkit-filter: none;
}

/* Осветление и Яркость - при наведении */
/* Берутся от классической карточки */

.folders-row a[href*="wpm-category/player-1-card-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-1-card-"]:hover .folder-front pattern image,

.folders-row a[href*="wpm-category/player-2-card-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-2-card-"]:hover .folder-front pattern image,

.folders-row a[href*="wpm-category/player-3-card-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-3-card-"]:hover .folder-front pattern image {
	/* эффекты */
	filter: opacity(var(--opacity-cover-effect-hover-classic-card)) drop-shadow(0 0 0 #DFECE0) brightness(var(--brightness-cover-effect-hover-classic-card));
	-webkit-filter: opacity(var(--opacity-cover-effect-hover-classic-card)) drop-shadow(0 0 0 #DFECE0) brightness(var(--brightness-cover-effect-hover-classic-card));
}

/* Осветление и Яркость для GIF-карточки - при наведении */
/* Убираем эффект от классической карточки */

.folders-row a[href*="wpm-category/player-gif-card-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/player-gif-card-"]:hover .folder-front pattern image {
	/* эффекты */
	filter: none;
	-webkit-filter: none;
}