html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, button, input, select, textarea,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    vertical-align:baseline;
    box-sizing:border-box
}
html, body {
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
 	background-color:#ffffff;
    font-size:14pt;
    min-height:100%;
    color:#092e42;
    margin:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size-adjust:auto;
    font-family:"Source Sans Pro", sans-serif;
}
#header {
    position:relative;
    display:flex;
    width:100%;
    height:50px;
    padding:0;
}
#footer {
    color:#00418584;
    height:45px;
    bottom:0;
    width:100%;
    padding:0;
    margin:0;
    min-height:45px;
    max-height:45px;
}
#footer > p {
    color:#44;
    margin:0 auto;
    text-align:center;
    font-size:1em;
    line-height:1em;
    padding:0;
    padding-right:20px;
}
#loader {
    z-index:9999;
    position:fixed;
    width:200px;height:50px;border:1px solid #9e9fa2;
    top:0;bottom:0;left:0;right:0;
    margin:auto;
    padding:10px 6px;
    border-radius :7px;
    text-shadow:0 -1px 1px #46677f;
    background:#7bb5db;background:-webkit-gradient(linear,left top,left bottom,from(#7bb5db),to(#4775b8));background:-moz-linear-gradient(top,#7bb5db,#4775b8);background:linear-gradient(top,#7bb5db,#4775b8);border-bottom-color:#609fd0;
    -moz-box-shadow:inset 0 2px 2px #4775b8;-webkit-box-shadow:inset 0 2px 2px #4775b8;-moz-box-shadow:inset 0 2px 2px #4775b8;-webkit-box-shadow:inset 0 2px 2px #4775b8;box-shadow:inset 0 2px 2px #4775b8;
}
#loader p {
    font-size:150%;color:#fff;letter-spacing:1px;line-height:50px;text-align:center;
}

/* GENERAL STYLES */
h1,h2,h3,h4,h5,h6 {
    font-family:"Krub", sans-serif;
    color:#004185;
}
h1 {
    font-size:3em;
    margin-top:20px;
    margin-bottom:5px;
}
h2 {
    font-size:1.5em;
    font-weight:400;
    margin-bottom:15px;
}
h3 {
    font-size:1.35em;
    margin-bottom:0px;
    margin-top:15px;
}
h4 {
    font-size:1.25em;
}
h5 {
    font-size:1.1em;
    color:#092e42;
}
h6 {
    font-size:1.1em;
    letter-spacing:5px;
    font-weight:bold;
    text-transform:uppercase;
}
p {
    margin-top:10px;
    margin-bottom:10px;
}
a, span.link {
    color:#004185;
    text-decoration:underlined;
}
a:hover, span.link:hover {
    color:#1b90cf;
    cursor:pointer;
}
strong, b {
    font-weight: bold;
}
i { font-style: italic; }
/* FORM ELEMENTS */
button,
input[type="button"],
input[type="submit"] {
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:5px;
    color:#ffffff;
    font-size:100%;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#004185;
    padding:7px 10px 7px 10px;
    text-decoration:none;
    border:2px solid #004185;
    margin:5px 0px;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:active,
input[type="button"]:active,
input[type="submit"]:active {
    background-color:#0b80bf;
    text-decoration:none;
    cursor:pointer;
    border-radius:5px;
    border:2px solid #FABC29;
}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor:default;
    border-radius:3px;
    border:2px solid grey;
}
button a {
    color:white;
}
button a:hover {
    color:white;
}
input:-webkit-input-placeholder {
    color:#b5b5b5;
}
textarea {
    resize: none;
}
input,
select,
textarea {
    width:350px;
    padding:12px 7px;
    font-weight:400;
    font-size:100%;
    color:#092e42;
    border:2px solid #fff;
    border-radius:5px;
}
input:focus,
select:focus,
textarea:focus {
    background:#ffffff;
    color:#092e42;
    border:2px solid #FABC29;
    dbox-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.25);
    d-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.25);
    d-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.25);
    outline:0;
}
input:hover,
select:hover,
textarea:hover {
    background:#fdfdfd;
    border:2px solid #FABC29;
}

#container {
    position:relative;
    min-height:400px;
    padding:0;
    margin-bottom:30px;
}
#container img.logo {
    display:block;
    margin:0 auto;
    height:120px;
    margin-bottom:30px;
}
#container .main {
    max-width:500px;
    margin:0 auto;
    background-color:#00A5E8;
    border-radius:10px;
    padding:30px;
    min-height:200px;
    text-align:center;
}
#container .main div {
    padding-bottom:10px;
}
#container .main h2 {
    color:#fff;
    font-size:2em;
}
#container .main h3 {
    color:#fff;
    margin-top:30px;
    margin-bottom:10px;
    font-size:1.5em;
    border-bottom:1px dotted #004185;
}
#container .main a {
    text-decoration:underline;
    color:#eeb;
}
p.quiet {
    font-size:10pt;
    color:#666; 
}
/* LOGIN */
.main label span {
    display:block;
}
.main p {
    color:#fff;
    text-align:center;
    font-weight:normal;
    padding:0px 5px 15px 0px;
}
.main p.msg {
    color:#fff;
    font-weight:normal;
}
.main p.error {
    color:#f70808;
    font-weight:bold;
    letter-spacing:0.75px;
}
.main input { padding:15px 10px }

.main div.field { position:relative; padding-top:10px; }
.main div.field input { padding:25px 10px 10px 10px; }
.main div.field label { position:absolute; pointer-events:none; left:55px; top:29px; color:#555; font-weight:normal; transition:0.2s ease all; }
.main div.field input:focus ~ label,
.main div.field input:not(:focus):valid ~ label { left:55px; top:15px; font-size:80%; color:#753; font-weight:bold; }

@media screen and (max-device-width: 768px) {

    #header {
        display:none;
    }
    #footer {
    }
    #container {
        padding:0 10px;
    }
    #container .main {
        padding:10px
    }
    #container img.logo {
        height:90px;
        margin-top:10px;
        margin-bottom:20px;
    }
    input,
    select,
    textarea {
        width:100%;
        padding:8px 3px;
        margin:0;
    }

    .main div.field label { position:absolute; pointer-events:none; left:15px; top:29px; color:#555; font-weight:normal; transition:0.2s ease all; }
    .main div.field input:focus ~ label,
    .main div.field input:not(:focus):valid ~ label { left:15px; top:15px; font-size:80%; color:#753; font-weight:bold; }

}