* {
  box-sizing: border-box;
}
html { 
  background: url(../images/silat-main.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:#000;
}
dt {text-decoration: underline;font-weight: bold;margin-bottom:1em}
dd {margin-bottom:1em}
img {max-width: 100%;height: auto}
.underline {text-decoration: underline}
.italic {font-style: italic}
.bold {font-weight: bold}
.center {text-align:center}
.unselectable {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
     }
.buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.2em;
}
.buttons_about, .buttons_classes, .buttons_keilmuan {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.2em;
}
.buttons a {
    text-decoration: none;
    color: white;
     font-weight: bold;
}
.button {
padding:8px;
text-decoration: none;
background-color: #0099ff;
border-radius: 5px;
color: white;
border: 1px solid white;
}
.sm_links{
    background-color: rgba(102,102,102,0.3);
    border-radius: 5px;
    border: 1px solid #0099ff;                                               
    display: flex;
    justify-content: space-evenly;
    margin: 3% auto 0 auto;
    width: 60%;
}
.sm_links img{
    max-width: 80%;
    padding: 5px 0 0 14px;
}
.main {
  font-size: 1.5em;
  text-align: center;
  width: 100%;
  padding: 20px;
  color: white
}
.main h1{
    margin-top: 0;
}
.index_about{
 position: sticky;
 top: 10px;
 background-image: url(../images/PGB-logo.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: left;
 border-radius: 5px;
 background-color: rgba(102,102,102,0.7);
 width: 100%;
 padding: 36px;
 color: white;
}
.index_about a {
    text-decoration: none;
    color:white;
    font-weight: bold;
}
.main_about{
    background-color: rgba(250, 250, 250, 0.8);
    margin-top:20px;
    border-radius: 5px;
    padding: 0 40px;
    border: 1px solid rgba(102,102,102,0.4);
}
.floating_buttons {
  background-color: transparent;
  border-radius: 5px;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  padding: 15px;
  margin-top: 0;
  text-align: center;
  font-weight: bold;
}
.menu_bar {
  position: sticky;
  top: 10px;
  background-image: url(../images/PGB-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  background-color:rgba(102, 102, 102, 0.6);
  border-radius: 5px;
  padding:36px;
  text-align:center;
  color: red;
}
.pics_grid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding:10px;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
}
.grid_item {
    padding:10px;
    text-align: center;
    font-weight: bold;
}
.grid_item img{
    border: 1px solid lightgrey;
    padding: 4px;
}
.footer {
  font-weight: bold;
  width: 100%;
  background-color:transparent;
  text-align:center;
  padding:10px;
  position:fixed;
  bottom: 0;
  color: white;
}
.main_classes{
          text-align: center;
          color: white;
      }
.main_classes h2{
    background-color: rgba(102,102,102,0.3);
    border-radius: 12px; 
}
.logos{text-align:center}
.logos img{border: 1px solid lightgrey; padding: 4px}
#home_link{
    display:block;
    position:fixed;
    top:3px;
    left:3px;
    width:80px;
    height:80px;
    z-index:300
}
#suhu_about, #guru_about{
    float: left;
    width:20%;
    padding:10px;
}
#table_jadwal{
    margin:0 auto;
}
#table_jadwal th{
    border: 1px solid black;
    color:black;
    background-color: white;
    padding: 0 4px;
}
#table_jadwal td{
    border: 1px solid black;
    background-color: white;
    text-align: center;
    color: black;
    padding: 4px;
}
#table_jadwal td.border_top{
          border-top:4px solid #0099ff;
      }
#contact_info{
    margin:0 auto;
    padding: 6px;
    background-color: rgba(102,102,102,0.3);
    border: 1px solid lightgrey;
    border-radius: 5px;
    width: 62%;
}
#sejarah, #history, #mukadimah, #silat, #taokung, #cabang, #logo, #kunjungan, #kielin, #kakilangit, #pgbpeduli, #bagan {
    height: 1px;
    margin-bottom: 10%;
}
#sejarah_text, #history_text, #mukadimah_text, #silat_text, #taokung_text, #cabang_text, #logo_text, #kunjungan_text, #kielin_text, #kakilangit_text, #pgbpeduli_text, #bagan_text {
    font-size:2em;
    text-align: center;
}
@media only screen and (max-width: 850px) {
  .pics_grid{
      grid-template-columns: auto;
      max-width: 100%;
  }
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .floating_buttons {
    width: 100%;
  }
  .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 5px;
      margin-top:20%;
      font-size: 1em;
  }
  .buttons_classes{
    display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 5px;
      margin-top:20%;
      font-size: 1em;  
  }
  .buttons_about {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 5px;
      margin-top:20%;
      font-size: 1em; 
  }
  .buttons_keilmuan{
   display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 5px;
      margin-top:20%;
      font-size: 1em;    
  }
  .buttons a, .buttons_about a, .buttons_classes a, .buttons_keilmuan a {
    width: 100%;
    background-color: #0099ff;
    padding:5px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    border: 1px solid white;
    text-align:center;
  }
  .buttons a.off, .buttons_about a.off{
      background-color: transparent;
  }
  .menu_bar{
    background-color: transparent;
    background-size: 20%;
    background-position: center top;  
  }
   .index_about{
    position: sticky;
    top: 10px;
    background-color: transparent;
    background-size: 20%;
    background-position: center top; 
  }
  .main{
    margin-top: 20px;
    font-size: 1em;
    color: white;
    background-color: rgb(102,102,102,0.4);
  }
  .main_about{
      padding: 0 30px;
  }
  .main_classes h2{
    margin-top:0;
  }
  .pics_grid{
      grid-template-columns: auto;
      max-width: 100%;
  }
  .grid_item{
      font-weight: normal;
  }
  .floating_buttons {
        margin-top: 3%;
    }
  #home_link {
    display:block;
    position:fixed;
    top:3px;
    left:40%;
    width:80px;
    height:80px;
    z-index:300
}
  #suhu_about, #guru_about{
    float: left;
    width: 40%;
    padding: 10px;
}
#sejarah, #history, #mukadimah, #silat, #taokung, #cabang, #logo, #kunjungan, #kielin, #kakilangit, #pgbpeduli, #bagan {
    height: 1px;
    margin-bottom: 60%;
}
#mukadimah_text, #silat_text, #taokung_text, #cabang_text, #logo_text, #kunjungan_text, #kielin_text, #kakilangit_text, #pgbpeduli_text, #bagan_text {
    font-size: 1.8em;
    text-align: center;  
    }
}