/*
Theme Name:	 Hello Elementor Child
Template:	 hello-elementor
Theme URI:	 https://wordpress.org/themes/hello-elementor/
Author:		 ChildThemeWP
Author URI:	 https://childthemewp.com
Version:	 1.0.0
License:	 GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:		 opensource
Text Domain: helloelementorchild
*/

.page-content .the-content,
.page-content .post .post-excerpt {
	font-family: 'Courier New';
}
.post-excerpt .category {
	text-align: right;
	width: 100%;
	display: block;
	margin: -1em 0 1em;
}
.page-content .post .header-meta {
	position: relative;
	text-align: center;
	margin: 0;
	padding: 1%;
	background-position: center;
	background-size: cover;
	background-color: #ececec;
	height: 8em;
}
.header-meta .writer {
	width: 100%;
	padding: 1em 0;
}
.header-meta .writer a{
	color:#5f72bf;
	text-decoration:underline;
}
body.single .writer h3,
body.archive header.page-header h2 {
	color: #e1e1e1;
}

h1.category-title,
.category-title h1,
.writer-title h1 {
	width: fit-content;
	color: #FFF;
	margin: 0em 0 1em;
	padding: 1% 10% 1% 10%;
}

.post-date {
	width: auto;
	float: left;
	margin: 0 2%;
	font-family: Courier new;
	text-align: center;
	height: auto;
	min-width: 90px;
	min-height: 100%;
}
.post-date span {
	display: block;
	background-color: #ececec;
	padding: 5%;
}
.single .post-date {
	width: 6em;
	margin: 0 2em 0 -7em;
	/* height: 5em; */
}

.space-30{
	height:30px;
	clear:both;
}
.space-50{
	height:50px;
	clear:both;
}

.overflow-hidden {
	overflow: hidden;
}
.wpcf7-spinner {
	position: absolute;
	top: 15%;
}

#content {
	display: grid;
	grid-template-columns: 22% auto;
}
#content .page-header {
	background: #3B58BBBB;
	padding: 17% 0%;
	text-align: center;
}
.writer-title h1,
#content .page-header h1{
	font-weight:100;
	font-size:2.2em;
}

#content .page-header h1 span{
	font-weight:900;
	display:block;
}
#content .page-content {
	padding: 5% 0%;
	align-content: baseline;
}

body.archive .page-content .post .wp-post-image {
	width: auto;
}

body.archive .page-content {
	display: grid;
}
body.archive .header-meta {
	float: right;
	margin-top: 10px;
}
body.archive .header-meta img {
	vertical-align: middle;
	width: 66%;
	height: auto;
}
body.archive .page-content .post > p {
	float: left;
	width: 81%;
	padding-left: 1%;
	text-align: justify;
}
.post-date a.category,
body.archive .page-content .post .category {
	display: block;
	padding: 3% 0 10%;
	font-family: sans-serif;
	font-size: 0.8em;
	word-wrap: break-word;
}
body.archive .page-content .separator {
	width: 60%;
	display: block;
	margin: 3% auto 3% 15%;
	text-align: center;
}
body.tax-writer .page-content .separator {
	width: 50%;
	display: block;
	margin: 3% auto 3% 25%;
	text-align: center;
}
body.archive .page-content .separator span {
	border-top: 1px solid #c3b2b4;
	display: inline-block;
	width: 90%;
	height: 5px;
}
body.archive .page-content .separator:last-of-type {
	border: none;
}
body.archive .page-content .separator::before,
 body.archive .page-content .separator::after {
	content: '•';
	color: #937f81;
}
body.archive .page-content .separator::after{
	right:0;
}
body.single #content .page-content {
	padding-left: 8em;
}

article.post > .entry-title { grid-area: title; }
article.post > .post-date { grid-area: date; }
article.post > .header-meta { grid-area: meta; }
article.post > .post-excerpt { grid-area: excerpt; }
article.post {
	display: grid;
	grid-template-areas:
		'date title meta'
		'date excerpt meta'
		'date excerpt meta';
	gap: 3%;
	padding: 0 5%;
	grid-template-columns: 90px auto 16%;
}
.tax-writer article.post {
	grid-template-columns: 90px auto 0%;
}
.writer img{
	width:130px;
}
.writer a {
	display: block;
	color: #fff;
}
.writer p {
	display: block;
	font-size: x-large;
	color: #fff;
}
.writer-link{
	text-decoration:underline;
}
.writer-link span{
	font-weight:bold;
}

