/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}

@font-face {
  font-family: Montserrat-Bold;
  src: url('../../fonts/montserrat/Montserrat-Bold.ttf');
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url('../../fonts/montserrat/Montserrat-SemiBold.ttf');
}

@font-face {
  font-family: Montserrat-Regular;
  src: url('../../fonts/montserrat/Montserrat-Regular.ttf');
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: Poppins-Regular;
}

.contenedor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.video {
  display: none;
  /*video*/
}

.content {
  width: 100%;
  max-width: 690px;
  padding: 0 1.3em;
}

.content_divImg {
  width: 100%;
  height: 130px;
  max-height: 200px;
  /*--*/
  text-align: center;
  margin: 1em auto 20px auto;
  padding: 10px 0px;
}

.content_img {
  width: 70%;
  object-fit: contain;
  height: 100%;
  max-width: 250px;
}

.formulario {
  padding: 10px 0;
}

.validate-input {
  position: relative;
  margin: 0px 0 35px 0;
}

.input100 {
  font-size: 18px;
  color: rgb(129, 127, 127);
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 52px;
  background: transparent;
  padding: 0 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.formulario_input {
  border: none;
  outline: none;
  background-color: rgb(237, 237, 237);
}

.login_btn_warning{
  margin-right: 20px;
  color: #ffc107;
  text-decoration: none !important;
  display: inline-block;
  font-size: 20px;
}

/*---------------------------------------------*/

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  background: #336699;
}

.focus-input100::after {
  font-family: Montserrat-Bold;
  font-size: 15px;
  color: #999999;
  line-height: 1.2;
  content: attr(data-placeholder);
  display: inline-block;
  text-transform: uppercase;
  width: 100%;
  position: relative;
  top: 15px;
  left: 0px;
  padding-left: 5px;
  color: rgb(129, 127, 127);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus+.focus-input100::after {
  top: -20px;
  font-size: 15px;
}

.input100:focus+.focus-input100::before {
  width: 100%;
}

.has-val.input100+.focus-input100::after {
  top: -20px;
  font-size: 15px;
}

.has-val.input100+.focus-input100::before {
  width: 100%;
}

.container-login100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-login100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logoisis {
  text-align: center;
  margin: 1.4em 0;
}

.logoisis img {
  height: 40px;
}

.formulario_btn {
  font-family: Montserrat-Bold;
  font-size: 14px;
  color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border: none;
  outline: none;
  text-transform: uppercase;
  display: block;
  line-height: 1.2;
  padding: 0 20px;
  width: 100%;
  height: 42px;
  font-weight: bold;
  transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -ms-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
}

.btn-lightBlue {
  background-color: #336699;
}

.footer {
  background: #333333;
  padding: 1.3em;
  display: grid;
  grid-template-areas: 'logo logo logo logo logo logo' 'txt2 txt2 txt2 txt2 txt2 txt2' 'txt3 txt3 txt3 txt3 txt3 txt3' 'txt4 txt4 txt4 txt4 txt4 txt4' 'txt5 txt5 txt5 txt5 txt5 txt5' 'txt6 txt6 txt6 txt6 txt6 txt6' 'txt7 txt7 txt7 txt7 txt7 txt7';
  grid-gap: 10px;
  align-items: center;
  width: 100%;
}

.footer_txt {
  font-family: Montserrat-Regular;
  color: #fff;
  font-size: 12px;
}

.fSize-14 {
  font-size: 14px;
}

.footer_logo {
  width: 180px;
}

.footer_info {
  text-align: center;
}

.logo {
  grid-area: logo;
}

.txt_2 {
  grid-area: txt2;
}

.txt_3 {
  grid-area: txt3;
}

.txt_4 {
  grid-area: txt4;
}

.txt_5 {
  grid-area: txt5;
}

.txt_6 {
  grid-area: txt6;
}

.txt_7 {
  grid-area: txt7;
}

/*------------------------------------------------------------------
  [ Responsive ]*/

@media only screen and (min-width: 600px) {
  .footer {
    grid-template-areas: 'logo logo logo logo logo logo' 'txt2 txt2 txt2 txt2 txt2 txt2' 'txt3 txt3 txt3 txt3 txt3 txt3' 'txt4 txt4 txt4 txt5 txt5 txt5' 'txt6 txt6 txt6 txt7 txt7 txt7';
    grid-gap: 20px;
  }
}

@media only screen and (min-width: 680px) {
  .video {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /*video*/
    /* el video va para el portal clinetes y la imagen va para el asistencial */
    height: 100vh;
  }
  .content {
    width: 428px;
    background-color: #ffffff;
    margin-right: 5em;
    max-width: 546px;
    box-shadow: 2px 2px 5px rgb(150, 148, 148);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border: 1px solid lightslategray;
  }
  .btn-darkBlue, .formulario_btn {
    cursor: pointer;
  }
  .btn-darkBlue:hover {
    background-color: #333333;
  }
  .btn-lightBlue:hover {
    background-color: #31415b;
  }
  .footer {
    grid-template-areas: 'logo logo logo logo logo logo logo logo' 'txt2 txt2 txt2 txt2 txt3 txt3 txt3 txt3' 'txt4 txt4 txt5 txt5 txt6 txt6 txt7 txt7';
  }
}

@media only screen and (min-width: 870px) {
  .footer {
    grid-template-areas: 'logo logo logo txt2 txt2 txt3 txt3 txt3' 'txt4 txt4 txt5 txt5 txt6 txt6 txt7 txt7';
  }
}

@media only screen and (min-width: 1080px) {
  .footer {
    grid-template-areas: 'logo txt2 txt3 txt4 txt5 txt6 txt7';
    padding: 0.5em;
  }
}