@font-face {
    font-family: 'Garamond Premiere Pro';
    src: url('fonts/GaramondPremrPro-Capt.eot');
    src: url('../fonts/GaramondPremrPro-Capt.eot?#iefix') format('embedded-opentype'), url('../fonts/GaramondPremrPro-Capt.woff2') format('woff2'), url('../fonts/GaramondPremrPro-Capt.woff') format('woff'), url('../fonts/GaramondPremrPro-Capt.svg#GaramondPremrPro-Capt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

body,
html {
    width: 100%;
    height: 100%
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

.btn-xl {
    padding: 1.25rem 2.5rem
}

.content-section {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem
}

.content-section-heading h2 {
    font-size: 3rem
}

.content-section-heading h3 {
    font-size: 1rem;
    text-transform: uppercase
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    font-family: "Garamond Premiere Pro";
}

.text-faded {
    color: rgba(255, 255, 255, .7)
}

.map {
    height: 30rem
}

@media (max-width:992px) {
    .map {
        height: 75%
    }
}

.map iframe {
    pointer-events: none
}

.scroll-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: rgba(52, 58, 64, .5);
    line-height: 45px
}

.scroll-to-top:focus,
.scroll-to-top:hover {
    color: #fff
}

.scroll-to-top:hover {
    background: #343a40
}

.scroll-to-top i {
    font-weight: 800
}

.masthead {
    min-height: 30rem;
    position: relative;
    display: table;
    width: 100%;
    height: auto;
    padding-top: 8rem;
    padding-bottom: 8rem;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .1))), url(../img/bg-masthead.jpg);
    background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 100%), url(../img/bg-masthead.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.masthead h1 {
    font-size: 4rem;
    margin: 0;
    padding: 0
}

@media (min-width:992px) {
    .masthead {
        height: 100vh
    }
    .masthead h1 {
        font-size: 5.5rem
    }
}

#sidebar-wrapper {
    position: fixed;
    z-index: 2;
    left: -500px;
    width: 250px;
    height: 100%;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    background: #e8e8ea;
    border-left: 1px solid rgba(255, 255, 255, .1)
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 15px;
    list-style: none
}

.sidebar-nav li.sidebar-nav-item a {
    display: block;
    text-decoration: none;
    color: #8a8383;
    padding: 10px;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #8a8383;
    border-bottom: 2px solid;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none
}

.sidebar-nav>.sidebar-brand {
    font-size: 1.2rem;
    padding-bottom: 75px;
    text-align: center;
}

.sidebar-nav>.sidebar-brand a {
    color: #fff
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: 0 0
}

#sidebar-wrapper.active {
    left: -250px;
    width: 250px;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s
}

.menu-toggle {
    position: fixed;
    left: 50px;
    top: 15px;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #ccc;
    background: #fff;
    line-height: 50px;
    z-index: 999;
    border-radius: 30px;
    border: 1px solid #ccc;
}

.menu-toggle:focus,
.menu-toggle:hover {
    color: #fff
}

.menu-toggle:hover {
    background: #343a40
}

.service-icon {
    background-color: #fff;
    color: #1d809f;
    height: 7rem;
    width: 7rem;
    display: block;
    line-height: 7.5rem;
    font-size: 2.25rem;
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1)
}

.callout {
    padding: 15rem 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .1))), url(../img/bg-callout.jpg);
    background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 100%), url(../img/bg-callout.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.callout h2 {
    font-size: 3.5rem;
    font-weight: 700;
    display: block;
    max-width: 30rem
}

.portfolio-item {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 530px;
    margin: auto auto 1rem
}

.portfolio-item .caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    background-color: rgba(33, 37, 41, .2);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1
}

.portfolio-item .caption .caption-content {
    color: #fff;
    margin: auto 2rem 2rem
}

.portfolio-item .caption .caption-content h2 {
    font-size: .8rem;
    text-transform: uppercase
}

