/*******************
        LOGIN FORM STYLESHEET
        by: Amit Jakhu
        www.amitjakhu.com
        *******************/

    /*******************
        FONTS
        *******************/

    @import url(http://fonts.googleapis.com/css?family=Bree+Serif);

    /*******************
        SELECTION STYLING
        *******************/

    ::selection {
        color: #fff;
        /* background: #f676b2; */
        background:#ff9800
        /* Safari */
    }

    ::-moz-selection {
        color: #fff;
        background:#ff9800
        /* background: #f676b2; */
        /* Firefox */
    }

    /*******************
        BODY STYLING
        *******************/

    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* body {
            background: url(../images/bg.png) repeat;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight:300;
            text-align: left;
            text-decoration: none;
        } */

    /* Center wrapper perfectly */
    /* #wrapper {
            width: 300px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -200px;
        } */

    /*
        .gradient {
            width: 600px;
            height: 600px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -300px;
            
            background: url(../images/gradient.png) no-repeat;
        }
        */

    .gradient {
        /* Center Positioning */



        width: 100%;
        height: 100%;
        position: fixed;
        /* left: 50%; */
        /* top: 50%; */
        background: #1c355d;

        /* margin-left: -300px; */
        /* margin-top: -300px; */
        /* background-image: url(../images/gradient.png); */
        /* background-repeat: no-repeat; */
        /* background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213, 246, 255, 1)), to(rgba(213, 246, 255, 0))); */
        /* background-image: -webkit-radial-gradient(45% 49%, 8% 52%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0)); */
        /* background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0)); */

/* 
        width: 600px;
        height: 600px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -300px; */

        /* Fallback */
        /* background-image: url(../images/gradient.png); */
        /* background-repeat: no-repeat; */

        /* CSS3 Gradient */
        /* background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213, 246, 255, 1)), to(rgba(213, 246, 255, 0)));
        background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0)); */
    }

    /*******************
        LOGIN FORM
        *******************/

    .login-form {
        top: 9em;
        /* left: 11em; */
        width: 300px;
        margin: 0 auto;
        position: relative;
        z-index: 5;
        background: #f3f3f3;
        border: 1px solid #fff;
        border-radius: 2%;
        box-shadow: 1 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 13px 13px 22px #00050c;
        
    }

    /*******************
        HEADER
        *******************/

        .logoTopRoute {
            /* opacity: .8; */
            cursor: pointer;
            /* border: solid 2px #9E9E9E; */
            border: 1px solid #fff;
            border-bottom: none;
            border-right: none;
            border-top: none;
        }
        
        .logoTopRoute:hover{
            /* opacity: 1; */
            cursor: pointer;
        }

    .login-form .header {
        /*padding: 15px 30px 29px 30px; */
        text-align: center;
        background: #152744;
        border-radius: 3% 3% 0% 0%;
        padding-top: 14px;
    }

    .login-form .header h1 {
        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 28px;
        line-height: 34px;
        /* color: #414848; */
        color: #FF5722;
        /* text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); */
        margin-bottom: 10px;
    }

    .login-form .header span {
        font-size: 11px;
        line-height: 16px;
        color: #ffffff;
        /* color: #678889; */
        /* text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); */
    }

    /*******************
        CONTENT
        *******************/

    .login-form .content {
        padding: 26px 30px 20px 30px;
        /* padding: 0 30px 25px 30px; */
        /* height: 17em; */
        background: #152744;
    }

    /* Input field */
    .login-form .content .input {
        width: 100%;
        padding: 15px 25px;

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #9d9e9e;
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);

        background: #fff;
        border: 1px solid #fff;
        border-radius: 5px;

        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    }

    /* Second input field */
    .login-form .content .password,
    .login-form .content .pass-icon {
        margin-top: 25px;
    }

    .login-form .content .input:hover {
        background: #dfe9ec;
        color: #414848;
    }

    .login-form .content .input:focus {
        background: #dfe9ec;
        color: #414848;

        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }



    /* Animation */
    .input,
    .button,
    .register {
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
    }

    /*******************
        FOOTER
        *******************/

    .login-form .footer1 {
    padding: 41px 0px 40px 0px;
    /* overflow: auto; */
    text-align: center;
    background: #d4dedf;
    border-top: 1px solid #fff;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0% 0% 10% 5%;
}

    /* Login button */
    .login-form .footer1 .button {
      
        width: 90%;
        height: auto;
    /* float: right; */
    padding: 11px 25px;
    font-family: 'Bree Serif', serif;
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.25);
    background: #152744;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.75);
    -moz-box-shadow: inset 0 0 2px rgba(256, 256, 256, 0.75);
    -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.75);

    }

    .login-form .footer1 .button:hover {
        background: orangered;
        border: 1px solid rgba(256, 256, 256, 0.75);

        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    .login-form .footer1 .button:focus {
        position: relative;
        bottom: -1px;

        background: #56c2e1;

        box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
        -moz-box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
        -webkit-box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
    }

    /* Register button */
    .login-form .footer1 .register {
        display: block;
        float: right;
        padding: 10px;
        margin-right: 20px;

        background: none;
        border: none;
        cursor: pointer;

        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 18px;
        color: #414848;
        text-shadow: 0px 1px 0 rgba(256, 256, 256, 0.5);
    }

    .login-form .footer1 .register:hover {
        color: #3f9db8;
    }

    .login-form .footer1 .register:focus {
        position: relative;
        bottom: -1px;
    }