.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 {  
          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;
        background: url(/imageserver/UserMedia/minnesotaremodeling/left-and-right1.png);
        background-color: #ffffff;
        border:4px solid #0f4432;  
        background-size: contain;
          width: 25px;  
          height: 25px;   
          border-radius: 50%;
      }
  

      input[type="range"]::-moz-range-thumb {  
        -moz-appearance: none;  
        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%;
    }
  
      


 
    
    /* div#comparison {  
        width: 100%;  
        height: 320px;  
        max-width: 350px;  
        max-height: 320px; 
        margin:auto;
    }
    
    div#comparison figure {  
        background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Roofing/2021/BittleAfter.jpg);  
        background-size: cover;  
        position: relative;  
        font-size: 0;  
        width: 100%;  
        height: 100%;  
        margin: 0;
    }

    div#comparison figure div {  
        background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Roofing/2021/BittleBefore.jpg);  
        background-size: cover;  
        position: absolute;  
        width: 100%;  
        box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);  
        overflow: hidden;  
        bottom: 0;  
        height: 100%;
    }
    

    div#comparison figure > img {  
        position: relative;  
        width: 100%;
    } */

    
    div#comparison1 {  
        width: 100%;  
        height: 320px;  
        max-width: 350px;  
        max-height: 320px; 
        margin:auto;
    }
    
    div#comparison1 figure { 
        background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Decks/before-after/IMG_5814Helsdingenbefore.jpg);  
        background-size: cover;  
        position: relative;  
        font-size: 0;  
        width: 350px;  
        height: 100%;  
        margin: 0;
    }

    div#comparison1 figure div {  
        background-image: url( /imageserver/UserMedia/minnesotaremodeling/portfolio/Decks/2021/IMG_7230Helsdingenafter.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/Decks/before-after/deck2-before.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/Decks/before-after/deck2-after.jpg);  
        background-size: cover;
        background-position: bottom;  
        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;
        display: in ;
    }
    
    div#comparison3 {  
        width: 350px;  
        height: 320px;  
        max-width: 350px;  
        max-height: 320px; 
        margin:auto;
    }
    
    div#comparison3 figure {  
        background-image: url(/imageserver/UserMedia/minnesotaremodeling/portfolio/Decks/before-after/deck3-before.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/Decks/before-after/deck3-after.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;
    }