/* main container. */
#x99d1 {display: flex; justify-content: space-between; margin:80px auto 30px;}

/* left container */
#x99d2 {width: 65%;}
/* right panel */
#x99d3 {width: 35%;}

.x99i1 {width: 13px;}
.x99s1{color: #8e8e8e;
    font-size: 14px;}
.x99s2{    margin-right: 10px;
    font-size: 14px;
    color: #4a4a4a;
    transition: 0.2s;}
#x99d4{
    margin: 0;
    padding: 0 10px;
}
.x99d5{margin:0;}

.x99d6 {padding: 40px 10px;flex-direction: column;margin: 0 30px 30px 0;}

.x99h1 {text-transform: capitalize;font-size: 32px;color: #333333;font-weight: 400;line-height:1.2;}

/* Blog html container */
.x99d0{
    font-family: var(--font2);
    color:var(--color1);
    line-height: 1.7;
    font-size: 16px;
    word-spacing: 1px;
}
.x99d0 a{
    color:var(--color5);
}
.x99d0 h1, .x99d0 h2, .x99d0 h3, .x99d0 h4{
    color:#444;
}
.x99d0 h3{margin:20px 0;}
.x99d0 img{
    width:100%;
    height:auto;
}
.x99d0 p ,.x99d0 li{font-weight:300; line-height:1.7; margin:15px 0; color:var(--color1);}

.x99d0 ul{margin-left:30px; padding-left:0; }
.x99d0 li{margin:5px; padding-left:10px; position:relative; list-style:square;}

.x99d0 hr{
    border:0;
    border-top:1px solid #ededed;
    margin:5px 0;
    padding:5px 0;
}

.x99d0 table {
        font-family: var(--font1);
        border: 0;
    border-collapse: collapse;
    width:100%;
    padding: 10px;
    margin: 15px 0;
}

.x99d0 th,
.x99d0 td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
    margin: 15px 0;
}
.x99d0 th{background:#ededed; font-weight:500;}

.x99d0 p>a {
    color: var(--color5);
}

/* Blog article headings on Blog main */
.x99h2 {text-transform: capitalize;font-size: 32px;color: #333333;font-weight: 100; line-height:1.2; margin:30px 0 10px;}
.x99h2:hover{color: #E6940E;transition:0.2s;}
/* Posted date div */
.x99d7 {display: flex;flex-wrap: wrap;}


/* pagination */
.x99a1{
	width: 35px;
	text-align: center;
	padding: 5px;
	display: inline-block;
	height: 30px;
	text-decoration: none;
	color: #fff;
	background: #cfc7bb;
	border-radius: 4px;
	margin: 1px;
	transition:1s all;
    font-family: var(--font-default);
    margin:2px;
}
/* x99a2 is for selected */
.x99a1:hover, .x99a2{
	color: #fff;
	background: #ffa934;
}
/* x99a3 is for dots */
.x99a3, .x99a3:hover {
	background: none;
	color: #000;
	border: none;
	padding-top: 3px;
	height: 18px;
	width : auto;
}

/* Side panel - recent posts and category list */
.x99d8 {background: #fcfcfc;padding: 20px 5%;margin-bottom: 30px;}

.x99d9 {display: flex;flex-direction: column;margin-top: 10px;line-height: 2;}
.x99s3 {font-size: 22px;margin-bottom: 5px;}
.x99s4 {color: #b1b1b1;font-size: 15px;line-height: 1.5;text-transform: capitalize;}
.x99s4:hover{color: #E6940E;}
.x99a4{    border-bottom: 1px solid #f6f6f6;
    padding: 3px 0;
    margin: 3px 0;}
.x99a4:last-child{border-bottom:none;}


/* article pg Author div */
#x99d10{
    display: flex;
    gap: 20px;
    align-items: center;
    background: #f8f8f8;
    padding: 10px;
    margin: 10px 0;
}
#x99d10 > img{
    width: 50px;
    height: 50px;
    opacity:0.3;
}
#x99d10 > p{
    font-size: 16px;
    color: #555;
}

/* .....Responsive..... */
@media screen and (max-width:640px) {
    #x99d1 {flex-direction: column;margin-bottom:10px;}
    #x99d2,#x99d3 {width: 100%;}
    .x99h1 {font-size: 26px;}
    .x99d6{margin:0;}
}