﻿.login-block {
    width: 80%;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    border-top: 5px solid #0054a5;
    margin: 0 auto;
}

 .login-block h1 {
        text-align: center;
        color: #000;
        font-size: 18px;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 20px;
}
.login-block h2 {
    font-size: 1.5rem;
    color: red;
}

    .login-block input {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        font-size: 14px;
        padding: 0 20px 0 20px;
        outline: none;
    }
.login-block input[type=text] {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        font-size: 14px;
        padding: 0 20px 0 50px;
        outline: none;
}

    .login-block input#username {
        background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
        background-size: 16px 80px;
        padding-left: 50px;
    }

.login-block input#username:focus {
        background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
        background-size: 16px 80px;
}

    .login-block input#password {
        background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
        background-size: 16px 80px;
        padding-left: 50px;
    }

.login-block input#password:focus {
        background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
        background-size: 16px 80px;
}

.login-block input:active, .login-block input:focus {
        border: 1px solid #0054a5;
    }

.submit {

    margin-left: auto;
    margin-right: auto;
}

.submit-button {
    border: none;
    font-family: Oswald, sans-serif !important;
    font-size: 18px !important;
    display: inline-block;
    background-color: var(--wtw-light-blue);
    color: white !important;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 39px;
    margin: 0px auto;
    line-height: 1.25;
    letter-spacing: 0.57px;
    box-shadow: 1px 9px 1px -4px var(--wtw-blue);
    border-radius: 0px 0px 5px 5px !important;
}

.submit-button:hover {
        color: #fff !important;
        background-color: var(--wtw-blue) !important;
        box-shadow: 1px 9px 1px -4px var(--wtw-dark-gray) !important;
}
.bottom-options {
display:flex;
justify-content: space-between;
}
.forgot {
text-align:left;

}
.create {
text-align:right;
}

.membership-Card {
    border-radius: 5px;
    background-color: var(--wtw-midnight-blue);
    background-size: cover;
    width: 46%;
    margin: 1em;
    color: white;
    display: inline-block;
    
}

    .membership-Card a {
        display: block;
        position: relative;
        padding: 20px;
        text-decoration: none;
        color: white;
    }

    .membership-Card .title {
        display: block;
        margin-bottom: 5px;
        font-weight: 900;
        text-transform: uppercase;
        color: white;
    }
    .membership-Card .membership-text {
        display: block;
        font-size: 14px;
        color: white;
    }
    .membership-Card .Circle {
        background-color: var(--wtw-blue)
    }

.account-info h3{
    font-size: 32px;
    line-height: 1.19;
    letter-spacing: -0.85px;
    font-weight: 700;
    line-height: 1.23;
    letter-spacing: normal;
    color: var(--wtw-deep-blue);
}

.bottom-info h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--wtw-deep-blue);
    text-transform: uppercase;
}
.account-info h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--wtw-deep-blue);
    text-transform: uppercase;
}
.account-header {
display:block;
}
.updateAccount {
margin-left: 30em;
}
.updatePassword {
margin-left: 35em;

}
.account-info p {
    line-height: 1.33;
    color: var(--wtw-dark-gray);
}
.user-info {
    display: inline;
}
.membership-summary h3 {
    font-size: 32px;
    line-height: 1.19;
    letter-spacing: -0.85px;
    font-weight: 700;
    line-height: 1.23;
    letter-spacing: normal;
    color: var(--wtw-deep-blue);
}
.membership-summary h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--wtw-deep-blue);
    text-transform: uppercase;
}
.membership-summary {

   
    margin-left: auto;
    margin-right: auto;
}
.account-info {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.bottom-info {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
}
 select {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 14px;
    padding: 0 20px 0 50px;
    outline: none;
}
.or h4 {
    text-align: center;
    margin: -4px auto 15px auto;
}
.member-level {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 15px 0px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border-bottom: 2px solid var(--wtw-light-cool-gray);
    border-top: 2px solid var(--wtw-light-cool-gray);
    transition: all 0.3s ease-in-out 0s;
}
.monthly {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 15px 0px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border-bottom: 2px solid var(--wtw-light-cool-gray);
    transition: all 0.3s ease-in-out 0s;
}
.renew {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 15px 0px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border-bottom: 2px solid var(--wtw-light-cool-gray);
    transition: all 0.3s ease-in-out 0s;
}
.member-level:hover{
    background-color: var(--wtw-background-blue);
    padding-left: 5px;
}
.renew:hover {
    background-color: var(--wtw-background-blue);
    padding-left: 5px;
}
.monthly:hover {
    background-color: var(--wtw-background-blue);
    padding-left: 5px;
}
.backButton a {
/*    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;*/
}

    .backButton a:hover {
        background-color: none;
        color: black;
    }

.backButton .previous {
    background-color: #f1f1f1;
    color: black;
}



.checkout-back-button {
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
    color: var(--wtw-medium-cool-gray);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}


    /*.checkout-back-button:hover {
        color: #012d5c !important;
        background-color: #beeef9 !important;
    }*/

.backButton {
    width: 85%;
    margin: 25px auto;
}