#cd-lateral-nav::-webkit-scrollbar {
	width: 6px;
	background: rgba(255, 255, 255, 0.1);
}

#cd-lateral-nav::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#cd-lateral-nav::-webkit-scrollbar-thumb {
	background-color: var(--dark_gray);
}

#cd-lateral-nav::-webkit-scrollbar:horizontal {
	height: 6px;
}

#cd-lateral-nav::-webkit-scrollbar:vertical {
	width: 6px;
}

#cd-menu-trigger {
	width: 46px;
	height: 46px;
	display: block;
	position: relative;
	background: var(--ntrl50);
}

#cd-menu-trigger .cd-menu-text {
	height: 100%;
	color: var(--black);
	font-weight: 600;
	display: none
}

#cd-menu-trigger .cd-menu-icon {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 18px;
	height: 2px;
	background-color: var(--black);
}

#cd-menu-trigger .teksmenu {
	position: absolute;
	font-size: 12px;
	left: 25px;
	top: -7px;
}

#cd-menu-trigger .cd-menu-icon::before,
#cd-menu-trigger .cd-menu-icon:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: inherit;
	left: 0
}

#cd-menu-trigger .cd-menu-icon::before {
	bottom: 6px
}

#cd-menu-trigger .cd-menu-icon::after {
	top: 6px
}

#cd-menu-trigger.is-clicked .cd-menu-icon {
	background-color: transparent
}

#cd-menu-trigger.is-clicked .cd-menu-icon::before,
#cd-menu-trigger.is-clicked .cd-menu-icon::after {
	background-color: var(--black);
}

#cd-menu-trigger.is-clicked .cd-menu-icon::before {
	bottom: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg)
}

#cd-menu-trigger.is-clicked .cd-menu-icon::after {
	top: 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.overflow-hidden {
	overflow: hidden;
}

.blackblock {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.8);
	z-index: 49;
}

#cd-lateral-nav {
	position: fixed;
	height: 100vh;
	left: 0;
	top: 0;
	padding-top: 56px;
	padding-bottom: 56px;
	visibility: hidden;
	/* the secondary navigation is covered by the main element */
	z-index: 50;
	width: 320px;
	background-color: var(--white);
	bottom: 0;

	/* Force Hardware Acceleration in WebKit  */
	overflow-y: auto;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
	-moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
	transition: transform .4s 0s, visibility 0s .4s;
	/* this creates the subtle slide in animation of the navigation */
	-webkit-transform: translateX(-320px);
	-moz-transform: translateX(-320px);
	-ms-transform: translateX(-320px);
	-o-transform: translateX(-320px);
	transform: translateX(-320px);
}

#cd-lateral-nav .cd-navigation {
	margin: 0;
	list-style: none;
	list-style-position: inside;
	padding: 0;
	width: 100%;
}

#cd-lateral-nav .sub-menu {
	padding: 0;
	display: none;
	list-style: none;
	list-style-position: inside;
	border: none !important;
}

#cd-lateral-nav ul li a {
	overflow: hidden;
	padding: 10px;
	color: var(--black);
	position: relative;
	font-size: 16px;
	font-weight: 500;
	display: flex;
	text-align: center;
}

#cd-lateral-nav a:hover {
	color: var(--gray);
}

#cd-lateral-nav a.current {
	background: var(--blue);
	color: var(--white)
}

.no-touch #cd-lateral-nav a:hover {
	color: var(--gray);
	background: var(--blue);
}

#cd-lateral-nav .sub-menu a,
.sub-menu li:first-child {
	border: none !important;
}

#cd-lateral-nav .sub-menu a,
.sub-menu li {
	padding: 10px 30px;
}

#cd-lateral-nav .sub-menu li {
	padding: 0;
}

#cd-lateral-nav.lateral-menu-is-open {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	visibility: visible;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
	-moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
	transition: transform .4s 0s, visibility 0s 0s;
	-webkit-overflow-scrolling: touch;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
}

#cd-lateral-nav .item-has-children>a {
	position: relative;
	/* this is the right arrow to show that the item has a submenu*/
}

#cd-lateral-nav .item-has-children>a::after {
	content: '';
	display: block;
	height: 11px;
	width: 11px;
	position: absolute;
	top: 40%;
	bottom: auto;
	right: 20px;
	content: '\f107';
	font-family: 'FontAwesome';
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cd-lateral-nav .item-has-children>a.submenu-open {
	color: var(--black);
}

#cd-lateral-nav .item-has-children>a.submenu-open::after {
	transform: rotate(-180deg);
}
ul.cd-navigation li.item-has-children ul.sub-menu{

}
#cd-lateral-nav .icon-menu {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	float: left;
	margin-right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#cd-lateral-nav .icon-menu img {
	width: 24px;
	height: 24px;
}

#cd-search {
	width: 32px;
	height: 56px;
	position: absolute;
	right: 46px;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#cd-search {
	font-size: 20px !important;
}

#cd-logo {
	margin: 0 auto;
	height: 56px;
	width: auto;
	font-size: 30px;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	color: var(--white);
	font-weight: normal;
	position: absolute;
	left: 0;
	top: 0;
	padding: 8px 0 8px 16px;
}

