@font-face {
    font-family: 'avantgarde_bk';
    src: url('../fonts/avant_garde_book_bt-webfont.eot');
    src: url('../fonts/avant_garde_book_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/avant_garde_book_bt-webfont.woff2') format('woff2'),
         url('../fonts/avant_garde_book_bt-webfont.woff') format('woff'),
         url('../fonts/avant_garde_book_bt-webfont.ttf') format('truetype'),
         url('../fonts/avant_garde_book_bt-webfont.svg#avantgarde_bk_btbook') format('svg');
    font-weight: normal;
    font-style: normal;

}
body { font-family:"Open Sans", Arial, Helvetica, sans-serif; color:#000; background:url(../images/background_01.jpg) top center no-repeat, url(../images/bgfooter_03.jpg) bottom left no-repeat, url(../images/bgfooter_05.jpg) bottom right no-repeat #000 ; }
.container {min-width: 1000px;width: 1000px;}
a { text-decoration: none; color:#000;  -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }
a:hover, a:focus {text-decoration: none;outline: none;color: #FF0000;}
.valign { display:table; height:100%; }
.vcenter { height:100%; display:table-cell;vertical-align:middle; float:none; }
.font-red { color:#ee383f; }
.font-grey { color:#999; }
.mb5 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mt5 { margin-top:5px!important; }
.mt8 { margin-top:8px!important; }
.mt10 { margin-top:10px!important; }
.pdr20 { padding-right:20px; }
.block { display:block!important; }
.wrap-artikel {margin: 0;}
/*header*/
header {/* height:228px; */height: auto;}
nav {width: 1000px;margin:0 auto;height: auto;overflow:hidden;}
.logo {background: transparent;padding: 8px 0 0;text-align: left;}
.menu {text-align: right;}
.menu ul { list-style:none; margin:0; padding:0; }
.menu ul li {/* float:left; */display: inline-block;}
.menu ul li a {display:block;color:#fff;font: 14px "Duru Sans", Arial, Helvetica, sans-serif;padding: 30px 20px 12px;position: relative;}
.menu ul li a:hover, .menu ul li a:active, .menu ul li a.active {background: #ff0000;text-decoration:none;}
.shared a {width:25px;height:25px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;background:#fff;color: #000;display:inline-block;text-align:center;font-size: 15px;padding: 5px 0;margin: 25px 2px 0;}
.shared a:hover {background: #ff0000;color:#fff;}
.title-big h1 { font:34px/38px "helvetica neue", Helvetica, Arial, sans-serif; }
header .head {height: 415px;}
header .header-right {float: right;width: 420px;padding: 35px 10px 10px;}
header .header-right h3 {color: #fff;font: 16px 'avantgarde_bk', Arial, Helvetica, sans-serif;margin: 20px 0 130px;letter-spacing: 1.2px;}
header .header-right p {color: #fff;font: 12px 'avantgarde_bk', Arial, Helvetica, sans-serif;letter-spacing: 1.2px;line-height: 1.5;margin: 0 0 15px;}
header .header-right p span {font-weight:bold;text-transform: uppercase;font-size: 15px;}
header .header-right p a {color: #fff;font-size: 10px;}
header .header-right p a span {font-size: 12px;line-height:1;vertical-align: middle;}
/*header*/
/* main */
.col-left {width: 680px;}
.col-right { width:300px; }
.label h1 { font:700 15px "Open Sans", Arial, Helvetica, sans-serif!important; margin:0; display:inline-block; padding:10px 20px;background: #000; color:#fff!important;}
.label a { display:block; color:#b21827;padding:10px 0;font:700 12px "Open Sans", Arial, Helvetica, sans-serif; }
.label a.idx { display:block;color: #cfcecc;padding: 2px 0px;font-size: 14px;line-height: 1;font-weight: normal;font: inherit;border: 2px solid #cfcecc;width: 25px;height: 25px;border-radius: 25px;text-align: center;}
.label a.idx:hover {color:#000;border:2px solid #000;}
.label-small {background:#b21827; color:#fff!important;padding:5px 20px; }
.label-small h1 { font:400 14px "Open Sans", Arial, Helvetica, sans-serif!important; margin:0; display:block; }
.label-small a, .label-small a:hover { display:inline-block; color:#fff;font:400 12px/20px "Open Sans", Arial, Helvetica, sans-serif; }
.headline .thumb { width:430px; height:215px; overflow:hidden; }
.headline .thumb img { width:100%; height:auto; }
.headline .content { width:200px; }
.headline .content h1 { font:300 20px/25px "Open Sans", Arial, Helvetica, sans-serif; margin:0; }
.headline .content p { font:400 13px/20px "Open Sans", Arial, Helvetica, sans-serif; margin:0; color:#8f8f8e; max-height: 80px; overflow: hidden;}

.font-10 { font-size:10px; }
.font-11 { font-size:11px; }
.mt20 { margin-top:20px!important; }
.mt30 { margin-top:30px!important; }
.mb5 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb20 { margin-bottom:20px!important; }
.mr10 {margin-right:10px;}
.mr15 {/* margin-right:15px; */}
.pd10 { padding-left:10px; padding-right:10px; }
.pdr10 { padding-right:10px; }
.pdl10 { padding-left:10px; }
.dot-left { border-left:1px dotted #000; }
.grey-area {background: #f5f4f4;font: 300 13px/22px 'Open Sans', Arial, Helvetica, sans-serif; padding:10px;}
.btn-grey { background:#e3e2e1; font:13px/28px "Open Sans", Arial, Helvetica, sans-serif; display:inline-block; color:#8d8b8b;}
.btn-grey:hover { background:#eee; }
.btn-grey span { padding:0 15px 0 5px; }
.btn-grey i { font-size:25px; color:#8d8b8b; padding:0 0 5px 5px; }
.container .lazyload { opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.container .lazyloaded { opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: all 700ms; -moz-transition: all 700ms; -o-transition: all 700ms; }
.btn-standart { background:#bf1e2e; border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px; color:#fff!important; padding:8px 15px 5px 5px!important; display:inline-block; font:400 14px/26px "Open Sans", Arial, Helvetica, sans-serif!important; border-bottom:3px solid #c9dede;}
.btn-standart:hover { background:#9f1926; }
.btn-standart i { margin-right:10px; float:left; font-size:30px; opacity:0.7;}
.btn-standart span { float:left; }
.btn-tulis {background: #FF0000;color:#fff!important;padding: 10px 50px!important;display:inline-block;font: 600 15px/24px "Open Sans", Arial, Helvetica, sans-serif!important;border-radius: 8px;margin: 0 0 10px;}
.btn-tulis:hover {background: #B21827;}
/*header*/
/* main */
.date-label {font: 700 11px/16px 'Open Sans', Arial, Helvetica, sans-serif; margin: 3px 0;color: #c1c1c1;}
.list-artikel {padding: 0 0 20px;background: #fff;position: relative;width: 313px;float: left;margin: 0 0 30px;}
.list-artikel:last-child { border: none!important; }
.list-artikel .thumb {position: relative;width: 100%;height: auto;display: block;background: none;}
.list-artikel .thumb a {display: block;}
.list-artikel .thumb img {width: 100%;height: auto;}
.list-artikel .title {padding: 10px 20px 0;position: relative;}
.list-artikel .title p {font: 300 14px/22px 'Open Sans', Arial, Helvetica, sans-serif;margin: 0;color: #908e8e;max-height: 70px;overflow: hidden;height: auto;}
.list-artikel .title h1 {font: 400 20px/28px 'Open Sans', Arial, Helvetica, sans-serif;margin: 0 0 10px;}
.list-artikel .title h2 {font: 600 14px/18px 'Open Sans', arial;margin: 0;}
.box-user {margin: 10px -20px 0;border-top: 1px solid #e8e5e5;padding: 15px 20px 0 60px;position: relative;}
.box-user .thumb {width: 30px!important;height: 30px!important;position: relative;overflow: hidden;margin-left: 0px!important;margin-right: 10px;position: absolute;left: 20px;top: 20px;}
.box-user .thumb img {height: 100%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
.box-user h1, .box-user h1 a {font: 700 11px/22px 'Open Sans', Arial, Helvetica, sans-serif!important;color: #f00;margin: 0!important;height: 21px!important;overflow: hidden;text-transform: uppercase;}
.box-user h1 a:hover {color: #000;}
.box-user h2 {font: 400 11px/11px 'Open Sans', arial !important;color: #c1c1c1!important;margin: 0;font-weight: 300;float: left;}
.box-user span {margin-right: 5px;display: inline-block;}
.box-user .shared {font: 400 11px/17px 'Open Sans', arial!important;color: #b4b4b4!important;display: inline-block;float: right;margin: -5px 0 0;}
.box-user .shared a {background: #e8e5e5;color:#fff;width: 20px;height: 20px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;font-size:10px;margin:0;line-height: 12px;}
.box-user .shared a.icon-facebook:hover { background:#0a5c8c; }
.box-user .shared a.icon-twitter:hover { background:#00bee2; }
.box-user .shared a.icon-google-plus:hover { background:#c33028; }
.paging { padding:10px 0; border-top:1px solid #bbb; border-bottom:1px solid #bbb; }
.pagination { margin:0; }
.pagination>li>a { font:400 13px "Open Sans", Arial, Helvetica, sans-serif; color:#666; border:none; padding:5px 8px; background:none; }

.video-box { border:1px solid #bf1e2e; padding:20px 40px; }
.twitter-box { border:1px solid #efefef; background:#fff; }
.twitter-box h1 {padding: 0 0 20px; font:400 12px "Open Sans", Arial, Helvetica, sans-serif; color:#2f2f2f; margin:0;}
.twitter-box h1 strong {font:700 15px "Open Sans", Arial, Helvetica, sans-serif; color:#bf1e2e; }
.twitter-box .input { padding:10px; background:#d6d5d5;margin: 0 -20px -20px;}.twitter-box .input input { font-size:12px; color:#cac8c8; }
.right-box {padding:20px;background:#fff;}
.right-box .content img {max-width:100%;}
.left-box {padding: 20px 20px 0;background:#fff;}

.list-box {padding: 20px 0; border-bottom:1px solid #dfdede;}
.list-box:last-child {border-bottom: none;padding: 20px 0 0;}
.list-box .thumb {width: 65px;height: 65px; overflow:hidden;}
.list-box .thumb img {width: auto;height: 100%;}
.list-box .content {width: 180px;}
.list-box .content h1 {font: 300 15px/22px 'Open Sans', Arial, Helvetica, sans-serif; margin:0;max-height: 68px; overflow: hidden;color: #1f0b02;}
.list-box .content p { font:400 13px/20px "Open Sans", Arial, Helvetica, sans-serif; margin:0; color:#8f8f8e; max-height: 80px; overflow: hidden;}

/* read */
.box-user-in { padding: 15px; background: #f5f5f5; margin-bottom: 20px; overflow-wrap: break-word;}
.box-user-in .thumb { width: 100px!important; height: 100px!important; position: relative; overflow: hidden; margin: 10px auto; }
.box-user-in .bar { margin: 10px 0; font-size: 14px; line-height: 18px; }
.box-user-in .thumb img { height: 100%; margin: 0 auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border: 3px solid #fff; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); }
.box-user-in .title { text-align: center; }
.box-user-in .title h1 { font: 400 23px/30px 'Open Sans', arial; margin: 0; }
.box-user-in .title span.terverifikasi { font: 400 12px/16px 'Open Sans', arial; margin: 10px 0; display: inline-block; }
.box-user-in .title span.terverifikasi:before { font: 30px/15px "icomoon2"; content: "\e60e"; float: left; }
.box-user-in .title h2 { font: 400 13px/18px 'Open Sans', arial; margin: 0; height: 19px; overflow: hidden; }
.box-user-in .title h2 a { font: 400 11px/18px 'Open Sans', arial; color: #b4b4b4; }
.box-user-in .title p { font: 300 15px/24px 'Open Sans', arial; margin: 0 0 20px; }
.box-user-in .title a { font: 600 13px/24px 'Open Sans', arial; }
.box-user-in .button a { font: 400 12px/18px 'Open Sans', arial; color: #b4b4b4; }
.box-user-in .button a:after { content: "|"; margin: 0 5px; }
.box-user-in .button a:hover { color: #61c3f1; }
.box-user-in .button a:last-child:after { content: ""; margin: 0; }
.box-user-in .tools a { font-size: 30px; padding: 10px; color: #b3b3b3; margin: 20px 0; display: inline-block; }
.box-user-in .tools a:hover { color: #125ba8; }
.tools-small a { font-size: 20px; padding: 5px; color: #b3b3b3; display: inline-block; }
.tools-small a:hover { color: #125ba8; }
.tools-small h3 { font: 400 12px/18px 'Open Sans', arial; color: #b3b3b3; }
.tools-small h3 span { display: block; font-size: 15px; }
.box-user-in .menu a { font: 400 12px/18px 'Open Sans', arial; color: #202531; display: block; padding: 10px 0; text-transform: uppercase; }
.box-user-in .menu a:hover { background: #e4e4e4; }
.read {font: 300 13px/25px 'Open Sans', Arial, Helvetica, sans-serif;overflow-wrap: break-word;color: #fff;padding-bottom: 400px;}
.read img { max-width: 100%; height: auto; }
.read h1 {font: 400 28px/38px 'Open Sans', Arial, Helvetica, sans-serif; margin: 0;color: #535352;}
.read p {font: 300 14px/30px 'Open Sans', Arial, Helvetica, sans-serif;margin: 5px 0 25px;color: #fff;}
.read a {font: 300 14px/30px 'Open Sans', Arial, Helvetica, sans-serif;color: #fff;text-decoration: underline;}
.read a:hover {color: #F00;text-decoration: underline;}
.read h2 {font: 700 14px/30px 'Open Sans', Arial, Helvetica, sans-serif; margin: 20px 0;}
.read h3 { font: 600 15px/25px 'Open Sans', arial; margin: 20px 0; }
.read ul, .read ol { padding-left: 25px;margin-bottom: 20px;}
.read strong, .read b {font: 600 15px/26px 'Open Sans', arial;margin: 20px 0;}
.read .count {margin: 5px 0 15px; overflow: hidden;}
.read .count span { display: inline-block;font: 700 11px/18px 'Open Sans', Arial, Helvetica, sans-serif;color: #535352; margin: 0 15px 0 0;}
.read .box-tools { text-align: left; border-radius: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;-o-border-radius: 40px; border: 1px solid #eee; padding: 5px; font: 11px 'Open Sans', arial; color: #676767; }
.read .box-tools a span { font-size: 17px; float: left; color: #ccc; }

.read .box-tools a:hover span { color: #125ba8; }
.read .thumb { width: 100%; position: relative; overflow: hidden; text-align: center; }
.read .thumb img { width: 100%; margin: 0 auto; }
.read .img-read .img { width: 100%; height: auto; position: relative; overflow: hidden; text-align: center; }
.read .img-read img { margin: 0 auto; max-width: 100%; }
.read .img-read .title {font: 400 12px/18px 'Open Sans', Arial, Helvetica, sans-serif; color: #9d9d9d; margin: 10px 0 20px;}
.read .img-read .title span {font: italic 400 11px/18px 'Open Sans', Arial, Helvetica, sans-serif; display: block; margin: 5px 0;}
.read .thumb-box .title {font: 400 12px/18px 'Open Sans', Arial, Helvetica, sans-serif; color: #9d9d9d; margin: 10px 0 20px;}
.read .thumb-box .title span { font: italic 12px "Open Sans", Times, serif; display: block; margin: 5px 0; }
.read .shared { font: 400 12px/17px 'Open Sans', arial!important; color: #b4b4b4!important;margin-right: 20px;}
.read .shared a {
  display: block;
  padding: 9px 10px 9px 15px;
  font: 400 12px/17px 'Open Sans', arial;
  color: #fff!important;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  text-align: left;
  height: 35px;
  width: auto;
  overflow: hidden;
  margin: 5px 10px 5px 0!important;
  }
.read .shared a span {
    padding: 0 15px 0 27px;
    font: 400 11px/11px 'Open Sans', arial;
}

.read .shared a:before {
    position: absolute;
    left: 15px;
}
.read .shared a.icon-facebook { background:#0a5c8c; }
.read .shared a.icon-twitter { background:#00bee2; }
.read .shared a.icon-facebook:hover { background:#084a70; }
.read .shared a.icon-twitter:hover { background:#019dba; }
.read .shared a.icon-google-plus { background:#c33028; }
.read .shared a.icon-linkedin-square { background:#0274b3; }
.read .shared a.icon-google-plus:hover { background:#b13c2d; }
.read .shared a.icon-linkedin-square:hover { background:#01507c; }
.read .shared a:hover {text-decoration: none;}

/*footer */
footer {padding: 22px 0px 20px;margin-top: 50px;color:#fff;font: 400 12px "Open Sans", Arial, Helvetica, sans-serif;background: #0d0d0d;}
footer .footer-copy {padding: 8px 0 0;}
footer .footer-copy img {padding: 0 0 10px;width: 130px;}
.load-more {position: relative;margin: 0 0 -50px;}
.load-more .more {text-align:center;margin: 0;background: #fff;display: inline-block;padding: 0;border-radius: 0 0 50px 50px;width: 100px;height: 50px;font: 700 14px/18px 'Open Sans', Arial, Helvetica, sans-serif!important;text-transform: uppercase;}
.line-break {margin: 0 -20px 20px;width: 680px;height: 20px;background:#efeded;}
.clearfix {
  *zoom: 1;
} 
.clearfix:after,
.clearfix:before {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.sorting {font:300 13px/24px "Open Sans", Arial, Helvetica, sans-serif;color:#fff;padding:20px 0;}
.sorting a {padding: 2px 10px;margin:0 5px 0 15px;color:#fff;background: #353A3F;border-radius: 5px;box-shadow: 1px 1px 10px rgba(0,0,0,.5);text-transform: uppercase;font-size:11px;}
.sorting a.active {background: #19222a;}
.sorting a:hover {background: #f00;}
.sorting a:last-child {margin:0;}

.vario-title {position: absolute;top:0;right:30px;}
.produk-spek {padding:170px 0 0;}

.btn-spek {background: #F00;text-align:center;color:#fff;font-weight:700;margin:10px 25px;font-size: 14.5px;padding: 5px 68px;display: inline-block;border-radius: 10px;line-height: 1.3;}
.btn-spek:hover {color:#fff;background: #B21827;}
.btn-spek span {display:block;font-weight:300;font-size: 13px;}
.vario-125 {position: absolute;right: 60px;bottom: 80px;}
.wrap-vario-125 {margin:0 0 250px;}
.wrap-produk {padding:0 0 50px;}
.wrap-hadiah {padding:0 0 50px;position: relative;}
.hadiah-vario {position: absolute;top:0;left:0;}
.hadiah-vario p {font-size:13px;font-weight:300;line-height:1.5;}
.hadiah-vario p span {display:block;font-size:18px;font-weight:700;margin-bottom:3px;}
.hadiah-uang {padding:210px 0 0;}
.hadiah-uang p {font-size:18px;font-weight:700;margin-bottom:3px;line-height:1.5;}
.read .title {padding:10px 0 20px;}
.read--hadiah {padding-bottom: 240px;}
.load {text-align:center;margin:0 auto;}
.load img {width:20px;}