@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);


/*body, div, span, p, h1, h2, h3, h4, h5, h6, ul, li { margin: 0; padding: 0;}*/

@font-face { 
    font-family: 'Helvetica-light';
    src: url('../fonts/Helvetica-Light.otf');
}
@font-face { 
    font-family: 'Helvetica-bold';
    src: url('../fonts/Helvetica-neue.otf');
}

@font-face { 
    font-family: 'HelveticaNeue';
    src: url('../fonts/Helvetica.ttf');
}

@font-face { 
    font-family: 'HelveticaNeueLight';
    src: url('../fonts/HelveticaNeue-Light.otf');
}

@font-face { 
    font-family: 'HelveticaNeueBold';
    src: url('../fonts/helvetica-neue-bold.ttf');
}

/* Get rid of all the rounded corners in Twitter Bootstrap */
* {
    /*    -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;*/
    /*    border-radius: 0 !important;*/
}

.clearfix { clear: both; }
a {color:#000; text-decoration: none;}
a:hover{ color: #ccc !important; text-decoration: none !important; transition: all ease 0.5s !important; }
body{margin: 0; color:#333; background: #fff;font-family: 'Ubuntu Condensed', sans-serif !important;  width: 100%;}
/*li{list-style: none;}*/

/*.container{
    width: 1184px !important;
    min-height:535px;
}*/

/*.helvetica-bold{font-family: 'Helvetica-bold';}
.helvetica-light{font-family: 'Helvetica-light';}
*/
.helvetica-bold{font-family: 'Helvetica-bold';}

.helvetica-light{font-family: 'Ubuntu Condensed', sans-serif !important;}

.helvetica-light-true{
    font-family:helvetica-light;
}

.helvetica-neue-reg{
    font-family: 'HelveticaNeue';
}

.helvetica-neue-light{
    font-family: 'HelveticaNeueLight';
}

.helvetica-neue-bold{
    font-family: 'HelveticaNeueBold';
}

/*.bold{font-family: 'Helvetica-bold';}*/
.light{font-family: 'Ubuntu Condensed', sans-serif !important;}

.italic{font-style: italic;}

.btn-follow-trans{float: left; width: 100%; border: 1px solid #ccc; padding: 4%; text-align: center; border-radius: 5px;}

.space-menu{float: left; width: 100%; margin-top: 8%}
.del-space-menu{float: left; width: 100%; margin-top: -8%}

.line-page-full{float: left; width: 100%; background: #ccc; height: 2px; margin: 20px 0;}

.black-active{color: #333 !important;}

.navbar-left{float: left !important;}
.navbar-right{float: right !important;}

section.mobile{display: none;}
section.desktop{display: block;}
.datepicker {z-index: 1200 !important;}

/*----*/
.no-padding{padding: 0 !important;}
.no-padding-left{padding-left: 0 !important;}
.no-padding-right{padding-right: 0 !important;}

.padding{padding: 10px !important;}
.padding-small{padding: 5px !important;}
.padding-top{/**padding: 10px 0 !important;**/}
.padding-top-20{padding: 20px 0 !important;}
.padding-top-small-small{padding: 5px 0 !important;}

.padding-bottom{padding-bottom: 20px !important;}
.padding-bottom-small{padding-bottom: 10px !important;}
.padding-bottom-small-small{padding-bottom: 10px !important;}

.padding-top-small{padding:5px 0!important;}
.padding-top-bottom{padding:10px 0;}

.padding-top-bottom th{
    padding:10px 5px;
    text-align:center;
}

.padding-top-bottom-large{padding:20px 0 !important;}
.padding-top-bottom-small{padding:5px 0 !important;}

.padding-top-bottom-small-small{padding:2px 0 !important;}

.padding-right-small{padding-right: 1px !important;}
.padding-left-small{padding-left: 5px !important;}

.padding-right-small{padding-right: 5px !important;}
.padding-right{padding-right: 10px !important;}
.padding-right-large{padding-right: 20px !important;}

.padding-left-small{padding-left: 5px !important;}
.padding-left{padding-left: 10px !important;}

.pointer{cursor: pointer;}

.padding-left-right-small{padding: 0 10px !important;}
.padding-left-right-small-small{padding: 0 5px !important;}

.no-margin{margin: 0 !important;}
.no-margin-right{margin-right: 0 !important;}
.no-margin-top{margin-top: 0 !important;}

.margin-small{margin: 5px;}
.margin-small-percent{margin: 1%;}

.margin-top{margin-top: 20px;}
.margin-top-large{margin-top: 40px;}
.margin-top-small{margin-top: 5px !important;}
.margin-top-small-8{margin-top: 8px;}

.margin-top-15{
    margin-top:15px;
}

.margin-bottom{margin-bottom: 20px !important;}
.margin-bottom-large{margin-bottom: 40px !important;}
.margin-bottom-small{margin-bottom: 10px !important;}

.margin-right{margin-right: 20px;}
.margin-right-small{margin-right: 10px;}

.margin-left{margin-left: 20px !important;}
.margin-left-small{margin-left: 10px;}

.text-overflow{text-overflow:ellipsis; overflow: hidden; white-space: nowrap;}

.bold{font-weight: bold}
.lighter{font-weight: lighter;}

.border-black{border: 1px solid #ccc;}
.border{border: 1px solid #ccc !important;}
.border-right{border-right: 1px solid #ccc;}
.border-left{border-left: 1px solid #ccc;}
.border-bottom{border-bottom: 1px solid #ccc;}
.border-top{border-top: 1px solid #ccc;}

.box-shadow{box-shadow: 0 0 10px 0 #ccc;}
.no-box-shaddow{box-shadow: none !important; }

.no-border{border: 0 !important;}
.no-border-top{border-top: 0 !important;}
.no-border-bottom{border-bottom: 0 !important;}
.no-border-right{border-right: 0 !important;}
.no-border-left{border-left: 0 !important;}

.border-radius{border-radius: 5px !important}
.border-radius-large{border-radius: 10px !important}
.no-border-radius{border-radius: 0 !important}


.text-center{text-align: center;}
.text-left{text-align: left;}

.no-background{background: none !important}

.black{color: #333 !important}
.white{color: #fff !important}
.grey{color: #666 !important}
.blue{color: #0c67b0 !important}
.bg-blue{background: #0c67b0 !important}
.bg-grey{background: #6c6c6c !important}
.bg-white{background: #fff !important}

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

.bg-grey-soft{
    background: #ebebeb;
    border:none;
}

.bg-black{
    background:#050607
}

.btn-grey-soft{
    background: #ebebeb;
    color: #534f4c;
    border: none;
    padding: 10px;
}

.btn-grey{background: #666; color: #fff}

.font-40px{font-size: 40px !important}
.font-20px{font-size: 20px !important}
.font-15px{font-size: 15px !important}
.font-10px{font-size: 10px !important}
.font-5px{font-size: 5px !important}

.height-10{height: 10px !important}
.height-20{height: 20px !important}
.height-30{height: 30px !important}

.italic{
    font-style: italic;
}

.capital{
    text-transform: capitalize;
}

.lowercase{
    text-transform: lowercase;
}

.centered {float: none; margin: 0 auto; display: table;}
.modal-sm{width: 100%;}
.modal-head .modal-content{
    margin: 0 auto;
    display: table;
    padding: 10px;
    border-radius: 0;
    width: 450px;
}

/*--Header--*/
.header{
    position: fixed !important;
    z-index: 4 ; 
}

.header .logo img{
    float: left; 
    width: 85%;  
    padding-top: 3px 
}

.header a, 
.header i {color: #fff !important}

/*scrolling*/
.header.scrolling {background-color: #fff; box-shadow:0 0 1px 0 #ccc; padding-top:0 !important }
.header.scrolling .logo img{
    -webkit-filter: invert(0%);

    /*Firefox*/
    filter: none;
}

.header.scrolling ul.menu li input::-webkit-input-placeholder{color: #000 !important; position: relative; z-index: 2}
.header.scrolling ul.menu li input:-moz-placeholder {color: #000 !important; position: relative; z-index: 2}/* Firefox 18- */
.header.scrolling ul.menu li input::-moz-placeholder {color: #000 !important; position: relative; z-index: 2}/* Firefox 19+ */
.header.scrolling ul.menu li input:-ms-input-placeholder {color: #000 !important; position: relative; z-index: 2}

.header.scrolling ul.menu li a {color: #000 !important; position: relative; z-index: 2}
.header.scrolling ul.menu li button {color: #000 !important; position: relative; z-index: 2; border-radius: 0;}

.header.scrolling .search {color: #000 !important; position: relative; z-index: 2; height:auto !important; border-radius: 0;}
.header.scrolling i {color: #000 !important; position: relative; z-index: 2}
.header.scrolling a {color: #000 !important; position: relative; z-index: 2}


/*--Header Menu--*/
.header ul.menu{margin-top: 10px; font-size: 1vw;   margin-bottom: 10px;}
.header ul.menu li{float: left;}

.header ul.menu li.navigation-bar{
    border: 1px solid #ccc;
    border-right: 0;
}

.header ul.menu li a{float: left; padding: 6px 15px;  font-size: 1vw;}
.header ul.menu li:last-child a{border-right: 1px solid #ccc;}
.header ul.menu li .btn-default {color: #fff; background: transparent; padding: 6px 15px; font-size: 1vw; border-right: 0;}
.header ul.menu li:last-child .dropdown .btn-default {border-right: 1px solid #ccc;}
.header ul.menu li ul.dropdown-menu li {float: left; width: 100%; }
.header ul.menu li ul.dropdown-menu li a{float: left; width: 100%; border: 0; color: #333 !important}

.header ul.menu li input.search{background: none; color: #fff; border-right: 0; font-size: 1vw; height: 36px}

.header ul.menu li input::-webkit-input-placeholder {color: #fff;}
.header ul.menu li input:-moz-placeholder {color: #fff;}/* Firefox 18- */
.header ul.menu li input::-moz-placeholder {color: #fff;}/* Firefox 19+ */
.header ul.menu li input:-ms-input-placeholder {color: #fff;}

/*--Slide--*/
.home{float: left; width: 100%;}

.home .thumb-slide .thumb-slide-ins .thumb img{width: 100%; min-height: 100px;}
/*.home .thumb-slide .thumb-slide-ins{width: 24%; margin-right: 1.3%; border-right: 1px solid #ccc;}*/
.home .thumb-slide .thumb-slide-ins:last-child{margin-right: 0; border-right: 0}

.home .sponsor-left .sponsor{width: 32%; margin-right: 1.3%}

.home .sponsor-right .sponsor{width: 32%; margin-left: 1.3%}
.home .sponsor-right .sponsor:last-child{margin-right: 0 !important; float: right !important;}

/*.home .news-head{width: 49.4%;}*/
.home .news-head:last-child{margin-right: 0; float: right !important;}
.home .news-head .thumb{/**height: 372px;**/ overflow: hidden;}
.home .news-head .thumb img{height: 100%;}

/*.home .news-second{width: 24%; margin-right: 1.3%;}*/
.home .news-second .thumb{/**height: 182px;**/ overflow: hidden;}
.home .news-second .thumb img{height: 100%;}
.home .news-second:last-child{margin-right: 0 !important}

/*.home .story{width: 24%; margin-right: 1.3%}*/
.home .story .thumb{height:150px; overflow: hidden;}
.home .story .thumb img{}

.home .story:last-child{margin-right: 0;}

.home .gallery-home >.gallery-home-ins{width: 19%; height: 161px; position: relative; margin-left: 0.6%; margin-bottom: 0.5%; overflow: hidden;} 
.home .gallery-home >.gallery-home-ins:first-child{width: 40%; height: 330px;}
.home .gallery-home >.gallery-home-ins img{width: 110%; /**margin: -11% -7%;**/ height: auto}

.home .bio-home .album-home{width: 32%; margin-right: 1%;}
.home .bio-home .album-home:first-child{ margin-left: 2%;}
.home .bio-home .album-home:last-child{margin-right: 0;}

ol.carousel-indicators{color: #000; float: left; z-index: 1} 
ol.carousel-indicators li.active{background: #000; }
ol.carousel-indicators li{background: #ccc;}

a.left.carousel-control{
    float: left;
    background: none; 
    color: #000; 
    font-size: 25pt;
    position: relative; 
    margin-bottom: -10px;
    text-align:left;
    left:1%;
}
a.right.carousel-control{
    float: right; 
    background: none; 
    color: #000; 
    font-size: 25pt;
    position: relative;
    margin-bottom: -10px;
    text-align:right;
    right:1%;
}

a.left.carousel-control{opacity: 1}
a.right.carousel-control{opacity: 1}

/*.home .carousel-control:hover{ border: 2px solid #000; padding: 10px; }
*/

/*--Banner Shop--*/
.banner-shop{float: left; width: 100%; margin-bottom: 15px;}
.banner-shop img{width: 100%;}

.banner-shop a{ display: block;}

.banner-shop .prev-slide{margin-top: 20px;}	
.banner-shop .prev-slide a i{float: left; font-size: 5vw; color: #000;}
.banner-shop .prev-slide a span{float: left; font-size: 1.2vw; color: #000; margin-top: 3%; margin-left: 10px;}

.banner-shop .next-slide{margin-top: 20px;}	
.banner-shop .next-slide a i{float: left; font-size: 5vw; color: #000;}
.banner-shop .next-slide a span{float: left; font-size: 1.2vw; color: #000; margin-top: 13%; margin-right	: 10px;}


/*--Menu--*/

.title-head{float: left; width: 100%; margin-bottom: 20px;}
.title-head .title-head-ins{width: 70%; margin:0 auto;}
.title-head span.title{float: left; width: 100%; font-size: 1.5vw;}
.title-head span.desc{float: left; width: 100%; font-size: 1.3vw;}

.title-head  ul.menu-gallery-top{float: left;}
.title-head  ul.menu-gallery-top li{float: left; list-style: none;}
.title-head  ul.menu-gallery-top li a{float: left; padding: 10px; border: 1px solid #ccc; color: #000;}


/*--Content--*/
.content-ins{width: 100%;}

.content .jurnal-ins{float: left;}

/*.ads-jurnal{float:left; width: 100%; height: 160px; overflow: hidden; background: #ccc; margin-bottom: 30px; margin-top: 30px;}*/
.ads-jurnal img{float: left; width: 100%; height: 150px;}




.content .artikel-jurnal{float: left;  overflow-y: hidden; overflow-x: hidden;  }
.content .artikel-jurnal .tag-left a{width: 100%; color: #7f7f7f !important; text-transform: capitalize;}
.content .artikel-jurnal .title-left a{
    float: left; 
    width: 100%; 
    color: #282826;
    font-size: 25pt;
    text-transform: capitalize;
    /*    line-height: 3vw;*/
}

.content .artikel-jurnal .author-left a{float: left; width: 100%; color: #7f7f7f; font-style: italic;  text-transform: capitalize; font-size:9pt; }

.content .artikel-jurnal .content-artikel-jurnal{float: left; width: 100%;}

.jurnal a.readmore-js-toggle{float: left; width: 100%; text-align: center; font-size: 4vw; color: #000;}
.jurnal a.readmore-js-toggle i{float: left; width: 100%;}


/*.content .right{float: right; max-height: 500px; overflow-y: scroll; overflow-x: hidden;}*/
.content .right .post-img-right{float: left; width: 100%;}
.content .right .post-img-right img{float: left; width: 100%; margin-bottom: 10px;}
.content .right .post-img-right img{float: left; width: 100%; margin-bottom: 10px;}
.content .right::-webkit-scrollbar {width: 0px;}

.content .content-bottom{float: left; margin-top: -55px; margin-bottom: 20px; padding-top: 7px !important}
.content .content-bottom ul{float: left; list-style: none;}
.content .content-bottom ul li{float: left;}
.content .content-bottom ul li a{float: left; background: #000; color: #fff; font-size: 1.3vw; padding: 5px 9px; margin-right: 5px; border-radius: 100%;}
.content .content-bottom ul li a.fb{padding: 5px 13px;}

.content .content-bottom .expand a{float: left; color: #000; font-size: 50pt; }
.content .content-bottom .expand a i{float: left;}

.user-comment{/**width:60px; height: 60px;**/ overflow: hidden; border: 1px solid #ccc;}
.user-comment img{width: 100%;}

/*--Content Shop--*/
.shop .banner-shop{position: relative; z-index: 2}
.shop .sidebar {position: fixed; top: 30%; left: 7%; z-index: 1; background: #fff} 

.shop .sidebar a{float: left; width: 100%; border: 1px solid #ccc; padding:10px; color: #000;}

.shop .sidebar ul{float: left; width: 100%; margin: 0; padding: 10px 0;}
.shop .sidebar ul li.title{list-style: none !important; font-size: 1vw; margin-left: 10px;}
.shop .sidebar ul li {float: left; width: 100%; font-size: 0.9vw; margin-left: 10px;}

.shop .sidebar ul li a{ width: 100%; border: 0; padding: 0 10px;}
.shop .sidebar ul li a i {float: left; font-size: 5px; margin-right: 8px; margin-top: 5px;}

.shop .thumb-small-left{width: 31%; height: 184px; overflow: hidden; margin-right:2%; margin-bottom: 2%; background: #000}
.shop .thumb-small-left a span{width: 100%; text-align: center; color: #000;}
.shop .thumb-small-left a span.title{margin-bottom: -5px;}
.shop .thumb-small-left img{width: 100%; height: 100%;}
.shop .thumb-small-left img:hover{opacity: 0.5;}

.shop .thumb-large-left .thumbs{float: left; width: 100%; height: 330px; overflow: hidden; }
.shop .thumb-large-left .thumbs img{float: left; width: 100%;}
.shop .thumb-large-left a span{float: left; width: 100%; text-align: center; color: #000; margin-top: 10px;}
.shop .thumb-large-left a span.title{margin-bottom: -15px;}
.shop .thumb-large-left a i{float: left; font-size: 10vw; color: #FFF; position: absolute; top: 25%; left:-6px; z-index: 2;}

.shop .thumb-small-right{width: 31%; height: 184px; overflow: hidden; margin-left:2%; margin-bottom: 2%; background: #000}
.shop .thumb-small-right a span{width: 100%; text-align: center; color: #000;}
.shop .thumb-small-right a span.title{margin-bottom: -5px;}
.shop .thumb-small-right img{width: 100%; height: 100%;}
.shop .thumb-small-right img:hover{opacity: 0.5}

.shop .thumb-large-right .thumbs{float: left; width: 100%; height: 330px; overflow: hidden;}
.shop .thumb-large-right .thumbs img{float: left; width: 100%;}
/*.shop .thumb-large-right a span{float: left; width: 100%; text-align: center; color: #000; margin-top: 10px;}*/
.shop .thumb-large-right a span.title{margin-bottom: -15px;}
.shop .thumb-large-right a i{float: left; font-size: 10vw; color: #FFF; position: absolute; top: 25%; right:-6px; z-index: 2;}

.shop .category{width: 24%; margin: 0.4%; margin-bottom: 2%;}
.shop .category a .thumbs{float: left; width: 100%; height:258px; overflow: hidden;}
.shop .category a .thumbs img{height: 100%;}
.shop .category a span{float: left; width: 100%; text-align: center; margin-top: 5px; color: #000;}
.shop .category a span.title{margin-bottom: -10px;}


/*.shop .thumbnail-image{width: 24%; margin-right: 1.33%;}*/
.shop .thumbnail-image:last-child{margin-right: 0;}

.shop .related{float: left; width: 19%; margin-right: 1.22%;}
.shop .related:last-child{margin-right: 0%;}

.shop .ads{height: 160px; overflow: hidden;}
.shop .ads img{width: 100%;}

/*--Content Aksi Kita--*/
.content .aksi{float: left;}
.content .aksi .aksi-ins{float: left; border-bottom: 1px solid #ccc; margin-bottom: 30px;}
.content .aksi .aksi-ins .date{float: left; border: 1px solid #ccc; text-align: center; margin-right: 20px;}
.content .aksi .aksi-ins .date span{float: left; width: 100%;}
.content .aksi .aksi-ins .content-ins{float: left; }
.content .aksi .aksi-ins .content-ins img{float: left; width: 100%; margin-bottom: 10px; }
.content .aksi .aksi-ins .content-ins p{float: left; width: 100%; margin: 10px 0; }
.content .aksi .aksi-ins .share-aksi {}



/*--Content Story--*/
.story .share-story{/**margin-top: -4%;**/ margin-bottom: 20px;}

a.readmore-js-toggle{float: left; width: 100%; text-align: center; font-size: 4vw; color: #000;}
a.readmore-js-toggle i{float: left; width: 100%;}

/*--Post Story--*/
.post .preview-img{height: 150px; overflow: hidden;}
.post ul.list-image .arrow{font-size: 2vw; float: left; margin-top: 7%;}
.post ul.list-image li{background: #ccc; width: 89px; height: 89px; overflow: hidden; margin: 0 8px;}
.post ul.list-image li a img{width: 100%;}
.post .right-option{padding: 9px 0 !important}

.col-centered{float: none !important; margin: 0 auto; display: table;}

/*--Content profile--*/
.profile .head .thumb{min-height: 160px; border-radius: 100%; overflow: hidden;}
.profile .head .thumb img{width: 160px;}
.profile .menu ul li a{color: #666}
.profile .menu ul li.active a{color: #000}


.profile .content .left span.sidebar a{padding: 8px 0px;  text-align: center;}
.profile .content .left span.sidebar a.active{font-family: 'Helvetica-bold'}

.profile .content .right .upload-banner{height: 100px; overflow: hidden;}
.profile .content .right .upload-banner img{width: 100%;}

.profile .content .right  .upload-foto div a{
    float: left; 
    background: #ccc;
    color: #fff; 
    overflow: hidden;
    padding: 30%; 
    width: 100%;
    height: 100px;
    text-align: center;
}

/*--Content Gallery--*/
/*.gallery{float: left; width: 100%;}*/

.gallery.active{
    background:black;
}

/*--Menu Center*/
.menu-center{float: left; margin: 20px 0;}
ul.menu-center-ins{width: 23%; margin: 0 auto; display: table;}
ul.menu-center-ins li.dropdown{float: left;}
ul.menu-center-ins li.dropdown a{float: left; border: 1px solid #ccc; font-size: 0.9vw; padding:10px; color: #000; text-align: center;}

ul.menu-center-ins li.dropdown ul.dropdown-menu li a{float: left; width: 100%; text-align: left; border:0;}
ul.menu-center-ins li #search-form{float: left; position: absolute; top: 107%; width: 21%;}

/*--Grid Album dan foto--*/
.content .grid li {-moz-box-sizing: border-box; box-sizing: border-box; padding: 25px 5px; margin-bottom: 202px; margin-bottom: 10px;}
.content .grid li .thumbs{ margin-bottom: 5px; background: #000}
.content .grid.album li .thumbs{ margin-bottom: 5px; height: 155px; overflow: hidden;}
.content .grid li .thumbs img {width: 100%; height: auto; }
.content .grid li .thumbs img:hover{opacity: 0.5; transition: all ease 0.5s !important;}

.content .grid li .title span a{float: left; width: 100%}
.content .grid li .title span.title a{font-size: 16px; color: #000}
.content .grid li .title span.date a{font-size: 13px; color: #000; font-style: italic;}

.content .grid .love span.love a{
    color: #fff;
    padding: 6px 10px;
    margin-top: 2px;
    font-size: 15px;
    float: right;
    border-radius: 3px;
}

/*---Title --*/
.title-page{
    text-align: center;
    font-size: 16pt;
    text-transform: uppercase;
}

.title-album{
    font-size:12pt;
    text-transform: uppercase;
}

/*---ALBUM --*/
.content .album{
    float: left;
    width: 100%;
}

.content .album .thumb {
    height: 180px; 
    overflow: hidden;
    text-align: center;
    background-color: black;
}
.content .album .thumb img{
    width: auto;
    height: 100%;
    display:inline;
}
.content ul.album li .thumb span.text{float: left; width: 100%; height: 180px; overflow: hidden; border: 1px solid #ccc; padding: 10px; font-size: 0.9vw}

.content ul.album li .left span a{float: left; width: 100%;}
.content ul.album li .left span.desc a{font-size: 1.2vw; color: #000; margin-top: 5px;}
.content ul.album li .left span.name a{font-size: 0.9vw; color: #000}

.content ul.album li .right span a{float: left; margin-top: 5px;}
.content ul.album li .right span.love a{background: #000; color: #fff; padding:7.4% 15%; font-size: 1vw;}
.content ul.album li .right span.follow a{float: right; background: #000; color: #fff; padding:6.5% 12%; font-size: 0.8vw;}


/*--Content detail-Gallery--*/
.detail-gallery .content{float: left;}
.detail-gallery .banner-shop .carousel-indicators{display: none;}
.detail-gallery .banner-shop a.left.carousel-control{
    position: absolute;
    left: -6%;
    top: 45%;
    font-size: 50pt;
}
.detail-gallery .banner-shop a.right.carousel-control{
    position: absolute;
    right: -6%;
    top: 45%;
    font-size: 50pt;
}
.detail-gallery .banner-shop .carousel-inner{min-height: 500px;}

/*.detail-gallery .banner-shop .carousel-caption{top: 110%; color: red; z-index: 999999999}*/

/*--Desct*/
.description-page {margin: 20px 0; padding: 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.description-page .title .title-ins{margin-top: 1%}
.description-page .title span{float: left; width: 100%;font-size: 1.8vw; text-transform: uppercase;}
.description-page .title span.date{font-size: 1vw; font-style: italic;}
.description-page .title span a{color: #000;}
.description-page .content-desc{color: #666; font-size: 1vw;}

.cover{
    width: 100%;
    max-height: 255px;
    overflow: hidden;
}

.cover img{
    width: 100%;
    min-height: 255px;
}

/*--Content Cerita kita--*/
.content .left .username-left a{float: left; width: 100%; color: #7f7f7f; font-size: 20px; font-style: italic;  text-transform: capitalize; }


/*--Content event--*/

.event .title-head {float: left;}
.event .title-head .title-event{width: 60%; margin: 0 auto;}
.event .title-head .title-event span{float: left; width: 100%; text-align: center; text-transform: uppercase; font-size: 2.5vw; color: #000;}
.event .title-head .title-event span.second{font-size: 1.5vw; text-transform: capitalize;}

.event .event-content{float: left; width: 100%; background: #ebebeb; margin-bottom: 10px; padding: 10px 0;}
.event .event-content:hover{background: #ccc; cursor: pointer; transition: all ease 0.5s !important; }
.event .event-content .event-content-ins{margin-top: 4%;}
.event .event-content a{color: #292826}
.event .event-content .thumbs{border-radius: 100%; width: 100px; height: 100px; padding:0; overflow: hidden; margin: 15px; margin-right: 25px; background: #fff;}
.event .event-content .thumbs img{width: 100%;}

.event .event-content .thumbs img{float: left; width: 100%; }
.event .event-content span.titles{font-size: 1.5vw; text-transform:uppercase;} 
.event .event-content span.contents{font-size: 1.3vw; text-transform:uppercase}
.event .event-content span.title-full{font-size: 5vw; margin-top: -15px !important;}


a.btn-ticket{background: #6c6c6c; color: #fff !important; font-size: 1vw; padding: 8px 25px; border-radius: 20px;}
a.btn-ticket:hover{background: #363636; color: #fff !important; }

.event .event-content .info{float: left; position: absolute; right: 10px; bottom: 10px;}
.event .event-content .info a{font-size:13pt;}

.event .banner-shop .banner .carousel-inner{width: 100%; /**height: 497px;**/ margin: 0 auto;}
.event .banner-shop .banner ol.carousel-indicators{position: absolute; bottom: -40px;}
.event .banner-shop .banner ol.carousel-indicators li{background: #ccc; width: 15px; height: 15px;}
.event .banner-shop .banner ol.carousel-indicators li.active{background: #000;}
.event .banner-shop .banner a.left.carousel-control{left: 34%;}
.event .banner-shop .banner a.right.carousel-control{right: 34%;}

/*--Content detail event--*/
.detail-event .share{float: left; margin-bottom: 10px; margin-top: 5px; display: table;}

.share-ins{ margin: 0 auto; display: table;}
.share{
    padding:5px;
}
span.share{float: left; }
span.share a{float: left; background: #6c6c6c; color: #fff !important; padding: 6px; margin: 0 3px; border-radius: 5px !important;}
span.share a:hover{background: #363636; color: #fff !important; }
span.share a.fb{padding: 6px 10px;}
span.share a i{float: left; font-size: 1vw}

span.share-small{float: left; }
span.share-small a{float: left; background: #6c6c6c; color: #fff !important; padding: 6px; margin: 0 3px; border-radius: 5px;}
span.share-small a:hover{background: #363636; color: #fff !important; }
span.share-small a.fb{padding: 6px 10px;}
span.share-small a i{float: left; font-size: 1vw}
.display-item > .social > span.share > a.social-share-button {
    float: left;
    background: #6c6c6c;
    color: #fff !important;
    padding: 6px;
    margin: 0 3px;
    border-radius: 5px;
}
.display-item > .social > span.share > a.fb {
    padding: 6px 9px;
}
.display-item > .social > span.share{
    padding: 0px;
}

.detail-event .ticket{float: left; width: 100%; padding: 20px 0 !important; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.detail-event .ticket .ticket-ins{width: 50%; margin: 0 auto}
.detail-event .ticket .ticket-ins span{float: left; width: 100%;}
.detail-event .ticket .ticket-ins span.date-ticket{font-size: 1.2vw}
.detail-event .ticket .ticket-ins span.title-ticket{font-size: 1.5vw}
.detail-event .ticket .ticket-ins span.venue-ticket{font-size: 1.1vw; margin-bottom: 15px;}

.detail-event .detail-event-content{float: left; font-size: 1.1vw;}
.detail-event .detail-event-content p{text-align: justify;}


/*--thread--*/
.thread .thumb-name{background: -webkit-linear-gradient(top, #fff 40%, #ebebeb 110%);/* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(top, #fff 40%, #ebebeb 110%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(top, #fff 40%, #ebebeb 110%); /* For Firefox 3.6 to 15 */ background: linear-gradient(top, #fff 40%, #ebebeb 110%); /* Standard syntax */}
.thread .right .content{min-height: 113px;}

.thread a.check{color: #fff; background: #02ad4d; padding: 5px; border-radius: 5px; margin-right: 5px}
.thread a.exclamation{color: #fff; background: #1066b3; padding: 5px 9px; border-radius: 5px;}


/*--Subforum--*/
.subforum  a.angle-sub{padding: 0px 3px;}
.subforum  a.angle-sub i{margin-top: 1px;}

.rating i:hover:before, i.rate, .ratingReview i, .review i {
    color:yellow;
}

a.thumb-icon{
    color: #bdbdbd !important;
    margin: 0 5px;
}

a.thumb-icon.enabled{
    color:black !important;
}


/*--ekspresi--*/
.ekspresi{float: left; width: 100%;}

.ekspresi .title-head {border-bottom: 1px solid #ccc; padding-bottom: 20px;}
.ekspresi .title-head span.desc a{font-size: 1.1vw; color: #000;}

.ekspresi .head{float: left; margin-bottom: 20px;}

.ekspresi .head-ins .left{float: left; border-right:1px solid #ccc; padding-right: 10px;}
.ekspresi .head-ins .right{float: left; padding-left: 10px;}


.ekspresi .head .head-ins .thumb{float: left; width: 100%; height: 368px; overflow: hidden;}
.ekspresi .head .head-ins .thumb img{float: left; height: 100%;}

.ekspresi .head .head-ins .title-name a{color: #000;}
.ekspresi .head .head-ins span.title{
    float: left; width: 100%; font-size: 1.4vw;
}
.ekspresi .head .head-ins span.name{float: left; width: 100%; font-size: 1vw;}

.ekspresi .head .head-ins .love-follow{float: left; margin-top: 5px;}
.ekspresi .head .head-ins span.love a, .love a{float: left; background: #6c6c6c; color: #fff; padding:5px 8px;}
.ekspresi .head .head-ins span.follow a{float: right; background: #6c6c6c; font-size: 0.9vw; color: #fff; padding:8px 9px; margin-left: 5px;}

span.love a{
    background: #626262 !important;
    border-radius:3px;
}

span.love a:hover, span.love a:focus, span.love a.active, .love a:hover i{color: red !important;}

/*--scroll top--*/
.scroll-top{float: right; position: fixed; bottom: 8%; right: 5%; z-index: 1}
.scroll-top a{float: right; background: #111; color: #fff; font-size: 3vw; padding: 5px 10px; }
.scroll-top a i{float: right;}

.post-story{float: left; position: fixed; top: 31%; right: 8%; z-index: 1}
.post-story a{float: right; background: #111; color: #fff; font-size:15pt; padding: 5px 10px;}

/*--Footer--*/
.footer{float: left; width: 100%; padding: 10px 0;}
.footer .copyright{float: left;}
.footer .copyright img{float: left; width: 50px;}
.footer .copyright span{float: left; margin-left: 10px; margin-top: 8px;}

.footer .tiga-rambu{float: right; width: 100%; margin-bottom: 5px;}
.footer .tiga-rambu img{float: right; width: 150px;}

.footer .address{float: right; text-align: right;}
body.dynamic-header .header{
    background-color: rgba(255,255,255,0.7);
}
body.dynamic-header .header *{
    color: black !important;
}
.white-bg{
    background-color: white !important;
}
.article-img-replacer {
    margin-top: 0px;
    font-size: 65px;
    color: #ffffff;
    font-family: 'Raleway', arial, serif;
}

.thumb-slide-ins.border-right {
    height: 100px;
}

.product-tag{
    background: #e7e7e7;
    color: black;
    padding: 5px 15px;
    margin-top: -15px;
    position: relative;
}

/**penulis artikel**/
.article-author{
    margin-top:35px;
}

/**jumlah like, view, share, comment **/
.article-count{
    margin-top:20px;
}

.red-font{
    color:red;
}

@media (max-width:767px){
    ol.carousel-indicators.article li{
        margin-top:6px !important;
    }

    .carousel-indicators-bar.article{
        height:50px;
    }

    .desktop-disappear{
        display:block;
    }

    .mobile-disappear{
        display:none;
    }

    .home-article{
        float:right !important;
    }

    .crop-height.home-article{
        max-height:200px;
        overflow:hidden;
    }

    .article-padding{
        padding:0px !important;
    }

    .article.crop-height {
        max-height: 150px;
        overflow: hidden;
    }

    img.scale {
        display: block;
        max-width: 100%;
        height: auto !important;
        width: auto\9;
        -ms-interpolation-mode: bicubic;
    }

    .reply .items-wrapper .item-comment .bg-grey-soft{
        padding-left:35px !important;
        padding-top:10px;
    }

    .home .thumb-slide .thumb-slide-ins .thumb{
        max-height: 200px; 
        border: 1px solid #ccc; 
        overflow: hidden;
    }

    .story .title a {
        font-size: 19px;
    }

    .name-author {
        margin-top: 10px !important;
    }

    .title-resize{
        font-size:14pt;
    }

    .main-title-forum{
        font-size:15pt;
        margin-top:-50px;
    }
}

@media (min-width:768px){
    .main-title-forum{
        font-size:18pt;
        margin-top:0px;
    }

    ol.carousel-indicators.article li{
        margin-top:45px !important;
    }

    .carousel-indicators-bar.article{
        height:100px;
    }

    .desktop-disappear{
        display:none
    }

    .mobile-disappear{
        display:block;
    }

    .home-article{
        float:left;
    }

    .desktop-float-reverse.navbar-right{
        float:left !important;
    }

    .desktop-float-reverse.navbar-left{
        float:right !important;
    }

    .reply .items-wrapper .item-comment .bg-grey-soft{
        padding-left:100px !important;
        padding-top:10px; 
    }

    .home .thumb-slide .thumb-slide-ins .thumb{
        height: 100px; 
        border: 1px solid #ccc; 
        overflow: hidden;
    }

    .title-resize{
        font-size:25pt;
    }

    font-lg-title{
        font-size:25pt;
    }
}

.advertisement-type-1{
    height:100px;
    width:100%;
}

.news-head img {
    width: 114%;
    margin: 0px;
    min-height: 300px;
    max-height: 300px;
}

.news-head .crop-height{
    height:300px;
}

.crop-height {
    height: 150px;
    overflow: hidden;
}

.shop .crop-height{
    overflow: hidden;
    background: transparent;
    height:350px;
}

.shop .crop-height-smaller{
    overflow: hidden;
    background: transparent;
    text-align:Center;
    height:250px;
}

.shop .crop-height-main{
    overflow: hidden;
    background: transparent;
    text-align:center;
    height:550px;
}

.shop-img-main{
    height:550px;
    width:auto;
}

.shop-img{
    height: 350px;
    width: auto;
}

.shop-img-smaller{
    height: 250px;
    width: auto;
}

img.scale {
    display: block;
    max-width: 100%;
    height: auto !important;
    width: auto\9;
    -ms-interpolation-mode: bicubic;
}

.right-pad-none{
    padding-right:0px !important;
}

.left-pad-none{
    padding-left:0px !important;
}

.ellipsis-text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.post-reply-form{
    resize: none;
    font-family: Helvetica;
    background: rgb(245, 242, 242);
    margin-top: 15px;
}

.gray-line{
    margin: 0px;
    border: 2px solid rgb(174, 173, 173);
}

.pagination.iwan-fals > .active > a{
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #898989;
    border-color: #898989;
}

.pagination.iwan-fals a{
    color:#898989;
}

.filter-search label{
    font-family: Helvetica;
    font-weight: normal;
    margin-right:15px;
}

.margin-bottom-ten{
    margin-bottom:10px !important;
}

.margin-bottom-20{
    margin-bottom:20px;
}

.margin-bottom-50{
    margin-bottom:50px;
}

.margin-top-ten{
    margin-top:10px !important;
}

.margin-top-20{
    margin-top:20px !important;
}

.forum-button{
    background:#363636; 
    color:white; 
    text-transform: uppercase;
    width:100%;
}

.btn.forum-button:hover{
    background:#323232; 
    color:grey; 
}

/**create-thread**/

.thread-label{
    height:34px; 
    padding:6px 12px;
    text-align:right;
}

.thread-form.form-control{
    border:transparent;
    box-shadow:none;
}

.thread-form.form-control:focus{
    border:transparent;
    box-shadow:none;
}

.thread-height{
    min-height: 200px !important;
}

.custom-upload{
    color:transparent;
    width:13px;
}
.custom-upload:before{
    content: "\f067";
    color:black;
    background:#ededed;
}

.custom-upload.expression{
    width:100%;
    padding: 10px;
}
.custom-upload.expression:before{
    content: "Upload Gambar";
    background:transparent;
}

.custom-upload::-webkit-file-upload-button {
    visibility: hidden;
}

input[type=file].custom-upload:focus{
    outline: transparent;
}

.custom-upload-button{
    padding: 75px 55px;
    background: #ededed;
    height: 10px;
}

.breadcrumb.iwan-fals > li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: ">";
}

.sort-content ul li{
    display:inline;
    margin: 0 10px;
}

.sort-content ul{
    padding:0px;
}

.parallax-banner{
    background-attachment: fixed;
    width:100%;  
    background-repeat:no-repeat;
    background-color:white;
}

.fade-out .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.fade-out .carousel-inner .item.active
{
    opacity: 1;
}

.carousel-control {
    z-index: 2;
}

.white-font{
    color:white;
}

/**menghide bagian2 yang dirasa nanti perlu, tapi sekarang ngga diperluin**/
.display-none{
    display:none;
}

.bright img:hover{
    -webkit-filter:brightness(50%);
    moz-filter:brightness(50%);
}

.poin-number{
    font-size:11pt;
    line-height:25px;
    text-align:right;
}

.indikator-name{
    font-size:8pt;
    text-align:right;
}

.forum-breadcrumb ul li a{
    color:black;
}

.item-comment div{
    margin-top:10px;
}

.reply .item-comment div{
    margin-top:0px;
}

.expression-item{
    background-color: rgb(108, 108, 108);
    padding: 10px 10px 0px;
    min-height: 265px;
    max-height: 265px;
    overflow: hidden;
}

.clamping{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

.text-expression{
    font-size:10pt; 
    letter-spacing: 1px;
}

.expression i{
    color:white;
    position: absolute;
    right: 11%;
    margin-top:5px;
}

a.follow:hover{
    color:black;
}

ul.menu li:hover{
    background:#ededed;
}

ul.menu li.active{
    background:#ededed;
}

/**preview image pada detail gallery**/
.gallery-banner{
    height: 440px !important;
    width: auto; 
    display:inline-block !important;
}

/**bagian account**/
.custom-upload.input-file.account{
    width: 100%;
    padding: 10px;
    background: #ededed;
    border-radius: 7px;
    height:40px;
}

.custom-upload.account:before {
    content: "Upload Gambar";
    background: transparent;
    color: black;
}

.delete-photo-user{
    background: rgb(210, 199, 199);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 7px;
    width: 100%;
    text-align: left;
}

.user-notification{
    z-index: 3;
    background: rgba(255,255,255, 0.7);
    padding: 10px;
    width: 100%;
    margin-bottom: -54px;
    border: 1px solid rgb(231, 228, 228);
    top:54px;
}

.sorter > ul > li {
    display: inline;
    margin: 0 0 0 5px;
    padding: 0;
}

.required .required {
    color: red;
}

.photo-upload .input-file, .photo-upload .delete-photo-user{
    display:none;
}

.photo-upload:hover .input-file, .photo-upload:hover .delete-photo-user{
    display:block;
}

.small-container{
    height:180px;
    overflow:hidden
}

.middle-border{
    border-right: 1px solid black;
    border-left: 1px solid black;
    min-height: 660px !important;
}

.resize-cart{
    width:35%;
}

/**end of bagian account**/

@media(min-width:768px) and (max-width:992px){
    .parallax-banner{
        height:400px;
    }
}

@media(min-width:768px){
    .shop-user ul li{
        display:inline;
    }

    .item-comment [name="action"],
    .item-comment .toggle-comment:not(.open-toggle) {
        opacity: 0.0;
    }

    .item-comment:hover [name="action"],
    .item-comment:hover .toggle-comment:not(.open-toggle)  {
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
        opacity: 1.0;
    }

    .end-content{
        display:none;
    }

    ol.carousel-indicators.iwan-fals{
        top:108% !important;
    }

    .new-feature{
        font-size:15pt;
        margin-bottom:40px;
    }


    .parallax-banner{
        background-size:contain;
    }
    /**end bagian account**/

    /**URGENT VIDEO BANNER**/
    .responsive-text{
        font-size: 12pt;
        color: white;
        text-align: center;
        margin-top: -23%;
    }
    /**END OF VIDEO BANNER**/

    .tree-container{
        background-color: rgb(247, 247, 247);
        position: absolute !important;
        bottom: 0;
        height: 100%;
    }
}

@media(max-width:767px) and (min-width:520px){
    /**URGENT VIDEO BANNER**/
    .responsive-text{
        font-size: 14pt;
        color: white;
        text-align: center;
        margin-top: -22%;
    }
    /**END OF VIDEO BANNER**/
}

@media(max-width:519px) and (min-width:450px){
    /**URGENT VIDEO BANNER**/
    .responsive-text{
        font-size: 10pt;
        color: white;
        text-align: center;
        margin-top: -23%;
    }
    /**END OF VIDEO BANNER**/
}

@media(max-width:449px){
    /**URGENT VIDEO BANNER**/
    .responsive-text{
        font-size: 9pt;
        color: white;
        text-align: center;
        margin-top: -23%;
    }
    /**END OF VIDEO BANNER**/
}



@media(max-width:767px) and (min-width:1px){
    .article-author{
        margin-top:5px;
    }

    .article-count{
        margin-top:8px;
    }

    .crop-height-mobile {
        max-height: 150px;
        overflow: hidden;
    }

    .poin-number {
        font-size: 11pt;
    }

    .shop-img-main{
        height:250px;
        width:auto;
    }

    .shop-img{
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .shop .crop-height{
        max-height: 250px;
        min-height: 250px;
        width: 100%;
    }

    .shop .crop-height-main{
        max-height: 250px;
        min-height: 250px;
    }

    .middle-border{
        border:transparent;
        min-height:10px !important;
    }

    .resize-cart{
        width:100%;
    }
}

@media(min-width:992px){
    .parallax-banner{
        height:500px;
    }
}

@media(max-width:991px) and (min-width:768px){
    .discography ul.discography-ins li a .cover{ 
        height: 201px;
    }

    ol.carousel-indicators.iwan-fals{
        top:104% !important;
    }

    .crop-height-tab {
        max-height: 300px;
        overflow: hidden;
    }

    .article-author {
        margin-top: 8px;
    }

    .article-count{
        margin-top:8px;
    }

    .content .artikel-jurnal .title-left a{
        font-size:22pt;
    }

    .shop .crop-height-main{
        max-height: 350px;
        min-height: 350px;
    }

    .shop-img-main{
        height:350px;
        width:auto;
    }

}

@media(max-width:767px){
    .mobile-ellipsis-text{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .poin-number{
        /*        font-size: 18pt;*/
    }

    .discography ul.discography-ins li a .cover{
        height: 115px;
    }

    .thread-label{
        text-align:left;
    }

    .end-content{
        margin-bottom:60px;
        display:block;
    }

    .container{
        margin-bottom:50px !important;
    }

    .post-story {
        top: 19%;
        right: 2%;
        z-index: 1;
        position:relative;
    }

    .post-story a{
        font-size:12pt;
    }

    .footer-mobile .nav li a{
        color:white;
    }

    .parallax-banner{
        height:135px;
        background-attachment:scroll;
        background-size:cover;
        margin-top:50px;
    }

    .mobile-margin-custom{
        margin-top:-50px;
    }

    button.iwanfals-button {
        background:grey;
        border-radius:0px;
        color:white;
        width:100%;
    }

    ol.carousel-indicators.iwan-fals{
        top:102% !important;
    }

    .new-feature{
        font-size: 8pt;
        margin-bottom: 5px;
        margin-top: 35px;
    }

    .center-mobile{
        text-align:center;
    }

    .footer-mobile ul li:not(:last-child) a{
        border-bottom: 1px solid grey;
        margin: 0 10px;
    }

    .header-mobile img{
        height:30px;
        width:auto;
        float:none;
    }

    .font-xs-content{
        font-size:9pt;
    }

    .font-xs-title{
        font-size:13pt;
    }
}

/*confirmation form*/ 

.confirmation .img-rounded{
    border-radius: 0;
    border: 2px solid grey;  
}

.confirmation-title .img-rounded{
    border-radius: 0;
    background-color: grey;
    color: white;
    font-family: Helvetica;
    font-size: 24px;
}

.number-order input{
    width: 100%;
}

/*track order*/

.rounded-square{
    border: 2px solid grey;
    height: 50px;
    width: 100%;
    padding-top: 13px;
}

.active{
    background-color: rgba(90, 88, 161, 0.35);
}

/*order list*/
.green-color{
    color: green;
}

img.middle-thumbnail{
    position:absolute;
    top: 50%;
    left: 50%;
    width: auto;
    -webkit-transform: translate(-50%,-10%);
    -ms-transform: translate(-50%,-10%);
    transform: translate(-50%,-10%);
}

.title-checkout{
    background: black;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
}

/**membuat list dengan numbering tipe dashed**/
ul.dashed-list li:before{ 
    content:"- ";  
}

ul.dashed-list li{
    list-style-type: none;
}

.gallery ul li{
    list-style:none;
}