.pd-preview-box { margin: 15px 0; position: relative; }
.pd-preview-box:before { transition: all .25s; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; }
.pd-preview-box:after { transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; }
.pd-preview-box .pd-preview-box-title { font-size: 16px; margin-bottom: 4px; }
.pd-preview-box .pd-preview-box-content { padding: 15px 15px 0 15px; background-color: #f5f5f5; overflow: hidden; }
.pd-preview-box .pd-preview-box-content img {
    display: block; padding: 10px 10px 0 10px; width: 100%; background-color: #fff;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .2); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .2); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .2);
}
.pd-preview-box:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; }
.pd-preview-box:hover:before { background-color: rgba(0, 0, 0, .5); }
.pd-preview-box:after { content: '\e114'; font-family: lined-icons; font-size: 24px; color: rgba(0, 0, 0, 0); display: block; position: absolute; top: 43%; left: 0; right: 0; text-align: center; cursor: pointer; }
.pd-preview-box:hover:after { color: #fff; }

.pd-preview-dialog { position: relative; }
.pd-preview-dialog .pd-preview-dialog-content { padding: 30px 30px 0 30px; background-color: #f5f5f5; overflow: hidden; }
.pd-preview-dialog .pd-preview-dialog-content img {
    width: 100%;
    display: block; padding: 20px 20px 0 20px; background-color: #fff;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, .2); -moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, .2); -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, .2);
}

.pd-preview-box { width: 100%; max-width: 500px; margin: 0 auto 15px auto; }