.btn-dark {

  color: #282828;

  background-color: #ffd221 !important;

  border-color: #ffd221 !important;

}

.btn-dark:hover{

  background-color: #292220 !important;

  border-color: #292220 !important;

  color: #fff;

}

.m-login.m-login--1 .m-login__content .m-login__welcome{

  color: #282828 !important

}

.m-login.m-login--1 .m-login__content .m-login__msg{

  color: #282828;

  font-size: 14px;

  font-weight: 500;

}

.m-login__logo{

  width: 160px;

  margin-bottom: 70px !important;

}

.m-login__logo a{

  display: inline-block;

}

.m-login__logo img{

  width: 100%

}

.form-group .form-control{

  background-color: #f2f2f2;

  padding: 11px 15px !important;

  border-radius: 5px !important;

  color: #282828;

}



.form-group .form-control::placeholder {

  color: #282828 !important;

}



.f-password{

  margin-top: 10px;

  color: #282828;

  font-size: 13px;

  font-weight: 500;

}



.m-btn--custom {

  padding: 11px 30px !important;

  box-shadow: 0px 7px 9px -6px rgb(70 70 70 / 75%) !important;

  -webkit-box-shadow: 0px 7px 9px -6px rgb(70 70 70 / 75%) !important;

  -moz-box-shadow: 0px 7px 9px -6px rgb(70 70 70 / 75%) !important;

  font-weight: 500 !important;

}



.body-bg{

  position: relative;

  overflow: hidden;

}

.body-bg::before{

  content: '';

  background: url(../img/l-bg.png);

  position: absolute;

  top: 0;

  width: 55%;

  height: 100vh;

  background-repeat: no-repeat;

  background-position: right;

  right: 0;

  z-index: 9;

  background-size: cover;

}

.recketLogo{

  width: 260px;

  margin-top: 80px;

  margin-bottom: 60px;



}

.man-img{

  width: 220px;

  margin:40px 0;

}

.right-div{

  position: relative;

  z-index: 99

}


/*Slider css*/
.auto-slider{
    position: relative;
    box-sizing: content-box;
    display: inline-block;
    padding: 10px 10px 20px;
    background: #fff;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);

}


@keyframes sliding{
            0%{left: 0%; }
            20%{left: -100%;}
            40%{left: -200%;}
            60%{left: -300%;}
            80%{left: -400%;}
            100%{left: 0%;}
        }        
        
@keyframes indicating{
            from{
                left: -100%;
            }
            to{
                left: 0;
            }
}  
        
        
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 25s sliding ease infinite; 
}

/* Slider indicator */
.indicator{
    width: 100%;
    max-width: 720px;
    height: 6px;
    background: #e41b17;
    position: absolute;
    bottom: 0;
    
    animation: indicating 5s ease infinite; 
    
}








@media (min-width: 1460px){

  .body-bg::before{

    width:54%;

  }

}

@media (min-width: 993px) and (max-width: 1200px){

  .m-login.m-login--1 .m-login__aside {

    width: 455px;

    margin: 0 auto;

    padding: 3rem 3rem;

  }

  .body-bg::before{

    width: 59%;

    

  }

  .right-div .m-grid__item.m-grid__item--middle{

    margin-left: 100px;

  }



}







@media only screen  and (max-width : 1024px) {

  .right-div .m-grid__item.m-grid__item--middle{

    margin-left: 0px;

  }

}



@media only screen  and (max-width : 992px) {

  .body-bg{

    overflow: scroll;

  }

  .body-bg::before{

    background-color: #f3f3f3;

    height: 58vh;

    width: 100%

  }

}



@media only screen  and (max-width : 767px) {

  .body-bg{

    overflow: scroll;

  }

  .body-bg::before{

    display: none;

  }

  .right-div{

    background-color: #f3f3f3;

  }

  .m-login.m-login--1 .m-login__content .m-login__msg br{

    display: none;

  }

}



.m-login.m-login--1 .m-login__content {

    padding: 5rem 7rem 10rem 7rem;

  }