@import url('https://fonts.googleapis.com/css?family=Prompt:300,400,500,600,700|PT+Sans+Narrow:400,700&display=swap');

body { padding:0;margin: 0;background: #ffffff;font-family: 'Segoe UI',Prompt !important;  color:#1d2d44!important; }

@media (min-width: 1200px){
.container {
    max-width: 1500px!important;padding: auto 20px;
}


}
@media screen and (max-width:678px){

    p { line-height: 1.2 !important;}

}
 
q { font-size: 16px;font-style: italic; border: 1px solid #eee; border-radius: 4px; padding:20px; display: block; }

a {cursor: pointer !important;}
.container a {color:#212529;}
.container a.color-white {color:#fff;}


html body .navbar-light .navbar-toggler-icon {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E) !important
}


.border-bottom-yellow { border-bottom: 1pt solid #ffcc00}
 .border-left-1 {border-left:1px solid #ccc;}
 .navbar { padding:0rem  !important; position: unset !important; }

 @media screen and (max-width:768px){

    

    .fx8 {font-size:4em;}
     
    .border-left-1 { border-left:0;}
    .fx2   { font-size:1.5em;}
    .mb-5 { margin-bottom: 20px!important;} 
    .mt-5 { margin-top: 20px!important;} 
    .my-5 { margin-top: 20px!important;margin-bottom: 20px!important;} 
    .pb-5 { padding-bottom: 20px!important;} 
    .pt-5 {  padding-top: 20px!important;} 
    .py-5 {  padding-top: 20px!important; padding-bottom: 20px!important;} 
 }

 @media screen and (max-width:468px){
    .fx8 {font-size:3em;}
     body,html{ overflow-x: hidden;}
    
    .fx2   { font-size:1.2em;}

    .masthead h1 img { width:200px;}
  
 }

 @media screen and (max-width:678px){

.social-top-nav { font-size: 0.5em; text-align: center;}
.navbar-light .navbar-brand {
  color: rgba(0,0,0,.9);
  text-align: center;
  margin: auto;
  display: block;
}
.dropdown-menu { border:0 !important;


}

.navbar { padding:0rem  !important ;}
 }


 .max-w-1000 {
  max-width:1000px;
 margin: auto;} 

 .max-w-800 {
    max-width:800px;
   margin: auto;} 
 .max-w-600 {
    max-width: 600px;
   margin: auto;} 
   .max-w-450 {
    max-width: 450px;
   margin: auto;}
 .max-w-400 {
    max-width: 400px;
   margin: auto;}
   .max-w-350 {
    max-width: 350px;
   margin: auto;}

   /*.nav-top a:link,.nav-top a:visited { color: #57c75b;}*/
   .PTSansNarrow{font-family:"PT Sans Narrow", Prompt, serif;}
   .font-style-normal {font-style: normal;}
   .color-yellow {color:#fad100}
   .color-green {color:#39b54a}
   .color-white {color:#FFF;}
    .color-grey {color: #666;}
    .color-black {color: #333;}
    .color-brown {color:#3c332f;}

    .color-brown {color:#C09886;}
    .color-lightbrown {color:#C2B3AC;}
    .color-lightblue{color:#46647b}
    .color-darkbrown {color:#76655D;}
    .color-darkblue {color:#1d2d44;}

    .color-greenEarth{ color:#607874;}
    .bg-brown {background:#C09886;}
    .bg-lightbrown {background:#C2B3AC;}
    
    .bg-darkbrown {background:#73665a;}
    .bg-lightblue{background:#46647b}
    .bg-darkblue {background:#1d2d44;}
    .bg-flesh { background-color: #f3f3f3;}
    .bg-darkflesh { background-color: #cebeb9;}

    .bg-darkblue {background-color: #1d2d44;}

    .bg-yellow{background: #fad100;color:#FFF;}
    .bg-lightgrey {background:#f4f4f4;}
    .line-height-1{ line-height: 1;}

    .font-weight-300 {font-weight:300;}
    .font-weight-400 {font-weight:400;}
    .font-weight-500 {font-weight:500;}
    .font-weight-600 {font-weight:600;}
    .font-weight-700 {font-weight:700;}
    .font-weight-800 {font-weight:800;}
    
    .fx06 { font-size:0.6em;}
    .fx075 { font-size:0.75em;}
    .fx09 { font-size:0.9em;}
    .fx1 { font-size:1em;}
    .fx16 {font-size: 16px !important;}
    .fx14 {font-size: 14px !important;}
    .fx13 {font-size: 13px !important;}
    .fx12 {font-size: 12px !important;}
    
    .fx125 { font-size:1.25em;}
    .fx15 { font-size:1.5em;}
    .fx2   { font-size:2em;}
    .fx3   { font-size:3em; line-height: 1;}
    .fx4   { font-size:4em;}
    .fx8 {font-size:8em;}
    .fx9 {font-size:9em;}
    

   .text-shadow-white { text-shadow:  0px 1px 0px rgba(255,255,255,.9);}
   .transition-35deg { transform: rotate(-35deg);}
    .transition-45deg { transform: rotate(-45deg);}

/************ nav-main-menu  str *************/
    h1.logo { font-size:0px; color:#FFF;}

    @media screen and (max-width:568px){

        h1 {font-size: 1.5rem !important;}
       a.navbar-brand  h1{font-size: 0rem !important;}
    }

    .navbar-light .navbar-toggler {
      color: rgba(0,0,0,.5);
      border-color: rgba(0,0,0,.1);
      background: #fff;border-radius: 11000px;
  }
  .navbar-toggler-icon {
    display: inline-block;
    width: 1em !important; 
    height: 1em !important;}  
    
    .navbar-toggler {
      position: absolute;
      top: 0px;
      right: 20px;
      border-radius: 100px;
      width: 30px;
      height: 30px;
      background: rgb(43, 43, 43);
      z-index: 9;
      padding: 10px;
      z-index: 1002;
      border-radius: 11000px;
      box-shadow: 0 0 4px #ccc;
      text-align: center;
      
      padding: 0px !important;}

 nav {
        font-family: 'Roboto',Prompt;text-transform: uppercase;
        font-weight: 500;letter-spacing: 0px;
    }
nav a {cursor: pointer;}

 .nav-item.active {
     
    border-radius:6px;
   -webkit-border-radius:6px;
    -moz-border-radius:6px;}
 .nav-item {padding: 3px ;}

 .navbar-light .navbar-toggler { border :0;}

 .navbar-light .navbar-toggler-icon {
    background-image: none;
}

/************ nav-main-menu  str *************/
 a,a:hover { text-decoration: none !important;}
 a img { border: 0;}



 /*nav-bar str*/




 .top-bar-kansiri { background: #1d2d44;}

 .top-bar-kansiri .list-inline-item a {font-size:11px;color:#1a1a1a;}

 .top-bar-kansiri .list-inline-item a img {margin-right: 5px;margin-bottom: 5px;}


 .spacsizing {letter-spacing :4px;}

 .text-muted {font-size: 0px;color:#808080;}


   .navbar-nav  a.nav-link {color:#36465e;font-size:14px;}

   .navbar-nav  .nav-item.active {border:1px solid #546174;border-radius: 0;}

   .navbar-nav  .nav-item.active a.nav-link  {color:#1d2e45;}

   .navbar-nav  .nav-item.active a.nav-link:hover {color:#36465e;}

   .navbar-nav   .dropdown-item {font-size: 14px; color:#36465e;}

 /*nav-bar end*/

 .dropdown-submenu {
   position: relative;
 }
 
 .dropdown-submenu a::after {
   transform: rotate(-90deg);
   position: absolute;
   right: 6px;
   top: .8em;
 }
 
 .dropdown-submenu .dropdown-menu {
   top: 0;
   left: 100%;
   margin-left: .1rem;
   margin-right: .1rem;
 }


    @media screen and (max-width:990px){

      .navbar-brand  h1 img { width: 130px !important;}
      .navbar-nav  .nav-item  a { font-size: 11px !important;}
    }

 
 .display-flex { display: flex;width: 100%;}

 .justify-content-between { justify-content: space-between;}

 .align-items-center { align-items: center;}


 /*bg */

 .bg-main-theme {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#77655d+0,c69c6d+100 */
   background: #192743; /* Old browsers */
    
   }

   /* border */

   .border-b-b1 {border-bottom: 1px solid #1d2d44!important;}


   .btn-mini { border-radius: 100px; padding: 6px 12px; display: block; font-size:12px;color: #1d2d44; margin: auto; background: #bacbda; width: fit-content; }

   .w100 { width: 100%;}
   .w50 { width: 50%;}

   @media screen and  (max-width:500px){



        .news-list strong { font-size: 12px !important; }
        .btn-mini { font-size: 10px;}

   }


   .text-spacing { letter-spacing: 3px;}


   .ratio4x3 { padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  position: relative ; width: 100%; overflow: hidden;}

  .ratio4x3 img { position: absolute !important;top: 0; left: 0; right: 0 ; bottom: 0;}


  @media screen and (max-width:568px){

      .pb-5,.py-5 {padding-bottom: 2rem !important}

  }

  .list-news{ border-bottom: 1px solid #ccc;}

  .list-news a { display: inline-block; 
                  margin-bottom: -1px;
                padding: 10px 15px;
                border:1px solid #ccc;
                
                font-size: 14px;
                background: #f3f3f3;
  
  }

  .list-news a:first-child {border-right: 0;}

  .list-news a.active { border-bottom: 1px #f3f3f3 solid  !important;}

  .img-navi {object-fit: cover; width: 100px; height: 50px;}

  @media screen and (max-width:400px){


    .img-navi {object-fit: cover; width: 50px; height: 25px;}
    .fx09 {
      font-size: 11px;
    }

  }