/* Context ID */

@font-face {
	font-family: "Favorit";
	src: url("../fonts/favorit-regular.otf") format("opentype");
}
@font-face {
	font-family: "nimbus-med";
	src: url("../fonts/NimbusRomNo9L-Med.otf") format("opentype");
}
@font-face {
	font-family: "nimbus-medita";
	src: url("../fonts/NimbusRomNo9L-MedIta.otf") format("opentype");
}
@font-face {
	font-family: "nimbus-reg";
	src: url("../fonts/NimbusRomNo9L-Reg.otf") format("opentype");
}
@font-face {
	font-family: "nimbus-regita";
	src: url("../fonts/NimbusRomNo9L-RegIta.otf") format("opentype");
}
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.otf") format("opentype");
}

ul li.nav-item {
	margin: 5px 10px 0px 0px;
}
ul li.nav-item a.nav-link {
	font-family: "Roboto";
	font-size: 14px;
	color: #000;
	font-weight: 100;
}
ul li.nav-item a.active {
	color: #fc5079;
}

.nav-item.custom--flex {
	display: flex;
	position: relative;
	bottom: 7px;
	justify-content: center;
}

ul.socmed li {
	margin: 0 5px;
}
.socmed-youtube {
	margin-top: 14px !important;
}

.navbar-light .navbar-nav .nav-link {
	color: rgba(0, 0, 0, 0.8);
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: rgba(0, 0, 0, 1);
}
.bt-search {
	background-image: url(../images/icon/search-icon.svg);
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	border: 0;
}

.bt-search.custom--position {
	position: relative;
	top: 15px;
}

button:hover,
button:active,
button:focus {
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}
.cari input {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	transition: all 0.5s ease;
	/*background-image: url(../images/icon/search-icon.svg);
  background-repeat: no-repeat;*/
	width: 0px;
	height: 20px;
	cursor: pointer;
	margin-top: 10px;
	/* border-bottom: 1px solid #b0b0b0; */
}

.cari.custom--color input {
	color: #ffffff;
}

.cari input:hover,
.cari input:active,
.cari input:focus {
	background-color: transparent !important;
	box-shadow: none !important;
}
.cari input:focus {
	width: 200px;
	outline: 0;
	border-bottom: 1px solid #b0b0b0;
	cursor: text;
	padding-left: 0px;
	padding-bottom: 7px;
	margin-left: 10px;
	font-size: 16px;
	height: 30px;
}
nav {
	padding: 20px 180px !important;
	/*position: fixed !important;*/
	z-index: 999;
	background-color: #fff;
	width: 100%;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}
.img-responsive {
	width: 100%;
	height: auto;
	object-fit: fill;
}

main {
	padding-top: 80px !important;
}
.center-text {
	text-align: center !important;
	text-align: -webkit-center !important;
	text-align: -moz-center !important;
	text-align: -o-center !important;
}
.left-text {
	text-align: left;
	text-align: -webkit-left;
	text-align: -moz-left;
	text-align: -o-left;
}
.right-text {
	text-align: right;
	text-align: -webkit-right;
	text-align: -moz-right;
	text-align: -o-right;
}

/* ===== Header ===== */
.header {
	/* height: 636px;
	position: relative;
	padding: 0 40px;
	margin-bottom: 40px; */
	font-family: "Roboto";
}

.header.on-home {
	/* background: #000; */
	margin-bottom: 0;
	margin-top: 50px;
}

.header--fullheight {
	height: 100%;
	position: relative;
	padding: 0 40px;
	margin-bottom: 40px;
	font-family: "Roboto";
}

.big-img--fullheight {
	height: 100%;
}

