@charset "utf-8";

/* CSS Document */
/* Запрещает принт сайта */
        @media print {
 
            html,
            body {
 
                /* Hide the whole page */
                display: none;
            }
        }
		
*{	margin:0;
	padding:0;
	font-size:100%;
	/*Отключает копирование и выделение на сахте*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;}
	
html { 	/*color: #202020;*/
		font: 16px Tahoma, Arial, sans-Serif;/*sans-Serif - это семейство шрифтов*/
		user-select: none;  
		}
		
body {	
		margin:-20px auto;/**/
		}

.wrapper{
	display:block;
	background:url(../fon/fon-5-2.webp);/**/
	max-width:1500px;
	min-width:970px;
	word-break: break-all;/**/
	margin:auto;
	overflow:hidden;
	/*float:both;*/}
	
.header{
		word-break: break-all;
		/*width: 1700px;*/
		position:relative;
		top:55px;
		height: 100px;/**/
		}

.title{text-align: center;}
.yandex-count{position:absolute; left:-9999px;}
.liveint-count{width:88; height:120; border:0; }
#liveint{display: none;}/**/

#header{
		word-break: break-all;
		/*width: 1700px;*/
		height: 150px;
		background:url(../fon/header-2-1.webp); /* #5573B9;/**/
}

#white { /*background: #D7D1D1;/**/
		 padding: 40px 40px 20px; /*с верху и побокам 40 с низу 20 */ }  
		 /*Навигация*/
		 
/********====================================================++++++++++++++ССЫЛКИ+++++++++++++++++++++++++++++===================================*******/


 
			
/********====================================================++++++++++++++МЕНЬЮ++++++++++++++++++++++++++++++===================================*******/

			/*Горизонтальное ---» меню*/
			
#nav {/*margin-bottom:10px; /*Задается расстояние между менюшками*/}
		 
#nav ul { list-style:none; /*убираем маркеры*/
		 		  display:table; /*задаем display:table; , чтобы меню получила одинаковые размеры*/
				  width:100%; /*ширина таблицы на всю ширину родителя*/
				 /*задаем ячейкам одинаковую ширину*/
				  table-layout: fixed; /*свойство "fixed" говорит, если размер ячеек не задан, то ячейки становятся одинаковыми не зависимо от их содержимого*/ }
				
		/*оформляем горизонтальное меню*/

#nav li { display: table-cell;
				 text-align: center;
				 text-transform: uppercase; /*первые буквы пишутся заглавными*/ }
				 
#nav li a{ display:block;
				height:70px;
				margin-bottom:0;
				margin-top:0;
				background: #e7e7e7;
				line-height:70px; /*меню центрирует*/
				color:#202020;
				text-decoration:none; /*убираем подчеркивание*/
				transition: .6s all ease; /*меняем цвет фона плавно*/ }
				
#nav li a:hover { background: #A7A33D; /*Задаем другой цвет при наведении мышки*/
				 color: #fff; /*задает другой цвет букв в менью*/ }
			
		
/*nav li a#tut { background: #A7A33D; 
			`	 color: #fff;  } /*показывает на какой мы странице*/
			
			
			
/****************============================++++++++++++Вертикальное ---» меню++++++++++++++++++++++++==============================********/
ul { list-style:none; /*убираем маркеры*/
		 		  display:table; /*задаем display:table; , чтобы меню получила одинаковые размеры*/
				  width:100%; /*ширина таблицы на всю ширину родителя*/
				 /*задаем ячейкам одинаковую ширину*/
				  table-layout: fixed; /*свойство "fixed" говорит, если размер ячеек не задан, то ячейки становятся одинаковыми не зависимо от их содержимого*/ }

.vertical{ list-style:none; /*убираем маркеры*/
		 		  display:table; /*задаем display:table; , чтобы меню получила одинаковые размеры*/
				  width:100%; /*ширина таблицы на всю ширину родителя*/
				 /*задаем ячейкам одинаковую ширину*/
				  table-layout: fixed; /*свойство "fixed" говорит, если размер ячеек не задан, то ячейки становятся одинаковыми не зависимо от их содержимого*/ 
				  position:relative;
				  top:50px;
}				  
				  
/*****************============================++++++++++++оформляем Вертикальное меню++++++++++++++++++++++++==============================********/
li { display:table-row;
				 text-align: center;
				 text-transform: uppercase; /*первые буквы пишутся заглавными*/}
				 
li a{ display:block;
				height:35px;
				background: #e7e7e7;
				line-height:30px; /*меню центрирует*/
				color:#202020;
				text-decoration:none; /*убираем подчеркивание*/
				transition:all; /*меняем цвет фона плавно*/ 
				margin:1px;}

