/* CSS to enable submenus for website sections to become responsive as drop-downs */
@media only screen and (max-width: 1299px) {
    #main-container .centered {display: flex; flex-direction: column}

    [id^="block-secondary-menu-"] {display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between}
    [id^="block-secondary-menu-"] h2 {display: flex; flex-grow: 1; font-size: 24px; margin: 0 0 0 10px !important}
    [id^="block-secondary-menu-"] > ul {flex-basis: 100%; opacity: 0; overflow: hidden; transition: height 0ms 400ms, opacity 400ms 0ms; visibility: hidden; height: 0}
    [id^="block-secondary-menu-"] > ul.open {margin-top: 20px; opacity: 1; transition: height 0ms 0ms, opacity 600ms 0ms; visibility: visible; height: auto}

    #submenu-icon {position: relative; display: block; cursor: pointer; transform: rotate(0deg); transition: .5s ease-in-out; height: 25px; width: 32px}
    #submenu-icon span {position: absolute; display: block; background: var(--primary-colour); border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; height: 5px; width: 100%}
    #submenu-icon span:nth-child(1) {top: 0px}
    #submenu-icon span:nth-child(2), #submenu-icon span:nth-child(3) {top: 9px}
    #submenu-icon span:nth-child(4) {top: 18px} 
    #submenu-icon.open span:nth-child(1) {left: 50%; top: 9px; width: 0%}
    #submenu-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
    #submenu-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg)}
    #submenu-icon.open span:nth-child(4) {left: 50%; top: 9px; width: 0%}
}