@charset "utf-8";
/* CSS Document */

html{height: 100%;}
body {box-sizing: border-box; max-width: 100%; height: 100%; margin: 0;
font-family:Arial, Helvetica, sans-serif;}

.fl{float: left;}
.h500{height: 500px;}
.h256{height: 256px;}
.bt{border-top: 1px solid #fff;}
.bglight{}
.l{float: left; margin-left: 16px;}
.r{float: right; margin-right: 16px;}

.wrap{width:100%; padding-top: 64px; overflow: hidden;}

.part{width:100%; float:left;}

/*MENU*/
.mwrap{height: 100%;overflow: hidden; width: 100%;-webkit-backface-visibility: hidden;}
.menu{height: 64px; position:fixed; top: 0; z-index: 100;
    .logo{float: left; padding: 12px 12px 8px; width: 210px; 
		img{width: 100%;}
	}
    .submenu{float: left; margin-left: 16px; padding: 16px 0;
             .btm2{float: left; width: 32px; height: 32px; background: url(../images/submenu.png) no-repeat center left; border-right: 1px solid; border-right-color: rgba(255,255,255,0.3);}
             .logo2{float: left; padding: 3px 16px 0 16px; width: 28px; height: 26px;
				img{width: 100%;}
			 }
             .bread{float: left; overflow-x: scroll; width: 50%; display: inline; float: left; position: absolute;
                .breadcrumb{float: left; padding-top: 3px; width: 200%; padding-bottom: 10px;
                    li{padding-right: 16px; background: url(../images/next-w.png) no-repeat center right;  font-size: 18px; float: left; font-weight: bold; margin-right: 8px;
                       a{color: #fff;}
                       &:last-child{background: none; font-weight: normal;
                           a{color: rgba(255,255,255,0.5);}
                       }
                       &:first-child{font-weight: bold;
                           a{color: #fff;}
                       }
                    }
                }
             }
    }
}
.btm{width: 64px; height: 64px; position: absolute; right:0; top:0; background: rgba(0,0,0,0.2) url(../images/burger.png) center no-repeat;}

.menu .sr li .chome{background: url(../images/chm.png) no-repeat right 32px center;}
.menu .sr li .cnews{background: url(../images/cne.png) no-repeat right 32px center;}
.menu .sr li .cinternasional{background: url(../images/cin.png) no-repeat right 32px center;}
.menu .sr li .cekonomi{background: url(../images/cek.png) no-repeat right 32px center;}
.menu .sr li .cbola{background: url(../images/cbo.png) no-repeat right 32px center;}
.menu .sr li .colahraga{background: url(../images/col.png) no-repeat right 32px center;}
.menu .sr li .cteknologi{background: url(../images/cte.png) no-repeat right 32px center;}
.menu .sr li .chiburan{background: url(../images/chi.png) no-repeat right 32px center;}
.menu .sr li .crona{background: url(../images/cro.png) no-repeat right 32px center;}
.menu .sr li .cotomotif{background: url(../images/cot.png) no-repeat right 32px center;}
.menu .sr li .cvideo{background: url(../images/cvid.png) no-repeat right 32px center;}
.menu .sr li .cfoto{background: url(../images/cft.png) no-repeat right 32px center;}
.menu .sr li .cindex{background: url(../images/cid.png) no-repeat right 32px center;}
/*MENU END*/

.segmen{color: #fff;  padding: 16px 0; border-top: 1px solid #fff;
    img{margin-right: 8px;}
}
.segmen2{
    span{color: #545454;  font-size: 18px; margin-left: 16px; display: block; width: calc(~'100% - 32px'); border-bottom: 1px solid #d7d7d7; padding-bottom: 5px}
}
.segmen3{background: url(../images/aplus.jpg) no-repeat #269218; color: #fff;  padding: 16px 0; border-top: 1px solid #fff;
    img{margin-right: 8px;}
}

.ti{padding-left: 24px; margin-left: 16px;}
.ti2{padding-left: 32px; margin-left: 16px;}
.ti3{padding-left: 72px; margin-left: 16px;}
.ti4{margin-left: 16px;}
.iconews{background:url(../images/ico-news.png) no-repeat left;}
.icovideo{background: url(../images/ico-video.png) no-repeat left;}
.icooped{background: url(../images/ico-op.png) no-repeat left;}
.icofoto{background: url(../images/ico-foto.png) no-repeat left;}
.icoeye{background: url(../images/ico-view.png) no-repeat left;}
.icocomment{background: url(../images/ico-comment.png) no-repeat left;}
.icoshared{background: url(../images/ico-shared.png) no-repeat left;}
.eye{background: url(../images/eye.png) no-repeat center left; padding-left: 16px;}
.eye-w{background: url(../images/eye-w.png) no-repeat center left; padding-left: 16px;}
.icomment{background: url(../images/comment.png) no-repeat center left; padding-left: 16px; }
.ishare{background: url(../images/share.png) no-repeat center left; padding-left: 16px;}
.icocal{background: url(../images/cal.png) no-repeat center left;}
.icohashtag{background: url(../images/hashtag.png) no-repeat center left;}
.icostreaming{background: url(../images/signal.png) no-repeat center left;}

/*icon kanal*/
.inews{background:url(../images/cne2.png) no-repeat left;}
.iinternasional{background:url(../images/cin2.png) no-repeat left;}
.iekonomi{background:url(../images/cek2.png) no-repeat left;}
.ibola{background:url(../images/cbo3.png) no-repeat left;}
.iolahraga{background:url(../images/col2.png) no-repeat left;}
.iteknologi{background:url(../images/cte2.png) no-repeat left;}
.iotomotif{background:url(../images/cot2.png) no-repeat left;}
.ihiburan{background:url(../images/chi2.png) no-repeat left;}
.irona{background:url(../images/cro2.png) no-repeat left;}

//klasemen icon
.icoball{background: url(../images/cbo2.png) no-repeat left;}
.icoqnb{background:url(../images/qlg.png) no-repeat left;}
.icoepl{background:url(../images/elg.png) no-repeat left;}
.icoa{background:url(../images/vlg.png) no-repeat left;}
.icobundes{background:url(../images/blg.png) no-repeat left;}
.icobbva{background:url(../images/alg.png) no-repeat left;}
.icof1{background:url(../images/f1.png) no-repeat left;}
.icomgp{background:url(../images/gp.png) no-repeat left;}

.tag{color: #7f7f7f; font-size: 11px;  padding-bottom: 0px; display:block;
    a{color: #7f7f7f;}
}
.title{ font-size: 14px;}
.subtitle{ font-size: 12px; padding-bottom: 5px;}
.subt{ font-size: 12px; padding-top: 5px; color: #fff;}
.title a{color: #000;}
.op p{color: #727272; line-height: 150%; font-size: 12px; padding-top: 8px;}

/*headline*/
.headline{width: 100%; overflow:hidden; position: relative;
    .img1{width:120%;}
    .img2{height: 100%; position: absolute; left: -25%;}
    .htitle{margin-left:16px; position:absolute; bottom: 16px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
        span{font-family:"r"; font-size:11px; color: #fff;
             a{color: #fff;}
        }
        h2, h1{font-family:"rbold"; font-size:20px; font-weight: normal; margin: 0;
            a{color: #fff;}
        }
    }
    .t1{width: calc(~'100% - 48px'); padding: 8px; background: rgba(0,0,0,0.7);}
    .t2{width: calc(~'100% - 96px'); padding: 8px 8px 8px 56px; background: rgba(0,0,0,0.7) url(../images/btvid-w.png) no-repeat 8px 8px; }
    .t3{width: calc(~'100% - 120px'); padding: 8px 8px 8px 80px; background: rgba(0,0,0,0.7);
        .num{width: 48px; text-align: center; padding: 12px 0;  font-size: 18px; color: #fff; background: url(../images/circle2.png) no-repeat; position: absolute; left: 16px; top: 16px;}
    }.t4{width: calc(~'100% - 120px'); padding: 8px 8px 8px 80px; background: rgba(0,0,0,0.7) url(../images/btvid-w2.png) no-repeat 16px 8px; }
    
}

/*item*/
.item li{width:100%; min-height:48px; padding: 16px 0; float: left;
    .n{width: calc(~'100% - (25% + 32px) - 16px');}
    .c{width: calc(~'100% - 32px'); padding-left: 16px;}
    .op{width: calc(~'100% - (64px + 96px) - 16px');}
    .v{width: calc(~'100% - (25% + 32px + 16px + 48px)'); padding-left: 48px; background: url(../images/btvid.png) no-repeat;}
    .f{width: calc(~'100% - (25% + 32px + 16px + 48px)'); padding-left: 48px;}
    .m{width: calc(~'100% - 112px'); padding-left: 96px; position: relative;
       .num{width: 48px; text-align: center; padding: 12px 0; background: url(../images/circle.png) no-repeat;  font-size: 18px; color: #606060; position: absolute; left: 32px; top: 0;}
       .title{padding-bottom: 5px;}
       .tag{padding-bottom: 0 !important;}
    }
    .fw{max-width: 450px; width: 50%; padding-left: 48px;}
    .img2{max-width:128px; width: 25%; height: 56px; overflow: hidden; float: left; text-align:center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 0 16px;
        img{width:100%;}
    }
    .img3{width: 96px; height: 96px; float: left; margin: 0 32px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; position:relative;
        img{width: 150%; position:absolute; left: -24px;}
    }
    &:last-child{padding: 16px 0 24px 0; border: none;}
}
/*related*/
.related{border:1px solid #e1e1e1; background:#fafafa; margin:16px 0 16px 16px;width: calc(~'100% - 32px');}
.related li{width:100%; float:left;padding: 12px 16px; width: calc(~'100% - 32px'); border-bottom: 1px solid #efefef;
	.subtitle{color:red; font-size: 12px; padding-bottom: 5px;}
	.n{width: 100%;
		.title a{color: #0387e4;}
	}
	.img2{display: none; max-width:128px; width: 25%; overflow: hidden; float: left; text-align:center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 0 16px 0 0;
        img{width:100%;}
        h2{padding: 0 16px;}
        &:last-child{border-bottom: none;}
    }
	.ti4{ font-size: 14px; margin-left: 0; text-transform: capitalize; font-weight: bold;}
}

.dark li{border-bottom: 1px solid #212121; background: #1e1e1e;
        .f{background: url(../images/btfot-w.png) no-repeat;}
        .title a{color: #eee;}
        .subtitle{color: #red;}
}
.light {
     li{border-bottom: 1px dotted #ccc; 
        .f{background: url(../images/btfot.png) no-repeat;}
        .title a{color: #000;}
        .subtitle{color: red;}
     }
}

.multiview{ padding-bottom: 16px;
    li{margin: 0 16px; width: calc(~'100% - 32px'); background: #e2e2e2; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
}

.btmore{text-align: center; background: #cfcfcf; padding: 12px 0 20px 0; margin-bottom: 24px;
    a{color: #404040; font-size: 11px;  background: url(../images/more.png) no-repeat center bottom; padding-bottom: 8px;}
} 

.btmor2{padding: 8px 16px; display: block; float: right; background: #e22525;  font-size: 14px; color: #fff; margin-right: 16px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

.ads{text-align: center; padding: 8px 0 16px 0;
    span{color: #7f7f7f;  font-size: 11px; width: 100%; text-align:center; display: block; margin-bottom: 5px;}
    img{max-width: 320px; width: 90%;}
}

.sticky-ads{text-align: center; padding: 8px 0 5px 0; position: fixed; bottom: 0; z-index: 3; background: #fff;
    img{max-width: 320px; width: 90%;}
}

.date{padding: 16px 0;
     .form1{float: right; padding: 0 16px;  font-size: 12px;
            select{padding: 0 8px; border: 1px solid #c8c8c8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
                   option{ font-size: 12px; padding: 5px 16px;}
            }
            #select{width: 40px;}
            #select2{width: 90px;}
            #select3{width: 56px;}
            .buttons{padding: 7px 16px; color: #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
     }
}

.pagination{padding: 16px 0; background: #cfcfcf; margin-bottom: 24px;
           li{font-size: 16px;  
              a{color: #404040; }
               &.aa{
                   a{padding-left: 16px; margin-left: 16px; float: left; background: url(../images/btfirst.png) no-repeat center left;}
               } 
               &.bb{
                   a{padding-left: 16px; margin-left: 16px; float: left; background: url(../images/btprev.png) no-repeat center left;}
               }
               &.cc{
                   a{padding-right: 16px; margin-right: 16px; float: right; background: url(../images/btnext.png) no-repeat center right;}
               }
               &.dd{
                   a{padding-right: 16px; margin-right: 16px; float: right; background: url(../images/btlast.png) no-repeat center right;}
               }
           }
}

.detail{
    .lead{background: #fff; padding: 8px 0;  font-size: 12px; margin-bottom: 16px;
          .mleft a{color: #165793; font-size:16px;}
          .mright{color: #9e9e9e;}
    }
    h3{margin-left: 16px; color: #343434; font-size: 16px; }
    h1{margin: 8px 0 8px 16px;  font-size: 24px; color: #000; font-weight: normal; width: calc(~'100% - 32px');}
    .red{display: block; color: #565656; font-size: 12px;  margin-left: 16px;}
    .img4{width: 100%; position: relative;
          img{width: 100%;}
    }
    .img5{position: relative; width: calc(~'100% - 32px'); margin-left: 16px; border: 1px solid #cbcbcb; overflow: hidden; border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px;
          img{width: 100%; position: relative;}
    }
    .img6{width: calc(~'100% - 32px'); margin-left: 16px; overflow: hidden;
          img, video{width: 100%;}
    }
    .pnum{padding: 4px 8px; color: #fff; font-size: 12px; background: rgba(0,0,0,0.7);margin: auto; position: absolute; top: 8px; left: calc(~'50% - 16px'); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
    .caption{color: #000; font-size: 12px; background: #b5b5b5; padding: 8px 0;
             span{margin-left: 16px; display: block;}
    }
    .caption2{color: #7c7c7c; font-size: 13px; background: #fff; padding: 8px 0;
              span{margin-left: 16px; display: block;}
    }
       
    .article{color: #000; font-family: Arial; font-size: 16px; line-height: 150%; padding: 16px 16px 24px 16px; width: calc(~'100% - 32px');
             p{text-align: left;}
             ol{margin-left: 32px; list-style-type: lower-alpha; width: calc(~'100% - 48px'); text-align: left;
                &.list2{list-style-type: number !important;}
             }
			 iframe{width: 100% !important;}
             img{width: calc(~'100% - 32px') !important; margin-left: 16px; height: inherit !important;}
            /*AUSTRALIA +*/
            &.abc{
                p{padding: 4px 0;}
                address{width: calc(~'100% - 32px'); overflow: hidden; margin-left: 16px;
                img{width: 100% !important; height: 100% !important;}
                }
            }
            /*AUSTRALIA + END*/
    }
}
.iconb img{width: inherit !important;}
.page{width: 100%; float: left; position: absolute; top: 37%;
    li{
        &.arrow-left{float: left;
                      a{width: 29px; height: 44px; background: url(../images/left.png) no-repeat; display: block;}
        }
        &.arrow-right{float: right;
                   a{width: 29px; height: 44px; background: url(../images/right.png) no-repeat; display: block;}
        }
    }
}

.comment{text-align: center; margin-bottom: 16px;}

/*focus*/
.focus{display: block; position: fixed; top: 0; width: 100%; z-index: 150;
      .fc{position: relative; height: 100%; background: #000; z-index: 103;
          .bth{position: absolute; top: 16px; left: 16px;  font-size: 14px; color: #fff; padding-left: 24px; background: url(../images/ldarrow.png) no-repeat center left;}
          img{height: 100%; position: absolute; left: -100%;}
          .ft{position: absolute; bottom: 0; width: 100%; padding: 48px 0 16px 0; background: url(../images/grad.png) repeat-x top;
              .rec{padding-left: 24px; background: url(../images/rec.png) no-repeat center left;  font-size: 18px; color: #fff; margin-left: 16px;}
              h2{ font-size: 28px; line-height: 150%; margin-left: 16px; width: calc(~'100% - 32px');
                 a{color: #fff;}
              }
              .sign{ font-size: 14px; color: #fff; padding: 0 0 0 24px; margin-left: 16px;
                    &.clo{background: url(../images/clo-w.png) no-repeat center left;}
                    &.tags{background: url(../images/tags-w.png) no-repeat center left;}
              }
              .tif{ font-size: 12px; color: #fff; padding: 32px 0 3px 0; margin-left: 16px;}
              h3{ font-size: 18px; margin-left: 16px; width: calc(~'100% - 32px');
                 a{color: #fff;}
              }
          }
      }
}

/*search*/
.search{padding: 16px 0; height: 32px; background: #dadada;
        form{height: 32px; margin: 0 16px; background: #fff; overflow: hidden; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
            .in{width: 85%; height: 32px; background: #fff; color: #727272;  font-size: 14px; padding-left: 8px; float: left; border: none;}
            .btsearch{font-size: 14px; background: #fff url(../images/btsrc.png) no-repeat center; width: 10%; height: 34px; text-indent: -100px; float: right; border: none;}
        }    
}

/*bottom menu*/
.menu2{text-align: center; padding: 24px 0;
      li{display: inline-block;  font-size: 14px; padding: 5px 8px;
         a{color: #fff;}
      }
}

/*footer*/
.footer{padding: 32px 0 60px 0;
    
    .bttop{text-align: center; display: block; margin-bottom: 8px;
           a{padding: 8px 16px; color: #fff; font-size: 14px;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
    }
    span{display: block; text-align: center; color: #404040;  font-size: 14px; padding: 16px 0 8px 0;}
    .internal{text-align: center; padding: 24px 16px 0 16px;
        li{display: inline-block;  font-size: 14px; padding: 0 8px 8px 8px;
           a{color: #404040;}
        }
    }
    .closure{text-align: center; color: #727272;  font-size: 12px; padding: 8px 0; margin-top: 8px; 
             p{padding-bottom: 5px;}
    }
    
}
.link{text-align: center; margin-bottom: 16px;
    li{display: inline-block; margin: 16px 8px 0 8px;}
}
.icon{text-align: center; margin: 16px 0; height: 30px !important;}

.btmor{padding: 8px 0; margin: 16px 0 16px 16px; width: calc(~'100% - 32px'); text-align: center;  font-size: 14px; color: #fff; display: block; float: left; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

/*table*/
.klasemen{.part;
          th{ font-size: 12px; color: #404040; padding: 8px 0; background: #eeeeee;
              &:nth-child(2){text-align: left;}
              &:first-child{padding-left: 16px;}
              &:last-child{padding-right: 16px;}
          }
         tr{
             td{text-align: center;  font-size: 12px; padding: 5px 0;
                 &:nth-child(1){padding-left: 16px;}
                 &:nth-child(2){text-align: left;}
                 &:last-child{padding-right: 16px;}
             }
             &:nth-child(even){background: #fff;}
             &:nth-child(odd){background: #f8f8f8;}
         }
}
.sched{.part;
        th{ font-size: 12px; color: #404040; padding: 8px 0; background: #eeeeee; border-bottom: 1px solid #e6e6e6;}
        tr{
           td{text-align: center;  font-size: 12px; padding: 5px 0; border-bottom: 1px solid #e6e6e6;
                &.fi{padding-left: 16px;}
                &.ls{padding-right: 16px; border-left: 1px solid #e6e6e6;}
                &:nth-child(4){border-bottom: none;}
            } 
           &:nth-child(even){background: #fff;}
           &:nth-child(odd){background: #f8f8f8;}
        }
}

.menu3{border-top: 1px solid #fff; padding: 8px 0;
    ul{text-align: center; width: calc(~'100% - 32px'); margin-left: 16px;
       li{display: inline-block; padding: 3px 8px;
          a{ font-size: 14px; color: #fff;}
       }
    }
}

.plain-menu{border-top: 1px solid #fff;
    ul{text-align: center; padding: 16px;
       li{display: inline-block;  font-size: 16px; padding: 4px 8px;
          a{color: #fff;}
		  &:first-child{color: #fff;}
       }
    }
}
.streaming{background: #e22525 url(../images/streaming.jpg) no-repeat right !important; margin: 16px 0;}
/*THEMES*/
.home{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #e22525;}
    .buttons{border: 1px solid #e22525;}
	.related li .n .title a{color: #e22525;}
}
.news{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #0a55b3;}
    .buttons{border: 1px solid #0a55b3;}
	.related li .n .title a{color: #0a55b3;}
}
.internasional{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #0f81ad;}
    .buttons{border: 1px solid #0f81ad;}
	.related li .n .title a{color: #0f81ad;}
}
.ekonomi{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #12a895;}
    .buttons{border: 1px solid #12a895;}
	.related li .n .title a{color: #12a895;}
}
.bola{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #0c8734;}
    .buttons{border: 1px solid #0c8734;}
	.related li .n .title a{color: #0c8734;}
}
.olahraga{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #b90606;}
    .buttons{border: 1px solid #b90606;}
	.related li .n .title a{color: #b90606;}
}
.teknologi{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #de5a1e;}
    .buttons{border: 1px solid #de5a1e;}
	.related li .n .title a{color: #de5a1e;}
}
.otomotif{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #3a3e68;}
    .buttons{border: 1px solid #3a3e68;}
	.related li .n .title a{color: #3a3e68;}
}
.hiburan{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #ab438a;}
    .buttons{border: 1px solid #ab438a;}
	.related li .n .title a{color: #ab438a;}
}
.rona{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #91ac00;}
    .buttons{border: 1px solid #91ac00;}
	.related li .n .title a{color: #91ac00;}
}
.video{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul, .list-program li{background: #ff6600;}
    .buttons{border: 1px solid #ff6600;}
}
.foto{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #044d82;}
    .buttons{border: 1px solid #044d82;}
}
.jatim{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #de1f27;}
    .buttons{border: 1px solid #de1f27;}
}
.jabar{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #1d95bc;}
    .buttons{border: 1px solid #1d95bc;}
}
.jateng{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #419a33;}
    .buttons{border: 1px solid #419a33;}
}
.ramadan{
    .segmen{background: #cb8919 url(../images/bg-artikel.jpg) no-repeat right;}
    .menu, .menu2, .menu3, .bttop a, .btmor, .buttons{background: #cb8919;}
    .buttons{border: 1px solid #cb8919;}
}
.telusur{
    .menu, .menu2, .menu3, .segmen, .bttop a, .btmor, .buttons, .plain-menu ul{background: #0a55b3;}
    .buttons{border: 1px solid #0a55b3;}
}



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

}

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

}

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

}

.list-program{padding: 8px; width: calc(~'100% - 16px');
    li{width: calc(~'100% - 16px'); margin: 1px 8px; float: left; text-align: center;
       a{width: calc(~'100% - 16px'); color: #fff;  font-size: 14px; padding: 8px; display: block;}
    }
}

/*SCORE TECHNO*/
.placement{width: 92%; float: left; padding: 4%; margin-bottom: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.title-pos{float: left; width: 100%; border-bottom: 2px solid #e05c26;}
.title-pos .title{float: right; width: 75%; padding: 20px 0;}
.title-pos .title h3{ font-size: 18px !important; color: #585858 !important;}
.title-pos .round-pos{float: left; width: 50px; padding: 12px 0; border: 5px solid #e05c26; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.title-pos .round-pos h3{margin-left: 0 !important; font-size: 22px !important; font-weight: bold !important; color: #e05c26 !important; text-align: center !important;}
.title-pos .procentase{display: none;}
.box-bottom{float: left; width: 100%; background: #fff;}
.box-bottom .positif{text-align: left; padding: 40px 0 10px 10%; border-bottom: 1px solid #ccc; background: url(../images/pos.jpg) left 0  no-repeat;}
.box-bottom li{color: #585858; padding: 5px 0 5px 5%; width: 90%; list-style: square;}
.box-bottom .negatif{text-align: left; padding: 40px 0 10px 10%; border-bottom: 1px solid #ccc; background: url(../images/neg.jpg) left 0 no-repeat;}
.procedure{text-align: center; width: 100%; float: left; padding-top: 10px;}
.procedure a{color: #e05c26;}