html {font-family:'Roboto', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:16px; line-height:normal; -webkit-font-smoothing: antialiased;  color:#444;margin:0 auto;}
div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
article,aside,details,time,caption,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; /* 1 */vertical-align: baseline; /* 2 */}
audio:not([controls]) {display: none;height: 0;}
[hidden],template {display: none;} 
abbr[title] {border-bottom: 1px dotted;}
b,strong {font-weight: bold;}
dfn {font-style: italic;}
mark {background: #ff0;color: #111;}
small {font-size: 80%; line-height:80%;}
sub,sup {font-size:60%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;left:1px;}
sub {bottom: -0.25em;}
img {border: 0; display:block;}
/*svg:not(:root) {overflow: hidden;}*/
figure {margin:0;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code,kbd,pre,samp {font-size: 1em;}
button,input,optgroup,select,textarea {color: inherit; /* 1 */font: inherit; /* 2 */margin: 0; /* 3 */}
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {-webkit-appearance: button; /* 2 */cursor: pointer; /* 3 */}
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */ }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0; /* 1 */padding: 0; /* 2 */}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td,th {padding: 0;}
::placeholder { color: #cecece;}
body::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 0 0 0;}
body::-webkit-scrollbar-track { border-radius:0 0 0 0;}
body::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0;}
body::-webkit-scrollbar:horizontal {height:6px;}
body::-webkit-scrollbar:vertical {width:6px;}

