/* Автоматическое масштабирование картинок в пределах контейнера */
   

   img {
      height: 100%;
      width: auto;
      max-width: 100%;
   }

  
   .Test {
      width: 15em;
      border: 1px solid #333;
      box-shadow: 8px 8px 5px #444;
      padding: 8px 12px;
      background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
    }

  

:root {
  /*--color-background: #fff000; */
  --color-background: #faf0e6;
  --color-main:       #ffffff;
  --header-height: 0px;
}


/* Шрифты для десктопной версии сайта */

/* @media only screen and (min-device-width: 1080px)   { */
@media only screen and (min-width: 1080px)   {
 
  /* Шрифт для заголовка сайта | STOPKLOP.MOSCOW */
  .Font001 {
	  color: #00a000;
	  font-size: 30px;
	  font-weight: 900;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-top: 20px;
	  font-family: Helvetica;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }	  

  /* Шрифт для заголовка сайта | Уничтожение клопов, тараканов, мышей, крыс */
  .Font002 {
	  color: #0000a0;
	  font-size: 22px;
	  font-weight: 500;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-bottom: 10px;
	  font-family: sans-serif;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }
  
  /* Шрифт для заголовка сайта | 8 909 0000000 */
  .Font004 {
	  color: brown;
	  font-size: 30px;
	  font-weight: 900;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-top: 20px;
	  font-family: sans-serif;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }
  
  /* Шрифт для пунктов меню сайта */
  .Font011 {
	  color: #204060;
	  font-size: 23px;
	  font-weight: 600;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  font-family: Helvetica;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
	  padding : 5px 5px 5px 5px;
  } 
  
}



/* Шрифты для мобильной версии сайта */

