:root{
	--cdefault: #313131;
	--cwhite: #fff;
	--cblack: #000000;
	--cgrey: #e0e0e0;
	--brdgrey: #bdbdbd;
	--yellow: #ffc600;
	--blue: #005EB0;
	--pink: #C700A6;
	--cyan: #00A5C2;
	--red: #D90000;
	--transition-1: 0.15s ease;
  --transition-2: 0.35s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
}
html {margin: 0;padding: 0;width:100%!important;}
body{background-color:#fff; color:var(--cdefault); overflow-x:hidden !important;font-size:16px !important;margin:0;padding:0;font-family: 'Roboto-Regular', Arial !important;}
h1, h2, h3, h4{margin:0;padding:0;line-height:1.2;font-weight:bold;}
p{font-size:100%;line-height:1.2;margin:0;padding:0;}
a{text-decoration:none; color:var(--blue);}
a:hover{color:var(--pink); text-decoration:none !important;}
a:focus{outline:none; text-decoration:none !important ;color:var(--pink) !important;}
.difle-c{display:flex !important;justify-content: center;align-items: center;}
.difle-l{display:flex !important;justify-content: left;align-items: center;}
.difle-r{display:flex !important;justify-content:right;align-items: center;}
.mobile-only{display:none!important;}
.trans-def{transition:all 0.2s linear 0.1s;-webkit-transition:all 0.1s linear 0.1s;-moz-transition:all 0.1s linear 0.1s;-o-transition:all 0.1s linear 0.1s}
.text-upparcase{text-transform:uppercase;}
.to-center{text-align:center;}

.body-absolute{position:absolute;left:0;top:0;right:0;}
.wave-bg{position:relative;height:100vh;overflow:hidden;background:var(--cblack);margin-top:0;}
.wave-svg{position:absolute;left:0;bottom:0;right:0;}
.gonjong1, .gonjong2{position:absolute;left:0;top:0;right:0;z-index:2;}
.gonjong2{z-index:3;}
.gonjong1 svg, .gonjong2 svg{width:100%;fill:#fff;}
.gonjong2 svg{opacity:0.5;}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;padding:0;margin:0;height:9vh;
  transition: var(--transition-1);
}
.navbar{margin:0!important;padding:0!important;}
.navbar-list{height:9vh;}
.navbar-link {color: #818181;font-size: 95%;font-weight:bold;padding:0;margin:0;line-height:1;text-transform:uppercase;}
.navbar li, .navbar ul{list-style:none;margin:0;padding:0;}
.navbar li a{padding:0 15px!important;margin:0!important;line-height:1;}
.menuleft{position:absolute;top:0;right:50%;margin-right:10vw!important;}
.menuright{position:absolute;top:0;left:50%;margin-left:10vw!important;}
.home-logo{position:fixed;top:0;text-align:center;z-index:12;left:50%;-webkit-transform: translate3d(-50%, 0, 0);-ms-transform: translate3d(-50%, 0, 0);-o-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);}
.home-logo img{width:auto;height:8vh;margin:10px auto;}
.home-logo h1{position:relative;font-size:140%;line-height:1;font-weight:bold;margin:0;padding:0px;letter-spacing:-0.5px;text-transform:uppercase;}
.ifscroll .header{background:var(--cwhite);-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);}
.ifscroll .home-logo div{height:9vh;display:flex !important;justify-content: center;align-items: center;}
.ifscroll .home-logo img{width:auto;height:5vh;margin:0 5px 0 0;}
.ifscroll .home-logo h1{font-size:100%;letter-spacing:-0.3px;}
.ifscroll .menuleft{margin-right:15vw!important;}
.ifscroll .menuright{margin-left:15vw!important;}

