article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

html { background: #fff; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: Arial; }

body { margin: 0; }

a { background: transparent; }

a:focus { outline: thin dotted; }

a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

mark { background: #ff0; color: #000; }

code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

q:before, q:after { content: ''; content: none; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; white-space: normal; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; }

button, input { line-height: normal; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; line-height: normal; }

/*--------------------------------------------------------------------------------*/
/*GENERAL*/
/*--------------------------------------------------------------------------------*/
:root { --kuler-1: #333333; --kuler-2: #f7931d; --kuler-3: #879ba5; }

body { margin: 0; line-height: 1.4; font-size: 16px; font-family: "castoro", Times New Roman, Georgia, serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

a { text-decoration: none; color: #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

a:hover { color: var(--kuler-1); }

a:focus { outline: none; }

hr { border-style: solid none none; border-color: #e6e6e6; margin: 16px 0; }

p { margin-top: 0; margin-bottom: 16px; }

ins { text-decoration: none; display: contents; }

ol, ul { padding: 0 0 0 24px; margin-top: 12px; margin-bottom: 12px; }

ol ol, ol ul, ul ol, ul ul { margin-top: 6px; margin-bottom: 0; }

ol li, ul li { padding: 8px 0; }

img { vertical-align: middle; border-style: none; }

header, footer { display: table; width: 100%; }

@media (min-width: 1024px) { header, footer { display: block; } }

/*--------------------------------------------------------------------------------*/
/*TYPOGRAHPHY*/
/*--------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-top: 0; margin-bottom: 8px; }

h1, h2, h3, h4, h5, h6, .font-heading, .font-heading-light, .font-heading-semibold, .font-heading-bold { line-height: 1.3; }

h1 { font-size: 40px; }

h2 { font-size: 32px; }

h3 { font-size: 28px; }

h4 { font-size: 24px; }

h5 { font-size: 20px; }

h6 { font-size: 16px; }

.head-1 { border: 0 !important; clip: rect(0 0 0 0) !important; height: 0.0625rem !important; margin: -0.0625rem !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 0.0625rem !important; }

.font-hero { font-size: 32px !important; }

.font-xxl { font-size: 26px !important; }

.font-xl { font-size: 23px !important; }

.font-lg { font-size: 20px !important; }

.font-md { font-size: 18px !important; }

.font-sm { font-size: 16px !important; }

.font-xs { font-size: 14px !important; }

.font-xxs { font-size: 12px !important; }

@font-face { font-family: "castoro"; font-weight: 400; font-style: italic; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/castoro/Castoro-Italic.woff2") format("woff2"), url("../../assets/fonts/castoro/Castoro-Italic.woff") format("woff"), url("../../assets/fonts/castoro/Castoro-Italic.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "castoro"; font-weight: 400; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/castoro/Castoro-Regular.woff2") format("woff2"), url("../../assets/fonts/castoro/Castoro-Regular.woff") format("woff"), url("../../assets/fonts/castoro/Castoro-Regular.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "worksans"; font-weight: 900; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/worksans/WorkSans-Black.woff2") format("woff2"), url("../../assets/fonts/worksans/WorkSans-Black.woff") format("woff"), url("../../assets/fonts/worksans/WorkSans-Black.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "worksans"; font-weight: 700; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/worksans/WorkSans-Bold.woff2") format("woff2"), url("../../assets/fonts/worksans/WorkSans-Bold.woff") format("woff"), url("../../assets/fonts/worksans/WorkSans-Bold.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "worksans"; font-weight: 600; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/worksans/WorkSans-SemiBold.woff2") format("woff2"), url("../../assets/fonts/worksans/WorkSans-SemiBold.woff") format("woff"), url("../../assets/fonts/worksans/WorkSans-SemiBold.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "worksans"; font-weight: 400; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/worksans/WorkSans-Regular.woff2") format("woff2"), url("../../assets/fonts/worksans/WorkSans-Regular.woff") format("woff"), url("../../assets/fonts/worksans/WorkSans-Regular.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "worksans"; font-weight: 300; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/worksans/WorkSans-Light.woff2") format("woff2"), url("../../assets/fonts/worksans/WorkSans-Light.woff") format("woff"), url("../../assets/fonts/worksans/WorkSans-Light.ttf") format("truetype"); font-display: swap; }

/*--------------------------------------------------------------------------------*/
/*CONTAINER*/
/*--------------------------------------------------------------------------------*/
.container, .container-fluid { width: 100%; padding-left: 18px; padding-right: 18px; margin-right: auto; margin-left: auto; }

/*--------------------------------------------------------------------------------*/
/*GRID 12 COLUMNS*/
/*--------------------------------------------------------------------------------*/
.grid-row { display: flex; flex-wrap: wrap; margin-left: -6px; margin-right: -6px; }

.no-gutter { margin-right: 0; margin-left: 0; }

.no-gutter > .column, .no-gutter > [class*="column-"] { padding-right: 0; padding-left: 0; }

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column, .column-auto { position: relative; width: 100%; padding-left: 6px; padding-right: 6px; }

.column { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

.column-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }

.column-1 { -ms-flex: 0.08333; flex: 0 0 8.33333%; max-width: 8.33333%; }

.column-2 { -ms-flex: 0.16667; flex: 0 0 16.66667%; max-width: 16.66667%; }

.column-3 { -ms-flex: 0.25; flex: 0 0 25%; max-width: 25%; }

.column-4 { -ms-flex: 0.33333; flex: 0 0 33.33333%; max-width: 33.33333%; }

.column-5 { -ms-flex: 0.41667; flex: 0 0 41.66667%; max-width: 41.66667%; }

.column-6 { -ms-flex: 0.5; flex: 0 0 50%; max-width: 50%; }

.column-7 { -ms-flex: 0.58333; flex: 0 0 58.33333%; max-width: 58.33333%; }

.column-8 { -ms-flex: 0.66667; flex: 0 0 66.66667%; max-width: 66.66667%; }

.column-9 { -ms-flex: 0.75; flex: 0 0 75%; max-width: 75%; }

.column-10 { -ms-flex: 0.83333; flex: 0 0 83.33333%; max-width: 83.33333%; }

.column-11 { -ms-flex: 0.91667; flex: 0 0 91.66667%; max-width: 91.66667%; }

.column-12 { -ms-flex: 1; flex: 0 0 100%; max-width: 100%; }

/*--------------------------------------------------------------------------------*/
/*TABLE*/
/*--------------------------------------------------------------------------------*/
table th, table td { vertical-align: top; }

table thead th { vertical-align: bottom; border-bottom: 2px solid #b3b3b3; }

table tbody + tbody { border-top: 2px solid #b3b3b3; }

table th { border: 1px solid #b3b3b3; background: #f2f2f2; padding: 10px; text-align: left; }

table td { border: 1px solid #b3b3b3; padding: 5px 10px; }

.table-wrap { display: block; width: 100%; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-strip tr:nth-of-type(even) { background: #f0f0f0; }

/*--------------------------------------------------------------------------------*/
/*BASE BRAND COLORS*/
/*--------------------------------------------------------------------------------*/
.color-utility-base { color: #6D8591 !important; }

.box-utility-base { color: #4c5d65 !important; background: #e7ebed; border: 1px solid #b6c2c8; padding: 12px 16px; }

.box-utility-base a { color: #415057 !important; }

.box-utility-base a:hover { text-decoration: underline; }

.color-utility-success { color: #11aa3d !important; }

.box-utility-success { color: #0a6424 !important; background: #9cf5b5; border: 1px solid #4ded7b; padding: 12px 16px; }

.box-utility-success a { color: #084d1c !important; }

.box-utility-success a:hover { text-decoration: underline; }

.color-utility-warning { color: #FCB715 !important; }

.box-utility-warning { color: #c28902 !important; background: #fff8e8; border: 1px solid #fede93; padding: 12px 16px; }

.box-utility-warning a { color: #a97702 !important; }

.box-utility-warning a:hover { text-decoration: underline; }

.color-utility-error { color: #FF0000 !important; }

.box-utility-error { color: #b30000 !important; background: #ffd6d6; border: 1px solid #ff8080; padding: 12px 16px; }

.box-utility-error a { color: #990000 !important; }

.box-utility-error a:hover { text-decoration: underline; }

/*--------------------------------------------------------------------------------*/
/*IMAGES STYLE*/
/*--------------------------------------------------------------------------------*/
.lqd, .lqd_img { background-size: cover; background-position: center center; background-repeat: no-repeat; }

.lqd_block > img, .media__image > img, .media__image a > * > img, .media__author-image-avatar img, .detail__media-image-wrap img { position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

.img-xxs { width: 40px !important; }

.img-xs { width: 80px !important; }

.img-sm { width: 100px !important; }

.img-md { width: 200px !important; }

.img-lg { width: 400px !important; }

.img-fluid { width: 100% !important; }

.img-fluid img { width: 100%; }

.lqd_img { position: absolute; width: 150%; height: 150%; top: -25%; left: -25%; z-index: 0; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }

.lqd_block { overflow: hidden; }

/*--------------------------------------------------------------------------------*/
/*RATIOBOX*/
/*--------------------------------------------------------------------------------*/
.ratiobox { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 100%; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }

.ratiobox.ratio_16_9 { padding-bottom: 56.25%; }

.ratiobox.pdb-counter { padding-bottom: calc(56.25% + 35px) !important; }

.ratiobox iframe { position: absolute; width: 100%; height: 100%; }

.block-link:hover .media__image .ratiobox { opacity: 1; }

.ratiobox--16-9 { padding-bottom: 56.25%; }

.ratiobox--4-3 { padding-bottom: 75%; }

.ratiobox--3-4 { padding-bottom: 133%; }

.ratiobox--9-16 { padding-bottom: 178%; }

/*--------------------------------------------------------------------------------*/
/*FORMS*/
/*--------------------------------------------------------------------------------*/
input:focus, select:focus, textarea:focus, button:focus { outline: none; }

textarea, select, input[type="text"], input[type="date"], input[type="button"], input[type="submit"], input[type="file"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; }

select { height: 37px; padding-right: 32px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 64 64' style='enable-background:new 0 0 64 64;' fill='%23999999' xml:space='preserve'><path d='M51.4,20.3c0.7-0.8,1.9-0.8,2.6,0c0.8,0.7,0.8,1.9,0,2.6L33.2,43.7c-0.7,0.7-1.9,0.7-2.7,0L9.8,22.9c-0.7-0.7-0.7-1.9,0-2.6c0.8-0.8,1.9-0.8,2.7,0l19.4,19.4L51.4,20.3z'/></svg>"); background-size: 16px; background-position: calc(100% - 8px) center; background-repeat: no-repeat; }

[type="checkbox"], [type="radio"] { padding: 0; }

textarea { resize: none; }

textarea.form-element { height: auto; }

button { cursor: pointer; background: #f0f0f0; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

label { display: inline-block; margin-top: 8px; margin-bottom: 8px; font-size: 14px; }

.form-check label { margin: 0; }

.form-inline label { display: inline-block; margin-right: 4px; }

.form-check--inline label { line-height: 2; }

label a { color: var(--kuler-1); }

.form-block { position: relative; margin-bottom: 12px; }

.form-block--error .tagsinput { border-color: #FF0000; background: #fae9ec; }

.form-check { position: relative; display: block; padding-left: 24px; }

.form-check__input { display: none; margin-left: -24px; margin-right: 4px; position: absolute; margin-top: 4px; }

.form-check__input:checked + label:before { background: #007cbd; -webkit-transform: scale(1.075); -moz-transform: scale(1.075); -ms-transform: scale(1.075); -o-transform: scale(1.075); transform: scale(1.075); }

.form-check--radio .form-check__input:checked + label:after { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }

.form-check--checkbox .form-check__input:checked + label:after { font-family: "detiknetwork-FF"; content: "\49"; background: transparent; line-height: 1; color: #FFFFFF; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }

.form-check__input:disabled ~ label { color: #999999; }

.form-check label { position: relative; cursor: pointer; }

.form-check label:before, .form-check label:after { content: ""; width: 16px; height: 16px; position: absolute; left: -24px; }

.form-check label:before { background: #cccccc; -webkit-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -moz-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -ms-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -o-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); }

.form-check label:after { background: #FFFFFF; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -moz-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -ms-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -o-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); }

.form-check label:hover:after { -webkit-transform: scale(0.35); -moz-transform: scale(0.35); -ms-transform: scale(0.35); -o-transform: scale(0.35); transform: scale(0.35); }

.form-check--checkbox label:after { font-size: 16px; }

.form-check--inline { display: inline-flex; align-items: center; margin-right: 12px; }

.form-check--inline__input { position: static; margin-top: 0; margin-right: 8px; margin-left: 0; }

.form-check--inline label:before, .form-check--inline label:after { top: 5px; }

.form-element { display: block; width: 100%; height: 37px; padding: 8px 12px; border: 1px solid #e6e6e6; line-height: 1.4; background-color: #FFFFFF; color: #333333; font-size: 14px; -webkit-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -moz-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -ms-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -o-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; }

.form-element:focus { border-color: #cccccc; }

.form-element[type="date"] { padding-top: 7px; padding-bottom: 7px; }

.form-element--error, .form-element--error:focus { color: #b30000 !important; background: #ffd6d6; border-color: #ff8080; }

.form-inline .form-element { display: inline-block; width: auto; vertical-align: middle; }

.form-rounded .form-element { border-radius: 24px; }

.form-gray .form-element { background-color: #f7f7f7; }

.form-file { position: relative; width: 100%; height: 37px; padding: 8px 12px 0 20px; margin: 0; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; font-size: 16px; }

.form-file:before { position: absolute !important; left: 0; top: 0; line-height: 1.4; content: 'Pilih file'; z-index: 1; font-size: 16px; display: inline-block; line-height: 1.4; padding: 8px 16px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; background: #e6e6e6; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.form-file:after { content: ""; position: absolute; left: 0; top: 0; width: 117px; height: 37px; background: #fff; }

.form-file__input { position: absolute; left: 25px; }

.form-element:disabled, .form-element[readonly], .form-gray .form-element:disabled, .form-gray .form-element[readonly] { background-color: #f0f0f0; }

/*--------------------------------------------------------------------------------*/
/*BUTTONS & LABELS DEFAULT STYLING*/
/*--------------------------------------------------------------------------------*/
.btn, .label { position: relative; font-size: 16px; display: inline-block; line-height: 1.4; padding: 8px 16px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; }

.btn--default, .label--default { background: #f0f0f0; color: #000000; }

.btn--rounded, .label--rounded { padding-left: 24px; padding-right: 24px; border-radius: 24px; }

.btn--sm, .label--sm { font-size: 12px; padding: 4px 12px; }

.btn--md, .label--md { font-size: 14px; padding-top: 6px; padding-bottom: 6px; }

.btn--lg, .label--lg { font-size: 20px; padding: 8px 32px; }

/*--------------------------------------------------------------------------------*/
/*BUTTON & LABEL STYLING VARIATIONS*/
/*--------------------------------------------------------------------------------*/
.btn:hover { color: #000000; opacity: 0.8; filter: alpha(opacity=80); }

.btn--rounded.btn--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; }

.btn--rounded.btn--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; }

.btn--default.btn--outline { border: 1px solid #666666; color: #666666; }

.btn--default.btn--link { color: #007cbd; }

.btn--outline { border: 1px solid #000000; color: #000000; }

.btn--link:hover { text-decoration: underline; opacity: 1; filter: alpha(opacity=100); }

.btn--outline, .btn--link { background: transparent !important; }

.btn--block { display: block; }

form .btn { padding: 8px 16px; font-size: 14px; }

.form-rounded .btn { padding-left: 24px; padding-right: 24px; border-radius: 24px; }

.label { cursor: inherit; }

.label--rounded.label--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; }

.label--rounded.label--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; }

/*--------------------------------------------------------------------------------*/
.btn--sosmed-instagram { color: #FFFFFF; border: none; background: #5851DB; /* Old browsers */ background: -moz-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* FF3.6+ */ background: -webkit-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at left bottom, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top_color', endColorstr='$bottom_color',GradientType=1 ); /* IE6-9 */ }

.btn--sosmed-instagram:hover { color: #FFFFFF; border: none; }

.pagination { display: flex; font-size: 14px; align-items: center; justify-content: center; }

.pagination a, .pagination span { text-align: center; display: inline-block; padding: 0px 8px; width: 32px; height: 32px; margin: 0 4px; line-height: 31px; }

.pagination a:first-child, .pagination span:first-child { line-height: 26px; }

.pagination a:last-child, .pagination span:last-child { line-height: 26px; }

.pagination__item { border: 1px solid #D1D1D1; }

.pagination__item:hover { background: #f0f0f0; color: #000000; }

.pagination__item--active, .pagination__item--active:hover { background: var(--kuler-1); border: 1px solid var(--kuler-1); color: #FFFFFF; }

.pagination__range { background: transparent; }

@font-face { font-family: "cxomedia"; font-weight: normal; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/fonticon/cxomedia.woff") format("woff"), url("../../assets/fonts/fonticon/cxomedia.ttf") format("truetype"); font-display: swap; }

.icon { line-height: 0; display: inline-block; position: relative; top: 0; vertical-align: baseline; }

.btn .icon { margin-top: -1px; }

.icon--xxl { font-size: 256px; }

.icon--xl { font-size: 128px; }

.icon--lg { font-size: 64px; }

.icon--md { font-size: 32px; }

.icon--sm { font-size: 24px; }

.icon--xs { font-size: 16px; }

[data-icon]:before { font-family: "cxomedia" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "cxomedia" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

.icon-plus:before { content: "\e923"; }

.icon-bookmark-detail-fill:before { content: "\e910"; }

.icon-bookmark-detail:before { content: "\e91a"; }

.icon-bookmark-fill:before { content: "\e91b"; }

.icon-bookmark:before { content: "\e922"; }

.icon-share:before { content: "\e905"; }

.icon-circle-left:before { content: "\e900"; }

.icon-allio:before { content: "\e901"; }

.icon-circle-arrow-right:before { content: "\e902"; }

.icon-arrow-left:before { content: "\e903"; }

.icon-arrow-right:before { content: "\e904"; }

.icon-mail:before { content: "\e906"; }

.icon-facebook-circle:before { content: "\e907"; }

.icon-linkedin:before { content: "\e908"; }

.icon-instagram:before { content: "\e909"; }

.icon-twitter:before { content: "\e90a"; }

.icon-whatsapp:before { content: "\e90b"; }

.icon-dislike-fill:before { content: "\e90c"; }

.icon-dislike:before { content: "\e90d"; }

.icon-like-fill:before { content: "\e90e"; }

.icon-like:before { content: "\e90f"; }

.icon-close:before { content: "\e911"; }

.icon-share-link:before { content: "\e912"; }

.icon-up:before { content: "\e913"; }

.icon-down:before { content: "\e914"; }

.icon-check:before { content: "\e915"; }

.icon-youtube:before { content: "\e916"; }

.icon-tiktok:before { content: "\e917"; }

.icon-linkedin-fill:before { content: "\e918"; }

.icon-instagram-fill:before { content: "\e919"; }

.icon-play:before { content: "\e91c"; }

.icon-notification:before { content: "\e91d"; }

.icon-google:before { content: "\e91e"; }

.icon-facebook:before { content: "\e91f"; }

.icon-search:before { content: "\e920"; }

.icon-user:before { content: "\e921"; }

.icon-shop:before { content: "\e924"; }

.icon-long-arrow-right:before { content: "\e925"; }

.icon-angle-right:before { content: "\e926"; }

.icon-angle-left:before { content: "\e927"; }

.notification-overlay { position: fixed; top: 215px; left: 50%; z-index: 12; padding: 12px 16px; color: var(--kuler-1); background: #FFFFFF; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.notification-overlay__close { position: absolute; top: 2px; right: 4px; color: #999999; }

.notification-overlay a:hover .icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }

.notification-overlay--alpha { opacity: 0.5; filter: alpha(opacity=50); }

.loader-animate { width: 32px; margin: 12px auto; }

/*--------------------------------------------------------------------------------*/
/*LIST CONTENT GENERAL*/
/*--------------------------------------------------------------------------------*/
.list-content { padding-left: 0; margin-top: 0; margin-bottom: 0; }

.list-content__item { position: relative; width: 100%; padding-top: 0; padding-bottom: 8px; margin-bottom: 8px; }

.list-content__item:first-child { margin-top: 8px; }

.list-content--column .list-content__item:first-child { margin-top: 0; }

.list-content__item:last-child { margin-bottom: 0; }

.list-content--column .list-content__item { padding-bottom: 12px; margin-bottom: 12px; }

.list-content__title { margin: 0; font-size: 14px; }

.list-content__title > a { display: block; }

.list-content--column { margin-top: 8px; }

.list-content--bordered .list-content__item { border-bottom: 1px solid #f0f0f0; }

.list-content--bordered .list-content__item:last-child { border: none; }

.list-content--bordered.list-content--column .list-content__item { border: none; }

.list-content--bordered.list-content--column .list-content__item:after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 1px; background: #f0f0f0; }

.media { position: relative; overflow: hidden; flex: 1; }

.list-content--equal-height .media { background: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; }

.media__image { position: relative; margin-bottom: 12px; overflow: hidden; background: #f0f0f0; }

.media__image a { display: block; }

.media__text { flex: 1; position: static; font-size: 12px; color: #666666; }

.list-content--equal-height .media__text { padding-left: 12px; padding-right: 12px; padding-bottom: 32px; }

.media__title { margin: 0; flex: 1; font-size: 14px; }

.media__subtitle, .detail__subtitle { display: inline-block; margin-top: 0; margin-bottom: 4px; font-size: 12px; }

.media__subtitle a, .detail__subtitle a { position: relative; z-index: 3; }

.media__subtitle a:hover, .detail__subtitle a:hover { text-decoration: underline; }

.media__date { display: inline-block; margin-top: 4px; color: #666666; font-size: 12px; }

.list-content--equal-height .media__date { position: absolute; bottom: 12px; }

.media__author { position: relative; z-index: 3; margin-top: 8px; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: #333333; }

.media__author-image-avatar { position: relative; width: 25px; height: 25px; display: inline-flex; overflow: hidden; margin-right: 8px; background: #f0f0f0; }

.media__author a:hover { text-decoration: underline; }

.media__link { position: static; }

.media__link:before { position: absolute; content: ""; bottom: 0; left: 0; top: 0; right: 0; overflow: hidden; white-space: nowrap; z-index: 2; }

.media__label { display: inline-block; padding: 4px 12px; position: absolute; top: 4px; left: 4px; z-index: 1; color: #FFFFFF; background: #21409A; font-size: 12px; }

.media__icon { position: absolute; z-index: 1; padding: 2px 4px; text-align: center; vertical-align: top; display: inline-block; color: #FFFFFF; font-size: 12px; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.5); }

.media__icon--middle { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

.media__icon--top-right { top: 4px; right: 4px; }

.media__icon--top-left { top: 4px; left: 4px; }

.media__icon--bottom-right { bottom: 4px; right: 4px; }

.media__icon--bottom-left { bottom: 4px; left: 4px; }

.media__icon--no-bg { background: none; padding: 0; }

.media__desc { color: #000000; font-size: 14px; margin-bottom: 12px; }

.media--left { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; }

.media--right { flex-direction: row-reverse; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; }

.media--left .media__image { margin: 0 16px 0 0; }

.media--right .media__image { margin: 0 0 0 16px; }

.media--left .media__image, .media--right .media__image { width: 116px; }

.media--align-center { align-items: center; }

.media--text-overlay .media__image { margin-bottom: 0; }

.media--text-overlay .media__text { position: absolute; bottom: 0; left: 0; right: 0; padding: 15% 12px 12px; z-index: 3; color: #FFFFFF; background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ }

.media--text-overlay .media__text a { color: #FFFFFF; }

.media--text-overlay.media--image-radius .media__text { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }

.text-list { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: baseline; font-size: 16px; }

.text-list__data { margin-right: 8px; }

.text-list__title { font-size: inherit; font-weight: inherit; }

.text-list--title { margin-bottom: 12px; font-size: 18px; }

/*--------------------------------------------------------------------------------*/
/*HELPER*/
/*--------------------------------------------------------------------------------*/
.pd-0 { padding: 0 !important; }

.pdt-0 { padding-top: 0 !important; }

.pdr-0 { padding-right: 0 !important; }

.pdb-0 { padding-bottom: 0 !important; }

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

.mg-0 { margin: 0 !important; }

.mgt-0 { margin-top: 0 !important; }

.mgr-0 { margin-right: 0 !important; }

.mgb-0 { margin-bottom: 0 !important; }

.mgl-0 { margin-left: 0 !important; }

.pd-4 { padding: 4px !important; }

.pdt-4 { padding-top: 4px !important; }

.pdr-4 { padding-right: 4px !important; }

.pdb-4 { padding-bottom: 4px !important; }

.pdl-4 { padding-left: 4px !important; }

.mg-4 { margin: 4px !important; }

.mgt-4 { margin-top: 4px !important; }

.mgr-4 { margin-right: 4px !important; }

.mgb-4 { margin-bottom: 4px !important; }

.mgl-4 { margin-left: 4px !important; }

.pd-8 { padding: 8px !important; }

.pdt-8 { padding-top: 8px !important; }

.pdr-8 { padding-right: 8px !important; }

.pdb-8 { padding-bottom: 8px !important; }

.pdl-8 { padding-left: 8px !important; }

.mg-8 { margin: 8px !important; }

.mgt-8 { margin-top: 8px !important; }

.mgr-8 { margin-right: 8px !important; }

.mgb-8 { margin-bottom: 8px !important; }

.mgl-8 { margin-left: 8px !important; }

.pd-12 { padding: 12px !important; }

.pdt-12 { padding-top: 12px !important; }

.pdr-12 { padding-right: 12px !important; }

.pdb-12 { padding-bottom: 12px !important; }

.pdl-12 { padding-left: 12px !important; }

.mg-12 { margin: 12px !important; }

.mgt-12 { margin-top: 12px !important; }

.mgr-12 { margin-right: 12px !important; }

.mgb-12 { margin-bottom: 12px !important; }

.mgl-12 { margin-left: 12px !important; }

.pd-16 { padding: 16px !important; }

.pdt-16 { padding-top: 16px !important; }

.pdr-16 { padding-right: 16px !important; }

.pdb-16 { padding-bottom: 16px !important; }

.pdl-16 { padding-left: 16px !important; }

.mg-16 { margin: 16px !important; }

.mgt-16 { margin-top: 16px !important; }

.mgr-16 { margin-right: 16px !important; }

.mgb-16 { margin-bottom: 16px !important; }

.mgl-16 { margin-left: 16px !important; }

.pd-24 { padding: 24px !important; }

.pdt-24 { padding-top: 24px !important; }

.pdr-24 { padding-right: 24px !important; }

.pdb-24 { padding-bottom: 24px !important; }

.pdl-24 { padding-left: 24px !important; }

.mg-24 { margin: 24px !important; }

.mgt-24 { margin-top: 24px !important; }

.mgr-24 { margin-right: 24px !important; }

.mgb-24 { margin-bottom: 24px !important; }

.mgl-24 { margin-left: 24px !important; }

.pd-48 { padding: 48px !important; }

.pdt-48 { padding-top: 48px !important; }

.pdr-48 { padding-right: 48px !important; }

.pdb-48 { padding-bottom: 48px !important; }

.pdl-48 { padding-left: 48px !important; }

.mg-48 { margin: 48px !important; }

.mgt-48 { margin-top: 48px !important; }

.mgr-48 { margin-right: 48px !important; }

.mgb-48 { margin-bottom: 48px !important; }

.mgl-48 { margin-left: 48px !important; }

.pd-96 { padding: 96px !important; }

.pdt-96 { padding-top: 96px !important; }

.pdr-96 { padding-right: 96px !important; }

.pdb-96 { padding-bottom: 96px !important; }

.pdl-96 { padding-left: 96px !important; }

.mg-96 { margin: 96px !important; }

.mgt-96 { margin-top: 96px !important; }

.mgr-96 { margin-right: 96px !important; }

.mgb-96 { margin-bottom: 96px !important; }

.mgl-96 { margin-left: 96px !important; }

.hide-element { display: none !important; }

.display-block { display: block !important; }

.pos-relative { position: relative !important; }

.w-100 { width: 100% !important; }

.flex-center { align-items: center !important; }

.justify-content-center { justify-content: center !important; }

/*--------------------------------------------------------------------------------*/
/*EXTENDS*/
/*--------------------------------------------------------------------------------*/
.font-family-base, .font-family-base-2, .font-heading, .font-paragraph, .form-element, .pagination, .list-content__title, .media__title, .media__subtitle, .detail__subtitle, .navbar-second .nav a, .detail__artikel-selanjutnya .detail__title { font-weight: 400; }

.font-base-light, .font-heading-light, .media__date, .font-light, .detail__date, .detail__media-caption { font-weight: 300; }

.font-base-semibold, .font-heading-semibold, .box-utility-base a, .box-utility-success a, .box-utility-warning a, .box-utility-error a, .notification-overlay, .text-list--title, .font-semibold, .box__title, .section__title, .page__title, .detail__anchor-numb { font-weight: 600; }

.font-base-bold, .font-heading-bold, .font-bold, .detail__body-text--first-cap::first-letter { font-weight: 700; }

.font-family-base, .font-paragraph, .form-element, .form-file, .icon, .media__date, .media__desc, .detail__title, .quotesisip, .modal-body__title { font-family: "castoro", Times New Roman, Georgia, serif; }

.font-family-base-2, .font-heading, .font-heading-light, .font-heading-semibold, .font-heading-bold, label, .form-file:before, .btn, .pagination, .notification-overlay, .list-content__title, .media__text, .media__title, .media__subtitle, .detail__subtitle, .media__author, .text-list, .footer__logo-detiknetwork, .box__title, .section__title, .box__header a, .page__title, .page__breadcrumb, .page__follow, .page__share, .nav, .detail__media-caption, .detail__multiple .detail__anchor { font-family: "worksans", Arial, Tahoma, sans-serif; }

.media--list, .display-flex, .align-middle { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

.form-inline, .list-content__item, .display-flex-wrap { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; }

.notification-overlay, .flex-between, .box__header, .section__header, .page__header, .page__breadcrumb, .page__follow { justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; }

.text-center { text-align: center !important; }

.text-right { text-align: right !important; }

.text-style-italic { font-style: italic !important; }

.align-middle { align-items: center; justify-content: center; }

.box-utility-base, .box-utility-success, .box-utility-warning, .box-utility-error, .form-check--checkbox label:before, .form-check--checkbox label:after, .form-element, .notification-overlay, .media__label, .media__icon, .media--image-radius .media__image, .slick-slide-thumbnail .slick-slide { border-radius: 4px; }

.form-check--radio label:before, .form-check--radio label:after, .media__image--circle, .media__author-image-avatar, .media--image-circle .media__image, .circle, .slick-dots li button, .lds-ring div { border-radius: 50%; }

.color-black { color: #000000; }

.color-black-light-4 { color: #cccccc; }

.color-white { color: #FFFFFF; }

.color-gray { color: #6D8591; }

.color-gray-light-1 { color: #879ba5; }

.color-blue-base, .color-blue, .box__title, .section__title, .page__title { color: #21409A; }

.color-orange-light-1, .color-orange, .media--text-overlay .media__subtitle, .media--text-overlay .detail__subtitle, .media--text-overlay .media__subtitle a, .media--text-overlay .detail__subtitle a { color: #ef672f; }

.color-red-light-2, .color-red { color: #FF0000; }

.color-purple-light-2, .color-purple { color: #812e88; }

.color-green-light-2, .color-green { color: #11aa3d; }

.color-yellow-base, .color-yellow { color: #FCB715; }

.color-pink-light-1, .color-pink { color: #ec1b7a; }

.color-bg-black { background: #000000; }

.color-bg-black-light-5 { background: #e6e6e6; }

.color-bg-white { background: #FFFFFF; }

.color-bg-gray { background: #6D8591; }

.color-bg-gray-light-4 { background: #e0e5e8; }

.color-bg-blue-base, .color-bg-blue { background: #21409A; }

.color-bg-orange-light-1, .color-bg-orange { background: #ef672f; }

.color-bg-red-light-2, .color-bg-red { background: #FF0000; }

.color-bg-purple-light-2, .color-bg-purple { background: #812e88; }

.color-bg-green-light-2, .color-bg-green { background: #11aa3d; }

.color-bg-yellow-base, .color-bg-yellow { background: #FCB715; }

.color-bg-pink-light-1, .color-bg-pink { background: #ec1b7a; }

/*DATEPICKER STYLE*/
/* Default styling for jQuery Datepicker v5.0.1. */
.datepick { background-color: #fff; border: 1px solid #ccc; color: #000; font-family: Arial,Helvetica,Sans-serif; font-size: 90%; padding: 5px; }

.datepick-rtl { direction: rtl; }

.datepick-popup { z-index: 1000; }

.datepick-disable { position: absolute; z-index: 100; background-color: white; opacity: 0.5; filter: alpha(opacity=50); }

.datepick a { text-decoration: none; }

.datepick a.datepick-disabled { color: #888; cursor: auto; }

.datepick button { margin: 0.25em; padding: 0.125em 0em; background-color: #fcc; border: none; font-weight: bold; }

.datepick-nav, .datepick-ctrl { font-size: 90%; font-weight: bold; display: flex; }

.datepick-ctrl { border-top: 1px solid #ccc; }

.datepick-cmd { flex: 1; padding: 5px 7px; text-align: center; }

.datepick-cmd-today { margin: 0 2px; }

.datepick-cmd-clear { margin: 5px 1px 0 0; }

.datepick-cmd-close { margin: 5px 0 0 1px; }

.datepick-cmd:hover { background-color: #eee; }

.datepick-month { float: left; width: 15em; text-align: center; }

.datepick-month-nav { float: left; background-color: #777; text-align: center; }

.datepick-month-nav div { float: left; width: 12.5%; margin: 1%; padding: 1%; }

.datepick-month-nav span { color: #888; }

.datepick-month-row { clear: left; display: inline-block; }

.datepick-month-header { background-color: #fff; color: #000; font-weight: bold; display: flex; }

.datepick-month-header select, .datepick-month-header input { margin: 0em; padding: 5px; border: 1px solid #ccc; font-size: 100%; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; border-radius: 0; font-weight: bold; flex: 1; }

.datepick-month-header select:last-child { border-left: none; }

.datepick-month-header input { position: absolute; display: none; }

.datepick-month table { width: 100%; border-collapse: collapse; font-size: 11px; }

.datepick-month thead { background: #eee; border-bottom: 2px solid #fff; }

.datepick-month th, .datepick-month td { margin: 0em; padding: 0em; text-align: center; }

.datepick-month th { padding: 5px; border: none; }

.datepick-month th.datepick-week { background-color: #777; color: #fff; }

.datepick-month td { border: 1px solid #fff; }

.datepick-month td.datepick-week { border: 1px solid #777; }

.datepick-month td.datepick-week * { background-color: #777; color: #fff; border: none; }

.datepick-month td span { color: #888; }

.datepick-month td .datepick-other-month { background-color: #fff; }

.datepick-month td .datepick-today, .datepick-month td .datepick-highlight { background-color: #cccccc; color: #fff; }

.datepick-month td .datepick-selected { color: #fff; background-color: var(--kuler-1); }

.datepick-month a { display: block; width: 100%; padding: 0.125em 0em; color: #000; text-decoration: none; }

.datepick-month span { display: block; width: 100%; padding: 0.125em 0em; }

.datepick-status { clear: both; background-color: #ddd; text-align: center; }

.datepick-clear-fix { clear: both; }

button.datepick-cmd { text-align: center; }

body { font-family: "worksans", Arial, Tahoma, sans-serif; font-size: 14px; }

body.overflow { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { font-family: "castoro", Times New Roman, Georgia, serif; letter-spacing: 0.03em; }

h1 { font-size: 28px; }

h2 { font-size: 24px; }

h3 { font-size: 20px; }

h4 { font-size: 18px; }

h5 { font-size: 16px; }

h6 { font-size: 14px; }

.mgb-32 { margin-bottom: 32px !important; }

.mgt-32 { margin-top: 32px !important; }

.mgb-60 { margin-bottom: 60px !important; }

.mgt-60 { margin-top: 60px !important; }

.maintenance-space { height: 100px; }

.separator { width: 140px; height: 2px; background-color: #333; margin: 24px auto; }

.text--sm { font-size: 14px; color: #838484; }

.text--xs { font-size: 12px; color: #838484; line-height: 18px; }

.text--xs a { color: #333; }

.text--bold { font-weight: 600; }

.text--normal { font-weight: normal !important; }

.text--primary { color: #333 !important; }

.text--soft { color: #838484; }

section { margin-bottom: 16px !important; }

section hr { margin: 32px 0 0; border-color: #E3E3E3; }

.title { font-family: "worksans", Arial, Tahoma, sans-serif; border: 1px solid #E3E3E3; border-left: 0; border-right: 0; font-size: 20px; padding: 16px 0; color: #333; margin: 26px 0 20px; line-height: 30px; letter-spacing: 0.04em; }

.title-img { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; }

.title-img__title { font-size: 20px; font-family: "castoro", Times New Roman, Georgia, serif; color: #333; }

.title-img p { margin-top: 8px; font-size: 12px; line-height: 20px; color: #838484; margin-right: 32px; margin-bottom: 0; }

.title-subkanal { font-family: "castoro", Times New Roman, Georgia, serif; padding: 16px 0; font-size: 20px; line-height: 30px; letter-spacing: 0.03em; }

.title-subkanal--link { display: flex; justify-content: space-between; align-items: center; }

.title-subkanal--link a { font-family: "worksans", Arial, Tahoma, sans-serif; font-size: 14px; text-transform: uppercase; }

.title-subkanal--link a .icon { color: #697F90; font-size: 18px; }

.title-subkanal--default { border-bottom: 1px solid #C4C4C4; }

.title-subkanal--inspire { border-bottom: 1px solid #F9957F; }

.title-subkanal--insight { border-bottom: 1px solid #697F90; }

.title-subkanal--interest { border-bottom: 1px solid #668C85; }

.title-category { padding: 24px 0; border-bottom: 1px solid #E3E3E3; font-weight: 400; }

.title-category--noborder { border: none; }

.title-category--link { position: relative; }

.title-category--link a { position: absolute; }

.title-category--link .icon { font-size: 24px; }

.title-category--link .icon--left { left: 0; }

.title-category--link .icon--right { right: 0; }

.title-category--maintenance { font-size: 28px; line-height: 38px; }

.title-program h1 { font-size: 20px; font-weight: 400; line-height: 30px; margin: 0; }

.title-program--link { display: flex; justify-content: space-between; }

.title-program--link h1 { width: 80%; }

.title-program--link .media__share a { display: inline-block; margin-left: 16px; }

.title-program--link .media__share a:first-child { margin: 0; }

.title--sm { font-size: 16px; font-weight: 400; letter-spacing: 0.04em; line-height: 24px; }

.title--md { font-size: 18px; line-height: 32px; letter-spacing: 0.04em; }

.box--fullheight { min-height: 40vh; }

.box-info { padding: 16px; border: 1px solid #333; color: #333; }

.box-info__title { font-family: "castoro", Times New Roman, Georgia, serif; font-size: 20px; line-height: 26px; letter-spacing: 0.05em; text-align: center; }

.box-info__desc { text-align: center; letter-spacing: 0.05em; }

.box-info__btn { display: flex; }

.box-info__btn .btn { width: 100%; margin-left: 12px; }

.box-info__btn .btn:first-child { margin-left: 0; }

.box-info .btn { letter-spacing: 0.04em; font-size: 13px; font-weight: 500; }

.box-bg-inside { position: relative; }

.box-bg-inside__img { margin-bottom: 0 !important; }

.inside-hl .box-bg-inside__img { height: 500px; }

.box-bg-inside__text { padding: 20px; position: absolute; bottom: 0; left: 0; right: 0; }

.box-bg-inside__text-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); }

.inside-hl .box-bg-inside__text-wrap { background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); }

.box-bg-inside__text-title { font-size: 20px; line-height: 30px; color: #fff; font-family: "castoro", Times New Roman, Georgia, serif; display: inline-block; border-bottom: 2px solid #fff; padding: 0 24px 8px 0; }

.inside-hl .box-bg-inside__text-title { font-size: 60px; line-height: 75px; width: 612px; }

.box-bg-inside__text-desc { color: #fff; font-family: "worksans", Arial, Tahoma, sans-serif; font-size: 12px; line-height: 20px; margin-left: auto; margin-right: auto; }

.box-bg-inside__text .btn { border: none; background: #fff; color: #333; width: 180px; }

.box-bg-inside__text .btn:hover { border: none; }

.tab-link { display: flex; border-bottom: 1px solid #333; }

.tab-link a { width: 100%; display: block; padding: 16px 0; color: #A3A4A4; border-bottom: 3px solid transparent; text-align: center; }

.tab-link a.active { border-bottom: 3px solid #333; color: #333; font-weight: 600; }

.link-detail { display: inline-block; border: 1px solid #000; padding: 8px 24px; font-size: 14px; }

.link-detail .icon { color: primary; font-size: 22px; margin-left: 8px; }

.onboarding { min-height: 40vh; }

.onboarding form { width: 100%; }

.img-box img { max-width: 100%; }

.img-box--fullheight { height: 100vh; display: flex; align-items: center; }

.sign__socmed-item { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin: 0 8px; border: 1px solid #C4C4C4; border-radius: 50%; font-size: 28px; }

.tag-result__item { border: 1px solid #333; display: inline-flex; padding: 8px; align-items: center; }

.tag-result__item .icon { margin-left: 8px; font-size: 22px; }

.about p { color: #838484; letter-spacing: 0.03em; line-height: 24px; }

.about hr { margin: 24px 0; }

.about__heading { display: inline-block; padding-bottom: 16px; padding-right: 32px; margin: 24px 0 16px; border-bottom: 1px solid #C4C4C4; font-weight: normal; font-style: italic; }

.alert--img { display: flex; align-items: center; padding: 12px 0; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }

.alert--img img { width: 70px; }

.alert--img p { font-size: 12px; color: #1F1F1F; margin: 0 0 0 8px; }

.slider__dots { position: absolute; bottom: 10px; width: 100%; }

.lqd img { display: none; }

.coming { text-align: center; }

back .coming .title-category { font-size: 32px; }

.coming .form-element { border: 1px solid #333; }

.coming .form__icon .form-block input { height: fit-content; height: -moz-fit-content; }

.coming ::placeholder { color: #333; opacity: 1; }

.coming__count { background: #fff; border: 1px solid #C4C4C4; padding: 12px 20px; margin-bottom: 60px; }

.coming__count .countdown { display: flex; flex-direction: row; justify-content: center; }

.coming__count .countdown .time { display: flex; flex-direction: column; justify-content: start; }

.coming__count .countdown .time:not(:last-child) { margin-right: 16px; }

.coming__count .countdown .time #days, .coming__count .countdown .time #hours, .coming__count .countdown .time #minutes, .coming__count .countdown .time #seconds, .coming__count .countdown .time .semicolon { font-family: "castoro", Times New Roman, Georgia, serif; font-weight: 400; color: #333; font-size: 24px; line-height: 34px; }

@media only screen and (max-width: 320px) { .coming__count .countdown .time #days, .coming__count .countdown .time #hours, .coming__count .countdown .time #minutes, .coming__count .countdown .time #seconds, .coming__count .countdown .time .semicolon { font-size: 20px; } }

.coming__count .countdown .time span { font-family: "worksans", Arial, Tahoma, sans-serif; color: #838484; font-size: 12px; }

@media only screen and (max-width: 320px) { .coming__count .countdown .time span { font-size: 10px; } }

.coming__count .countdown .semicolon { flex-direction: column; justify-content: flex-start; font-family: "castoro", Times New Roman, Georgia, serif; margin-right: 16px; display: flex; font-size: 24px; }

@media only screen and (max-width: 320px) { .coming__count .countdown .semicolon { font-size: 16px; } }

.coming__space { height: 220px; }

@media only screen and (max-height: 568px) { .coming__space { height: 150px; } }

@media only screen and (min-height: 813px) { .coming__space { height: 320px; } }

.coming__bg { width: 100%; background-image: url(../images/illustration/coming.png); background-size: contain; background-position: center bottom; background-repeat: no-repeat; }

.static-content__detail { margin: 36px 0 100px; font-family: "worksans", Arial, Tahoma, sans-serif; }

.static-content__detail-text { font-size: 16px; }

.static-content__detail-text h2, .static-content__detail-text h4 { font-family: "castoro", Times New Roman, Georgia, serif; }

.static-content__detail-text h2 { margin-bottom: 8px; }

.static-content__detail-text h4 { margin-bottom: 12px; }

.static-content__detail-text p { margin-bottom: 30px; line-height: 24px; }

.static-content__detail-text .inside { list-style-position: inside; padding-left: 0; }

.static-content__detail-text ul li { list-style: disc; line-height: 24px; }

.static-content__detail-text ol.alphabet { list-style-type: lower-alpha; }

.static-content__detail-text ol.alphabet li { line-height: 24px; }

.static-content__detail-text dl dt { font-weight: bold; margin-bottom: 8px; }

.static-content__detail-text dl dd { line-height: 24px; margin-left: 0; }

.indeks__tab { position: relative; }

.indeks__tab-nav { font-size: 14px; line-height: 24px; padding: 0 10px 20px; margin-bottom: 20px; border-bottom: 1px solid #c4c4c4; display: inline-flex; width: 100%; justify-content: space-between; }

.indeks__tab-nav a { padding: 8px 16px; }

@media only screen and (max-width: 320px) { .indeks__tab-nav a { padding: 8px 12px; } }

.indeks__tab-nav a:hover { background: #333; color: white; }

.indeks__tab-nav .active { background: #333; color: white; }

.indeks__tab .filter-select { margin-bottom: 0; border: 1px solid #ededed; }

.indeks__tab .filter-select .select { color: #919191; border: none; }

@media only screen and (max-width: 320px) { .indeks__tab .filter-select .select { max-width: 150px; } }

.indeks__tab .filter-select .select-styled { background: #f8f8f8; color: #333; overflow-y: hidden; }

.indeks__tab .filter-select .select-styled:after { content: "\25BC"; font-size: 11px; }

.indeks__tab .filter-select .select-styled.active { color: #fff; }

.indeks__tab .filter-select .select-styled.active:hover { border-color: #fff transparent transparent transparent; }

.indeks__tab .filter-select .select-styled.active:after { content: "\25B2"; font-size: 12px; color: #fff; }

.indeks__tab .filter-select .select-options { border: 1px solid #C4C4C4; box-sizing: border-box; box-shadow: 0px 4px 20px rgba(68, 81, 106, 0.12); color: #333; }

.indeks__tab .filter-select .select-options li { border-top: none; text-align: left; padding: 16px; border: none; color: #505050; }

.indeks__tab .filter-select .select-options li:active { background: #E8E8E8; color: #333; }

.indeks__list { margin-bottom: 16px; }

.indeks__list .list-content__item--inspire .media__label { color: #F9957F; }

.indeks__list .list-content__item--inspire .media__author { border-top: 1px solid #F9957F; }

.indeks__list .list-content__item--insight .media__label { color: #697F90; }

.indeks__list .list-content__item--insight .media__author { border-top: 1px solid #697F90; }

.indeks__list .list-content__item--interest .media__label { color: #668C85; }

.indeks__list .list-content__item--interest .media__author { border-top: 1px solid #668C85; }

.indeks__list .title { border: none; font-size: 18px; font-family: "castoro", Times New Roman, Georgia, serif; margin: 0; padding-top: 0; }

.indeks__list .media__image { width: 130px; }

.indeks__list .media__icon { top: 90%; left: 60%; width: 30px; height: 30px; }

.indeks__list .media__icon span svg { width: 12px; height: 16px; }

.indeks__list .media__icon-time { position: absolute; right: 0; bottom: 2px; }

.indeks__list .media__icon-time span { font-size: 12px; }

.indeks__list .media__text { line-height: normal; }

.indeks__list .media__label { text-transform: uppercase; margin: 0 0 8px; padding: 0; background: transparent; font-size: 10px; line-height: normal; }

.indeks__list .media__title { font-size: 14px; line-height: 20px; margin-bottom: 12px; max-height: 40px; overflow: hidden; margin-top: 0; text-transform: none; width: 100%; }

.indeks__list .media__title a { color: #333; }

.indeks__list .media__author { color: #333; margin: 0; padding: 8px 0 0; font-size: 10px; text-transform: uppercase; }

.indeks__list .media .icon-label { width: 30px; height: 30px; }

.indeks .pagination { margin: 40px 0 60px; }

.date-calendar { padding: 0; border: none; position: relative; }

.date-calendar input { min-height: 40px; }

.date-calendar:after { content: ""; background: url(../images/calendar.svg) no-repeat; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; z-index: 1; }

.date-calendar ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #333; opacity: 1; /* Firefox */ }

.date-calendar .form-element { background: #f8f8f8; font-size: 14px; padding: 8px; color: #333; border: 1px solid #ededed; font-family: "worksans", Arial, Tahoma, sans-serif; border-radius: unset; max-width: 150px; }

@media only screen and (max-width: 320px) { .date-calendar .form-element { max-width: 130px; } }

.datepick-popup { margin: 10px 0; z-index: 4 !important; }

.datepick-popup .datepick { font-family: "worksans", Arial, Tahoma, sans-serif; color: #333; font-size: 14px; padding: 16px; border: 1px solid #C4C4C4; box-sizing: border-box; box-shadow: 0px 4px 20px rgba(68, 81, 106, 0.12); width: 100% !important; }

.datepick-popup .datepick-cmd-prev, .datepick-popup .datepick-cmd-clear { text-align: left; padding-left: 0; }

.datepick-popup .datepick-cmd-next, .datepick-popup .datepick-cmd-close { text-align: right; padding-right: 0; }

.datepick-popup .datepick-cmd:hover { background: none; color: #333; }

.datepick-popup .datepick-nav, .datepick-popup .datepick-month-header { padding-bottom: 16px; }

.datepick-popup .datepick-month thead { border-bottom: 1px solid #C4C4C4; }

.datepick-popup .datepick-month table th { background: white; padding-bottom: 12px; }

.datepick-popup .datepick-month td { padding-bottom: 8px; }

.datepick-popup .datepick-month td a { padding: 0.5em 0em; }

.datepick-popup .datepick-month td .datepick-today, .datepick-popup .datepick-month td .datepick-highlight { background: #333; }

.datepick-popup .datepick-month-header { justify-content: space-between; }

.datepick-popup .datepick-month-header select:last-child { border-left: 1px solid #ededed; }

.datepick-popup .datepick-month-year { color: #333; border: 1px solid #ededed; max-width: 100px; }

.icon--whatsapp:before, .icon--facebook-circle:before { content: ""; position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; z-index: 1; }

.icon--whatsapp:before { background: url(../images/icons/whatsapp.svg) no-repeat; }

.icon--facebook-circle:before { background: url(../images/icons/facebook.svg) no-repeat; }

.icon__network { position: absolute; z-index: 1; top: 8px; right: 8px; }

.icon__network > img { display: block; max-height: 26px; max-width: 70px; object-fit: contain; }

.header { display: flex; padding: 8px 0; justify-content: space-between; align-items: center; background: #FFFFFF; position: sticky; position: -webkit-sticky; top: 0; z-index: 26; width: 100%; line-height: 1; position: sticky; position: -webkit-sticky; border-bottom: 1px solid #C4C4C4; }

.header__top { width: 100%; display: block; }

.header__left { display: flex; justify-content: flex-start; align-items: center; left: -12px; }

.header__right { display: flex; justify-content: flex-end; align-items: center; }

.header__center { position: absolute; left: 50%; margin-left: -37.5px; }

.header__brand { height: 43px; }

.header__brand img { height: 100%; }

.header__icon { padding: 0 0 0 12px; position: relative; font-size: 18px; }

.header__icon--live { color: #21409A; }

.header__icon--notif { color: #999999; }

.header__user-img { width: 20px; height: 20px; border-radius: 50%; }

.header__signin { display: inline-flex; font-size: 14px; align-items: center; }

.header__signin .icon { font-size: 18px; margin-left: 4px; }

.header--no-border { border-bottom: none; }

.menu-button { cursor: pointer; height: 45px; width: 45px; position: relative; }

.menu-button__wrap { position: absolute; top: 15px; left: 12px; }

.menu-button span { cursor: pointer; height: 2px; width: 20px; background: #000000; position: absolute; display: block; border-radius: 10px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.menu-button span:nth-child(1) { top: -2px; }

.menu-button span:nth-child(2) { top: 7px; }

.menu-button span:nth-child(3) { top: 16px; }

.js-menu-active .menu-button span { background: #f179ac; }

.js-menu-active .menu-button span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }

.js-menu-active .menu-button span:nth-child(2) { opacity: 0; left: -60px; }

.js-menu-active .menu-button span:nth-child(3) { top: 8px; width: 20px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

@keyframes top-x { 0% { transform: translateY(-8px) rotate(0); }
  50% { transform: translateY(0px) rotate(0); }
  100% { transform: translateY(0px) rotate(45deg); } }

@keyframes bottom-x { 0% { transfrom: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(0); }
  100% { transform: translateY(-8px) rotate(-45deg); } }

@keyframes bottom-x2 { 0% { transfrom: translateY(5px) rotate(0);
    width: 18px; }
  50% { transform: translateY(0px) rotate(0); }
  100% { transform: translateY(0px) rotate(-45deg); } }

@keyframes undo-top { 0% { transform: translateY(0px) rotate(45deg); }
  50% { transform: translateY(0px) rotate(0); }
  100% { transform: translateY(-8px) rotate(0); } }

@keyframes undo-bottom { 0% { transform: translateY(-8px) rotate(-45deg); }
  50% { transform: translateY(-8px) rotate(0); }
  100% { transfrom: translateY(0px) rotate(0); } }

.notif__balon { position: absolute; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #FF0000; color: #FFFFFF; font-size: 12px; line-height: 1em; text-align: center; right: -4px; top: 2px; z-index: 1; }

.footer { background-color: #333; color: #fff; padding: 32px 0; transition: all 0.3s ease; }

.footer.small { padding-bottom: 78px !important; }

.footer__logo { width: 70px; }

.footer__logo-detiknetwork { color: #FFFFFF; font-size: 14px; margin-top: 10px; }

.footer__logo-detiknetwork span { position: relative; top: 9px; }

.footer__title { font-size: 16px; font-weight: 700; margin: 20px 0 20px; }

.footer--detail { padding-bottom: 64px; }

.footer__nav { display: flex; }

.footer .nav { font-weight: 600; }

.footer .nav:first-child { width: 35%; }

.footer .nav__item a { color: #fff; padding: 12px 0; }

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

.footer__social a { display: inline-block; margin-right: 16px; color: #fff; font-size: 20px; }

.headline { margin: 26px -18px 20px; position: relative; overflow: hidden; min-height: calc((100vw / 3) / 0.75 + 4px); }

.headline a { color: black; }

.headline .media__text { font-family: "castoro", Times New Roman, Georgia, serif; padding-top: 100%; }

.headline .media__text p { font-family: "worksans", Arial, Tahoma, sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0; letter-spacing: 0.03em; }

.headline__subtitle { font-size: 14px; }

.headline__title { font-size: 24px; line-height: 34px; letter-spacing: 0.04em; margin: 8px 0; }

.headline--subkanal .headline__title { font-weight: 400; letter-spacing: 0.07em; line-height: 34px; }

.headline__slider.slick-dotted.slick-slider { padding-bottom: 0; }

.headline__slider .media__text { padding-bottom: 70px !important; }

.box, .section { position: relative; word-wrap: break-word; padding-top: 16px; margin-bottom: 24px; border-top: 2px solid #f0f0f0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; color: #666666; }

.box__title, .section__title { margin: 0; font-size: 18px; }

.box__header { margin-bottom: 16px; }

.box__header a { padding: 0; }

.box__header--widget { position: relative; z-index: 3; }

.section__header { margin-bottom: 16px; }

.page { position: relative; }

.page__header { position: relative; margin: 12px 0; }

.page__title { margin: 0; font-size: 23px; }

.page__breadcrumb, .page__follow { color: #666666; font-size: 14px; }

.page__breadcrumb a, .page__follow a { color: #666666; }

.page__breadcrumb a { position: relative; }

.page__breadcrumb a:after { content: ">"; padding: 0 4px; }

.page__breadcrumb a:last-child:after { content: ""; }

.page__breadcrumb a:hover { color: #333333; }

.page__share { color: #666666; font-size: 12px; text-align: left; line-height: 1.6; }

.page__share a { color: #666666; }

.sticky { z-index: 2; position: sticky; position: -webkit-sticky; top: 46px; }

.menu { font-weight: 600; position: fixed; top: 62px; width: 100%; background-color: #fff; z-index: 10; overflow-y: scroll; height: calc(100vh - 62px); transition: all 0.3s ease; left: -100%; padding-bottom: 60px; }

.menu.show { left: 0; }

.menu__icon { position: absolute; right: 0; top: 13px; transition: all 0.3s ease; z-index: 5; cursor: pointer; color: #838484; font-size: 13px; }

.menu__list { padding: 0; list-style: none; text-transform: uppercase; }

.menu__list li { padding: 0; position: relative; }

.menu__list li a { padding: 12px 0; display: block; }

.menu__list li.line { margin: 24px -18px; border-bottom: 1px solid #E3E3E3; padding: 0; height: 0; }

.menu__list li.open .menu__icon { transform: rotate(45deg); }

.menu__submenu { list-style: none; font-size: 13px; text-transform: none; font-weight: 500; display: none; }

.menu__submenu li:first-child a { padding-top: 0; }

.menu-active .menu-button span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }

.menu-active .menu-button span:nth-child(2) { opacity: 0; left: -60px; }

.menu-active .menu-button span:nth-child(3) { top: 8px; width: 20px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

.menu-category { border: 1px solid #668C85; display: flex; margin: 32px 0; }

.menu-category a { color: #668C85; width: 100%; display: block; padding: 8px; font-size: 14px; text-align: center; }

.menu-category a.active { background: #668C85; color: #fff; }

.menu-category--primary { border: 1px solid #333; }

.menu-category--primary a { border-right: 1px solid #333; color: #333; }

.menu-category--primary a:last-child { border-right: none; }

.menu-category--primary a.active { background: #333; }

.menu-category--inspire { border: 1px solid #F9957F; }

.menu-category--inspire a { border-right: 1px solid #F9957F; color: #F9957F; }

.menu-category--inspire a:last-child { border-right: none; }

.menu-category--inspire a.active { background: #F9957F; }

.menu-category--insight { border: 1px solid #697F90; }

.menu-category--insight a { border-right: 1px solid #697F90; color: #697F90; }

.menu-category--insight a:last-child { border-right: none; }

.menu-category--insight a.active { background: #697F90; }

.menu-category--interest { border: 1px solid #668C85; }

.menu-category--interest a { border-right: 1px solid #668C85; color: #668C85; }

.menu-category--interest a:last-child { border-right: none; }

.menu-category--interest a.active { background: #668C85; }

.nav { position: relative; list-style: none; margin: 0; padding: 0; font-size: 14px; }

.nav a { display: block; }

.navbar-second .nav a { position: relative; display: inline-block; padding: 4px 8px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; background: #f7f7f7; }

.nav__item { position: relative; padding: 0; }

.second-menu { border-bottom: 1px solid #E3E3E3; }

.second-menu__list { white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; font-size: 0; text-align: center; }

.second-menu__list::-webkit-scrollbar { width: 0px; height: 0; background: transparent; }

.second-menu__list a { color: #838484; font-size: 14px; display: inline-block; padding: 16px 18px; }

.custom .second-menu__list a { color: #505050; }

.custom .second-menu__list a.active { font-weight: 600; }

.second-menu--interest { border-bottom-color: #668C85; }

.second-menu--interest a.active { color: #668C85; border-bottom: 3px solid #668C85; font-weight: 600; }

.second-menu--insight { border-bottom-color: #697F90; }

.second-menu--insight a.active { color: #697F90; border-bottom: 3px solid #697F90; font-weight: 600; }

.second-menu--inspire { border-bottom-color: #F9957F; }

.second-menu--inspire a.active { color: #F9957F; border-bottom: 3px solid #F9957F; font-weight: 600; }

.back-top { width: 40px; height: 40px; position: fixed; right: 8px; bottom: 60px; background: #cccccc; /* The Fallback */ background: rgba(204, 204, 204, 0.5); color: #FFFFFF; display: flex; justify-content: center; align-items: center; font-size: 22px; z-index: 10; }

.back-top a { display: inherit; color: #FFFFFF; }

.droplink { position: relative; margin-left: 8px; }

.droplink a { font-size: 12px; }

.drophover { top: 19px; right: 0; display: none; position: absolute; min-width: 164px; padding-top: 18px; z-index: 30; }

.drophover.open { display: block; }

.drophover ul { list-style: none; padding: 0; margin: 0; position: relative; background-color: #fff; border: 1px solid rgba(196, 196, 196, 0.5); box-shadow: 0px 30px 84px rgba(19, 10, 46, 0.08), 0px 8px 32px rgba(19, 10, 46, 0.07), 0px 3px 14px rgba(19, 10, 46, 0.03), 0px 1px 3px rgba(19, 10, 46, 0.13); }

.drophover ul:before { content: ''; width: 0; height: 0; position: absolute; top: -10px; right: 15px; z-index: 1; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent #ffffff transparent; }

.drophover ul:after { content: ''; width: 0; height: 0; position: absolute; top: -10px; right: 14px; border-style: solid; border-width: 0 9px 10px 9px; border-color: transparent transparent #c4c4c4 transparent; }

.drophover ul li { padding: 0; }

.drophover ul li a { display: block; padding: 16px 20px; font-size: 14px; }

.drophover ul li a:hover { background-color: #ebebeb; }

.list-content--full { margin-left: -18px; margin-right: -18px; position: relative; }

.list-content--full .title { margin: 26px 18px 20px; }

.list-content--full .title-subkanal { margin-left: 18px; margin-right: 18px; }

.list-content--block .media__title { margin-bottom: 8px; }

.list-content--block article, .list-content--block .list-content__item { padding-top: 8px; margin-bottom: 32px; }

.list-content--block article:first-child, .list-content--block .list-content__item:first-child { padding-top: 0; }

.list-content--block article p, .list-content--block .list-content__item p { letter-spacing: 0.03em; line-height: 18px; }

.list-content--small article, .list-content--small .list-content__item { margin-bottom: 24px; }

.list-content--small article .media__image, .list-content--small .list-content__item .media__image { margin-bottom: 16px; }

.list-content--small article .media__title, .list-content--small .list-content__item .media__title { font-size: 16px; line-height: 18px; border-bottom: 2px solid #697F90; display: inline-block; letter-spacing: 0.05em; padding: 0 30px 8px 0; font-weight: normal; }

.list-content--small article p, .list-content--small .list-content__item p { font-size: 12px; line-height: 20px; letter-spacing: 0.05em; margin: 0; }

.list-content--small.list-content--overlay .media__image { margin-bottom: 0; }

.list-content--small.list-content--overlay .media__title { font-size: 20px; line-height: 18px; border: none; padding: 0; }

.list-content--small.list-content--overlay .media--text-overlay .media__text { background: rgba(0, 0, 0, 0.3); padding: 50% 16px 16px; }

.list-content--nogap .list-content__item { padding: 0; margin: 0; }

.list-content--overlay .list-content__item .media__text { padding-top: 100%; padding-bottom: 32px; }

.list-content--slide { white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; font-size: 0; }

.list-content--slide::-webkit-scrollbar { width: 0px; background: transparent; }

.list-content--slide .list-content__item { width: 300px; display: inline-block; margin-left: 18px; white-space: normal; padding-bottom: 0; margin-bottom: 0; }

.list-content--slide .list-content__item:last-child { margin-right: 18px; }

.list-content__item--insight .media__date:before { content: ''; width: 135px; height: 5px; border-top: 1px solid #697F90; position: absolute; top: 0; }

.list-content__item--inspire .media__date:before { content: ''; width: 135px; height: 5px; border-top: 1px solid #F9957F; position: absolute; top: 0; }

.list-content__item--interest .media__date:before { content: ''; width: 135px; height: 5px; border-top: 1px solid #668C85; position: absolute; top: 0; }

.list-content__item--overlay { padding-bottom: 0; }

.list-content__item--overlay .icon-link { background: linear-gradient(179.94deg, rgba(51, 51, 51, 0) 66.1%, rgba(51, 51, 51, 0.48) 113.68%); position: absolute; width: 100%; height: 100%; }

.list-content__item--overlay .icon-link span { position: absolute; bottom: 16px; right: 16px; color: #fff; text-transform: uppercase; }

.list-content__item--overlay .icon-link .icon { font-size: 16px; margin-left: 4px; }

.media--text-overlay .media__text { padding: 100% 18px 32px; }

.media__label { position: relative; top: inherit; left: inherit; text-transform: uppercase; background-color: #fff; border-radius: 0; margin-bottom: 8px; font-weight: 600; line-height: 20px; letter-spacing: 0.04em; }

.media__label--inspire { color: #F9957F; }

.media__label--interest { color: #668C85; }

.media__label--insight { color: #697F90; }

.media__title { font-size: 20px; line-height: 30px; margin-bottom: 8px; font-family: "castoro", Times New Roman, Georgia, serif; letter-spacing: 0.04em; }

.media__author { font-size: 12px; line-height: 20px; letter-spacing: 0.04em; display: inline-block; padding-top: 8px; border-top: 1px solid #fff; color: #fff; text-transform: uppercase; }

.media__author-date { font-size: 10px; line-height: 15px; color: #757575; letter-spacing: 0.02em; }

.media__time { background-color: rgba(255, 255, 255, 0.46); padding: 4px; }

.media__icon { position: absolute; top: 50%; width: 50px; height: 50px; left: 50%; margin-top: -50px; margin-left: -25px; background-color: rgba(255, 255, 255, 0.46); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; color: #333; font-size: 18px; }

.media__icon .icon-play { left: 2px; }

.media__interact { display: flex; width: 100%; justify-content: space-between; align-items: center; }

.media__interact .media__label { background-color: none; padding-left: 0; margin-bottom: 0; }

.media__interact .media__label--insight { color: #697F90; }

.media__interact .media__label--interest { color: #697F90; }

.media__interact .media__label--inspire { color: #F9957F; }

.media__share { font-size: 20px; }

.media__share .icon-share { font-size: 24px; }

.media__date { font-family: "worksans", Arial, Tahoma, sans-serif; position: relative; padding-top: 8px; color: #838484; line-height: 20px; letter-spacing: 0.04em; }

.media__subtitle, .detail__subtitle { text-transform: uppercase; }

.media .interact-btn { position: absolute; top: 26px; color: #fff; right: 16px; z-index: 4; }

.media .interact-btn label { font-size: 28px; }

.media .icon-label { position: absolute; display: flex; width: 44px; height: 44px; background: #fff; top: 0; align-items: center; z-index: 4; justify-content: center; border-radius: 50%; top: 12px; right: 12px; font-size: 18px; }

.media__text .media__desc { font-family: "worksans", Arial, Tahoma, sans-serif; letter-spacing: 0.03em; line-height: 18px; color: #666; font-size: 12px; }

/*--------------------------------------------------------------------------------*/
/*BUTTON & LABEL COLOR VARIATIONS*/
/*--------------------------------------------------------------------------------*/
.btn--blue-base { background: #21409A; color: #FFFFFF; }

.btn--blue-base:hover { color: #FFFFFF; }

.btn--blue-base.btn--outline { border-color: #21409A; color: #21409A; }

.btn--blue-base.btn--link { color: #21409A; }

.btn--blue-light-1 { background: #2c5498; color: #FFFFFF; }

.btn--blue-light-1:hover { color: #FFFFFF; }

.btn--blue-light-1.btn--outline { border-color: #2c5498; color: #2c5498; }

.btn--blue-light-1.btn--link { color: #2c5498; }

.btn--blue-light-2 { background: #007cbd; color: #FFFFFF; }

.btn--blue-light-2:hover { color: #FFFFFF; }

.btn--blue-light-2.btn--outline { border-color: #007cbd; color: #007cbd; }

.btn--blue-light-2.btn--link { color: #007cbd; }

.btn--blue-light-3 { background: #3ea6dd; color: #FFFFFF; }

.btn--blue-light-3:hover { color: #FFFFFF; }

.btn--blue-light-3.btn--outline { border-color: #3ea6dd; color: #3ea6dd; }

.btn--blue-light-3.btn--link { color: #3ea6dd; }

.btn--blue-light-4 { background: #84c6e9; color: #FFFFFF; }

.btn--blue-light-4:hover { color: #FFFFFF; }

.btn--blue-light-4.btn--outline { border-color: #84c6e9; color: #84c6e9; }

.btn--blue-light-4.btn--link { color: #84c6e9; }

.btn--blue-light-5 { background: #e3f5fe; color: rgba(0, 0, 0, 0.75); }

.btn--blue-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--blue-light-5.btn--outline { border-color: #e3f5fe; color: #e3f5fe; }

.btn--blue-light-5.btn--link { color: #e3f5fe; }

.btn--black-base { background: #000000; color: #FFFFFF; }

.btn--black-base:hover { color: #FFFFFF; }

.btn--black-base.btn--outline { border-color: #000000; color: #000000; }

.btn--black-base.btn--link { color: #000000; }

.btn--black-light-1 { background: #333333; color: #FFFFFF; }

.btn--black-light-1:hover { color: #FFFFFF; }

.btn--black-light-1.btn--outline { border-color: #333333; color: #333333; }

.btn--black-light-1.btn--link { color: #333333; }

.btn--black-light-2 { background: #666666; color: #FFFFFF; }

.btn--black-light-2:hover { color: #FFFFFF; }

.btn--black-light-2.btn--outline { border-color: #666666; color: #666666; }

.btn--black-light-2.btn--link { color: #666666; }

.btn--black-light-3 { background: #999999; color: #FFFFFF; }

.btn--black-light-3:hover { color: #FFFFFF; }

.btn--black-light-3.btn--outline { border-color: #999999; color: #999999; }

.btn--black-light-3.btn--link { color: #999999; }

.btn--black-light-4 { background: #cccccc; color: rgba(0, 0, 0, 0.75); }

.btn--black-light-4:hover { color: rgba(0, 0, 0, 0.75); }

.btn--black-light-4.btn--outline { border-color: #cccccc; color: #cccccc; }

.btn--black-light-4.btn--link { color: #cccccc; }

.btn--black-light-5 { background: #e6e6e6; color: rgba(0, 0, 0, 0.75); }

.btn--black-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--black-light-5.btn--outline { border-color: #e6e6e6; color: #e6e6e6; }

.btn--black-light-5.btn--link { color: #e6e6e6; }

.btn--white-base { background: #FFFFFF; color: rgba(0, 0, 0, 0.75); }

.btn--white-base:hover { color: rgba(0, 0, 0, 0.75); }

.btn--white-base.btn--outline { border-color: #FFFFFF; color: #FFFFFF; }

.btn--white-base.btn--link { color: #FFFFFF; }

.btn--white-dark-1 { background: #f7f7f7; color: rgba(0, 0, 0, 0.75); }

.btn--white-dark-1:hover { color: rgba(0, 0, 0, 0.75); }

.btn--white-dark-1.btn--outline { border-color: #f7f7f7; color: #f7f7f7; }

.btn--white-dark-1.btn--link { color: #f7f7f7; }

.btn--white-dark-2 { background: #f0f0f0; color: rgba(0, 0, 0, 0.75); }

.btn--white-dark-2:hover { color: rgba(0, 0, 0, 0.75); }

.btn--white-dark-2.btn--outline { border-color: #f0f0f0; color: #f0f0f0; }

.btn--white-dark-2.btn--link { color: #f0f0f0; }

.btn--orange-base { background: #EE4023; color: #FFFFFF; }

.btn--orange-base:hover { color: #FFFFFF; }

.btn--orange-base.btn--outline { border-color: #EE4023; color: #EE4023; }

.btn--orange-base.btn--link { color: #EE4023; }

.btn--orange-light-1 { background: #ef672f; color: #FFFFFF; }

.btn--orange-light-1:hover { color: #FFFFFF; }

.btn--orange-light-1.btn--outline { border-color: #ef672f; color: #ef672f; }

.btn--orange-light-1.btn--link { color: #ef672f; }

.btn--orange-light-2 { background: #f7931d; color: #FFFFFF; }

.btn--orange-light-2:hover { color: #FFFFFF; }

.btn--orange-light-2.btn--outline { border-color: #f7931d; color: #f7931d; }

.btn--orange-light-2.btn--link { color: #f7931d; }

.btn--orange-light-3 { background: #f9ba6f; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-3:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-3.btn--outline { border-color: #f9ba6f; color: #f9ba6f; }

.btn--orange-light-3.btn--link { color: #f9ba6f; }

.btn--orange-light-4 { background: #fbd3a3; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-4:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-4.btn--outline { border-color: #fbd3a3; color: #fbd3a3; }

.btn--orange-light-4.btn--link { color: #fbd3a3; }

.btn--orange-light-5 { background: #fce7cc; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-5.btn--outline { border-color: #fce7cc; color: #fce7cc; }

.btn--orange-light-5.btn--link { color: #fce7cc; }

.btn--pink-base { background: #CC2267; color: #FFFFFF; }

.btn--pink-base:hover { color: #FFFFFF; }

.btn--pink-base.btn--outline { border-color: #CC2267; color: #CC2267; }

.btn--pink-base.btn--link { color: #CC2267; }

.btn--pink-light-1 { background: #ec1b7a; color: #FFFFFF; }

.btn--pink-light-1:hover { color: #FFFFFF; }

.btn--pink-light-1.btn--outline { border-color: #ec1b7a; color: #ec1b7a; }

.btn--pink-light-1.btn--link { color: #ec1b7a; }

.btn--pink-light-2 { background: #e375ad; color: #FFFFFF; }

.btn--pink-light-2:hover { color: #FFFFFF; }

.btn--pink-light-2.btn--outline { border-color: #e375ad; color: #e375ad; }

.btn--pink-light-2.btn--link { color: #e375ad; }

.btn--pink-light-3 { background: #f179ac; color: #FFFFFF; }

.btn--pink-light-3:hover { color: #FFFFFF; }

.btn--pink-light-3.btn--outline { border-color: #f179ac; color: #f179ac; }

.btn--pink-light-3.btn--link { color: #f179ac; }

.btn--pink-light-4 { background: #f2c0d9; color: rgba(0, 0, 0, 0.75); }

.btn--pink-light-4:hover { color: rgba(0, 0, 0, 0.75); }

.btn--pink-light-4.btn--outline { border-color: #f2c0d9; color: #f2c0d9; }

.btn--pink-light-4.btn--link { color: #f2c0d9; }

.btn--pink-light-5 { background: #f9e2ed; color: rgba(0, 0, 0, 0.75); }

.btn--pink-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--pink-light-5.btn--outline { border-color: #f9e2ed; color: #f9e2ed; }

.btn--pink-light-5.btn--link { color: #f9e2ed; }

.btn--utility-base { background: #6D8591; color: #FFFFFF; }

.btn--utility-base:hover { color: #FFFFFF; }

.btn--utility-base.btn--outline { border-color: #6D8591; color: #6D8591; }

.btn--utility-base.btn--link { color: #6D8591; }

.btn--utility-success { background: #11aa3d; color: #FFFFFF; }

.btn--utility-success:hover { color: #FFFFFF; }

.btn--utility-success.btn--outline { border-color: #11aa3d; color: #11aa3d; }

.btn--utility-success.btn--link { color: #11aa3d; }

.btn--utility-warning { background: #FCB715; color: #FFFFFF; }

.btn--utility-warning:hover { color: #FFFFFF; }

.btn--utility-warning.btn--outline { border-color: #FCB715; color: #FCB715; }

.btn--utility-warning.btn--link { color: #FCB715; }

.btn--utility-error { background: #FF0000; color: #FFFFFF; }

.btn--utility-error:hover { color: #FFFFFF; }

.btn--utility-error.btn--outline { border-color: #FF0000; color: #FF0000; }

.btn--utility-error.btn--link { color: #FF0000; }

.btn { border-radius: 0; }

.btn--primary { background-color: #333; color: #fff; }

.btn--primary.btn--outline { border: 1px solid #333; color: #333; }

.btn--soft { color: #838484; }

.btn--full { width: 100%; }

.btn--link-underline { text-decoration: underline; }

.btn--outline[disabled], .btn--outline.disabled { color: #C4C4C4; border-color: #C4C4C4; }

.btn__event { display: flex; justify-content: center; align-items: center; font-weight: 600; letter-spacing: 0.04em; }

.btn__event:hover { color: #fff; }

.btn__event svg { margin-left: 8px; }

[disabled], .disabled { color: #C4C4C4; border-color: #C4C4C4; }

[disabled]:hover, .disabled:hover { background: white; color: #C4C4C4; border-color: #C4C4C4; }

.show-more-content { height: 0; overflow: hidden; }

.foto-pop-up .detail { color: #FFFFFF; max-width: 750px; margin-top: 16px; margin-left: auto; margin-right: auto; }

.detail__header { text-align: center; padding: 16px 0; position: relative; }

.detail__header-icon { position: absolute; right: 0; top: 12px; font-size: 22px; }

.detail__label { font-size: 12px; text-transform: uppercase; font-weight: 600; }

.detail__label--inspire { color: #F9957F; }

.detail__label--interest { color: #668C85; }

.detail__label--insight { color: #697F90; }

.detail__title { font-weight: 500; margin: 8px 0; color: #333; font-size: 28px; line-height: 32px; }

.foto-pop-up .detail__title { color: #FFFFFF; margin-bottom: 28px; }

.dropdown-wrap .detail__title { font-size: 14px; padding-bottom: 12px; margin: 0; color: #999999; }

.detail__artikel-selanjutnya .detail__title { font-size: 14px; position: absolute; top: 16px; margin-bottom: 0; }

.detail__date { display: inline-block; margin-top: 4px; color: #666666; font-size: 12px; }

.foto-pop-up .detail__date { margin-bottom: 0; }

.detail__subtitle { font-size: 18px; margin-bottom: 0; }

.detail__author { display: flex; padding: 16px; color: #fff; }

.detail__author--inspire { background-color: #F9957F; }

.detail__author--interest { background-color: #668C85; }

.detail__author--insight { background-color: #697F90; }

.detail__author-img { flex: 0 0 50px; margin-right: 16px; }

.detail__author-user { width: 50px; border-radius: 50%; border: 1px solid #fff; }

.detail__author-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }

.detail__media { padding: 0; position: relative; clear: both; }

.detail__media.no-strech { margin: 0; }

.detail__media-image > img { width: 100%; max-width: none; position: relative; z-index: 2; }

.detail__media-image .img-zoomout { width: 100%; max-width: 100%; }

.detail__media-image-wrap--rounded, .detail__media-image-wrap--rounded .slick-slider { overflow: hidden; border-radius: 8px; }

.foto-pop-up .detail__media-image { margin-bottom: 0; }

.detail__media-caption { display: inline-block; margin-top: 4px; color: #333333; font-size: 12px; padding: 4px 0; overflow-wrap: break-word; width: 100%; text-align: center; }

.foto-pop-up .detail__media-caption { color: #FFFFFF; font-size: 14px; margin-top: 16px; }

.no-strech .detail__media-caption { padding-left: 0; padding-right: 0; }

.detail__media.detail__media--rounded { margin: 0; }

.detail__media.detail__media--rounded img { border-radius: 8px; }

.foto-pop-up .detail__media { margin-bottom: 0; }

.detail__body { margin-top: 16px; font-size: 16px; line-height: 28px; color: #333; word-break: break-word; }

.detail__body-title { font-size: 18px; font-weight: 600; font-family: "worksans", Arial, Tahoma, sans-serif; margin-bottom: 16px; }

.detail__body-title--font2 { font-family: "castoro", Times New Roman, Georgia, serif; font-weight: 400; }

.detail__body-tag .nav__item { font-size: 12px; line-height: 18px; border: 1px solid #333; color: #333; padding: 4px 8px; display: inline-block; margin: 0 16px 16px 0; text-transform: uppercase; }

.detail--inspire .detail__body-tag .nav__item { border-color: #F9957F; color: #F9957F; }

.detail--interest .detail__body-tag .nav__item { border-color: #668C85; color: #668C85; }

.detail--insight .detail__body-tag .nav__item { border-color: #697F90; color: #697F90; }

.detail__body-text > a, .detail__body-text p > a { text-decoration: underline; }

.detail__body-text .label { display: block; text-align: left; }

.detail__body-text img { max-width: 100%; }

.detail__body-text--first-cap::first-letter { font-size: 50px; float: left; padding-right: 5px; vertical-align: top; height: 50px; width: 50px; margin-top: -10px; margin-bottom: -10px; }

.detail__body-text p { overflow-wrap: break-word; }

.detail__body-text h1, .detail__body-text h2, .detail__body-text h3, .detail__body-text h4, .detail__body-text h5, .detail__body-text h6 { text-transform: uppercase; font-weight: 400; margin: 32px 0 24px; }

.detail__info-time { border-top: 1px solid #333; display: flex; font-size: 12px; justify-content: space-between; padding: 24px 0; line-height: 24px; }

.detail__info-time a { display: inline-flex; font-size: 24px; }

.detail__info-desc { width: 250px; }

.detail__share-list { display: flex; align-items: center; }

.detail__share-list a.icon-item { margin-right: 16px; }

.detail__share-list .icon-item--round { display: inline-flex; background-color: #333; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }

.detail__share-list .icon-item .icon-linkedin { font-size: 14px; }

.detail__share-list .icon-item.interact-btn--bookmark label { font-size: 32px; }

.detail__share--sticky { box-shadow: 0px 4px 40px rgba(70, 83, 118, 0.1); border-top: 1px solid #C4C4C4; border-bottom: 1px solid #C4C4C4; position: fixed; bottom: 0; width: 100%; left: 0; background-color: #fff; z-index: 4; }

.detail__share--sticky .detail__share-list { margin-left: 18px; margin-right: 18px; }

.detail__share--sticky .detail__share-list .icon-item { margin-right: 8px; font-size: 12px; }

.detail__share--sticky .detail__share-list .icon-item--round { width: 24px; height: 24px; }

.detail__share--sticky .detail__share-list .icon-item.interact-btn--bookmark label { font-size: 24px; }

.detail__share--sticky .detail__share-list .icon-item.interact-btn--bookmark label:before { content: "\e91a"; }

.detail__share--sticky .detail__share-list .icon-item.interact-btn--bookmark input { display: none; }

.detail__share--sticky .detail__share-list .icon-item.interact-btn--bookmark input:checked + label:before { content: "\e910"; }

.detail__share--sticky .detail__share-list .btn { margin-left: auto; width: 40%; }

.detail__anchor { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; background: #f0f0f0; margin-bottom: 12px; margin-top: 12px; }

.detail__multiple .detail__anchor { font-size: 14px; text-align: left; display: inline-block; background: none; }

.detail__multiple-box .detail__anchor { padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; }

.detail__anchor.detail__anchor--multi { background: #FFFFFF; }

.detail__anchor a { color: white; }

.detail__anchor-icon { border-radius: 50%; width: 30px; height: 30px; background: #999999; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 8px 0; }

.detail__multiple .detail__anchor-icon { border-radius: 50%; width: 30px; height: 30px; background: #cccccc; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 8px 2px; color: #FFFFFF; }

.detail__anchor--multi .detail__anchor-icon { background: #cccccc; margin: 0 2px; width: 25px; height: 25px; font-size: 14px; }

.detail__anchor-icon.detail__anchor-icon--active { background: #f179ac; }

.detail__anchor-numb { color: #ef672f; }

.detail__multiple .detail__anchor-numb { border-radius: 50%; color: #f179ac; border: 1px solid #f179ac; width: 25px; height: 25px; display: inline-block; margin: 0; text-align: center; line-height: 27px; }

.detail__multiple .detail__anchor-numb.detail__anchor-numb--active { color: #FFFFFF; background: #f179ac; }

.detail__like { border: 1px solid #333; padding: 12px; display: inline-flex; align-items: center; margin: 32px 0; }

.detail--inspire .detail__like { border-color: #F9957F; }

.detail--interest .detail__like { border-color: #668C85; }

.detail--insight .detail__like { border-color: #697F90; }

.detail__like span { margin-right: 16px; }

.detail__like a { margin: 0 10px; font-size: 20px; }

.detail__like a.article-dislike { margin-right: 0; }

.related-article { padding: 20px 0; margin-bottom: 16px; }

.detail--inspire .related-article { background-color: #FEF5F1; }

.detail--interest .related-article { background-color: #EAF1E9; }

.detail--insight .related-article { background-color: #E6F3F5; }

.related-article .title { border: none; font-size: 18px; font-family: "castoro", Times New Roman, Georgia, serif; margin: 0; padding-top: 0; }

.related-article .media__image { width: 130px; }

.related-article .media__text { line-height: normal; }

.related-article .media__label { text-transform: uppercase; margin: 0 0 8px; padding: 0; background: transparent; color: #838484; font-size: 10px; line-height: normal; }

.detail--inspire .related-article .media__label { color: #F9957F; }

.detail--interest .related-article .media__label { color: #668C85; }

.detail--insight .related-article .media__label { color: #697F90; }

.related-article .media__title { font-size: 14px; line-height: 20px; margin-bottom: 8px; height: 40px; overflow: hidden; margin-top: 0; text-transform: none; width: 100%; }

.related-article .media__author { color: #333; margin: 0; padding: 8px 0 0; font-size: 10px; }

.detail--inspire .related-article .media__author { border-color: #F9957F; }

.detail--interest .related-article .media__author { border-color: #668C85; }

.detail--insight .related-article .media__author { border-color: #697F90; }

.related-article .media .icon-label { width: 30px; height: 30px; top: 4px; right: 4px; }

.interact-btn label { display: block; font-family: "cxomedia"; margin: 0; }

.interact-btn input { display: none; }

.interact-btn--bookmark label { font-size: 20px; }

.interact-btn--bookmark label:before { content: "\e922"; }

.interact-btn--bookmark input { display: none; }

.interact-btn--bookmark input:checked + label:before { content: "\e91b"; }

.interact-btn--like label { font-size: 20px; }

.interact-btn--like label:before { content: "\e90f"; }

.interact-btn--like input { display: none; }

.interact-btn--like input:checked + label:before { content: "\e90e"; }

.interact-btn--dislike label { font-size: 20px; }

.interact-btn--dislike label:before { content: "\e90d"; }

.interact-btn--dislike input { display: none; }

.interact-btn--dislike input:checked + label:before { content: "\e90c"; }

.audio { background: #fff; position: fixed; width: 100%; bottom: 0; left: 0; padding: 12px 20px; box-shadow: 0px 4px 40px rgba(70, 83, 118, 0.1); border: 1px solid #C4C4C4; border-left: 0; border-right: 0; z-index: 4; }

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

.audio__title { border-right: 1px solid #333; padding: 0 8px 0 0; font-size: 12px; font-weight: 500; }

.audio__narrator { padding: 0 8px; font-size: 10px; }

.audio__player { padding: 8px 0 0; }

.audio__hide { margin-left: auto; cursor: pointer; transition: all 0.3s ease; }

.audio__hide.hide-player { transform: rotate(180deg); }

.audio .icon { font-size: 20px; }

.quotesisip { position: relative; margin: 10px 0 20px; padding: 0; border: 0; width: 100%; }

.quotesisip td { border: none; padding: 0; }

.quotesisip span { width: 5px; height: 100%; background: #21409A; position: absolute; }

.quotesisip blockquote { display: block; width: 100%; font-size: 20px; font-style: italic; margin: 0 0 12px 0; padding: 8px 12px 0 24px; position: relative; z-index: 1; }

.quotesisip cite { font-size: 14px; display: block; margin-top: 4px; margin-left: 24px; }

.event-box { letter-spacing: 0.03em; color: #838484; border-top: 1px solid #C4C4C4; }

.event-box__title { font-size: 16px; line-height: 26px; letter-spacing: 0.04em; color: #333; font-weight: 500; margin-bottom: 8px; }

.program-info { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 80px 80px; text-align: center; padding: 24px 0 8px; border-top: 1px solid #C4C4C4; border-bottom: 1px solid #C4C4C4; }

.program-info--noborder { border: none; }

.program-info__number { font-size: 28px; font-family: "castoro", Times New Roman, Georgia, serif; color: #333; display: flex; flex-flow: column; align-items: center; }

.program-info__desc { font-family: "worksans", Arial, Tahoma, sans-serif; font-size: 12px; color: #838484; line-height: 16px; }

.pic_artikel_sisip_table { text-align: center; margin-bottom: 20px; color: #666666; font-size: 12px; line-height: 120%; width: 100%; table-layout: fixed; }

.pic_artikel_sisip_table td { border: none; padding: 0; }

.pic_artikel_sisip { text-align: center; color: #999999; font-size: 12px; line-height: 120%; width: 100%; }

.pic_artikel_sisip .pic { position: relative; display: inline-block; max-width: 100%; text-align: center; }

.pic_artikel_sisip .pic img { position: relative; max-width: 100%; max-height: 400px; height: auto; overflow: hidden; display: block; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-left: auto; margin-right: auto; margin-bottom: 16px; }

.pic_artikel_sisip .pic > span { position: relative; display: block; z-index: 1; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }

.shop-box { width: 250px; margin: 24px auto 24px; padding: 30px; position: relative; }

.shop-box:after { content: ''; position: absolute; top: 8px; bottom: -8px; left: 8px; right: -8px; pointer-events: none; }

.shop-box--interest { background: #EAF1E9; }

.shop-box--interest:after { border: 1px solid #668C85; }

.shop-box--insight { background: #E6F3F5; }

.shop-box--insight:after { border: 1px solid #697F90; }

.shop-box--inspire { background: #FEF5F1; }

.shop-box--inspire:after { border: 1px solid #F9957F; }

.shop-box__img { width: 100%; margin-bottom: 8px; }

.shop-box__title { font-size: 16px; line-height: 26px; margin-bottom: 8px; }

.shop-box__caption { color: #838484; font-size: 14px; font-family: "worksans", Arial, Tahoma, sans-serif; line-height: 20px; margin-bottom: 8px; }

.shop-box__price { font-size: 14px; font-family: "worksans", Arial, Tahoma, sans-serif; margin-bottom: 16px; }

.shop-box .btn { font-size: 12px; }

.shop-box-full { padding: 24px; display: flex; }

.shop-box-full--interest { background: #EAF1E9; }

.shop-box-full--insight { background: #E6F3F5; }

.shop-box-full--inspire { background: #FEF5F1; }

.shop-box-full__wrap { display: flex; }

.shop-box-full .line { border-top: 1px solid #000; width: calc(100% - 600px); align-self: center; margin: auto; }

.shop-box-full__title { max-width: 250px; font-size: 28px; line-height: 38px; }

.shop-box-full__price { font-size: 16px; font-family: "worksans", Arial, Tahoma, sans-serif; }

.shop-box-full__img { width: 110px; flex: 110px 0 0; }

.shop-box-full .btn { align-self: center; margin-left: auto; }

.shop-link__desc { color: #000; font-family: "worksans", Arial, Tahoma, sans-serif; }

.shop-link__price { color: #F9957F; }

.shop-link .btn { font-size: 14px; }

@font-face { font-family: "cxomedia"; font-weight: normal; font-style: normal; src: local("castoro, Times New Roman, Georgia, serif"), url("../../assets/fonts/fonticon/cxomedia.woff") format("woff"), url("../../assets/fonts/fonticon/cxomedia.ttf") format("truetype"); font-display: swap; }

.icon { line-height: 0; display: inline-block; position: relative; top: 0; vertical-align: baseline; }

.btn .icon { margin-top: -1px; }

.icon--xxl { font-size: 256px; }

.icon--xl { font-size: 128px; }

.icon--lg { font-size: 64px; }

.icon--md { font-size: 32px; }

.icon--sm { font-size: 24px; }

.icon--xs { font-size: 16px; }

[data-icon]:before { font-family: "cxomedia" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "cxomedia" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

.icon-plus:before { content: "\e923"; }

.icon-bookmark-detail-fill:before { content: "\e910"; }

.icon-bookmark-detail:before { content: "\e91a"; }

.icon-bookmark-fill:before { content: "\e91b"; }

.icon-bookmark:before { content: "\e922"; }

.icon-share:before { content: "\e905"; }

.icon-circle-left:before { content: "\e900"; }

.icon-allio:before { content: "\e901"; }

.icon-circle-arrow-right:before { content: "\e902"; }

.icon-arrow-left:before { content: "\e903"; }

.icon-arrow-right:before { content: "\e904"; }

.icon-mail:before { content: "\e906"; }

.icon-facebook-circle:before { content: "\e907"; }

.icon-linkedin:before { content: "\e908"; }

.icon-instagram:before { content: "\e909"; }

.icon-twitter:before { content: "\e90a"; }

.icon-whatsapp:before { content: "\e90b"; }

.icon-dislike-fill:before { content: "\e90c"; }

.icon-dislike:before { content: "\e90d"; }

.icon-like-fill:before { content: "\e90e"; }

.icon-like:before { content: "\e90f"; }

.icon-close:before { content: "\e911"; }

.icon-share-link:before { content: "\e912"; }

.icon-up:before { content: "\e913"; }

.icon-down:before { content: "\e914"; }

.icon-check:before { content: "\e915"; }

.icon-youtube:before { content: "\e916"; }

.icon-tiktok:before { content: "\e917"; }

.icon-linkedin-fill:before { content: "\e918"; }

.icon-instagram-fill:before { content: "\e919"; }

.icon-play:before { content: "\e91c"; }

.icon-notification:before { content: "\e91d"; }

.icon-google:before { content: "\e91e"; }

.icon-facebook:before { content: "\e91f"; }

.icon-search:before { content: "\e920"; }

.icon-user:before { content: "\e921"; }

.icon-shop:before { content: "\e924"; }

.icon-long-arrow-right:before { content: "\e925"; }

.icon-angle-right:before { content: "\e926"; }

.icon-angle-left:before { content: "\e927"; }

.form-check--block { display: block; }

.form__sign .form-block { margin-bottom: 24px; }

.form__sign input.form-element { border-radius: 0; font-family: "worksans", Arial, Tahoma, sans-serif; }

.form__sign input.form-element::-webkit-input-placeholder { color: #838484; }

.form__sign input.form-element:-moz-placeholder { color: #838484; }

.form__sign input.form-element::-moz-placeholder { color: #838484; }

.form__sign input.form-element:-ms-input-placeholder { color: #838484; }

.form__sign input.form-element:focus::-webkit-input-placeholder { color: #838484; }

.form__sign input.form-element:focus:-moz-placeholder { color: #838484; }

.form__sign input.form-element:focus::-moz-placeholder { color: #838484; }

.form__sign input.form-element:focus:-ms-input-placeholder { color: #838484; }

.form__icon .form-block { position: relative; display: flex; width: 100%; }

.menu .form__icon .form-block, .search-box .form__icon .form-block { border-bottom: 1px solid #C4C4C4; }

.form__icon .icon-item { position: absolute; left: 8px; top: 6px; font-size: 18px; }

.menu .form__icon .icon-item, .search-box .form__icon .icon-item { left: 0; top: 0; color: #838484; font-size: 22px; }

.form__icon input.form-element { border-radius: 0; font-family: "worksans", Arial, Tahoma, sans-serif; width: 100%; }

.footer .form__icon input.form-element { background: #333; color: #fff; padding-left: 40px; }

.footer .form__icon input.form-element::-webkit-input-placeholder { color: white; }

.footer .form__icon input.form-element:-moz-placeholder { color: white; }

.footer .form__icon input.form-element::-moz-placeholder { color: white; }

.footer .form__icon input.form-element:-ms-input-placeholder { color: white; }

.footer .form__icon input.form-element:focus::-webkit-input-placeholder { color: transparent; }

.footer .form__icon input.form-element:focus:-moz-placeholder { color: transparent; }

.footer .form__icon input.form-element:focus::-moz-placeholder { color: transparent; }

.footer .form__icon input.form-element:focus:-ms-input-placeholder { color: transparent; }

.menu .form__icon input.form-element, .search-box .form__icon input.form-element { background: transparent; color: #333; border: none; padding-left: 32px; }

.menu .form__icon input.form-element::-webkit-input-placeholder, .search-box .form__icon input.form-element::-webkit-input-placeholder { color: gray; }

.menu .form__icon input.form-element:-moz-placeholder, .search-box .form__icon input.form-element:-moz-placeholder { color: gray; }

.menu .form__icon input.form-element::-moz-placeholder, .search-box .form__icon input.form-element::-moz-placeholder { color: gray; }

.menu .form__icon input.form-element:-ms-input-placeholder, .search-box .form__icon input.form-element:-ms-input-placeholder { color: gray; }

.menu .form__icon input.form-element:focus::-webkit-input-placeholder, .search-box .form__icon input.form-element:focus::-webkit-input-placeholder { color: transparent; }

.menu .form__icon input.form-element:focus:-moz-placeholder, .search-box .form__icon input.form-element:focus:-moz-placeholder { color: transparent; }

.menu .form__icon input.form-element:focus::-moz-placeholder, .search-box .form__icon input.form-element:focus::-moz-placeholder { color: transparent; }

.menu .form__icon input.form-element:focus:-ms-input-placeholder, .search-box .form__icon input.form-element:focus:-ms-input-placeholder { color: transparent; }

.form__icon .btn { border-radius: 0; }

.menu .form__icon .btn, .search-box .form__icon .btn { background: transparent; padding-right: 0; }

.form-inline { width: 100%; }

.form--cxo .form-block { border-bottom: 1px solid #C4C4C4; }

.form--cxo .form-block--btn .btn { position: absolute; right: 0; top: 8px; font-weight: 500; font-size: 12px; }

.form--cxo .form-block--btn input { padding-right: 50px; }

.form--cxo label { margin: 0; text-transform: uppercase; font-weight: 700; font-size: 12px; }

.form--cxo input.form-element { color: #707070; font-family: "worksans", Arial, Tahoma, sans-serif; letter-spacing: 0.04em; border: none; padding: 0 0 8px; }

.form--cxo input.form-element::-webkit-input-placeholder { color: white; }

.form--cxo input.form-element:-moz-placeholder { color: white; }

.form--cxo input.form-element::-moz-placeholder { color: white; }

.form--cxo input.form-element:-ms-input-placeholder { color: white; }

.form--cxo input.form-element:focus::-webkit-input-placeholder { color: transparent; }

.form--cxo input.form-element:focus:-moz-placeholder { color: transparent; }

.form--cxo input.form-element:focus::-moz-placeholder { color: transparent; }

.form--cxo input.form-element:focus:-ms-input-placeholder { color: transparent; }

.radio { display: block; cursor: pointer; user-select: none; text-align: center; }

.radio + .radio { margin-top: 7px; }

.radio input { display: none; }

.radio input + span { display: inline-block; position: relative; padding-bottom: 25px; font-weight: 500; }

.radio input + span:before { content: ''; display: block; position: absolute; bottom: 0px; left: 50%; border-radius: 50%; margin-left: -8px; width: 16px; height: 16px; border: 1px solid #ccc; background: #fff; }

.radio input + span:after { content: ''; display: block; width: 10px; height: 10px; background: #222; position: absolute; border-radius: 50%; bottom: 3px; left: 50%; margin-left: -5px; opacity: 0; transform: scale(0, 0); transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53); }

.radio input:checked + span:after { opacity: 1; transform: scale(1, 1); }

.img-check input[type="checkbox"][id^="cb"] { display: none; }

.img-check label { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.img-check label:before { font-family: 'cxomedia'; content: " "; display: block; border-radius: 50%; position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; text-align: center; font-size: 25px; line-height: 25px; transition-duration: 0.4s; transform: scale(0); z-index: 4; }

.img-check label:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.55); }

.img-check label img { transition-duration: 0.2s; transform-origin: 50% 50%; }

.img-check label .topic-name { position: absolute; bottom: 0; left: 0; padding: 8px; color: #fff; font-weight: 600; font-size: 12px; line-height: 20px; letter-spacing: 0.03em; z-index: 3; }

.img-check input:checked + label { border-color: #ddd; }

.img-check input:checked + label::before { content: "\e915"; color: #fff; background-color: #C4C4C4; transform: scale(1); }

.img-check input:checked + label::after { opacity: 0; }

.img-check input:checked + label img { z-index: -1; }

/* END CHECKBOX STYLE */
.filter-select .select { cursor: pointer; display: inline-block; position: relative; font-size: 14px; color: #333; border: 1px solid #333; padding-right: 16px; font-family: "worksans", Arial, Tahoma, sans-serif; }

.filter-select .select-hidden { display: inline-block; visibility: hidden; padding-right: 20px !important; }

.filter-select .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; padding: 8px; line-height: 24px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }

.filter-select .select-styled:after { font-family: "cxomedia"; width: 20px; right: 4px; height: 37px; content: "\e914"; color: #333; position: absolute; top: 0; display: block; line-height: 40px; font-size: 18px; }

.filter-select .select-styled:hover { background-color: #333; color: #fff; }

.filter-select .select-styled:hover:after { color: #fff; }

.filter-select .select-styled.active { background-color: #333; color: #fff; }

.filter-select .select-styled.active:hover { border-color: #fff transparent transparent transparent; }

.filter-select .select-styled.active:after { top: 0; content: "\e913"; color: #fff; }

.filter-select .select-options { display: none; position: absolute; top: 130%; right: -1px; left: 0; z-index: 9; margin: 0; padding: 0; list-style: none; background-color: #fff; border: 1px solid #333; }

.filter-select .select-options li { margin: 0; text-align: center; border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; -ms-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; transition: all 0.15s ease-in; border-bottom: 1px solid #333; }

.filter-select .select-options li:last-child { border-bottom: none; }

.filter-select .select-options li:hover { color: #fff; background: #333; }

.filter-select .select-options li[rel="hide"] { display: none; }

.ads { text-align: center; margin-left: -18px; margin-right: -18px; }

.btn--back { background: #F7F7F7; border-radius: 4px; font-size: 12px; line-height: 17px; color: #000; padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.detail--komentar .detail__header { text-align: left; }

.detail--komentar .detail__title { font-weight: 700; color: #000000; margin-bottom: 0; font-size: 18px; font-family: Helvetica-FF, Arial, Tahoma, sans-serif; margin-top: 0; }

#comm1 { border: none; padding-top: 0; }

.comment-body .comment-form__label, .comment-body .comment-lead, .comment-body .comment__empty__title, .comment-body .comment__empty__msg { font-family: Helvetica-FF, Arial, Tahoma, sans-serif; }

.comment-body .list-content .media__date, .comment-body .list-content .media__label, .comment-body .list-content .media__user, .comment-body .list-content .media__text .media__desc { font-family: Helvetica-FF, Arial, Tahoma, sans-serif; }

.comment-body .btn { font-family: Helvetica-FF, Arial, Tahoma, sans-serif; border-radius: 8px; }

.cb-enhance .list-content__item--inspire .media__label { color: #F9957F; }

.cb-enhance .list-content__item--inspire .media__author { border-top: 1px solid #F9957F; }

.cb-enhance .list-content__item--insight .media__label { color: #697F90; }

.cb-enhance .list-content__item--insight .media__author { border-top: 1px solid #697F90; }

.cb-enhance .list-content__item--interest .media__label { color: #668C85; }

.cb-enhance .list-content__item--interest .media__author { border-top: 1px solid #668C85; }

.cb-enhance .media__icon { top: 90%; left: 60%; width: 30px; height: 30px; }

.cb-enhance .media__icon span svg { width: 12px; height: 16px; }

.cb-enhance .media__icon-time { position: absolute; right: 0; bottom: 2px; }

.cb-enhance .media__icon-time span { font-size: 12px; }

.cb-enhance .media__text { line-height: normal; }

.cb-enhance .media .icon-label { width: 30px; height: 30px; top: 4px; right: 4px; }

.cb-enhance__slide .list-content__item { width: 250px; display: inline-flex; }

.cb-enhance__slide .list-content__item:first-child { margin-top: 0; }

.cb-enhance__slide .media__label { font-size: 10px; line-height: 16px; letter-spacing: 0.04em; padding-left: 0; margin-bottom: 4px; }

.cb-enhance__slide .media__title { font-size: 14px; line-height: 20px; letter-spacing: 0.04em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #333333; margin-bottom: 0; }

.cb-enhance__slide .media__icon { top: 75%; left: 55%; }

.cb-enhance__list { margin-bottom: 16px; }

.cb-enhance__list .media__image { width: 130px; }

.cb-enhance__list .media__label { text-transform: uppercase; margin: 0 0 8px; padding: 0; background: transparent; font-size: 10px; line-height: normal; }

.cb-enhance__list .media__title { font-size: 14px; line-height: 20px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; text-transform: none; width: 100%; }

.cb-enhance__list .media__title a { color: #333; }

.cb-enhance__list .media__author { color: #333; margin: 0; padding: 8px 0 0; font-size: 10px; text-transform: uppercase; }

.cb-enhance__column .media__label { text-transform: uppercase; margin: 0 0 8px; padding: 0; background: transparent; font-size: 10px; line-height: normal; }

.cb-enhance__column .media__title { font-size: 14px; line-height: 20px; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; text-transform: none; width: 100%; }

.cb-enhance__column .media__title a { color: #333; }

.cb-enhance__column .media__author { color: #333; margin: 0; padding: 8px 0 0; font-size: 10px; text-transform: uppercase; }

.cb-enhance__block .media__label { text-transform: uppercase; margin: 0 0 8px; padding: 0; background: transparent; font-size: 12px; line-height: 20px; line-height: normal; }

.cb-enhance__block .media__title { font-size: 20px; line-height: 30px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; text-transform: none; width: 100%; }

.cb-enhance__block .media__title a { color: #333; }

.cb-enhance__block .media__author { color: #333; margin: 0; padding: 8px 0 0; font-size: 14px; line-height: 28px; text-transform: uppercase; }

.cb__featured-vids { background: #121212; }

.cb__featured-vids .title { color: #ffffff; border: none; margin: 0; padding: 26px 0; }

.cb__featured-vids .list-content__item { margin-bottom: 24px; }

.cb__featured-vids .media__label { background: none; }

.cb__featured-vids .media__title { color: #fff; }

.cb__trending .title { background: #121212; color: white; margin-bottom: 0; border: none; }

.cb__trending .cb-enhance__list { margin: 0; padding: 20px; border: 1px solid #121212; }

.cb__trending .cb-enhance__list .media__title { font-size: 16px; line-height: 22px; }

.cb__trending .list-content__item { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed #E2E2E2; }

.cb__trending .list-content__item:first-child { margin-top: 0; }

.cb__trending .list-content__item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { content: ""; display: table; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; display: none; }

.slick-slide-thumbnail .slick-slide { opacity: 0.5; filter: alpha(opacity=50); }

.slick-slide-thumbnail .slick-slide:hover { opacity: 1; filter: alpha(opacity=100); }

.slick-slide:focus { outline: none; }

[dir="rtl"] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-slide-thumbnail { margin-top: 20px; margin-left: 20px; margin-right: 20px; }

.slick-slide-thumbnail .slick-slide { margin-left: 4px; margin-right: 4px; overflow: hidden; }

.slick-arrow.slick-hidden { display: none; }

.slick-arrow { position: absolute; z-index: 2; top: 50%; outline: none; border: none; background: #fff; box-shadow: 0px 5.93567px 17.807px rgba(51, 81, 98, 0.12); font-size: 0; padding: 10px; border-radius: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -o-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -ms-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

.detail__media-image-wrap .slick-arrow { opacity: 0.5; filter: alpha(opacity=50); }

.detail__media-image-wrap:hover .slick-arrow { opacity: 1; filter: alpha(opacity=100); }

.append-nav .slick-arrow, .foto-pop-up .slick-arrow { color: #FFFFFF; }

.slick-prev:before, .slick-next:before { font-family: cxomedia; font-size: 20px; }

.slick-slide-thumbnail .slick-prev:before, .slick-slide-thumbnail .slick-next:before { font-size: 24px; }

.foto-pop-up .slick-prev:before, .foto-pop-up .slick-next:before { color: #FFFFFF; }

.slick-prev { left: 0; }

.slick-slide-thumbnail .slick-prev { left: -24px; }

.slick-prev:before { content: "\e903"; }

.slick-next { right: 0; }

.slick-slide-thumbnail .slick-next { right: -24px; }

.slick-next:before { content: "\e904"; }

.slick-slide-thumbnail .slick-active { opacity: 0.5; filter: alpha(opacity=50); }

.slick-slide-thumbnail .slick-active:hover { opacity: 1; filter: alpha(opacity=100); }

.slick-slide-thumbnail .slick-current { opacity: 1; filter: alpha(opacity=100); }

.slick-disabled { opacity: 0; filter: alpha(opacity=0); pointer-events: none; }

.slick-dotted.slick-slider { padding-bottom: 30px; }

.slick-dots { position: absolute; bottom: 10px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }

.slick-dots li { position: relative; display: inline-block; height: 10px; width: 10px; margin: 0 5px; padding: 0; cursor: pointer; }

.slick-dots li button { border: 1px solid #666666; background: #c7d0d5; opacity: 0.3; display: block; height: 10px; width: 10px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; }

.slick-dots li.slick-active button { opacity: 0.8; }

.append-nav { position: absolute; left: 0; right: 0; }

.accordion-wrap, .accordion-title { position: relative; }

.accordion-btn { margin-left: auto; text-transform: uppercase; font-size: 12px; }

.accordion-title { cursor: pointer; box-shadow: 0px 4px 40px rgba(19, 10, 46, 0.08); padding: 16px; font-size: 16px; width: 100%; display: flex; align-items: center; }

.accordion-title .icon { -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; }

.accordion-content { display: none; overflow: hidden; width: 100%; }

.accordion-open .icon-chevron-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.accordion-list { list-style: none; margin: 0; padding-left: 24px; }

.accordion-list li { padding: 0; border-bottom: 1px solid #C4C4C4; }

.accordion-list li a { display: block; padding: 16px 0; font-size: 16px; }

/*MODAL STYLE*/
.modal-box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 26; opacity: 0; transition: opacity 0.3s ease-out 0s; background: #000; /* The Fallback */ background: rgba(0, 0, 0, 0.7); }

.modal-box--show { opacity: 1; overflow-x: hidden; overflow-y: auto; }

.modal-dialog { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 20px auto; transition: transform 0.3s ease-out 0s; transform: translate(0, 50px); height: 100%; min-height: calc(100% - 40px); max-height: calc(100% - 40px); -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; width: calc(100% - 40px); }

.modal-box--md .modal-dialog { width: 700px; }

.modal-box--full .modal-dialog { width: calc(100% - 40px); }

.anim .modal-dialog { transition: transform 0.3s ease-out 0s; transform: translate(0, 0); }

.modal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; pointer-events: auto; width: 100%; min-height: 100px; max-height: 0; transition: all 0.3s ease-in-out; transform: scale(0.75); box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15); background: #FFFFFF; }

.modal-content--loaded { max-height: 100%; transform: scale(1); }

.modal-box--full .modal-content { height: 100%; }

.modal-body { padding: 16px; overflow-y: scroll; opacity: 0; transition: opacity 0.75s ease-in-out; }

.modal-content--loaded .modal-body { opacity: 1; }

.modal-body__title { padding-bottom: 12px; margin-bottom: 4px; font-size: 16px; letter-spacing: 0.04em; font-weight: 400; }

.modal-body__content { color: #838484; font-weight: 500; letter-spacing: 0.05em; }

.modal-body__content .ratiobox iframe { left: 0; }

.modal-body__content-text { text-align: left; }

.modal-body__content-text h2 { font-size: 16px; line-height: 24px; letter-spacing: 0.04em; color: #333; }

.modal-body__content-text p { color: #838484; }

.modal-body__content--small { height: 300px; }

.modal-body__content--small .modal-body__content-text { padding-bottom: 16px; }

.close-modal { display: block; position: absolute; top: 16px; right: 16px; opacity: 0; visibility: hidden; color: #333; font-size: 20px; line-height: 0; z-index: 5; }

.modal-content--loaded .close-modal { opacity: 1; visibility: visible; }

.modal-overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-out 0s; z-index: 22; background: #FFFFFF; }

.modal-open { overflow: hidden; }

.modal-open .modal-overlay { opacity: 0.9; }

.lds-ring { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) scale(1); width: 40px; height: 40px; }

.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 40px; height: 40px; border: 7px solid #999999; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999999 transparent transparent transparent; }

.lds-ring div:nth-child(1) { animation-delay: -0.45s; }

.lds-ring div:nth-child(2) { animation-delay: -0.3s; }

.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.ph-item { position: relative; display: flex; flex-wrap: wrap; overflow: hidden; direction: ltr; background-color: #fff; border: 1px solid white; border-radius: 2px; }

.ph-item, .ph-item *, .ph-item ::after, .ph-item ::before { box-sizing: border-box; }

.ph-item::before { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 1; width: 500%; margin-left: -250%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%; animation: phAnimation 1.2s linear infinite; content: " "; pointer-events: none; }

.ph-item > * { flex: 1 1 auto; flex-flow: column; padding-right: 15px; padding-left: 15px; }

.second-menu__list .ph-item { vertical-align: bottom; }

.ph-row { display: flex; flex-wrap: wrap; margin-top: -7.5px; }

.ph-row div { height: 12px; margin-top: 7.5px; background-color: #f0f0f0; }

.ph-row .small, .ph-row.small div { height: 10px; }

.ph-row .big, .ph-row.big div { height: 20px; }

.ph-row .hero, .ph-row.hero div { height: 32px; }

.ph-row .large, .ph-row.large div { height: 54px; }

.ph-row .super, .ph-row.super div { height: 60px; }

.ph-row .empty { background-color: rgba(255, 255, 255, 0); }

.ph-col-1 { flex: 0 0 8.33333%; }

.ph-col-2 { flex: 0 0 16.66667%; }

.ph-col-3 { flex: 0 0 25%; }

.ph-col-4 { flex: 0 0 33.33333%; }

.ph-col-5 { flex: 0 0 41.66667%; }

.ph-col-6 { flex: 0 0 50%; }

.ph-col-7 { flex: 0 0 58.33333%; }

.ph-col-8 { flex: 0 0 66.66667%; }

.ph-col-9 { flex: 0 0 75%; }

.ph-col-10 { flex: 0 0 83.33333%; }

.ph-col-11 { flex: 0 0 91.66667%; }

.ph-col-12 { flex: 0 0 100%; }

.ph-no-gutter { padding-left: 0 !important; padding-right: 0 !important; }

.ph-left { padding: 0; padding-left: 15px !important; }

[class*="ph-col"] { direction: ltr; }

[class*="ph-col"] > * + .ph-row { margin-top: 0; }

[class*="ph-col"] > * + * { margin-top: 7.5px; }

.ph-avatar { position: relative; width: 100%; min-width: 45px; overflow: hidden; background-color: #f0f0f0; border-radius: 50%; }

.ph-avatar::before { display: block; padding-top: 100%; content: " "; }

.ph-avatar-kolom { position: relative; width: 80px; min-width: 80px; overflow: hidden; background-color: #f0f0f0; border-radius: 50%; padding: 0; flex-grow: 0; }

.ph-avatar-kolom::before { display: block; padding-top: 100%; content: " "; }

.ph-picture { width: 100%; height: 120px; background-color: #f0f0f0; }

.ph-picture-square-med { width: 100%; height: 180px; background-color: #f0f0f0; }

.ph-picture-auto { width: 100%; height: 100%; background-color: #f0f0f0; }

.ph-picture-thumb { width: 100%; height: 96px; background-color: #f0f0f0; max-width: 96px; }

.ph-picture-med { width: 100%; height: 80px; background-color: #f0f0f0; }

.ph-picture-small { width: 100%; height: 40px; background-color: #f0f0f0; }

.ph-picture-big { width: 100%; height: 210px; background-color: #f0f0f0; }

.ph-picture-full { width: 100%; padding-bottom: 56.25%; background-color: #f0f0f0; }

.ph-picture-half { width: 100%; padding-bottom: 133%; background-color: #f0f0f0; }

.ph-picture-half-square { width: 100%; padding-bottom: 75%; background-color: #f0f0f0; }

.ph-picture-long { width: 100%; padding-bottom: 100%; background-color: #f0f0f0; }

.ph-fluid { height: 100%; position: absolute; width: 100%; left: 0; padding: 0; top: 0; }

.ph-menu { width: 52px; height: 19px; background-color: #f0f0f0; }

.ph-menu.long { width: 85px; }

.ph-blank { background: transparent; border: 1px solid transparent; }

.ph-blank .ph-row div { background: #fff; }

.ph-blank .ph-row div.empty { background: rgba(255, 255, 255, 0); }

.ph-blank .ph-picture-thumb, .ph-blank .ph-picture, .ph-blank .ph-picture-med, .ph-blank .ph-picture-square-med, .ph-blank .ph-picture-half-square, .ph-blank .ph-avatar { background: #fff; }

.ph-blank.ph--black::before { background: linear-gradient(to right, rgba(39, 39, 39, 0) 46%, rgba(39, 39, 39, 0.35) 50%, rgba(39, 39, 39, 0) 54%) 50% 50%; }

.ph-blank.ph--red::before { background: linear-gradient(to right, rgba(168, 0, 0, 0) 46%, rgba(168, 0, 0, 0.35) 50%, rgba(168, 0, 0, 0) 54%) 50% 50%; }

.ph-blank::before { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 1; width: 500%; margin-left: -250%; background: linear-gradient(to right, rgba(240, 240, 240, 0) 46%, rgba(240, 240, 240, 0.35) 50%, rgba(240, 240, 240, 0) 54%) 50% 50%; animation: phAnimation 1.2s linear infinite; content: " "; pointer-events: none; }

@keyframes phAnimation { 0% { transform: translate3d(-30%, 0, 0); }
  100% { transform: translate3d(30%, 0, 0); } }