* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      text-decoration: none;

}

body {
      font-family: cambria;
}

.navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.4rem 7%;
      background-color: rgb(164, 56, 56);
      border-bottom: 1px solid rgb(164, 56, 56);
      box-shadow: 0px 5px 3px rgb(194, 192, 192);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
}

.navbar .navbar-logo img {
      width: 4em;
}

.navbar .navbar-logo img:hover {
      color: rgb(226, 208, 43);
      cursor: pointer;
}

.navbar .navbar-nav a {
      color: white;
      font-size: 1.4rem;
      display: inline-block;
      margin: 0 1.5rem;
      
}

.navbar .navbar-nav a:hover {
      color: rgb(226, 208, 43);
}

.navbar .navbar-nav a::after {
      content:'';
      display: block;
      padding-bottom: 0.3rem;
      border-bottom: 0.2rem solid rgb(212, 209, 209);
      transform: scaleX(0);
      transition: 0.2s;
}

.navbar .navbar-nav a:hover::after {
      transform: scaleX(0.5);
}

#hamburger-menu {
      color: white;
      display: none;
}

#hamburger-menu:hover {
      cursor: pointer;
      color:  rgb(226, 208, 43);
}


#pesan {
      color: white;
}

#pesan:hover {
      cursor: pointer;
      color:  rgb(226, 208, 43);
}

#toggle {
      display: none;
}


.halaman-utama {
     margin: 0;
     padding: o;
}

.buku-baru {
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      margin-top: 7rem;
      display: flex;
      border-radius: 0.5em;
}

.gambar img {
      width: 25em;
      padding-right: 3rem;
      border-radius: 1em;
      margin-top: 2rem;
      margin-left: 2rem;
}

.kolom {
      padding: 2rem 2rem;
}

.kolom h3 {
      font-size: 1.8rem;

}


.deskripsi  {
      font-size: 1.5rem;

}

.deskripsi a {
      background-color: rgb(164, 56, 56);
      padding: 0.5em 1em;
      color: white;
}

.deskripsi a:hover {
      background-color: gray;
      color: rgb(234, 223, 22);
}


p {
      font-size: 1.4rem;
      line-height: 2.5rem;
}


.halaman-pertama {
      margin: 0;
      padding: 0;

 }
 
.buku-baru1, .buku-baru2, .buku-baru3, .buku-baru4 {
      
       width: 60%;
       height: auto;
       right: 10rem;
       top: 20rem;
       float: right;
       margin-right: 7rem;
       margin-top: 1rem;
       display: flex;
       border-radius: 0.5em;
 }
 
 .foto img {
       width: 20em;
       padding-right: 3rem;
       border-radius: 1em;
       margin-top: 3rem;
       margin-left: 2rem;
 }
 
 .lajur {
       padding: 2rem 2rem;
 }
 
 .lajur h3 {
       font-size: 1.8rem;
 
 }
 
 
.info  {
      background-color: rgb(226, 224, 224);
       font-size: 1.5rem;
       margin-top: 8rem;
       margin-right: 7rem;
       width: 60%;
       height: 3.2rem;
       float: right;
 
 }
 
.info a {
       background-color: rgb(164, 56, 56);
       padding: 0.4em 1em;
       color: white;
 }
 
.info a:hover {
       background-color: gray;
       color: rgb(234, 223, 22);
 }
 
 
 p {
       font-size: 1.4rem;
       line-height: 2.5rem;
 }

 .kotak-galeri {
      margin: 0;
      padding: 0;

 }
 
.galeri-baru1 {
      
       width: 60%;
       height: auto;
       top: 20rem;
       float: right;
       margin-right: 5.7rem;
       margin-top: 1rem;
       display: flex;
       flex-wrap: wrap;
       border-radius: 0.5em;
       
 }
 
 .figure img {
       width: 17em;
       padding-right: 2rem;
       border-radius: 1em;
       margin-top: 3rem;
       margin-left: 0.5rem;
       align-items: center;
       object-fit: cover;
       
 }

 figure {
      
      box-shadow: 0.5rem;
      padding: 1rem;
      width: 15rem;
      height: auto;
      text-align: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      margin-top: 1rem;
      margin-left: 1rem;
      display: inline-block;
      flex: 1rem;
      object-fit: cover;
      
      
      
}