.big-img {
	height: 550px;
}
.big-img:after {
	content: "\A";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.big-img--fullheight:after {
	content: "\A";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.65);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.head-content {
	color: #fff;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 5px;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
.head-content a.btn {
	color: #fff;
	border: 1px solid #fff;
	background: transparent !important;
	padding: 12px 52px;
	margin-top: 0;
	border-radius: 0;
}
.head-content h1 {
	margin: 0;
	max-width: 700px;
	font-weight: 100 !important;
	line-height: 1.1;
	letter-spacing: 0;
}
.head-content a {
	color: #fff;
	text-decoration: none !important;
	margin-top: 100px;
	display: inline-block;
}
.head-content a.h1-title {
	width: 100%;
}
.section-4 {
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
}
.content-41 a.btn {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
	border-radius: 0;
}

.content-41 a.btn:hover {
	color: #00b93a;
	border: 1px solid#00B93A;
	background: transparent;
	padding: 12px 52px;
	border-radius: 0;
}
.content-41 .descrip {
	max-width: 600px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	margin-bottom: 40px;
	font-size: 12pt;
	line-height: 1.3;
}
.content-42 {
	margin: 0;
}

.search-gambar img {
	width: 350px;
	height: 150px;
	object-fit: cover;
	border-radius: 4px;
}
.recent-search {
	text-align: center;
	color: #757575;
	font-family: "Arial";
	font-style: normal;
	font-weight: lighter !important;
	font-size: 18px;
	line-height: 34px;
}

.detail-label-search {
	text-align: center;
	padding: 8px 20px;
	gap: 10px;
	margin-left: 20px;

	width: auto;
	height: 34px;
	line-height: 17px;

	background: #777764;
	border-radius: 4px;
	font-size: 18px;
}
.detail-label-origin-search {
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	/* Originals */

	background: #00b93a;
	border-radius: 4px;
}
.detail-label-exclusive {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #f1a11a;
	border-radius: 4px;
}
.detail-label-exclusive-search {
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	/* Originals */

	background: #f1a11a;
	border-radius: 4px;
}
.detail-label-unfold {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #004ea8;
	border-radius: 4px;
}
.detail-label-unfold-search {
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	/* Originals */

	background: #004ea8;
	border-radius: 4px;
}

.detail-label-stories {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #a80000;
	border-radius: 4px;
}

.detail-label-stories-search {
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	/* Originals */

	background: #a80000;
	border-radius: 4px;
}
.detail-label-extras {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #8711fd;
	border-radius: 4px;
}
.detail-label-extras-search {
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	/* Originals */

	background: #8711fd;
	border-radius: 4px;
}
.detail-category p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	color: #ffffff;
	margin: 0px;
}

.content-42 .content-43 {
	color: #fff;
	width: 100%;
	min-height: 100px;
	font-family: "Roboto";
	/* padding: 20px; */
	margin: 0;
}

.content-42 .content-43 {
	color: #fff;
	width: 100%;
	min-height: 100px;
	font-family: "Roboto";
	/* padding: 20px; */
	margin: 0;
}
.content-42 .content-43 .col-md-6,
.content-42 .content-43 .col-sm-12 {
	position: relative;
	margin: 0 0 30px;
	padding: 0 15px;
	/* height: 350px; */
}
.content-42 .content-43 .col-md-6:first-child,
.content-42 .content-43 .col-sm-12:first-child {
	padding-left: 0;
}
.content-42 .content-43 .col-md-6:last-child,
.content-42 .content-43 .col-sm-12:last-child {
	padding-right: 0;
}
.content-42 .content-43 .col-md-6 a,
.content-42 .content-43 .col-sm-12 a {
	text-decoration: none;
}
.content-42 .content-43 .col-md-6.col-sm-12 img:first-child {
	width: 100%;
	height: 350px;
	object-fit: cover;
}
.descrip-4 {
	background: #000000;
	color: #fff;
	min-height: 10px;
	width: 100%;
	text-decoration: none;
	padding: 20px 0px !important;
}
.descrip-4 .descrip-update {
	min-height: 67px;
}
.descrip-4 .descrip-update h3 {
	font-size: 24px;
	font-family: "Roboto";
	margin-top: 10px;
	font-weight: 100;
	line-height: 1.1;
	letter-spacing: 0;
	color: #ffff;
	max-width: 350px;
}
.descrip-4 label {
	font-size: 13px;
	font-weight: 100;
	line-height: 1.1;
	letter-spacing: 0;
}

/* ===== exclusive ===== */
.exclusive {
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.exclusive-1 a.btn {
	color: #fff;
	border: 1px solid #ef9600;
	background: #ef9600;
	padding: 12px 52px;
	border-radius: 0;
}
.exclusive-1 a.btn:hover {
	color: #ef9600;
	border: 1px solid #ef9600;
	background: transparent;
}
.exclusive-1 button.original-page {
	color: #ef9600;
	border: 1px solid #ef9600;
	background: transparent;
	padding: 12px 52px;
}
.exclusive-1 button.original-page:hover {
	color: #fff;
	background: #ef9600 !important;
}
.exclusive-1 .exclusive-2 {
	max-width: 600px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 12pt;
	line-height: 1.3;
}

.exclusive .header {
	padding: 0 !important;
	margin: 20px 0 !important;
}
.exclusive .header:last-child {
	margin-bottom: 0 !important;
}

/* ===== Section 1 ===== */
.section-1 {
	margin: 20px 45px 20px 45px;
	color: #fff;
	font-family: "Roboto";
	color: #fff;
	min-height: 75px;
	min-height: 100px;
	padding: 20px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.section-1-contact {
	margin: 20px 40px;
	color: #fff;
	font-family: "Roboto";
	color: #fff;
	min-height: 75px;
	min-height: 100px;
	padding: 20px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.content-11 {
	padding: 20px;
}
.content-11.custom {
	text-align: left;
}
.content-11 h1 {
	max-width: 100%;
	margin-top: 20px;
	letter-spacing: 0;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 32px;
	line-height: 40px;
}
.content-11 h2 {
	max-width: 750px;
	padding: 15px 0px 46px;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: 0;
}
.content-11 h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;

	text-align: center;
	max-width: 750px;
	letter-spacing: 0;
	margin-top: 10px;
	margin-bottom: 0px;
}
.content-11 h4 {
	max-width: 100%;
	font-family: "Arial";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #445073;
	margin: 0px;
}
.content-11 p {
	max-width: 100%;
	font-size: 16px;
	letter-spacing: 0;
	font-family: "Arial";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;

	text-align: center;

	/* color: #ffffff; */
	/* margin-top: 10px; */
}
.content-11 .row {
	max-width: 1000px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 0 0 50px;
	font-size: 14px;
	line-height: 1.3;
	margin-left: 15px;
	margin-right: 15px;
}
.content-11 a img {
	margin-left: 5px;
}

/* ===== Section 2 ===== */
.section-2 {
	color: #fff;
	background: #000;
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
}
/*   */
.content-21 .descrip {
	max-width: 600px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #ffffff;
	margin-bottom: 40px;
	font-size: 12pt;
	line-height: 1.3;
}
.content-22 {
	margin: 0;
}
.red {
	background: #f80008;
}
.grey {
	background: #adb0b2;
	color: #ffffff !important;
}
.pink {
	background: #f50072;
}
.white {
	background: #ffffff;
}
.green {
	background: #00b93a;
}
.yellow {
	background: #fff200;
}
.content-22 .content-23 {
	color: #000;
	width: 100%;
	min-height: 100px;
	font-family: "Roboto";
	padding: 20px;
	margin: 0;
}
.content-22 .content-23 .col-md-6,
.content-22 .content-23 .col-sm-12 {
	position: relative;
	margin: 0;
	padding: 0;
	height: 350px;
}
.content-22 .content-23 .col-md-6.col-sm-12 img:first-child {
	width: 100%;
	height: 350px;
	object-fit: cover;
}
.content-22 .content-23 .col-md-6.col-sm-12 img:last-child {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
.content-22 .descrip-update {
	font-size: 26px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	padding: 0 20px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	max-width: 400px;
}
.content-22 .descrip-update .wildan {
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: 0.7px;
	max-width: 400px;
}
.content-22 .descrip-update .name {
	font-size: 13px;
	margin-top: 20px;
	padding: 0 20px;
}
.content-22 .col-md-6.col-sm-12 .date,
.content-22 .col-md-6.col-sm-12 .tag {
	position: absolute;
	padding: 0 20px;
}
.content-22 .col-md-6.col-sm-12 .date {
	top: 25px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
}
.content-22 .col-md-6.col-sm-12 .tag {
	bottom: -10px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
}
a.more {
	color: #fff;
	text-decoration: none !important;
	margin-top: 35px;
	display: inline-block;
	font-weight: lighter !important;
}
a.more2 {
	color: #fff;
	text-decoration: none !important;
	margin-top: 0px;
	display: inline-block;
	font-weight: lighter !important;
}
a.more-black {
	color: #000 !important;
	margin-top: 0 !important;
}

/* ===== unfold ===== */
.unfold {
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.unfold-1 a.btn {
	color: #fff;
	border: 1px solid #004ea8;
	background: #004ea8;
	padding: 12px 52px;
	border-radius: 0;
}
.unfold-1 a.btn:hover {
	color: #004ea8;
	border: 1px solid #004ea8;
	background: transparent;
}
.unfold-1 button.original-page {
	color: #004ea8;
	border: 1px solid #004ea8;
	background: transparent;
	padding: 12px 52px;
}
.unfold-1 button.original-page:hover {
	color: #fff;
	background: #004ea8 !important;
}
.unfold-1 {
	max-width: 600px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 12pt;
	line-height: 1.3;
}

.unfold-2 {
	max-width: 600px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 14pt;
	line-height: 1.5;
}

.unfold .header {
	padding: 0 !important;
	margin: 20px 0 !important;
}
.unfold .header:last-child {
	margin-bottom: 0 !important;
}

/* ===== stories ===== */
.stories {
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.stories-1 a.btn {
	color: #fff;
	border: 1px solid #ef0048;
	background: #ef0048;
	padding: 12px 52px;
	border-radius: 0;
}
.stories-1 a.btn:hover {
	color: #ef0048;
	border: 1px solid #ef0048;
	background: transparent;
}
.stories-1 button.original-page {
	color: #ef0048;
	border: 1px solid #ef0048;
	background: transparent;
	padding: 12px 52px;
}
.stories-1 button.original-page:hover {
	color: #fff;
	background: #ef0048 !important;
}
.stories-1 .stories-2 {
	max-width: 600px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 12pt;
	line-height: 1.3;
}

.stories .header {
	padding: 0 !important;
	margin: 20px 0 !important;
}
.stories .header:last-child {
	margin-bottom: 0 !important;
}

/* ===== Section 3 ===== */
.section-3 {
	/* background: #fff; */
	color: #000;
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}

.section-3b {
	color: #000;
	min-height: 100px;
	font-family: "Roboto";
	padding-top: 40px;
	text-align: center;
	margin-top: -25px;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}

.content-31 a.btn {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
	border-radius: 0;
}
.content-31 a.btn:hover {
	color: #00b93a;
	background: transparent;
}
.content-31 button.original-page {
	color: #00b93a;
	border: 1px solid #00b93a;
	background: transparent;
	padding: 12px 52px;
}
.content-31 button.original-page:hover {
	color: #fff;
	background: #00b93a !important;
}
.content-31 .content-32 {
	max-width: 600px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 12pt;
	line-height: 1.3;
}
.section-3 .header {
	padding: 0 !important;
	margin: 40px 0 !important;
}
.section-3 .header:last-child {
	margin-bottom: 0 !important;
}

/* ===== original ===== */
.original {
	background: #fff;
	color: #000;
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}
.original-1 a.btn {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
	border-radius: 15px;
}
.original-1 a.btn:hover {
	color: #00b93a;
	background: transparent;
}
.original-1 button.original-page {
	color: #00b93a;
	border: 1px solid #00b93a;
	background: transparent;
	padding: 12px 52px;
}
.original-1 button.original-page:hover {
	color: #fff;
	background: #00b93a !important;
}
.original-1 .original-2 {
	max-width: 600px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	font-size: 12pt;
	line-height: 1.3;
}

.original .header {
	padding: 0 !important;
	margin: 20px 0 !important;
}
.original .header:last-child {
	margin-bottom: 0 !important;
}

/* ===== Footer ===== */
.footer-logo .row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: 5x;
	margin-left: 5px;
}

.footer {
	background: #000;
	color: #fff;
	min-height: 100px;
	font-family: "Roboto";
	padding: 30px;
}

.footer .foot-link ul.socmed {
	padding: 0;
	margin: 30px 40px 40px;
}
.footer .foot-link ul.socmed li {
	list-style: none;
	display: inline-block;
}

.footer .descrip {
	max-width: 750px;
	padding: 20px 30px 30px;
}
.footer .foot-link .col-md-4 {
	position: relative;
	height: 50px;
}
.footer .foot-link .col-md-4:first-child img {
	left: 0;
	transform: translate(0%, -50%);
	padding-left: 20px;
}
.footer .foot-link .col-md-4 img,
.footer .foot-link .col-md-4 ul {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
.footer .foot-link .col-md-4 ul {
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
	font-size: 14px;
	width: 100%;
}
.footer .foot-link .col-md-4 ul li {
	display: inline-block;
	margin: 0 15px;
}
.footer .foot-link .col-md-4 ul li:last-child {
	margin-right: 0;
}
.footer .foot-link .col-md-4 ul li a {
	color: #fff;
	text-decoration: none;
}
.footer .foot-link .col-md-4:first-child {
	text-align: left;
	text-align: -webkit-left;
	text-align: -moz-left;
	text-align: -o-left;
}
.footer .foot-link .col-md-4:last-child {
	text-align: right;
	text-align: -webkit-right;
	text-align: -moz-right;
	text-align: -o-right;
}

/* Update Page */
.header.on-update {
	background: #000;
	margin-bottom: 0;
}
.header.on-update,
.header.on-update .head-content label {
	color: #00a6df;
}

/* Series Page */
.header.on-series {
	margin-bottom: 0;
}
.mw-900 {
	/* max-width: 600px;
	font-family: "Arial";
	font-weight: 400;
	letter-spacing: 0;
	padding: 40px 0 0;
	padding-top: 90px;
	color: #000;
	margin-bottom: 40px;
	font-size: 16px;
	line-height: 24px;
	text-align: justify; */
	text-align: justify;
	font-family: "Arial";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	/* max-width: 730px; */
	padding-left: 50px;
}

.title h2 {
	max-width: 850px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	margin-bottom: 40px;
	font-size: 36pt;
	text-align: center;
}

.summary h4 {
	max-width: 600px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0;
	padding: 40px 0 0;
	color: #000000;
	margin-bottom: 40px;
	font-size: 16pt;
	text-align: justify;
}

/* Detail Page */
.header.on-detail {
	/*background: #000;*/
	margin-bottom: 0;
	margin-top: 20px;
}
.detail-artikel {
	/*background: #000;*/
	margin: auto !important;
	padding: 40px;
	padding-bottom: 0px;
	padding-top: 100px;
	width: 650px;
}
.detail-artikel .on-detail {
	width: 100%;
}
.detail-artikel .on-detail h1,
.detail-artikel .on-detail h2,
.detail-artikel .on-detail h3,
.detail-artikel .on-detail h4,
.detail-artikel .on-detail h5,
.detail-artikel .on-detail h6 .detail-artikel .on-detail label {
	/*color: #00a6df;*/
	font-size: 36px;
	font-weight: 100;
	line-height: 1.1;
	letter-spacing: 0;
	max-width: 650px;
	margin: 50px 20px 20px;
	font-family: Roboto;
}
.detail-artikel .on-detail label {
	margin-bottom: 0px;
	font-size: 16px;
	/* margin-top: 164px; */
}
.detail-artikel .on-detail label:last-child {
	/*margin-bottom: 20px;*/
	/*margin-top: 40px;*/
	font-size: 16px;
	font-weight: 100;
	font-family: Roboto;
}
.detail-artikel .on-detail p {
	/*color: #fff;*/
	font-family: "Roboto";
	text-align: justify;
	text-align: -webkit-justify;
	text-align: -moz-justify;
	text-align: -o-justify;
	padding: 20px 0;
	/* font-weight: 100; */
	font-family: Roboto;
	font-size: 16px;
	/*line-height: 22px;*/
	letter-spacing: 0;
	max-width: 650px;
	margin-bottom: 0;
	padding-top: 10px;
}
.detail-artikel .on-detail h1,
.detail-artikel .on-detail h2,
.detail-artikel .on-detail h3,
.detail-artikel .on-detail h4,
.detail-artikel .on-detail h5,
.detail-artikel .on-detail h6 {
	text-align: -webkit-auto;
	margin: 55px 20px 30px;
}
.detail-artikel .on-detail ul {
	text-align: left;
	width: 100%;
	max-width: 700px;
	font-family: "Roboto";
	margin: 10px 0 15px;
	padding-left: 15px;
	/* 
  margin-bottom: 25px; */
}
.detail-artikel .on-detail a.btn {
	color: #fff;
	border: 1px solid #fff;
	background: transparent !important;
	padding: 11px 0px;
	border-radius: 0;
}

.detail-artikel .on-detail a.btn:hover {
	color: #000;
	background: #fff !important;
}

/* Info Page */
.section-1.on-info h2 {
	text-align: left;
	text-align: -webkit-left;
	text-align: -moz-left;
	text-align: -o-left;
}
.footer.on-info {
	background: #0054a9 !important;
}
.footer.on-info .descrip {
	padding: 20px 40px 20px;
}
.foot-info {
	background: #fff;
	padding: 50px 20px !important;
	min-height: 100px;
}
.foot-info img.bi-logo {
	margin-bottom: 30px;
}
.foot-info ul {
	padding: 0;
	list-style: none;
	width: 100%;
	margin: 25px 0;
}
.foot-info ul li {
	margin: 15px;
	display: inline-block;
}
.foot-info ul li img {
	width: 80%;
	height: auto;
}
.foot-info ul.data li {
	margin: 19px;
}
.foot-info p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	/* or 150% */

	text-align: center;

	/* Black */

	color: #000000;

	/* Inside auto layout */

	flex: none;
	order: 4;
	flex-grow: 0;
}
.footer-link {
	list-style: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
.footer-link li {
	display: inline-block;
	margin: 0 12.5px;
}
.footer-link li a {
	color: #fff;
	text-decoration: none;
}

/* Comming soon page */
body.csoon {
	background: #333099;
	color: #ffffff !important;
}
.csson-content {
	max-width: 734px;
	width: 100%;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
.csson-content form {
	text-align: left;
}
.csson-content form input {
	width: 75%;
	display: inline-block;
	float: left;
	border-radius: 0 !important;
	border: 0;
	height: 40px;
}
.csson-content form button {
	width: 25%;
	display: inline-block;
	float: left;
	border-radius: 0 !important;
	border: 1px solid #ff3300;
	height: 40px;
	background: #ff3300;
}
.csson-content form button:hover {
	border-radius: 0 !important;
	border: 1px solid #ff3300;
	height: 40px;
	background: #ff3300 !important;
}
.csson-content h2 {
	padding: 40px 0;
}
.csson-content label {
	padding-bottom: 40px;
}
.csson-content img:last-child {
	margin-top: 75px;
}

/* New */
.new-navbar.active {
	color: #0a0a0a !important;
	font-weight: bold !important;
}

.green-original.active {
	color: #00b93a !important;
	border-bottom: 3px solid #00b93a;
}
.red-unfold.active {
	color: #004ea8 !important;
	border-bottom: 3px solid #004ea8;
}
.red-extras.active {
	color: #8711fd !important;
	border-bottom: 3px solid #8711fd;
}
.blue-exclusives.active {
	color: #ef9600 !important;
	border-bottom: 3px solid #ef9600;
}
.yellow-stories.active {
	color: #ef0000 !important;
	/* color: yellow !important; */
	border-bottom: 3px solid #ef0000;
}
/* .biru-about.active {
	color: #0854a9 !important;
	border-bottom: 3px solid #0054a9;
} */
.next-page div a img {
	width: 100%;
	border-radius: 10px;
	height: 169px;
	object-fit: fill;
	margin-bottom: 10px;
}
/* .next-page div a img:hover {
	
	border-bottom: 3px solid grey;
} */
/* .descrip-5 img {
	width: 40px !important;
	height: 40px !important;
	object-fit: unset !important;
	border-radius: 8px !important;
} */
.next-page {
	margin: 15px -15px;
}
.next-page.black a {
	color: #fff;
	text-decoration: none;
}
.descrip-search {
	text-align: left;
}

.descrip-5 {
	text-align: initial;
}

.descrip-5 h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;

	/* identical to box height */

	display: flex;
	align-items: center;
	/* text-transform: uppercase; */

	color: #3d3d3d;
}

.descrip-5 a {
	text-decoration: none;
}
.descrip-5 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color: #989898;
}
.descrip-5 .descrip-51 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color: #9e9ea7;
}
.next-page .col-md-3,
.next-page .col-sm-12 {
	margin: 0 0 20px;
}
.exclusives a.btn {
	color: #ffffff;
	border: 1px solid#00B93A;
	background: #00b93a;
	padding: 12px 52px;
	border-radius: 0;
}
.exclusives a.btn:hover {
	color: #00b93a;
	border: 1px solid#00B93A;
	background: transparent;
	padding: 12px 52px;
	border-radius: 0;
}
.exclusives .next-page {
	margin-bottom: 0;
}
.content-21 a.unfold-page {
	color: #ffffff;
	border: 1px solid#00B93A;
	background: #00b93a;
	padding: 12px 52px;
	border-radius: 0;
}
.content-21 a.unfold-page:hover {
	color: #00b93a;
	border: 1px solid#00B93A;
	background: transparent;
	padding: 12px 52px;
	border-radius: 0;
}
.content-21 a.unfold-page-back {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
}
.content-21 a.unfold-page-back:hover {
	color: #00b93a;
	background: transparent !important;
	border: 1px solid#00B93A;
}
.next-page-bg {
	background: #fff;
	margin-top: -40px;
}
.content-21 a.original-page {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
}
.content-21 a.original-page:hover {
	color: #00b93a;
	background: transparent !important;
}
.next-page-bg h3,
.next-page-bg p {
	color: #000;
}
.header.on-exclusive {
	background: #fff;
	margin-bottom: 0;
}
.header.on-exclusive,
.header.on-exclusive .head-content label {
	color: #00a6df;
}
/* modal image */
#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

#myImg:hover {
	opacity: 0.7;
}

/* The Modal (background) */
.modal-extras {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
	margin: auto;
	display: block;
	width: 80%;
	cursor: pointer;

	max-width: 700px;
}

/* Caption of Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}

@keyframes zoom {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

/* The Close Button */
.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
.close {
	float: right;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 0;
	color: white;
	text-shadow: 0 1px 0 #fff;
	opacity: 1.5;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
	.modal-content {
		width: 100%;
	}
}
/* modal close */
.line {
	border: 0;
	border-top: 2px solid #ffffff;
	/* size: 10px; */
	width: 98px;
	height: 0px;
	align-items: center;
	color: #ffffff;
	flex: none;
	order: 1;
	flex-grow: 0;
	margin: 0px;
}
.partner-bg {
	/* background: #fff200 !important; */
	/* margin: 20px; */
	background-image: url("../images/partner-bg.png");
	background-repeat: no-repeat;
	border-radius: 10px;
	height: 250px;
	/* width: 100%; */
	/* color: #000 !important; */
}
.partner-with-us div.row div.col h4 {
	height: 70px;
	font-family: "Roboto";
}
.partner h3 {
	font-size: 25px;
	font-family: "Roboto";
}
.partner p {
	max-width: 750px;
	font-family: "nimbus-reg";
	font-weight: 100;
	letter-spacing: 0;
	padding: 20px 0;
	font-size: 16px;
	line-height: 1.3;
}
/* .section-contact { */
/* padding: 40px; */
/* } */
.section-contact form {
	width: 100%;
	max-width: 521px;
	margin: 0 auto;
}
.section-contact textarea {
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	padding: 10px;
	width: 100%;
}
.section-contact input,
.section-contact textarea {
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	border: 1px solid #000;
}
.section-contact form button {
	width: 100%;
	background: #0b57a7;
	font-family: "Roboto";
	border: 4px solid #0b57a7;

	height: 40px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 10px 16px;
	gap: 10px;
}
.section-contact form button:hover {
	background: #ffffff;
	color: #0b57a7;
	border: 1px solid #0b57a7;
}
.section-contact h2 {
	width: 100%;
	/* margin-bottom: 40px; */
}
.section-contact input {
	padding: 26px 12px;
	margin-bottom: 10px;
	font-family: "Roboto";
	border: 1px solid #000;
}
.section-contact .form-check {
	margin: 18px 0;
	padding-left: 20px;
}
.career-bg {
	color: #000 !important;
	border-radius: 10px;
	background-image: url("../images/career-bg1.png");
	/* width: 1350px; */
	height: 330px;
	background-repeat: no-repeat;
	align-items: center;

	/* color: #fff; */
	min-height: 75px;
	font-family: "Roboto";
}
.line2 {
	border: 0;
	border-top: 2px solid #000000;
	/* size: 10px; */
	width: 98px;
	height: 0px;
	align-items: center;
	color: #000000;
	flex: none;
	order: 1;
	flex-grow: 0;
	margin: 0px;
	margin-bottom: 10px;
}
.career-bg2 {
	color: #000 !important;
	border-radius: 10px;
	background-image: url("../images/career-bg2.png");
	/* width: 1350px; */
	height: 200px;
	background-repeat: no-repeat;
	align-items: center;

	color: #fff;
	min-height: 75px;
	font-family: "Roboto";
}
.career-page .posisi-btn {
	color: #fff200;
	border: 1px solid #fff200;
	background: transparent;
	padding: 12px 52px;
	border-radius: 0;
}
.career-page .posisi-btn:hover {
	color: #000;
	background: #fff200 !important;
}
.career-page .descrip {
	max-width: 750px;
	padding: 40px 0;
}
.section-contact form .form-row .resume {
	position: relative;
	height: 54px;
	margin-bottom: 15px;
	/* padding: 0; */
}

.input-inject {
	color: transparent;
	width: 100%;
	padding: 0 !important;
	height: 54px;
	border: 1px solid #000;
	border-radius: 0.25rem;
}
.input-inject::-webkit-file-upload-button {
	visibility: hidden;
}
.input-inject::before {
	content: attr(data-content);
	color: black;
	display: block;
	background: #fff;
	font-family: "Roboto";
	font-size: 17px;
	/* border: 1px solid #000; */
	/* border-radius: .25rem; */
	padding: 13.5px 15px;
	outline: none;
	white-space: nowrap;
	-webkit-user-select: none;
	cursor: pointer;
}
.input-inject.port::before {
	content: attr(data-content-port);
}
.input-inject::after {
	content: url(../images/icon/attach.svg);
	width: 37px;
	height: 46px;
	display: inline-block;
	position: absolute;
	top: 5px;
	right: 11px;
}
.input-inject:hover::before {
	border-color: black;
}
.input-inject:active {
	outline: 0;
}
.input-inject:active::before {
	background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
.accordion {
	color: #000;
	width: 100%;
}
.posisi-btn-2 {
	color: #000;
	border: 1px solid #fff200;
	background: #fff200;
	padding: 12px 52px;
	border-radius: 0;
}
.posisi-btn-2:hover {
	color: #000;
	background: transparent !important;
	border: 1px solid #000;
}
.accordion ul {
	text-align: left;
	width: 100%;
	max-width: 700px;
	list-style: decimal;
	font-family: "Roboto";
	margin: 25px 0 50px;
}
.card-body span {
	font-weight: bold;
	color: #5f249f;
}
.card {
	margin-bottom: 25px !important;
	border-radius: 0 !important;
}
.card-body {
	padding: 20px 20px 40px !important;
}
.card-header {
	background-color: rgba(255, 255, 255, 1) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 25px 20px 30px;
}
.accordion .btn-link {
	color: #000;
	text-decoration: none !important;
	font-size: 14px;
}
.accordion .card .card-header span {
	font-size: 15px;
}
.title-kerja {
	font-size: 1.75rem !important;
	cursor: pointer;
}
.accordion .card .card-header h3 {
	padding: 35px 20px;
	text-transform: uppercase;
}
.contact-bg {
	background: #fff !important;
	color: #000 !important;
}
/* .content-contact { */
/* padding: 40px; */
/* } */
.content-contact h2 {
	max-width: 800px;
	padding: 50px 0 75px;
}
.content-contact .row {
	max-width: 992px;
	font-family: "Roboto";
	font-weight: 100;
	letter-spacing: 0.5px;
	padding: 0 0 50px;
}
.content-contact ul.socmed {
	padding: 0;
	margin: 30px 0px 40px;
}
.content-contact ul.socmed li {
	list-style: none;
	display: inline-block;
}
/* .content-contact .section-contact { */
/* padding: 0 40px; */
/* } */
.content-contact .section-contact h2 {
	max-width: 800px;
	padding: 0 0 75px;
}
.contact-phone span {
	display: inline-block;
	margin-left: 10px;
}
.contact-phone span:last-child {
	margin-left: 15px;
}
.content-contact .right-text .left-text {
	display: inline-block;
}
.content-contact .section-contact input,
.content-contact .section-contact textarea {
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 5px;
	color: #000000;
}
.content-contact .section-contact form button {
	background: #0b57a7;
	color: #ffff;
	height: 40px;
	border-radius: 5px;
}
.content-contact .section-contact form button:hover {
	background: #ffffff;
	color: #0b57a7;
	border: 1px solid #0b57a7;
}
p.email:before {
	content: "";
	display: block;
	background: url("../images/mail.png") no-repeat;
	width: 20px;
	height: 16px;
	float: left;
	/* margin: 0 6px 0 0; */
}
p.phone:before {
	content: "";
	display: block;
	background: url("../images/phone.png") no-repeat;
	width: 16px;
	height: 16px;
	float: left;
	/* margin: 0 6px 0 0; */
}
maps a img {
	width: 400px;
	height: 230px;
}

/* Static Page */
.static-page {
	padding: 40px 40px 60px 40px;
	max-width: 82%;
	margin: auto;
}
.static-page li {
	font-family: "Arial";
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: justify;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 15px;
	color: #000000;
}
.static-page h1 {
	font-size: 32pt;
	font-family: "Roboto";
	font-weight: 100;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
	margin: 80px auto;
	padding: 0 20px;
	text-align: center !important;
	text-align: -webkit-center !important;
	text-align: -moz-center !important;
	text-align: -o-center !important;
}
.static-page h2.first {
	margin: 80px auto;
	font-size: 12pt;
	font-family: "Roboto";
	font-weight: 100;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	letter-spacing: 0;
	line-height: 1.2;
	color: #000;
	max-width: 650px;
}
.static-page h2 {
	font-size: 18pt;
	font-family: "Roboto";
	font-weight: 100;
	margin: 20px auto;
	padding: 0 20px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	letter-spacing: 0;
	line-height: 1.2;
	color: #000;
	max-width: 650px;
}

.static-page h3 {
	font-size: 12pt;
	font-family: "Roboto";
	font-weight: 100;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	letter-spacing: 0;
	line-height: 1.2;
	color: #000;
	max-width: 650px;
	margin-bottom: 80px;
}
.static-page h4 {
	font-size: 32px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	line-height: 40px;
	letter-spacing: 0;
	color: #000000;
	margin: 0 auto;
	padding: 0;
	text-align: center !important;
	text-align: -webkit-center !important;
	text-align: -moz-center !important;
	text-align: -o-center !important;
}
.static-page h5 {
	font-size: 24px;
	line-height: 30px;
	font-family: "Roboto";
	font-weight: 514;
	margin: 20px auto;

	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	letter-spacing: 0;
	color: #445073;
	max-width: 100%;
}

.static-page h5.first {
	margin: 0auto;
	font-weight: 400;
	font-size: 16px;
	font-family: "Arial";
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	letter-spacing: 0;
	line-height: 24px;
	color: #000;
	max-width: 100%;
}

.static-page p {
	font-family: "Arial";
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: justify;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 15px;
	color: #000000;
}
.static-page p.p-second {
	font-family: "nimbus-reg";
	font-size: 13pt;
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 5px;
	padding-left: 13px;
	font-weight: 100;
	color: #000;
	letter-spacing: 0;
}

.persegi {
	width: 50px;
	height: 5px;
	margin: 0 auto;
	background: #000000;
}
.persegi2 {
	width: 50px;
	margin: 0 auto;
	height: 8px;

	background: linear-gradient(270deg, rgba(255, 45, 45, 0.9) 0%, #0261b9 100%);
	border-radius: 10px;
}

.persegi3 {
	width: 50px;
	margin: 0 auto;
	height: 8px;

	background: linear-gradient(270deg, rgba(45, 255, 104, 0.9) 0%, #0261b9 100%);
	border-radius: 10px;
}

.persegi4 {
	width: 50px;
	margin: 0 auto;
	height: 8px;
	border-radius: 10px;
	background: linear-gradient(270deg, rgba(255, 45, 171, 0.9) 0%, #5e02b9 100%);
}

.collaborate p {
	max-width: 650px;
	font-family: "Roboto";
	font-style: normal;
	/* font-weight: 700; */
	font-size: 25px;
	line-height: 29px;
	text-align: center;
	margin: 0 auto;
	/* Neutral/Black */

	color: #000000;
}

.contact-form {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 30px;
	line-height: 35px;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;

	/* Neutral/Black */

	color: #000000;
}

.footer.on-static {
	padding-top: 10px;
}
.on-static .footer-link li {
	margin: 0 25px;
}
.on-static .footer-link li ul.socmed li {
	margin: 0 5px;
}
.on-static .footer-link li ul.socmed {
	padding: 0;
	margin: 30px 0 40px;
}
.static-page ul.ul-first {
	font-family: "nimbus-reg";
	font-size: 20px;
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 40px;
	padding-left: 20px;
	list-style: none;
	counter-reset: my-awesome-counter;
}
.static-page ul.ul-first li h2 {
	counter-increment: my-awesome-counter;
	/*padding-left: 0;*/
	/*margin-left: -7px !important;*/
	text-align: center;
}
.static-page ul.ul-first li h2::before {
	content: counter(my-awesome-counter) ". ";
	color: #000;
	font-weight: bold;
	margin-right: 5px;
}
.static-page ul.ul-first h2 {
	font-size: 25px;
	font-family: "Roboto";
	font-weight: 900;
	margin: 20px auto;
	padding: 0 20px;
	text-align: center;
	/*text-align: -webkit-left;
  text-align: -moz-left;
  text-align: -o-left;*/
}

.static-page ul.ul-second {
	list-style: upper-alpha;
	padding-left: 35px;
}
.static-page ul.ul-second li {
	padding-left: 25px;
	margin-bottom: 25px;
	font-size: 13pt;
}
.static-page ul.ul-third {
	list-style: decimal;
	padding-left: 20px;
	margin-top: 20px;
}
.static-page ul.ul-third li {
	margin-bottom: 15px;
	padding-left: 10px;
}
.sign-pers {
	font-family: "Arial";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: #000000;
	margin-left: 20px;
	margin-top: 50px;
	text-align: center;
}
.content-21 a.exclusive-page {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 12px 52px;
}
.content-21 a.exclusive-page:hover {
	color: #00b93a;
	border: 1px solid #00b93a;
	background: transparent !important;
}

.link-black {
	color: #000;
	text-decoration: none !important;
}
.link-white {
	color: #fff;
	text-decoration: none !important;
}
#recent {
	padding: 0;
	max-width: 750px;
	margin: 0 auto !important;
}
/* ul.pagination {
	margin: 20px auto;
}
ul.pagination li {
	margin: 0 5px;
	background: #000;
	padding: 7px 14px;
}
ul.pagination li:hover {
	background: #666;
	cursor: pointer;
}
ul.pagination li.active {
	background: #fff;
	border: 1px solid #000;
}
ul.pagination li.active a {
	color: #000;
}
ul.pagination li a {
	color: #fff;
	text-decoration: none;
} */
.nav-link {
	display: inline;
	padding: 0.5rem 1rem;
}

a.nav-link.green-original:hover {
	color: #00bb3a !important;
	border-bottom: 3px solid #00bb3a;
}
a.nav-link.blue-exclusives:hover {
	color: #ef9600 !important;
	border-bottom: 3px solid #ef9600;
}
a.nav-link.red-unfold:hover {
	color: #004ea8 !important;
	border-bottom: 3px solid #004ea8;
}
a.nav-link.red-extras:hover {
	color: #8711fd !important;
	border-bottom: 3px solid #8711fd;
}
a.nav-link.yellow-stories:hover {
	color: #a80000 !important;
	border-bottom: 3px solid #a80000;
}
/* a.nav-link.biru-about:hover {
	color: #0854a9 !important;
	border-bottom: 3px solid #0054a9;
} */

.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-right: 10px;
}
.underline-on-hover:hover {
	text-decoration: underline;
}

.navbar-collapse.custom {
	text-align: center;
}

.navbar-nav.socmed {
	flex-direction: row;
	justify-content: center;
}

.navbar.navbar-expand-lg .navbar-nav.custom {
	margin-left: 3rem !important;
}

.navbar-dark .navbar-toggler {
	border-color: #ffffff;
}

.wrapper__collapse .navbar-nav .nav-link {
	color: #ffffff;
}

.wrapper__collapse .navbar-nav .nav-link.custom--size-large {
	font-size: 32px;
}

.wrapper__collapse .navbar-nav .nav-link.custom--size-small {
	font-size: 16px;
	padding: 2px;
}

/* .wrapper__collapse a.nav-link.red-unfold:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.blue-exclusives:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.green-original:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.yellow-stories:hover {
	color: yellow !important;
} */

.wrapper__collapse a.nav-link.red-extras:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.biru-about:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.partner-with-us:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.career:hover {
	color: yellow !important;
}

.wrapper__collapse a.nav-link.contact-us:hover {
	color: yellow !important;
}

.wrapper__collapse {
	background: #000000;
	/*margin-top: 80px;*/
	position: relative;
	z-index: 999;
}

.wrapper__collapse .collapse.navbar-collapse.custom {
	padding-bottom: 20px;
	padding-top: 35px;
}

.wrapper__collapse.hide {
	display: none;
}

.nav-item.custom--flex.collapse {
	position: absolute;
	display: flex;
	align-self: center;
	bottom: 470px;
}

.navbar-nav.socmed.custom--collapse {
	margin-top: 10px;
}

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

.shows {
	display: block !important;
}

.navbar-toggler-close {
	width: 1.5em;
	height: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper__collapse a.nav-link.nav-btm:hover {
	color: yellow !important;
}

.navbar-light .navbar-toggler {
	border-color: #ffffff;
}

.wrapper__btn {
	display: flex;
	align-items: center;
}

.label--collapse {
	padding-right: 10px;
}

/* .green-original.custom--yellow.active {
	color: yellow !important;
}

.blue-exclusives.custom--yellow.active {
	color: yellow !important;
}

.red-unfold.custom--yellow.active {
	color: yellow !important;
} */

.biru-about.custom--yellow.active {
	color: yellow !important;
}

.partner-with-us.custom--yellow.active {
	color: yellow !important;
}

.career.custom--yellow.active {
	color: yellow !important;
}

.contact-us.custom--yellow.active {
	color: yellow !important;
}

.content-11.custom h1 {
	color: #ffffff;
}

.btn.btn-unfold {
	color: #ffffff !important;
	background: #004ea8 !important;
	border: 1px solid #004ea8 !important;
}

.btn.btn-exclusive {
	color: #ffffff !important;
	background: #ef9600 !important;
	border: 1px solid #ef9600 !important;
}

.btn.btn-stories {
	color: #ffffff !important;
	background: #a80000 !important;
	border: 1px solid #a80000 !important;
}

.btn.btn-unfold:hover {
	color: #004ea8 !important;
	background: #ffffff !important;
	border: 1px solid #004ea8 !important;
}

.btn.btn-exclusive:hover {
	color: #ef9600 !important;
	background: white !important;
}

.btn.btn-stories:hover {
	color: #a80000 !important;
	background: #ffffff !important;
	border: 1px solid #a80000 !important;
}

a.link--hover:hover {
	color: yellow !important;
}

a.link--hover-blue:hover {
	color: #004ea8 !important;
}
.btn.link--hover-blue:hover {
	color: #004ea8 !important;
}

.hover-icon-play-circle {
	width: 46px;
	height: 46px;
	display: inline-block;
	position: relative;
	top: 20px;
	left: 5px;
	background: url("../images/icon/play-circle.svg");
	background-repeat: no-repeat;
}

.hover-icon-play-circle:hover {
	background: url("../images/icon/play-circle-hover.svg");
}

.hover-icon-play-circle-black {
	width: 40px;
	height: 40px;
	background: url("../images/icon/play-circle-black.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-icon-play-circle-black:hover {
	background: url("../images/icon/play-circle-hover.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-icon-play-circle-black.custom--blue:hover {
	background: url("../images/icon/play-circle-hover-blue.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.btn.btn--hover-white {
	text-transform: lowercase;
}

.btn.btn--hover-white::first-letter {
	text-transform: capitalize;
}

.btn.btn--hover-white:hover {
	color: #000000;
	background: white !important;
}

.hover-icon-arrow-right {
	display: inline-block;
	position: relative;
	top: 5px;
	width: 15px;
	height: 18px;
	background: url("../images/icon/play.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-icon-arrow-right:hover {
	background: url("../images/icon/play-hover.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-icon-arrow-down {
	display: inline-block;
	position: relative;
	top: 5px;
	width: 15px;
	height: 18px;
	background: url("../images/icon/play-down-black.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-icon-arrow-down:hover {
	background: url("../images/icon/play-down-black-hover.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.descrip-5 h3:hover {
	color: #004ea8;
}

.link-white.custom h3:hover {
	color: yellow !important;
}
.breadcrumb-detail-article {
	text-align: start;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 30px;
	padding-left: 45px;
	text-transform: uppercase;
}

.breadcrumb-detail-article a {
	color: #5d5d5d;
	text-decoration: none;
}

.breadcrumb-detail-article a:hover {
	color: #000;
}

.author-detail-article p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 19px;
	color: #989898;
}

.author-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#youtube-video-thumbnail-mobile {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 248px;
}
#youtube-video-desktop {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	width: 700px;
	height: 394px;
	left: 0px;
	top: 0px;
	right: 0px;
}

#youtube-video-mobile {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 250px;
}
.pl-0 {
	padding-left: 0px;
}
.show-more-button {
	font-family: "Roboto";
	color: #ffffff;
	box-sizing: border-box;
	text-transform: uppercase;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;
	font-size: 14px;
	font-weight: 800;
	width: 140px;
	height: 35px;
	border-radius: 20px;
	flex: none;
	order: 0;
	flex-grow: 0;
	border: 2px solid #ffffff;
}
.show-more-button:hover {
	background-color: #ffffff;
	color: #3d3d3d;
}

.gallery-link {
	display: block;
	position: relative;
}

.gallery-image {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.gallery-title-overlay {
	background: linear-gradient(360deg, #000000 3.05%, rgba(0, 0, 0, 0) 100%);
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	padding: 10px;
	transition: background-color 0.3s ease;
	border-radius: 8px;
}

.gallery-title {
	color: white;
	margin: 0;
	font-size: 16px !important;
	text-align: left;
}

.border-gallery {
	border: none;
	height: 1px;
	background-color: #ebebeb;
	margin: 5px 10px 40px 0px;
	width: 100%;
}

.sticky-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
/* .ads-container > div {
	margin-bottom: 20px !important;
} */

.ads-container > div iframe {
	margin-bottom: 20px !important;
}

.mt-15 {
	margin-top: 15px;
}
/* MEDIA QUERY */
@media only screen and (max-width: 768px) {
	ul li.nav-item {
		margin: 5px 0px 0px 0px;
	}
	.skyscrapper {
		display: none !important;
	}
	.leaderboard img {
		max-width: 100%;
		height: auto !important;
	}
	.leaderboard {
		align-items: center !important;
		padding-top: 10px;
	}
	.square img {
		max-width: 100% !important;
		height: auto !important;
	}
	.square {
		align-items: center !important;
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
	.header--fullheight {
		height: 550px;
	}
	.big-img--fullheight {
		height: 550px;
	}
	/*tambahan*/
	#closeBtnNew {
		display: none;
	}
	.wrapper__collapse {
		background: #000000;
		margin-top: 80px;
	}
	.vjs-youtube .vjs-poster {
		background-size: contain !important;
	}

	.carousel-control-prev-icon {
		margin-left: -60px;
	}

	.carousel-control-next-icon {
		margin-right: -60px;
	}
}
@media only screen and (max-width: 767px) {
	#carouselExample2 {
		display: none;
	}

	.content-about1 h1 {
		font-size: 18px !important;
	}
	.content-about2 h1 {
		font-size: 18px !important;
	}
	.detail-artikel .on-detail {
		margin-top: 250px;
	}
	.next-page div a img:hover {
		width: 330px;
	}
	.content-11 h2 {
		padding-left: 10px;
		padding-right: 10px;
	}
	.content-11 p {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*-----------------------tambahan mulai dari sini--------------------------*/
@media (min-width: 768px) {
	.next-page-stories .asd a img {
		width: 165px;
		height: 100px;
	}

	.footer .input-group {
		width: 443px;
	}
	/*STYLE MENU COLLAPSE BARU*/
	.navbar-nav {
		flex-direction: row;
		justify-content: center;
	}
	#closeBtnNew {
		position: absolute;
		top: 35px;
		right: 45px;
		margin-top: 0px;
	}
	#closeBtnNew button {
		color: white;
		font-size: 16px;
		font-family: Roboto;
	}

	#closeBtnNew span {
		margin-left: 10px;
		font-size: 18px;
	}
	.wrapper__collapse .navbar-nav .nav-link.custom--size-large {
		font-size: 36px;
	}
	ul li.nav-item {
		margin: 15px 12.5px 15px 12.5px;
	}
	ul.socmed li,
	ul.policy li {
		margin: 15px 12.5px 15px 12.5px;
	}
	.wrapper__collapse .navbar-nav .nav-link.custom--size-small {
		font-size: 16px;
		font-family: Roboto;
	}

	.more-content h3 {
		/* height: 90px; */
		font-size: 18px;
		margin-top: 2px;
	}
	.more-content .descrip-51 p {
		font-size: 16px;
	}
	#subscribeModal .modal-dialog {
		max-width: 557px;
	}
	#subscribeModal .modal-content {
		height: 240px;
	}
	.frm-subscribe {
		width: 400px !important;
	}

	/* show 3 items */
	/* show 3 items */

	.carousel-item img {
		height: 329px;
		object-fit: cover;
	}

	.extras.carousel-item img {
		/* min-height: 180px; */
		max-height: 550px;
		object-fit: cover;
		margin-top: 40px;
		cursor: pointer;
	}

	/*tanda panah di pinggir*/
	#carouselExample {
		margin-left: 50px;
		margin-right: 50px;
	}

	.carousel-control-prev-icon {
		margin-left: -40px;
	}

	.carousel-control-next-icon {
		margin-right: -40px;
	}

	#carouselExample {
		display: none;
	}
	/*.carousel-item-next, .carousel-item-prev, .carousel-item.active{
    display: inline-flex;
  }*/
}

.btn.btn-watch-more {
	color: #000000 !important;
	background: #ffffff !important;
	border: 1px solid #000000 !important;
	padding: 11px 30px;
	border-radius: 0;
	cursor: default !important;
}

.btn.btn-watch-more h4 {
	font-size: 16px;
	margin-bottom: 0px;
	font-family: "Roboto";
}

.btn.btn-category-detail {
	color: #000000 !important;
	background: #ffffff !important;
	border: 1px solid #000000 !important;
	padding: 11px 0px;
	border-radius: 0;
	cursor: default !important;
	width: 169px;
}

.btn.btn-category-detail h4 {
	font-size: 16px;
	margin-bottom: 0px;
	font-family: "Roboto";
}

.section-3.watch-more-section {
	/* background: #fff; */
	color: #000;
	min-height: 100px;
	font-family: "Roboto";
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
	margin-top: 35px;
	margin-bottom: 100px;
}

hr {
	margin-top: 75px;
	margin-bottom: 75px;
	border: 0;
	border-top: 0.5px solid rgba(0, 0, 0, 0.5);
}

.hr-category {
	margin-top: 0px;
}

.navigation-page-arrow {
	margin-bottom: 75px;
}

.navigation-page-arrow a {
	color: black;
}

/* .vjs-youtube .vjs-poster {
	background-size: 100% 100% !important;
} */

/*.carousel-item{
    margin-right: 0;
}*/
.carousel-indicators {
	bottom: -50px;
}
.carousel-indicators li {
	background-color: #ccc;
}
.carousel-inner {
	margin-bottom: 0px;
}
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
	filter: invert(100%);
}

.carousel-item h3 {
	font-size: 25px;
	text-transform: uppercase;
	padding-top: 15px;
	max-width: 270px;
}

.carousel-item h3 a {
	color: black;
	text-transform: none;
}

.carousel-item h3 a:hover {
	color: #004ea8;
	text-decoration: none;
}

.menu-font {
	font-family: "Roboto";
}

/* modal subs */
.container {
	padding: 1rem 0rem;
}

.modal-header {
	.close {
		margin-top: -1.5rem;
	}
}

.form-title {
	margin: -2rem 0rem 2rem;
}

.subscribe-form {
	margin: 0rem 0rem 1rem;
}

.form-title h2 {
	margin: 0;
	max-width: 700px;
	font-size: 36px;
	line-height: 1.5;
	letter-spacing: 0;
}

.form-title h4 {
	margin: 0;
	max-width: 700px;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	padding-left: 50px;
	padding-right: 50px;
}

.sr-only {
	font-family: "Roboto";
	height: 24px;
	width: 320px;
}

.header-img {
	height: 450px;
	width: 850px;
	position: relative;
	padding: 0 0;
	margin-bottom: 40px;
	font-family: "Roboto";
}

.img-img {
	height: 450px;
	width: 850px;
}
.img-img:after {
	content: "\A";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

/*
nanti sesuaiin sama tinggi title nya biar sama panjang*/
.carousel-control-next,
.carousel-control-prev {
	width: 100px;
	bottom: 25%;
}

.more-section {
	/* padding-top: 75px; */
	padding-bottom: 0;
}
.more-section .content-21 {
	padding-bottom: 0px;
}
.more-section .content-21 .next-page {
	margin-top: 35px;
	margin-bottom: 20px;
}
.more-section .content-32 {
	padding-top: 0px;
}
.more-section .mw-900 {
	padding-top: 28px;
	font-size: 14px;
}
/*Tambahan Style Footer*/
.footer h3 {
	font-size: 25px;
}
.footer h4 {
	margin-top: 22px;
	font-size: 16px;
}
.footer .subscribe-section {
	margin-top: 35px;
	margin-bottom: 60px;
}
.footer .input-group input {
	border-radius: 0;
}
.footer .input-group .input-group-append i {
	font-size: 22px;
	color: black;
	background-color: white;
	padding: 8px;
}
.footer-logo-bi {
	width: 289px;
	height: auto;
	padding-left: 0px !important;
	margin-left: 25%;
}
.footer-logo-context {
	width: 162px;
}

.btn-home-exclusive {
	color: #fff;
	/* padding: 25px 10px; */
	border-radius: 0;
}

.btn-home-exclusive a.btn {
	color: #fff;
	border: 1px solid #ef9600;
	background: #ef9600;
	padding: 6px 15px;
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;

	position: absolute;
	width: 97px;
	height: 31px;
	left: 40%;
	/* left: calc(50% - 97px / 2 + 0.5px);
	top: calc(50% - 31px / 2 - 136px); */
}
.btn-home-exclusive a.btn:hover {
	color: #ef9600;
	border: 1px solid #ef9600;
	background: transparent;
}

.btn-home-original {
	color: #fff;
	/* padding: 25px 10px; */
	border-radius: 0;
}

.btn-home-original a.btn {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 6px 15px;
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;

	width: 87px;
	height: 31px;
	left: 40%;
	top: 0px;
}
.btn-home-original a.btn:hover {
	color: #00b93a;
	background: transparent;
}

.btn-home-original-2 {
	color: #fff;
	/* padding: 25px 10px; */
	border-radius: 0;
}

.btn-home-original-2 a.btn {
	color: #fff;
	border: 1px solid #00b93a;
	background: #00b93a;
	padding: 6px 15px;
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;

	position: absolute;
	width: 87px;
	height: 31px;
	left: 40%;
}
.btn-home-original-2 a.btn:hover {
	color: #00b93a;
	background: transparent;
}

.btn-home-unfold {
	color: #fff;
	/* padding: 25px 10px; */
	border-radius: 0;
}

.btn-home-unfold a.btn {
	color: #fff;
	border: 1px solid #004ea8;
	background: #004ea8;
	padding: 6px 15px;
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;

	position: absolute;
	width: 73px;
	height: 31px;
	left: 40%;
	/* left: calc(50% - 73px / 2 + 0.5px);
	top: calc(50% - 31px / 2 - 136px); */
}
.btn-home-unfold a.btn:hover {
	color: #004ea8;
	border: 1px solid #004ea8;
	background: transparent;
}

.btn-home-stories {
	color: #fff;
	/* padding: 25px 10px; */
	border-radius: 0;
}

.btn-home-stories a.btn {
	color: #fff;
	border: 1px solid #a80000;
	background: #a80000;
	/* padding: 12px 52px; */
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	width: 88px;
	height: 36px;
	left: 271px;
	top: 0px;
}
.btn-home-stories a.btn:hover {
	color: #a80000;
	border: 1px solid #a80000;
	background: transparent;
}

.frm-subscribe {
	margin-right: 0px !important;
	border-radius: 0;
	font-family: "Roboto";
}
.btn-subscribe {
	border-radius: 0;
	font-family: "Roboto";
}
.btn-dark:hover {
	color: black;
}
.descrip-home {
	height: 75px;
}
#btnSubscribe2 {
	border: 0px;
	padding: 0px;
}

.about-info {
	background: #fff;
	padding: 50px 20px 10px 20px !important;
	min-height: 100px;
}

.about-info ul {
	padding: 0;
	list-style: none;
	width: 100%;
	margin: 25px 0;
}
.about-info ul li {
	margin: 14px;
	display: inline-block;
}
.about-info ul li img {
	width: 80%;
	height: auto;
}
.about-info ul.data li {
	margin: 19px;
}
.about-icon ul li img {
	height: 150px;
	width: auto;
	margin: 10px;
	margin-bottom: 0px;
}
.about-icon p {
	font-family: Roboto;
	font-size: 12px;
	font-weight: 514;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	text-transform: Capitalize;
	margin-top: 5px;
}

.about-icon h1 {
	font-family: Roboto;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	line-height: 16.41px;
	letter-spacing: 0em;
	text-align: center;
	text-transform: capitalize;
	margin-top: 5px;
	margin-bottom: 2px;
	color: #ffffff;
}
.about-icon h2 {
	font-family: Roboto;
	font-size: 32px;
	font-weight: 514;
	line-height: 40px;
	letter-spacing: 0em;
	text-align: center;
}
.about-icon h3 {
	font-family: Roboto;
	font-style: normal;
	font-size: 12px;
	font-weight: 300;
	line-height: 14.06px;
	letter-spacing: 0em;
	text-align: center;

	text-transform: Capitalize;
	color: #ffffff;
}
.about-icon p {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	/* or 150% */

	text-align: center;

	/* Black */

	color: #000000;

	/* Inside auto layout */

	flex: none;
	order: 4;
	flex-grow: 0;
}
.about-icon hr {
	/* width: 1200px; */
	height: 0px;
	margin: 10px;

	border: 1px solid #afafaf;
	background-color: #afafaf;

	/* Inside auto layout */

	flex: none;
	order: 2;
	flex-grow: 0;
}
.content-about {
	padding: 40px 0px 5px;
}
.about-bg {
	/* background: #fff200 !important; */
	/* margin: 20px; */
	background-image: url("../images/about_bg.png");
	background-repeat: no-repeat;
	border-radius: 10px;
	height: 200px;
	width: 100%;
	color: #000 !important;
}
.span-about {
	color: #000;
	font-weight: normal;
}
.content-about1 h1 {
	max-width: 1000px;
	padding: 65px 0px 30px !important;
	font-family: Roboto;
	font-size: 42px;
	line-height: 1;
	letter-spacing: 0;
}
.content-about2 h1 {
	max-width: 1000px;
	padding: 30px 0px 65px !important;
	font-family: Roboto;
	font-size: 42px;
	line-height: 1;
	letter-spacing: 0;
}
.content-about3 {
	padding: 5px 0px 40px;
}

.boxname {
	padding-top: 8px;
	width: 185px;
	height: 57px;
	border-radius: 10px;
	background: #7b03f2;
}
.parent {
	position: relative;
	top: 0;
	left: 0;
}

.image1 {
	position: relative;
	top: 0;
	left: 0;
}

.image2 {
	position: absolute;
	top: 128px;
	left: 85px;
	width: 5px !important;
	height: 22px !important;
}
.hgt60 {
	height: 60px;
}
body {
	/* max-width: 1920px; */
	margin: auto;
}

nav.navbar {
	/* max-width: 1600px; */
	/* applying max-width */
	margin: -1 auto; /* center */
	.navbar-collapse {
		justify-content: center; /* center the elements in the block if there is flex */
		-webkit-justify-content: center; /* make it works on some navigators */
	}
}
.wrapper__collapse {
	max-width: 1600px;
	margin: auto;
}

.pencarian {
	display: none;
}

/*==================================================================================================================== */

.label-number {
	position: absolute;
	width: 25px;
	height: 25px;
	background: linear-gradient(180deg, #505050 0%, #000000 100%);
	border-radius: 4px;
	margin-top: 20px;
}

.label-number p {
	font-family: "Roboto";
	color: #fff;
	font-size: 12px;
	padding-left: 9px;
	padding-top: 3px;
}

.latest-label-s {
	font-family: "Roboto";
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	color: #fff;
	background: #a80000;
	border-radius: 4px;
	width: fit-content;
	margin-right: auto;
	margin-top: 10px;
}

.latest-label-o {
	font-family: "Roboto";
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	color: #fff;
	background: #00b93a;
	border-radius: 4px;
	width: fit-content;
	margin-right: auto;
	margin-top: 10px;
}

.latest-label-e {
	font-family: "Roboto";
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	color: #fff;
	background: #f1a11a;
	border-radius: 4px;
	width: fit-content;
	margin-right: auto;
	margin-top: 10px;
}

.latest-label-ext {
	font-family: "Roboto";
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	color: #fff;
	background: #8711fd;
	border-radius: 4px;
	width: fit-content;
	margin-right: auto;
	margin-top: 10px;
}
.latest-label-u {
	font-family: "Roboto";
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	color: #fff;
	background: #004ea8;
	border-radius: 4px;
	width: fit-content;
	margin-right: auto;
	margin-top: 10px;
}

.section-3 .more-label {
	text-align: start;
	margin-bottom: 30px;
}

.section-3 .more-label a {
	text-decoration: none;
}

/*panel more content category video*/

.panel h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 18px;
	line-height: 22px;
	text-transform: uppercase;

	color: #000000;
}

.panel-thumbnail img {
	border-radius: 4px;
}

/*end panel*/

.label-headline-original {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	width: 262px;
	height: 28px;
	background: #a80000;
	border-radius: 10px 10px 0px 0px;
}

.label-headline-original-2 {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	background: #004ea8;
	border-radius: 10px 10px 0px 0px;
	width: 262px;
	height: 28px;
}

.label-headline-unfold {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	background: #8711fd;
	border-radius: 10px 10px 0px 0px;
	width: 262px;
	height: 28px;
}

.label-headline-exclusives {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	width: 262px;
	background: #f1a11a;
	border-radius: 10px 10px 0px 0px;
}

.label-headline-stories {
	font-family: "Roboto Pro";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;
	position: absolute;
	width: 540px;
	height: 28px;
	background: #00b93a;
	border-radius: 10px 10px 0px 0px;
}

.tag-category {
	color: #00a6df;
}

.ukuran-video {
	width: 700px;
	/* width: 1150px; */
	height: 400px;
	border-radius: 12px !important;
	margin-bottom: 0px !important;
}
.ukuran-video-stories {
	width: 100%;
	/* width: 1150px; */
	height: 400px;
	border-radius: 12px !important;
	margin-bottom: 0px !important;
}

.video-container {
	display: grid;
}

#youtube-video {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

/* .video {
	position: relative;
} */

.descrip-headline img {
	width: 262px;
	height: 140px;
	border-radius: 10px 10px 6px 6px;
	object-fit: cover;
	/* pointer-events: none; */
}

.descrip-headline a img:hover {
	border-bottom: 3px solid grey !important;
}

.vid-l img {
	width: 280px;
	height: 160px;
	border-radius: 6px;
	object-fit: fill;
}

.vid-l a img:hover {
	border-bottom: 3px solid grey !important;
}

.descrip-s {
	display: flex;
	align-items: center;
	justify-content: center;
}

.descrip-s img {
	width: 350px;
	height: 150px;
	/* border-radius: 4px; */
}

.content-stories img {
	width: 700px;
	height: 450px;
	border-radius: 10px;
}

.stories-article-image img {
	width: 100%;
	height: 68px;
	border-radius: 4px;
}

.stories-article a {
	text-decoration: none;
}

.stories-more .artc {
	box-sizing: border-box;
	border: 1px solid #a80000;
}

/* .content-21 .content-22 .descrip-image img {
	width: 100%;
	height: 250px;
	border-radius: 4px;
} */

/* .content-latest img {
	width: 100%;
	height: 250px;
	border-radius: 4px;
} */

/* .content-latest a img:hover {
	border-bottom: 3px solid grey !important;
} */

/*button pada home page yang baru*/

.latest-1 {
	margin-top: 5px;
}

.latest .latest-sum-desc h3 {
	font-family: "Roboto";
	font-weight: 700;
	font-size: 18px;
	line-height: 23.44px;
	font-family: Roboto;
	text-align: left;
	/* text-transform: uppercase; */
	color: #3d3d3d;
	flex: none;
	order: 1;
	flex-grow: 0;
}

.latest h1:hover {
	color: #004ea8;
}

.latest a {
	text-decoration: none;
}

.latest p {
	font-family: "Roboto";
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color: #9e9ea7;
	flex: none;
	order: 2;
	flex-grow: 0;
}

.latest .latest-1 p {
	font-family: "Roboto";
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color: #9e9ea7;
	flex: none;
	order: 2;
	flex-grow: 0;
}

.latest .latest-1 .con-l .auth-l p {
	font-weight: 300;
	font-size: 14px;
	line-height: 16px;
	color: #9e9ea7;
	flex: none;
	order: 0;
	flex-grow: 0;
}

/* ul.pagination-latest {
	margin: 20px auto;
	list-style: none;
}
ul.pagination-latest li {
	margin: 0 5px;
	background: #fff;
	padding: 7px 14px;
}
ul.pagination-latest li:hover {
	background: #666;
	cursor: pointer;
}
ul.pagination-latest li.active {
	background: #666;
}
ul.pagination-latest li.active a {
	color: #fff;
}
ul.pagination-latest li a {
	color: #000;
	text-decoration: none;
} */

.pagination a {
	display: block;
	padding: 7px 14px;
}

.pagination ul.pagination li {
	padding: 0px;
}

ul.pagination {
	margin: 20px auto;
	list-style: none;
}
ul.pagination li {
	margin: 0 5px;
	background: #fff;
	padding: 7px 14px;
	border-radius: 8px;
	border: 1px solid #ebebeb; /* Border biru */
}
ul.pagination li:hover {
	background: #3d3d3d;
	cursor: pointer;
	border-radius: 8px;
}
ul.pagination li.active {
	background: #3d3d3d;
	border-radius: 8px;
}
ul.pagination li.active a {
	color: #fff;
}
ul.pagination li a {
	color: #3d3d3d;
	text-decoration: none;
}
ul.pagination li a:hover {
	color: #fff;
	cursor: pointer;
}

/*HEADLINE BARU*/

/*BIG HEADLINE (STORIES)*/
.big-headline-item a {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 36px;
	line-height: 45px;
	/* identical to box height */
	text-decoration: none;

	color: #000000;
	text-transform: uppercase;
}

.big-headline-item a:hover {
	color: #004ea8;
}

.big-headline-item p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 22px;

	color: #445073;
}

.big-headline-item .auth-s p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	color: #696969;
}

.content-big-headline img {
	width: 555px;
	border-radius: 10px 10px 14px 14px;
	object-fit: cover;
	height: 329px;
}

.content-big-headline a img:hover {
	border-bottom: 3px solid grey !important;
}

/*POPULAR*/
.popular {
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	padding-right: 0px;
}

.popular .label-popular h2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	display: flex;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;
	color: #000000;
	margin-bottom: 32px;
}

.pop-item .popular-content img {
	width: 180px;
	height: 100px;
	border-radius: 4px;
	margin-top: 20px;
	object-fit: cover;
}

.popular .pop-title h3 {
	font-family: "Roboto";
	font-weight: 514;
	font-size: 12px;
	color: #000000;
	width: 180px;
	text-align: center;
}

.pop-title h3:hover {
	color: #004ea8;
}

.pop-title a {
	text-decoration: none;
}

.popular .pop-item {
	margin-left: 5px;
}

.popular-content a img:hover {
	/*border: 6px solid grey;
  height: 260px;
  width: 395px;*/
	border-bottom: 3px solid grey !important;
}

/*LATEST*/

/* .latest .label-latest {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 33px;
	gap: 10px;

	width: 240px;
	height: 53px;

	background: linear-gradient(180deg, #505050 0%, #000000 100%);
} */

/* .latest hr {
	background: #000000;
	height: 3px;
	margin: 0;
} */

/* .popular hr {
	display: none;
	background: #000000;
	height: 3px;
	margin: 0;
} */

.latest .label-latest h2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	font-variant: all-small-caps;
	color: #000000;
	letter-spacing: 0.1em;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.desc-stories h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 38px;
	line-height: 45px;
	/* identical to box height */

	/* Neutral/Black */

	color: #000000;
	text-align: left;
}

