body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
html, body { margin: 0; padding: 0; }
*{ box-sizing: border-box; }
.slider { margin: 100px auto; }

.slider .item{ padding:3px 3px 12px 3px; margin:0px}
.slick-slide { margin: 0px 6px; }
.slick-slide img { width: 100%; }
.slick-prev:before, .slick-next:before { color: black; }
.slick-slide { transition: all ease-in-out .3s; opacity: 1; }
.slick-active { opacity: 1; }
.slick-current { opacity: 1; }
.item-bordered{ border:0px solid rgba(230, 230, 230, .5);border-width:1px 0px;padding:3px 3px 8px 3px;border-radius:4px;width:235px}
.item img,.item-bordered img {max-width: 100%;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;
    width:100%;height:100%;object-fit:contain}
.item:hover img {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);z-index:-1}
.zoom-inside{overflow: hidden;width:224px;height:224px}
.item-bordered:hover img {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1)}

.module {width: 215px;overflow: hidden}.module p {margin: 0;}
.fade {position: relative;height: 2.8em; /* exactly three lines */}
.fade:after {content: "";text-align: right;position: absolute;bottom: 0;right: 0;width: 50%;height: 1.2em;background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)}
.link{text-decoration:none}.link:hover{border:0px solid #757575;border-bottom-width:2px}.link .fa{position:relative;top:-4px}

.group-float {position: relative;margin-top:36px}
.input-float:focus {outline: none}
.lb-float {color: #999;font-weight: normal;position: absolute;pointer-events: none;left: 5px;top: 10px;transition: 0.2s ease all;-moz-transition: 0.2s ease all;-webkit-transition: 0.2s ease all}
.for-select {top: -20px;font-size: 13px;color: #2196F3}
.input-float:focus ~ label, .input-float:valid ~ label {top: -20px;font-size: 13px;color: #2196F3}
.bar-float {position: relative;display: block;width: 100%}
.bar-float:before, .bar-float:after {content: '';height: 2px;width: 0;bottom: 1px;position: absolute;background: #2196F3;transition: 0.2s ease all;-moz-transition: 0.2s ease all;-webkit-transition: 0.2s ease all}
.bar-float:before{left: 50%}
.bar-float:after {right: 50%}
.input-float:focus ~ .bar-float:before, .input-float:focus ~ .bar-float:after {width: 50%}
.input-float:focus ~ .highlight-float {-webkit-animation: inputHighlighter 0.3s ease;-moz-animation: inputHighlighter 0.3s ease;animation: inputHighlighter 0.3s ease}
@-webkit-keyframes inputHighlighter {from {background: #5264AE}to {width: 0;background: transparent}}
@-moz-keyframes inputHighlighter {from {background: #5264AE}to{width: 0;background: transparent}}
@keyframes inputHighlighter {from {background: #5264AE}to {width: 0;background: transparent}}

/*reset the settings from default to my set*/
.overlay{background-color:rgba(0,0,0,0.4);z-index:2}
.animate-left{position:relative;animation:animateleft 0.2s}@keyframes animateleft{from{left:-300px} to{left:0}}
.animate-right{position:relative;animation:animateright 0.2s}@keyframes animateright{from{right:-300px} to{right:0}}
.content{padding-left:16px;padding-right:16px;max-width:1200px}

/*my own settings*/
.ul-hv{text-decoration:none;cursor:pointer}
.ul-hv:hover{text-decoration:underline}
.animate--left{position:relative;animation:animateminleft 0.2s}@keyframes animateminleft{from{left:0} to{left:-300px}}
.animate--right{position:relative;animation:animateminright 0.2s}@keyframes animateminright{from{right:0} to{right:-300px}}
.top-100{max-height: -webkit-calc(100% - 55px);max-height:-moz-calc(100% - 55px);max-height:calc(100% - 55px);overflow-y:auto}
.animate-down{position:relative;animation:animatedown 0.4s}@keyframes animatedown{from{top:-100px} to{top:0}}
.animate-down-hide{position:relative;animation:animatedownhide 0.4s}@keyframes animatedownhide{from{top:0} to{top:-100px}}

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

.rem-8{margin-left:-8px;margin-right:-8px}
.rem-16{margin-left:-16px;margin-right:-16px}
.blog-list p{text-align:justify}
@media (max-width:992px) and (min-width:601px){
    .m-rem-16{margin-left:-16px;margin-right:-16px}
}
@media(max-width:600px){
    .s-rem-16{margin-left:-16px;margin-right:-16px}
    .promo-desc h1, .blog-list h1, .promo-list h1, .blog-desc h1{font-size:25px!important}
    .promo-desc p, .blog-list p, .promo-list p, .blog-desc p{font-size:15px!important}
    .blog-list p{text-align:left}
    
    /* saat small screen*/
    .zoom-inside{width:148px;height:148px}
    .zoom-inside img{width:100%;height:100%;object-fit:contain}
}
.pad-lr-18{padding-left:18px!important;padding-right:18px!important}
.rblock{width:100%!important}
/*for input outline with notice system */
.inp-border-bottom{border-bottom:2px solid #e91e63} /*color pink for notice that come NOT FROM COLOR-THEME*/

/*remove spinner on input number*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/*backgroun color transparent for input & select*/
input, select{background-color:rgba(255, 255, 255, 0)}


/*kebutuhan pada product detail*/
@media(max-width:992px){
    #product-details, #product-desc{
        margin-left:-16px;
        margin-right:-16px;
    }
    #product-details .first-detail{
        padding-left:1px!important;
        overflow:auto!important;
    }
}
@media(max-width:600px){
    #product-details, #product-desc{
        margin-left:-33px;
        margin-right:-35px;
        padding:16px!important
    }
    #product-details{
        padding:16px!important
    }
}
@media(max-width:400px){
    #product-details .fimg{
        width:100%!important
    }
    #product-details .label{
        padding-top:16px!important;
        padding-left:1px!important;
    }
    #product-details h1{
        font-size:27px
    }
    #product-details h2{
        font-size:21px
    }
    #product-details .hide-400{
        display:none
    }
    #product-details .show-400{
        display:block!important;
        padding-top:16px
    }
}


.review-form .input-rating .stars {
  display: inline-block;
  vertical-align: top;
}

.review-form .input-rating .stars input[type="radio"] {
  display: none;
}

.review-form .input-rating .stars>label {
  float: right;
  cursor: pointer;
  padding: 0px 3px;
  margin: 0px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.review-form .input-rating .stars>label:hover, .review-form .input-rating .stars>label:hover~label {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

.review-form .input-rating .stars>label:before {
  content: "\f006";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  color: #DADADA;
  font-size: 14px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.review-form .input-rating .stars>label:hover:before, .review-form .input-rating .stars>label:hover~label:before {
  content: "\f005";
  color: #FFB656;
}

.review-form .input-rating .stars>input:checked label:before, .review-form .input-rating .stars>input:checked~label:before {
  content: "\f005";
  color: #FFB656;
}


#footer-space{margin-top:35px}
@media (max-width:992px) and (min-width:601px){
    .m-rem-20{margin-left:-20px;margin-right:-20px}.m-rem-10{margin-left:-10px;margin-right:-10px}#footer-space{margin-top:19px}
}
@media(max-width:600px){
    .s-rem-20{margin-left:-24px;margin-right:-24px}.s-rem-top{margin-top:-16px}
    .slogan{display:block;padding-left:5px;padding-top:15px}#footer-space{margin-top:3px}
}
.nul{text-decoration:none}
#fprofil p{margin-bottom:0}
@media(min-width:601px){
    .style-scroll::-webkit-scrollbar-track{border-radius: 8px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
    .style-scroll::-webkit-scrollbar{width: 8px;background-color: #F5F5F5;}
    .style-scroll::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #888;border: 2px solid #aaa;}
}
.slick-prev:before, .slick-next:before{font-size: 35px;opacity:.25;}

.round-small{border-radius:2px!important}
.clickable:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.16)!important;}
.check2,.radio2{width:18px;height:18px;position:relative;top:4px}
.card-1{box-shadow:0 3px 3px 0 rgba(0,0,0,0.16)!important;}

.loader {border: 4px solid #f9f9f9;border-radius: 50%;border-top: 4px solid #ddd;width: 40px;height: 40px;
  -webkit-animation: spin .5s linear infinite;animation: spin .5 linear infinite;
}

@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

.input{padding:8px 0 9px 0}
.select{padding:9px 0 10px 0}
input:focus{padding:8px 0}
select:focus{padding:9px 0}