@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/montserrat/Montserrat-Light.ttf");
  /* IE9 Compat Modes */
}
@font-face {
  font-family: Montserrat-Regular;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat/Montserrat-Regular.ttf");
  /* IE9 Compat Modes */
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/montserrat/Montserrat-SemiBold.ttf");
  /* IE9 Compat Modes */
}
@font-face {
  font-family: Montserrat-Bold;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat/Montserrat-Bold.ttf");
  /* IE9 Compat Modes */
}

/*//////////////////////////////////////////////////////////////////
   [ RESTYLE TAG ]*/

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

body,
html {
  height: 100%;
  font-family: Montserrat-Bold, sans-serif;
}

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

.content {
  width: 100%;
  max-width: 690px;
 /*  height: 565px; */
}

.content_divImg {
  width: 100%; 
  height: 130px;
  max-height: 200px; 
}

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

.typing{
   margin-bottom: 2em;
  }

.typing_txt{
 text-align: center;
 color: rgb(129, 127, 127);
 text-transform: uppercase;
} 

.formulario {
  padding: 0 1.3em;
}

.validate-input {
  position: relative;
}

.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);
}
/*---------------------------------------------*/
.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;
}

.letraRed {
  font-family: Montserrat, "Verdana", sans-serif, Helvatica, "Times New Roman";
  content: "\f12a";
  font-size: 16px;
  color: tomato;
  display: block;
}

.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: 30px;
}

.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;
}

.formulario_btn.inactive,
.formulario_btn.inactive:hover,
.formulario_btn.inactive:active {
  background-color: #73a3d6;
  cursor: not-allowed
}

.formulario_btn-sso{
  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%;
  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-sso{
  display: inline-block;
  text-align: center;
  padding: 12px 0;
}
.btn-darkBlue{     
  background-color: #31415b;  
  text-decoration: none;
}


.btn-darkBlue.inactive,
.btn-darkBlue.inactive:hover {
  background-color: #73a3d6;
  cursor: not-allowed
}

.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%;
}

.paddingRed{
  padding:5px 20px;
}

.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;
 /*  border:1px solid red; */
}

.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) {

  .container{      
    background-image: url('../../imagenes/login/background.jpg');
    background-repeat: no-repeat;
    background-size: cover; 
    background-position:center;
  } 

  .main{
     width: 100%;
     display: flex;
     align-items: center;
     height: 100vh;
  }

  .content{
     width: 428px;
     background-color: #ffffff;
     margin-left: 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;   
} 

}