@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

body {
    background: url(../images/background.png) no-repeat top center;
    background-size: cover;
    height: 90%;
    font-size: 13px;
    font-family:  Helvetica, sans-serif;;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: right;
}

.error {
    margin: auto;
    padding: 10px;
    width: 90%;
    font-weight: bold;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

 #marco-login
 {
     background: linear-gradient(135deg, rgba(8, 54, 135, 1) 0%, rgba(86, 192, 103, 1) 100%);
     padding:10px;
     margin-right: 5%;
 }

#login {
    vertical-align: top;
    width: 300px;
    max-width: 300px;
    padding-top: 30px;
    padding-bottom: 20px;

    background: linear-gradient(135deg, rgba(1, 17, 56, 1)  0%, rgba(10, 59, 43, 1)100%);
}

.form-group span img {
    width: 27px;
    height:32px;
    max-width: 100%;
    background-color: #e6e6e6;
    position: absolute;
    padding: 5px;
}

.form-group span {
    width: 15%;
}

#cap {
    padding-left: 100px;
    height: auto !important;
}

a {
    color:#38b770;
    text-decoration: none;
    font-weight: bold;
}

a, a:hover {
    color: #57d48f;
}

.form-group {
    margin: 10px;
    text-align: center;
}

.label-group {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2em;
    color: #8533ba;
    font-weight: bold;

}

#captcha {
    border-right: 2px solid #cdcdcd;
    width: 100px;
    padding: 0;
    background: black;
}

.form-group input {
    width: 100%;
    font-size: 1.3em;
    max-width: 100%;
    padding: 11px;
    border-radius: 0;
    border: none;
    background: #FFF;
    text-align: center;
    color: #333;
    font-weight: bold;
}

input::placeholder {
    color: #ccc;
}

#footer {
    color: #fff;
}

.btn {
    font-size: 2em;
    background: #5ac266;
    color: #1a1e21;
    padding: 5px;
    width: 100%;
    border: none;
    border-radius: 2px;
    font-weight: bold;
    box-shadow: -3px 5px 9px 4px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: -3px 5px 9px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: -3px 5px 9px 4px rgba(0, 0, 0, 0.6);
}

#logotipo {
    width: 300px;
}

.fa-whatsapp {
    width: 8%;
    height: 4%;
    content: url("../images/whatsapp.png");
}

.right {
    position: absolute;
    font-size: 2em;
    width: 90%;
    bottom: 0;
    right: 0;
}

.img-responsive {
    max-width: 100%;
}
.logo{
    position: absolute;
    top: 1%;
    right: 5%;
}
.middle, .login {
    justify-content: center;
    flex-direction: row;
    align-self: center;

}

.middle {
    width: 30%;
}

.middle img {
    width: 100%;
}

@media screen and (min-width: 600px) and (max-width: 1100px) {
    body
    {
        background-position: top right;
    }
    .left img {
        display: none;
    }

    .left {
        padding-top: 10px;
        height: auto;
        min-height: 50px;
        display: block;
    }

    #login {
        padding-top: 0%;

        display: inline-block;
        z-index: 999;
        position: relative;

    }

    .right {
        width: 44%;
    }

    .right .companias {
        width: 70%;
    }

    .logo {
        width: 35%;
        margin-right: 10px;
    }

    .slogan {
        vertical-align: top;
    }

    #logotipo {
        max-height: 100px;
    }

    .slogan {
        text-align: center;
        font-size: 2em;
    }
    #captcha
    {
        height:42px;
    }
}

@media screen and (max-width: 600px) {
    body {
        height: auto;
        display:block;
        background-size: cover  ;
        background-position: bottom right;
    }
    form, #logotipo {
        max-width: 100%;
    }

    #logotipo {
        width: 100%;
    }

    #marco-login {
        width: 95%;
        max-width: 95%;
    }
    #login {

        width: 100%;
        max-width: 100%;
    }
    .logo {
        position: relative !important;
        width: 80%;
        margin:auto;
        top:auto;
        right:auto;
        margin-bottom:30px;
    }

    .slogan {
        margin-left: 0px;
        margin-right: 0px;
        width: 60% !important;
        font-size: 1.2em;
    }
    .form-group span img
    {
        margin-top:10px;
    }
    #captcha
    {
        height:45px;
        max-width: 100% !important;
    }
    .form-group input, .btn {
        width: 90%;
        font-size: 1.5em;
        margin-top: 10px;
    }
}