figure:hover {
      scale: 1.4;
}

figure img {
      border-radius: 5px;
}

figcaption p {
      line-height: 20px;
      font-size:  14px;

}
 
 
 
.info  {
      background-color: rgb(226, 224, 224);
       font-size: 1.5rem;
       margin-top: 8rem;
       margin-right: 7rem;
       width: 60%;
       height: 3.2rem;
       float: right;
 
 }
 
.info a {
       background-color: rgb(164, 56, 56);
       padding: 0.4em 1em;
       color: white;
 }
 
.info a:hover {
       background-color: gray;
       color: rgb(234, 223, 22);
 }
 
 
 p {
       font-size: 1.4rem;
       line-height: 2.5rem;
 }




.tombol-merah {
      background-color: rgb(164, 56, 56);
      padding: 0.5em 1em;
      color: white;
      border-radius: 1em;
}

.tombol-merah:hover {
      background-color: rgb(188, 116, 21);
      color: white;
}

.penerbitan {
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      
}

.container {
      margin: 1rem 2rem;
      padding: 2rem;
}

.penerbitan h3 {
      font-size: 1.8rem;
      text-align: center;
}

.kolom-penerbitan {
      margin-top: 7rem;
      display: flex;
}

.konten-penerbitan {
      font-size: 1.4rem;

}



.konten-penerbitan ul li {
      margin-left: 2rem;
}

.percetakan {
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      
}

.kotak {
      margin: 1rem 2rem;
      padding: 2rem;
}

.percetakan h3 {
      font-size: 1.8rem;
      text-align: center;
}

.aside {
      width: 27%;
      height: auto;
      margin-left: 7rem;
      padding-top: 9rem;
}

.sidebar1 h4 {
      font-size: 1.4rem;
      padding-left: 2rem;
}

.artikel-baru ul {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 1rem;
}

.artikel-baru ul li  {
      list-style-type: none;
      font-size: 1.4rem;
}

.artikel-baru ul li a {
      color: black;
}

.artikel-baru ul li a:hover {
      color: rgb(188, 116, 21) ;
}

.youtube {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;
}

.youtube iframe {
      width: 26em;
      height: 20em;
}

.youtube h4 {
      font-size: 1.4rem;
}

.twitter {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;

}

.twitter .twitter-timeline a {
      width: 26em;
      height: 20em;
}

.twitter h4 {
      font-size: 1.4rem;
}

.iklan {
      padding: 2em 2em;
      width: 25em;
      height: 20em;
      background-color: rgb(238, 234, 234);
      margin-top: 2rem;
      margin-left: 2rem;
      margin-bottom: 2rem;
}

.iklan h4 {
      font-size: 1.4rem;
      text-align: center;
}


.clear {
      clear: both;
}

.galeri {
      margin-top: 2rem;
}

.galeri p {
      text-align: center;
      padding-top: 1rem;
}

.galeri h3 {
      font-size: 1.8rem;
      text-align: center;
      color: rgb(164, 56, 56);
}

.galeri h3:hover {
      color: rgb(188, 116, 21);
}

.fotocover {
      display: flex ;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 7%;
}

.fotocover img {
      width: 17rem;
      height: auto;
      border-radius: 0.5rem;
}

.fotocover img:hover {
      scale: 1.3rem;
}


.fotocover p {
      font-size: 1.2rem;
      line-height: 1.5rem;
}




.pagination {
      width: 60%;
      height: auto;
      margin-left: 20rem;
}

.pagination ul {
      float: right;
      margin: 2rem 0;
     
}

.pagination ul li {
      display: inline-block;
      padding: 1rem 1rem;
 
}

.pagination ul li a {
      color: black;
      font-size: 1.7rem;
      text-align: center;
      align-items: center;
      
}

.pagination ul li a:hover {
      background-color: rgb(164, 56, 56);
      padding: 1rem 1.3rem;
      color: white;
}


.pagination1 {
      width: 60%;
      height: auto;
      margin-left: 20rem;
}

.pagination1 ul {
      float: right;
      margin: 2rem 0;
     
}