.portfolio-item .caption .caption-content p {
    font-weight: 300;
    font-size: 1.2rem
}

@media (min-width:992px) {
    .portfolio-item {
        max-width: none;
        margin: 0
    }
    .portfolio-item .caption {
        -webkit-transition: -webkit-clip-path .25s ease-out, background-color .7s;
        -webkit-clip-path: inset(0);
        clip-path: inset(0)
    }
    .portfolio-item .caption .caption-content {
        -webkit-transition: opacity .25s;
        transition: opacity .25s;
        margin-left: 5rem;
        margin-right: 5rem;
        margin-bottom: 5rem
    }
    .portfolio-item img {
        -webkit-transition: -webkit-clip-path .25s ease-out;
        -webkit-clip-path: inset(-1px);
        clip-path: inset(-1px)
    }
    .portfolio-item:hover img {
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem)
    }
    .portfolio-item:hover .caption {
        background-color: rgba(29, 128, 159, .9);
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem)
    }
}

footer.footer {
    padding-top: 3rem;
    padding-bottom:3rem
}

footer.footer .social-link {
    display: block;
    height: 4rem;
    width: 4rem;
    line-height: 4.3rem;
    font-size: 1.5rem;
    background-color: #1d809f;
    -webkit-transition: background-color .15s ease-in-out;
    transition: background-color .15s ease-in-out;
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1)
}

footer.footer .social-link:hover {
    background-color: #155d74;
    text-decoration: none
}

a {
    color: #404a4d
}

a:active,
a:focus,
a:hover {
    color: #155d74
}

.btn-primary {
    background-color: #1d809f!important;
    border-color: #1d809f!important;
    color: #fff!important
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #155d74!important;
    border-color: #155d74!important
}

.btn-secondary {
    background-color: #ecb807!important;
    border-color: #ecb807!important;
    color: #fff!important
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: #ba9106!important;
    border-color: #ba9106!important
}

.btn-dark {
    color: #fff!important
}

.btn {
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1);
    font-weight: 700
}

.bg-primary {
    background-color: #1d809f!important
}

.text-primary {
    color: #1d809f!important
}

.text-secondary {
    color: #ecb807!important
}

.searchdiv {
    position: fixed;
    top: 20px;
    right: 50px;
    z-index: 1;
    background: #f3f0f0;
    border-radius: 30px;
    padding-left: 16px;
}

.btnsearch {
    font-weight: 900;
    border-radius: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #908a8c;
}

.txtsearch {
    background: transparent;
    border: none;
}

.searchdiv a {
    color: inherit;
}

.carousel-item {
    height: 600px;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-caption h3 {
    text-align: left;
    font-size: 60px;
    font-weight: inherit;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.85);
    font-family: initial;
}

.carousel-caption p {
    text-align: left;
    font-size: 20px;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.85);
}

.thumb {
    text-align: center;
}

.perupacontainer {
    margin-top: 65px;
    width: 980px;
}

.pageperupa {
    float: left;
    width: 100%;
}

.thumblist {
    position: relative;
    width: 50%;
}

