/* 
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}
*/

section#listalka {
border:0px solid #eeeeee;
margin-top:0%;
width:100%;
min-width:0;
}

section#listalka .pic_panel{
margin-top:4%;
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
border:0px solid #eeeeee;
}

section#listalka .pic_panel div{
width:40px;
margin:3px;
cursor:pointer;
border:1px solid #dfdfdf;
opacity:0.6;
transition:all 0.8s;
}


section#listalka .pic_panel div.pct_on{
opacity:1;
border:1px solid #ff0000;
}
/*
<div class="pic_panel">
<div class="pct">      
    <img src="$file4" style="width:100%" class="pict">                      
</div> 
</div>
*/


section#listalka .swiper-button-next::after,
section#listalka .swiper-button-prev::after {
color: #c51a1b;
font-size:30px;
border: 1px solid #ededed;
padding:5px;
}
section#listalka div.img_slider .swiper-pagination-bullet{
width:15px;
height:15px;
background-color: #c4161c;
}

section#listalka div.img_slider .swiper {
      width: 100%;
      position:relative;     
      /* height: 100%; */
    }

section#listalka div.img_slider .swiper-slide {
      text-align: center;
      font-size: calc(16px + 10 * ((100vw - 320px) / (2050 - 320)));
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 22px;
    }

section#listalka div.img_slider .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity:0;
      transition:all 0.8s;
    }

section#listalka div.img_slider .swiper-slide img.opasity_full {
      opacity:1;
    }

    
section#listalka div.img_slider .swiper-slide video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
/* ====================================================== */   



section#listalka .text-slider3{
width:100%;
height:50px;
min-width:0;
opacity: 1.0;
background-color: #E8EAEA;
border: 0px solid #ddd;

display:flex; justify-content:center; align-items:center
}

section#listalka div.text_slider > .text-slider3 > div.swiper-wrapper > div.swiper-slide > div.txt_blok{
border: 0px solid #ff0000;
height:100%;
display: flex;
justify-content: center;
align-items: center;
border: 0px solid #dddddd;
}


section#listalka .hdr{
      text-align: center;
      font-size: calc(12px + 8 * ((100vw - 320px) / (2050 - 320)));
      color:  #434f55;
      line-height: 110%;
      display: flex;
      justify-content: center;
      align-items: center;

    }



div.text_slider .text-slider3{
width:100%;
height:5vw; 
opacity: 1;
}


section#listalka div.for_text {
background:#fff; 
/*flex-basis:40%;  */
min-width:0; /* Пипец, как важно - иначе слайдер сойдет с ума */ 
flex-basis:100%;
}


.swiper-lazy:not(.swiper-lazy-loaded) {
display: none;
}



.top_list{
grid-template-columns: repeat(2, 1fr)
}



@media only screen and (max-width: 768px)  {

section#listalka {
width:100%; 
padding: 0%;
}

.top_list{
grid-template-columns: repeat(1, 1fr)
}





section#listalka div.for_text {
	flex-basis:100%;
}

section#listalka div#flx{
flex-direction:column;
}

section#listalka .text-slider3{
width:100%;
}

}