.st-content {
	padding: 40px !important;
}

.st-content p {
	font-family: "Roboto";
	font-style: normal;
	/* font-weight: 400; */
	font-size: 16px;
	line-height: 24px;
	/* or 150% */

	text-align: justify;

	/* Neutral/Black */

	color: #000000;
}

.desc-stories {
	margin-left: 10px;
}
.desc-stories p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	/* or 26px */

	text-align: left;

	/* Neutral/Grey */

	color: #505050;
}

.desc-stories .uname .label-detail-s {
	position: absolute;
	color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 92px;
	height: 37px;

	background: #a80000;
	border-radius: 4px;
}

.desc-stories .uname p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	padding-top: 10px;

	color: #777764;
	text-align: left;
}

.stories-article a h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 16px;
	line-height: 20px;

	color: #000000;
}

.stories-article h3:hover {
	color: #004ea8;
}

.stories-article p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;

	color: #777764;
}

.stories-more a {
	color: #a80000;
	/* box-sizing: border-box;
	border: 1px solid #a80000; */
}

.stories-more a:hover {
	text-decoration: none;
}

.extra-detail {
	width: auto;
	height: 760px;

	background: #ffecec;
	border-radius: 12px;
}

.extra-s {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 20px;
	line-height: 25px;
}

.detail-desc {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 32px;
	line-height: 40px;
	max-width: 850px;

	color: #000000;
}

