﻿
html, body {
    height: 100%;
    font-size: 14px;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-image: url(../images/fondoPrincipal.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: "Roboto-Regular";
    color: #495057;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.grecaptcha-badge {
    visibility: hidden;
}

/* Colores */
.amarillo1 {
    color: #F5CE00;
}

.amarillo2 {
    color: #FFBA00;
}

.naranja {
    color: #F99300;
}

.rojoSigma {
    color: #D64251;
}

.rojo2 {
    color: #DF162B;
}

.verde {
    color: #50AE34;
}

.azul1 {
    color: #1284C7;
}

.morado1 {
    color: #5B67AD;
}

.morado2 {
    color: #384A8C;
}

.cafe {
    color: #AB9F94;
}

.gris1 {
    color: #818A91;
}

.gris2 {
    color: #414142;
}


.rounded-12 {
    border-radius: 12px !important;
}

.check-remember {
    font-size: 15px;
}

.phone-esq {
    bottom: -1.5rem;
    right: 1rem;
    z-index: 1000;
    position: absolute;
    background: #50AE34 !important;
    color: #ffffff !important;
    padding: .2em;
    border-radius: .3em;
}

    .phone-esq:before, .phone-esq-top:before {
        font-family: FontAwesome;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: .3em;
        content: '\f095';
    }

.phone-esq-top {
    top: -1rem;
    right: 1rem;
    z-index: 1000;
    position: absolute;
    background: #50AE34 !important;
    color: #ffffff !important;
    padding: .2em;
    border-radius: .3em;
}



.centered {
    height: 100%;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


.btn-primary {
    background-color: #D64251;
    border: none;
    font-family: "Roboto-Bold";
}

    .btn-primary:hover {
        background-color: #50AE34;
    }

.input-group-text {
    background-color: #50AE34;
    color: #ffffff;
    border: none;
}

.fixed-bottom, .fixed-top {
    z-index: 0 !important;
}


.img-logo {
    width: 100%;
    height: 100%;
}

.container-login {
    width: 450px;
    z-index: 1;
}


.container-login, .col-md-9, .col-md-3 {
    padding-left: .5em;
    padding-right: .5em;
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    .img-logo {
        display: none;
    }

    .container-login, .rounded-12 {
        margin: 1em;
    }

    .img-estoes {
        display: inline !important;
    }

    .img-sigma {
        width: 40% !important;
        height: auto !important;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    .img-logo {
        display: none;
    }

    .container-login {
        min-width: 100%;
    }

    .container-login, .rounded-12 {
        margin: 1em;
    }

    .img-estoes {
        display: inline !important;
    }

    .img-sigma {
        width: 35% !important;
        height: auto !important;
    }
}
