body {
    width: 100%;
    height: 100%;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: #CCC;
    background-color: #FFF;
}
html {
    width: 100%;
    height: 100%;
}
/*  -------------------------------------------------------------
  LOGIN
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    text-align: center;
    color: #60697b;
    background-color: #f6f7f9;
    border: 10px solid #FFF;
}
.intro .intro-body {
    text-align: center;
}
.container {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0rem 0rem 1.25rem rgba(30, 34, 40, 0.04);
}
.login {
    font-family: 'Lato-lihgt', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #4A4A4A;
    line-height: 20px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 0px;
    margin: 5px 0px;
}
.logo-login {
    margin: 0px 4px 4px;
}
.titular {
    font-family: 'Lato-bold', Helvetica, Arial, sans-serif;
    font-size: 38px;
    color: #393b47;
    line-height: 38px;
    padding: 0px;
    margin: 0px;
}
.subtitular {
    font-family: 'Lato-light', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #393b47;
    line-height: 20px;
}
.subtitular a {
    color: #fff;
}

p.subtitular  {
    font-size:16px;
    padding: 2rem 0 4rem;
}

p.subtitular a {
    color: #fff;
    text-decoration:none;
    width:100%;
    max-width:390px;
    background-color:#4A4A4A ;
    border-color: #4A4A4A ;
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.boton-login {
    width: 100%;
    background: #1ABC9C;
    border-radius: 5px;
    font-family: 'Lato-lihgt', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 17px;
    padding: 10px;
    margin: 5px 0;
    height: 50px;
}
.boton-cancellation {
    width: 100%;
    background: #FFB600;
    border-radius: 5px;
    font-family: 'Lato-lihgt', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 17px;
    padding: 10px;
    margin: 20px 0;
    height: 50px;
}
input.login.form-control {
    width: 100%;
    max-width: 390px;
    font-size: 1.4em;
    padding: 1.1em;
    margin: 5px auto;
}
/*  -------------------------------------------------------------
  SECTION
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*  -------------------------------------------------------------
  FOOTER
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cierre-login {
    margin-top: 5px;
    font-family: 'Lato-lihgt', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #FFF;
    text-align: center;
}
.cierre-login a {
    color: #FFF;
    text-decoration: none;
}
.cierre-login a:hover {
    color: #FFF;
    text-decoration: underline;
}

/*  -------------------------------------------------------------
  FORMS
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*  -------------------------------------------------------------
  MEDIA QUERIES
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {
    .intro {
        display: table;
        width: 100%;
        height: 100%;
        padding: 10px 0;
        text-align: center;
        color: #60697b;
        background-color: #f6f7f9;
        border: 10px solid #FFF;
    }
    .intro .intro-body {
        text-align: center;
    }
    .container {
      margin-left: 20px;
      margin-right: 20px;
    }
    .login {
        font-family: Lato-Light;
        font-size: 18px;
        color: #4A4A4A;
        line-height: 20px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 5px;
        margin: 5px 0px;
    }
    .logo-login {
        margin: 0px 4px 4px;
    }
    .titular {
        font-family: Lato-Bold;
        font-size: 38px;
        color: #393b47;
        line-height: 38px;
        padding: 0px;
        margin: 0px;
    }
    .subtitular {
        font-family: Lato-Light;
        font-size: 18px;
        color: #393b47;
        line-height: 20px;
    }
    .boton-login {
        width: 100%;
        background: #1ABC9C;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px;
        margin: 5px 0;
    }
    .boton-cancellation {
        width: 100%;
        background: #FFB600;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px 10px;
        margin: 20px 0px;
    }
    input.login.form-control {
        max-width:none;
    }
}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {
    .intro {
        display: table;
        width: 100%;
        height: 100%;
        padding: 0px;
        text-align: center;
        color: #60697b;
        background-color: #f6f7f9;
        border: 10px solid #FFF;
    }
    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
    }
    .titular {
        font-family: Lato-Bold;
        font-size: 48px;
        color: #393b47;
        line-height: 48px;
        padding: 0px;
        margin: 0px;
    }
    .subtitular {
        font-family: Lato-Light;
        font-size: 20px;
        color: #393b47;
        line-height: 26px;
    }
    .login {
        width: 250px;
        font-family: Lato-Light;
        font-size: 18px;
        color: #4A4A4A;
        line-height: 20px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 5px;
        margin: 5px 0px;
    }
    .logo-login {
        margin: 20px;
    }
    .boton-login {
        width: 390px;
        background: #1ABC9C;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        text-shadow: 0px 1px 2px rgba(0,0,0,0.50);
        padding: 10px;
        margin: 5px 0;
    }
    .boton-cancellation {
        width: 390px;
        background: #FFB600;
        border-radius: 5px;
        font-family: Lato-Light;
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        text-shadow: 0px 1px 2px rgba(0,0,0,0.50);
        padding: 10px 10px;
        margin: 20px 0px;
    }
}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
    .intro {
        display: table;
        width: 100%;
        height: 100%;
        padding: 0px;
        text-align: center;
        color: #60697b;
        background-color: #f6f7f9;
        border: 10px solid #FFF;
    }
    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
    }
    .titular {
        font-family: Lato-Bold;
        font-size: 48px;
        color: #393b47;
        line-height: 48px;
        padding: 0px;
        margin: 0px;
    }
    .subtitular {
        font-family: Lato-Light;
        font-size: 20px;
        color: #393b47;
        line-height: 26px;
    }
    .login {
        width: 250px;
        font-family: Lato-Light;
        font-size: 18px;
        color: #4A4A4A;
        line-height: 20px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 5px;
        margin: 5px 0px;
    }
    .logo-login {
        margin: 20px;
    }
    .boton-login {
        width: 390px;
        background: #1ABC9C;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px;
        margin: 5px 0;
    }
    .boton-cancellation {
        width: 390px;
        background: #FFB600;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px;
        margin: 20px 0;
    }
}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {
    .intro {
        display: table;
        width: 100%;
        height: 100%;
        padding: 0px;
        text-align: center;
        color: #60697b;
        background-color: #f6f7f9;
        border: 10px solid #FFF;
    }
    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
    }
    .titular {
        font-family: Lato-Bold;
        font-size: 48px;
        color: #393b47;
        line-height: 48px;
        padding: 0px;
        margin: 0px;
    }
    .subtitular {
        font-family: Lato-Light;
        font-size: 20px;
        color: #393b47;
        line-height: 26px;
    }
    .login {
        width: 250px;
        font-family: Lato-Light;
        font-size: 18px;
        color: #4A4A4A;
        line-height: 20px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 5px;
        margin: 5px 0px;
    }
    .logo-login {
        margin: 20px;
    }
    .boton-login {
        width: 390px;
        background: #1ABC9C;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px;
        margin: 5px 0;
    }
    .boton-cancellation {
        width: 390px;
        background: #FFB600;
        border-radius: 5px;
        font-family: Lato-Light;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 17px;
        padding: 10px;
        margin: 20px 0;
    }
}

img {
    width: auto;
    padding-bottom: 4rem;
}

.form-control {
    width: 100%;
    height: 50px;
}

@media (min-width: 768px) {
.form-inline .form-control {
    display: inline-block;
    width: 52%;
    vertical-align: middle;
}
}

.app-login-body {
    margin-top: 20vh;
}