.catans {padding-left:0px; 
 padding-right:0px;
 margin-left: 0px;
 margin-top: 5px;
   
}
.catans:hover {z-index:2;
}

 .catframe {
  border-style: solid;
  border-width: 3px;
  border-radius: 5%;
  border-color: #6E89BD;
    
}

.catframe:hover {
  border-color: #D05C4D;
  
  transform: translate(8px,5px);
  transform: scale(1.1,1.1);
box-shadow: 5px 8px 5px 3px rgba(	208,	92,	77, 0.5);
   z-index: -1; }


  .catframesub {
  border-style: solid;
  border-width: 2px;
  border-radius: 3%;
 color: #6E89BD;
    
}

.catframesub:hover {
  border-color: #D05C4D;
       
   
 
  transform: translate(5px,3px);
  transform: scale(1.1,1.05);
box-shadow: 3px 5px 3px 1px rgba(	208,	92,	77, 0.5);
   z-index: -1;   
}

 
  /* Свойство отвечающее за формирование тени 
   8px - отступ по оси Х
   10px - отступ по оси Y
   5px - радиус размытия тения
   2px - радиус распространения
   rgba - функция формирующая цвет тени
  */
  


.supcol {position: relative;bottom: -30px; height:70px;}
@media (max-width: 991px) {
	.supcol  {position: relative;
	bottom:0px;
	}
}
  
    

.sup   {margin-right:  20px; width:80%;}


.dropbtn {
   
  color: white;
  padding: 3px;
  font-size: 3px;
  border: none;
}

.dropdown {
  position: relative;
  float:left;
  width:100%;
 
}
 
 .dropdown :hover {  z-index:2;
}
 
 
 
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #efefdd;
  min-width: 160px;
  box-shadow: 25px 8px 16px 0px rgba(0,0,0,0.2);
  
  z-index:2;
  
  
  
   top: -10px;
  left: 150px;
 
  
}

.dropdown-content a {
  color: #6E89BD;
  font-weight:600;
  padding: 3px 3px;
  text-decoration: none;
  display: block;
  font-size: 12pt;
}

