
.demo-3 {
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
    float:left;
}
.demo-3 li{width:100%; float:left;}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:0
}
.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 h1 {
    display:block;
    font-family:'Lato';
    font-size:1.1em;
    line-height:145%;
    margin:0;
	font-weight:300;
    color:#fff;
    text-align:left;
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:#A28560;
    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)
}

/* 440PX BREAPOINT */
@media (min-width: 27em){
.demo-3 li{width:50%;}
}

/* 580PX BREAPOINT */
@media (min-width: 36em){
.demo-3 figure h1{font-size:1.3em; margin-top:40px;}
}

/* 960PX BREAPOINT */
@media (min-width: 60em){
.demo-3 li{width:25%;}
.demo-3 figure h1{font-size:1.1em; margin-top:10px;}
}

/* 1280PX BREAPOINT */ 
@media (min-width: 80em){
.demo-3 figure h1{font-size:1.3em; margin-top:40px;}
}

/* 1366PX BREAPOINT */
@media (min-width: 85em){
.demo-3 figure h1{font-size:1.4em; margin-top:50px;}
}

/* 1600PX BREAPOINT */
@media (min-width: 100em){
.demo-3 figure h1{font-size:1.5em; margin-top:80px;}
}