@font-face { font-family: font-light; font-style: normal; src: url("../fonts/Metropolis-Light.otf") }
@font-face { font-family: font-regular; font-style: normal; src: url("../fonts/Metropolis-Regular.otf") }
@font-face { font-family: font-medium; font-style: normal; src: url("../fonts/Metropolis-Medium.otf") }
@font-face { font-family: font-semibold; font-style: normal; src: url("../fonts/Metropolis-SemiBold.otf") }
@font-face { font-family: font-bold; font-style: normal; src: url("../fonts/Metropolis-Bold.otf") }
@font-face { font-family: font-extrabold; font-style: normal; src: url("../fonts/Metropolis-ExtraBold.otf") }

.font-light { font-family: font-light }
.font-regular { font-family: font-regular }
.font-medium { font-family: font-medium }
.font-semibold { font-family: font-semibold }
.font-bold { font-family: font-bold }
.font-extrabold { font-family: font-extrabold }

body { margin: 0; font-family: font-regular; overflow-x: hidden; color: #69707a; min-height: 100vh }

.login .card .card-header h3 { font-family: font-light; font-size: 1.3rem; color: #363d47 }
.login .card .card-body label { font-size: .85rem }
.login .card .card-body input { font-size: .85rem }
.login .card .card-body ::placeholder { font-size: .85rem }
.login .card .card-body .btn-login { font-size: .85rem; font-family: font-semibold }

.login .content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; height: 100vh }
.login .content .content_left { width: 50%; padding: 0 80px; height: 100%; display: flex; align-items: center; justify-content: center }
.login .content .content_left .image { text-align: center }
.login .content .content_left .image img { width: 100% }

/* COLOR DE FONDO DERECHA */
.login .content .content_right { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #0852c9 }

.login .content .content_right .iniciar_sesion { background-color: #fff; border-radius: 12px; box-shadow: 0 .5rem 1rem rgba(215, 29, 29, 0.15); width: 65%; padding: 35px 20px 30px }
.login .content .content_right .iniciar_sesion .image { display: none }
.login .content .content_right .iniciar_sesion h3 { font-size: 1.2rem; font-family: font-bold; text-align: center; margin-bottom: 30px }
.login .content .content_right .iniciar_sesion label { font-size: .9rem; font-family: font-medium }
.login .content .content_right .iniciar_sesion input { font-size: .9rem; font-family: font-light; border-radius: 12px; border: 1px solid #ced4da !important }
.login .content .content_right .iniciar_sesion input:hover, .login .content .content_right .iniciar_sesion input:focus { box-shadow: unset }
.login .content .content_right .iniciar_sesion ::placeholder { font-size: .9rem; font-family: font-light }

/* COLOR BOTON LOGIN */
.login .content .content_right .iniciar_sesion .btn-login { background-color: #0852c9; border: 1px solid #0852c9 !important; color: #fff; font-family: font-medium; font-size: 1rem; width: 100% }

.login .content .content_left_register { width: 40% }
.login .content .content_right_register { width: 60% }
.login .content .content_right_register .iniciar_sesion { width: 85% }

.footer .container-fluid { position: absolute; bottom: 0 }
.footer .container-fluid h3 { color: #fff; font-size: .8rem; text-align: center }

/* RESPONSIVE CELULARES */
@media screen and (max-width:768px) {
    .login .content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; height: 100vh }
    .login .content .content_left { display: none }
    .login .content .content_right { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #1a252f }
    .login .content .content_right .iniciar_sesion { background-color: #fff; border-radius: 12px; box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15); width: 90%; padding: 35px 20px 30px }
    .login .content .content_right .iniciar_sesion .image { display: block; height: 200px; text-align: center; margin-bottom: 20px }
    .login .content .content_right .iniciar_sesion .image img { height: 100% }
    .login .content .content_right .iniciar_sesion h3 { font-size: 1.2rem; font-family: font-bold; text-align: center; margin-bottom: 30px }
    .login .content .content_right .iniciar_sesion label { font-size: .9rem; font-family: font-medium }
    .login .content .content_right .iniciar_sesion input { font-size: .9rem; font-family: font-light; border-radius: 12px; border: 1px solid #ced4da !important }
    .login .content .content_right .iniciar_sesion input:hover, .login .content .content_right .iniciar_sesion input:focus { box-shadow: unset }
    .login .content .content_right .iniciar_sesion ::placeholder { font-size: .9rem; font-family: font-light }
    .login .content .content_right .iniciar_sesion .btn-login { background-color: #1f569e; border: 1px solid #1a252f !important; color: #fff; font-family: font-medium; font-size: 1rem; width: 100% }
}