/* -------------------------- */
/* КАРТОЧКА В ВИДЕ УРОКА ЮТУБ */
/* -------------------------- */

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

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

*/

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

:root {
	
	/* 1. Закругление верхней части карточки */
	--radius-top-player-card: 25px;

	/* 2. Закругление нижней части карточки */
	--radius-bottom-player-card: 25px;

	/* 3. Цвет текста в индикаторах - Комментарии, Просмотры, Проценты */
	--color-indikator-player-card: #000000;

	/* 4. Цвет фона индикаторов - Комментарии, Просмотры, Проценты */
	--color-bg-indikator-player-card: #ffffff;
	
	/* 5. Фон иконки PLAY */
	--color-bg-play-icon-player-card: #f44848;
	
	/* 6. Фон стрелки внутри иконки PLAY */
	--color-bg-arrow-icon-player-card: #ffffff;
	
	/* 7. Фон иконки PLAY при наведении */
	--color-bg-play-hover-icon-player-card: #7344B4;
	
	/* 8. Фон стрелки внутри иконки PLAY при наведении */
	--color-bg-arrow-hover-icon-player-card: #ffffff;

	/* Для Дизайна 2 - ПОЛЗУЩИЙ ПРОГРЕСС */
	
		/* 9. Цвет фона ползущего прогресса */
		--color-bg-animated-progress-player-card: #ffffff;
	
		/* 10. Цвет текста ползущего прогресса */
		--color-animated-progress-player-card: #000000;
	
	/* Для Дизайна 3 - НЕПОДВИЖНЫЙ ПРОГРЕСС */
	
		/* 11. Цвет фона неподвижного прогресса */
		--color-bg-static-progress-player-card: #ffffff;
		
		/* 12. Цвет текста неподвижного прогресса */
		--color-static-progress-player-card: #000000;

	/* 13. Цвет иконки в описании */
	--color-icon-player-card: #e73636;

}

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

.folders-row .col-lg-3 > a[href*="wpm-category/player-"][class*="folder-wrap"]:hover {
	/* filter: none; */
}

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

a[href*="wpm-category/player-"][class*="folder-wrap"]:before {
	
	/* display: none; */
}

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

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

/* 3. Раскомментировать, чтобы скрыть ШАРИК на таймлайне */
/* Для Ютуб 3 */

a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before {
	/* display: none!important; */
}

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

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

/* 5. Раскомментировать, чтобы запретить анимацию ТАЙМЛАЙНА при наведении на GIF-карточку */
/* Для GIF Ютуб */

a[href*="wpm-category/player-gif-card-"]:hover > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar {
	/* animation-iteration-count: 0!important; */
}

/* 6. Раскомментировать, чтобы скрыть СТАТУС в карточке GIF Ютуб */

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after {
	/* 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;
}

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

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-gif-card-"][class*="folder-wrap"]:before {
	position: absolute;
	z-index: 3;
	content: "\f04b";
	font-family: 'icomoon';
    font-size: 45px;
	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 и стрелка при наведении на карточку */

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:hover:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:hover:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:hover:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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) {

a[href*="wpm-category/player-1-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-2-card-"][class*="folder-wrap"]:before,
a[href*="wpm-category/player-3-card-"][class*="folder-wrap"]:before,
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. СТИКЕР НА КАРТОЧКЕ */

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

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

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

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

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

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

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

a[href*="wpm-category/player-gif-card-"] .label {
	top: calc(50px + var(--radius-top-player-card)/6);
    right: calc(10px + var(--radius-top-player-card)/3);
}

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

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

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

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

 {
	border-radius: var(--radius-top-player-card) var(--radius-top-player-card) 0 0;
	/* Убираем обрезку обложки */
	clip-path: none;
}

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

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

a[href*="wpm-category/player-1-card-"] > .folder-content .title,
a[href*="wpm-category/player-2-card-"] > .folder-content .title,
a[href*="wpm-category/player-3-card-"] > .folder-content .title,
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;
}

/* ИКОНКА в описании */

.folders-row .col-xs-12 > a[href*="wpm-category/player-"] > .folder-content .title:before {
    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 Ютуб */

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

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

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

@media (min-width: 1400px) {
	
a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .status,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .status,
a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .status { 
	bottom: calc(196px - var(--radius-top-player-card)/6);
    right: calc(5px + var(--radius-top-player-card)/3);
}
.row-key-categories a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .status,
.row-key-categories a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .status,
.row-key-categories a[href*="wpm-category/player-gif-card-"] .folder-content .bottom-icons .status { 
	bottom: calc(196px - var(--radius-top-player-card)/6);
    right: calc(5px + var(--radius-top-player-card)/3);
}
}

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

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

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

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

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

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

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

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

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

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

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

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .comments,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .comments,
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 Ютуб */

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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) {

a[href*="wpm-category/player-2-card-"] .folder-content .bottom-icons .views,
a[href*="wpm-category/player-3-card-"] .folder-content .bottom-icons .views,
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 Ютуб */

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

a[href*="wpm-category/player-2-card-"] > .folder-content .course-progress-wrap .progress-count,
a[href*="wpm-category/player-3-card-"] > .folder-content .course-progress-wrap .progress-count,
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 Ютуб */

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

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

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

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

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

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

/* СТАТУС */

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

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

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

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;
}

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

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;
}

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

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

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

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

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;
}

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;
}

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

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;
}

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

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;
}

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

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

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

