body {
    font-family: Ubuntu, Helvetica, Arial, sans-serif
}

.inner {
    align-items: center;
    background-image: url(../../imagens/bg-login-gescon.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 50px);
    overflow: hidden;
    padding: 5% 10% 5% 5%;
    position: relative;
    width: 100%
}

.inner .box-intro .logo img {
    width: 250px
}

.inner .box-intro .title {
    margin: 25% 0
}

.inner .box-intro .title h1 {
    font-size: 3.5em
}

.inner .box-intro .title h1 span {
    display: block;
    font-weight: 700
}

.inner .box-intro .title h3 {
    font-size: 1.5em;
    margin-top: 0
}

.inner .box-intro .title hr {
    border-color: #EAE47F;
    display: inline-block;
    width: 20%
}

.inner .box-login {
    background-color: #00294B;
    border-bottom-right-radius: 60px;
    box-shadow: 8px 10px 20px 1px rgba(0, 0, 0, .14), 12px 11px 30px 5px rgba(0, 0, 0, .12), 2px 11px 20px -7px rgba(0, 0, 0, .2);
    padding: 3.5em;
    position: relative
}

.inner .box-login a {
    color: #6DB4EF
}

.inner .box-login a:hover {
    color: #EAE47F;
    text-decoration: none
}

.inner .box-login h2 {
    font-size: 3.5em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.5em
}

.inner .box-login form .group {
    position: relative;
    margin-bottom: 30px
}

.inner .box-login form .group input {
    background: 0 0;
    border: none;
    border-bottom: 1px solid #6DB4EF;
    display: block;
    padding: 10px;
    width: 100%
}

.inner .box-login form .group input:focus {
    outline: 0
}

.inner .box-login form .group input:focus ~ label, .inner .box-login form .group input:valid ~ label {
    color: #6DB4EF;
    font-size: .8em;
    top: -10px
}

.inner .box-login form .group input:focus ~ .bar:before {
    left: 0;
    right: 0
}

.inner .box-login form .group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #00294B inset;
    -webkit-text-fill-color: #fff !important
}

.inner .box-login form .group label {
    color: #fff;
    left: 0;
    position: absolute;
    top: 12px;
    transition: .2s ease all
}

.inner .box-login form .group .bar {
    display: block;
    position: relative;
    width: 100%
}

.inner .box-login form .group .bar:before {
    background: #6DB4EF;
    bottom: 0;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    right: 50%;
    transition: left .2s ease-out, right .2s ease-out
}

.inner .box-login .password-options {
    display: flex;
    justify-content: space-between;
    margin: 15px 0
}

.inner .box-login .password-options label {
    bottom: 1px;
    font-weight: 100;
    position: relative
}

.inner .box-login .password-options > .form-group:first-child {
    margin-right: 30px
}

.inner .box-login .password-options .form-group {
    margin-bottom: 0
}

.inner .box-login .password-options .forgot {
    color: #6DB4EF
}

.inner .box-login .password-options .forgot a {
    font-weight: 700
}

.inner .box-login .login-btn {
    margin: 3em
}

.inner .box-login .login-btn button {
    width: 120px;
    padding: 10px 0;
    background: #146AB2;
    border: none;
    box-shadow: none;
    text-transform: uppercase
}

.inner .box-login .login-btn button span {
    position: relative;
    left: 10px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.inner .box-login .login-btn button i {
    opacity: 0;
    position: relative;
    right: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    left: 35px
}

.inner .box-login .login-btn button:hover span {
    left: 0
}

.inner .box-login .login-btn button:hover i {
    background-color: #055191;
    padding: 12px 9px;
    left: 13px;
    opacity: 1
}

.inner .box-login .login-btn .arrow {
    color: #fff;
    transition: .2s ease all;
    left: 50%;
    height: 100%
}

.inner .box-login .login-access {
    display: flex;
    flex-direction: column;
    align-items: center
}

.inner .box-login .login-access a:first-child {
    margin-bottom: 7px
}

.inner .sidebar {
    background: #DFE9F2;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 20%
}

.checkbox, .footer {
    position: relative
}

.footer {
    align-items: center;
    background-color: #fff;
    color: #6DB4EF;
    display: flex;
    font-size: .9em;
    height: 50px;
    justify-content: space-between;
    padding: 0 5%;
    text-align: center;
    width: 100%
}

.footer img {
    opacity: .8;
    width: 80px
}

.footer span {
    margin: 0 10px 0 15px
}

.checkbox {
    cursor: pointer;
    display: inline;
    margin: 3px 7px 0 0 !important
}

.checkbox:after, .checkbox:before {
    content: "";
    position: absolute
}

.checkbox:after {
    background: #00294B;
    border: 1px solid #6DB4EF;
    cursor: pointer;
    height: 1.1em;
    width: 1.1em
}

.checkbox:before {
    border: 2px solid #6DB4EF;
    border-top-style: none;
    border-right-style: none;
    height: .46em;
    left: .16em;
    transition: transform .4s cubic-bezier(.45, 1.8, .5, .75);
    transform: rotate(-45deg) scale(0, 0);
    top: .2em;
    width: .8em;
    z-index: 1
}

.checkbox:checked:after {
    background-color: #6DB4EF
}

.checkbox:checked:before {
    border-color: #fff;
    transform: rotate(-45deg) scale(1, 1)
}

@keyframes slideInToLeft {
    from {
        transform: translateX(100%);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slideInToRight {
    from {
        transform: translateX(-30%);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

.slide-in {
    opacity: 0
}

.slide-in.one {
    animation: ease .3s 1 slideInToLeft forwards;
    animation-delay: .3s
}

.slide-in.two {
    animation: ease .6s 1 slideInToLeft forwards;
    animation-delay: .6s
}

.slide-in.three {
    animation: ease .9s 1 slideInToLeft forwards;
    animation-delay: .9s
}

.slide-in.four {
    animation: ease 1.2s 1 slideInToLeft forwards;
    animation-delay: 1.2s
}

.slide-in.five {
    animation: ease 1.5s 1 slideInToRight forwards;
    animation-delay: 1.5s
}

@media (max-width: 1024px) {
    .inner .box-intro, .inner .title {
        text-align: center
    }

    .inner {
        background-size: cover;
        display: flex;
        flex-direction: column;
        padding: 20px
    }

    .inner .box-intro .logo img {
        width: 100px
    }

    .inner .box-intro .title {
        font-size: .9em;
        margin: 25px 0
    }

    .inner .box-intro .title h1 {
        font-weight: 700;
        font-size: 2em;
        margin: 0 auto;
        width: 300px
    }

    .inner .box-intro .title h1 span {
        display: inline
    }

    .footer, .inner .logo.logo-denit, .inner .sidebar {
        display: none
    }

    .inner .box-intro .title hr {
        margin: 10px 0
    }

    .inner .logo {
        margin: 0 auto;
        position: relative
    }

    .inner .logo img {
        width: 200px
    }

    .inner .title {
        margin: 15px
    }

    .inner .title h1 {
        font-size: 2em
    }

    .inner .title h3 {
        font-size: 1.5em
    }

    .inner .box-login {
        position: relative;
        right: 0
    }

    .inner .box-login h2 {
        font-size: 2em;
        text-align: center;
        margin: 10px 0 15px
    }

    .inner .box-login .password-options .forgot {
        width: 145px
    }
}