.flip {
    top: 50px;
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    float:left;
    margin-bottom: 100px;
}
.flip li {
    list-style-type:none;
}
.flip figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    
}
.flip figure img {
    display:block;
    position:relative;
    z-index:10;
    margin: 0 0;
    width: 90%;    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
}
.flip figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.flip figure h2 {    
    color:#fff;
    font-size:17px;
    text-align:left;
    font-weight: bold;
}
.flip figure p {
    display:block;    
    font-size:16px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align: justify;
}
.flip figure figcaption {
    top:0;
    left:0;
    width: 90%;
    height:100%;
    padding:10% 10%;    
    
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.flip figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s    
}
.flip figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)    
}
.flip figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}
.flip .kredit figcaption {
    background-color:#b2b2b2;
    border-radius: 25px;
}
.flip .deposito figcaption {
    background-color:#cd9933;
    border-radius: 25px;
}
.flip .tabungan figcaption {
    background-color:#005caa;
    border-radius: 25px;
}
.flip .permohonan figcaption {
    background-color:#2f7805;
    border-radius: 25px;
}

@media (max-width: 1200px) {
     
}

@media (max-width: 900px) {
 .flip figure figcaption {
        padding: 0;
    }
    .flip figure figcaption .title {
        margin-left:  20px;
        margin-top:  20px;
    }
    
    .flip figure figcaption .description {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: -20px;
    }
}

@media (max-width: 767px) {

}

@media (max-width: 550px) {
    .flip figure figcaption {
        padding: 0;
    }
    .flip figure figcaption .title {
        margin-left:  20px;
        margin-top:  20px;
    }
    
    .flip figure figcaption .description {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: -20px;
    }
    
    .flip {margin-bottom: 80px;}
}