li a:hover { background: #A7A33D; /*Задаем другой цвет при наведении мышки*/
						 color: #fff; /*задает другой цвет букв в менью*/ }


/*************************************************************постраничная навигация***************************************************************************************/
.pagination ul { list-style:none; /*убираем маркеры*/
		 		  display:table; /*задаем display:table; , чтобы меню получила одинаковые размеры*/
				  width:100%; /*ширина таблицы на всю ширину родителя*/
				 /*задаем ячейкам одинаковую ширину*/
				
				 table-layout: fixed; /*свойство "fixed" говорит, если размер ячеек не задан, то ячейки становятся одинаковыми не зависимо от их содержимого*/ }
				
		/*оформляем горизонтальное меню*/

.pagination li { display: table-cell;
				 text-align: center;
				
				 text-transform: uppercase; /*первые буквы пишутся заглавными*/ }
				 
.pagination li a{ display:block;
				height:35px;
				background: #e7e7e7;
				line-height:30px; /*меню центрирует*/
				color:#202020;
				text-decoration:none; /*убираем подчеркивание*/
				transition:all; /*меняем цвет фона плавно*/ 
				margin:1px;
				/*margin-top:auto;/**/}
				
.pagination li a:hover { background: #A7A33D; /*Задаем другой цвет при наведении мышки*/
				 color: #fff; /*задает другой цвет букв в менью*/ }

/*div .pag {margin-top:100px;}*/

/****************************************************************************************************************************************/	

#pagination a.visited {
  background-color:#888888;
  color:#B7B7B7;
  /*border-radius: 2px solid #ddd;/**/
  
}

#pagination a:link {
  background-color: white;
  color: black;
  border: 2px solid #000000;
  padding: 5px 10px;
  text-align: center;
  position: relative;
  text-decoration: none;
  display: inline-block;
}

#pagination a:active {
  background-color:#D4D4D4;
  color: blue;
  border: 2px solid #ddd;
  position: relative;  /* относительное позиционирование */
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
 display: inline-block;
   top: -5px; /* смещение вверх на 1px */
 }
 
 #pagination a:hover {
  background-color:#D4D4D4;
  color: blue;
  border: 2px solid #ddd;
  position: relative;  /* относительное позиционирование */
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
 display: inline-block;
   top: -5px; /* смещение вверх на 1px */
 }
 
 #active {
  background-color:#37B05C;
  color: blue;
  border: 2px solid #000000;
  position: relative;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
 display: inline-block;
 }
 
 a{text-decoration: none;}
 
 
 /*#pagination a:hover:not(.active) {background-color: #ddd;}

div .pag {margin-top:100px;}*/
/*pre { align-content:center;}/**/

/*======================================== Горизаонтальная навигация precmet.xyz ===============================================*/

.horizontal ul { list-style:none; /*убираем маркеры*/
		 		  display:table; /*задаем display:table; , чтобы меню получила одинаковые размеры*/
				  width:100%; /*ширина таблицы на всю ширину родителя*/
				 /*задаем ячейкам одинаковую ширину*/
				
				 table-layout: fixed; /*свойство "fixed" говорит, если размер ячеек не задан, то ячейки становятся одинаковыми не зависимо от их содержимого*/ }
				
		/*оформляем горизонтальное меню*/

.horizontal li { display: table-cell;
				 text-align: center;
				
				 text-transform: uppercase; /*первые буквы пишутся заглавными*/ }
				 
.horizontal li a{ display:block;
				height:35px;
				/*background: #e7e7e7;
				line-height:30px; /*меню центрирует*/
				/*color:#202020;
				text-decoration:none; /*убираем подчеркивание*/
				transition:all; /*меняем цвет фона плавно*/ 
				margin:1px;
				/*margin-top:auto;/**/}
#pre{ 
		/*white-space:wrap;/**/
		word-break: break-word;
		font: 12px Tahoma, Arial, sans-Serif;/*sans-Serif - это семейство шрифтов*/
		font-size:15px;
		text-align:left;
        /*font-family:Tahoma, Arial, sans-Serif;/**/
        /*display: block;/**/
              }/**/

/*****************************************--СЫЛКИ--*************************************************************************************/
/*a { text-decoration: none; color: navy; }/*удаляет подчеркивание*/
/*a:hover { text-decoration: underline; }/*Возвращает подчеркивание при наведении*/
/****************************************************************************************************************************************/
#content{
		
		display: flex; /*Current browsers (IE11, Chrome, etc)*/
        flex-direction:row;
		word-break: break-all;
		}
		

		

		
#left{	order:1; 
		flex:0.6 ;
		word-break: break-all;
		width: 200px;
		height:auto;
		/*float: left; /*Первый шаг*/	}
		