.detail-desc p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 22px;
	text-align: center;

	color: #445073;
}

.detail-desc .uname p {
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;

	text-align: center;

	color: #777764;
}

.next-page-stories div a img {
	width: 241px;
	height: 155px;
	object-fit: cover;
}
.next-page-stories div a img:hover {
	/*border: 6px solid grey;
  height: 260px;
  width: 395px;*/
	border-bottom: 3px solid grey;
}

.next-page-stories {
	margin: 40px -15px;
}
.next-page-stories .black a {
	color: #fff;
	text-decoration: none;
}

.content-stories {
	text-align: start;
}

.descrip-s-title {
	padding-left: 0px;
}

.descrip-s-title h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	display: flex;
	align-items: center;
	/* font-variant: all-small-caps; */
	color: #000000;
	text-align: start;
}

.descrip-s-title h3:hover {
	color: #004ea8;
}

.descrip-s-title a:hover {
	text-decoration: none;
}

.descrip-s-title .descrip-s-summary p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: #787878;
	text-align: start;
}

.descrip-s-title .descrip-s-summary .descrip-s-auth p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
	line-height: 20px;
	display: flex;
	align-items: center;
	text-transform: capitalize;
	color: #9d9d9d;
}

.but-or {
	background: #00b93a;
	width: 40px;
	height: 40px;
	border-color: #00b93a;
}