.imgtum {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.thumblist:hover .imgtum {
    opacity: 0.3;
}

.thumblist:hover .middle {
    opacity: 1;
}

.text {
    color: #cc;
    font-size: 30px;
    padding: 16px 32px;
}

.thumbnail_list {
    position: relative;
    text-align: center;
    width: 100%;
    height: 145px;
    overflow: hidden;
}

.thumbnail_list img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.thumbnail_list img.potraitthumb {
    width: 90%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.karyacontainer {
    margin-top: 90px;
}

.lithumb {
    width: 215px;
    padding: 0;
    margin-bottom: 25px;
}

.descthumb {
    line-height: 0.5em;
    margin-top: 10px;
}

.headerabout {
    position: relative;
    opacity: 0.65;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.headerabout {
    background-image: url("../img/slider1.png");
    min-height: 100%;
}

.caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
}

.caption span.border {
    color: #fff;
    padding: 18px;
    font-size: 40px;
    letter-spacing: 10px;
}

.topdetail {
    background: #e5e3e4;
    border-bottom: 1px solid #ccc;
}

.containertop {
    padding-left: 30%;
    padding-top: 35px;
    line-height: 1em;
    padding-bottom: 3%;
}

.containertop h1 {
    font-size: 30px;
    color: #6b6868;
    margin: 0;
}

.imgperupadetail {
    position: absolute;
    top: 7%;
    left: 10%;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.perupadetailcontainer {
    padding-top: 25px;
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #ccc;
}

.isidetail {
    color: #777;
    text-align: center;
    /* padding: 50px 80px; */
    text-align: justify;
    padding-left: 33%;
    padding-top: 35px;
    line-height: 1em;
    overflow: scroll;
    max-height: 250px;
    padding-right: 2%;
    min-height: 250px;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.imgkarya {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#background {
    width: 100%;
    height: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
    /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width: 100%;
    height: 100%;
}

.divdesc {
    background: #787272;
    width: 30px;
    height: 100%;
    position: fixed;
    color: #fff;
}

.divdesc label {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    letter-spacing: 8px;
    font-weight: bold;
    margin-top: 24px;
}

.detailkaryadiv {
    background: #787272de;
    position: fixed;
    width: 35%;
    height: 100%;
    color: #fff;
    padding: 15px;
    text-align: center;
    padding-top: 75px;
    font-size: 15px;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    left: -55%;
}

.detailkaryadiv.active {
    left: -20%;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.detailkaryadiv.activemenu {
    left: 0%;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.detailkaryadiv h1 {
    font-size: 28px;
}

.detailkaryadiv p {
    text-align: justify;
    padding: 20px 50px;
}

.detailkaryadiv img {
    height: auto;
    width: 150px;
}

.closeDivDetail {
    position: absolute;
    color: #fff;
    top: 10px;
    right: 20px;
}

.paging_block {
    width: 100%;
    text-align: center;
}

.contentperupa {
    min-height: 330px;
}

.nav li {
    float: left;
    padding: 10px 15px;
}

.nav li a {
    float: left;
}

.koleksidiv {
    float: left;
    list-style: none;
    width: 193px;
    max-width: 100%;
}

.formsearch {
    display: none;
}

.koleksiimg {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

.koleksilabel {
    text-align: left;
    width: 100%;
    float: left;
    color: #d0ca21;
}

.sectionkoleksi {
    padding: 0 4%;
    padding-top: 2%;
}

.divkoleksi {
    width: 100%;
    float: left;
    border-bottom: 1px solid #000;
}

.divkoleksi h3 {
    float: left;
    font-family: "Garamond Premiere Pro";
}

.divkoleksi a {
    float: right;
}

.gridkoleksi {
    padding: 0 4%;
}

.perupalist {
    /*list-style: none;
float: left;*/
}

.newslist img {
    max-width: 100%;
}

.sectionnews {
    padding: 0 3%;
}

.divdetailnews {
    background: #ffffffc7;
    position: absolute;
    bottom: 0;
    /* left: 0; */
    width: 93%;
    padding: 0 30px;
    line-height: 0;
    min-height: 40%;
    display: none;
}

.divdetailnews h2 {
    line-height: 1em;
    margin: 0;
    margin-top: 10%;
    font-size: 38px;
    color: #000;
}

.divdetailnews label {
    color: #000;
}

.divdetailnews h3 {
    font-size: 20px;
    color: #000
}



.bdfooter{
     border:1px solid #c6c7c7 !important;
}

.borderfooter {
   border-right: 1px solid #00000038;
    font-size: 12px;
 }

.linkfooter li{
    list-style: none;
}

.linkfooter li a{
    color: #000;
     font-size: 12px;

}

 .footer h4{
    font-size: 12px;
}

  footer{
     background: white;
    padding: 20px;
      font-size: 12px;
}

.footermenu span.firstfoot{    padding-left: 0;padding-right: 5%;}
.footermenu span{padding: 0 10px;}
.rightfoot{float: right;     text-align: right;
    padding: 0 !important;}
.rightfoot label{
    padding-right: 20px;
    margin: 0;
    vertical-align: middle;
    font-size: 16px;
}
.rightfoot a{padding: 3px;}
.rightfoot img{width: 6%;}

.karyalist {
    padding: 7px;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    min-height: 300px;
    max-height: 300px;
}

.karyalist figcaption {
    position: absolute;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
    top: 0;
    background: #fff;
    width: 96%;
    height: 100%;
    /* display: none; */
    padding: 25px;
    overflow: hidden;
}

.karyalist:hover figcaption {
    opacity: 1;
}

.karyalist:hover {}

.karyalist p {
    color: #2f3238;
    -webkit-transition: opacity 0.40s, -webkit-transform 0.40s;
    transition: opacity 0.40s, transform 0.40s;
    -webkit-transform: translate3d(-360px, 0, 0);
    transform: translate3d(-360px, 0, 0);
}

.karyalist h3 {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    -webkit-transition: opacity 0.30s, -webkit-transform 0.30s;
    transition: opacity 0.30s, transform 0.30s;
    -webkit-transform: translate3d(-360px, 0, 0);
    transform: translate3d(-360px, 0, 0);
    font-weight: normal;
    font-size: 20px;
}

.karyalist p {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.karyalist:hover h3 {
    -webkit-transition-delay: 0.10s;
    transition-delay: 0.10s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.karyalist:hover p {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.karyalist img {
    width: 100%;
    max-width: 100%;
    min-height: 300px;
}

.seckarya {
    padding: 0 3%;
}

.divkarya {
    border-bottom: 2px solid #e7a541 !important;
    margin-bottom: 5px;
    margin-top: 0;
}

.bgkarya {
    background: #f2eee1;
    margin-top: 5px;
}

.bgkarya h3 {
    font-size: 20px;
    color: #ababab;
    margin-top: .4rem;
}

.pagingkarya {
    text-align: right;
    float: right;
    color: #cc;
}

.formsearchkarya {
    float: right;
}

.formsearchkarya input {
    border: none;
    font-size: 12px;
    text-align: left;
    margin-right: 10px;
    width: 150px;
}

.popups {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    text-align: center;
    background: #000000bd;
    display: none;
}

.navbar {
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.11);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.11);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.11);
}

.toppoups {
    min-height: 87px;
}

.centerpopups {
    background: #000;
}

.centerpopups img {
    /*border: 1px solid #826219;*/
}

.bottompop {
    min-height: 315px;
    color: #fff;
    line-height: 2em;
    padding-top: 25px;
}

.bottompop h3 {
    font-weight: normal;
}

.arrowrightkarya {
    color: #fff;
    font-size: 60px;
    /* float: right; */
    margin-left: 5%;
}

.arrowleftkarya {
    color: #fff;
    font-size: 60px;
    /* float: right; */
    margin-right: 5%;
}

.closepop {
    color: #fff;
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 30px;
}

.sectionkoleksilist {
    background: #f3f0f0;
    padding-top: 2%;
        padding-bottom: 3%;
}


/* The overlay effect with black background */

.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(241, 92, 75, 0.85);
    /* Black with a little bit see-through */
}


/* The content */

.overlay-content {
    position: relative;
    top: 40%;
    width: 65%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}


/* Close button */

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: white;
}

.overlay .closebtn:hover {
    color: #ccc;
}


/* Style the search field */

.overlay input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 93%;
    border: none;
    background: none;
    border-bottom: 2px solid #fff;
    color: #fff;
}

.overlay input[type=text]:hover {
    border: none;
    border-bottom: 2px solid #fff;
}


/* Style the submit button */

.overlay button {
    float: left;
    width: 7%;
    padding: 15px;
    background: none;
    font-size: 35px;
    color: #fff;
    border: none;
    cursor: pointer;
}

.overlay button:hover {}

.txtsearch::-webkit-input-placeholder {
    color: #fff;
}

.txtsearch:-moz-placeholder {
    color: #fff;
}

.txtsearch::-moz-placeholder {
    color: #fff;
}

:-ms-input-placeholder {
    color: #fff;
}


/*---------------*/

.listnews figcaption {
    top: auto;
    bottom: 0;
    width: 100%;
    padding: 1em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    position: absolute;
    background: #ffffffc2;
    height: 45%;
}

.listnews h2 {
    float: left;
}

.listnews h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}

.listnews h3 {
    -webkit-transition: -webkit-transform 0.40s;
    transition: transform 0.40s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}

.listnews h2 {
    display: inline-block;
    font-size: 20px;
}

.listnews h3 {
    font-size: 18px;
}

.listnews:hover figcaption,
.listnews:hover h2,
.listnews:hover h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.listnews:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.listnews:hover h3 {
    -webkit-transition-delay: 0.07s;
    transition-delay: 0.07s;
}

.listnews {
    overflow: hidden;
}

.listnews img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}

.listnews:hover img {
    /* -webkit-transform: scale(1);
    transform: scale(1);*/
}

.listnews:hover {
    overflow: hidden;
}

.listperupa {
    overflow: hidden;
    width: 30.5%;
    margin: 0 19px;
    margin-left: 17px;
    /* padding-left: 41px; */
    margin-right: 16px;
}

.listperupa img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.listperupa:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

a {
    text-decoration: none !important;
}

.jeniskarya {
    position: relative;
}

.temakarya {
    position: relative;
}

#jenisbenda {
    display: none;
}

.jenisbenda {
    position: absolute;
    left: 0;
    padding-bottom: 10px;
    padding: 0;
    background: #ffffffe3;
    /* color: #fff; */
<<<<<<< HEAD
    width: 150px ;
=======
    width: 150px;
>>>>>>> fab20b2ae028dcf77c07b5e59232ef372fd92a54
    border: 1px solid #cccccca3;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 8px;
    margin-top: 14px;
    /* padding-bottom: 15px; */
    /* margin: 10px; */
    z-index: 2;
    border-top: none;
    padding-top: 0;
}

#jenistema {
    display: none;
}

