.buttonl {
 padding: 0;
 }

.buttonl li {
 display: inline;
 }
 
 .buttonl li a {
 font-family: Arial;
 font-size: 11px;
 text-decoration: none;
 float: left;
 padding: 10px;
 background-color: #2175bc;
 color: #fff;
 }
 
 .buttonl li a:hover {
 background-color: #2586d7;
 margin-top: -2;
 padding-bottom: 12px;
 }
 
 .body-hero{
   position: absolute;
  max-height: 100vh;
  min-width: 100vw;
  font-family: sans-serif;
  font-size: 14px;
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
  background-image: url(../img/fondo_interlab1.jpg);
  
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
 }

.body-hero:after{
  content:"";
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255,255,255, .50);
  z-index: -1;
  opacity: .8;
}

 
.header-index {
  width: 50%;
  height: 100px;
  margin: 2em auto 1em;
  text-align: center;
}

.header-index img {
  height: 100%;
  width: auto;
}

.header-index .img-kg {
  width: 150px;
  height: 150px;
}

.header-index .img-bi {
  width: 300px;
  height: 150px;
}

.header-index h1 {
  font-size: 1.5em;
  color: #363636;
}

.main-container {
  width: 50%;
  height: 300px;
  margin: 8em auto 0;
  text-align: center;
}

.index-container {
  width: 50%;
  height: auto;
  margin: 5em auto 0;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

form {
  margin: 0 auto;
  display: block;
}

label, input {
  display: block;
  width: 100%;
  margin: 5px auto;
  font-size: 1.2em;
}

label {
  text-align: center;
  font-weight: bold;
  color: hsl(0, 0%, 25%);
}

.user, .password {
  width: 90%;
  border-radius: 5px;
  border: 2px solid #F0F0F0;
  text-align: center;
  font-size: 1em;
  line-height: 1em;
  padding: 5px;
}

.user:hover,
.user:focus, .password:hover,
.password:focus {
  box-shadow: #de2f28;
  border: 2px solid #de2f28;
}

.g-recaptcha{
  margin-top: 2.5em;
}

/* RWD */
@media screen and (max-width: 800px) {
  .header-index {
    width: 50%;
  }

  .header-index img {
    height: 4em;
  }

  .index-container{
    width: 90%;
  }

  .user, .password, .g-recaptcha {    
    width: 90%;
    max-width: 90%;
  }

  .img-kg {
    width: 20px;
    height: 20px;
  }
  .img-bi {
    width: 20px;
    height: 20px;
  }
  .main-container {
    margin-top: 12em;
  }
  .main-container_bi {
    margin-top: 15em;
  }
}

@media screen and (orientation: landscape) and (max-width: 800px) {
  .main-container_bi {
    margin-top: 4em;
  }
  .main-container {
    margin-top: 12em;
  }
}