.but-un {
	background: #004ea8;
	width: 40px;
	height: 40px;
	border-color: #004ea8;
}

.but-ex {
	background: #f1a11a;
	width: 40px;
	height: 40px;
	border-color: #f1a11a;
}
.but-ext {
	background: #8711fd;
	width: 40px;
	height: 40px;
	border-color: #8711fd;
}

.descrip-headline {
	width: 262px;
}

.descrip-headline h3 {
	font-family: "Roboto";
	font-style: normal;
	font-size: 16px;
	line-height: 19px;
	color: #000;
	text-transform: uppercase;
}

.descrip-headline a {
	text-decoration: none !important;
}

.descrip-headline h3:hover {
	color: #004ea8;
}

.descrip-headline .descrip-headline-1 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	color: #9e9ea7;
}

.descrip-headline .descrip-headline-1 .auth p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	color: #9e9ea7;
}

.lab-head-original {
	color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	gap: 10px;

	position: absolute;
	width: 87px;
	height: 31px;
	left: 92px;
	top: 0px;

	background: #00b93a;
	border-radius: 4px;
}

.lab-home-original {
	font-family: "Roboto";
	color: #fff;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;

	width: 92px;
	height: 32px;

	background: #00b93a;
	border-radius: 4px;

	flex: none;
	order: 0;
	flex-grow: 0;
	margin-bottom: 2px;
}

