/*!
Theme Name: sebatik
Theme URI: https://sebatik.info
Author: mastrymedia
Author URI: https://mitramedia.web.id
Description: sebatik theme is a custom wordpress template that is adapted to a combination of Grid and List so that it has a premium and elegant appearance
Version: 1.0.2
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sebatik
*/

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--white: #ffffff;
	--blue: #3498db;
	--black: #000000;
	--tint1: #192935;
	--tint2: #33414c;
	--tint3: #4d5862;
	--tint4: #667079;
	--tint5: #80888f;
	--border: #e9e9e9;
	--red: #da251d;
	--redd: #cb4335;

	--Inter: 'Inter', sans-serif;

}

* {
	box-sizing: border-box;
}

body {
	/* Set "my-sec-counter" to 0 */
  counter-reset: step-counter;
	margin: 0;
	padding: 0;
	font-family: var(--Inter);
	font-size: 13px;
	background: var(--white);
	color: var(--black);
}

a:link, a:visited {
	color: var(--black);
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	object-fit: cover;
}

.widget_media_image figure {
	margin: 0!important;
}

.wp-block-image {
	margin: 0;
}

.container {
	max-width: 980px;
	margin: auto;
	padding: 0;
}

/*--------------
  >>> HEADER <<<
----------------*/
.header {
	background: #000;
	box-shadow: rgb(0 0 0 / 4%) 0 6.4px 19.2px 0;
}

#headerbar {
	position: fixed;
	top: -60px;
	left: 0;
	right: 0;
	display: block;
	background: #000;
	transition: top 0.5s;
	z-index: 1234;
	box-shadow: rgb(0 0 0 / 4%) 0 6.4px 19.2px 0;
}

.header-slide-down {
	display: none;
}

.main-header-slide-down {
	max-width: 980px;
	margin: auto;
}

.main-header-slide-down ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main-header-slide-down ul li a {
	display: block;
	padding: 15px 0;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	text-transform: capitalize;
}

.main-header-slide-down ul li:first-child a {
	padding: 0;
}

.main-header-slide-down ul li a img {
	width: 25px;
	border-radius: unset;
}

.header-primary {
	max-width: 980px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-primary .boxhead {
	flex: 0 0 50%;
	max-width: 50%;
	color: #fff;
}

.navigation-top-right {
	display: flex;
	justify-content: right;
	align-items: center;
}

.time-header {
	display: flex;
	align-items: center;
	font-size: 13px;
	margin-right: 15px;
}

.site-title-desktop {
	padding: 25px 0;
}

.site-title-desktop img {
	border-radius: unset;
	width: 200px;
}

.navigation-top {
	background: var(--blue);
	color: var(--white);
	border-bottom: 1px solid  #2874a6 ;
}

.navigation-top .container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 7px 0;
}

.navigation-top-left {
	text-align: center;
}

.navigation-top-left .search-form {
	position: relative;
}

.navigation-top-left input[type=search] {
	width: 100%;
	display: block;
	padding: 10px;
	outline: none;
	background: #444;
	border-radius: 5px;
	text-indent: 10px;
	border: 1px solid#666;
	color: #fff;
}

.navigation-top-left .search-field {
	border: none;
}

.navigation-top-left .search-submit {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.navigation-top-right ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: right;
	align-items: center;
}

.navigation-top-right ul li {
	margin-left: 10px;
}

.navigation-top-right ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius:25px;
	background: var(--red);
	color: #fff;
	font-size: 14px;
}

@media (max-width:770px) {
	.header {
		position: sticky;
		top: 0;
		z-index: 12345;
	}
	#headerbar {
		display: none;
	}
	.header-primary {
		display: none;
	}
}

/*--------------------
 >>> HEADER MOBILE <<<
 ---------------------*/
