/**
* Course
*/

/**
* Course name:
*/
#caret {
    animation: caret_keys 2s linear infinite;
}
@keyframes caret_keys {
    30% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    65% {opacity: 0;}
    70% {opacity: 1;}
}

/**
* Course blocks:
*/
#m_cursor {
    animation: cursor_keys 5s ease-in-out infinite;
}
#select_abc path{
    fill: #33337A;
    animation: sel_abc_keys 5s ease-in-out infinite;
}
#select_bca path{
    fill: #DEDEFF;
    animation: sel_bca_keys 5s ease-in-out infinite;
}
@keyframes cursor_keys {
    20% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-12px);
    }
    70% {
        transform: translateY(-12px);
    }
    75% {
        transform: translateY(0px);
    }
}
@keyframes sel_abc_keys {
    20% {fill: #33337A;}
    25% {fill: #DEDEFF;}
    70% {fill: #DEDEFF;}
    75% {fill: #33337A;}
}
@keyframes sel_bca_keys {
    25% {fill: #DEDEFF;}
    30% {fill: #33337A;}
    70% {fill: #33337A;}
    75% {fill: #DEDEFF;}
}

/**
* Course email:
*/

#letter_inside {
    animation: letter_inside_keys 4s ease-in-out infinite;
}

@keyframes letter_inside_keys {
    40% {
        transform:translate(-5px, -15px) scale(1.1);
    }
    60% {
        transform:translate(-5px, -15px) scale(1.1);
    }
    90% {
        transform:translate(0px, 0px) scale(1);
    }
}

/* #letter_t_l {
    animation: letter_t_l_keys 3s ease-in-out infinite alternate;
}
#letter_t_r {
    animation: letter_t_r_keys 3s ease-in-out infinite;
}

@keyframes letter_t_l_keys {
    50% {
        transform: rotateZ(0deg) translate(0px, 0px);
    }
    100% {
        transform: rotateZ(-16deg) translate(-7px, 4px);
    }
}

@keyframes letter_t_r_keys {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(2px, -4px);
    }
    90% {
        transform: translate(0px, 0px);
    }
} */


/**
* Course answer
*/
#green_line_one {
    animation: g_l_1 5s ease-in infinite;
}
#green_line_two {
    animation: g_l_2 5s ease-in infinite;
}

@keyframes g_l_1 {
    0% {
        fill: #33337A;
        stroke: #fff;
    }
    10% {
        fill: #33337A;
        stroke: #fff;
    }
    15% {
        fill: #CCF0B7;
        stroke: #ADD695;
    }
    75% {
        fill: #CCF0B7;
        stroke: #ADD695;
    }
    80% {
        fill: #33337A;
        stroke: #fff;
    }
    100% {
        fill: #33337A;
        stroke: #fff;
    }
}

@keyframes g_l_2 {
    0% {
        fill: #33337A;
        stroke: #fff;
    }
    20% {
        fill: #33337A;
        stroke: #fff;
    }
    25% {
        fill: #CCF0B7;
        stroke: #ADD695;
    }
    95% {
        fill: #CCF0B7;
        stroke: #ADD695;
    }
    100% {
        fill: #33337A;
        stroke: #fff;
    }
}

/**
* Online lesson
*/
#class_cursor {
    animation: class_cursor_keys 4s ease-out infinite;
}
#stud_word rect {
    animation: stud_word_keys 4s ease-out infinite;
}
#teach_word rect {
    animation: teach_word_keys 4s ease-out infinite;
    transform-origin: 92px 109px;
}

@keyframes class_cursor_keys {
    0% {
        transform: translate(4px, 6px);
    }
    20% {
        transform: translate(4px, 6px);
    }
    25% {
        transform: translate(0px, 0px);
    }
    60% {
        transform: translate(0px, 0px);
    }
    65% {
        transform: translate(4px, 6px);
    }
    100% {
        transform: translate(4px, 6px);
    }
}
@keyframes stud_word_keys {
    20% {
        fill: #595877;
    }
    25% {
        fill: #ADD695;
    }
    60% {
        fill: #ADD695;
    }
    65% {
        fill: #595877;
    }
    100% {
        fill: #595877;
    }
}
@keyframes teach_word_keys {
    22% {
        fill: #595877;
        transform: scale(1);
    }
    27% {
        fill: #ADD695;
        transform: scale(1.3);
    }
    62% {
        fill: #ADD695;
        transform: scale(1.3);
    }
    67% {
        fill: #595877;
        transform: scale(1);
    }
    100% {
        fill: #595877;
        transform: scale(1);
    }
}