/*-- Reset-Code --*/
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, dl, dt, dd, ol, nav ul, nav 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-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}
/* text align right */
.txt-lt {
    text-align: left;
}
/* text align left */
.txt-center {
    text-align: center;
}
/* text align center */
.float-rt {
    float: right;
}
/* float right */
.float-lt {
    float: left;
}
/* float left */
.clear {
    clear: both;
}
/* clear float */
.pos-relative {
    position: relative;
}
/* Position Relative */
.pos-absolute {
    position: absolute;
}
/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
    display: block;
}
/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}
/* horizontal menu */
img {
    max-width: 100%;
}
/*-- //Reset-Code --*/
body {
    font-family: Verdana;
    background: url('img/login-wl2.jpg') no-repeat 0px 0px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

    body a {
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

h1 {
    color: #FFF;
    text-align: center;
    letter-spacing: 6px;
    font-size: 40px;
    padding-top: 75px;
}

.containerW {
    width: 32%;
    margin: 50px auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.43);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

h2 {
    font-size: 30px;
    color: #FFF;
    padding-top: 45px;
    letter-spacing: 3px;
}

form {
    padding: 65px;
}

    form span {
        width: 23%;
        float: left;
        background: #fed14e;
        padding: 10.2px 10px;
        position: relative;
        color: #005377;
        font-size: 15px;
        letter-spacing: 1px;
    }

        form span:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            right: -11px;
            border-top: 6px solid rgba(0, 0, 0, 0);
            border-left: 11px solid #fed14e;
            border-bottom: 6px solid rgba(0, 0, 0, 0);
            top: 14px;
        }

input.name {
    width: 65%;
    padding: 10px 10px 10px 15px;
    border: none;
    outline: none;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 35px;
    float: left;
}

input.password {
    width: 65%;
    padding: 10px 10px 10px 15px;
    border: none;
    outline: none;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 35px;
    float: left;
}

.rem-for-agile {
    width: 50%;
    float: left;
    text-align: left;
    font-size: 13px;
    color: rgb(238, 223, 179);
}

    .rem-for-agile a {
        color: rgb(238, 223, 179);
        margin-top: 3px;
        display: inline-block;
        padding-left: 18px;
    }

        .rem-for-agile a:hover {
            color: #fff;
        }

input[type="checkbox"] {
    margin: 10px 5px 0px 0px;
    vertical-align: sub;
}

.login-w3 {
    width: 50%;
    float: right;
}

input[type="button"] {
    background-color: #005377;
    color: #fff;
    padding: 11px;
    outline: none;
    border: none;
    font-size: 17px;
    width: 50%;
    cursor: pointer;
    margin-top: 5px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

    input[type="button"]:hover {
        background: #fed14e;
        color: #000;
    }

.footer-w3l {
    margin-top: 150px;
    margin-bottom: 20px;
}

    .footer-w3l p {
        color: white;
        text-align: center;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .footer-w3l a {
        color: white;
        text-decoration: none;
    }

        .footer-w3l a:hover {
            text-decoration: underline;
        }

@media screen and (max-width: 1440px) {
    form span {
        font-size: 14px;
        padding: 10.5px 10px;
    }

    input.name {
        width: 63%;
    }

    input.password {
        width: 63%;
    }
}

@media screen and (max-width: 1366px) {
    .containerW {
        width: 37%;
    }
}

@media screen and (max-width: 1080px) {
    .containerW {
        width: 46%;
    }
}

@media screen and (max-width: 991px) {
    h1 {
        margin-top: 50px;
    }

    .containerW {
        width: 52%;
    }
}


@media screen and (max-width: 800px) {
    .containerW {
        width: 63%;
    }

    form {
        padding: 55px;
    }
}

@media screen and (max-width: 736px) {
    h1 {
        letter-spacing: 4px;
        font-size: 35px;
    }

    h2 {
        font-size: 28px;
        padding-top: 35px;
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 667px) {
    .containerW {
        width: 66%;
    }

    form {
        padding: 53px;
    }
}

@media screen and (max-width: 640px) {
    form {
        padding: 42px;
    }
}

@media screen and (max-width: 600px) {
    .containerW {
        width: 70%;
    }
}

@media screen and (max-width: 568px) {
    .containerW {
        width: 74%;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        letter-spacing: 2px;
        font-size: 31px;
    }

    .containerW {
        width: 78%;
    }

    form {
        padding: 30px;
    }

    input.name {
        width: 62%;
    }

    input.password {
        width: 62%;
    }

    input[type="button"] {
        margin-top: 8px;
    }
}

@media screen and (max-width: 414px) {
    .containerW {
        width: 85%;
    }

    form span {
        font-size: 12px;
    }

    input.name {
        width: 58.5%;
        padding: 9px 9px 9px 15px;
    }

    input.password {
        width: 58.5%;
        padding: 9px 9px 9px 15px;
    }

    .footer-w3l p {
        letter-spacing: 0;
    }
}

@media screen and (max-width: 384px) {
    form span {
        width: 25%;
    }

    input.name {
        width: 57.5%;
    }

    input.password {
        width: 57.5%;
    }
}

@media screen and (max-width: 375px) {
    h1 {
        font-size: 27px;
    }

    h2 {
        font-size: 24px;
    }

    input.name {
        width: 57%;
    }

    input.password {
        width: 57%;
    }

    form span {
        padding-left: 5px;
    }
}

@media screen and (max-width: 320px) {
    h1 {
        font-size: 23px;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 19px;
        letter-spacing: 1px;
        padding-top: 25px;
    }

    form {
        padding: 20px;
    }

        form span {
            font-size: 11px;
            width: 27%;
        }

    input.name {
        padding: 8px 9px 8px 15px;
        width: 55%;
    }

    input.password {
        padding: 8px 9px 8px 15px;
        width: 55%;
    }

    .rem-for-agile {
        font-size: 11px;
    }

    input[type="button"] {
        padding: 9px;
        font-size: 16px;
        width: 60%;
        margin-top: 10px;
    }
}