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

	#website {
		width: calc(100% - (10px * 2));
	}

	#website {
		margin: 0;
		padding: 10px;
	}

	#website > main {
		margin: 20px 0 0 0;
		padding: 0;
	}

	#website > nav {
		margin-bottom: 5px;
	}

	#start > .overview > .bottom {
		flex-flow: row wrap;
		justify-content: space-around;
		width: 100%;
	}

	#manage {
		margin: 0;
		width: 100%;
	}

}



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

	.side-by-side {
		flex-flow: column nowrap;
	}

	#manage > form > .side-by-side > .item {
		width: 100% !important;
	}

	#manage > form > .side-by-side > .item.sum,
	#manage > form > .side-by-side > .item.sum.goal,
	#manage > form > .side-by-side > .item.date.from,
	#manage > form > .side-by-side > .item.date.to,
	#manage > form > .side-by-side > .item.category {
		margin-top: 10px;
		margin-left: 0;
	}

}



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

	#start > .overview > .top {
		flex-flow: column nowrap;
		justify-content: center;
		width: 100%;
	}

	#start > .overview > .top > .item {
		max-width: 100%;
		padding: 20px 0;
		width: 100%;
	}

	#start > .overview > .top > .item:not(:first-child) {
		border-left: 0;
	}

}