html {
    height: 100%;
}

body {
    line-height: 1.5;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#23ddae+0,3f4c6b+86 */
    background: #23ddae; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #23ddae 0%, #3f4c6b 86%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #23ddae 0%,#3f4c6b 86%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #23ddae 0%,#3f4c6b 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23ddae', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: 'Source Sans Pro', sans-serif;
}

.logo {
    width:220px;
    margin-left:auto;
    margin-right:auto;
}

h1 {
    width:70%;
    margin-left:auto;
    margin-right:auto;
}

/* ______ FORM STYLES ______ */

.form-wrapper {
    width: 25%;
    margin: 10% auto 0 auto;
    padding: 2%;
    background: white;
    box-shadow: 0px 2px 10px #4D4D4D;
}

input[type=text], input[type=password] {
    padding: 12px 20px;
    border-radius: 4px;
    border: solid 1px #cccccc;
    box-sizing: border-box;
    width:80%;
    margin-left:10%; 
}

inputText:focus {
    border: solid 3px #29abe2;
}

input[type=submit] {
    transition: background-color 0.5s ease;
    background: #3f4c6b;
    border: none;
    border-radius: 25px;
    padding: 3% 5% 3% 5%;
    width: 80%;
    margin-left: 10%;
    color: white;
}

input[type=submit]:hover {
    background:#23ddae;
    color:#000;
}

label {
    margin-left:10%;
    padding: 1% 0 1% 0;
}

/* ______ GENERAL STYLES ______ */

.copyright {
    color:#ffffff;
    width:20%;
    margin-left:75%;
    margin-top:8%;
    font-size:0.9em;
}

/* ________ MEDIA QUERIES ________ */

/*
    1440px
*/

@media only screen and (max-width: 1440px) {
    .form-wrapper {
        width: 40%;
        margin-top:5%;
    }

    h1 {
        font-size: 2em;
        text-align: center;
    }

    p {
        font-size: 1em;
    }

    .copyright {
        margin-top: 4%;
    }
} 

/*
    1280px
*/

@media only screen and (max-width: 1280px) {
    .form-wrapper {
        width:40%;
        margin-top:2%;
        padding:1% 2%;
    }

    h1 {
        font-size:1.5em;
        text-align:center;
    }

    p {
        font-size:1em;
    }

    .copyright {
        margin-top:2%;
        width:40%;
    }
}

/*
    1024px
*/

@media only screen and (max-width: 1280px) {
    .form-wrapper {
        width: 55%;
    }

    .copyright {
        width:27%;
        margin-left:auto;
        margin-right:auto;
    }
}