.header-mobile {
	display: none;
}
.appnav-mobile {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.appnav-mobile .material-icons {
	color: #fff;
	cursor: pointer;
	padding: 15px;
}

.site-title-mobile {
	width: 200px;
	padding: 15px 0;
	text-align: center;
}

.site-title-mobile img {
	width: 160px;
	border-radius: unset;
}

@media (max-width: 770px) {
	.header-mobile {
		display: block;
	}
}

/*----------------------
  >>> MENU DESKTOP <<<
------------------------*/

.mainmenu {
	background: #000;
	border-top: 1px solid#383838;
}

.mainmenu-primary {
	max-width: 980px;
	margin: auto;
}

.menu-primary ul {
	list-style: none;
	margin:0;
	padding:0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-primary ul li a {
	display: block;
	padding: 15px 0;
	color: #fff;
	text-decoration: none;
	text-transform: capitalize;
	font-size: 15px;
	font-weight: bold;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

.menu-primary ul li:last-child a {
	padding: 0;
}

.menu-primary ul li .material-icons {
	vertical-align: middle;
}

@media (max-width: 420px) {
	.main-navbar {
		padding:0 15px;
	}
	.navigation-top .container {
		padding:0 15px;
	}
}

/*----------------------*/

.menu-mobile {
	display: none;
}

.menu-mobile .fas {
	color: #fff;
}

.menu-mobile span {
	font-size: 18px;
	color: var(--blue);
}

@media (max-width: 980px) {
	.menu-mobile {
		display: inline-block;
	}
}

/*----------------------*/

.site-title h1 {
	font-size: 25px;
}

.site-title h1 a {
	color: var(--white);
	text-decoration: none;
}

.site-title img {
	width: 160px;
	height: auto;
	object-fit: cover;
	border-radius: unset;
}

@media (max-width: 980px) {
	.site-title img {
		padding: 20px 0;
	}
}

/*----------------------*/

.nav-menu-gradient {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	margin-left: -100%;
}

/*----------------------*/

.nav-menu .title-mobile {
	display: none;
	margin: 40px 20px 30px 20px;
}

.nav-menu .title-mobile span {
	display: inline-block;
	font-size: 18px;
	padding: 4px;
	float: right;
	color: var(--blue);
}

/*--------
MENU MOBLE
----------*/
.menu-mobile-primary {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 25px;
	background: #000;
	overflow: auto;
	margin-left: -100%;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

.main_menu_mobile .title-logo-mobile {
	padding: 0 0 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main_menu_mobile .title-logo-mobile img {
	width: 160px;
	border-radius: unset;
}

.main_menu_mobile .material-icons {
	cursor: pointer;
	color: #fff;
	font-size: xx-large;
}

.main_menu_mobile ul {
	list-style: none;
	margin: 0;
	padding: 10px 0;
}

.main_menu_mobile ul li a {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	text-transform: capitalize;
	font-weight: bold;
	color: #fff;
}

.main_menu_mobile ul li:last-child {
	display: none;
}

@media (max-width: 770px) {
	.main_menu_mobile ul#menu-primary-menu li:last-child {
		display: none;
	}
}

.sosmed-menu-mobile {
	padding: 20px 0;
}

.sosmed-menu-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.sosmed-menu-mobile ul li {
	margin-right: 15px;
}

.sosmed-menu-mobile ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--wp--preset--gradient--blush-bordeaux);
	color: #fff;
	border-radius: 50%;
}

.menu-credit-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.menu-credit-mobile ul li {
	margin-right: 20px;
}

.menu-credit-mobile ul li a {
	display: block;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
	text-transform: capitalize;
	color: #ccc;
	padding: 7px 0;
}

@media (max-width: 770px) {
	.menu-primary {
		overflow: auto;
	}
	.menu-primary ul li:first-child, .menu-primary ul li:last-child {
		display: none;
		}
	.menu-primary ul li a {
		padding: 15px;
	}
}

/*----------------------*/

.nav-menu-primary ul li ul {
	display: none;
	width:140px;
	overflow: hidden;
	position: absolute;
	background: var(--white);
	padding: 0 10px;
	box-shadow: rgb(0 0 0 / 4%) 0 6.4px 19.2px 0;
}

.nav-menu-primary ul li ul li {
	float: none;
	border-bottom:1px solid#eee;
}

.nav-menu-primary ul li ul li:last-child {
	border-bottom:0;
}

.nav-menu-primary ul li ul li a {
	display:block;
	padding: 5px 0;
	font-weight: bold;
	font-size: 13px;
}

.nav-menu-primary ul li ul li a:after {
	display:none;
}

.nav-menu-primary ul li:hover ul {
	display: block;
}

@media (max-width: 980px) {
	.nav-menu-primary ul li ul {
		display:block;
		width:auto;
		position: unset;
		box-shadow: unset;
		padding: 0;
		border-radius: 0;
	}

	.nav-menu-primary ul li ul li {
		display:block;
	}
	
	.nav-menu-primary ul li ul li a {
		padding: 10px 0;
		color:#666;
	}
}

/*----------------------*/

.menu .search {
}

.menu .search .fas {
	color: #fff;
}

.search-icon {
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	margin: 14px 0 14px 5px;
	cursor: pointer;
	color: #fff;
}

@media (max-width: 980px) {
	.search-icon {
		color: var(--blue);
	}
}

/*----------------------*/

.search-form-box {
	display: none;
	padding: 15px;
}

@media (max-width: 420px) {
	.search-form-box {
	}
}

.search-form-box input[type=search] {
	display: block;
	width: 100%;
	padding: 10px 15px;
	border: none;
	background: #fff;
	border-radius: 5px;
	font-size: 13px;
	outline: none;
	color: var(--tint4);
}

.search-form-box .search-submit {
	display: none;
}

/*------------------
  >>> ADS HEADER <<<
--------------------*/
.ads_header {
	max-width: 980px;
	margin: auto;
	margin-top: 20px;
	text-align:center;
}

.ads_header p {
	margin: 0;
}

@media (max-width: 770px) {
	.ads_header {
		margin: 15px;
	}
}

@media (max-width: 420px) {
	.ads_header {
		margin: 0;
	}
}

/*-------------------------
  >>> Main content Post <<<
---------------------------*/

.site-main {
	width: auto;
	margin: 25px 0;
}

.main-content {
	overflow: hidden;
	width: 650px;
	float: left;
}

h1.title-post-tag {
	font-size: large;
	line-height: 1.3;
	font-weight: normal;
}

h1.title-post-tag span {
	font-weight: bold;
	color: var(--red);
}

h3.title-post-search {
	font-weight: normal;
	font-size: large;
}

h3.title-post-search span {
	font-weight: bold;
	color: var(--red);
}

@media (max-width: 770px) {
	.site-main {
		padding: 0 15px;
	}
	.main-content {
		width: 100%;
		float: none;
	}
}

@media (max-width: 420px) {
	.site-main {
		margin: 0;
		padding: 0;
	}
	h1.title-post-tag {
		padding: 0 15px;
	}
	h3.title-post-search {
		padding: 0 15px;
	}
}

/*-------------------
  >>> Statis Page <<<
---------------------*/
.single-header-page {
	text-align: left;
	padding: 0;
}

.single-header-page h3 {
	font-size: large;
	margin-bottom: 20px;
}

.single-header-page {
	padding:0;
	margin-bottom: 15px;
	text-align: left;
}

.single-content-page {
	font-size: 15px;
	line-height: 1.6;
}

.single-content-page table {
	border-collapse: collapse;
	width: 100%;
}

.single-content-page table td {
	padding: 0 0 10px;
	vertical-align: top;
	width: 50%;
}

.sidebar.page .popular-posts {
	display: block;
}

@media (max-width: 420px) {
	.main-content.main-content-page {
		padding: 15px;
	}
}

/*--------------------
  >>> Posts slider <<<
----------------------*/

.swiper-container {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin-bottom: 25px;
}

.post-slider {
	width: 100%;
	height: auto;
}

.post-slider-image img {
	height: 400px;
}

.post-slider-title {
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	padding: 20px;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.post-slider-title .date {
	font-size: x-small;
	color: #999;
	margin-top: 10px;
}

.post-slider-title .category {
	display: block;
    text-decoration: none;
	margin-bottom: 10px;
}

.post-slider-title .category a {
	display:inline-block;
	padding: 5px 10px;
	background: var(--red);
	font-size: smaller;
    text-transform: capitalize;
	color: #fff;
	text-decoration:none;
}

.post-slider-title h2 {
	font-size: x-large;
	line-height: 1.3;
}

.post-slider-title h2 a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 420px) {
	.post-slider-image img {
		height: 220px;
	}
	.post-slider-title {
		position: relative;
		background: none;
		padding: 15px;
		text-align: center;
	}
	.post-slider-title h2 {
		font-size: 20px;
		max-height: 112px;
		overflow: hidden;
		line-height: 1.4;
	}
	.post-slider-title h2 a {
		color: var(--black);
	}
	.post-slider-title .category {
		margin-bottom: 5px;
	}
	.post-slider-title .category a {
		padding: 0;
		color: var(--red);
		font-size: inherit;
		background: none;
	}
}

/*------------------
  >>> ADS CENTER <<<
--------------------*/
.ads_center {
	text-align: center;
	margin-bottom: 25px;
}

.ads_center .widget p {
	margin: 0;
}

.adsk_home {
	width: 468px;
	height: 60px;
	margin: auto;
}

@media (max-width:420px) {
	.adsk_home {
		width: auto;
		height: 100px;
	} 
}

/*---------------------------------
 >>> Latest posts / Main posts <<<
-----------------------------------*/

.latest-post {
	overflow: hidden;
}

@media (max-width: 420px) {
	.latest-post {
		padding: 0 15px;
	}
}

.post-not-found {
	font-size: small;
}

.post-not-found a {
	text-decoration: none;
}

/*----------------------*/

.box-title {
	position: relative;
	margin-bottom: 5px;
}

.box-title h3 {
	display: inline-block;
    background: #fff;
    margin: 0;
    font-size: large;
    text-transform: capitalize;
    color: var(--red);
}

.box-article {
	overflow: hidden;
	padding: 15px 0;
	border-bottom: 1px solid#eee;
}

.box-article-image {
	float: left;
	width: 200px;
	margin-right: 20px;
}

.box-article-image img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	vertical-align:middle;
}

@media (max-width: 420px) {
	.box-article-image {
		width: 90px;
		margin-right: 15px;
	}
	.box-article-image img {
		height: 90px;
	}
}

.box-article-title {
	overflow: hidden;
}

.box-article-title .category {
	display: block;
	font-size: inherit;
   font-weight: normal;
   text-transform: capitalize;
   text-decoration: none;
	margin-bottom: 5px;
}

.box-article-title .category a {
	text-decoration:none;
	display:inline-block;
	color: #da251d;
}

.box-article-title h2 {
   font-size: large;
	line-height: 1.3;
	max-height: 50px;
	overflow: hidden;
}

.box-article-title .title-summary {
	margin-top: 5px;
	font-size: inherit;
	line-height: 1.3;
	color: #666;
	max-height: 35px;
	overflow: hidden;
}

@media (max-width: 420px) {
	.box-article-title h2 {
		font-size: 15px;
		max-height: 60px;
		overflow: hidden;
	}
	.box-article-title .title-summary {
		display: none;
	}
}

.box-article-title h2 a {
	color: var(--black);
	text-decoration: none;
}

.box-article:hover h2 a {
	color: var(--redd) ;
}

.box-article-title .date {
	font-size: x-small;
	color: #999;
	margin-top: 7px;
}

/*----------------------*/

.title-post-cat {
	margin: 0;
    padding: 0 0 15px;
    font-size: initial;
    text-transform: capitalize;
}

.title-post-cat a {
	color: #da251d;
	text-decoration: none;
}

.box-article ul {
	list-style: none;
    margin: 0 -10px;
    padding: 0;
    display: flex;
	flex-wrap:nowrap;
	justify-content: space-between;
}

.box-article ul li {
	max-width: 33.33%;
	flex:0 0 33.33%;
		padding:0 10px;
	margin:0 0 25px;
}

@media (max-width: 420px) {
	.box-article ul {
		width: 650px;
	}
	
	.column-kanal {
		overflow: auto;
}
}

.box-article .post-cat-image {
	margin-bottom: 10px;
}

.box-article .post-cat-image img {
	height: 120px;
}

.box-article .post-cat-title h2 {
    font-size: 15px;
	max-height: 60px;
	overflow: hidden;
	line-height: 1.3;
}

.box-article .post-cat-title h2 a {
	color: var(--black);
	text-decoration: none;
}

.column-kanal ul li:hover h2 a {
	color: var(--redd);
}

.box-article .post-cat-title .date {
	font-size: x-small;
	color: #999;
	margin-top: 7px;
}

/*--------------------------------
  >>> Next / Previous button <<<
----------------------------------*/

.next-prev {
	text-align: center;
	padding: 25px 0;
}

.next-prev a {
	display: inline-block;
    background: #da251d;
    padding: 7px 10px;
    font-size: inherit;
    text-transform: capitalize;
    color: var(--white);
    text-decoration: none;
}

/*-------------------------
 >>> Sidebar Container <<<
----------------------------*/

.sidebar {
	width: 300px;
	float: right;
	overflow: hidden;
	position: -webkit-sticky;
	position: sticky;
	top: 75px;
	box-sizing: border-box;
}

@media (max-width: 770px) {
	.sidebar {
		width: 100%;
		float: none;
	}
}

@media (max-width: 420px) {
	.sidebar {
		padding: 0 15px;
	}
}

/*----------------------
  >>> ADS BOTTOM <<<
------------------------*/
.ads_bottom {
	max-width: 980px;
	margin: auto;
	text-align: center;
}

.ads_bottom .widget_media_image img {
	width: 728px;
}

/*----------------------
  >>> Posts bottom <<<
------------------------*/

.post-bottom {
	padding: 20px 0 35px;
}

.post-bottom-cont {
	position: relative;
}

.post-bottom-cont h3 {
	font-size: large;
	text-transform: uppercase;
	border-bottom: 1px solid#ccc;
}

.post-bottom-cont h3 a {
	color: var(--blue);
	display:inline-block;
	padding: 0 0 10px;
}

.the-post-bottom ul {
	list-style-type: none;
	margin: 0 -10px;
	padding: 15px 0;
	display: flex;
	flex-wrap: nowrap;
}

.the-post-bottom ul li {
	overflow: hidden;
	max-width: 25%;
	padding: 0 10px;
	position: relative;
	flex:0 0 25%;
}

.the-post-bottom ul li:first-child {
	margin-left:0;
}

.the-post-bottom ul li:last-child {
	margin-right:0;
}

.the-post-bottom .post-cat-image img {
	height: 130px;
}

.the-post-bottom .post-cat-title h2 {
    font-size: 16px;
    padding: 10px 0;
}

.the-post-bottom .post-cat-title h2 a:hover {
	color: var(--tint4);
}

.the-post-bottom .post-cat-title .date {
	font-size: x-small;
	color: #999;
}

@media (max-width: 770px) {
	.the-post-bottom {
		overflow: auto;
	}
	
	.post-bottom-cont {
		margin: 0 15px;
	}

	.the-post-bottom ul {
		width: 980px;
	}
}

/*------------------------------
  >>> Trending posts widget <<<
--------------------------------*/

.popular-posts.wpp-ajax {
	display: block;
	padding: 10px;
	border: 1px solid#eee;
}
.popular-posts.wpp-ajax h2 {
	font-size: x-large;
	text-transform: capitalize;
	color: var(--red);
	padding: 15px 0;
	text-align: center;
}

.popular-posts.wpp-ajax ul {
	list-style:none;
	margin:0;
	padding:0;
}

.popular-posts.wpp-ajax ul li {
	counter-increment: step-counter;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid#eee;
}

.popular-posts.wpp-ajax ul li:before {
	content: counter(step-counter);
	display: table-cell;
	vertical-align: middle;
	width: 40px;
	font-size: xx-large;
	font-weight: bold;
	color: #da251d;
	text-align: right;
	padding-right: 15px;
}

.area-pop-title {
	display: table-cell;
}

.pop-title {
	max-height: 62px;
	overflow: hidden;
}

.pop-title a {
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.4;
}

.popular-posts.wpp-ajax ul li:hover .pop-title a {
	color: var(--red);
}

.popular-posts.wpp-ajax ul li .wpp-item-data {
	margin-bottom: 5px;
}

.popular-posts.wpp-ajax ul li .wpp-item-data a {
	font-size: smaller;
	color: #999;
}

.popular-posts.wpp-ajax ul li a img {
	float: none;
	margin: 0;
}

.popular-posts.wpp-ajax ul li:last-child {
	border-bottom:0;
}

.wpp-thumbnail {
	width: 75px;
	height: 75px;
}

@media (max-width: 420px) {
	.wpp-thumbnail {
	width: 90px;
	height: 90px;
}
}

/*---------------------
  >>> POPULAR POSTS <<<
-----------------------*/

.popular-posts {
	display: none;
	position: relative;
	margin-bottom: 25px;
	padding: 10px;
	border: 1px solid#eee;
	border-radius: 10px;
}

.popular-posts h3 {
	font-size: x-large;
	text-align: center;
	color: var(--red);
	padding: 15px 0;
}

.popular-posts ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.popular-posts ul li {
	counter-increment: step-counter;
	overflow: hidden;
	padding: 10px 0;
	border-bottom: 1px solid#eee;
}

.popular-posts ul li:last-child {
	border: none;
}

.popular-posts ul li:before {
	content: counter(step-counter);
	display: table-cell;
	width: 40px;
	font-size: xx-large;
	font-weight: bold;
	padding-right: 15px;
	color: var(--red);
	text-align: right;
	vertical-align: middle;
}

.popular-posts .postpop-image {
	display: none;
}

.popular-posts .postpop-title {
	overflow: hidden;
	display: table-cell;
	vertical-align: middle;
}

.popular-posts .postpop-title .category {
	margin-bottom: 5px;
}

.popular-posts .postpop-title .category a {
	font-size: smaller;
	color: #999;
}

.popular-posts .postpop-title h2 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	max-height: 65px;
	overflow: hidden;
}

