/* =============================== */
/* HTML TAGS */
/* =============================== */
html {
    /*height: 100%;*/
}
body {
    /*height: 100%;*/
    background: #1C84C3;
    font-family: 'Roboto', sans-serif;
}

/* =============================== */
/* LOGIN */
/* =============================== */

.login-head {
    background: #000000;
    color: #FFFFFF;
    width: 100%;
}
.login-head > div {
    margin: 0px auto;
    padding: 40px 0px;
    width: 100%;
    text-align: center;
}
.login-head h1 {
    font-family: "Trade Gothic";
    font-size: 24px;
    color: #1C84C3;
    /*color: #FFFFFF;*/
    font-weight: 800;
}
.login-body {
    /*background: #1C84C3;*/
    color: #FFFFFF;
    width: 100%;
    background: linear-gradient(to bottom,  rgba(65,154,214,1) 0%,rgba(28,132,195,1) 100%);
}
.login-body > div {
    margin: 0px auto;
    padding: 40px 0px;
    width: 300px;
    text-align: center;
    z-index: 5;
}
#login-email {
}
#login-email > input {
    font-family: "Roboto";
    font-weight: 700;
    font-size: 18px;
    /*background: #1070a7;*/
    /*color: #FFFFFF;*/
}
#login-password {
}
#login-password > input {
    font-family: "Roboto";
    font-weight: 700;
    font-size: 18px;
}
#login-remember label {
    color: #FFFFFF;
}
#login-do {
    font-family: 'Roboto', sans-serif;
}

/* =============================== */
.forgot:link,
.forgot:visited {
    color: #FFFFFF;
    font-size: 14px;
    /*margin: 40px auto 20px;*/
    margin: 0px auto;
    display: block;
    width: 200px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 1;
}
.forgot:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
/* =============================== */
/* BUTTON */
/* =============================== */
.btn {
    font-size: .78571429rem;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #E0E1E2;
    color: rgba(0,0,0,.6);

    padding: .78571429em 1.5em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;

    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
}
.btn i {
    margin: 0 .42857143em 0 -.21428571em;
    transition: opacity .1s ease;
    height: .85714286em;
    opacity: .8;
    font-size: 1em;
}
.btn:hover {
    background: #1C84C3;
    color: #FFFFFF;
}
/* =============================== */
/* RESPONSIVE */
/* =============================== */
@media only screen and (max-height: 270px) {
}

@media only screen and (max-height: 300px) {

    .login-head > div {
        padding: 10px 0px;
    }
    .login-head h1 {
        font-size: 18px;
        margin: 0;
        padding: 0;
    }
    .login-head img {
        display: none;
    }

    .login-body > div {
        padding: 10px 0px;
    }
    #login-email > input {
        font-family: "Roboto";
        font-weight: 700;
        font-size: 12px;
    }
    #login-password > input {
        font-family: "Roboto";
        font-weight: 700;
        font-size: 12px;
    }
}

/*@media only screen and (max-height: 555px) {*/
@media only screen and (max-height: 620px) {
    .forgot:link, .forgot:visited, .forgot:hover {
        display: none;
    }
}