body{
    background: #fff;   
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;

}

.col-sm{
    border:1px solid rgb(189, 188, 188);
    margin:10px;
    margin-top: 30px ;
    background: #fff;
    color: #222;
    padding:12px 10px px;
}

.homepage{
    -webkit-filter:grayscale(0%);
    margin:0px auto;
    height:410px;
}

.homepage h1{
    margin-top:40px;
    text-align:center;
    font-family: 'viga';
    color: #fff;
    font-size:30px;
}

.homepage p{
    text-align:center;
    color:#fff;
}

.buttonindex{
    color:#fff !important;
    background:transparent;
}

.buttonindex:hover{
    transition: 0.3s;
    background: ;
}

.homepage::after{
    left:0;
    top:0;
    width: 100%;
    height:103%;
    content:'';
    display:block;
    filter:brightness(20%);
    background:url(../../assets/images/foto_web/belanja2.jpg);
    background-size:cover;
    background-position: 0 1px;
    position:absolute;
    bottom:0;
}

.top-content{
    background:#fff;
    margin-top:30px;
    border-radius:20px;
    -webkit-box-shadow: 0 4px 10px rgba(22, 115, 190, 0.5);
    border-top:10px solid #3c8dbc;
    width:98%;
    margin-left:7px;
    margin-bottom:40px;
}

.col-sm-4{
    margin: 0px auto;
    padding:15px;
    font-family:viga;
}

.col-sm-4 h3{
    color:#111;
    font-weight:700;
    margin-top:1px;
    line-height:1.5;
    text-align:center;
}

.col-sm-4 p{
    font-size:18px;
    color:#222;
    font-weight:550;
    text-align:center;
    line-height:1.5;
}

.homepage .container{
    z-index:1;
    position:relative
}

.jumbotron-fluid{
    background:#fff;
    border-bottom:1px solid #111;
    box-shadow: 0px 3px 1px rgba(0,0,0,0.5);
}

.label{
    background:grey;
    color:white;
    padding:5px;
    border-radius:5px;
}

.label a{
    color:#fff;
}

.label:hover{
    background:#F74646;
    transition:0.7s;
    color:#FFF;
    text-decoration:none;
}

.post-body {
    height: 150px;
    position: relative;
    padding: 20px 15px 0;
}

.post-body a{
    font-weight:500;
    font-size:12px;
}

.post-thumb {
    padding: 0
}

.post-title a {
    background:#999;
    color: #FFF;
    padding:5px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01rem;
}
.post-title a:hover { text-decoration: none }

.post-author {
    color: orange;
    position: absolute;
    bottom: 0px;
    left: 15px;
    font-size: 14px;
}

.post-author a{
    color:#111;
    font-weight:500;
    font-size:14px;
}

.post-author .author-photo {
    margin-right: 10px;
    border-radius: 50%;
}

@media screen and (max-width : 780px){
    .homepage{
        text-align:center;
        height:500px;
    }

    .homepage p{
        text-align:center;
    }

    .homepage h1{
        margin-top: 150px;
        text-align:center;
    }
}

/* Advertisement */
.iklan_responsive {
     width: 720px; height: 90px; 
}

@media(max-width:450px){ 
    .iklan_responsive { 
        margin-left:-0px;
        width: 120px; height: 90px;  
    } 
}

@media (max-width:500px) { 
    .iklan_responsive {
        width: 330px; 
        height: 60px; 
        margin-top:60px;
        margin-left:-10px;
   } 
    a.logo{
        margin-left:25px;
        margin-top:-30px;
   }
}

@media(min-width:500px){
    .iklan_responsive {
        width: 400px; 
        height: 60px; 
        margin-left:-40px;  
        margin-top:70px;
   } 
   a.logo{
       margin-top:-30px;
   }
}

@media(min-width:800px){ 
  .iklan_responsive { 
    width: 420px;
    margin-left:100px; 
    height: 90px; 
    margin-top:-0px;
  } 

  a.logo{
    margin-top:-0px;
  }
}

@media(min-width:1100px){
  .iklan_responsive{
    width:710px;
    height:90px;
    margin-top:-0px;
    margin-left:270px;
  }

  a.logo{
    margin-top:-0px;
  }
}