@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); /* добавление шрифта */

a {color: white; /* Цвет ссылок */
   text-decoration: none; /* ссылки не подчёркиваются */ }
a.content {color: white; /* Цвет ссылок */ 
           text-decoration: none; /* ссылки не подчёркиваются */ }
a.content:visited {color: white; /* Цвет посещенных ссылок */ }
a.content:hover {color: white; /* Цвет ссылок при наведении на них курсора мыши */ }
 
 
body {
 display: flex;
 min-height: 100vh; /* минимальная высота - 100% высоты области просмотра */
 flex-direction: column; /* блоки располагаются вертикально */
 margin: 0; /* внешний отступ */
 color: #fff; /*Цвет текста на странице*/
 font-family: arial; /*Шрифт текста на странице*/
 background: #272727 url(./ico/BG5.jpg); /* Фоновый цвет и фоновый рисунок*/
 background-attachment: fixed; /* Фон страницы фиксируется */
 background-repeat: repeat-y; /* Изображение повторяется по вертикали */
 background-size: 100%; /*100 - изображение масштабируется по окну, cover - не масштабируется*/
}

.logo {
 font-family: Montserrat;
 font-weight: bold; /* жирный шрифт */
 font-size: 3em; /* размер шрифта 3 у.е. */
}

.big { /* большой шрифт */
  font-size: 1.4em;
}

/* --------------------- адаптивный блок --------------------- */
#main { 
  display: flex;
  flex: 1;
  flex-direction: column; /* блоки адаптируются вертикально */

}
#main > article { /* блок посередине */
  flex: 1;
}

#main > nav, 
#main > aside {
  padding: 7px; /*внутренний отступ этих блоков - не работает*/
  
}

#main > nav { /* блок слева */
  order: -1; /* порядок расположения блока */
  
}

@media screen and (min-width: 900px) { /* все устройства с размером экрана более 576 пикселей */
                                      #main { flex-direction: row; } /* блоки располагаются горизонтально */
                                      #main > nav, 
                                      #main > aside { flex: 0 0 20vw;
                                                      margin: 7px; } /*внешний отступ этих блоков по всем сторонам - не работает*/
                                                        
                                     }
/* --------------------- окна ------------------------ */
.window {
 position: relative; /*Положение устанавливается относительно его исходного места*/
 padding: 7px; /*внутренний отступ*/
 margin: 10px 10px 10px 10px; /*внешний отступ - верх право низ лево*/
 border: 1px solid rgba(255,255,255,0.6);
 background: rgba(0,255,0,0);
 border-radius: 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 box-shadow: 0 2px 1px #000, 0 0 1px #000, 0 0 1px #000; /*тень*/
 -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; /*тень*/
 -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; /*тень*/
 -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; /*тень*/
  text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5); /*тень*/
 font-size: 1em
}

.window span {
 display: block; /*Элемент показывается как блочный*/
 margin: 0 0 10px 0; /*внешний отступ - верх право низ лево*/
 font-size: 1em;
 
}

.window input {
 font-size: 1em; /*размер шрифта:текущий*/
 display: inline-block; /*элементы располагаются на одной строке последовательно*/
 margin: 20px 0 10px 0; /*внешний отступ - верх право низ лево*/
 border: 1px solid rgba(0,0,0,0.5); /*толщина границы*/
 padding: 4px 8px; /*внутренний отступ*/
 border-radius: 2px; /*закругление границы*/
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 background: rgba(255,255,255,0.75); /*фон*/
 width: 44%; /*ширина*/
 box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff /*тень*/
 -o-box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff /*тень*/
 -webkit-box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff /*тень*/
 -moz-box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff /*тень*/
}


.window input + input {
 margin-left: 12px;
}


.window .content {
 font-size: 1em; /*размер шрифта:текущий*/
 background: #fff;
 border: 1px solid #000; /*толщина границы*/
 border-radius: 2px; /*закругление границы*/
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 padding: 10px; /*внутренний отступ*/
 
 box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -o-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -webkit-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -moz-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 text-shadow: none; /*тень*/
}





/* ------------------ тест прокрутки -------------------------------- */
.window .scrolled {
 overflow-y: scroll;
 height: 100px;
 font-size: 1em; /*размер шрифта:текущий*/
 background: #fff;
 border: 1px solid #000; /*толщина границы*/
 border-radius: 2px; /*закругление границы*/
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 padding: 10px; /*внутренний отступ*/
 box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -o-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -webkit-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 -moz-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; /*тень*/
 text-shadow: none; /*тень*/
 
}





