/*--------------------------------------------------------------
!!!!! IMPORTANT NOTES !!!!!!!!!!

Breakpoints 

phones: max-width: 599px
lg phones and small tablets: max-width: 767px
tablets: max-width: 992px
laptops & desktops: min-width: 993px;

#e40707 = link colours
#cd1d1d = button background
#fa7c7c = button border
#622 = button border

*/

#newslist {display: flex; flex-wrap: wrap; align-content: flex-start;}
.newsitem { font-size: 1rem; width: 31.25%; min-width: 10em; max-width: 500px; border: solid 1px #cccccc; margin: 1%; padding: 0%;}
.newsitem h3 { padding: 0 0 .25em 0; margin: 0; line-height: 1.15em; font-size: 1rem;}
.newsthumb img {min-width: 100%; min-height: 100%;}
.newsthumb  {max-height: 130px; min-height: 100px; max-width: 500px; overflow:hidden;}
#newslist .newsitem a {text-decoration: none; font-weight: bold;}
#newslist .newsitem a:hover {text-decoration: underline; font-weight: bold;}
.newstext {padding: 1em; overflow: hidden;}
.newsmeta {text-align: right;margin: 0; padding: .25em 0; font-size: .75em; border-top: solid 1px #efefef;border-bottom: solid 1px #efefef;}
.newsmeta p {margin: .5em 0;}




/*-------------------------------------------------------------- 
# layout of blog pages
--------------------------------------------------------------*/
.blog main#primary, .archive main#primary   {width: 100%; display: flex; flex-wrap: no-wrap;}
.single main#primary, .archive main#primary   {display: flex; flex-wrap: no-wrap;}
.blog #blogpost, #blogpost, #newslist {width: 73%;  padding: 0 2% 0 0;  }

#sidebar-newspages {max-width: 25%; background-color: #f3f3f3; min-width: 10em;}



@media screen and (max-width: 767px) {
			.single main#primary, .archive main#primary   {display: flex; flex-wrap: wrap;}
			.blog #sidebar-newspages {max-width: 100%; background-color: #f3f3f3; min-width: 100%;}
			.blog #blogpost, #blogpost, #newslist {width: 100%;  padding: 0 2rem 0 0; min-width: 20em;}
			#newslist {max-width: 100%;}

			.newsitem { font-size: 1rem; width: 100%; min-width:none; max-width: 100%; border: solid 1px #cccccc; margin: 1%; padding: 0%;}
}

/*--------------------------------------------------------------
# postmeta
--------------------------------------------------------------*/
#blog-categories {font-size: 0.9rem; color: #555; background-color: #f3f3f3; padding: .5rem; margin-top: 1rem; }

.entry-meta {font-size: 0.9rem; color: #555; border-top: solid 1px #c4c4c4; padding: .5rem; text-align: right;}


/*--------------------------------------------------------------
# post navigation
--------------------------------------------------------------*/
.previous-next {display: flex; align-items: center; font-size: 0.9rem; color: #555; background-color: #f3f3f3; padding: .5rem ; }

.nav-previous {align-items: center; display: flex;border-right: solid 1px #c4c4c4; margin: 0; padding-right: 3rem;}
.nav-previous::before { display: flex; font-size: 2rem; font-weight: bold; color: #AD0505;  padding: 0 1rem;  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f053";}
.nav-next {align-items: center; display: flex; padding-left: 3rem; }
.nav-next::after { display: flex; font-size: 2rem; font-weight: bold; color: #AD0505; margin: 0;  padding: 0 1rem;  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054";} 
.previous-next nav.navigation.post-navigation {margin: 0; padding: 0;}
/*--------------------------------------------------------------
# newspages sidebar
--------------------------------------------------------------*/

#sidebar-newspages h2 {font-size: 1.25rem; color: #000; background-color: #c4c4c4; padding: 1rem .5rem; }

#sidebar-newspages ul {padding: 1rem; margin: 0; list-style-type: none;}


#sidebar-newspages ul li {padding: 1rem 0; margin: 0; border-bottom: solid 1px #c4c4c4}
#sidebar-newspages ul li:hover { margin: 0; border-bottom: solid 1px #c4c4c4}

#sidebar-newspages ul li a {text-decoration: none;}
#sidebar-newspages ul li a:hover {text-decoration: underline;}

/*--------------------------------------------------------------
# archives pages
--------------------------------------------------------------*/
div.page-header {width: 100%;} 



/*--------------------------------------------------------------
# phone - smaller screens
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
		.single main#primary, .archive main#primary {flex-wrap: wrap;}
		#blogpost { width: 100%}
		#sidebar-newspages {margin-top: 1em; width: 100%; background-color: #f3f3f3;}
		}