body {
	background: #f5f5f5;
	color: #222;
}

.feed-container,
.header-container,
.footer-container {
	max-width: 950px;
}

/* =========================================================
   HEADER / LOGO
   ========================================================= */

.site-header {
	position: relative;
	z-index: 10;
	background: #fff;
	border-bottom: 1px solid #ddd;
}

.header-content {
	height: 125px;
}

.site-brand {
	position: relative;
	width: 440px;
	height: 100%;
}

.site-brand img {
	position: absolute;
	left: 0;
	bottom: -25px;
	width: 440px;
	max-width: none;
	height: auto;
	z-index: 20;
}


/* =========================================================
   FOOTER / REAR VIEW
   ========================================================= */

.site-footer {
	position: relative;
	z-index: 10;
	background: #fff;
	border-top: 1px solid #ddd;
}

.footer-content {
	height: 65px;
}

.footer-brand {
	position: relative;
	width: 300px;
	height: 100%;
}

.footer-brand img {
	position: absolute;
	right: 0;
	top: -35px;
	width: 300px;
	max-width: none;
	height: auto;
	z-index: 20;
}


/* =========================================================
   POSTS
   ========================================================= */

.post-feed {
	column-count: 2;
	column-gap: 1.5rem;
}

.post-feed-item {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
	.post-feed {
		column-count: 1;
	}
}

.post-medium {
	overflow: hidden;
	border-radius: 8px;
}

.post-medium img,
.post-medium video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.post-medium img {
	cursor: pointer;
}


.post-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.post-text.is-collapsible {
	cursor: pointer;
}

.post-text.expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

/* MASONRY  ================================================= */
@media (min-width: 768px) {

	.masonry-feed {
		position: relative;
		display: block;
	}

	.masonry-feed > .col-md-6 {
		position: absolute;
		width: 50%;
	}
}

/* =========================================================
   REACTION-ICONS
   ========================================================= */

.reaction-option {
	cursor: pointer;
}

.reaction-option img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	opacity: .55;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: opacity .15s, border-color .15s, transform .15s;
}

.reaction-option:hover img {
	opacity: 1;
}

.reaction-option input:checked + img {
	opacity: 1;
	border-color: #212529;
	transform: scale(1.08);
}


/* =========================================================
   PHOTO-CAROUSEL
   ========================================================= */
.post-media-carousel {
	overflow: hidden;
	border-radius: 0.375rem;
}

.post-media-carousel .carousel-item img,
.post-media-carousel .carousel-item video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* Carousel arrows */
.post-media-carousel .carousel-control-prev,
.post-media-carousel .carousel-control-next {
	width: 12%;
}


/* Thumbnails */
.post-media-thumbnails {
	overflow-x: auto;
}

.post-media-thumbnails button {
	flex: 1 1 0;
	min-width: 0;
	border: 2px solid transparent !important;
	border-radius: 0.375rem;
	overflow: hidden;
}

.post-media-thumbnails img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.post-media-thumbnails button.active {
	border-color: #0d6efd !important;
}

/* =========================================================
   PRIVACY NOTICE
   ========================================================= */

.privacy-notice {
	overflow: hidden;
	transition: max-height .3s ease, opacity .3s ease;
	max-height: 50px;
	opacity: 1;
}

.privacy-notice.is-closing {
	max-height: 0;
	opacity: 0;
}

.privacy-notice-bar {
	padding: 5px;
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
	font-size: .75rem;
	color: #777;
}

.privacy-notice-close {
	position: absolute;
	right: 5px;
	border: 0;
	background: transparent;
	color: #999;
}

.privacy-text {
	white-space: pre-line;
}


/* =========================================================
   ADMIN
   ========================================================= */
.admin-nav .nav-link {
	color: #444 !important;
	border-radius: .4rem;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link:focus {
	color: #111 !important;
	background-color: #f1f1f1;
}

.admin-nav .nav-link.active {
	color: #111 !important;
	background-color: #e5e5e5 !important;
	font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.header-content {
		height: 80px;
	}

	.site-brand {
		width: 240px;
	}

	.site-brand img {
		bottom: -12px;
		width: 240px;
	}
	.footer-content {
		height: 65px;
		align-items: flex-start !important;
		padding-top: 8px;
	}
	
	.footer-content > div:first-child {
		max-width: calc(100% - 150px);
	}
	
	.footer-brand {
		width: 140px;
	}
	
	.footer-brand img {
		top: -20px;
		width: 140px;
	}}