.simply-scroll-container {
    /* Container DIV - automatically generated */
     position: relative; 
	 width:1000%;
	 padding-left:20px;
 	 overflow:hidden;
	 background-color:var(--black);
}

body.dark  .simply-scroll-container {
	 background-color:var(--grey-dark);
}
 .simply-scroll-clip {
    /* Clip DIV - automatically generated */
     position: relative;
     overflow: hidden;
}
 .simply-scroll-list {
    /* UL/OL/DIV - the element that simplyScroll is inited on */
     overflow: hidden;
     margin: 0;
     padding: 0;
     list-style: none;
}
 .simply-scroll-list li {
     padding: 0;
     margin:0px;
     list-style: none;
	 color:#fff;
}
 .simply-scroll-list li img {
     border: none;
     display: block;
	 
}
 .simply-scroll-btn {
     position: absolute;
     background-image: url(../images/icons/next.svg);
     width: 42px;
     height: 44px;
     z-index:3;
     cursor: pointer;
	 
}
 .simply-scroll-btn-left {
     left: 6px;
     bottom: 6px;
    /*background-position: 0 -44px;
    */
     background-image: url(../images/icons/prev.svg);
}
 .simply-scroll-btn-left.disabled {
     background-position: 0 0 !important;
}
 .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
     background-position: 0 -88px;
}
 .simply-scroll-btn-right {
     right: 6px;
     bottom: 6px;
     background-position: -84px -44px;
}
 .simply-scroll-btn-right.disabled {
     background-position: -84px 0 !important;
}
 .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
     background-position: -84px -88px;
}
 .simply-scroll-btn-up {
     right: 6px;
     top: 6px;
     background-position: -126px -44px;
}
 .simply-scroll-btn-up.disabled {
     background-position: -126px 0 !important;
}
 .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
     background-position: -126px -88px;
}
 .simply-scroll-btn-down {
     right: 6px;
     bottom: 6px;
     background-position: -42px -44px;
}
 .simply-scroll-btn-down.disabled {
     background-position: -42px 0 !important;
}
 .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
     background-position: -42px -88px;
}
 .simply-scroll-btn-pause {
     right: 6px;
     bottom: 6px;
     background-position: -168px -44px;
}
 .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
     background-position: -168px -88px;
}
 .simply-scroll-btn-pause.active {
     background-position: -84px -44px;
}
 .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
     background-position: -84px -88px;
}
/* Custom class modifications - override classees .simply-scroll is default */
 .simply-scroll {
    /* Customisable base class for style override DIV */
    /*width: 576px;
     height: 200px;
     margin-bottom: 1em;
    */
     width:100% !important;
	 display:flex;
	 flex-direction:column;
 
}
 .simply-scroll .simply-scroll-clip {
    /*width: 576px;
     height: 200px;
    */
     width:100% !important;
     
}
 .simply-scroll .simply-scroll-list {
	 padding:0;
}
 .simply-scroll .simply-scroll-list li {
     float: left;
     width: 200px;
	 padding:20px;	 
	 position:relative;
	 overflow:hidden;
	 margin:0;	 
	 -webkit-transition: all 300ms ease-in-out;
	 -moz-transition: all 300ms ease-in-out;
	 transition: all 300ms ease-in-out;
}
  .simply-scroll .simply-scroll-list li:hover {
 	background-color:var(--primary-color);	 
}

 .simply-scroll .simply-scroll-list li img {
 	width: 100%;
	display:block;
	padding:10px;	
	/*filter: grayscale(100%); 
	filter: brightness(10000%);*/
	transition: all 0.4s ease;
 
	
}

 .simply-scroll .simply-scroll-list li:hover img {
  filter: grayscale(100%); 
  
}
 .simply-scroll .simply-scroll-btn {
}
 .simply-scroll .simply-scroll-btn-left {
}
 .simply-scroll .simply-scroll-btn-left.disabled {
}
 .simply-scroll .simply-scroll-btn-left:hover {
}
 .simply-scroll .simply-scroll-btn-right {
}
 .simply-scroll .simply-scroll-btn-right.disabled {
}
 .simply-scroll .simply-scroll-btn-right:hover {
}
 .simply-scroll .simply-scroll-btn-up {
}
 .simply-scroll .simply-scroll-btn-up.disabled {
}
 .simply-scroll .simply-scroll-btn-up:hover {
}
 .simply-scroll .simply-scroll-btn-down {
}
 .simply-scroll .simply-scroll-btn-down.disabled {
}
 .simply-scroll .simply-scroll-btn-down:hover {
}

/* Vertical scroller example */
 .vert {
    /* wider than clip to position buttons to side */
     width: 340px;
     height: 400px;
     margin-bottom: 1.5em;
}
 .vert .simply-scroll-clip {
     width: 290px;
     height: 400px;
}
 .vert .simply-scroll-list {
}
 .vert .simply-scroll-list li {
      
}
 .vert .simply-scroll-list li img {
}
 .vert .simply-scroll-btn {
}
 .vert .simply-scroll-btn-up {
    /* modified btn pos */
     right: 0;
     top: 0;
}
 .vert .simply-scroll-btn-up.disabled {
}
 .vert .simply-scroll-btn-up:hover {
}
 .vert .simply-scroll-btn-down {
    /* modified btn pos */
     right: 0;
     top: 52px;
}
 .vert .simply-scroll-btn-down.disabled {
}
 .vert .simply-scroll-btn-down:hover {
}
/* NOTE left-right classes wouldn't be needed on vertical scroller */


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

 .simply-scroll-container {
    /* Container DIV - automatically generated */
	 width:100%;
	 padding-left:0;  
}
  .simply-scroll .simply-scroll-list {
	 padding:0;
}

 .simply-scroll .simply-scroll-list li {
 
     width: 100px;
	 padding:0;
	 
}
 
}