@media screen and (min-width: 600px) {
	#login-main h1{
		width: 35vw;
		font-size: 4.5vw;
		font-weight: normal;
		line-height: 5vw;
	}

	#login-main{
		width: 95vw;
		padding-top: 5vw;
		display: flex;
		margin: 0 2.5vw;
	}
	#login-out{
		display: flex;
		flex-direction: column;
	}
	#login-1{
		background-color: #E7ECF2;
		width: 35vw;
		padding: 6vw;
		min-height: calc(100vh - 38.5vw);
		margin: 0 .5vw .5vw 0;
		border-radius: 2vw 0 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		animation: up 1s backwards;
		animation-delay: 0;
	}
	#login-2{
		background-color: #F2E7E9;
		width: 35vw;
		padding: 0 6vw;
		height: 18vw;
		margin: .5vw .5vw 0 0;
		border-radius: 0 0 0 2vw;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		animation: up 1s backwards;
		animation-delay: .1s;
	}

	#login-2 > div{
		width: 35vw;
		display: flex;
		margin: 2vw 0 0 0;
	}
	#create-account{
		background-color: #F2EEE7;
		width: 35vw;
		padding: 6vw;
		min-height: calc(100vh - 19.5vw);
		margin: 0 0 0 .5vw;
		border-radius: 0 2vw 2vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		animation: up 1s backwards;
		animation-delay: .2s;
	}



	.input, .input2, .input3{
		display: flex;
		margin: 1.5vw 0;
	}
	.input > label, .input2 > label{
		font-size: 1vw;
		font-weight: bold;
		text-align: center;
		background-color: #666;
		border-radius: 1.25vw 0 0 1.25vw;
		color: #fff;
		margin-right: .3vw;
	}
	.label-1{
		width: 9vw;
		height: 2.5vw;	
		line-height: 2.5vw;	
	}
	.label-2{
		width: 6vw;
		height: 2.5vw;	
		line-height: 2.5vw;	
	}
	.input > input, .input2 > input{
		width: 23.3vw;
		height: 2vw;
		line-height: 2vw;
		font-size: 1vw;
		padding: .25vw .5vw;
		border: none;
		background-color: #fafafa;
		border-radius: 0 2.5vw 2.5vw 0;
	}
	.input-1{
		width: 11vw!important;
		border-radius: 0!important;
		margin-right: .3vw;
	}
	.input-2{
		width: 11vw!important;
	}
	.input-3{
		width: 9.8vw!important;
		margin-right: .4vw;
	}



	.submit{
		height: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		position: relative;
	}
	.submit:hover::before{
		transform: translate(.31vw, 0);
	}
	.submit:hover > img{
		transform: translate(.31vw, 0);
	}
	.submit:active::before{
		transform: translate(0, 0);
	}
	.submit:active > img{
		transform: translate(0, 0);
	}
	.submit > img{
		width: 1.8vw;
		height: 1.8vw;
		z-index: 1;
		display: block;
		margin: .5vw .4vw .5vw .9vw;
		transition: all .2s;
	}
	.submit > input{
		height: 3vw;
		font-size: 1.2vw;
		color: #fff;
		border-radius: 0 2.5vw 2.5vw 0;
		text-align: center;
		line-height: 3.1vw;
		padding-right: .5vw;
		position: relative;
		background: #999;
		margin-left: .2vw;
		border: none;
		cursor: pointer;
	}
	.submit::before{
		content: "";
		width: 3vw;
		height: 3vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 2.5vw 0 0 2.5vw;
		position: absolute;
		left: 0vw;
		top: 0;
		transition: all .2s;
	}

	#submit-login{
		width: 6.5vw;
	}
	#submit-create{
		width: 13.5vw;
	}
	.error-message{
		width: 18vw;
		font-size: 1vw;
		margin-left: 1vw;
		color: #e83719;
	}
	#set-password{
		font-size: 1vw;
		margin-left: 1vw;
		color: #E69D13;
		text-decoration: underline;
	}
	.input3 > input{
		width: 16.3vw;
		height: 2vw;
		line-height: 2vw;
		font-size: 1vw;
		padding: .25vw 1vw;
		border: none;
		background-color: #fafafa;
		border-radius: 2.5vw 0 0 2.5vw;
	}
	.input3 > div{
		font-size: 1vw;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 0 1.25vw 1.25vw 0;
		color: #fff;
		margin-left: .3vw;
		width: 15vw;
		height: 2.5vw;	
		line-height: 2.5vw;	
		cursor: pointer;
		user-select: none;
		position: relative;
	}
	@keyframes rotate {
		0%{transform: rotate(0);}
		100%{transform: rotate(360deg);}
	}
	.input3 > div > div{
		position: absolute;
		width: 1.25vw;
		height: 1vw;
		top: .625vw;
		left: 6.75vw;
		border-radius: 1.5vw;
		border-top: solid .25vw #fff;
		animation: rotate 1s infinite linear;
		transition: all .2s;
		opacity: 0;
		pointer-events: none;
	}

}



