<!--
/* -----------------------------------------------
Blogger Template Style
Name:     linkmagz
Version:  2.9.0
REDESIGN: Fanli Mandalika
----------------------------------------------- */
html {
font:normal normal 16px Helvetica, Arial, sans-serif
}
body {
background:#edf1f2;
color:#636363;
font-family:Roboto,Arial,sans-serif
}
.buttonDownload {
background:#2675A6
}
a:link,
.toc button {
text-decoration:none;
transition: all .2s;
color:#2675A6
}
a:visited {
color:#2675A6
}
a:hover {
color:#636363
}
#sidebar-wrap a:link {
color:#2675A6
}
#sidebar-wrap a:visited {
color:#2675A6
}
#sidebar-wrap a:hover {
color:#636363
}
#sidebar-wrap ul li::before  {
border: 3px solid #2675A6;
}
#footer-content,
#header-content,
.navmenu,
.menu-sticky,
#subscribe-box,
#wrapper {
max-width:1200px
}
#header-wrap {
transition: all .2s;
background:#4b525d
}
#header-content,
#navmenu-sidebar-closebtn {
transition: all .2s;
background:#424a56
}
#header-outer #header-content{
min-height:48px
}
#navmenu-wrap,
#navmenu-wrap-sticky {
transition: all .2s;
background:#57809a
}
#header-outer .navmenu .nav-outer {
min-height:62px
}
#header-outer .menu-sticky .nav-outer::after,
#header-outer .navmenu .nav-outer::after {
content:'';
min-height:inherit;
font-size:0
}
#header .widget img {
max-height: 33px;
}
.navmenu,
.menu-sticky {
transition: all .2s;
background:#547A92
}
#navmenu-sidebar-body ul li a {
color: #636363
}
#navmenu-sidebar-body ul li a:hover {
color: #2675A6
}
.ms-submenu-button::after {
border-color: #636363 transparent transparent;
}
.ms-submenu-button.ms-submenu-shown::after {
border-color: transparent transparent #636363;
}
#goTop,.comments .comments-content .icon.blog-author::after {
transition: all .2s;
color:#FFFFFF;
background:#547A92
}
#goTop::after {
transition: all .2s;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#content-wrap,
#content-wrap-produk-index,
#navmenu-sidebar-body,
#wrapper {
transition: all .2s;
background:#ffffff
}
#sidebar-wrap {
transition: all .2s;
background:#f8fafa
}
.PopularPosts .popular-post-widget-title h3.title,
.PopularPosts .popular-post-widget-title h2.title {
transition: all .2s;
box-shadow:0 0 0 2px #f8fafa
}
.html-jasa .normalwidget-title h3.title,
.html-produk .normalwidget-title h3.title,
.html-jasa .normalwidget-title h2.title,
.html-produk .normalwidget-title h2.title,
.latestposts-title h2,
#ms-related-post p.ms-title,
.share-this-pleaseeeee {
transition: all .2s;
background:#ffffff
}
.FeaturedPost h3.title,
.FeaturedPost h2.title {
transition: all .2s;
box-shadow:0 0 0 2px #ffffff
}
.normalwidget-title h3.title,
.normalwidget-title h2.title {
transition: all .2s;
background:#f8fafa
}
a.blog-pager-older-link::after,
a.blog-pager-newer-link::before {
border:solid #FFFFFF
}
.blog-pager a.js-load,
.blog-pager span.js-loaded,
.blog-pager span.js-loading,
.blog-pager a.blog-pager-older-link,
.blog-pager a.blog-pager-newer-link,
.blog-pager a.js-load:visited,
.blog-pager a.blog-pager-older-link:visited,
.blog-pager a.blog-pager-newer-link:visited {
transition: all .2s;
background:#b15f3e;
color:#FFFFFF !important
}
.js-loading::after {
border:2px solid #FFFFFF
}
.blog-pager a.js-load:hover,
.blog-pager span.js-loaded:hover,
.blog-pager span.js-loading:hover,
a.blog-pager-newer-link:hover,
a.blog-pager-older-link:hover {
background:#925035
}
.contact-form-widget input[type=button] {
transition: all .2s;
background:#b15f3e;
color:#FFFFFF
}
.contact-form-widget input[type=button]:hover {
transition: all .2s;
background:#925035
}
#social-button .widget,
#header .widget,
#header .widget a,
#navmenu-sidebar-closebtn .closebtn,
#navmenu-sidebar-closebtn .closebtn-title{
color:#FFFFFF
}
#header .widget p.title-description{
color:#FFFFFF
}
.social-icon {
transition: all .2s;
background:#424a56
}
.navmenu-content,
.navmenu-button,
.navmenu-content>ul>li>a {
color:#FFFFFF
}
.navmenu-button div {
transition: all .2s;
background-color:#FFFFFF
}
.navmenu-content>ul>li>a::before {
transition: all .2s;
background:#FFFFFF
}
.navmenu-content>ul>li.has-sub>a::after {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF
}
.darkmode-switch .switch-title{
color:#FFFFFF
}
.darkmode-switch .slider{
border:2px solid #FFFFFF
}
.darkmode-switch .slider:before {
transition: all .2s;
background:#FFFFFF
}
.darkmode-switch .switch:hover .slider:before {
background:#FFFFFF
}
.iconsearch-label {
transition: all .2s;
background:#547A92
}
.iconsearch-label path{
fill:#FFFFFF
}
.FeaturedPost h3.title,
.PopularPosts .popular-post-widget-title h3.title,
.FeaturedPost h2.title,
.PopularPosts .popular-post-widget-title h2.title {
transition: all .2s;
color:#FFFFFF;
background:#b15f3e
}
.normalwidget-title::after {
transition: all .2s;
background:#f0f4f4
}
.normalwidget-title h3.title,
.normalwidget-title h2.title {
color:#707070
}
.html-jasa .normalwidget-title::after,
.html-produk .normalwidget-title::after,
.latestposts-title::after {
transition: all .2s;
background:#f8fafa
}
.html-jasa .normalwidget-title h3.title,
.html-produk .normalwidget-title h3.title,
.html-jasa .normalwidget-title h2.title,
.html-produk .normalwidget-title h2.title,
.latestposts-title h2 {
color:#707070
}
.post-title,.post-title a{
color:#575a5f
}
.post-title a:hover{
color:#2675A6
}
.breadcrumbs,
.breadcrumbs a,
.post-info,
.post-info a{
color:#757575
}
.breadcrumbs a:hover,
.post-info a:hover{
color:#2675A6
}
#content-wrap-produk-index b.info-produk,
.img-thumbnail .label-info a,
.img-thumbnail .label-info a:visited,
.img-thumbnail .label-info a:hover {
transition: all .2s;
background:#547A92;
color:#FFFFFF !important
}
.FeaturedPost .post-summary,
.FeaturedPost .post-summary .featured-info {
transition: all .2s;
background:#f8fafa
}
@media only screen and (max-width:600px){
.FeaturedPost .post-summary{
background:#ffffff
}
}
.FeaturedPost .featured-img-bg {
transition: all .2s;
background:#ffffff
}
.FeaturedPost h2 a,.FeaturedPost h3 a {
color:#575a5f
}
.FeaturedPost h2 a:hover,
.FeaturedPost h3 a:hover{
color:#2675A6
}
.FeaturedPost p.featured-desc {
color:#636363
}
p.featured-more a:link,
p.featured-more a:visited {
transition: all .2s;
color:#FFFFFF !important;
background:#b15f3e
}
p.featured-more a:hover {
background:#925035
}
.sidebar-content ul li::before {
border:3px solid #2675A6
}
.sidebar-content ol li::before {
color:#2675A6
}
.PopularPosts .popular-post-info {
transition: all .2s;
background:#ffffff
}
.PopularPosts .popular-post-snippet {
color:#737373
}
.PopularPosts .popular-post-title a {
color:#575a5f
}
.PopularPosts .popular-post-title a:hover {
color:#2675A6
}
.Profile {
color:#737373
}
.Profile .individual,
.Profile .team {
transition: all .2s;
background:#ffffff
}
.Profile .individual .profile-link {
border:1px solid #2675A6;
color:#2675A6
}
.Profile .individual .profile-link:hover {
border:1px solid #575a5f;
color:#575a5f
}
.Profile .profile-link-author {
color:#2675A6
}
.Profile .profile-link-author:hover {
color:#575a5f
}
.Profile .location path {
fill:#737373
}
.FollowByEmail {
transition: all .2s;
background:#4b525d;
color:#FFFFFF
}
.FollowByEmail ::placeholder {
color:#737373;
opacity:.9
}
.FollowByEmail .follow-by-email-address {
transition: all .2s;
background:#f5f5f5
}
.FollowByEmail .follow-by-email-submit {
transition: all .2s;
background:#b15f3e;
color:#FFFFFF
}
.FollowByEmail .follow-by-email-submit:hover {
background:#925035
}
.label-size a.label-name {
border:1px solid #2675A6
}
.label-size a.label-name:hover {
border:1px solid #636363
}
#footer-outer {
transition: all .2s;
background:#4b525d
}
#footer-content {
transition: all .2s;
background:#424a56;
color:#FFFFFF
}
#footer-content a {
color:#FFFFFF
}
#footer-content a:hover {
color:#dddddd
}
/*! ini normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0; }
/**
* Render the `main` element consistently in IE.
*/
main {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent; }
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */ }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none; }
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none; }
/* dark mode style */
body.darkmode {
background: #353535;
color: #eee; }
body.darkmode a:link, body.darkmode .toc button {
color: #a3daef;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
body.darkmode a:visited {
color: #a3daef; }
body.darkmode a:hover {
color: #fff; }
body.darkmode #sidebar-wrap a:link {
color: #eee; }
body.darkmode #sidebar-wrap a:visited {
color: #eee; }
body.darkmode #sidebar-wrap a:hover {
color: #fff; }
body.darkmode #header-wrap {
background: #2b2b2b; }
body.darkmode #header-content,
body.darkmode #navmenu-sidebar-closebtn {
background: #232323; }
body.darkmode #navmenu-wrap,
body.darkmode #navmenu-wrap-sticky {
background: #2f2f2f; }
body.darkmode .navmenu, body.darkmode .menu-sticky {
background: #2b2b2b; }
body.darkmode #navmenu-sidebar-body ul li a,
body.darkmode .navmenu-content li li a {
color: #eee; }
body.darkmode #navmenu-sidebar-body ul li a:hover {
color: #fff; }
body.darkmode .ms-submenu-button::after {
border-color: #eee transparent transparent; }
body.darkmode .ms-submenu-button.ms-submenu-shown::after {
border-color: transparent transparent #eee; }
body.darkmode #sidebar-wrap {
background: #2f2f2f; }
body.darkmode .PopularPosts .popular-post-widget-title h3.title,
body.darkmode .PopularPosts .popular-post-widget-title h2.title {
-webkit-box-shadow: 0 0 0 2px #2f2f2f;
box-shadow: 0 0 0 2px #2f2f2f; }
body.darkmode .normalwidget-title h3.title,
body.darkmode .normalwidget-title h2.title {
background: #2f2f2f; }
body.darkmode #wrapper,
body.darkmode #content-wrap,
body.darkmode #content-wrap-produk-index,
body.darkmode #navmenu-sidebar-body,
body.darkmode .latestposts-title h2,
body.darkmode .html-produk .normalwidget-title h3.title,
body.darkmode .html-jasa .normalwidget-title h3.title,
body.darkmode .html-produk .normalwidget-title h2.title,
body.darkmode .html-jasa .normalwidget-title h2.title,
body.darkmode .share-this-pleaseeeee,
body.darkmode #ms-related-post p.ms-title,
body.darkmode .FeaturedPost .featured-img-bg,
body.darkmode .PopularPosts .popular-post-info,
body.darkmode .Profile .individual,
body.darkmode .Profile .team {
background: #323232; }
body.darkmode .FeaturedPost h3.title,
body.darkmode .FeaturedPost h2.title {
-webkit-box-shadow: 0 0 0 2px #323232;
box-shadow: 0 0 0 2px #323232; }
body.darkmode #header .widget a,
body.darkmode #header .widget,
body.darkmode #navmenu-sidebar-closebtn .closebtn,
body.darkmode #navmenu-sidebar-closebtn .closebtn-title {
color: #eee; }
body.darkmode #header .widget p.title-description {
color: #bbb; }
body.darkmode .navmenu-content > ul > li > a,
body.darkmode .navmenu-button {
color: #eee; }
body.darkmode .navmenu-button div {
background-color: #eee; }
body.darkmode .navmenu-content > ul > li > a::before {
background: #eee; }
body.darkmode .navmenu-content > ul > li.has-sub > a::after {
border-bottom: 1px solid #eee;
border-left: 1px solid #eee; }
body.darkmode .navmenu-content li li.has-sub::after {
border-bottom: 1px solid #eee;
border-right: 1px solid #eee; }
body.darkmode .navmenu-content ul li ul {
background: #4a4a4a; }
body.darkmode .navmenu-content > ul > li > ul:before {
border-bottom-color: #4a4a4a; }
body.darkmode .navmenu-content li li a:before {
background: #eee; }
body.darkmode #social-button .social-icon {
background: #232323; }
body.darkmode #social-button .social-icon:hover {
background: #353535; }
body.darkmode .iconsearch-label {
background: #2b2b2b; }
body.darkmode .iconsearch-label:hover {
background: #000; }
body.darkmode .iconsearch-label path {
fill: #eee; }
body.darkmode .darkmode-switch .switch {
opacity: 1; }
body.darkmode .darkmode-switch .switch-title {
color: #bbb;
opacity: 1; }
body.darkmode .darkmode-switch .slider {
border: 2px solid #bbb; }
body.darkmode .darkmode-switch .slider:before {
background: #eee; }
body.darkmode .darkmode-switch .switch:hover .slider:before {
background: #fff; }
body.darkmode .normalwidget-title::after {
background: #383838; }
body.darkmode .normalwidget-title h3.title,
body.darkmode .normalwidget-title h2.title {
color: #eee; }
body.darkmode .latestposts-title::after,
body.darkmode .html-produk .normalwidget-title::after,
body.darkmode .html-jasa .normalwidget-title::after {
background: #383838; }
body.darkmode .latestposts-title h2,
body.darkmode .html-produk .normalwidget-title h3.title,
body.darkmode .html-jasa .normalwidget-title h3.title,
body.darkmode .html-produk .normalwidget-title h2.title,
body.darkmode .html-jasa .normalwidget-title h2.title {
color: #eee; }
body.darkmode .post-title, body.darkmode .post-title a {
color: #eee; }
body.darkmode .post-title a:hover {
color: #fff; }
body.darkmode .post-info,
body.darkmode .post-info a,
body.darkmode .breadcrumbs,
body.darkmode .breadcrumbs a {
color: #bbb; }
body.darkmode .post-info a:hover,
body.darkmode .breadcrumbs a:hover {
color: #fff; }
body.darkmode .FeaturedPost .post-summary,
body.darkmode .FeaturedPost .post-summary .featured-info {
background: #2f2f2f; }
@media only screen and (max-width: 600px) {
body.darkmode .FeaturedPost .post-summary {
background: #323232; } }
body.darkmode .FeaturedPost h3 a,
body.darkmode .FeaturedPost h2 a {
color: #eee; }
body.darkmode .FeaturedPost h3 a:hover,
body.darkmode .FeaturedPost h2 a:hover {
color: #fff; }
body.darkmode .FeaturedPost p.featured-desc {
color: #eee; }
body.darkmode #sidebar-wrap ul li::before {
border: 3px solid #eee; }
body.darkmode #sidebar-wrap ol li::before {
color: #eee; }
body.darkmode .PopularPosts .popular-post-snippet {
color: #bbb; }
body.darkmode .PopularPosts .popular-post-title a {
color: #eee; }
body.darkmode .PopularPosts .popular-post-title a:hover {
color: #fff; }
body.darkmode .Profile {
color: #eee; }
body.darkmode .Profile .individual .profile-link {
border: 1px solid #eee;
color: #eee; }
body.darkmode .Profile .individual .profile-link:hover {
border: 1px solid #fff;
color: #fff; }
body.darkmode .Profile .profile-link-author {
color: #eee; }
body.darkmode .Profile .profile-link-author:hover {
color: #fff; }
body.darkmode .Profile .location path {
fill: #eee; }
body.darkmode .FollowByEmail {
background: #2d2d2d;
color: #bbb; }
body.darkmode .FollowByEmail ::-webkit-input-placeholder {
color: #666;
opacity: .9; }
body.darkmode .FollowByEmail ::-moz-placeholder {
color: #666;
opacity: .9; }
body.darkmode .FollowByEmail :-ms-input-placeholder {
color: #666;
opacity: .9; }
body.darkmode .FollowByEmail ::-ms-input-placeholder {
color: #666;
opacity: .9; }
body.darkmode .FollowByEmail ::placeholder {
color: #666;
opacity: .9; }
body.darkmode .FollowByEmail .follow-by-email-address {
background: #fff; }
body.darkmode .label-size a.label-name {
border: 1px solid #eee; }
body.darkmode .label-size a.label-name:hover {
border: 1px solid #fff; }
body.darkmode iframe.blogger-comment-from-post {
padding: 0 10px;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
body.darkmode #footer-outer {
background: #313131; }
body.darkmode #footer-content {
background: #282828;
color: #eee; }
body.darkmode #footer-content a {
color: #eee; }
body.darkmode #footer-content a:hover {
color: #fff; }
/* dark mode style end */
/* general style */
body {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
padding: 0;
margin: 0;
overflow-y: scroll;
position: relative; }
blockquote {
background: rgba(153, 163, 173, 0.08);
border-left: 5px solid rgba(121, 128, 136, 0.07);
padding: 15px 20px;
font-style: italic;
margin: 20px 0 20px 32px;
margin: 1.25rem 0 1.25rem 2rem; }
@media only screen and (max-width: 480px) {
blockquote {
margin: 1.25rem 0 1.25rem 0;
padding: 10px 15px; } }
blockquote[style] {
background: transparent;
border-left: 0px solid transparent;
font-style: normal; }
ul, ol {
margin: 20px 0 20px 0;
margin: 1.25rem 0 1.25rem 0;
padding-left: 48px;
padding-left: 3rem; }
@media only screen and (max-width: 480px) {
ul, ol {
padding-left: 1.25rem; } }
ul ul, ol ol {
margin: 8px 0 8px 0;
margin: .5rem 0 .5rem 0; }
li ul, li ol {
margin: 12px 0;
margin: 0.75rem 0; }
:not(pre) > code {
background: rgba(232, 191, 115, 0.08);
padding: 3px 6px; }
pre {
word-break: break-word;
white-space: pre-wrap;
background: rgba(232, 191, 115, 0.08);
border-left: 5px solid rgba(245, 228, 194, 0.17);
padding: 15px 20px;
margin: 20px 0;
margin: 1.25rem 0; }
.lazyload {
background: #d7dee0; }
.blur-up {
opacity: 1 !important;
border-radius: 4px;
overflow: hidden;
-webkit-animation-duration: 1.25s;
animation-duration: 1.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #d7dee0;
background: -webkit-gradient(linear, left top, right top, color-stop(10%, #d7dee0), color-stop(18%, #c8cecf), color-stop(33%, #d7dee0));
background: linear-gradient(to right, #d7dee0 10%, #c8cecf 18%, #d7dee0 33%);
background-size: 200% 100% !important;
height: 100%;
position: relative; }
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: 100% 0; }
100% {
background-position: -100% 0; } }
@keyframes placeHolderShimmer {
0% {
background-position: 100% 0; }
100% {
background-position: -100% 0; } }
.banner-jasa .blur-up, .banner-produk .blur-up {
opacity: 0.45 !important; }
.template-settings,
.custom-css,
.custom-javascript-footer {
display: none; }
@-webkit-keyframes smallslide {
100% {
padding-left: 8px; } }
@keyframes smallslide {
100% {
padding-left: 8px; } }
.navbarrr, .quickedit, .BlogSearch h3 {
display: none; }
iframe {
max-width: 100%; }
table, img {
max-width: 100%;
height: auto; }
table[border="1"] {
border-collapse: collapse; }
table[border="1"] td {
vertical-align: top;
text-align: left;
font-size: 14px;
font-size: 0.875rem;
padding: 3px 10px;
border: 1px solid rgba(0, 0, 0, 0.23); }
table[border="1"] th {
vertical-align: top;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
padding: 5px 10px;
border: 1px solid rgba(0, 0, 0, 0.23); }
.post-body {
word-wrap: break-word; }
.post-body a:link {
text-decoration: underline; }
.post-body a[imageanchor] {
display: inline-block; }
.post-body a[style="margin-left: 1em; margin-right: 1em;"] {
margin: 0 !important;
display: inline-block; }
.post-body iframe {
max-width: 100%;
display: block;
margin: 0 auto; }
.post-body table.tr-caption-container {
margin-bottom: 16px;
margin-bottom: 1rem;
position: relative;
overflow: hidden; }
.post-body td.tr-caption {
font-size: 12px;
font-size: 0.75rem;
position: absolute;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 3px 10px;
color: #fff;
border-radius: 6px 0 0 0;
word-break: break-word; }
.post-body table.tr-caption-container a, .post-body table.tr-caption-container img {
display: block;
margin-bottom: 0 !important; }
.post-body > .YOUTUBE-iframe-video {
width: 474px; }
.youtube-responsive {
overflow: hidden;
position: relative;
width: 100%; }
.youtube-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.youtube-responsive::after {
padding-top: 56.25%;
display: block;
content: ''; }
@media only screen and (max-width: 480px) {
.youtube-responsive {
margin: 0 -22px;
width: 100vw; } }
@media only screen and (max-width: 480px) {
.post-body > img.fullwidth, .post-body div img.fullwidth {
width: 100vw;
max-width: 100vw;
margin: 0px -22px !important; }
.post-body .tr-caption-container.fullwidth {
margin-right: -22px !important;
margin-left: -22px !important;
width: 100vw;
max-width: 100vw; }
.post-body .tr-caption-container.fullwidth img {
width: 100vw;
max-width: 100vw;
margin: 0px !important; }
.post-body a[imageanchor], table.tr-caption-container {
float: none !important;
margin-left: auto !important;
margin-right: auto !important; }
.post-body .separator > a {
margin-left: auto !important;
margin-right: auto !important; } }
.CSS_LIGHTBOX {
z-index: 9999 !important; }
.CSS_LAYOUT_COMPONENT {
color: transparent; }
.skip-to-link {
display: inline-block;
background: #a0520f;
color: #fff !important;
text-decoration: none !important;
left: 0;
top: 0;
padding: 3px 10px;
position: absolute;
z-index: 1000;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
outline: none;
border-radius: 4px;
border: 2px solid #fff; }
.skip-to-link:focus {
-webkit-transform: translateY(0%);
transform: translateY(0%); }
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
height: 0;
position: absolute;
width: 0;
top: 0;
overflow: hidden; }
a.read-more-link,
p.featured-more a {
position: relative; }
#header-outer {
width: 100%; }
#header-outer #header-wrap {
width: 100%; }
#header-outer #header-content {
position: relative;
margin: 0 auto;
padding: 0 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
@media only screen and (max-width: 900px) {
#header-outer #header-content {
padding: 3px 30px; } }
@media only screen and (max-width: 480px) {
#header-outer #header-content {
padding: 22px 22px 12px; } }
#header-outer #header-content:after {
content: '';
min-height: inherit;
font-size: 0;
display: block; }
@media only screen and (max-width: 480px) {
#header-outer #header-content:after {
min-height: 0; } }
#header-outer #navmenu-wrap {
width: 100%; }
#header-outer .menu-sticky .nav-outer {
min-height: 52px; }
#header-outer .navmenu, #header-outer .menu-sticky {
margin: 0 auto;
padding: 0 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#header-outer .navmenu .nav-outer, #header-outer .menu-sticky .nav-outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
@media only screen and (max-width: 900px) {
#header-outer .navmenu, #header-outer .menu-sticky {
padding: 0 30px; } }
@media only screen and (max-width: 480px) {
#header-outer .navmenu, #header-outer .menu-sticky {
padding: 0 22px; } }
#header-outer #navmenu-wrap-sticky {
position: fixed;
width: 100%;
z-index: 9;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(-101%);
transform: translateY(-101%);
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
#header-outer #navmenu-wrap-sticky.navsticky-show {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
display: table; }
#header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
max-width: 50%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media only screen and (max-width: 480px) {
#header {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
text-align: center;
margin-bottom: 10px; } }
#header .widget {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media only screen and (max-width: 480px) {
#header .widget {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%; } }
@media only screen and (max-width: 480px) {
#header .widget .blog-title-wrap {
margin: 0 auto; } }
#header .widget a {
-webkit-transition: all 0.2s;
transition: all 0.2s; }
@media only screen and (max-width: 480px) {
#header .widget a {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%; } }
@media only screen and (max-width: 480px) {
#header .widget > h1.blog-title, #header .widget > h2.blog-title {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%; } }
#header .widget h1.blog-title, #header .widget h2.blog-title {
margin: 5px 25px 5px 0;
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
padding: 0 0;
line-height: 32px;
line-height: 2rem; }
@media only screen and (max-width: 480px) {
#header .widget h1.blog-title, #header .widget h2.blog-title {
margin: 0 0;
text-align: center; } }
#header .widget p.title-description {
font-size: 14px;
font-size: 0.875rem;
margin: 5px 0; }
@media only screen and (max-width: 480px) {
#header .widget p.title-description {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
margin-top: 8px;
margin-bottom: 0px;
text-align: center; } }
#header .widget img {
display: block;
width: auto;
margin: 5px 25px 5px 0; }
@media only screen and (max-width: 480px) {
#header .widget img {
display: block;
margin: 0 auto;
max-width: 100%; } }
#header .widget .hide-title .blog-title {
text-indent: -9999px;
visibility: hidden;
margin: 0 0;
padding: 0 0;
height: 0px; }
.navmenu-content {
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
@media only screen and (max-width: 900px) {
.navmenu-content {
display: none; } }
.navmenu-content ul {
list-style: none;
margin: 0;
padding: 0; }
.navmenu-content > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap; }
.navmenu-content > ul > li {
position: relative;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
font-weight: bold;
margin: 0 38px 0 0;
padding: 0; }
.navmenu-content > ul > li > a::before {
position: absolute;
bottom: 12px;
left: 0;
content: '';
display: block;
width: 0;
height: 2px;
-webkit-transition: width .2s;
transition: width .2s; }
.navmenu-content > ul > li > a {
line-height: 42px;
display: inline-block;
position: relative; }
.navmenu-content > ul > li.has-sub > a {
padding-right: 13px; }
.navmenu-content > ul > li.has-sub:hover > a::before {
width: calc(100% - 13px);
-webkit-transition: width .2s;
transition: width .2s; }
.navmenu-content > ul > li:hover > a::before {
width: 100%;
-webkit-transition: width .2s;
transition: width .2s; }
.navmenu-content > ul > li.has-sub > a::after {
width: 4px;
content: '';
height: 4px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 16px;
right: 0; }
.navmenu-content > ul > li a:hover {
cursor: pointer; }
.navmenu-content ul li ul {
background: #ffffff;
padding: 12px 0;
-webkit-box-shadow: 0 5px 20px rgba(99, 99, 99, 0.11);
box-shadow: 0 5px 20px rgba(99, 99, 99, 0.11);
border-radius: 5px;
visibility: hidden;
opacity: 0;
min-width: 100px;
position: absolute;
z-index: 6;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
top: 42px;
left: 0px;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: visibility .2s ease,-webkit-transform .2s ease;
transition: visibility .2s ease,-webkit-transform .2s ease;
transition: visibility .2s ease,transform .2s ease;
transition: visibility .2s ease,transform .2s ease,-webkit-transform .2s ease;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap; }
.navmenu-content > ul > li > ul::before {
content: '';
display: block;
position: absolute !important;
left: 10px;
top: -12px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 6px solid #fff;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent; }
.navmenu-content li li a {
color: #666;
position: relative;
line-height: 35px;
display: inline-block; }
.navmenu-content li li {
display: block;
padding: 0 24px;
position: relative;
text-transform: none;
font-weight: normal;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
float: none;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 150px; }
.navmenu-content ul li:hover > ul,
.navmenu-content ul li ul:hover,
.navmenu-content ul li ul:focus {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .2s ease,visibility .2s ease,-webkit-transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,-webkit-transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,transform .2s ease,-webkit-transform .2s ease; }
.navmenu-content ul li:focus-within > ul {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .2s ease,visibility .2s ease,-webkit-transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,-webkit-transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,transform .2s ease;
transition: opacity .2s ease,visibility .2s ease,transform .2s ease,-webkit-transform .2s ease; }
.navmenu-content ul ul li a:hover {
cursor: pointer; }
.navmenu-content li li a::before {
position: absolute;
bottom: 8px;
left: 0;
content: '';
display: block;
width: 0px;
height: 2px;
opacity: .15;
background: #787d84;
-webkit-transition: width .2s;
transition: width .2s; }
.navmenu-content li li:hover > a::before {
width: 100%;
-webkit-transition: width .2s;
transition: width .2s; }
.navmenu-content li li.has-sub::after {
border-bottom: 1px solid #77858f;
border-right: 1px solid #77858f;
width: 4px;
content: '';
height: 4px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 14px;
right: 15px; }
.navmenu-content ul li ul li {
clear: both; }
.navmenu-content ul ul ul {
top: 0;
margin-left: 100%;
-webkit-transform: translateX(-10px);
transform: translateX(-10px); }
.nav-secondary {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.menu-sticky .navmenu-content > ul > li > a, .menu-sticky .navmenu-content li li a {
outline: none; }
.navmenu-button {
display: none; }
@media only screen and (max-width: 900px) {
.navmenu-button {
display: block;
background: transparent;
height: 19px;
width: 24px;
padding: 0;
margin: 0;
border: none;
cursor: pointer;
outline: none; } }
.navmenu-button div {
width: 24px;
height: 3px;
border-radius: 2px;
margin-bottom: 5px; }
.navmenu-button div:last-child {
margin-bottom: 0;
width: 17px; }
#navmenu-overlay {
display: none;
position: fixed;
z-index: 22;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.85); }
@media only screen and (max-width: 900px) {
.navmenu-activated #navmenu-overlay {
display: block; }
.navmenu-activated #navmenu-sidebar {
-webkit-transform: translateX(0);
transform: translateX(0); } }
#navmenu-sidebar {
display: none;
position: fixed;
width: 80%;
z-index: 24;
height: 100%;
height: 100vh;
top: 0;
left: 0px;
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }
@media only screen and (max-width: 900px) {
#navmenu-sidebar {
display: block; } }
#navmenu-sidebar-body {
padding: 110px 22px 22px;
overflow-y: auto;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#navmenu-sidebar-body ul {
margin: 0;
padding: 0; }
#navmenu-sidebar-body ul ul {
-webkit-animation: smallslide 300ms;
animation: smallslide 300ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
margin: 0 0 5px 10px;
padding: 0; }
#navmenu-sidebar-body ul li {
position: relative;
list-style: none;
display: block;
font-weight: bold;
text-transform: uppercase; }
#navmenu-sidebar-body ul li ul li {
list-style: none;
display: block;
font-weight: normal;
text-transform: none;
font-size: 14px;
font-size: 0.875rem; }
#navmenu-sidebar-body ul li a {
display: block;
padding: 13px 0;
font-size: 14px;
font-size: 0.875rem;
outline: none; }
#navmenu-sidebar-body ul li li a {
padding: 8px 0; }
#navmenu-sidebar-body ul li .ms-submenu-button {
background: rgba(165, 165, 165, 0.1);
border-radius: 20px;
padding: 2px 0;
position: absolute;
top: 0;
right: 0;
cursor: pointer; }
#navmenu-sidebar-body ul li .ms-submenu-button::after {
content: "";
border-style: solid;
border-width: 4px;
height: 0px;
width: 0px;
display: inline-block;
vertical-align: middle;
margin: 16px 16px 12px; }
#navmenu-sidebar-body ul li .ms-submenu-button.ms-submenu-shown::after {
margin: 12px 16px 16px; }
#navmenu-sidebar-body ul li li .ms-submenu-button {
right: 3px; }
#navmenu-sidebar-body ul li li .ms-submenu-button::after {
margin: 13px 13px 9px; }
#navmenu-sidebar-body ul li li .ms-submenu-button.ms-submenu-shown::after {
margin: 9px 13px 13px; }
#navmenu-sidebar-closebtn {
display: block;
padding: 25px 22px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1; }
#navmenu-sidebar-closebtn .closebtn {
background: rgba(0, 0, 0, 0.08);
display: inline-block;
padding: 10px 10px;
margin-right: 10px;
border-radius: 25px;
font-weight: bold;
text-align: center;
height: 25px;
width: 25px; }
#navmenu-sidebar-closebtn .closebtn:hover {
cursor: pointer; }
#navmenu-sidebar-closebtn .closebtn-title {
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
font-weight: bold; }
#wrapper {
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
position: relative; }
.main-content {
overflow-x: auto;
overflow-y: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 36px;
padding: 0 36px; }
@media only screen and (max-width: 900px) {
.main-content {
margin: 0 0 30px;
padding: 0 30px; } }
@media only screen and (max-width: 480px) {
.main-content {
margin: 0 0 22px;
padding: 0 22px; } }
.latestposts-title {
width: 100%;
margin: 0px 0 30px;
position: relative;
text-align: center;
line-height: 16px;
line-height: 1rem; }
.latestposts-title::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 16px;
height: 1rem; }
.latestposts-title h2 {
position: relative;
z-index: 1;
display: inline-block;
margin: 0;
padding: 0px 10px;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase; }
#content-wrap {
-webkit-box-flex: 1;
-ms-flex: 1 1 69%;
flex: 1 1 69%;
max-width: 69%;
padding: 36px 0; }
@media only screen and (max-width: 900px) {
#content-wrap {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
padding: 30px 0; } }
@media only screen and (max-width: 480px) {
#content-wrap {
padding: 22px 0; } }
#content-wrap .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap; }
#content-wrap .content .post-outer {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
max-width: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 45px;
padding-right: 15px; }
@media only screen and (max-width: 480px) {
#content-wrap .content .post-outer {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
padding-right: 0; } }
#content-wrap .content .post-outer:nth-of-type(2n+0) {
padding-left: 15px;
padding-right: 0px; }
@media only screen and (max-width: 480px) {
#content-wrap .content .post-outer:nth-of-type(2n+0) {
padding-left: 0px; } }
#content-wrap .content .post-outer .post-content {
height: 100%; }
#content-wrap .content .post-outer .img-thumbnail {
width: 100%;
position: relative;
border-radius: 4px;
overflow: hidden;
height: 0;
padding-top: 56.25%; }
#content-wrap .content .post-outer .img-thumbnail > a {
display: block; }
#content-wrap .content .post-outer .img-thumbnail img {
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0; }
#content-wrap .content .post-outer .img-thumbnail .label-info {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
font-size: 11px;
font-size: 0.6875rem; }
#content-wrap .content .post-outer .img-thumbnail .label-info a {
display: inline-block;
margin-top: 3px;
padding: 4px 8px 2px;
text-transform: uppercase;
border-radius: 3px; }
#content-wrap .content .post-outer .post-title {
font-size: 20px;
font-size: 1.25rem;
margin: 13px 0 8px; }
#content-wrap .content .post-outer .post-info {
margin: 0 0 8px;
font-size: 14px;
font-size: 0.875rem; }
#content-wrap .content .post-outer .post-info span, #content-wrap .content .post-outer .post-info time {
display: inline-block;
margin: 0; }
#content-wrap .content .post-outer .post-info span:not(:last-child):after, #content-wrap .content .post-outer .post-info time:not(:last-child):after {
content: "\b7";
margin: 0 3.2px;
margin: 0 .2rem; }
#content-wrap .content-single .post-outer-single {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%; }
#content-wrap .content-single .post-outer-single .post-content {
color: inherit;
padding: 0 0 30px; }
#content-wrap .content-single .post-outer-single .post-title {
font-size: 32px;
font-size: 2rem;
margin: 0 0 16px;
margin: 0 0 1rem; }
@media only screen and (max-width: 900px) {
#content-wrap .content-single .post-outer-single .post-title {
font-size: 1.75rem; } }
@media only screen and (max-width: 480px) {
#content-wrap .content-single .post-outer-single .post-title {
font-size: 1.375rem; } }
#content-wrap .content-single .post-outer-single .post-info {
margin: 0 0 25px;
margin: 0 0 1.5625rem;
font-size: 14px;
font-size: 0.875rem; }
#content-wrap .content-single .post-outer-single .post-info span, #content-wrap .content-single .post-outer-single .post-info time {
display: inline-block;
margin: 0; }
#content-wrap .content-single .post-outer-single .post-info span:not(:last-child):after, #content-wrap .content-single .post-outer-single .post-info time:not(:last-child):after {
content: "\b7";
margin: 0 3.2px;
margin: 0 .2rem; }
#content-wrap-page {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
margin: 0 auto;
padding: 36px 0; }
@media only screen and (max-width: 900px) {
#content-wrap-page {
padding: 30px 0; } }
@media only screen and (max-width: 480px) {
#content-wrap-page {
padding: 22px 0; } }
#content-wrap-page .post-outer-single {
max-width: 800px;
margin: 0 auto; }
#content-wrap-page h1 {
text-align: center;
margin: 0 0 25.6px;
margin: 0 0 1.6rem; }
/* SLOT IKLAN */
.iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-infeed .widget, .matched-content .widget {
margin: 0 36px; }
@media only screen and (max-width: 900px) {
.iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-infeed .widget, .matched-content .widget {
margin: 0 30px; } }
@media only screen and (max-width: 480px) {
.iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-infeed .widget, .matched-content .widget {
margin: 0 22px; } }
.iklan-infeed .widget-content {
max-width: calc(50% - 15px); }
@media only screen and (max-width: 480px) {
.iklan-infeed .widget-content {
max-width: 100%; } }
.post-content .kode-iklan-infeed {
overflow: hidden; }
.post-body .widget-content {
text-align: center;
margin: 24px 0;
margin: 1.5rem 0;
display: block;
clear: both; }
.post-body .widget-content > * {
text-align: center;
margin: 0 auto; }
.post-body ul .widget-content, .post-body ol .widget-content, .post-body blockquote .widget-content, .post-body table .widget-content, .post-body pre .widget-content, .post-body code .widget-content {
display: none; }
.post-body .widget-content.kode-iklan-atas {
margin-top: 0; }
.post-body .widget-content.kode-iklan-bawah {
margin-bottom: 0; }
.post-body .widget-content:blank {
margin: 0 0; }
.post-body .kode-matched-content {
margin: 0 0 30px; }
#ms-matched-content .kode-matched-content {
overflow: hidden; }
/* hide adsense auto ads on unwanted places */
body > .google-auto-placed,
#wrapper > .google-auto-placed,
#content-wrap > .google-auto-placed,
#content-wrap-produk-index > .google-auto-placed,
#content-wrap-page > .google-auto-placed,
footer > .google-auto-placed,
header > .google-auto-placed,
#sidebar-wrap > .google-auto-placed,
.PopularPosts .google-auto-placed,
#subscribe-box-wrap .google-auto-placed,
#navmenu-wrap .google-auto-placed {
display: none; }
.post-body pre .google-auto-placed, .post-body blockquote .google-auto-placed, .post-body table .google-auto-placed, .post-body ul .google-auto-placed, .post-body ol .google-auto-placed, .post-body #baca-juga .google-auto-placed {
display: none; }
#sidebar-wrap {
-webkit-box-flex: 1;
-ms-flex: 1 1 31%;
flex: 1 1 31%;
max-width: 31%;
padding: 36px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
@media only screen and (max-width: 900px) {
#sidebar-wrap {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
padding: 30px 0;
margin-top: 45px; } }
@media only screen and (max-width: 480px) {
#sidebar-wrap {
padding: 22px 0; } }
.sidebar-content .widget, .sidebar-content-sticky .widget {
margin-bottom: 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 36px; }
@media only screen and (max-width: 900px) {
.sidebar-content .widget, .sidebar-content-sticky .widget {
overflow-x: auto;
padding: 0 30px; } }
@media only screen and (max-width: 480px) {
.sidebar-content .widget, .sidebar-content-sticky .widget {
padding: 0 22px; } }
.sidebar-content .widget-content, .sidebar-content-sticky .widget-content {
overflow-x: hidden; }
@media only screen and (max-width: 900px) {
.sidebar-content .widget-content, .sidebar-content-sticky .widget-content {
overflow-x: unset; } }
.sidebar-content h2, .sidebar-content h3, .sidebar-content-sticky h2, .sidebar-content-sticky h3 {
margin: 0 0 15px;
font-size: 18px;
font-size: 1.125rem;
text-align: center; }
.sidebar-content ul, .sidebar-content ol, .sidebar-content-sticky ul, .sidebar-content-sticky ol {
margin: 0; }
.sidebar-content ul li, .sidebar-content ol li, .sidebar-content-sticky ul li, .sidebar-content-sticky ol li {
padding: 0 0;
margin: 10px 0; }
.sidebar-content ul, .sidebar-content-sticky ul {
padding: 0 0 0 20px;
padding: 0 0 0 1.25rem; }
.sidebar-content ul li, .sidebar-content-sticky ul li {
list-style-type: none;
position: relative; }
.sidebar-content ul li::before, .sidebar-content-sticky ul li::before {
position: absolute;
top: 7px;
left: -18px;
content: " ";
width: 3px;
height: 3px;
display: inline-block;
opacity: .7; }
.sidebar-content ol, .sidebar-content-sticky ol {
list-style: none;
counter-reset: my-awesome-counter;
padding: 0; }
.sidebar-content ol li, .sidebar-content-sticky ol li {
counter-increment: my-awesome-counter; }
.sidebar-content ol li::before, .sidebar-content-sticky ol li::before {
content: counter(my-awesome-counter) ". ";
margin-right: 8px;
margin-right: 0.5rem;
display: inline-block;
font-weight: bold; }
.sidebar-content-sticky {
position: sticky;
top: 36px; }
@media only screen and (max-width: 900px) {
.sidebar-content-sticky {
position: static; } }
#top-widget, #top-widget2 {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
text-align: center; }
#top-widget.no-items, #top-widget2.no-items {
display: none; }
#top-widget h2, #top-widget2 h2 {
display: none; }
#top-widget .widget-content, #top-widget2 .widget-content {
text-align: center;
margin: 0 0 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 36px;
overflow-x: auto;
overflow-y: hidden; }
@media only screen and (max-width: 900px) {
#top-widget .widget-content, #top-widget2 .widget-content {
margin: 0 0 30px;
padding: 0 30px; } }
@media only screen and (max-width: 480px) {
#top-widget .widget-content, #top-widget2 .widget-content {
margin: 0 0 22px;
padding: 0 22px; } }
#top-widget h3,
#top-widget .normalwidget-title,
#top-widget .normalwidget-title::after {
display: none;
visibility: hidden;
height: 0;
opacity: 0; }
.PopularPosts {
margin: 14px auto 45px;
max-width: 405px;
overflow-x: unset !important; }
.popular-posts-wrap {
color: inherit; }
.popular-posts-wrap .the-most-popular .popular-post-thumbnail img, .popular-posts-wrap .the-most-popular .popular-post-thumbnail a {
display: block; }
.popular-posts-wrap .the-most-popular .popular-post-thumbnail img {
width: 100%;
border-radius: 4px; }
.popular-posts-wrap .the-most-popular .popular-post-info {
padding: 10px 15px; }
.popular-posts-wrap .the-most-popular .popular-post-info .popular-post-title {
margin: 0 0;
font-weight: bold; }
.popular-posts-wrap .the-most-popular .popular-post-info .popular-post-snippet {
margin-top: 8px;
font-size: 14px;
font-size: 0.875rem; }
.popular-posts-wrap .the-most-popular .info-has-thumbnail {
padding: 10px 15px; }
.popular-posts-wrap .popular-post-content {
margin: 2px 0px; }
.popular-posts-wrap .popular-post-content .popular-post-info {
padding: 10px 15px; }
.popular-posts-wrap .popular-post-content .popular-post-info .popular-post-title {
margin: 0 0;
font-weight: bold; }
.popular-posts-wrap .popular-post-content .popular-post-info .popular-post-snippet {
margin-top: 8px;
font-size: 14px;
font-size: 0.875rem; }
#subscribe-box-wrap {
padding: 0; }
#subscribe-box-wrap #subscribe-box {
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center; }
#subscribe-box-wrap #subscribe-box p {
font-size: 32px;
padding: 0;
margin: 0;
font-weight: bold; }
.FollowByEmail {
overflow-y: auto; }
.FollowByEmail .subscribewidget-title {
position: relative;
padding: 36px 36px 20px;
word-break: break-word; }
.FollowByEmail .subscribewidget-title h3.title,
.FollowByEmail .subscribewidget-title h2.title {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
margin: 0 0;
line-height: 28px;
line-height: 1.75rem; }
.FollowByEmail .widget-content {
padding: 0 36px 36px; }
.FollowByEmail .widget-content .follow-by-email-inner form .follow-by-email-address {
padding: 15px 20px;
border-radius: 4px;
margin: 5px;
border: none;
max-width: 80%; }
.FollowByEmail .widget-content .follow-by-email-inner form .follow-by-email-submit {
cursor: pointer;
padding: 15px 20px;
margin: 5px;
border: none;
border-radius: 4px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
text-transform: uppercase; }
.cloud-label-widget-content .label-size {
margin: 3px 1px;
display: inline-block; }
.cloud-label-widget-content .label-size a.label-name {
display: inline-block;
padding: 4px 8px;
font-size: 14px;
font-size: 0.875rem;
border-radius: 3px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.cloud-label-widget-content .label-size a.label-name span.label-count {
color: inherit;
margin-left: 3px; }
.Profile .individual {
position: relative;
padding: 30px 25px; }
.Profile .individual .profile-img-wrap {
text-align: center; }
.Profile .individual .profile-img-wrap .profile-img {
width: 100px;
border-radius: 50px;
margin-bottom: 10px; }
.Profile .individual .profile-info {
text-align: center; }
.Profile .individual .profile-info .profile-link-author {
font-size: 20px;
font-size: 1.25rem;
margin: 10px 0 5px;
display: block; }
.Profile .individual .profile-info .profile-link {
padding: 4px 20px;
display: inline-block;
border-radius: 18px;
margin-top: 15px;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.Profile .individual .profile-info .location {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 12px; }
.Profile .individual .profile-info .location svg {
width: 18px;
height: 18px;
margin-bottom: -3px; }
.Profile .individual .profile-info .profile-textblock {
color: inherit; }
.Profile .team {
padding: 20px;
text-align: center; }
.Profile .team .team-member {
margin: 15px 0; }
.Profile .team .team-member .profile-link {
display: block; }
.Profile .team .team-member .profile-link .profile-img, .Profile .team .team-member .profile-link .default-avatar {
display: inline-block;
width: 50px;
height: 50px;
background: #828282;
vertical-align: middle;
margin-right: 6px;
border-radius: 25px; }
.Profile .team .team-member .profile-link .profile-name {
font-size: 20px;
font-size: 1.25rem;
color: inherit;
vertical-align: middle; }
.ContactForm form {
margin: 0; }
.ContactForm .input-label {
font-size: 14px;
font-size: .875rem;
display: block; }
.ContactForm span.required {
color: red; }
.contact-form-success-message,
.contact-form-error-message {
background: #f9edbe;
border: 0 solid #f0c36d;
font-size: 14px;
font-size: .875rem;
text-align: center;
max-width: 500px;
border-radius: 3px; }
.contact-form-success-message-with-border,
.contact-form-error-message-with-border {
background: #f9edbe;
border: 1px solid #f0c36d;
font-size: 14px;
font-size: .875rem;
text-align: center;
max-width: 600px;
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 10px; }
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: -8.5%;
width: 11px; }
.contact-form-email,
.contact-form-name {
color: inherit;
height: 40px;
margin: 0 0 15px;
max-width: 300px;
width: 100%;
padding: 0 15px;
border-radius: 3px;
border: 1px solid rgba(193, 193, 193, 0.4);
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.contact-form-email-message {
color: inherit;
margin: 0;
vertical-align: top;
max-width: 600px;
width: 100%;
border-radius: 3px;
border: 1px solid rgba(193, 193, 193, 0.4);
padding: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.contact-form-email:hover,
.contact-form-name:hover,
.contact-form-email-message:hover {
outline: none; }
.contact-form-email:focus,
.contact-form-name:focus, .contact-form-email-message:focus {
outline: none; }
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
background: rgba(193, 193, 193, 0.2); }
.contact-form-button {
display: block;
font-size: 14px;
font-size: .875rem;
line-height: 24px;
padding: 12px 20px;
margin: 30px 0;
text-align: center;
border: none;
color: #fff;
border-radius: 3px;
font-weight: bold; }
.contact-form-button:hover {
cursor: pointer;
outline: none; }
.contact-form-button.focus,
.contact-form-button.right.focus,
.contact-form-button.mid.focus,
.contact-form-button.left.focus {
outline: none; }
.contact-form-button-submit:focus,
.contact-form-button-submit.focus {
outline: none;
opacity: .8; }
.swajib {
font-weight: bold;
color: #e85e5e; }
.ctitles {
display: block; }
.contact-form-widget .form .input-label {
font-size: 14px;
font-size: 0.875rem;
opacity: 0.9; }
.contact-form-widget .form span.required {
font-weight: bold;
color: red; }
.contact-form-widget .form input[type=text], .contact-form-widget .form select, .contact-form-widget .form textarea {
width: 100%;
padding: 12px 14px;
margin: 5px 0 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.contact-form-widget .form input[type=button] {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.contact-form-widget .form .contact-form-message-wrap p.contact-form-error-message, .contact-form-widget .form .contact-form-message-wrap p.contact-form-error-message-with-border {
color: #b34e27; }
.contact-form-widget .form .contact-form-message-wrap p.contact-form-success-message, .contact-form-widget .form .contact-form-message-wrap p.contact-form-success-message-with-border {
color: #338a1d; }
#toc {
border-left: 6px solid rgba(121, 128, 136, 0.12);
padding-left: 16px;
padding-left: 1rem;
margin: 0 0 20px;
margin: 0 0 1.25rem;
font-size: 14px;
font-size: 0.875rem; }
@media only screen and (max-width: 480px) {
#toc {
padding-left: .75rem; } }
#toc a {
text-decoration: none; }
#toc b.toc {
text-transform: uppercase; }
#toc ol {
padding-left: 0;
margin: 0 0; }
#toc ol li {
margin: 8px 0; }
#toc ol li ol {
padding-left: 32px;
padding-left: 2rem;
margin: 0 0; }
#toc ol li ol li {
list-style-type: disc; }
#toc > ol {
-webkit-animation: smallslide 300ms;
animation: smallslide 300ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
counter-reset: item;
list-style: none; }
#toc > ol > li:before, #toc > ol li > li:before {
content: counters(item, ".") " ";
counter-increment: item;
margin-right: 5px; }
#toc > ol > ol {
padding-left: 16px;
padding-left: 1rem; }
#toc > ol > ol li {
list-style-type: disc; }
.post-body h2[id]::before, .post-body h3[id]::before {
content: " ";
margin-top: -72px;
height: 72px;
display: block;
visibility: hidden; }
.toc button {
background: transparent;
border: none;
padding: 0;
outline: none;
margin: 0 4px;
cursor: pointer;
text-transform: lowercase;
font-weight: normal; }
.author-profile {
margin: 32px 0;
margin: 2rem 0; }
.author-profile::after {
content: "";
display: block;
clear: both; }
.author-profile .author-image {
float: left;
margin-right: 16px;
margin-right: 1rem;
border-radius: 35px;
width: 70px; }
.author-profile .author-about .author-name {
display: block;
font-weight: bold;
margin-bottom: 6px; }
.author-profile .author-about .author-bio {
font-size: 15.008px;
font-size: 0.938rem; }
#ms-related-post {
margin: 30px auto 0;
overflow: hidden; }
#ms-related-post p.ms-title {
font-weight: 700;
margin: 0 0 16px;
margin: 0 0 16px;
margin: 0 0 1rem;
display: inline-block;
position: relative;
padding-right: 7px; }
#ms-related-post .related-title {
position: relative; }
#ms-related-post .related-title::before {
content: "";
border-top: 4px dotted rgba(121, 128, 136, 0.24);
position: absolute;
top: 12px;
left: 0;
right: 0; }
#ms-related-post ul.ms-related-hasthumb {
margin: 0;
padding: 0;
list-style: none;
word-wrap: break-word;
overflow: hidden; }
#ms-related-post ul.ms-related-hasthumb li {
margin: 0;
padding: 0;
font-size: 14px;
list-style: none;
word-wrap: break-word;
overflow: hidden;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
float: left;
width: 23.5%;
height: auto;
margin-right: 2%;
margin-bottom: 10px; }
#ms-related-post ul.ms-related-hasthumb li a, #ms-related-post ul.ms-related-hasthumb li a:hover {
text-decoration: none;
color: inherit; }
#ms-related-post ul.ms-related-hasthumb li a:focus div.related-thumb-outer {
opacity: 0.8; }
#ms-related-post ul.ms-related-hasthumb li:hover {
opacity: 0.7; }
#ms-related-post ul.ms-related-hasthumb li:nth-of-type(4n+0) {
margin-right: 0; }
#ms-related-post ul.ms-related-hasthumb li:nth-of-type(4n+1) {
clear: both; }
#ms-related-post ul.ms-related-hasthumb li .related-thumb {
display: block;
max-height: none;
border: none;
padding: 0;
width: 100%;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
right: 0; }
#ms-related-post ul.ms-related-hasthumb li .related-thumb[src^="//img.youtube.com"] {
margin-top: -9%; }
#ms-related-post ul.ms-related-hasthumb li div.related-thumb-outer {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
border-radius: 4px; }
#ms-related-post ul.ms-related-hasthumb div.related-title-outer {
font-weight: bold;
padding: 10px 0 15px;
display: block;
color: inherit; }
#ms-related-post ul.ms-related-nothumb {
margin: 0 0 20px;
margin: 0 0 1.25rem;
background: rgba(153, 163, 173, 0.08);
border-left: 5px solid rgba(153, 163, 173, 0.08);
padding: 16px 16px 16px 32px;
padding: 1rem 1rem 1rem 2rem; }
#ms-related-post ul.ms-related-nothumb li {
margin: 0;
padding: 6px 0;
font-weight: bold; }
#ms-related-post ul.ms-related-nothumb li a {
display: inherit; }
@media only screen and (max-width: 480px) {
#ms-related-post ul.ms-related-hasthumb li {
width: 48%;
margin-right: 4%; }
#ms-related-post ul.ms-related-hasthumb li:nth-of-type(2n+0) {
margin-right: 0; }
#ms-related-post ul.ms-related-hasthumb li:nth-of-type(2n+1) {
clear: both; } }
@media only screen and (max-width: 320px) {
#ms-related-post ul.ms-related-hasthumb li {
width: 100%;
margin-right: 0; } }
.BlogSearch input {
padding: 8px 12px;
margin: 3px 0;
border-radius: 4px;
border: 1px solid #bdbdbd; }
.BlogSearch button {
padding: 8px 12px;
margin: 3px 0;
border-radius: 4px;
border: 1px solid #bdbdbd; }
.Attribution svg {
display: none; }
.Attribution .widget-content {
text-align: center; }
.comments-threaded {
clear: both;
margin: 0 0 30px;
font-size: 14px;
font-size: .875rem; }
.comments-threaded h2.comments-title {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 20px;
padding: 0;
display: inline-block; }
.comments-threaded .comment-thread ol {
text-align: left;
margin: 13px 0;
padding: 0;
list-style: none; }
.comments-threaded .avatar-image-container img {
max-width: 36px;
border-radius: 17px; }
.comments-threaded .comment-block {
background: rgba(153, 163, 173, 0.08);
position: relative;
padding: 20px;
margin-left: 45px;
border-radius: 10px;
word-break: break-word; }
.comments-threaded .comment-replies {
margin: 10px 0;
margin-left: 45px; }
.comments-threaded .comment-thread:empty {
display: none; }
.comments-threaded .comment-replybox-single {
margin-left: 45px;
margin: 20px 0; }
.comments-threaded .comment {
margin-bottom: 6px;
padding: 0; }
.comments-threaded .comment .avatar-image-container {
background-color: rgba(199, 199, 199, 0.2);
border-radius: 20px;
float: left;
max-height: 36px;
overflow: hidden;
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-position: 8px 7px; }
.comments-threaded .comment .avatar-image-container {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAC4jAAAuIwF4pT92AAAC4UlEQVR42nWU30uTYRTHn/d1bjOn5Y0Gu4mBNhWZ4EVXbiMUMVMjL2L+iJSYCMJkF27TzanbdNvfEN10U3STFdV/0GUE3faLsJsovEkIhDqfsWc8vqOLw87O+X6/73nOOc+jdnd3VT6fP2fZbNZVrVbV+vr61f7+/mdKqb+Y+EfEyIFx8tBqODqYy+WsQqGgpqen411dXR+7u7s/DAwMPMHwiZEDA9YU47fh8KvFxsfH0y6X63RycjKZTqcv7ezsWBg+MXJgtKipca6y/f19tby8HLZt+08sFps6PDxUIqS0ID4xcmDAwjErbQgCLhaLqq+v7/ng4ODjUqmktre36ZNl9MkiRg6MYI/gwG0IUiaBvb09lclkLvh8vq9zc3N3hGTJl1t0Hqu3pYUcGLBw4Op8Q5nSk8nk5fb29u9LS0vXqULItnOSxMiBAQsHblOF/MpxPB0dHZ9nZ2fvylEsWY2mComRAyPYT3BMjaYeDg0NPQoEAm/wIUvcNjB2XVCBAdvUQwNcm/La2lqotbX1dGZm5n65XFa6P7rPxMgJ5jdYOHDPHdncQwBynHttbW0/wuFwaWNjI7C1teXB8CORSIkcGL0yTXuIowWpgl1jcbluHo/npKen5x2GT4wcGLBasHFTjPtbm57c1WBvb+9rafix7NmL0dHR0sTERALDJybrcgwGLBy4eg66Mvvg4EDNz8/f9nq9v4T0cnV1dQQQcarB8InF4/ERhMHCIa5XTElvapu/sLBwy7Kss7GxsTSTq0+P5baZLlb3LZ2Xo6fgwOU/S08f7EQiEZCv/YxGozmm6FwXp+n1AQsHrgzsCh9TlUpFhUKhh36//219arbzjTPNeWt4ceAODw8/4KRqZWXlmgzgm/TiZr1s2/nGmWKOt7MmKNwbbrf7hMqVTOuVPJzvNzc3L5q3xlmZ08zbkUqlfJ2dnV8WFxenFHvFU6TfOxP4PzHzw/q9DAaDT2VPz/4BM3gzfN9VWhwAAAAASUVORK5CYII="); }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(6) {
margin: 0px 0px 5px 12%; }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(5) {
margin: 0px 0px 5px 10%; }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(4) {
margin: 0px 0px 5px 8%; }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(3) {
margin: 0px 0px 5px 4%; }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(2) {
margin: 0px 0px 5px 2%; }
.comments-threaded .comment .comment-thread.inline-thread .comment:nth-child(1) {
margin: 0px 0px 5px 0; }
.comments-threaded .comment .deleted-comment {
font-style: italic;
opacity: .5; }
.comments-threaded .comment-thread.inline-thread .comment,
.comments-threaded .comment-thread.inline-thread .comment:last-child {
margin: 0px 0px 5px 14%; }
.comments-threaded .comment-thread {
margin: 0;
padding: 0; }
.comments-threaded .inline-thread {
margin: 0; }
.comments-threaded cite.user {
margin-right: 8px; }
.comments-threaded .icon.blog-author {
display: inline-block; }
.comments-threaded .icon.blog-author::after {
display: inline-block;
content: "author";
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-size: 0.6875rem; }
.comments-threaded .comment-header {
font-size: 14px;
font-size: .875rem;
margin: 0 0 15px; }
.comments-threaded .comment-content {
margin: 0 0 15px;
text-align: left; }
.comments-threaded .datetime {
margin: 10px 0;
display: block; }
.comments-threaded .datetime a {
opacity: .8;
color: inherit !important; }
.comments-threaded .user {
font-weight: bold;
font-style: normal; }
.comments-threaded .comment .comment-actions a {
display: inline-block;
font-size: 13px;
font-size: .8125rem;
margin-right: 8px; }
.comments-threaded .continue a {
display: inline-block;
font-size: 13px;
font-size: .8125rem;
font-weight: bold; }
.comments-threaded .comment .comment-actions a:hover,
.comments-threaded .continue a:hover {
text-decoration: underline; }
.comments-threaded .loadmore {
cursor: pointer;
margin-top: 3em;
max-height: 3em; }
.comments-threaded .loadmore.loaded {
max-height: 0;
opacity: 0;
overflow: hidden; }
.comments-threaded .thread-chrome.thread-collapsed {
display: none; }
.comments-threaded .thread-toggle {
display: inline-block; }
.comments-threaded .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
margin: .3em;
overflow: visible;
padding-right: 4px;
width: 7px; }
.comments-threaded .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; }
.comments-threaded .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent; }
.comments-threaded .hidden {
display: none; }
@media screen and (max-device-width: 480px) {
.comments-threaded .comments-content .comment-replies {
margin-left: 10px; }
.comments-threaded .thread-toggle {
margin-left: 45px; }
.comments-threaded .comments-content .comment-replies .continue {
margin-left: 45px; } }
.comments-non-threaded {
clear: both;
margin: 0 0 30px;
font-size: 14px;
font-size: .875rem; }
.comments-non-threaded h2.comments-title {
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 20px;
padding: 0px 0px 5px;
display: inline-block; }
.comments-non-threaded #comments-block {
margin: 0 0 30px; }
.comments-non-threaded #comments-block .avatar-image-container {
display: inline-block;
margin-right: 4px;
margin-bottom: -10px;
background: rgba(74, 74, 74, 0.12);
border-radius: 17px; }
.comments-non-threaded #comments-block .avatar-image-container img {
display: block; }
.comments-non-threaded #comments-block .comment-block {
background: rgba(0, 0, 0, 0.03);
position: relative;
padding: 20px;
margin-bottom: 15px;
border-radius: 4px;
word-break: break-word; }
.comments-non-threaded #comments-block .comment-block .comment-author .comment-author-name {
font-weight: bold;
display: block;
margin-bottom: 10px; }
.comments-non-threaded #comments-block .comment-block .comment-author .comment-timestamp {
opacity: .9;
font-size: 12px;
font-size: .75rem;
margin-right: 4px; }
.comments-non-threaded #comments-block .comment-block .comment-author .item-control {
opacity: .9;
font-size: 12px;
font-size: .75rem; }
.comments-non-threaded #comments-block .comment-block .comment-body {
padding: 15px 0 0;
margin: 0 0; }
.comments-non-threaded #comments-block .comment-block .comment-body p {
margin: 0; }
.comments .comment-note {
word-break: break-word;
margin: 20px 0;
border-left: 6px solid rgba(153, 163, 173, 0.08);
padding-left: 16px;
padding-left: 1rem;
font-size: 14px;
font-size: 0.875rem; }
.comments .post-comment-link {
font-weight: bold;
background: rgba(173, 173, 173, 0.1);
padding: 10px 20px;
border-radius: 4px;
display: inline-block; }
.normalwidget-title {
width: 100%;
margin: 0 0 25px;
position: relative;
text-align: center;
line-height: 16px;
line-height: 1rem;
min-height: 16px;
min-height: 1rem; }
.normalwidget-title::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 16px;
height: 1rem; }
.normalwidget-title h3.title, .normalwidget-title h2.title {
position: relative;
z-index: 1;
display: inline-block;
margin: 0;
padding: 0px 10px;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase; }
.PopularPosts,
.FeaturedPost {
position: relative; }
.FeaturedPost h3.title,
.PopularPosts .popular-post-widget-title h3.title,
.FeaturedPost h2.title,
.PopularPosts .popular-post-widget-title h2.title {
position: absolute;
top: -14px;
margin: 0 0;
font-size: 11px;
font-size: .6875rem;
font-weight: normal;
text-transform: uppercase;
padding: 5px 10px 3px;
display: inline-block;
z-index: 1;
border-radius: 3px 3px 3px 0; }
@media only screen and (max-width: 600px) {
.FeaturedPost h3.title,
.FeaturedPost h2.title {
left: 2px;
border-radius: 3px 3px 3px 3px; } }
.FeaturedPost .featured-outer {
margin: 14px 0 45px; }
.FeaturedPost .post-summary {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0; }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary {
margin-left: -30px;
margin-right: -30px; } }
@media only screen and (max-width: 480px) {
.FeaturedPost .post-summary {
margin-left: -22px;
margin-right: -22px; } }
.FeaturedPost .post-summary h3, .FeaturedPost .post-summary h2 {
font-size: 26px;
font-size: 1.625rem;
margin: -5px 0 20px;
padding: 0;
width: 100%; }
@media only screen and (max-width: 900px) {
.FeaturedPost .post-summary h3, .FeaturedPost .post-summary h2 {
font-size: 1.5rem;
margin: 0 0 15px; } }
@media only screen and (max-width: 480px) {
.FeaturedPost .post-summary h3, .FeaturedPost .post-summary h2 {
font-size: 1.25rem; } }
.FeaturedPost .post-summary p.featured-desc {
margin: 0; }
.FeaturedPost .post-summary p.featured-desc b.harga-produk-coret, .FeaturedPost .post-summary p.featured-desc b.harga-produk {
display: block;
margin: 5px 0; }
.FeaturedPost .post-summary p.featured-desc b.harga-produk-coret {
text-decoration: line-through;
color: #c23613; }
.FeaturedPost .post-summary p.featured-desc b.harga-produk {
font-size: 24px;
font-size: 1.5rem;
margin-bottom: 16px;
margin-bottom: 1rem; }
.FeaturedPost .post-summary p.featured-desc b.info-produk, .FeaturedPost .post-summary p.featured-desc b.toc {
display: none; }
.FeaturedPost .post-summary p.featured-desc b, .FeaturedPost .post-summary p.featured-desc strong, .FeaturedPost .post-summary p.featured-desc i, .FeaturedPost .post-summary p.featured-desc em, .FeaturedPost .post-summary p.featured-desc strike, .FeaturedPost .post-summary p.featured-desc u, .FeaturedPost .post-summary p.featured-desc s, .FeaturedPost .post-summary p.featured-desc del {
font-weight: normal;
font-style: normal;
text-decoration: none; }
.FeaturedPost .post-summary p.featured-more {
margin: 25px 0 0; }
.FeaturedPost .post-summary p.featured-more a {
display: inline-block;
border-radius: 4px;
padding: 8px 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.FeaturedPost .post-summary p.featured-more a:hover {
text-decoration: none; }
.FeaturedPost .post-summary .featured-img {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
max-width: 50%;
position: relative;
padding-right: 15px; }
.FeaturedPost .post-summary .featured-img img.image {
width: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 4px; }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary .featured-img img.image {
position: absolute;
bottom: 0;
border-radius: 0px; } }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary .featured-img {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
padding-right: 0; } }
.FeaturedPost .post-summary .featured-img .featured-img-bg {
height: 100%; }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary .featured-img .featured-img-bg {
position: relative;
padding-top: 75%;
height: 0;
overflow: hidden; } }
.FeaturedPost .post-summary .featured-info {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex-item-align: center;
align-self: center;
max-width: 50%;
padding: 30px 30px 30px 15px; }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary .featured-info {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
padding: 22px;
margin: -25% 30px 0;
z-index: 0; } }
@media only screen and (max-width: 480px) {
.FeaturedPost .post-summary .featured-info {
margin: -30% 22px 0;
padding: 18px; } }
.FeaturedPost .post-summary .no-featured-img {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
padding: 30px 30px; }
@media only screen and (max-width: 600px) {
.FeaturedPost .post-summary .no-featured-img {
padding: 22px;
margin: 0 30px 0; } }
@media only screen and (max-width: 480px) {
.FeaturedPost .post-summary .no-featured-img {
margin: 0 22px 0; } }
.BlogArchive {
font-size: 14px;
font-size: .875rem; }
.BlogArchive #ArchiveList ul ul li {
padding-left: 0;
border-left: none; }
.BlogArchive #ArchiveList ul.posts li {
padding-left: 0;
margin: 0 0 10px; }
.BlogArchive .hierarchy-title {
margin-bottom: 10px; }
.BlogArchive .archive-dropdown select {
padding: 5px 7px;
border-radius: 4px;
cursor: pointer; }
.breadcrumbs {
margin: 0 0 16px;
margin: 0 0 1rem;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase; }
.breadcrumbs a {
text-decoration: none; }
.post-body .breadcrumbs a {
text-decoration: none; }
.breadcrumb-page {
max-width: 800px;
text-align: center;
margin: 0 auto 15px; }
#social-button {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
max-width: 50%;
text-align: right; }
@media only screen and (max-width: 480px) {
#social-button {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%;
text-align: center; } }
#social-button a {
display: inline-block; }
#social-button .social-icon {
display: inline-block;
padding: 7px;
margin: 3px 0px 3px 5px;
border-radius: 20px;
width: 24px;
height: 24px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
#social-button .social-icon i {
background-repeat: no-repeat;
height: 22px;
width: 22px;
display: inline-block;
margin: 1px;
padding: 0px; }
#social-button .social-icon:hover {
background: rgba(25, 25, 25, 0.6); }
#social-button .facebook-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/></svg>"); }
#social-button .twitter-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg>"); }
#social-button .youtube-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg>"); }
#social-button .instagram-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/></svg>"); }
#social-button .linkedin-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z'/></svg>"); }
#social-button .telegram-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg>"); }
#social-button .whatsapp-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'/></svg>"); }
#social-button .googlemaps-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M15.5,4.5C15.5,5.06 15.7,5.54 16.08,5.93C16.45,6.32 16.92,6.5 17.5,6.5C18.05,6.5 18.5,6.32 18.91,5.93C19.3,5.54 19.5,5.06 19.5,4.5C19.5,3.97 19.3,3.5 18.89,3.09C18.5,2.69 18,2.5 17.5,2.5C16.95,2.5 16.5,2.69 16.1,3.09C15.71,3.5 15.5,3.97 15.5,4.5M22,4.5C22,5.5 21.61,6.69 20.86,8.06C20.11,9.44 19.36,10.56 18.61,11.44L17.5,12.75C17.14,12.38 16.72,11.89 16.22,11.3C15.72,10.7 15.05,9.67 14.23,8.2C13.4,6.73 13,5.5 13,4.5C13,3.25 13.42,2.19 14.3,1.31C15.17,0.44 16.23,0 17.5,0C18.73,0 19.8,0.44 20.67,1.31C21.55,2.19 22,3.25 22,4.5M21,11.58V19C21,19.5 20.8,20 20.39,20.39C20,20.8 19.5,21 19,21H5C4.5,21 4,20.8 3.61,20.39C3.2,20 3,19.5 3,19V5C3,4.5 3.2,4 3.61,3.61C4,3.2 4.5,3 5,3H11.2C11.08,3.63 11,4.13 11,4.5C11,5.69 11.44,7.09 12.28,8.7C13.13,10.3 13.84,11.5 14.41,12.21C15,12.95 15.53,13.58 16.03,14.11L17.5,15.7L19,14.11C20.27,12.5 20.94,11.64 21,11.58M9,14.5V15.89H11.25C11,17 10.25,17.53 9,17.53C8.31,17.53 7.73,17.28 7.27,16.78C6.8,16.28 6.56,15.69 6.56,15C6.56,14.31 6.8,13.72 7.27,13.22C7.73,12.72 8.31,12.47 9,12.47C9.66,12.47 10.19,12.67 10.59,13.08L11.67,12.05C10.92,11.36 10.05,11 9.05,11H9C7.91,11 6.97,11.41 6.19,12.19C5.41,12.97 5,13.91 5,15C5,16.09 5.41,17.03 6.19,17.81C6.97,18.59 7.91,19 9,19C10.16,19 11.09,18.63 11.79,17.91C12.5,17.19 12.84,16.25 12.84,15.09C12.84,14.81 12.83,14.61 12.8,14.5H9Z'/></svg>"); }
#social-button .pinterest-icon i {
background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg>"); }
.blog-pager {
text-align: center;
font-size: 12px;
font-size: .75rem;
text-transform: uppercase; }
.blog-pager a.blog-pager-older-link, .blog-pager a.blog-pager-newer-link {
display: inline-block;
border-radius: 4px;
padding: 6px 12px;
-webkit-transition: all .2s;
transition: all .2s; }
.blog-pager a.blog-pager-older-link {
float: right; }
.blog-pager a.blog-pager-older-link::after {
content: "";
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.blog-pager a.blog-pager-newer-link {
float: left; }
.blog-pager a.blog-pager-newer-link::before {
content: "";
border-width: 0 0px 2px 2px;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.blog-pager::after {
content: "";
display: block;
clear: both; }
.blog-pager .js-load, .blog-pager .js-loading, .blog-pager .js-loaded {
display: inline-block;
border-radius: 4px;
padding: 8px 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.blog-pager .js-loading::after {
content: "";
width: 10px;
height: 10px;
vertical-align: middle;
margin-left: 8px;
margin-left: .5rem;
margin-bottom: 3px;
border-radius: 100%;
display: inline-block;
border-top: 2px solid transparent;
-webkit-animation: load-animate infinite linear 1s;
animation: load-animate infinite linear 1s; }
@-webkit-keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35; }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35; }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/* scroll to top */
#goTop {
position: fixed;
z-index: 8;
bottom: 30px;
right: -30px;
border: none;
opacity: 0;
-webkit-transition: all .2s;
transition: all .2s;
border-radius: 22px;
outline: none;
cursor: pointer;
padding: 18px 16px 14px; }
#goTop::after {
content: "";
display: block;
width: 6px;
height: 6px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
#goTop.is-visible {
opacity: .9;
right: 36px; }
@media only screen and (max-width: 900px) {
#goTop.is-visible {
right: 30px; } }
@media only screen and (max-width: 480px) {
#goTop.is-visible {
right: 22px; } }
/* scroll to top end */
.tabbed-toc {
margin: 0 auto;
position: relative; }
.tabbed-toc .loading {
display: block;
padding: 2px 12px;
color: #eee; }
.tabbed-toc ul,
.tabbed-toc ol,
.tabbed-toc li {
margin: 0;
padding: 0;
list-style: none; }
.tabbed-toc .toc-tabs {
width: 20%;
float: left;
background: rgba(51, 51, 51, 0.03);
font-size: 12px;
font-size: .75rem; }
.tabbed-toc .toc-tabs li a {
display: block;
overflow: hidden;
text-transform: uppercase;
text-decoration: none;
padding: 12px; }
.tabbed-toc .toc-tabs li a:hover {
background-color: rgba(0, 0, 0, 0.05); }
.tabbed-toc .toc-tabs li a.active-tab {
background: rgba(0, 0, 0, 0.05);
position: relative;
z-index: 5; }
.tabbed-toc .toc-content,
.tabbed-toc .toc-line {
width: 80%;
float: right;
border-left: 5px solid rgba(0, 0, 0, 0.07);
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.tabbed-toc .toc-line {
float: none;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0; }
.tabbed-toc .panel {
position: relative;
z-index: 5; }
.tabbed-toc .panel li a {
display: block;
position: relative;
padding: 8px 12px;
overflow: hidden; }
.tabbed-toc .panel li time {
display: block;
font-size: 12px;
font-size: .75rem; }
.tabbed-toc .panel li .summary {
display: block;
padding: 10px 12px 10px;
font-size: 13px; }
.tabbed-toc .panel li .summary img.thumbnail {
float: left;
display: block;
margin: 5px 8px 0 0;
width: 72px;
height: 72px;
background-color: #fafafa; }
.tabbed-toc .panel li {
background-color: rgba(0, 0, 0, 0.03); }
.tabbed-toc .panel li:nth-child(even) {
background-color: transparent; }
.tabbed-toc .panel li a:hover,
.tabbed-toc .panel li a:focus,
.tabbed-toc .panel li.bold a {
background-color: rgba(64, 64, 64, 0.1);
outline: none; }
@media (max-width: 700px) {
.tabbed-toc .toc-tabs,
.tabbed-toc .toc-content {
overflow: hidden;
width: auto;
float: none;
display: block;
border-bottom: 5px solid rgba(0, 0, 0, 0.07); }
.tabbed-toc .toc-tabs li {
float: left; }
.tabbed-toc .toc-content {
border-left: none; }
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {
display: none; } }
/* Share button */
#share-container {
margin: 20px auto 30px; }
#share-container::after {
content: "";
display: block;
clear: both; }
.share-title {
position: relative; }
.share-title::before {
content: "";
border-top: 4px dotted rgba(121, 128, 136, 0.24);
position: absolute;
top: 12px;
left: 0;
right: 0; }
.share-this-pleaseeeee {
font-weight: 700;
margin: 0 0 16px;
margin: 0 0 1rem;
display: inline-block;
position: relative;
padding-right: 7px; }
#share {
width: 100%;
text-align: center; }
#share a {
width: 25%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
float: left; }
#share a:first-child {
border-radius: 4px 0 0 4px; }
#share a:last-child {
border-radius: 0 4px 4px 0; }
#share a:hover {
opacity: 0.8; }
#share a svg {
width: 24px;
height: 24px;
margin-top: 7px; }
#share a svg path {
fill: #ffffff; }
.facebook {
background: #3b5998; }
.twitter {
background: #55acee; }
.linkedin {
background: #0077b5; }
.pinterest {
background: #cb2027; }
.whatsapp {
background: #25d366; }
/* darkmode button style */
.darkmode-switch {
display: none;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 15px; }
.darkmode-switch .switch-title {
font-size: 10px;
font-size: 0.625rem;
margin-right: 4px;
text-transform: uppercase;
opacity: .7;
-webkit-transition: all .2s;
transition: all .2s; }
.darkmode-switch .switch-title::before {
content: "Dark Mode"; }
.darkmode-switch .switch {
position: relative;
display: inline-block;
width: 38px;
height: 20px;
vertical-align: middle;
opacity: .7;
-webkit-transition: all .2s;
transition: all .2s; }
.darkmode-switch .switch:hover {
opacity: 1; }
.darkmode-switch .switch input {
opacity: 0;
width: 0;
height: 0; }
.darkmode-switch .slider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .2s;
transition: .2s; }
.darkmode-switch .slider:before {
position: absolute;
content: "";
border-radius: 50%;
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
-webkit-transition: .2s;
transition: .2s; }
.darkmode-switch input:checked + .slider {
background-color: #428c2f;
border: 2px solid #ffffff; }
.darkmode-switch input:checked + .slider::before {
background: #fff; }
.darkmode-switch input:checked + .slider:before {
-webkit-transform: translateX(18px);
transform: translateX(18px); }
/* search form style */
.iconsearch-label {
cursor: pointer;
margin-left: 15px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding: 6px;
border-radius: 18px;
height: 25px;
width: 25px;
line-height: 25px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.iconsearch-label svg {
width: 100%;
height: 100%;
vertical-align: middle; }
.iconsearch-label:hover {
background: rgba(0, 0, 0, 0.09); }
div#searchcontainer {
position: fixed;
width: 100%;
height: 100%;
z-index: 100;
display: block;
background: rgba(0, 0, 0, 0.85);
left: -100%;
top: 0;
padding-top: 50px;
opacity: 0;
cursor: pointer;
text-align: center;
-webkit-transform: scale(0.9) translate3d(0, -50px, 0);
transform: scale(0.9) translate3d(0, -50px, 0);
-webkit-transition: -webkit-transform .3s, opacity .3s, left 0s .3s;
-webkit-transition: opacity .3s, left 0s .3s, -webkit-transform .3s;
transition: opacity .3s, left 0s .3s, -webkit-transform .3s;
transition: transform .3s, opacity .3s, left 0s .3s;
transition: transform .3s, opacity .3s, left 0s .3s, -webkit-transform .3s; }
div#searchcontainer form {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
-webkit-transition: all .3s 0s;
transition: all .3s 0s; }
div#searchcontainer form input[type="text"] {
width: 90%;
top: 0;
left: 0;
z-index: 99;
padding: 10px;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.38);
outline: none;
font-size: 28px;
font-size: 1.75rem;
background: transparent;
color: #fff;
text-align: center; }
div#searchcontainer form input::-webkit-input-placeholder {
color: #fff;
opacity: .5;
/* Firefox */ }
div#searchcontainer form input::-moz-placeholder {
color: #fff;
opacity: .5;
/* Firefox */ }
div#searchcontainer form input:-ms-input-placeholder {
color: #fff;
opacity: .5;
/* Firefox */ }
div#searchcontainer form input::-ms-input-placeholder {
color: #fff;
opacity: .5;
/* Firefox */ }
div#searchcontainer form input::placeholder {
color: #fff;
opacity: .5;
/* Firefox */ }
div#searchcontainer form input:-ms-input-placeholder {
/* IE 10-11 */
color: #fff;
opacity: .5; }
div#searchcontainer form input::-ms-input-placeholder {
/* Edge */
color: #fff;
opacity: .5; }
div#searchcontainer.opensearch {
left: 0;
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .3s, opacity .3s, left 0s 0s;
-webkit-transition: opacity .3s, left 0s 0s, -webkit-transform .3s;
transition: opacity .3s, left 0s 0s, -webkit-transform .3s;
transition: transform .3s, opacity .3s, left 0s 0s;
transition: transform .3s, opacity .3s, left 0s 0s, -webkit-transform .3s; }
div#searchcontainer.opensearch form {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all .3s .3s;
transition: all .3s .3s;
transition: all .3s .3s; }
/* search form style end */
/* BACA JUGA */
#baca-juga {
display: none; }
.post-body #baca-juga {
display: block;
overflow: hidden;
clear: both; }
.post-body ul .baca-juga-wrap, .post-body ol .baca-juga-wrap, .post-body blockquote .baca-juga-wrap, .post-body table .baca-juga-wrap, .post-body pre .baca-juga-wrap, .post-body code .baca-juga-wrap {
display: none; }
.post-body .baca-juga-wrap {
text-align: left !important;
margin: 19.2px 32px;
margin: 1.2rem 2rem;
font-size: 14.4px;
font-size: .9rem;
background: rgba(38, 144, 80, 0.04);
border-left: 5px solid rgba(38, 144, 80, 0.08);
padding: 16px 16px 19.2px;
padding: 1rem 1rem 1.2rem; }
@media only screen and (max-width: 480px) {
.post-body .baca-juga-wrap {
margin: 1.2rem 0; } }
.post-body #baca-juga strong {
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
margin-bottom: 9.6px;
margin-bottom: .6rem; }
.post-body #baca-juga a {
font-weight: bold;
text-decoration: none;
padding: 0; }
.post-body #baca-juga ul {
margin: 0 0 0 20px;
padding-left: 0; }
.post-body #baca-juga li {
padding: 0px;
margin: 0 0 9.6px;
margin: 0 0 .6rem; }
.post-body #baca-juga li:last-child {
margin: 0 0; }
.error-page {
text-align: center;
padding: 60px 0; }
.error-page h2 {
font-size: 112px;
font-size: 7rem;
margin: 0 0; }
@media only screen and (max-width: 480px) {
.error-page h2 {
font-size: 4rem; } }
.error-page p {
font-size: 32px;
font-size: 2rem;
margin: 0 auto 16px;
margin: 0 auto 1rem;
max-width: 400px; }
@media only screen and (max-width: 480px) {
.error-page p {
font-size: 1.25rem; } }
.post-filter-message {
text-align: center;
margin: 0 0 30px; }
.post-filter-message .post-filter-description .search-label,
.post-filter-message .post-filter-description .search-query {
font-weight: bold; }
.status-message-danger {
text-align: center;
margin: 0 0 30px; }
.status-message-danger p {
margin: 0 0 30px; }
#footer-outer #footer-content {
padding: 20px 36px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
font-size: 14px;
font-size: 0.875rem; }
@media only screen and (max-width: 900px) {
#footer-outer #footer-content {
padding: 20px 30px; } }
@media only screen and (max-width: 480px) {
#footer-outer #footer-content {
padding: 20px 22px; } }
#footer-outer #footer-content .normalwidget-title, #footer-outer #footer-content .normalwidget-title::after, #footer-outer #footer-content h3.title {
display: none; }
#footer-outer #footer-content .PageList ul {
margin: 0 0 10px;
padding: 0; }
#footer-outer #footer-content .PageList ul li {
list-style-type: none;
display: inline-block;
margin-bottom: 10px; }
#footer-outer #footer-content .PageList ul li::after {
content: " - ";
margin: 0 5px; }
#footer-outer #footer-content .PageList ul li:last-child::after {
display: none; }
/* Tombol Download */
.buttonDownload {
margin: 16px 0;
margin: 1rem 0;
border-radius: 3px;
display: inline-block;
text-decoration: none !important;
position: relative;
padding: 10px 25px;
color: white !important;
font-weight: bold;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
-webkit-transition: all 0.4s;
transition: all 0.4s; }
.buttonDownload:hover {
opacity: .85; }
.buttonDownload::before, .buttonDownload::after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%; }
.buttonDownload::before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px; }
.buttonDownload::after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
-webkit-animation: downloadArrow 2s linear infinite;
animation: downloadArrow 2s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.buttonDownload:hover::after {
-webkit-animation-play-state: running;
animation-play-state: running; }
@-webkit-keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1; }
0.001% {
margin-top: -15px;
opacity: 0; }
50% {
opacity: 1; }
100% {
margin-top: 0;
opacity: 0; } }
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1; }
0.001% {
margin-top: -15px;
opacity: 0; }
50% {
opacity: 1; }
100% {
margin-top: 0;
opacity: 0; } }
#content-wrap-produk-index {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 900px;
margin: 0 auto;
padding: 36px 0; }
@media only screen and (max-width: 900px) {
#content-wrap-produk-index {
max-width: 100%;
padding: 30px 0; } }
@media only screen and (max-width: 480px) {
#content-wrap-produk-index {
padding: 22px 0; } }
#content-wrap-produk-index .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 -18px; }
@media only screen and (max-width: 900px) {
#content-wrap-produk-index .content {
margin: 0 -15px; } }
@media only screen and (max-width: 480px) {
#content-wrap-produk-index .content {
margin: 0 -11px; } }
#content-wrap-produk-index .content .post-outer {
-webkit-box-flex: 1;
-ms-flex: 1 1 33.33333333333333%;
flex: 1 1 33.33333333333333%;
max-width: 33.33333333333333%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 0 18px 36px; }
@media only screen and (max-width: 700px) {
#content-wrap-produk-index .content .post-outer {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; } }
@media only screen and (max-width: 900px) {
#content-wrap-produk-index .content .post-outer {
padding: 0 15px 30px; } }
@media only screen and (max-width: 480px) {
#content-wrap-produk-index .content .post-outer {
padding: 0 11px 22px; } }
@media only screen and (max-width: 320px) {
#content-wrap-produk-index .content .post-outer {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; } }
#content-wrap-produk-index .content .post-outer .post-content {
background: rgba(153, 163, 173, 0.08);
height: 100%;
position: relative;
-webkit-transition: all 0.2s;
transition: all 0.2s;
border-radius: 4px;
overflow: hidden; }
#content-wrap-produk-index .content .post-outer .post-content .produk-status {
position: absolute;
font-weight: normal;
top: 4px;
left: 0px;
display: inline-block;
padding: 3px 8px;
background: #333;
color: #fff; }
#content-wrap-produk-index .content .post-outer .post-content:hover {
-webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.12); }
#content-wrap-produk-index .content .post-outer .img-thumbnail {
width: 100%;
position: relative; }
#content-wrap-produk-index .content .post-outer .img-thumbnail > a {
display: block; }
#content-wrap-produk-index .content .post-outer .img-thumbnail img {
width: 100%;
display: block; }
#content-wrap-produk-index .content .post-outer .post-title {
font-size: 16px;
font-size: 1rem;
padding: 15px 10px 10px;
font-weight: normal;
margin: 0;
text-align: center; }
#content-wrap-produk-index .content .post-outer .post-snippet {
height: 45px;
overflow: hidden;
padding: 0 10px 15px;
font-size: 11px;
font-size: 0.6875rem; }
#content-wrap-produk-index .content .post-outer b.harga-produk {
font-weight: normal;
font-size: 16px;
font-size: 1rem;
display: block;
height: 22px;
line-height: 22px;
text-align: center;
margin-bottom: 50px; }
#content-wrap-produk-index .content .post-outer b.harga-produk-coret {
font-weight: normal;
text-decoration: line-through;
display: block;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 13px;
font-size: 0.8125rem;
color: #D0452F; }
#content-wrap-produk-index .content .post-outer b.info-produk {
position: absolute;
border-radius: 3px;
top: 0;
left: 0;
padding: 4px 8px 2px;
font-size: 11px;
font-size: 0.6875rem;
text-transform: uppercase;
font-weight: normal; }
#content-wrap-produk-index h1 {
text-align: center; }
#content-wrap-produk-index .blog-pager a.blog-pager-newer-link, #content-wrap-produk-index .blog-pager a.blog-pager-older-link {
float: none; }
#content-wrap .post-snippet b, #content-wrap .post-snippet strong, #content-wrap .post-snippet i, #content-wrap .post-snippet em, #content-wrap .post-snippet strike, #content-wrap .post-snippet u, #content-wrap .post-snippet s, #content-wrap .post-snippet del {
font-weight: normal;
font-style: normal;
text-decoration: none; }
#content-wrap .post-snippet b.info-produk {
display: none; }
#content-wrap .post-snippet b.harga-produk-coret, #content-wrap .post-snippet b.harga-produk {
display: block; }
#content-wrap .post-snippet b.harga-produk-coret {
color: #D0452F;
text-decoration: line-through;
font-size: 13px;
font-size: .8125rem; }
#content-wrap .post-snippet b.harga-produk {
margin-bottom: 13px; }
.content-single-produk .breadcrumbs {
text-align: center;
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%; }
.content-single-produk .post-outer-single {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
max-width: 100%; }
.content-single-produk .post-outer-single .post-content {
border-bottom: none !important;
padding: 0 !important; }
.content-single-produk .post-outer-single .produk-container {
position: relative;
max-width: 550px;
margin: 0 auto; }
.content-single-produk .post-outer-single .produk-container h1.post-title {
margin: 0 0 22px;
margin: 0 0 1.375rem;
text-align: center;
font-size: 32px;
font-size: 2rem; }
@media only screen and (max-width: 600px) {
.content-single-produk .post-outer-single .produk-container h1.post-title {
text-align: center; } }
.content-single-produk .post-outer-single .produk-container .gambar-produk {
position: relative;
text-align: center;
margin: 0 -32px 32px;
margin: 0 -2rem 2rem;
border-radius: 4px;
overflow: hidden; }
@media only screen and (max-width: 600px) {
.content-single-produk .post-outer-single .produk-container .gambar-produk {
position: relative;
margin: 0 0 36px; } }
.content-single-produk .post-outer-single .produk-container .gambar-produk img {
width: 100%;
display: block; }
.content-single-produk .post-outer-single .produk-container .gambar-produk .gambar-slider {
max-width: 100%; }
.content-single-produk .post-outer-single .produk-container .gambar-produk .gambar-slider img {
width: 100%; }
.content-single-produk .post-outer-single .produk-container .gambar-produk button {
position: absolute;
outline: none;
cursor: pointer;
background: transparent;
border: none;
display: block;
top: calc(50% - 18px);
padding: 10px; }
.content-single-produk .post-outer-single .produk-container .gambar-produk button.next {
right: 14px; }
.content-single-produk .post-outer-single .produk-container .gambar-produk button.prev {
left: 14px; }
.content-single-produk .post-outer-single .produk-container .gambar-produk button.next::after, .content-single-produk .post-outer-single .produk-container .gambar-produk button.prev::after {
content: "";
display: block;
width: 14px;
height: 14px;
border-bottom: 2px solid rgba(255, 255, 255, 0.6); }
.content-single-produk .post-outer-single .produk-container .gambar-produk button.next::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-right: 2px solid rgba(255, 255, 255, 0.6); }
.content-single-produk .post-outer-single .produk-container .gambar-produk button.prev::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 2px solid rgba(255, 255, 255, 0.6); }
.content-single-produk .post-outer-single .produk-container .keterangan-produk {
color: inherit;
background: rgba(234, 202, 83, 0.12);
padding: 15px 15px;
border: 4px dashed rgba(234, 202, 83, 0.32);
border-radius: 8px; }
.content-single-produk .post-outer-single .produk-container .keterangan-produk b.harga-produk-coret {
text-align: center;
text-decoration: line-through;
display: block;
color: #C54816;
font-weight: normal; }
.content-single-produk .post-outer-single .produk-container .keterangan-produk b.harga-produk {
text-align: center;
font-size: 28px;
font-size: 1.75rem;
display: block;
font-weight: normal; }
.content-single-produk .post-outer-single .produk-container .keterangan-produk b.info-produk {
text-align: center;
display: block;
color: #2f7418;
font-weight: normal; }
.content-single-produk .post-outer-single .produk-container .produk-deskripsi {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 32px;
margin-top: 2rem; }
#content-wrap-produk-index .banner-produk .widget-content,
#content-wrap-produk-index .banner-jasa .widget-content,
#content-wrap-produk-index .html-produk .widget-content,
#content-wrap-produk-index .html-jasa .widget-content {
text-align: center;
margin: 0 0 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 36px;
overflow-x: auto; }
@media only screen and (max-width: 900px) {
#content-wrap-produk-index .banner-produk .widget-content,
#content-wrap-produk-index .banner-jasa .widget-content,
#content-wrap-produk-index .html-produk .widget-content,
#content-wrap-produk-index .html-jasa .widget-content {
margin: 0 0 30px;
padding: 0 30px; } }
@media only screen and (max-width: 480px) {
#content-wrap-produk-index .banner-produk .widget-content,
#content-wrap-produk-index .banner-jasa .widget-content,
#content-wrap-produk-index .html-produk .widget-content,
#content-wrap-produk-index .html-jasa .widget-content {
margin: 0 0 22px;
padding: 0 22px; } }
@media only screen and (max-width: 900px) {
#content-wrap-produk-index #banner-produk,
#content-wrap-produk-index #banner-jasa {
margin: 0 auto 30px; } }
@media only screen and (max-width: 480px) {
#content-wrap-produk-index #banner-produk,
#content-wrap-produk-index #banner-jasa {
margin: 0 auto 22px; } }
#content-wrap-produk-index #banner-produk .normalwidget-title,
#content-wrap-produk-index #banner-jasa .normalwidget-title {
display: none;
visibility: hidden;
height: 0;
opacity: 0; }
#content-wrap-produk-index #banner-produk .widget-content,
#content-wrap-produk-index #banner-jasa .widget-content {
margin: 0 auto 36px; }
#content-wrap-produk-index #banner-produk .widget-content a,
#content-wrap-produk-index #banner-jasa .widget-content a {
display: block; }
#content-wrap-produk-index #banner-produk .widget-content img,
#content-wrap-produk-index #banner-jasa .widget-content img {
width: 100%;
display: block;
border-radius: 4px; }
#content-wrap-produk-index #banner-produk .widget-content br,
#content-wrap-produk-index #banner-jasa .widget-content br {
display: none; }
#content-wrap-produk-index #banner-produk .widget-content .caption,
#content-wrap-produk-index #banner-jasa .widget-content .caption {
text-align: center;
display: block;
padding: 15px; }
.order-produk {
text-align: center;
display: block; }
.order-produk a, .order-produk a:visited {
-webkit-transition: all .2s;
transition: all .2s;
display: inline-block;
text-align: center;
background: #4c8e1a;
padding: 10px 30px;
color: #fff !important;
margin: 32px auto;
margin: 2rem auto;
border-radius: 4px;
-webkit-box-shadow: 0 0 0 6px rgba(95, 95, 95, 0.1);
box-shadow: 0 0 0 6px rgba(95, 95, 95, 0.1);
font-size: 22px;
font-size: 1.375rem;
text-transform: uppercase;
text-decoration: none !important;
font-weight: bold; }
.order-produk a:hover {
background-color: #336909; }
.order-wa a {
background-color: #4c8e1a;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB8AAAAfABTP6PgwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAM+SURBVEiJrZdbiFVlFMd/3zFs9NC9oYzIMtOGmQeTJDICqZcuD0UvRYFBglAvEfTQQ1ER2UMPUVFgZleIItKii1IKgdHFkCx9KKHJicJqsOziaObMr4fzHVzzzZ4z+5xaL/vs//qv9V/72+tb+zuJmqYuA64ClgOLgH5gDrAf+AXYDmwD3kwp/V4373RiSb1F3WF9+0tdp87vlDt1EB0A1gKXB/gosBP4FPgp3zeBhcClwLmBewh4GHgkpTRR90mvUf8ITzGs3qmeOEPcUvVZ9UiIfV89pY7ozerRHHRYvUc9rlbFx3IMFK/nc/XkTgFXhmpH1cu6ESxyzVVfDeJb1VlVxNPUHzPpgHpRr6IhZ1JfCOL3V5GeDIQbCt8y9UH12h7EZ6sfh1e3IDrPzqDqa0XgoDqWfb+pzR7Eh8IrfCk61mRwXF1YBG1xsq3qVjjneS7Hj6kntcHdGXyvIPeFlWjbth6FL55UvHpOAFYX5KZTbVSddvDMIN5u3ucbwIXB91kkppQOAl8HaBxYmVKyF2FasxxgSQM4Lzi+ryCvD7+/TClt6lEUYCRf5zeAucFRNVOfDgUtVa/7D8K/5muzARwMjilLmFIaA24LvnVl53dh7a14uBGqADijip1S2go8lm/7gS3qYOTYmnw3qbM7CJ+Vr6NlV984XYQ6S90QuAfU2zPeVD/J+HfqSivmsrozcza2gR8y8HKHalHnqG8U2+sbqw8KHxaxF6gT2Xd3G1ybgTH19BnEG7Ym3XiFWLSPirg1wbegDQ6Eah7tJBwSDalvh7ho/xi6X52n/pl9m8tE72TH33bRter56kN5ufepb6mXFJxXQlHLywT3hmr76wrXKOyuIPpiFeGL7PzgfxS9w2PHqGHLM5u6OFRVfijm9SDYdPLBYp+6qIp4X1jmM9Ur1CfUkdw8G9QlNQT71NXq3iC6Vx0quSkH7AKGaJ2FDwGnTpP7K2ATsAsYBo4H+oDFtM7VVwNxOd8Fbk0p7a+qcnDKZmjZqLpefcbWv4NubLd6/UzL80AIGFEfV1cYRp56grpK3az+XCE0oe5Rn1JXdBTMltTXgT3ARmBHnY+8rYZrD/wjwLf5K1bb/gWmMra2uud+NQAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-position: 15px 11px;
padding: 10px 20px 10px 55px; }

@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

#iklan-tengah1,#iklan-tengah2,#iklan-atas,#iklan-bawah,#matched-content,#iklan-infeed{display:none;}
-->