
body {
    font-family: "Source Sans Pro", sans-serif;
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
main{
	background-color: var(--bg-primary);
    color: var(--text-primary);
}
.sidebar{
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
.post-list{
	background-color: var(--bg-primary);
    color: var(--text-primary);
}
.p-l-main{
	padding: 30px 10px;
}
.article-heading{
	color:black;
	margin: 10px 0;
	text-align: center;
    background-color: #d6dbe3;
	/* margin-bottom: 10px; */
	/* margin-right: 10px; */
}
/* IDEA: Testimonies Cards */
.post-wrapper{
	
	display: grid;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	/* grid-template-columns: repeat(auto-fit, 280px); */
	gap:30px;
	/* justify-content: center; */
	padding-bottom: 50px;
	/*grid-auto-flow: dense; helps rearrange Item to fit well on grid*/
}

.post{
	height: 100%;
    position: relative;
    background-color: white;
	border:1px solid var(--borderColor);
	-webkit-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
	box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
	border-radius: 10px;
}
/* .post:hover{
	transform: scale(0.8);
} */

.thumbnail{
	display: block;
	width: 100%;
	height:180px;
	object-fit: cover;
}

.post-preview{
	background-color: #fff;
	padding:8px;
	margin-bottom: 12px;
	/* height: 98px; */
}
.post-preview h2{
	font-size: 14px;
}
.post-title{
	margin: 0;
	text-align: center;
	display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.post-title a{
	color: #332c2c;
}
.post-title a:hover {
    color: #0dcaf0;
}
.post-intro{
	text-transform: lowercase;
	color:#4b5156;
	font-size: 12px;
}
.post-footer{
	margin: 0;
	display: grid;
    font-size: 14px;
    padding: 0;
    grid-template-columns: auto 1fr 1fr;
	grid-gap: 2px;
	position: absolute;
    bottom: 0;
    width: 100%;
    color:#4b5156;
}
.post-footer li{
	display: inline-flex;
    margin: 0;
    background-color: #f7f6f6;
    padding: 0 3px;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
}
.post-footer li i{
	margin-left: 2px;
	color: red;
}

/* =========================SIDE-BAR CODE===================== */
.sidebar{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 30px;
    background-color: var(--bg-primary);
    /* color: var(--text-primary); */
}
.sidebar-block {
    position: relative;
    display: block;
    padding: 15px 24px;
    margin-bottom: 32px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #E8EEE4;
    box-shadow: 0 4px 12px rgba(154, 159, 151, 0.2);
	width: 100%;
    background-color: var(--even-bg-color);
    color: var(--text-primary);
}
.form-control{
	padding: 8px 15px;
    height: calc(1.5em + 1.375rem + 2px);
    border-color: #d6dbd9;
}
.sidebar-title {
    font-weight: 600;
    margin-bottom: 24px;
    color: #596261;
}
/* -------SEARCH------ */
.search-form .form-group {
    position: relative;
}
.search-form .btn {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 40px;
    padding: 6px 12px;
    border-radius: 50px;
    background-color: green;
    color: #fff;
    transition: all .2s ease;
}
/* ------------CATEGORIES---------- */
.categories {
    position: relative;
    list-style: none;
    padding-left: 0;

	display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    align-items: center;
}
.categories li {
    display: block;
    float: left;
    margin-bottom: 12px;
    /* width: 50%; */
}
.categories li a {
    display: flex;
	justify-content: space-between;
    width: 90%;
    padding: 6px 12px;
    background-color: #E1EBE8;
    color: #6E807A;
    border-radius: 4px;
    transition: all .2s ease;
}
.categories li a:hover {
    background-color: #adb5bd;
    color: #000;
}
.categories li a span {
    float: right;
    margin-left: 8px;
    padding: 0 6px;
    background-color: #6E807A;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 40px;
}
/* --------BLOG LIST FOR MOST VIEWED---------- */
.blog-item {
    position: relative;
    display: flex;
    padding: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #E8EEE4;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: center; */
    border-radius: 10px;
}
.blog-item:hover .post-title a {
    color: black;
}
.blog-item .post-thumb {
    flex-shrink: 0;
    position: relative;
    display: flex;
    margin-right: 15px;
    width: 100px;
    height: 100px;
    background-color: #A1AAA7;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.blog-item .post-thumb img {
    width: auto;
    height: 100%;
}
.blog-item .post-title a {
    color: white;
    transition: all .2s ease;
}
.blog-item .meta a {
    margin-right: 6px;
    font-size: 12px;
    color: #6E807A;
}
/* -----------  */
/* -------TAG LIST DISPLAY -------- */
.tagcloud {
    position: relative;
    display: block;
}
.tag-cloud-link {
    display: inline-block;
    padding: 4px 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px solid #d7dfdc;
    border-radius: 40px;
    font-size: 14px;
    color: #6E807A;
    transition: all .2s ease;
}
.tag-cloud-link:hover{
	border: 1px solid #0dcaf0;
    color: #0dcaf0;
}
/* END OF SIDE-BAR CODE */

/* IDEA: LARGE SCREENS */
@media(min-width: 720px){
  .post-wrapper{
	grid-template-columns: repeat(auto-fit, 300px);
    justify-content: center;
    padding-left: 0px;
    padding-right: 0px;
  }
  
}
@media(min-width: 1200px){
    .post-list{
		display: grid;
		grid-template-columns: auto 400px;
	  }
    #post-thumb{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .content .meta{
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }
} 
