/*

    Diese Datei beinhaltet alle Styles der Komponenten.
    Jede Komponente wird am Beginn mit der Bezeichnung in Uppercase gestartet.
    Jede Zeile muss mit dem HTML Element und der Komponenten-Bezeichnung ( zb a.tf-button ) beginnen.

*/


/* ACTIVATE */

div.tf-activate {
    overflow: hidden;
}

div.tf-activate .screen {
    transition: opacity .4s, transform .4s;
}

div.tf-activate .screen.faded-right,
div.tf-activate .screen.faded-left {
    opacity: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

div.tf-activate .screen.faded-right {
    transform: translate3d( 100px, 0px, 0 );
}

div.tf-activate .screen.faded-left {
    transform: translate3d( -100px, 0px, 0 );
}

div.tf-activate .screen.hidden {
    display: none;
}

div.tf-activate .screen.login-register .tf-content.login {
    display: none;
}

div.tf-activate .screen.login-register.selected-login .tf-content.login {
    display: block;
}

div.tf-activate .screen.login-register .tf-content.register {
    display: none;
}

div.tf-activate .screen.login-register.selected-register .tf-content.register {
    display: block;
}

div.tf-activate.activate-plural .activate-singular {
    display: none;
}

div.tf-activate.activate-singular .activate-plural {
    display: none;
}