.jenisbenda li,
.jenistema li {
    list-style: none;
    border-bottom: 1px solid #b9b7b78f;
    padding: 5px;
}

.filtermenu {
    float: left;
    padding: 0 2%;
}

.filtermenu a {
    cursor: pointer;
    padding: 5px;
}
}


/*--- isotop ---*/

.isotope {
    overflow: inherit !important;
}

.portfolioFilter {
    padding-left: 30px;
}

.portfolioFilter a {
    padding: 2px;
}

.portfolioFilter a.current {
    font-weight: bold;
}

.portfolioContainer {}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
    padding-left: 1%;
    line-height: 1.4em;
}

.isotope-item label {
    font-weight: bold;
    color: #989898;
}

.isotope-item font {
    font-weight: bold;
}

.isotope-item h5 {
    margin-bottom: 0;
}

.containerperupa {
    min-height: 500px;
}

.profil img {
    max-width: 100%;
}

.profildetail h2 {
    color: #1d2124;
}

.sectionprofile {
    margin-top: 30px;
    padding-bottom: 45px;
}

.fulltext {
    max-height: 342px;
    overflow: hidden;
    position: relative;
    transition: max-height .5s ease;
}

.panel-wrapper {
    position: relative;
    z-index: 0;
}

.show {
    position: absolute;
    bottom: -1em;
    z-index: 100;
    text-align: left;
    background: #ffffffa1;
    width: 100%;
    padding-top: 50px;
    color: #000;
}

