#gifply {}
#gifply .cf:before,
#gifply .cf:after { content: " "; display: table; }
#gifply .cf:after { clear: both; }
#gifply .cf { *zoom: 1; }
#gifply img { max-width: 100%; height: auto; border: 5px solid #fff; vertical-align: top; -webkit-transition: opacity 350ms; transition: opacity 350ms; }
#gifply figure { width: 100%; margin: 0; float: left; padding: 10px; position: relative; cursor: pointer; }
#gifply figure:before,
#gifply figure:after { position: absolute; }
#gifply figure:before { top: 45%;  left: 45%; width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 30px; background-color: rgba(204, 209, 217, 0.3); font-family: 'sans-serif'; content: 'GIF'; text-align: center; line-height: 45px; font-size: 19px; color: #F5F7FA; }
#gifply figure:after { content: 'gif'; position: absolute; display: inline-block; width: 40px; text-align: center; top: 20px; right: 30px; font-size: 11px; font-weight: 600; padding: 5px; border-radius: 3px; color: #656D78; background-color: rgba(170, 178, 189, 0.1); text-transform: uppercase; }
#gifply figure.play:before { display: none; }
#gifply figure.play:after { color: #fff; background-color: #8CC152; }
#gifply .gifply-cont { width: 100%; height: auto; margin-top: 90px; margin-right: auto; margin-left: auto; -webkit-transition: opacity 350ms; transition: opacity 350ms; }