@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
@import url('https://fonts.googleapis.com/css?family=Asap:400,600,700&display=swap');

h1,h2,h3,h4,h5,h6{font-weight: 300}
img{max-width: 100%;}
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Asap', sans-serif!important;}
.bima-layout{ display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

a,a:hover{color:#865303;}

header h1{display: none;}

.mdl-textfield{width: 250px!important}
.mdl-grid{max-width: 1080px;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.clearfix{clear:both}

.row{ margin-left: -.75rem; margin-right: -.75rem;}
header{padding-top: 91px;}
header nav{height: auto; background: #333; position: fixed; width: 100%; top: 0; left: 0; z-index: 996; box-shadow: none; border-bottom: #DDD solid 1px;}
.brand-logo img{height: 60px; line-height: 90px; display: inline-block; margin-top: 13px;}
header .nav-desktop{margin-left: 150px;}
header nav ul li.active{background: #333!important}
header nav ul li a{color: #888b92; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;}
header nav ul li.active a{color: #FFF}

nav.bima-pagination{background: #FFF; line-height: unset !important; border: none; box-shadow: none; height: auto;}
nav.bima-pagination .pagination li.active{background-color: transparent;}

section.article{background: #f2f7fb; padding: 140px 0px; float:left; width:100%}
section.article .overview h3{color:#33495e; margin-top: 180px;}
section.article .overview p{color:#7e97ae; max-width: 400px; display: inline-block;}

.list-article{ width: 100%}
.list-article .title, .list-article .title *{font-size: 18px; line-height: 24px; color: #333; font-weight: 600; text-decoration: none}

section::after,section::before{display: table;content: " ";clear:both;}

.section-title{border-bottom: #E5E7EA solid 1px; padding: 23px 0px; margin-bottom: 18px; margin-top: 28px;}
.section-title .row{margin-bottom: 0px;}
.section-title h3{font-size: 24px; font-weight: 600; line-height: 29px; color:#3A3B3E; margin: 0px;}
.section-title a{line-height: 29px;}

.post-card{position: relative; height: 250px; border-radius: 8px!important; overflow: hidden!important; margin-bottom: 10px; margin-top: 10px;}
.post-card .post-thumbnail{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #333;  transition: all ease .2s}
.post-card:hover .post-thumbnail{width: calc(100% + 20px); height: calc(100% + 20px); left: -10px; top:-10px;}

.post-card .post-thumbnail img{width: 100%; visibility: hidden;}
.post-card .post-info{width: 100%; height: 100%; position: absolute;left: 0; top:0; background: rgba(0,0,0,.3); padding: 28px;}
.post-card .post-info a h4{font-size: 16px; line-height: 24px; color: #ffffff; font-weight: 600; letter-spacing: .9px; display: block; margin-top: 15px;}
.post-card .post-info span{display: inline-block; background: rgba(0,0,0,.4); color: #f1f1f1; font-size: 12px; line-height: 26px; padding: 0px 8px; border-radius: 8px;}
.post-card .post-info span svg{margin-right: 8px; display: inline-block;}
.post-card .post-info .position-bottom{position: absolute; bottom: 0; left: 0; padding: 28px;}

.post-headline{margin-bottom: 0px!important;}

.list-link{list-style: none; margin: 0px; padding: 0px;}
.list-link li a{color:#333!important; text-decoration: none!important}
footer .list-link li a{color:#7e97ae!important; margin-bottom: 10px; display: block; font-weight: 300}

.list-social-media {list-style: none; margin: 0px; padding: 0px; display: block;}
.list-social-media li{display: inline-block;}
.list-social-media li a{display: inline-block; background: #444; color: #FFF; width: 30px; height: 30px; border-radius: 30px; margin-right: 10px; font-size: 18px; text-align: center; padding-top: 4px;}
.list-social-media li a.facebook{background: #0c71d0}
.list-social-media li a.youtube{background: #d60000}
.list-social-media li a.instagram{background: linear-gradient(60deg, #f8d135, #ea4848 52%, #8855d3 99%); background: -webkit-linear-gradient(60deg, #f8d135, #ea4848 52%, #8855d3 99%); background: -moz-linear-gradient(60deg, #f8d135, #ea4848 52%, #8855d3 99%);}

.list-logo-payment{list-style: none; margin: 0px; padding: 0px;display: block;}
.list-logo-payment li{display: inline-block; padding: 0px 5px;}
.list-logo-payment li img{height: 20px; margin-top: -15px}

.box-title-page{ position: relative; padding: 0px!important}
.box-title-page .content-area{background-color: #EEE; width: 100%; padding: 50px 0px;}
.box-title-page .content-area h1{margin-top: 0px; font-size: 36px; margin-bottom: 13px; line-height: normal;}
.box-title-page .content-area *{color: #555}
.box-title-page .content-area p{color:#999;letter-spacing: 0.3px;}

.bg-grey{background: #f3f6f9}
.bg-black-grey{background: #404142}

.section-padding-80{padding-top: 80px; padding-bottom: 80px;}
.section-padding-40{padding-top: 40px; padding-bottom: 40px;}
.section-padding-bottom-0{padding-bottom: 0px!important}
.section-padding-top-0{padding-top: 0px!important}

.link-back-article{font-size: 14px; color:#4c4e51; text-decoration: none; padding-left: 20px; margin-bottom: 30px; display: block;}
.link-back-article i{font-size: 14px; line-height: normal; position: absolute; margin-left: -20px; margin-top: 3px;}


.blog-section h2{margin: 0px; font-size: 25px; line-height: normal; color: #ababab;}

.single-blog .container{max-width: 800px;}
.single-blog img{border-radius: 4px; overflow: hidden;}
.single-blog h1{font-size: 30px; margin-top: 0px; margin-bottom: 10px; font-weight: 500; line-height: 40px; letter-spacing: 1.2px; color:#33495e}
.single-blog .post-thumbnail{margin-bottom: 35px}
.single-blog .post-thumbnail .source{font-size: 12px; color:#999; padding: 4px 0px;}
.single-blog .post-thumbnail img{width: 100%}
.single-blog .content p, .single-blog .content *{font-size: 18px; line-height: 1.8; letter-spacing: unset;color:#333; margin: 0px;}
.single-blog .content ol, .single-blog .content ul{margin-bottom: 20px;}
.single-blog .list-category {margin-bottom: 10px;}
.single-blog .list-category a{color:#abb9c5; text-decoration: none; padding: 4px 8px; text-transform: capitalize;}
.single-blog .list-category a:first-child{padding-left: 0px;}
.single-blog .tags{padding: 20px 0px;}
.single-blog .tags a{padding: 4px 8px; border-radius: 4px; background: #e8e8e8; color:#808080; text-decoration: none; text-transform: capitalize;}

.blog-section .title-post{font-family: 'Montserrat', sans-serif; font-size: 21px!important; line-height: 1.5!important; letter-spacing: normal!important; margin-top: 0px!important; margin-bottom: 8px!important; font-weight: bold!important;}


.list-post{width: 100%;}
.list-post .box-post{display: table; margin: 10px 0px; border-bottom: #e5e7ea solid 1px; padding-bottom: 10px;}
.list-post .box-post:last-child{margin-bottom: 0px!important; padding-bottom: 0px!important; border-bottom: none!important}
.list-post .box-post>div{display: table-cell; vertical-align: top;}
.list-post .box-post .post-thumbnail{width: 135px; padding-right: 20px}
.list-post .box-post .post-thumbnail img{width: 100%; border-radius: 8px; overflow: hidden;}
.list-post .box-post a{color: #101010; text-decoration: none}
.list-post .box-post .post-info, .list-post .box-post .post-info a{font-size: 12px; color: #96a271;}
.list-post .box-post .post-info a{padding: 0px 4px; text-transform: capitalize;}
.list-post .box-post .post-content p{margin-bottom: 5px;}
.list-post .box-post .post-content .title-post{font-size: 16px!important; line-height: 24px!important; color:#3a3b3e!important}

.list-post .box-post.featured{display: block;border-bottom: #EEE solid 1px; padding-bottom: 20px}
.list-post .box-post.featured>div{display: block; width: 100%!important; padding: 0px!important;}
.list-post .box-post.featured .post-thumbnail{margin-bottom: 20px;}

.square-list-post{width: auto!important;}
.square-list-post.list-post .box-post>div{display: block!important; width: 100%; padding: 0px!important}
.square-list-post img{width: 100%;}


.facebook-comments {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 35px; }
.facebook-comments .fb-comments {
    width: 100%; }
.facebook-comments .fb-comments > span {
      width: 100% !important; }
.facebook-comments .fb-comments > span iframe {
        width: 100% !important; }

.bima-footer{border-top: #EEE solid 1px; padding-top: 30px; padding-bottom: 50px; background: #fbfbfb;color:#444}
.bima-footer .footer-link a{display: inline-block; margin: 0px 10px;}

ul.pagination{list-style: none!important; padding: 0px; margin: 0px}
ul.pagination li, ul.pagination li a{display: inline-block;}
ul.pagination li a{padding: 4px 8px; border: #EEE solid 1px; border-radius: 4px; text-decoration: none; color: #868686; margin: 5px;}
ul.pagination li.active a{background: #07527e; color: #FFF;}


.box-sosmed{width: 100%; background: #333; color:#FFF; text-align: center; padding: 30px 0px;border-radius: 8px; display: block; margin-bottom: 10px;}
.box-sosmed:hover{color:#FFF!important; opacity: .9}
.box-sosmed svg{}
.box-sosmed span{display: block;}
.box-sosmed.facebook{background: #117fbf}
.box-sosmed.instagram{background: #bf1161}
.box-sosmed.youtube{background: #bf1111}
.box-sosmed.twitter{background: #11a7bf}

.content .paragraph p{margin-bottom: 20px;}

/*
RESPONSIVE AREA ----------------------------------
*/

@media all and (max-width:992px){
  header nav a{color:#9e9e9e;margin-left: 0px!important;}
  nav,.brand-logo img{line-height: 64px!important;}
  .brand-logo img{margin-top: 15px!important; height: 35px!important}
  header{padding-top: 65px;}
  .section-padding-40{padding-top: 20px!important; padding-bottom: 20px;}
  .bima-footer{text-align: center;}

}

@media all and (min-width: 993px){
  nav{line-height: 90px!important;}
}

@media all and (max-width:985px) and (min-width:840px){
  section.article .overview{padding-left: 50px;}
}


@media all and (max-width:600px){
.list-post .box-post{display: block;}
.list-post .box-post .post-thumbnail{width: 95px; padding-right: 10px; margin-bottom: 0px;}
.list-post .box-post .post-thumbnail img{width: 100%; border-radius: 4px; }
.list-post .box-post .post-content p{display: none!important}
.list-post .box-post .post-content .title-post{font-size: 16px!important; line-height: 20px!important; margin-bottom: 2px!important;}
.list-post .box-post .post-info, .list-post .box-post .post-info a{font-size: 10px;}
.section-padding-40{padding-top: 10px; padding-bottom: 10px;}

.post-card.big { margin: -16px; border-radius: 0px; margin-bottom: 0px; margin-top: -66px; }
.post-card.big  .post-overview{padding: 26px;}
.post-card.big .post-overview .overview-date, .single-date{width: 40px; font-size: 11px;}
.post-card.big .post-overview .overview-date span{font-size: 30px;}

.bima-footer{padding-top: 10px!important}
.single-blog{padding-top: 5px!important;padding-bottom: 5px!important}
.single-blog .link-back-article{margin-bottom: 10px}
.single-blog .post-thumbnail{margin-bottom: 0px}
.single-date{position: absolute; margin-top: -80px; background: #FFF; width: auto; padding: 5px; border-radius: 10px; margin-left: 10px;}
.single-blog h1{font-size: 20px; line-height: 28px; margin: 20px 0px; font-weight: bold; letter-spacing: .8px}

.container{width: 100%;}

nav,.brand-logo img{line-height: 56px!important;}
.brand-logo img{margin-top: 10px!important;}
header{padding-top: 57px;}

}
@media all and (max-width:500px){
  .post-card-list .post-thumbs{width: 100px;}

}



@media all and (max-width:460px){
  .hidden-mobile{display: none}
  .section-padding-40{padding-top: 10px!important; padding-bottom: 10px!important;}
  .row .col{padding:0px .25rem;}
  .post-card{margin-bottom: .25rem;margin-top: .25rem;}
  .post-card .post-info .position-bottom{padding: 10px;}
  .post-card .post-info a h4{margin-top: 5px;}

}