
@media all and (max-width: 995px) {

    .header-login {
        height: 150px;
        background: url('../img/bg-login.jpg') no-repeat scroll center center #b9aeaa !important;
        background-size: cover !important;
    }
    .am-logo-login {
        left: 10px;
    position: absolute;
    top: 15px !important;
       
    }
    .am-logo-login img {
         width: 150px;
    }
    .lang-choice-login {
       position: absolute;
        right: 10px;
        top: 0px;
    }
    .am-login-form legend {
        display: none !important;
    }
    .am-login-form form {
        border: 0px;
        margin-top: 25px;
        box-shadow: 0 0px 0px #b0b0b0;
    }
    .am-login-form div.row {
        border-bottom: 0px solid #ededed;
    }

    .am-login-form div.element {
        text-align: center !important;
    }
    .credits {
        color: #111;
        font-size: 75%;
    }
    .textcopyright, .textcopyright a {
        color: #111;
    } 
    .am-credit-content {
        position: relative!important;

    }
    
.field{
  --fieldBorderColor: #ccc !important;
  --fieldBorderColorActive: #F67638;
  --fieldPlaceholderColor: #ccc !important;
    color: #ccc !important;
    }
    
    select, textarea, input[type=text], input[type=password] {
    padding: 0.4em 1em;
    border: 0px;
    color: #555555;
    }
    a.button-fb {
        margin-left: 0;
    }
    .am-login-form input[name=login],
.am-login-form input[name=amember_login],.am-login-form:focus, .am-sendpass-form input[name=login],
.am-sendpass-form input[name=amember_login] {
    color: #555555;
    }
    .am-signup-link {
        color: #111 !important;
    }
    .lost-pass {
        margin: 15px auto !important;
        display: table !important;
    }
}
    .field{
            /*Input styleing*/
  --uiFieldPaddingTop: var(--fieldPaddingTop, 0px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 0px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 0px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);

  --uiFieldBorderColor: var(--fieldBorderColor, transpatent);
  --uiFieldBorderTop: var(--fieldBorderTop, 0px);
  --uiFieldBorderRight: var(--fieldBorderRight, 0px);
  --uiFieldBorderBottom: var(--fieldBorderBottom, 0px);
  --uiFieldBorderLeft: var(--fieldBorderLeft, 0px);

  --uiFieldBgColor: var(--fieldBgColor, transpatent);
  --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
  --uiFieldAnimationDuration: var(--fieldAnimationDuration, .3s);
  --uiFieldFonstSize: var(--fieldFontSize, 16px);

  position: relative;  
  display: block;
}

    .field{
  --fieldBorderColor: #555555;
  --fieldBorderColorActive: #e00000;
  --fieldPlaceholderColor: #555555;
  color: #555555;
}
    
.field__input{
  width: 100%;
  box-sizing: border-box;
  background-color: var(--uiFieldBgColor);

  /* for iOS */
  appearance: none;
  border-radius: 0;

  border-style: solid;
  border-color: var(--uiFieldBorderColor);

  border-top-width: var(--uiFieldBorderTop);
  border-right-width: var(--uiFieldBorderRight);
  border-bottom-width: var(--uiFieldBorderBottom);
  border-left-width: var(--uiFieldBorderLeft);

  padding-top: var(--uiFieldPaddingTop);
  padding-right: var(--uiFieldPaddingRight);
  padding-bottom: var(--uiFieldPaddingBottom);
  padding-left: var(--uiFieldPaddingLeft);

  font-family: inherit;
  font-size: 100%;
  color: inherit;
}

.field__input::-webkit-input-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 100;
}

.field__input::-moz-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 100;
}

.field__input:focus{
  outline: none;  
}

.field__input:focus::-webkit-input-placeholder{ 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__input:focus::-moz-placeholder{ 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__label-wrap{
  height: 100%;
  display: block;
}

.field__label{
  position: absolute;
  top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
  left: calc(0px + var(--uiFieldPaddingLeft) + var(--uiFieldBorderLeft));

  pointer-events: none;
  font-size: .9em;

  transition: top var(--uiFieldAnimationDuration) cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity var(--uiFieldAnimationDuration) ease-out;
  will-change: top, opacity;
}

.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{
  opacity: 0;
  top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
}

.field__input:focus ~ .field__label-wrap .field__label{
  opacity: 1;
  top: calc(-1 * calc(var(--uiFieldPaddingTop) + var(--uiFieldBorderTop) + 15px));
}
    /* type 2 */

.field_type2{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);  
}

.field_type2 .field__label-wrap:after{
  content: "";
  width: 0;
  height: var(--uiFieldBorderBottom);
  background-color: var(--fieldBorderColorActive);

  position: absolute;
  bottom: 0;
  left: 0;

  will-change: width;
  transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type2 .field__input:focus ~ .field__label-wrap:after{
  width: 100%;
}
select, textarea, input[type=text], input[type=password] {
    padding: 0.4em 1em;
    border: 0px;
}
input[type=password]:focus, input[type=text]:focus  {
  background-color: #f7f7f7 !important;
  border-color: inherit;
}

.field-icon {
right: 0;
top: 25%;
position: absolute;
z-index: 2;
color: #4a4a4a
}
.am-errors { 
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

element.style {
}
input[type=password]:focus, input[type=text]:focus {
    background-color: #f7f7f7 !important;
    border-color: inherit;
}
@media (min-width: 500px)
.am-login-form input[name=login], .am-login-form input[name=amember_login], .am-sendpass-form input[name=login], .am-sendpass-form input[name=amember_login] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 10px;
    font-size: 22px;
    color: #555555;
    background-color: #f7f7f7 !important;
}
.am-login-form input[name=login], .am-login-form input[name=amember_login], .am-login-form:focus, .am-sendpass-form input[name=login], .am-sendpass-form input[name=amember_login] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 10px;
    width: 100%;
    background-color: #f7f7f7 !important;
}
select, textarea, input[type=text], input[type=password] {
    padding: 0.4em 1em 0.3em 1em;
    border: 0px;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f7f7f7 inset !important;
    -webkit-font-size: 20px !important;
}
    &:-webkit-autofill::first-line,
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
          font-size: 20px !important;
      }
input:autofill {
     font-size: 20px !important;
}
.am-signup-link {
    color: #fff;
}
.lost-pass {
    margin: 15px 0 0 15px;
}
