div#octi_menu,
div.boxmenu,
div.archmenu { 
    clear: both; 
    text-align: center;
    display: block;
    margin-bottom: 20px;
}
div.archmenu {background-color: #f9f9f9;}
div#octi_menu ul,
div.boxmenu ul,
div.archmenu ul {
    margin: 0;
    padding: 0;
    border: 1px dotted white;
    display: inline-block;
}
div#octi_menu ul {display: flex; flex-flow: row wrap; justify-content: center; gap: 5px; width: 100%;}
div#octi_menu ul li,
div.boxmenu ul li,
div.archmenu ul li {
    display: inline-block;
    margin-right: 5px;
    padding: 0;
    text-transform: uppercase;
    text-align: center;
}
div#octi_menu ul li { background-color: #f2f2f2; margin-right: 0;}
div.boxmenu ul li { border: 3px solid #ccc;}
div.archmenu ul li { border: 3px solid transparent;}
div#octi_menu ul li a,
div.boxmenu ul li a,
div.archmenu ul li a {
    color: #881c1c;
    background-color: transparent;
    padding: 15px 20px;
}
div#octi_menu ul li a {display: block; padding: 5px;}
div#octi_menu ul li a:hover, div.archmenu ul li a:hover {
    color: #ece9d4 !important;
    background-color: #881c1c;
}
div#octi_menu ul li a:visited, div.archmenu ul li a:visited {
    color: #555;
    background-color: transparent;
}
.page-node-24180 div#octi_menu ul li#octi_home a,
.page-node-24198 div#octi_menu ul li#octi_apply a,
.page-node-24200 div#octi_menu ul li#octi_courses a,
.page-node-24202 div#octi_menu ul li#octi_resources a,
.page-node-24204 div#octi_menu ul li#octi_people a,
.page-node-24206 div#octi_menu ul li#octi_seminars a,
.page-node-24208 div#octi_menu ul li#octi_testimonials a,
.page-node-24210 div#octi_menu ul li#octi_contact a { color: #fff !important; background-color: #881c1c; }
*/

@media only screen and (max-width: 767px) {
	div#octi_menu ul, div.boxmenu ul, div.archmenu ul {
		margin: 0 auto;
		width: 75%; min-width: 250px;
		display: block;
	}
	div#octi_menu ul li, div.boxmenu ul li, div.archmenu ul li {
		display: block;
		margin: 2px;
		padding: 3px 0;
	}
	div.boxmenu ul li a, div.archmenu ul li a {
		padding: 10px 15px;
	}
	div#octi_menu ul {display: flex; flex-flow: row wrap; justify-content: center; gap: 5px; width: 100%;}
	div#octi_menu ul li {margin: 0; flex: 1 0 100%;}
	div#octi_menu ul li a {
	    display: block;
		padding: 5px 0;
	}
}
@media only screen and (min-width: 768px) {
	div#octi_menu ul li { display: block; padding: 0; margin: 0; flex: 1 0 23%;}
}
@media only screen and (min-width: 1200px) {
    /*
	div#octi_menu ul li {margin: 0; flex: 1 0 11%;}
	div#octi_menu ul li#octi_seminars {flex: 2 0 11%;}
	*/
}