.hide {
    position: absolute;
    bottom: 8%;
    z-index: 100;
    text-align: center;
}

.hide {
    display: none;
}

.show:target {
    display: none;
}

.show:target~.hide {
    display: block;
}

.show:target~.panel {
    max-height: 2000px;
}

.show:target~.fade {
    margin-top: 0;
}

.panel {
    position: relative;
    max-height: 320px;
    overflow: hidden;
    transition: max-height .5s ease;
}

.fade {
    background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 1) 75%);
    height: 100px;
    margin-top: -100px;
    position: relative;
}

.artikel img {
    max-width: 100%;
    width: 100%;
    max-height: 700px;
}

.sectionistana {
    margin-top: 50px;
}

.sidebaristana {
    padding: 0 35px;
}

.sidebaristana h3 {
    color: #afab3d;
    margin-bottom: 20px;
    font-family: "Garamond Premiere Pro";
}

.sidebaristana font {
    font-weight: bold;
    margin-top: 10px;
    float: left;
    width: 100%;

}

.sidebaristana label {
    line-height: 1.2em;
}

.sidebarberita font {
    margin-top: 0;
    font-style: "GaramondPremrPro-Capt";
}

.sidebarberita .source {
    font-size: 12px;
}

.sidebarberita span {
    border-top: 1px solid #000;
}

