/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
html, body {
    scroll-behavior: smooth;
}
.mobile-toc-control {
	display:none;
}
.single-post .container {
	max-width: 1520px;
	margin: 0 auto;
}
.site-breadcrumbs{
    margin-bottom: 14px;
}
.site-breadcrumbs #breadcrumbs{
    margin: 0;
}
.site-breadcrumbs a,
.site-breadcrumbs span {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: #000;
}
.single-post .post-content {
	display:flex;
	flex-direction: row-reverse;
	gap: 100px;
}
.single-post .site-sidebar {
	max-width: 305px;
	width: 100%;
	flex-shrink: 0;
	padding-top: 50px;
}
.single-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	
}
.post-content {
	margin-bottom: 50px;
}
.post-content .date {
	font-size:20px;
	line-height:28px;
	font-weight:700;
	margin-bottom:50px;
}
.post-content {
	position: relative;
}
.post-content p {
	font-size:18px;
	line-height:26px;
}
.fixed-block-sidebar {
	position: sticky;
	top:35px;
	left:0;
}
h1.entry-title {
	font-size:30px;
	line-height:38px;
	letter-spacing: -0.2px;
	font-weight:500;
	margin-bottom: 50px;
}
.author-box .author-avatar {
	margin-bottom:10px;
}
.author-box .author-avatar img {
	border-radius: 50%;
}
.author-box .name-author {
	font-size:20px;
	line-height:28px;
	font-weight:700;
	text-transform:uppercase;
	color:#1C1C1C;
	margin-bottom:10px;
}
.author-box .hobby-author {
	font-size:14px;
	line-height:20px;
	letter-spacing:0.2px;
	color:#B4BBC2;
	margin-bottom: 30px;
}
.author-box .title-sosial-block {
	font-size:20px;
	line-height:28px;
	font-weight:700;
	text-transform:uppercase;
	color:#1C1C1C;
	margin-bottom:10px;
}
.author-box .social-wrap {
	display:flex;
	justify-content:space-between;
}
.social-wrap a {
	width:48px;
	height:48px;
	display:block;
}
	
.toc-box .title-toc-box {
	font-size:14px;
	line-height:20px;
	letter-spacing:0.2px;
	color:#1C1C1C;
}
.toc-list {
	padding-left:0;
}
.toc-list li {
	list-style:none;
	margin-bottom:10px;
}
.toc-list li a {
	font-size:18px;
	line-height:26px;
	font-weight:400;
	color:#B4BBC2;
}
.toc-list li.active a {
	color: #1C1C1C;
}
h3.accordion-item__heading {
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.1px;
	color: #1C1C1C;

}
h3.accordion-item__heading strong {
	font-weight: 500;
}
.accordion-item__heading .accordion-item__toggle-icon.has-icon-plus {
    position: relative;
    cursor: pointer;
    padding-right: 1.5em;
}

.accordion-item__toggle-icon.has-icon-plus::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2em;
    line-height: 1em;
}
.single-post .is-open .accordion-item__toggle-icon.has-icon-plus {
	transform: rotate(0);
}
.is-open .accordion-item__toggle-icon.has-icon-plus::after {
    content: "−";

}
.accordion-item__toggle-icon.has-icon-plus svg {
	display: none;
}
.popular-posts {
	padding: 20px;
	background-color: #FFF6EB;
	border-radius: 10px;
	margin-bottom: 50px;

}
.popular-posts .popular-posts-title {
	color: #FF9F1C;
	font-size:30px;
	line-height:38px;
	font-weight:500;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	margin: 0 0 50px;
}
.popular-posts  .archive-post .entry-summary {
	font-size: 14px;
	line-height: 20px;
	text-transform: none;
}
.btn-read-more {
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
}
.btn-read-more span {
	margin-right: 20px;
}
.single table,
.single table {
    border-collapse: collapse;
}
.single td,
.single th,
.single table td,
.single table th {
    border: 1px solid #000;
    padding: 4px 6px;
}
.wp-block-table {
	margin-left: 0;
	margin-right: 0;
	padding: 10px 0;
	overflow: auto;
}
.wp-block-list li > a,
.post-content .inner-wrap p > a {
	color: #1C1C1C;
	text-decoration: underline;
}
@media (max-width:1600px) {
	.content-with-sidebar {
		padding:0 10.417%;
	}
	.single-post .post-content {
		gap: 30px;
	}
	
}
@media (max-width:1400px) {
.single-post .site-sidebar {
	flex-shrink:1;
	}

.post-content .inner-wrap {
	width:80%;
}
.toc-list li a {
	font-size:14px;
	line-height:18px;
}
.author-box .title-sosial-block {
	font-size:14px;
	line-height:20px;
}
}
.post-content figure img {
	max-width:100%;
	height:auto;
}
@media (max-width:1200px) {
	.single-post .post-content {
		flex-direction:column-reverse;
	}
	.single-post .site-sidebar {
		padding-top:10px;
	}
	h1.entry-title {
		font-size:25px;
		line-height:30px;
		margin-top:0;
		margin-bottom:30px;
	}
	.post-content .date {
		margin-bottom:30px;
	}
	.post-content .inner-wrap {
		width:100%;
	}
	.toc-control-row {
		display:flex;
		justify-content:flex-end;
		align-items:center;
		position:relative;
	}
	.toc-control-row p {
		margin-right: 20px;
	}
	.mobile-toc-control {
		display:block;
		border:none;
		background-color: #0a1389;
		padding: 6px 10px 0px;
        border-radius: 10px;
	}
	.mobile-toc-control svg {
		width: 30px;
		height: 40px;
		
	}
	.mobile-toc-control svg path,
	.mobile-toc-control svg circle {
		fill:#fff;
	}
	.single-post .site-sidebar {
		max-width:100%;
	}
	.author-box {
		max-width:300px;
	}
	.fixed-block-sidebar {
		display: flex;
    	position: initial;
    	justify-content: space-between;
	}
	.toc-box {
		width: 300px;
		position:relative;
		margin-top:auto;
	}
	.toc-list li a {
		color:#1C1C1C;
	}
	.mobile-container {
		overflow:hidden;
		height:0;
		visibility: hidden;
		transition: height 0.6s;
		position:absolute;
		left:0;
		top:60px;
		background:#fff;
		box-shadow: 3px 3px 11px -5px rgba(0, 0, 0, .2);
		padding: 10px;
        border-radius: 10px;
	}
	.mobile-container.open {
		overflow:hidden;
		height:auto;
		visibility: visible;
	}
	
}
@media (max-width:575px) {
	.mobile-container{
		width: 60vw;
		left: -30vw;
	}
        
}
@media (max-width:360px) {
	.mobile-container{
		width: 70vw;
		left: -40vw;
	}
        
}