@font-face { font-weight: normal; font-style: normal; font-family: 'feathericons'; src: url('../fonts/feathericons/feathericons.eot?-8is7zf'); src: url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),  url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),  url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),  url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg'); }
.grid { overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; }
/* Common style */
.grid figure { position: relative; z-index: 1; display: inline-block; overflow: hidden;  width:24%; height: 200px; margin-right:1.3%; margin-bottom:15px; float:left; cursor: pointer; }
.grid figure img { position: relative; display: block; width:100%; height:100%; opacity: 0.2; }
.grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.grid figure figcaption, .grid figure 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 */
.grid figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.grid figure h2 { word-spacing: -0.15em; font-weight: 300; font-size:24px }
.grid figure h2 span { font-weight: 800; }
.grid figure h2, .grid figure p { margin: 0; }
.grid figure p { letter-spacing: 1px; font-size: 68.5%; }
/* Individual effects */
@font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src: url('../fonts/codropsicons/codropsicons.eot'); src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),  url('../fonts/codropsicons/codropsicons.woff') format('woff'),  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); }
*, *:after, *:before {border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }

figure { margin: 0; }

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby { background-color: #000; }
figure.effect-ruby img { opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.15); transform: scale(1.15); }
figure.effect-ruby:hover img { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-ruby h2 { margin-top: 20%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
figure.effect-ruby p { margin: 1em 0 0; padding: 1em; border: 1px solid #fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 20px, 0) scale(1.1); transform: translate3d(0, 20px, 0) scale(1.1); }
figure.effect-ruby:hover h2 { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }
figure.effect-ruby:hover p { opacity: 1; -webkit-transform: translate3d(0, -30px, 0) scale(1); transform: translate3d(0, -30px, 0) scale(1); }