.hide {
  display: none !important; }

.works-grid {
  max-width: 960px;
  margin: 33px auto; }
  @media screen and (max-width: 1068px) {
    .works-grid {
      max-width: 100%; } }
  .works-grid ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media screen and (max-width: 1068px) {
      .works-grid ul {
        /*justify-content:space-between;*/ } }
  .works-grid li {
    list-style: none;
    padding: 0 0;
    position: relative;
    width: 450px;
    width: 49%;
    height: 325px;
    /*        @include mQ(1068px) {
            width: (96%/2);
            height: (100vw * .33);
            padding: 0;
        }*/
    cursor: pointer;
    -webkit-box-sizing: content-box;
    box-sizing: content-box; }
    @media screen and (max-width: 799px) {
      .works-grid li {
        width: 48%;
        height: 33vw; } }
    @media screen and (max-width: 599px) {
      .works-grid li {
        width: 100%;
        height: 60vw; } }
    .works-grid li:nth-child(2n) {
      /* padding-right: 0;*/ }
    .works-grid li a {
      display: block;
      width: 100%;
      height: 100%; }
    .works-grid li .bgwork {
      pointer-events: none;
      width: 450px;
      width: 49%;
      height: 325px;
      position: absolute; }
      @media screen and (max-width: 1068px) {
        .works-grid li .bgwork {
          width: 48%; } }
      @media screen and (max-width: 799px) {
        .works-grid li .bgwork {
          width: 48%; } }
      @media screen and (max-width: 599px) {
        .works-grid li .bgwork {
          width: 100%; } }
      .works-grid li .bgwork .bgimg {
        -webkit-transform: matrix(0.145, 0, 0, 0.145, -120, -170) rotate(-45deg);
        -ms-transform: matrix(0.145, 0, 0, 0.145, -120, -170) rotate(-45deg);
        transform: matrix(0.145, 0, 0, 0.145, -120, -170) rotate(-45deg);
        -webkit-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out; }
        .works-grid li .bgwork .bgimg.show {
          -webkit-transform: matrix(0.55, 0, 0, 0.55, -100, -140) rotate(0);
          -ms-transform: matrix(0.55, 0, 0, 0.55, -100, -140) rotate(0);
          transform: matrix(0.55, 0, 0, 0.55, -100, -140) rotate(0); }
          @media screen and (max-width: 890px) {
            .works-grid li .bgwork .bgimg.show {
              -webkit-transform: matrix(0.5, 0, 0, 0.5, -100, -170) rotate(0);
              -ms-transform: matrix(0.5, 0, 0, 0.5, -100, -170) rotate(0);
              transform: matrix(0.5, 0, 0, 0.5, -100, -170) rotate(0); } }
          @media screen and (max-width: 680px) {
            .works-grid li .bgwork .bgimg.show {
              -webkit-transform: matrix(0.4, 0, 0, 0.4, -120, -180) rotate(0);
              -ms-transform: matrix(0.4, 0, 0, 0.4, -120, -180) rotate(0);
              transform: matrix(0.4, 0, 0, 0.4, -120, -180) rotate(0); } }
          @media screen and (max-width: 599px) {
            .works-grid li .bgwork .bgimg.show {
              -webkit-transform: matrix(0.55, 0, 0, 0.55, -100, -150) rotate(0);
              -ms-transform: matrix(0.55, 0, 0, 0.55, -100, -150) rotate(0);
              transform: matrix(0.55, 0, 0, 0.55, -100, -150) rotate(0); } }
    .works-grid li .dwork {
      pointer-events: none;
      position: absolute; }
      .works-grid li .dwork img {
        max-width: 300px;
        max-width: 100%;
        pointer-events: none; }
        @media screen and (max-width: 1068px) {
          .works-grid li .dwork img {
            max-width: 100%;
            width: 100%; } }
      .works-grid li .dwork h2 {
        font-family: "UniNeue_Regular", sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #000;
        line-height: 1.18em;
        margin: 10px 0 35px !important;
        pointer-events: none;
        -webkit-transition: color 0.4s ease-out;
        -o-transition: color 0.4s ease-out;
        transition: color 0.4s ease-out; }
      .works-grid li .dwork .imgwork {
        position: relative; }
      .works-grid li .dwork .overlay {
        background: #EB493E;
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transition: opacity .6s ease-in-out;
        -o-transition: opacity .6s ease-in-out;
        transition: opacity .6s ease-in-out; }
    .works-grid li:hover .dwork h2 {
      color: #EB493E; }
    .works-grid li:hover .dwork .overlay {
      opacity: .5; }
  .works-grid:after {
    content: "";
    display: block;
    clear: both; }