.popular-posts ul li:hover .postpop-title h2 a {
	color: var(--red);
}

/*--------------------------
  >>> Widget wordpress <<<
----------------------------*/

.sidebar .widget {
	position: relative;
	margin-bottom: 25px;
}

.sidebar .widget p {
	margin: 0;
}

.sidebar .widget .widget-title {
	display: inline-block;
	background: var(--white);
	font-size: initial;
	text-transform: uppercase;
	margin: 0 0 10px;
	padding: 0 20px 0 0;
	color: var(--blue);
}

.sidebar .widget .widget-title:before {
	content: "";
   display: block;
   position: absolute;
   top: 8px;
   z-index: -1;
   width: 100%;
   height: 1px;
   background: var(--blue);
}

.widget_archive ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.widget_archive ul li {
	border-bottom: 1px solid var(--border);
	font-size: smaller;
}

.widget_archive ul li a {
	display: inline-block;
	padding: 10px 0;
	color: var(--black);
	font-size: 15px;
	text-decoration: none;
}

.widget_archive select {
	display: block;
   width: 100%;
   font-family: inherit;
   padding: 10px;
   font-size: 15px;
   margin: 10px 0;
   border: 1px solid var(--border);
   border-radius: 5px;
   outline: none;
}

.widget_recent_entries ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.widget_recent_entries ul li {
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
	padding-bottom: 10px;
}

