.effect {
    background-color: #000;
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 7px;
}

.effect img {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s;
    transition: opacity 0.35s ease 0s;
}

.effect:after {
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    border-radius: 7px;
}

.effect:before {
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    border-radius: 7px;
}

.effect:hover:before, .effect:hover:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.effect:before, .effect:after {
    bottom: 5px;
    content: "";
    left: 5px;
    opacity: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    z-index: 1;
}

.main-featured-categories {
    margin: 10px 0px 25px 0px;
}

@media(max-width: 400px) {
    .main-featured-categories {
        margin: 0px 0px 25px 0px;
    }
}

.main-featured-categories .card {
    margin-bottom: 10px;
}