@font-face {/*подключаем нестандартые шрифты*/
		font-family: 'Montserrat';
		src: url('fonts/Montserrat-Light.ttf');
	}

	.clear{/* если нужно отделить блоки чистой строкой. Создается класс "clear" это будет пустая строка*/
		clear: both;
	}

	body {
		margin: 0;
		overflow: hidden;
	}
	
	#header-content {
		z-index: 1000;
		width: 100%;
		position: absolute;
		height: 10vh; /* Заполнение всего пространства хедера */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
		background-color:rgba(0, 0, 0, 0.50);
		text-align: center;
	}

	#header-logo a{/**Текст Малого Лого**/
		font-weight: normal; /* Убирает жирный текст */ 
		color: rgb(255, 255, 255);
		font-size: 3.5vh; 
		font-family: Montserrat, Arial, sans-serif;
		text-transform: uppercase;/*Все буквы заглавные */
		text-decoration: none;
		}
		
		
	.block {
		/* background-image:url(image8.jpg);
		background-repeat: no-repeat;
		background-size: cover; */

		position: absolute;
		top: 100vh;
		margin-top: 0vh;
		/*left:100vw; /* 100% от ширины окна просмотра */
		height: 100vh;
		width: 100%;
		overflow: hidden;
		/* opacity: 0; */
		transition: all 800ms ease;
	}

	.block.active {
		top: 0vh;
		/* opacity: 1; */
		/*left:0;*/
	}
	
	.block {/* у этой картинки обязательно должен быть назначен Класс*/
		object-fit: cover;
		max-height:100vh;
		width: 100%;  
		padding: 0;
		text-align: center;
		background-color: rgb(255, 255, 255);
	} 

	.block#first {/* у этой картинки обязательно должен быть назначен Класс*/
		position: relative; /* Устанавливает контекст позиционирования для дочерних элементов */		
	}
	.block#first h2{
		font-size: 15vh; 
		margin-top: 25vh;
		color: rgba(0, 0, 0, 0.75);    
	}
	.block#first p{
		font-size: 8vh;
		color: rgba(0, 0, 0, 0.75);  
	} 
	.block #video{
		height: 100%;
		opacity: 0.3;
		position: absolute; /* Позволяет позиционировать элемент относительно родительского блока */
		top: 0; /* Положение в верхнем левом углу */
		left: 0; /* Положение в верхнем левом углу */
		width: 100%; /* Ширина дочернего блока равна ширине родительского блока */
		height: 100%; /* Высота дочернего блока равна высоте родительского блока */
		/* background-color: rgba(255, 0, 0, 0.5); Полупрозрачный красный фон для визуализации */
		
	} 
	.block #video video{
		width: 100%; height: auto;
	}  
 

	.block h2{
		margin-top: 15vh; 
		font-size: 3vh;
		text-transform: uppercase;/*Все буквы заглавные */ 
		font-family: Montserrat, Arial, sans-serif;        
	}      
	
	.block p{
		font-size: 2.5vh; 
		/* font-family: 'larisa-script_rus', Arial, sans-serif;         */
		font-family: Montserrat, Arial, sans-serif;
	}      
	

	#div_img{
		overflow: hidden;
		width: 70%;
		height: 70%; 
		margin-left: 15%;            
	}
	
	/*img главной статьи*/
	#div_img img{
		height: 100%;
		width: auto;
		object-fit: cover; 
		
		transition: 1s all ease; /* Выполнить Все (all) анимации*/       
	}

	#div_img img:hover{
		transform:scale(1.1);
		transition: 1s all ease; /* Выполнить Все (all) анимации*/    
	}

	#futer{
		color: rgb(250, 250, 250);
		font-size: 3.5vh;
		justify-content: center;
		/* align-items: center; */
		background-color:rgba(44, 44, 44);
		font-family: Montserrat, Arial, sans-serif;           
	}

	#futer h2{
		margin-top: 15%;
		font-weight: normal;/* Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. */
		color: rgb(250, 250, 250);
		font-size: 3vh;
		justify-content: center;
		/* align-items: center; */
		font-family: Montserrat, Arial, sans-serif;           
	}

	#futer div{
		margin-left: 38%;
		margin-top: 2%;
		width: 24%;           
	}


	#futer p{
		color: rgb(250, 250, 250);
		font-size: 2vh;
		justify-content: center;
		/* align-items: center; */
		/* background-color:rgb(0, 0, 0); */
		font-family: Montserrat, Arial, sans-serif;           
	}
	
/*******************************************    MOBILE    *************************************************************/

	@media (max-width: 1000px) {

		#header-content {
			height: 6vh; /* Заполнение всего пространства хедера */
		}
		
		#video {
			display: flex; /* Используем Flexbox для центрирования видео внутри блока */
			justify-content: center; /* Центрируем по горизонтали */
			align-items: center; /* Центрируем по вертикали */
			width: auto; /* Ширина видео будет автоматически подстраиваться */
			height: 100%; /* Высота видео будет равна высоте родительского блока */
		}
		
		.block #video video {
			width: auto; /* Ограничиваем максимальную ширину видео */
			height: 100%; /* Ограничиваем максимальную высоту видео */
		}		
		

		.block#first h2{
			margin-top: 20vh; 
			font-size: 12vh; 
			  
		}
		.block#first p{
			font-size: 5vh; 
		} 

		#futer h2{
			margin-top: 25vh;          
		} 
	
		#div_img{
			width: 100%; 
			margin-left: 0%;            
		}

		#div_img img{
		height: auto; 
		width: 100%;      
	}

		#futer div{
			margin-left: 10%;
			margin-top: 2%;
			width: 80%;           
		}

		#futer div #rights{
			margin-top: 30%;           
		}


	}