.widget_recent_entries ul li a {
	display: block;
	text-decoration: none;
	line-height: 1.3;
	color: var(--black);
	font-weight: 700;
	padding: 10px 0 5px 0;
}

.widget_recent_entries ul li span {
	font-size: smaller;
	color: var(--tint5);
}

.widget_categories ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.widget_categories ul li {
	border-bottom: 1px solid var(--border);
	font-size: smaller;
}

.widget_categories ul li a {
	display: inline-block;
	padding: 10px 0;
	color: var(--black);
	font-size: 15px;
	text-decoration: none;
}

.widget_categories select {
	display: block;
   width: 100%;
   font-family: inherit;
   padding: 10px;
   font-size: 15px;
   margin: 10px 0;
   border: 1px solid var(--border);
   border-radius: 5px;
   outline: none;
}

.widget_tag_cloud .tagcloud {
	padding: 10px 0;
}

.widget_tag_cloud .tagcloud a {
	display: inline-block;
   font-size: 14px !important;
   text-decoration: none;
   padding: 5px 10px;
   background: var(--blue);
   color: var(--white);
   border-radius: 4px;
   margin-bottom: 5px;
}

.widget_tag_cloud .tagcloud a span {
	font-size: smaller;
}

.widget_text p {
	margin: 5px 0 10px 0;
	line-height: 1.3;
}

