.mobile-only, .mobile-bottom{display:none;}
.body-absolute{position:absolute;left:0;top:0;right:0;margin:0;}
.headtop{position:absolute;top:0;left:0;right:0;z-index:500;background:rgba(255,255,255,0);}
.ifscroll .headtop{position:fixed;background:var(--cwhite);box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);}
.headtop-inner{margin:0 10%;}
.head-logo{margin:10px 0;}
.head-logo img{display:block;width:auto;height:7vh;}
.head-logo h1{font-size:160%;margin:0 0 0 10px;padding:0;line-height:1;font-family: 'roboto-700', Arial, sans-serif;}
.top-line{position:fixed;top:0;left:0;right:0;height:5vh;background:var(--cwhite);z-index:110;}
.hometop{position:absolute;left:0;top:0;right:0;margin:0;overflow:hidden;}
.gonjong{position:absolute;left:0;top:5vh;right:0;z-index:100;margin:-1px 0 0;overflow:hidden;}
.gonjong1{position:relative;overflow:hidden;width:calc(100% + 2px);margin:0 -1px;}
.gonjong2{position:absolute;left:-1px;top:0;right:-1px;opacity:0.55;}
.gonjong1 svg, .gonjong2 svg{display:block;width:calc(100% + 2px);height:auto;line-height:1;fill:var(--cwhite);overflow:hidden;margin:0 -1px;}
.footer-area .gonjong{position:relative;left:0;top:auto;right:0;margin:-6px 0 0;overflow:hidden;}
.wave-bg{position:relative;height:100vh;overflow:hidden;background:var(--cblack);}
.wave-svg{position:absolute;left:0;bottom:auto;right:0;top:0;}

.menurow{margin:0 0 0 auto;float:right;}
.navbar{padding:0;font-family: 'roboto-medium', Arial, sans-serif;}
.mobile-menu .navbar, .mobile-menu .navbar.difle-l{width:100%!important;display:block!important;}
.navbar ul{margin:0;padding:0;display:flex;list-style:none;align-items:center}
.mobile-menu .navbar ul{display:block;align-items:left}
.navbar li {position: relative;line-height:1.1;padding:0;}
.mobile-menu .navbar li{display: block;}
.navbar a svg{display:block;width:auto;height:22px;padding:0;margin:0 2px 0 0;line-height:1;fill:var(--color1)!important;}
.navbar a:hover svg,.navbar .active svg,.navbar li:hover>a svg,.navbar a:focus svg{fill:var(--cwhite)!important;}
.navbar a{padding:7px 10px;margin:0 0 0 5px;font-size:100%;color:var(--cblack);transition:0.3s;line-height:1.1;font-weight:400;border-radius:4px}
.mobile-menu .navbar a{padding:10px 0;margin:0;font-size:110%;color:var(--cgrey2);border-radius:0;display:block!important;}
.mobile-menu .submenu li a{position:relative;padding-left:50px!important;}
.mobile-menu .submenu li a:after{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;border-radius:10px;background:var(--cgrey3);}
.mobile-menu .navbar .dropdown.open .submenu a{padding-left:20px!important;}
.mobile-menu .navbar .dropdown.open .submenu{display:block;border-top:var(--cgrey3) 1px solid;}
.navbar a:hover,.navbar .active,.navbar li:hover>a,.navbar a:focus{color:var(--cwhite)!important;background:var(--color1)}
.mobile-menu .navbar a:hover,.mobile-menu .navbar .active,.mobile-menu .navbar li:hover>a,.mobile-menu .navbar a:focus{color:var(--cgrey2)!important;background:transparent}
.navbar .dropdown ul{display:block;position:absolute;left:5px;top:calc(100% + 35px);margin:0;padding:20px 15px 10px;z-index:99;opacity:0;min-width:200px;visibility:hidden;background:#fff0;box-shadow:none;transition:0.3s;border-radius:0}
.navbar .dropdown ul:after{content:"";position:absolute;left:0;top:10px;right:0;bottom:0;background:var(--cblack);border-radius:5px;}
.navbar .dropdown ul a{position:relative;z-index:3;margin:0!important;padding:0!important;color:var(--cgrey2)!important;line-height:1.1}
.navbar .dropdown ul li{padding:5px 0!important}
.navbar .dropdown ul a:hover,.navbar .dropdown ul .active:hover,.navbar .dropdown ul li:hover>a{color:var(--cwhite)!important;background:transparent!important}
.navbar .dropdown:hover>ul{opacity:1;top:100%;visibility:visible}
.navbar .dropdown .dropdown ul{top:0;left:calc(100% - 30px);visibility:hidden}
.navbar .dropdown .dropdown:hover>ul{opacity:1;top:0;left:100%;visibility:visible}
.navbar .dropdown:nth-last-child(-n+2) .dropdown ul,.navbar .dropdown:nth-last-child(-n+2) .dropdown .dropdown ul {left: auto !important;right: 5px !important;}
.navbar .dropdown:nth-last-child(-n+2):hover > ul,
.navbar .dropdown:nth-last-child(-n+2) .dropdown:hover > ul {left: auto !important;right: 0 !important;}
.btsearch{position:relative;z-index:10;cursor:pointer;width:auto;margin:0 0 0 10px;padding:0;}
.btsearch svg{width:24px;height:auto;line-height:1;fill:var(--color1);}

.headpage-flat{position:relative;overflow:hidden;padding:40vh 0 0;background: linear-gradient(to right, var(--cblack), var(--color1), var(--color1), var(--cblack));}
.headpage-image{position:relative;overflow:hidden;padding:0;background:var(--color1);}
.headpage-image-inner{position:relative;overflow:hidden;width:60%;margin:5vh auto 0;opacity:0.45;}
.headpage-image-cover{position:absolute;left:0;top:0;right:0;bottom:0;}
.headpage-marquee{position:absolute;left:0;right:0;bottom:60px;margin:0;padding:0;line-height:1;font-size:400%;font-family: 'Arial', sans-serif;font-weight:800;color:var(--cwhite);opacity:0.2;}
.headpage-flat-title{position:relative;overflow:hidden;z-index:5;margin:0 auto 40px;color:var(--cyellow);font-size:200%;line-height:1;padding:0;font-family: 'roboto-700', Arial, sans-serif;}
#category .headpage-flat-title{margin:0 auto 60px;}
#profile .headpage-flat-title{position:absolute;left:0;bottom:0;right:0;}

.image-slider, .image-product, .image-blogbig, .image-search, .image-head, .image-detail, .image-populer, .img-wide, .image-other, .image-blogcat{width: 100%;display: block;position: relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center;}
.image-slider{height:calc(42vh - 14px);}
.image-product{height:25vh;z-index:5;}
.category-product .image-product{height:30vh;}
.image-blogbig{height:45vh;border-radius:10px 0 0 10px;}
.image-other{height:25vh;}
.image-search{height:14vh;border-radius:7px;}
.image-detail{height:50vh;}
#product .image-detail{height:65vh;}
#product .image-other{height:16vh;}
.image-blogcat{height:28vh;}
.img-wide{padding-bottom: 56.25%;}
.image-head{height:60vh;-webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);}
.imagefull img, .video-view{display:block;width:100%;height:100%;position: absolute;top: 50%;left: 50%;margin:0 auto;object-fit: cover;transform: translate3d(-50%, -50%, 0);}