.lab-home-exclusives {
	font-family: "Roboto";
	color: #fff;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;

	width: 102px;
	height: 32px;

	background: #f1a11a;
	border-radius: 4px;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.lab-home-stories {
	font-family: "Roboto";
	color: #fff;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;

	width: 102px;
	height: 32px;

	background: #a80000;
	border-radius: 4px;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.label-home-latest {
	font-family: "Roboto";
	color: #989898;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;

	width: 100px;
	height: 26px;
	text-transform: uppercase;

	border-radius: 5px;

	flex: none;
	order: 0;
	flex-grow: 0;
	border: 1px solid #d7d7d7;
	text-transform: uppercase;
}

.label-home-popular {
	font-family: "Roboto";
	color: #ffffff;
	box-sizing: border-box;
	text-transform: uppercase;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;
	font-size: 14px;

	width: 84px;
	height: 26px;

	border-radius: 5px;

	flex: none;
	order: 0;
	flex-grow: 0;
	border: 1px solid #ffffff;
}

.lab-home-unfold {
	font-family: "Roboto";
	color: #fff;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;

	width: 77px;
	height: 32px;

	background: #004ea8;
	border-radius: 4px;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.new-more {
	flex-direction: row;
	justify-content: center;
	box-sizing: border-box;
	padding: 6px 59px;
	gap: 4px;
	width: 189px;
	height: 32px;
	background: #ffffff;

	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	border: 1px solid #000000;
	margin: auto;
	margin-top: 100px;
}

.new-more a {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;

	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: -0.006em;

	color: #000000;
}

/*ORIGINAL*/

.label-extras {
	height: 200px;
	background: url(../images/BG_Extras.png);
	background-size: cover;
	border-radius: 10px;
	transform: matrix(1, 0, 0, 1, 0, 0);
	color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
	background-repeat: no-repeat;
}

.label-original-1 h3 {
	font-size: 32px;
	text-align: end;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	line-height: 40px;
	padding-top: 30px;
	/* padding-right: 30px; */
}

.original-description {
	text-align: justify;
	font-family: "Arial";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	max-width: 730px;
	/* padding-left: 50px; */
}

.label-border {
	border: 2px solid #ffffff;
}

.menu-category {
	text-align: start;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 20px;
	line-height: 30px;
	padding-left: 45px;
}

.menu-category a {
	color: #9d9d9d;
	text-decoration: none;
}

.menu-category a:hover {
	color: #004ea8;
}

.descrip-51 .descrip-512 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 16px;
	color: #9e9ea7;
}

.descrip-5 .descrip-51 .author-gallery p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 12px !important;
	line-height: 16px;
	color: #9e9ea7;
}
.descrip-51 .descrip-512 .author p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 16px;
	color: #9e9ea7;
}

.detail-label-origin {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #00b93a;
	border-radius: 4px;
}

.detail-label-origin p {
	color: #fff;
	font-family: "Roboto Pro";
	font-style: normal;
	font-size: 16px;
	margin-top: 15px;
}

.detail-label-unfold {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #004ea8;
	border-radius: 4px;
}

.detail-label-unfold p {
	color: #fff;
	font-family: "Roboto Pro";
	font-style: normal;
	font-size: 16px;
	margin-top: 15px;
}

.detail-label-exclusives {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	gap: 10px;

	width: 105px;
	height: 37px;

	background: #f1a11a;
	border-radius: 4px;
}

.detail-label-exclusives p {
	color: #fff;
	font-family: "Roboto Pro";
	font-style: normal;
	font-size: 16px;
	margin-top: 15px;
}

.detail-label-extras p {
	color: #fff;
	font-family: "Roboto Pro";
	font-style: normal;
	font-size: 16px;
	margin-top: 15px;
}

.foot-detail-origin {
	height: 460px;
	background: #e9ffef;
}

.foot-detail-origin p {
	color: #000;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 24px;
	line-height: 30px;
}

.foot-detail-unfold {
	height: 460px;
	background: #e3f0ff;
}

.foot-detail-unfold p {
	color: #000;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 24px;
	line-height: 30px;
}

.foot-detail-exclusives {
	height: 460px;
	background: #fff2dd;
}

.foot-detail-exclusives p {
	color: #000;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 24px;
	line-height: 30px;
}
.foot-detail-extras {
	height: 400px;
	background: #f1e3ff;
}

.foot-detail-extras p {
	color: #000;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 514;
	font-size: 24px;
	line-height: 30px;
}

.disable-hover:hover {
	opacity: 100 !important;
}

.head-art {
	padding-top: 0px !important;
	padding: 100px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-bottom: 0;
}

.panel-thumbnail {
	width: 200px;
}

.panel h3 {
	font-size: 14px;
}

.original-label {
	margin-top: 25px;
	width: 1277px;
	height: 120px;

	border-radius: 10px;
	background-image: linear-gradient(
			270deg,
			rgba(0, 185, 58, 0.765) 0%,
			rgba(0, 185, 58, 0.85) 56.77%,
			rgba(0, 142, 45, 0.85) 100%
		),
		url("../images/background-label.png");
}

.exclusive-label {
	margin-top: 25px;
	width: 1277px;
	height: 120px;

	background-image: linear-gradient(
			270deg,
			rgba(241, 161, 26, 0.765) 0%,
			rgba(241, 161, 26, 0.85) 56.77%,
			rgba(218, 139, 5, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.unfold-label {
	margin-top: 25px;
	width: 1277px;
	height: 120px;

	background-image: linear-gradient(
			270deg,
			rgba(0, 78, 168, 0.765) 0%,
			rgba(0, 78, 168, 0.85) 56.77%,
			rgba(0, 54, 116, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.stories-label {
	margin-top: 25px;

	width: 1277px;
	height: 120px;

	background-image: linear-gradient(
			270deg,
			rgba(168, 0, 0, 0.765) 0%,
			rgba(168, 0, 0, 0.85) 56.77%,
			rgba(131, 4, 4, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.extras-label {
	width: 1277px;
	height: 120px;

	background: linear-gradient(
			270deg,
			rgba(135, 17, 253, 0.765) 0%,
			rgba(135, 17, 253, 0.85) 56.77%,
			rgba(94, 2, 185, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.about-label {
	width: 1278px;
	height: 120px;

	background: linear-gradient(
			270deg,
			rgba(255, 45, 171, 0.765) 0%,
			rgba(94, 2, 185, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.career-label {
	width: 1278px;
	height: 120px;

	background: linear-gradient(
			270deg,
			rgba(45, 255, 104, 0.765) 0%,
			rgba(2, 97, 185, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.partner-label {
	width: 1278px;
	height: 120px;

	background: linear-gradient(
			270deg,
			rgba(255, 45, 45, 0.765) 0%,
			rgba(2, 97, 185, 0.85) 100%
		),
		url("../images/background-label.png");
	border-radius: 10px;
}

.part-label p {
	width: 852px;
	height: 28px;

	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	letter-spacing: 0.05em;
	color: #ffffff;
	margin-top: 34px;
}

.part-label-c p {
	width: 852px;
	height: 28px;

	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	letter-spacing: 0.05em;
	color: #ffffff;
}

.career-detail {
	max-width: 650px;
}

.visit-career {
	background: #7b03f2;
	border-radius: 10px;
}

/* .visit-career a{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	line-height: 26px;
	text-align: center;
	color: #FFFFFF;
} */

.part-career a {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	line-height: 26px;
	text-align: center;

	/* Neutral/White */

	color: #ffffff;
}

.jumbotron {
	margin-top: 2rem;
}

.latest-video h2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;

	color: #000000;
}

.scrollup {
	position: fixed;
	bottom: 20px;
	right: 30px;
	width: 61px;
	height: 61px;
	border-radius: 46px;
	box-shadow: inset 0 0 0 2px #ccc;
	cursor: pointer;
	z-index: 9999;
	display: none;
	background-color: #fff;
}

.scrollup h2 {
	padding: 8px 15px;
}

.text-comic p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
	/* font-variant: all-small-caps; */
	color: #000000;
}

.desc-comics h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 23px;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
}

.desc-comics p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: #787878;
}

.big-headline {
	text-align: center;
}

.big-headline-item {
	text-align: start;
}

.originals-headline img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.originals-headline h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 28.13px;
	/* text-transform: uppercase; */

	color: #3d3d3d;
	text-align: start;
}

.originals-headline p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 21px;

	color: #9e9ea7;
	text-align: start;
}

.stories-headline img {
	width: 100%;
	height: auto;
}

.stories-headline h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 39px;
	/* text-transform: uppercase; */
	color: #3d3d3d;
	text-align: start;
}

.stories-headline p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 21px;
	color: #9e9ea7;
	text-align: start;
}

.unfold-headline img {
	width: 100%;
	border-radius: 10px;
}

.unfold-headline-title h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 33px;
	line-height: 39px;

	/* text-transform: uppercase; */

	color: #000000;
	text-align: start;
}

.unfold-headline-title p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 21px;

	/* Neutral/Grey */

	color: #505050;
	text-align: start;
}

.extra-unfold h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	display: flex;
	align-items: center;
	/* font-variant: all-small-caps; */

	/* Neutral/Black */

	color: #000000;
}

.extra-unfold p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;

	color: #505050;
}

.popular-category p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	margin: 0px !important;

	color: #505050;
}

.popular-category h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;

	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	text-align: start;

	color: #000000;
}

.number-popular {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 32px;
	line-height: 38px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	color: #ffffff;
}

.number-popular-2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 32px;
	line-height: 38px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	color: #bababa;
}

/* .author-stories p{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 46px;

	align-items: center;
	letter-spacing: -0.1125px;
	font-variant: all-small-caps;
	color: #111210;
	text-align: center;
} */

.descrip-exclusives {
	position: absolute;
	padding-left: 50px;
	margin-top: 200px;
}

.descrip-exclusives h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 64px;
	line-height: 90px;

	align-items: center;

	background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.descrip-exclusives a:hover {
	color: #004ea8;
	text-decoration: none;
}

.descrip-exclusives p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;

	display: flex;
	align-items: center;

	background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

.pop-caro {
	position: absolute;
	align-items: center;
	margin-top: 50px;
	margin-left: 0px;
}

.pop-caro p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;

	color: #ffffff;
}

.pop-caro h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 48px;
	line-height: 56px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	color: #ffffff;
}

.pop-caro h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;

	color: #ffffff;
	padding: 0 !important;
	margin: 0 !important;
}

