@charset "UTF-8";
/* --------------------------------------------------------
Kompas.com - 2017
author	: Ragil Hadianto
----------------------------------------------------------*/
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html { margin: 0; padding: 0; }

body { background: url(../images/#.jpg) no-repeat center 160px; font-family: "Rubik", sans-serif; font-size: 14px; font-weight: 400; color: #000; line-height: 1.3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }

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

a { color: inherit; text-decoration: none; vertical-align: top; outline: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
a:hover { text-decoration: underline; }

a:focus, button:focus { outline: 0; outline: -webkit-focus-ring-color auto 0; outline-offset: 0; }

img { max-width: 100%; width: auto; height: auto; vertical-align: top; border: 0; -ms-interpolation-mode: bicubic; }

table { border-collapse: collapse; }

iframe { border: none; vertical-align: top; }

li, ul, ol { margin: 0; padding: 0; list-style: none; }

ul li, ul li a { display: inline-block; list-style: none; vertical-align: top; }

input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

input:focus::-webkit-input-placeholder, input:focus:-moz-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder { color: transparent; }

input[type=button], input[type=checkbox], input[type=radio], input[type=reset], input[type=submit], label, select { cursor: pointer; }

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

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

button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select { cursor: pointer; }

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

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; color: inherit; text-rendering: optimizelegibility; }

h1, h2, h3 { line-height: 1.3; }

h1 { font-size: 2.5em; }

h2 { font-size: 2em; }

h3 { font-size: 1.2857em; }

h4 { font-size: 1em; }

h5 { font-size: .9375em; }

h6 { font-size: .786em; }

p { line-height: 1.5; margin: 3px 0 15px; }

blockquote { position: relative; font-size: 20px; font-weight: 400; margin: 25px 40px; }
blockquote:before, blockquote:after { font-family: "icomoon"; font-size: 30px; line-height: 1; position: absolute; }
blockquote:before { content: "\e901"; left: -40px; }
blockquote:after { content: "\e900"; padding-left: 10px; }

/*––––––––––––– RWD –––––––––––––*/
[class*=col] { float: left; position: relative; }

[class*=col]:first-child { margin-left: 0; }

.container { height: 100%; margin: 0 auto; *zoom: 1; position: relative; }

.col-x { width: auto; }

/*––––––––––––– grid –––––––––––––*/
.w100 { width: 100%; }

.w75 { width: 75%; }

.w50 { width: 50%; }

.w25 { width: 25%; }

.clearfix:after, .clearfix:before, .row:after, .row:before { display: table; content: ""; line-height: 0; }
.clearfix:after, .row:after { clear: both; }

/*–––––––––––––Utilities–––––––––––––*/
.display-table { display: table; width: 100%; height: 100%; position: relative; z-index: 1; }

.display-center { display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%; }

.center { float: none !important; margin: 0 auto !important; text-align: center; }

.middle { display: table-cell; vertical-align: middle; }

.top { display: table-cell; vertical-align: top; }

.bottom { display: table-cell; vertical-align: bottom; }

.center-block { display: block; margin-left: auto; margin-right: auto; }

.hide { display: none !important; }

.show { display: block !important; }

.invisible { visibility: hidden; }

.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.affix { position: fixed; }

.d_table { display: table; }

.d_block { display: block; }

.right { float: right !important; }

.left { float: left !important; }

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

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

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

.mt1 { margin-top: 10px !important; }

.mb1 { margin-bottom: 10px !important; }

.mr1 { margin-right: 10px !important; }

.ml1 { margin-left: 10px !important; }

.pt1 { padding-top: 10px !important; }

.pb1 { padding-bottom: 10px !important; }

.pr1 { padding-right: 10px !important; }

.pl1 { padding-left: 10px !important; }

.mt2 { margin-top: 20px !important; }

.mb2 { margin-bottom: 20px !important; }

.mr2 { margin-right: 20px !important; }

.ml2 { margin-left: 20px !important; }

.pt2 { padding-top: 20px !important; }

.pb2 { padding-bottom: 20px !important; }

.pr2 { padding-right: 20px !important; }

.pl2 { padding-left: 20px !important; }

.bolt { font-weight: bold; }

/*header*/
.menu { position: fixed; left: -325px; top: 0; width: 300px; height: 100vh; background: #750f63; z-index: 9999; text-align: center; -webkit-box-shadow: 9px 0px 19px -9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 9px 0px 19px -9px rgba(0, 0, 0, 0.6); box-shadow: 9px 0px 19px -9px rgba(0, 0, 0, 0.6); }
.menu.show { left: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.menu h2 { padding: 20px 0; color: #fff; color: #47003a; }
.menu h2 span { font-size: 15px; position: absolute; right: 10px; top: 15px; cursor: pointer; padding: 10px; }
.menu ul li { display: list-item; text-align: center; border-top: 1px solid #620051; }
.menu ul li a { font-size: 25px; color: #fff; padding: 10px 0; width: 100%; }

.header { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 999; }
@media (max-width: 640px) { .header { padding: 0 10px; } }
.header.fix { height: 60px; position: fixed; overflow: hidden; -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.44); -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.44); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.44); }
.header__home.fix { background: url(../images/head.jpg) no-repeat; background-attachment: fixed; width: 100%; }
@media (min-width: 320px) { .header__home.fix { padding: 0 10px; } }
@media (min-width: 768px) { .header__home.fix { background-size: 150%; padding: 0; } }
@media (min-width: 1100px) { .header__home.fix { background-size: 115%; } }
.header__home.fix h1 { display: block; }
.header__home.fix .oppokompas { display: block; }
.header__home h1 { display: none; }
.header__home .oppokompas { display: none; }
.header__home .oppokompas.fix { display: block; position: relative; top: -3px; display: block; }
@media (max-width: 640px) { .header__home .oppokompas.fix { display: none; } }
.header__home .oppokompas.fix img { width: 50%; }
.header__read { background: url(../images/head.jpg) no-repeat; background-attachment: fixed; }
@media (min-width: 320px) { .header__read { padding: 0 10px; height: 200px; } }
@media (min-width: 768px) { .header__read { background-size: 150%; padding: 0; height: 210px; } }
@media (min-width: 1100px) { .header__read { background-size: 115%; } }
.header__read__panel { padding-top: 15px; }
.header__read__panel .m_menu { float: left; margin-right: 10px; cursor: pointer; z-index: 999; }
.header__read__panel h1 { font-size: 20px; font-weight: normal; line-height: 0.9; letter-spacing: -0.4px; color: #fff; overflow: hidden; position: relative; top: 5px; left: 5px; }
@media (max-width: 640px) { .header__read__panel .oppokompas { margin-top: 15px; } }
.header__read__panel .oppokompas img { width: 70%; }
@media (min-width: 320px) { .header__read__panel .oppokompas img { float: none; } }
@media (min-width: 768px) { .header__read__panel .oppokompas img { float: right; } }
.header__read__panel .oppokompas.fix { position: relative; top: -3px; }
@media (max-width: 640px) { .header__read__panel .oppokompas.fix { display: none; } }
.header__read__panel .oppokompas.fix img { width: 50%; }
@media (min-width: 320px) { .header__read__feature { margin-top: 40px; } }
@media (min-width: 640px) { .header__read__feature { margin-top: 20px; } }
@media (min-width: 768px) { .header__read__feature { margin-top: 70px; } }
.header__read__feature h2 { font-size: 48px; font-weight: 300; color: #e28cb3; }

#preloader { background: #3e2656; height: 100%; width: 100%; z-index: 999999; position: fixed; }
#preloader .container { height: auto; }

.spinner { width: 40px; height: 40px; position: relative; margin: 0 auto; }

.double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }

.double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

@-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); }
  50% { -webkit-transform: scale(1); } }
@keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); }
  50% { transform: scale(1); -webkit-transform: scale(1); } }