.slider{position:absolute;left:0;top:38%;right:0;z-index:20;}
.fade-gallery-slider{position:relative;width:100%;max-width:100%;margin:0;height:42vh;}
.fade-gallery-img{position:absolute;top:0;left:0;width:100%;height:42vh;opacity:0;transition:opacity 1s ease-in-out;object-fit:cover;z-index:0}
.fade-gallery-img.active{opacity:1;z-index:1}
.mlr-slide{margin-left:10%;margin-right:10%;}
.slider-image{position:relative;width:50%;}
.slider-title{position:relative;width:50%;}
.slider-maintitle{transform: translateX(100px);transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;opacity: 0;}
.fade-gallery-img.active .slider-maintitle {opacity: 1;transform: translateX(0);}	
.image-slider-container{position:relative;padding:5px;background:rgba(0,0,0,0.25);border:var(--cdark) 2px solid;transform: scale(1.1);transition: transform 1.2s ease-in-out;}
.fade-gallery-img.active .image-slider-container{transform: scale(1);}
.slide-product, .slide-blog{display:block;font-size:300%;margin:0 40px 0 0;padding:0;line-height:1.1;color:var(--cyellow);font-family: 'roboto-bold', Arial, sans-serif;}
.slide-blog{font-size:180%;}
.slide-desk{font-size:120%;margin:15px 20px 15px 0;padding:0;line-height:1;color:var(--cwhite);font-family: 'roboto-bold', Arial, sans-serif;}
.slider-arrow{position:relative;border-left:#fff 12px solid;border-top:transparent 8px solid;border-bottom:transparent 8px solid;margin:0 10px;opacity:0.5;}
.slider-speak{position:relative;padding:0 0 0 30px;margin:20px 40px 0 0;transform: translateY(50px);transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;opacity: 0;}
.fade-gallery-img.active .slider-speak {opacity: 1;transform: translateY(0);}	
.slider-quote{position:absolute;left:0;top:0;width:25px;}
.slider-quote svg{width:100%;height:auto;fill:var(--cgrey3);}
.slider-intro{font-size:100%;margin:0;padding:0;line-height:1.1;color:var(--cgrey3);}
.slider-more{height:30px;border-radius:30px;padding:0 15px;background:var(--color1);color:var(--cwhite);font-size:95%;line-height:1.1;margin:20px 40px 15px 0;transform: translateY(-50px);transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;opacity: 0;}
.service-more{height:30px;border-radius:30px;padding:0 15px;background:var(--color1);color:var(--cwhite);font-size:95%;line-height:1.1;margin:15px auto 0;}
.fade-gallery-img.active .slider-more {opacity: 1;transform: translateY(0);}

.profile{position:relative;overflow:hidden;margin:0;margin-top:88vh;height:12vh;}
.profile-col{position:relative;height:8vh;width:calc(33.33333333% - 20px);margin:0 10px;border:var(--cwhite) 1px solid;border-radius:5px;opacity:0.6;cursor:pointer;}
.profile-col:hover{opacity:1;}
.profile-col-item{margin:0 15px;padding:0;line-height:1.1;font-size:100%;font-weight:normal;color:var(--cwhite);}
.profile-col-item svg{width:auto;height:4vh;line-height:1;fill:var(--cwhite);margin:0 5px 0 0;}
.bot-corner{position:relative;overflow:hidden;height:50px;background:var(--cblack);margin-top:-1px;}
.bot-corner:after{content:"";position:absolute;left:0;top:20px;right:0;bottom:-1px;border-radius:30px 30px 0 0;background:var(--cwhite);}
.homepage .bot-corner:after{background:var(--cgrey1);}

.service-interaktif{position:relative;overflow:hidden;padding:40px 0 70px;background:var(--cgrey1);margin-top:-1px;}
.service-layout{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:30px;align-items:center}
.service-side{display:flex;flex-direction:column;gap:20px}
.service-tab{background:#fff;height:30vh;border-radius:15px;border:1px solid var(--cgrey3);cursor:pointer;transition:all 0.3s ease;text-align:center!important;}
.service-tab h3{font-size:120%;color:var(--cdark);margin:0 15px 10px;padding:0;line-height:1.1;font-family: 'roboto-bold', Arial, sans-serif;}
.service-tab:hover h3{color:var(--color1);}
.service-tab p{font-size:95%;padding:0;margin:0 15px;line-height:1.1;}
.service-tab.active{border-color:var(--cdark);box-shadow:0 4px 12px rgb(2 132 199 / .1)}
.service-display{background:var(--cwhite);padding:15px;border-radius:15px;box-shadow:0 10px 25px rgb(0 0 0 / .05);border:1px solid var(--cgrey3);height:calc(60vh + 20px);text-align:center;}
.service-display img{width:80%;height:auto;display:block;margin:0 auto;transition:opacity 0.4s ease-in-out}
.display-title-wrap h1{font-size:170%;color:var(--cblack);margin:15px 10% 0;padding:0;line-height:1.1;font-family: 'roboto-700', Arial, sans-serif;}
.service-icon-item svg{width:auto;height:6vh;margin:0 auto;opacity:0.5;}

.servicepage-row{margin:10px 0 0;}
.servicepage-row:nth-child(1){margin:0;}
.servicepage-icon{position:relative;width:7vh;}
.servicepage-title{position:relative;width:calc(100% - 8vh);margin:0 0 0 1vh;}
.servicepage-icon-item svg{width:7vh;height:auto;line-height:1;opacity:0.55;}
.servicepage-row:hover .servicepage-icon-item svg{opacity:1;fill:var(--cdark);}
.servicepage-title h2{font-size:100%;margin:0;padding:0;line-height:1.1;font-family: 'roboto-medium', Arial, sans-serif;color:var(--cdark);}
.servicepage-row:hover .servicepage-title h2{color:var(--cblack);}

.profile-single{position:relative;overflow:hidden;margin:0 0 30px;padding:25px 15px;background: linear-gradient(to right, var(--cdark), var(--color1));font-family: 'roboto-medium', Arial, sans-serif;line-height:1;color:var(--cgrey2);}
.profile-single:hover{color:var(--cyellow);background:var(--cdark);}
.contact-us{position:relative;overflow:hidden;margin:30px 0 0;}
.home-container .contact-us{margin:0 0 20px;}
.contact-us-image{position:relative;width:calc(40% - 20px);margin:0 10px;}
.contact-us-title{position:relative;width:calc(60% - 20px);margin:0 10px;font-size:100%;line-height:1.1;color:var(--cgrey2);padding:0;background: linear-gradient(to right, var(--cdark), var(--color1));font-family: 'roboto-medium', Arial, sans-serif;}
.contact-us-title:after{content:"";position:absolute;right:-25px;top:30%;border-left:var(--color1) 25px solid;border-bottom:transparent 20px solid;}
.home-container .contact-us-title{background: linear-gradient(to right, var(--color1), var(--cblack));}
.home-container .contact-us-title:after{border-left-color:var(--cblack);}
.contact-us-image img{width:100%;height:auto;line-height:1;}
.contact-us:hover .contact-us-title{color:var(--cyellow);background:var(--cdark);}
.contact-us:hover .contact-us-title:after{border-left-color:var(--cdark);}

.visimisi img{display:block;width:8vh;height:auto;margin:0 10px 0 0;}
.visimisi-title{font-family: 'roboto-700', Arial, sans-serif;font-size:150%;margin:0 0 20px;padding:0;line-height:1;color:var(--color1);}
.misi{margin:40px 0 0;}

.display-image-wrap img {
    opacity: 0;
    transform: translateY(-60px);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
#main-preview-title, .service-more{opacity: 0;
    transform: translateY(60px);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
#main-preview-title.show, .service-more.show{
    opacity: 1!important;
    transform: translateY(0);
}
.display-image-wrap img.show{
    opacity: 1;
    transform: translateY(0);
}

.product{position:relative;overflow:hidden;padding:70px 0;background:var(--color1);}
.product-head{position:relative;width:34vh;background:rgba(0,0,0,1);text-align:center;}
.product-head h1{font-size:160%;color:var(--cyellow);margin:20px 0 0;padding:0;line-height:1;font-family: 'roboto-700', Arial, sans-serif;text-shadow:1px 1px 2px #000;-webkit-text-stroke:1px transparent;}
.product-data{position:relative;width:calc(100% - 37vh);margin:0 0 0 3vh;}
.product-box{position:relative;overflow:hidden;margin:7px;}
.product-category{position:relative;overflow:hidden;padding:20px 10px 10px;margin:-10px 0 0;background:var(--color1);border-radius:0 0 10px 10px;}
.product-category-item{font-size:90%;color:var(--cyellow);margin:0;padding:0;line-height:1;}
.producthome-title{font-size:120%;color:var(--cwhite);margin:15px 0 20px;padding:0;line-height:1.1;font-family: 'roboto-bold', Arial, sans-serif;text-shadow:1px 1px 2px #000;-webkit-text-stroke:1px transparent;}
.product-head .dropdown-menu{padding:20vh 0 10px;font-size:16px;margin:0;width:34vh;border:none;box-shadow:none;left:50%;margin-left:-17vh;border-radius:0;bottom:100%;top:auto;background: linear-gradient(to top, var(--cblack) 30%, transparent);text-align:center;}
.product-index{height:30px;border-radius:30px;margin:0 15px;padding:0 20px;background:var(--cdark);line-height:1;color:var(--cwhite);font-size:90%;}
.product-index:hover{background:var(--color1);}
.product-index svg{width:auto;height:20px;fill:var(--cwhite);margin:0 5px 0 0;}
#catproduct h3{font-size:90%;margin:0 10px;padding:5px 0;line-height:1.1;color:var(--cgrey2);}
.product-shop{position:absolute;left:50%;top:50%;transform: translate3d(-50%, -50%, 0);width:10vh;height:10vh;}
.product-shop svg{width:100%;height:auto;line-height:1;fill:var(--cwhite);margin:0 0 0 -10px;}

.head-module{position:relative;z-index:20;}
.head-module h1{font-size:160%;margin:0;padding:0 0 2px;line-height:1;font-family: 'roboto-bold', Arial, sans-serif;border-bottom:var(--cyellow) 2px solid;}
.head-module-indek{float:right;margin:0 0 0 auto;}
.head-module-indek svg{width:auto;height:30px;line-height:1;fill:var(--color1);}
.head-module .dropdown-menu{padding:10px;font-size:16px;margin:0;min-width:220px;box-shadow:none;left:auto;border-radius:5px;top:100%;right:0;background:var(--cwhite);border:var(--cgrey3) 1px solid;}
#catblog h3{font-size:95%;margin:0 10px;padding:5px 0;line-height:1.1;color:var(--cdark);font-weight:bold;}
.head-module-med{font-size:120%;margin:0;padding:0 0 5px;line-height:1;font-family: 'roboto-700', Arial, sans-serif;border-bottom:var(--cgrey3) 1px solid;color:var(--color1);}

.carousel {background:transparent;}
.imageview-carousel .carousel{overflow:hidden;}
.carousel-cell {width: 100%;counter-increment: gallery-cell;cursor:default;}
.product .carousel-cell{width:calc(33.33333333% - 15px);margin:0 10px 0;text-align:center;background:rgba(0,0,0,0.2);}
.imageview-carousel .carousel-cell{width:calc(75% - 10px);margin:0 5px 0;}
.product-other .carousel-cell{width:calc(20% - 10px);margin:0 5px 0;border:var(--cgrey3) 1px solid;}
.flickity-enabled {position: relative;}
.flickity-enabled:focus { outline: none;}
.flickity-viewport {position: relative;height: 100%;overflow:hidden;}
.flickity-slider {position: absolute;width: 100%;height: 100%;}
.flickity-enabled.is-draggable {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.flickity-enabled.is-draggable .flickity-viewport {cursor: move;cursor: -webkit-grab;cursor: grab;}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing;cursor: grabbing;}
.flickity-prev-next-button {position: absolute;top:0;width: 30px;height: 30px;border:none;background-color:transparent;background-position: center;background-repeat: no-repeat;cursor: pointer;z-index:10;}
.flickity-prev-next-button:disabled {filter: alpha(opacity=0); /* IE8 */opacity: 0;cursor: auto;}
.flickity-prev-next-button svg {display:none;}
.flickity-page-dots {display:none;}
.flickity-prev-next-button{background-repeat:no-repeat !important;top:50%;transform: translate3d(0, -50%, 0);}
.product .flickity-prev-next-button{width:34px;height:34px;border-radius:50%;background-color:var(--color1);background-size:25% auto;}
.product-other .flickity-prev-next-button{display:none;}
.imageview-carousel .flickity-prev-next-button{width:35px;height:35px;border-radius:50%;background-color:rgba(0,0,0,0.55);background-size:25% auto;}
.flickity-prev-next-button.previous {background-position: center;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
.flickity-prev-next-button.next {background-position: center;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
.product .flickity-prev-next-button.next{right:-8px;}
.product .flickity-prev-next-button.previous{left:-8px;}
.imageview-carousel .flickity-prev-next-button.next{right:5px;}
.imageview-carousel .flickity-prev-next-button.previous{left:5px;}
.testimoni .flickity-prev-next-button{position:absolute;width:34px;height:34px;border-radius:50%;background-color:transparent;background-size:35% auto;top:-60px;transform: translate3d(0, 0, 0);}
.testimoni .flickity-prev-next-button.next{right:5px}
.testimoni .flickity-prev-next-button.previous{left:5px;}

.gridpage {display: flex;width: 100%;margin: 0 auto;}
.gridpage-left {flex: 0 0 70%;}
.gridpage-right {flex: 0 0 30%;padding:50px 0 0;}
.gridpage-sticky {position: sticky !important;}
.gridpage-sticky{top:calc(7vh + 30px);padding:20px 0 15px;}
.pagestyle .gridpage-sticky{padding:30px 0 15px;}
.gridpage-left-inner{position:relative;overflow:hidden;margin:60px 50px 0 0;}
#profile .gridpage-left-inner{margin:40px 50px 0 0;}
.gridpageopen-left {flex: 0 0 35%;}
.gridpageopen-right {flex: 0 0 65%;padding:50px 0 0;}
#profile .gridpage-right {padding:0 0 0;}

.testimoni{position:relative;overflow:hidden;margin:10px 0 0;}
.head-testimoni{position:relative;margin:0;}
.head-testimoni:after{content:"";position:absolute;right:20%;bottom:-19px;border-top:var(--color1) 20px solid;border-right:transparent 25px solid;}
.head-testimoni-inner{position:relative;overflow:hidden;padding:30px 15px;background:var(--color1);font-size:150%;line-height:1;font-family: 'roboto-bold', Arial, sans-serif;color:var(--cwhite);}
.testi-foto{position:relative;width:100%;margin:30px auto 10px;}
.testi-landscape{position:relative;overflow:hidden;width:100%;}
.testi-potrait img{display:block;width:auto;height:13vh;margin:0 auto;}
.testi-landscape img{display:block;width:75%;height:auto;margin:0 auto;}
.testi-title h2{font-size:120%;margin:15px auto;text-align:center;padding:0;line-height:1.1;font-weight:bold;}
.testi-speak{position:relative;overflow:hidden;padding:0 35px;text-align:center;line-height:1.1;font-size:100%;}
#product .testi-speak{padding:0 35px;text-align:center;margin:0 auto 25px;max-width:70%;min-height:35px;line-height:1.1;font-family: 'roboto-medium', Arial, sans-serif;font-size:110%;}
.testi-quote-left{position:absolute;left:0;top:0;width:30px;height:30px;}
.testi-quote-right{position:absolute;right:0;bottom:0;width:30px;height:30px;}
.testi-quote-left svg, .testi-quote-right svg{width:100%;height:auto;fill:var(--cgrey3);}

.bloghead{position:relative;z-index:30;}
.blog-primary{position:relative;overflow:hidden;margin:0;background:var(--cblack);}
.blog-primary-image{position:relative;width:70%;}
.blog-primary-image:after{content:"";position:absolute;right:-1px;top:0;bottom:0;left:0;background: linear-gradient(to right, transparent 40%, var(--cblack));}
.blog-primary-title{position:relative;width:55%;margin-left:-25%;}
.blog-primary-title h2{font-size:160%;margin:0;padding:0;line-height:1.1;font-weight:bold;color:var(--cyellow);}
.blog-primary-title p{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:normal;color:var(--cgrey1);}
.blog-primary-title h3{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:normal;color:var(--cgrey1);}
.blog-other{position:relative;overflow:hidden;}
.blog-other-item:nth-child(1){display:none;}
.blog-other-image{position:relative;width:calc(40% - 10px);margin:0 5px;}
.blog-other-title{position:relative;width:calc(60% - 10px);margin:0 5px;padding:15px 0;}
.blog-other-title h2{font-size:120%;margin:0;padding:0;line-height:1.1;font-weight:bold;color:var(--cblack)}
.blog-other-title h3{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:bold;color:var(--cdark)}
.blog-other-title p{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:normal;color:var(--cmain)}
.blog-other-item:hover .blog-other-title h2{color:var(--color1)}
.blog-primary:hover .blog-primary-title h2{color:var(--cwhite)}
.play-icon{position:absolute;left:50%;top:50%;transform: translate3d(-50%, -50%, 0);z-index:2;}
.play-icon svg{width:50px;height:auto;fill:var(--cwhite);opacity:0.6;}
.play-icon-small svg{width:auto;height:30px;fill:var(--cyellow);margin:4px 5px 0 0;}
.category-name svg{width:auto;height:22px;margin:0 3px 0 0;fill:var(--cgrey3);}
.blog-other .category-name svg{fill:var(--cmain);opacity:0.35;}

.footer-area{position:relative;overflow:hidden;margin:30px auto 0;padding:5px 0 0;}
.footer-area:before{content:"";position:absolute;left:0;top:1px;right:0;bottom:0;background: linear-gradient(to right, var(--cblack), var(--color1), var(--cblack));}
.footer-inner{position:relative;overflow:hidden;padding:40px 0;margin:0;font-size:95%;line-height:1.1;font-weight:normal;color:var(--color2);}

.animation-title{background-size: auto auto;background-clip: border-box;background-size: 200% auto;background-clip: text;text-fill-color: transparent;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:textclip 6s linear infinite;background-image: linear-gradient(-225deg,var(--cblack) 0%,var(--color1) 29%,var(--cblack) 67%,var(--color1) 100%);}
@keyframes textclip {to {background-position: 200% center;}}

.modal-open {overflow-x: hidden;}
.modal{z-index:9999999 !important;}
.modal-dialog{z-index:99999 !important;}
.modal-backdrop{z-index:3000 !important;background:#000}
.modal-backdrop.in{filter:alpha(opacity=100);opacity:0.90}
.modal.left .modal-dialog, .modal.right .modal-dialog {position: fixed;margin: auto;width: 25%;top:15px;bottom:15px;transform: translate3d(0, 0, 0);}
.modal.centerpage .modal-dialog {position: fixed;margin: auto;width:30%;top:40px;left:50%;bottom:40px;transform: translate3d(-50%, 0, 0);background:transparent;}
.modal.left.fade .modal-dialog{left: -320px;transition: opacity 0.3s linear, left 0.3s ease-out;}
.modal.left .modal-dialog{top:0;bottom:0;}
.modal.left.fade.in .modal-dialog{left: 0;}
.modal.right.fade .modal-dialog {right: -320px;transition: opacity 0.3s linear, right 0.3s ease-out;border-radius:5px;overflow:hidden;}
.modal.right.fade.in .modal-dialog {right:15px;}
.modal.center .modal-dialog {width:40%;margin:30px auto;}

.modal-view-center{position:absolute;left:0;top:0;right:0;bottom:0;}
.modal-center-inner{position:relative;overflow:hidden;}
.modal-center-inner .scrollbar-box{max-height:60vh;}
.modal-header-transparent{height:8vh;}
.modal-header-transparent h2{font-size:120%;margin:0;line-height:1.1;padding:0;color:var(--cyellow);font-weight:bold;}
.modal-header-close{margin:0 -10px 0 auto;float:right;cursor:pointer;}
.modal-header-close svg{width:25px;height:auto;line-height:1;fill:var(--cyellow);}
.modal-content-transparent{color:var(--cgrey2);}
.modal-content-transparent p{font-size:95%;margin:0;line-height:1.2;padding:0;}

.poppage, .poppage-bot{position:fixed;left:0;height:0;width:100%;overflow:hidden;z-index:2600;transition:0.5s;background:var(--cblack);}
.poppage{top:0;}
.poppage-bot{bottom:0;}
.poppage-center-top{position:absolute;left:50%;top:30px;width:35%;transform: translate3d(-50%, 0, 0);}
.poppage-center{position:absolute;left:50%;top:75px;bottom:30px;width:35%;transform: translate3d(-50%, 0, 0);}
.close-search{height:36px;border-radius:36px;margin:0 auto;background:var(--color1);cursor:pointer;padding:0 15px;font-size:90%;text-transform:uppercase;line-height:1;color:var(--cwhite);}
.search-submit{border:none!important;box-shadow:none!important;margin:0 0 0 5px;padding:0;line-height:1;outline:none!important;min-width:40px;max-width:40px;height:40px;border-radius:50%;background:var(--color1);}
.close-search svg{width:24px;height:auto;fill:var(--cwhite);margin:0 0 0 5px;}
.search-submit svg{width:24px;height:auto;fill:var(--cwhite);}
.poppage-center .form-control{height:40px;line-height:40px;border-radius:40px;outline:none!important;box-shadow:none!important;border:none!important;}
.search-result{position:relative;overflow:hidden;margin:10px 0 0;}
.result-info{margin:5px auto;font-size:95%;padding:0;line-height:1.1;color:var(--cgrey3);font-weight:normal;}
.postsearch-image{position:relative;width:calc(20% - 10px);margin:0 5px;}
.postsearch-content{position:relative;width:calc(80% - 10px);margin:0 5px;}
.postsearch{margin:10px 0;}
.postsearch-content h2{font-size:100%;margin:0 0 5px;padding:0;line-height:1.1;font-weight:normal;color:var(--cgrey1);text-shadow:1px 1px 2px #000;-webkit-text-stroke:1px transparent;display: block;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;}
.postsearch-content p{font-size:90%;margin:0;padding:0;line-height:1.1;color:var(--cgrey3);}
.postsearch-content h3{font-size:95%;margin:0 0 5px;padding:0;line-height:1.1;font-weight:normal;color:var(--cyellow);}
.postsearch:hover .postsearch-content h2{color:var(--cwhite);}
.scroll-box{width: 100%;overflow:hidden;overflow-y: scroll;}
.search-result .scroll-box{max-height:70vh;}
.popup-container .scroll-box{height:100%;}

.popup-container{position:absolute;left:0;bottom:0;right:0;top:20%;background:var(--cdark);overflow:hidden;}

.page-container-top{position:relative;overflow:hidden;border-radius:30px 30px 0 0;font-size:140%;margin:0 auto;padding:0;line-height:1;color:var(--cwhite);margin-top:-50px;height:50px;background: linear-gradient(to right, var(--cwhite) 8%, rgba(255,255,255,0.35), rgba(255,255,255,0.35), var(--cwhite) 92%);text-shadow:1px 1px 2px #000;-webkit-text-stroke:1px transparent;font-family: 'roboto-medium', Arial, sans-serif;}
#service .page-container-top, #profile .page-container-top{border-radius:30px 30px 0 0;font-size:140%;margin-top:-30px;height:30px;}
.page-container{min-height:40vh;}
.page-category{min-height:40vh;margin:40px auto 0;}
.page-content{margin:0 0 0 40px;}
.title-post{font-size:230%;margin:0 0 30px;padding:0;line-height:1.1;color:var(--cdark);font-family: 'roboto-700', Arial, sans-serif;}
.title-service{margin:40px 0 25px;}
.title-service h1{position:relative;font-size:300%;margin:0;padding:0 0 10px;line-height:1.1;color:var(--cblack);font-family: 'roboto-700', Arial, sans-serif;}
.title-service h1:after{content:"";position:absolute;bottom:0;left:50%;width:50%;border-bottom:var(--color1) 1px solid;transform: translate3d(-50%, 0, 0);}
.desk-post{overflow:hidden;height:0;line-height:0;}
.ifscroll .desk-post{overflow:hidden;height:auto;font-size:100%;margin:0 0 10px;padding:0;line-height:1.1;font-family: 'roboto-medium', Arial, sans-serif;}
.ifscroll .desk-post svg, .meta-post svg{width:30px;height:auto;line-height:1;margin:-2px 5px 0 0;opacity:0.4;}
.meta-post{overflow:hidden;height:auto;font-size:100%;margin:0 0 10px;padding:0;line-height:1.1;font-family: 'roboto-medium', Arial, sans-serif;}
.content-isi h1,.content-isi h2,.content-isi h3,.content-isi h4,.content-isi h5,.content-isi h6,.content-isi p {line-height:1.5;display:block;}
.content-isi h1,.content-isi h2,.content-isi h3,.content-isi h4,.content-isi h5,.content-isi h6,.content-isi p{margin:0 0 15px;}
.content-isi p{font-size:100%;}
.content-isi h3{font-size:110%;}
.content-isi h2{font-size:120%;}
.content-isi h1{font-size:160%;}
.content-isi ul{margin:0 0 20px 40px;line-height:1.5;padding:0;}
.visimisi .content-isi ol{padding-left:17px!important;}
.content-isi li{margin:0 0 10px 0;line-height:1.5;padding:0;font-size:100%;}
.content-isi .table, .content-isi table{width:100% !important;}
.content-isi .box{padding:0 0 10px !important;}
.content-isi hr {margin-top: 5px !important;margin-bottom: 5px !important;border:none !important;}
.sharebt{width:40px;height:40px;border-radius:5px;margin:0 5px 0 0;}
.share-center .sharebt{margin:0 3px;}
.sharebt svg{width:auto;height:24px;fill:var(--cwhite);}
.whatsapp-bg{background:#24B500;}
.facebook-bg{background:#0054b8;}
.twitter-bg{background:#009bb8;}
.email-bg{background:#e21f6e;}
.telegram-bg{background:#0075d2;}
.instagram-bg{background:#d40072;}
.youtube-bg{background:#d20000;}
.print-bg{background:#e66000;}

.populer-row{position:relative;overflow:hidden;padding:7px 0 0;}
.populer-image{width:8vh;height:8vh;overflow:hidden;border-radius:50%;}
.image-populer{height:8vh;}
.populer-title{position:relative;width:calc(100% - 9vh);margin:0 0 0 1vh;}
.populer-title h3{font-size:100%;margin:3px 0 0;padding:0;line-height:1.1;color:var(--cdark);}
.populer-row:hover .populer-title h3{color:var(--color1);}
.judul-populer {display: block;}
.populer-title p{font-size:100%;margin:3px 0 0;padding:0;line-height:1.1;color:var(--cmain);}
.related-row{position:relative;font-size:100%;margin:0;padding:10px 0 0 15px;line-height:1.1;color:var(--cmain);}
#service .related-row{font-family: 'roboto-medium', Arial, sans-serif;}
.related-row:hover{color:var(--color1);}
.related-row:after{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:var(--cmain);opacity:0.25;}
.content-intro{position:relative;overflow:hidden;padding:5px 40px;font-size:100%;color:var(--cmain);line-height:1.1;min-height:35px;font-family: 'roboto-medium', Arial, sans-serif;}
.content-quote{position:absolute;left:0;top:0;width:30px;height:auto;opacity:0.3;}
.content-quote svg{display:block;width:100%;line-height:1;height:auto;}
.profile-intro{position:relative;overflow:hidden;padding:5px 40px;min-height:35px;}

.right-image{vertical-align:text-top;float:right;width:45%;margin:0 0 10px 10px;}
.product-image{position:relative;overflow:hidden;border:var(--cgrey3) 1px solid;padding:10px;}
.price{margin:0 20px 20px;}
.price-flex{display:flex !important;justify-content: left;align-items: center;}
.price h2, .price-item{font-size:110%;line-height:1.1;margin:0;padding:0;font-family: 'roboto-medium', Arial, sans-serif;}
.price-left{margin:0 10px 0 10px;}
.price-item{margin:0 0 0 10px;color:var(--color1);}
.price-discount{color:var(--corange);text-decoration: line-through;font-weight:normal;}
.price-icon{width:6vh;height:6vh;background:var(--color1);border-radius:50%;}
.price-icon svg{width:auto;height:3.5vh;fill:var(--cwhite);}
.content-link{margin:0 20px 20px;height:5.4vh;border-radius:5.4vh;background:var(--color1);padding:0 25px;font-size:100%;color:var(--cwhite);line-height:1;font-weight:normal;}
.content-link:hover{background:var(--cdark);}
.content-link svg{width:auto;height:3.5vh;fill:var(--cwhite);margin:0 5px 0 0;}
.product-other h1{font-size:120%;line-height:1.1;margin:0 0 10px;padding:0;font-family: 'roboto-700', Arial, sans-serif;color:var(--cdark);}
.product-other-container{position:relative;width:calc(100% - 21vh);margin:0 1vh 0 0;}
.product-all{position:relative;width:20vh;border:var(--cgrey3) 1px solid;}
.product-other-item{position:relative;overflow:hidden;padding:5px;}
.product-other-item h2{font-size:95%;line-height:1.1;margin:5px 0 0;padding:0;font-family: 'roboto-medium', Arial, sans-serif;color:var(--cmain);opacity:0.6;}
.carousel-cell:hover .product-other-item h2{opacity:1;}
.product-all p{font-size:95%;line-height:1.1;margin:5px;padding:0;font-family: 'roboto-medium', Arial, sans-serif;color:var(--cdark);}
.product-all svg{width:auto;height:7vh;margin:0 auto;opacity:0.4;}
.product-all:hover{border:var(--cdark) 1px solid;}
.product-all:hover p{color:var(--color1);}

.category-blog{position:relative;width:calc(50% - 30px);margin:20px 15px 0;}
.catblog-image{position:relative;width:45%;}
.catblog-title{position:relative;width:55%;}
.catblog-title h2{font-size:110%;line-height:1.1;margin:10px 0 10px 10px;padding:0;font-family: 'roboto-medium', Arial, sans-serif;color:var(--cdark);}
.category-blog:hover .catblog-title h2{color:var(--cblack);}
.catblog-title p{font-size:100%;line-height:1.1;margin:0 0 0 10px;padding:0;color:var(--cmain);}
.category-product{position:relative;width:calc(33.33333333% - 20px);margin:30px 10px 0;text-align:center;}
.catblog-meta{margin:0 0 5px 10px;font-size:100%;line-height:1.1;padding:0;color:var(--cmain);}
.catblog-meta svg{width:24px;height:auto;margin:0 5px 0 0;fill:var(--cmain);opacity:0.4;}
.limit-post{font-size:100%;line-height:1.1;margin:0 auto;padding:0;color:var(--cmain);}
.limit-post svg{width:26px;height:auto;margin:0 5px 0 0;fill:var(--color1);}
.image-category-box{position:relative;overflow:hidden;padding:5px;border:var(--cgrey3) 1px solid;z-index:1;}
.image-category-cover{position:absolute;left:0;top:50%;right:0;bottom:0;background: linear-gradient(to top, var(--cblack), transparent);margin:5px;z-index:6;}
.image-category-box:hover .image-category-cover{background: linear-gradient(to top, var(--color1), transparent);}
.category-box-title{position:relative;overflow:hidden;padding:10px;margin:-25px 40px 0;background:var(--cwhite);z-index:7;}
.category-box-title:after{content:"";position:absolute;left:0;top:0;right:0;height:25px;border:var(--cgrey3) 1px solid;border-bottom:none;border-radius:7px 7px 0 0;}
.category-box-title h2{font-size:110%;line-height:1.1;margin:0;padding:0;font-family: 'roboto-medium', Arial, sans-serif;color:var(--cdark);}

.client-container{margin:30px auto 0;}
.client-col{position:relative;width:calc(25% - 20px);margin:20px 10px 0;border-radius:10px;border:var(--cgrey3) 1px solid;text-align:center;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45) inset;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45) inset;-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45) inset;padding:0 0 15px;}
.client-col h1{font-size:120%;line-height:1;font-weight:bold;margin:0 10px;padding:0;color:var(--cdark);}
.client-col h2, .client-col h3{font-size:95%;line-height:1,1;font-weight:normal;margin:0 10px;padding:0;}
.client-col h2{color:var(--color1);}
.client-img{margin:15px;height:12vh;}
.client-img-landscape{position:relative;overflow:hidden;width:100%;}
.client-img-potrait img{display:block;width:auto;height:12vh;margin:0 auto;}
.client-img-landscape img{display:block;width:80%;height:auto;margin:0 auto;}
.view-testimoni p{font-size:95%;line-height:1;font-weight:normal;margin:0;padding:0;}
.view-testimoni svg{display:block;width:24px;line-height:1;margin:0 3px 0 0;fill:var(--color2);}

.contact-icon{position:relative;width:11vh;}
.contact-icon-image{position:relative;width:11vh;height:11vh;border:var(--cgrey3) 1px solid;border-radius:7px;}
.contact-content{position:relative;width:calc(100% - 12vh);margin:0 0 0 1vh;}
.contact-icon-image img{width:7vh;height:auto;line-height:1;display:block;margin:0;}
.contact-row h2, .contact-right h2{font-size:100%;line-height:1.1;font-weight:bold;margin:5px 0 5px;padding:0;}
.contact-row p{font-size:100%;line-height:1.1;font-weight:normal;margin:2px 0 0;padding:0;color:var(--cmain);}
.contact-social-icon{width:35px;height:35px;border-radius:4px;margin:0 5px 0 0;}
.contact-social-icon svg{width:24px;height:auto;line-height:1;margin:0;fill:var(--cwhite);}
.contact-social p{font-size:100%;line-height:1.1;font-weight:normal;margin:0;padding:0;color:var(--cmain);}

.tooltip2{position:relative;display:inline-block}
.tooltip2 .tooltip2text{visibility:hidden;background-color:#000;color:#fff;border-radius:3px;padding:10px 15px;position:absolute;z-index:1;top:50%;right:100%;font-size:80%;min-width:120px;line-height:1.1;margin:0 6px 0 0;transform:translate3d(0,-50%,0)}
.tooltiptop .tooltip2 .tooltip2text{visibility:hidden;background-color:#000;color:#fff;text-align:center;font-size:80%;border-radius:3px;padding:10px 15px;position:absolute;z-index:1;bottom:100%;top:auto;left:50% !important;min-width:100px;margin:0 0 6px;transform:translate3d(-50%,0,0)}
.tooltip2 .tooltip2text:after{content:"";position:absolute;left:50%;bottom:-6px;border-top:#000 6px solid;border-left:transparent 6px solid;border-right:transparent 6px solid;transform: translate3d(-50%, 0, 0);}
.tooltip2:hover .tooltip2text {visibility: visible;z-index:999;}

.cbp-section:before,.cbp-section:after{content:" ";display:table}
.cbp-section:after{clear:both}
.cbp-so{width:100%;margin:0;transition:transform 0.5s,opacity 0.5s}
.cbp-so:before,.cbp-so:after{content:" ";display:table}
.cbp-so-init .cbp-so{opacity:0}
.cbp-so-init .cbp-so-top{transform:translateY(80px)}
.cbp-section.cbp-so-animate .cbp-so-top{transform:translateY(0);opacity:1}
.cbp-so-init .cbp-so-bottom{transform:translateY(80px)}
.cbp-section.cbp-so-animate .cbp-so-bottom{transform:translateY(0);opacity:1}
.cbp-so-init .cbp-so-left{transform:translateX(-80px)}
.cbp-section.cbp-so-animate .cbp-so-left{transform:translateX(0);opacity:1}
.cbp-so-init .cbp-so-right{transform:translateX(80px)}
.cbp-section.cbp-so-animate .cbp-so-right{transform:translateX(0);opacity:1}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {
    background:#b0b0b0;
}
::-webkit-scrollbar-thumb:hover {
    background:#919191;
}
.scroll-box::-webkit-scrollbar {width: 5px;height:5px;}
.scroll-box::-webkit-scrollbar-track {background:transparent;}
.scroll-box::-webkit-scrollbar-thumb {background:#313131;border-radius:5px;}
.main-image-default img{display:block;width:100%;height:auto;border-radius:10px;}
.imageview-data {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}
.imageview-data.is-loaded {
  opacity: 1;
  visibility: visible;
}

.menu-bottom{display:none;position:fixed;bottom:0;left:0;right:0;height:45px;z-index:1200;background: linear-gradient(to top, var(--cblack) 40%, transparent 100%);}
.menu-bottom-bg{position:absolute;top:0;height:45px;}
.menu-bottom-bg, .menu-bottom-open, .closemenu{left:50%;-webkit-transform: translate3d(-50%, 0, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, 0, 0);-o-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);}
.menu-bottom-bg svg{width:auto;height:45px;margin:0 auto;fill:var(--cdark);}
.menu-bottom-open{position:fixed;bottom:13px;width:50px;height:50px;background:var(--cdark);z-index:3;border-radius:50%;cursor:pointer;}
.menu-bottom-open svg{width:35px;height:auto;fill:var(--cwhite);}
.menu-bottom-home, .menu-bottom-right{position:fixed;bottom:0;width:auto;height:45px;z-index:2;cursor:pointer;}
.menu-bottom-home{left:35px;}
.menu-bottom-right{right:35px;}
.menu-bottom-home svg, .menu-bottom-right svg{width:26px;height:auto;fill:var(--cwhite);opacity:0.7;margin:-1px 0 0;}
.mobile-menu-container{position:relative;overflow:hidden;padding:60px 30px;}
.close-popup{position:absolute;left:0;top:20%;right:0;z-index:10;}
.close-popupbt{width:50px;height:50px;border-radius:50%;margin:-25px auto 0;background:var(--cdark);}
.close-popupbt svg{width:24px;height:auto;line-height:1;fill:var(--cwhite);}
#ScrollToTop{width:0;height:0;overflow:hidden;}
.ifscroll #ScrollToTop{width:5.4vh;height:5.4vh;margin:0 0 0 5px;}
.popup-bg{position:absolute;left:0;right:0;top:0;height:20%;background:var(--cblack);z-index:8;}
.popup-gradtop{position:absolute;left:0;right:0;top:0;height:50px;background: linear-gradient(to top, transparent, var(--cdark) 80%);}
.popup-gradbot{position:absolute;left:0;right:0;bottom:0;height:50px;background: linear-gradient(to top, var(--cdark) 5%, transparent);}

.pre-loader{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;text-align:center;z-index:999999!important;background: linear-gradient(to top, var(--cblack), var(--color1));}
.loader-inner{position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;}
.loader-inner svg{width:12vh;height:auto;}