.widget_media_image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.widget_media_image figure {
	width: 100% !important;
	margin: 10px 0;
}

.widget_media_image figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.widget_media_image figure figcaption {
	font-size: smaller;
	padding: 5px 0;
	line-height: 1.3;
	color: var(--tint5);
}

/*----------------------
    >>> Footer <<<
------------------------*/

.footer {
	padding: 35px 0 80px;
	background: #000;
}

.main-footer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 25px;
}

.main-footer .myfoot {
	width: 33.33%;
	flex: 0 0 33.33%;
	margin-bottom: 20px;
}

.myfoot.left .office-footer {
	color: #fff;
	line-height: 1.5;
}

.footer-credit {
	text-align: center;
}

@media (max-width: 770px) {
	.footer .container {
		padding: 0;
	}
	.main-footer {
		flex-direction: column;
	}	
	.main-footer .myfoot.left, .main-footer .myfoot, .main-footer .myfoot.center {
		flex: 0 0 100%;
		width: 100%;
		text-align: center;
	}
	.myfoot.right {
		margin-top: 20px;
	}
}

/*----------------------*/

.footer-brand h1 {
	font-size: 25px;
}

.footer-brand h1 a {
	text-decoration: none;
	color: var(--tint1);
}

.logo-brand-footer {
	margin-bottom: 20px;
}

