body.active{
	background: #d70404;
}
.containerlog{
	position: relative;
	width: 857px;
	height: 500px;
	margin:20px;
	

}
.bluebg{
	position: absolute;
	top:40px;
	width: 100%;
	height: 420px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 5px 45px rgba(0, 0, 0, 0.15);

}
.bluebg .box{
	position: relative;
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: 1s;
}
.bluebg .box h2{
	margin:20px;
	padding: 10px 20px;
	color: #fff;
	font-size: 1.5em;
	font-weight: 500;

}
.bluebg .box button{
	margin:10px;
	padding: 10px 20px;
	color: #000;
	background: #fff;
	font-weight: 500;
	border:none;
	cursor: pointer;
}
.bluebg .box button:hover{;
	background: #e2d8d8;
}
.formBox {
    position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #fff;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 45px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: 1s;
}
 .active{
	left: 50%;
	transition: .5s;
}
.formBox .form{
	position: absolute;
	width: 100%;
	left: 0;
	padding: 23px;
	transition: .5s;
	height: 100%;
}
.formBox .formsignUp{
	left: 100%;

}

.formBox .formsignUp p{
    text-align: left;
    padding: 7px 15px 0 0;
    margin: 11px 14px 0 0;
    font-size: 15px;
    color: #9b8b8b;

}
.active .formsignIn{
	left: -100%;
	transition: 0s;

}
.active .formsignUp{
	left: 0%;

}

.logodiv {
	position: absolute;
	top: -127px;
	right: 0px;
}
.logoImg{
	width: 100%;
}
.formBox .formsignIn{
	transition-delay: .25s;
}

.signindiv {
    position: absolute;
    right: 18px;
    top: -2px;
    font-size: 53px;
    cursor: pointer;
}
.formBox h2{
	margin:7px 11px;
}
.formBox h2 {
    margin: 9px 7px;
    padding: 1px 0px;
    text-align: center;
    font-size: 31px;
}
button.signupbtn {
    padding: 11px 17px;
    background: #660000;
    color: #fff;
    border: none;
    box-shadow: 5px 7px 10px #6e2e2e;
    cursor: pointer;
    margin: 29px 47px 7px 3px;
    font-size: 23px;
}
button.signupbtn:hover {
    background: #bd0e0e;
   
}
.formBox .form form{
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-top: 57px;
	margin: 79px 0 31px 0;
}
.formBox .form form a {
    text-decoration: none;
    margin: 5px;
    text-align: left;
    cursor: pointer;
}

.formBox .form form input {
    outline: none;
}
.formBox .form form input[type="submit"] {
    
    background: #046434;
    cursor: pointer;
    color: #fff;
}

.formBox .form form input[type="submit"]:hover {
    background: #02974c;
}
.formBox .formsignUp form input[type="submit"] {
    background: #046434;
}
.formBox .formsignUp form input[type="submit"]:hover {
    background: #02974c;
}




/* Form */


.form-step {
    display: none;
    transform-origin: top;
    animation: animate 0.5s;
}
.address_l {
    text-align: left;
    position: relative;
    font-size: 17px;
}
input.p_sp {
    position: absolute;
    top: 18px;
}
.form-step-active {
  display: block;
}
.birth_se_div{
	text-align: left;
}
.birth_se {
    width: 32.41%;
    padding: 7px;
    display: inline;
}
.btn_sub{
	width: 50%;
}
span.g_sp {
    padding: 7px;
     color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.g_sp label{
   width: 24.3%;
}
.g_div {
    margin: 9px 0 5px 0;
}

.address_l input[type="checkbox"] {
    width: 19px;
    height: 19px;
}
span.p_sp {
    position: absolute;
    top: 27px;
    left: 27px;
    font-size: 13px;
}
.bt_pre a, .bt_nxt a {
    padding: 5px 48px;
    background: #10d1bf;
    color: #fff;
    font-size: 15px;
}
.pre_div {
    margin: 13px 0 0 0;
}
.Che_ref_id {
    font-size: 15px;
    position: absolute;
    top: 7px;
    left: 5px;
}

.active_refe_id{
	display: none;
}
.refe_check {
    text-align: right;
}
.checkbox_1 {
    position: relative;
}
.checkbox_1 input[type="checkbox"] {
    position: relative;
    width: 63px;
    height: 26px;
    -webkit-appearance: none;
    background: #c6c6c6;
    outline: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 20px;
    transition: .5s;
    cursor: pointer;
}
.checkbox_1 input:checked[type="checkbox"] {
    background: #03973e;
    color: #03973e;
}
.checkbox_1 input[type="checkbox"]:before {
    content: 'No';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 20px;
    background: #ddd;
    left: 1px;
    top: 1px;
    transition: 1s;
    line-height: 21px;
    padding: 3px;
    font-size: 11px;
}
.checkbox_1 input:checked[type="checkbox"]:before {
    content: 'Yes';
    left: 38px;
    background: #fff;
}
.pass_eye_rel{
    position: relative;
}
#eye {
    position: absolute;
    top: 9px;
    right: 15px;
    z-index: 11;
    font-size: 19px;
}
input#password {
    margin: 0px 0 13px 0;
}
@keyframes animate {
  from {
    transform: scale(1, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}

/* Form */

@media(max-width: 991px){
	
.containerlog{
	width: 400px;
	display:flex;
	align-items: center;
	justify-content: center;
	height: 501px;
}
.bluebg{
	top:0px;
}
.formBox {
    width: 100%;
    top: 0;
    box-shadow: none;

}

.bluebg .box{
	position: absolute;
	width: 100%;
	height: 150px;
	bottom: 0;
}
 .active{
	left: 0;
}

.box.signup {
    bottom: -120px;
}
.formBox.active {
    top: 150px;
}
.box.signin {
    top: 0px;
}
.bluebg .box h2 {
    margin: 11px;
    font-size: 1.25em;
}
.bluebg .box button {
    margin: 0px;
}
button.signupbtn {
    margin: 1px 47px 7px 3px;
    font-size: 19px;
}
.birth_se {
    width: 30%;
}
.g_sp label {
    width: 21%;
}

.bluebg {
    height: 557px;
}
    
}

@media(max-width: 676px){
    .logodiv {
	top: -81px;
}
   .formBox .form form input[type="submit"] {
    width: 100%;
} 
  button.signupbtn {
    margin: 1px 47px 7px 3px;
    font-size: 17px;
    width: 100%;
}  
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 9px;
    padding-left: 9px;
}
   .bt_pre a, .bt_nxt a {
    padding: 8px 13px;
    font-size: 15px;
} 
}