/* CSS Document */
.vk_grid { position: relative; margin: 0 auto; width: 1200px; list-style: none; text-align: center; }
/* Common style */
.vk_grid figure.effect-light-line { position: relative; float: left; overflow: hidden; margin: 10px 30px 20px 0; width: 380px; height: 300px; background: #3085a3; text-align: center; cursor: pointer;  transition: All 0.3s ease-in-out; transform: scale3d(1, 1, 1); box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);}
.vk_grid figure.effect-light-line:nth-child(3n) { float:right !important; margin-right:0px !important; padding:0px !important; clear:right; }

.vk_grid figure.effect-light-line  img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; transition: All 0.3s ease-in-out; transform: scale3d(1, 1, 1);}
.vk_grid figure.effect-light-line:hover img { opacity: 0.2; transform: scale3d(1.05, 1.05, 1);}
.vk_grid figure.effect-light-line:hover {  /*margin-top: 5px; transform: scale3d(1.05, 1.05, 1);*/}
.vk_grid figure.effect-light-line  figcaption { font-size:16px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.vk_grid figure.effect-light-line  figcaption::before, .vk_grid figure figcaption::after { pointer-events: none; }
.vk_grid figure.effect-light-line  figcaption , .vk_grid figure.effect-light-line  figcaption> a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.vk_grid figure.effect-light-line  h2 { font-weight: normal;color:#fff; height:30px; width: 320px; line-height:30px;  font-size:18px; overflow:hidden; padding-top: 30%; padding-left:30px; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}
.vk_grid figure.effect-light-line  h2 span { font-weight: normal; }
.vk_grid figure.effect-light-line  h2, .vk_grid figure p { margin: 0; }
.vk_grid figure.effect-light-line  p { letter-spacing: 1px; height:60px; line-height:30px; font-size:14px; overflow:hidden;   padding: 20px 2.5em; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }}

figure.effect-light-line figcaption::before, figure.effect-light-line figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.35s; }
figure.effect-light-line figcaption::before { border-top: 2px solid #fe0; border-bottom: 2px solid #fe0; -webkit-transform: scale(0, 1); transform: scale(0, 1); }
figure.effect-light-line figcaption::after { border-right: 2px solid #fe0; border-left: 2px solid #fe0; -webkit-transform: scale(1, 0); transform: scale(1, 0); }
figure.effect-light-line:hover figcaption::before, figure.effect-light-line:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-light-line:hover h2, figure.effect-light-line:hover p {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }


figure.effect-light-line figcaption::before, figure.effect-light-line figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.35s; }