.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#comparison figure {  
    background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Siding/2021/GregMpls3-Before.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/Siding/2021/GregMpls7-after.JPG); 
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3); 
      background-size: cover;  
      position: absolute;  
      width: 350px;  
      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/Siding/2021/before-siding.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/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#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/porches/before-after/KOPPIN_3726.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/porches/before-after/KOPPIN_6271.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/porches/before-after/NOLAN_2981.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/porches/before-after/NOLAN_8318.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/porches/before-after/Thomas_B2.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/porches/before-after/Thomas_After02.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/0110.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/0120.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%
}