.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#comparison {  
    width: 350px;  
    height: 320px;  
    max-width: 350px;  
    max-height: 320px; 
    margin:auto;
}

div#comparison1 {  
  width: 350px;  
  height: 320px;  
  max-width: 350px;  
  max-height: 320px; 
  margin:auto;
}

div#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#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#comparison figure > img {  
  position: relative;  
  width: 350px;
}

  
div#comparison1 {  
  width: 350px;  
  height: 320px;  
  max-width: 350px;  
  max-height: 320px; 
  margin:auto;
}

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

  background-size: cover;  
  position: relative;  
  font-size: 0;  
  width: 350px;  
  height: 320px;  
  margin: 0;
}

div#comparison1 figure div {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0122-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#comparison1 figure > img {  
  position: relative;  
  width: 350px;
}


div#comparison2 {  
    width: 350px;  
    height: 320px;  
    max-width: 350px;  
    max-height: 320px; 
    margin:auto;
}

div#comparison2 figure {
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0060.jpg);    
  background-size: cover;  
  position: relative;  
  font-size: 0;  
  width: 350px;  
  height: 320px;  
  margin: 0;
}

div#comparison2 figure div {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0050.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#comparison2 figure > img {  
    position: relative;  
    width: 350px;
}



div#comparison3 {  
  width: 350px;  
  height: 320px;  
  max-width: 350px;  
  max-height: 320px; 
  margin:auto;
}


div#comparison3 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0072.jpg); 
  background-size: cover;  
  position: relative;  
  font-size: 0;  
  width: 350px;  
  height: 320px;  
  margin: 0;
}

div#comparison3 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0071.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#comparison3 figure > img {  
  position: relative;  
  width: 350px;
}


div#comparison4 {  
width: 350px;  
height: 320px;  
max-width: 350px;  
max-height: 320px; 
margin:auto;
}

div#comparison4 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0100.jpg);  
background-size: cover;  
position: relative;  
font-size: 0;  
width: 350px;  
height: 320px;  
margin: 0;
}


div#comparison4 figure div {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0090.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#comparison4 figure > img {  
position: relative;  
width: 350px;
}




 div#comparison5 {  
    width: 350px;  
    height: 320px;  
    max-width: 350px;  
    max-height: 320px; 
    margin:auto;
}

div#comparison5 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0120.jpg);  
    background-size: cover;  
    position: relative;  
    font-size: 0;  
    width: 350px;  
    height: 320px;  
    margin: 0;
}

div#comparison5 figure div { 
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/before-after/cropped/0110.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#comparison5 figure > img {  
    position: relative;  
    width: 350px;
}

/*

div#comparison6 {  
    width: 350px;  
    height: 320px;  
    max-width: 350px;  
    max-height: 320px; 
    margin: auto;
}

div#comparison6 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/McAdamsBefore.jpg);
    background-size: cover;  
    position: relative;  
    font-size: 0;  
    width: 350px;  
    height: 320px;  
    margin: 0;
}

div#comparison6 figure div {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/McAdamsAfter.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#comparison6 figure > img {  
    position: relative;  
    width: 350px;
}

div#comparison7 {  
  width: 350px;  
  height: 320px;  
  max-width: 350px;  
  max-height: 320px; 
  margin:auto;
}

div#comparison7 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2b.jpg);
  background-size: cover;  
  position: relative;  
  font-size: 0;  
  width: 350px;  
  height: 320px;  
  margin: 0;
}

div#comparison7 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2ae.png); 
  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#comparison7 figure > img {  
  position: relative;  
  width: 350px;
}



div#comparison9 {  
    width: 350px;  
    height: 320px;  
    max-width: 350px;  
    max-height: 320px; 
    margin:auto;
}

div#comparison9 figure {  
  background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/before-siding.JPG); 
    background-size: cover;  
    position: relative;  
    font-size: 0;  
    width: 350px;  
    height: 320px;  
    margin: 0;
}

div#comparison9 figure div {  
  background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/after-siding.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#comparison9 figure > img {  
    position: relative;  
    width: 350px;
} 


div#comparison10 {  
  width: 350px;  
  height: 320px;  
  max-width: 350px;  
  max-height: 320px; 
  margin:auto;
}

div#comparison10 figure {  
background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/remodeling/.jpg); 
  background-size: cover;  
  position: relative;  
  font-size: 0;  
  width: 350px;  
  height: 320px;  
  margin: 0;
}

div#comparison10 figure div {  
background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/2023a1.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#comparison10 figure > img {  
  position: relative;  
  width: 350px;
}

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