BODY.logged-out {
    background-attachment: fixed;
    background-image: linear-gradient(#FAF8F7, #EBEBEB);
    width: 100%;
    height: 100%;
}

DIV.hr {
    border-top: 1px dotted #CCC;
    margin: 1em auto;
}

DIV.hr HR { display: none; }

H2 {
    color: #555;
    font-size: 42px;
    font-family: 'Questrial', sans-serif;
    text-transform: uppercase;
    margin: 0 0 0 0;
}

H3 {
    font-size: 15px;
    margin: .25em 0 2.5em 0;
}

    H3 A {
        color: #222;
        text-decoration: none;
        border-bottom: 1px dotted #555;
    }

    H2 A { 
        color: #222;
        text-decoration: none;
        border: 0; 
    }

H3::before {
    display: inline;
    content: "A product by ";

    color: #222;
    font-size: 15px;
    text-decoration: none;

    padding-right: .1em;
}


.graphic A {
    display: block;
    
    width: 444px;
    height: 444px;

    background-color: #071123;
    background-color: #2b5063;

    background-image: url("/images/earth2.gif");
    background-image: url("/images/porthole-background.png");
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position: 33% 33%;

    border-radius: 50%;
    margin-top: 50px;
    margin-left: 50p;

    border: 0;
    outline: 0;
}

.graphic .porthole-cover {
    display: block;
    position: absolute;

    top: 160px;

    width: 480px;
    height: 555px;

    background-image: url("/images/porthole-cover.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center -85px;

    margin: 0 0 0 -10px;
    z-index: 0;

    border: 0;
    outline: 0;
}

.graphic A .porthole {
    display: block;
    position: relative;

    top: -50px;
    left: -50px;
    width: 555px;

    margin: 0 auto 0 auto;
    border: 0;
    outline: 0;

    z-index: 1;
}

MAIN {
    font-family: 'Questrial', sans-serif;
    margin-top: 50px;
}

MAIN P {
    font-size: 17px;
}

MAIN A {}

.spacer {
    height: 25px;
}

.nopadding { padding: 0; }

FORM LABEL {
    display: block
}

.login,
.register {
    background-color: rgba(255,255,255,.5);
    border: 1px solid #CCC;
    border-radius: 1px;
    padding: 20px 30px;

    margin-top: -5px;
    margin-bottom: 25px;
}

.login H4,
.register H4 {
    margin-bottom: .75em;
}

    .login H4 .or,
    .register H4 .or {
        font-size: 21px;
    }

.login INPUT[type="text"],
.register INPUT[type="text"] {
    width: 100%;
    height: 40px;

    padding: 2px 10px;
}

.login .login-submit,
.register .register-submit { 
    width: 100%;

    color: #111;
    background: #1EDABD;
    border: 0;
    border-radius: 3px;
    outline: 0;

    padding: 10px 0;
}

.login .file,
.register .file { display: none; }

.login #picture,
.register #picture {
    width: 100%;

    cursor: pointer;

    background: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: 0;

    text-align: center;
    padding: 10px 0;

    margin: 30px 0;
}

.login .TOC,
.register .TOC { 
    margin-top: 12px;
}

.help {
    margin-top: 0;
    margin-bottom: -10px;
}

.terms {
    margin-top: 30px;
}

.terms P { font-size: 13px; }


#error_message {
    display: none;

    color: #111;
    background: #FFFF99;
    border: 1px dotted #A58153;

    margin: -20px 0 20px 0;
    padding: 5px 10px;
}

#error_message::before,
#error_message.error::before,
#error_message.warning::before {
    display: inline-block;
    
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;

    color: #A58153;
    font-family: "FontAwesome"; 
    font-weight: 400; 
    content: "\f071";

    margin-right: 5px;
}

FORM .message {
    display: none; 
}

.validate {    }

    .validate #picture,
    .validate INPUT[type="text"] {
        border: 1px solid #900;
    }

        .validate #picture {
            color: #EEE;
            background: #900;
        }

    .validate SPAN.message {
        display: block;
        width: 100%;

        color: #900;
        text-align: center;

        margin-top: 5px;
    }

    
    #btn_submit,
    #form_step_two {
        display: none;
    }

    DIV.hr {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    #picture.complete {
        color: #777;
        width: 100%;

        cursor: pointer;

        background: #eee;
        border: 1px solid #ccc;
        border-radius: 3px;
        outline: 0;

        text-align: center;
        padding: 10px 0;

        margin: 30px 0;
    }

    #picture.complete SPAN {
        display: none;
    }
    
    #picture.complete::before {
        display: block;
        font-family: "FontAwesome"; 
        font-weight: 400; 
        content: "\f058";
        text-indent: 0;
        margin: 0 auto;
    }


@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3) { 
.spacer { height: 670px !important; }

.graphic A .porthole {
    position: absolute;

    top: -62px;
    left: -62px;

    width: 720px;
    left: 50%;

    margin-left: -340px;
    margin-top: -20px;
    
    border: 0;
    outline: 0;
}

.graphic A {
    position: absolute;
    display: block;
    
    width: 575px;
    height: 575px;

    left: 50%;
    margin-left: -320px;
    margin-top: 30px;    
    
    background-size: 120% auto;
    background-position: 22% 50%;

    border: 0;
    outline: 0;
}

.graphic .porthole-cover {
    display: block;
    position: absolute;

    top: 135px;

    width: 623px;
    height: 555px;

    background-image: url("/images/porthole-cover.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center -105px;

    margin: 0 0 0 30px;
    z-index: 0;

    border: 0;
    outline: 0;
}


MAIN {
    text-align: center;
}

MAIN H2 { 
    font-size: 58px;
}

MAIN H3 { 
    margin: .5em 0 1em 0;
}

MAIN H3,
MAIN H3 A,
MAIN H3::before {
    font-size: 42px;
}

MAIN P {
    font-size: 42px;
}

.login,
.register {
    display: block;
}

.login .login-submit,
.register .register-submit { 
    margin-top: 20px;
}

.login H4,
.register H4 {
    font-size: 64px;
}

.login H4 .or,
.register H4 .or {
    display: block;
    font-size: 42px;
}

.login LABEL,
.register LABEL,
DIV.label { 
    text-align: left;
}

.login INPUT[type="text"],
.register INPUT[type="text"] {
    width: 100%;
    height: 80px;
    padding: 2px 10px;
}

.login .TOC,
.register .TOC { 
    font-size: 32px;
}

.terms P { font-size: 32px; }

.terms {
    margin-bottom: 50px;
}

}