/* Common style */



.grid figcaption { position: absolute; top: 0; z-index: 11; padding: 10px; width: 100%; height: 100%; text-align: center; }
.grid figcaption h2 { bottom: -23px; color: #3498db; font-size: 12px; font-weight: 300; letter-spacing: 1px; margin: 0 0 10px; position: absolute; right: 0; text-transform: uppercase; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; visibility: hidden; width: 98px; }
.grid figcaption h2 { -webkit-transform: translateY(00px); transform: translateY(0px); }
.grid figure button { position: absolute; padding: 4px 20px; border: none; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; }
.grid figcaption, .grid figcaption h2 .grid figure button { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Style for SVG */
.grid svg { height: 100%; left: 0; position: absolute; top: -1px; width: 100%; z-index: 10;border-radius: 10px; }
.grid svg path { fill: rgba(0,0,0,0.5); }
/* Hover effects */

.grid a:hover figure img { opacity: 1; }
.grid a:hover figcaption h2 { -webkit-transform: translateY(-25px); transform: translateY(-25px); visibility: visible; }
/* Individual styles */
.demo-1 body { background: #3498db; }
.demo-1 .grid figure button, .demo-3 .grid figure button { top: 50%; left: 50%; border: 3px solid #fff; background: transparent; color: #fff; opacity: 0; -webkit-transform: translateY(-50%) translateX(-50%) scale(0.25); transform: translateY(-50%) translateX(-50%) scale(0.25); }
.demo-1 .grid a:hover figure button, .demo-3 .grid a:hover figure button { opacity: 1; -webkit-transform: translateY(-50%) translateX(-50%) scale(1); transform: translateY(-50%) translateX(-50%) scale(1); }
.demo-2 .grid figcaption h2 { color: #fff; }
.demo-2 { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.demo-2 .grid figure button { background: #fff none repeat scroll 0 0; bottom: 0; visibility: hidden; padding: 2px; right: 0; width: 50%; -webkit-transform: translateY(0%); transform: translateY(0%); }
.demo-2 .grid a:hover figure button { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; visibility: visible; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.demo-2 .grid figcaption h2, .demo-2, .demo-3 .grid figcaption h2, .demo-3 { -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445); }
.demo-2 .grid a:hover figcaption p, .demo-3 .grid a:hover figcaption p { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; }
.demo-3 body { background: #52be7f; }
.demo-3 .grid figcaption h2 { color: #52be7f; }
.demo-3 .grid a:hover figcaption h2 { -webkit-transform: translateY(5px); transform: translateY(5px); }