#logo {
    height: 25vh;
    width: 25vh;
    position: relative;
    padding: 25px;
    margin: 100px;
    font-size: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo .square {
    width:100%;
    height: 100%;
    position:absolute;
    transition:transform 0.8s ease-in;
    border:1px solid black;
}
#logo .letter {
    font-family: "Encode Sans Condensed", sans-serif;
    font-weight: 100;
    font-style: normal;
    transition:transform 0.8s ease-in;
}
#logo.ended .letter {
    transition:transform 0.4s ease-in;
}
#logo.ended .square {
    transition:transform 0.4s ease-in;
}
#letterk {
    text-indent:-10px;
}
/* transform initial state */
#logo #square1 {
    transform:rotate(-90deg) scale(0);
}
#logo #square2{
    transform:rotate(215deg) scale(0);
}
#logo .letter {
    transform:scale(0);
}
/* tranforms End State*/
#logo.activated #square1 {
    transform: rotate(45deg) scale(1);
} 
#logo.activated #square2 {
    transform: rotate(125deg) scale(1);
} 
#logo.activated .letter {
    transform: scale(1);
}
/* transform Hover */
#logo.ended:hover #square1{
    transform: rotate(125deg);
}
#logo.ended:hover #square2 {
    transform: rotate(45deg);
} 
#logo.ended:hover .letter {
    transform:scale(1.1);
}