.logo-brand-footer img {
	width: 160px;
}

/*----------------------*/

.footer-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer-menu ul li {
	width: 50%;
	flex: 0 0 50%;
}

.footer-menu ul li a {
	display: inline-block;
	padding: 8px;
	text-transform: capitalize;
	font-size: 13px;
	text-decoration: none;
	color: #fff;
}

.footer-menu ul li a:hover {
	color: gold;
}

.footer-menu ul li:first-child, .footer-menu ul li:last-child {
	display: none;
}

.footer-menu ul#menu-primary-menu-2 li:first-child,.footer-menu ul#menu-primary-menu-2 li:last-child {
	display: none;
}

@media (max-width: 680px) {
	.footer-menu {
		margin-bottom: 10px;
	}
}

/*----------------------*/

.footer-social-media ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: right;
	flex-wrap: nowrap;
}

.footer-social-media ul li {
	margin-left: 10px;
}

.footer-social-media ul li a {
	display: inline-block;
	width: 35px;
	color: #fff;
	text-align: center;
	font-size: 21px;
}

@media (max-width: 770px) {
	.footer-social-media ul {
		justify-content: center;
	}
	.footer-social-media ul li {
		margin: 0 5px;
	}
}

/*----------------------*/
.main-footer-credit {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-top: 1px solid#383838;
}

.menu-footer-primary ul {
	list-style: none;
	margin:0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.menu-footer-primary ul li {
	margin-right: 25px;
}

.menu-footer-primary ul li a {
	display: block;
	padding: 5px 0;
	color: #999;
}

.menu-footer-primary ul li a:hover {
	color: #fff;
}

@media (max-width: 770px) {
	.main-footer-credit {
		display: block;
	}
	.menu-footer-primary ul {
		justify-content: center;
	}
	.menu-footer-primary ul li {
		margin: 0 15px;
	}
}

/*----------------------*/

.footer-credit span {
	font-size: 11px;
	color: #999;
}

.footer-credit span a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 680px) {
	.footer-credit {
		margin-top: 20px;
		text-align: center;
	}
}

/*----------------------
   >>> Single Page <<<
------------------------*/

.single-header {
	margin-bottom: 20px;
}

@media (max-width: 420px) {
	.single-header {
		padding: 15px 15px 0;
	}
}

/*----------------------*/

.breadcrumb {
	font-size: inherit;
	color: #999;
	margin-bottom: 10px;
}

.breadcrumb span {
	text-transform: capitalize;
	display: inline-block;
	margin: 0 10px;
}

.breadcrumb span a span {
	margin: 0;
}

.breadcrumb span.breadcrumbs__separator {
	margin: 0;
}

.breadcrumb span:first-child {
	margin-left: 0;
}

.breadcrumb span a {
	text-decoration: none;
	color: #999;
}

.breadcrumb span a:hover {
	color: #000;
}

/*----------------------*/

.single-header h1.post-title {
	font-size: xx-large;
	margin: 0;
	line-height: 1.3;
}

.single-header h1.post-title a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 420px) {
	.single-header h1.post-title {
		font-size: 21px;
	}
}

/*----------------------*/

.single-header h3.sub-title {
	margin-top: 10px;
	font-weight: normal;
	line-height: 1.5;
	color: #666;
	font-size: 13px;
}

/*----------------------*/
.pageinfo {
	margin-top: 10px;
}

.single-header .author {
	display: inline-block;
}

.single-header .author a {
	color: #da251d;
	font-size: smaller;
	text-transform:capitalize;
	text-decoration: none;
}

/*----------------------*/

.single-header .date {
	display:inline-block;
	font-size: smaller;
	color: #999;
}

.single-header .date:before {
	content:"-";
}

/*----------------------*/

.featured-image {
	margin-bottom: 35px;
}

.featured-image img {
	border-radius: unset;
	aspect-ratio: 16/9;
}

