/*display hp*/
/*masthead*/
/*ngilangin gambar di masthead*/

.tittlets {
  font-family: "Roboto" !important;
}

@media only screen and (min-width: 1200px) {
  .bgmasdekstop {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bgmashp {
    display: none;
  }
}
@media only screen and (max-width: 1200px) {
  .bgmasdekstop {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bgmashp {
    display: none;
  }
}
@media only screen and (max-width: 360px) {
  .bgmasdekstop {
    display: none;
  }
  .bgmashp {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media screen and (max-width: 995px) {
  .gmr1,
  .gmr2 {
    display: none;
  }
}
/*masthead*/

h1.title1 {
  text-align: center;
  color: white;
}
.subtitle1 {
  font-size: 25px;
  text-align: center;
  font-family: Balsamiq Sans;
  color: white;
}

/*display hp*/

/*navbar*/
.tommas {
  font-family: Balsamiq Sans;
  height: 56px;
  margin: 10px;
  border-width: 2px;
  border-color: none;
  border-radius: 36px;
  background-color: #cda63c;
  color: #000;
}

.tommas:hover {
  background-color: #abdee6;
}

.tommas:active {
  background-color: #001c5f;
  color: #fff;
}
#mainNav {
  background: white;
}
#mainNav .navbar-nav > li.nav-item > a button.btnlogin {
  height: 48px;
  padding: 14px 32px;
  border-radius: 36px;
  background-color: #cda63c;
  border-width: 0px;
  color: black;
  font-family: Balsamiq Sans;
}

#mainNav .navbar-nav > li.nav-item > a button.btnlogin:hover {
  background-color: #abdee6;
}

#mainNav .navbar-nav > li.nav-item > a button.btnsignup {
  height: 48px;
  padding: 14px 32px;
  border-radius: 36px;
  background-color: #001c5f;
  border-width: 2px;
  border-color: white;
  color: white;
  font-family: Balsamiq Sans;
}

#mainNav .navbar-nav > li.nav-item > a button.btnsignup:hover {
  height: 48px;
  padding: 14px 32px;
  border-radius: 36px;
  background-color: #3e8091;
  border-color: #3e8091;
  color: white;
  font-family: Balsamiq Sans;
}
/*username*/
.username {
  line-height: 0px;
  margin: 13px;
  font-family: Balsamiq Sans;
  font-size: 15px;
  font-weight: bold;
  color: white;
}
.imguser {
  width: 20%;
}
/*profile*/
.navprof {
  background-color: #fff;
  border-radius: 30px;
  margin-bottom: 60px;
  box-shadow: 0px 4px 5px 2px rgb(0 0 0 / 10%);
}
.namaprof {
  font-family: Balsamiq Sans;
  font-size: 20px;
  margin-top: 20px;
}

.namaprof1 {
  font-family: Balsamiq Sans;
  font-size: 18px;
  margin: 5px 0px;
  color: grey;
}
.bgedit {
  background-color: #e5e5e5;
  padding: 10px 20px;
  font-family: Balsamiq Sans;
  font-size: 15px;
  text-align: left;
  border-radius: 20px;
  margin-top: 40px;
}

.bgedit1 {
  background-color: #e5e5e5;
  padding: 10px 20px;
  font-family: Balsamiq Sans;
  font-size: 15px;
  text-align: left;
  border-radius: 20px;
}

.bgedit1:hover {
  background-color: grey;
  padding: 10px 20px;
  font-family: Balsamiq Sans;
  font-size: 15px;
  text-align: left;
}

.bgedit:hover {
  background-color: grey;
  padding: 10px 20px;
  font-family: Balsamiq Sans;
  font-size: 15px;
  text-align: left;
}

.bgedita:hover {
  text-decoration: none;
  color: white;
}
.dasdes {
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.1);
}
.isidasdes {
  font-family: Balsamiq Sans;
  padding: 5px 40px;
  color: #000;
}

