body{ margin: 0; padding: 0; font:normal medium sans-serif; background: #9A0707; color:#333; }

h1,h2,h3,h4,h5{ margin-top: 0; }
p{ line-height: 150%; }
footer{ margin: 30px auto; text-align: center; font: normal 0.8em sans-serif; color: #FFF; }
*{ box-sizing: padding-box; }
a:link, a:hover, a:active, a:visited { color: inherit; }

.link-block{ text-decoration:none; }

.top-nav{ display:grid; grid-template-columns:repeat(2,1fr); background: #9A0707; padding: 0 20px; }
.top-nav .top-logo{ padding: 7px 0; }
.top-nav .top-menu{ text-align:right; }
.top-nav .top-menu a{ display: inline-block; padding: 15px; color: #FEDCDC; text-decoration: none; 
	text-align:center; transition: 0.5s; text-align: center; }
.top-nav .top-menu a:hover{ background: #7B0606; color: #FFF;}
.top-nav .top-menu a span{ display: block; }

.wrapper{ background: #FFF; overflow: auto;  }
.backwrap{ 
   background-image: url('../images/back-bottom.jpg'); 
   background-size: 100%; 
   background-repeat: no-repeat; 
   background-position: center bottom;
}

/* content home */
.content-slider{ width: 100%; margin: auto; }

.ctn-full{ display: block; width: 90%; margin: 30px auto;  }
.list-full{ display: grid; grid-template-columns: 1fr 4fr; grid-gap: 20px; }
.list-full .list-img-full img{ max-width: 100% }
.list-full .list-ctn-full a{ display: none; }

.ctn-brs{display: grid; grid-template-columns: repeat(2,1fr); width: 90%; margin: 30px auto;  grid-gap: 20px;  }
.list-brs{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }
.list-brs .list-img-brs img{ max-width: 100% }
.list-brs .list-ctn-brs{ width: 100% }

.ctn-klm {display: grid; width: 90%; margin: 30px auto; grid-template-columns: repeat(4,1fr); grid-gap: 20px;  }
.list-klm .list-img-klm { width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; height: 0; }
.list-klm .list-img-klm img{ width: 100%; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
.list-klm .list-ctn-klm{ text-align: center; }
.list-klm .list-ctn-klm h2{ font: bold 1.2em sans-serif; }

.ctn-gal {display: grid; width: 90%; margin: 30px auto; grid-template-columns: repeat(4,1fr); grid-gap: 20px;  }
.list-gal .list-img-gal { width: 100%; padding-bottom: 100%; background: #FFF; position: relative; overflow: hidden; height: 0;}
.list-gal .list-img-gal img{ width: 100%; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
.list-gal .list-ctn-gal { text-align: center; }
.list-gal .list-ctn-gal h2{ font: bold 1em sans-serif; }
.list-gal .list-ctn-gal p{ display: none; }
.list-gal .list-ctn-gal a{ display: none; }

.ctn-header{ margin: 0; margin-bottom: 20px; grid-column: 1/-1; color: #999; } 

/* content page */
.content{
   display: grid;
   grid-template-columns: auto 300px;
   width : 90%;
   margin : 20px auto;
   grid-gap: 20px;
}
.head-ctn{
   grid-column: 1/-1;
   font : bold 1.5em tahoma, verdana;
   background : linear-gradient(#E6F1FC,#D0E1F1);
   padding: 10px 20px;  
   border-bottom: solid 2px #719AC8;  
}
.main-ctn{
   grid-column : 1/2;
   border:solid 1px #DDD;
   border-radius: 5px;
   padding: 20px;
   background:#FFF;
}
.side-ctn{
	grid-column : 2/-1;
}
.full-ctn{
	grid-column: 1/-1;
}

.list-side{ margin: 0; padding: 0; list-style: none; border: solid 1px #DDD; border-radius: 5px; margin-bottom:20px; background:#FFF;  }
.list-side li{ list-style: none; border-bottom: solid 1px #DDD; }
.list-side li:last-child{ border-bottom: none; } 
.list-side .list-head{ list-style: none; font: bold 1.2em sans-serif; background: linear-gradient(#EFEFEF,#DDD); color: #333; }
.list-side li a{ display: block; text-decoration: none; padding: 10px 15px;  }
.list-side li a:hover{ background: #FFEDED;  }

.tampil-baris{ display: grid; grid-template-columns: 30% 70%; grid-gap: 20px;  border-bottom: dashed 1px #F2A1A1; padding: 15px; }
.tampil-baris .tampil-img img{ width: 100%;  }

.tampil-detail h1,h2{ margin: 10px 0;  }
.tampil-detail .tampil-img{ padding: 10px 0; background: #DDD; margin: 0 -20px; text-align:center; margin-bottom: 20px;  }
.tampil-detail .tampil-img img{ max-width: 100%; max-height: 100%; }

.tampil-kolom{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap:10px; }
.tampil-kolom > div{ background: #EFEFEF; padding: 20px; border-radius: 7px; }
.tampil-kolom .tampil-ctn h2{ font: bold 1.2em sans-serif; margin: 10px 0;  }
.tampil-kolom .tampil-img { width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; height: 0;}
.tampil-kolom .tampil-img img{ width: 100%; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }

.tampil-galeri{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap:10px; }
.tampil-galeri > div{ background: #EFEFEF; padding: 20px; border-radius: 7px; text-align: center; }
.tampil-galeri .tampil-ctn h2{ font: bold 1em sans-serif; margin: 10px 0;  }
/*.tampil-galeri .tampil-img img{ width: 100%; }*/
.tampil-galeri .tampil-img { width: 100%; padding-bottom: 100%; background:#FFF; position: relative; overflow: hidden; height: 0;}
.tampil-galeri .tampil-img img{ width: 90%; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }

.tampil-full{ display: grid; grid-template-columns: 250px auto; grid-gap:20px; }
.tampil-full .tampil-img img{ width: 100%; }
.tampil-full .tampil-ctn{ border: solid 1px #DDD; padding: 15px; background: #FFF; }

.paralak{
   display: block;
   background: #B42E2E;
   background-image: url('../images/ngecor.jpg'); 
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   padding: 30px 0;
   color: #EEE;
}

.paralak a{ color: #333; }

/* Baca selanjutnya */
.read-more{ 
   display: inline-block; padding: 5px 10px; 
   border:solid 1px #AAA; font: normal 0.9em sans-serif;
   border-radius: 5px; text-decoration:none; color: #333; 
   transition: 0.5s; background: #FFF;  }
.read-more:hover{ color: red; border-color: red; background:#FFEDED; }  

/* Tambahan */
.clear {  clear: both; }
.back-color-light-red{ background:#FFEDED; }

/* Small devices (tablets) ========================== */
@media all and (max-width: 990px)
{
   .top-nav {display:grid; grid-template-columns:350px auto; }
   .top-nav .top-logo img{ width: 100%; margin-top: 12px; }

   .list-brs{display: grid; grid-template-columns:1fr 2fr; }
   .content{  grid-template-columns: auto 200px; }

   .list-side li a{ font-size: 0.9em ; padding: 10px;  }

   .tampil-baris .tampil-ctn h2{ font-size: 1.2em; }
   .tampil-baris .tampil-ctn h3{ font-size: 1.1em; }
   .tampil-baris .tampil-ctn p{ font-size: 0.9em; }

   .tampil-kolom .tampil-ctn h2{ font-size: 1.2em; }
   .tampil-kolom .tampil-ctn h3{ font-size: 1.1em; }
   .tampil-kolom .tampil-ctn p{ font-size: 0.9em; }  

   .tampil-kolom{ grid-template-columns: repeat(2,1fr); }
   .tampil-galeri{ grid-template-columns: repeat(4,1fr); }
}

@media all and (max-width: 800px)
{
   .top-nav .top-menu a{ padding: 10px; color: }
   .ctn-brs{ grid-template-columns:1fr; }
   .ctn-klm {display: grid; grid-template-columns: repeat(3,1fr);}

   .main-ctn{ grid-column: 1/-1; }
   .side-ctn{ grid-column: 1/-1; }
   .tampil-galeri{ grid-template-columns: repeat(3,1fr); }
}

@media all and (max-width: 765px)
{
   .top-nav .top-logo{ text-align:center; }
   .top-nav .top-logo img{ width: inherit; }
   .top-nav .top-logo{ text-align:center; }
   .top-nav .top-menu{ text-align:center; }
   .top-nav{ grid-template-columns:1fr;}
   .ctn-klm {display: grid; grid-template-columns: repeat(2,1fr);}
   .ctn-gal {display: grid; grid-template-columns: repeat(2,1fr);}
   .tampil-galeri{ grid-template-columns: repeat(2,1fr); }
   .tampil-full{ grid-template-columns: 1fr; }

}

@media all and (max-width: 450px)
{
   .top-nav .top-logo img{ width: 90%; }
}