/* Parallax */

.typewritter-container {
	overflow: hidden;
}

#parim {
	background-image: url("../images/banner_100_context.png");
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	height: 360px;
}

.title {
	color: white;
	z-index: 5;
	height: 20px;
}

.wave {
	position: absolute;
	transition: transform 0.2s ease-out;
}

.wave-1 {
	z-index: 3;
	/* margin-top: 50px; */
	left: -20%;
	width: 140%;
}

.wave-2 {
	z-index: 2;
	/* margin-bottom: -30px; */
	width: 140%;
	top: 80px;
	left: 80px;
}

.wave-3 {
	z-index: 1;
	left: -30%;
	width: 110%;
	/* margin-top: 110px; */
	top: 160px;
}

.parim h2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-size: 24px;
	line-height: 28px;
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: 0.05em;
	color: #ffffff;
	margin-left: 35%;
	margin-top: 90px;
}

.rules {
	position: relative;
	background: url("../images/banner_100_context.png") no-repeat center;
	background-size: cover;
	height: 400px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rules p {
	font-family: "Roboto";
	font-style: normal;
	font-size: 32px;
	padding: 0.5rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
	overflow: hidden;
}
.rules p span.typed-text {
	font-weight: normal;
	color: #fff;
	font-weight: 900;
	font-size: 30px;
	line-height: 35px;
	letter-spacing: 0.05em;
}
.rules p span.cursor {
	display: inline-block;
	background-color: #ccc;
	margin-left: 0.1rem;
	width: 1px;
	animation: blink 1s infinite;
}
.rules p span.cursor.typing {
	animation: none;
}
@keyframes blink {
	0% {
		background-color: #ccc;
	}
	49% {
		background-color: #ccc;
	}
	50% {
		background-color: transparent;
	}
	99% {
		background-color: transparent;
	}
	100% {
		background-color: #ccc;
	}
}

/* .image {
	height: 100%; 
	background-repeat: no-repeat; 
	background-position: bottom;
	position: relative;
}

.img1{
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 95px;
	left: 0;
	transform: translateY(0);
}
.img2{
	position: absolute;
	z-index: 3;   
	width: 100%;
	top: 250px;
	left: 0;
	transform: translateY(0);
	background-position: bottom;
}
.img3{
	position: absolute;
	z-index: 2;   
	width: 100%;
	top: 5px;
	left: 0;
	transform: translateY(0);
	background-position: bottom;
}
  
  @keyframes parallax {
	0% {
	  transform: translateY(0); 
	}
	50% {
	  transform: translateY(5%); 
	}
	100% {
	  transform: translateY(0); 
	}
  } */

/* .oneP {
	z-index: 1;
	width: 100%;
	top: 178px;
	left: 0;
	position: absolute;
  }

  .twoP{
	z-index: 3;   
	width: 100%;
	top: 350px;
	left: 0;
	position: absolute;
  }

  .threeP{
	z-index: 2;   
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
  } */

/* .mouse_move {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mouse_move h2 {
	position: relative;
	font-size: 100px;
	color: white;
}

.mouse_move img {
	position: absolute;
}
#img1 {
	top:208px;
	right:20px;
	width: 100%;
}
#img2 {
	top:298px;
	right:0px;
	width: 100%;
}
#img3 {
	top:100px;
	left:20px;
	right:0px;
	justify-content: center;
	width: 100%;
}
.asdasd h2 {
   font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	margin-top:50px;
	font-size: 24px;
	line-height: 28px;
	align-items: center;
	text-align: center;
	letter-spacing: 0.05em;

	color: #FFFFFF;
	text-align: center;
}
.asdasd {
	height: 60%; 
	width:110%;
	margin-top:-320px;
	background-repeat: no-repeat;
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; 
	background-image: url('../images/background-p.png');
	position: absolute;
} */

.index-page h2 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;

	/* Neutral/Black */

	color: #000000;
}

.search-text {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	color: #000000;
	text-align: start;
	text-transform: capitalize;
}

.search-text p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 21px;
	color: #505050;
	text-transform: lowercase;
}

.next-page-o div a img {
	width: 100%;
	height: 169px;
	border-radius: 8px;
	object-fit: fill;
}
.next-page-o div a img:hover {
	/* border: 6px solid grey;
  height: 260px;
  width: 395px; */
	border-bottom: 3px solid grey;
}
.next-page-o {
	margin: 40px -15px;
}
.next-page-o .col-md-3,
.next-page-o .col-sm-12 {
	margin: 0 0 20px;
}
.more-section .content-21 .next-page-o {
	margin-top: 35px;
	margin-bottom: 20px;
}

.popular-hits img {
	width: 300px;
	height: 200px;
}

.text-block {
	width: 300px;
	position: absolute;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	top: 185px;
	left: 30px;
}

.text-block h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	text-align: start;

	/* Neutral/White */

	color: #ffffff;
}

.text-block p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	line-height: 14px;
	/* identical to box height */

	display: flex;
	align-items: center;

	/* Neutral/White */

	color: #ffffff;
	font-variant: all-small-caps;
}

.popular-main {
	margin-top: 35px;
}

.more-text p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	display: flex;
	align-items: center;
	text-align: start;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;
}

.text-exclus {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	padding-left: 45px;
	padding-right: 45px;
	width: 100%;
	top: 680px;
}

.text-exclus h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 64px;
	line-height: 90px;
	/* or 141% */

	display: flex;
	align-items: center;

	/* Neutral/White */

	color: #ffffff;
}

.text-exclus p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	/* or 160% */

	display: flex;
	align-items: center;

	/* Neutral/White */

	color: #ffffff;
}

.text-exclus a {
	color: #0054a9;
}

.text-exclus a:hover {
	text-decoration: none;
}

.about-text {
	width: 852px;
}

.about-text p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	text-align: center;
	/* Neutral/Black */

	color: #000000;
}

.about-team {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 23px;
	align-items: center;
	text-align: center;
	letter-spacing: 0.1em;
	font-variant: all-small-caps;

	/* Neutral/Black */

	color: #000000;
}

.thumbnail {
	position: relative;
	display: inline-block;
}

.thumbnail img {
	width: 380px;
	height: 240px;
	/* margin-top: 28px; */
	border-radius: 10px;
}

.caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: linear-gradient(360deg, #000000 3.05%, rgba(0, 0, 0, 0) 100%);
	color: white;
	width: 100%;
	border-radius: 0 0 10px 10px;
	padding: 10px 0;
}

.thumbnail img {
	width: 365px;
	height: 205px;
	object-fit: fill;
}

/* .description-popular p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	color: white;
} */

.description-popular h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 20px;
	display: flex;
	align-items: center;
	/* font-variant: all-small-caps; */
	text-align: start;
	color: white;
}

.description-popular-2 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	line-height: 14px;
	display: flex;
	align-items: center;
	font-variant: all-small-caps;
	color: #b7b7b7;
}

.description-popular-2 h3 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 23.44px;
	/* text-transform: uppercase; */

	display: flex;
	align-items: center;
	/* font-variant: all-small-caps; */
	text-align: start;
	color: #3d3d3d;
}

.kepsyen hr {
	height: 0px;
	margin: 10px;
	border: 1px solid #afafaf;
	background-color: #afafaf;
}

/* TYPING TEXT HOMEPAGE */

/* .typing-text {
	width: 680px;
	white-space: nowrap;
	overflow: hidden;
	border-right: 3px solid;
	font-size: 6vw;
	animation: typing 4s steps(35) infinite alternate,
		blink 0.5s step-end infinite alternate;
	text-shadow: 0px 0px 3px white;
	color: #fff;
	position: absolute;
	top: 35%;
	left: 33%;
	margin: auto;
	text-align: center;
} */

/* .typing-text p {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	font-size: 37px;
	line-height: 35px;
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}
*/

.unfold-main-headline {
	padding-left: 0px;
}

.unfold-smh {
	padding-right: 0px;
}

.img-unf-smh {
	padding-right: 0px;
}

.latest-item {
	padding-left: 0px;
}

.originals-main-headline {
	padding-left: 0px;
}

.originals-smh {
	padding-right: 0px;
}

@keyframes typing {
	from {
		width: 0;
	}
}

@keyframes blink {
	50% {
		border-color: transparent;
	}
}

@media (max-width: 767px) {
	.text-anim {
		font-size: 8vw;
	}
}

.thumbnail-2 {
	position: relative;
}

.thumbnail-2 img {
	width: 514px;
	height: auto;
}

.caption-2 {
	position: absolute;
	top: 78%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* text-align: center; */
	background: linear-gradient(360deg, #000000 3.05%, rgba(0, 0, 0, 0) 100%);
	color: white;
	width: 100%;
	padding: 20px 50px;
}

.caption-2 h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 54px;
	line-height: 73px;
	display: flex;
	align-items: center;
	color: #ffffff;
}

.caption-2 p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	display: flex;
	align-items: center;
	color: #ffffff;
}

.caption-2 a:hover {
	text-decoration: none !important;
}

.small-label {
	border-radius: 10px 10px 0px 0px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	padding: 5px 0px;

	/* Neutral/White */

	color: #ffffff;
}

.summary-content {
	margin-top: 10px;
}

.summary-content a {
	color: black;
	text-decoration: none;
}

.summary-content a:hover h1 {
	color: #004ea8;
	/* text-decoration: none; */
}

.summary-content h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 19px;
	/* text-transform: uppercase; */
	color: #3d3d3d;
}

.summary-content p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #989898;
}

.summary-content .publish-home p {
	font-size: 14px;
	line-height: 16px;
}

.content-headline-small img {
	width: 100%;
	height: 162px;
	border-radius: 6px;
	object-fit: cover;
}

.content-headline-small a:hover img {
	border-bottom: 3px solid grey !important;
}

.big-label {
	border-radius: 10px 10px 0px 0px;
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	color: #989898;
	padding: 5px 0px;
	text-transform: uppercase;
}
.big-label-kanal {
	/* border-radius: 10px 10px 0px 0px; */
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	color: #989898;
	/* padding: 5px 0px; */
	text-transform: uppercase;
	margin-bottom: 15px;
	display: inline-block;
	border: 1px solid #d7d7d7;
	padding: 2px 8px;
	border-radius: 5px;
}

.content-headline-big img {
	width: 100%;
	height: 329px;
	border-radius: 14px;
	margin-top: 23px;
}

.content-headline-big a:hover img {
	border-bottom: 3px solid grey !important;
}

.apakah-summary {
	margin-top: 10px;
}

.apakah-summary a {
	color: black;
	text-decoration: none;
}

.apakah-summary a:hover h1 {
	color: #004ea8;
	/* text-decoration: none; */
}

.apakah-summary h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 33px;
	line-height: 39px;
	/* identical to box height */

	/* text-transform: uppercase; */

	/* Neutral/Black */

	color: #3d3d3d;
}

.apakah-summary p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #989898;
}

.author p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 12px !important;
	line-height: 19px;
	color: #989898;
}

.author-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.separator {
	margin: 0 5px;
	padding-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3px;
	height: 3px;
	font-weight: 700;
}

.section-home {
	margin: 20px 45px 20px 45px;
	color: #fff;
	font-family: "Roboto";
	color: #fff;
	min-height: 75px;
	min-height: 100px;
	padding: 20px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}

.descrip-5 h1 {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 23.44px;
	display: flex;
	align-items: center;
	/* text-transform: uppercase; */
	color: #3d3d3d;
	font-family: Roboto;
	text-align: left;
}

.mob-log-ft {
	display: none;
}

.bcrumb {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	padding-bottom: 0;
}

.bcrumb a {
	color: #9d9d9d;
	text-decoration: none;
}

.bcrumb-index {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	padding-bottom: 0;
	text-align: start;
}

.bcrumb-index a {
	color: #9d9d9d;
	text-decoration: none;
}

.text-cop-2 {
	display: none;
}

