/*http://codepen.io/Anna_Batura/details/QEAqyE/,A PEN BY @@BrawadaCom, http://codepen.io/Anna_Batura*/

#login-popup-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);  
  overflow: hidden;
  -webkit-filter: none !important;
  filter: none !important;
  position:fixed;
  z-index:99999999999;
}
/*
#login-popup-container *
{
  -webkit-filter: none !important;
  filter: none !important;
}
    */
.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#login-popup {
  position: relative;
  width: 807px;
  margin: 30px auto 0;
  height: 320px;
  top: 50%;
  margin-top: -160px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.log-in .table-cell,
.recover-password .table-cell
{
    padding-right:20px;
    padding-left:20px;
}

#login-popup .sub-title
{
    color:#3eaad6;
    font-size:x-large;
    margin-bottom:25px;
}

#login-popup .box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*
#login-popup .box:before, #login-popup .box:after {
  content: " ";
  position: absolute;
  left: 152px;
  top: 50px;
  background-color: #9297e0;
  transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg);
  width: 300px;
  height: 285px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .box:after {
  top: -10px;
  left: 80px;
  width: 320px;
  height: 180px;
}*/
#login-popup .container-forms {
  position: relative;
    background-color:#efedee;
}
#login-popup .btn {
  cursor: pointer;
  text-align: center;
  margin: 0 auto;
  display:inline-block;
  color: #fff;
  background-color: #3eaad6;
  border-radius:20px;
  padding:5px 50px;
  opacity: 1;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .btn:hover {
  opacity: 0.7;
}
#login-popup input {
  padding: 10px 15px;
}
#login-popup input {
    background-color:#fff;
    border-top:0;
    border-right:0;
    border-left:0;
    padding-right:0;
    margin-bottom:20px;
    padding-left:0;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#login-popup .container-forms .container-info {
  text-align: left;
  font-size: 0;
}
#login-popup .container-forms .container-info .info-item {
  text-align: center;
  font-size: 16px;
  width: 403px;
  height: 300px;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  opacity: 1;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#login-popup .container-forms .container-info .info-item p {
  font-size: 20px;
  margin: 20px;
}
#login-popup .container-forms .container-info .info-item .btn {
  background-color: transparent;
  border: 1px solid #fff;
}
#login-popup .container-form {
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: -27px;
  width: 402px;
  height: 360px;
  background-color: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .container-form:before {
  content: "✔";
  position: absolute;
  left: 160px;
  top: -50px;
  color: #5356ad;
  font-size: 130px;
  opacity: 0;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .container-form .btn {
  position: relative;
}
#login-popup .form-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .form-item.sign-up {
  position: absolute;
  left: -100%;
  opacity: 0;
}
#login-popup.log-in .box:before {
  position: absolute;
  left: 180px;
  top: 62px;
  height: 265px;
}
#login-popup.log-in .box:after {
  top: 22px;
  left: 192px;
  width: 324px;
  height: 220px;
}
#login-popup.log-in .container-form {
  left: 406px;
}
#login-popup.log-in .container-form .form-item.sign-up {
  left: 0;
  opacity: 1;
}
#login-popup.log-in .container-form .form-item.log-in {
  left: -100%;
  opacity: 0;
}
#login-popup.log-in .container-form .form-item.recover-password {
  opacity: 0;
}
#login-popup.active {
  width: 260px;
  height: 140px;
  margin-top: -70px;
}
#login-popup.active .container-form {
  left: 30px;
  width: 200px;
  height: 200px;
}
#login-popup.active .container-form:before {
  content: "✔";
  position: absolute;
  left: 51px;
  top: 5px;
  color: #5356ad;
  font-size: 130px;
  opacity: 1;
}
#login-popup.active input, #login-popup.active .btn, #login-popup.active .info-item {
  display: none;
  opacity: 0;
  padding: 0px;
  margin: 0 auto;
  height: 0;
}
#login-popup.active .form-item {
  height: 100%;
}
#login-popup.active .container-forms .container-info .info-item {
  height: 0%;
  opacity: 0;
}


.dont-have-account,.have-account
{
}

.dont-have-account .table-cell,.have-account .table-cell
{
    color:#000;
}

#login-popup .info-item * {
    color:#6e5da8; 
}

#login-popup .current-state{
    color:#3eaad6;
    font-weight:bold;
}

#login-popup .move-state
{
    color:#6e5da8; 
    cursor:pointer
}
/*#login-popup .register-state:after
{
    content:"|";
    margin-right:5px;
    color: #e8e8e8;
}*/

#login-popup .recover-password-button, .return-to-login-button
{
    color:#f2834e;
    float:left;
    line-height:40px;
}

#login-popup .btn-containter
{
    display:block;
    width:80%;
    margin:auto;
    margin-top:20px;
}

#login-popup .btn-containter > *
{
    vertical-align:middle;
}

.register-button
{
    margin-top:15px !important;
}

#login-popup .is-confirm
{
    margin-bottom:5px;
}

#login-popup .white-logo {
    position:relative;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup.log-in .white-logo {
    position:relative;
    top:-26px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#login-popup .close-logo
{
    cursor:pointer;
    float:left;
    position:relative;
    top:-10px;
}

#login-popup .form-item.recover-password {
  position: absolute;
  left: 0;
    opacity:0;
    z-index:-1;
}


#login-popup.recover-password .container-form .form-item.recover-password {
    opacity:1;
    z-index:99;
}

#login-popup.recover-password .container-form .form-item.log-in {
    opacity:0;
}