body {
}

.zitem {
    width:219px;
    height:219px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    margin:0;

    /* required to hide the image after resized */
    overflow:hidden;

    /* for child absolute position */
    position:relative;

    /* display div in line */
    float:left;
}

.zitem .caption {
    width:219px;
    height:30px;
    background:#000;
    color:#fff;
    font-weight:bold;

    /* fix it at the bottom */
    position:absolute;
    bottom:-1px; /* fix IE issue */
    left:0;

    /* hide it by default */
/*    display:none;     */

    /* opacity setting */
    filter:alpha(opacity=90);    /* ie  */
    -moz-opacity:0.9;    /* old mozilla browser like netscape  */
    -khtml-opacity: 0.9;    /* for really really old safari */
    opacity: 0.9;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption span {
    text-decoration:none;
    color:#fff;
    font-size:14px;
    font-weight: bold;
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:block;
}

.zitem img {
    border:0;

    /* allow javascript moves the img position*/
    position:absolute;
}

.btnRel{
    position: relative;
}

.btnAbs img{
    position: absolute;
    top: 195px;
    right: 4px;
    z-index: 1;
}

.mt40{
    margin-top:40px;
    margin-bottom: 60px;
}

.caption p{
    color:#fff !important;
}
.caption p:link{
    color:#fff !important;
}
.caption p:visited{
    color:#fff !important;
}
.caption p:hover{
    color:#fff !important;
}




.clear {
    clear:both;
}


@media screen and (max-width: 767px) {
    .zitem {
        width:44vw;
        height:44vw;
        margin:0;
    }
    .zitem .caption {
        width:100%;
        height:auto;
    
        /* fix it at the bottom */
        bottom:-1vw; /* fix IE issue */
    
    }
    .zitem .caption span {
        font-size: 3.4vw;
        padding:2vw 1vw;
    }
    .btnRel{
        height: 44vw;
    }
    .btnAbs img{
        top: auto;
        right: 1vw;
        bottom: 1vw;
        width: 50%!important;
    }
    .mt40{
        margin-top:8vw;
        margin-bottom: 15vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .clear {
        display: none;
    }
}