.hovereffect {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

    .hovereffect .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover .overlay {
        background-color: #d63348;
        opacity: 0.8;
    }

    .hovereffect h2, .hovereffect img {
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .hovereffect img {
        display: block;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .hovereffect:hover img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .hovereffect h2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: none;
    }

    .hovereffect a.info {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        text-transform: uppercase;
        color: #fff;
        border: 1px solid #fff;
        margin: 67px 0 0 0;
        background-color: transparent;
        opacity: 0;
        text-transform: uppercase;
        -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        font-weight: normal;
        height: 85%;
        width: 89%;
        position: absolute;
        top: -20%;
        left: 6%;
        padding-top: 80px;
        font-weight: bold;
        font-size: 14px;
    }

    .hovereffect:hover a.info {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.zoom {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

    .zoom .overlay {
        width: 100%;
        height: 18%;
        position: absolute;
        overflow: hidden;
        bottom: 0px;
        left: 0;
        opacity: 0;
        background: #d63348;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .zoom img {
        display: block;
        position: relative;
        transition: all .5s linear;
    }

    .zoom h4 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        background: none;
        transform: translatey(-100px);
        transition: all .2s ease-in-out;
    }

    .zoom h5 {
        text-transform: none;
        color: #fff;
        text-align: center;
        position: relative;
        background: none;
        transform: translatey(-100px);
        transition: all .2s ease-in-out;
    }


    .zoom a.info {
        text-decoration: none;
        display: inline-block;
        text-transform: uppercase;
        color: #fff;
        border: 1px solid #fff;
        background-color: transparent;
        opacity: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        margin: 0px 0 0;
        padding: 7px 14px;
    }

        .zoom a.info:hover {
            box-shadow: 0 0 5px #fff;
        }

    .zoom:hover img {
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .zoom:hover .overlay {
        opacity: 1;
    }

    .zoom:hover h4, .zoom:hover a.info {
        opacity: 1;
        transform: translatey(0);
    }

    .zoom:hover h5, .zoom:hover a.info {
        opacity: 1;
        transform: translatey(0);
    }

    .zoom:hover a.info {
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    .hovereffect a.info {
        margin: 59px 0 0 0;
        .zoom .overlay

{
    top: 75px;
}

}

.zoom h4 {
    padding-top: 5px;
}

.zoom .overlay {
    width: 100%;
    height: 23%;
    position: absolute;
    overflow: hidden;
    bottom: 0px;
    left: 0;
    opacity: 0;
    background: #d63348;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

}

@media (min-width: 1200px) {
    .hovereffect a.info {
        top: -15%;
    }
}