.grid *, .grid *:after, .grid *:before {   
-webkit-box-sizing: border-box;   
-moz-box-sizing: border-box;   
box-sizing: border-box;   
   }   

   .grid a {   
color: #888;   
text-decoration: none;   
   }   
   .grid {   
padding: 20px 20px 100px 20px;   
max-width: 1300px;   
margin: 0 auto;   
list-style: none;   
text-align: center;   
   }   
   .grid li {   
display: inline-block;   
width: 440px;   
margin: 0;   
padding: 20px;   
text-align: left;   
position: relative;   
   }   
   .grid figure {   
margin: 0;   
position: relative;   
   }   
   .grid figure img {   
max-width: 100%;   
display: block;   
position: relative;   
   }   
   .grid figcaption {   
position: absolute;   
top: 0;   
left: 0;   
padding: 20px;   
background: #2c3f52;   
color: #ed4e6e;   
   }   
   .grid figcaption h3 {   
margin: 0;   
padding: 0;   
color: #fff;   
   }   
   .grid figcaption a {   
text-align: center;   
padding: 5px 10px;   
border-radius: 2px;   
display: inline-block;   
background: #ed4e6e;   
color: #fff;   
   }   
   /* Individual Caption Styles */   

   /* Caption Style 1 */   
.cs-style-1 figcaption {   
height: 100%;   
width: 100%;   
opacity: 0;   
text-align: center;   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
backface-visibility: hidden;   
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;   
-moz-transition: -moz-transform 0.3s, opacity 0.3s;   
transition: transform 0.3s, opacity 0.3s;   
   }   
   .no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption {   
opacity: 1;   
-webkit-transform: translate(15px, 15px);   
-moz-transform: translate(15px, 15px);   
-ms-transform: translate(15px, 15px);   
transform: translate(15px, 15px);   
   }   
   .cs-style-1 figcaption h3 {   
margin-top: 70px;   
   }   
   .cs-style-1 figcaption span {   
display: block;   
   }   
   .cs-style-1 figcaption a {   
margin-top: 30px;   
   }   
   /* Caption Style 2 */   
.cs-style-2 figure img {   
z-index: 10;   
-webkit-transition: -webkit-transform 0.4s;   
-moz-transition: -moz-transform 0.4s;   
transition: transform 0.4s;   
   }   
   .no-touch .cs-style-2 figure:hover img, .cs-style-2 figure.cs-hover img {   
-webkit-transform: translateY(-90px);   
-moz-transform: translateY(-90px);   
-ms-transform: translateY(-90px);   
transform: translateY(-90px);   
   }   
   .cs-style-2 figcaption {   
height: 90px;   
width: 100%;   
top: auto;   
bottom: 0;   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
backface-visibility: hidden;   
   }   
   .cs-style-2 figcaption a {   
position: absolute;   
right: 20px;   
top: 30px;   
   }   
   /* Caption Style 3 */   
.cs-style-3 figure {   
overflow: hidden;   
   }   
   .cs-style-3 figure img {   
-webkit-transition: -webkit-transform 0.4s;   
-moz-transition: -moz-transform 0.4s;   
transition: transform 0.4s;   
   }   
....