.sidebarberita .date {
    font-size: 12px;
    color: #868080;
}

.beritaterkait {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.isiberita .imgartikel {
    max-width: 100%;
    width: 100%;
    margin-bottom: 40px;
}

.isiberita .date {
    font-size: 12px;
    color: #868080;
    margin: 0;
}

.heading {
    line-height: 0.5em;
    margin-bottom: 20px;
}


/* Main menu wrapper */

.cbp-hsmenu-wrapper {
    position: relative;
}


/* Common style for all lists */

.cbp-hsmenu-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
}



/* 100% width bar for menu */

.cbp-hsinner {
    position: relative;
    z-index: 100;
}


/* Main menu style */

.cbp-hsmenu-wrapper .cbp-hsmenu {
    width: 100%;
    margin: 0 auto;
}

.cbp-hsmenu>li {
    margin-left: 0;
    display: inline-block;
    /* font-size: 22px; */
    padding: 0 10px;
}

.cbp-hsmenu>li a:hover{
    font-style: italic;
}

.cbp-hsmenu>li a:active{
    font-style: italic;
}


.cbp-hsmenu>li:first-child {
    margin-left: 0;
}


/* Main menu link style */

.cbp-hsmenu>li>a {
    font-size: 17px;
    font-family: "GaramondPremrPro-Capt";
    font-kerning: normal;
    color: #867e7e;
    line-height: 3em;
    display: inline-block;
    position: relative;
    z-index: 0;
    outline: none;
}



.no-touch .cbp-hsmenu>li>a:hover,
.no-touch .cbp-hsmenu>li>a:focus,
.cbp-hsmenu>li.cbp-hsitem-open>a {
    color: #02639d;
}


/* Add an arrow to the main menu link if it has a submenu (not the only child) */

.cbp-hsmenu>li>a:not(:only-child):before {
    /*display: inline-block;
    font-family: 'bpmenu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\f107";
    font-size: 80%;
    margin-right: 0.3em;
    opacity: 0.4;
    vertical-align: middle;*/
}

.cbp-hsmenu>li.cbp-hsitem-open>a:not(:only-child):before {
    /* content: "\f106";*/
}


/* Add a triangle to currently open menu item link */

.cbp-hsmenu>li.cbp-hsitem-open>a:after {
    top: 77%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-bottom-color: #757373;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

.sectionhome {
    /*margin-bottom: 50px;*/
}


/* Submenu style */

.cbp-hssubmenu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 0;
    text-align: center;
    /* for aligning the sub items */
    visibility: hidden;
}

