html {scroll-behavior: smooth; font-size: 100%;}
body {background-color: unset;}
h1.text-highlight {font-size: 1.5rem; font-weight: 500;}
img {width: 100%; height: auto;}

.home-followus {display: none!important;}

#wrapper a {color: #FFF;}
#wrapper a:hover {color: #ccc; text-decoration: none;}
#wrapper a:active {color: yellow;}

/* Text Align */
.text-c {text-align: center;}
.text-l {text-align: left;}
.text-r {text-align: right}
.text-j {text-align: justify;}

/* Text Color */
.text-whitesmoke {color: whitesmoke}
.text-dark {color: rgba(255, 235, 59, 0.432)}

/* Margins g(global) - l(left) - r(right) - t(top) - b(bottom) */
.margin-g {margin: 15px;}
.margin-g-sm {margin: 10px;}
.margin-g-md {margin: 20px;}
.margin-g-lg {margin: 30px;}
.margin-l {margin-left: 15px;}
.margin-l-sm {margin-left: 10px;}
.margin-l-md {margin-left: 20px;}
.margin-l-lg {margin-left: 30px;}
.margin-r {margin-right: 15px;}
.margin-r-sm {margin-right: 10px;}
.margin-r-md {margin-right: 20px;}
.margin-r-lg {margin-right: 30px;}
.margin-t {margin-top: 15px;}
.margin-t-sm {margin-top: 10px;}
.margin-t-md {margin-top: 20px;}
.margin-t-lg {margin-top: 30px;}
.margin-b {margin-bottom: 15px;}
.margin-b-sm {margin-bottom: 10px;}
.margin-b-md {margin-bottom: 20px;}
.margin-b-lg {margin-bottom: 30px;}

figure.thumb {display: block;}
figure {margin: 0;}

.frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.zoomin img {
  width: 100%;
  height: 100%
   -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.zoomin img:hover {
  -moz-transform: scale(1.025);
  -webkit-transform: scale(1.025);
  transform: scale(1.025);
}

@keyframes slideInFromTop {
    0% {transform: translateY(-30%);}
  100% {transform: translateY(0);}
}
@keyframes slideInFromBottom {
    0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
}

.shadow-box {
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.65);
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.65);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.65);
}

