customStyles.css

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

.grid-container4 {
  display: grid;
  grid-template-columns:100px 172px 100px 172px;
  padding: 6.5px 15px;
  grid-gap: 10px;
}
.grid-3 {
  display: grid;
  grid-template-columns:100px 282px 172px;
  padding: 6.5px 15px;
  grid-gap: 10px;
}
.grid-container2 {
  display: grid;
  grid-template-columns:100px 462px;
  padding: 6.5px 15px;
  grid-gap: 10px;
}

.hidden-div{
  display: none;
  text-align: center;
}

* {
  box-sizing: border-box;
  padding: 0;
}

/* The grid: Four equal columns that floats next to each other */
.slider-column {
  width: 25%;
  height: 70px;
  padding: 10px;
}

.slider-column img:hover {
  opacity: 1;
}

.item img:hover {
  opacity: 1;
}

.slider {
  background-color: rgba(32, 178, 170, 0.2);
}
.slider-row {
  overflow-x: hidden;
  white-space: nowrap;
}
.slider-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Container needed to position the overlay. Adjust the width as needed */
.slider-container {
  position: relative;
  max-width: 300px;
  max-height: 65px;
}
/* The overlay effect - lays on top of the container and over the image */
.slider-overlay {
  position: absolute;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  height: 94%;
  transition: .5s ease;
  opacity:0;
  padding: 20px;
  text-align: center;
}
/* When you mouse over the container, fade in the overlay title */
.slider-container:hover .slider-column:hover .item:hover .slider-overlay {
  opacity: 1;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 5px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color: seagreen;
  text-decoration: none;
}

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

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

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

.thumb {
  width: 155.5px;
  height: 60px;
}

.item {
  display: inline-block;
  padding: 5px;
  width: 160px;
  height: 70px;
}
.item img:hover {
  opacity: 1;
}

.osjs-widget.active,.osjs-widget:hover{background-color:rgba(0,0,0,0)}