body {
  font-family: 'Sarabun', serif;
  color: rgb(0, 0, 0);
}
/* รูปแบบตัว อักษร */
.box-index {
  border: 4px solid #000000;
  width: 250px;
}
.img-style {
  width: 100%;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  padding: 10px;
}
/* รูปภาพ กรอบ เงา*/
.div-container {
  text-align: center;
  padding: 10px 20px;
  background-color: #4B9682;
}
.book {
  background: #4B9682;
}
/* พื้นหลังหนังสือ */
.cover {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: all .6s;
}
/* หน้าปก */
.book:hover .cover {
  transform: rotateY(-180deg);
}
/* หน้าปกเปิด */
.e-pic {
	  backface-visibility:hidden;
	  font-size:32px;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	}
  /* หน้าปกเปดหลังปก */
.content {
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
/* ตัวหนังสือ */

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #4B9682;
  text-align: center;
  color: #FFFFFF;
  padding: 2px
}
/* ฟุตเตอร์ */
.form-login {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 30px;
}
.bg_row{
  background-image: url("../img/bg.jpg");
   background-size: 100% 100%, auto;
}
.heade_row{
  background-image: url("../img/head.jpg");
  background-size: 100% 100%, auto;
  height: 2.5rem;
}
.image{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 1);
}
@media (max-width:767px) {
  .hidden-xs {
    display: none !important
  }
}
.visible-lg, .visible-md, .visible-sm, .visible-xs {
  display: none !important
}

.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block {
  display: none !important
}

@media (max-width:767px) {
  .visible-xs {
    display: block !important
  }

  table.visible-xs {
    display: table !important
  }

  tr.visible-xs {
    display: table-row !important
  }

  td.visible-xs, th.visible-xs {
    display: table-cell !important
  }
}

@media (max-width:767px) {
  .visible-xs-block {
    display: block !important
  }
}

@media (max-width:767px) {
  .visible-xs-inline {
    display: inline !important
  }
}

@media (max-width:767px) {
  .visible-xs-inline-block {
    display: inline-block !important
  }
}
.external-event {
  padding: 5px 10px;
  /* font-weight: bold; */
  margin-bottom: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  cursor: pointer;
}

.external-event:hover {
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.2)
}