@charset "utf-8";
@import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c9fa8+30,f7d383+100 */
    background-image: url("../Images/monte-olimpo.jpg");
    background: #0c9fa8; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0c9fa8 30%, #f7d383 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0c9fa8 30%,#f7d383 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0c9fa8 30%,#f7d383 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c9fa8', endColorstr='#f7d383',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    height: calc(100vh);
    width: 100%;
    justify-content: center;
    align-items: center;
}

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

* {box-sizing: border-box;
    margin: 0px auto;
    &:before, &:after
}

{
    box-sizing: border-box;
}

.card-signin {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgb(255,255,255,0.6);
}

.login {
    order: 2;
    flex-direction: row;
    display:flex;
    flex-wrap:wrap;
    padding: 2rem;
}
.infoLogin {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c9fa8+2,0effe3+92 */
    background: #0c9fa8; /* Old browsers */
    background: -moz-linear-gradient(top, #0c9fa8 2%, #0effe3 92%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0c9fa8 2%,#0effe3 92%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0c9fa8 2%,#0effe3 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c9fa8', endColorstr='#0effe3',GradientType=0 ); /* IE6-9 */
    order: 1;
    flex-direction: column;
    border: 0;
    border-radius: 3px 0px 0px 3px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
}

.logo {
    width: 150px;
}
footer {
    background: #fff;
    padding: 15px 20px;
    align-self: flex-end;
}

.leyenda {
    color: #754515;
    width: 200px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}
.sinbordefondo {
    border: 0;
    border-radius: 3px 3px 3px 3px;
    padding:1rem;
}
.fa {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c9fa8+2,0effe3+92 */
    color: #0c9fa8; /* Old browsers */
    font-size: 22px;
    float:left;
}
/*code-sass https://www.codeply.com/go/f3uTwmsCVZ
    .btn-outline-primary {
    @include button-outline-variant($mynewcolor, darken($mynewcolor,4%), lighten($mynewcolor,5%), $mynewcolor);
}*/
.btn-outline-primary {
    color: teal;
    background-color: transparent;
    background-image: none;
    border-color: teal
}

    .btn-outline-primary:hover {
        color: white;
        background-color: #009a9a;
        border-color: teal
    }

    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
        box-shadow: 0 0 0 .2rem rgba(0,128,128,0.5)
    }

    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled {
        color: teal;
        background-color: transparent
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: white;
        background-color: #009a9a;
        border-color: teal
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
        .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(0,128,128,0.5)
        }

.containerInput {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Medium devices (desktops, 992px and up) */
@media(max-width: 1059px) {
    .infoLogin {
        background: none;
        height:auto;
    }

    .logo {
        width: 150px;
    }

    .infoLogin h6 {
        display:none;
    }
}

/* ---------- LOGIN ---------- */
.form-login {
    height:35px;
    width: 220px;
}