burodesformes/user/themes/gilles_acezat/scss/theme/all.scss

html, body{
  overflow: hidden;
}

.card{
  width: calc((100% / 3) - (10px));
  margin-bottom: 7px;
  .card-header{
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    & > div {
      margin-right: 5px;
    }
  }
}

.contact{
  z-index: 999;
  position: fixed;
  right: 0;
  top: 0;
  width: 90px;
  height: 90px;
  -webkit-transition: width 0.5s ease, margin 0.5s;
  transition: width 0.5s ease, margin 0.5s;
  & > svg{
    -webkit-animation: rotation 12s infinite linear;
    animation: rotation 12s infinite linear;
  }
  h3{
    cursor: pointer;
    z-index: 999;
    position: fixed;
    top: 34px;
    right: 37px;
    color: white;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: transform 0.5s ease;
  }
  .txt{
    text-align: right;
    position: fixed;
    right: -200%;
    left: 200%;
    -webkit-transition: color 0.5s ease, right 0s;
    color: transparent;
    transition: color 0.5s ease, right 0s;
    p{
      margin-top: 1rem;
      font-size: 1.5rem;
      line-height: 2rem;
      a{
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      em{
        font-size: 1rem;
      }
      &:nth-last-of-type(2){
        font-size: 1.2rem;
        line-height: 1.6rem;
      }
    }
  }
  &.open{
    width: 2000px;
    height: auto;
    margin: -550px;
    -webkit-transition: width 0.5s ease, margin 0.5s;
    transition: width 0.5s ease, margin 0.5s;
   .txt{
     color: white;
    -webkit-transition: color 0.5s ease, right 0s;
     transition: color 0.5s ease, right 0s;
     text-align: right;
     position: fixed;
     top: 50px;
     left: auto;
     right: 70px;
     width: 650px;
     .reso{
        & > div{
          opacity: 1;
          -webkit-transition: opacity 0.5s 0.5s ease;
          transition: opacity 0.5s 0.5s ease;
        }
      }
    }
    h3{
      color: transparent;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: transform 0.5s ease;
    }
  }
  &.close{
    width: 90px;
    height: 90px;
     .txt{
      color: transparent;
      text-align: right;
      position: fixed;
      right: -200%;
      -webkit-transition: color 0.5s ease, right 0s;
      transition: color 0.5s ease, right 0s;
    }
    h3{
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: transform 0.5s ease;
    }
  }
}