.slider{position:absolute;left:0;width:100%;top:40vh;}
.fade-gallery-slider{position:relative;width:100%;max-width:100%;overflow:hidden;margin:0;height:60vh;}
.fade-gallery-img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out;object-fit:cover;z-index:0}
.fade-gallery-img.active{opacity:1;z-index:1}
.slide-image{position:relative;width:40%;animation: pulse 3s infinite;}
.slide-image img{height:auto;width:100%;z-index:1;}
.slide-title{position:relative;z-index:100;width:60%;}
.slide-title h2{font-size:160%;margin:0;padding:0;line-height:1;text-transform:uppercase;font-weight:bold;color:var(--yellow);}
.slide-title h1{font-size:300%;margin:0;padding:0;line-height:1;font-weight:800;color:var(--cwhite);letter-spacing:-2px;}
.slide-title .aligntop, .slide-title .alignbottom{padding:0 15vh 0 0;}
.more{height:30px;padding:0 15px;border-radius:30px;font-size:95%;line-height:1;margin:10px 0 0;color:#fff!important;background:rgba(0,0,0,0.35);cursor:pointer;}
.more:hover{background:#000;}
.speak{margin:15px 0 0;}
.speak p{font-size:95%;margin:0;padding:0;line-height:1.1;color:var(--cwhite);opacity:0.55;}
.speak-quote img{width:100%;height:auto;line-height:1;margin:0;padding:0;opacity:0.55;}
.speak-quote{position:relative;width:30px;}
.speak-text{position:relative;width:calc(100% - 40px);margin:0 0 0 10px;}
.section{padding:10vh 0 0;}

.displaygrid {display:grid;box-sizing: border-box;}
.aligntop{align-self: start;}
.alignbottom{align-self: end;}
.auto-col{display: flex;flex-flow: row wrap;justify-content: space-between center;}
.margin-page{margin-left:10%;margin-right:10%;}
.head-section{margin:0 auto 10px;}
.head-section h1{font-size:170%;margin:0;padding:0 0 3px;line-height:1;letter-spacing:-0.5px;font-weight:bold;background:var(--blue);background: linear-gradient(to right, var(--cblack) 0%, var(--red) 70%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;border-bottom:var(--yellow) 2px solid;}
.tab-container{position:relative;overflow:hidden;border:var(--brdgrey) 1px solid;border-radius:7px;padding:15px 0;background:#e9e9e9;}
.nav-tabs{position:relative;z-index:5;border:none;}
.nav-tabs li{border:var(--brdgrey) 1px solid;border-bottom:transparent 1px solid;border-radius:0;margin:0 0 -1px;padding:0;font-size:100%;font-weight:bold;letter-spacing:-0.5px;color:#919191;}
.nav-tabs li a{border:none!important;margin:0;padding:0 20px;height:40px;background:transparent!important;}
.nav-tabs li.active{border-bottom:#e9e9e9 1px solid;background:#e9e9e9!important;color:var(--cblack);}
.product .aligntop{padding:10px;}
.product h1{font-size:110%;margin:15px 0;padding:0;line-height:1;letter-spacing:-0.5px;font-weight:bold;}
.product:hover h1.gradient-title{-webkit-text-fill-color:var(--cblack);background:none;}
.product p, .product h3, .product-bottom p{font-size:95%;margin:0;padding:0;line-height:1.1;letter-spacing:-0.5;}
.product h3{margin:10px 0 0;font-weight:normal;}
.product-bottom{position:relative;overflow:hidden;padding:7px 10px;margin:15px auto 10px;font-size:95%;line-height:1.1;letter-spacing:-0.5;border-radius:5px;background:var(--cyan)}
.product-bottom p{position:relative;z-index:2;color:var(--cwhite);margin:0 25px;}
.product:hover .product-bottom{background:var(--cblack)}
.image-default img{display:block;width:100%;height:auto;border-radius:7px;}
.blog-area{position:relative;overflow:hidden;padding:0 0 5px;}
.blog-area h2{font-size:100%;margin:15px 0;padding:0;line-height:1.1;letter-spacing:-0.5px;font-weight:bold;}


.gradient-title{background:var(--blue);background: linear-gradient(to right, var(--blue) 0%, var(--pink) 70%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.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(--red) 29%,var(--cblack) 67%,var(--red) 100%);}

.image-box{box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);border:var(--brdgrey) 1px solid;padding:5px;border-radius:7px;}
.image-blog{width: 100%;display: block;position: relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center;}
.image-blog{height:30vh;border-radius:7px;}
.imagefull img{display:block;width:100%;height:100%;position: absolute;top: 50%;left: 50%;margin:0 auto;object-fit: cover;-webkit-transform: translate3d(-50%, -50%, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, -50%, 0);-o-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}

@keyframes pulse {
    0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.marquee-wrapper, .marquee-wrapper2, .marquee-wrapper3 {overflow: hidden;width: 100%;}
.marquee-inner, .marquee-inner2, .marquee-inner3 {display: flex;}
.marquee-inner .ratio, .marquee-inner2 .ratio {flex-shrink: 0;margin: 5px 20px 5px 5px;width: clamp(330px, 22vw, 530px);object-fit: cover;overflow: hidden;border-radius:7px;background:var(--cwhite);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);position:relative;border:var(--brdgrey) 1px solid;text-align:center;}

.carousel {background:transparent;}
.blog .carousel{padding:0;}
.carousel-cell {width: 100%;counter-increment: gallery-cell;cursor:default;}
.blog .carousel-cell{width:calc(33.33333333% - 14px);margin:0 10px;}
.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%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}
.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");}
.blog .flickity-prev-next-button{width:30px;height:30px;border-radius:30px;background-position:center;background-size:30% auto;}
.blog .flickity-prev-next-button.previous{left:10px;background-color:var(--blue)!important;}
.blog .flickity-prev-next-button.next{right:15px;background-color:var(--pink)!important;}

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

.footer{position:relative;overflow:hidden;background:var(--cblack);padding:40px 0;margin:10vh 0 0;}
.copyright{position:relative;overflow:hidden;height:30px;border-radius:30px;background: linear-gradient(to right, var(--blue) 0%, var(--pink));padding:0 15px;opacity:0.7;}
.copyright p{font-size:90%;margin:0;padding:0;line-height:1.1;color:var(--cwhite);}