body{
  padding: 0 2%;
}

header{
  .contact{
    z-index: 9999;
    position: fixed;
    top: 20px;
    right: 2%;
    transform: scale(1);
    transition: transform 0.5s ease;
    cursor: pointer;
    &:hover{
      transition: transform 0.5s ease;
      transform: scale(0.9);
    }
    &.open{
      transform: scale(15);
      transition: transform 0.5s ease;
      h3{
        color: transparent;
        transition: visibility 0.5 ease;
      }
      img{
        animation: rotation 12s infinite linear;
      }
      & + .txt{
          position: fixed;
          top: 190px;
          text-align: center;
          line-height: 1.5rem;
          z-index: 9999;
          animation: translateright 1s ease forwards;
      }
    }
    &.close{
      transform: scale(1);
      transition: transform 0.5s 0.1s ease;
      & + .txt{
          position: fixed;
          top: 190px;
          text-align: center;
          line-height: 1.5rem;
          z-index: 9999;
          animation: translateleft 1s ease forwards;
      }
      h3{
        color: white;
        transition: color 0.5s 0.4s ease;
      }
      &:hover{
        transition: transform 0.5s ease!important;
        transform: scale(0.9)!important;
      }
    }
    img{
      animation: rotation 6s infinite linear;
    }
    h3{
      transform: rotate(35deg);
      position: absolute;
      top: 33px;
      left: 20px;
    }
    & + .txt{
        position: fixed;
        right: -200px;
        p{
      }
    }
  }
  h2{
    margin-left: 10px;
  }
}

.card{
  width: calc(100% / 3);
  padding: 0 10px;
  line-height: 0.8!important;
  .card-header{
    margin-top: 10px;
    display: inline-flex;
    & > div{
      margin-right: 5px;
      & > a{
        vertical-align:  baseline;
      }
      & > time{
        vertical-align:  baseline;
      }
    }
  }
}