.demo-3 {
    position:relative;
    width:160px;
    height:203px;
    overflow:hidden;
    float:left;
    margin-right:62px;
	text-align:center;
}

.demo-3 figure {
    margin:0;
    padding:0;
    /*position:relative;*/
    cursor:pointer;
    margin-left:0px
}

.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:0px 0px;
}

.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:16px;
    text-align:center;
	line-height:22px;
}

.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:13px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}

.demo-3 figure a {color:#FFFFFF;}

.demo-3 figure figcaption {
    top:0;
    left:0;
    width:160px;
    height:161px;
    padding:20px 20px;
    background-color:rgba(00,00,00,0.7);
	border-radius:80px;
    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
}

.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
	
}

.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}



/* =================== demo 4 =================== */

.demo-4 {
    position:relative;
    width:339px;
    height:137px;
    overflow:hidden;
    float:left;
    margin-right:9px
}

.demo-4 figure {
    margin:0;
    padding:0;
    /*position:relative;*/
    cursor:pointer;
    margin-left:0px
}

.demo-4 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:0px 0
}

.demo-4 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.demo-4 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:18px;
    text-align:left
}

.demo-4 figure p {
    display:block;
    font-family:'Lato';
    font-size:13px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}

.demo-4 figure a {color:#FFFFFF;}

.demo-4 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:20px 20px;
    background-color:rgba(26,76,110,0.7);
    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
}

.demo-4 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo-4 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

.demo-4 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}