a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar[style="width: 100%"] {
    background: #65BF49;
}

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

	content: 'урок пройден';
    color: #fff;
}

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

	content: '\f00c';  /* галочка */
    color: #fff;
}

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

a[href*="wpm-category/player-1-card-"] > .folder-content > .bottom-icons .course-progress-wrap .progress .progress-bar {
    background: #ff0040;
}

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

	content: 'пройдите урок';
    color: #fff;
}

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

	content: '\f06a';   /* круглый восклицательный знак */
    color: #fff;
}

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

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

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

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

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

a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
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 */

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

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

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) {

a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-2-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
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) {

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

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

/* Ширина ТАЙЛАЙНА на разных экранах */
/* Для Ютуб 2 */

@media (max-width: 1399px) {

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

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

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) {

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

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

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

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

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

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

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

@media (max-width: 767px) {

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

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

a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-3-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
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: #ffffff !important;    
	border: 3px solid #f35347;
	border-radius: 50%;
	content: "";
}

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

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

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

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

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

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
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: #ffffff !important;    
	border: 3px solid #f35347;
	border-radius: 50%;
	content: "";
}

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

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:before,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:before,
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; */
}

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

a[href*="wpm-category/player-gif-card-"]:hover .folder-sub-front pattern image,
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;
}

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

a[href*="wpm-category/player-gif-card-"] .folder-sub-front pattern image,
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;
}

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

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;
}

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

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

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

/* ---------------------- */
/* ДОБАВЛЯЕМ СТАТУС УРОКА */
/* Для GIF Ютуб */

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

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

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

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock[style="width: 100%"]::after,

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after

{
	font-family: "PT Sans", sans-serif, 'icomoon';
	position: relative;
    font-size: 17px;
	display: block;
    width: fit-content;
	padding: 5px 10px;
	border-radius: 10px;
	text-transform: none;	
}

/* Добавляем ТЕКСТ и ИКОНКУ к ЗАПОЛНЕННОЙ на 100% шкале  */

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

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

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock[style="width: 100%"]::after

{ 
	content: '\f00c  урок пройден';
	color: #fff;
	background: #56bf50;   
}

/* Добавляем ТЕКСТ и ИКОНКУ к НЕЗАПОЛНЕННОЙ шкале */

a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after

{
	content: '\f06a  пройдите урок';
	color: #fff;
	background: #ff0040;
}
	
/* Положение СТАТУСА для НЕЗАПОЛНЕННОЙ шкалы на разных экранах на Страницах и в Активации */

@media (min-width: 1400px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after 

	{
    bottom: calc(230px - var(--radius-top-player-card)/6);
    left: calc(217px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after	

	{
	bottom: calc(230px - var(--radius-top-player-card)/6);
    left: calc(217px - var(--radius-top-player-card)/3);
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after 

	{
	bottom: calc(193px - var(--radius-top-player-card)/6);
    left: calc(147px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after	

	{
	bottom: calc(193px - var(--radius-top-player-card)/6);
    left: calc(147px - var(--radius-top-player-card)/3);
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after  

	{
	bottom: calc(157px - var(--radius-top-player-card)/6);
    left: calc(82px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after	

	{
	bottom: calc(157px - var(--radius-top-player-card)/6);
    left: calc(82px - var(--radius-top-player-card)/3);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after 

	{
    bottom: calc(186px - var(--radius-top-player-card)/6);
    left: calc(134px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after	

	{
    bottom: calc(186px - var(--radius-top-player-card)/6);
    left: calc(134px - var(--radius-top-player-card)/3);
	}
}

@media (min-width: 460px) and (max-width: 767px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after 

	{
    bottom: calc(181px - var(--radius-top-player-card)/6);
    left: calc(130px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after

	{
    bottom: calc(181px - var(--radius-top-player-card)/6);
    left: calc(130px - var(--radius-top-player-card)/3);
	}
}

@media (min-width: 320px) and (max-width: 459px) {
	
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,
a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after 

	{
    bottom: calc(194px - var(--radius-top-player-card)/6);
    left: calc(149px - var(--radius-top-player-card)/3);
	}
	
.row-key-categories a[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-unlock-alt:after,

.row-key-categoriesa[href*="wpm-category/player-gif-card-"] .course-progress-wrap .progress .progress-bar.progress-bar-lock:after	

	{
	bottom: calc(194px - var(--radius-top-player-card)/6);
    left: calc(149px - var(--radius-top-player-card)/3);
	}
}

/* ------------------------------------- */
/* 11. Анимация ОБЛОЖКИ при наведении    */
/* Для Ютуб 1, Ютуб 2, Ютуб 3 и GIF Ютуб */

/* Убираем цветокоррекцию при наведении */

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

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

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

a[href*="wpm-category/player-gif-card-"]:hover .folder-sub-front pattern image,
a[href*="wpm-category/player-gif-card-"]:hover .folder-front pattern image {
	filter: none;
}