/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #80bb3d white;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: #80bb3d;
  border-radius: 20px;
  border: 3px solid white;
}

.moncol-lg-4 {
	flex: 0 0 100%;
max-width: 100%;
}
/* <!-- second slider -->  */
.mascrollbar {
scrollbar-color:#80bb3d;
}

.carousel {
  padding: .3em .3em 0;
  background: white;
  text-align: center;
}
.carousel div {
  position: relative;
  margin-bottom: .3em;
  padding-top: 56.25%;
}
.carousel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carousel span {
  display: inline-block;

/* прокрутка миниатюр при необходимости */
  overflow: auto;
  white-space: nowrap;
  word-wrap: normal;

}
.carousel a {
  position: relative;
  display: inline-block;
  max-width: 120px;  /* максимальная ширина миниатюр */
  width: 25%;  /* ширина миниатюр */
  border: 1px solid blue;  /* рамка вокруг миниатюр */
  opacity: .7;  
  text-decoration: none;
}
.carousel a:visited,
.carousel a:nth-of-type(1) {
  border-color: #555;  /* рамка вокруг миниатюр просмотренных видео */
}
.carousel a:hover { 
  opacity: 1;
}
.carousel a:not(:active):focus {
  pointer-events: none;
}
.carousel a::before {
  content: "";
  position: absolute;
  top: 0em;
  right: 0em;
  bottom: 0em;
  left: 0em;
  background: rgba(0,0,1,.1);
  transition: background 0s 9999999s;
}
.carousel a:nth-of-type(1)::before {
  background: rgba(255,255,254,.7);
}
.carousel span:active a::before {
  background: rgba(0,0,0,0);
  transition: background 0s;
}
.carousel span:active a:active::before {
  background: rgba(255,255,255,.7);
  transition: background 0s;
}
.carousel img {
  max-width: 100%;
  vertical-align: middle;  /* убрать нижний отступ до рамки под картинкой */
}