﻿body, html {
    height: 100%;
    min-height: 100%;
}

/*body {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
    font-family: open sans, sans-serif;
    top: 0;
    left: 0;
    margin: 0 auto;
    background: linear-gradient(-45deg, #1D2A37, #8FB839, #1D2A37, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 45s ease infinite;
    -moz-animation: Gradient 45s ease infinite;
    animation: Gradient 45s ease infinite;
}*/

body {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
    font-family: open sans, sans-serif;
    top: 0;
    left: 0;
    margin: 0 auto;
    background: linear-gradient(-45deg, #1D2A37, #1D2A37, #826EFF, #826EFF, #1D2A37);
    /*background: linear-gradient(-45deg, #82ED6A, #82ED6A, #8FB839, #8FB839, #82ED6A);*/
    /*background: linear-gradient(-45deg, #82ED6A, #8FB839, #82ED6A, #5FBDFB);*/
    background-size: 400% 400%;
    -webkit-animation: Gradient 45s ease infinite;
    -moz-animation: Gradient 45s ease infinite;
    animation: Gradient 45s ease infinite;
}

.login-container {
    position: absolute;
    width: 23%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    .login-container.register {
        width: 25%;
    }

    .login-container .valsum {
        color: red;
        width: 100%;
    }

        .login-container .valsum ul {
            list-style-type: none;
            text-align: center;
            padding: 0;
        }

    .login-container img {
        width: 65%;
        margin: 0px 0px 20px 0px;
    }

.login-input {
    width: 100%;
    padding: 6px 10px 6px 10px;
    box-sizing: border-box;
    margin: 10px 0;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    text-align: center;
    font-size: 0.9em;
}

.login-link {
    display: block;
    margin: 20px 0 0 0;
    color: #1D2A37;
}

.width-100 {
    width: 100%;
}

.copyright {
    color: #fff;
    opacity: 0.8;
}

footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    text-align: center;
    font-size: 0.7em;
    width: 100%;
    color: #fff;
}

    footer a {
        margin: 0 10px;
        color: #fff;
        text-decoration: underline;
    }

.forgot {
    width: 100%;
    text-align: center;
}

    .forgot a {
        color: #fff;
    }

        .forgot a:hover, .forgot a:focus, .forgot a:active {
            opacity: 0.7;
        }

.white {
    background-color: #fff;
}

.white-text {
    color: #fff;
}

.blue-text {
    color: #1D2A37;
}

.btn.white:hover, .btn.white:focus, .btn.white:hover {
    opacity: 0.7;
}

.login-input {
    text-align: center;
}

.btn input {
    outline: none;
}

.label.error {
    color: red;
}

.centered {
    text-align: center;
}

    .centered a, .centered p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

.stay-logged-in {
    width: 100%;
    text-align: center;
}

    .stay-logged-in input {
    }

    .stay-logged-in label {
        color: #fff !important;
    }

.success {
    color: #8FB839;
}

/*h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #1D2A37;
    font-weight: 400;
    display: block;
}*/

@media screen and (max-width: 1250px) {
    .login-container, .login-container.register {
        width: 40%;
    }
}

@media screen and (max-width: 992px) {
    .login-container, .login-container.register {
        width: 40%;
    }
}

@media screen and (max-width: 570px) {
    .login-container, .login-container.register {
        width: 90%;
    }
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
