.our-range-blocks{
    margin-bottom: 40px;
}

.our-range-blocks .wrap{
    width: 100%;
}

.our-range-blocks .row .col{
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.our-range-blocks img{
    display: block;
    height: auto;
    width: 100%;
}

.our-range-blocks .feautre-image{
    position: absolute;
    left: 0;
    top: 0;
}

.our-range-blocks .content{
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    position: absolute;
    left: 50%;
    top: 50%;
}

.our-range-blocks .content p{
    margin: 0 auto 20px auto;
    max-width: 400px;
}

.our-range-blocks .content .button{
    margin: 0 auto;
}

.our-range-blocks .row:nth-child(2n+1) .col:nth-child(odd){
    float: right;
}

.our-range-blocks .row[data-variant="hessian"] .col{
    background: url('../../assets/images/hessian-80-min.jpg') repeat center center rgba(255,255,255,0.9);
    color: #ffffff;
}




@media screen and (max-width: 1340px) {
    .our-range-blocks .content img{
        display: none;
    }
}


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

    .our-range-blocks .row{
        margin: 20px 20px 0 20px;
        position: relative;
        display: block;
    }

    .our-range-footer-blocks .row{
        margin: 0 20px 20px 20px;
    }

    .our-range-blocks .row .col{
        background-color: rgba(255,255,255,0.9);
        width: 100%;
        float: none;
    }

    .our-range-blocks .row .col:nth-child(2) img{
        display: none;
    }

    .our-range-blocks .row .col:nth-child(2){
        transform: translate(-50%, -50%);
        max-width: calc(100% - 40px);
        background-image: none;
        position: absolute;
        min-width: 360px;
        color: #51626F;
        padding: 40px;
        height: auto;
        width: auto;
        margin: 0;
        left: 50%;
        top: 50%;
    }

    .our-range-blocks .row .content{
        transform: translate(0, 0);
        position: relative;
        margin: 0 auto;
        width: auto;
        left: 0;
        top: 0;
    }

}

@media screen and (max-width: 560px) {
    .our-range-blocks .row .col:nth-child(2){
        padding: 20px;
    }

    .our-range-blocks .row .content h3{
        font-size: 24px;
    }
}

@media screen and (max-width: 480px) {
    
    .our-range-footer-blocks .row:last-child .content{
        padding-bottom: 60px;
    }

    .our-range-blocks .row .col:nth-child(2){
        transform: translate(0, 0);
        padding: 40px 20px;
        position: relative;
        min-width: auto;
        left: 0;
        top: 0;
    }

    .our-range-blocks .row[data-variant="hessian"] .col{
        background: url('../../assets/images/hessian.jpg') repeat rgba(255,255,255,0.9);
        color: #ffffff;
    }

    .our-range-blocks .row .col:nth-child(2) .content img{
        display: block;
    }
}