/*  ==========================  */
/*  Begin:  Login/Logout Pages  */
/*  ==========================  */


#header-public-logo-box,
#header-public-logo-box-mobile {
    padding: 20px;
}

#header-public-logo-box-mobile {
    display: none;
}

#header-public-logo-box {
    display: block;
}

@media only screen and (max-width: 1000px) and (min-width: 0) {
    #header-public-logo-box-mobile {
        display: block;
    }

    #header-public-logo-box {
        display: none;
    }
}

.login_sec {
    float: left;
    width: 100%;
    background: #fff;
}

.login_container {
    float: left;
    width: 350px;
    padding-top: 10px;
}

    .login_container p,
    #login-info-text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 22px;
        padding: 0 0 9px 0;
        color: #ff8546;
    }

        #login-info-text,
        #login-info-text a {
            color: #70adb5;
            
        }

            #login-info-text a {
                text-decoration: underline;
            }


.user_login {
    float: left;
    width: 377px;
    padding: 0 0 0 23px;
}

.form_row {
    float: left;
    width: 100%;
    padding: 0 0 8px;
}

    .form_row label {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 20px;
        float: left;
        width: 100%;
        padding: 0 0 0 2px;
        color: #484747;
    }

    .form_row .bg {
        float: left;
        width: 266px;
        padding: 5px;
        border: solid 1px #a3b2b5;
        background: #fff;
        box-shadow: 1px 0 0 #d4dbdc;
    }

        .form_row .bg .input {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 14px;
            float: left;
            width: 97%;
            color: #484747;
            border: 0;
        }

    .form_row p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 18px;
        float: left;
        width: 181px;
        margin: 7px 0 0 2px;
        color: #70adb5;
    }

        .form_row p a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 18px;
            text-decoration: underline;
            color: #70adb5;
        }

.login-button {
    position: relative;
    float: left;
    width: 94px;
    height: 30px;
    padding: 0 0 0 32px;
    padding: 2px 0 1px 2px;
    cursor: pointer;
    text-align: left;
    border: solid 1px #d06e3b;
    border-radius: 10px;
    background: url(../images/login/login_btn_bg.jpg) repeat-x;
    box-shadow: 2px 3px 3px #9f9fa1;
}

    .login-button img {
        vertical-align: middle;
    }

    .login-button span {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        line-height: 13px;
        margin: 0 0 0 5px;
        vertical-align: middle;
        color: #fff;
        text-shadow: 1px -1px 1px #cf6c39,-1px 1px 1px #cf6c39,-1px 1px 1px #cf6c39,1px 1px 1px #cf6c39;
    }

.login-msg {
    float: left;
    width: 389px;
    margin: -8px 0 0;
    padding: 0 0 0 11px;
}

    .login-msg p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 20px;
        padding: 0;
        color: #fe0000;
    }

.field-validation-valid {
    display: none;
}

.login-topics {
    float: left;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    list-style: none;
    background: #eaeeef url(../images/login/topic_li_bg.jpg) repeat-x;
}

    .login-topics li {
        float: left;
        width: 48%;
    }

        .login-topics li h3 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: bold;
            line-height: 20px;
            display: inline-block;
            min-width: 48%;
            padding: 0 0 15px 0;
            vertical-align: -20px;
            text-transform: uppercase;
            color: #70adb5;
        }

        .login-topics li img {
            float: left;
            margin: 0 23px 0 0;
            border: solid 1px #6c6c6c;
        }

        .login-topics li p {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 18px;
            color: #484747;
        }

        .login-topics li.promoRight {
            margin: 0 0 0 30px;
        }