#cd-logo img {
	height: 40px;
}

@media (min-width:1367px) {
	.container {
		max-width: 1400px;
	}

	.header .header-in {
		max-width: 1200px;
	}

	.menu ul {
		max-width: 1296px;
		height: 30px;
	}
}
@media (min-width:1024px) and (max-width:1100px) {
	.menu{font-size:12px;}
	.top-menu a{font-size:12px;}
	.top-right a{font-size:12px;}
	.grid-container{grid-template-columns: repeat(3,minmax(0,1fr));}
	.banner-full {grid-column: span 3 / span 3;}
}
@media only screen and (max-width:900px) {

	.hide_desktop {
		display: block !important;
		visibility: visible;
	}

	.hide_mobile {
		display: none !important;
		visibility: hidden;
	}

	/*header*/
	nav.menu {
		display: none;
	}

	.header {
		height: 56px;
		width: 100%;
		margin: 0 auto;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		background: var(--white);
		padding: 0;
	}

	.header .header-in {
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
		width: 100%;
		height: 56px;
		padding: 0;
	}

	#cd-menu-trigger {
		height: 56px;
		width: 56px;
		background: transparent;
	}

	h1.logo {
		height: 46px;
		margin: 5px auto;
	}

	h1.logo img {
		height: 46px;
	}

	.cd-main-content {
		padding-top: 56px;
		overflow: hidden;
	}

	.top-right {
		top: 0;
		right: 0;
		width: 56px;
		height: 56px;
		background: transparent;
		border-radius: 0;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.top-right a {
		color: var(--blue2);
		padding: 0;
		font-size: 20px;
	}

	.cd-main-content.w-bot-menu {
		padding-bottom: 56px;
	}

	.mobile_scroll {
		overflow-y: scroll;
		padding-bottom: 12px;
	}



	.box-search {
		margin-bottom: 0;
	}

	.blockbox p.capt {
		font-size: 14px;
		line-height: 18px;
	}
	.out-box-title{
		width:100%;
		max-width:100%;
	}
	.blockbox h2.titlebox {
		margin-bottom: 16px;
		font-size: 20px;
	}

	.blockbox h2.kanal {
		padding: 8px 16px;
		font-size: 24px;
		margin-bottom: 24px;
	}

	.blockbox h3.titlebox {
		min-height: 18px;
		font-size: 18px;
		margin-bottom: 16px;
	}

	.footer {
		padding: 24px 0;

	}

	.footer .col-3 {
		width: 50%;
		margin-bottom: 24px;
	}


	.mobile-layout {
		display: flex;
		flex-direction: column;
	}

	.mobile-layout .col-4 {
		order: 1;
		width: 100%;
		float: none;
	}

	.mobile-layout .col-8 {
		order: 2;
		width: 100%;
		float: none;
	}

	.mobile-layout.default .col-4 {
		order: 2;
		width: 100%;
		float: none;
	}

	.mobile-layout.default .col-8 {
		order: 1;
		width: 100%;
		float: none;
	}


	ul.sosmed {
		justify-content: center;
		margin: 16px 0;
	}

	.footer p.by {
		text-align: center;
		margin-top: 16px;
	}

	.full_col {
		width: 100%;
		float: none;
		padding: 0 16px 16px 16px;
	}
	#big_news .card-box.big-img{flex-wrap: wrap;}
	#big_news .card-box.big-img .img-card {
		width: 100%;
		height: auto;
		margin-bottom: 16px;
	}

	#big_news .card-box.big-img .text-card {
		width: 100%;
		flex-wrap: wrap;
		padding: 0;
	}

	#big_news .card-box.big-img .img-card img {
		width: 100%;
		height: auto;
	}

	#big_news .card-box.big-img.right {
		flex-direction: column;
	}

	ul.row-list.list_big3,
	ul.row-list.list_invest {
		width: 890px;
	}

	ul.row-list.list_invest li .card-box .text-card h2.title {
		font-size: 18px;
	}

	ul.row-list.list_lima {
		width: 1200px;
	}

	ul.row-list.list_delapan li {
		width: 100%;
	}

	ul.row-list.list_delapan li .card-box {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		flex-grow: 0;
	}

	ul.row-list.list_delapan li .card-box .text-card {
		padding-right: 16px;
		flex: 1;
	}

	ul.row-list.list_delapan li .card-box .img-card {
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
	}

	ul.row-list.list_delapan li .card-box .img-card img {
		width: auto;
		height: 100%;
	}

	.slider_kanal_01 .slick-list,
	.slider_kanal_02 .slick-list {
		padding: 0 10% 0 0;
	}

	.slider-thumb {
		margin-top: 0 !important;
	}

	.slider-show .slick-list,
	.slider-thumb .slick-list {
		padding: 0 15% 0 0;
	}

	.slider.slider-show {
		margin-left: -8px !important;
		margin-right: -8px !important;
	}

	.slider-show .slider-item,
	.slider-thumb .slider-item {
		padding: 0 8px !important;
	}

	ul.row-list.list_dua li {
		width: 100%;
	}

	.slider-thumb .slick-current.slick-active {
		background: transparent;
	}

	.slider-thumb .card-box .text-card {
		padding: 8px;
	}

	ul.row-list.list_dua li .card-box {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		flex-grow: 0;
	}

	ul.row-list.list_dua li .card-box .text-card {
		padding-right: 16px;
		flex: 1;
	}

	ul.row-list.list_dua li .card-box .img-card {
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
	}

	ul.row-list.list_dua li .card-box .img-card img {
		width: auto;
		height: 100%;
	}

	ul.row-list.list_dua_black li {
		width: 100%;
	}

	.blockbox.topblock {
		padding-top: 16px;
	}

	.card-box.fullwidth .text-card {
		position: relative;
		padding: 32px 16px;
	}

	.card-box.fullwidth .text-card h2.titlebox {
		position: relative;
		top: inherit;
		left: inherit;
	}

	.card-box.fullwidth .text-card h2.title {
		font-size: 32px;
	}

	.card-box.big-img.editor_col {
		flex-direction: column;
	}

	.card-box.big-img.editor_col .img-card {
		width: 100%;
		opacity: 1;
	}

	.card-box.big-img.editor_col .text-card {
		width: 100%;
		padding: 24px 16px;
	}

	.card-box.big_dua_col {
		flex-direction: column;
	}

	.card-box.big_dua_col .text-card {
		width: 100%;
		height: auto;
		padding: 24px 16px;
	}

	.card-box.big_dua_col .img-card,
	.card-box.big_dua_col .img-card img,
	.card-box.big_dua_col.vertical .img-card,
	.card-box.big_dua_col.vertical .img-card img {
		width: 100%;
		height: auto;
	}

	.card-box.big_dua_col.vertical .text-card p {
		text-align: left !important;
	}
	.card-box.big_dua_col.vertical .text-card{min-height:auto; gap:24px; padding:16px;}
	.card-box.fullwidth.top-title .text-card {
		background: var(--solid);
	}

	.card-box.fullwidth.top-title .text-card {
		padding: 24px 16px;
	}

	ul.row-list.list_also li .col-4 {
		width: 100%;
		padding: 0;
	}

	ul.row-list.list_also li .col-2 {
		width: 100%;
		padding: 0;
	}

	ul.row-list.list_also li .col-6 {
		width: 100%;
		padding: 0;
	}

	ul.row-list.list_also li h3 {
		margin-bottom: 16px !important;
		margin-top: 0 !important;
	}

	ul.row-list.list_also li .card-box .img-card {
		margin-bottom: 16px;
	}

	.top_menu_mobile {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 16px;
		margin-bottom: 24px;
	}

	.top_menu_mobile a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		line-height: 16px;
		padding: 4px 6px;
		font-weight: 500;
	}

	.detail-artikel {
		padding-top: 16px;
	}

	.detail-artikel .col-11 {
		width: 100%;
		float: none;
	}

	.detail-artikel .col-1 {
		width: 100%;
		float: none;
	}

	.detail-artikel .col-9 {
		width: 100%;
		float: none;
		padding: 0 16px;
		margin-bottom: 40px;
	}

	.detail-artikel .col-3 {
		width: 100%;
		float: none;
	}

	.judul-artikel h1 {
		font-size: 24px;
	}

	ul.share {
		flex-direction: row;
	}

	ul.row-list.list_subscriber {
		row-gap: 24px;
	}

	ul.row-list.list_subscriber li {
		width: 100%;
	}
	.top_right_home .redbox{width:100%;}
	.top_right_home .redbox .redbox-in{width:100%; max-width:inherit;}
	.grid-container{grid-template-columns: repeat(2,minmax(0,1fr));}
	.banner-full {grid-column: span 2 / span 2;}
	.grid-galleries {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width:579px) and (max-width:899px) {
	.menu{font-size:12px;}
	.top-menu a{font-size:12px;}
	.top-right a{font-size:12px;}
	.grid-container{grid-template-columns: repeat(2,minmax(0,1fr));}
	.banner-full {grid-column: span 2 / span 2;}
	  .grid-galleries {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media only screen and (max-width:580px) {
	ul.row-list.list_visual li {
		width: 100%;
		margin-bottom: 16px;
	}
	.grid-container{grid-template-columns: repeat(1,minmax(0,1fr));}
	.banner-full {grid-column: span 1 / span 1;}
  .grid-event {
    grid-template-columns: repeat(1, 1fr);
    gap:0;
  }
  .grid-event .event-left{grid-column: span 2;}
  .grid-event .event-right{grid-column-start:2;grid-column: span 2; display:flex;align-items:flex-end;}

  .grid-galleries {
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
  }
  .video_text .leftpos{padding-right:20%;}
  .video_text .rightpos{padding-left:20%;}
  .element-box.dark-input input{width:80%;}
.element-box.dark-area textarea{width:100%}
.container.login .boxreg{padding:24px;}
.container.login{padding:16px;}
}