@import url('SukhumvitSet-Text/styles.css');
	@import url('SukhumvitSet-SemiBold/styles.css');
	@import url('SukhumvitSet-Bold/styles.css');

	* {outline: none;}
	a::focus,a::active {outline: none; }

	body {background: #fff; margin: 0; font-family: 'SukhumvitSet-Text'; text-align: center; padding-top: 120px; font-size: 18px; }
	input {font-family: 'SukhumvitSet-Text'; font-size: 18px; -webkit-appearance: none; }

	#logo {background: url(../img/logo.svg) no-repeat; background-size: 100%; position: absolute; height: 39px; width: 195px; top: 60px; overflow: hidden; margin: 0; z-index: 2; left: 50%; transform: translateX(-50%); }
	#logo a {display: block; width: 100%; height: 100%; cursor: default; text-indent: -9999px; }

	main {max-width: 375px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

	main h1 {font-family: 'SukhumvitSet-SemiBold'; font-weight: normal; font-size: 30px; line-height: 35px; margin-bottom: 40px; }
	main h1 small {color: #13CF36; font-size: 16px; }
	main p {color: #555; }

	fieldset {border: 0; margin-bottom: 30px; }
	.warning-msg {color: #f00; margin-bottom: 0; margin-top: 10px; font-size: 16px;display: none; }

	input[type="text"] {border: 1px solid #D0D0D0; border-radius: 5px; padding: 10px 0; width: 100%; text-align: center; box-sizing: border-box; }

	input.button-green {background: url(../img/icn/arrow-white.svg) 88% 50% #13CF36 no-repeat; border: 0; color: #fff; line-height: 60px; padding: 0 50px; border-radius: 5px; cursor: pointer; text-align: center; margin-top: 30px; text-indent: -15px; }

	@media (max-width: 360px) {
		main h1 {font-size: 28px; }
		main p {font-size: 16px; }
	}

	@media (max-width: 340px) {
        main h1 {font-size: 25px; }
    	.warning-msg {font-size: 14px; }
	}

	@media (max-height: 600px) {
		body {padding-top: 80px; }
		#logo {top: 40px; }
		main h1 {margin-bottom: 20px; }
		fieldset {margin-bottom: 0; }
		input.button-green {margin-top: 0; }
	}