.font_size_80{

    font-size: 80%;

}



.font_size_90{

    font-size: 90%;

}



.font_size_85{

    font-size: 85%;

}



.font_size_95{

    font-size: 95%;

} 



/*===============================================*/

/*SLIDER BUKU*/

/*===============================================*/



.carousel-list-buku .carousel-cell {

    width: 16%;

    height: 300px;

    margin-right: 10px;

    background-color: white;

    border-radius: 5px;

    font-size: 80%;

    /*border: 1px solid grey;*/

}



.carousel-list-buku .carousel-cell:hover{

    box-shadow: 0px 0px 10px #cccccc; 

}



.carousel-list-buku .carousel-cell .carousel-buku-img{

    height: 200px; 

    overflow: hidden;

}



.carousel-list-buku .carousel-cell .carousel-buku-judul{

    height: 3em;

}



.carousel-list-buku .carousel-cell .carousel-buku-harga{

    height: 50px;

}





@media only screen and (min-width: 576px) {

    .bg-list-book {

        border-radius: 9px;

    }

}



@media only screen and (max-width: 575px) {

    .bg-list-book {

        border-radius: none;

    }

}





@media only screen and (max-width: 900px) {

    .carousel-list-buku .carousel-cell {

        width: 25%;

        height: 320px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 215px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}





@media only screen and (max-width: 768px) {

    .carousel-list-buku .carousel-cell {

        width: 28%;

        height: 320px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 175px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}





@media only screen and (max-width: 575px) {

    .carousel-list-buku .carousel-cell {

        width: 32%;

        height: 320px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 195px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}





@media only screen and (max-width: 525px) {

    .carousel-list-buku .carousel-cell {

        width: 35%;

        height: 320px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 200px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}





@media only screen and (max-width: 475px) {

    .carousel-list-buku .carousel-cell {

        width: 35%;

        height: 300px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 170px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}





@media only screen and (max-width: 450px) {

    .carousel-list-buku .carousel-cell {

        width: 40%;

        height: 300px;

    }   



    .carousel-list-buku .carousel-cell .carousel-buku-img{

        height: 160px; 

        overflow: hidden;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-judul{

        height: 3em;

    }



    .carousel-list-buku .carousel-cell .carousel-buku-harga{

        height: 50px;

    }



}









/*===============================================*/

/*SLIDER DENGAN BACKGROUND*/

/*===============================================*/





.carousel-list-buku-bg .carousel-cell {

    width: 20%;

    height: 310px;

    margin-right: 10px;

    background-color: white;

    border-radius: 5px;

    font-size: 80%;

    /*border: 1px solid grey;*/

}



.carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

    height: 200px; 

    overflow: hidden; 

    border: 1px solid #AEAEAE

}



.carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

    height: 3em;

}



.carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

    height: 50px;

}





@media only screen and (min-width: 576px) {

    .bg-list-book {

        border-radius: 9px;

    }

}



@media only screen and (max-width: 575px) {

    .bg-list-book {

        border-radius: none;

    }

}





@media only screen and (max-width: 900px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 25%;

        height: 320px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 215px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}





@media only screen and (max-width: 768px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 28%;

        height: 320px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 175px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}





@media only screen and (max-width: 575px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 32%;

        height: 320px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 195px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}





@media only screen and (max-width: 525px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 35%;

        height: 320px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 200px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}





@media only screen and (max-width: 475px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 35%;

        height: 300px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 170px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}





@media only screen and (max-width: 450px) {

    .carousel-list-buku-bg .carousel-cell {

        width: 40%;

        height: 300px;

    }   



    .carousel-list-buku-bg .carousel-cell .carousel-buku-img-bg{

        height: 160px; 

        overflow: hidden; 

        border: 1px solid #AEAEAE

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-judul-bg{

        height: 3em;

    }



    .carousel-list-buku-bg .carousel-cell .carousel-buku-harga-bg{

        height: 50px;

    }



}







.kategori .home-kategori .kategori-body{

    border: 1px solid #ececec; 

    border-radius: 5px; 

    box-shadow: 2px 2px 3px #cccccc; 

    height: 100%

}



.kategori .home-kategori .kategori-body img:hover{

    transform: scale(1.05);

    transition: 0.2s

}



.kategori .home-kategori .kategori-body .kategori-nama{

    color: #383838

}





@media only screen and (min-width: 769px) {

    .kategori .home-kategori{

        padding-left: 15px;

        padding-right: 15px;

    }

}



@media only screen and (max-width: 768px) {

    .kategori .home-kategori{

        padding-left: 2px;

        padding-right: 2px;

    }

}



@media only screen and (max-width: 450px) {

    .kategori .home-kategori .kategori-body .kategori-nama{

        font-size: 70%;

    }



}









/*===============================================*/

/*SLIDER BUKU FILTER*/

/*===============================================*/



.filter_list_produk .part-cell {

    width: 100%;

    height: 300px;

    background-color: white;

    border-radius: 5px;

    /*border: 1px solid grey;*/

}



.filter_list_produk .part-cell:hover{

    box-shadow: 0px 0px 3px #036ffc; 

}



.filter_list_produk .part-cell .part-buku-img{

    height: 200px; 

    overflow: hidden;

}



.filter_list_produk .part-cell .part-buku-harga-add{

    height: 3em;

}



.filter_list_produk .part-cell .part-buku-harga{

    position: absolute;

    bottom: 15px;

}



.filter_list_produk .part-cell .part-buku-judul{

    height: 3em;

}





@media only screen and (max-width: 900px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 320px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 215px; 

        overflow: hidden;

    }

}





@media only screen and (max-width: 768px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 320px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 175px; 

        overflow: hidden;

    }



}





@media only screen and (max-width: 575px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 320px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 195px; 

        overflow: hidden;

    }

}





@media only screen and (max-width: 525px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 320px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 200px; 

        overflow: hidden;

    }



}





