/*
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*/

@font-face {
   font-family: comfortaa;
   src: url(https: //stage.vidahealthbar.com/wp-content/uploads/oxygen/fonts/comfortaa_regular.woff2)format("woff2"),
      url(https: //stage.vidahealthbar.com/wp-content/uploads/oxygen/fonts/comfortaa_regular.woff)format("woff"),
      font-weight: 400;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: arimo;
   src: url(https: //stage.vidahealthbar.com/wp-content/uploads/oxygen/fonts/arimo_variable.woff2)format("woff2"),
      url(https: //stage.vidahealthbar.com/wp-content/uploads/oxygen/fonts/arimo_variable.woff)format("woff"),
      font-weight: 400;
   font-style: normal;
   font-display: swap
}

form {
   display: none;
}

.compare-slider-container img {
   display: block;
   max-width: 100%;
}

.parent-compare-slider {
   display: grid;
   place-items: center;
}

.compare-slider-container {
   display: grid;
   place-content: center;
   position: relative;
   overflow: hidden;
   --position: 50%;
}

.compare-slider-image-container .figure-slider-container {
   height: 100%;
   width: 100%;
}

.compare-slider-image-container .before-figure-slider-container {
   position: absolute;
}

.compare-slider-image-container .figure-after {
   height: 100%;
}

.compare-slider-container .slider-image {
   width: 100%;
   height: 100%;
   /*object-fit: cover;*/
   object-position: left;
}

.compare-slider-container .image-before {
   position: absolute;
   inset: 0;
   width: var(--position);
   /*filter: grayscale(100%)*/
}

.compare-slider-container .slider {
   position: absolute;
   inset: 0;
   cursor: pointer;
   opacity: 0;
   /* for Firefox */
   width: 100%;
   height: 100%;
}

.compare-slider-container .slider:focus-visible~.slider-button {
   outline: 5px solid black;
   outline-offset: 3px;
}

.compare-slider-container .slider-line {
   position: absolute;
   inset: 0;
   width: 0.1rem;
   height: 100%;
   background-color: #ffffff8f;
   /* z-index: 10; */
   left: var(--position);
   transform: translateX(-50%);
   pointer-events: none;
}

.compare-slider-container .slider-button {
   position: absolute;
   padding: 0.5rem;
   border-radius: 100vw;
   display: grid;
   place-items: center;
   top: 50%;
   left: var(--position);
   transform: translate(-50%, -50%);
   pointer-events: none;

   /*
    color: black;
    background-color: #fff;
    z-index: 100;
    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
    */
}