/* Menu Basics */

#navigation {
	/*display: flex;
	justify-content: space-between;
	margin: 0 auto;*/
	border-bottom: 1px solid #999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	/* box-shadow: 0px 5px 15px rgba(0,0,0,.25); */
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}


#contact-bar {
    background-color: var(--contact-bar-blue);
    color:#fff;
    height: 40px; /* define this for reliable top margin height */
    text-align: center;
    font-size: 14px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contact-bar .width-constraint {
    display: flex;
    flex-direction: row;
    flex: 1;
    white-space: nowrap;
    justify-content: space-between;
}



#contact-bar a {
    color: #fff;
    text-decoration: transparent;
}

#contact-bar a:hover {
    text-decoration: underline;
    
}
.contact-detail {
    flex: 0;
    padding: 0 10px;

}
.contact-detail-padding {
    padding: 0 6px;
}
nav {
    background: #fff;
    /* padding: 0 25px; */
	
	text-transform: uppercase;
	font-size: .86em;
			 
	letter-spacing: .03em;

}

nav a {
    text-decoration: none;
}

li.logo {
    line-height: 0;
}
.item a.selected {
	color: var(--contact-bar-blue);
}

.menu,
.submenu {   
    list-style-type: none;
}
/* .logo img {
    height: 65px;
    margin: 10px;
    padding: 0;
} */
.logo img {
    height: 50px;
    margin: 10px;
    padding: 0;
}
.logo a {
	display: inline-block;
}
.item, .item a {
    padding: 10px;
	color: var(--bisco-blue);
}

#navigation.item.button {
    padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
    color: var(--contact-bar-blue);
}







/* Mobile menu */
.menu {
    display: flex;
	display: -webkit-flex;
    flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
    justify-content: space-between;
	-webkit-justify-content: space-between;
    align-items: center;
	-webkit-align-items: center;
    width: 100%;
}
.menu li:not(.logo) a {
    display: block;
    padding: 15px 15px;
    font-weight: 500;
}
.menu li:not(.logo) a i {
	padding-left: 5px;
}
.menu li.subitem a {
    padding: 15px;
}
.toggle {
    order: 1;
	-webkit-order: 1;
    font-size: 20px;
}
#navigation .item.button {
    order: 2;
	-webkit-order: 2;
}
#navigation .button a {
    background: #50bcd2;
	background:#002159;
    background: var(--attention-green);
    /*border: 1px solid #002159;*/
	color: #fff;
}
.item {
    order: 3;
	-webkit-order:3;
    width: 100%;
    text-align: center;
    display: none;
}
.active .item {
    display: block;
}
.button.secondary { /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}
.removable-mobile {
    display: none;
}

/* Submenu up from mobile screens */
.submenu {
    display: none;
}
.submenu-active .submenu {
   display: block;
}
.has-submenu i {
    font-size: 12px;
}

.has-submenu > a::after {
    font-family: "Material Symbols Outlined";
    content: "expand_more";
    font-weight: 100;
    font-size: 22px;
    line-height: 12px; /* Reduced from 16 to eliminate uneven main nav */
    
    display: inline-block;
    vertical-align: middle;
    
    /*color: white;*/
    padding-left: 0px;
    padding-bottom: 2px
}
.subitem a {
    padding: 10px 15px;
}
.submenu-active {
    background-color: #fff;
    border-radius: 3px;
}



/* Tablet menu */
@media all and (min-width: 700px) {
    #contact-bar .width-constraint {
        display: flex;
        flex-direction: row;
        flex: 1;
        justify-content: space-evenly;
    }
    .removable-mobile {
        display: inline;
    }
    .menu {
        justify-content: center;
		-webkit-justify-content: center;
    }
    .logo img {
        height: 65px;
        margin: 10px;
        padding: 0;
    }
    .logo {
        flex: 5;
		-webkit-flex: 5;
    }
    #navigation .item.button {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        flex: 1;
		-webkit-flex: 1;
        text-align: right;
        order: 2;
		-webkit-order: 2;
    }
    /* Button up from tablet screen */
    #navigation .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
        line-height: 1em;;
    }
    #navigation .button a {
        background:var(--attention-green);
        /*border: 1px solid #002159;*/
		color: #fff;
        transition: .3s;
    }
   
    #navigation .button a:hover {
        text-decoration: none;
    }
    #navigation .button:not(.secondary) a:hover {
        background: var(--attention-green-hover);
		color: #fff;
        border-color: darkblue;
    }
}




/* Small Desktop menu */
@media all and (min-width: 960px) {
	/* Sizing overrides */
	/* nav {
		font-size: .68em;
	} */
	.item {
		padding: 15px;
	}
	.item.removable {
		display: none;
	}
	.menu li:not(.logo) a {
		padding: 15px 5px;
	}
	
    .menu {
        align-items: center; 
        flex-wrap: nowrap;
        background: none;


    }
    .logo {
        order: 0;
    }

    .item {
        order: 1;
        position: relative;
        display: block; 
        width: auto;	
    }
    #navigation .button {
        order: 2;
    }
    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 55px;
        background: #fff;
		border: 1px solid #eee;
		border-top: none;
        width: 200px;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
    }
}


/* Desktop menu */
@media all and (min-width: 1360px) {
	/* revert sizing overrides */
	nav {
		font-size: .86em;
		font-size: 14px;
	}
	.item {
		padding: 10px;
	}
	.item.removable {
		display: block;
	}
   .menu li:not(.logo) a {
		padding: 15px 15px;
	}
  
}