body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background: #eee !important;
}

.navbar, .navbar-expand-lg {
    color: #fff;
    width:100%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

.navbar{
    background: #fff;
}

.header{
    height:150px;
    background:rgb(250,0,0);
}

.header a{
    font-weight:bold;
    top:auto;
    font-size:30px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    position:absolute;
    color:#fff !important;
}

.breadcrumbs{
    padding:5px 5px 5px;
    background:rgb(112, 1, 1) !important;
    height:50px;
}

.breadcrumbs a{
    font-size:15px;
    font-weight:200;
    color:#fff !important;
}

.navbar, .navbar-expand-lg a{
    color: #2b2929;
} 

.navbar, .navbar-expand-lg a:hover{
    color: rgba(4, 50, 102, 0.5);
    transition: 0.5s;
} 

blockquote p{ 
    margin: 0 16px 16px; 
}

blockquote p:last-child{ 
    margin-bottom: 0; 
}

blockquote footer{
  font-size: 1em;
  text-align:right;
  font-style:italic;
  margin:12px 20px 0;
} 

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    border:1px solid #3c8dbc;
    background:#3c8dbc;
    overflow-x: hidden;
    transition: 0.8s;
    padding-top: 60px;
}

.sidenav h4{
    font-weight:700;
    height:40px;
    font-size:20px;
    background-image:linear-gradient(to left, rgba(202, 13, 13, 0.9), rgba(219, 172, 15, 0.9));
    border:0px solid #1a2226;
    border-left:5px solid #3c8dbc;
    color:#fff;
    padding: 8px 8px 8px 32px;
}
.sidenav a {
    margin-bottom:10px;
    padding: 8px 8px 10px 32px;
    text-decoration: none;
    font-size: 17px;
    color: #fff;
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;  
    display: block;
    transition: 0.3s;
}

.sidenav p{
    font-size:15px;
    height:80px;
    color:#fff;
    padding: 8px 8px 8px 32px;
    font-family: 'viga';
    display: block;

}
div.bekgron{
    background:red;
}
.sidenav p::first-letter {
    text-transform:uppercase;
 }

.dropdown a:hover{
    background: #3c8bdc;
}