.main-image {
	position: relative;
	background: url("../images/banner_100_context.png") no-repeat center;
	background-size: cover;
	height: 360px;
	overflow: hidden;
}

.text-anim {
	width: 580px;
	white-space: nowrap;
	overflow: hidden;
	border-right: 3px solid;
	font-size: 6vw;
	animation: typing 4s steps(35) infinite alternate,
		blink 0.5s step-end infinite alternate;
	text-shadow: 0px 0px 3px white;
	color: #fff;
	margin: auto;
	text-align: center;
	padding: 0;
	margin-top: 130px;
}

.text-anim p {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-size: 37px;
	line-height: 35px;
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
}

.unfold-sm-tittle {
	font-family: "Roboto";
	font-style: normal;
	text-align: start;
}

.unfold-sm-tittle h3 {
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	display: flex;
	align-items: center;
	color: #3d3d3d;
	/* text-transform: uppercase; */
}

.unfold-sm-tittle p {
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color: #505050;
}

.unfold-sm img {
	width: 100%;
	height: 95px;
	object-fit: fill;
	border-radius: 4px;
}

.stories-headline {
	padding-left: 0 !important;
}

.stories-headline img {
	padding-left: 0 !important;
	border-radius: 4px;
}

.storiesbigheadline {
	padding-left: 0 !important;
}

.particle-stories {
	text-align: start;
}

.particle-stories img {
	height: 165px;
	border-radius: 4px;
}

.details-stories {
	text-align: start;
	font-family: "Roboto";
	font-style: normal;
}

.details-stories h3 {
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	display: flex;
	align-items: center;
	color: #000000;
}

.details-stories p {
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: #787878;
}

.stories-author p {
	font-weight: 400;
	font-size: 10px;
	line-height: 20px;
	color: #9d9d9d;
}

.search-container {
	position: relative;
}

.search-toggle,
.close-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.search-toggle i,
.close-icon i {
	font-size: 25px;
	padding-bottom: 0.3125rem;
}

.search-form {
	position: fixed;
	top: 18%;
	left: 0;
	/* width: max-content; */
	background-color: #f9f9f9;
	border: 5px solid #ccc;
	display: none;
	z-index: 1;
}

.search-form.active {
	display: block;
}

.cari-form {
	display: flex;
}

.fixed-top .navbar .cari-input {
	width: 360px;
	height: 40px;
}

.leaderboard img {
	width: 728px;
	height: auto;
}

.skyscrapper img {
	width: 120px;
	height: 600px;
}
.home-skyscrapper_left {
	/* padding: 0px !important;
	right: 50px; */
}
.home-skyscrapper_right {
	padding: 0px !important;
	right: 15px;
}

/* =================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.more-content h3 {
		height: 75px;
		font-size: 18px;
		margin-top: 0px;
	}
	.more-content .descrip-51 p {
		font-size: 12px;
	}
	.carousel-item h3 {
		font-size: 18px;
	}
	.carousel-control-prev-icon {
		margin-left: -150px;
	}

	.carousel-control-next-icon {
		margin-right: -150px;
	}

	/* HOME */

	.main-image {
		background-image: url("../images/banner-mobb.png");
	}

	.content-headline-big img {
		height: auto;
	}

	.content-headline-small img {
		height: auto;
		border-radius: 5px;
	}

	.vid-l img {
		width: 100%;
		height: auto;
	}

	/* .number-popular{ 
		display: contents;
		line-height: 0;
		font-size: 9px;
	}

	.description-popular p{
		font-size: 9px;
	} */

	/* END HOME */
}
@media (max-width: 1440px) {
	.content-11 p {
		max-width: 900px;
	}

	.text-anim p {
		font-size: 32px;
	}

	/* .next-page div a img{
		object-fit: contain;
	} */
}

.baca-juga {
	border-left: solid 4px #3d3d3d;
	padding-left: 15px;
	max-width: 100%;
}

.baca-juga p {
	padding-bottom: 0;
	color: #000000;
	font-weight: 900;
	font-size: 16px;
}

.baca-juga ul {
	color: #707070;
	font-style: italic;
}

.baca-juga li a {
	text-decoration: none;
	color: #707070;
}

.summary {
	color: #989898;
}

/* .custom-container {
    width: 1278px;
    max-width: 1278px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
} */

/*Safari Compatibility*/
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {
	/* @media { */
	#inputSearch2 {
		padding-bottom: 10px;
	}
	#inputSearch3 {
		padding-bottom: 10px;
	}
	/* } */
}
@media (min-width: 320px) and (max-width: 767px) {
	.p0 {
		padding: 0px !important;
	}
	.pt-60 {
		padding-top: 60px !important;
	}
	.scrollup {
		position: fixed;
		bottom: 58px;
		right: 30px;
		width: 41px;
		height: 41px;
		border-radius: 46px;
		box-shadow: inset 0 0 0 2px #ccc;
		cursor: pointer;
		z-index: 99;
		display: none;
		background-color: #fff;
	}
	.scrollup h2 {
		padding: 2px 6px;
	}

	.mobile-only {
		display: block;
	}
	.next-page-o {
		margin: 0px -15px;
	}
	.popular-hr {
		border: none !important;
		height: 1px;
		background-color: #ebebeb;
		margin: 10px 10px 25px 0px !important;
		width: 100%;
	}
	.desktop-only {
		display: none;
	}
	.mt-min-60 {
		margin-top: -60px;
	}
	.mt-min-40 {
		margin-top: -40px;
	}
	.mt-min-35 {
		margin-top: -35px;
	}
	.mt-min-20 {
		margin-top: -20px;
	}
	.author-detail-article p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 10px;
		line-height: 19px;
		color: #989898;
	}

	.breadcrumb-detail-article {
		text-align: start;
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 12px !important;
		line-height: 30px;
		padding-left: 15px !important;
		text-transform: uppercase;
	}
	.big-label-kanal {
		/* border-radius: 10px 10px 0px 0px; */
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 8px !important;
		line-height: 16px;
		text-align: center;
		color: #989898;
		/* padding: 5px 0px; */
		text-transform: uppercase;
		margin-bottom: 15px;
		display: inline-block;
		border: 1px solid #d7d7d7;
		padding: 2px 8px;
		border-radius: 5px;
	}
	.label-home-popular {
		font-family: "Roboto";
		color: #ffffff;
		box-sizing: border-box;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 2px 16px;
		font-size: 8px;

		width: 56px;
		height: 19px;

		border-radius: 5px;

		flex: none;
		order: 0;
		flex-grow: 0;
		border: 1px solid #ffffff;
	}
	.descrip-5 p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 14px !important;
		line-height: 19px;
		color: #989898;
	}
	.descrip-5 h1 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 18px !important;
		line-height: 23.44px;
		display: flex;
		align-items: center;
		/* text-transform: uppercase; */
		color: #000000;
		font-family: Roboto;
		text-align: left;
	}
	.author p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 8px !important;
		line-height: 19px;
		color: #989898;
	}
	.author-gallery p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 8px !important;
		line-height: 19px;
		color: #989898;
	}
	.apakah-summary p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 19px;
		color: #989898;
	}

	.auth-l p {
		font-weight: 300;
		font-size: 8px !important;
		line-height: 16px;
		color: #9e9ea7;
		flex: none;
		order: 0;
		flex-grow: 0;
	}
	.order-mobile-1 {
		order: 1;
	}
	.order-mobile-2 {
		order: 2;
	}
	.order-mobile-3 {
		order: 3;
	}
	.description-popular-2 h3 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 20px;
		display: flex;
		align-items: center;
		/* font-variant: all-small-caps; */
		text-align: start;
		color: #3d3d3d;
	}
	.big-label {
		border-radius: 10px 10px 0px 0px;
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 8px;
		line-height: 16px;
		text-align: center;
		color: #989898;
		padding: 5px 0px;
		text-transform: uppercase;
	}
	.latest-popular-originals {
		display: none !important;
	}
	.headline-originals {
		display: none !important;
	}
	.unfold-main-headline {
		display: none;
	}
	.headline-stories {
		display: none !important;
	}
	.next-page-stories .asd a img {
		width: 100%;
		padding: 0px;
		margin-left: -12px;
	}

	.extra-unfold h3 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
		padding-right: 5px;
		display: flex;
		align-items: center;
		/* font-variant: all-small-caps; */

		/* Neutral/Black */

		color: #000000;
	}

	.extra-unfold p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 300;
		font-size: 12px;
		line-height: 19px;

		color: #505050;
	}

	.vid-l img {
		width: 150px !important;
		height: 107px !important;
		border-radius: 6px;
		object-fit: fill;
	}

	.description-popular h3 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 18px !important;
		line-height: 20px;
		display: flex;
		align-items: center;
		font-variant: all-small-caps;
		text-align: start;
		color: white;
	}

	.thumbnail img {
		width: 100%;
		height: 202px;
		border-radius: 10px;
	}

	.description-popular h3 {
		font-size: 16px;
		line-height: 18px;
	}

	.description-popular-2 p {
		font-size: 10px;
		line-height: 12px;
	}

	.content-headline-big img {
		width: 100%;
		height: 197px;
		border-radius: 10px;
	}

	/* .custom-container {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px;
		padding-right: 15px;
	} */
	.caption {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
		text-align: center;
		background: linear-gradient(360deg, #000000 3.05%, rgba(0, 0, 0, 0) 100%);
		color: white;
		width: 100%;
		height: 100px;
		border-radius: 10px;
		padding: 10px 0;
	}
}

@media (min-width: 768px) {
	.mobile-only {
		display: none;
	}
	.desktop-only {
		display: block;
	}
	.border-right-desktop {
		border-right: 1px solid #ebebeb;
	}
	.border-right-desktop-home {
		border-right: 1px solid #ebebeb;
		height: 86.8%;
	}
	.border-right-desktop-stories {
		border-right: 1px solid #ebebeb;
		height: 85%;
	}
	.border-right-original {
		border-right: 1px solid #ebebeb;
		margin-top: 15px;
	}
	.content-22 .descrip-image:last-child {
		border-right: none !important;
	}

	.border-kanal {
		border: none !important;
		height: 1px !important;
		background-color: #ebebeb !important;
		margin: 30px 10px 10px 20px !important;
		width: 90% !important;
	}
	.carousel-item {
		height: 550px;
	}

	.unfold-headline-title {
		position: absolute;
		bottom: -100;
		left: 0;
		right: 0;
		color: white;
		padding: 15px;
		transform: translateY(0);
		transition: transform 0.3s ease;
	}

	.unfold-headline-title h1 {
		font-size: 1.5rem;
	}

	.unfold-headline-title p {
		font-size: 0.9rem;
	}

	#unfoldCarousel .carousel-controls {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
	}

	#unfoldCarousel .carousel-control-prev,
	#unfoldCarousel .carousel-control-next {
		position: relative;
		width: 30px;
		height: 30px;
		margin: 0 5px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
	}

	#unfoldCarousel .carousel-control-prev-icon,
	#unfoldCarousel .carousel-control-next-icon {
		width: 20px;
		height: 20px;
		color: #000;
	}

	.carousel-description h1 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 19px;
		text-transform: uppercase;
		color: #3d3d3d;
		text-align: left;
	}

	.carousel-description p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 19px;
		color: #989898;
		text-align: left;
	}
	.hover-zoom-out {
		transition: transform 0.3s ease, border-bottom 0.3s ease;
		border-bottom: 0px solid transparent;
	}

	.hover-zoom-out:hover {
		transform: scale(0.99);
		border-bottom: 1px solid grey;
	}

	.share-icons {
		margin-top: 100px;
	}
	.share-icons img {
		/* padding: 20px; */
		margin-top: 10px;
	}
	.stories-headline img {
		border-radius: 10px;
	}

	.content-headline-big-stories {
		text-align: left;
	}

	.content-headline-big-stories img {
		width: 100%;
		height: auto;
		border-radius: 10px;
	}

	.stories-headline-title {
		position: absolute;
		bottom: -100;
		left: 0;
		right: 0;
		color: white;
		padding: 15px;
		transform: translateY(0);
		transition: transform 0.3s ease;
	}

	.stories-headline-title h1 {
		font-size: 1.5rem;
	}

	.stories-headline-title p {
		font-size: 0.9rem;
	}

	#storiesCarousel .carousel-controls {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
	}

	#storiesCarousel .carousel-control-prev,
	#storiesCarousel .carousel-control-next {
		position: relative;
		width: 30px;
		height: 30px;
		margin: 0 5px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
	}

	#storiesCarousel .carousel-control-prev-icon,
	#storiesCarousel .carousel-control-next-icon {
		width: 20px;
		height: 20px;
		color: #000;
	}

	.carousel-description-stories h1 {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 700;
		font-size: 20px;
		line-height: 19px;
		/* text-transform: uppercase; */
		color: #3d3d3d;
		text-align: left;
	}

	.carousel-description-stories p {
		font-family: "Roboto";
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 19px;
		color: #989898;
		text-align: left;
	}
	.desktop-border-stories {
		border-left: 1px solid #ebebeb;
		border-right: 1px solid #ebebeb;
		height: 500px;
	}
	.detail-article-new p {
		text-align: left !important;
		max-width: 700px;
	}
	.detail-article-new {
		padding: 10px 20px 10px 10px;
		max-width: 700px;
		margin-left: 8px;
	}
	.container-detail-artikel {
		margin: 30px;
	}
	.footer-member-of {
		display: flex;
		justify-content: start;
		align-items: start;
		gap: 10px;
		margin-top: 5px;
		margin-bottom: 20px;
	}

	.footer .foot-link .footer-member-of img {
		position: static !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding-left: 0px !important;
	}

	.footer .foot-link .footer-member-of {
		display: flex;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px !important;
		position: relative !important;
	}

	.col .footer-member-of {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.col .footer-member-of div {
		width: 1px;
		height: 28px;
		background-color: white;
		flex-shrink: 0;
	}
}