@media screen and (max-width: 600px) {
	#login-main h1{
		width: 80vw;
		font-size: 12vw;
		font-weight: normal;
		line-height: 15vw;
	}

	#login-main{
		width: 95vw;
		padding-top: 15vw;
		margin: 0 2.5vw;
	}
	#login-1{
		background-color: #E7ECF2;
		width: 80vw;
		padding: 10.5vw 7.5vw;
		margin: 0;
		border-radius: 6vw 6vw 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		animation: up 1s backwards;
		animation-delay: 0;
	}
	#login-2{
		background-color: #F2E7E9;
		width: 80vw;
		padding: 10.5vw 7.5vw;
		margin: 1.5vw 0;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		animation: up 1s backwards;
		animation-delay: .1s;
	}

	#login-2 > div{
		width: 80vw;
		display: flex;
		margin: 3vw 0 0 0;
	}
	#create-account{
		background-color: #F2EEE7;
		width: 80vw;
		padding: 10.5vw 7.5vw;
		margin: 0;
		border-radius: 0 0 6vw 6vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		animation: up 1s backwards;
		animation-delay: .2s;
	}



	.input, .input2, .input3{
		display: flex;
		margin: 4vw 0;
	}
	.input > label, .input2 > label{
		font-size: 3.5vw;
		font-weight: bold;
		text-align: center;
		background-color: #666;
		border-radius: 5vw 0 0 5vw;
		color: #fff;
		margin-right: 1vw;
	}
	.label-1{
		width: 27vw;
		height: 10vw;	
		line-height: 10vw;	
	}
	.label-2{
		width: 18vw;
		height: 10vw;	
		line-height: 10vw;	
	}
	.input > input, .input2 > input{
		width: 48vw;
		height: 8vw;
		line-height: 8vw;
		font-size: 3.5vw;
		padding: 1vw 2vw;
		border: none;
		background-color: #fafafa;
		border-radius: 0 10vw 10vw 0;
	}
	.input-1{
		width: 21.5vw!important;
		border-radius: 0!important;
		margin-right: 1vw;
	}
	.input-2{
		width: 21.5vw!important;
	}
	.input-3{
		width: 9.8vw!important;
		margin-right: .4vw;
	}



	.submit{
		width: 80vw;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		cursor: pointer;
		user-select: none;
		position: relative;
	}
	.submit:hover::before{
		transform: translate(1.24vw, 0);
	}
	.submit:hover > img{
		transform: translate(1.24vw, 0);
	}
	.submit:active::before{
		transform: translate(0, 0);
	}
	.submit:active > img{
		transform: translate(0, 0);
	}
	.submit > img{
		width: 7.2vw;
		height: 7.2vw;
		z-index: 1;
		display: block;
		margin: 2vw 1.6vw 2vw 3.6vw;
		transition: all .2s;
	}
	.submit > input{
		height: 12vw;
		font-size: 4.8vw;
		color: #fff;
		border-radius: 0 10vw 10vw 0;
		text-align: center;
		line-height: 12.4vw;
		padding-right: 2vw;
		position: relative;
		background: #999;
		margin-left: .8vw;
		border: none;
		cursor: pointer;
	}
	.submit::before{
		content: "";
		width: 12vw;
		height: 12vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 10vw 0 0 10vw;
		position: absolute;
		left: 0vw;
		top: 0;
		transition: all .2s;
	}

	#submit-login{
		width: 26vw;
	}
	#submit-create{
		width: 54vw;
	}
	.error-message{
		width: 80vw;
		font-size: 4vw;
		line-height: 6vw;
		margin-top: 4vw;
		margin-left: 1vw;
		color: #e83719;
	}
	#set-password{
		width: 35vw;
		font-size: 4vw;
		margin-left: 4vw;
		color: #E69D13;
		text-decoration: underline;
	}
	.input3 > input{
		width: 28vw;
		height: 8vw;
		line-height: 8vw;
		font-size: 3.5vw;
		padding: 1vw 3vw;
		border: none;
		background-color: #fafafa;
		border-radius: 10vw 0 0 10vw;
	}
	.input3 > div{
		font-size: 3.5vw;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 0 5vw 5vw 0;
		color: #fff;
		margin-left: 1vw;
		width: 45vw;
		height: 10vw;	
		line-height: 10vw;	
		cursor: pointer;
		user-select: none;
		position: relative;
	}
	@keyframes rotate {
		0%{transform: rotate(0);}
		100%{transform: rotate(360deg);}
	}
	.input3 > div > div{
		position: absolute;
		width: 5vw;
		height: 4vw;
		top: 2.5vw;
		left: 20vw;
		border-radius: 6vw;
		border-top: solid 1vw #fff;
		animation: rotate 1s infinite linear;
		transition: all .2s;
		opacity: 0;
		pointer-events: none;
	}
}