﻿section.Main {
    overflow-y: visible;
}

/* Blog Content */

#blog:after {
    content: '';
    display: block;
    clear: both;
}

.BlogHeader {
	margin-bottom: 1rem;
}

.BlogHeader h1 {
	font-size: 2.6rem;
	text-align: center;
	border-bottom: 1px solid #ededed;
	padding-bottom: 1rem;
}

.BlogNav {
	background-color: #ededed;
	padding: 10px 15px 0 15px;
}

.BlogNavTitle {
	margin: 1rem 0;
	text-align: left;
}

	.BlogNavTitle a {
		color: #000000;
	}

	.BlogNavTitle > a {
		display: block;
		position: relative;
	}

		.BlogNavTitle > a:after {
			content: "\f078";
			font-family: "Font Awesome 6 Pro";
			font-size: 0.8rem;
			position: absolute;
			padding: 0.3rem 0.5rem;
		}

		.BlogNavTitle > a[aria-expanded="true"]:after {
			content: "\f077";
		}

.BlogNav ul {
	list-style: none;
	padding: 0;
	columns: 3;
}

.BlogNav li {
	padding: 2px 0;
}

.BlogPost {
    border-bottom: 1px solid #ededed;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    float: left;
    width: 100%;
}

.BlogGutter {
    width: 0%;
}

@media only screen and (min-width: 480px) {
    .BlogPost {
        width: 48%;
    }

    .BlogGutter {
        width: 4%;
    }
}

@media only screen and (min-width: 992px) {
    .BlogPost {
        width: 24%;
    }

    .BlogGutter {
        width: 1.33%;
    }

    .BlogPost.twitter {
       height: 100%;
    }
}


.PostContent {
	margin-bottom: 1rem;
}

.PostMeta {
	margin-bottom: 1rem;
}

.PostTags {
	margin-top: 1rem;
	font-size: 1rem;
}

p.PostDate {
    width: 100%;
    font-size: smaller;
    color: var(--primary);
}

span.PostLink {
    margin-left: 1em;
    float: right;
}

.BlogFilters {
	background: var(--primary-light);
	padding: 10px 5px;
	margin-left: -15px;
	margin-right: -15px;
}

.BlogFilters button, .BlogFilters input, .BlogFilters optgroup, .BlogFilters select, .BlogFilters textarea {
	font-size: 1.125rem;
	text-transform: uppercase;
	color: #000000;
	padding-left: 30px;
}

.BlogFilters .filter-select::before, .BlogFilters .filter-search::before {
	font: normal normal normal 17px/1 "Font Awesome 6 Pro";
	font-weight: 900;
	color: #000000;
	left: 0;
	top: 0;
	height: 38px;
	padding: 10px 0px 0px 15px;
	position: absolute;
	pointer-events: none;
	width: 38px;
}

.BlogFilters .filter-select.festival::before {
	content: '\f0ac';
}

.BlogFilters .filter-select.language::before {
	content: '\f075';
}

.BlogFilters .filter-select.year::before {
	content: '\f073';
}

.BlogFilters .filter-search::before {
	content: '\f002';
}

.BlogFilters .filter-select::after {
	background: var(--primary);
	content: '\f0d7';
	font: normal normal normal 20px/1 "Font Awesome 6 Pro";
	font-weight: 900;
	color: #000000;
	right: 5px;
	top: 0;
	height: 38px;
	padding: 10px 0px 0px 14px;
	position: absolute;
	pointer-events: none;
	width: 38px;
}

.BlogFilters .filter-search .form-control::placeholder {
	color: #000000;
	opacity: 1;
}

.BlogFilters .filter-search .form-control::-moz-placeholder {
	color: #000000;
	opacity: 1;
}

.BlogFilters .filter-select select::-ms-expand {
	display: none;
}

.BlogFilters .filter-select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.blog-logo {
	display: block;
	margin: 2rem auto;
	max-width: 300px;
}