/* responsive navbar - Radek Loucka - r.loucka@mmu.ac.uk */

.nav__list {
  position: relative;
  clip: none;
  height: auto;
  width: 100%;
  margin: 0;
  line-height: 1;   
}
.site__navigation {
  max-width: 1111px;
  margin: 0 auto;
}
.site__navigation .collapsible-menu {
  border-bottom: 1px solid #ccc;
}
.site__navigation .collapsible-menu.collapsed {
  height: 0;
  overflow: hidden;
  border-bottom: 0;
}
.nav__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__list .collapsible-menu>li {
  position: relative;
}
.nav__list .collapsible-menu>li>a {
  padding: 1rem;
  display: block;
  background: #fff;
  border-top: 1px solid #eee;
  transition: .2s;
}
.nav__list .collapsible-menu>li>span {
  position: absolute;
  width: 30%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  text-align: right;
  line-height: 1;
  max-height: 3.5rem;
}
.nav__list li span i {
  position: relative;
  transition: .3s;
}
.nav__list ul ul {
  height: 0;
  width: 0;
  overflow: hidden;
}  
.nav__list ul li.active ul {
  overflow:visible;
}
.nav__list ul ul>li>a {
  padding: 0.25rem 1rem;
  display: block;  
  opacity: 0;
  transition: 0.2s;
}
.nav__list ul ul li + li>a {
  border-top: 1px solid #dfdfdf;
}
.nav__list li.active ul {
  height: auto;
  width: 100%;
}
.nav__list li.active ul>li>a {
  padding: 1rem;
  opacity: 1;
}
.nav__list li.active span i {
  transform: rotate(-180deg);
}


@media (min-width: 750px) {
  .nav__list,
  .site__navigation .collapsible-menu.collapsed
  {
    height: auto;
    overflow: visible;
  }
  .site__navigation .collapsible-menu {    
    border-bottom: none;
  }  
  .nav__list .collapsible-menu {
    display: table;
    width: 100%;
    background: rgba(175,187,195,.1);
  }
  
  .nav__list .collapsible-menu > li {
    display: table-cell;    
    text-align: center;
    vertical-align: middle;
    position: relative;
    transition: 0.2s;
  }
  .nav__list .collapsible-menu > li + li {
    border-left: 1px solid rgba(175,187,195,.3);
  } 
  .nav__list .collapsible-menu > li > a {
    background: transparent;
    border-top: 0;
  }
  .nav__list .collapsible-menu > li span {
    display: none;
  }
  .nav__list .collapsible-menu > li:hover {
    background: rgba(175,187,195,.1);
  }
  .nav__list .collapsible-menu > li:hover ul {
    position: absolute;
    top: 99.9%;
    z-index: 999;
    display: block;
    text-align: left;
    width: 250px;
    height: auto;
    background: #eff1f3;
  }
  .nav__list .collapsible-menu > li:last-of-type:hover ul {
    right: 0;
  }
  .nav__list li:hover ul>li>a {
    padding: 0.75rem 1rem;
    transition: 0.2s;
    opacity: 1;
  }
  .nav__list li ul>li:hover>a {
    background: rgba(175,187,195,.3);
  }
  
}

@media (min-width: 1111px) {
  .nav__list .collapsible-menu > li:last-of-type:hover ul {
    right: auto;
  }
  .nav__list .collapsible-menu > li > a {
    font-size: 17px;
  }
  
}

.nav__small-header {
  display: table;
  width: 100%;
  padding: 0;
}
.nav__small-header a {
  display: table-cell;
  padding: 12px 10px;
}
.nav__small-header a.nav__link-to-header {
  width: 90px;
  max-width: 90px;
  background: #000;
}
.nav__section--footer ul ul a {
  background: rgba(99,99,99,0.05);
  padding-left: 25px;
}