.notif-box::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 0 0 0;}
.notif-box::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.notif-box::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0;}
.notif-box::-webkit-scrollbar:horizontal {height:6px;}
.notif-box::-webkit-scrollbar:vertical {width:6px;}
/*base*/
.videoframe{position:relative;padding-bottom:56.25%;padding-top:25px;height:0; margin:0;}.videoframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.fade{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
@-webkit-keyframes come { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes come { from { opacity:0; } to { opacity:1; } }
@keyframes come { from { opacity:0; } to { opacity:1; } }
.fadeIn {	opacity:0;	-webkit-animation:come ease-in 1;	-moz-animation:come ease-in 1;	animation:come ease-in 1;	-webkit-animation-fill-mode:forwards;	-moz-animation-fill-mode:forwards;	animation-fill-mode:forwards;-webkit-animation-duration:0.3s;	-moz-animation-duration:0.3s;	animation-duration:0.3s;}
a {color: #444;text-decoration: none;}
a:hover, a:focus {color:rgba(0,0,0,0.5);}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.padding-no {padding:0 !important;}.padding-ss{padding:5px !important;}.padding-xs{padding:10px !important;}.padding-sm{padding:15px !important;}.padding-top-no {padding-top:0 !important;}.padding-top-ss {padding-top:5px !important;}.padding-top-xs {padding-top:10px !important;}.padding-top-sm {padding-top:15px !important;}.padding-top-lg {padding-top:45px !important;}.padding-top{padding-top:30px !important;}.padding-bottom-no {padding-bottom:0 !important;}.padding-bottom-ss {padding-bottom:5px !important;}.padding-bottom-xs {padding-bottom:10px !important;}.padding-bottom-sm {padding-bottom: 15px !important;}.padding-bottom-lg {padding-bottom:45px !important;}.padding-bottom {padding-bottom:30px !important;}.padding-left-no {padding-left:0 !important;}.padding-left-ss {padding-left:5px !important;}.padding-left-xs{padding-left:10px !important;}.padding-left-sm {padding-left:15px !important;}.padding-left-lg {padding-left:45px !important;}.padding-left {padding-left:30px !important;}.padding-right-no {padding-right: 0 !important;}.padding-right-ss {padding-right:5px !important;}.padding-right-xs {padding-right:10px !important;}.padding-right-sm {padding-right:15px !important;}.padding-right-lg {padding-right:45px !important;}.padding-right {padding-right:30px !important;}
.margin-no {margin:0 !important;}.margin-xs{margin:5px 15px;}.margin-sm{margin:10px 30px;}.margin-top-no {margin-top:0 !important;}.margin-top-ss {margin-top:5px !important;}.margin-top-xs {margin-top:10px !important;}.margin-top-sm {margin-top:15px !important;}.margin-top-lg {margin-top:45px !important;}.margin-top {margin-top:30px !important;}.margin-bottom-no {margin-bottom:0 !important;}.margin-bottom-ss {margin-bottom:5px !important;}.margin-bottom-xs {margin-bottom:10px !important;}.margin-bottom-sm {margin-bottom:15px !important;}.margin-bottom-lg {margin-bottom:45px !important;}.margin-bottom {margin-bottom:30px !important;}.margin-left-no {margin-left:0 !important;}.margin-left-ss {margin-left:5px !important;}.margin-left-xs {margin-left:10px !important;}.margin-left-sm {margin-left:15px !important;}.margin-left-lg {margin-left:45px !important;}.margin-left {margin-left:30px !important;}.margin-right-no {margin-right:0 !important;}.margin-right-ss {margin-right:5px !important;}.margin-right-xs {margin-right:10px !important;}.margin-right-sm {margin-right:15px !important;}.margin-right-lg {margin-right:45px !important;}.margin-right {margin-right:30px !important;}.bg-twitter{background:#77cbef !important;}.bg-facebook{background:#537abd !important;}.bg-google{background:#ea5d4b !important;}.bg-linkedin{background:#1384c8 !important;}.bg-daily{background:#0064dc !important;}.bg-youtube{background:#c8302a !important;}.bg-instagram{background:#444 !important;}.bg-whatsapp{background:#2ab200 !important;}.bg-line{background:#4ecd00 !important;}.bg-tumblr{background:#395976 !important;}.cl-twitter{color:#77cbef !important;}.cl-facebook{color:#537abd !important;}.cl-google{color:#ea5d4b !important;}.cl-linkedin{color:#1384c8 !important;}.cl-daily{color:#0064dc !important;}.cl-youtube{color:#c8302a !important;}.cl-instagram{color:#444 !important;}.cl-whatsapp{color:#2ab200 !important;}.bg-line{color:#4ecd00 !important;}.cl-tumblr{color:#395976 !important;}
*, *::after, *::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.t-center{text-align:center !important;}.t-right{text-align:right !important;}.t-left{text-align:left !important;}
.fleft {float: left !important;} .fright {float: right !important;}
.hidden{opacity: 0;}.visible{opacity: 1;}.left{float:left !important;}.right{float:right !important;}
.glower {animation: glow .5s infinite alternate;}
@-webkit-keyframes glow {to {text-shadow: 1px 1px 20px rgba(0,255,255,0.5);}}
/*color*/
.cl-white{color:#fff !important;}
.cl-blue{color:#1a73e8 !important;}
.cl-blue2{color:#3c5e80 !important;}
.cl-gray3{color:#606060 !important;}
.cl-black2{color:#444 !important;}
.cl-black{color:#000 !important;}
.boxshadow{box-shadow: 1px 1px 6px rgba(0,0,0,0.1);}
/*bg*/
.cl-black{color:#444 !important;}
.cl-black2{color:#444 !important;}
.cl-ccc{color:#ccc !important;}
.cl-aaa{color:#b4c2cc !important;}
.cl-white{color:#fff !important;}
.cl-red{color:#e74c4c !important;}
.cl-green{color:#b4c2cc !important;}
.cl-blue{color:#1a73e8 !important;}
.bg-white{background:#fff !important;}
.cl-soft{color:#b4c2cc !important;}
.bg-red{background:#e74c4c !important;}
.cl-gold{color:#e7b652 !important;}
.cl-gold2{color:#f8bf4c !important;}
.cl-hijau{color:#74c14f !important;}
.cl-soft-yellow{color:#efd961 !important;}
.cl-soft-blue{color:#94b7fe !important;}
.cl-soft-purple{color:#b39ee7 !important;}
.cl-soft-pink{color:#ffa7d1 !important;}
.bg-gold{background:#e7b652 !important;}
.bg-gold2{background:#f8bf4c !important;}
.bg-blue{background:#1a73e8 !important;}
.black, .bg-black{background:#444 !important;}
.bg-black2{background:#444 !important;}
/* .bg-green{background:#cecece !important;} */
.bg-green{background:#e7b652 !important;}
.bg-soft{background:#C1CDE1 !important;}
.bg-aaa{background:#cecece !important;}
.bg-img-gold{background:#e7b652 url('../images/bg-gold.jpg') top center no-repeat; background-size:cover;}
.bg-img-black{background:#444 url('../images/bg-black.jpg') top center no-repeat; background-size:cover;}
.bg-hijau-soft{background:#eafce1 !important;}

p{font-size:16px; line-height:20px; margin:10px 0 10px 0;}
/*body*/
body{margin:0 auto; padding:0; display:block; background:#fff; /*#f0f1fc;*/ min-height: 100vh;}
.box-contact a{position:fixed; bottom:5px; right:30px; padding:10px 15px; border-radius:4px; background:rgba(0,0,0,0.5); height:40px; z-index: 3;border:1px solid #dedede; font-size:12px; font-weight: 600; color:#fff; opacity:0.4; text-transform: uppercase;}
.box-contact a:hover{opacity:1;background:#111; color:#fff;}
.overflow-hidden {overflow: hidden;}
.container{margin:0 auto; max-width:1200px; padding:0 15px; display:block; min-height:20px;}
.container-news{margin:0 auto; max-width:920px; padding:0 15px; display:block; min-height:20px;}
.container.full{max-width:100%;width: auto;}
.container.small{max-width:1020px;}
.container.smaller{max-width:800px;}
.container-col{margin-left:-15px; margin-right:-15px;}
.container.video-detail{padding:15px;}
.col80{padding:0 15px; width:80%; float:left;}
.col70{padding:0 15px; width:70%; float:left;}
.col60{padding:0 15px; width:60%; float:left;}
.col50{padding:0 15px; width:50%; float:left;}
.col55{padding:0 15px; width:55%; float:left;}
.col45{padding:0 15px; width:45%; float:left;}
.col40{padding:0 15px; width:40%; float:left;}
.col33{padding:0 15px; width:33.333%; float:left;}
.col30{padding:0 15px; width:30%; float:left;}
.col25{padding:0 15px; width:25%; float:left;}
.col20{padding:0 15px; width:20%; float:left;}
.col15{padding:0 15px; width:15%; float:left;}
.col10{padding:0 15px; width:10%; float:left;}
.col50main{padding:0; width:100%;padding-right:40%; position:relative; min-height:319px; height:100%;}
.col50main .col50right{width:40%; position:absolute; right:15px; bottom:0; top:0; z-index:2;}
.col50right .topright{height:50%; position:absolute; top:0; right:0; z-index:2; width:50%;}
.col50right .topleft{height:50%; position:absolute; top:0; left:0; z-index:2; width:50%;}
.col50right .botright{height:50%; position:absolute; bottom:0; left:0; right:0;z-index:2;}
.botright .single-card{border-radius:4px; width:auto; overflow:hidden; background:#fff;position:absolute; top:10px; bottom:0; left:20px; right:0; z-index:2; box-shadow:1px 1px 6px rgba(0,0,0,0.1);padding:15px; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.topleft .left-card{border-radius:4px; overflow:hidden; background:#fff;position:absolute; top:0; bottom:10px; left:20px; right:0; z-index:2; box-shadow:1px 1px 6px rgba(0,0,0,0.1);padding:15px;display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.topright .right-card{border-radius:4px; overflow:hidden; background:#fff;position:absolute; top:0; bottom:10px; left:20px; right:0; z-index:2; box-shadow:1px 1px 6px rgba(0,0,0,0.1);padding:15px;display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.scrollup { position: fixed; width:40px; height:40px; z-index:5; bottom:15px; right:15px; cursor: pointer; color:#fff; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2); border-radius:20px;}
.scrollup:hover{ background:rgba(0,0,0,0.9);}
a.float-btn { position: fixed; min-width:40px; width:auto; height:40px; z-index:5; bottom:15px; right:15px; cursor: pointer; color:#fff; display:flex; align-items:center; justify-content:center; padding:0 20px; background:#e74c4c; border-radius:20px;opacity:1;transition: all 0.3s ease-in-out;animation: fadeLoop 0.5s infinite alternate;}
 a.float-btn:hover{transition: all 0.3s ease-in-out; opacity:0.9;animation:none;}
 @keyframes fadeLoop { 
  from { opacity: 0; } 
}
/* float zoom */
a.float-btn-zoom { position: fixed; min-width:40px; width:auto; height:40px; z-index:5; bottom:15px; right:15px; cursor: pointer; color:#fff; display:flex; align-items:center; justify-content:center; padding:0 20px; background:#1244b4; border-radius:20px;opacity:1;transition: all 0.3s ease-in-out;animation: fadeLoop 0.5s infinite alternate;}
 a.float-btn-zoom:hover{transition: all 0.3s ease-in-out; opacity:0.9;animation:none;}
 @keyframes fadeLoop { 
  from { opacity: 0; } 
}
.block-all{width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.90); z-index:33; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; display: none;}
.block-all2{width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.90); z-index:33; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; display: none;}
.box-anggota {
    height:70vh;
    max-width: 800px;
    margin: 0 auto;
    padding:0;
    background: 0 0;
    position: fixed;
    z-index: 35;
    left:0;
    right:0;
    bottom:15vh;
	top:15vh;
    display:flex; align-items:center; justify-content:center;
}
.block-survey{width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.90); z-index:33; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; display: none;}
.block-survey-business{width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.90); z-index:33; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; display: none;}
.box-anggota .box-anggota-in{overflow-y:scroll; height:70vh; width:100%; background:#fff; padding:15px; border-radius:4px;}
.box-anggota-in::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.box-anggota-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-anggota-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-anggota-in::-webkit-scrollbar:horizontal {height:6px;}
.box-anggota-in::-webkit-scrollbar:vertical {width:6px;}
.box-search {
    height: 80px;
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
    background: 0 0;
    position: relative;
    z-index: 35;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50%;
    margin-top: -50px
}
.box-search input.search {
    width: 100%;
    height: 50px;
    padding: 10px 60px 10px 15px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: 1px 1px 6px 1px rgba(48, 51, 130, .1)
}

.box-search button.search-btn {
    width: 50px;
    height: 50px;
    border: 1px solid transparent;
    position: absolute;
    right: 15px;
    top: 15px;
    background: 0 0
}

.box-small-search {
    float: left;
    width: 600px
}

.small-search {
    position: relative;
    height: 45px;
    width: 100%;
    margin: 0 auto;
    padding: 5px 15px;
    background: 0 0
}

.small-search input.small-search {
    width: 100%;
    height: 35px;
    padding: 3px 45px 3px 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px
}

.small-search button.small-search-btn {
    width: 45px;
    height: 45px;
    border: 1px solid transparent;
    position: absolute;
    right: 15px;
    top: 0;
    background: 0 0
}
.mini-search{height:50px; width:auto; overflow: hidden; padding:10px 0; position:relative;}
.mini-search .mini-input{height:30px; border-radius:4px; border:1px solid #cdcdcd; width:200px; padding:5px 30px 5px 15px; font-size:14px; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.1); background:#fff;}
.mini-search .mini-button{background:transparent; width:30px; height:30px; display: flex;align-items: center; justify-content: center; border:0; position:absolute; top:10px; right: 0; z-index: 2; color:#3c5e80;}

/*cmd*/
.hide_desktop{display:none; visibility:hidden;}
.dblock{display:block;}
.centering{display: flex !important;align-items: center !important;justify-content: center !important;}
.centering.column{flex-direction:column;}
.centering.row{flex-direction:row;}
.clear{clear:both;}
.overflow{overflow:hidden;}
/*header*/
header {height:60px;width:100%; background:#fff/* url('../images/bg-hijau.jpg') top center no-repeat*/; background-size:cover; margin:0 auto; z-index:3; position:fixed;box-shadow:1px 1px 9px rgba(0,0,0,0.1);}
header .header-top{height:60px; width:100%; display:block;}
header .header-top .left-head{width:15%; float:left;}
header .header-top .center-head{width:50%; float:left;}
header .header-top .right-head{width:85%; float:left;}
header .header-bar{height:30px; width:100%; display:block;}
header .header-inside2{padding:0 15px 0 15px; width:100%; max-width:1200px; margin:0 auto; height:25px;}
header .header-inside{padding:0 15px; width:100%; max-width:1200px; margin:0 auto; height:60px; display:flex; align-items:center;}
h1.logo{padding:0;height:60px;display:flex; align-items:center; justify-content:flex-start; position:relative;}
h1.logo img{width:auto; height:60px; position:relative; z-index:3;}

nav.menu {margin:0 auto; padding:0; height:60px;width:auto;font-size:12px; font-weight:400;text-transform:uppercase;}
nav.menu ul li > a:after { content:  ' \f107'; font-family: 'FontAwesome'; font-size:12px; margin-left:10px; top:0; position:relative;}
nav.menu ul li > a:only-child:after { content: ''; margin:0;}
nav.menu ul ul {display: none;}
nav.menu ul li:hover > ul {display: block;}
nav.menu ul {list-style:none; list-style-position:inside; margin:0 auto; padding:0; height:60px; max-width:1200px;position: relative;display:flex; align-items:center; justify-content:flex-end; width:100%;}
nav.menu ul:after {content: ""; clear: both; display: block;}
nav.menu ul li {float: left;}
nav.menu ul li:hover{background:#fff;}
nav.menu ul li:hover a {color:#b4c2cc;}
nav.menu ul li a {color:#444;font-weight:500;position:relative;padding:0 10px; height:60px;display:flex; align-items:center; justify-content:center;}
nav.menu ul li.nologin a .warning{display:none;}
nav.menu ul li.nologin:hover a .warning{display:block;position:absolute;top:100%; width:150px; left:auto; right:auto; z-index:2; padding:15px; background:#e74c4c; color:#fff; text-align:center; margin:auto; z-index:5; text-transform:none !important; font-size:12px;}
nav.menu ul li.nologin:hover a .warning:before {content:'';width:20px;position:absolute; left:0; right:0; margin:0 auto; top:-10px;
height: 0;border-style: solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #e74c4c transparent;}

nav.menu ul li a.search {border:1px solid #444; padding:5px 8px; border-radius:4px; color:#444; height:30px;}
nav.menu ul li a.daftar{border:1px solid #444; padding:5px 8px; border-radius:4px; color:#444; margin-right:5px;font-size:12px; height:30px;}
nav.menu ul li a.login {border:1px solid #444; padding:5px 8px; border-radius:4px; color:#444; margin-left:30px; margin-right:5px; font-size:12px; height:30px;}
nav.menu ul li a.selected, nav.menu ul ul li a.selected{color:#e74c4c;}
nav.menu ul ul, nav.menu ul ul.submenus{background: #fff; border-radius: 0px; padding: 0;position: absolute; top: 100%; left:0; right:0; z-index:4; width:100%;overflow:hidden; height:auto; box-shadow:1px 1px 3px rgba(0,0,0,0.1);}
nav.menu ul ul li {float: none; width:184px; color:#444;}
nav.menu ul ul li a {padding:10px 15px;color: #fff;background:#fff !important;justify-content:flex-start;flex-direction:row;height:auto;text-transform:none; font-weight:500; font-size:12px;}	
nav.menu ul ul li a:hover {color:#b4c2cc !important;}
nav.menu ul ul ul {position: absolute; left: 100%; top:0;}
nav.menu ul li.search2:hover, nav.menu ul li.notif:hover {background:none !important;}
nav.menu ul li.daftar2:hover{background:none !important;}
nav.menu ul li.login2:hover{background:none !important;}
nav.menu ul li.login2 a span.username{word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 16px;
    max-width:90px; text-transform:none;}
nav.menu ul li a.search:hover {border:1px solid #cecece; color:#b4c2cc;}
nav.menu ul ul.submenus li{width:25%; float:left; background:#fff;}
nav.menu ul ul.submenus li .box-sub{display:block; padding:15px;}
nav.menu ul ul.submenus li .box-sub h4.title{font-size:14px; line-height:16px; margin:0 0  10px 0; text-transform:uppercase;}
nav.menu ul ul.submenus li .box-sub p.title{margin:0;position:relative;}
nav.menu ul ul.submenus li .box-sub p.title a{color:#444; background:none !important; padding:5px 0; margin:0; font-size:14px; font-weight:400;position:relative;}
nav.menu ul ul.submenus li .box-sub p.title a:hover{color:#b4c2cc !important;}
nav.menu ul ul.submenus li .box-sub h4.title a, nav.menu ul ul.submenus li .box-sub h4.title a:hover{background:none !important;text-transform:uppercase; padding:0; margin:0 0 10px 0; font-weight:500;font-size:14px; line-height:16px; color:#444 !important;}
nav.menu ul li:hover a.login,nav.menu ul li a.login:hover{background:#fff !important;}
nav.menu ul li.login2{position:relative;}
nav.menu ul ul.submenus.single{left:inherit; width:160px;border-radius:0 0 6px 6px; left:0;}
nav.menu ul ul.submenus.single li{width:100%; float:none; background:#fff;}
nav.menu ul ul.submenus.single li a{color:#444;}
nav.menu ul li.notif{position:relative;}
nav.menu ul li.notif > a:after{display:none;}
nav.menu ul li.notif .number{min-width:20px; height:20px; padding:0 3px; display:flex; align-items:center; justify-content:center; font-size:10px; background:#e74c4c; color:#fff; position:absolute; top:-5px; right:-5px; border-radius:10px;}
nav.menu ul li.notif .notif-box{width:300px; height:auto; max-height:85vh; overflow-y:auto; border-radius:0 0 4px 4px; position:absolute; top:45px; right:0; background:#fff; border:1px solid #ddd; z-index:5;}
nav.menu ul li.notif .notif-box a{height:auto; padding:0;}
p.title a .warning2{display:none;}
nav.menu ul ul.submenus li .box-sub p.title a:hover .warning2{display:block;position:absolute;bottom:100%; width:150px; left:auto; right:auto;padding:5px; background:#e74c4c !important; color:#fff; text-align:center; margin:auto; z-index:5; font-size:12px;}
nav.menu ul ul.submenus li .box-sub p.title a:hover .warning2:before {content:'';width:20px;position:absolute; left:10px;  margin:0 auto; bottom:-10px; height: 0;border-style: solid;border-width:  10px 10px 0 10px;border-color:#e74c4c transparent transparent  transparent;}
/*nav right*/
nav.menu.right{float:right; background:#e74c4c ; border:none; height:25px; border-radius:0;}
nav.menu.right ul, nav.menu.right ul li a{height:25px;}
nav.menu.right ul li{margin:0 3px;}
nav.menu.right ul li:last-child{margin-right:0;}
nav.menu.right ul li a{color:#fff; font-size:12px;}
nav.menu.right ul li a.selected, nav.menu.right ul ul li a.selected{background:transparent;height:25px; border-bottom:none;}
nav.menu.right ul li:hover{background:rgba(0,0,0,0.5);}
nav.menu.right ul li:hover a {color:#e7b652; background:rgba(0,0,0,0.5); border-color:#e7b652;}
nav.menu.right ul ul.submenus.single li{width:100%; float:none; background:#cecece;}

/*nav set*/
nav.menu.set{float:right; background:#fff ; border:none; height:48px; border-radius:0;}
nav.menu.set ul, nav.menu.set ul li a{height:48px;}
nav.menu.set ul li{margin:0 3px;}
nav.menu.set ul li:last-child{margin-right:0;}
nav.menu.set ul li a{color:#333; font-size:14px;}
nav.menu.set ul li a.selected, nav.menu.set ul ul li a.selected{background:transparent;height:48px; border-bottom:none;}
nav.menu.set ul li:hover{background:#fff;}
nav.menu.set ul li:hover a {color:#cecece; background:transparent; border-color:#cecece;}
nav.menu.set ul ul.submenus.single{border-radius:0;}
nav.menu.set ul ul.submenus.single li{width:100%; float:none; background:#fff; border:1px solid #333; border-radius:4px;}
nav.menu.set ul ul.submenus li .box-sub{padding:0;}
nav.menu.set ul ul, nav.menu.set ul ul.submenus.single{box-shadow:none;}
nav.menu.set ul ul.submenus.single li .box-sub p.title a{height:auto; padding:8px 10px; border-top:1px solid #333;}
nav.menu.set ul ul.submenus.single li .box-sub p:first-child.title a{border-top:none;}
/*cd container*/
.box-hl{width:100%; overflow:hidden; padding-right:30%; position:relative;}
.box-hl .top-right{width:30%; padding:15px 15px 7.5px 0; position:absolute; top:0; right:0; bottom:50%; height:50%;z-index:3;}
.box-hl .top-right .web-login{padding:15px; background:#fff; border:1px solid #cecece; border-radius:4px; position:absolute; top:15px; bottom:7.5px; right:15px; left:0;display: flex;flex-direction: column;justify-content: center;}
.box-hl .bottom-right{width:30%; padding:7.5px 15px 15px 0; position:absolute; top:50%; right:0; bottom:0; height:50%;z-index:3;}
.box-hl .bottom-right .banner-box{padding:15px; background: url('https://cdn.linkumkm.id/library/1/7/4/0/9/17409_840x576.jpg') top center; border-radius:4px; position:absolute; top:7.5px; bottom:15px; right:15px; left:0; overflow:hidden;}
.box-hl .top-right .banner-box{padding:15px; background: url('https://cdn.linkumkm.id/library/1/7/5/8/1/17581_840x576.jpg') top center; border-radius:4px; position:absolute; top:7.5px; top:15px; bottom:10px; right:15px; left:0; overflow:hidden;}
.box-hl .bottom-right .banner-box .banner-boxin, .box-hl .top-right .banner-box .banner-boxin{position:absolute; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:15px;}
.box-hl .bottom-right .banner-box .banner-boxin h2.title, .box-hl .top-right .banner-box .banner-boxin h2.title{font-size:24px; line-height:26px; margin:0 0 15px 0;}
.cd-main-content {min-height: 100%;position: relative;z-index: 2;padding-top:60px; -webkit-transition-duration: 0.4s;    -moz-transition-duration: 0.4s;transition-duration: 0.4s;background:transparent;}
.cd-main-content.w-banner {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  max-width: 100%;
}
.cd-main-content.kanal-konsultasi{padding-bottom:80px;height:100vh; display:flex; align-items:center; justify-content:center;}
/*chat*/
.barchat{position: fixed;bottom: 0;left: 0;z-index: 30;width: 100%;background: #fff;height:80px;margin: 0;padding:15px;box-shadow: 2px 1px 2px rgba(0,0,0,0.2);}
.textarea-chat{min-height:10px !important; height:50px;overflow:auto;}
.chatbox{width:100%; max-width:800px; margin:0 auto; height:50px; padding:0 60px; position:relative;}
.chatbox .send-btn{width:50px; height:50px; position:absolute; top:0; right:0; z-index:2; border:1px solid #C1CDE1; display:flex; align-items:center; justify-content:center; border-radius:4px; background:#fff;}
.chatbox .input-field{margin:0;}
.chatbox .file-btn{width:50px; height:50px;position:absolute; top:0; left:0; z-index:2; background:transparent; border:none; display:flex; align-items:center; justify-content:center; border-radius:4px;}
.chatbox .file-btn .upload{width:50px; height:50px;background:#fff; display:flex; align-items:center; justify-content:center; border-radius:4px;border:1px solid #C1CDE1;}
.chatbox .file-btn .upload i{font-size:16px;color:#444; line-height:normal;}
.chatbox .file-btn input[type=file]{position: absolute;top: 0;right: 0;left: 0;bottom: 0;height:50px;width:50px;margin: 0;padding: 0;font-size:27px;cursor: pointer;opacity:1;filter: alpha(opacity=0); z-index:4;}
.chatbox .file-btn .file-path-wrapper{text-align:left;background: #fff;padding:0;width:50px;position:absolute;height:50px; overflow:hidden; border-radius:4px; opacity:0; z-index:1; left:0; top:0;}
.chatbox .file-btn input.file-path {width:50px;height:50px;border: none;}
/*chat*/
.cd-main-content.kanal-konsultasi .all-box-chat{position:absolute; top:115px; bottom:95px; padding:15px; border-radius:4px;border: 1px solid #C1CDE1; height:auto; overflow-y:scroll; margin:0 auto; max-width:800px; background:#f8f8f8;}
.all-box-chat::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.all-box-chat::-webkit-scrollbar-track { border-radius:0 6px 6px 0;}
.all-box-chat::-webkit-scrollbar-thumb {background-color:#555555; border-radius:4px;}
.all-box-chat::-webkit-scrollbar:horizontal {height:6px;}
.all-box-chat::-webkit-scrollbar:vertical {width:6px;}
.all-box-chat.video-chat{padding:15px; border-radius:4px;border: 1px solid #ddd; height:60vh; overflow-y:scroll; margin:0 auto; max-width:800px;}
.barchat.video-chat{position:relative; bottom:0; left:0; right:0; z-index:2; box-shadow:none; padding:15px 0;}
.box-chat{display:block; position:relative; min-height:48px; padding:0; margin-bottom:5px; overflow:hidden;}
.text-chat{border-radius:4px; border:1px solid #C1CDE1; background:#fff; padding:8px; position:relative; font-size:16px; line-height:18px; margin:0 0 6px 0; min-height:42px;}
.text-chat p.left-text{margin:3px 0 20px 0;word-break:break-word;overflow: hidden;}
.text-chat.left-chat{margin-left:60px; position:relative; border-radius:0 6px 6px 6px;}
.text-chat.left-chat:before{content:''; position:absolute; top:-1px; left:-10px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #C1CDE1 transparent transparent;}
.text-chat.left-chat:after{content:''; position:absolute; top:0; left:-7px; z-index:2; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #fff transparent transparent;}
.text-chat .date{position:absolute; z-index:2; bottom:8px; right:8px; font-size:12px; color:#999;}
.text-chat .username{font-size:14px; font-weight:500;}
.text-chat.right-chat{margin-right:60px; position:relative; border-radius:6px 0 6px 6px; background:rgba(235,255,238,1.00);}
.text-chat.right-chat:before{content:''; position:absolute; top:-1px; right:-10px; width: 0; height: 0; border-style: solid; border-width:10px 10px 0 0; border-color:#C1CDE1 transparent transparent transparent ;}
.text-chat.right-chat:after{content:''; position:absolute; top:0; right:-7px; z-index:2; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 0; border-color:rgba(235,255,238,1.00) transparent transparent transparent ;}
.date-chat{display:inline-block; border-radius:4px; padding:4px 8px; background:#fff; border:1px solid #444 ; font-size:11px; line-height:13px; margin:5px 0 10px 0; color:#444 ;}
/*avatar*/
.avatar {background-color: rgba(154, 154, 154, 0.18);border-radius: 50%;color: inherit;display:inline-flex; align-items:center; justify-content:center;height: 40px;line-height: 40px;text-align: center;width: 40px;}.avatar[href]:focus, .avatar[href]:hover {color: inherit;text-decoration: none;}.avatar img {border-radius: 50%;height: 100%;vertical-align: top;width: 100%;}.avatar-lg {height: 80px;line-height: 80px;width: 80px;}.avatar-sm{height: 32px;line-height: 32px;width: 32px;}.avatar-xs {font-size: 12px;height: 20px;line-height: 28px;width: 20px;}.avatar-inline {display: inline-flex !important;}.avatar-chat{height: 48px;line-height: 48px;width: 48px;}.avatar-small {font-size: 12px;height: 24px;line-height: 32px;width: 24px; text-align:center;}
.avatar-sm {overflow:hidden; display:flex; align-items:center; justify-content:center;}
.avatar-sm img{height:32px;width:auto;}
/*element*/
.element-box button{background:transparent; border:none;}
label.small{font-size:12px; padding-bottom:5px; display:inline-flex;}
.element-box{margin:0; position:relative; height:auto;}
.element-box .icons{width:40px; height:40px; position:absolute; left:0; top:0; z-index: 2;border-right: 1px solid #cecece; display: flex; align-items:center; justify-content: center;}
.element-box .icons.small{width:30px; height:30px;}
.element-box .icons.right{right:0; left:inherit; border-right:none;border-left: 1px solid #cecece;}
.element-box input.element-input{width:100%; height:40px; padding:10px 10px 10px 50px; background:#fff; border:1px solid #cecece;font-size:14px;}
.element-box input.element-input-main{width:100%; height:40px; padding:10px 10px 10px 50px; background:#73ee410f; border:1px solid #10cc35;font-size:14px;}
.element-box textarea.element-area{width:100%; min-height:120px; padding:10px 10px 10px 50px; background:#fff; border:1px solid #cecece;font-size:14px;}
.element-box textarea.element-area-main{width:100%; min-height:120px; padding:10px 10px 10px 50px; background:#73ee410f; border:1px solid #10cc35;font-size:14px;}
.element-box.overinput input.element-input{padding-right:50px;}
.element-box.overinput input.element-input-main{padding-right:50px;}
.element-box.overinput button.sign-btn{height:40px; width:40px;border:1px solid #cecece;}
.element-box .input-field{margin:0;}
.element-box .file-field{position:relative;}
.element-box .file-field .btn.upload{background:#cecece;border-radius:4px 0px 0 4px !important;cursor: pointer;display: inline-flex;align-items:center;justify-content:center;height:40px;width:40px; float:none; padding:0; position:absolute; top:0; left:0; z-index:2;}
.element-box .file-field .btn.upload i{font-size:16px;color:#444; line-height:normal;}
.element-box .file-field input[type=file]{position: absolute;top: 0;right: 0;left: 0;bottom: 0;width: 100%;margin: 0;    padding: 0;font-size: 20px;cursor: pointer;opacity:0;filter: alpha(opacity=0); z-index:3;}
.element-box .file-field .file-path-wrapper{text-align:left;background: #fff;padding:0;width: 100%;position: relative;border:1px solid #cecece;height:40px; overflow:hidden; border-radius:4px;}
.element-box .file-field input.file-path {width: 100%;height: 40px;border: none;padding-left: 50px;font-size:16px;}
button.sign-btn{width:100%;height:50px;background:#1a73e8; color:#fff;transition: all 0.3s ease-in-out;opacity:1; margin-top:15px;border:none;}
.element-box .file-field .file-path-wrapper label{width: 100%;    height: 40px;    display: flex;    padding-left: 50px;    align-items: center;    justify-content: flex-start;}
.radius6{border-radius:4px !important;}
.element-box.overinput .sign-btn{position:absolute; right:0; top:0; width:30px; z-index:1;margin-top:0;}
button.sign-btn.minimalis{width:auto; padding:0 30px;}
button.sign-btn.medium{height:40px;}
button.sign-btn.small{height:30px;}
button.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.9; background:#1a73e8;}
a.sign-btn{width:100%; height:50px; background:#1a73e8; color:#fff;transition: all 0.3s ease-in-out;opacity:1; margin-top:15px; display:flex; align-items:center; justify-content: center; border:none; border-radius:4px;}
a.sign-btn.minimalis{width:auto; padding:0 30px; display: inline-flex; margin:0;}
a.sign-btn.medium{height:40px; font-size:14px; font-weight: 500;}
a.sign-btn.small{height:36px; font-size:14px; font-weight: 500; padding:0 15px;}
a.sign-btn.line{background:#fff; border:1px solid #e7b652; color:#e7b652;}
a.sign-btn.line.red{border-color:#e74c4c; color:#e74c4c;}
a.sign-btn.line.soft{border-color:#b4c2cc; color:#b4c2cc;}
a.sign-btn.line.dark{border-color:#444; color:#444;}
a.sign-btn.line.fb{border-color:#537abd; color:#537abd;}
a.sign-btn.line.gg{border-color:#ea5d4b ; color:#ea5d4b ;}
a.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.8;}
a.sign-btn.disable{cursor:not-allowed; background:#cecece;}
.element-box .element-select{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;}
.element-box select.element-select {
	width:100%; height:40px; padding:5px 5px 5px 50px; background:#fff; border:1px solid #cecece;font-size:16px;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #cecece 50%),
    linear-gradient(135deg, #cecece 50%, transparent 50%),
    linear-gradient(to right, #cecece , #cecece );
  background-position:
    calc(100% - 19px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}
.element-box select.element-select-main {
	width:100%; height:40px; padding:5px 5px 5px 50px; background:#73ee410f; border:1px solid #10cc35;font-size:16px;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #cecece 50%),
    linear-gradient(135deg, #cecece 50%, transparent 50%),
    linear-gradient(to right, #cecece , #cecece );
  background-position:
    calc(100% - 19px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}
.element-box select.element-select.noicons, .element-box input.element-input.noicons,.element-box input.element-input-main.noicons,.element-box select.element-select-main.noicons,.element-box textarea.element-area-main.noicons, .element-box textarea.element-area.noicons{padding-left:10px !important; min-width:10px;}
.element-box input.element-input.small{height:30px; font-size:12px; padding-left:40px; padding:5px;}
.element-box input.element-input.small.search{padding-right:40px;}
.element-box textarea.element-area.small{font-size:12px; padding-left:40px;}
.element-box select.element-select.minimalis{min-width:120px; width:auto;  padding-right: 35px;}
.element-box input.element-input.minimalis{min-width:146px; width:auto;}
.element-box select.element-select.small{height:30px; font-size:12px;  background-position:
    calc(100% - 15px) calc(1em + -1px),
    calc(100% - 10px) calc(1em + -1px),
    calc(100% - 2.5em) 0.3em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em; padding-left:40px;
  background-repeat: no-repeat;}
.element-radio {cursor:pointer; font-size:12px;}
.element-radio.jawaban{display:inline-flex;}
.element-radio input[type="radio"]{opacity:1;border:2px solid #dddddd;background:#fff;height:20px;width:20px;position:absolute;top:0;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:10px;display:inline-flex; margin-right:5px;}
.element-radio input:checked{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #444;}
.element-radio input:checked:before{position:absolute; width:12px; height:12px;top:2px; left:2px;background:#444; border-radius:8px; content:''; z-index:2;}
.element-radio input:disabled{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #444; cursor: not-allowed;}
.element-radio input:disabled:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00d'; color:#444; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;margin:0 auto;}
.element-radio > label {display: inline-flex !important;margin-left:30px;cursor:pointer;}

.element-check {cursor:pointer;}
.element-check input[type="checkbox"]{opacity:1;border:2px solid #dddddd;background:#fff;height:20px;width:20px;position:absolute;top:0;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:4px;display:inline-flex; margin-right:5px;}
.element-check input:checked{opacity:1; background:#fff; border:2px solid #444;-webkit-appearance:none;-moz-appearance: none;appearance: none;}
.element-check input:checked:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00c'; color:#444; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check input:disabled{opacity:1; background:#fff; border:2px solid #d91c40;-webkit-appearance:none;-moz-appearance: none;appearance: none;cursor: not-allowed;}
.element-check input:disabled:before{font-family:'FontAwesome'; content:'\f00d'; position:absolute;  width:16px; height:16px;top:0px; left:0; color:#444; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check > label {display: inline-flex !important;margin-left:30px;cursor:pointer;}

/*breadcrumbs*/
.breadcrumbs{margin:0 auto; display:block; padding:0 0 10px 0; overflow:hidden;}
ul.sitemap{list-style:none; list-style-position:inside; margin:0; padding:0; display:flex; align-items:center; }
ul.sitemap li{float:left; padding-right:20px; position:relative; font-size:12px; font-weight:500; text-transform:uppercase; color:#b4c2cc;}
ul.sitemap li:before{position:absolute;font-family: 'FontAwesome';content: '\f054'; top:4px; right:5px; font-size:8px; color:#e74c4c;}
ul.sitemap li a{color:#e74c4c;} ul.sitemap li a:hover{color:#b4c2cc }
ul.sitemap li:last-child{padding-right:0;}
ul.sitemap li:last-child:before{display:none;}

ul.row-list{list-style: none; list-style-position: inside; margin:0 -15px; padding:0; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap;}
ul.row-list li{width:100%; padding:0 15px;}
ul.row-list.row2 li{width:50%; padding:0 15px;}
ul.row-list.row3 li{width:33.333%; padding:0 15px;}
ul.row-list.row4 li{width:25%; padding:0 15px;}
ul.row-list.row5 li{width:20%; padding:0 15px;}
ul.row-list.row6 li{width:16.666%; padding:0 15px;}
ul.row-list.row4.pad5, ul.row-list.row3.pad5, ul.row-list.row2.pad5, ul.row-list.row5.pad5,  ul.row-list.row6.pad5{margin:0 -5px;}
ul.row-list.row4.pad5 li, ul.row-list.row3.pad5 li, ul.row-list.row2.pad5 li, ul.row-list.row5.pad5 li, ul.row-list.row6.pad5 li{padding:0 5px;}
ul.row-list.row4.pad10, ul.row-list.row3.pad10, ul.row-list.row2.pad10, ul.row-list.row5.pad10,  ul.row-list.row6.pad10{margin:0 -10px;}
ul.row-list.row4.pad10 li, ul.row-list.row3.pad10 li, ul.row-list.row2.pad10 li, ul.row-list.row5.pad10 li, ul.row-list.row6.pad10 li{padding:0 10px;}
ul.row-list.front-berita li:nth-child(2){padding:0 5px;}
ul.row-list.front-video li:first-child, ul.row-list.front-video li:nth-child(2), ul.row-list.front-video li:nth-child(3){margin-bottom:20px;}
ul.row-list.row4.pad5.followed-komunitas li{padding-bottom:0;}
ul.row-list.row4.pad5.terbaru-komunitas li{padding-bottom:10px;}
ul.row-list.menuicon li{opacity:1;transition: all .3s ease-in-out;}
ul.row-list.menuicon li:hover{opacity:0.8;transition: all .3s ease-in-out;}
ul.row-list.row4.list-small-card{margin-top:30px; margin-bottom:30px;}
ul.row-list.list-kanal-pelatihan li{margin-top:15px;}
ul.row-list.list-kanal-pelatihan li:last-child{margin-bottom:15px;}
ul.row-list.list-keuangan li{margin-bottom:10px;}
ul.row-list.row5.front-belanja li{padding:0;}
ul.row-list.cluster li{margin-bottom:15px;}
ul.row-list.cluster li .card-box.big .img-card{height:100px;}
ul.row-list.cluster li .card-box.big .text-card{padding-top:5px;}
ul.row-list.list-result li .card-box.news .img-card{background:#f8f8f8; border-radius:6px;}
ul.row-list.list-moduls li{margin-bottom:30px;}
/*card news*/
.card-box{height:auto; overflow:hidden;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box .img-card{position:relative;width:100%;float:left;overflow:hidden;height:auto;margin:0 auto; padding:0; display:flex; align-items:center; justify-content:center; text-align:center; }
.card-box .hovertext{padding:10px; background:rgba(0,0,0,0.7); text-align:center; position:absolute; top:-100px; left:0; right:0; z-index:2; color:#fff; font-size:14px; opacity:0;transition: all .3s ease-in-out; border-radius:4px 4px 0 0;}
.card-box:hover .hovertext{padding:10px; background:#e74c4c; text-align:center; position:absolute; top:0; left:0; right:0; z-index:2; color:#fff; font-size:14px; opacity:1;transition: all .3s ease-in-out; font-weight:600;}
.card-box .img-card img{width:100%; height:auto; display:block;}
.card-box .text-card{height:auto; width:auto; overflow:hidden; padding:0 0 0 15px; position:relative;}
.card-box .text-card h2.title{transition: all .3s ease-in-out;font-size:24px;line-height:26px;margin: 0;color:#444; font-weight:500;}
.card-box .text-card h3.title{transition: all .3s ease-in-out;font-size:18px;line-height:20px;margin: 0;color:#444; font-weight:500;}
.card-box .text-card h4.title{transition: all .3s ease-in-out;font-size:16px;line-height:18px;margin: 0;color:#444; font-weight:500;}
.card-box .text-card h5.title{transition: all .3s ease-in-out;font-size:14px;line-height:16px;margin: 0;color:#444; font-weight:500;}
.card-box .text-card h4.date{color:#1a73e8 ; font-size: 12px;line-height: 14px; font-weight:400; margin:5px 0 0 0;word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; height:16px;transition: all .3s ease-in-out;text-transform:uppercase;}
.card-box .text-card h4.title.line2{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.card-box .text-card p{font-weight:400;margin:10px 0 0 0; letter-spacing: normal; font-size:14px; line-height:18px;color:#444;}
.card-box:hover .text-card h3.title{transition: all .3s ease-in-out;}
.card-box:hover .text-card h4.date{transition: all .3s ease-in-out;}
.card-box.overtext .text-card{position:absolute; left:0; right:0; bottom:0; padding:10px !important; background:rgba(0,0,0,0.5);}
.card-box.overtext{width:100%; height:auto;}
.card-box.overtext .img-card {width:100%; float:none;  background:#000;}
.card-box.overtext .img-card img{opacity:0.9; width:100%;}
.card-box.overtext:hover .img-card img{opacity:1;}
.card-box.overtext .img-card.small{height:134.66px;}
.card-box.overtext .img-card.small img{width:100%; height:auto;}
.card-box.overtext a{color:#fff;}
.card-box.overtext a:hover{color:rgba(255,255,255,0.5);}
.card-box.kategori{border:1px solid #fff;}
.card-box .img-card .overimg{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.8); display:flex; align-items:center; justify-content:center; padding:15px; z-index:2; font-size:14px; font-weight:500; flex-direction:column;}

.card-box.kategori .text-card{position:absolute; left:0; right:0; bottom:0; top:0; padding:15px !important; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; flex-direction:column;transition: all .2s ease-in-out;}
.card-box.kategori .text-card h2.katalog{font-size:18px; line-height:20px; color:#fff; text-align:center;}
.card-box.kategori{width:100%; height:auto;}
.card-box.kategori .img-card {width:100%; float:none;  background:#000;}
.card-box.kategori .square-img {opacity:0.9; width:100%;transition: all .2s ease-in-out; transform:scale(1);}
.card-box.kategori:hover .square-img img{opacity:1;transition: all .2s ease-in-out; transform:scale(1.2);}
.card-box.kategori .img-card.small{height:134.66px;}
.card-box.kategori .img-card.small img{width:100%; height:auto;}
.card-box.kategori a{color:#fff;}
.card-box.kategori:hover .text-card{background:rgba(255,255,255,0.7);transition: all .2s ease-in-out;}
.card-box.kategori:hover .text-card h2.katalog {color:#333;}
.card-box.kategori .text-card p{display:none;}
.card-box.kategori:hover .text-card p{display:block; color:#333; text-align:center; margin:15px 0 0 0; font-size:14px; line-height:16px;}
.card-box.big{width:100%;}
.card-box.big .img-card{width:100%; float:none;height: auto; border-radius:4px; overflow:hidden; position:relative;}
.card-box.big .img-card .video-play{position:absolute; bottom:0; left:0; width:40px; height:30px; background:#e74c4c; display:flex; align-items:center; justify-content:center; z-index:2; opacity:1; border-radius:0 4px 0 0;}
.card-box.big .text-card a.edit-btn{ width:auto; height:24px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; z-index:2; background:rgba(255,255,255,0.5); color:#444; font-size:12px; border:1px solid #cecece; padding:0 10px;}
.card-box.big .text-card a.del-btn{width:auto; height:24px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; z-index:2; background:rgba(255,255,255,0.5); color:#444; font-size:12px; border:1px solid #cecece; padding:0 10px;}
.card-box.big .text-card a.edit-btn:hover, .card-box.big .text-card a.del-btn:hover{background:rgba(0,0,0,0.1);}
.card-box.big .img-card .video-play i{font-size:16px !important; color:rgba(255,255,255,1);}
.card-box.big .img-card.video{width:100%; float:none;height:175px; border-radius:4px; overflow:hidden;}
.card-box.big .img-card img{width:100%; height: auto; max-height:inherit;}
.card-box.big .text-card {width:100%; padding:10px 0 0 0;}
.card-box .animhover{ transform:scale(1) rotate(0);transition: all .2s ease-in-out;}
.card-box:hover .animhover{ transform:scale(1.1) rotate(-2deg);transition: all .2s ease-in-out;}
.card-box.small{width:100%;}
.card-box.small .img-card{width:100%; float:none;height: auto;}
.card-box.small .img-card img{width:100%; height: auto;}
.card-box.small .text-card {width:100%; padding:5px 0 10px 0;}
.card-box.small .text-card h3.title{font-size:14px; line-height:18px; font-weight:600;}
.card-box.medium .img-card{width:45%; height: auto;}
.card-box.medium .img-card img{width:100%; height: auto;}
.card-box .img-card .icons{position:absolute; bottom:0; right:0; width:30px; height:30px; font-size:14px; background:#fff; border-radius:4px 0 0 0; display:flex; align-items:center; justify-content:center; z-index:2; color:#3c5e80;transition: all .2s ease-in-out;}
.card-box:hover .img-card .icons{color:#444;transition: all .2s ease-in-out;}
.card-box.news .text-card{padding:0 0 0 10px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;min-height:100px;}
.card-box.news .img-card{width:100px; height:100px; float:left; overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:4px;}
.card-box.news .img-card img{width:auto; height:100px; display:block;}
.card-box.news .text-card h3.title{margin-bottom:15px;}
.card-box:hover .text-card h2.title, .card-box:hover .text-card h3.title, .card-box:hover .text-card h4.title, .card-box:hover .text-card h5.title{opacity:0.8;}
.card-box .text-card p.limited{word-break: break-word;overflow: hidden;display: -webkit-box;-webkit-line-clamp:4;-webkit-box-orient: vertical;max-height:80px;}
.card-box.video .text-card p{word-break: break-word;overflow: hidden;display: -webkit-box;-webkit-line-clamp:4;-webkit-box-orient: vertical;max-height:80px;}
.card-box.shadow{box-shadow:1px 1px 6px rgba(0,0,0,0.1); border-radius:4px;}
.card-box.lines{padding:15px; border-radius:4px; overflow:hidden;border:1px solid #cecece; background:#fff;}
.card-box.lines.komunitas{min-height:280px; position:relative; padding-bottom:65px; padding-top:95px;}
.card-box.lines.komunitas.small{min-height:210px;}
.card-box.lines.komunitas .bg-komunitas{position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; display:flex; align-items:center; justify-content:center; margin:0 auto;}
.card-box.lines.komunitas .bg-komunitas img{width:auto; height:100%; opacity:0.5;}
.card-box.lines.komunitas .centering {position:absolute; bottom:15px; left:15px; right:15px;}
.card-box.komunitas .img-avatar{position:absolute; top:15px; left:15px; right:15px; border:2px solid #fff;transition: all 0.1s ease-in-out;}
.card-box .img-avatar{width:80px; height:80px; border-radius:50px; margin:0 auto; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff;}
.card-box .img-avatar img{width:auto; height:80px;}
.card-box .img-avatar.medium{width:60px; height:60px;}
.card-box .img-avatar.medium i{font-size:26px;}
.card-box .img-avatar.medium img{width:auto; height:60px;}
.card-box .img-avatar.left{float:left; border:1px solid #cecece; background:#cecece;}
.card-box.lines.komunitas.followed{min-height:80px; padding:10px;}
.card-box.lines.komunitas.followed .bg-komunitas img{width:100%; height:auto;}
.card-box.lines.komunitas.followed .img-avatar{position:relative; top:inherit; left:inherit; right:inherit; float:left;}
.card-box.lines.komunitas.followed .text-card{padding-left:10px; display:flex; align-items:center; height:60px;}
.card-box.lines.komunitas.followed{border:none !important;}
.card-box.lines.komunitas.followed.clearing{min-height:102px; padding:10px;}
.card-box.lines.komunitas.followed.clearing{border:1px solid #cecece !important; background:#f8f8f8;}
.card-box.lines.komunitas.followed.clearing .text-card{padding-left:10px; display:flex; align-items:center; height:80px;}
.card-box.iconic{box-shadow:1px 1px 5px rgba(0,0,0,0.1); border-radius:6px; padding:15px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#fff; margin:2%; width:96%;}
.card-box.iconic .text-card{padding:10px 0 0 0;}
.card-box.iconic:hover{background:#f8f8f8;box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1);}
.card-box.iconic i, .card-box.iconic img{transition: all 0.1s ease-in-out; transform:scale(1);}
.card-box.iconic:hover i, .card-box.iconic:hover img{transition: all 0.3s ease-in-out; transform:scale(1.2);}

.card-box.komunitas:hover .img-avatar{border: 4px solid #fff;transition: all 0.3s ease-in-out;}
.card-box.komunitas.clearing:hover .img-avatar{border-color:#b4c2cc;}
.card-box.lines.pelatihan{padding-right:95px;}
.card-box.kanal{border-radius:4px; padding:0; border:1px solid #cecece; overflow:hidden;}
.card-box.kanal .text-card{padding:15px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;min-height:200px;}
.card-box.kanal .img-card{width:357px; height:200px; float:left; overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:0;}
.card-box.kanal .text-card p.limited{max-height:54px;font-size:16px;-webkit-line-clamp:3;}
.card-box.kanal .img-card img{width:100%; height:auto; display:block;}
.card-box.lines .btn-pelatihan {
    position: absolute;
    width:80px;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    border-left: 1px solid #cecece;}
.card-box:hover img{opacity:0.9;}
.card-box.lines.h150{height:150px;}
.card-box.linestext{border-radius:4px; overflow:hidden;border:1px solid #cecece; background:#fff;}
.card-box.linestext .text-card{padding:15px;}
.card-box.linestext .img-card{border-radius:4px 4px 0 0;}
.box-utama{margin:0 auto; padding:0; border-radius:4px; overflow:hidden;}
.box-utama .left-utama{width:66%; float:left; height:443px;}
.box-utama .right-utama{width:34%; float:left; height:443px; display:flex; flex-direction:column;}
.box-utama .right-utama .card-box.utama{height:50%;}
.card-utama {overflow:hidden; position:relative; width:100%;}
.card-utama .img-card {width:100%; height:auto; overflow:hidden; position:relative; top:0; bottom:0; margin:0 auto;}
.card-utama.video .img-card{height:660px; display:flex; align-items:center; justify-content:center;}
.card-utama .img-card img{width:100%;}
.card-utama .text-card{position:absolute; bottom:10px; left:10px; width:75%;border-radius:0 4px 0 4px; padding:10px; background:rgba(255,255,255,1); z-index:2; box-shadow:1px 1px 12px rgba(0,0,0,0.2);}
.card-utama .text-card h2.title{transition: all .3s ease-in-out;font-size:24px;line-height:26px;margin: 0;color:#444; font-weight:500;}
.card-utama .text-card h3.title{transition: all .3s ease-in-out;font-size:18px;line-height:20px;margin: 0;color:#444; font-weight:500;}
.card-utama .text-card h4.title{transition: all .3s ease-in-out;font-size:16px;line-height:18px;margin: 0;color:#444; font-weight:500;}
.card-utama .text-card h5.title{transition: all .3s ease-in-out;font-size:14px;line-height:16px;margin: 0;color:#444; font-weight:500;}
.card-utama .text-card h4.date{color:#1a73e8 ; font-size: 12px;line-height: 14px; font-weight:400; margin:5px 0 0 0;word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; height:16px;transition: all .3s ease-in-out;text-transform:uppercase;}
.box-utama .right-utama .card-utama{height:50%;}
.card-box.notif{padding:10px; border-bottom:1px solid #ddd;}
.card-box.notif h4.title{font-size:14px; line-height:16px; text-transform:none;}
.card-box.notif h4.date{font-size:12px; line-height:16px; text-transform:none;}
ul.accordion {
    list-style: none;
    padding: 0;}
  
    .inner {
		padding:15px;
        overflow: hidden;
        display: none;
		background:#fff;
		border-top:1px solid #cecece;
    }
  
    ul.accordion li {
        margin: .5em 0; border-radius:4px; overflow:hidden;box-shadow: 1px 1px 6px rgba(0,0,0,0.1);}
      
     ul.accordion li  a.toggle {
            width: 100%;
            display: block;
            color: #444;
            padding:15px;
			background:#fff;
            transition: background .3s ease;
			
			font-weight:600; }
/*table box*/
.table-box {margin:0px;padding:0px;width:100%;border:0px solid #fff; border-radius:6px; overflow:hidden;}
.table-box .t-left{text-align:left;}
.table-box .t-right{text-align:right;}
.table-box table{width:100%;height:100%;margin:0px;padding:0px;}
.table-box tr:nth-child(odd){ background-color:#f8f8f8 ; }
.table-box tr:nth-child(even){ background-color:#fff; }
.table-box td{vertical-align:middle;border-width:0px;text-align:center;padding:8px;font-size:14px;color:#444;font-weight:400;line-height:20px;}
.table-box thead tr td{background:#ededed; font-weight:700; color:#333;}
.table-box thead tr td a{color:#999;}
.table-box tr:first-child{border-top:none;}
.table-box tr:last-child{border-bottom:none;}
.table-box tr.selected{background:#1a73e8;}
.table-box tr.selected td{font-weight:700;}
/*spinner*/
.spinner {margin:15px auto 30px auto;width:70px;text-align: center;}
.spinner > div {width: 14px;height: 14px;background-color: #32aade; border-radius: 100%;display: inline-block;-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce3{background-color: #cd1d5e;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;background-color: #682772;}
@-webkit-keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0) }40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0);transform: scale(0);} 40% {-webkit-transform: scale(1.0);transform: scale(1.0);}}
/*blockbox*/
.kanalname {overflow:hidden;}
.kanalname h2.titlecenter {font-size:34px;line-height:38px;font-weight:700;position: relative; margin: 0 auto;text-align: center;padding:20px 15px; color:#444; font-family:'Baloo 2','Roboto'; text-transform:lowercase; letter-spacing:-1px;}
.blockbox{ position:relative; margin-bottom:30px; background:#fff; overflow:hidden;}
.blockbox.dash{padding-bottom:30px; border-bottom:1px solid #cecece;}
.blockbox .blockbox-head{height:auto; padding:10px 0 15px 0; position:relative; margin-bottom:10px;}
.blockbox .blockbox-head::before{content:''; position:absolute; bottom:8px; left:0; width:60px; height:5px; background:#e74c4c;}
.blockbox .blockbox-head::after{content:''; position:absolute; bottom:8px; left:61px; width:10px; height:5px; background:#cecece;}
.blockbox .blockbox-head.head01{background:none; background-size:cover; }
.blockbox .blockbox-head.head02{background:none; background-size:cover; }
.blockbox .blockbox-head.head03{background:none; background-size:cover; }
.blockbox .blockbox-head.head04{background:none; background-size:cover; }
.blockbox .blockbox-head.dark{background:none; background-size:cover;}
.blockbox .blockbox-head.clean{background:#f6f6f6; border-bottom:1px solid #ddd;}
.blockbox .blockbox-head.nobot::before{content:''; position:absolute; bottom:8px; left:-11px; right:0; width:60px; height:5px; background:#e74c4c; margin:0 auto;}
.blockbox .blockbox-head.nobot::after{content:''; position:absolute; bottom:8px; left:61px; right:0; width:10px; height:5px; background:#cecece;margin:auto;}
.head-green{background:#f6f6f6 !important; background-size:cover; margin:0 auto; }
.blockbox .blockbox-head a.btn-next{position:absolute; top:0; right:0; width:auto; height:48px; z-index:2; display:flex; align-items:center; justify-content:center; opacity:1;transition: all 0.2s ease-in-out;}
.blockbox .blockbox-head a.btn-next:hover{opacity:0.8;transition: all 0.2s ease-in-out;}
.blockbox .blockbox-head .btn-next{position:absolute; top:0; right:0; width:auto; height:48px; z-index:2; display:flex; align-items:center; justify-content:center; opacity:1;transition: all 0.2s ease-in-out;}
.blockbox.noborder{border:none;}
.blockbox .blockbox-head h2.title{font-size:28px; line-height:32px; margin:0; font-family:'Baloo 2','Roboto'; text-transform:lowercase; letter-spacing:-1px; font-weight:700;}
.blockbox .blockbox-head h2.title.ls10{letter-spacing:10px;}
.blockbox .blockbox-in{padding:0;}
.blockbox .blockbox-in img.w100{width:100%; height:auto;}
.blockbox.border{border:1px solid #cecece;}
.square {position: relative;width:100%;display:flex; align-items:center; justify-content: center;}
.square:after {content: "";display: block;padding-bottom: 100%;}
.square-img {position: absolute;width: 100%;height:100%; overflow: hidden; border-radius:4px;}
.square-img a{display:flex; align-items:center; justify-content: center; height:100%; width:100%;}
.square-img img{width:auto; height:100%; margin:0 auto;}
.square-img.flat{border-radius:0;}
.square-img.lines{border:1px solid #cecece;}
/*detail*/
.detail-artikel{width:100%;margin-bottom: 15px;background: #fff;overflow: hidden;min-height: 10px;}
.detail-artikel .detail-in{padding:15px 0;}
.detail-artikel .detail-in .detail90{width:90%; float:left; padding:0 30px 0 0;}
.detail-artikel .detail-in .detail10{width:10%; float:left; padding:0;}
.detail-artikel .detail-in .detail70{width:70%; float:left; padding:0 30px 0 0;}
.detail-artikel .detail-in .detail30{width:30%; float:left; padding:0;}
.detail-artikel p{font-size:16px; line-height:22px; margin:0 0 15px 0; font-weight:400;}
.detail-artikel p:last-child{margin-bottom:0;}
.detail-artikel p a{font-weight:500; color:#e74c4c;}
.detail-artikel p a:hover{color:#e7b652;}
.detail-artikel .box-foto-detail{margin:0 0 15px 0; overflow:hidden;}
.detail-artikel .foto-detail{width:100%; height:auto;overflow:hiden; margin:0 auto;}
.detail-artikel .foto-detail img{width:100%; height:auto; }
.detail-artikel .caption{font-size:11px; line-height:14px; padding:10px; color:#666; background:#fff; border-bottom:1px solid #cecece;}
.detail-artikel h2.detail{font-size:36px; line-height:36px; margin:0 0 15px 0; }
.box-title-detail{padding:15px 0; overflow: hidden;}
.box-title-detail h1.title{margin:0 0 15px 0; font-size:36px; line-height:40px; font-weight:500;}
.box-title-detail h4.date{font-size:14px; line-height:18px;  margin:0 0 10px 0; font-weight:400; text-transform:uppercase;}
/*box tanya*/
.tanya-box{margin:30px 0;}
.tanya-box h4.title{margin-bottom:30px; position:relative; font-weight:600;}
.tanya-box p{font-size:16px; line-height:22px; margin:0 0 30px 0; font-weight:400;}
/*tag detail*/
ul.tags{list-style:none; list-style-position:inside; margin:0; padding:15px 0 0 0; display:flex; align-items:center; justify-content:flex-start; flex-direction:row; flex-wrap:wrap;}
ul.tags li{width:auto !important; border-radius:4px;background:#cecece; margin:0 5px 5px 0;padding:10px !important; border:1px solid #cecece; font-weight:600; font-size:14px;opacity:1;transition: all 0.2s ease-in-out; height:auto;}
ul.tags li a{color:#444;}
ul.tags li:hover{opacity:0.8; transition: all 0.2s ease-in-out;}
/*share*/
ul.share{padding:10px 0 0 0; margin:0; list-style:none; list-style-position:inside; overflow:hidden; display:flex; justify-content:flex-start; align-items:flex-end;}
ul.share li{ margin:0 2px;width:50px;}
ul.share li a{ width:50px; height:50px;color:#fff;text-align:center; display:flex; align-items:center; justify-content:center; opacity:1; font-size:20px;transition: all .35s ease-in-out; border-radius:4px;}
ul.share li a:hover{opacity:0.5;}
ul.share li:first-child{width:100%; height:auto;display:flex; align-items:center; justify-content:center; color:#444;}
ul.share li p{font-size:14px;margin:0; padding:0; font-weight:500;}
ul.share.share-detail{flex-direction:column;}
ul.share.share-detail li{margin:0 0 5px 0;width:60px;}
ul.share.share-detail li a{ width:60px; height:60px;}
ul.share.small{position:relative; flex-direction:row; justify-content:center; padding:20px 10px 10px 10px; border-top:1px solid #ddd;}
ul.share.small li{margin:0 2px;width:40px;}
ul.share.small li a{ width:40px; height:40px; margin-top:15px;}
ul.share.small li:first-child{position:absolute;width:100%; text-align:center; margin-bottom:10px;left:0; top:10px; right:0;}
ul.share.small li a i{font-size:16px;}
ul.share.small li a small{font-size:12px;}
ul.share.small li.thumb{width:auto;}
ul.share.small li.thumb a{ width:auto; height:40px; margin-top:15px; padding:0 10px;}
ul.share.small li.thumb a span.num{ font-size:12px; height:20px; border-radius:10px; background:#fff; min-width:20px; display:flex; align-items:center; justify-content:center; line-height:12px; color:#444; font-weight:600; overflow:hidden; padding:0 5px;}
.box-head-info{padding:15px 0;  overflow:hidden; background:#fff; position:relative; z-index:9;}
.box-head-info .left-info{width:70%; padding:0 15px; float:left; min-height:50px;}
.box-head-info .right-info{width:30%; padding:0 15px; float:left; min-height:50px;display:flex; align-items:center; justify-content:flex-end; flex-direction:row;}
.box-head-info .left-info .foto-info {width:50px;height:50px; min-width:50px;margin-right: 10px;float: left;overflow:hidden;   border-radius: 25px; display:flex; align-items:center; justify-content:center; background:#ddd;}
.box-head-info .left-info .foto-info img{width:auto; height:50px;}
.box-head-info .left-info .text-info{overflow:hidden; min-height:50px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.box-head-info .left-info .text-info h4.title{font-size: 16px;line-height: 18px; font-weight:500; margin:0;}
.box-head-info .left-info .text-info h5.title{font-size: 12px;line-height: 14px; font-weight:400; margin:0;}
.box-head-info .left-info .text-info h4.title.line1{font-size: 16px;line-height: 18px; font-weight:500; margin:0;word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; height:18px;transition: all .3s ease-in-out;}
.box-head-info .left-info .text-info h5.title.line1{font-size: 12px;line-height: 14px; font-weight:400; margin:0;word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; height:14px;transition: all .3s ease-in-out;}
.box-tentang{overflow:hidden;}
.box-tentang h4.title{font-size: 14px;line-height: 16px; font-weight:500; margin:0;}
.box-tentang p{margin:0 0 15px 0; font-size:12px; line-height:16px;}
.list-toko {overflow:hidden; padding:5px 0; border-top:1px solid #ddd;}
.list-toko {overflow:hidden; padding:5px 0; border-top:1px solid #ddd;}
.list-toko .list-icons{width:24px; height:24px; display:flex; align-items:center; justify-content:center; float:left; border-radius:50%; margin-right:10px;}
.list-toko .list-icons i{font-size:11px !important;}
.list-toko .list-text{min-height:24px; display:flex; align-items:center; justify-content:flex-start;}
.list-toko .list-text h5.title{font-size:14px; line-height:16px; margin:0; font-weight:500;}
/*sosmed*/
ul.sosmed {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-position: inside;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%
	}
	ul.sosmed li {margin: 5px;    width: 32px}
	ul.sosmed li a {    width: 32px;    height: 32px;    color: #fff;    text-align: center;    display: flex;    align-items: center;    justify-content: center;    opacity: 1;    font-size: 14px;    transition: all .35s ease-in-out;    border-radius: 16px;}
	ul.sosmed li a:hover {    opacity: .5}
	ul.sosmed li:first-child{margin-left:0;}
/*footer*/
.cd-main-content .footer-fix{position:absolute; left:0; right:0; bottom:0;}
footer{background:#f8f8f8; border-top:3px solid #ddd;}
.footer{width:100%;  padding:30px 0; overflow:hidden; min-height:auto;}
.footer .footer-in{max-width:1200px; padding:0; margin:0 auto;}
.footer .footer-in .foot-logo{width:100%; height:auto; display:flex; align-items:center; justify-content:flex-start; margin-bottom:15px;}
.footer .footer-in .foot-logo img{height:30px; width:auto; display:block;}
footer .copy{height:30px; width:100%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:#e74c4c ; text-align:center; padding:0 15px; font-weight:500;}
.footer .footer-in .footer-left{width:25%; padding:0 15px; float:left;}
.footer .footer-in .footer-right{width:75%; padding:0 15px; float:left;}
.footer .footer-in .footer-left .footer-apps{display:flex; align-items:center; justify-content:flex-start;}
.footer .footer-in .footer-right .foot-text{overflow:hidden;}
.footer .footer-in .footer-right .foot-text h4.page{font-size:14px; line-height:16px; margin:0; padding:5px 0; border-top:1px dotted rgba(255,255,255,0.1); font-weight:600;}
.footer .footer-in .footer-right .foot-text h4.subpage{font-size:14px; line-height:16px; padding:5px 0; font-weight:400; }
.footer .footer-in .footer-right .foot-text h4.subpage.top{margin-top:26px;}
.footer .footer-in .footer-right .foot-text p.text{font-size:14px; line-height:16px;  margin:0; padding:5px 0; border-top:1px solid #ddd; color:#444;}
.footer .footer-in .footer-right .foot-text h4.page a, .footer .footer-in .footer-right .foot-text h4.subpage a{color:#444;}
.footer .footer-in .footer-right .foot-text p.text a{color:#444;}
.footer .footer-in .footer-right .foot-text h4.page a:hover, .footer .footer-in .footer-right .foot-text h4.subpage a:hover{color:#b4c2cc ;}
.footer .footer-in .footer-right .foot-text p.text a:hover{color:#b4c2cc;}
/*narasi*/
.box-narasi{background:url('../images/bg-soft01.jpg') center center no-repeat; margin:0 0 30px 0; min-height:100px; position:relative; overflow:hidden;}
.box-narasi.kedua{background:url('../images/bg-soft02.jpg') center center no-repeat; margin:0 0 30px 0; min-height:100px; position:relative; overflow:hidden;}
.box-narasi .narasi-in{padding:60px 15px; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; top:0; left:0; right:0; bottom:0; z-index:2; overflow:hidden; min-height:360px;}
.box-narasi .narasi-in h1.title{font-size:36px; line-height:38px; margin:0 auto 15px auto; max-width:800px; text-align:center;}
.box-narasi .narasi-in p{font-size:18px; line-height:20px; margin:0 auto; max-width:800px;}
/*box forum*/
.forum-list{border:1px solid #ddd; overflow:hidden; padding:15px; border-radius:4px; margin-bottom:5px; position:relative; padding-right:50px;}
.forum-list .right-arrow{position:absolute; width:50px; right:0; top:15px; bottom:15px; display:flex; align-items:center; justify-content:center;}
.forum-list h3.title{font-size:16px; line-height:18px; margin:0 0 5px 0; font-weight:500;}
.forum-list h4.date{font-size:12px; line-height:16px; margin:0; font-weight:500;}
.forum-list:hover{background:#f8f8f8; opacity:0.8;}
.forum-list a{color:#444;}

/*GRID*/
.grid {
	width:auto;
	list-style: none;
	margin:-5px;
	padding: 0;
	text-align:left;
	
}

.grid li {
	display: block;
	float: left;
	padding:5px;
	width:25%;
	opacity: 0;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}
/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}
/*ulasan komentar*/
.pro-ulasan{padding:0; width:100%; margin-top:30px; overflow:hidden;}
ul.ulasan{list-style:none; list-style-position:inside; margin:0; padding:0;}
ul.ulasan li{display:block; border-top: 1px solid #cecece; padding:30px 0; overflow:hidden;}
ul.ulasan li:last-child{margin-bottom:0;border-bottom: 1px solid #cecece;}
ul.ulasan li .ulasan-foto{width:50px; height:50px; margin-right:10px; float:left;display:block; overflow:hidden; border-radius:25px;}
ul.ulasan li .ulasan-foto img{width:50px; height:auto;}
ul.ulasan li .ulasan-text{display:block; overflow:hidden;}
ul.ulasan li .ulasan-text h3.username{margin:0 0 3px 0; font-weight:500; font-size:14px;}
ul.ulasan li .ulasan-text h3.tanggal{color:#b4c2cc ; margin:5px 0 3px 0; font-size:12px; font-weight:400;}
ul.ulasan li .ulasan-text p{margin:10px 0 0 0;font-weight:400;font-size:16px; line-height:18px;}
/*pagging*/
ul.pagging{list-style:none; list-style-position:inside; margin:15px 0 30px 0; padding:0; display:flex; align-items:center; justify-content:flex-start; flex-flow:row wrap; min-height:40px;}
ul.pagging li{min-width:40px; height:40px; text-align:center; line-height:30px; margin:3px;}
ul.pagging li a{height:40px; display:block; padding:5px; border:1px solid #444;  color:#444; background:#fff; border-radius:4px;}
ul.pagging li a:hover{background:#fff; color:#b4c2cc;border-color:#b4c2cc;}
ul.pagging li.select a{background:#444; color:#fff;border-color:#444;}
ul.pagging.centerpos{justify-content: center;}
/*kurs*/
.box-kurs{border:1px solid #ddd; overflow:hidden; border-radius:4px; min-height:90px; margin-top:15px; position:relative;}
.box-kurs:before{content:''; right:50%; top:0; bottom:0; background:#ddd; width:1px; position:absolute; z-index:2;}
.box-kurs.fullpage:before, .box-kurs.fullpage:after{display:none;}
.box-kurs .left-kurs{width:50%; float:left;}
.box-kurs .left-kurs .box-emas{padding:8px 15px;}
.box-kurs .right-kurs{width:50%; float:left;}
.box-kurs h3.title{font-size:16px; line-height:18px; padding:8px 15px; text-shadow:none; border-bottom:1px solid #ddd;}
/*login*/
.bg-login{background:url('../images/borobudur.jpg') top center no-repeat; background-size:cover;}
.bg-register{background:url('../images/kerajinan.jpg') top center no-repeat; background-size:cover;}
.apps-logo {
    overflow: hidden
}

.apps-logo img {
    max-height:60px;
    width: auto;
    height: 100%
}
.out-login {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: 60px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.box-login {
    min-height: 340px;
    width: 400px;
    margin: 0 auto;
    padding: 40px;
    background:rgba(255,255,255,0.9);
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 6px rgba(48, 51, 130, .1);
	border-radius:4px;
	position:relative;
}
.box-login .blocking{position:absolute; z-index:3; top:0; right:0; bottom:0; left:0; background:rgba(255,255,255,0.8);}
/*kartu anggota*/
.kartu-out{max-width:430px; padding:15px 0; margin:0 auto; position:relative;}
.box-kartu{width:100%; padding:15px; overflow:hidden; height:auto; margin:0 auto;}
.kartu{width:100%; height:auto;margin:0 auto; background:transparent;position:relative; overflow: hidden;}
.kartu .bg-kartu{width:100%; height:auto; margin:0 auto;}
.kartu.blurs{  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);}
.kartu-out .block-kartu{background:rgba(255,255,255,0.8); position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding:15px; display:flex; align-items:center; justify-content:center; flex-direction:column;  -webkit-filter:none;
  -moz-filter:none;
  -o-filter:none;
  -ms-filter:none;
  filter:none}
.kartu .bg-kartu img{width:100%; height:auto;}
.kartu .box-nama{position:absolute; bottom:6px; left:0; padding:10px;}
.kartu .box-nama .foto-square{float:left; width:56px; height:56px; overflow: hidden; display:flex; align-items:center; justify-content: center; background: #fff; margin:0 auto; border-radius:50%;}
.kartu .box-nama .foto-square img{width:auto; height:100%; display: block;}
.kartu .box-nama .col-nama{padding-left:10px;min-height:56px;display:flex; align-items:flex-start; justify-content: center; flex-direction:column;}
.kartu .head-logo{height:40px; padding:10px;background:transparent; position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; flex-direction:column; flex-flow: wrap;}
.kartu .head-logo .left-logo{float:left;}
.kartu .head-logo .right-logo{float:right;}
.kartu .head-logo img{width:auto; height:16px;}
.kartu .box-nama .col-nama h3.title-nama{font-size:14px;line-height:16px;font-weight:500;margin:0;position:relative; color:#fff;}
.kartu .box-kop{left:0; top:35px; position:absolute;padding:0 10px;}
.kartu .box-kop .logo-kop{width:40px; height:40px;overflow:hidden; position:absolute; right:0;}
.kartu .box-kop .logo-kop img{width:40px; height:40px;}
.kartu .box-kop h3.title-kop{min-height:20px; display:flex; align-items:flex-start; justify-content:center; flex-direction: column; margin:0 auto;font-size:14px; line-height:16px; color:#fff; text-transform:uppercase; font-weight:500;padding:0; text-align:center;}
.kartu .logo-card{width:100%; height:auto; overflow: hidden;}
.kartu .logo-card img{width:100%; height:auto; display: block;}
.kartu .qr-code{position:absolute; top:40px; right:10px; width:40px; height:40px; z-index:2; overflow:hidden; margin:0 auto;}
.kartu .qr-code img{width:40px; height:40px;}
.round-box{border-radius:4px; border:1px solid #ededed; overflow:hidden; width:100%; padding:15px; height:auto;}
.block-all3{width: 100%;height: 100%;position: fixed;background: rgba(0, 0, 0, .5);z-index:999;top:0;left: 0;right: 0;bottom: 0; display:flex; align-items:center; justify-content:center; padding:15px;}
.box-out-qr{width:100%; max-width:350px;  max-height:350px; background:#fff; border-radius:10px;}
.box-qrshow {position: relative;}
.box-qrshow:after {content: "";display: block;padding-bottom: 100%;}
.box-qrshow-img {position: absolute;width: 100%;height: 100%; overflow: hidden;display: flex;align-items: center;justify-content: center;flex-direction:column;}
.box-qrshow-img img{width:90%; height:auto; margin:0 auto;}
.box-detail-profile{padding:10px 0; border-bottom:1px solid #ddd;}
.box-detail-profile h5.title{font-size:12px; line-height:14px; margin:0 0 5px 0; color:#b4c2cc; font-weight:400;}
.box-detail-profile h3.title{font-size:16px; line-height:18px; margin:0; font-weight:400;}
.box-detail-profile:last-child{margin-bottom:0; border-bottom:none;}
.hidebox{position:relative; padding-bottom:50px; width:100%; height:auto;}
.hidebox .show_hide{ position:absolute; bottom:0;}
.box-poin{border:1px solid #cecece; border-radius:6px; padding:30px 10px 10px 10px; margin-top:35px; position:relative; min-height:60px;background:#f8f8f8;}
.box-poin .poin-anda{background:#fff;display:inline-flex; align-items:center; justify-content:center; border:1px solid #cecece; border-radius:6px; padding:0 10px; position:absolute; top:-20px; height:40px; z-index:2; width:50%; margin:0 auto; left:0; right:0; font-size:14px;}
.box-level{border:1px solid #cecece; border-radius:6px; padding:10px; height:auto; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#fff; overflow:hidden; width:100%; position:relative;}
.box-level .badge-img{width:100%; height:auto; margin:0 auto 5px auto;}
.box-level .badge-img img{width:auto; height:90px; margin:0 auto;}
.box-level p{margin:5px 0 0 0;font-size:12px; font-weight:500; line-height:14px;}
.box-level i{color:rgba(247,153,0,1.00);}
.box-level .disable{border-color:#cecece; color:#cecece; background:rgba(255,255,255,0.8); cursor:not-allowed; position:absolute; top:0; left:0; right:0; bottom:0;}
.box-level.disable i{color:#cecece;}
.box-setting{border-radius:6px; border:1px solid #cecece; overflow:hidden; height:auto; background:#fff;}
.box-setting .setting-btn {padding:10px 15px; cursor:pointer; position:relative;}
.box-setting .setting-btn .arrow{position:absolute; width:39px; height:39px; position:absolute; right:0; top:0;display:flex; align-items:center; justify-content:center;}
.box-setting .setting-menu{height:auto;}
.box-setting .setting-menu p.title{padding:10px 15px; border-top:1px solid #cecece; font-size:14px; margin:0; line-height:16px;}
/*alert*/
.alert {padding: 20px;background-color: #e74c4c;color: white;margin-bottom: 15px;position:fixed;left:30px;right:30px;top:90px;z-index:10;  max-width:400px;margin:0 auto;}
.alert-registrasi {padding: 20px;background-color: #e74c4c;color: white;margin-bottom: 15px;left:30px;right:30px;top:90px;z-index:10;  max-width:400px;margin:0 auto;}
.closebtn {  margin-left: 15px;  color: white;  font-weight: bold;  float: right;  font-size: 22px;  line-height: 20px;  cursor: pointer;  transition: 0.3s;}
.closebtn-alert-form {  margin-left: 15px;  color: white;  font-weight: bold;  float: right;  font-size: 22px;  line-height: 20px;  cursor: pointer;  transition: 0.3s;}
.closebtn:hover {  color: black;}
.box-info{margin:40px auto;padding:30px; background:green; font-size:24px; font-weight:700; color:#444;}
ul.row-list.menu-kas{margin:0;}
ul.row-list.menu-kas li{margin:0; border-top:1px solid #ddd; padding:0;padding:0; }
ul.row-list.menu-kas li a{display:block;padding:8px 0;}
ul.row-list.menu-kas li a:hover{color:#1a73e8 ;}
ul.row-list.terbaru-komunitas li{margin:0 0 10px 0;}
.cp img{width:90%; margin:0;}
/*tab menu*/
.icon-mid{width:40px; height:auto; clear:both;}
#tab-container {position:relative; width:100%; display:block; overflow:hidden;}
ul.tabs-menu {width:100%;height:42px;clear: both;list-style:none;list-style-position:inside;padding:0;margin:0 auto;border-bottom:1px solid #cecece; min-width:420px;}
.tab-block{display:block;}
.tabs-menu li {padding:0px;color:#b4c2cc;font-size:14px; display:inline-block; border-left:1px solid transparent; border-right:1px solid transparent; border-bottom:1px solid transparent;}
.tabs-menu li.current {position: relative;background-color: #fff;z-index: 5;color:#444; border-left:1px solid #cecece; border-right:1px solid #cecece; border-bottom:1px solid #fff; border-top:1px solid #cecece;}
.tabs-menu li a {padding:5px 10px;color: #cecece;text-decoration: none;display:flex;align-items:center; justify-content:center;height:40px; min-width:60px; font-weight:400; font-size:16px;}
.tabs-menu .current a {color:#444;}
.tab {background-color: #fff;float:left;margin-bottom:0;width:100%;}
.tab-content {width:auto;padding:30px 0;display: none; overflow:hidden;}
#tab-satu {display: block;}
@media screen and (max-width:800px){
.cp img{margin:0 auto; max-width:280px;}
}

/*NAIK KELAS*/
.cover-nk{width:100%; height:70vh; display:flex; align-items:center; justify-content:center; background:url('../images/bg-soft03.jpg') bottom center no-repeat; background-size:cover; padding:60px 30px; flex-direction:column;}
.cover-nk h1.title{font-size:60px; line-height:63px; margin:0 0 15px 0;}
.cover-nk h2.title{font-size:30px; line-height:33px; margin:0 0 15px 0;}
.cover-nk p{font-size: 18px;line-height: 22px;margin: 0 auto;max-width:700px;}
.card-nk{border-radius:6px; overflow:hidden; border:1px solid #cecece; position:relative;}
.card-nk .blocking{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.7); text-align:center; padding:70px 15px 15px 15px; z-index:2;cursor:not-allowed;}
.card-nk .blocking h2.title{font-size:24px; line-height:28px; color:#fff;}
.card-nk .img-nk{width:100%; height:200px; position:relative; overflow:hidden;}
.card-nk .img-nk img{width:100%; height:auto;}
.card-nk .img-nk .text-nk{padding:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; background:rgba(0,0,0,0.3);}
.card-nk .text-nk p{font-size: 16px;line-height:20px; color:#fff;}
.card-nk .text-nk h2.title{font-size:24px; line-height:28px; color:#fff;}
.card-nk .fa-angle-down{transition: all 0.3s ease-in-out; animation: fadeLoop 0.5s infinite alternate;}
.card-nk.disable .text-nk{ background:transparent;}
.card-nk.disable .text-nk {cursor:not-allowed;}
.card-nk.disable .fa-angle-down{animation:none; transform:none;}
.box-modul{padding:10px 15px; overflow:hidden; border-top:1px solid #cecece; display:flex; flex-direction:row;}
.box-modul p{font-size:14px; line-height:18px; margin:0; }
.box-modul p a.buttons{margin:5px 0 0 0;padding:0 8px; display:inline-flex; font-size:11px; line-height:11px;border-radius:2px; justify-content:center; align-items:center; height:20px;opacity:1;transition: all 0.3s ease-in-out;}
.box-modul p a.buttons:hover{opacity:0.8;transition: all 0.3s ease-in-out;}
ul.angka-soal{list-style:none; list-style-position:inside; margin:-2px; padding:0; display:flex; align-items:center; justify-content:flex-start;flex-flow:wrap;}
ul.angka-soal li{width:20%; height:40px; border-radius:4px; padding:2px; margin:0 0 4px 0; }
ul.angka-soal li a{width:100%; height:40px; border-radius:4px;display:flex; align-items:center; justify-content:center; border:1px solid #cecece; color:#cecece;}
ul.angka-soal li a:hover{border:1px solid #444; color:#444;}
ul.angka-soal li.selected a{background:#74c14f; color:#fff;border:1px solid #74c14f;}
.box-soal{overflow:hidden; margin:0 0 30px 0; display:inline-flex; flex-direction:row;align-items:flex-start; justify-content:flex-start;}
.box-soal .nomor-soal{display:flex; align-items:center; justify-content:center; width:auto; margin:0 10px 0 0; font-size:16px; line-height:22px;}
.box-soal .tanya-soal{display:block;}
.box-soal .tanya-soal p{ font-size:16px; line-height:22px; margin:0 0 15px 0;}
.box-soal ul.pilihan{list-style:none; list-style-position:inside; margin:0 -10px; padding:0; display:flex; flex-flow:wrap;}
.box-soal ul.pilihan-list{list-style:none; list-style-position:inside; margin:0 0; padding:0; display:flex; flex-flow:wrap;flex-direction: column;}
.box-soal ul.pilihan li{width:50%; padding:0 10px; float:left; margin:0 0 15px 0;}
.box-soal ul.pilihan-list li{padding:0 10px; float:left; margin:0 0 15px 0;}
.box-info-peta {
    height:90vh;
    max-width:1000px;
    margin: 0 auto;
    padding:0;
    background: 0 0;
    position: fixed;
    z-index: 35;
    left:0;
    right:0;
    bottom:5vh;
	top:5vh;
    display:flex; align-items:center; justify-content:center;
}
.box-info-peta .box-info-peta-in{overflow-y:scroll; height:100%; width:100%; background:#fff; padding:0; border-radius:4px; position:relative;}
.box-info-peta .box-info-peta-in .header-info-peta{width:100%; min-height:56px; border-bottom:1px solid #cecece; background:#fff; z-index:2; display:flex; align-items:center; justify-content:flex-start; padding:10px 76px 10px 15px; font-size:20px; font-weight:500;}
.box-info-peta-in::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.box-info-peta-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-info-peta-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-info-peta-in::-webkit-scrollbar:horizontal {height:6px;}
.box-info-peta-in::-webkit-scrollbar:vertical {width:6px;}
.box-info-umkm{padding:10px 0; border-top:1px solid #cecece;}
h4.title-info{font-size:14px; line-height:18px; font-weight:500;}
h2.title-jumlah{font-size:30px; line-height:34px; font-weight:600;}
.box-info-peta{left:10px; right:10px;}
.box-info-peta .box-info-peta-in .header-info-peta .close-info-peta{width:56px; height:56px;display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:0;}
ul.row-list.list-badge-small li .card-box.big .img-card{padding-bottom:7px;}
ul.row-list.list-badge-small li .card-box.big .img-card .count{min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:10px;color:#fff; background:#4b4881; position:absolute; left:auto; right:auto; bottom:0; z-index:2; margin:0 auto; padding:0 5px;}
.box-badge {
    height:70vh;
    max-width:1000px;
    margin: 0 auto;
    padding:0;
    background: 0 0;
    position: fixed;
    z-index: 35;
    left:10px;
    right:10px;
    bottom:15vh;
	top:15vh;
    display:flex; align-items:center; justify-content:center;
	
}
.box-badge .box-badge-in{padding:15px;overflow-y:auto; height:100%; width:100%; background:#fff; padding:0; border-radius:4px; position:relative;}
.box-badge-in::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.box-badge-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-badge-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-badge-in::-webkit-scrollbar:horizontal {height:6px;}
.box-badge-in::-webkit-scrollbar:vertical {width:6px;}
@media screen and (max-width:800px){
.cover-nk h1.title{font-size:40px; line-height:43px;}
.cover-nk{height:auto; text-align:center;}
}
.box-warn{max-width:1170px; padding:15px 30px; background:#ddd; position:relative; margin:0 auto;}
.box-warn .cls-btn{position:absolute; right:0; top:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center;}
/* user survey */
.box-survey {
    height:70vh;
    max-width:1000px;
    margin: 0 auto;
    padding:0;
    background: 0 0;
    position: fixed;
    z-index: 35;
    left:10px;
    right:10px;
    bottom:15vh;
	top:15vh;
    display:flex; align-items:center; justify-content:center;
	
}
.box-survey .box-survey-in{padding:15px;overflow-y:auto; height:100%; width:500px; background:#fff; padding:0; border-radius:4px; position:relative;}
.box-survey-in::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.box-survey-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-survey-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-survey-in::-webkit-scrollbar:horizontal {height:6px;}
.box-survey-in::-webkit-scrollbar:vertical {width:6px;}
/* box survey business */
.box-survey-business {
    height:70vh;
    max-width:1000px;
    margin: 0 auto;
    padding:0;
    background: 0 0;
    position: fixed;
    z-index: 35;
    left:10px;
    right:10px;
    bottom:15vh;
	top:15vh;
    display:flex; align-items:center; justify-content:center;
	
}
.box-survey-business .box-survey-business-in{padding:15px;overflow-y:auto; height:90%; width:500px; background:#fff; padding:0; border-radius:4px; position:relative;}
.box-survey-business-in::-webkit-scrollbar {width:6px; background:#ccc; border-radius:0 6px 6px 0;}
.box-survey-business-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-survey-business-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-survey-business-in::-webkit-scrollbar:horizontal {height:6px;}
.box-survey-business-in::-webkit-scrollbar:vertical {width:6px;}
/* notification */
.wrapper-notification {
	/* padding: 5px; */
	max-width: 1175px;
	width: 95%;

	margin: 0px auto;
}
.notifications {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-top: 15px;
}
.box-warn-notification {
	flex: 1;
	/* border: 1px solid gray; */
	margin: 2px;
	padding: 15px;
	/* background:#fa954f; */
    border-radius :4px;
    /* background:url('../images/bg-soft01.jpg') center center no-repeat; */
}
.box-warn-deactive {
	flex: 1;
	/* border: 1px solid gray; */
	margin: 2px;
	padding: 10px;
    /* background:url('../images/bg-soft02.jpg') center center no-repeat; */
    border-radius :4px;
}
@media screen and (max-width: 980px) {
    .notifications .box-warn-notification{
          margin-bottom: 5px;
      flex-basis: 40%;
        
      }
  }
  
  @media screen and (max-width: 680px) {
      .notifications .box-warn-notification{
          flex-basis: 100%;
          margin: 0 0 5px 0;
      }
  }

  /* RIBBON */

  .ribbon-wrapper-green {
    /* width: 150px; */
    height: 110px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    left: -3px;
  }
  .ribbon-green {
    font: bold 15px Sans-Serif;
    color: #fff;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 4px 0;
    left: -45px;
    top: 20px;
    width: 180px;
    /* background-color: #104b92; */
    /* background-image: -webkit-gradient(linear, left top, left bottom, from(#8dc735), to(#649a12)); */
    background-image: -webkit-linear-gradient(top, #1c6bb5, #0a203a);
    /* background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); */
    color: #fff;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    border-style: solid;
    border-width: 2px;
    border-color: #ef7724;
}
.ribbon-green:after,
.ribbon-green:after{
  content: "";
  border-top: 3px solid #6e8900;   
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before{
    right: 0;
  }
  .ribbon-green:after{
    left: 0;
  }

/* RATING */
.rating {
    max-width: 400px;
    margin: 80px auto;
    background: #fff;
    padding: 1em;
    border-radius: 3px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  }
  .rating__title {
    text-align: center;
    font-weight: 700;
    display: block;
  }
  .rating__list {
    max-width: 300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 1em 0;
  }
  .rating__input {
    display: none;
  }
  .rating__label {
    padding: 5px 3px;
    font-size: 26px;
    filter: grayscale(1);
    opacity: 0.7;
    cursor: pointer;
  }
  .rating__label.active {
    filter: grayscale(0);
    opacity: 1;
    transition: all 100ms ease;
  }
  .rating__label:hover {
    /* filter: grayscale(0.84); */
    transform: scale(1.1);
    transition: 100ms ease;
  }
  .feedback {
    width: 100%;
    display: none;
  }
  .feedback textarea, .feedback input {
    max-width: 300px;
    width: 100%;
    display: block;
    margin: 0.5em auto;
    padding: 0.5em;
    font-family: inherit;
    border: 1px solid #d1d2d7;
    border-radius: 3px;
  }
  .feedback textarea:focus, .feedback textarea:active, .feedback input:focus, .feedback input:active {
    border-color: #c80000;
    box-shadow: 0px 0px 0px 3px rgba(200, 0, 0, 0.2);
    transition: 100ms;
    outline: 0;
  }
  .feedback textarea {
    height: 100px;
  }
  .feedback button {
    margin: 1em auto;
    display: table;
    text-align: center;
  }
  .feedback button:focus, .feedback button:active {
    outline: 0;
  }
  
  .cb911_logo {
    width: 250px;
    position: absolute;
    top: 1em;
    left: 50%;
    margin-left: -125px;
  }

  /* webinar */
  .box-daftar {
    /* min-height: 340px; */
    width: 500px;
    margin: 0 auto;
    /* padding: 40px; */
    background:rgba(255,255,255,0.9);
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 6px rgba(48, 51, 130, .1);
	border-radius:4px;
	position:relative;
}

/* chips */
.click-chip, .click-chip-hover{
  padding: 5px 10px;
  border-radius: 50px;
  display: inline-flex;
  margin: 5px;
  cursor: pointer;
}

.click-chip-hover:hover{
  filter: brightness(85%);
}

.background-grey{
  background: #dddddd;
  color: #616161;
}

.outline-gold{
  border: 2px solid #e7b652;
  color:black;
  outline: none;
}

.outline-blue{
  border: 1.5px solid #0074c3;
  color: #0074c3;
  outline: none;
}

.icon{
  /*background: #bdbdbd;*/
  /* color: #616161; */
  /* margin: 0px 5px 0px -5px; */
  background: #fff;
  padding: 2px;
  border-radius: 50px;
}

.fa-times, .fa-times-circle{
  margin: 0px -5px 0px 5px;
}

/* hover image */
.overlay-outer {
  position: relative;
  width: 100%;
  /* max-width: 400px; */
  margin: auto;
  overflow: hidden;
}

.overlay {
  background: rgb(23 114 195 / 77%);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}

a:hover .overlay {
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out 0s;
}

.overlay-outer:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
}

.fadeIn_bottom {
  top: 80%;
}
/*  */

/* OPTION 2 */
.hover_color {
  position: relative;
  margin: 0;
  display: inline-block;
}

.hover_color::before {
  position: absolute;
  content: '';
  left: 0;
  top: 100%;
  right: 0;
  bottom: 0;
  background: rgba(246,227,75,.8);
  transition: all 350ms;
  /*this. this is stupid. to get rid of that empty space. I don't know what causes it*/
/*   margin-bottom: 3px;  */
}

/* top or bottom, to choose where it starts */
.hover_color:hover::before {
  top: 0;
}

.hover_color img {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  /*alternate solution for that stupid space at the bottom*/
  margin-bottom: -3px;
/*  if the title is always there and you need to darken the background:
 filter: brightness(40%); */
}

.hover_color .hover_color-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hover_title {
    transform: translateY(-4px);
    opacity: 0; /*or 1, if the title is always visible*/
    transition: all 350ms;
}

.hover_color a {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

/* don't need this if the title is always visible */
.hover_color:hover .hover_title {
  transform: translateY(0);
  opacity: 1;
}
/*  */
/* img news */
@media screen and (max-width:2000px){
  .image-news{
    min-width: 272.5px;
    height: 181.5px !important;
  }
}

@media screen and (max-width:900px){
  .image-news{
    min-width: 400px;
    height: 251.5px !important;

  }
}
@media screen and (max-width:600px){
  .image-news{
    min-width: 300px;
    height: 150.5px !important;

  }
}
@media screen and (max-width:450px){
  .image-news{
    width: 100% !important;
    height: 150.5px !important;
    max-height: inherit;

  }
}
@media screen and (max-width:400px){
  .image-news{
    width: 100% !important;
    height: auto !important;
    max-height: inherit;

  }
}

/* custome css popup */
.popup-video {
  height: 40%;
  width: 40%;
  max-width: 440px;
  padding: 5px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  right: 0;
  z-index: 20;
  border-radius: 8px;
  box-shadow: 1px 1px 31px rgb(0 0 0 / 50%);
}

@media screen and (max-width:400px){
  .popup-video{
    height: 20%;
  }
}

.cls-btn-popup {
  width: 20px;
  height: 20px;
  background: #bf202e;
  color: #fff;
  display: flex;
  align-items: center;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 21;
  cursor: pointer;
}

.sticky-ad {
  position: sticky;
  overflow: hidden;
  z-index: 3;
  top: 80px;
  width: 220px;
  height: 600px;
  margin: 0 auto;
  margin-bottom: 16px;
}

@media screen and (max-width:1380px){
  .sticky-ad {
    display: none;
  }
}