fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
[ec2-user@ip-172-31-42-154 css]$ ls
hands-d0b354.webflow.css  normalize.css  sizeslider.css  webflow.css
[ec2-user@ip-172-31-42-154 css]$ clear

[ec2-user@ip-172-31-42-154 css]$ ls
hands-d0b354.webflow.css  normalize.css  sizeslider.css  webflow.css
[ec2-user@ip-172-31-42-154 css]$ cat sizeslider.css
.sizeslidecontainer {
  width: 100%; /* Width of the outside container */
  justify: center;
  align: center;
}

/* The slider itself */
.sizeslider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 150px; 
  height: 25px; /* Specified height */
  max-height: 25px;
  max-width: 150px;
  background: #222;
  border: 1px solid #444;
  border-radius: 0.25rem;
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  justify: center;
  align: center;
}

/* Mouse-over effects */
.sizeslider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.sizeslider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: url('../images/banana-slider.png') no-repeat center; /* #3898EC;  Blue background */
  background-size: contain;
  /* border-radius: 0.25rem; */
  cursor: pointer; /* Cursor on hover */
  transform: scale(1.3);
}

.sizeslider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: url('../images/banana-slider.png') no-repeat center;/* #3898EC; Blue background */
  background-size: contain; 
  /* border-radius: 0.25rem; */
  cursor: pointer; /* Cursor on hover */
  transform: scale(1.3);
}

.sizeslider::-webkit-slider-runnable-track {
    background: #ddd;
    border-radius: 5px;
}
.sizeslider:active::-webkit-slider-thumb {
    transform: scale(1.5); /* Slightly enlarge the banana on click */
}