.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/Roofing/2021/BittleBefore.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/Roofing/2021/BittleAfter.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/Roofing/2021/Davisbefore.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/Roofing/2021/DavisAfter.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;
    }