.filters {
	background-color: #ececec;
	width: 100%;
	margin: -1em 0 2em;
}
.filters ul {
	list-style: none;
	margin: 0 auto;
	width: fit-content;
	padding: 0;
}
.filters li {
	float: left;
	line-height: 3em;
}
.filters .selected {
	background-color: #5f72bf;
	color: #fff;
	padding: 0.5em 1em;
}
.filters li a span {
  font-size: 0.8em;
  position: absolute;
  background-color: #5f72bf;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 1.7em;
  height: 1.7em;
  color: #fff;
}
.filters li a {
	color: #280f30;
	padding: 10px;
}
.archive-description{
	display: block;
	color: #fff;
	padding: 10%;
}

.single #respond {
	height: 0;
	transition: 1s;
	overflow: hidden;
}
.single #respond.open{
	height:425px;
}


.open_comment_form {
	border: 1px solid #3B58BBBB;
	display: inline-block;
	padding: 1% 2%;
}
.open_comment_form,
.open_comment_form::after {
	cursor:pointer;
}
.open_comment_form::after {
	content: '>';
	transform: rotateZ(90deg);
	display: inline-block;
	transition: 1s;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 16px;
	border-radius: 50%;
	margin-left: 10px;
	border: 1px solid #3B58BBBB;
}
.open_comment_form.open::after {
	transform: rotateZ(-90deg);
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0;
	font-size: 18px;
}
.pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pagination li {
	display: inline-block;
	margin: 0 5px;
}
.pagination li a, .pagination li span {
	display: inline-block;
	border-radius: 5px;
	color: #333;
	text-decoration: none;
	font-size: 1rem;
}
.pagination li a:hover {
	background-color: #d5cccc;
}
.pagination li.current span {
	background-color: #333;
	color: #fff;
	border-color: #333;
}
.pagination li.disabled span {
	color: #bbb;
	border-color: #bbb;
	cursor: not-allowed;
}
.pagination .page-number {
	font-weight: bold;
}
.page-numbers {
	padding: 2px;
}
.page-number {
	padding: 0px 10px;
	border: 1px solid #bfaeaf;
}
.page-numbers.dots {
	border: 0;
}
.page-numbers.current {
	padding: 2px;
	background-color: #d5cccc;
}
.page-numbers.current span {
	border: 1px solid #bfaeaf;
	color: #fff;
	background-color: #d5cccc;
}
.prev.page-numbers,
.next.page-numbers {
	border: 1px solid #bfaeaf;
	padding: 1px 10px;
	font-weight: 600;
	font-size: 0.8rem;
}
.prev.page-numbers:hover,
.next.page-numbers:hover {
	color: #333;
}



/****************/
/*    @Media	*/
/****************/

@media only screen and (max-width: 1200px){
	#content {
		max-width: 1140px;
	}
}
@media only screen and (max-width: 1024px){
	article.post {
		padding: 0 2%;
		grid-template-columns: 90px auto 20%;
	}
}
@media only screen and (max-width: 768px){
	.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
		bottom: -1em !important;
	}
	#content {
		display: block;
	}
	#content .page-header {
		padding: 1%;
	}
	#content .page-content {
		padding: 5% 5% 5% 2%;
	}
	h1.category-title, .category-title h1, .writer-title h1 {
		width: auto;
		margin: inherit;
		padding: inherit;
	}
	.archive-description {
		padding: 0% 5% 5%;
	}
	.tax-writer .page-content .post .post-excerpt {
		/* width: 80%; */
	}
	.single .writer {
		display: grid;
		grid-template-columns: 2fr 1fr 3fr;
		align-items: center;
	}
	.tax-writer .post-date {
		min-height: auto;
	}
}
@media only screen and (max-width: 575px){
	body:not([class*="elementor-page-"]) .site-main {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
}
@media only screen and (max-width: 536px){
	.buletin label {
		display: block;
		margin-top: 1em;
	}
}
@media only screen and (max-width: 420px){
	article.post {
		padding: 0 2%;
		grid-template-areas:
			'date title'
			'meta excerpt';
		grid-template-columns: 90px auto;
	}
	body.single #content .page-content {
		padding-left: 5%;
	}
	.entry-title {
		width: 100%;
		font-size: 2em;
	}
	.post-date, .header-meta {
		min-width: 90px;
	}
	.post-date{
		min-height:auto;
	}
	.single .post-date {
		float: none;
		margin: 0;
		height: auto;
	}
	.page-content .post .header-meta {
		margin: 2% 2% 5%;
		float: left;
		clear: left;
	}
	body.archive .page-content .separator {
		width: 74%;
		margin-left: auto;
	}

}