.featured-image figure {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.featured-image figcaption {
	display: block;
	font-size: smaller;
	line-height: 1.3;
	margin-top: 5px;
	color: #999;
}

@media (max-width: 420px) {
	.featured-image figcaption {
		padding: 0 15px;
	}
}

/*--------------------------------
  >>> Single page post style <<<
----------------------------------*/

.post-area {
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 420px) {
	.post-area {
		padding: 0 15px;
	}
}

.post-area p a {
	text-decoration: none;
	color: var(--blue);
	font-weight: bold;
}

.post-area p a.tag_link,.post-area li a {
	color: var(--red);
	font-weight: unset;
}

.post-area p a.tag_link:before {
	display: none;
}

.post-area p a:before {
	content:"Baca Juga : ";
	font-weight: bold;
	color: #000;
}

.post-area p a.promo:before {
	display: none;
}

.post-area p a.promo {
	font-weight: normal;
}

.single-content p a.promo:before {display:none}

.single-content p a.promo {font-weight:normal}

.single-content figure {
	width: 100% !important;
	height: auto;
	margin: 10px 0 20px 0;
	padding: 0;
}

.single-content figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.single-content figcaption {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	padding: 2px 0;
	color: var(--tint5);
}

.single-content p img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.single-content figure.wp-block-gallery ul {
	padding-left: 0;
}

.single-content figure.wp-block-gallery ul li:last-child {
	margin-bottom: 10px;
}

.single-content table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 10px;
}

.single-content table td {
	border: 1px solid var(--border);
	padding: 10px;
}

.post-area iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/*----------------------*/

h3.page-links-title {
	text-align: center;
	font-size: initial;
	margin-top: 35px;
}

.page-links {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	margin-bottom: 15px;
}

