* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, sans-serif; /*  шрифты */
}

header {
  display: flex;
  flex-direction: row; /* встановлює напрямок головної осі батьківського контейнера  */
  justify-content: space-between; /* вирівнює елементи гнучкого контейнера, коли елементи не використовують ввесь доступний простір на головній осі контейнера (по горизонталі).  */
  flex-wrap: wrap;/* визначає, чи повинні гнучкі елементи переноситися чи ні  */
  background-color: #899CCC; /*  цвет фона */
  padding: 5px 10px;  /* растояние мжду текстом и краями контейнера (по часовой стрелке) */
  position:fixed;
  width: 100%; /*  ширина */
	z-index: 6;
}

.wrap-logo {
  display: flex;
  align-items: center; /* размещение по центру */
  padding-right: 10px;
}


font a {text-decoration: none;
	color: white; /* цвет текста  */
	font-family: FontAwesome; /*  шрифт  */
}
font a:hover { /* изменения при нажатие  */
	color: #1E1E1E; 
}

nav {
	display: flex;
	align-items: center;
	text-decoration: none;
} 
 \\
* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto; 
}
input, button {
  border: none; 
  outline: none;
  border-radius: 3px;   /* ширина обводки  */
}
input {
  width: 100%;/* ширина */
  height: 42px;/* висота  */
  background: #FFFFF; /* цвет фона */
  padding-left: 15px; /* Отступ текста от левого края контейнера */
}
button {
  height: 30px;   /* высота  */
  width:30px;   /* Ширина */
  position: absolute;  
  top: 6px;   /* Растояние сверху */
  right: 8px;   /* Растояние слева  */
  background: #e4e4e4; /* цвет фона */
  cursor: pointer; /* встановлює вигляд курсора, коли він знаходиться в межах елемента. */
}
button:before { /* Изменения */
	font-family: FontAwesome;
	color: #696868;   /* Цвет текста  */
	font-size: 20px;   /* Размер текста  */
	font-weight: bold;   /* жирный текст */
}
/* The sidebar menu */

.sidenav {
    height: 610px; /* Full-height: remove this if you want "auto" height */
    width: 350px; /* Set the width of the sidebar */
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 200px; 
	padding:5px;
    padding-top:20px;
    background-color:#e4e4e4;   /* цвет фона  */
    margin-top: 90px;  /* Растояние между объектом и контейнером размещенного сверху  */
    position:fixed;   /* позиция элемента  */
    clear: both;
	overflow: auto;
	float: left;
	 z-index: 6;  /* Слои  */
	overflow: scroll; /* Добавляем полосы прокрутки */
}

/* The navigation menu links */
.sidenav a {
    padding: 10px 8px 6px 16px;
    text-decoration: none; /* Декорация гиперссылки */
    font-size: 25px; /* Размер текста */
    color: #899CCC; /* цвет текста */
	border: 2px; /* Ширина обводки */
    display: block; /* тип отображения-блоки */
}
.sidenav p {
    padding: 1px 0px 0px 16px; /* Растояние текста от краёв контейнера (по часовой стрелке) */
    text-decoration: none;
    font-size: 25px;
    color: #899CCC; /* цвет текста*/
	border: 2px;
    display: block;
}
.sidenav a:hover { /* Изменение цвета */
    color: #1E1E1E;
}

