@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=PT+Serif:wght@400;700&family=Roboto:wght@100;300;400;500;700;900&family=Ultra&display=swap');
html {font-family:'DM Serif Display', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:14px; line-height:20px; line-height:normal; -webkit-font-smoothing: antialiased;color:var(--black);margin:0 auto; background:var(--white); max-width:1366px;}
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;}
i{font-style:normal;}
/*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;}
:root {
  --solid: #141619;
  --black: #252932;
  --white: #ffffff;
  --maroon: #894E4E;
  --dark_gray :#929292;
  --gray:#B1B1B1;
  --soft:#ededed;
  --text: #252932;
  --background:#ffffff;
  --red:#AD120A;
}
.dark-theme {
--black: #252932;
--white: #252932;
}
.light-theme {
--black: #252932;
--white: #ffffff;
}
::placeholder { color: #747474;}
::selection {
  background-color:var(--maroon);
  color:var(--white);
}
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;}

/*base*/
.videoframe{position:relative;padding-bottom:56.25%;padding-top:0;height:0; margin:0;}.videoframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;}.videoframe video{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;}
body{margin:0 auto; padding:0; display:block; background:var(--white);min-height: 100vh; color:var(--black)}
.cl-black{color:#252932 !important;}
.cl-white{color:#fff !important;}
.cl-soft{color:#ededed !important;}
.cl-gray{color:#B1B1B1 !important;}
.cl-red{color:#AD120A !important}
.cl-red2{color:#894E4E !important}
.bg-black{background:#252932 !important;}
.bg-white{background:#FFFFFF !important;}
.bg-gray{background:#B1B1B1 !important;}
.bg-red{background:#AD120A !important}
.bg-red2{background:#894E4E !important}
.bg-tr {background:transparent !important;}
.bg-soft{background:#ededed !important;}
/*cmd*/
.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;}
.hide_desktop{display:none; visibility:hidden;}
.hide_mobile{display:block; visibility:visible;}
.radius2{border-radius:2px !important;}
.radius4{border-radius:4px !important;}
.radius6{border-radius:6px !important;}
.radius8{border-radius:8px !important;}
.roboto{font-family:'Roboto', Arial !important;}
.dms{font-family:'DM Serif Display', 'Roboto' !important;}
a {color:var(--black);text-decoration: none;transition: all 0.2s ease-in-out}
a:hover, a:focus {color:var(--black);transition: all 0.2s ease-in-out}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

.padding-no {padding:0 !important;}.padding-ss{padding:4px !important;}.padding-xs{padding:8px !important;}.padding-sm{padding:16px !important;}.padding-lg{padding:24px !important;}.padding-xl{padding:32px !important;}.padding-top-no {padding-top:0 !important;}.padding-top-ss {padding-top:5px !important;}.padding-top-xs {padding-top:8px !important;}.padding-top-sm {padding-top:16px !important;}.padding-top-lg {padding-top:24px !important;}.padding-top-xl {padding-top:32px !important;}.padding-bottom-no {padding-bottom:0 !important;}.padding-bottom-ss {padding-bottom:4px !important;}.padding-bottom-xs {padding-bottom:8px !important;}.padding-bottom-sm {padding-bottom:16px !important;}.padding-bottom-lg {padding-bottom:24px !important;}.padding-bottom-xl {padding-bottom:32px !important;}.padding-left-no {padding-left:0 !important;}.padding-left-ss {padding-left:4px !important;}.padding-left-xs{padding-left:8px !important;}.padding-left-sm {padding-left:16px !important;}.padding-left-lg {padding-left:24px !important;}.padding-left-xl {padding-left:32px !important;}.padding-right-no {padding-right: 0 !important;}.padding-right-ss {padding-right:4px !important;}.padding-right-xs {padding-right:8px !important;}.padding-right-sm {padding-right:16px !important;}.padding-right-lg {padding-right:24px !important;}.padding-right-xl {padding-right:32px !important;}

.margin-no {margin:0 !important;}.margin-xs{margin:8px !important;}.margin-ss{margin:4px !important;}.margin-sm{margin:16px !important;}.margin-lg{margin:24px !important;}.margin-xl{margin:32px !important;}.margin-top-no {margin-top:0 !important;}.margin-top-ss {margin-top:4px !important;}.margin-top-xs {margin-top:8px !important;}.margin-top-sm {margin-top:16px !important;}.margin-top-lg {margin-top:24px !important;}.margin-top-xl {margin-top:32px !important;}.margin-bottom-no {margin-bottom:0 !important;}.margin-bottom-ss {margin-bottom:4px !important;}.margin-bottom-xs {margin-bottom:8px !important;}.margin-bottom-sm {margin-bottom:16px !important;}.margin-bottom-lg {margin-bottom:24px !important;}.margin-bottom-xl {margin-bottom:32px !important;}.margin-left-no {margin-left:0 !important;}.margin-left-ss {margin-left:4px !important;}.margin-left-xs {margin-left:8px !important;}.margin-left-sm {margin-left:16px !important;}.margin-left-lg {margin-left:24px !important;}.margin-left-xl {margin-left:32px !important;}.margin-right-no {margin-right:0 !important;}.margin-right-ss {margin-right:4px !important;}.margin-right-xs {margin-right:8px !important;}.margin-right-sm {margin-right:16px !important;}.margin-right-lg {margin-right:24px !important;}.margin-right-xl {margin-right:32px !important;}

.fw4{font-weight:400 !important;}.fw5{font-weight:500 !important;}.fw6{font-weight:600 !important;}.fw7{font-weight:700 !important;}.fw8{font-weight:800 !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-inslongform/ram{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-inslongform/ram{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;}
.left {float: left !important;} .right {float: right !important;}
.hidden{opacity: 0;}.visible{opacity: 1;}.left{float:left !important;}.right{float:right !important;}
.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;display:flex; align-items:center; justify-content: center; flex-direction:column; padding:5px;}
.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.lines{border:1px solid #eeeeee; border-radius:6px;}
/*element*/
.element-box button{background:transparent; border:none;}
label.small{font-size:12px; display:inline-flex; min-height:20px;}
label.medium{font-size:14px; display:inline-flex; font-weight:600; min-height:30px;}
.element-box{margin:0; position:relative; height:auto;}
/*icons*/
.element-box .icons{width:36px; height:36px; position:absolute; left:0; top:0; z-index: 2;border-right: 1px solid #eeeeee; display: flex; align-items:center; justify-content: center;}
.element-box .icons.small{width:32px; height:32px;}
.element-box .icons.right{right:0; left:inherit; border-right:none;border-left: 1px solid var(--black);}
/*input*/
.element-box input.element-input{width:100%; height:40px; padding:10px 10px 10px 46px; background:#fefefe; border:1px solid var(--black);font-size:14px; color:var(--black);}
.element-box input.element-input.darkline{border-color:var(--black);}
.element-box input.element-input.small{height:32px; font-size:12px; padding-left:40px; padding:8px;}
.element-box input.element-input.medium{height:36px; font-size:14px; padding-left:40px; padding:8px;}
.element-box input.element-input.minimalis{min-width:146px; width:auto;}
.element-box.overinput input.element-input{padding-right:40px;}
.element-box.overinput button.sign-btn{position:absolute; right:0; top:0; width:36px; height:36px; z-index:1;margin-top:0; border:none;}
/*upload*/
.element-box .input-field{margin:0;}
.element-box .file-field{position:relative;}
.element-box .file-field .btn.upload{background:#c9c9c9;border-radius:2px 0px 0 2px !important;cursor: pointer;display: inline-flex;align-items:center;justify-content:center;height:36px;width:36px; float:none; padding:0; position:absolute; top:0; left:0; z-index:2;}
.element-box .file-field .btn.upload i{font-size:16px;color:var(--black); 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: #fefefe;padding:0;width: 100%;position: relative;border:1px solid #c9c9c9;height:36px; overflow:hidden; border-radius:2px;}
.element-box .file-field .file-path-wrapper label{width: 100%;height:36px;display:flex;padding-left: 46px;align-items: center;justify-content: flex-start; font-size:14px;}
.element-box .file-field input.file-path {width: 100%;height:36px;border: none;padding-left: 50px;font-size:16px;}
/*textarea*/
.element-box textarea.element-area{width:100%; min-height:120px; padding:10px 10px 10px 50px; background:#fefefe; border:1px solid var(--black);font-size:14px; color:var(--black);}
.element-box textarea.element-area.small{font-size:12px; padding-left:32px;}
/*select*/
.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 {
	color:var(--black);width:100%; height:40px; padding:5px 5px 5px 50px; background:#fefefe; border:1px solid var(--black);font-size:14px; font-weight:600;
	-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%, var(--black) 50%),
linear-gradient(135deg, var(--black) 50%, transparent 50%),
linear-gradient(to right, var(--black) , var(--black) );
background-position:
calc(100% - 19px) calc(50% + 1px),
calc(100% - 14px) calc(50% + 1px),
calc(100% - 36px) 0px;
background-size:
5px 5px,
5px 5px,
0px 36px;
background-repeat: no-repeat;

}
.element-box select.element-select:disabled{border-color:#9e9e9e; color:#9e9e9e;background-image:
linear-gradient(45deg, transparent 50%, #9e9e9e 50%),
linear-gradient(135deg, #9e9e9e 50%, transparent 50%),
linear-gradient(to right, #9e9e9e , #9e9e9e );}
.element-box select.element-select:focus{
background-image:
linear-gradient(135deg, transparent 50%, #9E9E9E 50%),
linear-gradient(45deg, #9E9E9E 50%, transparent 50%),
linear-gradient(to right, #ccc , #9E9E9E );
background-position:
calc(100% - 19px) 1em,
calc(100% - 14px) 1em,
calc(100% - 36px) 0px;
background-size:
5px 7px,
5px 7px,
0px 36px;
background-repeat: no-repeat;	
	}
.element-box select.element-select.medium {
	color:var(--black);width:100%; height:36px; padding:5px 5px 5px 50px; background:#fefefe; border:1px solid var(--black);font-size:14px; font-weight:600;
	-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%, var(--black) 50%),
linear-gradient(135deg, var(--black) 50%, transparent 50%),
linear-gradient(to right, var(--black) , var(--black) );
background-position:
calc(100% - 19px) calc(50% + 1px),
calc(100% - 14px) calc(50% + 1px),
calc(100% - 36px) 0px;
background-size:
5px 5px,
5px 5px,
0px 36px;
background-repeat: no-repeat;
}
.element-box select.element-select.minimalis{min-width:120px; width:auto;padding-right:46px;}
.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,
0px 1.5em; padding-left:40px;
background-repeat: no-repeat;}
.element-box select.element-select.fw400{font-weight:400;}
.element-radio {cursor:pointer; font-size:12px;}
.element-radio.jawaban{display:inline-flex;}
.element-radio input[type="radio"]{opacity:1;border:2px solid var(--black);background:#fefefe;height:20px;width:20px;position:relative;top:5px;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:#fefefe; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid var(--black);}
.element-radio input:checked:before{position:absolute; width:8px; height:8px;top:4px; left:4px;background:var(--black); border-radius:8px; content:''; z-index:2;}
.element-radio input:disabled{opacity:1; background:#fefefe; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid var(--black); cursor: not-allowed;}
.element-radio input:disabled:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00d'; color:var(--black); 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 var(--black);background:#fefefe;height:20px;width:20px;position:relative;top:5px;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:#fefefe; border:2px solid var(--black);-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:var(--black); font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check input:disabled{opacity:1; background:#fefefe; border:2px solid var(--black);-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;}
/*button*/
button.sign-btn{width:100%;height:40px;background:#1a73e8; color:#fefefe;transition: all 0.3s ease-in-out;opacity:1;border:none;display:flex; align-items:center; justify-content: center; font-size:14px; font-weight:600;}
button.sign-btn.medium{height:36px;}
button.sign-btn.big{height:46px;}
button.sign-btn.minimalis{width:auto; padding:0 30px;}
button.sign-btn.small{height:32px;}
button.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.8;}
button.sign-btn.line{background:transparent; border:1px solid var(--black); color:var(--black);}
a.sign-btn{width:100%; height:50px; background:#1a73e8; color:#fefefe;transition: all 0.3s ease-in-out;opacity:1; display:flex; align-items:center; justify-content: center; border:none; text-align:center; font-weight:600;font-size:14px;}
a.sign-btn.big{height:60px;}
a.sign-btn.minimalis{width:auto; padding:0 30px; display: inline-flex; margin:0; text-align:center;}
a.sign-btn.medium{height:36px; font-size:14px;}
a.sign-btn.small{height:32px; font-size:14px;padding:0 15px;}
a.sign-btn.line{background:transparent; border:1px solid var(--black); color:var(--black);}
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.clean{border-color:transparent; color:var(--black);}
a.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.8;}
a.sign-btn.disable{cursor:not-allowed; background:#eeeeee;}
.element-box select.element-select.noicons, .element-box input.element-input.noicons, .element-box textarea.element-area.noicons{padding-left:10px !important; min-width:10px;}
ul.row-list{list-style: none; list-style-position: inside; margin:0 -8px; padding:0; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap;}
ul.row-list li{width:100%; padding:0 8px;}
ul.row-list.row2 li{width:50%; padding:0 8px;}
ul.row-list.row3 li{width:33.333%; padding:0 8px;}
ul.row-list.row4 li{width:25%; padding:0 8px;}
ul.row-list.row5 li{width:20%; padding:0 8px;}
ul.row-list.row6 li{width:16.666%; padding:0 8px;}
ul.row-list.row4.pad4, ul.row-list.row3.pad4, ul.row-list.row2.pad4, ul.row-list.row5.pad4,ul.row-list.row6.pad4{margin:0 -4px;}
ul.row-list.row4.pad4 li, ul.row-list.row3.pad4 li, ul.row-list.row2.pad4 li, ul.row-list.row5.pad4 li, ul.row-list.row6.pad4 li{padding:0 4px;}
ul.row-list.row4.pad16, ul.row-list.row3.pad16, ul.row-list.row2.pad16, ul.row-list.row5.pad16,ul.row-list.row6.pad16{margin:0 -16px;}
ul.row-list.row4.pad16 li, ul.row-list.row3.pad16 li, ul.row-list.row2.pad16 li, ul.row-list.row5.pad16 li, ul.row-list.row6.pad16 li{padding:0 16px;}
.block-all2 {width: 100%;height: 100%;position: fixed;background: rgba(37,41,50,0.95);z-index: 33;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center}
.box-search {height: 80px;max-width: 800px;margin: 0 auto;padding: 15px;background: 0 0;position: fixed;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); color:var(--black);}
.box-search button.search-btn {width: 50px;height: 50px;border: 1px solid transparent;position: absolute;right: 15px;top: 15px;background: 0 0; color:var(--black);}
/*card box*/
.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%;overflow:hidden;height:auto;margin:0 auto 12px auto; padding:0;opacity:1;transition: all .3s ease-in-out;}
.card-box .img-card .right-icons{display:flex; justify-content:center; align-items:center;width:24px; height:24px; position:absolute; right:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; font-size:11px;z-index:2; border-radius:6px 0 6px 0;}
.card-box:hover .img-card img{;opacity:0.8;transition: all .3s ease-in-out;}
.card-box .img-card img{width:100%; height:auto; display:block;transition: all .3s ease-in-out;}
.card-box .text-card{height:auto; width:auto; overflow:hidden; padding:0; position:relative;}
.card-box .text-card h1.title{transition: all .3s ease-in-out;font-size:32px;line-height:42px;margin: 0; font-weight:400;}
.card-box .text-card h2.title{transition: all .3s ease-in-out;font-size:24px;line-height:34px;margin: 0; font-weight:400;}
.card-box .text-card h3.title{transition: all .3s ease-in-out;font-size:18px;line-height:28px;margin: 0; font-weight:400;}
.card-box .text-card h4.title{transition: all .3s ease-in-out;font-size:16px;line-height:26px;margin: 0; font-weight:400;}
.card-box .text-card h5.title{transition: all .3s ease-in-out;font-size:14px;line-height:24px;margin: 0; font-weight:400;}
.card-box .text-card h6.title{transition: all .3s ease-in-out;font-size:12px;line-height:22px;margin: 0; font-weight:400;}
.card-box .text-card p{font-weight:400;margin:12px 0 0 0; letter-spacing: normal; font-size:14px; line-height:24px; color:#f2f2f2;}
.card-box .text-card .caption{font-weight:400;font-size:18px;line-height:29px;margin:0;}
.card-box .text-card p.fo14{font-size:14px; line-height:24px;}
.card-box .text-card h4.date{color:#9E9E9E; font-size: 12px;line-height: 14px; font-weight:400; margin:12px 0 0 0;word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}
.card-box figcaption.text-card h5.title{line-height:18px;}
.card-box .text-card .line1{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}
.card-box .text-card .line2{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.card-box .text-card .line3{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;}
.card-box .text-card .line4{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical;}
.card-box .text-card h4.date span.kanal{display:inline-flex; padding-right:20px; position:relative; font-weight:600;}
.card-box .text-card h4.date span.kanal::before{content:'\f111';position:absolute; right:7px; top:0;font-family: 'FontAwesome'; font-size:8px; color:#9E9E9E;}
/*top title*/
.card-box.toptitle .img-card{margin:0;}
.card-box.toptitle .text-card{position:absolute; bottom:0; left:0; right:0; z-index:2; padding:16px;background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );}
.card-box.toptitle .text-card a{color:#fff;}
.card-box.toptitle .text-card a:hover{color:#b3e3ff;}
/*card box left small*/
.card-box.l-xs{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.l-xs .img-card{float:left;position:relative;width:118px; height:75px; overflow:hidden;margin:0; padding:0;}
.card-box.l-xs .img-card img{width:100%; height:auto; display:block;}
.card-box.l-xs .text-card{padding:0 0 0 16px; min-height:75px; display:flex; justify-content:center; flex-direction:column;}
/*card box left medium*/
.card-box.l-sm{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.l-sm .img-card{float:left;position:relative;width:203px; height:120px; overflow:hidden;margin:0; padding:0;}
.card-box.l-sm .img-card img{width:100%; height:auto; display:block;}
.card-box.l-sm .text-card{padding:0 0 0 16px; min-height:120px; display:flex; justify-content:center; flex-direction:column;}
/*card box right large*/
.card-box.r-xl{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.r-xl .img-card{float:right;position:relative;width:372px; height:220px; overflow:hidden;margin:0; padding:0;}
.card-box.r-xl .img-card img{width:100%; height:auto; display:block;}
.card-box.r-xl .text-card{padding:0 16px 0 0; min-height:220px; display:flex; justify-content:center; flex-direction:column;}
/*base*/
.cd-main-content {min-height: 100%;position: relative;z-index:1;padding:0; -webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;margin:0 auto;padding-top:72px;}
.cd-main-content.clean{position:inherit; z-index:inherit;-webkit-transition-duration:inherit;-moz-transition-duration:inherit;transition-duration:inherit;}
.cd-main-content.lateral-menu-is-open {
/* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.overflow-hidden {overflow: hidden;}
.container{margin:0 auto; width:100%; max-width:1200px; padding:0 16px; position:relative;}
.container.big{padding:0 46px;}
.container.full{max-width:100%;}
.container.medium{max-width:1080px;}
.container.small{max-width:800px;}
.container-col{margin-left:-16px; margin-right:-16px;}
.col12{padding:0 16px; width:100%; float:none;}
.col11{padding:0 16px; width:91.66666666666666%; float:left;}
.col10{padding:0 16px; width:83.33333333333333%; float:left;}
.col9{padding:0 16px; width:75%; float:left;}
.col8{padding:0 16px; width:66.66666666666666%; float:left;}
.col7{padding:0 16px; width:58.33333333333333%; float:left;}
.col6{padding:0 16px; width:50%; float:left;}
.col5{padding:0 16px; width:41.66666666666667%; float:left;}
.col4{padding:0 16px; width:33.33333333333333%; float:left;}
.col3{padding:0 16px; width:25%; float:left;}
.col2{padding:0 16px; width:16.66666666666667%; float:left;}
.col1{padding:0 16px; width:8.333333333333333%; float:left;}
.block-all{position:fixed; background:rgba(0,0,0,0.7); top:0; left:0; right:0; bottom:0; z-index:8;}
/*mulai*/
.header{height:72px; width:100%; margin:0 auto; position:fixed; top:0; left:0; right:0; z-index:20; background:var(--black); border-bottom:2px solid #894E4E;}
.header .header-in{max-width:1200px; width:100%; height:70px; margin:0 auto; display:flex; justify-content:space-between;}
#cd-logo{margin:0; height:70px; width:auto; font-size:30px; display:inline-flex; justify-content:center; align-items:center; color:#fff; font-weight:normal; padding-left:16px; font-family:'Ultra';}
#logo-tempo{width:auto; height:56px; position:absolute; right:16px; top:0; display:flex; justify-content:center; align-items:center; color:#fff; cursor:pointer;}
#logo-tempo img{height:24px; width:auto;}

/*nav menu*/
nav.menu {margin:0; padding:0; height:70px;width:auto; float:right; font-size:14px; font-weight:500;}
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:70px; max-width:1200px;position: relative;display: inline-flex; align-items:center;}
nav.menu ul:after {content: ""; clear: both; display: block;}
nav.menu ul li {float: left; font-family:'Roboto';}
nav.menu ul li:hover {background:var(--black);}
nav.menu ul li:hover a {color:#ccc;background:var(--black);}
nav.menu ul li a {color:#f2f2f2;position:relative;padding:0 30px; height:38px;display:flex; align-items:center; justify-content:center;}
nav.menu ul li a.selected, nav.menu ul ul li a.selected{background:#894E4E; color:#fff; border-radius:4px;}
nav.menu ul ul {background: var(--black); border-radius: 0; padding: 0;position: absolute; top: 100%; height:auto; overflow:hidden;}
nav.menu ul ul li {float: none;}
nav.menu ul ul li a {padding: 15px 30px;color: #fff;background:var(--black);justify-content:flex-start;height:auto;}	
nav.menu ul ul li a:hover {background:var(--black);}
nav.menu ul ul ul {position: absolute; left: 100%; top:0;}
nav.menu ul ul.lang_sub{border-radius: 0 0 32px 32px;}
nav.menu ul li.lang_menu {height:70px; display:inline-flex; align-items:center;}
nav.menu ul li img, nav.menu ul li.lang_menu img{width:32px; height:32px; overflow:hidden; opacity:1;}
nav.menu ul li.lang_menu a{padding:16px 16px;}
nav.menu ul li.lang_menu a:hover img{opacity:0.8;}
/*blockbox*/
.blockbox{display:block; position:relative; margin:0; padding:0;}
.blockbox h2.titlebox{height:auto; font-size:25px; line-height:35px; font-weight:400; display:flex; align-items:center; margin-bottom:16px;font-family:'DM Serif Display';}
.blockbox h4.titlebox{height:25px; font-size:14px; font-weight:700; display:flex; align-items:center; margin-bottom:16px;}
.blockbox h1.titlebox{height:40px; font-size:24px; font-weight:700; display:flex; align-items:center; margin-bottom:16px;}
.blockbox h2.titlebox.between{justify-content:space-between;}
.selengkapnya{font-size:14px; font-weight:400;}
.blockbox.bignews{ overflow:hidden; border-radius:6px; background:#182958;}
.blockbox.noborder{padding-top:0; border-top:none;}
.titlekanal{padding:8px 16px; background:#182958; color:#fff; font-size:18px; font-weight:600;}
 /*pagging*/
ul.pagging {list-style: none;list-style-position: inside;margin:32px 0;padding: 0;display: flex;align-items: center;justify-content: center;min-height:36px; overflow:hidden; width:100%;}
ul.pagging li {min-width: 36px;height: 36px;margin:0 3px;display:flex; align-items:center; justify-content:center; font-size:18px;}
ul.pagging li a {min-width: 36px;height: 36px;display:flex; align-items:center; justify-content:center;padding: 5px;color: var(--black);}
ul.pagging li a:hover {color:#9E9E9E;}
ul.pagging li.select a {color: #AD120A; font-weight:600;}
/*detail - tag*/
.box-tag{display:block; min-height:36px; margin-bottom:56px;}
.box-tag.front a{padding:8px 24px; border-radius:18px; background:rgba(0,0,0,0.6); color:var(--white); min-height:36px; margin:0 4px 8px 0; display:inline-flex; justify-content:center; align-items:center;}
.box-tag.front a:hover{background:var(--maroon);}
/*share page*/
ul.share{padding:16px 0; margin:0; list-style:none; list-style-position:inside; overflow:hidden; position:fixed;background:#141619; width:50px; border-radius:50px; height:auto; right:12px; /*top:50%; transform: translate(0, -50%);*/ z-index:10; bottom:72px;}
ul.share li{margin:0 auto;}
ul.share li:first-child{font-size:9px; color:#fff; line-height:12px; font-family:'Roboto'; text-align:center; margin-top:8px; font-weight:600;}
ul.share li a{ width:50px; height:48px;color:#fefefe; text-align:center; line-height:34px; font-size:14px; display:flex; justify-content:center; align-items:center; transform:scale(1); font-size:24px;}
ul.share li a:hover {color:#ddd; transform:scale(1.3);}
.share-up {right: -90px !important;transition: right 0.2s ease-in-out; }
.share-down {right: 12px !important;transition: right 0.2s ease-in-out; }
/*detail*/
.detail-artikel{width:100%;margin:24px 0 64px 0;min-height: 10px; font-family:'PT Serif', Arial, sans-serif;}
.detail-artikel .detail-in{padding:15px 20px;}
.has-dropcap:first-letter {  float: left;  font-size: 6rem;  line-height: 0.65;  margin: 0.1em 0.1em 0.2em 0;}
.detail-artikel p{font-size:18px; line-height:28px; margin:0 0 24px 0; font-weight:400;}
.detail-artikel p a{font-weight:500; color:#bf202e; position:relative;}
.detail-artikel p a::before{content:''; position:absolute; height:8px; width:auto; left:-3px; right:-3px; bottom:0; background:#ECE287; z-index:-1;}
.detail-artikel p a:hover{color:#0070bd;}
.detail-artikel h2{margin:0 0 24px 0; font-weight:700; font-size:24px; line-height:34px;}
.detail-artikel h3{margin:0 0 24px 0; font-weight:700; font-size:22px; line-height:32px;}
.detail-artikel h4{margin:0 0 24px 0; font-weight:700; font-size:18px; line-height:28px;}
.detail-artikel h5{margin:0 0 24px 0; font-weight:700; font-size:16px; line-height:26px;}
.detail-artikel h6{margin:0 0 24px 0; font-weight:700; font-size:14px; line-height:24px;}
.detail-artikel .card-box{margin:0 0 24px 0;}
.detail-artikel .videoframe{margin-bottom:24px;}
.detail-artikel .caption{font-size:12px; line-height:14px; padding:10px 0; color:#B1B1B1; border-bottom:1px solid #444;}
.detail-artikel ul, .detail-artikel ol{margin:0 0 30px 0; padding-left:20px;}
.detail-artikel ul li, .detail-artikel ol li{font-size: 18px;line-height: 28px; margin:15px 0; padding-left:5px;}
.box-title-detail{padding:15px 0; overflow: hidden;}
.box-sumber{background:#fff; padding:10px 0; overflow:hidden; position:relative;display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap; z-index:2;}
.box-sumber .left-sumber{width:50%;}
.box-sumber .right-sumber{width:50%; text-align:right;}
.box-sumber .avatar-sumber{width:40px; height:40px; overflow:hidden; float:left; margin-right:10px; border-radius:25px; border:1px solid #ddd;}
.box-sumber .avatar-sumber img{width:auto; height:40px;}
.box-sumber .text-sumber{min-height:40px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
/*detail - baca juga*/
.detail-artikel .detail-in .baca-juga{border-left:2px solid #eee; padding-left:12px; margin:0 0 32px 0;}
.detail-artikel .detail-in .baca-juga h4.title{font-size:16px; line-height:21px; font-weight:600;}
.detail-artikel .detail-in .baca-juga a{color:#323C9F; font-size:18px; line-height:29px; margin:16px 0; font-weight:600;}
.detail-artikel .detail-in .baca-juga a:hover{opacity:0.7;}
/*detail - foto utama */
.box-foto-detail{margin:0 0 15px 0; overflow:hidden;}
.foto-detail{width:100%; height:auto;overflow:hidden; margin:0; border-radius:8px;}
.foto-detail img{width:100%; height:auto;}
.foto-detail figcaption{font-size:12px; line-height:20px; color:#747474;}
/*detail judul */
.detail-title{padding:0; overflow: hidden;margin:0 0 30px 0;}
.detail-title h1.title{margin:0; font-size:24px; line-height:34px; font-family:'DM Serif Display'; color:#fff;font-weight:400;}
.detail-title h4.date{font-size:12px; line-height:16px;margin:0; font-weight:400; color:#9E9E9E;}
/*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:#009ea9;}
ul.sitemap li:before{position:absolute;font-family: 'FontAwesome';content: '\f054'; top:4px; right:5px; font-size:8px; color:#009ea9;}
ul.sitemap li a{color:#009ea9;} ul.sitemap li a:hover{color:#333; }
ul.sitemap li:last-child{padding-right:0;}
ul.sitemap li:last-child:before{display:none;}

/*tambah2*/
.overflow-hidden {overflow: hidden}
.blackblock{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:19;}

.bg-credit{background:#f9f9f9;}
.bg-lainnya{background:#f2f2f2;}
.box-credit{position:relative; padding:32px 0 8px 0;}
.box-credit h2.title{font-size:24px; line-height:32px; margin:0 0 24px 0; text-align:center; font-weight:400;}
ul.row-list.list-credit{justify-content:center; font-family:'Roboto'; flex-flow:nowrap;}
ul.row-list.list-credit li{margin-bottom:24px; text-align:center; max-width:180px;}
ul.row-list.list-credit li h4{margin:0 0 8px 0; font-weight:500; font-size:16px; line-height:26px;}
ul.row-list.list-credit li p{margin:0; font-weight:400; font-size:12px; line-height:22px;}
ul.row-list.list-lainnya li{margin-bottom:16px;}
ul.row-list.list-artikel-lain li .card-box .img-card{height:170px;}
ul.row-list.list-artikel-lain li .card-box .img-card img{width:100%; height:100%; object-fit:cover;}
/* The switch - the box around the slider */
.switchTheme{position:fixed; right:12px; bottom:12px; width:50px; height:50px; z-index:10;transition: bottom 0.2s ease-in-out;}
.theme-switch {position: relative;display: inline-block;width: 50px;height:50px;}
.theme-switch {position: relative;display: inline-block;width:50px;height:50px;}
.theme-switch input {opacity: 0;width: 0;height: 0;}
.switchslider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color:transparent;-webkit-transition: .4s;transition: .4s;z-index:3;}
.switchslider:before {position: absolute;content:'';height: 50px;width: 50px;left: 0;bottom: 0;top:0;right:0;background-color:transparent;-webkit-transition: .4s;transition: .4s;display:flex; justify-content:center; align-items:center;background: url("../images/dark.png") center center no-repeat;background-size:100%;}
input:checked + .switchslider {background-color:transparent;}
input:focus + .switchslider {background: url("../images/light.png") center center no-repeat;background-size:100%;}
input:checked + .switchslider:before {/*-webkit-transform: translateX(18px);-ms-transform: translateX(18px);transform: translateX(18px);*/background: url("../images/light.png") center center no-repeat;background-size:100%;}
.switchslider.round {border-radius:25px;}
.switchslider.round:before {border-radius:25px;}
.switchTheme-up {bottom: -90px;transition: bottom 0.4s ease-in-out; }
.switchTheme-down {bottom: 12px;transition: bottom 0.4s ease-in-out; }
/*cover*/
.box-cover{width:100%; height:auto; overflow:hidden; position:relative;}
.box-cover .img-cover{width:100%; height:auto; margin:0 auto;}
.box-cover .img-cover.fix-height{height:570px; overflow:hidden;}
.box-cover .img-cover img{width:100%; height:auto;}
.box-cover .text-cover{padding:50px 16px; overflow:hidden; display:flex; justify-content:center; align-items:center;}
.box-cover .text-cover h4.kanal{color:#AD120A; margin:0 4px; font-size:14px; display:inline-flex; justify-content:center; align-items:center; font-family:'Roboto'; font-weight:700;}
.box-cover .text-cover h1.title{font-size:48px; line-height:58px; margin:0 0 30px 0; text-align:center;}
.box-cover .text-cover .text-cover-in{display:flex; justify-content:center; align-items:center; flex-direction:column; overflow:hidden; max-width:800px; margin:0 auto;}
.box-cover .text-cover .text-cover-in .head-cover{display:flex; justify-content:center; align-items:center; flex-direction:row; margin:0 0 12px 0;}
.box-cover .text-cover .text-cover-in .bott-cover{display:flex; justify-content:center; align-items:center; flex-direction:column; margin:12px 0 0 0; position:relative; padding:12px 0 0 0;min-width:100px;}
.box-cover .text-cover .text-cover-in .bott-cover::before{content:''; height:3px; width:100px; position:absolute; margin:0 auto; left:0; right:0; top:0; background:#AD120A;}
.box-cover .text-cover p{text-align:center; font-size:16px; line-height:24px; font-family:'Roboto'; font-weight:500;}
.box-cover .text-cover h4.title{font-size:14px; line-height:20px; font-family:'Roboto'; font-weight:700;}
.box-cover .text-cover h4.name{font-size:14px; line-height:20px; font-family:'Roboto'; font-weight:700;}
/*cover text-on-top*/
.box-cover.text-on-top {text-shadow:1px 1px 1px rgba(0,0,0,0.6);}
.box-cover.text-on-top .text-cover{position:absolute; left:0; right:0; bottom:0; top:0;background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%); z-index:4;}
.box-cover.text-on-top .text-cover {color:#fefefe;}
.box-cover.text-on-top .text-cover h4.kanal{color:#fefefe;}
.box-cover.text-on-top .text-cover .text-cover-in .bott-cover::before{background:#fefefe;}
/*cover text-on-top blur*/
.box-cover.text-on-top.img-blur .text-cover{backdrop-filter: blur(9px); background:rgba(0,0,0,0.8);}
.box-cover.text-on-top.vid-blur .text-cover{backdrop-filter: blur(9px); background:rgba(0,0,0,0.8);}
/*cover text-on-left*/
.box-cover.text-on-left .text-cover{position:absolute; left:0; right:50%; bottom:0; top:0;background:rgba(255,255,255,0.8); z-index:4; padding:50px ;backdrop-filter: blur(3px);}
.box-cover.text-on-left .text-cover .text-cover-in{align-items:flex-start;}
.box-cover.text-on-left .text-cover .text-cover-in .head-cover{align-items:flex-start;}
.box-cover.text-on-left .text-cover .text-cover-in .bott-cover{align-items:flex-start;}
.box-cover.text-on-left .text-cover .text-cover-in .bott-cover::before{left:-40px;}
.box-cover.text-on-left .text-cover h1.title{text-align:left;}
.box-cover.text-on-left .text-cover p{display:none;}
/*cover text-background*/
.box-cover.background-text .text-cover{position:absolute; left:0; right:50%; bottom:0; top:0;background:transparent; z-index:4; padding:50px}
.box-cover.background-text .text-cover .text-cover-in{align-items:flex-start;}
.box-cover.background-text .text-cover .text-cover-in .head-cover{align-items:flex-start;}
.box-cover.background-text .text-cover .text-cover-in .bott-cover{align-items:flex-start;}
.box-cover.background-text .text-cover .text-cover-in .bott-cover::before{left:-40px;}
.box-cover.background-text .text-cover h1.title{text-align:left; margin:0 0 18px 0;}
.box-cover.background-text .text-cover h1.title span{display: inline;
  background: #fff;
  color: var(--black);
  padding:0 8px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;}
/*
.box-cover.background-text .text-cover h1.title span {
  box-shadow: 10px 0 0 blue, 10px 0 0 blue;
}
*/
.box-cover.background-text .text-cover h4.kanal{margin:0;}
.box-cover.background-text .text-cover h4.kanal span{display: inline;
  background: #fff;
  padding:8px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone; margin:0;}
.box-cover.background-text .text-cover h4.title span{display: inline;
  background:#fff;
  padding:4px 8px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone; margin:0;}
.box-cover.background-text .text-cover h4.name span{display: inline;
  background:#fff;
  padding:4px 8px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone; margin:0;}
.box-cover.background-text .text-cover .text-cover-in .bott-cover::before{display:none;}
.box-cover.background-text .text-cover .text-cover-in .bott-cover{margin-top:0; padding-top:0;}
.box-cover.background-text .text-cover p{display:none;}

.pilih-cover{position:fixed; z-index:99; left:0; right:0; top:-90px; height:90px; background:rgba(172,195,244,0.9); padding:16px; font-family:'Roboto';transition: all 0.2s ease-in-out;}
.pilih-cover.munculin{top:0;transition: all 0.2s ease-in-out;}
.pilih-cover .button-pilih{width:auto; height:30px; display:flex; justify-content:center; align-items:center; position:absolute; right:0; bottom:-30px; z-index:99; background:rgba(172,195,244,0.9);  font-size:12px; padding:0 8px; cursor:pointer;}
.button-pilih:hover .pilih-cover{top:0;}
/*footer*/
.footer{background:#894E4E; padding:40px 0; overflow:hidden;font-size:14px;}
.box-menu-footer{margin-top:40px; margin-left:16px;}
.footer a.link{font-size:16px; line-height:24px;color:#fff; display:block; margin:0 0 6px 0; font-weight:400; font-family:'Roboto';}
.footer a.link:hover{color:#9E9E9E;}
.footer .logo-footer{width:auto; height:32px; display:inline-flex;}
.footer .logo-footer img{width:auto; height:32px;}
.footer .logo-footer svg{width:auto; height:32px;}
.footer .logo-footer .st0{fill:#fff;}
.footer .logo-footer .st1{fill:none;stroke:#fff;stroke-width:0.134;}
.footer .logo-footer .st2{fill:#fff;}
.footer .bottom-footer{border-top:1px solid #ededed; overflow:hidden; padding:16px 0 0 0;}
.footer .container .footer02{position:absolute; bottom:0; right:0;}
.footer .container .footer01{display:flex; align-items:flex-start; justify-content:space-between; flex-direction:column; min-height:144px;}
p.copy{color:#fff; margin-top:16px;font-family:'Roboto';}
ul.sosmed{padding:0; margin:0; list-style:none; list-style-position:inside; display:flex; justify-content:flex-end; align-items:flex-start; overflow:hidden;}
ul.sosmed li{display:inline-flex;margin:0 3px;width:40px; height:40px;}
ul.sosmed li a{ width:40px; height:40px; border:2px solid #fff; color:#fff; border-radius:20px; text-align:center; font-size:18px; display:inline-flex; justify-content:center; align-items:center;}
ul.sosmed li a:hover{color:#b1b1b1; border-color:#b1b1b1;}
ul.sosmed li a:hover img{opacity:0.5;}
ul.sosmed li:first-child{margin-left:0;}
/*menu respo*/
#cd-lateral-nav {
position:relative;
height:auto;
left:inherit;
top:inherit;
padding-top:0;
padding-bottom:0;
visibility:visible;
/* the secondary navigation is covered by the main element */
z-index:15;
width:auto;
background-color:var(--black);
overflow-y:hidden;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
-moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
transition: transform .4s 0s, visibility 0s .4s;
/* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  padding:0 16px;
  font-family: 'Roboto';
}
#cd-lateral-nav .cd-navigation{display:inline-flex; width:auto; flex-direction:row; list-style:none; list-style-position:inside; padding:0;margin:0;}
#cd-lateral-nav ul li a {color:#f2f2f2;position:relative;padding:0 24px; height:38px;display:flex; align-items:center; justify-content:center; font-weight:600; border-radius:4px;}
#cd-lateral-nav a:hover{color:#894E4E;}
#cd-lateral-nav ul li a.current {background: #894E4E; color:#fff;}
.lang{ list-style:none; list-style-position:inside; margin:0; padding:0 16px;height:auto; display:inline-flex; justify-content:center; align-items:center;}
.lang  a{border:1px solid #B1B1B1 ; background:#eee; text-shadow:1px 1px 1px #fff;height:32px; text-align:center; display:inline-flex; justify-content:center; align-items:center; padding:0 16px; font-size:14px; border-radius:15px; margin:0 4px; color:#B1B1B1;}
.lang  img{width:16px; height:16px; float:left; margin-right:4px; filter:grayscale(100%); opacity:0.5;}
.lang  a.active img{filter:grayscale(0%); opacity:1;}
.lang a.active{border:1px solid var(--black); color:var(--black); background:#fff;}
.lang  a:hover{color:#B1B1B1 !important;}
.lang a.active:hover{color:rgba(0,0,0,0.7);}
.lang .t-ico{padding:0; margin:0;border:none; background:transparent; text-shadow:none;height:47px; margin-left:16px;}
.lang .t-ico img{width:auto; height:24px; opacity:1; filter:grayscale(0%); margin:0;}
/*artikel*/
.detail-artikel .detail-in p{color:#fefefe;}
ul.row-list.list-lainnya li a{color:#fefefe;}
ul.row-list.list-lainnya li a:hover{color:#b1b1b1;}
/*tambahan*/

.footer{background:var(--black);}
.box-peta{border-radius:10px; background:var(--red); box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); color:var(--white);}
.box-peta .head{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:16px; border-bottom:1px solid #9b0c07;}
.box-peta .inside{padding:16px; overflow:hidden;}
.box-peta .inside h3{margin:0 auto 24px auto; font-size:24px; line-height:28px; text-align:center;}
.img-comp-container {
  position: relative;
  height: 400px; /*should be the same height as the images*/
  left:auto; right:auto;
  border-radius:6px;
  overflow:hidden;
}

.img-comp-img {
  position: absolute;
  overflow:hidden;
}

.img-comp-img img {
  display: block;
  width: 800px;
  height: 400px;
}

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}
/*tambahan*/
/*timeline*/
.box-timeline{margin:30px auto; max-width:600px; overflow:hidden; padding:0; position:relative;}
.box-timeline::before{content:''; position:absolute; width:3px; top:0; left:10px; bottom:0; background:#ededed;}
.box-timeline .tml-item{position:relative; margin-bottom:32px;}
.box-timeline .tml-item .point{width:22px; height:22px; background:#D10609; border-radius:50%; float:left; border:2px solid #f8f8f8; margin-top:14px;}
.box-timeline .tml-item .tml-box{padding:16px; margin-left:40px; border-radius:4px; background:#f9f9f9; border:2px solid #ededed; position:relative; min-height:100px;}
.box-timeline .tml-item .tml-box h3.title{font-size:20px; line-height:24px; margin:0 0 16px 0;}
.box-timeline .tml-item .tml-box::before{content:''; position:absolute; top:8px; left:-15px;width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #ededed transparent transparent;}
.box-timeline .tml-item .tml-box::after{content:''; position:absolute; top:10px; left:-13px;width: 0;
height: 0;
border-style: solid;
border-width: 13px 13px 13px 0;
border-color: transparent #f9f9f9 transparent transparent;}
.box-timeline .tml-item ol{padding-left:24px;}
.box-timeline .tml-item ol li{margin-bottom:16px;}
.box-timeline .tml-item:last-child{margin-bottom:0;}

.row-list.list_foto{padding:0;}
.row-list.row3.list_foto li{padding:0 1px; margin:0; height:500px;}
.row-list.list_foto li .card-box .img-card{width:auto; height:500px; display:flex; justify-content:center; align-items:center;}
.row-list.list_foto li .card-box .img-card img{width:auto; height:100%;}
.row-list.list_foto li:nth-child(2) .box1{height:199px;margin-bottom:2px;}
.row-list.list_foto li:nth-child(2) .box2{height:299px;}
.row-list.list_foto li:nth-child(2) .box1 .card-box .img-card{width:auto; height:199px; display:flex; justify-content:center; align-items:center;}
.row-list.list_foto li:nth-child(2) .box2 .card-box .img-card{width:auto; height:299px; display:flex; justify-content:center; align-items:center;}
.row-list.list_foto li:nth-child(3) .box1{height:299px;margin-bottom:2px;}
.row-list.list_foto li:nth-child(3) .box2{height:199px;}
.row-list.list_foto li:nth-child(3) .box1 .card-box .img-card{width:auto; height:299px; display:flex; justify-content:center; align-items:center;}
.row-list.list_foto li:nth-child(3) .box2 .card-box .img-card{width:auto; height:199px; display:flex; justify-content:center; align-items:center;}
.row-list.row3.list_foto li a{display:flex; justify-content:center; align-items:center;}