#center{ order:2; 
		flex:2.8 ;
		overflow:hidden;
		text-align:center;
		/*float:both;*/}
 #gradient{ display:block; /*height:970px;/**/ 
				   overflow:hidden;/**/
				   clear:left;
				   word-break:keep-all;}
				   
				   #gradient > div { width:355px;
				   					 height:300px; /**/
									 float:left; /**/
									/*margin-left:1px;/**/
									/*margin-left:145px;/**/
									padding-top:4px;/**/
									padding-left:145px;/**/
									line-height:20px;/**/
									word-break: break-all;/**/
									
									text-align: center; /* Выравнивание по центру Картинки */
									color:#fff;}/*задаем отступы между колонками/**/
									
				  #align-page{text-align:center;}
									
	#copy{ 		font-size:14.0pt; 
				color:red; 
				text-align:center; 	
				padding-top:2%;/**/}
									
	h1{	font-size:12.0pt; 
		color:#0070C0; 
		text-align:center;}
		
	.h1{	font-size:12.0pt; 
		color:#0070C0; 
		text-align:center;}
		
	h2{ font-size:12.0pt; 
		color:red; 
		text-align:center;}
		
	.h{ font-size:14.0pt;
		display: block;
		color:#000000;
		text-align:center;}
		
	.h2{ font-size:12.0pt; 
		color:red; 
		text-align:center;}
		
	.h3{font-size:14.0pt; 
		color:#0070C0; 
		text-align:center;}
		
	h3{	font-size:10.0pt; 
		color:#0070C0; 
		text-align:center;}
		
	h4{	font-size:14.0pt; 
		color:#0070C0; 
		text-align:center;
		/*text-autospace:none;*/}
		
	h5{	font-size:14.0pt; 
		color:red; 
		text-align:center;}
	
	p { text-indent:36.0pt;
		margin-left:18px;
		font-size:14.0pt; 
		color:black; 
		text-align:left;
		}
		
	.p { text-indent:36.0pt;
		position:relative;
		left: 18%;
		font-size:14.0pt;
		color:black; 
		}
		
	.b-tab{
			font-size:12.0pt;
			color:red;}
			
	.bi-tab{font-size:12.0pt;
			color:#0070C0;}
			
	.bn-tab{font-size:12.0pt;
			color:#035805;}/*#00B050*/
			
	.bfa-tab{font-size:12.0pt;
			 color:#FF0066;}
			
	.bem-tab{font-size:12.0pt;
			 color:#941C7D;}
	
	.bfr-tab{font-size:12.0pt;
		 color:fuchsia;}
		 		 
	.bf-tab{font-size:11.0pt;
			color:#7030A0;}
			
	.gr-el{font-size:12.0pt;
			color:black;
			background:yellow;}
			
	.gr-bl{font-size:12.0pt;
		   color:black;
		   background:aqua;}
									
	#right { order:3; 
		flex:0.6 ;
		word-break: break-all;
		width: 200px;
		height: auto;
		}

div #footer{	
		word-break: break-all;
		/*width: 1700px;*/
		height: 100px;
		}	
#footer { 
		background:url(../fon/footer-2.webp);
		height: 90px;/**/
		}			
				  					
		/*footer { height:90px; background:#51CD33; }	*/
									
		/*--------------------------------media----------------------------------------------*/
		@media screen and (max-width:780px) { /*перед круглыми скобками обязательно должен быть пробел.
												в круглых скобках в конце точка с запятой не ставят*/
												.slider-wrapper{display:none;}
												#white{padding:10px;}
												nav ul{display:block;}
												nav li{display:list-item;/*значение по умолчанию*/
													   margin-bottom:5px;}
												#wrapper{width:auto;/*auto-значение по умолчанию. 
																		Т.е. Сбрасывается значение width:940px
																		(T.e. wrapper будет занимать всю ширину родителя)*/}
												header{height:auto;}
												header a{float:none;
														  display:block;
														  margin:auto;}
												form{float:none;
													  width:233px;
													  margin:auto;}
												#gradient{height:auto;/*растягиваться по значению*/}
												#gradient > div {float:none;/**/
																  margin-left:0;
																  width:auto;
																  padding:5px;}
												html{background-color:#202020;
													 background-image:none;}
											}
		
		/*---------------------------------------------------------------------------------------*/
		
		/*СЛАЙДЕР urok 2-4.mp4 timecode:3.37.48 + urok 2-3.mp4 timecode:1.23.47*/
		
		
		/*-------------background: darken(#999, 30%); fon temnee na %
					   background: lighten(#999, 30%); fon svetlee na %
					    urok 2-4.mp4 timecode:5.29.20-------------------*/
		/*----------------ADAPTIVNOST-------------------------*/
		
		/*rok 2-4.mp4 timecode:3.13.35 - flexBox*/
		/*rok 2-4.mp4 timecode:4.29.40 - media-telefon*/