@font-face {
  font-family: 'fontello';
  src: url('./fonts/fontello.eot?49511271');
  src: url('./fonts/fontello.eot?49511271#iefix') format('embedded-opentype'),
       url('./fonts/fontello.woff2?49511271') format('woff2'),
       url('./fonts/fontello.woff?49511271') format('woff'),
       url('./fonts/fontello.ttf?49511271') format('truetype'),
       url('./fonts/fontello.svg?49511271#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-instagram:before { content: '\e800'; } /* '' */
.icon-whatsapp:before { content: '\e802'; } /* '' */
.icon-twitter-alt-circle:before { content: '\e803'; } /* '' */
.icon-facebook:before { content: '\e805'; } /* '' */

@font-face {
  font-family: 'MazzardH';
  src:  url('fonts/MazzardH-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; 
} 
*,
h1, h2, h3, h4, a, 
.media-heading {
  font-family: "MazzardH";
  font-weight: normal;
  color:#2d2e2e;
  font-size: 16px;
}
.login{
  display: flex;
  height: 100vh;
}
.login > div{
  width: 50%;
} 
.login__imagen{
  background: #009863 url('/img/Elitefilekeeper_login.webp') top left;
  background-size: cover;
}
.login__form{
  display: flex;
  justify-content: center;
  padding-top: 3%;
  background: #f6f9fa;
}
.login__form .box{
  min-width: 400px;
}
.login__form form{
  max-width: 450px;
}
.login_logo{
  text-align: center;
  margin-bottom: 35px;
}
.login__texto{
  position: relative;
  line-height: 21px;
  margin-bottom: 25px;
  padding-left: 20px;
}
.login__texto span{ 
  color: #00456f;
}
.login__texto::before{
  content: ' ';
  width: 4px;
  height: 47px;
  display: flex;
  background: #009863;
  position: absolute;
  left: 0;
  top: -3px;
  border-radius: 2px; 
}
.login__texto.azul::before{
  background: #00456f;
  height: 27px;
}
.login .alert{
  font-size: 14px;
  padding: 8px 15px;
  margin-bottom: 9px;
  border-radius: 10px;
}
.login label{
  font-weight: 600;
  margin-bottom: 2px;
  color: #2d2e2e;
}
.login input{
  border-radius: 10px;
  height: 40px;
}
.login .btn{
  background: #009863;
  color: #fff;
  width: 100%;
  border-radius: 10px;
  height: 40px;
  padding: 0;
}
.login .btn:hover{
  background: #00456f;
}
.login .olvidaste{
  margin-top: 15px;
  display: block;
}
.login__redes{
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  margin: 20px 0;
  padding: 25px 0;
  text-align: center;
  color: #009863;
}
.login__redes-iconos i{
  font-size: 18px;
}
.login__redes-iconos i:hover{
  color: #009863;
}

.login__enlaces{
  display: flex;
  justify-content: space-between;
}
.login__enlaces a{
  font-size: 12px;
}
.login .form-group {
  margin-bottom: 10px;
}

.modal-header {
  background: #009863;
}
 
.modal-header h4{
  color: white;
}


@media (max-width: 800px) {
  .login__imagen{
    display: none;
  }
  .login > div {
    width: 100%; 
  }
}
@media (max-width: 500px) {
  .login__form form {
    max-width: 100%;
    padding: 0 20px;
  }
}