#middleOne {
    width: auto;
}

    #middleOne div {
        float: left;
        padding: 0.5rem;
        position: relative;
        width: 33.33%;
    }

        #middleOne div div:nth-child(4) {
            cursor: pointer;
            height: 50%;
            position: absolute;
            right: 0px;
            top: 0px;
            width: 35%;
        }

        #middleOne div div:nth-child(5) {
            cursor: pointer;
            height: 50%;
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 35%;
        }

        #middleOne div img {
            border-radius: 5px;
            width: 100%;
        }
        
        
        .DIVA {		
            display: inline-block;		
            height: 100%;		
            width: 100%;		
        }
        

        #middleOne div div.buy {
            background: url("../images/middlepics/buy.gif") no-repeat center center;
            cursor: pointer;
            height: 25px;
            left: 226px;
            position: absolute;
            top: 54px;
            width: 75px;
            z-index: 100;
        }

            #middleOne div div.buy:hover {
                background: url("../images/middlepics/buy_over.gif");
                top: 54px;
            }

        #middleOne div div.rent {
            background: url("../images/middlepics/rent.gif") no-repeat center center;
            cursor: pointer;
            height: 25px;
            left: 226px;
            position: absolute;
            top: 108px;
            width: 75px;
            z-index: 100;
        }

            #middleOne div div.rent:hover {
                background: url("../images/middlepics/rent_over.gif");
                top: 108px;
            }

        #middleOne div:nth-child(2) div.rent:hover {
            top: 110px;
        }

        #middleOne div:nth-child(3) div.buy {
            left: 232px;
        }

        #middleOne div:nth-child(3) div.rent {
            left: 233px;
            top: 110px;
        }

        #middleOne div:nth-child(3) div.buy:hover {
            left: 233px;
        }

        #middleOne div:nth-child(3) div.rent:hover {
            left: 233px;
            top: 110px;
        }

#middleTwo {
    margin: 0 5px;
    position: relative;
    width: auto;
}

    #middleTwo div {
        cursor: pointer;
        height: 100%;
        position: absolute;
        top: 0px;
        width: 20%;
    }

        #middleTwo div:nth-child(2) {
            left: 0;
        }

        #middleTwo div:nth-child(3) {
            left: 20%;
        }

        #middleTwo div:nth-child(4) {
            left: 40%;
        }

        #middleTwo div:nth-child(5) {
            left: 60%;
        }

        #middleTwo div:nth-child(6) {
            left: 80%;
        }

    #middleTwo img {
        width: 100%;
    }

#middleTwo2 {
    display: none;
}

#middleThree2 {
    display: none;
}

#middleThree {
    margin: 5px;
    position: relative;
    width: auto;
}

    #middleThree div {
        cursor: pointer;
        height: 100%;
        position: absolute;
        top: 0px;
    }

        #middleThree div:nth-child(2) {
            left: 0;
            width: 19%;
        }

        #middleThree div:nth-child(3) {
            left: 19%;
            width: 17%;
        }

        #middleThree div:nth-child(4) {
            left: 36%;
            width: 14%;
        }

        #middleThree div:nth-child(5) {
            left: 50%;
            width: 17%;
        }

        #middleThree div:nth-child(6) {
            left: 67%;
            width: 13%;
        }

        #middleThree div:nth-child(7) {
            left: 80%;
            width: 16%;
        }

        #middleThree div:nth-child(2):hover {
            background: url("../images/middlepics/1.gif") no-repeat 4px center;
        }

        #middleThree div:nth-child(3):hover {
            background: url("../images/middlepics/2.gif") no-repeat 4px center;
        }

        #middleThree div:nth-child(4):hover {
            background: url("../images/middlepics/3.gif") no-repeat 4px center;
        }

        #middleThree div:nth-child(5):hover {
            background: url("../images/middlepics/4.gif") no-repeat 4px center;
        }

        #middleThree div:nth-child(6):hover {
            background: url("../images/middlepics/5.gif") no-repeat 1px center;
        }

        #middleThree div:nth-child(7):hover {
            background: url("../images/middlepics/6.gif") no-repeat 5px center;
        }

    #middleThree img {
        width: 100%;
    }

@media screen and (max-width: 1002px) {
    #middleOne div div.buy {
        display: none;
    }

    #middleOne div div.rent {
        display: none;
    }

    #middleThree div:nth-child(2):hover {
        background-image: none;
    }

    #middleThree div:nth-child(3):hover {
        background-image: none;
    }

    #middleThree div:nth-child(4):hover {
        background-image: none;
    }

    #middleThree div:nth-child(5):hover {
        background-image: none;
    }

    #middleThree div:nth-child(6):hover {
        background-image: none;
    }

    #middleThree div:nth-child(7):hover {
        background-image: none;
    }
}


@media screen and (max-width: 740px) {
    #middleOne div {
        float: none;
        padding: 0.5rem;
        width: 100%;
    }

        #middleOne div:nth-child(2) {
            padding: 0 0.5rem;
        }
}

@media screen and (max-width: 600px) {
    #middleTwo {
        display: none;
    }

    #middleTwo2 div {
        margin-top: 3px;
        padding: 0.2rem;
    }

        #middleTwo2 div:first-child {
            padding-top: 0px;
        }

        #middleTwo2 div:last-child {
            padding-bottom: 0px;

        }

    #middleTwo2 {
        display: block;
        margin: 0 5px;
    }

        #middleTwo2 img {
            width: 100%;
        }
}


@media screen and (max-width: 533px) {


    #middleThree {
        display: none;
    }



    #middleThree2 {
        display: block;
        margin: 0 5px;
    }

        #middleThree2 div {
            margin-top: 5px;
            position: relative;
        }

            #middleThree2 div:nth-child(1) {
                margin-top: 8px;
            }

            #middleThree2 div div {
                height: 100%;
                position: absolute;
                top: 0px;
                width: 33.33%;
            }

                #middleThree2 div div:nth-child(2) {
                    left: 0;
                    width: 33%;
                }

                #middleThree2 div div:nth-child(3) {
                    left: 33%;
                    width: 33%;
                }

                #middleThree2 div div:nth-child(4) {
                    left: 66%;
                    width: 33%;
                }

        #middleThree2 img {
            width: 100%;
        }
}

@media screen and (max-width: 424px) {

    #middleTwo3 div:last-child img {
        width: 100%;
    }
}