.page-links-title {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

.page-links .post-page-numbers {
	margin: 0 2px;
}

.page-links a:first-child .link-number {
	padding: 0 10px;
	margin-right: 0;
	border: none;
	color: var(--black);
}

.page-links a:first-child:hover .link-number {
	color: var(--white);
}

.page-links .link-number {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 5px;
	font-size: initial;
	font-weight: bold;
	color: var(--black);
	background: #f5f5f5;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

.page-links a:last-child .link-number {
	padding: 0 10px;
	margin-left: 0;
	border: none;
	color: var(--black);
}

.page-links a:last-child:hover .link-number {
	color: var(--white);
}

.page-links .link-number .material-icons {
	vertical-align: bottom;
}

.page-links .post-page-numbers.current .link-number {
	color: #fff;
	background: var(--red);
}

.page-links .link-number:hover {
	background: #da251d;
	color:#fff;
}

.page-links .post-page-numbers.current {
	border-radius: 3px;
}

/*----------------------*/

.post-tags {
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.post-tags .tags-title {
	font-size: initial;
	font-weight: bold;
	color: #da251d;
	text-transform: uppercase;
	margin-right: 5px;
}

.post-tags a {
	display: inline-block;
	padding: 5px 10px;
	margin: 3px;
	font-size: inherit;
	color: #666;
	border: 1px solid antiquewhite;
	text-decoration: none;
	background: floralwhite;
	border-radius: 4px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

.post-tags a:hover {
	background: #da251d;
	color:#fff;
	border: 1px solid #da251d;
}

/*----------------------*/

.social-share {
	overflow: hidden;
	margin-bottom: 50px;
}

@media (max-width: 680px) {
	.social-share {
		padding: 0 15px;
	}
}

.social-share p {
	font-size: 13px;
	color: #999;
	text-align: center;
}

.social-media ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.social-media ul li {
	margin: 0 5px;
}

.social-media ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	font-size: large;
	border-radius: 25px;
}

.social-media ul li a.fb {
	background: #133783;
}

.social-media ul li a.tw {
	background: #1b95e0;
}

.social-media ul li a.wa {
	background: #0dc143;
}

.social-media ul li a.tl {
	background: #223344;
}

.social-media ul li a.em {
	background: #de4e4e;
}

/*----------------------*/

.comment-section {
	margin-bottom: 25px;
}

.comments-area {
	margin-bottom: 35px;
}

@media (max-width: 680px) {
	.comment-section {
		padding: 0 15px;
	}
}

.comment-section h3.comment-reply-title {
	margin-bottom: 5px;
	color: var(--black);
}

.comment-section .logged-in-as a {
	color: var(--tint5);
	font-size: smaller;
}

.comment-section #cancel-comment-reply-link {
	color: orangered;
   text-decoration: none;
   margin-left: 10px;
   font-size: small;
}

.comment-section .comment-notes {
	margin: 15px 0 10px 0;
	font-size: small;
	color: var(--tint5);
}

.comment-section form label {
	display: block;
	margin: 0 0 10px 0;
}

.comment-section form textarea, .comment-section form input {
   width: 100%;
   font-family: inherit;
   padding: 10px;
   border: 1px solid var(--border);
   border-radius: 5px;
   color: var(--tint4);
   outline: none;
}

.comment-section form input[type=checkbox] {
	width: auto;
	float: left;
	margin-right: 5px;
}

.comment-section form .comment-form-cookies-consent label {
	font-size: small;
	color: var(--tint5);
}

.comment-section form input.submit {
	display: inline-block;
   padding: 8px 15px;
   font-size: 14px;
   border: none;
   background: var(--blue);
   color: var(--white);
   border-radius: 5px;
   cursor: pointer;
}

/*----------------------*/

.comment-section .post-comments {
	margin: 40px 0;
	padding: 0;
	list-style-type: none;
}

.comment-section .post-comments li .comment-body {
	padding: 20px;
	background: var(--border);
	border-radius: 5px;
	margin-bottom: 20px;
}

.comment-section .post-comments li .comment-author {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.comment-section .post-comments li .comment-author img {
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 30px;
}

.comment-section .post-comments li .comment-author .fn {
	margin: 0 5px 0 10px;
}

.comment-section .post-comments li .comment-author .says {
	font-size: small;
}

.comment-section .post-comments li .comment-metadata a {
	color: var(--tint2);
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 5px;
	display: block;
}

.comment-section .post-comments li .comment-awaiting-moderation {
	font-size: smaller;
	color: var(--tint5);
}

.comment-section .post-comments li .comment-content p {
	line-height: 1.5;
}

.comment-section .post-comments li .reply a {
	display: inline-block;
   font-size: smaller;
   text-decoration: none;
   background: var(--blue);
   padding: 5px 15px;
   border-radius: 3px;
   color: var(--white);
}

.comment-section ul li ul {
	list-style-type: none;
}

/*---------------------
>> ADS UNDER ARTICLE <<
-----------------------*/
.adsk_under_article {
	margin-top: 35px;
}

/*----------------
>> RELATED POST <<
------------------*/
.related-post {
	position: relative;
	margin-top: 35px;
}

.related-post h3 {
	font-size: large;
	text-transform: capitalize;
	color: var(--red);
	margin-bottom: 20px;
}

/*----------------------*/

.related-post ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-left:-10px;
	margin-right:-10px;
}

.related-post ul li {
	max-width: 33.33%;
	flex: 0 0 33.33%;
	padding: 0 10px;
	margin-bottom: 25px;
}

@media (max-width: 420px) {
	.related-post {
		padding: 0 15px;
	}
	.related-post ul {
		margin-left:-7px;
	margin-right:-7px;
	}
	
	.related-post ul li {
		max-width:50%;
	flex:0 0 50%;
		padding:0 7px;
	}
}

.box-related .box-related-image {
	margin-bottom: 10px;
}

.box-related img {
	height: 120px;
}

.box-related h2 {
	font-size: 15px;
	line-height: 1.3;
	max-height: 60px;
	overflow: hidden;
}

.box-related ul li:hover h2 a {
	color: var(--redd);
}

@media (max-width: 420px) {
	.box-related img {
		height: 90px;
	}
}

@media (max-width: 320px) {
	.box-related img {
		height: 80px;
	}
}

.box-related h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 10px 0;
	line-height: 1.3;
}

.box-related h3 a {
	color: var(--black);
	text-decoration: none;
}

.box-related h3 a:hover {
	color: var(--tint4);
}

/*---------------------
 New Post Under Article
-----------------------*/

.newpostlist {
	margin: 35px 0 50px;
}

.newpostlist h3 {
	text-transform: capitalize;
	font-size: large;
	color: var(--red);
	margin-bottom: 5px;
}

.newpostlist .box-article:last-child {
	border-bottom: 0;
}

@media (max-width: 420px) {
	.newpostlist {
		padding: 0 15px;
	}
}

/*----------------------
    >>> 404 Page <<<
------------------------*/

.page-not-found {
	text-align: center;
	padding: 100px 0;
}

.page-not-found .title-404 {
	font-weight: 700;
	font-size: 100px;
	color: var(--black);
	margin: 0 0 10px 0;
}

.page-not-found .sub-not-found {
	font-weight: 700;
	font-size: 24px;
	color: var(--black);
	margin: 0 0 25px 0;
}

.page-not-found .btn-home {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid var(--black);
	font-size: 12px;
	text-decoration: none;
	border-radius: 50px;
	color: var(--black);
}

/*----------------------------
  >>> Back to top button <<<
------------------------------*/

.back-to-top {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 20px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

.back-to-top .material-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--wp--preset--gradient--blush-bordeaux);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
}

/*----------------
>> ADS FIXED FOOTER
-------------------*/
.adsk_fixed {
	display: none;
	width: auto;
	margin: auto;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
.adsk_sticky {
	max-width: 980px;
	margin: auto;
	text-align: center;
}
.adsk_fixed .material-icons {
	position: absolute;
	top: -20px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: large;
	width: 20px;
	height: 20px;
	background: #fff;
	cursor: pointer;
}

/*-----------------
>>> AMP DISPLAY <<<
/*-----------------*/
html[amp] .popular-posts {
	display: block;
}
html[amp] .appnav-mobile .material-icons {
	display: none;
}
html[amp] .adsk_fixed {
	display: none;
}
html[amp] .box-related amp-img {
	object-fit: cover;
}
html[amp] .featured-image amp-img {
	object-fit: cover;
}
html[amp] .sidebar {
	position: relative;
	top: 0;
}