* {
  font-family: "Kanit", sans-serif;
}


.btn-serach {
  background-color: #e0e0e0;
}

.bg-77 {
  background-color: #e0e0e0;
}

.search {
  margin-top: auto;
}

.bg-menu {
  background-color: #762627;
}

.card-title {
  color: #762627;
  font-size: 1.5rem;
  margin-bottom: 30px !important;
}

.menu-77 a {
  padding: 8px 25px;
  text-decoration: noen;
  color: white;
  font-size: 1.4rem;
}

.menu-77 a:hover {
  padding: 8px 25px;
  text-decoration: none;
  color: #ffff99;
  font-size: 1.4rem;
}

.slidebar {
  padding: 0px !important;
}

.carousel-caption {
  top: 15%;
  color: black !important;
}

.carousel-caption h1{
  font-size:2.5vw
}

.carousel-caption h3{
  font-size:2vw
}

.carousel-caption hr {
  margin: 3% 0px;
  border: 0.1rem solid black;
}

.item-77 a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  font-size: 1.1rem;
}

.item-77 a:hover {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.item-77 hr {
  border: 1px dashed rgba(0,0,0,.1);
}

footer {
  background-color: #3a3a3a;
}

footer .copy-right {
  color: #d94749;
  font-size: 1rem;
}

.icon-copy-right{
  font-size: 1.5rem;
}

footer i.fa {
  font-size: 2rem;
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  color: #f5f5f5;
  width: 65px;
  text-align: center;
}

footer i.fa::before {
  text-align: center !important;
}


.vl {
    border-left: 2px solid #acacac;
    height:90px;
    padding: 0px;
  }

  .text-footer{
      color:#f5f5f5;
  }

  .container{
    max-width: 95% !important;
  }

  .pagenation-center {
    margin: 0px 0px;
    text-align: center;
}

.paginations {
  display: inline-block;
}

.paginations a.active {
  background-color: #861f13;
  color: white;
  border-radius: 5px;
}

.paginations a:hover {
  background-color: #861f13;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

.paginations a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.img-slide{
  width: 100%;
}

.icon01{
  width:30px;
}

.icon02{
  width:40px;
}

.icon01-header{
  width:50px;
}

.icon02-header{
  width:60px;
}

.bg-status{
  background-color: #a2a3a3;
}

.hr-detail{
  border: 1.5px solid black;
}
.dowload i.fa{
  color: orange;
  font-size: 3.5rem;
}

.dowload span{
  font-size: 1.5rem;
}

.dowload a{
  text-decoration: none;
  color: #ac0d0d;
}

.dowload a:hover{
  text-decoration: none;
  color: #ac0d0d;
  cursor: pointer;
}

.banner-detail-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.banner-detail-caption {
  top: 3%;
  color: black !important;
}

.banner-detail-caption h1{
  font-size:2.5vw
}

.banner-detail-caption h3{
  font-size:2vw
}

.banner-detail-caption hr {
  margin: 3% 0px;
  border: 0.1rem solid black;
}

.carousel-caption a{
  text-decoration: none;
  color: black;
}
.carousel-caption a:hover{
  text-decoration: none;
  color: black;
}

.humannumber {
  color: #7a7878;
  background-color: #e0e0e0;
  padding: 10px;
  border: 1px solid #7a7878;
  width: 100%;
}

.humannumber::placeholder {
  text-align: center;
}

.submit-humannumber{
  color: #d90c0c;
  background-color: #999a9a;
  width: 100%;
  border: 1px solid #999a9a;
  padding: 10px;
}

.space-pd{
  padding: 92px;
}

.new_list{
  font-size:0.7rem;
  padding:1px 4px;
  background-color:#762627b2;
  color:white;
  border-radius:5px;
  margin: 5px;
}

.enble_list{
  font-size:0.7rem;
  padding:1px 4px;
  background-color:#257731b2;
  color:white;
  border-radius:5px;
  margin: 5px;
}

.report_list{
  font-size:0.7rem;
  padding:1px 4px;
  background-color:rgba(199, 138, 25, 0.698);
  color:white;
  border-radius:5px;
  margin: 5px;
}

.btn-submit-search{
  margin-left: 10px;
  background-color: #762627 !important;
  color: white !important;
}

.font-commend div span{
  font-family: "Kanit", sans-serif !important;
}

.blockquote p{
  font-size: 1.5vw;
}

.mx-res{
  margin-left: 3rem!important;
  margin-right: 3rem!important;
}

.textarea-wh{
  width: 70% !important;
  height: 100px !important;
}

@media only screen and (max-width: 960px){
  .space-pd{
    padding: 71px; 
  }
}


@media only screen and (max-width: 720px){
  .space-pd{
    padding: 71px;
  }

  .btn-serach{
    width: 90%;
  }

  .search{
    margin-top: 15px;
  }

  .vl{
    display: none;
  }

  .pl-5{
    padding-left: none !important;
  }

.thumbnail {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  } 

  .carousel-caption {
    top: 8%;
  }

  .carousel-caption h1{
    font-size:5.5vw
  }

  .carousel-caption h3{
    font-size:4vw
  }

  .icon01{
    width:20px;
  }

  .icon02{
    width:30px;
  }

  .card-title{
    margin-top: 10px;
    font-size: 1.4rem;
  }

  .container-bergurman {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }

  .menubar  {
    display: none;
  }

  .navbar a{
    text-align: center;
    width: 100%;
    text-decoration: none;
  }

  .parent-berger{
    width: 100%;
    color: white;
  }

  .bergerman{
    display: none;
  }
}

@media only screen and (max-width: 480px){
  .mx-res{
    margin-left: 0.5rem!important;
    margin-right: 0.5rem!important;
  }

  .blockquote p{
    font-size: 3.7vw;
  }

  .dowload{
    text-align: center;
  }

  .btn-serach{
    width: 90%;
  }

  .search{
    margin-top: 15px;
  }

  .vl{
    display: none;
  }

  .pl-5{
    padding-left: none !important;
  }

.thumbnail {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  } 

  .carousel-caption {
    top: 8%;
  }

  .carousel-caption h1{
    font-size:5.5vw
  }

  .carousel-caption h3{
    font-size:4vw
  }

  .banner-detail .thumbnail {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }


  .banner-detail .thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    } 

  .banner-detail-caption {
    top: 13%;
  }

  .banner-detail-caption h1{
    font-size:5.5vw
  }

  .banner-detail-caption h3{
    font-size:4vw
  }

  .icon01{
    width:20px;
  }

  .icon02{
    width:30px;
  }

  .card-title{
    margin-top: 10px;
    font-size: 1.4rem;
  }

  .container-bergurman {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }

  .menubar  {
    display: none;
  }

  .navbar a{
    text-align: center;
    width: 100%;
    text-decoration: none;
  }

  .parent-berger{
    width: 100%;
    color: white;
  }

  .bergerman{
    display: none;
  }

  .space-pd{
    padding: 59px;
  }
}