/* DESKTOP NAVIGATION ------------------------------------------- */ #navigation, #navigation * { box-sizing: border-box; } #navigation { display: block; position: absolute; z-index: 99; bottom: 0; right: 0; width: 100%; } #navigation a { text-decoration: none; } #navigation ul { list-style-type: none; padding: 0; margin: 0; } #navigation ul li { position: relative; } /* top tier */ #navigation ul.menu { position: absolute; z-index: 1; right: 0; bottom: 0; } #navigation ul.menu > li { float: left; } #navigation ul.menu > li > a, #navigation ul.menu > li > span { display: block; position: relative; padding: 1em 1.35em; color: #fff; font-size: 0.9375em; font-weight: 700; text-transform: uppercase; background-color: #0a7d8a; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; } #navigation ul.menu > li.open > a, #navigation ul.menu > li.open > span, #navigation ul.menu > li > a:hover, #navigation ul.menu > li > span:hover, #navigation ul.menu > li:last-child > a:hover, #navigation ul.menu > li:last-child > span:hover { color: #053b57; background-color: #e8edf1; -webkit-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; } #navigation ul.menu > li:first-child > a, #navigation ul.menu > li:first-child > span { padding-left: 2.2em; } #navigation ul.menu > li:last-child > a, #navigation ul.menu > li:last-child > span { padding-right: 3em; background-color: #053b57; } #navigation ul.menu > li:last-child > a::after, #navigation ul.menu > li:last-child > span::after { content: 'f'; display: block; position: absolute; z-index: 1; right: 1em; top: 50%; margin-top: -0.6em; font-family: 'akron-community-foundation'; text-transform: none; } /* second tier */ #navigation ul.menu > li > ul { display: none; position: absolute; background: #ccc; } #navigation ul.menu > li > ul > li { } #navigation ul.menu > li > ul > li > a, #navigation ul.menu > li > ul > li > span { display: block; min-width: 15em; padding: 0.5em 1em; color: #000; } #navigation ul.menu > li > ul > li:hover > a, #navigation ul.menu > li > ul > li:hover > span { background-color: #aaa; } /* third tier */ #navigation ul.menu > li > ul > li > ul { display: none; position: absolute; top: 0; left: 100%; background: #ccc; } #navigation ul.menu > li > ul > li:hover > ul { display: block; } #navigation ul.menu > li > ul > li > ul > li { } #navigation ul.menu > li > ul > li > ul > li > a, #navigation ul.menu > li > ul > li > ul > li > span { display: block; min-width: 15em; padding: 0.5em 1em; color: #000; } #navigation ul.menu > li > ul > li > ul > li:hover > a, #navigation ul.menu > li > ul > li > ul > li:hover > span { background-color: #aaa; } /* SUB-NAVIGATION BAR ------------------------------------------- */ #sub-navigation-bar, #sub-navigation-bar * { box-sizing: border-box; } #sub-navigation-bar { overflow: hidden; position: absolute; z-index: 4; max-height: 0; width: 100%; -webkit-transition: max-height 0ms linear 1000ms; -o-transition: max-height 0ms linear 1000ms; -moz-transition: max-height 0ms linear 1000ms; transition: max-height 0ms linear 1000ms; } #sub-navigation-bar.open { max-height: 1000px; -webkit-transition: max-height 0ms linear; -o-transition: max-height 0ms linear; -moz-transition: max-height 0ms linear; transition: max-height 0ms linear; } #sub-navigation-bar .content-wrap { opacity: 0; background-color: #e8edf1; margin-bottom: 8px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } #sub-navigation-bar.open .content-wrap { opacity: 1; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } #sub-navigation-bar .content-wrap .content { padding: 35px 0; } #sub-navigation-bar .content-wrap .content > ul.sub-menu { overflow: hidden; opacity: 0; list-style-type: none; height: 0; width: 100%; max-width: 1100px; padding: 0; margin: 0 auto; text-align: left; /* -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; */ -webkit-columns: 3; -moz-columns: 3; columns: 3; -webkit-transition: opacity 100ms ease-in-out; -o-transition: opacity 100ms ease-in-out; -moz-transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out; } #sub-navigation-bar .content-wrap .content > ul.sub-menu.active { opacity: 1; height: auto; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li { display: block; padding: 0 50px; break-inside: avoid; /* Prevents the item and its children from breaking between columns */ -webkit-column-break-inside: avoid; page-break-inside: avoid; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > a, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > span { display: block; position: relative; padding: 0.4em 0; color: #053b57; font-size: 0.85em; font-weight: 700; line-height: 1.25em; text-decoration: none; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > a:hover, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > span:hover { text-decoration: underline;} #sub-navigation-bar .content-wrap .content > ul.sub-menu ul { list-style-type: none; padding: 0; margin: 0; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li { } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > a, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > span { display: block; position: relative; padding: 0.4em 1em; color: #053b57; font-size: 0.85em; font-weight: 400; line-height: 1.25em; text-decoration: none; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > a:hover, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > span:hover { text-decoration: underline; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul { display: block; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul > li { } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul > li > a, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul > li > span { display: block; position: relative; padding: 0.4em 2em; color: #053b57; font-size: 0.85em; font-weight: 300; line-height: 1.25em; text-decoration: none; } #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul > li > a:hover, #sub-navigation-bar .content-wrap .content > ul.sub-menu > li > ul > li > ul > li > span:hover { text-decoration: underline; } /* MOBILE MENU -------------------------------------------------- */ #mm-trigger, #mm-trigger * { box-sizing: border-box; } #mm-trigger { display: none; position: absolute; z-index: 1; top: 0; right: 0; width: 62px; height: 74px; text-decoration: none; } #mm-trigger::after { content: 'Menu'; display: block; position: absolute; width: 100%; bottom: 15px; color: #003d59; font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; } #mm-trigger .trigger-wrapper { display: block; } #mm-trigger .trigger-container { display: block; width: 36px; height: 19px; margin: 21px 13px 0; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #mm-trigger .trigger-container span { height: 3px; background: #003d59; border-radius: 0px; display: block; position: absolute; width: 100%; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #mm-trigger .trigger-container span:nth-child(1) { top: 0px; } #mm-trigger .trigger-container span:nth-child(2), #mm-trigger .trigger-container span:nth-child(3) { top: 8px; } #mm-trigger .trigger-container span:nth-child(4) { top: 16px; } html.mm-wrapper_opened #mm-trigger .trigger-container span:nth-child(1), html.mm-wrapper_opened #mm-trigger .trigger-container span:nth-child(4) { top: 16px; width: 0%; left: 50%; } html.mm-wrapper_opened #mm-trigger .trigger-container span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } html.mm-wrapper_opened #mm-trigger .trigger-container span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /* MOBILE NAVIGATION -------------------------------------------- */ #mobile-menu { display: none; } @media screen and (max-width: 1300px) { /* DESKTOP NAVIGATION ------------------------------------------- */ /* top tier */ #navigation ul.menu > li > a, #navigation ul.menu > li > span { font-size: 0.8125em; } /* SUB-NAVIGATION BAR ------------------------------------------- */ #sub-navigation-bar .content > ul.sub-menu { padding: 0 0 0 57px; } #sub-navigation-bar .content > ul.sub-menu > li > a { font-size: 0.8125em; } } @media screen and (max-width: 1100px) { /* DESKTOP NAVIGATION ------------------------------------------- */ /* top tier */ #navigation ul.menu > li > a, #navigation ul.menu > li > span { font-size: 0.75em; } /* SUB-NAVIGATION BAR ------------------------------------------- */ #sub-navigation-bar .content > ul.sub-menu { padding: 0 0 0 34px; } #sub-navigation-bar .content > ul.sub-menu > li > a { font-size: 0.75em; } } @media screen and (max-width: 1000px) { /* DESKTOP NAVIGATION ------------------------------------------- */ #navigation { display: none; } /* SUB-NAVIGATION BAR ------------------------------------------- */ #sub-navigation-bar { display: none; } /* MOBILE NAVIGATION -------------------------------------------- */ #mobile-menu { display: block; position: absolute; overflow: hidden; top: 61px; left: 0; width: 100%; height: auto; max-height: 0; -webkit-transition: max-height 300ms ease-out; -o-transition: max-height 300ms ease-out; -moz-transition: max-height 300ms ease-out; transition: max-height 300ms ease-out; } html.mm-wrapper_opened #mobile-menu { max-height: 3000px; -webkit-transition: max-height 300ms ease-in; -o-transition: max-height 300ms ease-in; -moz-transition: max-height 300ms ease-in; transition: max-height 300ms ease-in; } #mobile-menu a { text-decoration: none; } #mobile-menu ul { list-style-type: none; padding: 0; margin: 0; } #mobile-menu ul li { position: relative; } /* top tier */ #mobile-menu ul.menu { margin: 13px 0; background-color: #fff; box-shadow: 0 3px 15px rgba(0,0,0,0.23); } #mobile-menu ul.menu > li { } #mobile-menu ul.menu > li:first-child { border-top: 3px solid #fe6625; } #mobile-menu ul.menu > li > a, #mobile-menu ul.menu > li > span { display: block; padding: 0.75em 80px 0.75em 30px; border-top: 1px solid rgba(56,56,56,0.2); color: #181818; font-size: 14px; font-weight: 700; text-transform: uppercase; } /* #mobile-menu ul.menu > li.top-nav-link > a, #mobile-menu ul.menu > li.top-nav-link > span { padding: 0.75em 30px; border-top: 1px solid rgba(254,102,37,0.2); font-size: 11px; } */ #mobile-menu ul.menu > li:first-child > a, #mobile-menu ul.menu > li:first-child > span { border-top: none; } #mobile-menu ul.menu > li > .sub-menu-trigger { display: block; position: absolute; z-index: 2; top: 0; right: 0; height: 42px; width: 50px; padding: 0; border: none; text-indent: -9999em; cursor: pointer; } #mobile-menu ul.menu > li > .sub-menu-trigger::after { content: 'a'; font-family: 'akron-community-foundation'; display: block; position: absolute; z-index: 1; top: 12px; left: 0; width: 100%; color: #170e48; font-size: 20px; text-align: left; text-indent: 0; } #mobile-menu ul.menu > li.sub-menu-open > .sub-menu-trigger::after { top: 10px; color: #d63122; text-align: right; transform: rotate(180deg); } #mobile-menu ul.menu > li > a:hover, #mobile-menu ul.menu > li > span:hover { } #mobile-menu ul.menu > li:first-child > a, #mobile-menu ul.menu > li:first-child > span { } #mobile-menu ul.menu > li:last-child > a, #mobile-menu ul.menu > li:last-child > span { } /* second tier */ #mobile-menu ul.menu > li > ul { overflow: hidden; height: auto; max-height: 0; -webkit-transition: max-height 300ms linear; -o-transition: max-height 300ms linear; -moz-transition: max-height 300ms linear; transition: max-height 300ms linear; } #mobile-menu ul.menu > li.sub-menu-open > ul { max-height: 2000px; -webkit-transition: max-height 300ms linear; -o-transition: max-height 300ms linear; -moz-transition: max-height 300ms linear; transition: max-height 300ms linear; } #mobile-menu ul.menu > li > ul > li { } #mobile-menu ul.menu > li > ul > li > a, #mobile-menu ul.menu > li > ul > li > span { display: block; padding: 0.6em 1em 0.6em 65px; background-color: #e8edf1; color: #053b57; font-size: 14px; font-weight: 700; text-transform: none; } #mobile-menu ul.menu > li > ul > li > a:hover, #mobile-menu ul.menu > li > ul > li > span:hover { background-color: #ddd; } #mobile-menu ul.menu > li > ul > li:first-child > a, #mobile-menu ul.menu > li > ul > li:first-child > span { /* border-top: 1px solid rgba(16,40,108,0.25); */ } #mobile-menu ul.menu > li > ul > li::after, #mobile-menu ul.menu > li > ul > li::after { } #mobile-menu ul.menu > li > ul > li:last-child::after, #mobile-menu ul.menu > li > ul > li:last-child::after { } #mobile-menu ul.menu > li > ul > li:hover > a, #mobile-menu ul.menu > li > ul > li:hover > span { } /* third tier */ #mobile-menu ul.menu > li > ul > li > ul { } #mobile-menu ul.menu > li > ul > li > ul > li { } #mobile-menu ul.menu > li > ul > li > ul > li > a, #mobile-menu ul.menu > li > ul > li > ul > li > span { display: block; padding: 0.4em 1em 0.4em 85px; background-color: #f9f8f8; color: #053b57; font-size: 13px; text-transform: none; } #mobile-menu ul.menu > li > ul > li > ul > li:first-child > a, #mobile-menu ul.menu > li > ul > li > ul > li:first-child > span { padding-top: 0.6em; } #mobile-menu ul.menu > li > ul > li > ul > li:last-child > a, #mobile-menu ul.menu > li > ul > li > ul > li:last-child > span { padding-bottom: 0.6em; } #mobile-menu ul.menu > li > ul > li > ul > li > a:hover, #mobile-menu ul.menu > li > ul > li > ul > li > span:hover { } /* fourth tier */ #mobile-menu ul.menu > li > ul > li > ul > li > ul { } #mobile-menu ul.menu > li > ul > li > ul > li > ul > li { } #mobile-menu ul.menu > li > ul > li > ul > li > ul > li > a, #mobile-menu ul.menu > li > ul > li > ul > li > ul > li > span { display: block; padding: 0.4em 1em 0.4em 105px; background-color: #fff; color: #053b57; font-size: 13px; text-transform: none; } #mobile-menu ul.menu > li > ul > li > ul > li > ul > li:first-child > a, #mobile-menu ul.menu > li > ul > li > ul > li > ul > li:first-child > span { padding-top: 0.6em; } #mobile-menu ul.menu > li > ul > li > ul > li > ul > li:last-child > a, #mobile-menu ul.menu > li > ul > li > ul > li > ul > li:last-child > span { padding-bottom: 0.6em; } #mobile-menu ul.menu > li > ul > li > ul > li > ul > li > a:hover, #mobile-menu ul.menu > li > ul > li > ul > li > ul > li > span:hover { } /* MOBILE MENU -------------------------------------------------- */ #mm-trigger { display: block; } } @media screen and (max-width: 400px) { /* MOBILE NAVIGATION -------------------------------------------- */ /* top tier */ #mobile-menu ul.menu > li > a, #mobile-menu ul.menu > li > span { padding-left: 20px; padding-right: 60px; } #mobile-menu ul.menu > li > .sub-menu-trigger { width: 40px; } #mobile-menu ul.menu > li.top-nav-link > a, #mobile-menu ul.menu > li.top-nav-link > span { padding-left: 20px; } /* second tier */ #mobile-menu ul.menu > li > ul > li > a, #mobile-menu ul.menu > li > ul > li > span { padding: 0.6em 1em 0.6em 35px; } /* third tier */ #mobile-menu ul.menu > li > ul > li > ul > li > a, #mobile-menu ul.menu > li > ul > li > ul > li > span { padding: 0.4em 1em 0.4em 50px; } }