/*Стиль иконки меню поворота*/

.container_0 {
  padding: 0px 0px 0px 8px;
  display: flex;
  justify-content: start;
  width: 130px;
	font-weight: 500;
  font-size: 17px;
  text-decoration: none;
  background-color: transparent;
  color: rgb(78, 78, 78);
  line-height: 46px;
  text-indent: 5px;
  border-radius: 10px;
  border: 1px solid rgb(180, 180, 180);
  cursor: pointer;
  
  }

  .container_0:hover{
    background: rgba(0, 0, 0, 0.04);
    border-color: rgb(150, 150, 150);
   /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);*/
}

/* Десктоп: кнопка каталога голубая */
@media (min-width: 1024px) {
  .container_0 {
    background-color: rgb(57, 180, 232);
    color: #ffffff;
    border-color: rgb(57, 180, 232);
  }

  .container_0:hover {
    background: rgb(115, 198, 234);
    border-color: rgb(115, 198, 234);
  }

}


.container_bar {
  display: inline-block;
  cursor: pointer;
  padding: 10px 5px 0px 5px;

}

.bar1, .bar2, .bar3 {
  width: 20px;
  height: 2px;
  background-color: rgb(78, 78, 78);
  margin: 5px 0;
  transition: 0.4s;
}

@media (min-width: 1024px) {
  .container_0 .bar1,
  .container_0 .bar2,
  .container_0 .bar3 {
    background-color: #ffffff;
  }
}

.change .bar1 {
   transform: rotate(-45deg) translate(-5px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
   transform: rotate(45deg) translate(-3px, -5px);
}
/*Стиль иконки меню поворота конец*/


 /* Выпадающий контейнер */
 .container_catalog_0 {/* обернуто выподаюшее меню по высоте для тени на всю длину */
 margin: 0 auto;
 width: 100%;
 height: 350px;
  box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
	background: rgba(255, 255, 255);
  position: absolute; /*позиция кнопки поиска*/
  z-index: 1001; /*слой выше кнопок прокрутки слайдера и dropdown-content*/

  
  }

 .container_catalog {/* обернуто выподаюшее меню */
  margin: 0 auto;
  max-width: 1450px;
  min-width: 1024px;

   }

 .dropdown {
	overflow: hidden;
	z-index: 10; /*слой выше кнопок прокрутки слайдера*/
	flex-shrink: 0;
  }
  
  /* Кнопка выпадающего списка */
  .dropdown .dropbtn {
	font-size: 16px; /*не влияет*/
	border: none;
	outline: none;
	color: white;  
	background-color: inherit;
	font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */
	margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */
  
  }
  
  /* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */
  /*.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: rgb(255, 255, 255); 
  }*/
  
  /* Кнопка закрытия каталога */
  .catalog-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    z-index: 1002;
    line-height: 1;
    padding: 5px 10px;
    transition: color 0.2s;
  }
  
  .catalog-close:hover {
    color: #000;
  }

  /* Выпадающее содержимое (скрыто по умолчанию) */
  .dropdown-content {
	/*display: none;*/
  width: 100%;
	position: absolute;
	background: rgba(0, 0, 0, 0.2);
	margin: 0 auto;
  height: 100vh; /*на всю высоту области просмотра*/
	/*box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);*/
  top: 100px;
  left: 0px;
  z-index: 1000; /*слой выше кнопок прокрутки слайдера*/
  }
  
  
  /* Показать выпадающее меню при наведении курсора */
  .dropdown:hover .dropdown-content {
	display: block;	
  }

 /* Создайте три одинаковых столбца, которые плавают рядом друг с другом */
  .column {
	float: left;
	width: 33%;
	/*padding: 10px;*/
	background-color: white;
	
	
  }
  .column h3 {
	padding: 20px 20px  0px 20px;
	font-weight: 600;
	font-size: 15px;
	color: rgb(40, 40, 40);
	
  }
  
 
  /* Ссылки стиля внутри столбцов */
  .column a {
	float: none;
	font-size: 14px;
	font-weight: 400;
	color: rgb(213, 213, 213);
	padding: 12px 20px  0px 20px;
	text-decoration: none;
	display: block;
	text-align: left;
  }

  .column p {
   
    font-size: 14px;
    font-weight: 400;
    color:  rgb(77, 77, 77);
 
    }
  
  /* Добавить цвет фона при наведении курсора */
  .column a:hover {
	/*background-color: rgb(151, 210, 235);*/
	color:  rgb(57, 180, 232);
  
  }

  /* Добавить цвет для ссылок внутри параграфов при наведении курсора */
  .column a:hover p {
	color:  rgb(57, 180, 232);
  }

  /* Отключить hover для неактивных ссылок */
  .column a[href="#"] {
	cursor: default;
  }

  .column a[href="#"]:hover {
	color: rgb(213, 213, 213);
  }
  
  	/* Меню контейнер навигации конец*/

/* Мобильная адаптация выпадающего каталога */
@media (max-width: 1023px) {
  .container_catalog {
    min-width: 0;
    width: 100%;
  }
  
  .container_catalog_0 {
    height: auto;
    min-height: 250px;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .dropdown-content {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .column {
    float: none;
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  
  .column:last-child {
    border-bottom: none;
  }
  
  .column h3 {
    padding: 15px 15px 5px 15px;
    font-size: 14px;
  }
  
  .column a {
    padding: 10px 15px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .container_catalog_0 {
    max-height: 70vh;
  }
}