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: #21409A; --kuler-2: #007cbd; --kuler-3: #ef672f; } body { margin: 0; line-height: 1.4; font-size: 16px; font-family: "Helvetica", Helvetica-FF, Arial, Tahoma, sans-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: "Helvetica-FF"; font-weight: 300; font-style: normal; src: url("../../../assets/fonts/helvetica/Helvetica-Light.eot"); src: url("../../../assets/fonts/helvetica/Helvetica-Light.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/helvetica/Helvetica-Light.woff2") format("woff2"), url("../../../assets/fonts/helvetica/Helvetica-Light.woff") format("woff"), url("../../../assets/fonts/helvetica/Helvetica-Light.ttf") format("truetype"), url("../../../assets/fonts/helvetica/Helvetica-Light.svg#Helvetica-Light") format("svg"); font-display: fallback; } @font-face { font-family: "Helvetica-FF"; font-weight: 400; font-style: normal; src: url("../../../assets/fonts/helvetica/Helvetica-Regular.eot"); src: url("../../../assets/fonts/helvetica/Helvetica-Regular.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/helvetica/Helvetica-Regular.woff2") format("woff2"), url("../../../assets/fonts/helvetica/Helvetica-Regular.woff") format("woff"), url("../../../assets/fonts/helvetica/Helvetica-Regular.ttf") format("truetype"), url("../../../assets/fonts/helvetica/Helvetica-Regular.svg#Helvetica-Regular") format("svg"); font-display: fallback; } @font-face { font-family: "Helvetica-FF"; font-weight: 700; font-style: normal; src: url("../../../assets/fonts/helvetica/Helvetica-Bold.eot"); src: url("../../../assets/fonts/helvetica/Helvetica-Bold.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/helvetica/Helvetica-Bold.woff2") format("woff2"), url("../../../assets/fonts/helvetica/Helvetica-Bold.woff") format("woff"), url("../../../assets/fonts/helvetica/Helvetica-Bold.ttf") format("truetype"), url("../../../assets/fonts/helvetica/Helvetica-Bold.svg#Helvetica-Bold") format("svg"); font-display: fallback; } @font-face { font-family: "Montserrat-FF"; font-weight: 300; font-style: normal; src: url("../../../assets/fonts/montserrat/Montserrat-Light.eot"); src: url("../../../assets/fonts/montserrat/Montserrat-Light.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/montserrat/Montserrat-Light.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-Light.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-Light.ttf") format("truetype"), url("../../../assets/fonts/montserrat/Montserrat-Light.svg#Montserrat-Light") format("svg"); font-display: fallback; } @font-face { font-family: "Montserrat-FF"; font-weight: 400; font-style: normal; src: url("../../../assets/fonts/montserrat/Montserrat-Regular.eot"); src: url("../../../assets/fonts/montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-Regular.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-Regular.ttf") format("truetype"), url("../../../assets/fonts/montserrat/Montserrat-Regular.svg#Montserrat-Regular") format("svg"); font-display: fallback; } @font-face { font-family: "Montserrat-FF"; font-weight: 600; font-style: normal; src: url("../../../assets/fonts/montserrat/Montserrat-SemiBold.eot"); src: url("../../../assets/fonts/montserrat/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.svg#Montserrat-SemiBold") format("svg"); font-display: fallback; } @font-face { font-family: "Montserrat-FF"; font-weight: 700; font-style: normal; src: url("../../../assets/fonts/montserrat/Montserrat-Bold.eot"); src: url("../../../assets/fonts/montserrat/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/montserrat/Montserrat-Bold.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-Bold.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-Bold.ttf") format("truetype"), url("../../../assets/fonts/montserrat/Montserrat-Bold.svg#Montserrat-Bold") format("svg"); font-display: fallback; } /*--------------------------------------------------------------------------------*/ /*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-success { color: #11aa3d !important; } .box-utility-success { color: #11aa3d !important; background: #b3f7c7; border: 1px solid #11aa3d; padding: 12px 16px; } .color-utility-warning { color: #FCB715 !important; } .box-utility-warning { color: #FCB715 !important; background: white; border: 1px solid #FCB715; padding: 12px 16px; } .color-utility-error { color: #FF0000 !important; } .box-utility-error { color: #FF0000 !important; background: #fff0f0; border: 1px solid #FF0000; padding: 12px 16px; } /*--------------------------------------------------------------------------------*/ /*IMAGES STYLE*/ /*--------------------------------------------------------------------------------*/ .lqd, .lqd_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .lqd_block > img, .media__image img, .media__author-image-avatar img, .detail__media-image-wrap img, .area_ipt 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-xs { width: 80px; } .img-sm { width: 100px; } .img-md { width: 200px; } .img-lg { width: 400px; } .img-fluid { width: 100%; } .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 iframe { position: absolute; width: 100%; height: 100%; } .block-link:hover .media__image .ratiobox { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .ratiobox--16-9 { padding-bottom: 56.25%; } .ratiobox--4-3 { padding-bottom: 75%; } /*--------------------------------------------------------------------------------*/ /*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,"); 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, textarea.tagsinput { 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; } .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, .tagsinput { 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, .tagsinput:focus { border-color: #cccccc; } .form-element[type="date"], [type="date"].tagsinput { padding-top: 7px; padding-bottom: 7px; } .form-element--error, .form-element--error:focus { border-color: #FF0000; background: #fff0f0; } .form-inline .form-element, .form-inline .tagsinput { display: inline-block; width: auto; vertical-align: middle; } .form-rounded .form-element, .form-rounded .tagsinput { border-radius: 24px; } .form-gray .form-element, .form-gray .tagsinput { 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, .tagsinput:disabled, .form-element[readonly], [readonly].tagsinput, .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray [readonly].tagsinput { 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; } 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: block; font-size: 14px; } .pagination a { text-align: center; display: inline-block; padding: 4px 8px; } .pagination a:first-child { margin-right: 16px; } .pagination a:last-child { margin-left: 16px; } .pagination__item:hover { background: #f0f0f0; color: #000000; border-radius: 4px; } .pagination__item--active, .pagination__item--active:hover { background: var(--kuler-1); color: #FFFFFF; border-radius: 4px; } .pagination__range { letter-spacing: 4px; background: transparent; } @font-face { font-family: "detiknetwork-FF"; font-weight: normal; font-style: normal; src: url("../../../assets/fonts/icons/detiknetwork.eot"); src: url("../../../assets/fonts/icons/detiknetwork.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/icons/detiknetwork.woff2") format("woff2"), url("../../../assets/fonts/icons/detiknetwork.woff") format("woff"), url("../../../assets/fonts/icons/detiknetwork.ttf") format("truetype"), url("../../../assets/fonts/icons/detiknetwork.svg#detiknetwork") format("svg"); font-display: fallback; } .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: "detiknetwork-FF" !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: "detiknetwork-FF" !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-home:before { content: "\63"; } .icon-home-bg:before { content: "\64"; } .icon-chevron-right:before { content: "\65"; } .icon-chevron-right-bg:before { content: "\66"; } .icon-chevron-left:before { content: "\67"; } .icon-chevron-left-bg:before { content: "\68"; } .icon-arrow-right:before { content: "\69"; } .icon-arrow-left:before { content: "\6a"; } .icon-chevron-up:before { content: "\6b"; } .icon-chevron-up-bg:before { content: "\6c"; } .icon-chevron-down:before { content: "\6d"; } .icon-chevron-down-bg:before { content: "\6e"; } .icon-arrow-up:before { content: "\6f"; } .icon-arrow-down:before { content: "\70"; } .icon-search:before { content: "\71"; } .icon-search-bg:before { content: "\72"; } .icon-user:before { content: "\73"; } .icon-user-bg:before { content: "\74"; } .icon-live-tv:before { content: "\75"; } .icon-live-tv-bg:before { content: "\76"; } .icon-tv:before { content: "\77"; } .icon-tv-bg:before { content: "\78"; } .icon-menu:before { content: "\79"; } .icon-menu-bg:before { content: "\7a"; } .icon-lock:before { content: "\41"; } .icon-lock-bg:before { content: "\42"; } .icon-open-lock:before { content: "\43"; } .icon-open-lock-bg:before { content: "\44"; } .icon-doc:before { content: "\45"; } .icon-doc-bg:before { content: "\46"; } .icon-calendar:before { content: "\47"; } .icon-calendar-bg:before { content: "\48"; } .icon-check:before { content: "\49"; } .icon-check-bg:before { content: "\4a"; } .icon-trash:before { content: "\4b"; } .icon-trash-bg:before { content: "\4c"; } .icon-pencil:before { content: "\4d"; } .icon-pencil-bg:before { content: "\4e"; } .icon-close:before { content: "\4f"; } .icon-close-bg:before { content: "\50"; } .icon-card:before { content: "\51"; } .icon-card-bg:before { content: "\52"; } .icon-network:before { content: "\53"; } .icon-network-bg:before { content: "\54"; } .icon-email:before { content: "\55"; } .icon-email-bg:before { content: "\56"; } .icon-info:before { content: "\57"; } .icon-info-bg:before { content: "\58"; } .icon-warning:before { content: "\59"; } .icon-warning-bg:before { content: "\5a"; } .icon-video:before { content: "\30"; } .icon-video-bg:before { content: "\31"; } .icon-image:before { content: "\32"; } .icon-image-bg:before { content: "\33"; } .icon-file-text:before { content: "\34"; } .icon-file-text-bg:before { content: "\35"; } .icon-graphic:before { content: "\36"; } .icon-graphic-bg:before { content: "\37"; } .icon-folder:before { content: "\38"; } .icon-folder-bg:before { content: "\39"; } .icon-notification:before { content: "\21"; } .icon-notification-bg:before { content: "\22"; } .icon-download:before { content: "\23"; } .icon-download-bg:before { content: "\24"; } .icon-upload:before { content: "\25"; } .icon-upload-bg:before { content: "\26"; } .icon-filter:before { content: "\27"; } .icon-filter-bg:before { content: "\28"; } .icon-sent-mail:before { content: "\29"; } .icon-sent-mail-bg:before { content: "\2a"; } .icon-play:before { content: "\2b"; } .icon-play-bg:before { content: "\2c"; } .icon-comment:before { content: "\2d"; } .icon-comment-bg:before { content: "\2e"; } .icon-plus:before { content: "\2f"; } .icon-plus-bg:before { content: "\3a"; } .icon-favorite:before { content: "\3b"; } .icon-favorite-bg:before { content: "\3c"; } .icon-share:before { content: "\3d"; } .icon-share-bg:before { content: "\3e"; } .icon-setting:before { content: "\3f"; } .icon-setting-bg:before { content: "\40"; } .icon-crown:before { content: "\5b"; } .icon-crown-bg:before { content: "\5d"; } .icon-zoom:before { content: "\5e"; } .icon-zoom-bg:before { content: "\5f"; } .icon-quote-right:before { content: "\60"; } .icon-quote-left:before { content: "\7b"; } .icon-camera:before { content: "\7c"; } .icon-camera-bg:before { content: "\7d"; } .icon-link:before { content: "\7e"; } .icon-link-bg:before { content: "\5c"; } .icon-love:before { content: "\e000"; } .icon-love-bg:before { content: "\e001"; } .icon-sign-out:before { content: "\e002"; } .icon-sign-out-bg:before { content: "\e003"; } .icon-sign-in:before { content: "\e004"; } .icon-sign-in-bg:before { content: "\e005"; } .icon-facebook:before { content: "\61"; } .icon-twitter:before { content: "\62"; } .icon-instagram:before { content: "\e006"; } .icon-linkedin:before { content: "\e007"; } .icon-youtube:before { content: "\e008"; } .icon-refresh:before { content: "\e009"; } /*--------------------------------------------------------------------------------*/ /*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; } /*--------------------------------------------------------------------------------*/ /*EXTENDS*/ /*--------------------------------------------------------------------------------*/ .font-family-base, .font-family-base-2, .font-heading, .font-paragraph, .form-element, .tagsinput, .pagination, .box__title, .section__title, .box-bg--gray-light-4 .box__title, .kontributor .section__title, .navbar-second .nav a, .list-content__title, .media__title, .media__subtitle, .detail__subtitle, .livereport-content .media__date, .breaking-sticky .media__link, .breaking-sticky .media__label, .detail__artikel-selanjutnya .detail__title, .detail__newstag-title, .detail__multiple-paging { font-weight: 400; } .font-base-light, .font-heading-light, .font-light, .detail__body-tag .nav__item, .footer .nav, .media__date, .footer__copy, .detail__date, .static__body-text p, .custom-text-b { font-weight: 300; } .font-base-semibold, .font-heading-semibold, .font-semibold, .box__title, .section__title, .page__title, .nav, .headline .media__title, .text-list__title, .text-list--title .text-list__data, .detail__title, .detail__anchor-numb, .detail__artikel-selanjutnya-title, .linksisip a, .embed_video .title, .notification-overlay, .custom-text-a { font-weight: 600; } .font-base-bold, .font-heading-bold, .font-bold, .nav--bold .nav-item, .terpopuler .nav, .linksisip strong, .quotesisip blockquote { font-weight: 700; } .font-family-base, .font-paragraph, .form-element, .tagsinput, .form-file, .icon, .footer .nav, .detail__date, .quotesisip, .custom-text-c { font-family: "Helvetica", Helvetica-FF, Arial, Tahoma, sans-serif; } .font-family-base-2, .font-heading, .font-heading-light, .font-heading-semibold, .font-heading-bold, label, .form-file:before, .btn, .pagination, .box__title, .section__title, .box__header a, .box-bg--gray-light-4 .box__title, .page__title, .page__breadcrumb, .page__follow, .page__indeks-info, .nav, .detail__body-tag .nav__item, .list-content__title, .media__title, .media__subtitle, .detail__subtitle, .media__date, .livereport-content .media__date, .media__author, .breaking-sticky .media__link, .breaking-sticky .media__label, .media__label--live, .media__icon--bottom, .text-list__data, .footer, .footer-title, .detail__title, .detail__author, .detail__media-caption, .detail__multiple .detail__anchor, .detail__newstag-title, .detail__artikel-selanjutnya-title, .linksisip, .embed_video, .breaking-sponsor, .static__body, .notification-overlay, .custom-text-a, .custom-text-b, .custom-text-d, .custom-text-e, .step__text { font-family: "Montserrat", Montserrat-FF, Arial, Tahoma, sans-serif; } .display-flex, .align-middle, .notif__balon, .navbar-first, .media--list, .footer__app-store, .detail__newstag, .breaking-sponsor { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .display-flex-wrap, .nav--center, .nav--right, .terpopuler .nav, .footer .nav, .detail__body-tag .nav, .static__body-form .steps { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; } .flex-between, .box__header, .section__header, .page__header, .page__breadcrumb, .page__follow, .page__indeks-info, .media__icon--bottom, .notification-overlay { justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; } .text-center, .detail__newstag, .icon-item { text-align: center !important; } .text-right { text-align: right !important; } .text-style-italic { font-style: italic !important; } .align-middle, .notif__balon { align-items: center; justify-content: center; } .box-utility-success, .box-utility-warning, .box-utility-error, .form-check--checkbox label:before, .form-check--checkbox label:after, .form-element, .tagsinput, .slick-slide-thumbnail .slick-slide, .dropdown-menu__content, .media__icon, .media--image-radius .media__image, .copy_url .notif, .tagsinput .tag, .notification-overlay { border-radius: 4px; } .form-check--radio label:before, .form-check--radio label:after, .circle, .lds-ring div, .slick-dots li button, .media__author-image-avatar img, .cb-mostpop-foto .text-list__data, .detail__author-image-avatar, .image__btn, .foto__btn, .step__icon { border-radius: 50%; } .color-black { color: #000000; } .color-white { color: #FFFFFF; } .color-gray { color: #6D8591; } .color-blue-base, .text-list--title, .text-list--title a, .detail__body-text > a, .detail__body-text p > a, .detail__artikel-selanjutnya-title, .notification-overlay { color: #21409A; } .color-orange-light-1, .media__subtitle, .detail__subtitle, .media__subtitle a, .detail__subtitle a { color: #ef672f; } .color-red-light-2 { color: #FF0000; } .color-purple-light-2 { color: #812e88; } .color-green-light-2 { color: #11aa3d; } .color-yellow-base { color: #FCB715; } .color-pink-light-1 { 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 { background: #21409A; } .color-bg-orange-light-1 { background: #ef672f; } .color-bg-red-light-2 { background: #FF0000; } .color-bg-purple-light-2 { background: #812e88; } .color-bg-green-light-2 { background: #11aa3d; } .color-bg-yellow-base { background: #FCB715; } .color-bg-pink-light-1 { background: #ec1b7a; } /*MODAL STYLE*/ .modal-box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 23; opacity: 0; transition: opacity 0.3s ease-out 0s; background: #fff; /* The Fallback */ background: rgba(255, 255, 255, 0.65); } .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); width: 500px; } .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); border-radius: 8px; 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; } .close-modal { display: block; position: absolute; top: 2px; right: 5px; opacity: 0; visibility: hidden; color: #999999; } .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); } } .accordion-wrap, .accordion-title { position: relative; } .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; } .accordion-open .icon-chevron-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* 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: transparent; font-size: 0; padding: 0; -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: detiknetwork-FF; font-size: 64px; } .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: "\67"; } .slick-next { right: 0; } .slick-slide-thumbnail .slick-next { right: -24px; } .slick-next:before { content: "\65"; } .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-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; } .dropdown { position: relative; } .dropdown-wrap { display: inline-block; position: relative; } .dropdown-menu { text-align: left; padding-top: 4px; display: block; min-width: 150px; position: absolute; top: 100%; left: -8px; max-height: 0; visibility: hidden; overflow: hidden; z-index: 3; -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; } .dropdown-menu__content { min-width: 200px; position: relative; margin: 8px; background: #FFFFFF; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); } .dropdown-menu__content:after { content: ""; position: absolute; left: 28px; width: 0; height: 0; top: 0; border: 6px solid black; border-color: transparent transparent #FFFFFF #FFFFFF; transform-origin: 0 0; transform: rotate(135deg); box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05); } .dropdown-menu__content-article { width: 300px; padding: 12px; } .dropdown-menu--right .dropdown-menu__content:after { left: auto; right: 2px; } .dropdown-menu--right { left: auto; right: -8px; } .dropdown-menu--top { top: unset; bottom: 100%; margin-top: 0; margin-bottom: 4px; } .dropdown-menu--top .dropdown-menu__content:after { transform: rotate(-45deg); top: 100%; right: 12px; } .dropdown-aktif .dropdown-menu { max-height: 500px; visibility: visible; } .dropdown-aktif .dropdown .icon-chevron-down, .dropdown-aktif .dropdown .icon-chevron-up { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .dropdown > .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; } .box, .section, .box__form-indeks, .detail__multiple-paging .text-list--title, .detail__media, .detail__anchor, .detail__multiple-box, .detail__multiple-paging { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } .headline-foto-anda { margin-left: -18px; margin-right: -18px; padding-left: 0; padding-right: 0; } .grid-row .box { margin-left: -12px; margin-right: -12px; padding-left: 18px; padding-right: 18px; } .box, .section { position: relative; word-wrap: break-word; padding-top: 8px; padding-bottom: 8px; border-top: 3px solid #f0f0f0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; } .box__header, .section__header { margin: 8px 0; font-size: 23px; } .box__title, .section__title { margin: 0; font-size: 18px; color: #000000; } .box { margin-bottom: 24px; } .box__header a { padding: 0; } .box__wrapper .box__header { justify-content: center; } .box__header--border { border-top: 3px solid #e6e6e6; padding-top: 12px; } .box-bg--gray .box__title { color: #FFFFFF; } .box-bg--gray-light-4 .box__title { color: #333333; } .box__logo { max-width: 200px; max-height: 45px; } .box-bg--gray { background: #666666; } .box-bg--gray-light-4 { background: #e0e5e8; } .box-bg--black-light-5 { background: #e6e6e6; } .box--no-border { border: none; } .box--outside { margin: 0 0 24px; } .box__wrapper { padding: 16px; margin: 16px 0; border: 1px solid #666666; } .box-ads { margin-top: 16px; margin-bottom: 24px; position: relative; z-index: 1; width: 100%; } .box-ads--billboard { margin: 0; } .box-ads__name { position: absolute; padding: 8px 12px; font-size: 14px; color: #666666; } .box.cb-snapshot { overflow: hidden; } .box.cb-foto-anda { margin-bottom: 0; } .detail .box, .detail__bottom .box { margin-bottom: 0; } .box__image-foto img { width: 210px; } .box-text--med { width: 70%; margin: auto; } .box__form-indeks { margin-top: 8px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .box__form-indeks-date { border-left: 1px solid #e6e6e6; } .section { margin-bottom: 16px; } .kontributor .section__title { color: #333333; text-align: center; width: 58%; margin: auto; } .section.kontributor { padding: 18px; } .page__header { margin-top: 12px; } .page__title { margin: 0; font-size: 23px; color: #333333; } .page__breadcrumb, .page__follow, .page__indeks-info { color: #999999; font-size: 12px; } .page__breadcrumb a, .page__follow a, .page__indeks-info a { color: #999999; } .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; } .nhl .box, .nhl .cb, .nhl .widget { border-bottom: 3px solid #f0f0f0; } .nhl .box + .box, .nhl .box + .cb, .nhl .box + .widget, .nhl .cb + .box, .nhl .cb + .cb, .nhl .cb + .widget, .nhl .widget + .box, .nhl .widget + .cb, .nhl .widget + .widget { border-top: none; margin-top: -24px; } .widget.widget-nhl { border: none; background: #f0f0f0; } .sticky { position: sticky; position: -webkit-sticky; top: 46px; } .nav { position: relative; list-style: none; margin: 0; padding: 0; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: nowrap; } .nav a { display: block; padding: 4px 24px; padding-left: 0; } .footer .nav a { padding: 0 8px; position: relative; margin-bottom: 8px; color: #666666; } .footer .nav a:after { content: "."; position: absolute; top: -12px; right: -4px; font-size: 23px; font-weight: 400; } .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--center { justify-content: center; } .nav--right { justify-content: flex-end; } .nav__item { position: relative; padding: 0; white-space: nowrap; } .navbar-shadow .navbar--scroll .nav__item:first-child { padding-left: 16px; } .navbar-shadow .navbar--scroll .nav__item:last-child { padding-right: 16px; } .navbar-first .nav__item:last-child a { padding-right: 0; } .navbar-second .nav__item { margin-top: 8px; margin-right: 8px; margin-bottom: 8px; } .nav__item--green a { color: #75b72e; } .nav__item--green ins { text-decoration: none; } .nav__item--red a { color: #FF0000; } .nav__item--red ins { text-decoration: none; } .nav__item--new { position: relative; } .nav__item--new a:after { content: ""; width: 8px; height: 8px; background: #FF0000; position: absolute; top: 4px; right: 12px; border-radius: 10px; overflow: hidden; } .navbar-second .nav__item--new a:after { right: -1px; top: -2px; } .footer .nav__item:last-child a:after { content: ""; } .detail__body-tag .nav__item { border: 1px solid #cccccc; border-radius: 16px; margin: 4px; display: block; padding: 4px 16px; color: #666666; font-size: 12px; } .terpopuler .nav__item { font-size: 14px; } .footer .nav { margin: 24px 0; } .navbar--scroll .nav { padding-top: 4px; padding-bottom: 4px; } .navbar-first .nav { height: 45px; } .navbar-first .nav, .navbar-second .nav { overflow-x: auto; } .detail__body-tag .nav { margin: 8px; margin-left: -4px; margin-right: -4px; } .navbar { position: relative; } .header .navbar { height: 35px; overflow: hidden; } .navbar-logo { display: inline-block; line-height: inherit; white-space: nowrap; } .navbar--scroll { padding-top: 0; overflow-x: hidden !important; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; } .navbar-wrap { overflow: hidden; } .navbar-shadow { position: relative; margin-left: -18px; margin-right: -18px; } .navbar-shadow:before { content: ""; width: 18px; height: 100%; top: 0; left: 0; z-index: 1; background: #fff; /* Old browsers */ background: -moz-linear-gradient(right, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(right, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, white 25%, 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 */ position: absolute; } .navbar-shadow:after { content: ""; width: 24px; height: 100%; top: 0; right: 0; z-index: 1; background: #fff; /* Old browsers */ background: -moz-linear-gradient(left, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to left, white 25%, 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 */ position: absolute; } .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; } /*--------------------------------------------------------------------------------*/ /*LIST CONTENT*/ /*--------------------------------------------------------------------------------*/ .list-content { padding-left: 0; margin-top: 0; margin-bottom: 0; } .list-content__item { position: relative; display: block; width: 100%; padding-top: 0; padding-bottom: 8px; margin-bottom: 8px; } .list-content--column .list-content__item { padding-bottom: 12px; margin-bottom: 12px; } .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:last-child { margin-bottom: 12px; } .dropdown-wrap .list-content__item:last-child, .moment .list-content__item:last-child { border-bottom: none; } .dropdown-wrap .list-content__item { border-bottom: 1px solid #f0f0f0; } .moment .list-content__item { padding: 0 24px; border-bottom: 1px solid #cccccc; } .list-content__title { margin: 0; font-size: 16px; } .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--border-left { border-left: 1px solid #e6e6e6; padding: 12px 12px 0 12px; } .list-content > div.widget-nhl:first-child { margin-top: -8px; } .media { position: relative; overflow: hidden; } .list-content--equal-height .media { height: 100%; } .livereport-content .media { overflow: visible; } .media__image { position: relative; margin: 0 0 12px; overflow: hidden; } .media__image a { display: block; } .media__image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 15% 12px 12px; } .headline .media__image { margin-bottom: 0; } .detail__media .media__image img { width: 100%; max-width: none; } .livereport-content .media__image { margin-left: 12px; margin-right: 12px; } .media__text { flex: 1; } .headline .media__text { padding: 12px; } .nhl .media__text { padding: 0 4px; } .cb-mostpop-foto article:nth-of-type(1) .media__text { text-align: center; } .headline-foto-anda .media__text { padding-left: 18px; padding-right: 18px; } .breaking-sticky .media__text { padding: 12px; background: #21409A; /* Old browsers */ background: -moz-linear-gradient(135deg, #21409a 50%, #2c5498 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #21409a 50%, #2c5498 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #21409a 50%, #2c5498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ color: white; overflow: hidden; } .moment .media__text { padding-left: 40px; display: block; padding: 0 0 16px 24px; position: relative; } .moment .media__text:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #C72026; position: absolute; left: 0px; top: 12px; } .list-foto-full--center .media__text { text-align: center; } .media__title { margin: 0; font-size: 16px; } .list-content--equal-height .media__title { margin-bottom: 24px; } .list-content--column .media__title { font-size: 14px; } .cb-mostpop-foto article:nth-of-type(1) .media__title { font-size: 16px; } .headline .media__title { font-size: 20px; } .image__slider .media__title { font-size: 18px; text-align: center; } .box-bg--gray .media__title { font-size: 14px; } .detail__artikel-selanjutnya .media__title { margin-bottom: 0; font-size: 14px; } .mostpop-foto .media__title { font-size: 12px; } .list-foto-full--center .media__title { font-size: 16px; } .media__subtitle, .detail__subtitle { margin-bottom: 4px; font-size: 14px; } .media__subtitle a, .detail__subtitle a { position: relative; z-index: 3; } .media__subtitle a:hover, .detail__subtitle a:hover { text-decoration: underline; } .headline .media__subtitle a, .headline .detail__subtitle a { color: #FFD200; } .nhl .media__subtitle, .nhl .detail__subtitle { font-size: 12px; } .headline__slider .media__subtitle, .headline__slider .detail__subtitle { color: #FCB715; } .media__date { display: inline-block; margin-top: 8px; color: #666666; font-size: 12px; } .list-content--equal-height .media__date { position: absolute; bottom: 0; } .headline .media__date { color: #FFFFFF; } .cb-mostpop .media__date { margin-left: 40px; } .box-bg--gray .media__date { color: #FFFFFF; } .livereport-content .media__date { font-size: 14px; color: #666666; background: #FFFFFF; padding: 12px 0; margin: 0; text-align: left; margin-left: -16px; } .media__author { 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; } .list-foto-full--center .media__author { justify-content: center; font-size: 14px; margin-bottom: 12px; } .list-foto-full--center .media__author-image-avatar { width: 45px; height: 45px; } .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: 1; } .breaking-sticky .media__link { color: white; } .media__label { display: inline-block; padding: 5px 12px; position: absolute; top: 0; left: 0; z-index: 1; color: #FFFFFF; background: #21409A; font-size: 14px; } .breaking-sticky .media__label { background: #FF0000; border-radius: 6px; -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); left: -19px; top: -14px; padding: 10px 20px; padding-left: 20px; position: relative; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.8); } .media__label--live { background: #FF0000; border-radius: 4px; padding: 4px 8px 4px 20px; top: 8px; left: 8px; } .media__label--live:before { content: ""; width: 8px; height: 8px; background: #FFD200; position: absolute; top: 10px; left: 6px; overflow: hidden; border-radius: 50%; animation: live 1s; -moz-animation: live 1s infinite; -webkit-animation: live 1s infinite; } .media__icon { position: absolute; z-index: 1; padding: 2px 4px; text-align: center; display: inline-flex; align-items: center; 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--bottom { padding: 0 4px; } .media__icon--bottom span { color: #666666; font-size: 12px; } .media__icon--bottom span .icon { font-size: 20px; } .media__icon--bottom span .icon-favorite { color: #f7931d; } .list-foto-full--center .media__icon--bottom { justify-content: center; } .list-foto-full--center .media__icon--bottom span { margin: 0 8px; } .media--align-center { align-items: center; } .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 12px 0 0; } .cb-mostpop-foto .media--left .media__image { width: 120px; } .media--right .media__image { margin: 0 0 0 12px; } .widget-nhl .media--right .media__image { width: 150px; } .media--left .media__image, .media--right .media__image { width: 100px; } .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; 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 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: baseline; } .text-list__data { text-align: center; font-size: 20px; color: #999999; margin-right: 12px; } .media--text-overlay .text-list__data { margin-left: 0; } .text-list__data--red { color: #FF0000; } .cb-mostpop-foto article:nth-of-type(1) .text-list__data { font-size: 18px; width: 30px; height: 30px; line-height: 30px; left: 5px; top: 5px; } .cb-mostpop-foto .text-list__data { position: absolute; left: 2px; top: 2px; z-index: 1; width: 25px; height: 25px; line-height: 25px; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.5); color: #FFFFFF; font-size: 16px; } .text-list__title { font-size: 18px; } .text-list--normal .text-list__data { color: inherit; margin-left: 0; margin-right: 8px; } .text-list--title { margin-bottom: 12px; } .detail__multiple-paging .text-list--title { border-top: 1px solid #e6e6e6; padding-top: 12px; } .text-list--title .text-list__data { font-size: 18px; } /*--------------------------------------------------------------------------------*/ /*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--link { color: #000000; } .btn--black-light-1 { background: #333333; color: #FFFFFF; } .btn--black-light-1:hover { color: #FFFFFF; } .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--link { color: #666666; } .btn--black-light-3 { background: #999999; color: #FFFFFF; } .btn--black-light-3:hover { color: #FFFFFF; } .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--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--link { color: #e6e6e6; } .btn--orange-base { background: #EE4023; color: #FFFFFF; } .btn--orange-base:hover { color: #FFFFFF; } .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--link { color: #ef672f; } .btn--orange-light-2 { background: #f7931d; color: #FFFFFF; } .btn--orange-light-2:hover { color: #FFFFFF; } .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--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--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--link { color: #fce7cc; } .btn--utility-success { background: #11aa3d; color: #FFFFFF; } .btn--utility-success:hover { color: #FFFFFF; } .btn--utility-success.btn--link { color: #11aa3d; } .btn--utility-warning { background: #FCB715; color: #FFFFFF; } .btn--utility-warning:hover { color: #FFFFFF; } .btn--utility-warning.btn--link { color: #FCB715; } .btn--utility-error { background: #FF0000; color: #FFFFFF; } .btn--utility-error:hover { color: #FFFFFF; } .btn--utility-error.btn--link { color: #FF0000; } .header { display: flex; padding: 8px 0 0 0; justify-content: space-between; align-items: center; background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); position: sticky; position: -webkit-sticky; top: 0; z-index: 26; width: 100%; line-height: 1; } .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; } .header__brand { height: 24px; } .header__brand img { height: 100%; } .header__icon { font-size: 35px; padding: 0 0 0 8px; position: relative; } .header__icon--live { color: #21409A; } .header__icon--notif { color: #999999; } .menu-button { cursor: pointer; height: 45px; width: 40px; position: relative; } .menu-button__wrap { position: absolute; top: 15px; left: 12px; } .menu-button span { cursor: pointer; height: 2px; width: 20px; background: #21409A; 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: 0px; } .menu-button span:nth-child(2) { top: 7px; } .menu-button span:nth-child(3) { top: 14px; width: 14px; } .js-menu-active .menu-button span { background: #FF0000; } .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; right: -4px; top: 0; z-index: 1; border-radius: 50%; background: #FF0000; color: #FFFFFF; font-size: 12px; } .footer { text-align: center; font-size: 14px; background: #f7f7f7; color: #666666; } .footer__logo { margin-top: 24px; display: inline-block; } .footer__logo img { width: 160px; } .footer__social { margin: 0px 0px 20px 0; } .footer__copy { display: inline-block; margin-bottom: 64px; } .footer-title { font-size: 12px; } .footer-title__partof { margin-top: 8px; color: #666666; padding: 4px 0; } .footer-title__partof img { width: 80px; vertical-align: bottom; margin: 0 0 3px 3px; } .footer__get-app { font-size: 12px; } .footer__app-store { justify-content: center; align-items: center; } .footer__app-store img { margin: 16px 2px; height: 34px; } .headline { margin: 12px -6px 20px; overflow: hidden; background: #333333; /* Old browsers */ background: -moz-linear-gradient(135deg, #333333 50%, #666666 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #333333 50%, #666666 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #333333 50%, #666666 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ border-radius: 8px; } .headline a { color: white; } .headline-foto-anda { padding-bottom: 12px; } .foto-pop-up .detail { color: #FFFFFF; max-width: 750px; margin-top: 16px; margin-left: auto; margin-right: auto; } .detail__header { padding: 16px 0; } .detail__header-share { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; } .detail__header-share a { margin: 0 4px; } .detail__title { font-size: 20px; color: #000000; margin-bottom: 12px; } .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 { color: #666666; font-size: 14px; margin-bottom: 0; } .detail__author { margin-top: 8px; font-size: 12px; color: #666666; } .detail__author-image-avatar { width: 25px; height: 25px; display: inline-flex; margin-right: 8px; overflow: hidden; vertical-align: middle; } .detail__author-image-avatar img { width: 100%; } .detail__media { padding: 0; position: relative; } .detail__media.no-strech { margin: 0; } .detail__media-image > img { width: 100%; max-width: none; } .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: #000000; font-size: 14px; padding: 4px 18px; } .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__media--border-bot { padding-bottom: 18px; border-bottom: 3px solid #f0f0f0; } .detail__body { margin-top: 16px; } .detail__body-text .label { display: block; text-align: left; } .detail__body-text img { max-width: 100%; } .detail__body-text > p:nth-of-type(1) { display: inline; } .detail__body-text > p:nth-of-type(2) { margin-top: 16px; } .detail__body-text > h1 { font-size: 23px; } .detail__body-text > h2 { font-size: 20px; } .detail__body-text > h3 { font-size: 18px; } .detail__body-text > h4 { font-size: 16px; } .detail__body-text > h5 { font-size: 14px; } .detail__body-text > h6 { font-size: 12px; } .detail__share { text-align: center; } .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: #21409A; } .detail__anchor-numb { color: #333333; } .detail__multiple .detail__anchor-numb { border-radius: 50%; background: #cccccc; color: #FFFFFF; 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: #21409A; } .detail__newstag { margin: 16px 0; } .detail__newstag-title { font-size: 14px; flex: 1; } .detail__newstag img { margin-left: 16px; } .detail__multiple { margin: 32px 0; } .detail__multiple a { color: #000000; } .detail__multiple-box { border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; margin-top: 8px; margin-bottom: 8px; } .detail__multiple-nav { margin: 0; padding: 12px 8px 12px 0; } .detail__multiple-nav .media--left { align-items: center; } .detail__multiple-paging { padding: 12px 18px 0; border-top: 1px solid #f0f0f0; color: #999999; font-size: 14px; } .detail__artikel-selanjutnya { background: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; margin-top: 12px; padding: 12px 16px 16px; border-top: 5px solid #26409A; } .detail__artikel-selanjutnya-title { margin-bottom: 8px; display: block; } .linksisip { position: relative; margin: 8px 0; border-left: 5px solid #21409A; } .linksisip td { border: none; padding: 0; } .linksisip strong { font-size: 14px; } .linksisip a { font-size: 16px; color: #21409A; display: block; } .linksisip .lihatjg { padding-left: 20px; } .linksisip .lihatjg strong { display: block; margin-bottom: 4px; } .linksisip .lihatjg a { display: block; } .quotesisip { position: relative; margin: 20px 0; padding: 0; border: 0; width: 100%; background: #FFFFFF; border-left: 5px solid #21409A; } .quotesisip td { border: none; padding: 0; } .quotesisip span { width: 5px; height: 100%; background: #21409A; position: absolute; } .quotesisip blockquote { display: block; width: 100%; font-size: 23px; margin: 0 0 12px 0; padding: 8px 12px 0 24px; line-height: 120%; position: relative; color: #000000; } .quotesisip blockquote:before { font-family: detiknetwork-FF; content: "\7b"; font-size: 45px; display: block; margin-bottom: 8px; color: #999999; } .quotesisip cite { color: #666666; font-size: 14px; display: block; margin-top: 4px; margin-left: 24px; } .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: #929292; 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; } .pic_artikel_sisip .pic > span { position: relative; display: block; z-index: 1; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; } .sisip_embed_sosmed iframe { min-width: 100%; width: 100px; *width: 100%; } /*ZOOM IMAGES*/ .wrap-zoom { z-index: 666; position: relative !important; } .img-zoomin { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } .img-zoomout, .wrap-zoom { cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } .wrap-zoom, .p_img_zoomin { position: relative; -webkit-transition: transform 300ms; -ms-transition: transform 300ms; transition: transform 300ms; } .overflow-x-hidden { overflow-x: hidden; } .zoom-overlay { z-index: 25; position: fixed; top: 0; left: 0; right: 0; bottom: 0; filter: "alpha(opacity=0)"; opacity: 0; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.85); } .zoom-overlay-open .zoom-overlay { filter: "alpha(opacity=100)"; opacity: 1; } .capzoom { position: fixed; bottom: 0; left: 0; right: 0; display: block; text-align: center; z-index: 999; opacity: 0; filter: alpha(opacity=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; } .capzoom .container { display: block; } .capzoom span { position: relative; bottom: -3px; display: inline-block; padding: 8px 12px; border-top-right-radius: 4px; border-top-left-radius: 4px; color: #f7f7f7; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.75); font-size: 14px; } .zoom-overlay-open .capzoom { opacity: 1; filter: alpha(opacity=100); } .embed_video { padding-bottom: 20px; } .embed_video .title { font-size: 14px; padding-bottom: 12px; } .embed_video input { border-radius: 4px; font-size: 12px; background: #FFFFFF; display: block; padding: 16px; width: 90%; height: 15px; margin: 0; border: 1px solid #f0f0f0; } .copy_url { position: relative; } .copy_url .notif { display: inline-block; padding: 8px; position: absolute; bottom: 0%; left: 50%; width: auto; white-space: nowrap; z-index: 5; font-size: 14px; background: #C72026; color: #FFFFFF; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(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; } .copy_url .notif:before { position: absolute; content: ""; border: 3px solid; right: 50%; margin: 0 -7px 0 0; top: 100%; border-top: 8px solid #C72026; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: none; } .copy_url .notif.url_copied { opacity: 1; filter: alpha(opacity=100); display: inline-block; bottom: 135%; -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } @keyframes live { 0% { background: #FFD200; } 100% { background: black; } 50% { background: #FFD200; } } .skybanner { margin-left: 16px; z-index: 2; } .icon-item { display: inline-flex; align-items: center; justify-content: center; margin: 5px 2px; width: 32px; height: 32px; font-size: 20px; color: #FFFFFF; border-radius: 100%; } .icon-item:hover { color: #FFFFFF; } .detail .icon-item { width: 35px; height: 35px; padding: 2px; } .icon-item__fb { background: #3C5A99; } .icon-item__tw { background: #1DA1F2; } .icon-item__ig { 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 */ } .icon-item__in { background: #0077B5; } .icon-item__yt { background: #FF0000; } .icon-item__line-fb, .icon-item__line-tw, .icon-item__line-ig, .icon-item__line-in, .icon-item__line-yt { color: #666666; margin: 0; } .icon-item__line-fb:hover, .icon-item__line-tw:hover, .icon-item__line-ig:hover, .icon-item__line-in:hover, .icon-item__line-yt:hover { color: #666666; } .icon-item--light { color: #666666; background: #e6e6e6; } .icon-item--light.icon-item:hover { color: #000000; } .icon-item--light.icon-item__fb, .icon-item--light.icon-item__fb:hover { color: #3C5A99; } .icon-item--light.icon-item__tw, .icon-item--light.icon-item__tw:hover { color: #1DA1F2; } .icon-item--light.icon-item__in, .icon-item--light.icon-item__in:hover { color: #0077B5; } .icon-logo { position: absolute; z-index: 2; top: 8px; right: 8px; } .icon-logo img { display: block; max-height: 20px; max-width: 70px; } /*--------------------------------------------------------------------------------*/ /*FORMS*/ /*--------------------------------------------------------------------------------*/ .form-element:disabled, .tagsinput:disabled, .form-element[readonly], [readonly].tagsinput, .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray [readonly].tagsinput { background-color: #f0f0f0; } .char-count { padding-right: 40px; } #charNum { position: absolute; top: 10px; right: 12px; } .charcount { padding-right: 40px; } .chars { position: absolute; top: 10px; right: 12px; } .form-char { position: relative; } .form-select { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; color: #999999; font-size: 14px; margin-bottom: 16px; } .form-select-group { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #e6e6e6; color: #666666; } .form-select-group i { font-size: 20px; margin-right: 4px; } .form-select-group select { color: #666666; } .area_ipt { position: relative; overflow: hidden; margin-bottom: 8px; border: 2px dashed #cccccc; border-radius: 8px; background: #f7f7f7; color: #999999; } .area_ipt .icon_inside span { position: absolute; top: 50%; width: 100%; text-align: center; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .area_ipt .hide { display: none; } .area_ipt .show { display: block; } .file_upload { position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .delimgtemp { position: absolute; right: 4px; bottom: 4px; z-index: 2; padding: 4px !important; } .bgon .delimgtemp { display: none; } .tagsinput { width: auto; height: auto !important; min-height: 50px !important; overflow-y: auto; } .tagsinput input { background: transparent; border: none; float: left; } .tagsinput .tag { float: left; margin-top: 4px; margin-right: 8px; margin-bottom: 4px; border: 1px solid #84c6e9; background: #e3f5fe; } .tagsinput .tag span { margin: 0; padding: 4px; display: inline-block; } .tagsinput .tag a { display: inline-block; margin-right: 4px; } .tagsinput div { display: inline-block; margin: 3px 0 0; } #tags_1_tag { width: 100px; } .box__form-indeks .form-block { margin-top: 8px; margin-bottom: 8px; } .box__form-indeks .form-element, .box__form-indeks .tagsinput { border: none; } .breaking-sticky { box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3); } .breaking-link-close { width: 20px; height: 20px; text-align: center; color: white; background: #FF0000; position: absolute; right: 10px; top: 10px; border-radius: 50%; line-height: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6); z-index: 6; } .breaking-link-close i { font-size: 12px; line-height: 17px; height: 20px; } .breaking-sponsor { color: #FFFFFF; align-items: center; z-index: 2; font-size: 10px; position: absolute; right: 12px; top: 8px; } .breaking-sponsor img { max-height: 22px; max-width: 50px; } .breaking-sticky .breaking-sponsor { margin-right: 28px; } .bottom-sticky { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; } .new_banner_reg_100:before { position: relative; content: ""; width: auto; } .static { margin-bottom: 16px; } .static__body { color: #000000; font-size: 14px; } .static__body-text ul { list-style: none; } .static__body-text h1 { font-size: 23px; } .static__body-text h2 { font-size: 20px; } .static__body-text h3 { font-size: 18px; } .static__body-text h4 { font-size: 16px; } .static__body-text h5 { font-size: 14px; } .static__body-text h6 { font-size: 12px; } .static__body-form { margin-bottom: 24px; } .static__body-form span { margin: 20px 0; display: block; vertical-align: middle; } .static__body-form--disable { opacity: 0.4; } .static__body-form .steps { align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6; margin-bottom: 16px; } .static__body-form .steps span { margin-bottom: 4px; } .notification-overlay { width: 300px; position: fixed; top: 146px; left: 50%; z-index: 12; padding: 12px 16px; 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); } .foto-pop-up { background: #000000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; overflow: scroll; padding: 20px 0; } .media-pinch { min-height: 140%; max-width: 1000px; max-height: unset; position: relative; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333333; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding: 16px; } .media-pinch > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; cursor: move; touch-action: none; vertical-align: unset; border-style: unset; position: relative; max-height: 100%; max-width: 100%; z-index: 1; top: 0; left: 0; -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); } .image__slider, .image__slider2 { padding-bottom: 0 !important; } .image__btn { color: #FFFFFF; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.5); padding: 2px; } .image__btn:hover { color: #FFFFFF; } .image__btn--prev { left: 8px; } .detail__media .image__btn--prev { left: -8px; } .image__btn--next { right: 8px; } .detail__media .image__btn--next { right: -8px; } .image__arrow, .image__arrow2 { position: absolute; top: 150px; left: 20px; right: 20px; } .detail__media .image__arrow, .detail__media .image__arrow2 { top: 115px; } .image__dots, .image__dots2 { position: absolute; top: 47px; left: 0; right: 0; padding-bottom: 56.25%; } .image__dots .slick-dots, .image__dots2 .slick-dots { position: absolute; bottom: 30px; z-index: 10; } .foto__btn { color: #FFFFFF; background: #FFFFFF; /* The Fallback */ background: rgba(255, 255, 255, 0.5); padding: 2px; } .foto__btn:hover { color: #FFFFFF; } .foto__btn--prev { left: 8px; } .foto__btn--next { right: 8px; } .foto__arrow, .foto__arrow2 { position: absolute; top: 40%; left: 20px; right: 20px; } .custom-text { color: #FFFFFF; padding: 12px 0; } .custom-text-a { border-bottom: 2px solid #999999; font-size: 16px; } .custom-text-b { font-size: 14px; } .custom-text-c { font-size: 16px; color: #333333; padding: 0; } .custom-text-d { font-size: 16px; color: #333333; } .custom-text-e { font-size: 14px; color: #999999; } .pagination__item--active { background: #333333; } .step { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; } .step__box { padding: 0 8.66667px; width: 33.3%; position: relative; } .step__box:after { content: ''; background: #6D8591; height: 4px; width: 100%; position: absolute; top: 23px; left: 0; z-index: 1; } .step__icon { display: inline-block; width: 47px; height: 47px; line-height: 47px; background: #e6e6e6; border: 1px solid #879ba5; text-align: center; position: relative; z-index: 2; } a .step__icon { background: #6D8591; color: #FFFFFF; } .step__text { margin-top: 6px; display: block; font-size: 12px; } .btn--black-base { background: #000000; color: #FFFFFF; } .btn--black-base:hover { color: #FFFFFF; } .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--link { color: #333333; } .btn--black-light-2 { background: #666666; color: #FFFFFF; } .btn--black-light-2:hover { color: #FFFFFF; } .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--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--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--link { color: #e6e6e6; }