.sidenav img{
    height:60px;
    width:60px;
    float:left;
    border-radius:50%;
    margin-right:10px;
    border: 2px solid salmon;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav i {
    font-size:13px;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

.col-sm{
    color: #111;
    padding:12px 10px 12px;
    position:relative;
    background:#fff;
}

.card-text a p::first-letter{
    text-transform:uppercase;
}

div.list{
    cursor:pointer;
    border:1px solid rgb(173, 172, 172);
    background-size:cover;
    background-attachment:fixed;
    z-index:1;
}

div.list::after{
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    background-size:cover;
    background-attachment:fixed;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
    top:0;
    left:0;
    z-index:-1;
}

div.list:hover{
    transition: 0.8s;
}

div.list h3{
    margin-top:20px;
    text-align:center;
    color:#ffffff;
}

div.list h3::first-letter{
    font-size:30px;
    text-transform:uppercase;
    font-weight:800;
}

.produk{
    margin-left:100px;
}

.product-header{
    width:40%;
    padding:5px 5px;
    background: linear-gradient(240deg, transparent 50%, rgb(250,0,0) 50%);
}

.product-line{
    height:5px;
    margin-top:-24px;
    background:rgb(250,0,0);
    border-top:1px solid rgb(250,0,0);
}

.listproduk{
    background:#fff;
    border:1px solid rgb(218, 209, 209);
}

.harga p {
    color:rgb(250,0,0);
    font-weight:600;
    font-size:25px;
    margin-top:20px;
    margin-left:10px;
}

.list-group-item a:hover{
    background: rgb(250,0,0);
    color:#fff;
    transition: .4s;
}

.terbaru{
    margin-top:-40px;
    color:rgb(250,0,0);
    font-weight:700;
}

.terbaru:hover{
    transition: 0.4s;
    text-decoration:none;
    background: rgb(250,0,0);
    color:#fff;
}

.cart{
    background:#fff;
    height:auto;
    padding:10px;
    border: 1px solid rgb(216, 214, 214);
}

.judul{
    margin-top:20px;
    background:rgb(48, 178, 221);
    padding:10px;
    border-radius:10px;
    color:#f9f9f9;
}

.pembayaran{
    color : #3c8dbc;
    text-align:center;
    font-size:17px;
}

.sidebar{    
    background-image: #fff;
    padding:2px;
    height: 650px;
    margin-top:10px !important;
}

.sidebar h4{
    font-weight:700;
    color: #111;
}

.pembayaran img{
    border:1px solid rgb(187, 187, 187);
    padding:20px;
}

.admin{
    width:100%;
    font-size:15px;
    color:#999;
    text-align:left;
    border:1px solid rgb(214, 209, 209);
    font-family:'arial';
    margin-bottom:30px;
    height:auto;
    margin:10px 2px;
    padding:10px 10px;
    background:#fff;
}

.admin li{
    list-style:none;
    color: rgb(117, 116, 116);
    padding:10px;
    border-bottom:1px solid rgb(206, 204, 204);
}

.admin span{
    float:right;
    margin-top:-39px;
    margin-right:20px;
}

.button{
    box-shadow:none;
    background:none;
    border:none;
    color:#fff;
    background: rgb(250,0,0);
}

.button:hover{
    color:#fff;
    background:rgb(134, 2, 2)
}

.icon{
    margin-top:20px;
}

.icon i{
    color:#fff;
    top:100;
    float:right;
    font-size:50px;
    font-weight:700;
    transform:translate(10%, -20%);
}

.firstkonten{
    box-shadow: 0px 0px 2px rgba(14, 13, 13, 0.5);
    font-weight:700;
    background:#3c8dbc;
    color: #fff;
    padding:20px;
}

.secondkonten{
    font-weight:700;
    background:#80c2e7;
    color:#fff;
    box-shadow: 0px 0px 2px rgba(14, 13, 13, 0.5);
    padding:20px;
}

.thirdkonten{
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    font-weight:700;
    background: rgb(250,0,0);
    color:#fff;
    padding:20px;
}

.fourthkonten{
    font-weight:700;
    background: #c01913;
    color:#fff;
    box-shadow:2px 2px 2px rgba(211, 116, 8, 0.5);
    padding:20px;
}

.thirdkonten h4, .fourthkonten h4 {
    font-size:20px;
    color: #fff;
    font-weight:700;
}

.firstkonten p, .secondkonten p, .thirdkonten p, .fourthkonten p{
    font-size:25px;
    color:#fff;
    font-weight:600;
}

.secondkonten a, .icon{
    color: #3c8dbc;
    margin-top:10px;
}

.thirdkonten h4, .fourthkonten h4 {
    font-size:20px;
    color: #fff;
    font-weight:700;
}

.firstkonten a, .secondkonten a, .thirdkonten a, .fourthkonten a{
    color:#fff;
}

.keranjang{
    width:100%;
    background:transparent;
    border:1px solid rgb(250,0,0) !important;
    color: #1a2226;
}

.comment{
    border:1px solid #dadbdd;
    padding:20px 15px 10px;
}

.comment img{
    border-radius:50%;
    height:50px;
    width:50px;
}

.comment p{
    margin-left:54px;
}

.comment span.username{
    background: rgb(250,0,0);
    color:#fff;
    border-radius:7px;
    padding:5px;
}

.replied-comment{
    margin-left:54px;
}

.replied-comment img{
    border-radius:50%;
    height:50px;
    width:50px;
}

.replied-comment span.admin{
    background: rgb(250,0,0);
    color:#fff;
    border-radius:7px;
    padding:5px;
}

.repliead-comment p {
    margin-left:107px;
}

.riwayat{
    background:#fff;
    margin-top:20px;
}

.rating { 
    border: none;
    float: left;
  }
  
.rating > input { display: none; } 
.rating > label:before { 
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}
  
.rating > .half:before { 
    content: "\f089";
    position: absolute;
}
  
.rating > label { 
    color: #ddd; 
   float: right; 
}
    
.rating > input:checked ~ label, 
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label{ 
    color: #FFD700;  
} 
  
.rating > input:checked + label:hover, 
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, 
.rating > input:checked ~ label:hover ~ label{ 
    color: #FFED85; 
}

#footer {
    background: rgb(109, 1, 1);
    color: #B9BABC;
  }
  
  #bottom-footer {
    background: rgb(146, 33, 33);
  }
  
  .footer {
    margin: 30px 0px;
  }
  
  .footer .footer-title {
    color: #FFF;
    text-transform: uppercase;
    font-size: 18px;
    margin: 0px 0px 30px;
  }
  
  .footer-links li+li {
    margin-top: 15px;
  }
  
  .footer-links li a {
    color: #B9BABC;
  }
  
  .footer-links li i {
    margin-right: 15px;
    color: #D10024;
    width: 14px;
    text-align: center;
  }
  
  .footer-links li a:hover {
    color: rgb(233, 233, 233);
  }
  
  .copyright {
    margin-top: 20px;
    display: block;
    margin-bottom:20px;
    font-size: 12px;
    color:#fff;
  }
  
  .footer-payments li {
    display: inline-block;
    margin-right: 5px;
  }
  
  .footer-payments li a {
    color: rgb(18, 36, 175);
    font-size: 36px;
    display: block;
    margin-top:20px;
  }

  .footer-links li:first-letter{
	text-transform: uppercase;
  } 


@media(max-width:800px){
    .responsive img{
        border: 1px solid rgb(197, 194, 194);
        width:500px;
    }
}

@media(max-width:1000px){
    .store{
        height:2750px;
    }
      
    .responsif a:focus img{
      height:300px;
      left:20%;
      transform: scale(1) translate(5%, -80%);
    } 
}

@media(max-width:768px){


    .cart{
        margin:18px 17px;
        padding:10px;
        height:auto;
    }

    .sidebar h4{
        color :#111;
    }

    .cari{
        width:250px !important;
    }

    .navbar-expand-lg a{
        color:#111; 
    }

    .table-bordered, .table-stripped{
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .product-header{
        width:100%;
    }
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


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


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

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

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

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

@media(min-width:1000px){
    .iklan_responsive{
      width:500px;
      height:90px;
      margin-top:-0px;
      margin-left:400px;
    }
    a.logo{
        margin-top:15px;
    }
}

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

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