.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/3b.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/3a.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/Siding/Bittle_Before01.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/Bittle_After01.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/Siding/2021/5b.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/Siding/2021/5ab.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/Siding/2021/4b.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/Siding/2021/4a.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/Siding/GregMpls2.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/Siding/GregMpls_after8.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/Siding/2021/6b.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/Siding/2021/6a.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/Siding/2021/2023b1.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;
  }