:root {
    --intranet-color:  #48B6D5;
    --filter-color: #fe7ae9;
}

body.intranet main {
    border-top: none;
}

body.intranet section.document > .content, body.intranet article.document > .content {
  padding: 0.3em 0 50px 0;
}
.intranet-nav {
    font-size: 0.8rem;
    line-height: 30px;
    position: relative;
    background-color: var(--intranet-color);
}
.intranet-nav summary {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 30px;
    padding: 0 0 0 6em;
    background-color: var(--intranet-color);
    cursor: pointer;
    color: white;
    text-transform: uppercase;
}
.intranet-nav .nav-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 20px;
    padding: 0 1em 2em 6em;
    background-color: rgba(255,255,255,0.7);
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.3em;
    min-height: 150px;
}
.intranet-nav .nav-content > li {
    text-align: left;
    width: calc( 20% - 5px);
    min-width: 140px;
    transition: width 0.5s;
}
.intranet-nav ul ul {
   list-style: "– ";
}
.intranet-nav li.menu-subitem.hidden, .intranet-nav a.hidden {
    display: none;
}
.intranet-nav li.menu-item.hidden {
    overflow: hidden;
    width: 0;
}
.intranet-nav summary input {
    border: none;
    color: white;
    background-color: var(--filter-color);
}
input.nav-filter::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255,255,255,0.7);
  opacity: 1; /* Firefox */
}
/****************************************/
/****************************************/
/****************************************/


/**
* Responsive grids breaking points
*/

/**
* wide Screen
*/

@media only screen and (min-width: 1201px) {

.intranet-nav .nav-content > li {
    width: calc( 10% - 3px);
}

}

/**
* computer
*/

@media only screen and (min-width: 1025px) {

}

/**
* Small computer, ipad landscape
*/

@media only screen and (max-width: 1024px) {

.intranet-nav .nav-content > li {
    width: calc( 20% - 5px);
}

}

/**
* Pad portrait
*/

@media only screen and (max-width: 768px) {

.intranet-nav .nav-content > li {
    width: calc( 20% - 7px);
}

}

/**
* iPhone landscape ONLY
*/

@media only screen and (max-width: 667px) and (orientation:landscape) {

}


/****************************************/
/*     	        	Phones 		 		        */
/* 	incl. Gal. 360px and iphn6 375px  	*/
/* 			note : iphone6+ is 414px				*/
/*						iphone is 320px						*/
/****************************************/

@media screen and (max-width: 500px) {

.intranet-nav .nav-content > li {
    width: calc( 50% - 22px);
}

}

@media only screen and (max-width: 421px) {

}