.page-content-area {float:left; width:100%; min-height: 400px; margin-top: 30px;}
.lp-login-area, .lp-membership-area {opacity: 0; position: absolute; top:60px;}

.lp-login-area.active {left:0; transition:all 0.5s ease 0.2s; z-index: 2;}
.lp-login-area {left:-40px; transition: all 0.5s ease 0.2s; z-index: -1;}
.lp-membership-area.active {left:0; transition:all 0.5s ease 0.2s; z-index: 2;}
.lp-membership-area {left:40px; transition: all 0.5s ease 0.2s; z-index: -1;}

.lp-login-area.active, .lp-membership-area.active {opacity: 1;}
.lp-content-wrapper {float:left; width:420px; position:relative; left:50%; margin-left:-210px; height: 730px;}
.lp-login-area .title {float:left; width:100%; margin-bottom:45px;}
.lp-login-area .title a {cursor:pointer; float:left; margin:14px 0 0 40px; border-bottom:1px solid #000; font-size:14px; padding-bottom:2px;}
.lp-login-area .title a i {float:right; margin: -3px 0 0 8px; font-size: 18px;}
.lp-login-area h1 {float:left; font-size:32px; font-weight:500;}

.lp-membership-area .title {float:left; width:100%; margin-bottom:45px;}
.lp-membership-area .title a {cursor:pointer; float:left; margin:14px 0 0 40px; border-bottom:1px solid #000; font-size:14px; padding-bottom:2px;}
.lp-membership-area .title a i {float:right; margin: -3px 0 0 8px; font-size: 18px;}
.lp-membership-area h1 {float:left; font-size:32px; font-weight:500;}

.lp-login-area .content {float:left; width:100%;}

.form-group {position: relative; float:left; width:100%;}
.form-control {float: left; width: 100%; border-left: 0; border-right: 0; border-top: none; border-bottom: 1px solid #ddd; height: 30px; margin-top: 15px; font-size:16px; font-weight: 500; color: #000; z-index: 2; background: transparent; position: relative;}
select.form-control {border-radius: 0 !important; -webkit-appearance: none; background: url(../images/caret-down.png) top 14px right 5px no-repeat;}
textarea.form-control {height: auto;}
.form-control:focus, .form-control:active {outline:none;}
.form-control-placeholder {position: absolute; top: 10px; padding: 7px 0 0 0px; transition: all 200ms; color:#888; left: 0; font-size: 16px; z-index: 0;}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {font-size: 14px; transform: translate3d(0, -100%, 0); color:#888;}
.lp-content-wrapper .form-group {margin-bottom:40px;}
input[type="checkbox"], input[type="radio"]{position: absolute; right: 9000px; transition:ease all 200ms;}
/*Check box*/
input[type="checkbox"] + .label-text:before { transition: ease all .2s;
    content: ""; font-family: "Flaticon"; speak: none; font-style: normal; background-color: #fff; border: 1px solid #ddd;
    font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;
    width: 1em; display: inline-block; margin-right:8px; width: 18px; height: 18px; margin-bottom: -4px; text-align: center; color: #000;
}
input[type="checkbox"]:checked + .label-text:before{content: "\f124"; color: #000; border:1px solid #000; animation: effect 250ms ease-in; transition: ease all .2s; font-size: 9px; padding-top: 3px;}
input[type="checkbox"]:disabled + .label-text{color: #aaa; transition: ease all .2s; font-size: 9px; padding-top: 2px;}
input[type="checkbox"]:disabled + .label-text:before{content: "\f124"; color: #ccc; transition: ease all .2s; font-size: 9px; padding-top: 2px;}

.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-0 {margin-bottom: 0 !important;}
.forgot-pass-btn {float: right; color: #000; font-size: 14px; text-decoration: none; margin-top: 3px;}
.forgot-pass-btn i {float:left; font-size:20px; margin:-3px 5px 0 0;}
.form-submit-btn {background-color:#000; border:none; border-radius:30px; color:#fff; font-size:14px; padding:0px 26px; height:40px; line-height:1em; font-weight:600; letter-spacing:-0.03em; cursor:pointer;}
.form-submit-btn:hover {background-color:#93c4cd;}
.lp-membership-area .content {float: left; width: 100%;}
.agreement-popup {width:70%;}
.popup h4 {float: left; width: 100%; font-size: 20px; font-weight: 500; margin-bottom: 20px;}
.popup p {float:left; width:100%; font-size:16px; line-height:1.4em; color:#666; max-width: 1440px;}
.inline-link {color:#000; text-decoration: none; border-bottom:1px solid #000;}
.password-popup {width:480px;}
.forgot-password-form {float:left; width:100%; margin-top:30px;}
.forgot-password-form .form-group {margin-bottom:20px;}

.membership-action-button {float: left; width: 100%; height: 40px; border: none; background-color: #4cba8d; color: #fff; font-size: 14px; font-weight: 500; line-height: 1em; cursor: pointer; transition: ease all 300ms; height:44px;}
.membership-action-button:hover {background-color: #3aa378; transition: ease all 300ms;}
.login-error-msg {float:left; width:100%; margin-top:-30px; text-align:center; font-size:13px; color:#d83e49;}
.remember-pass-msg {float:left; width:100%; text-align:center; font-size:13px; color:red; margin-top:-10px;}
.facebook-login-button {float: left; width: 100%; margin-top:-30px;}
.facebook-login-button a {background-color:#4267b2; color:#fff; display:block; text-decoration:none; padding:12px 10px; font-size:13px; font-weight:400; display:flex; justify-content:center;}
.facebook-login-button a i {float:left; margin:0 4px 0 0;}
.facebook-login-button a i:before {font-size:12px;}
.register-form-error {float:left; width:100%; background:#ffd8d8; color:#b51010; padding:10px; font-size:12px; border:1px solid #b51010;}
/* **** TABLET YATAY ***** */
@media screen and (min-width : 992px) and (max-width : 1199px) {

}

/* **** TABLET DIK ***** */
@media screen and (min-width : 768px) and (max-width : 991px) {

}

/* **** TELEFON YATAY ***** */
@media screen and (min-width : 480px) and (max-width : 767px) {

}

/* **** TELEFON DIK ***** */
@media screen and (max-width : 479px) {
  .lp-content-wrapper {
      float: left;
      width: 100%;
      position: relative;
      left: 0;
      margin-left: 0;
      }
}