.enter-site {width:75%; margin: 0 auto; max-width: 220px;}
.enter-site a,
footer .enter-site a {cursor: pointer;}
footer .enter-site {max-width: 125px;}


  html {background-color: #e8e8e8;}
  .index-block-info .entry-title h2::before {
  content: "||"; color: #001358; padding-right:10px; margin-left: -12px; letter-spacing: -1.25px;
  }
  .index-block-info .entry-title h5::before {padding-left: 15px;}
  
  #tss-content-block,
  #tss-content-single-block,
  #tss-content-index-block {margin-top: -4em; position: relative;}

  #tss-content-index-block .index-block-info {background-color: unset;}

  .embed-block {margin-bottom: 1em;}

  .header-container {
    position: absolute;
    top: 8em;
    width: 100%;
    max-width: 1140px;
  }
  .header-container div:first-child {text-align: left;}
  .header-container div:nth-child(2) {text-align: center;}
  .header-container div:last-child {text-align: right;}
  
  .header-container .logo-tsd-header {width: 100%; max-width: 165px; float: left;}
  .header-container .top-widget {float: right; margin: 25px 30px 0 0;}

  .text-highlight-header {text-align: center; color: #FFF; margin: 2em 0 4em;}
  .text-highlight-header h2 {font-size: 44px; font-weight: 500; font-family: 'Kanit', sans-serif;}
  .text-highlight-header h3 {font-size: 24px; font-weight: 100; font-family: 'Kanit', sans-serif;}

  footer {padding: 1em 0 2em;}
  .footer-container {
    display: grid;
    grid-template-columns: 150px auto 150px;
    align-items: center;
    justify-items: center;
  }
  .footer-container div:first-child {text-align: left;}
  .footer-container div:nth-child(2) {text-align: center;}
  .footer-container div:last-child {text-align: left;}

  .logo-tss-footer {width: 200px;}




.youtube-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mobile-search {
    display: none;
    text-align: center;
}
.mobile-search {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    padding-top: 15vh;
    background-color: rgba(0,0,0,.9);
}
.closebtn-search {
    position: absolute;
    top: 0;
    right: 0;
    padding: 22px 22px 0 0;
    font-size: 36px;
    cursor: pointer;
    z-index: 11;
    color: #818181!important;
    transition: 0.3s;
}

#searchform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 165px;
    height: 25px;
    margin-block-end: unset;
}
.search-form {
    background: #EEE;
    float: right;
    border-radius: 3px;
}
.search-form .form-control {
    display: inline-block;
    vertical-align: top;
    width: -webkit-fill-available;
    /*border: none;*/
    height: 25px;
    background: none;
    padding: 0 10px;
    -webkit-appearance: none;
    font-size: 12px;
}
.search-form .btn {
    background: url('https://thestandard.co/wp-content/themes/thestandard.v3/assets/img/search-icon-btn.png') center center no-repeat;
    background-size: 70%;
    display: inline-block;
    vertical-align: top;
    height: 25px;
    width: 25px;
    border: none;
    margin-left: -30px;
}

.sidenav a {font-weight: 300!important; text-align: right; text-transform: uppercase;}

#nav-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 30px 20px 0 0;
    transition: margin-left .5s;
}


   @keyframes moveTopToBottom {
      /*0% {-webkit-transform: translateY(-100%);}*/
      0% {-webkit-transform: translateY(0%);}
      100% {-webkit-transform: translateY(0%);}
   }
   @keyframes moveBottomToTop {
      0% {-webkit-transform: translateY(100%);}
      100% {-webkit-transform: translateY(0%);}
   }

   @keyframes foo {
      from {
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
      }
      to {
         -webkit-transform: scale(1.05);
         -moz-transform: scale(1.05);
         -o-transform: scale(1.05);
         -ms-transform: scale(1.05);
         transform: scale(1.05);
      }
   }
   .scale-loop {
      animation: foo 1400ms ease infinite alternate;
      -webkit-animation: foo 1400ms ease infinite alternate;
      -moz-animation: foo 1400ms ease infinite alternate;
      -o-animation: foo 1400ms ease infinite alternate;
      -ms-animation: foo 1400ms ease infinite alternate;
   }
   
  .logo-code-red-block {
    position: absolute;
    top: 20%;
    left: 50;
    transform: translate(-20%, -50%);
    width: 100%;
    animation: moveTopToBottom 3s forwards!important;
  }




@media (max-width: 767px){
  .search-form {display: inline-block; float: none; width: 90%;}
}

@media screen and (max-width: 991px){
  .toggle-search {font-size: 18px; color: #FFF;}
  .sidenav {background-color: #444!important;}
}

@media only screen and (max-width: 768px) {
  .index-block-info .entry-title h2::before {padding-right: 5px; margin-left: -7px;}
  #tss-content-block, #tss-content-single-block, #tss-content-index-block {margin-top: -1em; position: relative;}
  #nav-main {padding: 0 15px 0 0!important; color: #FFF;}

  .logo-tss-header {width: 150px;}
  .text-highlight-header h2 {font-size: 32px;}
  .text-highlight-header h3 {font-size: 20px;}
  .logo-tsd-header {width: 80%;}
  .header-container {top: 6em; max-width: 768px;}
  .header-container .logo-tsd-header {max-width: 100px; margin-left: 15px;}
  .header-container .top-widget {float: right; margin: 10px 45px 0 0;}

  .logo-code-red-block {
    top: 23%;
    transform: translate(-23%, -50%);
  }


  footer {padding: 1em 0;}

    #tss-content-block .tabmenu {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }
    #tss-content-block .tabmenu button.tablinks {min-width: 100px;}

}