.LoginHolder, .RegisterHolder {
    min-height: 60vh;
    flex-grow: 1;
    transition: 1s all;
    align-items: center;
    justify-content: center;
    display: flex;
    max-width: 98%;
    margin:30px;
}

    .LoginHolderCenter, .RegisterHolder .NewPass, .Complete {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        transition: 1s all;
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
        background-color: rgba(255,255,255,.9);
        padding: 20px;
    }

    .Complete{flex-direction:column; align-items:center;}

.LoginHolder .LoginOptions {
    flex-grow: 1;
    min-width: 500px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    transition: .5s all;
}

        .LoginHolder .LoginOptions .Option{
            flex-basis:auto;
            margin:10px;
        }
            .LoginHolder .LoginOptions .Option.Email {
            flex-grow:1;
            }
            .LoginHolder .LoginOptions .Option.Or {
                text-align:center;
                margin:0;
            }
                .LoginHolder .LoginOptions .Option.Or:before, .LoginHolder .LoginOptions .Option.Or:after{content:'-'}

            .LoginHolder .LoginOptions .Option .FacebookLogin {
                margin: 10px;
                border-radius: 10px;
                background-color: #3578E5;
                color: #fff;
                font-size: 1.2em;
                padding: 10px;
                border: 1px solid #777;
                box-shadow: 0 0 5px #aaa;
                text-align:center;
                width:calc(100% - 40px);
            }
            .LoginHolder .LoginOptions .Option .GoogleLogin {
                margin: 5px;
                padding: 10px;
                font-size: 1.2em;
                border-radius: 10px;
                background-color: red;
                color: #fff;
                border: 1px solid #777;
                box-shadow: 0 0 5px #aaa;
                text-align: center;
            }
            .LoginHolder h1 {
                font-size: 1.5em;
                text-align: center;
                padding: 10px;
                min-width: 180px;
                font-weight: 100;
                margin-bottom:0px;
            }


    .LoginHolder .LoginCreateNew {
        flex-grow: 1;
        background-color: #8dc641;
        min-width: 300px;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        font-size:2em;
        cursor: pointer;
        transition: .5s all;
        color: #fff;
        margin: -20px -20px -20px 0;
    }
    .LoginHolder .LoginCreateNew:before {
        position: absolute;
        content: '\f3de';
        font-family: 'Font Awesome 6 Pro'; font-size:2em; margin-top:-150px; margin-left:-400px; transition:.5s margin-left; font-weight:200;
    }

    .LoginHolder .LoginCreateNew:hover:before {
        margin-left: 0;
    }

    .LoginHolder .LoginCreateNew:hover {
        background-color: #8dc641;
        cursor: pointer;
        color: #fff;
    }



.LoginHolder .LoginRegister {
    flex-grow: 1;
    background-color: #ddd;
    min-width: 300px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: .5s all;
    color: #333;
}

    .LoginHolder .LoginRegister:before {
        position: absolute;
        content: '\f872';
        font-family: 'Font Awesome 6 Pro';
        font-size: 2em;
        margin-top: -100px;
        margin-left: -400px;
        transition: .5s margin-left;
        font-weight: 200;
    }

    .LoginHolder .LoginRegister:hover:before {
        margin-left: 0;
    }

    .LoginHolder .LoginRegister:hover {
        background-color: #eee;
        cursor: pointer;
        color: #333;
    }


.LoginOptions.Hidden {
    flex-grow: 0;
    max-width:0;
    max-height: 0;
    min-width:0;
    overflow: hidden;
    transition: .1s opacity, 0s max-height;
}



.LoginHolder .FormRow, .RegisterHolder .FormRow{
    padding: 10px;
    flex-basis: auto;
    opacity: 1;
    transition: .5s all;
}
    .RegisterHolder .FormRow label{
        display:none;
    }
    .LoginHolder .FormRow input, .RegisterHolder .FormRow input {
        font-size: 1.2em;
        width: calc(100% - 20px);
        text-align: center;
        padding: 10px;
        border-radius: 10px;
        outline: none;
        border: 1px solid #ccc;
    }

    .LoginHolder .FormRow.LoginBtns {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .LoginHolder .FormRow .Login, .RegisterLink {
        flex-grow: 1;
        padding: 10px;
        text-align: center;
        border: 1px solid #ccc;
        background-color: #eee;
        color: #333;
        cursor: pointer;
        border-radius: 10px;
        width: calc(100% - 20px);
    }

        .LoginHolder .FormRow .Login:hover, .RegisterLink:hover {
            background-color: #8dc641;
            color: #fff;
        }

            .LoginHolder .FormRow.LoginBtns input {
                font-size: 1.2em;
                width: auto;
                text-align: center;
                padding: 10px;
            }
.LoginHolder .FormRow p { font-size:12px; margin:0;}

.LoginOptions h1{ font-size:2em; text-align:left}
.LoginOptions h2{font-size:1.2em; text-align:left; padding:0 15px;}
.LoginCreateNew h1{line-height:20px;}