.pagination1 ul li {
      display: inline-block;
      padding: 1rem 1rem;
 
}

.pagination1 ul li a {
      color: black;
      font-size: 1.7rem;
      text-align: center;
      align-items: center;
      
}

.pagination1 ul li a:hover {
      background-color: rgb(164, 56, 56);
      padding: 1rem 1.3rem;
      color: white;
}



#contact {
      background-color: rgb(164, 56, 56);
      margin: 0;
      padding: 0;
      width: 100%;
      height: auto;
}

.kolom-footer {
      display: flex ;
      align-items: center;
      justify-content: space-between;
      padding: 2rem 7%;
}

.tandabaca p {
      color: white;
}

.tentang-tandabaca h4 {
      color: white;
      font-size: 1.4rem;
}

.tentang-tandabaca ul {
      list-style-type: none;
}

.tentang-tandabaca ul li a {
      font-size: 1.3rem;
      color: white;
}

.tentang-tandabaca ul li a:hover {
      color:  rgb(234, 220, 114);
}

.kontak h4 {
      color: white;
      font-size: 1.4rem;
      padding-top: 2.3rem;
}

.konten-ketentuan-layanan {
      font-size: 1.4rem;
}

.konten-ketentuan-layanan ul li  {
      line-height: 2.5rem;
      margin-left: 2rem;
}

.kontak p {
      color: white;
}

.copyright {
      background-color: white;
      font-size: 0.5rem;
      text-align: center;
}



.logo-partner  {
      display: flex;
      flex-wrap: wrap;
      object-fit: cover;
      
}

.logo-partner img {
      margin: 0.5em 1.5em;
}





@media screen and (max-width:1920px) {
      html {
            font-size: 100%;
      }
}

@media screen and (max-width:1366px) {
      html {
            font-size: 75%;
      }
}

@media screen and (max-width:768px) {
      html {
            font-size: 62.5%;
      }

      #hamburger-menu {
            display: inline-block;
      }

      #pesan {
            display: none;
      }

      .navbar .navbar-nav  {
            position: absolute;
            top: 100%;
            right: -100%;
            background-color: rgb(164, 56, 56);
            width: 20rem;
            height: 100vh;
            display: block;
            transition: 0.3s;
            
      }

      .navbar .navbar-nav.active {
            right: 0;

      }

      .navbar .navbar-nav a {
            display: block;
            margin: 1.1rem;
            padding: 0.5rem;
            font-size: 1.5rem;
            border-bottom: 0.1rem solid grey;
            
      }

      .navbar .navbar-nav a::after {
            display: none;
      }

      .navbar .navbar-nav a:hover {
            background-color: gray;
           
      }

      .buku-baru {
            display: block;
            width: 62.5%;
      }

      .halaman-pertama {
            display: block;
      }

      .buku-baru1, .buku-baru2, .buku-baru3, .buku-baru4 {
            display: block;
      }

      .pagination {
            width: 33%;
            text-align: center;
            margin-left: 1rem;


      }

      .penerbitan .container {
            margin-left: -2rem;
      }

      .kolom-penerbitan {
            display: block;
      }

      .percetakan .kotak {
            margin-left: -2rem;
      }

      .fotocover {
            width: 50%;
            display: grid;
            grid-template-columns: 20rem 50%;
            justify-content: center;
            align-items: center;
            margin-left: 15em;
      }

      .fotocover p {
            text-align: center;
      }



      .aside {
            display: none;
            overflow: hidden;
            width: 62.5%;
      }

      .kolom-footer {
            display: block;
            text-align: center;
      }

      .tentang-tandabaca {
            padding-top: 1.5rem;
      }

      .pagination1 {
            width: 33%;
            text-align: center;
            margin-left: 20rem;
            justify-content: center;
      }

      .pagination {
            width: 33%;
            text-align: center;
            margin-left: 20rem;
            justify-content: center;
      }

     

}


@media screen and (max-width:460px) {
      html {
            font-size: 55%;
      }


      .fotocover {
            
            display: block;
            justify-content: center;
            align-items: center;
            margin-left: 10em;
      }

      .pagination {
            width: 33%;
            text-align: center;
            margin-left: 15rem;
            justify-content: center;


      
}