.cbp-hssubmenu:before,
.cbp-hssubmenu:after {
    content: " ";
    display: table;
}

.cbp-hssubmenu:after {
    clear: both;
}


/* Let's allow 6 item in a row */

.cbp-hssubmenu>li {
    width: 89%;
    margin-left: 2%;
    display: block;
    box-shadow: -28px 0 0 -27px #ddd, 0 -28px 0 -27px #ddd;
    opacity: 0;
    -webkit-transition: opacity 0.1s 0s;
    -moz-transition: opacity 0.1s 0s;
    transition: opacity 0.1s 0s;
    padding: 2px 0;
}


/* First 6 items don't have upper box shadow */

.cbp-hssubmenu>li:nth-child(-n+6) {
    box-shadow: -28px 0 0 -27px #ddd;
}


/* Every 7th item does not have a left box shadow */

.cbp-hssubmenu>li:nth-child(6n+1) {
    box-shadow: 0 -28px 0 -27px #ddd;
}


/* The first one does not have any box shadow */

.cbp-hssubmenu>li:first-child {
    box-shadow: none;
}

.cbp-hssubmenu>li:last-child {
    box-shadow: none;
    padding-bottom: 40px;
}

.cbp-hssubmenu>li a {
    display: block;
    text-align: left;
    color: #fff;
    outline: none;
    font-family: "GaramondPremrPro-Capt";
    /* padding: 5px 0;*/
}

.no-touch .cbp-hssubmenu>li a:hover,
.no-touch .cbp-hssubmenu>li a:focus {
    color: #888;
}

