.main h1.page-title {
  color: #4f4f4f;
  font-weight: bold;
  text-align: center;
  font-family: "STSong";
  font-size: 32px;
  margin-top: 48px; }
.main h4.page-sub-title {
  color: #b3b3b3;
  text-align: center;
  font-weight: lighter;
  position: relative;
  padding-top: 5px; }
  .main h4.page-sub-title:before {
    display: block;
    content: '';
    position: absolute;
    width: 180px;
    height: 2px;
    top: 0px;
    left: 50%;
    margin-left: -90px;
    background: #2fb678; }
.main p.description {
  margin-top: 20px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: #676767; }
.main .product-container {
  margin-top: 40px; }
  .main .product-container figure {
    display: block;
    float: left;
    width: 286px;
    height: 286px;
    position: relative;
    box-shadow: 1px 0 10px 0 rgba(181, 181, 181, 0.2);
    margin: 0px calc((33.33% - 286px)/2); }
  .main .product-container figure.product {
    cursor: pointer;
    z-index: 1; }
    .main .product-container figure.product > img {
      max-width: 100%;
      position: relative;
      display: block;}
    .main .product-container figure.product figcaption {
      font-size: 16px;
      color: #ffffff;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%; }
      .main .product-container figure.product figcaption:before, .main .product-container figure.product figcaption:after {
        pointer-events: none; }
      .main .product-container figure.product figcaption:before {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(top,rgba(181,181,181,0) 0%, rgba(181,181,181,0.3) 150%);
        background: linear-gradient(to bottom,rgba(181,181,181,0) 0%, rgba(181,181,181,0.3) 150%);
        opacity: 0;
        content: ''; }
      .main .product-container figure.product figcaption > a {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1000;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0px;
        opacity: 0; }
      .main .product-container figure.product figcaption img,  .main .product-container figure.product figcaption svg {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        vertical-align: top; }
      .main .product-container figure.product figcaption h4 a:link, .main .product-container figure.product figcaption a:visited {
        position: absolute;
        top: 300px;
        left: 0px;
        text-align: center;
        width: 100%;
        text-decoration: none;
        font-weight: normal;
        color: #000;
        margin: 0px;
        transition: transform .35s, color .35s;
        -webkit-transition: -webkit-transform .35s, color .35s; }
      .main .product-container figure.product figcaption span.pro-name {
        font-weight: bold;
        margin-right: 12px; }
      .main .product-container figure.product figcaption:before, .main .product-container figure.product figcaption p {
        transition: opacity .35s, transform .35s;
        -webkit-transition: opacity .35s, -webkit-transform .35s; }
      .main .product-container figure.product figcaption p {
        position: absolute;
        bottom: 10px;
        left: 0px;
        padding: 0px 1em;
        opacity: 0;
        text-indent: 2em;
        margin: 0px;
        line-height: 24px;
        transform: translate3d(0px, 10px, 0px);
        -webkit-transform: translate3d(0px, 10px, 0px); }
        .main .product-container figure.product figcaption p span {
          color: #48bef5;
          font-size: 14px;
          margin-left: 14px; }
      .main .product-container figure.product figcaption h4:hover a:hover {
        color: #484c61;
        text-decoration: none;
        outline: none; }
    .main .product-container figure.product:hover figcaption::before, .main .product-container figure.product:hover p {
      opacity: 1;
      transform: translate3d(0px, 0px, 0px);
      -webkit-transform: translate3d(0px, 0px, 0px); }
    .main .product-container figure.product.oola-product:hover figcaption::before {
      opacity: 0; }
  .main .product-container figure.non-product {
    background-color: rgba(255, 255, 255, 0.08);
    text-align: center; }
    .main .product-container figure.non-product:before {
      content: '';
      display: block;
      position: absolute;
      width: 270px;
      height: 270px;
      border: 2px dashed #b2b2b2;
      top: 50%;
      left: 50%;
      margin-top: -137px;
      margin-left: -137px; }
    .main .product-container figure.non-product img {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -76px;
      margin-left: -63px; }
    .main .product-container figure.non-product figcaption {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2; }
      .main .product-container figure.non-product figcaption p {
        margin-top: 140px; }

/*# sourceMappingURL=product.css.map */