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

	p {
		text-align: left;
	}

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

	#website > header {
		margin-bottom: 0;
	}

	#website > header > a:hover {
		background-size: 100%;
	}

	#website > nav {
		border-top: 0;
		border-bottom: 1px solid var(--line);
		margin-top: 10px;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}

	#website > nav > ul {
		display: block;
	}

	#website > nav > ul > li > a {
		display: flex;
	}



	.checkbox > .desc {
		width: calc(100% - 30px);
	}



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



	#person > div:not(.info) > .item > .value {
		overflow-x: scroll;
		padding: 5px 0;
		width: 100%;
		white-space: nowrap;
	}

	#person > div:not(.info) > .item > .value > div {
		flex-flow: row nowrap;
	}

	#person > .info > .name {
		margin-bottom: 0;
	}

	#person > .info > .item {
		flex-flow: column nowrap;
		padding: 10px 0;
	}

	#person > .info > .item > .label {
		font-weight: 700;
	}

	#person > .info > .item > .value {
		padding: 5px 0;
		width: 100%;
	}

	#person > .info > .info > .item,
	#person > div:not(.info) > .item {
		flex-flow: column wrap;
		padding: 10px 0;
	}

	#person > .info > .info > .item > .label,
	#person > .info > .info > .item > .value,
	#person > div:not(.info) > .item > .label {
		width: calc(100% - 10px);
	}

	#person > .info > .info > .item > .label,
	#person > div:not(.info) > .item > .label {
		font-weight: 700;
	}

	#person > .links > form {
		display: flex;
		flex-flow: column nowrap;
	}

	#person > .links > form > select,
	#person > .links > form > input {
		width: calc(100% - 18px) !important;
	}

	#person > .links > form > select {
		margin-bottom: 10px;
	}

	#person > .admin {
		background-color: var(--highlight);
		border-top: 0;
		padding: 20px;
	}



	#person-image > .info > .item,
	#person-image > .info > details > .content > .item {
		display: block;
	}

	#person-image > .info > .item:not(:first-child),
	#person-image > .info > details > .content > .item:not(:first-child) {
		margin-top: 20px;
	}

	#person-image > .info > .item > .label,
	#person-image > .info > details > .content > .item > .label {
		font-weight: 700;
	}

	#person-image > .info > .item > .line,
	#person-image > .info > details > .content > .item > .line {
		display: none;
	}



	#person-wiki > .content > .image {
		padding: 10px;
	}



	#search > form > .side-by-side {
		flex-flow: column nowrap;
	}

	#search > form > .item,
	#search > form > .side-by-side > .item {
		width: calc(100% - (10px * 2));
	}

	#search > form > .item > .field > [name="field-name"],
	#search > form > .side-by-side > .item > .field > [name="field-birth-date"],
	#search > form > .side-by-side > .item > .field > [name="field-birth-place"],
	#search > form > .side-by-side > .item > .field > [name="field-death-date"],
	#search > form > .side-by-side > .item > .field > [name="field-death-place"],
	#search > form > .item > .field > [name="list-gender"] {
		width: 100%;
	}

	#search > form > .side-by-side > .item:not(.birth-date) {
		margin-left: 0 !important;
	}

	#search > form > .side-by-side,
	#search > form > .item.gender {
		margin-top: 30px;
	}

	#search > form > .side-by-side > .item.birth-place,
	#search > form > .side-by-side > .item.death-place {
		margin-top: 10px;
	}



	#gallery > .images {
		justify-content: space-around;
	}



	#family > .parents {
		align-items: center;
		display: flex;
		flex-flow: column nowrap;
	}

	#family > .parents > .no-parent,
	#family > .parents > a {
		width: calc(100% - 20px);
	}

	#family > .parents > .father:hover {
		background-color: var(--bg_male);
	}

	#family > .parents > .mother:hover {
		background-color: var(--bg_female);
	}

	#family > .children > .head {
		display: none;
	}

	#family > .children > div {
		align-items: flex-start;
	}

	#family > .children > div > .left {
		flex-flow: column nowrap;
		margin-top: 5px;
		margin-right: 10px;
		width: 25px;
	}

	#family > .children > div > .left > .count {
		order: 2;
		text-align: center;
	}

	#family > .children > div > .left > .count > .empty {
		display: none;
	}

	#family > .children > div > .left > .gender {
		order: 1;
	}

	#family > .children > div > .right {
		align-items: flex-start;
		display: flex;
		flex-flow: column nowrap;
	}

	#family > .children > div > .right > .name {
		margin-bottom: 1px;
		width: 100%;
	}

	#family > .children > div > .right > .date {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		font-size: 90%;
		line-height: 150%;
		margin-right: 0 !important;
		width: 100%;
	}

	#family > .children > div > .right > .date > .text {
		display: inline-block;
		margin-right: 8px;
	}

	#family > .children > .child {
		padding: 10px;
	}

	#family > .children > div > div {
		padding: 0;
	}

	#family > .gallery > .children {
		justify-content: space-evenly;
	}



	#admin-overview > details:not(.settings):not(.guests):not(.historical-events) > .content,
	#admin-overview > details.historical-events > .content > .list,
	#admin-overview > details.guests > .content > .list,
	#admin-guests > .list {
		overflow-y: scroll;
		white-space: nowrap;
		width: calc(100% - 20px);
	}

	#admin-overview > .guests > .content > .create {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 20px;
	}



	#account-settings > h1 {
		margin-bottom: 20px;
	}

	#account-settings > form > h2 {
		margin-top: 50px;
	}

	#account-settings > form > .side-by-side > .item {
		width: 100%;
	}

	#account-settings > form > .side-by-side > .item.email,
	#account-settings > form > .side-by-side > .item.language {
		margin-right: 0;
		margin-bottom: 20px;
		width: 100%;
	}

	#account-settings > form > .checkboxes {
		padding: 10px 0 20px 0;
	}

	#account-settings > form > .button {
		margin-top: 0;
	}



	#add-source > form > .side-by-side {
		flex-flow: column nowrap;
	}

	#add-source > form > .side-by-side > .item.url {
		margin-top: 10px;
	}

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

	#add-source > form > .side-by-side > .item.id {
		margin-right: 0;
	}

	#add-source > form > .side-by-side > .item.id > .field > [name="field-id"],
	#add-source > form > .side-by-side > .item.url > .field > [name="field-url"] {
		width: calc(100% - (8px * 2) - (1px * 2));
	}

	    
    #media > form > .item > .field > textarea[name="field-people"] {
	    height: 60vw;
    }

}