.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/sueteres-azul.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: #8a9fb5;
 z-index: -1;
 opacity: 0.3;
}

.header-index {
  width: 50%;
  height: 100px;
  margin: 2em auto 1em;
  text-align: center;
  color: #17365d;
  font-weight: 800;
}

.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: #a6e8e8; */
}

.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: auto; */
  font-size: 1.2em;
}

label {
  margin: 25px auto 0;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  color: #17365d;
  background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.7) 25%, 
        rgba(255,255,255,0.9) 50%, 
        rgba(255,255,255,0.7) 75%, 
        rgba(255,255,255,0) 100%);
  border-radius: 60px;

}

input::placeholder{
  color: rgb(191, 191, 191);
  color: #bfbfbf;
  padding: 1em;
}

input:focus::placeholder{
  color: rgb(112, 112, 112);
  color: #707070;
}

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

.user:hover,
.user:focus,
.password:hover,
.password:focus {
  box-shadow: #8a9fb5;
  border: 2px solid #8a9fb5;
  outline: none;
  background: #eff2f5;
}

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

.index-span {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: .8em;
  color: rgb(200, 200, 200);
}

.index-span a {
  color: #6babb2;
}

/* RWD */
@media screen and (max-width: 800px) {
  .header-index {
    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;
  }
}