:root {
	--color_primary: rgb(27, 96, 101);			/*background-color: var(--color_primary); /* Цвет фона для элементов */
	--color_secondary: rgba(27, 96, 101, 0.5);	/*background-color: var(--color_secondary); /* Цвет фона для элементов */
	--color_tertiary: rgb(27, 96, 101, 0.75);		/*background-color: var(--color_tertiary); /* Цвет фона для элементов */
	--color_font: rgba(255, 255, 255);		/*color: var(--color_font);
}

	
	
	@font-face {/*подключаем нестандартые шрифты*/
		font-family: 'Montserrat';
		src: url('fonts/Montserrat-Light.ttf');
	}
/******** общие стили *********************************************************************************/
	body {
		margin: 0;
		overflow: hidden;/*отключить ползунок и прокрутку */
	}
	
	.clear{/* если нужно отделить блоки чистой строкой. Создается класс "clear" это будет пустая строка*/
		clear: both;
	}


	.bold{
		font-weight: bold;/* Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. */
	}
	.capital{
		text-transform: uppercase;/*Все буквы заглавные*/
	}
	
	a{
		font-size: 2.5vh;
		color: #d38480;
		text-decoration: none;
		-webkit-transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		/* -moz-animation: all 6s ease;ссылки будут менять свой цвет мягко, не быстро */
		-o-transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		-ms-transitin: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		transition: 1s all ease;
	}	
	a:hover{
		color: #e2cbca;
		-webkit-transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		/* -moz-animation: all.6s ease;ссылки будут менять свой цвет мягко, не быстро */
		-o-transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		-ms-transitin: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		transition: all.1s ease;/*ссылки будут менять свой цвет мягко, не быстро*/
		transition: 1s all ease;    
	}

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

	p{
		font-size: 2.5vh; 
		font-family: Montserrat, Arial, sans-serif;
		margin: 0;
	} 

	/* Стилизация ползунка */
	::-webkit-scrollbar {/*полоса*/
		width: 1vh;
		background: rgba(114, 114, 114, 0.5);
		border-radius: 1vh;
	}
	::-webkit-scrollbar-thumb {/*бегунок*/
		/* background: #FF5733; */
		background:rgb(126, 126, 126);
		border-radius:  1vh;
	}
	::-webkit-scrollbar-thumb:hover {/*бегунок*/
		/* background: #FF8C33; */
		background: #4b3b3b;
	}


	
	#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(16, 36, 92, 0.466); */
		background-color: var(--color_secondary); /* Цвет фона для элементов */
		text-align: center;
	}

	#header-logo a{/**Текст Малого Лого**/
		font-weight: normal; /* Убирает жирный текст */ 
		color: var(--color_font);
		font-size: 3.5vh; 
		font-family: Montserrat, Arial, sans-serif;
		text-transform: uppercase;/*Все буквы заглавные */
		text-decoration: none;
	}

	/*кнопка меню*/
	.changeColorButtons {
		position: fixed;/*фиксируем кнопку на месте*/
		top:  2.5vh;
		left: 90vw;
		z-index: 2001;	

		display: flex; /* Включаем Flexbox для контейнера */
		flex-wrap: wrap; /* Позволяем элементам переноситься на новую строку */
		align-items: center; /* Центрируем элементы по вертикали */
		text-align:left;
		justify-content: space-between; /* Распределяем пространство между элементами */

		width: 5vw;
		height: 5vh;
		margin: 0.1vw;
		transition: 1s;
	}
	.changeColorButtons button{
		font-size: 1.5vh;
		opacity: 0.5;
		flex: 1 1 0.5vw; /* Элементы будут гибкими: расти и сжиматься, минимальная ширина 0.5vw */
	}
	.changeColorButtons #changeFontButton{
		border-color: var(--color_font);
	}
		
		
	.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; */
		object-fit: cover;
		max-height:100vh;
		width: 100%;  
		padding: 0;
		text-align: center;
		background-color: rgb(255, 255, 255);
		transition: all 800ms ease;
	}
	.block.active {
		top: 0vh;
	}
