body,
        .signin {
            background-color: #d3d3d3;
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .login {
            position: relative;
            height: 400px;
            width: 405px;
            margin: auto;
            padding: 60px 60px;
            background: url() no-repeat center center #2c3e50;
            background-size: cover;
            box-shadow: 0px 30px 60px -5px #000;
        }

        form {
            padding-top: 80px;
        }

        .active {
            border-bottom: 2px solid #1161ed;
        }

        .nonactive {
            color: rgba(255, 255, 255, 0.2);
        }

        h2 {
            padding-left: 12px;
            font-size: 22px;
            text-transform: uppercase;
            padding-bottom: 5px;
            letter-spacing: 2px;
            display: inline-block;
            font-weight: 100;
        }

            h2:first-child {
                padding-left: 0px;
            }

        span {
            text-transform: uppercase;
            font-size: 12px;
            opacity: 0.4;
            display: inline-block;
            position: relative;
            top: -65px;
            transition: all 0.5s ease-in-out;
        }

        .text {
            border: none;
            width: 89%;
            padding: 10px 20px;
            display: block;
            height: 15px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0);
            overflow: hidden;
            margin-top: 15px;
            transition: all 0.5s ease-in-out;
        }

            .text:focus {
                outline: 0;
                border: 2px solid rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                background: rgba(0, 0, 0, 0);
            }

                .text:focus + span {
                    opacity: 0.6;
                }

        input[type="text"],
        input[type="password"] {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
        }



        input {
            display: inline-block;
            padding-top: 20px;
            font-size: 14px;
        }

        h2,
        span,
        .custom-checkbox {
            margin-left: 20px;
        }

        .custom-checkbox {
            -webkit-appearance: none;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 8px;
            border-radius: 2px;
            display: inline-block;
            position: relative;
            top: 6px;
        }

            .custom-checkbox:checked {
                background-color: rgba(17, 97, 237, 1);
            }

                .custom-checkbox:checked:after {
                    content: '\2714';
                    font-size: 10px;
                    position: absolute;
                    top: 1px;
                    left: 4px;
                    color: #fff;
                }

            .custom-checkbox:focus {
                outline: none;
            }

        label {
            display: inline-block;
            padding-top: 10px;
            padding-left: 5px;
        }

        .signin {
            background-color: #1161ed;
            color: #FFF;
            width: 100%;
            padding: 10px 20px;
            display: block;
            height: 39px;
            border-radius: 20px;
            margin-top: 30px;
            transition: all 0.5s ease-in-out;
            border: none;
            text-transform: uppercase;
        }

            .signin:hover {
                background: #4082f5;
                box-shadow: 0px 4px 35px -5px #4082f5;
                cursor: pointer;
            }

            .signin:focus {
                outline: none;
            }

        hr {
            border: 1px solid rgba(255, 255, 255, 0.1);
            top: 85px;
            position: relative;
        }

        a {
            text-align: center;
            display: block;
            top: 120px;
            position: relative;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.2);
        }

        /*Loading*/
        .windows8 {
            position: relative;
            width: 26px;
            height: 26px;
            margin: auto;
        }

            .windows8 .wBall {
                position: absolute;
                width: 25px;
                height: 25px;
                opacity: 0;
                transform: rotate(225deg);
                -o-transform: rotate(225deg);
                -ms-transform: rotate(225deg);
                -webkit-transform: rotate(225deg);
                -moz-transform: rotate(225deg);
                animation: orbit 6.96s infinite;
                -o-animation: orbit 6.96s infinite;
                -ms-animation: orbit 6.96s infinite;
                -webkit-animation: orbit 6.96s infinite;
                -moz-animation: orbit 6.96s infinite;
            }

                .windows8 .wBall .wInnerBall {
                    position: absolute;
                    width: 3px;
                    height: 3px;
                    background: rgb(255,255,255);
                    left: 0px;
                    top: 0px;
                    border-radius: 3px;
                }

            .windows8 #wBall_1 {
                animation-delay: 1.52s;
                -o-animation-delay: 1.52s;
                -ms-animation-delay: 1.52s;
                -webkit-animation-delay: 1.52s;
                -moz-animation-delay: 1.52s;
            }

            .windows8 #wBall_2 {
                animation-delay: 0.3s;
                -o-animation-delay: 0.3s;
                -ms-animation-delay: 0.3s;
                -webkit-animation-delay: 0.3s;
                -moz-animation-delay: 0.3s;
            }

            .windows8 #wBall_3 {
                animation-delay: 0.61s;
                -o-animation-delay: 0.61s;
                -ms-animation-delay: 0.61s;
                -webkit-animation-delay: 0.61s;
                -moz-animation-delay: 0.61s;
            }

            .windows8 #wBall_4 {
                animation-delay: 0.91s;
                -o-animation-delay: 0.91s;
                -ms-animation-delay: 0.91s;
                -webkit-animation-delay: 0.91s;
                -moz-animation-delay: 0.91s;
            }

            .windows8 #wBall_5 {
                animation-delay: 1.22s;
                -o-animation-delay: 1.22s;
                -ms-animation-delay: 1.22s;
                -webkit-animation-delay: 1.22s;
                -moz-animation-delay: 1.22s;
            }



        @keyframes orbit {
            0% {
                opacity: 1;
                z-index: 99;
                transform: rotate(180deg);
                animation-timing-function: ease-out;
            }

            7% {
                opacity: 1;
                transform: rotate(300deg);
                animation-timing-function: linear;
                origin: 0%;
            }

            30% {
                opacity: 1;
                transform: rotate(410deg);
                animation-timing-function: ease-in-out;
                origin: 7%;
            }

            39% {
                opacity: 1;
                transform: rotate(645deg);
                animation-timing-function: linear;
                origin: 30%;
            }

            70% {
                opacity: 1;
                transform: rotate(770deg);
                animation-timing-function: ease-out;
                origin: 39%;
            }

            75% {
                opacity: 1;
                transform: rotate(900deg);
                animation-timing-function: ease-out;
                origin: 70%;
            }

            76% {
                opacity: 0;
                transform: rotate(900deg);
            }

            100% {
                opacity: 0;
                transform: rotate(900deg);
            }
        }

        @-o-keyframes orbit {
            0% {
                opacity: 1;
                z-index: 99;
                -o-transform: rotate(180deg);
                -o-animation-timing-function: ease-out;
            }

            7% {
                opacity: 1;
                -o-transform: rotate(300deg);
                -o-animation-timing-function: linear;
                -o-origin: 0%;
            }

            30% {
                opacity: 1;
                -o-transform: rotate(410deg);
                -o-animation-timing-function: ease-in-out;
                -o-origin: 7%;
            }

            39% {
                opacity: 1;
                -o-transform: rotate(645deg);
                -o-animation-timing-function: linear;
                -o-origin: 30%;
            }

            70% {
                opacity: 1;
                -o-transform: rotate(770deg);
                -o-animation-timing-function: ease-out;
                -o-origin: 39%;
            }

            75% {
                opacity: 1;
                -o-transform: rotate(900deg);
                -o-animation-timing-function: ease-out;
                -o-origin: 70%;
            }

            76% {
                opacity: 0;
                -o-transform: rotate(900deg);
            }

            100% {
                opacity: 0;
                -o-transform: rotate(900deg);
            }
        }

        @-ms-keyframes orbit {
            0% {
                opacity: 1;
                z-index: 99;
                -ms-transform: rotate(180deg);
                -ms-animation-timing-function: ease-out;
            }

            7% {
                opacity: 1;
                -ms-transform: rotate(300deg);
                -ms-animation-timing-function: linear;
                -ms-origin: 0%;
            }

            30% {
                opacity: 1;
                -ms-transform: rotate(410deg);
                -ms-animation-timing-function: ease-in-out;
                -ms-origin: 7%;
            }

            39% {
                opacity: 1;
                -ms-transform: rotate(645deg);
                -ms-animation-timing-function: linear;
                -ms-origin: 30%;
            }

            70% {
                opacity: 1;
                -ms-transform: rotate(770deg);
                -ms-animation-timing-function: ease-out;
                -ms-origin: 39%;
            }

            75% {
                opacity: 1;
                -ms-transform: rotate(900deg);
                -ms-animation-timing-function: ease-out;
                -ms-origin: 70%;
            }

            76% {
                opacity: 0;
                -ms-transform: rotate(900deg);
            }

            100% {
                opacity: 0;
                -ms-transform: rotate(900deg);
            }
        }

        @-webkit-keyframes orbit {
            0% {
                opacity: 1;
                z-index: 99;
                -webkit-transform: rotate(180deg);
                -webkit-animation-timing-function: ease-out;
            }

            7% {
                opacity: 1;
                -webkit-transform: rotate(300deg);
                -webkit-animation-timing-function: linear;
                -webkit-origin: 0%;
            }

            30% {
                opacity: 1;
                -webkit-transform: rotate(410deg);
                -webkit-animation-timing-function: ease-in-out;
                -webkit-origin: 7%;
            }

            39% {
                opacity: 1;
                -webkit-transform: rotate(645deg);
                -webkit-animation-timing-function: linear;
                -webkit-origin: 30%;
            }

            70% {
                opacity: 1;
                -webkit-transform: rotate(770deg);
                -webkit-animation-timing-function: ease-out;
                -webkit-origin: 39%;
            }

            75% {
                opacity: 1;
                -webkit-transform: rotate(900deg);
                -webkit-animation-timing-function: ease-out;
                -webkit-origin: 70%;
            }

            76% {
                opacity: 0;
                -webkit-transform: rotate(900deg);
            }

            100% {
                opacity: 0;
                -webkit-transform: rotate(900deg);
            }
        }

        @-moz-keyframes orbit {
            0% {
                opacity: 1;
                z-index: 99;
                -moz-transform: rotate(180deg);
                -moz-animation-timing-function: ease-out;
            }

            7% {
                opacity: 1;
                -moz-transform: rotate(300deg);
                -moz-animation-timing-function: linear;
                -moz-origin: 0%;
            }

            30% {
                opacity: 1;
                -moz-transform: rotate(410deg);
                -moz-animation-timing-function: ease-in-out;
                -moz-origin: 7%;
            }

            39% {
                opacity: 1;
                -moz-transform: rotate(645deg);
                -moz-animation-timing-function: linear;
                -moz-origin: 30%;
            }

            70% {
                opacity: 1;
                -moz-transform: rotate(770deg);
                -moz-animation-timing-function: ease-out;
                -moz-origin: 39%;
            }

            75% {
                opacity: 1;
                -moz-transform: rotate(900deg);
                -moz-animation-timing-function: ease-out;
                -moz-origin: 70%;
            }

            76% {
                opacity: 0;
                -moz-transform: rotate(900deg);
            }

            100% {
                opacity: 0;
                -moz-transform: rotate(900deg);
            }
        }