/* ЛОГОТИП */
.logo {
    max-width: 150%;
    height: 300px;
}

/* Скрыть все логотипы кроме основного на мобильных устройствах */
@media (max-width: 768px) {
    .logo {
        display: none; /* По умолчанию скрыть все логотипы */
    }

    .logo-main {
        display: block; /* Показать только основной логотип */
        width: 100%; /* Логотип будет растягиваться по ширине экрана */
		height: 150px;
        margin: 0 auto; /* Центрирование логотипа */
    }
}


/* МЕНЮ */
.menu {
    width: 20%;
    background-color: #444444;
    padding: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Закругленные углы */
    color: #ffffff;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    margin-bottom: 15px;
}

.menu a {
    text-decoration: none;
    color: #ffffff; /* Цвет текста */
    font-size: 16px;
    display: block;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.menu a:hover {
    background-color: #555555;
}

.menu a.active {
    font-weight: bold;
    background-color: #fade8f; /* цвет для активной ссылки */
    color: #472121;
}














body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif; /* Новый шрифт */
    display: flex;
    flex-direction: column;
    background-color: #333333; /* Фон сайта */
    color: #ffffff; /* Основной цвет текста */
}

header {
    background-color: #444444;
    text-align: center;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Закругленные углы */
	margin: 20px;
	margin-bottom: 0; /* Убираем отступ снизу */
	padding: 20px;
}



.container {
    display: flex;
    flex: 1;
    margin: 20px;
    gap: 20px; /* Промежутки между блоками */
}



main {
    flex: 1;
    padding: 20px;
    background-color: #555555;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

main video {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Закругленные углы для видео */
}

.game-of-thrones-img {
    display: block !important;
    margin: 0 auto !important;
    border-radius: 15px !important;
    width: 100% !important;
    max-width: 1000px !important;
    border: 2px solid #ccc !important;
}



/* Нижние 3 блока на главной */
        .horizontal-blocks {
            display: flex;
            justify-content: space-between; /* Разделить блоки равномерно */
            gap: 20px; /* Расстояние между блоками */
            margin: 20px 0; /* Отступ сверху и снизу */
        }
.horizontal-blocks .block {
    background-color: #444444; /* Соответствует фону сайта */
    flex: 1; /* Равномерное распределение ширины блоков */
    padding: 15px; /* Внутренний отступ для содержимого */
    border: 1px solid #555555; /* Более тёмная рамка для гармонии */
    border-radius: 8px; /* Закруглённые углы */
    text-align: left; /* Прижать текст влево */
    color: #ffffff; /* Цвет текста соответствует теме */
}

.horizontal-blocks .block p {
    margin-left: 10px; /* Добавить отступ текста слева */
}

@media (max-width: 768px) {
    .horizontal-blocks .block:last-child {
        display: none;
    }
}







.playlist {
    width: 20%;
    background-color: #444444;
    padding: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Закругленные углы */
    color: #ffffff;
}

.playlist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.playlist li {
    margin-bottom: 15px;
}

.playlist a {
    text-decoration: none;
    color: #ffffff; /* Цвет текста */
    font-size: 16px;
    display: block;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.playlist a:hover {
    background-color: #555555;
}

.playlist a.active {
    font-weight: bold;
    background-color: #fade8f; /* Синий цвет для активной ссылки */
    color: #472121;
}







/* Стили для карточки актера */
.actor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 50px;
    gap: 5px;
}

.actor img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.actor p {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
}

/* Контейнер для актеров */
.actors-container {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
    gap: 20px; /* Пространство между элементами */
    justify-content: space-between; /* Равномерное распределение */
    margin: 0 auto; /* Центрируем контейнер */
}

/* Индивидуальные актеры */
.actor {
    width: calc(20% - 20px); /* Каждому актеру даем 20% ширины, минус промежуток */
    box-sizing: border-box; /* Чтобы ширина учитывала паддинги и границы */
}















/* Стили для мобильных устройств */
@media (max-width: 768px) { /* Условие для экранов шириной 768px и меньше */
    .game-of-thrones-img {
        max-width: 90%; /* Уменьшение ширины изображения */
        border: 1px solid #ccc; /* Тонкая рамка */
    }
}

@media (max-width: 480px) { /* Условие для экранов шириной 480px и меньше */
    .game-of-thrones-img {
        max-width: 100%; /* Изображение занимает всю ширину контейнера */
        border: none; /* Убрать рамку для упрощения */
        border-radius: 10px; /* Уменьшение радиуса углов */
    }
}


/* Видео */
#video-container {
    position: relative;
    width: 100%; /* Сделаем ширину контейнера 100% от родителя */
    height: 0; /* Убираем фиксированную высоту */
    padding-bottom: 56.25%; /* Соотношение сторон 16:9 для видео */
    background-color: black; /* Фон контейнера */
	border-radius: 15px; /* Закругленные углы, можно изменить на любой другой размер */
   /* overflow: hidden;*/
}