/****************************************************************************************************************************************/
	
	/*************first ************/
	.block#first {/* у этой картинки обязательно должен быть назначен Класс*/
		/*position: relative; /* Устанавливает контекст позиционирования для дочерних элементов */
		position: absolute;		
	}
	.block#first #start{
		margin: 5vw;
		margin-top: 25vh;
		font-size: 5vh;			  
	}
	.block#first h2{
		font-size: 6vh; 
		/* margin-top: 35vh; */
		color: rgba(0, 0, 0, 0.75);    
	}
	.block#first p{
		font-size: 5vh;
		color: rgba(0, 0, 0, 0.75);  
	} 
	.block #big_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 #big_video video{
		width: 100%; height: auto;
	}  
	/* ************.......first ************/


	/* ************ВСЕ блоки block.content ************/
	.block.content {/* у этой картинки обязательно должен быть назначен Класс*/
		height: 95vh;/*т.к. padding-top: 5vh;*/
		display: flex; /* Включаем Flexbox для контейнера */
		flex-wrap: wrap; /* Позволяем элементам переноситься на новую строку */
		/*justify-content: space-between; /* Распределяем пространство между элементами */
		align-items: center; /* Центрируем элементы по вертикали */
		margin-bottom: 1vh;
		padding-top: 5vh;
		padding-bottom: 15vh;
		padding-left: 5vh;
		background-color: #fff;
		border-radius: 5px;		
		text-align:left;
		justify-content: space-between; /* Распределяем пространство между элементами */
		transition: 1s all ease;			
	}

	.block.content .item {/*для всех блоком в .block.content*/
		height: 50%; /* высота 25% от высоты экрана */
		cursor: pointer; /* курсор при наведении */	
		padding: 1vh;
		overflow: hidden;
		flex: 1 1 200px; /* Элементы будут гибкими: расти и сжиматься, минимальная ширина 5vh */
		text-align: center; /* Центрируем текст */
		flex: 1; /* Все элементы будут равномерно распределены */
		transition: 2s all ease;
	}
	
	.block.content h2{
		text-align: center;
	}
	.item p {
		margin: 0; /* Убираем отступы */
	}

	.block.content .item{
		background-color: var(--color_primary); /* Цвет фона для элементов */
		color:var(--color_font); /* Цвет текста */
		padding: 5vh;
		border-radius: 5vh; /* Скругляем углы */	
		margin-right: 5%;
		text-align: left;
	}
	.block.content #div_txt p,
	.block.content #div_txt h2{
		margin: 0;
	}

	
	.block.content h2{
		font-size: 3vh; 
		margin-top: 5vh;
		
	}



	/*****************Все img*******/	
	.block.content .item.img{
		/* центрируем видео */
		display: flex; /* Используем Flexbox для центрирования видео внутри блока */
		justify-content: center; /* Центрируем по горизонтали */
		align-items: center; /* Центрируем по вертикали */
		width: auto; /* Ширина видео будет автоматически подстраиваться */
		height: 100%; /* Высота видео будет равна высоте родительского блока */

		/* overflow: hidden; */
		height: 60%;
		background-color: rgba(104, 134, 180, 0.493); /* Цвет фона для элементов */
		padding: 0;
		text-align: center;
		/*border-radius: 0; /* Отменяем: Скругляем углы */	
		transition: 1s all ease; /* Выполнить Все (all) анимации*/  	
	}
	.block.content .item.img img{
		height: 100%;
		width: auto;
		object-fit: cover;		
		transition: 1s all ease; /* Выполнить Все (all) анимации*/       
	}
	.block.content .item.img img:hover{
		transform:scale(1.1);
		transition: 1s all ease; /* Выполнить Все (all) анимации*/    
	}
	/* *****...Все img*************** */




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

		/* overflow: hidden; */
		height: 60%;
		background-color: rgba(104, 134, 180, 0.493); /* Цвет фона для элементов */
		padding: 0;
		text-align: center;
		/*border-radius: 0; /* Отменяем: Скругляем углы */	
		transition: 1s all ease; /* Выполнить Все (all) анимации*/    
	} 
	.block.content .item.video video{
		height: 100%;
		width: auto;
		object-fit: cover;		
		transition: 1s all ease; /* Выполнить Все (all) анимации*/
	}
	.block.content .item.video video:hover{
		transform:scale(1.1);
		transition: 1s all ease; /* Выполнить Все (all) анимации*/    
	}
	/******** ...Все video ********/

	/* ************...ВСЕ блоки block.content ************/



	/* ******************card *******************/

	.block.content#card .item:nth-child(1) {/*Перый блок*/
		flex: 1; /* Первый элемент займет стандартное место */
	
	}	
	.block.content#card .item:nth-child(2) {/*Второй блок*/
		flex: 2.3; /* Второй элемент займет в три раза больше места */
	}
	/* ***************...card *******************/




	/* ******************content_1 *******************/

	.block.content#content_1 .item:nth-child(1) {/*Перый блок*/
		/*width: 100px; /* Ширина для первого элемента */
		flex: 1; /* Для видео нужно отключить. Первый элемент займет стандартное место */
		transition: 1s all ease;
	}	
	.block.content#content_1 .item:nth-child(2) {/*Второй блок*/
		flex: 1; /* Для видео нужно отключить. Второй элемент займет в три раза больше места */
	}
	.block.content#content_1 .item:nth-child(3) {/*Второй блок*/
		/*width: 150px; /* Ширина для второго элемента */
		flex: 1; /* Для видео нужно отключить. Второй элемент займет в три раза больше места */
	}
	/* ***************...content_1 *******************/

	/* ******************content_2 *******************/

	.block.content#content_2 .item:nth-child(1) {/*Перый блок*/
		/*width: 100px; /* Ширина для первого элемента */
		/*flex: 1; /* Для видео нужно отключить.  Первый элемент займет стандартное место */
		transition: 1s all ease;
	}	
	.block.content#content_2 .item:nth-child(2) {/*Второй блок*/
		/*width: 150px; /* Ширина для второго элемента */
		flex: 1; /* Для видео нужно отключить. Второй элемент займет в три раза больше места */
	}
	.block.content#content_2 .item:nth-child(3) {/*Второй блок*/
		/*width: 150px; /* Ширина для второго элемента */
		flex: 1; /* Для видео нужно отключить. Второй элемент займет в три раза больше места */
	}
	/* ***************...content_2 *******************/

	/* ******************content_3 *******************/

	.block.content#content_3 .item:nth-child(1) {/*Перый блок*/
		/*width: 100px; /* Ширина для первого элемента */
		flex: 1; /* Для фотографий нужно отключить. Первый элемент займет стандартное место */
		
	}	
	.block.content#content_3 .item:nth-child(2) {/*Второй блок*/
		/*flex: 1; /* Второй элемент займет в три раза больше места */
	}
	.block.content#content_3 .item:nth-child(3) {/*Второй блок*/
		/*width: 150px; /* Ширина для второго элемента */
		flex: 1; /* Второй элемент займет в три раза больше места */
	}

	/* ***************...content_3 *******************/



	/* ******************clients *******************/
	.block.content#clients .item:nth-child(1) {/*Второй блок*/
		/*flex: 1; /* Второй элемент займет в три раза больше места */
	}
	.block.content#clients .item:nth-child(2) {/*Второй блок*/
		/*width: 150px; /* Ширина для второго элемента */
		flex: 2; /* Второй элемент займет в три раза больше места */
	}

	/* ***************...clients *******************/


	/* ************futer *******************/
	.block.futer{
		color: var(--color_font);
		font-size: 3.5vh;
		justify-content: center;
		/* align-items: center; */
		font-family: Montserrat, Arial, sans-serif;
		/*background-color: var(--color_primary); /* Цвет фона для элементов */		
		background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--color_primary);/*background с затемнением цвета --color_primary на 20%*/
	}
	.block.futer h2{
		font-size: 2.8vh;
		font-weight: normal;		          
	}

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

	.block.futer.rights div{
		margin-left: 25%;
		margin-top: 10vh;
		width: 50%;           
	}


	.block.futer.rights p {
		color: var(--color_font);
		font-size: 2vh;
		justify-content: center;
		/* align-items: center; */
		/* background-color:rgb(0, 0, 0); */
		font-family: Montserrat, Arial, sans-serif;           
	}
	/* ************...futer *******************/


	/* ***************contact-info *******************/
	.block.futer.contact .contact-info{
		margin-top: 15vh;
	} 
	.block.futer.contact .contact-info {
		width: 100%;
		padding: 0vh 0vw 0vh 3vw;/*Сверху | Справа | Снизу | Слева	*/

		text-align: left;
	}
	.block.futer.contact .contact-info h2 {
		margin-top: 0;
	}
	.block.futer.contact .div_map {
		width: 100%;
		height: 35%;
		border: 0;
		/* margin-bottom: 1vh; */
	}
	.block.futer.contact .map {
		width: 60%;
		height: 100%;
		border: 0;
	}

	.block.futer.contact #rights{
		text-align: right;
		margin: 10vh; 
				  
	}

	/* ***************...contact-info *******************/

