gilles-acezat/user/themes/gilles_acezat/scss/theme/_home.scss

.blog{
  #start{
    .cat-list {
        width: 100%;
        z-index: 999;
        left: -100%;
        &::before{
          display: block;
          content: " ";
          width: 0%;
          height: 1px;
          background: black;
        }
        &::after {
          display: block;
          content: " ";
          width: 0%;
          height: 1px;
          background: black;
        }
        ul {
          opacity: 0;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          margin: 10px 0;
          .btn-group{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-right: 10px;
            &::after{
              width: 5px;
              content: " ";
            }
            &:hover{
              &::after{
                content: "\002022";
              }
            }
            input{
              display: none;
            }
          }
        }
      }
    #items{
      .full-works{
        .card{
          width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
        }
      }
    }
  }
  .down{
    .cat-list{
      &::after{
        -webkit-animation: showborder 2.5s 1.6s ease forwards;
                animation: showborder 2.5s 1.6s ease forwards;
      }
      ul{
        -webkit-animation: ultranslate 1s 2.5s ease forwards;
                animation: ultranslate 1s 2.5s ease forwards;
      }
    }
  }
}