/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

@font-face {
  font-family: AngsanaNew;
  src: url(https://thampirak.ac.th/wp-content/uploads/2023/01/angsa.woff);
  /*src: url(https://thampirak.ac.th/wp-content/uploads/2023/01/Angsana-New.ttf) format("woff");*/
}


html, body, .nav > li > a{
  font-family: "sarabun"!important;
}
#top-bar .header-vertical-menu__fly-out {
    opacity: 1;
    visibility: visible;
}
#top-bar .header-vertical-menu__opener.dark,
.mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-148,
.mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-147{
  display:none!important;
}
.header-bg-color {
    background-color: #1d5e92;
}
ul#menu-language-th.nav-vertical-fly-out,
ul#menu-language-en.nav-vertical-fly-out{
  display: flex;
  flex-direction: inherit!important;
}

.header-vertical-menu__fly-out #menu-language-th.nav-vertical-fly-out>li.menu-item>a,
.header-vertical-menu__fly-out #menu-language-en.nav-vertical-fly-out>li.menu-item>a{
  padding: 0px 15px;
}
#menu-language-th>.lang-item,
#menu-language-en>.lang-item{
  background: #fff;
  border: none;
}
#menu-language-th>.menu-item.lang-item-en>a,
#menu-language-en>.menu-item.lang-item-th>a{
  color: #09477B;
}
#menu-language-th>#menu-item-144-th,
#menu-language-th>.menu-item>a,
#menu-language-en>#menu-item-146-en,
#menu-language-en>.menu-item>a{
  color: #fff;
}
#menu-language-th>#menu-item-144-th,
#menu-language-en>#menu-item-146-en{
  background: #C89E48;
  border: none;
}
ul .header-vertical-menu__fly-out{
  background-color: transparent;
}
#header.header.show-on-scroll, #header .stuck .header-main {
    height: 90px!important;
}

.header-wrapper.stuck>#masthead>.flex-row a{
      padding: 0;
}
em {
    width: 30px;
    height: 1px;
    display: block;
    background: #C89E48;
    position: absolute;
    top: 50%;
}

em.right {
    right: 0;
}
em.left {
    left: 0;
}
.back-to-top.active{
    background: #c89e48;
    color: #fff;
}
@media(min-width: 979px){
  #masthead .header-inner.logo-center{
    padding: 0 6%;
    align-items: baseline;
  }
  #masthead ul.nav.nav-left>li,
  #masthead ul.nav.nav-right>li{
    margin: auto;
  }
  .nav > li > a, .nav-small.nav>li.html.html_nav_position_text,
  .header-vertical-menu__fly-out .nav-top-link,
  ul#menu-language-th>li.menu-item,
  ul#menu-language-en>li.menu-item{
    font-size: 1vw;
  }
  .nav-small.nav>li.html.header-social-icons {
    font-size: 1vw;
  }
  #top-bar.header-top {
    padding: 1% 1% 0;
    margin-bottom: -30px;
    background: transparent!important;
  }
  footer .absolute-footer{
    display:none
  }
  .header-wrapper.stuck>#masthead>.flex-row{
      display: -webkit-box;
  }
  ul>li>.header-vertical-menu__fly-out{
      width: max-content;
  }
}
@media(max-width: 980px){
  .off-canvas .nav-vertical>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 24px;
    color: #C89E48;
  }
  .off-canvas-right.mfp-ready .mfp-content{
    background-color: #fff;
  }
  #logo {
      width: 136px!important;
  }
  .header-main {
      height: 118px!important;
  }
  .header.show-on-scroll, .stuck .header-main {
      height: 70px!important;
  }
  .mobile-nav li.nav-icon.has-icon>a{
      color: #fff!important;
  }
  .mfp-content>#main-menu>.sidebar-menu>ul{
    display: inline-block;
  }
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-th,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-en,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-th,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-en{
    max-width: 49%;
    display: inline-block;
  }
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-th>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-en>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-th>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-en>a{
      width: 100%;
      display: block;
      text-align: center;
      padding-left: 0;
  }
  .mfp-content>#main-menu>.sidebar-menu{
    padding: 0;
  }
  
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-th>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-en>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-th>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-en>a{    
    width: 100%;
    display: block;
    text-align: center;
    padding-left: 0;
    background: #C89E48;
    color: #fff;
  }
  
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-144-th.current-lang>a,
  .mfp-content>#main-menu>.sidebar-menu>ul>li.menu-item-146-en.current-lang>a{ 
    color: #C89E48;
    background: #fff;
  }
  .mfp-content>#main-menu>.sidebar-menu .nav.nav-vertical,{
    background: #C89E48;
  }
  .mfp-content>#main-menu>.sidebar-menu .nav.nav-vertical li{
    background: #fff;
  }
  .off-canvas-right .mfp-content, .off-canvas-left .mfp-content {
    width: 360px;
  }
}
@media(max-width: 500px){
  #logo {
      width: 70px!important;
  }
  .header-main {
      height: 78px!important;
  }
}