/* ------------------ Раскрывающееся меню -------------------------------- */
ol .tree
{
	padding: 0 0 0 30px; /*внутренний отступ Сверху | Справа | Снизу | Слева */
	width: 100%; /* Ширина */
	height: 100%; /* Высота */
}
	li /* строчки */
	{ 
		position: relative; /* Располагается относительно исходного места */
		margin-left: -15px; /* Отступ слева */
		list-style: none; /* Без маркировки */
	}
	li.file /* строчки файлов */
	{
		margin-left: -1px !important; /* Отступ слева */
	}
		li.file a /* Строчки с файлами - ссылки */
		{
			background: url(./ico/File32.png) 0 0 no-repeat; /* (Иконка файла) отступ слева-сверху , без повтора иконки*/
			color: #fff;
			padding-left: 41px; /* Отступ текста слева */
			text-decoration: none; /* Без подчёркивания ссылок */
			display: block; /* Элемент показывается как блочный */
			font-size: 1em; /* Размер текста */
			height: 2em;  /* Высота строчек */
		}
		li.file a[href *= '.pdf']	{ background: url(./ico/File32.png) 0 0 no-repeat; }
		li.file a[href *= '.html']	{ background: url(./ico/File32.png) 0 0 no-repeat; }
		li.file a[href $= '.css']	{ background: url(./ico/File32.png) 0 0 no-repeat; }
		li.file a[href $= '.js']		{ background: url(./ico/File32.png) 0 0 no-repeat; }
	li input
	{
		position: absolute;
		left: 0;
		margin-left: 0;
		opacity: 0;
		z-index: 2;
		cursor: pointer;
		height: 1em;
		width: 1em;
		top: 0;
	}
		li input + ol {
			margin: -0.938em 0 0 -44px; /* 15px */
			height: 1.2em; /* Высота строчек */
	}
		li input + ol > li { 
		  display: none;  /*скрыть подпапки, чтобы они не появлялись, когда родительская папка свернута */
		  margin-left: -14px !important; 
		  padding-left: 1px; 
		}
	li label { /* иконки по умолчанию */
		background: url(./ico/Folder32.png) 10px 0px no-repeat; /* (Иконка папки) отступ слева-сверху , без повтора иконки*/
		cursor: pointer; /* вид курсора - в виде руки */
		display: block;
		padding-left: 47px; /* Внутренний отступ слева */
		height: 2em; /* Высота иконки*/
	}

	li input:checked + ol { /* Раскрытое меню */
	
		margin: -1.25em 0 0 -44px; /* 20px */
		padding: 1.563em 0 0 80px;
		height: auto; /* Высота раскрытия всех строчек */
	}
		li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
		li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
		
/* ------------------------- подвал ----------------------- */
.footer  { margin: 7px; } /*внешний отступ - верх право низ лево*/ 

/* =========================
   ECO-STUDIO PLAYER
   ========================= */


/* =========================================================
   ECO-STUDIO PLAYER
   ========================================================= */

.eco-player {
    width: 100%;
    max-width: 700px;

    margin: 30px auto;
    padding: 20px;

    box-sizing: border-box;

    background: #111;
    color: #fff;

    border: 1px solid #333;
    border-radius: 10px;

    font-family: Arial, sans-serif;
}


/* =========================================================
   YOUTUBE PLAYER
   ========================================================= */

.eco-player__youtube {
    position: relative;

    width: 100%;
    max-width: 480px;

    height: 270px;

    margin: 0 auto 20px;

    background: #000;

    border: 1px solid #333;
    border-radius: 8px;

    overflow: hidden;

    box-sizing: border-box;
}


/* YouTube container */

.eco-player__youtube .youtube-player {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


/* YouTube iframe */

.eco-player__youtube iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    border: 0;
}


/* =========================================================
   INFORMATION
   ========================================================= */

.eco-player__info {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}


/* Cover */

.eco-player__cover {
    width: 100px !important;
    height: 100px !important;

    min-width: 100px !important;
    min-height: 100px !important;

    max-width: 100px !important;
    max-height: 100px !important;

    flex: 0 0 100px;

    overflow: hidden;

    background: #222;

    border-radius: 5px;
}


.eco-player__cover img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
}


/* Track text */

.eco-player__text {
    min-width: 0;
}


