$(document).ready(() => {
	/*------- button with class register -------*/
	let reg_btn:string = $('.container .register')

	/*------- button with class sign in --------*/
	let sig_btn:string = $('.container .signin')

	/*------- back button ----------------------*/
	let back_btn:string = $('.container .back')

	reg_btn.click(function(e){
		e.preventDefault()
		$(this).siblings('.reg').css({
		'transform':'translateY(40%) scale(5)',
		'border-radius':'0',
		'width':'100%',
		'height':'100%'
		}).end();
		reg_btn.siblings('.container h3:nth-of-type(1)').css({
			'top':'40%',
			'z-index':'8',
		}).end().end();
	});

	sig_btn.on('click',function(e){
		e.preventDefault();
		$(this).siblings('.sig').css({
			'transform':'translateY(40%) scale(5)',
			'border-radius':'0',
			'width':'100%',
			'height':'100%'
		}).end();


		sig_btn.siblings('.container h3:nth-of-type(2)').css({
			'top':'40%',
			'z-index':'8',
		}).end().end();

	});
});


*{
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body{
	font-family: 'Open Sans', sans-serif;
	background:#e2e2e2;
}

svg{
	position:fixed;
	top:0px;
	left:180px;
}

.container{
	position:relative;
	top:200px;
	left:35%;
	display:block;
	margin-bottom:80px;
	width:500px;
	height:460px;
	background:#fff;
	border-radius:5px;
	overflow:hidden;
	z-index:1;
}

h2{
	padding:40px;
	font-weight:lighter;
	text-align: center;
	color:#414141;
}

input{
	display:block;
	height:50px;
	width:90%;
	margin:0 auto;
	border:none;
	&::placeholder{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
		-webkit-transition:.5s;
		transition:.5s;
	}
	&:hover,
	&:focus,
	&:active:focus{
		color:#ff5722;
		outline:none;
		border-bottom:1px solid #ff5722;
		&::placeholder{
			color:#ff5722;
			position:relative;
			-webkit-transform:translateY(-20px);
			transform:translateY(-20px);
		}
	}
}

.email,
.pwd{
	position:relative;
	z-index:1;
	border-bottom:1px solid rgba(0,0,0,.1);
	padding-left:20px;
	font-family: 'Open Sans', sans-serif;
	color:#858585;
	font-weight:lighter;
	-webkit-transition:.5s;
	transition:.5s;
}

.link{
	text-decoration:none;
	display:inline-block;
	margin:27px 28%;
	color:#858585;
	font-weight:lighter;
	-webkit-transition:.5s;
	transition:.5s;
}

button{
	cursor:pointer;
	display:inline-block;
	float:left;
	width:250px;
	height:60px;
	margin-top:-10px;
	border:none;
	font-family: 'Open Sans', sans-serif;
	color:#fff;
	-webkit-transition:.5s;
	transition:.5s;
	&:nth-of-type(1){
		background:#005883;
	}
	&:nth-of-type(2){
		background:#F47920;
	}
	span{
		position:absolute;
		display:block;
		margin:-10px 20%;
		-webkit-transform:translateX(0);
		transform:translateX(0);
		-webkit-transition:.5s;
		transition:.5s;
	}
	&:hover{
		span{
			-webkit-transform:translateX(30px);
			transform:translateX(30px);
		}
	}
}

.reg{
	position:absolute;
	top:0;
	left:0;
	-webkit-transform:translateY(-100%) scale(1);
	transform:translateY(-100%) scale(1);
	display:block;
	width:20px;
	height:20px;
	border-radius:50px;
	background:#A54686;
	z-index:5;
	-webkit-transition:.8s ease-in-out;
	transition:.8s ease-in-out;
}

.sig{
	position:absolute;
	top:0;
	right:0;
	-webkit-transform:translateY(-100%) scale(1);
	transform:translateY(-100%) scale(1);
	display:block;
	width:20px;
	height:20px;
	display:block;
	background:#ff5722;
	z-index:5;
	-webkit-transition:.8s ease-in-out;
	transition:.8s ease-in-out;
}

h3{
	position:absolute;
	top:-100%;
	left:20%;
	font-weight:bolder;
	color:rgba(255,255,255,.3);
	-webkit-transition:.3s ease-in-out 1.2s;
	transition:.3s ease-in-out 1.2s;
}