html {font-family:'Calibre','Roboto', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:18px; line-height:22px; -webkit-font-smoothing: antialiased;  color:#333;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: #000;}
small {font-size: 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;}
/*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.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s 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: #333;text-decoration: none;}
a:hover, a:focus {color: #999;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

body::-webkit-scrollbar {width:6px; background:rgba(255,255,255,0.1);}
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
body::-webkit-scrollbar-thumb {background-color:#666666;}
body::-webkit-scrollbar:horizontal {height:6px;}
body::-webkit-scrollbar:vertical {width:6px;}

@media screen and (min-width:801px){
#cd-lateral-nav::-webkit-scrollbar {width:6px; background:rgba(255,255,255,0.1);}
#cd-lateral-nav::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
#cd-lateral-nav::-webkit-scrollbar-thumb {background-color:#666666;}
#cd-lateral-nav::-webkit-scrollbar:horizontal {height:6px;}
#cd-lateral-nav::-webkit-scrollbar:vertical {width:6px;}
}
.padding-no {padding:0 !important;}.padding-xs{padding:5px 15px;}.padding-sm{padding:10px 30px;}.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-xs {margin-ss: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;}
.hidden{opacity: 0;}.visible{opacity: 1;}.left{float:left !important;}.right{float:right !important;}
.glower {-webkit-animation: glow .5s infinite alternate;}
@-webkit-keyframes glow {to {text-shadow: 1px 1px 20px rgba(0,255,255,0.5);}}
/*body*/
body{margin:0 auto; padding:0; display:block;}
.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:#333; color:#fff;}
p{margin:15px 0;}
.overflow-hidden {overflow: hidden;}
.container{margin:0 auto; max-width:1200px; padding:0 15px; display:block; min-height:20px; position:relative;}
.container.full{max-width:100%;}
.container.small{max-width:1020px;}
.container.smaller{max-width:800px;}
.container-col{margin-left:-15px; margin-right:-15px;}
.container.pad30{padding:0 30px;}
.container.detail-products{max-width:100%;}
.mainbody{position:relative; width:100%; padding:0 15px; margin:0 auto; max-width: 1200px; overflow:hidden;}

/*scroll up*/
.scrollup {display:none; border:3px solid #333; position: fixed; width:50px; height:50px; z-index:5; bottom:10px; right:10px; cursor: pointer;opacity:1;filter: alpha(opacity=30);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; cursor:pointer;color:#333; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.4);}
.scrollup:hover{opacity:0.9;filter: alpha(opacity=90);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; border-color:#999; color:#999;}

/*color*/
.cl-white{color:#fff !important;}
.cl-grayc{color:#ccc !important;}
.cl-graye5{color:#e5e5e5 !important;}
.cl-black28{color:#282828 !important;}
.cl-gray9{color:#999 !important;}
.cl-black{color:#333 !important;}
.cl-red{color:#d71920  !important;}
/*bg*/
.bg-white{background:#fff !important;}
.bg-grayc{background:#ccc !important;}
.bg-graye5{background:#e5e5e5 !important;}
.bg-black28{background:#282828 !important;}
.bg-gray9{background:#999 !important;}
.bg-black{background:#333 !important;}
.bg-red{background:#d71920 !important;}
/*cmd*/
.hide_desktop{display:none; visibility:hidden;}
.nopad{padding:0;}
.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 {
position:fixed;
top: 0;
left: 0;
height:50px;
width: 100%;
background:#fff;
z-index:6;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
display:none;
}
header.showhead{display:block;}
.showhead.shadows{display:block; box-shadow: 1px 1px 9px rgba(0,0,0,0.1);}
header.lateral-menu-is-open {
/* translate to show the lateral menu */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);}
header.is-fixed {position: fixed;}
.header-in{padding:0;margin:0 auto;  height:54px;}
.header-in h1.logos{padding:15px 0; font-size:18px;font-family: 'Calibre Bold', 'Roboto'; lefT:0; right:0; top:0; position:absolute;}
.header-in h1.logos img{height:30px; width:auto; display: block; margin:0 auto;}
.cd-main-content {
    min-height: 100%;
    position: relative;
    background: #fff;
    z-index: 2;
    padding-top:50px;
 -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
	background:#fff;
}
.cd-main-content.lateral-menu-is-open {

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);

}
#cd-top-nav {position: absolute;top: 0;left: 120px;height: 100%;display: none;}
#cd-top-nav ul {height: 100%;padding-top: 18px;}
#cd-top-nav li {display: inline-block;margin-right: 1em;}
#cd-top-nav a {display: inline-block;padding: .5em;color: #FFF;text-transform: uppercase;font-weight: 600;}
.no-touch #cd-top-nav a:hover {color: rgba(255, 255, 255, 0.7);}
#cd-menu-trigger {width:50px;height:50px;position:absolute;left:0; top:0;display: flex;align-items: center;justify-content: center; flex-direction:row; padding:0 15px; z-index: 2;}
.right-menu {width:50px;height:50px;position:absolute;right:0; top:0;display: flex;align-items: center;justify-content: center; flex-direction:row; padding:0 15px; z-index: 2;}
.right-menu i{font-size:20px; color:#333;}
.left-menu {width:50px;height:50px;position:absolute;left:0; top:0;display: flex;align-items: center;justify-content: center; flex-direction:row; padding:0 15px; z-index: 2;}
.left-menu span{font-size:16px; margin-left:10px; font-weight:600;}
.left-menu i{font-size:22px; color:#333;}
#cd-menu-trigger .cd-menu-text {height: 100%;text-transform: uppercase;color: #fff;font-weight: 600;display: none;}
#cd-menu-trigger .cd-menu-icon {display: inline-block;position: absolute;left:15px;top: 50%;bottom: auto;right: auto;
/*-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
	*/width:20px;height:2px;background-color: #333;}
.blackblock{width:100%; height:100%; position:fixed; z-index:3; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display: none;}
#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after {content: '';width: 100%;height: 100%;position: absolute;background-color: inherit;left:0;}
#cd-menu-trigger .cd-menu-icon::before {bottom:7px;}
#cd-menu-trigger .cd-menu-icon::after {top:7px;}
#cd-menu-trigger.is-clicked .cd-menu-icon, #cd-menu-into.is-clicked .cd-menu-icon {background-color: rgba(255, 255, 255, 0);}
#cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after {background-color: #333;}
#cd-menu-trigger.is-clicked .cd-menu-icon::before {bottom: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#cd-menu-trigger.is-clicked .cd-menu-icon::after {top: 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#cd-lateral-nav {
position: fixed;
height: 100%;
top:50px;
padding:0;
visibility: hidden;
/* the secondary navigation is covered by the main element */
z-index:5;
width: 240px;
background-color:#fff;
overflow-y: auto;
/* 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: translateX(-240px);
-moz-transform: translateX(-240px);
-ms-transform: translateX(-240px);
-o-transform: translateX(-240px);
transform: translateX(-240px);
font-weight:700;

}
#cd-lateral-nav .cd-navigation {margin:0;list-style:none; list-style-position:inside; padding:0;  text-transform:uppercase;width:100%;}
#cd-lateral-nav .sub-menu {padding: 0;display: none;list-style:none; list-style-position:inside;border:none !important; font-weight:700; background: #fff;}
#cd-lateral-nav a {display: block;padding:15px 40px 15px 15px;color:#333;position:relative;font-size: 14px;}
#cd-lateral-nav a:hover{background:#eee; color:#d71920;}
#cd-lateral-nav a:hover img{opacity:0.5;}
.no-touch #cd-lateral-nav a:hover {color: #FFF;}
#cd-lateral-nav .sub-menu a, .sub-menu li{padding:15px 40px 15px 25px; text-transform:none; position:relative; top:1px; border-bottom:1px solid #eee; color:#939598;}
#cd-lateral-nav .sub-menu li{padding:0;}
#cd-lateral-nav.lateral-menu-is-open {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
visibility: visible;
-webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
-moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
transition: transform .4s 0s, visibility 0s 0s;
-webkit-overflow-scrolling: touch;
}
#cd-lateral-nav a.current, #cd-lateral-nav  a:hover.current {background-color:#333;color:#fff !important;}
#cd-lateral-nav > ul > li img{height:22px; width:auto;}
#cd-lateral-nav .item-has-children > a {position: relative;}
#cd-lateral-nav .item-has-children > a::after {content: '\f107';display: block;position: absolute;top: 50%;bottom: auto;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);right:14px;font-family: 'FontAwesome';-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;transition-property: transform;-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;transition-duration: 0.2s;color:#999;}
#cd-lateral-nav .item-has-children > a.submenu-open::after {-webkit-transform: translateY(-50%) rotate(180deg);-moz-transform: translateY(-50%) rotate(180deg);-ms-transform: translateY(-50%) rotate(180deg);-o-transform: translateY(-50%) rotate(180deg);transform: translateY(-50%) rotate(180deg);}
#cd-lateral-nav .cd-navigation li.toplogos{margin:0; position:relative; padding:30px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(205,205,205,1) 90%); display: flex; align-items:center; justify-content: center; flex-direction: column;}
#cd-lateral-nav .cd-navigation li.toplogos img{width:100%; height:auto; margin:0 auto;}
#cd-lateral-nav .cd-navigation li.toplogos a.head-btn{height:40px; display: flex; align-items:center; justify-content: center;padding:0; margin:0; border-radius:4px; background:rgba(0,0,0,0.1); font-weight:400; border:1px solid #bbb; font-size:14px !important; color:#bbb; min-width:90px; padding:0 15px;}
#cd-lateral-nav .cd-navigation li.toplogos a.head-btn:hover{background:#333; color:#fff; border-color: #fff;}
#cd-lateral-nav .cd-navigation li.toplogos a{padding:0; background: transparent;}
.pad255{padding-left: 275px;}
#cd-lateral-nav .item-has-children > a.submenu-open{background:#939598; color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
#cd-lateral-nav .item-has-children > a.submenu-open::after {color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
#cd-lateral-nav .sub-menu.sub-satu a{padding-left:35px !important;font-weight:500; font-size:14px;}
#cd-lateral-nav .sub-menu.sub-dua a{padding-left:45px !important;font-weight:500; font-size:14px;}
#cd-lateral-nav .sub-menu.sub-tiga a{padding-left:55px !important; padding-top:10px; padding-bottom:10px;font-weight:500; font-size:14px;}
#cd-lateral-nav .item-has-children.sub > a.submenu-open{background:#fff !important; color:#d71920 !important; text-shadow:none;}
#cd-lateral-nav .item-has-children.sub > a.submenu-open::after {color:#d71920; text-shadow:none;}
#cd-lateral-nav .sub-menu.sub-satu a:hover, #cd-lateral-nav .sub-menu.sub-dua a:hover, #cd-lateral-nav .sub-menu.sub-tiga a:hover{color:#333;}
/*bghomepage*/
#myVideo {
  position:fixed;
  right: 0;
  bottom: 0;
	top:0;
	left:0;
  	width:100%; 
  height:auto;
  display: flex;
	align-items: center;
	justify-content: center;
text-align: center;
margin: 0 auto;
   overflow: hidden;
}
/* Add some content at the bottom of the video/page */
.content-video {
position:fixed;bottom: 0;top:0;left:0;right:0;margin:0 auto;color: #f1f1f1;width: 100%;padding:0;display:flex; align-items:center; justify-content: center; flex-direction: column;height:100vh;z-index: 3; background:rgba(0,0,0,0.4);
}
.quote-font{ font-family:'Martel', Helvetica, Arial, 'sans-serif'; font-size: 18px; line-height: 22px;}
.content-video .content-video-in{max-width:700px;width: 100%;padding:15px;display:flex; align-items:center; justify-content: center; flex-direction:column;height:100vh; margin:0 auto;}
.content-video-in .logo-intro{margin:0 auto 30px auto; height:auto; width:100px;}
.content-video-in .logo-intro img{width:100%; height:auto; margin:auto;}
.content-video-in h1.title{font-size:46px; line-height:50px; margin:30px 0 0 0; font-weight:800;}
.col-video-50{width:50%; float:left; padding:0 15px;}
ul.icons-products{list-style: none; list-style-position:inside; margin:0 auto; padding:0; width:100%; text-align: center;}
ul.icons-products li{width:140px; display: inline-table;padding:0 5px; position: relative; margin:10px auto;}
ul.icons-products li a .theicons{width:120px; height:120px; border:8px rgba(255,255,255,0.5) solid; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content: center; color:rgba(255,255,255,0.5);transition: all .2s ease-in-out; overflow: hidden;}
ul.icons-products li a:hover .theicons{border-color: #fff; color:#fff;transform: scale(1.1); background:rgba(215,24,33,0.8);}
ul.icons-products li p.title{margin:10px auto 0 auto; text-align: center; text-transform: uppercase;font-weight:700; font-size:14px; line-height: 18px;transition: all .2s ease-in-out;color:rgba(255,255,255,0.2);}
/*ul.icons-products li p.title::before{content:''; position:absolute; bottom:-10px; left:auto; right:auto; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #fff transparent transparent transparent;}*/
ul.icons-products li:hover p.title{color:rgba(255,255,255,1);transition: all .2s ease-in-out;}
/* Style the button used to pause/play the video */
a.button{height:46px; display:flex; align-items:center; justify-content: center;padding:0 20px; margin:0; border-radius:4px; background:rgba(0,0,0,0.1);  min-width:120px;}
a.button:hover{opacity:0.8;}
a.button.clean{ border:1px solid rgba(0,0,0,0.2); background:#f9f9f9; color:#999;}

.cover-banner{width:100%; height:auto; margin:0 auto;}
.cover-banner img{width:100%; height:auto;}
.cover-banner.vertical{width:auto; height:100%; margin:0 auto;}
.cover-banner.vertical img{width:auto; height:100%; margin:0 auto;}
h4.product-name{font-size:16px; line-height:18px; margin:30px 0 0 0; color:#999; text-transform: uppercase; font-weight: 400; display:flex; align-items:center; justify-content:center;}
h4.product-name img{width:auto; height:20px;}
h2.product-title{font-size:40px; line-height:42px; margin:0 0 80px 0; position:relative; font-family:'Calibre Bold', 'Roboto';}
/*h2.product-title::after{content:'';position:absolute; width:100px; height:5px; background:#dddddd; left:0; right:0; bottom:-15px; margin:0 auto; text-align:center;}*/
/*landing menu*/
ul.landing-menu{list-style:none; list-style-position:inside; margin:0 auto; padding:0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center;}
ul.landing-menu li{width:20%; height:100vh; overflow:hidden; position:relative;}
ul.landing-menu li .cover-link{width:100%; height:100vh; position:relative;display:flex; flex-flow:row wrap; align-items:center; justify-content:center;}
ul.landing-menu li .text-link{position:absolute; top:0; bottom:0; left:0; right:0;display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:rgba(0,0,0,0);transition: all .35s ease-in-out; padding:15px;}
ul.landing-menu li h2.title-link{ text-align:center; color:#333; font-size:30px; font-weight:700; z-index:2; display:block;transition: all .35s ease-in-out;font-family:'Calibre Bold'}
ul.landing-menu li .cover-link img{width:100vw; height:100vh;transition: all .35s ease-in-out; transform:scale(1);}
ul.landing-menu li:hover .cover-link img{transition: all .35s ease-in-out; transform:scale(1.1);}
ul.landing-menu li:hover .text-link{background:rgba(0,0,0,0.7);transition: all .35s ease-in-out;}
ul.landing-menu li:hover h2.title-link{color:#fff;}
/*box iklan*/
.box-left{width:65%; float:left;padding:0 30px 0 15px;}
.box-right{width:35%; float:left;padding:0 15px 0 30px;}
.box100{width:100%; padding:0 15px; clear:both;}
.box50{width:50%; float:left; padding:0 15px; position:relative;}
.box60{width:60%; float:left; padding:0 15px;}
.box40{width:40%; float:left; padding:0 15px;}
.box70{width:70%; float:left; padding:0 15px; position:relative;}
.box30{width:30%; float:left; padding:0 15px; position:relative;}
/*boxfront*/
.boxfront{position:relative; overflow: hidden; width:100%; height: auto;}
.boxfront .textfront{position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction: column; align-items: center; justify-content: center;z-index: 4;}
.boxfront .textfront h1.title{font-size:36px; line-height: 38px; text-align: center; padding:0 15px; color:#333; margin:0 auto; font-family: 'Calibre Bold'}
.boxfront .textfront .thelogo{position:absolute; top:15px; left:auto; right:auto; width:100%; margin:0 auto; display:flex; align-items: center; justify-content: center;}
.boxfront .textfront .thelogo img{width:50px; margin:0 auto;}
.boxfront .textfront .thearrow{flex-direction:column; position:absolute; bottom:15px; left:auto; right:auto; width:100%; margin:0 auto; display:flex; align-items: center; justify-content: center; text-align: center;}
/*boxkanal*/
.boxkanal{position:relative; overflow: hidden; width:100%; height: auto;}
.boxkanal .textkanal{position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction: column; align-items: center; justify-content: center;z-index: 4;}
.boxkanal .textkanal h1.title{font-size:36px; line-height: 38px; text-align: center; padding:0 15px; color:#333; margin:0 auto; font-family: 'Calibre Bold'}
.boxkanal .textkanal .thelogo{position:absolute; top:15px; left:auto; right:auto; width:100%; margin:0 auto; display:flex; align-items: center; justify-content: center;}
.boxkanal .textkanal .thelogo img{width:50px; margin:0 auto;}
.boxkanal .textkanal .thearrow{flex-direction:column; position:absolute; bottom:15px; left:auto; right:auto; width:100%; margin:0 auto; display:flex; align-items: center; justify-content: center; text-align: center;}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
/*breadcrumbs*/
.breadcrumbs{margin:15px auto 5px auto; display:block; padding:0; overflow:hidden;}
.breadcrumbs-in{margin:0 auto;  padding:0; display:block;}
ul.sitemap{list-style:none; list-style-position:inside; margin:0; padding:0; display:flex; align-items:center; justify-content:center;}
ul.sitemap li{float:left; padding-right:20px; position:relative; font-size:13px; font-weight:300; text-transform:uppercase; color:#999;}
ul.sitemap li:before{position:absolute;font-family: 'FontAwesome';content: '\f054'; top:0; right:5px; font-size:8px; color:#999;}
ul.sitemap li a{color:#999;} ul.sitemap li a:hover{color:#333}
ul.sitemap li:last-child{padding-right:0;}
ul.sitemap li:last-child:before{display:none;}
/*boxbox*/
.boxbox{display: block; overflow:hidden; margin:0 0 30px 0; border-radius:4px;}
.boxbox .boxhead{display:block; padding:15px; background:#d2eced;}
.boxbox .boxhead h2.title{font-size:18px; text-transform: uppercase;line-height:20px; font-weight:600; font-family: 'Calibre Bold'; color:#94b5b6; text-shadow:1px 1px 1px rgba(255,255,255,1); }
.boxbox  h3.title{font-size:16px; text-transform: uppercase;line-height:18px; font-weight:600; font-family: 'Calibre'; color:#333; margin:0 0 15px 0;}
.boxbox .boxbody{padding:15px; display:block; background:#eef6f6; text-shadow:1px 1px 1px rgba(255,255,255,1); }
.boxbox .boxbody ul{margin:15px 0; padding-left:30px; list-style: circle;}
.boxbox .boxbody ul li{line-height:20px; font-size:16px; margin:5px 0;}
/*table box*/
.table-out{border:1px solid #dddddd; border-radius:4px; overflow: hidden; height:auto;}
.table-box {margin:0px;padding:0px;width:100%;border:none;}
.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:hover td{}.table-box tr:nth-child(odd){ background-color:#fff; }
.table-box tr:nth-child(even){ background-color:#fff; }
.table-box td{vertical-align:middle;border:1px solid #dddddd;border-width:0px;padding:10px 15px;font-size:14px;color:#000000;font-weight:400;  line-height:20px;}
.table-box tr.tablehead td{border:none; background:#dddddd; font-weight:600; padding:5px; color:#333; font-size:16px; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(255,255,255,1);}
.table-box tr.tablehead:first-child{border-top:none;}
.table-box tr.tablehead{border-top:1px solid #dddddd;}
.table-box tr {border-top:1px solid #dddddd;}
.table-box tr.tablehead td p{margin:6px 0;}
.table-box ul{list-style:circle; padding-left:20px; margin:0; font-size:14px; line-height:20px;}
.table-box ul li{margin:3px 0;}
.icon-table{width:30px; height:30px; border:1px solid #dddddd; border-radius:15px; background:#fff; color:#333; display:flex; align-items:center; justify-content:center; float:left; margin-right:10px; font-size:12px;}

/*footer*/
.footer{overflow:hidden;width:100%; margin-top:30px; position:relative;}
.footer .footer-in{background:#fff; border-top:1px solid #eee; padding:4px 15px;  width:100%;color:#333;}
p.copy{font-size:11px; margin:0 auto; font-family:'Calibre', 'Roboto';}

/*contact form*/
.contact-form{max-width:600px; margin:0px auto; overflow:hidden; height:auto; background:#fff; position:relative; z-index:100;}
.contact-form .popup-inside{overflow-y:scroll;width:100%;height:100%;padding:75px 15px 30px 15px;}
.contact-inside h4.title{margin:0 0 15px 0; font-size:16px; line-height:18px; text-transform:uppercase;}
.contact-inside .area100{width:100%; margin:0 0 5px 0; padding:0;}
.contact-inside .area50{width:50%; margin:0 0 5px 0; float:left; padding:0 15px;}
.contact-inside .contact-area{margin:0; position:relative;}
.contact-area .form-area{width:100%; border:1px solid #dddddd; font-size:16px; line-height:18px; padding:10px 10px 10px 40px; min-height:42px;}
.contact-area .form-icon{position:absolute; width:42px; height:100%; left:0; top:0; text-align:center; padding:10px 10px 0 10px; color:#ccc;}
.contact-inside .form-label{display:block;padding-bottom:5px; font-size:12px; font-weight:400; color:#333;}
.contact-inside .send-button{width:auto; height:40px; color:#fff; border:none; background:#d71920; padding:0 30px;}
.contact-inside .send-button:hover{background:#333; color:#fff}
.contact-area:hover .form-icon i{color:#333;}

/*link-contact*/
.fix-contact a{position:fixed; bottom:30px; 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; display: flex; align-items: center; justify-content: center;}
.fix-contact a:hover{opacity:1;background:#333; color:#fff;}


.artikel{padding:0; width:100%; overflow: hidden;}
.artikel.for-news{width:70%;padding:0 15px;position:relative;float:left; }
.fix-left{ width:15%; height:100vh; padding:0 15px; float:left; padding-top:0;}
.fix-right{ width:15%; height:100vh; padding:0 15px; float:left; padding-top:0;}
.artikel .inner{padding-top:65px;overflow:hidden;}
.artikel p{font-size:18px; line-height:22px; margin:0 0 30px 0; font-family:'Calibre','Roboto';}
.artikel h2.title{font-size:26px; line-height:28px; margin:0 0 15px 0; font-family:'Calibre Bold';}
.box-judul-artikel{margin:30px 0; overflow: hidden;}
.box-judul-artikel h1.title{margin:15px 0; font-size:50px; line-height:52px;  font-family:'Calibre';}
.box-judul-artikel h3.date{font-size:16px; line-height: 18px; margin:0; font-family: 'Calibre Thin'; text-transform: uppercase;}
.box-judul-artikel .box-icon h3.name{font-size:16px; line-height: 18px; margin:0; font-family: 'Calibre Thin';}
.box-judul-artikel .box-icon{display:flex; align-items:center; justify-content: flex-start;}
.box-icon .icons{width:40px; height:40px; border-radius:50%; float:left; overflow:hidden; border:1px solid #ddd;display:flex; justify-content: center;}
.box-icon .icons img{width:40px; height:40px;}
.box-icon .date-name{padding-left:10px; min-height: 40px;display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.box-foto-artikel{margin:30px auto; overflow:hidden;}
.box-foto-artikel .foto-artikel{width:100%; height:auto; margin:0 auto; overflow:hidden;}
.box-foto-artikel .foto-artikel img{width:100%; height:auto;}
.box-share{overflow:hidden; display: none;  position:absolute; top:40%; left:15px; right:15px;width:119px;}
.box-share ul.share{list-style: none; list-style-position: inside;margin:0; z-index: 2;width:100%; padding:0; height:auto;}
ul.share li a{margin:5px 0; height:40px; width:100%; padding:0 10px; display:block;border-radius:4px; display: flex; align-items:center; justify-content: flex-start;}
ul.share li a:hover{opacity:0.7;}
ul.share li span{font-size:13px; margin-top:4px; padding-left:10px;}
#top-search{cursor:pointer;}
.block-black{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; z-index:100;}
.block-black .close-btn{width:50px; height:50px; position:absolute; right:0; top:0; background:#d71920; z-index:101; color:#fff; cursor:pointer;}
.block-black .close-btn:hover{background:#333; color:#d71920;}
.block-black .search-desktop{width:100%; height:80px; margin:0 auto; position:relative;}
.block-black .search-desktop .search-input{width:100%; height:80px; border:1px solid #ddd; border-radius:8px; background:#fff; color:#333; padding:15px 80px 15px 30px; font-size:40px; line-height:44px;}
.block-black .search-desktop .search-button{width:80px; height:80px; position:absolute; top:0; right:0; color:#d71920; border:none; background:transparent; font-size: 40px; display:flex; align-items: center; justify-content: center;}
.block-black .search-desktop .search-button:hover{color:#333}

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; overflow:hidden;}
ul.row-list li{width:100%; padding:0 15px; overflow:hidden;}
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;}

.spinner {  margin:0 auto;  width:140px;  text-align: center;}
.spinner > div {  width: 16px;  height: 16px;  background-color: #e2edfa;  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 .bounce1 {  -webkit-animation-delay: -0.32s;  animation-delay: -0.32s;}
.spinner .bounce2 {  -webkit-animation-delay: -0.16s;  animation-delay: -0.16s;}
@-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);  }}