.LetterH{
    display: none;
}

/*@keyframes rotate {*/
/*    0% {*/
/*      transform: rotate(0)*/
/*    }*/
/*    100% {*/
/*      transform: rotate(90deg)*/
/*    }*/
/*  }*/

/*.rot_leter {*/
/*    animation: rotate 2s;*/
    /* background-color:#eee;
    width: 200px;
    height: 200px; */
/*  }*/

  /* #letter_K{
    display: none;
    transform-origin: center center;
    transform: rotate(0deg);
    transition: transform 2s;
} */

/* .rot{
    display: inline;
    
    transform-origin: center center;
    transform: rotate(-90deg);
    transition: transform 2s;
  }  
  
.rotback{
    transform-origin: center center; 
    transform: rotate(0deg);
    transition: transform 2s;
  } */

  #svg5{
    width: 70px;
    height: 100px;
    transition: width 2s, height 2s;
  }  
  
  #svg5.r{
    width: 300px;
    height: 100px;
    /*transition: width 2s, height 2s;*/
  }

  #letter_K.rot{
    transform-origin: center center;
    rotate: -90deg;
    translate: -16mm 0;
    transition: translate 2s, rotate 2s;
}  

  #letter_K.rotback{
    transform-origin: center center;
    rotate: 0deg;
    translate: 0 0;
    transition: translate 2s, rotate 2s;
}

#letter_H.rot{
    transform-origin: center center;
    translate: 16mm 0;
    rotate: 90deg;
    transition: translate 2s, rotate 2s;
}  

  #letter_H.rotback{
    /* opacity: 0; */
    transform-origin: center center;
    translate: 0 0;
    rotate: 0deg;
    transition: translate 2s, rotate 2s, opacity 2s;
}

#T_bar.rot{
    translate: 0 5mm;
    transition: translate 2s;
}

#T_bar.rotback{
    translate: 0 0;
    transition: translate 2s;   
}

#H_r_post.rot{
    translate: 0mm -5mm;
    transition: translate 2s;
}

#H_r_post.rotback{
  translate: 0mm 0mm;
  transition: translate 2s;
}

#H_bar.rot{
  translate: 0mm -5mm;
  transition: translate 2s;
}

#H_bar.rotback{
translate: 0mm 0mm;
transition: translate 2s;
}

.movableLetter{
  margin-top: 1rem;
}

.movableLetter:hover{
  cursor: pointer;
}