#video-container2 {
    position: relative;
    width: 100%; /* Сделаем ширину контейнера 100% от родителя */
    height: 0; /* Убираем фиксированную высоту */
    padding-bottom: 56.25%; /* Соотношение сторон 16:9 для видео */
    background-color: black; /* Фон контейнера */
   /* overflow: hidden;*/
}

#my-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Устанавливаем фоновое изображение на всю область */
	border-radius: 15px; /* Закругленные углы, можно изменить на любой другой размер */
}


.vjs-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	border-radius: 15px; /* Закругленные углы, можно изменить на любой другой размер */
	border: 2px solid #ccc !important;
}



.control-bar {
    position: absolute; /* Фиксация элементов управления */
    top: 10px; /* Размещение в верхней части */
    left: 10px; /* Смещение влево */
    transform: none; /* Убираем центрирование */
    z-index: 10; /* Поверх плеера */
   
    padding: 10px;
    border-radius: 5px;
    display: flex;
    gap: 10px;
}

.control-bar select {
    z-index: 20; /* Увеличение приоритетности выбора */
    padding: 2px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: white;
}

.control-bar2 {
    position: absolute; /* Фиксация элементов управления */
    /*top: 10px; /* Размещение в верхней части */
    left: 100px; /* Смещение влево */
    transform: none; /* Убираем центрирование */
    z-index: 10; /* Поверх плеера */
   
    padding: 10px;
    border-radius: 5px;
    display: flex;
    gap: 10px;
}

.control-bar2 select {
    z-index: 20; /* Увеличение приоритетности выбора */
    padding: 2px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: white;
}

.vjs-big-play-button {
    position: absolute !important;
    top: 50% !important;
    left: 55% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20; /* Убедитесь, что кнопка выше остальных элементов */
    width: 3em; /* Настройка размера, если требуется */
    height: 3em;
    line-height: 3em;
    border-radius: 50%; /* Круглая кнопка */
}

select {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: black;
    padding: 5px;
    border-radius: 5px;
}

option {
    color: black;
}

/* Полностью скрываем кнопки выбора аудиодорожек и субтитров в Video.js */
.vjs-control.vjs-audio-button,
.vjs-subs-caps-button {
    display: none !important;
}

/* Кнопка PLAY для HLS.js */
/* Видео */
#video {
    width: 100%; /* Ширина видео плеера 100% */
    height: auto; /* Высота будет зависеть от соотношения сторон */
    
    /* Устанавливаем стили, которые будут применяться к постеру */
    object-fit: cover; /* Растягиваем изображение постера, чтобы оно полностью заполнило контейнер */
    background-color: black; /* Можно добавить фоновый цвет, если видео еще не загружено */
    background-position: center center; /* Центрируем постер */
    background-size: cover; /* Убедитесь, что постер не искажается, если он меньше размера видео */
    border-radius: 15px; /* Закругление углов, если хотите стилизовать */
}

/* Элементы управления видео */
#video[controls] {
    visibility: visible;
}

/* Кнопка Play */
.hls-big-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 1.5em;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hls-big-play-button::after {
    content: '▶'; /* Символ Play */
    font-size: 1.5em;
    color: white;
}

/* Скрытие кнопки после воспроизведения */
.hls-big-play-button.hidden {
    display: none;
}











footer {
    background-color: #444444;
    text-align: center;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Закругленные углы */
	margin: 20px;
	margin-top: 0; /* Убираем отступ снизу */
	padding: 20px;
	margin-bottom: 20;
}





footer p {
    margin: 0; /* Убираем отступы */
    font-size: 14px; /* Размер текста в футере */
}

