/* Add a black background color to the top navigation */
.topnav {
    background-color: var(--corp-color) !important;
    overflow: hidden;
    /*line-height: 40px;*/
    line-height: 45px;
}

/* Style the links inside the navigation bar */
.topnav a, .topnav span {
    float: left;
    display: block;
    /*color: #f2f2f2;*/
    color: #ffffff;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 17px;
}

.topnav span.title {
    padding: 14px 40px 14px 10px;
    font-size: 26px;
    font-family: 'Collator', arial, helvetica, sans-serif;
    width: 150px;
}

.menu-livein {
    float: right !important;
}

.menu-livein img{
    height: 40px;
}

.menu-thehub {
    float: right !important;
}

.menu-thehub img{
    max-height: 40px;
    max-width: 50px;
}

.topnav .menu-userPortal {
    float: right !important;
}

.topnav .menu-userPortal img{
    max-height: 40px;
    max-width: 50px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
    text-decoration: none;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #ddd;
    color: black !important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .toggle {
    display: none;
    font-size:15px;
}

 /* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav a {display: none;}
  .topnav a.toggle {
    float: left; /* Set to left to display the "Home" icon to the left side of the topnav (just after the site logo) or set to to right to display the icon to the right side */
    display: block;
  }
  
  .topnav a.menu-livein {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .topnav a.menu-thehub {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .topnav a.menu-userPortal {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .topnav span.title {
    font-size: 1.5rem;
    padding: 14px 40px 14px 0px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally).
This class is not enough necessary because the slide effect is now manage by slideup and slidedown classes. When the user clicks on the toggle button, slidedown class is added and slideup is removed and vice versa*/
@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.toggle{
    font-size:15px;
    /*position: absolute;
    right: 0;
    left: 0;
    top: 0;*/
    float: left; /* Set to left to display the "Home" icon to the left side of the topnav or set to to right to display the icon to the right side when toggle is clicked*/
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
   .topnav.responsive span  {
       padding: 14px 40px 14px 10px;
   }
   
   .topnav .menu-items{
       /*float: left;
       width: 100%;
       max-height: 0;
       transition-property: max-height;
       transition-duration: 1s;
       transition-timing-function: ease-in-out;
       transition-delay: 0s;*/
    }
   
   .topnav.responsive .menu-items{
       /*max-height: 700px;*/
   }
   
   .topnav.slideup .menu-items, .topnav.slidedown .menu-items {
       float: left;
       width: 100%;
       max-height: 0;
       transition-property: max-height;
       transition-duration: 1s;
       transition-timing-function: ease-in-out;
       transition-delay: 0s;
   }
   
   .topnav.slidedown .menu-items{
       max-height: 700px;
   }
   
   .topnav a, .topnav span {
       font-size: 1.1rem;
   }
}