/*edit profile*/
.dasdit {
  background-color: #fff !important;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.panform {
  width: 40%;
}
.formedit {
  font-family: Balsamiq Sans !important;
  font-size: 15px;
  color: #000;
}
.ined {
  border-radius: 30px;
  border-width: 0px;
  background-color: #ebebeb;
}
.ined::placeholder {
  font-family: Balsamiq Sans !important;
  font-size: 15px;
}
/*masthead*/
.camas {
  background-color: transparent;
  border-width: 0px;
  text-align: center;
  font-family: Balsamiq Sans;
  color: white;
}

.pmas {
  margin: 0;
  font-size: 10px;
}
/*banner*/
.banner img {
  width: 100%;
  height: 100%;
  object-fit: normal;
}

/*tentang literasi*/
.tencon {
  position: relative;
}
.titleten {
  position: absolute;
  top: 80px;
  left: 10px;
  padding: 0px 13px;
}
.btnten {
  font-family: Balsamiq Sans;
  height: 56px;
  margin: 10px 0px;
  border-width: 2px;
  border-color: white;
  border-radius: 36px;
  background-color: #ffaea5;
  color: #001c5f;
}

.tentangliterasi p.tulisantentang {
  font-size: 22px;
  font-family: Balsamiq Sans;
}

/*rakbuku*/
.rakbuku {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.rakbuku .titlerakbuku {
  font-family: "Fredoka One", cursive;
}
.rakbuku .titlerakbuku .subtitle {
  font-family: "Balsamiq Sans", cursive;
}

.bgrakbuku {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.rakbuku .rakcard {
  border: 1px transparent;
  background-color: transparent;
  width: 150px;
}
.rakbuku .gambarcard {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: -2px 0 #e9e8eb, 0 2px #e9e8eb, 2px 0 #e9e8eb, 0 -2px #e9e8eb;
}
.rakbuku .judulbuku {
  font-size: 18px;
}

/*arsapedia*/

.arscon {
  background-color: white;
  border-radius: 40px;
  padding: 40px;
  margin-bottom: 268px;
}
.bgcars {
  border-width: 0px;
}

.icn:hover {
  animation: shake 1.5s;
  animation-iteration-count: 50px;
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* @media only screen and (min-width:360px)  and (max-width : 1200px)
  {
  
    .icn
    {
      width: 50vw;
      display:inline-block;
      justify-content: center!important;
      
    }
  
  }   */

.bgimars {
  background-color: #d4f3f5;
  border-width: 0px;
  border-radius: 40px;
  width: 300px;
}

.tuars {
  font-family: Balsamiq Sans;
  font-size: 12px;
  margin: 0px;
  text-align: center;
  padding-top: 8px;
}
.btnarsp {
  font-family: Balsamiq Sans;
  height: 56px;
  margin: 10px 0px;
  border-width: 2px;
  border-color: white;
  border-radius: 36px;
  background-color: #ffaea5;
  color: #001c5f;
}

/* mobil */
.container-chart {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

/*printable*/
.printtitle {
  background-color: white;
  border-radius: 40px;
}
.printtitle2 {
  background-color: white;
  border-radius: 40px;
  padding: 26px;
}
.htitle {
  margin: 0px;
  padding-left: 25px;
  padding-top: 10px;
}
.ptitle {
  font-family: Balsamiq Sans;
  margin: 0px;
  padding-bottom: 10px;
  padding-left: 25px;
}
.btnprint {
  font-family: Balsamiq Sans;
  height: 56px;
  margin: 10px 0px;
  border-width: 2px;
  border-color: white;
  border-radius: 36px;
  background-color: #ffaea5;
  color: #001c5f;
}
.printkun {
  background-color: #ffffb5;
  padding: 40px;
  border-radius: 35px;
}
.caprint {
  background-color: transparent;
  border-width: 0px;
  text-align: center;
}
.pprint {
  font-family: Balsamiq Sans;
  font-size: 12px;
  margin: 0px;
  padding: 10px;
}
.conprint {
  position: relative;
  padding-bottom: 100px;
}
.dayang {
  position: absolute;
  top: -64px;
}
/*event*/
.subtitleevent {
  font-family: Balsamiq Sans;
}
.carbod {
  background: white;
  border-radius: 0px 0px 15px 15px;
}
.pevent {
  margin: 0px;
}
/*mitra*/
.titlermitra {
  font-family: "Fredoka One", cursive;
  text-align: center;
}

.imgbulet .imgmitra {
  padding: 30px 25px;
}

.btnmitra button.selengkapnya {
  width: 207px;
  height: 56px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 25px 30.7px 65px 0px;
  padding: 16px 32px;
  border-radius: 36px;
  background-color: #3e8091;
  color: white;
}

/*footer*/
.bgfooter {
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

/*rakbuku list*/
.rakbuku_list .ig {
  border: none;
}

.rakbuku_list .gbr-ig {
  border-radius: 25px;
}

.search-list {
  width: 100%;
}

.search-list .form_searchlist {
  width: 93%;
  border-radius: 25px;
}

/*button search*/
button.btn_searchlist {
  color: white;
  background-color: #afb9c5;
  border-radius: 14px;
  padding: 0px 30px;
  margin-left: -160px;
  font-size: 22px;
  border: none;
}

.rakcard {
  border: 1px transparent;
  background-color: transparent;
}
.gambarcard {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: -2px 0 #e9e8eb, 0 2px #e9e8eb, 2px 0 #e9e8eb, 0 -2px #e9e8eb;
}
.judulbuku {
  font-size: 20px;
  margin: 10px 0;
  text-align: center;
}

.filter {
  background-color: white;
  border-radius: 25px;
  box-shadow: 1px 3px 1px 1px gray;
  font-family: "Balsamiq Sans", cursive;
}

.filter p {
  padding: 10px 20px;
}
.genre {
  background-color: white;
  border-radius: 25px;
  box-shadow: 1px 3px 1px 1px gray;
  font-family: "Balsamiq Sans", cursive;
}

.genre p {
  margin: 0px;
  padding: 10px 20px;
}

.pilihgenre {
  padding: 5px 20px;
}

.bahasa {
  background-color: white;
  border-radius: 25px;
  box-shadow: 1px 3px 1px 1px gray;
  font-family: "Balsamiq Sans", cursive;
}

.bahasa p {
  margin: 0px;
  padding: 10px 20px;
}

/*rakbuku preview*/

.judul_buku {
  font-family: Fredoka One !important;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}
.nama_pengarang {
  font-family: Balsamiq Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.deskripsi {
  font-family: Balsamiq Sans;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.btnrakbaca .selengkapnya {
  height: 56px;
  margin: 10px;
  border-radius: 36px;
  background-color: #cda63c;
  color: black;
  float: left;
  font-family: Balsamiq Sans;
}

.btnrakbaca .selengkapnya:hover {
  background-color: #abdee6;
}

.btnrakdownload .selengkapnya {
  height: 56px;
  margin: 10px;
  border-radius: 36px;
  background-color: #cda63c;
  color: black;
  float: right;
  font-family: Balsamiq Sans;
}

.btnrakdownload .selengkapnya:hover {
  background-color: #abdee6;
}

/*rak detail*/
.btnrakdetailkiri .kembali {
  height: 56px;
  margin: 10px;
  border-radius: 36px;
  background-color: #cda63c;
  color: black;
  float: left;
  font-family: Balsamiq Sans;
}

.btnrakdetailkiri .kembali:hover {
  background-color: #abdee6;
}

.btnrakdetailkanan .download {
  height: 56px;
  margin: 10px;
  border-radius: 36px;
  background-color: #cda63c;
  color: black;
  float: right;
  font-family: Balsamiq Sans;
}

.btnrakdetailkanan .download:hover {
  background-color: #abdee6;
}

/*video list*/
.bgvideo .card {
  border: 1px transparent;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.bgvideo .card p {
  border: 1px transparent;
  font-family: "Balsamiq Sans", cursive;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

.bgvideo .card-body {
  padding: 0rem;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: -2px 0 #e9e8eb, 0 2px #e9e8eb, 2px 0 #e9e8eb;
}
.bgvideo .card-title {
  margin-bottom: 1.75rem;
}

.gambarvideo {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: -2px 0 #e9e8eb, 2px 0 #e9e8eb, 0 -2px #e9e8eb;
}

/*galeri*/
.galericard1 {
  border: 1px transparent;
  background-color: transparent;
}
.gambargaleri {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /*box-shadow:-2px 0 #e9e8eb, 0 2px #e9e8eb, 2px 0 #e9e8eb, 0 -2px #e9e8eb;*/
}
.rakbuku .judulbuku {
  font-size: 18px;
}

/*galerilist*/
.galeri .selengkapnya {
  border-radius: 36px;
  background-color: #3e8091;
  color: white;
}
.galericard2 {
  border: 1px transparent;
  border-radius: 15px;
  background-color: transparent;
  box-shadow: 0.5px 5px 4px 1px #dfdfdf;
}

.galericard2 img {
  border-radius: 15px 15px 0 0;
}
.galericard2 p {
  font-family: Balsamiq Sans;
  font-size: 18px;
}

/*tanggal di galeri*/
.galericard2 {
  position: relative;
}
#tgl {
  position: absolute;
  top: 13px;
  left: 185px;
  padding: 0px 13px;
  background-color: #ffaea5;
  border: 1px solid #ffaea5;
  border-radius: 10px;
  font-family: Balsamiq Sans;
  font-size: 18px;
  color: black;
}

/*calendar*/
.caltgl1 {
  font-size: 20px;
  margin: 0px;
  padding: 20px;
  background-color: #fcedca;
  color: #3e8091;
  font-family: Balsamiq Sans;
  font-weight: bold;
  border-radius: 0px 10px 0px 0px;
}
.caltgl2 {
  font-size: 20px;
  margin: 0px;
  padding: 20px;
  background-color: #d6f3f1;
  color: #3e8091;
  font-family: Balsamiq Sans;
  font-weight: bold;
  border-radius: 0px 0px 10px 0px;
}
.calimg {
  border-radius: 10px;
}
.calcard {
  border-radius: 10px;
  border: none;
  box-shadow: 0px 3px 0px 0px #dfdfdf;
  border: 1px transparent;
}

/*printable*/
.judulpr {
  background-color: transparent;
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .judulpr {
    color: white;
    font-size: 24px;
  }
}

.bgpr {
  background-color: #cda63c;
  border-radius: 30px;
  padding: 10px 5px;
  font-family: Balsamiq Sans;
  text-align: center;
}

.bgpr:hover {
  background-color: #abdee6;
  color: black !important;
}

@media (max-width: 768px) {
  .bgpr {
    background-color: #001c5f;
    border-radius: 30px;
    padding: 10px 5px;
    font-family: Balsamiq Sans;
    text-align: center;
    color: white !important;
  }
}

@media (max-width: 768px) {
  .bgpr:hover {
    background-color: #abdee6;
    color: black !important;
  }
}

/*arsapedia list*/
.arsbg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.aars:hover {
  text-decoration: none;
}
.tars {
  padding: 0px 10px;
  margin: 10px 0px;
  border-radius: 30px;
}
.tpri {
  background-color: #55cd68;
  border: 3px solid #258a35;
}
.trak {
  background-color: #55cd68;
  border: 3px solid #258a35;
}
.tvid {
  background-color: #abdee6;
  border: 3px solid #6298a1;
}
.tkar {
  background-color: #cbaacb;
  border: 3px solid #9c7a9c;
}
.tinf {
  background-color: #ffaea5;
  border: 3px solid #ae544a;
}
.tpod {
  background-color: #ffffb5;
  border: 3px solid #b9b94e;
}

/*printable mewarnai dan aktifitas*/
.search {
  border-radius: 20px;
  width: 100%;
}
.btnsearch {
  background-color: #cda63c;
  border-radius: 20px;
  font-size: 19px;
  padding: 4px 14px;
}
.cardprint {
  margin: auto;
  width: 95%;
  text-align: center;
  border-radius: 10px;
  background-color: #eaeaea;
  box-shadow: 0px 4px 10px 3px rgba(150, 147, 142, 0.61);
}

.cardprint:hover {
  box-shadow: 0px 4px 10px 3px rgba(224, 159, 62, 0.43);
}

.ppr {
  font-size: 15px;
}
.imgpr {
  /*padding:5px;*/
  border-radius: 10px;
}
.borderim {
  background-color: white;
  border-radius: 20px;
  padding: 5px;
}