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

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

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

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

	#list {
		flex-flow: column nowrap;
	}

	#list > aside {
		width: 100%;
	}

	#list > aside > details {
		width: calc(100% - 7px);
	}

	#list > aside > details > .content > .calendar > .top {
		padding: 10px 0 20px 0;
	}

	#list > aside > details > .content > .calendar > .top > div {
		width: 100%;
	}

	#list > aside > details {
		margin-bottom: 20px;
	}

	#list > aside > details[open] {
		margin-bottom: 50px;
	}

	#list > .content {
		margin-left: 0;
		width: 100%;
	}

	#list > .content > .search,
	#list > .content > .posts {
		padding: 0;
	}

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

	#share > .post {
		font-size: 100%;
		line-height: var(--lineheight);
	}

	#share > .post > p:first-child {
		padding-top: 0;
	}

	#share > .info {
		font-size: 90%;
	}

}





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

	#list > .content > .posts > .post > .bottom {
		align-items: flex-start;
		flex-flow: column nowrap;
	}

	#list > .content > .posts > .post > .bottom > .manage > ul {
		margin-left: -5px;
	}

}





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

	#list > .content > .posts > .post > .bottom > .info {
		align-items: flex-start;
		flex-flow: column nowrap;
	}

	#list > .content > .posts > .post > .bottom > .info > div {
		margin-left: 0 !important;
	}

	#list > .content > .posts > .post > .bottom > .manage {
		margin-top: 5px;
	}

}





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

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

	#list > aside > details > .content > .calendar > .top {
		flex-flow: column nowrap;
	}

	#list > aside > details > .content > .calendar > .top > .left {
		order: 1;
	}

	#list > aside > details > .content > .calendar > .top > .middle {
		margin-top: 10px;
		order: 3;
	}

	#list > aside > details > .content > .calendar > .top > .right {
		order: 2;
	}

}