.sidenav ul {
	margin:2px; /* растояние контейнера от других ближайши контейнеров */
}
.sidenav1 {position: absolute;
  height: 30px; /* Full-height: remove this if you want "auto" height */
    width: 350px;
	vertical-align:top;
  background-color: #D8D9DD;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  text-align:center;}
  
.sidenal_text {
	top: 1;
	padding-top:200px;
	vertical-align:center;
}
.sidenav2 {
    height: 715px; /* Full-height: remove this if you want "auto" height */
    width: 350px; /* Set the width of the sidebar */
    background-color: #111; /* Black */
	position: relative;
    padding-top: 200px; 
	padding:5px;
    padding-top:20px;
    background-color:#9BAFDF;   /* цвет фона  */
    margin-top: 90px;  /* Растояние между объектом и контейнером размещенного сверху  */
    clear: both;
	overflow: auto;
	float: left;
	z-index: 1;
} 
.sidenav2 p {
    padding: 5px 0px 0px 28px; /* Растояние текста от краёв контейнера (по часовой стрелке) */
    text-decoration: none;
    font-size: 25px;
    color: #899CCC; /* цвет текста*/
	border: 2px;
	display: block;
}

#tema {
    color: #1E1E1E;
	font-size: 15px;
}
#tema:hover {
    color: #EE4747;
}
.dilo1 {float: right;
	display: block;
	margin: 3px;
	font-size: 18px;
	background-color: #FAFAFA;
	margin-top: 100px;
	overflow: scroll; /* Добавляем полосы прокрутки */
    width: 75%; /* Ширина блока */
    height: 700px; /* Высота блока */
    padding: 0 50px; /* Поля вокруг текста */
	border: 1.5px dashed #000;/* Параметры рамки */
	text-align:justify; /* Размещение текста по ширине */
}
.dilo1 p {text-indent: 50px;
margin-bottom:2px;}
.dilo1 h3 {
	padding-left:50px;
}
.dilo1 h2 {
	padding-left:50px;
}
.dilo1 li {
	padding-bottom:10px;
}


.dilo11 {float: right;
	display: block;
	margin: 3px;
	font-size: 18px;
	background-color: #FAFAFA;
	margin-top: 100px;
	overflow: scroll; /* Добавляем полосы прокрутки */
    width: 73%; /* Ширина блока */
    height: 700px; /* Высота блока */
    padding: 0 50px; /* Поля вокруг текста */
	border: 1.5px dashed #000;/* Параметры рамки */
	text-align:justify; /* Размещение текста по ширине */
}
.dilo11 p {text-indent: 50px;
margin-bottom:2px;}
.dilo11 h3 {
	padding-left:50px;
}
.dilo11 h2 {
	padding-left:50px;
}
.dilo11 li {
	padding-bottom:10px;
}
.text {
	font-size: 20px;
	float: center;
	padding: 10px 25px;
	text-align:justify ;
}
.pager {
	float: left;
	display: block;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	margin: 0 230px;
	padding: 5px;
	position: relative;
	text-align:center;
	text-decoration: none;
}
.pager :hover {
	color: #476CC3;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #899CCC;
  width: 100%;
  bottom:0;
  padding: 0 10px;
  margin-bottom:0;
  z-index:1;
  position: relative;
}

.dil {float: right;
	display: block;
	border: 1.5px solid black;
	margin: 3px;
	padding: 110px;
	padding-right:30px;
	font-size: 20px;
	background-color: #FAFAFA;
	margin-top: 100px;
	overflow: scroll; /* Добавляем полосы прокрутки */
    width: 75%; /* Ширина блока */
    height: 1000px; /* Высота блока */
    padding: 0 5px; /* Поля вокруг текста */
	border: 1.5px dashed #000;/* Параметры рамки */
}
.dil h2{padding-left: 85px;
}
.dil h1 {
	padding-top:20px;
}
.dil a {color:black;
	text-decoration: none;
	font-size: 20px;
}
.dil a:hover{ 
	color:#899CCC;
}
.dil ol {padding-left: 130px;
text-decoration: none;
 
 }
.dil li {margin-bottom: 10px;}


.fontt { padding-left: 70px;
    padding-right: 70px;
}

.fontt1 { padding-left: 750px;
    padding-right: px;}
.divv {float:right;}

.sub {margin-right:100px;}

.p1 {margin-right:170px;}

.p2 {margin-right:125px;}

.p3 {margin-right:160px;}

.p4 {margin-left:550px;}

.p5 {margin-left:166px;}

.p6 {margin-left:110px;}

.p7 {margin-left:170px;}

.p8 {margin-left:130px;}
 
.p9 {margin-left:220px;}
 
.p10 {margin-left:195px;}
 
.p11 {margin-left:30px;
 padding-top:2px;}
 
.p12 {padding-right:500px;}

.text1 {margin-left:200px;}

.center {padding-top:50px;}

.L9 p{margin-bottom:none;}
.L12 {
font-size:10px;}

sup {padding-left:30px;}

.L18 {padding-left:255px;
}

.leftimg  {
    float: right; /* Выравнивание по правому краю  */ 
margin: 7px 0 7px 7px; /* Отступы вокруг картинки */}

.L3 {margin-left:790px;}

tr {vertical-align:top;}

.L5 {padding-left: 250px;
    padding-right: 250px;}