@media only screen and (max-width: 475px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 300px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 170px; 

        overflow: hidden;

    }



}





@media only screen and (max-width: 450px) {

    .filter_list_produk .part-cell {

        width: 100%;

        height: 300px;

    }   



    .filter_list_produk .part-cell .part-buku-img{

        height: 160px; 

        overflow: hidden;

    }



}











/*===============================================*/

/*SIDEBAR MOBILE*/

/*===============================================*/





.navbar .navigasi{

    color: #0071b5 !important;

    margin-left: 20px;

}



.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 9999;

  top: 0;

  left: 0;

  background-color: white;

  overflow-x: hidden;

  transition: 0.3s;

}



.sidenav a {

  display: block;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #f1f1f1;

}



.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}



#main {

  transition: margin-left .5s;

  padding: 16px;

}



@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}







/*===============================================*/

/*FOOTER*/

/*===============================================*/

#footer{

    background-color: #9cc4e6; 

    color: #42565b !important;

}



#footer hr{

    color: white;

    border-top: 1px solid white;

}



#footer a{

    color: #42565b;

    font-size: 90%;

}



#footer .footer-title{

    border-bottom: 1px solid white;

}



#footer td{

    vertical-align: top;

    font-size: 90%;

}



/*===========================================================*/





@media screen and (min-width: 1001px) {

    .navbar .tampil-tablet{

        display: none;

    }

}



@media screen and (max-width: 1000px) {

    .navbar .tampil-tablet{

        display: inline;

    }

}







.cut_line_2 {

  display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

  overflow: hidden;

}



.modal-header{

    padding: 10px 10px 0px 10px !important;

}





.carousel-buku-img img:hover{

    transform: scale(1.1);

    transition: 0.2s

}



.part-buku-img img:hover{

    transform: scale(1.1);

    transition: 0.2s

}



.search-container a{

    color: #333

}





.btn-primary{

    background-color: #3b47ff;

    border: #3b47ff;

    color: white;

}



.badge-primary{

    background-color: #3b47ff;

    border: #3b47ff;

    color: white;

}



.slider_list{

    display: none;

}



/*LOADING*/

.loader_extra,

.loader_extra:before,

.loader_extra:after {

  border-radius: 50%;

  width: 2.5em;

  height: 2.5em;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-animation: load7 1.8s infinite ease-in-out;

  animation: load7 1.8s infinite ease-in-out;

}

.loader_extra {

  color: #3370ff;

  font-size: 10px;

  margin: 80px auto;

  position: relative;

  text-indent: -9999em;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

.loader_extra:before,

.loader_extra:after {

  content: '';

  position: absolute;

  top: 0;

}

.loader_extra:before {

  left: -3.5em;

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.loader_extra:after {

  left: 3.5em;

}

@-webkit-keyframes load7 {

  0%,

  80%,

  100% {

    box-shadow: 0 2.5em 0 -1.3em;

  }

  40% {

    box-shadow: 0 2.5em 0 0;

  }

}

@keyframes load7 {

  0%,

  80%,

  100% {

    box-shadow: 0 2.5em 0 -1.3em;

  }

  40% {

    box-shadow: 0 2.5em 0 0;

  }

}





/*EXTRA SIDEBAR*/

.carousel-buku-harga b{

    font-size: 120%;

    color: black;

}



.carousel-buku-judul{

     display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;  

    overflow: hidden;

}