.left_hover { position: relative; left: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.left_hover:hover { left: 10px; }

.more { margin: 20px auto; padding: 12px 50px; background: #eee; width: 200px; cursor: pointer; display: block; text-align: center; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.more:hover { background: #d7d7d7; }

.main__feature { width: 100%; height: 100%; background: url(../images/bg_purple.jpg) no-repeat; background-attachment: fixed; background-size: cover; position: relative; top: 0; }
@media (min-width: 320px) { .main__feature { padding: 0 20px; } }
.main__feature .display-center { text-align: left; }
.main__feature .display-center [class*=col] { float: none; }
@media (min-width: 768px) { .main__feature .logo_oppo { margin-bottom: 30px; } }
.main__feature h3 { font-weight: 300; color: #e28cb3; }
@media (min-width: 320px) { .main__feature h3 { font-size: 24px; } }
@media (min-width: 768px) { .main__feature h3 { font-size: 36px; } }
.main__feature h2 { color: #fff; font-weight: normal; }
@media (min-width: 320px) { .main__feature h2 { font-size: 48px; letter-spacing: -2.3px; line-height: 1; } }
@media (min-width: 768px) { .main__feature h2 { font-size: 64px; line-height: 1.04; letter-spacing: -1.7px; } }
.main__feature h4 { color: #d9d2dd; font-weight: normal; }
@media (max-width: 320px) { .main__feature h4 { font-size: 14px; } }
@media (min-width: 768px) { .main__feature h4 { font-size: 36px; } }
.main__feature p { font-size: 28px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: 1.82; letter-spacing: -0.5px; background: rgba(40, 30, 67, 0.75); color: #fff; padding: 0 10px; margin: 1px 0; }
.main__feature__text { margin-top: 50px; }
.main__feature .button-play { position: absolute; z-index: 9999; bottom: 34px; left: 0; right: 0; margin: 0 auto; text-align: center; display: block; }
.main .main__post { padding-top: 40px; }
.main .main__post > .row { margin-bottom: 40px; }
.main .slick-arrow { background: #412a5e !important; width: 50px; height: 50px; z-index: 99; top: 30%; }
.main .slick-prev { left: 0; }
.main .slick-next { right: 0; }
.main .slidepost { overflow: hidden; position: relative; }
@media (min-width: 320px) { .main .slidepost { margin: 0px 10px; width: 300px !important; } }
@media (min-width: 360px) { .main .slidepost { width: 340px !important; margin: 0px 10px; } }
@media (min-width: 768px) { .main .slidepost { width: 230px !important; height: 230px; margin: 0px auto; margin-right: 30px; }
  .main .slidepost:nth-child(3n+3) { margin-right: 0; } }
@media (min-width: 1024px) { .main .slidepost { width: 300px  !important; height: 300px; margin-right: 30px; padding: 0; }
  .main .slidepost:nth-child(3n+3) { margin-right: 0; } }
@media (min-width: 1100px) { .main .slidepost { width: 360px !important; height: 360px; }
  .main .slidepost:nth-child(3n+3) { margin-right: 0; } }
.main .slidepost__img { position: relative; overflow: hidden; }
@media (max-width: 640px) { .main .slidepost__img { height: 300px; } }
@media (min-width: 768px) { .main .slidepost__img { width: 230px; height: 230px; } }
@media (min-width: 1024px) { .main .slidepost__img { width: 300px; height: 300px; } }
@media (min-width: 1100px) { .main .slidepost__img { width: 360px; height: 360px; } }
.main .slidepost__img img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
.main .slidepost__text { position: absolute; bottom: 20px; left: 0; background-color: rgba(40, 30, 67, 0.8); padding: 5px 10px; min-height: 100px; }
.main .slidepost__text p { color: #fff; font-size: 24px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; overflow: hidden; max-height: 90px; margin: 0; }
@media (min-width: 320px) { .main .post { margin-bottom: 20px; padding: 0 10px; } }
@media (min-width: 768px) { .main .post { margin-right: 0; padding: 0; padding-right: 15px; }
  .main .post:nth-child(4n+4) { padding-right: 0; } }
@media (min-width: 1100px) { .main .post { width: 263px; margin-right: 29px; padding-right: 0; }
  .main .post:nth-child(4n+4) { margin-right: 0; } }
.main .post__img { height: 161px; overflow: hidden; position: relative; }
@media (min-width: 1100px) { .main .post__img { width: 263px; margin-bottom: 10px; } }
.main .post__img img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
@media (max-width: 640px) { .main .post__img img { width: 100%; height: auto; } }
.main .post h3 { overflow: hidden; max-height: 73px; font-size: 18px; font-weight: 500; max-width: 90%; min-height: 73px; }
@media (max-width: 640px) { .main .post h3 { min-height: 50px; } }
.main .post p { overflow: hidden; max-height: 81px; margin-top: 8px; font-size: 14px; font-weight: 300; font-family: "Heebo", sans-serif; }
.main .post_video h3, .main .post_foto h3 { font-size: 24px; font-weight: 300; color: #750f63; margin-bottom: 10px; }
@media (max-width: 640px) { .main .post_video h3, .main .post_foto h3 { padding: 0 10px; } }
.main .post_video h3 a.viewall, .main .post_foto h3 a.viewall { position: absolute; right: 0; font-size: 14px; top: 8px; right: 8px; }
.main .post_video { position: relative; overflow: hidden; }
@media (min-width: 768px) { .main .post_video { padding-right: 10px; } }
@media (min-width: 1100px) { .main .post_video { width: 740px; margin: 0 10px 0 0; padding-right: 0; } }
.main .post_video__img { position: relative; overflow: hidden; }
@media (min-width: 320px) { .main .post_video__img { height: 160px; } }
@media (min-width: 768px) { .main .post_video__img { height: 390px; } }
.main .post_video__img:before { background: url(../images/icon_play.png) no-repeat center center; content: ""; height: 100%; position: absolute; text-align: center; width: 100%; z-index: 9; }
.main .post_video img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
@media (max-width: 640px) { .main .post_video img { width: 100%; height: auto; } }
@media (min-width: 320px) { .main .post_foto { margin-top: 20px; } }
@media (min-width: 768px) { .main .post_foto { margin-top: 0; } }
@media (min-width: 1100px) { .main .post_foto { width: 390px; } }
.main .post_foto__img { overflow: hidden; }
@media (max-width: 640px) { .main .post_foto__img { height: 160px; } }
@media (min-width: 768px) { .main .post_foto__img { height: 190px; } }
.main .post_foto__img:nth-child(1) { margin-bottom: 10px; }
@media (max-width: 360px) { .main .post_foto__img:nth-child(1) img { width: auto; height: 100%; } }
@media (max-width: 640px) { .main .post_foto__img:nth-child(1) img { width: 100%; height: auto; } }
@media (min-width: 1100px) { .main .post_foto__img:nth-child(1) img { width: 100%; height: auto; } }
@media (min-width: 320px) { .main .post_foto__img:nth-child(2), .main .post_foto__img:nth-child(3) { width: 48.4%; } }
@media (min-width: 1100px) { .main .post_foto__img:nth-child(2), .main .post_foto__img:nth-child(3) { width: 190px; } }
@media (min-width: 320px) { .main .post_foto__img:nth-child(2) { margin-right: 10px; } }
@media (min-width: 768px) { .main .post_foto__img:nth-child(2) { margin-right: 0; } }
@media (min-width: 1100px) { .main .post_foto__img:nth-child(2) { margin-right: 10px; } }
.main .post_foto__img img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
.main .topik_pilihan { background: #60265e; width: 100%; position: relative; margin-bottom: 40px; }
@media (min-width: 320px) { .main .topik_pilihan { padding: 10px 15px; } }
@media (min-width: 768px) { .main .topik_pilihan { padding: 40px 0; } }
.main .topik_pilihan h3 { font-size: 36px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: -1px; color: #ffffff; }
@media (max-width: 360px) { .main .topik_pilihan h3 { text-align: center; } }
@media (max-width: 640px) { .main .topik_pilihan__post { margin: 10px 0; } }
@media (min-width: 768px) { .main .topik_pilihan__post { padding-right: 10px; margin: 0; } }
@media (min-width: 1100px) { .main .topik_pilihan__post { width: 195px; margin-right: 25px; padding: 0; } }
.main .topik_pilihan__post:nth-child(4) { margin-right: 0; }
.main .topik_pilihan__post__img { position: relative; overflow: hidden; }
@media (min-width: 320px) { .main .topik_pilihan__post__img { margin-bottom: 7px; height: 140px; } }
@media (min-width: 768px) { .main .topik_pilihan__post__img { margin-bottom: 15px; height: 120px; } }
@media (min-width: 1024px) { .main .topik_pilihan__post__img { margin-bottom: 15px; height: 195px; } }
.main .topik_pilihan__post__img img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
@media (max-width: 640px) { .main .topik_pilihan__post__img img { width: 100%; height: auto; } }
.main .topik_pilihan__post__text { font-size: 18px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #ffffff; }
@media (max-width: 640px) { .main .main_list { padding: 0 10px; } }
.main .news_item ul li { margin-bottom: 25px; width: 100%; }
.main .news_item__img { height: 160px; overflow: hidden; position: relative; float: left; }
@media (min-width: 1100px) { .main .news_item__img { width: 160px; } }
.main .news_item__img img { width: auto; height: 100%; max-width: none; bottom: -9999px; left: -9999px; margin: auto; position: absolute; right: -9999px; top: -9999px; }
@media (max-width: 640px) { .main .news_item__img img { width: 100%; height: auto; } }
.main .news_item__text { overflow: hidden; }
@media (min-width: 768px) { .main .news_item__text { padding-left: 20px; } }
.main .news_item__text a { font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; margin-bottom: 5px; }
@media (min-width: 320px) { .main .news_item__text a { font-size: 18px; margin-top: 5px; } }
@media (min-width: 768px) { .main .news_item__text a { font-size: 24px; margin-top: 0; } }
.main .news_item__text p { overflow: hidden; font-size: 16px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; font-family: "Heebo", sans-serif; color: #454545; margin: 3px 0 5px; }
.main .news_item__text span { color: #a8a8a8; font-size: 12px; font-weight: normal; line-height: 2; }
.main .twitter { margin-bottom: 40px; }
.main .twitter__title { text-align: center; }
.main .twitter__title h3 { font-size: 24px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #750f63; }

.main__read { padding-top: 200px; }
.main__read__inner { padding: 20px 0; }
@media (max-width: 640px) { .main__read__inner { padding: 0 10px; } }
.main__read__title { padding: 10px 0; }
.main__read__title h3 { font-size: 48px; font-weight: 300; letter-spacing: 0.2px; color: #4a4a4a; }
@media (max-width: 640px) { .main__read__title h3 { font-size: 26px; } }
.main__read .kcm-date { font-weight: 300; }
.main__read .kcm-date span { font-size: 16px; font-weight: normal; line-height: 1.5; letter-spacing: 0.1px; color: #c21945; }
@media (max-width: 640px) { .main__read .kcm-social-share { padding: 10px 0px 10px; float: left; clear: both; } }
.main__read .sidemain { font-family: "Heebo", sans-serif; }
@media (min-width: 1100px) { .main__read .sidemain { width: 750px; } }
.main__read .sidemain .kcm-read-text, .main__read .sidemain p { font-size: 18px; font-weight: 300; line-height: 1.56; letter-spacing: 0.1px; color: #1e1e1e; font-family: "Heebo", sans-serif; }
.main__read .post_popup .post, .main__read .post_index .post { margin-bottom: 25px; margin-top: 25px; }
@media (max-width: 640px) { .main__read .post_popup .post, .main__read .post_index .post { margin-bottom: 10px; margin-top: 10px; padding: 0; } }
.main__read .post_popup .post__img, .main__read .post_index .post__img { display: block; position: relative; }
.main__read .post_popup--video .post__img:hover:before, .main__read .post_index--video .post__img:hover:before { opacity: 1; }
.main__read .post_popup--video .post__img:before, .main__read .post_index--video .post__img:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; background: url(../images/play-copy-2.png) no-repeat center center; content: ""; height: 100%; position: absolute; text-align: center; width: 100%; z-index: 9; opacity: 0.5; }
.main__read .sidebar { float: right; }
@media (min-width: 1100px) { .main__read .sidebar { width: 360px; } }
.main__read .sidebar > div { margin-bottom: 30px; }
.main__read .sidebar__banner { background-color: #f1f1f1; border: solid 1px #dfdede; padding: 29px; text-align: center; }
@media (max-width: 360px) { .main__read .sidebar__banner { padding: 0; } }
.main__read .sidebar__artikel_pilihan h3 { font-size: 24px; font-weight: 300; color: #750f63; margin: 10px 0; }
.main__read .sidebar__artikel_pilihan ul li { margin-bottom: 30px; }
.main__read .sidebar__artikel_pilihan ul li .post_item { margin-bottom: 10px; }
.main__read .sidebar__artikel_pilihan ul li a { font-size: 20px; font-weight: 500; }
.main__read .topik_pilihan { margin-bottom: 0; overflow: hidden; }

.kcm-read { margin-bottom: 20px; }

.kcm-read-top h2 { font-family: "Heebo", sans-serif; margin: 5px 0 10px; font-size: 30px; font-weight: 700; }

.kcm-read .photo, .kcm-read .video, .photo-vid { margin: 0 0 20px; color: #9A9A9A; font-size: 12px; line-height: 1.3; font-weight: 300; }

.kcm-read .photo span, .kcm-read .photo-vid span, .kcm-read .video span { font-size: .833em; text-align: right; display: block; width: 100%; color: #666; font-weight: 700; }

.kcm-read-terkait li { font-size: .857em; line-height: 1.5; }

.kcm-read-topik-bottom { border-top: 1px solid #dfdfdf; padding-top: 10px; }

.kcm-read-topik-bottom h4 { margin: 5px 0; font-size: 1.143em; }

.kcm-read-topik-bottom ul { margin: 10px 0; }

.kcm-read-topik-bottom li { display: block; font-weight: 700; font-size: 1.071em; line-height: 1.4; color: #0b8bba; padding: 2px 0; }

.kcm-read .kcm-read-text { color: #4b4b4b; font-size: 16px; line-height: 1.5; padding-bottom: 10px; }

.kcm-read .kcm-read-text a { color: #0b8bba; }

.kcm-read .kcm-read-text strong { font-weight: 700; }

.kcm-read .kcm-read-text ul, .kcm-read .kcm-read-text ol { padding: 0px 20px; margin: 3px 0 10px; }

.kcm-read .kcm-read-text li { list-style: inherit; display: list-item; }

.kcm-read-text > iframe { width: 100%; }

.kcm-read-copy { border-top: 1px solid #dfdfdf; padding: 10px 0; }

.kcm-social-right { float: right; width: auto; }

.kcm-date { width: auto; float: left; font-size: 88% !important; color: #8c8c8c; }

.kcm-social-share { padding: 0 0 10px; }

.share-total { display: inline-block; float: left; padding: 5px 0 0 5px; font-weight: 700; text-align: center; color: #9A9A9A; font-size: 18px; line-height: 15px; }

.share-total span { display: block; font-weight: 400; font-size: 10px; color: #000; }

.kcm-social-share ul { display: inline-block; float: left; }

.kcm-social-share li { min-width: 35px; position: relative; height: 35px; }

.kcm-social-share li .kcm-sosial-count { vertical-align: top; padding: 0; font-weight: 400; display: none; font-size: 11px; text-align: center; }

.kcm-social-share li:hover .kcm-sosial-count { color: #555; display: inline-block; position: absolute; width: 75px; top: -20px; left: -20px; }

.kcm-social-share li a:hover { text-decoration: none; }

.kcm-social-share li .ico-shared { font-size: 20px; color: #fff; }

.kcm-social-share li .ico-bg { height: 35px; width: 35px; display: inline-block; border-radius: 20px; position: absolute; padding: 8px; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all 0.2s ease; }

.kcm-social-share li:hover .ico-bg { height: 38px; width: 38px; padding: 9px; left: -1px; top: -1px; }

.bg-link { background: #E94F1D; }

.photo { position: relative !important; }

.kcm-comment-fb { padding: 20px 0 0; }

.inner-comment { border-bottom: 1px solid #ebebeb; padding: 0 0 20px; position: relative; width: 100%; height: auto; }

@font-face { font-family: icomoon; src: url(../fonts/icomoon.eot?5gt1up); src: url(../fonts/icomoon.eot?5gt1up#iefix) format("embedded-opentype"), url(../fonts/icomoon.ttf?5gt1up) format("truetype"), url(../fonts/icomoon.woff?5gt1up) format("woff"), url(../fonts/icomoon.svg?5gt1up#icomoon) format("svg"); font-weight: 400; font-style: normal; }
[class*=" icon-"], [class^=icon-] { font-family: icomoon !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*––––––––––––– socmed icon –––––––––––––*/
.bg-tw, .kcm-social-footer li a:hover .ico-social.icon-tw { background: #5EAADE; }

.bg-fb, .kcm-social-footer li a:hover .ico-social.icon-fb { background: #3B579D; }

.bg-gp, .kcm-social-footer li a:hover .ico-social.icon-gp { background: #DD4B39; }

.bg-in, .kcm-social-footer li a:hover .ico-social.icon-in { background: #0077B4; }

.bg-ig, .kcm-social-footer li a:hover .ico-social.icon-ig { background: #3F729B; }

.bg-ws, .kcm-social-footer li a:hover .ico-social.icon-ws { background: #4DBC93; }

.bg-line, .kcm-social-footer li a:hover .ico-social.icon-line { background: #58D413; }

.bg-pint, .kcm-social-footer li a:hover .ico-social.icon-pint { background: #CE2029; }

.bg-comment { background: #B6B6B6; }

.icon-link:before { content: ""; }

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

.icon-photo:before { content: "\e801"; }

.icon-cm:before { content: "\e80b"; }

.icon-ws:before { content: "\e80c"; }

.icon-tw:before { content: "\e80d"; }

.icon-fb:before { content: "\e80e"; }

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

.icon-en:before { content: "\e810"; }

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

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

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

.icon-female:before { content: "\e902"; }

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-ar:before { content: "\e910"; }

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

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

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

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

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

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

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

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

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

.icon-volume-low:before { content: "\e91a"; }

.icon-volume-medium:before { content: "\e91b"; }

.icon-pint:before { content: "\f0d2"; }

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

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

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

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

.icon-ig:before { content: "\f16d"; }

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

.footer { background: #281e43; height: 200px; width: 100%; }
@media (max-width: 640px) { .footer { padding: 0 10px; text-align: center; } }
.footer__text { margin-top: 40px; }
.footer__text span { font-size: 14px; font-weight: normal; color: #fff; }
.footer__text h3 { font-size: 18px; font-weight: 500; color: #ffffff; }
.footer__text p { font-size: 12px; color: #939ab1; }