 .simply-scroll-container {
    /* Container DIV - automatically generated */
     position: relative;
	 background-color:var(--quaternary-color);
	  
}
 .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;
}
 .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:20px 0;
}
 .simply-scroll .simply-scroll-list li {
     float: left;
     width: 120px;
	 position:relative;
	 border-radius: 5px;
	 -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:#fff;
}

 .simply-scroll .simply-scroll-list li img {
 	width: 100%;
	display:block;
	filter:invert(50%); 
	/*filter: grayscale(100%);*/
	/*filter: saturate(.5%);*/
 
	  -webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	
}

 .simply-scroll .simply-scroll-list li:hover img {
 	width: 100%;
	display:block;
	filter: none;
  
}
 .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 {
     width: 290px;
     height: 200px;
}
 .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 .simply-scroll-list {
	 padding:5px 0;
}
}
 