.maincontent {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
}
input[type="range"] {  
      -webkit-appearance: none;
      -moz-appearance: none;
      position: relative;
      top: -2rem;
      left: -2%;
      background-color: rgba(255, 255, 255, 0.5);
      width: 102%;
      height:15px;
  }

  input[type="range"]:focus {  
      outline: none;
  }

  input[type="range"]:active {  
      outline: none;
  }

  input[type="range"]::-moz-range-track {  
      -moz-appearance: none;
      height: 15px;
      width: 102%;
      right:2%;
      background-color: rgba(255, 255, 255, 0.5);
      position: relative;
      outline: none;
  }

  input[type="range"]::active {  
      border: none;
      outline: none;
  }

  input[type="range"]::-webkit-slider-thumb {  
      -webkit-appearance: none;
      width: 25px;
      height: 25px;
      background: #fff;
      border-radius: 50%;
  }


  input[type="range"]::-moz-range-thumb {  
      width: 25px;
      height: 25px;
      background: url(/imageserver/UserMedia/minnesotaremodeling/left-and-right1.png);
      background-color: #ffffff;
      background-size: contain;
      border:4px solid #0f4432;
      border-radius: 50%;
  }

  input[type="range"]::-webkit-slider-thumb {
      width: 25px;
      height: 25px;
      background: url(/imageserver/UserMedia/minnesotaremodeling/left-and-right1.png);
      background-color: #ffffff;
      border:4px solid #0f4432; 
border-radius: 50%;
      background-size: contain;
  }



div[id*="comparison"]{
    width: 350px;
    height: 320px;
    max-width: 350px;
    max-height: 320px; 
    margin:auto;
}

div[id*="comparison"] figure{
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0123-b.jpg);
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 350px;
  height: 320px;
  margin: 0;
}

div[id*="comparison"] figure div{
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0123-a.jpg);
  background-size: cover;
  position: absolute;
  width: 350px;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  bottom: 0;
  height: 320px;
}

div[id*="comparison"] figure > img {
  position: relative;
  width: 350px;
}

div#comparison1 figure {
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-livingroom-before.jpg);    
}

div#comparison1 figure div {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-livingroom-after.jpg); 
}

div#comparison2figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0122-b.jpg);
}

div#comparison2 figure div {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0122-a.jpg);
}

div#comparison3 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-kitchen-before.jpg); 
}

div#comparison3 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-kitchen-after.jpg);
}

div#comparison4 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0100.jpg);
}

div#comparison4 figure div {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0090.jpg);
}

div#comparison5 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-bathroom-before-cropped.jpg);
}

div#comparison5 figure div { 
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/47789-bathroom-after-cropped.jpg);
}

/*
div#comparison6 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/McAdamsBefore.jpg);
}

div#comparison6 figure div {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/McAdamsAfter.jpg);
}

div#comparison7 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2b.jpg);
}

div#comparison7 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2ae.png); 
}

div#comparison9 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/before-siding.JPG); 
}

div#comparison9 figure div {  
  background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/after-siding.JPG); 
}

div#comparison10 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/.jpg); 
}

div#comparison10 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2023a1.jpg); 
}
*/

.before-after-global{
width: 97%
}