footer a {
    text-decoration: none;
    color: #fade8f; /* Синий цвет для ссылок */
    transition: color 0.3s ease;
}

footer a:hover {
    color: #0056b3; /* Темно-синий цвет при наведении */
}

@media (max-width: 768px) {
    footer {
        padding: 15px; /* Меньше отступов на мобильных устройствах */
    }

    footer p {
        font-size: 12px; /* Уменьшаем шрифт на маленьких экранах */
    }
}

/* ФЛАГИ */
/* Контейнер для кнопок */
.lang-btn-container {
    display: flex; /* Расположение элементов в строку */
    gap: 10px; /* Расстояние между кнопками */
    position: absolute; /* Чтобы контейнер можно было расположить */
    top: 30px; /* Расстояние от верхнего края родителя */
    left: 30px; /* Расстояние от левого края родителя */
}
/* Кнопки */
.lang-btn {
    /*position: absolute; /* Абсолютное позиционирование для размещения в углу */
    width: 30px; /* Ширина кнопки */
    height: 30px; /* Высота кнопки */
    border: 2px solid #696969; /* Белый бордер */
    border-radius: 50%; /* Круглая форма */
    background-color: transparent; /* Прозрачный фон */
    padding: 0; /* Убираем стандартные отступы внутри кнопки */
    cursor: pointer; /* Курсор "рука" при наведении */
    display: flex; /* Центрируем содержимое кнопки */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Скрываем лишнее содержимое */
    transition: transform 0.3s; /* Анимация при наведении */
}

/* Изображение внутри кнопки */
.lang-btn img {
    width: 100%; /* Масштабируем изображение по ширине кнопки */
    height: 100%; /* Масштабируем изображение по высоте кнопки */
    object-fit: cover; /* Сохраняем пропорции */
    border-radius: 50%; /* Обеспечиваем круглую форму у изображения */
}

/* Эффект при наведении */
.lang-btn:hover {
    transform: scale(1.1); /* Увеличиваем кнопку */
    border-color: yellow; /* Изменяем цвет бордера */
}

/* Скрыть все рекламные блоки по умолчанию */
.ad-desktop, .ad-mobile {
    display: none;
}

/* Показать десктопный блок только на экранах от 769px */
@media (min-width: 769px) {
    .ad-desktop {
        display: block;
    }
}

/* Показать мобильный блок только на экранах до 768px */
@media (max-width: 768px) {
    .ad-mobile {
        display: block;
    }
}




@media (max-width: 768px) {

    /* Контейнер для меню и плейлиста, которые должны идти рядом */
    .menu, .playlist {
        width: 33%; /* Даем им ширину, чтобы они располагались рядом */
    }

    .menu {
        order: 1; /* Порядок отображения: меню вверху */
    }

    .playlist {
        order: 2; /* Порядок отображения: плейлист рядом с меню */
    }

    /* Добавляем flex для контейнера, чтобы блоки могли размещаться горизонтально */
    .container {
        display: flex;
        flex-wrap: wrap; /* Элементы могут переходить на новую строку */
        gap: 10px; /* Промежуток между блоками */
    }

    /* Основной контент снизу */
    main {
        width: 100%; /* Основной контент заполняет всю ширину */
        order: 3; /* Порядок отображения: основной контент снизу */
    }

    /* Уменьшаем шрифт в меню и плейлисте */
    .menu, .playlist {
        font-size: 6px !important; /* Принудительное применение правила */
    }

    /* Устанавливаем отступы между пунктами меню и плейлиста */
    .menu ul, .playlist ul {
        padding: 0; /* Убираем внутренние отступы списка */
        list-style-type: none; /* Убираем маркеры списка, если они есть */
    }

    .menu ul li, .playlist ul li {
        margin-bottom: 5px; /* Добавляем отступ между пунктами */
		 font-size: 6px !important; /* Принудительное применение правила */
    }
}


/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
    h1 {
        font-size: 16px; /* Размер шрифта для мобильных устройств */
    }
	h2 {
        font-size: 16px; /* Размер шрифта для мобильных устройств */
    }
    h3 {
        font-size: 16px; /* Размер шрифта для мобильных устройств */
    }
	p {
        font-size: 14px; /* Размер шрифта для мобильных устройств */
    }
}