.cbp-hssubmenu>li a img {
    border: none;
    outline: none;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.no-touch .cbp-hssubmenu>li a:hover img {
    opacity: 0.5;
}

.cbp-hssubmenu>li a span {
    display: block;
    min-height: 3em;
    margin-top: 0.4em;
}

.cbp-hsmenu>li.cbp-hsitem-open .cbp-hssubmenu {
    z-index: 1000;
    visibility: visible;
    margin-top: 25px;
}

.cbp-hsmenu>li.cbp-hsitem-open .cbp-hssubmenu>li {
    opacity: 1;
    -webkit-transition: opacity 0.5s 0.1s;
    -moz-transition: opacity 0.5s 0.1s;
    transition: opacity 0.5s 0.1s;
}


/* Helper div for animating the background */

.cbp-hsmenubg {
    background: #757373eb;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 1;
}

.no-touch .cbp-hsmenubg {
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

@media screen and (max-width: 65em) {
    .cbp-hsmenu-wrapper {
        font-size: 80%;
    }
}

@media screen and (max-width: 51.4375em) {
    .cbp-hsmenu-wrapper {
        font-size: 100%;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
    }
    .cbp-hsmenu-wrapper .cbp-hsmenu {
        padding: 0;
        max-width: none;
        width: 100%;
        float: left;
    }
    .cbp-hsmenu>li {
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    .cbp-hsmenu>li:first-child {
        border-top: none;
    }
    .cbp-hsmenu>li>a {
        /*display: block;*/
        display: none;
    }
    .cbp-hsmenu>li>a:not(:only-child):before {
        line-height: 1.8;
        right: 0;
        position: absolute;
        font-size: 200%;
    }
    .cbp-hsmenubg {
        display: none;
    }
    .cbp-hssubmenu {
        background: #f7f7f7;
        position: relative;
        overflow: hidden;
        height: 0;
    }
    .cbp-hsmenu>li.cbp-hsitem-open .cbp-hssubmenu {
        height: auto;
    }
    /* Let's only allow 3 item in a row now */
    .cbp-hssubmenu>li {
        width: 30%;
    }
    /* Reset box shadows for the 6 items in row case */
    .cbp-hssubmenu>li:nth-child(-n+6),
    .cbp-hssubmenu>li:nth-child(6n+1) {
        box-shadow: -28px 0 0 -27px #ddd, 0 -28px 0 -27px #ddd;
    }
    /* First 4 items don't have upper box shadow */
    .cbp-hssubmenu>li:nth-child(-n+3) {
        box-shadow: -28px 0 0 -27px #ddd;
    }
    /* Every 5th item does not have a left box shadow */
    .cbp-hssubmenu>li:nth-child(3n+1) {
        box-shadow: 0 -28px 0 -27px #ddd;
    }
}

@media screen and (max-width: 25em) {
    /* Let's only allow 1 item in a row now */
    .cbp-hssubmenu>li {
        width: 100%;
        display: block;
    }
    .cbp-hsmenu-wrapper .cbp-hssubmenu>li {
        box-shadow: 0 1px #cecece;
        text-align: left;
    }
    .cbp-hssubmenu>li a {
        text-align: left;
        line-height: 50px;
        padding: 0.4em 1em;
    }
    .cbp-hssubmenu>li a img {
        float: left;
        max-height: 50px;
    }
    .cbp-hssubmenu>li a span {
        min-height: 0;
        margin: 0;
    }
}

.menufirst {
    border-bottom: 1px solid #fff;
}

.icon {
    display: none !important;
}

.logores {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .icon {
        float: right;
        display: block !important;
    }
    .cbp-hsmenu a:not(:first-child) {
        display: none;
    }
    .cbp-hsmenu form {
        display: none;
    }
    .overlay-content {
        top: 30% !important;
    }
    .overlay input[type=text] {
        width: 77%;
    }
    .responsive {
        position: relative;
    }
    .responsive .icon {
        position: absolute;
        left: 0%;
        top: 3px;
    }
    .icon {
        position: absolute !important;
        left: 0%;
        top: 3px;
    }
    .cbp-hssubmenu>li a {
        color: #000;
    }
    .cbp-hsmenu>li.cbp-hsitem-open .cbp-hssubmenu {
        margin-top: 0;
    }
    .cbp-hsinner {
        width: 100%;
    }
    .cbp-hssubmenu>li:last-child {
        padding-bottom: 0;
    }
    .carousel-item {
        height: auto;
    }
    .listnews figcaption {
        width: 100%;
    }
    .listnews {
        margin-bottom: 25px;
    }
    .listperupa {
        width: 100%;
        margin-bottom: 25px;
    }
    .filterkarya {
        width: 100%;
        float: left;
    }
    .formsearchkarya {
        float: left;
        width: 100%;
    }
    .responsive a {
        float: none;
        display: block !important;
        text-align: left;
    }
    .cbp-hsmenu>li.cbp-hsitem-open>a:after {
        display: none;
    }
    .responsive form {
        display: block !important;
    }
    .formsearchkarya {
        float: left;
        /* text-align: left; */
        /* padding: 0; */
        /* margin: 0; */
        border-bottom: 1px solid #ccc;
        width: 100%;
    }
    .formsearchkarya input {
        width: 88%;
    }
    .centerpopups img {
        max-width: 100%;
    }
    .arrowleftkarya {
        position: absolute;
        top: 20%;
        left: 2%;
    }
    .arrowrightkarya {
        position: absolute;
        top: 20%;
        right: 2%;
    }
    .navbar-brand {
        display: none;
    }
    .logores {
        display: block !important;
        float: right;
        margin-right: 5%;
    }
    .cbp-hsmenu>li>a.icon {
        line-height: 0;
    }
    .searchslot {
        display: none !important;
    }
    .menures {
        background: #f3f0f0;
        padding: 16px;
        margin-left: -16px;
        margin-top: -11px;
    }

    .footermenu span.firstfoot{
        width: 100%; float: left;
    }
    .sticky{
        position: relative !important;width: 100% !important;
    }
}


.sticky {
  position: fixed;
  top: 0;
  width: 21%;
}

.sticky + .content {
  padding-top: 102px;
}