html, body{
  overflow: hidden;
}

.blog{
  height: 100%;
  &.down{
    height: 5rem;
  }
}

header{
  .contact{
    width: 90px;
    height: auto;
    z-index: 999;
    position: fixed;
    top: 0px;
    right: 0px;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    cursor: pointer;
    &:hover{
      -webkit-transition: -webkit-transform 0.5s ease;
      transition: -webkit-transform 0.5s ease;
      transition: transform 0.5s ease;
      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
    svg{
      cursor: pointer;
      -webkit-animation: rotation 6s infinite linear;
              animation: rotation 6s infinite linear;
    }
    h3{
      color: white;
      -webkit-transform: rotate(35deg);
              transform: rotate(35deg);
      position: absolute;
      top: 35px;
      left: 19px;
    }
    .txt{
        position: fixed;
        right: -200px;
        display: none;
    }
    &.open{
      -webkit-transform: scale(15);
              transform: scale(15);
      height: auto;
      -webkit-transition: -webkit-transform 0.5s ease;
      transition: -webkit-transform 0.5s ease;
      transition: transform 0.5s ease;
      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
      h3{
        color: transparent;
        left: 500px;
        -webkit-transition: visibility 0.5 ease left 1s ease;
        transition: visibility 0.5 ease left 1s ease;
      }
      svg{
        -webkit-animation: rotation 12s infinite linear;
                animation: rotation 12s infinite linear;
      }
      & + .txt{
          position: fixed;
          top: 190px;
          text-align: center;
          line-height: 1.5rem;
          z-index: 9999;
          -webkit-animation: translateright 1s ease forwards;
                  animation: translateright 1s ease forwards;
      }
    }
    &.close{
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transition: -webkit-transform 0.5s 0.1s ease;
      transition: -webkit-transform 0.5s 0.1s ease;
      transition: transform 0.5s 0.1s ease;
      transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
      & + .txt{
          top: 190px;
          text-align: center;
          line-height: 1.5rem;
          z-index: 9999;
          -webkit-animation: translateleft 1s ease forwards;
                  animation: translateleft 1s ease forwards;
      }
      h3{


        -webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
        transition: color 0.5s 0.5s ease, left 0.5s ease;
      }
      &:hover{
        -webkit-transition: -webkit-transform 0.5s ease!important;
        transition: -webkit-transform 0.5s ease!important;
        transition: transform 0.5s ease!important;
        transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
        -webkit-transform: scale(0.9)!important;
                transform: scale(0.9)!important;
      }
    }
  }
}

.card{
  width: calc((100% / 3));
  line-height: 0.8rem!important;
  .card-header{
    margin-top: 10px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    & > div{
      margin-right: 5px;
    }
  }
}


@media screen and (max-width: 960px) {
  .works-mea{
    & > div:last-child{
      display: none;
    }
  }
  .card{
    width: calc((100% / 2) - 5px );
  }

}

@media screen and (max-width: 600px) {
  .works-mea{
    & > div:nth-child(2){
      display: none;
    }
  }
  .card{
    width: 100%;
  }
}