@font-face {
    font-family: transformers;
    src: url(fonts/transformers.tff);
}

/* fonts */
.fnt-oswald{
    font-family: Oswald;
}
.fnt-montserrat{
    font-family: Montserrat;
}
.fnt-roboto{
    font-family: Roboto;
}
.fnt-dongle{
    font-family: Dongle;
}
.fnt-transformers{
    font-family: transformers;
}
.fnt-IBMPlexSansThaiLooped{
    font-family: IBM Plex Sans Thai Looped;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /********************* main nav ************************/
  .kmb-nav-bar{
      color: aliceblue;
      background-color: #212529 !important;
      font-family: transformers;
  }
  .kmb-nav-bar .kmb-nav-lg a{
      text-decoration: none !important;
  }
  
  /* ************ responsive nav **********************/
  .hamb-container {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 20px;
    right: 40px;
    cursor: pointer;
    z-index: 1337;
    display: none;
  }
  
  .hamb {
    position: relative;
    width: 40px;
    height: 2px;
    background: #fff;
    top: 50%;
    transition: all .2s ease-in-out;
    transform: translateY(-50%);
  }
  
  .hamb:before,
  .hamb:after {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    transition: all .3s ease-in-out;
    background: #fff;
  }
  
  .hamb:before {
    top: -10px;
  }
  
  .hamb:after {
    top: 10px;
  }
  
  .hamb-container:hover .hamb {
    width: 30px;
  }
  
  .hamb-container:hover .hamb:after {
    width: 20px;
  }
  
  .hamb-container.open .hamb {
    background: transparent;
  }
  
  .hamb-container.open .hamb:before {
    transform: rotate(-45deg);
    top: 0;
    width: 30px;
  }
  
  .hamb-container.open .hamb:after {
    transform: rotate(45deg);
    top: 0;
    width: 30px;
  }
  
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: #222;
    transition: all .3s ease-in-out;
    transform: translateY(100%);
    z-index: 1336;
    display: none;
  }
  
  .slide {
    transform: translateY(0);
  }

  /* categories nav */
  /* hide scrollbar but allow scrolling */
  .hor-nav-scroll {
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        overflow-x: auto !important; 
    }

    .hor-nav-scroll::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

  /* footer */
  footer{
      /* font-family: Oswald; */
      display: block;
  }

  /*  */
  /* When the screen is less than 600 pixels wide, hide the menu items. Show the humberger icon that should open and close the topnav (.icon) */
    @media screen and (max-width: 600px) {
        .kmb-nav-lg {display: none;}
        .hamb-container {display: block;}
        .menu {display: block;}
    }