.menu {
  height: 70px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid rgba(235, 235, 235, 0.925);
  text-align: right;
  z-index: 2;
  background-color: white; }
  .menu ul {
    position: relative;
    margin-right: 2.5%;
    display: inline-block;
    width: 95%;
    height: 100%; }
    .menu ul .list {
      display: inline; }
    .menu ul a {
      color: black;
      font-size: 15px;
      font-weight: 600;
      display: inline-flex;
      list-style-type: none;
      text-decoration: none; }
      .menu ul a li {
        float: right;
        padding: 22px;
        margin: 0px auto 0px 4px;
        height: 100%;
        position: relative; }
        .menu ul a li::after {
          content: '';
          position: absolute;
          width: 70%;
          height: 5px;
          left: 15%;
          bottom: 0px;
          background-color: #b6b900;
          transform: scale(0);
          transition: transform 300ms ease-in; }
        .menu ul a li:hover::after {
          transform: scale(1); }
        .menu ul a li:hover {
          text-decoration: none;
          color: #b6b900;
          text-decoration: none; }
      .menu ul a .active {
        color: #b6b900; }
        .menu ul a .active::after {
          transform: scale(1); }
      .menu ul a .home-icon {
        background-color: #b6b900;
        margin-left: 0; }
        .menu ul a .home-icon i {
          font-size: 17pt;
          color: white; }
        .menu ul a .home-icon:hover {
          background-color: #990000; }
        .menu ul a .home-icon:hover::after {
          transform: scale(0); }
      .menu ul a .menu-icon {
        background-color: #009255;
        margin-left: 0;
        cursor: pointer; }
        .menu ul a .menu-icon i {
          font-size: 17pt;
          color: white; }
        .menu ul a .menu-icon:hover {
          background-color: #010eca; }
        .menu ul a .menu-icon:hover::after {
          transform: scale(0); }
    .menu ul::after {
      background: -webkit-linear-gradient(0deg, white, rgba(255, 255, 255, 0));
      height: 100%;
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      width: 184px;
      z-index: 1;
      content: " "; }

/****************************/
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 6;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  right: 0;
  background-color: #009255;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  justify-items: center;
  text-align: center; }
  .sidenav .close {
    color: white;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.3s;
    position: absolute;
    top: 0;
    right: 17px;
    font-size: 28px; }
    .sidenav .close:hover {
      color: #f1f1f1; }
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 17px;
    color: #3d0000;
    display: block;
    transition: 1s;
    margin-top: 15px;
    position: relative; }
    .sidenav a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid white;
      left: 0;
      transition: 300ms all ease-in-out;
      transform: scale(0); }
    .sidenav a::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 20px solid white;
      right: 0;
      transition: 300ms all ease-in-out;
      transform: scale(0); }
    .sidenav a:hover {
      color: #f1f1f1; }
      .sidenav a:hover::after {
        transform: scale(1); }
      .sidenav a:hover::before {
        transform: scale(1); }
  .sidenav .active {
    color: #f03e12; }
    .sidenav .active::after {
      transform: scale(1); }
    .sidenav .active::before {
      transform: scale(1); }
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px; }

#all {
  transition: 0.5s; }

.live-news {
  width: 95%;
  background-color: white;
  position: relative;
  right: 2.5%;
  border-bottom: 2px solid silver;
  min-height: 43px; }
  .live-news .title {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 10px;
    width: 139px;
    background-color: #cfcfcf;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
    z-index: 2; }
    .live-news .title .live {
      color: red; }
  @media screen and (max-width: 380px) {
    .live-news .title {
      font-size: 12px; } }
  .live-news marquee {
    z-index: 1;
    left: 0;
    position: relative;
    padding: 10px;
    font-size: 15px; }
    .live-news marquee a {
      margin-right: 80px;
      color: black; }
      .live-news marquee a:hover {
        color: red;
        font-weight: 490; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px; }

  .sidenav a {
    font-size: 18px; } }
/*

left arrow

*/
.left-arrow {
  cursor: pointer;
  position: fixed;
  right: 10px;
  top: 50%;
  color: blue;
  font-size: 25px;
  animation: leftanimation 800ms ease-in-out infinite;
  z-index: 5; }

@keyframes leftanimation {
  0% {
    right: 10px;
    font-size: 25px; }
  50% {
    right: 20px;
    font-size: 23px;
    opacity: .1; }
  100% {
    right: 10px;
    font-size: 25px;
    opacity: .3; } }
@media (max-width: 540px) {
  .menu ul {
    overflow: hidden;
    position: relative; }
    .menu ul a .home-icon {
      position: absolute;
      left: 0;
      top: 0; }
    .menu ul .list {
      display: none; }
    .menu ul::after {
      display: none; } }
.fixed {
  position: fixed;
  top: 0; }

/*# sourceMappingURL=header-menu.css.map */