.logout {
    padding: 40px;
    font-family: 'Open Sans', 'Helvetica', 'Arial';
    margin-bottom: 40px;
    margin-left: 77px;
}

    .logout img {
        float: left;
        margin: 0 23px 0 0;
        border: solid 1px #6c6c6c;
    }

    .logout h1 {
        font-size: 22px;
        font-weight: bold;
        line-height: 20px;
        display: inline-block;
        min-width: 100%;
        padding: 0 0 15px 0;
        text-align: left;
        color: black;
    }

    .logout p {
        font-size: 14px;
        display: inline-block;
        float: left;
    }

    .logout a {
        font-size: 18px;
        line-height: 20px;
        display: inline-block;
        float: left;
        width: 60%;
        margin-bottom: 14px;
        color: #215099;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
    }

    .logout .bold {
        font-weight: bold;
    }


    /*  Begin:  Login/Logout Media Queries  */
    @media only screen and (min-width: 0) and (max-width: 1000px) {
        .logo-slc-login, .logo-reviews-login {
        float: none;
        padding-left: 0;
    }

        .logo-slc-login a,
        .logo-reviews-login a {
            width: 50%;
            height: 150px;
            margin: 0 auto;
            background-size: contain;
        }

        .logo-slc-login a {
            background-image: url('../images/logos/slc-stacked-logo.png');
        }

    .login_sec {
        float: none;
        width: 55%;
        margin: 0 auto;
        padding: 0;
    }

    /*.login_box {  UPDATED - moved to site css for PLN background images  TEMPORARILY?
    {
        float: none;

        width: 100%;
        padding: 0;

        background: none;
    }*/

    .login_container {
        float: none;
        width: auto;
    }

        .login_container p {
            margin-bottom: 20px;
        }

    .user_login {
        float: none;
        min-width: 0;
        max-width: 338px;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        -webkit-padding-before: 0;
        -webkit-padding-start: 0;
        -webkit-padding-end: 0;
        -webkit-padding-after: 0;
    }

    .form_row,
    .form_row label,
    .form_row p,
    .form_row .bg,
    .form_row .bg .input,
    .login-button,
    .login-msg {
        float: none;
    }

        .form_row .bg {
            width: 320px;
        }

    .login-button {
        display: block;
        margin: 0 auto;
    }

    .login-topics {
        float: none;
        background: none;
    }

        .login-topics ul {
            margin: 0;
        }

        .login-topics li {
            float: none;
            width: 100%;
        }

            .login-topics li img {
                float: none;
                margin: 0 0 23px 0;
            }

            .login-topics li h3 {
                width: 100%;
            }

            .login-topics li p {
                font-size: 14px;
            }

            .login-topics li.promoRight {
                margin: 20px 0 0 0;
            }

    .logout {
        width: 76%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

        .logout p,
        .logout a {
            width: auto;
        }

        .logout h1 {
            padding: 0;
        }

        .logout img {
            margin-bottom: 40px;
            float: none;
            display: block;
        }
}

@media only screen and (max-width: 900px) {
    .logout {
        width: 71%;
        padding: 0;
    }
}

@media only screen and (max-width: 850px) {
    .logout {
        width: 53%;
        padding: 0;
    }
}

@media only screen and (max-width: 750px) {
    .logo-slc-login a,
    .logo-reviews-login a {
        width: 60%;
    }

    .logout {
        width: 63%;
        padding: 0;
    }
}

@media only screen and (max-width: 660px) {
    .logo-slc-login a,
    .logo-reviews-login a {
        width: 70%;
        height: 140px;
    }

    .logout {
        width: 74%;
        padding: 0;
    }
}

@media only screen and (max-width: 570px) {
    .logo-slc-login a,
    .logo-reviews-login a {
        width: 94%;
        height: 150px;
    }

    .login_sec {
        width: 100%;
    }

    .logout {
        width: 100%;
        padding: 0;
    }
}

@media only screen and (max-width: 450px) {
    .user_login {
        max-width: 300px;
    }

    .form_row .bg {
        width: 270px;
    }

    .logo-slc-login a,
    .logo-reviews-login a {
        height: 120px;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 0) {
    .logout p, .logout a {
        width: auto;
    }
}

/*  End:  Login/Logout Media Queries  */

/*  ========================  */
/*  End:  Login/Logout Pages  */
/*  ========================  */