/* FOR ALL */
a.blog_link{}
a.blog_link, a.blog_link:visited {color: var(--main);}
a.blog_link:hover, a.blog_link:focus {color: var(--main);}
.blog_date{font-size: 14px; display: block;}

/* blogs as panels */
.blogrow{}
.blogcell {padding-bottom: 20px;}
.blogbox{border: 0;  border-radius: 8px;  height: 100%; width: 100%;background-color: white; overflow: hidden;}

.blogimg{width: 100%; height: 240px;  background-color: var(--main);}
.blogimg img{object-fit: cover; object-position: center;width: 100%;  height: 100%;}

.blogtext{width: 100%; padding: 20px;}

/* pagination */
.blogpagination{display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 10px 0; width: 100%; gap: 10px }
.blogpagination a, .blogpagination div{display: flex; justify-content: center; align-items: center;font-size: 19px;  width: 44px; height: 44px; text-align: center;  }
.blogpagination a, .blogpagination a:visited{background-color: var(--main); color:var(--accent); text-decoration: none;border-radius: 8px; }
.blogpagination a:hover, .blogpagination a:focus{color: white}
.blogpagination div{ border-radius: 8px; background-color: var(--accent); color: var(--main);text-decoration: none;}


	/*S*/
	@media only screen and  (min-width: 576px) {
		.blogimg{ height: 300px; }
	}
	
	/*M*/
	@media only screen and  (min-width: 768px) {
		.blogimg{ height: 200px; }
	}

	/*L*/
	@media only screen and (min-width: 992px) {
	}
	
	/*XL*/
	@media only screen and (min-width: 1200px) {
	}

	/*XXL*/
	@media only screen and (min-width: 1400px) {
	}


/* archive & categories */
	section.blogfilters{display: flex; flex-wrap: wrap; justify-content: space-between; height: 70px;}
	.BF, .archiver{position: relative; padding-top: 5px; flex: 1 0; max-width: 48%}
	.archiver{}

	button.Bfilter{border: solid 1px var(--main); border-radius: 3px; width: 400px; text-align: left; padding: 0 20px; position: absolute; top: 0px; left: 100px; z-index: 90; background-color: white; height: 35px; }
	button.Bfilter.on{border-radius: 3px 3px 0 0;}
	button.Bfilter:hover, button.Bfilter:focus{background-color: var(--main); color: white; border: solid 1px  var(--main);}
	button.Bfilter:after {content: '\f078'; font-family: 'Font Awesome 6 Pro';   position: relative; float: right;}
	
	.filterbox, .Afilter{display: none;width: 400px;border: solid 1px var(--main); border-radius: 0 0 3px 3px; position: absolute; top: 33px; left: 100px; z-index: 90; background-color: white; }
	.filterbox{z-index: 99}
	#Abox{z-index: 90}
	.filterbox a, .Afilter a {display: block; padding: 5px 20px; border-top: solid 1px var(--main); }
	.filterbox a, .filterbox a:visited {color: var(--main);}
	.filterbox a:hover, .filterbox a:focus {color: white; background-color: var(--main); text-decoration: none;}
	.filterbox a:last-child { border-radius: 0 0 3px 3px;}

	.archiver{}
	.archiver form {display: inline}