.dropdown-content a:hover {background-color: #ddd; color: #D05C4D;font-size: 13pt;font-weight:800;}

.dropdown:hover .dropdown-content {display: block;}



  body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #456;
      height: 3000px;
    }

    .slider {
      position: relative;
      overflow: hidden;
    }

    .slider__wrapper {
      display: flex;
      transition: transform 0.6s ease;
    }

    .slider__item {
      flex: 0 0 30%;
      max-width: 50%;
    }
    
    @media (max-width: 768px) {.slider__item {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
     

    .slider__control {
      position: absolute;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      color: #fff;
      text-align: center;
      opacity: 0.5;
      height: 50px;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .5);
    }

    .slider__control:hover,
    .slider__control:focus {
      color: #fff;
      text-decoration: none;
      outline: 0;
      opacity: .9;
    }

    .slider__control_left {
      left: 0;
    }

    .slider__control_right {
      right: 0;
    }

    .slider__control::before {
      content: '';
      display: inline-block;
      width: 40px;
      height: 40px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
    }

    .slider__control_left::before {
      background-image: url(/catalog/view/theme/test/image/home/carousel/left.png);
    }

    .slider__control_right::before {
      background-image: url(/catalog/view/theme/test/image/home/carousel/right.png);
    }

    .slider__item>div {
      line-height: 250px;
      font-size: 100px;
      text-align: center;
    }
    
/*     *{
   box-sizing: border-box;
}*/

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */


.btn:hover {
  background-color: #ddd;
  border-radius: 50%;
}

.btn-primary:hover {
  background-color: #eee;
  border-radius: 5%;
}


.btn.active {
  background-color: #666;
  color: white;
  border-radius: 50%;
}
.supim{width:225px;
       height:100%;
    
}

   [data-tooltip] {
    position: relative; /* Относительное позиционирование */ 
   }
   [data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина подсказки */
    /* font-size:25px;*/
    left: 0; top: 0; /* Положение подсказки */
    background: #3989c9; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 0.5s; /* Время появления подсказки */
    z-index: 3;
   } 
   [data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 4em; /* Положение подсказки */
     
   }
   
   #prev img { top: 30px;
            left: 15px; }
 
  #prev img:hover  { transform: scale(1.2,1.3);
  opacity: 0.5;}
  
 .btncle { background-color: #fdf8f8; width:100%;}
 .imagcat{width:100%;  height:170px; border-radius:5% 5% 5% 5%; padding: 0px 0px 0px 0px;}
 
 .imagcatsub{width:100%;  height:90px; border-radius:3% 3% 3% 3%; padding: 0px 0px 0px 0px;}
 
 .catname {background-color: lightgrey; font-size: 18px; color:black; margin-bottom:0; padding-bottom:7px; padding-top:7px;  border-radius:0px 0px 10px 10px;}
  .catnamesub {background-color: white; font-size: 13px; color:black; margin-bottom:0; padding-bottom:7px; padding-top:7px;  border-radius:0px 0px 3px 3px;}
  
  
.infocat { position: absolute;   z-index: 1;  }
.catdesc { margin-block-end: 0;}

/* photo produkt*/
body {
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.containeransid {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  background-color:  #D05C4D;
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 5px 5px 0;
  user-select: none;
  -webkit-user-select: none;
  text-decoration:underline dotted #D05C4D;
      
   
    
  
  
  
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #6E89BD;
  color:#FFF8DC;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #6E89BD;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-containeransid {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.rowansid:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.columnansid {
  float: left;

  
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


.improd {
    width:100%;
    height:350px;  
    margin: 2px 0px 2px 0px; 
    border-width: 2px;
  border-radius: 3%;
  border-color: #D05C4D;
  border-style: solid;
     
    
    
    
}
  
.thuprod { width:100%;
margin: 1px 0px 1px 0px;
border-width: 1px;
  border-radius: 2%;
  border-color: #6E89BD;
  border-style: solid; }
 .thuprod:hover{ border-color: #D05C4D;} 
  
  
.rowthu {max-height: 350px; overflow-y: scroll; margin-top:0px; padding-top:0px;margin-bottom:0px; padding-bottom:0px;}
.accordion-button {background-color:#D05C4D;font-weight: 600; font-family:"Roboto", sans-serif;
    color: white;
    border-style: solid;
  border-color: #D05C4D;
  border-width: 2px;font-size: 2rem;
}  
  
.accordion-button:not(.collapsed){background-color:#D05C4D;font-weight: 600; font-family:"Roboto", sans-serif;
    color: white;
    border-style: solid;
  border-color: white;
  border-width: 2px;
   box-shadow: 0 0 0 .25rem #D05C4D;
} 

.accordion-button:focus{    z-index: 3;
    border-color:white;
    outline: 0;
    box-shadow: 0 0 0 .25rem #D05C4D;}
  
  .accordion-button:not(.collapsed):after {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");transform: rotate(-180deg);}
  
  .accordion-button:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");}
  
 table {
  border-collapse: collapse;
  width: 100%;
}


 th,td {
  text-align: left;
  padding: 8px;
}

 tr:nth-child(even) {background-color: #eeeeee;}
.tab-content{color:black;}

.table-bordered>thead>tr>td, .table-bordered>thead>tr>th{border-bottom-width:0.2px;}

       
 .atribute{max-height: 100px;  /*высота таблицы в аккордионе*/ 
 overflow-y: scroll;}
  
 .accordion-header{margin-top:2px;margin-bottom:2px;}
 
 .request{background-image: 
 linear-gradient(to top, white, #6E89BD); 
 border: 2px solid  #D05C4C;
 font-size:20px; width:65%; 
 color: black; position:
 relative; border-radius:12px;
 top:150px; 
 left:40px; 
 text-align: center;
 justify-content: center;}
  
   .input-file {
	position: relative;
	display: inline-block;
	
}
.input-file-text {
	padding: 0 10px;
	line-height: 50px;
	text-align: center;
	height: 50px;
	display: block;
border: none;
	box-sizing: border-box;
	width: 320px;
	border-radius: 0px 0px 0 0px;
	border: 1px solid #6E89BD;
	 background: #6E89BD;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  	box-sizing: border-box;
  	margin-left:10px;
  	padding-left:10px;
  	border-left:10px;
}
.input-file-btn {
position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 0 0px 0px 0;
	background-color: #6E89BD;
	line-height: 22px;
	height: 50px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	float: left;
	font-weight: 700;
	transition: background-color 0.2s;
	 
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
 
/* Focus */
.input-file input[type=file]:focus + .input-file-btn {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
 
/* Hover/active */
.input-file:hover .input-file-btn {
	background-color: #B6C4DE;
}
.input-file:active .input-file-btn {
	background-color: #F0F3F8;
}
 
/* Disabled */
.input-file input[type=file]:disabled + .input-file-btn {
	background-color: #eee;
}

.modal-download {
 
	font-size: 14px;
	vertical-align: middle;
	color: #6E89BD;
	text-align: center;
	border-radius: 0 0px 0px 0;


	line-height: 22px;
	height: 50px;
 
	font-weight: 700;
	transition: background-color 0.2s;
 }

.prodincat {
    color:#6E89BD;
    font-size: 18px;
    font-family: 'Magra', serif;
    font-family: var(--font-headers), serif;
    font-weight: 700;
    padding: 0 0 5px;
    -webkit-transition: all .3s ease; }
.prodincat:hover {
    color:#B6C4DE;}


/* menuansid */
#menuansid {
	background-color: white;
 
}
#menuansid .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menuansid .nav > li > a:hover, #menuansid .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menuansid .dropdown-content {
	padding-bottom: 0;
}
#menuansid .dropdown-inner {
	display: table;
}
#menuansid .dropdown-inner ul {
	display: table-cell;
}
#menuansid .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 6px 20px;
	clear: both;
	line-height: 20px;
	color: #D05C4D;
	font-size: 16px;
 
	border-left: 1px solid #6E89BD;
		border-bottom: 1px solid #6E89BD;
}
#menuansid .dropdown-inner li a:hover {
	color: #6E89BD;
	font-weight: 500;
}
#menuansid .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 14px;
}
#menuansid .see-all:hover, #menuansid .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #6E89BD;
 
	background-repeat: repeat-x;	font-size: 14px;font-weight: 500;
}
#menuansid #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menuansid .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menuansid .btn-navbar:hover, #menuansid .btn-navbar:focus, #menuansid .btn-navbar:active, #menuansid .btn-navbar.disabled, #menuansid .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menuansid .dropdown:hover .dropdown-menuansid {
		display: block;    
	}
}
@media (max-width: 767px) {
	#menuansid {
		border-radius: 4px;
	}
	#menuansid div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menuansid div.dropdown-menuansid {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menuansid .dropdown-inner {
		display: block;
	}
	#menuansid .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menuansid .dropdown-menuansid a:hover,
	#menuansid .dropdown-menuansid ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menuansid .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
 
#readMore{display:none;}