@media only screen and (max-device-width: 1080px)   {
 
  /* Шрифт для заголовка сайта | STOPKLOP.MOSCOW */
  .Font001 {
	  /* color: #ffa000; */
	  color: #00a0ff;
	  font-size: 40px;
	  font-weight: 900;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-top: 10px;
	  font-family: Helvetica;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }	  

  /* Шрифт для заголовка сайта | Уничтожение клопов, тараканов, мышей, крыс */
  .Font002 {
	  color: #0000a0;
	  font-size: 28px;
	  font-weight: 500;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-bottom: 10px;
	  font-family: sans-serif;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }
  
  /* Шрифт для заголовка сайта | 8 909 0000000 */
  .Font004 {
	  color: brown;
	  font-size: 40px;
	  font-weight: 900;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  margin-top: 10px;
	  font-family: sans-serif;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
  }
  
  /* Шрифт для пунктов меню сайта */
  .Font011 {
	  color: #604020;
	  font-size: 32px;
	  font-weight: 600;
	  /* font-family: Arial, Helvetica, Verdana, sans-serif; */
	  font-family: Helvetica;
	  text-align: center;
	  line-height: 100%; /* Межстрочный интервал */
	  padding : 5px 5px 5px 5px;
  } 
  
}




  .SiteContainer {
	
    top: 0; /* Иначе, сверху будет небольшое пространство */

	/* Ширина сайта. Нормально, когда 1080px */
	width: 100%; 
	max-width: 1080px;

    /* Располагаем SiteContainer по центру экрана */
	left: 50%;
	transform: translate(-50%, 0%); 
	
	margin: 0 0 0 0; 
	position: relative; /* Если sticky, то нужен другой метод центрирования */
	
	padding: 0px 0px 0px 0px;
	
	background : #faf0e6; /* Влияет на цвет меню. Есть незакрытые вопросы - см. ниже */
	
	height : max-content;	
	height : 5000;
    float : center;	
	
		
  }
    
	
  /* FixedPart - шапка сайта */
  .FixedPart {
 

    top: 0; /* Иначе, сверху будет небольшое пространство */

    /* Располагаем FixedPart по центру экрана */

	left: 0;
		
	width: 100%; 
    
	height : max-content;
	min-height: 100; /* Чисто для отладки */
	

    background : #faf0e6; /* Влияет на цвет меню. Есть незакрытые вопросы - см. ниже */
	
    float : center;
    position : sticky;
	position: -webkit-sticky; /* Safari */  

    align-self: center;	
	
    margin: 0px 0px 0px 0px;
	
    padding-left: 0px;
    padding-right: 0px;	 

    z-index: 100;	
	  
  }
  
  
  .SiteHeader {
  
	width: 100%;

    height : max-content;
	min-height: 50;
	
    float : left;

	position : relative;
      
    margin: 0px 0px 0px 0px;
	
    padding-left: 0px;
    padding-right: 0px;
	padding-bottom: 10px;

    background : #faf0e6;


    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
   
    /* Выравнивание элементов вдоль основной линии */
    justify-content: space-evenly;

    /* Выравнивание элементов вдоль поперечной линии */
    align-items: center; 
  }  


  .SiteHeaderItem {
	  
	  width: max-content; 
      height: 100px;

      float: left;
      position: relative;

      margin-left: 5px;
	  margin-right: 5px;
      margin-bottom: 10px; /* Влияет на расстояние между линиями при переносе элементов */
	  margin-top: 0;

      padding-left: 5px;
      padding-right: 5px;
	  padding-top: 5px;
	  padding-bottom: 5px;

      
	  background : #faf0e6; /* AP: Проблема с цветом заголовком, меню и основного тела - изучить */
      border: solid 0px black;

      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;  
	  
  }


  .MenuContainer {
  
    /* Располагаем меню по центру экрана */
	left: 50%;
	transform: translate(-50%, 0%); 
	
	width: 100%;
	/* max-width: max-content; */
    height : max-content;
	
    float : left;
    position : relative;
  
    margin: 0px 0px 0px 0px;
	
    padding-left: 40; 
	padding-right: 40; /* Гарантирует то, что тени от пунктов меню уместятся в контейнере меню */
	padding-top: 0;
	margin-bottom: 0;  /* Гарантирует то, что тени от пунктов меню уместятся в контейнере меню */

    background: var (--color-background);
    /* background : #faf0e6; */  /* Если поставить так, то полоска меню будет очень широко раскрашена */
	
	
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
   
    /* Выравнивание элементов вдоль основной линии */
    justify-content: center; 

    /* Выравнивание элементов вдоль поперечной линии */
    align-items: center; 
  }  


  .MenuItem {
	  
	  min-height: 50px;
	  
	
      width: max-content; 
	  min-width: 100px;
      
      float: left;
      position: relative;

      margin-left: 5; /* Отступить слева от предыдущего путкта меню */
	  margin-right: 5; /* Обеспечить отступ справа перед следующим путнктом меню */
	                   /* Можно left оставить 0, а right сделать 10 или наоборот */
	  margin-top: 0;
      margin-bottom: 20; /* Влияет на расстояние между линиями при переносе элементов */

      padding-left: 10;
	  padding-right: 10;
	  padding-top: 0;
	  padding-bottom: 0;
      

      background: #faf0e6; 
      border: solid 0px black;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;  
	  
	  /* 3d-оформление кнопок */
      border: 1px solid #333;
      box-shadow: 8px 8px 5px #444;
      background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
	  
  } 

 
   
  .MainBodyContainer {
  
	
	
	width: 100%;
    height: max-content;
	
    float : left;
    position : relative;
  
    margin: 0px 0px 0px 0px;
	
		
    /* padding: 30px 30px 30px 30px; */
	padding-left : 0px;
	padding-right : 0px;
	padding-top: 0px;
	padding-bottom: 0px;


    background : #faf0e6;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  

  }  

  .MainBody {
	width : 100%;
	height: max-content;
	background: #f0f0f0;
	padding-left : 0px;
	padding-right : 0px;
	padding-top: 0px;
	padding-bottom: 00px;
  }
 
 
  
   iframe {
	  width : 100%;
	  height : 4000;	  

	  background : #faf0e6; /* Влияиет на цвет статьи. AP: Нужно ввести общую переменную */
	  
	  
   }
   
   
   /* Распространить действие тега a (ссылка) на родительский объедок за исключением padding */
   /* Иначе, зона действия клика будет ограничена текстом */
   a {
	  width : 100%;
	  height : 100%;
	  
	  display: flex;
      flex-direction: column;
   
      /* Выравнивание элементов вдоль основной линии */
      justify-content: center;

      /* Выравнивание элементов вдоль поперечной линии */
      align-items: center; 
	  
	  /* Убирает подчеркивание для ссылок */
	  text-decoration: none;
   }
   
   a:hover { 
      background: #c00000; /* Ссылка красного цвета при наведении указателя