@media only screen and (max-width: 640px) {

	main {
		padding: 20px 20px 0 20px;
	}
	section.login {
		padding-top: 60px;
	}
	section.login.small #logo {
		width: 180px;
		margin-bottom: 50px;
	}
	section.small #logo,
	section header #logo {
		width: 120px;
	}
	section header {
		margin-bottom: 30px;
	}
	section header a {
		font-size: 16px;
	}
	section > div {
		flex-direction: column;
	}
	section > div > div:first-child,
	section > div > div:last-child {
		width: 100%;
		margin-right: 0;
	}
	section > div > div > div {
		margin-bottom: 30px;
	}
	section > div > div > div h3.header {
		padding: 0;
		padding-bottom: 10px;
	}
	section > div > div > div h3.header > span {
		display: none;
	}
	section > div > div > div h3.header > span:first-child {
		width: 100%;
		display: block;
	}
	section > div > div > div h3.header > span:first-child span {
		width: 100%;
		text-align: center;
	}
	section > div > div > div h3.header > span:first-child span:after {
		content: 's';
	}
	section > div > div > div ul li a.link {
		width: 100%;
		height: auto;
		padding: 20px 20px;
		flex-direction: column;
	}
	section > div > div > div ul li a.link span {
		margin-bottom: 10px;
	}
	section > div > div > div ul li a.link span:last-child {
		margin-bottom: 0;
	}
	section > div > div > div ul li a.link:after,
	section > div > div > div ul li a.link span span:first-child:after {
		display: none;
	}
	section > div > div > div ul li a.link span span {
		width: 100%;
		float: left;
	}

}