.track-artist {
    font-size: 12px;

    color: #999;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.track-title {
    font-size: 18px;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.eco-player .eco-player__progress {
    display: grid;

    grid-template-columns: 40px 1fr 40px;

    align-items: center;

    gap: 8px;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


.eco-player .eco-player__progress > span {
    display: block;

    width: 40px;

    margin: 0;
    padding: 0;

    font-size: 11px;

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;
}


.eco-player .eco-player__progress > input.progress {
    display: block;

    width: 100%;

    min-width: 0;

    max-width: none;

    height: 4px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.eco-player__controls {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 15px;
}


.eco-player button {
    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background: #222;

    color: #fff;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.eco-player button:hover {
    background: #444;
}


.eco-player button:active {
    transform: scale(0.95);
}


/* Main Play button */

.eco-player__play {
    width: 52px !important;
    height: 52px !important;

    background: #fff !important;

    color: #111 !important;

    font-size: 18px;
}


.eco-player__play:hover {
    background: #ddd !important;
}


/* =========================================================
   PLAYLIST
   ========================================================= */

.eco-player__playlist {
    margin-top: 20px;

    border-top: 1px solid #333;
}


.eco-player__track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 8px;

    border-bottom: 1px solid #222;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.eco-player__track:hover {
    background: #1c1c1c;
}


/* Track title */

.eco-player__track-title {
    font-size: 14px;

    color: #ddd;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* Track artist */

.eco-player__track-artist {
    flex-shrink: 0;

    font-size: 11px;

    color: #777;
}


/* =========================================================
   ACTIVE TRACK
   ========================================================= */

.eco-player__track.is-active {
    background: #220000;

    color: #ff0000;

    box-shadow:
        inset 4px 0 0 #ff0000;
}


.eco-player__track.is-active
.eco-player__track-title {
    color: #ff0000;

    text-shadow:
        0 0 8px rgba(255, 0, 0, 0.8);
}


.eco-player__track.is-active
.eco-player__track-artist {
    color: #ff0000;
}


/* =========================================================
   RANGE
   ========================================================= */

.eco-player input[type="range"] {
    accent-color: white;

    cursor: pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .eco-player {
        padding: 15px;
    }


    .eco-player__youtube {
        width: 100%;

        height: auto;

        aspect-ratio: 16 / 9;
    }


    .eco-player__info {
        gap: 12px;
    }


    .eco-player__cover {
        width: 80px !important;
        height: 80px !important;

        min-width: 80px !important;
        min-height: 80px !important;

        max-width: 80px !important;
        max-height: 80px !important;

        flex: 0 0 80px;
    }


    .track-title {
        font-size: 16px;
    }


    .eco-player__track {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

}


/* =========================================================
   ECO-STUDIO COLLAPSIBLE PLAYERS
   ========================================================= */

.eco-players {
    width: 100%;
    max-width: 700px;
    margin: 30px auto;
}


/* ---------------------------------------------------------
   Один блок
   --------------------------------------------------------- */

.eco-player-wrapper {
    margin-bottom: 8px;

    border: 1px solid #333;
    border-radius: 8px;

    background: #111;

    overflow: hidden;
}


/* ---------------------------------------------------------
   Верхняя строка
   --------------------------------------------------------- */

.eco-player-header {
    display: flex;

    align-items: center;

    width: 100%;

    min-height: 52px;

    padding: 0 15px;

    box-sizing: border-box;

    background: #151515;

    color: #fff;

    cursor: pointer;

    user-select: none;

    transition:
        background 0.15s ease;
}


.eco-player-header:hover {
    background: #202020;
}


/* Play icon */

.eco-player-header__icon {
    width: 30px;

    color: #aaa;

    font-size: 13px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


/* Название */

.eco-player-header__title {
    flex: 1;

    min-width: 0;

    font-family: Arial, sans-serif;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* Стрелка */

.eco-player-header__arrow {
    margin-left: 15px;

    color: #777;

    font-size: 20px;

    line-height: 1;
}


/* ---------------------------------------------------------
   Содержимое
   --------------------------------------------------------- */

.eco-player-content {

    display: none;

    padding: 15px;

    background: #111;

}


/* ---------------------------------------------------------
   Открытый блок
   --------------------------------------------------------- */

.eco-player-wrapper.is-open
.eco-player-content {

    display: block;

}


.eco-player-wrapper.is-open
.eco-player-header {

    background: #1c1c1c;

}


.eco-player-wrapper.is-open
.eco-player-header__icon {

    color: #fff;

    transform: rotate(90deg);

}


.eco-player-wrapper.is-open
.eco-player-header__arrow {

    color: #fff;

}


/* ---------------------------------------------------------
   Убираем двойные внешние отступы
   --------------------------------------------------------- */

.eco-player-content .eco-player {

    margin: 0;

    max-width: none;

    padding: 5px 0;

    border: 0;

    border-radius: 0;

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 600px) {

    .eco-players {
        width: 100%;
    }


    .eco-player-header {
        min-height: 48px;

        padding: 0 12px;
    }


    .eco-player-header__title {
        font-size: 13px;
    }


    .eco-player-content {
        padding: 10px;
    }

}