@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}
html,body {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
}

/* line 24, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
    .gallery {
        padding: 30px;
        margin: 20px auto;
        min-width: 400px;
        border: 1px solid #ccc;
        width: 90%;
    }
    .gallery ul{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;/* 3 */
        align-items: center; 
    }
    .gallery li {
        list-style-type: none;
        font-size: 1.4rem;
        margin: 15px;
        position: relative;
        background: #000;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid #ccc;
        width: 300px;
        height: 300px;
        min-width: 300px;
    }
    .gallery a{
        text-decoration: none;
    }
    .gallery figcaption {
        font-weight: 700;
        display: block;
        background: rgb(0,0,0);
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        margin: 0 auto;
        color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: transform .8s .1s,-webkit-box-shadow .8s,opacity .3s;
        -o-transition: transform .8s .1s,-o-box-shadow .8s,opacity .3s;
        transition: transform .8s .1s,box-shadow .8s,opacity .3s;
        -webkit-transform-origin: 0 50%;
        -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        -o-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transform: perspective(400px) rotateY(90deg) translate3d(0,0,10px);
        -ms-transform: perspective(400px) rotateY(90deg) translate3d(0,0,10px);
        -o-transform: perspective(400px) rotateY(90deg) translate3d(0,0,10px);
        transform: perspective(400px) rotateY(90deg) translate3d(0,0,10px);
        -webkit-box-shadow: inset 0 0 5px rgba(50,50,50,.5);
        box-shadow: inset 0 0 5px rgba(50,50,50,.5);
        opacity: 0;
    }
    .gallery figcaption div{
        padding:0 12px;
    }
    .gallery figcaption h2 {
        font-size: 2.0rem;
        padding-bottom: 1rem;
    }
    .gallery figcaption p {
        font-size: 1.4rem;
        line-height: 1.6;
    }
        
    .gallery li:hover figcaption {
        -webkit-transform: none;
        -ms-transform:  none;
        -o-transform:  none;
        transform: none ;
        opacity:1;
    }
    .gallery figcaption div{
        position: relative;
        top:50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .gallery img {
        height: auto;
        position: relative;
        display: block;
        z-index: 1;
        width: 100%;
        height: auto;
        -webkit-transition: transform .4s .1s,opacity .4s;
        -o-transition: transform .4s .1s,opacity .4s;
        transition: transform .4s .1s,opacity .4s;
        -webkit-transform-origin: 100% 50%;
        -moz-transform-origin:100% 50%;
        -ms-transform-origin:100% 50%;
        -o-transform-origin: 100% 50%;
        transform-origin:100% 50%;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        -webkit-box-shadow: 0 2px 5px rgba(50,50,50,.5);
        box-shadow:  0 2px 5px rgba(50,50,50,.5);
    }
    .gallery li:hover img {
        -webkit-transform: perspective(400px) rotateY(-90deg) ;
        -ms-transform:perspective(400px) rotateY(-90deg) ;
        -o-transform:perspective(400px) rotateY(-90deg) ;
        transform: perspective(400px) rotateY(-90deg) ;
        opacity: 0;
    }