/* The side navigation menu */
.sidenav {
   height: 100%; /* 100% Full-height */
   width: 0; /* 0 width - change this with JavaScript */
   position: fixed; /* Stay in place */
   z-index: 1; /* Stay on top */
   top: 0; /* Stay at the top */
   left: 0;
   background-color: #fcc117; /* bright yellow*/
   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 */
}

.sidenav h3 {
   padding: 8px 8px 8px 20px;
   text-decoration:none;
   font-size: 25px;
   font-weight:700;
   color:black;
   display: block;
   transition: 0.5s;  
}



/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 30px;
  text-decoration: underline;
  font-size: 20px;
  color: black;
  display: block;
  transition: 0.35s;
}

   .sidenav h4 a {
      background-color: #fcc117;
      padding: 8px 8px 8px 6px;
      text-decoration: underline;
      font-size: 30px !important;
      font-weight: 700;
      color: black;
      display: block;
      transition: 0.35s;
   }

/* Active/current link */

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media (pointer:coarse) and (max-device-width: 1260px), (-webkit-min-device-pixel-ratio: 2) {

   /* The side navigation menu */
   .sidenav {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      left: 0;
      background-color: white; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.35s; /* 0.5 second transition effect to slide in the sidenav */
   }

      .sidenav h3 {
         padding: 4px 4px 4px 10px;
         text-decoration:none;
         font-size: 15px !important;
         font-weight:700;
         color: black;
         display: block;
         transition: 0.35s;
      }

   /* Active/current link */
     
   /* The navigation menu links */
   .sidenav a {
      padding: 4px 4px 4px 15px;
      text-decoration: underline;
      font-size: 13px;
      color: navy;
      display: block;
      transition: 0.35s;
   }
   .sidenav span{
   color:red !important;

   }
      .sidenav h4 a {
         background-color: white;
         padding: 8px 8px 8px 10px;
         text-decoration: underline;
         font-size: 20px!important;
         font-weight: 700;
         color: black;
         display: block;
         transition: 0.35s;
      }

      /* When you mouse over the navigation links, change their color */
      .sidenav a:hover {
         color: #f1f1f1;
      }

   /* Position and style the close button (top right corner) */
   .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 13px;
      font-size: 36px;
      margin-left: 25px;
   }

   }