/* 
    Contents
    -----------------------------------
    - Imports
    - Colours
    - Native
    - Generic classes
    - Content
        - Header
        - Aside / Menu
        - Content
        - Footer
*/


/* Imports
-----------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

/* Colours
-----------------------------------------------*/
/* Main - Blue / #0099CC ------------*/

/* Main - Dark / #007DA7 ------------*/

/* Main - Light / #BFE5F2 -----------*/

/* Contrast - #21242C ---------------*/

/* Contrast - Darker 1 - #1C1E25 ----*/

/* Contrast - Darker 2 - #15171C ----*/

/* White #FFFFFF --------------------*/
form > div, form::before, form::after, input { border-color: #FFFFFF; }
input[type="submit"]:hover { background-color: #FFFFFF; }
form, h2, input, .input-wrap i { color: #FFFFFF; }

/* V. Light Grey #EEEEEE------------ */

/* Light Grey #E7E7E7 ---------------*/

/* Grey #767E96 ---------------------*/
input[type="submit"]:hover { color: #767E96; }

/* Dark Grey #353D39 ----------------*/

/* Black #000000 --------------------*/

/* RGBA colours 
-------------------*/
/* White 0.1 ------------------------*/
input[type="submit"] { background-color: rgba(255,255,255,0.1); }

/* Black 0.1 ------------------------*/

/* Black 0.3 ------------------------*/


/* Native
-----------------------------------------------*/
body {
    background:linear-gradient(85deg,#002c3b,#01BCFA,#9ac9d9);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 45s ease infinite;
    -moz-animation: AnimationName 45s ease infinite;
    animation: AnimationName 45s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/* Generic classes
-----------------------------------------------*/
h1 {
    color: #FFF;
    margin: 3px 0;
    padding-bottom: 5px;
    text-align: right;
    text-shadow: 2px 2px rgba(0,0,0,0.25);
}

h2 {
    font-weight: 100;
    margin-top: 0;
}

a {
    color: inherit;
}

/* Content
-----------------------------------------------*/
    /* Header
    -----------------------------------------------*/

    
    /* Aside / Menu
    -----------------------------------------------*/


    /* Content
    -----------------------------------------------*/
    #login, #forgot, #reset-password {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    form > div {
        border-style: solid;
        border-width: 1px 0;
        padding: 15px;
    }

    form::before, form::after {
        border-style: solid;
        border-width: 1px;
        content: '';
        display: block;
        width: 100%;
    }

    form::before {
        margin-bottom: 3px;
    }

    form::after {
        margin-top: 3px;
    }
    
    .input-wrap {
        position: relative;
    }

    .input-wrap i {
        font-size: 23px;
        line-height: 50px;
        opacity: 0.5;
        position: absolute;
        right: 15px;
    }

    .input-wrap input:focus + i {
        opacity: 1;
    }

    input {
        border-style: solid;
        border-width: 1px;
    }

    input[type="text"], input[type="password"] {
        background: none;
        font-size: 20px;
        height: 50px;
        margin-bottom: 10px;
        padding: 10px;
        width: 100%;
    }

    input[type="submit"] {
        font-size: 18px;
        line-height: 40px;
        width: 100%;
    }

    a {
        display: block;
        line-height: 43px;
    }

    a:hover {
        text-decoration: underline;
    }

    /* Footer
    -----------------------------------------------*/