.footer {
	display: flex;
	margin: 40px 0;
	@media screen and (max-width: 600px) {
		margin: 10px 0;
	}

	div {
		flex-basis: auto;
	}

	.logo {
		flex-basis: content;
		align-self: flex-end;
		margin: 0 20px;
		img {
			max-height: 72px;
			@media screen and (max-width: 600px) {
				max-width: 72px;
			}
		}
	}

	.footertext {
		@media screen and (min-width: 800px) {
			margin-left: 80px;
			flex: 3;
		}
		@media screen and (max-width: 800px) {
			font-size: 0.8em;

			div > div {
				display: none;
			}

			div > div:nth-child(3) {
				display: block;
				text-align: center;
			}
		}
	}

	.social {
		@media screen and (min-width: 800px) {
			margin-right: 40px;
		}
		align-items: flex-end;

		.fab {
			font-size: 3em;
			margin: 0 10px;
			@media screen and (max-width: 600px) {
				margin: 0 5px;
				font-size: 2em;
			}
		}
	}
}

.bottom {
	background-color: @primary-color;
	padding: 20px 20px 0;

	.bottom-content {
		color: white;

		@media screen and (min-width: 1200px) {
			.gil-flex-container();
		}

		.modtitle {
			color: @secondary-color;
			text-transform: uppercase;
			.gil-width-1-10();
			@media screen and (max-width: 1199px) {
				margin-bottom: 40px;
			}
		}

		.newsflash {
			.gil-flex-container();
			width: 90%;

			.newsitem {
				border-left: solid 2px silver;
				padding: 0 0 20px 10px;
				margin-bottom: 50px;
				min-width: 250px;
				width: ~"calc(33% - 10px)";

				dd {
					margin-inline-start: 0;
					color: @secondary-color;
				}

				h5 {
					margin-top: 0;
					font-weight: normal;
					font-size: 1.3em;
				}
			}

			&.leden {
				margin-bottom: 20px;

				.newsitem {
					min-width: 200px;
					width: ~"calc(24% - 10px)";
					margin: 0;

					dd {
						display: none;
					}

					h5 {
						margin: 0 20px;
						font-weight: normal;
						font-size: 1em;
					}
				}
			}

			&:not(.leden) {
				.newsitem {
					@media screen and (max-width: 600px) {
						display: none;

						&:nth-child(1),
						&:nth-child(2) {
							display: block;
						}
					}
				}
			}
		}

		.mod-list {
			.gil-flex-container();
			width: 87%;
			margin-top: 0;
			padding-inline-start: 0;

			li {
				border-left: solid 2px silver;
				padding: 0 0 20px 10px;
				margin-bottom: 50px;
				min-width: 200px;
				width: ~"calc(19% - 10px)";
				list-style-type: none;
				@media screen and (min-width: 600px) {
					text-align: center;
				}

				@media screen and (max-width: 800px) {
					margin-bottom: 15px;
					padding-bottom: 0;
				}

				&.active {
					display: none;
				}

				div {
					text-align: left;
					@media screen and (min-width: 800px) {
						margin-top: 20px;
					}
					margin-right: 10px;
				}

				& > a img {
					@media screen and (max-width: 800px) {
						display: none;
					}
				}
			}
		}
	}
}
