.cont .tip {
   font-size: 20px;
   margin: 40px auto 50px;
   text-align: center;
}
 .cont {
   overflow: hidden;
   position: relative;
   width: 900px;
   margin: 0 auto 100px;
   background: #fff;
}
.cont .form {
   position: relative;
   width: 640px;
   height: 100%;
   transition: transform 1.2s ease-in-out;
   padding: 30px 30px 0;
}
.cont .form.sign-in{
  padding: 15px 30px 0;
}
.cont .sub-cont {
   overflow: hidden;
   position: absolute;
   left: 640px;
   top: 0;
   width: 900px;
   height: 100%;
   padding-left: 260px;
   background: #fff;
   transition: transform 1.2s ease-in-out;
}
 .cont.s--signup .sub-cont {
   transform: translate3d(-640px, 0, 0);
}
.cont button {
   display: block;
   margin: 0 auto;
   width: 260px;
   height: 36px;
   border: 1px solid #254e58;
   border-radius: 2px;
   color: #fff;
   font-size: 15px;
   cursor: pointer;
}
.cont .img {
   overflow: hidden;
   z-index: 2;
   position: absolute;
   left: 0;
   top: 0;
   width: 260px;
   height: 100%;
   padding-top: 230px;
   /*padding-top: 360px;*/
}
.cont .img:before {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   width: 900px;
   height: 100%;
   background-image: url('http://learningspro.com/login-bg.png');
   background-size: cover;
   transition: transform 1.2s ease-in-out;
}
.cont .img:after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgb(37 78 88 / 62%);
}
 .cont.s--signup .img:before {
   transform: translate3d(640px, 0, 0);
}
.cont .img__text {
   z-index: 2;
   position: absolute;
   left: 0;
   top: 50px;
   width: 100%;
   padding: 0 20px;
   text-align: center;
   color: #fff;
   transition: transform 1.2s ease-in-out;
}
.cont .img__text h2 {
   margin-bottom: 10px;
   font-weight: normal;
}
.cont .img__text p {
   font-size: 14px;
   line-height: 1.5;
}
 .cont.s--signup .img__text.m--up {
   transform: translateX(520px);
}
.cont .img__text.m--in {
   transform: translateX(-520px);
}
 .cont.s--signup .img__text.m--in {
   transform: translateX(0);
}
.cont .img__btn {
   overflow: hidden;
   z-index: 2;
   position: relative;
   width: 100px;
   height: 36px;
   margin: 0 auto;
   background: transparent;
   color: #fff;
   text-transform: uppercase;
   font-size: 15px;
   cursor: pointer;
}
.cont .img__btn:after {
   content: '';
   z-index: 2;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border: 2px solid #fff;
   border-radius: 4px;
}
.cont .img__btn span {
   position: absolute;
   left: 0;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   transition: transform 1.2s;
}
.cont .img__btn span.m--in {
   transform: translateY(-72px);
}
 .cont.s--signup .img__btn span.m--in {
   transform: translateY(0);
}
 .cont.s--signup .img__btn span.m--up {
   transform: translateY(72px);
}
.cont h2 {
   width: 100%;
   font-size: 26px;
}
.cont label {
   display: block;
   margin: 25px auto 0;
}
.cont .col-md-6 label,.cont .col-md-12 label {
   display: block;
   margin: 8px auto 0;
}
.cont label span {
    font-size: 12px;
    color: #254e58;
    text-transform: uppercase;
    font-weight: 700;
}
.cont label span i{
    color: red;
}
.cont input {
    display: block;
    width: 95%;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 15px;
    border: 2px solid #254e584d;
    border-radius: 4px;
}
.cont .form.sign-in input{
  width: 100%;
}
.cont .forgot-pass {
   margin-top: 20px;
   font-size: 12px;
   color: #254e58;
}
.cont .submit {
   margin-top: 20px;
   margin-bottom: 20px;
   background: #254e58;
   text-transform: uppercase;
}
.cont .fb-btn {
   border: 2px solid #d3dae9;
   color: #8fa1c7;
}
.cont .fb-btn span {
   font-weight: bold;
   color: #455a81;
}
.cont .sign-in {
   transition-timing-function: ease-out;
}
 .cont.s--signup .sign-in {
   transition-timing-function: ease-in-out;
   transition-duration: 1.2s;
   transform: translate3d(640px, 0, 0);
}
.cont .sign-up {
   transform: translate3d(-900px, 0, 0);
}
 .cont.s--signup .sign-up {
   transform: translate3d(0, 0, 0);
}
.cont .icon-link {
   position: absolute;
   left: 5px;
   bottom: 5px;
   width: 32px;
}
.cont .icon-link img {
   width: 100%;
   vertical-align: top;
}
.cont .icon-link--twitter {
   left: auto;
   right: 5px;
}