@media screen and (min-width: 1281px) {
    #cllogo {
        margin-top: 30px;
        width: 100%;
        height: auto;
    }
    #logotext {
        width: 100%;
    }
    .outer_box {
        height: 45%;
    }
    #id_username, #id_password {
        height: 2.5em;
        width: 10vw;
    }
    .login_btn {
        width: 13vw;
        height: 2.5em;
    }
}
@media screen and (min-width: 1080px) and (max-width: 1280px) {
    #cllogo {
        margin-top: 30px;
        width: 100%;
        height: auto;
    }
    #logotext {
        width: 100%;
    }
    .outer_box {
        height: 40%;
    }
    #id_username, #id_password {
        height: 2.5em;
        width: 10vw;
    }
    .login_btn {
        width: 13vw;
        height: 2.5em;
    }
}
@media (min-width: 100px) and (max-width: 1079px) {
    #cllogo {
        margin-top: 10vh;
        width: 100%;
        height: auto;
    }
    #logotext {
        width: 100%;
    }
    .outer_box {
        height: 35%;
    }
    #id_username, #id_password {
        height: 3em;
        width: 50vw;
    }
    .login_btn {
        width: 50vw;
        height: 2.5em;
    }
}
@media (min-width: 100px) and (max-width: 1079px) and (orientation: landscape) {
    #cllogo {
        width: 0px;
        height: 0px;
    }
    #logotext {
        width: 0px;
        height: 0px;
    }
    .outer_box {
        height: 55%;
    }
    #logo, #cllogo {
        height: 0px;
        width: 0px;
    }
    #id_username, #id_password {
        height: 3em;
        width: 50vw;
    }
}
form{
    text-align: center;
}
#login{
  transition: 2s;
  overflow: hidden;
  opacity: 0;
}
#cllogo {
    display: flex;
    transition: opacity 1s ease-in-out;
}
#logotext {
    transition: opacity 1s ease-in-out, height 1s ease-in-out;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slogan_styler {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 1vh;
}
.main_slogan {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.slogan {
    display: flex;
    flex: 1;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'Roboto', sans-serif;
}
.outer_box {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.center_text {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: row;
    width: 100%;
}
form {
    display: flex;
}
.form_table {
    display: flex;
    flex-flow: column;
    width: 100%;
    justify-content: center;
}
.t_row {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin-bottom: 5px;
}
.etheral_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: rgba(255,255,255, 0.9);
}
.in_box {
    display: flex;
    width: 100%;
    justify-content: center;
}
.log_btn_outer {
    display: flex;
    width: 100%;
    justify-content: center;
}
.login_btn {
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 5px;
    color: rgba(250,250,250, 0.6);
    border: 2px rgba(255,255,255, 0.7) solid;
    background: rgb(255,255,255,0.4);
    text-transform: uppercase;
}
.login_btn:hover {
    cursor: pointer;
    background: rgb(255,255,255,0.3);
    color: rgba(250,250,250, 0.9);
    transition: 0.5s;
}
#id_username, #id_password {
    text-align: center;
    border-radius: 5px;
    margin-bottom: 2em;
    color: rgba(5,5,5, 0.7);
    border: 2px rgba(255,255,255, 0.7) solid;
    background: rgb(255,255,255,0.5);
}