/*******************************************    MOBILE    *************************************************************/

	@media (max-width: 1000px) {
		.changeColorButtons {
			top: 0.6vh;
			left: 78vw;
			width: 20vw;
			height: 5vh;
		}
		
		#header-content {
			height: 6vh; /* Заполнение всего пространства хедера */
		}

		.block.content h2,
		.block.futer p,
		.block.futer h2 {
			font-size: 2vh;
			font-weight: normal;		          
		}

		

		.block.content{
			/*display: block;/**отключяем display: flex**/
			flex-direction: column;
			padding-left: 0;
		}
		#header-logo a{/**Текст Малого Лого**/
			font-size: 2.8vh; 
		}
		.block.content .item {
			margin: 1vh;
			padding: 2vh;
			border-radius: 2vh;
			flex: 1;
			/* margin-bottom:  8vh;*/
		}
		.block.content .item:last-child {/* ******************ВСЕ flex content *******************/
			margin-bottom: 10vh; /* Отступ снизу для каждого крайнего дочернего элемента в последнем контейнере */
		}
		
		.block.content .item:nth-child(1) {/*Перый блок ВСЕХ flex conten*/
			margin-top: 3vh;
		}	


		.block.content .item.img{/**все img**/
			/*display: flex; /* Используем Flexbox для центрирования видео внутри блока */
			/*justify-content: center; /* Центрируем по горизонтали */
			/*align-items: center; /* Центрируем по вертикали */
			/*width: auto; /* Ширина видео будет автоматически подстраиваться */
			/*height: 100%; /* Высота видео будет равна высоте родительского блока */

			width: 95%; /* Ширина видео будет автоматически подстраиваться */
			height: auto; /* Высота видео будет равна высоте родительского блока */
			/*flex: 0 1 auto; /* Блок будет по высоте изображения */
		}
		.block.content#card .item.img{/**размер главной фотографии**/
			width: 60%; /* Ширина видео будет автоматически подстраиваться */
		}
		.block.content .item.img img {
			width: 100%;/* Ограничиваем максимальную ширину видео */
			height: auto; /* Ограничиваем максимальную высоту видео */
		}

		.block.content .item.video{
			/*display: flex; /* Используем Flexbox для центрирования видео внутри блока */
			/*justify-content: center; /* Центрируем по горизонтали */
			/*align-items: center; /* Центрируем по вертикали */
			width: 95%; /* Ширина видео будет автоматически подстраиваться */
			height: auto; /* Высота видео будет равна высоте родительского блока */
			flex: 0 1 auto; /* Блок будет по высоте изображения */
		}


		.block.content .item.video video {
			width: 100%;/* Ограничиваем максимальную ширину видео */
			height: auto; /* Ограничиваем максимальную высоту видео */
		}



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

		.block.content #contact_title{
			margin: 5vw;
			margin-top: 20vh; 
			font-size: 2vh;			  
		}
		.block.content p{
			font-size: 2vh; 
		} 
		
		.block#first #start{
			margin: 5vw;
			margin-top: 20vh; 
			font-size: 3vh;			  
		}
		
		.block#first h2{
			margin: 5vw;
			font-size: 4vh;			  
		}
		.block#first p{
			font-size: 3vh; 
		}


		.block.futer.contact .contact-info {
			margin-top: 15vh;
		}

		.block.futer.contact .div_map {
			width: 100%;
			height: 30%;
			border: 0;
			/* margin-bottom: 1vh; */
		}
		.block.futer.contact .map {
			width: 80%;
			height: 100%;
			border: 0;
		}
		.block.futer.contact #rights {
			text-align: right;
			margin-right: 5vw;
		}
	

	}