@import url('https://fonts.googleapis.com/css?family=Numans');

    .w-33 {
        width: 33.333333%;
    }

    .w-66 {
        width: 66.666666%;
    }

    .flexone {
        flex: 1;
    }

    #loginLeft {
        min-width: 500px;
        padding: 30px;
    }

    #signupFullName.error,
    #signupEmail.error,
    #signupShibboleth.error,
    #loginemail.error,
    #loginpassword.error,
    #Shibboleth.error,
    #forgotemail.error
    {
        border : 1px solid #FFCB1E !important;
    }

    .error:not(#signupFullName,#signupEmail,#signupShibboleth,#loginemail,#loginpassword,#Shibboleth,#forgotemail) {
        border: 1px solid red !important;
        color: red !important;
    }

    .error.border-bottom:not(#signupFullName,#signupEmail,#signupShibboleth) {
        border: none !important;
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-decoration-color: red !important;
    }

    #LOGIN .error {
        padding: 9px 18px 9px 48px !important;
    }

    /* NEW LOADING ANIMATION */
    #loadAnimation:not(.mobileLoader) {
        display: block;
        height: 32px;
        width: 32px;
        -webkit-animation: loader-2-1 3s linear infinite;
                animation: loader-2-1 3s linear infinite;
    }
    @-webkit-keyframes loader-2-1 {
        0%   { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes loader-2-1 {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #loadAnimation span {
        display: block;
        position: absolute;
        top: 0; left: 0;
        bottom: 0; right: 0;
        margin: auto;
        height: 32px;
        width: 32px;
        clip: rect(16px, 32px, 32px, 0);
        -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
                animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    }
    @-webkit-keyframes loader-2-2 {
        0%   { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes loader-2-2 {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #loadAnimation span:before {
        content: "";
        display: block;
        position: absolute;
        top: 0; left: 0;
        bottom: 0; right: 0;
        margin: auto;
        height: 32px;
        width: 32px;
        border: 3px solid transparent;
        border-top: 3px solid #FFF;
        border-radius: 50%;
        -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
                animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    }
    @-webkit-keyframes loader-2-3 {
        0%   { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes loader-2-3 {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #loadAnimation span:after {
        content: "";
        display: block;
        position: absolute;
        top: 0; left: 0;
        bottom: 0; right: 0;
        margin: auto;
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }
    /* NEW LOADING ANIMATION */

    .logo.login {
        max-height: 36px !important;
        width: 100% !important;
        max-width: 350px;
        background-position: left;
        height: 100%;
        margin-top: 25px;
    }

    .loginInput {
        border-radius: 5px;
        background-color: #fcfcfc;
        padding: 10px 20px;
        font-size: 14px;
        border: none;
        height: 55px;
    }

    #LOGIN {
        display: flex;
    }

    #loginContainer,
    #registerContainer,
    #forgotContainer,
    #passwordContainer {
        width: 80%;
        max-width: 350px;
    }

    #catchline {
        font-size: 2.75vw;
        background-size: cover; 
        color: #FCC826;
        background-repeat: none;
        background-position: center;
        font-weight: 300;
        text-shadow: 10px 30px 30px rgba(0, 0, 0, 0.2);
        padding-left: 140px !important;
    }

        #catchline strong {
            font-weight: 600;
            color: #ffffff;
        }

    .loginBtn {
        font-size: 14px;
        padding: 10px 0;
        font-weight: 500;
    }

    .loginBtn:hover {
        -webkit-box-shadow: unset !important;
        box-shadow: unset !important;
    }

    @media (max-width: 1023px) {
        #catchline {
            background-position: center;
        }

        #loginLeft {
            width: 100vw;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
        }

        #loginContainer,
        #registerContainer,
        #forgotContainer {
            width: 100%;
        }
    }

    #LOGIN a {
        text-decoration: none;
    }

    #LOGIN input:not([type=submit]) {
        padding-left: 50px;
        font-size: 16px;
    }

    #LOGIN input[type=submit],
    #BirdieLogin #activateAccount {
        background: unset;
        background-color: #FFCB1E;
        color: #000;
        text-transform: capitalize;
        padding: 16.5px 0px;
    }

    #BirdieLogin #activateAccount {
        padding: 16.5px 50px;
    }
    #forgotlogin-link {
        top: -25px;
        right: 0;
    }

    #BirdieLogin img,
    #BirdieSignup img,
    #BirdieForgot img {
        top: calc(50% - 16px);
        left: 20px;
    }

    #BirdieLogin .errorMessage.mailNotify {
        top: 67px;
    }