@charset 'utf-8';

@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

body    {	background: #f4f4f4;	}
	body:before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	.outer {
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform : translate(-50%,-50%);
		transform : translate(-50%,-50%);
	}
	.container {
		margin: 0 auto;
		width: 100%;
		z-index: 1;
	}
		.container:before, .container:after {
			content: '';
			display: block;
			clear: both;
		}
	.form {
		width: 650px;
		position: relative;
		background: #fff;
		max-width: 320px;
		margin: 0 auto 35px;
		padding: 30px;
		border-top-left-radius: 50px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 50px;
		text-align: center;
		box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}
	.form .thumbnail {
		background: #00a0dd;
		width: 150px;
		height: 150px;
		margin: 0 auto 10px;
		padding: 30px 30px;
		border-top-left-radius: 100%;
		border-top-right-radius: 100%;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
		box-sizing: border-box;
	}
	.form .thumbnail img {
		display: block;
	}
	.form input {
		outline: 0;
		background: #f7f7f7;
		width: 100%;
		border: 0;
		margin: 0 0 15px;
		padding: 15px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		box-sizing: border-box;
		font-size: 14px;
		font-family: 'M PLUS 1p', sans-serif;
		padding-left: 40px;
	}
		.form input:hover {
			color: #FF8383;
			background: #FEEBDA;
		}
		.form input:active {
			color: #FF8383;
			background: #fddec1;
		}
	.form button {
		outline: 0;
		background: #00a0dd;
		width: 100%;
		border: 0;
		padding: 10px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		color: #FFFFFF;
		font-size: 20px;
		font-family: 'Oxygen';
		transition: all 0.3 ease;
		cursor: pointer;
	}
		.form button:hover {
			color: #FFF;
			background: #4EC8FA;
		}
		.form button:active {
			background: #1cb9f9;
		}
	.form .message {
		margin: 25px 0 0;
		color: #b3b3b3;
		font-size: 12px;
		font-family: 'M PLUS 1p', sans-serif;
	}
		.form .message a {
			color: #B20000;
			text-decoration: none;
		}
	.form .register-form {
		display: none;
	}
	.logo img {
		width: 250px;
	}
	.inputrow1 label {
		position: absolute;
		top: 270px;
		left: 44px;
	}
	.inputrow1 label:before {
		color: #B20000;
		opacity: 0.6;
		-webkit-transition: opacity 300ms 0 ease;
		-moz-transition: opacity 300ms 0 ease;
		transition: opacity 300ms 0 ease;
	}
	.inputrow2 label {
		position: absolute;
		top: 333px;
		left: 44px;
	}
	.inputrow2 label:before {
		color: #B20000;
		opacity: 0.6;
		-webkit-transition: opacity 300ms 0 ease;
		-moz-transition: opacity 300ms 0 ease;
		transition: opacity 300ms 0 ease;
	}
	.inputrow3 label {
		position: absolute;
		top: 400px;
		left: 44px;
	}
	.inputrow3 label:before {
		color: #B20000;
		opacity: 0.6;
		-webkit-transition: opacity 300ms 0 ease;
		-moz-transition: opacity 300ms 0 ease;
		transition: opacity 300ms 0 ease;
	}
		input {
			background-color: #f2f2f2;
			-webkit-transition: .3s ease;
			transition: .3s ease;
		}
			input:focus {
			border-color: #f2f2f2;
			background-color: #f2f2f2;
		}
			input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
			-webkit-transition: background-color 9999s;
			transition: background-color 9999s;
		}
	.copyright {
		font-family: 'Josefin Sans', sans-serif;
		color: #666;
		line-height: 10px;
		text-align: center;
	}
	a[href^="tel:"] { cursor: text; }
	img {
		max-width: 100%;
	}
	img[src$=".svg"] {
		height: auto;
	}