@font-face {
    font-family: 'DINPro-Regular';
    src: url('../fonts/DINPro-Regular.eot');
    src: url('../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DINPro-Regular.woff2') format('woff2'),
    url('../fonts/DINPro-Regular.woff') format('woff'),
    url('../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}
@font-face {
    font-family: 'DINPro-Black';
    src: url('../fonts/DINPro-Black.eot');
    src: url('../fonts/DINPro-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DINPro-Black.woff2') format('woff2'),
    url('../fonts/DINPro-Black.woff') format('woff'),
    url('../fonts/DINPro-Black.ttf')  format('truetype'),
    url('../fonts/DINPro-Black.svg#DINPro-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINPro-Bold';
    src: url('../fonts/DINPro-Bold.eot');
    src: url('../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DINPro-Bold.woff2') format('woff2'),
    url('../fonts/DINPro-Bold.woff') format('woff'),
    url('../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}



p {font-family:'Roboto',sans-serif!important; margin-bottom:20px!important;}
h1,h2,h3,h4,h5,h6 {font-family:"DINPro-Regular",sans-serif!important;}
h1,h2,h3,h4,h5,h6 strong{font-family:"DINPro-Regular",sans-serif;}
.text-title-white h2 {color:#fff;}
.text-title-white h3 {color:#fff;}
.jarak-teks h4 {margin-bottom: 20px}
.color-white {color:#fff!important;}
.color-red {color:#dc3545!important;}
.text-title-white h2 {padding-bottom: 10px;}
.bullet-patent {background: #000; padding: 30px;border-radius:50%;text-align: center; height:170px;width: 170px;margin-bottom:20px; text-align: center;position: relative; vertical-align: middle }
.bullet-patent p{color:#fff;font-size: 14px; text-transform: uppercase;vertical-align: middle;}
/*.bullet-patent-different:hover {background: #c89714; padding: 30px;border-radius:50%;text-align: center;width: 170px; height:170px;margin-bottom:20px; text-align: center }*/
.brk-animated-circle__container .bullet-patent:hover {background: #c89714; padding: 30px;border-radius:50%;text-align: center;width: 170px; height:170px;margin-bottom:20px; text-align: center }
.bullet-patent-different p{color:#fff;font-size: 14px; text-transform: uppercase;vertical-align: middle}
/*margin:20px;border:5px dotted #000; */
.bg-black {background: #000;}
.brk-ic-left-slide h4 {color:#ffcc00;padding-bottom:10px;font-size: 20px;font-weight: bold;}
.brk-ic-left-slide ul {margin-left:20px;}
.brk-ic-left-slide ul li {list-style-type: disc; line-height: 1.5em;}
.nolist-disc ul li {list-style-type: none!important;}
.brk-ic-left-slide.brk-ic-left-slide-2{position:relative;overflow:hidden;max-height:350px}
.type-decimal ol {margin-left:20px;}
.type-decimal ol li {list-style-type: decimal; line-height: 2em;}
.title-news .date {color:#ff0000;padding-bottom:10px;}
.title-news a h4 {font-weight: bold;}
.color-brown {color:#e7ba02;}
.brk-footer {border-top: 30px solid #ffcc00;}
.btn.btn-danger {background-color: #dc3545!important;}
.btn-danger.btn-outline-light {background-color: transparent!important;border-color:#dc3545!important;color:#dc3545!important;}
/*.btn.btn-danger:hover {background-color: #c00000!important;}*/
.brk-bg-gray-1 {
    background-color: #f1f1f1; }
.brk-bg-gray-2 {
    background-color: #adadad; }
.brk-tabs-simple-top .magic-line {display: none!important;}
.brk-tabs-simple-top .active {color:#ff0000!important;}
.border-right-1 li {border-left: 1px solid #f1f1f1;}
.brk-tabs-simple-top.brk-tab.active span {color:#c62127!important;}
.services-architecture {
    padding: 15px 0;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: inline-flex;
}
.services-architecture__icon {
    width: 60px;
}
.services-architecture__icon i {
    vertical-align: 0;
    color: var(--brand-primary);
    font-size: 4.25rem;
}
.services-architecture__container {
    width: -webkit-calc(100% - 70px);
    width: calc(100% - 70px);
    padding-left: 30px;
}
.services-architecture__container h4 {color:#fff;}
.brk-ic-left-slide__wrapper.projectnya {width: 100%!important; padding: 0 13px 0px 12px!important;bottom: -13px!important;}
.brk-ic-left-slide__wrapper.projectnya:hover {transition: transform 1s ;transform: translate(0px, -10px);}
.brk-base-bg-gradient-6-black:hover {transition: transform 1s ;transform: translate(0px, -10px);}
.brk-ic-left-slide.min-height-450 {min-height:auto!important;}
.projectnya h4 {color:#fff;font-size: 18px;font-weight: bold;}
.projectnya p {color:#fff;}
.brk-btn-swipe-card_masonry.full-lebarnya {width: 100%!important;height:100%!important;}
.timer-teks {position: relative;bottom: 19px;}
.color-yellow {color:#ffcc00;}
.breadcrumbs__section-squared h3 {
    color: #fff;
    text-transform: uppercase;
}
.brk-base-bg-gradient-top-black {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(60%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
}
/*.brk-social-links .fab:hover {color:#39589A!important;}
.brk-social-links .twi:hover {color:#26ABE2!important;}
.brk-social-links .ins:hover {color:#ED64A5!important;}
.brk-social-links .you:hover {color:#ff0000!important;}*/
.brk-social-links a {
    color: #fff!important;

    margin-right:3px;
}
.fa-youtube:before {left: -2px;position: relative;}
.brk-social-links .fab {
    line-height: 8px;
    font-size: 10px;
    border: 1px solid #fff;
    padding: 7px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}
.brk-social-links .fab:hover {
    color:#333;
    background: #ffcc00;
}
.brk-social-links .face {color:#5BB0FC!important;}
.brk-social-links .twi {color:#6CDCFF!important;}
.brk-social-links .ins {color:#FFA4D0!important;}
.brk-social-links .you {color:#ff0000!important;}
.brk-social-links .link {color:#7bbaed!important;}

/*.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 10px;
    padding-left: 10px;
}*/

.mb-05 {margin-bottom: 5px;}
.mt-05 {margin-top: 5px!important;}

.padleftrighht-2 {
    padding-right: 2px;
    padding-left: 2px;
}

.padleftrighht-7 {
    padding-right: 5px!important;
    padding-left: 5px!important;
}
.padleftrighht-0 {
    padding-right: 0px!important;
    padding-left: 0px!important;
}

.logo-iso-footer {
    width: 40px;
    display: inline-block;
    margin-right: 5px;
    margin-top:40px;
    text-align: center;
}
.brk-ic-left-slide__wrapper.set-tingginya {min-height: 100px;}
.brk-logos__img {
    -webkit-filter: grayscale(100%) brightness(60%) contrast(100%);
   /*filter:  grayscale(100%) brightness(60%) contrast(100%);*/
    opacity: .4!important;
    border: 1px solid #eee;
    padding: 10px;
}
.brk-logos__img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    opacity: 1!important;
}

.brk-nav__menu .active a   {color:#c62127!important;}

.grayscale-gambarnya img {
    filter: gray;
    -webkit-filter: saturate(10%) grayscale(10%) brightness(100%) contrast(100%);
    opacity: .7;
}
.brk-abs-img:hover {-webkit-transform: scale(1.1);transform: scale(1.1);}

/*Ripple Dot Animation*/

.pinkBg {
    background-color: #e7ba02!important;
    background-image: linear-gradient(90deg, #e7ba02, #d5ab01);
}

.brk-ic-left-slide__wrapper.bg-up {
    bottom: 20px;
}

.intro-play-btn-mail{position: relative;margin:20px 0;}
.intro-banner-vdo-play-btn{
    height:50px;
    width:50px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-20px 0 0 -30px;
    border-radius:100px;
    z-index:1
}
.intro-banner-vdo-play-btn i{
    line-height:49px;
    font-size:28px
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 5.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}
.brk-animated-circle.posisinya-rela {
    position:relative;
    z-index:1;
}
.posisinya-rela .brk-animated-circle__container {
    left: 15px!important;
    top: 15px!important;
}
.highlight-underline.no-upper-text {
    text-transform: none!important;
}

.text-small-footer p {
    font-size: 14px;
    line-height: 20px;
    margin: 0px!important;
}

.text-contact-us p{
    margin-bottom: 0px!important;
}
.text-produk-detail p{
    margin-bottom: 0px!important;
}

.text-small-footer i {
    font-size: 11px;
}

.type-font ul li {font-family:"DINPro-Regular",sans-serif!important;}
.padding-20 {padding:20px;}
.brs-portfolio-categories-item__title.posisinya-center {
    position: relative;
    width: 100%;
    top: 80px;
}
.brk-team-persone-circle__name-position {
    position: relative!important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    bottom: 10px;
    min-height: 100px;
}

.brk-header__logo-1, .brk-header__logo-2 {width: 100px;}
.brk-header-mobile-wrap__logo img, .brk-header-mobile__logo img {width: 100px;}

    /**** Demos ****/

#container {
    background: #FFF;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    clear: both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.centered { margin: 0 auto; }

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    font-size: 11px;
    line-height: 1.4em;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box h2 {
    font-size: 14px;
    font-weight: 200;
}

.box img,
#tumblelog img {
    display: block;
    width: 100%;
}

.rtl .box {
    float: right;
    text-align: right;
    direction: rtl;
}



.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

/**** Gutters ****/

.has-gutters .box {
    margin: 5px 0;
}

.has-gutters .col1 { width: 90px; }
.has-gutters .col2 { width: 230px; }
.has-gutters .col3 { width: 370px; }
.has-gutters .col4 { width: 550px; }

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.transitions-enabled.masonry {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -ms-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
}

/**** Primer comparison ****/

#comparison {
    overflow: auto;
}

#comparison .example {
    width: 420px;
    float: left;
    margin-right: 20px;
}

#comparison .box h5 {
    float: left;
    margin-bottom: 0;
    font-size: 30px;
    margin-right: 4px;
    line-height: 28px;
    font-weight: bold;
    color: #FFF;
}

/* Homepage */

.homepage .item {
    width: 200px;
    float: left;
    padding: 10px;
    margin: 10px;
    background: #D8D5D2;
    font-weight: 300;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.homepage .big-text,
.homepage .link {
    font-size: 24px;
    line-height: 1.2em;
}

.homepage .link {
    padding: 0;
}

.homepage .link a {
    display: block;
    padding: 10px;
    width: 200px;
    background: #D26;
    color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.homepage .link a:hover {
    background: #A2C;
}

.homepage .col2 {
    width: 440px;
}

.homepage .example {
    padding: 0;
    width: 220px;
    background: transparent;
}

.homepage .example a { display: block; }

.homepage .example img {
    display: block;
    width: 100%;
}

.homepage .example a:hover {
    background: #D26;
    color: white;
}

.homepage .loading {
    background: black;
    color: #D8D5D2;
}

.homepage .loading img {
    float: left;
    padding-right: 5px;
    width: 54px;
}

.homepage .bower,
.homepage .bower code {
    font-size: 17px;
}

/* mini example */

.homepage .mini div {
    float: left;
    background: white;
    margin: 3px;
    color: #D8D5D2;
    font-weight: bold;
    font-size: 32px;
    line-height: 46px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.homepage .mini .w1 { width: 44px; }
.homepage .mini .h1 { height: 44px; }
.homepage .mini .w2 { width: 94px; }
.homepage .mini .h2 { height: 94px; }

/* Tumblelog example */

#tumblelog {
    background: #FFF;
    padding: 1.0em;
}

#tumblelog .story {
    margin: 10px;
    border-top: 4px solid #DCB;
    padding-top: 10px;
    background: #FFF;
    float: left;
}

#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}

#tumblelog .col1 { width: 220px; }
#tumblelog .col2 { width: 460px; }
#tumblelog .col3 { width: 700px; }

#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
    max-width: none;
}

/* Infinite Scroll loader */
#infscr-loading {
    text-align: center;
    z-index: 100;
    position: fixed;
    left: 45%;
    bottom: 40px;
    width: 200px;
    padding: 10px;
    background: #000;
    opacity: 0.8;
    color: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/**** Fluid ****/

#container.fluid  {
    padding: 5px 0;
}

/* right margin value is 0.1% less than calculated,
  to allow for rounding errors in Firefox */
.fluid .box {
    margin: 5px 0.9% 5px 1%;
    padding: 5px 1%;
}

.fluid .box.col1 { width: 16%; }
.fluid .box.col2 { width: 36%; }
.fluid .box.col3 { width: 56%; }

/**** Corner stamp ****/

.corner-stamp {
    width: 280px;
    height: 340px;
    padding: 10px;
    margin: 10px;
    float: right;
    background: red;
    color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


#alert a {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    display: block;
    background: #D26;
    color: white;
}

#alert a:hover {
    background: white;
    color: #A2C;
}

/*Masonry Gutter*/
.grid-item {
    width: 160px;
    height: 120px;

}
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }

.grid-item--width2 { width: 340px; }
.grid-item--width3 { width: 520px; }
.grid-item--width4 { width: 780px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

/*End Masonry Gutter*/

.maxw-970 .mb-160 {
    min-height: 100px;
}
.accordion .expanded h4 a{color:#fff;}

.accordion .card h4 {padding-bottom:0px;font-size: 18px;}

.garisnya button{
    /*box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);*/
    border: 1px solid rgba(205,205,205,.2);
    color: #272727;
}
.garisnya .btn{
    margin:0px;
}

.no-bg-white {background: transparent!important;}
.jarak-bawah h4 {margin-bottom: 20px;}
.dropdown:hover .dropdown-menu {
    display: block;
}

.landscape-slider-nav .slick-dots {
    left: 15%;
    bottom: 170px!important;
    background-color: transparent!important;
}
.landscape-slider-nav .slick-dots, .landscape-slider-nav .slick-dots button {
    /*display: none!important;*/
}


.accordion .no-bg-white {margin-bottom:10px;}

.card-toggle-icon:before {
    content: "\f150";
    font-family: "Font Awesome 5 Free";
    width: 25px;
    height: 25px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 900;
    color: #ff0000;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 15px;
    /*transform: rotate(135deg);*/
    /*transition: all 0.3s ease 0s;*/
}
.card-toggle-icon:not(.collapsed):before {
    content: "\f151";
    font-family: "Font Awesome 5 Free";
    width: 25px;
    height: 25px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 15px;
    /*transform: rotate(135deg);*/
    /*transition: all 0.3s ease 0s;*/
}
/*.accordion-slider .card-toggle-icon .after, .accordion-slider .card-toggle-icon .before {
    content: "\f150";
    font-family: "Font Awesome 5 Free";
    width: 25px;
    height: 25px;
    line-height: 28px;
    font-size: 15px;
    font-weight: 900;
    color: #f81ac1;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 15px;
    transform: rotate(135deg);
    transition: all 0.3s ease 0s;
}*/
.garisnya .dropdown-menu {
    min-width: 80px;
    text-align: center;
    margin: 0px!important;
}
.btn:not(:disabled):not(.disabled) {
    color: #333;
}

.garisnya ul li a{
    padding:10px;
}

.bg__style_2 {
    background-position: center center;
    background-repeat: no-repeat;
    /*background-size: contain;*/
    height: 560px;
}

/*Carousel Patent*/
#carousel {
    width:100%;
    /*border:1px solid #222;*/
    height:500px;
    position:relative;
    clear:both;
    overflow: visible;
    background:#FFF;
    top:-10px;
}
/*Carousel Patent*/

.box-inner{
    position: absolute;
    width: 362px;
    text-align: center;
    left: 36.4%;
    /*height: 388px;*/
    background-color: #fff;
    bottom: 56px;
    opacity: 1;
}
.box-inner h2{
    color:#333;
    font-weight: bold;
}

.patent-caption{
    position: relative;
    right: 0;
    top: 550px;
    left: 372px;
    width:30%;
    color:#333;
    font-size: 18px;
    font-weight:bold;
    line-height: 1.5em;
    text-align: center;
}
#carousel img {
    visibility:hidden; /* hide images until carousel can handle them */
    cursor:pointer; /* otherwise it's not as obvious items can be clicked */
}

.split-left {
    width:450px;
    float:left;
}
.split-right {
    width:400px;
    float:left;
    margin-left:10px;
}
#callback-output {
    height:250px;
    overflow:scroll;
}
textarea#newoptions {
    width:430px;
}
/*End Carousel Patent*/

/*Swiper Patent*/
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;

    /* Center slide text vertically */
   /* display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;*/
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: auto;
    height: 300px;
}
.swiper-slide .img-box {
    width:100%;
    height: auto;
    overflow: hidden;
}
.swiper-slide .img-box img{
    /*width:100%;*/

}
.swiper-slide .details{
    box-sizing: border-box;
    padding:5px;
    font-size: 20px;
}
.swiper-slide .details h3{
   margin:0px;
    padding:0px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5em;
}
.swiper-slide:nth-child(1n) {
    width: 10%;
    margin:0 10px;

}
.swiper-slide:nth-child(2n) {
    width: 10%;
    margin:0 10px;

}
.swiper-slide:nth-child(3n) {
    width: 10%;
    margin:0 10px;
    /*margin-right: 30px!important;*/
}
.swiper-slide:nth-child(4n) {
    width: 10%;
    margin:0 10px;
}
.swiper-slide:nth-child(5n) {
    width: 10%;
    margin:0 10px;
}
.btn { text-transform: none!important;}
/*End Swiper Patent*/

/*Fcarousel Patent*/

/**************** EXAMPLES *****************/
#top_carousel .item {width: 100%; height: 600px; position: relative; overflow: hidden;text-align: center;align-content: center;}
#top_carousel .item img {display: inline-block; /*width: 100%; height: 100%;*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#top_carousel .item .title {opacity: 0; visibility: hidden; width: 100%; background: rgba(200,200,200,0.5); font: 700 22px/28px Roboto; color: #ddd; text-align: center; text-shadow: 0 0 12px rgba(0,0,0,0.7); padding: 40px 15px; margin: auto; position: absolute; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px);}
#top_carousel .item.carousel_center .title {opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
#examples {}
#examples .wrapper {padding: 50px 15px;}

.fcarousel {opacity: 1;width: 100%; height: 600px;text-align: center;display: inline-block; -webkit-transition: opacity 0.3s ease-out 0s; -moz-transition: opacity 0.3s ease-out 0s; -ms-transition: opacity 0.3s ease-out 0s; -o-transition: opacity 0.3s ease-out 0s; transition: opacity 0.3s ease-out 0s;}
.fcarousel.inited {opacity: 1;width: 100%; height: 600px;text-align: center;display: inline-block}

@media (max-width: 1399px) {
    .brk-nav__menu>li>a {padding: 0 2px!important;}

}
@media screen and (min-width: 1280px) and (max-width: 2390px){
    .fullscreen-container {margin-bottom: 15px;height: 780px!important;}
    .tp-revslider-slidesli {max-height: 780px;}
    /*.defaultimg {height: 780px!important;}*/
    .large-jarak {margin-bottom: 15px;}
    .mt-custum-md-70 {
        margin-top: 30px;}
}
/*@media (min-width: 1280px) and (max-width: 2390px) {
    .mt-custum-md-70 {
        margin-top: 87px;
    }
    .fullscreen-container {
        margin-bottom: 15px;
        min-height: 740px!important;
    }
    .tp-revslider-slidesli, .tp-revslider-mainul {min-height: 740px!important;}
    !*.rev_slider {height:700px!important;}*!
}*/
/* @media all and (min-width: 2081px) and (max-width: 2790px){ */
    /* .fullscreen-container {margin-bottom: 15px;height: 1045px!important;} */
    /* .tp-revslider-slidesli {max-height: 1045px;} */
    
    /* .large-jarak {margin-bottom: 15px;} */
    /* .mt-custum-md-70 { */
        /* margin-top: 90px;} */
/* } */
@media all and (min-width:  1020px) and (max-width: 1240px){
    /*.fullscreen-container {margin-bottom: 15px;height: 800px!important;}
    .tp-revslider-slidesli {max-height: 800px;}*/
    .mt-custum-md-70 {
        margin-top: 70px!important;}
    /*.defaultimg {height: 780px!important;}*/
    .large-jarak {margin-bottom: 15px;}
}
@media screen and (max-device-height: 640px) {
    .mt-custum-md-70 {
        margin-top: 10px!important;
    }
}

/*@media all and (min-width: 600px)  and (max-width: 1024px){
    .mt-custum-md-70 {
        margin-top: 35px!important;}
}*/
/*@media all and (min-width: 2191px) and (max-width: 2390px){
    .fullscreen-container {margin-bottom: 15px;height: 850px!important;}
    .tp-revslider-slidesli {max-height: 850px;}
    !*.defaultimg {height: 780px!important;}*!
    .large-jarak {margin-bottom: 15px;}
}*//*
@media all and (min-width: 1241px)  and (max-width: 1280px){
    .mt-custum-md-70 {
        margin-top: 85px!important;}
}*/

@media all and (min-width: 1024px)  and (max-width: 1281px){
    .mt-custum-md-70 {
        margin-top: 35px;}
}
@media all and (min-width: 1024px){
    .fcarousel:focus {outline: 1px dotted #3086a9;}
    .fcarousel:focus .f_arrow:before, .fcarousel:focus .f_arrow:after,
    .fcarousel .f_arrow:focus:before, .fcarousel .f_arrow:focus:after {
        background: #3086a9 !important; box-shadow: 0 0 8px #3086a9;
    }
   /* .tp-revslider-slidesli {max-height: 1200px!important;}
    .fullscreen-container {max-height: 1200px!important;}*/
    /*.mt-custum-md-70 {
        margin-top: 85px!important;}*/
   /* .mt-custum-md-70 {
        margin-top: 40px!important;}*/
}

/*------ Example 1 ------*/
#example-1 {max-width: 100%; height: 300px; margin: 0 auto 80px;}
#example.inited {opacity: 1;}
#example-1 .item {width: 330px; height: 240px; font: 14px/18px Roboto; text-align: center;}
#example-1 .item .photo {display: block; width: 80px; height: 80px; background: #ccc; border-radius: 50%; margin: 0 auto 15px;}
#example-1 .item strong {display: block; font-size: 1.2em; margin-bottom: 10px;}
#example-1 .dots {width: 100%; height: 20px; font-size: 0; text-align: center; margin: auto; position: absolute; left: 0; right: 0; bottom: -30px; z-index: 10;}
#example-1 .dot {display: inline-block; vertical-align: middle; width: 20px; height: 20px; border: 2px solid #3086a9; border-radius: 50%; margin: 0 4px; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
#example-1 .dot:after {content:''; display: block; width: 66%; height: 66%; background: #3086a9; border-radius: 50%; margin: auto; position: absolute; left: 1px; right: 0; top: 0; bottom: 0; -webkit-transition: inherit; -moz-transition: inherit; -ms-transition: inherit; -o-transition: inherit; transition: inherit; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);}
#example-1 .dot.active:after {-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}

/*------ Example 2 ------*/
#example-2 {max-width: 1000px; height: 500px; margin: 0 auto 40px; overflow: hidden;}
#example-2 .item {width: 200px; height: 400px; -webkit-background-size: cover; background-size: cover;}
#examples .callbacks_info {height: 200px; background: #ddd; box-shadow: 0 0 16px rgba(0,0,0,0.5) inset; font: 16px/24px Roboto; padding: 25px 310px 25px 30px; margin: 0 auto 40px; position: relative;}
#examples .callbacks_info output {display: inline; font-size: 1.1em; font-weight: 700;}
#examples .callbacks_info .triggers {width: 270px; font-size: 0; text-align: center; position: absolute; top: 20px; right: 20px;}
#examples .callbacks_info .trigger {display: inline-block; vertical-align: top; width: 120px; height: 40px; background: #fff; border: 2px solid #3086a9; font: 14px/36px Roboto; color: #3086a9; text-align: center; margin: 5px;}
#examples .callbacks_info .trigger.active {background: #3086a9; color: #fff;}

/*------ Example 3 ------*/
#example-3 {width: 400px; height: 620px; margin: auto; overflow: hidden;}
#example-3 [class*="item"] {width: 360px; height: 240px; background: #666; box-shadow: 0 0 20px rgba(0,0,0,0.7); font: 700 100px/240px Roboto; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#example-3 .item-1 {
    background: #ff0000;
    background: -moz-linear-gradient(top,  #ff0000 0%, #ffa500 100%);
    background: -webkit-linear-gradient(top,  #ff0000 0%,#ffa500 100%);
    background: linear-gradient(to bottom,  #ff0000 0%,#ffa500 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffa500',GradientType=0 );
}
#example-3 .item-2 {
    background: #ffa500;
    background: -moz-linear-gradient(top,  #ffa500 0%, #ffff00 100%);
    background: -webkit-linear-gradient(top,  #ffa500 0%,#ffff00 100%);
    background: linear-gradient(to bottom,  #ffa500 0%,#ffff00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa500', endColorstr='#ffff00',GradientType=0 );
}
#example-3 .item-3 {
    background: #ffff00;
    background: -moz-linear-gradient(top,  #ffff00 0%, #008000 100%);
    background: -webkit-linear-gradient(top,  #ffff00 0%,#008000 100%);
    background: linear-gradient(to bottom,  #ffff00 0%,#008000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#008000',GradientType=0 );
}
#example-3 .item-4 {
    background: #008000;
    background: -moz-linear-gradient(top,  #008000 0%, #add8e6 100%);
    background: -webkit-linear-gradient(top,  #008000 0%,#add8e6 100%);
    background: linear-gradient(to bottom,  #008000 0%,#add8e6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#add8e6',GradientType=0 );
}
#example-3 .item-5 {
    background: #add8e6;
    background: -moz-linear-gradient(top,  #add8e6 0%, #0000ff 100%);
    background: -webkit-linear-gradient(top,  #add8e6 0%,#0000ff 100%);
    background: linear-gradient(to bottom,  #add8e6 0%,#0000ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#add8e6', endColorstr='#0000ff',GradientType=0 );
}
#example-3 .item-6 {
    background: #0000ff;
    background: -moz-linear-gradient(top,  #0000ff 0%, #483d8b 100%);
    background: -webkit-linear-gradient(top,  #0000ff 0%,#483d8b 100%);
    background: linear-gradient(to bottom,  #0000ff 0%,#483d8b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#483d8b',GradientType=0 );
}
#example-3 .item-7 {
    background: #483d8b;
    background: -moz-linear-gradient(top,  #483d8b 0%, #ff0000 100%);
    background: -webkit-linear-gradient(top,  #483d8b 0%,#ff0000 100%);
    background: linear-gradient(to bottom,  #483d8b 0%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#483d8b', endColorstr='#ff0000',GradientType=0 );
}

/*End Fcarousel Patent*/

.spesificat-produk dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0
}


.spesificat-produk dt {
    float: left;
    width: 35%;
    font-weight: normal;
    font-size: 14px;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
.spesificat-produk dd.sama-dengan {
    float: left;
    width: 3%;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
.spesificat-produk dd.detail-desc {
    float: left;
    width: 62%;
    font-size: 14px;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
.manufacturing-produk dt {
    float: left;
    width: 25%;
    font-weight: normal;
    font-size: 14px;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
.manufacturing-produk dd.sama-dengan {
    float: left;
    width: 3%;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
.manufacturing-produk dd.detail-desc {
    float: left;
    width: 72%;
    font-size: 14px;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0
}
/*End Ripple Dot Animation*/

#rightWhtasapp {
    position: fixed;
    right: 20px;
    bottom: 85px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    background: #ffcc00;
    z-index: 1200;
    -webkit-transition: \transform .3s ease;
    transition: \transform .3s ease;

}

#rightWhtasapp .iconnya {
    position: relative;
    top: 9px;
    left: 0px;

}

#rightEmailnya {
    position: fixed;
    right: 20px;
    bottom: 150px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    background: #ffcc00;
    z-index: 1200;
    -webkit-transition: \transform .3s ease;
    transition: \transform .3s ease;

}
#rightEmailnya .iconnya {
    position: relative;
    top: 9px;
    left:0px;

}

.contact-call dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0
}
.contact-call dt {
    float: left;
    width: 15%;
    padding: 0;
    font-weight: normal;
    margin: 0
}
.contact-call .sama-dengan {
    float: left;
    width: 2%;
    padding: 0;
    margin: 0
}
.contact-call .nomernya {
    float: left;
    width: 70%;
    padding: 0;
    margin: 0
}

@media (min-width: 1920px) {
    .h-auto {height: auto;}
    .brk-tabs_rounded .more-resolution{
        z-index: 1;
        height: 1900px!important;
    }
}
@media (max-width: 1440px) {
    /*.h-auto {height: auto;}
    .brk-tabs_rounded .more-resolution{
        z-index: 1;
        height: 700px!important;;
    }*/
}
@media (min-width: 1440px) {
    .container.paslayar20 {
        max-width: 1450px!important;
    }

    .h-auto {height: auto;}
    .brk-tabs_rounded .more-resolution{
        z-index: 1;
        height: 700px!important;;
    }
}
@media (min-width: 1020px) {
    .container.paslayar20 {
        max-width: 1400px;
    }
    .forcefullwidth_wrapper_tp_banner {
        /*height: 100%;*/

        height: 100%!important;
    }

    .fullscreen-container {
        position:relative;
        padding:0;
        /*height: 100%!important;*/
    }

}

@media (min-width: 1230px) {
    .container {
        max-width: 1100px;
    }
   /* .mt-custum-md-70 {
        margin-top: 87px;
    }
    .fullscreen-container {
        margin-bottom: 15px;
        height: 600px!important;
    }
    .rev_slider {height:710px!important;}*/
}

@media (max-width:1024px) {
    .beda-sendiri {
        height: 435px;
    }
    .flipster {
        display: block;
        overflow-x: scroll!important;
        overflow-y: visible;
        position: relative;
    }
    #carousel {
        width:100%;
        /*border:1px solid #222;*/
        height:500px;
        position:relative;
        clear:both;
        overflow-x: hidden!important;
        background:#FFF;
        top:-10px;
    }
    /*.landscape-slider-nav {
        right: -30px;
    }*/

}

@media (min-width:1024px) {
    .brk-ic-left-slide__img {
        min-height: 215px!important;
    }
    .brk-ic-left-slide.brk-ic-left-slide {
        position: relative;
        overflow: hidden;
        max-height: 100%!important;
        /* height: 100vh; */
    }
    .forcefullwidth_wrapper_tp_banner {
        /*height: 100%;*/

        height: 100%!important;
    }

    .fullscreen-container {
        position:relative;
        padding:0;
        height: 100%!important;
    }

    /*.hidden-lg {display: none!important;}*/
}

@media only screen and (min-width:991px) and (max-width:1024px){
    .landscape-slider-nav {
        right: -30px;
    }

}

/*@media only screen and (min-width:768px) and (max-width: 1366px){*/
@media screen and (max-width: 1366px) {
    /*.mt-custum-md-70 {
        margin-top: 90px;
    }*/
    /*.rev_slider {height:600px!important;}*/

}
@media (min-width:992px) {

    .container.paslayar20 {
        max-width: 1100px;
    }
    .padleftrighht-3 {
        padding-right: 3px;
        padding-left: 3px;
    }
    .pl-lg-120 {
        padding-left: 120px!important;
    }
    .padleft-0 {
        padding-left: 0px!important;
    }

}
@media (max-width:992px) {
    /*.hidden-md {display: none!important;}*/
    .brk-ic-left-slide__img {
        min-height: 215px!important;
    }
    .flipster {
        display: block;
        overflow-x: scroll!important;
        overflow-y: visible;
        position: relative;
    }
    #carousel {
        width:100%;
        /*border:1px solid #222;*/
        height:500px;
        position:relative;
        clear:both;
        overflow-x: hidden!important;
        background:#FFF;
        top:-10px;
    }
    .landscape-slider-nav .slick-dots {
        left: 80px;
        bottom: -95px!important;
        background-color: transparent!important;
    }

    .hidden-sm {display: none!important;}
    .brk-ic-left-slide.brk-ic-left-slide {max-height: none!important;}
    .bullet-patent-different {
        background: #c89714;
        padding: 30px;
        border-radius: 50%;
        text-align: center;
        width: 170px;
        height: 170px;
        margin-bottom: 20px;
        text-align: center;
        display: inline-block;
    }

    .dots-landscape-skin .dots-wrap {
        bottom: 100px!important;
        left: 19%!important;
        min-width: 150px!important;
    }

}

@media screen and (max-width: 768px) {
    .beda-sendiri {
        height: 330px;
    }

}

@media screen and (min-width:768px) {
    .padleftrighht-3 {
        padding-right: 3px;
        padding-left: 3px;
    }
    .padleft-0 {
        padding-left: 0px!important;
    }
    .brk-ic-left-slide__img {

        min-height: 215px!important;
    }
    /*#carousel img {
        width: 240px;
        height: 160px;
    }*/

}
@media (max-width: 767px) {
   .landscape-slider-nav__text {
          min-height: 800px;
      }
}


@media screen and (max-width: 480px) {
    .brk-bg-center-cover {
        height:700px;
    }

    .landscape-slider-for {
        top: -120px;
        left: 30px;
        width: 80%!important;
    }
    .landscape-slider-nav .slick-list, .landscape-slider-nav__content {
        top: 13px;
    /*.swiper-slide0px;*/
    }

    .hidden-xs {display: none!important;}
    .brk-grid__item {
        width: 100%!important;
    }
    .brk-grid__item.brk-grid__item_width-2.brk-grid__item_height-2 {
        width: 100%;
    }
    .brk-grid__item.brk-grid__item_width-2 {
        width: 100%;
        height: 200px;
    }
    .brk-grid__item.brk-grid__item_height-2 {
        width: 100%;
        height: 700px;
    }

    .img-xs-value {
        height: 320px!important;
        margin-top: 50px;
    }

}

@media screen and (max-width: 480px) {
    .brk-tabs_rounded .brk-tabs-nav {
        margin-top: -106px!important;
    }
    .padleftrighht-7 {
        padding-right:15px!important;
        padding-left: 15px!important;
    }
    .posisinya-rela svg {
        width: 150px;
        height: 150px;
    }
    .bullet-patent {
        width: 120px;
        height: 120px;
        padding: 20px;
    }
    .bullet-patent:hover {
        width: 120px;
        height: 120px;
        padding: 20px;
    }
    .bullet-patent p{
       padding-top:0px;
        font-size: 12px;
    }
    /*  .brk-grid__item_height-2 {
          width: 45%!important;
      }
       .brk-grid__item_width-2 {
          width: 100%!important;
      }*/
}
@media screen and (max-width: 768px) {
    .brk-tabs_rounded .brk-tabs-nav {
        margin-top: -106px!important;
    }
    .brk-ic-left-slide__wrapper.bg-up {
        bottom: 0px;
    }

    .padleftrighht-7 {
        padding-right:15px!important;
        padding-left: 15px!important;
    }
    .intro-play-btn-mail {
        left: 50px;
        float: left;
    }
    .justify-content-between {
        float: left;
    }
   /* .brk-grid__item_height-2 {
        width: 45%!important;
        !*position:relative!important;*!
    }
     .brk-grid__item_width-2 {
        width: 100%!important;
    }*/
}
@media (max-width: 576px) {
    .intro-play-btn-mail {
        left: 50px;
        float: left;
    }
    .justify-content-between {
        float: left;
    }
    .xs-height-fac {
        height:680px;
    }
    .dots-landscape-skin .dots-wrap {
        bottom: -95px!important;

    }
}
@media (max-width: 380px) {
    .img-xs-value {
        height: 247px!important;
        margin-top: 50px;
    }
    .landscape-slider-nav .slick-list, .landscape-slider-nav__content {
        position: relative;
        top: -5px;
    }
   /* .landscape-slider-nav__title {
        max-width: none;
        margin-top: 0px!important;
    }*/
    /*.landscape-slider-for .brk-slid {
        height: 362px!important;
        top: 30px;
    }*/
    .xs-height-fac {
        height:630px;
    }
    .dots-landscape-skin .dots-wrap {
        bottom: -180px!important;

    }
}