.chiudi_active{
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.chiudi_to_sx{
    animation: 1.2s chiudi_to_sx;
    animation-timing-function: cubic-bezier(.48,.61,.28,.99);
    animation-fill-mode: forwards;
}
  @keyframes chiudi_to_sx {
    0% { clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%)}
    100% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
  }

.apri_to_sx{
  animation: 1.2s apri_to_sx;
  animation-timing-function: cubic-bezier(.48,.61,.28,.99);
  animation-fill-mode: forwards;
}
  @keyframes apri_to_sx {
    0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) }
  }


.chiudi_to_dx{
  animation: 1.2s chiudi_to_dx;
  animation-timing-function: cubic-bezier(.48,.61,.28,.99);
  animation-fill-mode: forwards;
}
  @keyframes chiudi_to_dx {
    0% { clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%)}
    100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
  }

.apri_to_dx{
  animation: 1.2s apri_to_dx;
  animation-timing-function: cubic-bezier(.48,.61,.28,.99);
  animation-fill-mode: forwards;
}

  @keyframes apri_to_dx {
    0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%) }
    100% { clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%)}
  }