<div class="test-banner test-banner--music">
    <div class="test-banner__text">The site is in test mode. Do not launch the site in this mode.</div>
</div>
<div class="header header--music">
    <div class="header__brand">
        <div class="site-logo-link site-logo-link--music site-logo-link--header site-logo-link--dark">
            <span class="site-logo-link__text">
                Home page
            </span>
            <div class="site-logo-link__logo-container">
                <a href="https://illinois.edu/" class="site-logo-link__logo-university" aria-label="University of Illinois Urbana-Champaign">
            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="8" viewBox="0 0 300 8" fill="none">
    <path d="M2.18052 5.91978C2.47125 6.27386 2.86263 6.4509 3.35464 6.4509C3.84665 6.4509 4.2343 6.27386 4.51758 5.91978C4.80832 5.55832 4.95368 5.06777 4.95368 4.44813V0.17704H6.69809V4.50346C6.69809 5.62471 6.385 6.48778 5.7588 7.09267C5.1326 7.69018 4.33121 7.98893 3.35464 7.98893C2.37807 7.98893 1.57295 7.68649 0.939299 7.0816C0.3131 6.47672 0 5.61734 0 4.50346V0.17704H1.74441V4.44813C1.74441 5.06777 1.88978 5.55832 2.18052 5.91978Z" fill="currentColor"/>
    <path d="M14.7761 0.17704H16.5205V7.91148H14.7761L11.0525 3.06501V7.91148H9.30806V0.17704H10.9407L14.7761 5.15629V0.17704Z" fill="currentColor"/>
    <path d="M19.2469 0.17704H20.9913V7.91148H19.2469V0.17704Z" fill="currentColor"/>
    <path d="M26.5997 5.10097L28.5901 0.17704H30.4799L27.3377 7.91148H25.8617L22.7195 0.17704H24.6093L26.5997 5.10097Z" fill="currentColor"/>
    <path d="M37.8479 0.17704V1.71508H33.9565V3.30844H37.4565V4.78008H33.9565V6.38451H37.9709V7.91148H32.2121V0.17704H37.8479Z" fill="currentColor"/>
    <path d="M46.6675 2.74412C46.6675 3.9834 46.1718 4.78377 45.1803 5.14523L47.1595 7.91148H45.0125L43.2793 5.44398H42.0716V7.91148H40.3272V0.17704H43.2905C44.5056 0.17704 45.3704 0.379898 45.8848 0.785615C46.4066 1.19133 46.6675 1.84417 46.6675 2.74412ZM43.3464 3.95021C43.9428 3.95021 44.3491 3.85431 44.5653 3.66252C44.7815 3.47072 44.8895 3.16828 44.8895 2.75519C44.8895 2.33472 44.7777 2.04703 44.5541 1.89212C44.3304 1.73721 43.9391 1.65975 43.38 1.65975H42.0716V3.95021H43.3464Z" fill="currentColor"/>
    <path d="M51.7665 1.51591C51.4757 1.51591 51.2446 1.58598 51.0732 1.72614C50.9092 1.85892 50.8272 2.03965 50.8272 2.26833C50.8272 2.48963 50.9278 2.66667 51.1291 2.79945C51.3378 2.93223 51.8112 3.09083 52.5492 3.27524C53.2947 3.45228 53.8724 3.72153 54.2824 4.08299C54.6924 4.44444 54.8974 4.97188 54.8974 5.66528C54.8974 6.35869 54.6328 6.92301 54.1035 7.35823C53.5817 7.78608 52.8921 8 52.0348 8C50.7973 8 49.6829 7.54634 48.6914 6.639L49.7313 5.37759C50.5737 6.10788 51.3527 6.47303 52.0684 6.47303C52.3889 6.47303 52.6387 6.40664 52.8176 6.27386C53.0039 6.1337 53.0971 5.94929 53.0971 5.72061C53.0971 5.48456 53.0002 5.30014 52.8064 5.16736C52.6126 5.0272 52.2286 4.88705 51.6546 4.74689C50.7451 4.53297 50.078 4.25634 49.653 3.91701C49.2356 3.57031 49.0268 3.03181 49.0268 2.30152C49.0268 1.56385 49.2915 0.99585 49.8208 0.59751C50.3575 0.19917 51.0247 0 51.8224 0C52.3442 0 52.866 0.0885197 53.3879 0.26556C53.9097 0.4426 54.3644 0.693407 54.7521 1.01798L53.8687 2.27939C53.1903 1.7704 52.4896 1.51591 51.7665 1.51591Z" fill="currentColor"/>
    <path d="M57.18 0.17704H58.9244V7.91148H57.18V0.17704Z" fill="currentColor"/>
    <path d="M64.9578 1.67082V7.91148H63.2133V1.67082H60.9993V0.17704H67.1718V1.67082H64.9578Z" fill="currentColor"/>
    <path d="M72.6156 7.91148H70.8712V4.85754L68.1651 0.17704H70.0549L71.7434 3.05394L73.4319 0.17704H75.3217L72.6156 4.85754V7.91148Z" fill="currentColor"/>
    <path d="M86.6904 4.00553C86.6904 3.31213 86.4668 2.72199 86.0195 2.23513C85.5722 1.74827 85.0206 1.50484 84.3646 1.50484C83.716 1.50484 83.1681 1.74827 82.7208 2.23513C82.2735 2.72199 82.0499 3.31213 82.0499 4.00553C82.0499 4.69156 82.2735 5.27801 82.7208 5.76487C83.1681 6.24435 83.716 6.48409 84.3646 6.48409C85.0206 6.48409 85.5722 6.24435 86.0195 5.76487C86.4668 5.27801 86.6904 4.69156 86.6904 4.00553ZM87.2831 6.84924C86.4929 7.60904 85.52 7.98893 84.3646 7.98893C83.2091 7.98893 82.2362 7.60904 81.446 6.84924C80.6558 6.08207 80.2607 5.13047 80.2607 3.99447C80.2607 2.85846 80.6558 1.91056 81.446 1.15076C82.2362 0.383587 83.2091 0 84.3646 0C85.52 0 86.4929 0.383587 87.2831 1.15076C88.0733 1.91056 88.4684 2.85846 88.4684 3.99447C88.4684 5.13047 88.0733 6.08207 87.2831 6.84924Z" fill="currentColor"/>
    <path d="M96.1125 0.17704V1.69295H92.4895V3.36376H95.9336V4.87967H92.4895V7.91148H90.7451V0.17704H96.1125Z" fill="currentColor"/>
    <path d="M102.138 0.17704H103.882V7.91148H102.138V0.17704Z" fill="currentColor"/>
    <path d="M106.606 7.91148V0.17704H108.35V6.37344H111.682V7.91148H106.606Z" fill="currentColor"/>
    <path d="M113.76 7.91148V0.17704H115.504V6.37344H118.837V7.91148H113.76Z" fill="currentColor"/>
    <path d="M120.914 0.17704H122.658V7.91148H120.914V0.17704Z" fill="currentColor"/>
    <path d="M130.85 0.17704H132.594V7.91148H130.85L127.126 3.06501V7.91148H125.382V0.17704H127.015L130.85 5.15629V0.17704Z" fill="currentColor"/>
    <path d="M141.303 4.00553C141.303 3.31213 141.08 2.72199 140.632 2.23513C140.185 1.74827 139.633 1.50484 138.977 1.50484C138.329 1.50484 137.781 1.74827 137.334 2.23513C136.886 2.72199 136.663 3.31213 136.663 4.00553C136.663 4.69156 136.886 5.27801 137.334 5.76487C137.781 6.24435 138.329 6.48409 138.977 6.48409C139.633 6.48409 140.185 6.24435 140.632 5.76487C141.08 5.27801 141.303 4.69156 141.303 4.00553ZM141.896 6.84924C141.106 7.60904 140.133 7.98893 138.977 7.98893C137.822 7.98893 136.849 7.60904 136.059 6.84924C135.269 6.08207 134.873 5.13047 134.873 3.99447C134.873 2.85846 135.269 1.91056 136.059 1.15076C136.849 0.383587 137.822 0 138.977 0C140.133 0 141.106 0.383587 141.896 1.15076C142.686 1.91056 143.081 2.85846 143.081 3.99447C143.081 5.13047 142.686 6.08207 141.896 6.84924Z" fill="currentColor"/>
    <path d="M145.358 0.17704H147.102V7.91148H145.358V0.17704Z" fill="currentColor"/>
    <path d="M152.342 1.51591C152.051 1.51591 151.82 1.58598 151.648 1.72614C151.484 1.85892 151.402 2.03965 151.402 2.26833C151.402 2.48963 151.503 2.66667 151.704 2.79945C151.913 2.93223 152.386 3.09083 153.124 3.27524C153.87 3.45228 154.448 3.72153 154.858 4.08299C155.268 4.44444 155.473 4.97188 155.473 5.66528C155.473 6.35869 155.208 6.92301 154.679 7.35823C154.157 7.78608 153.467 8 152.61 8C151.373 8 150.258 7.54634 149.267 6.639L150.307 5.37759C151.149 6.10788 151.928 6.47303 152.644 6.47303C152.964 6.47303 153.214 6.40664 153.393 6.27386C153.579 6.1337 153.672 5.94929 153.672 5.72061C153.672 5.48456 153.575 5.30014 153.382 5.16736C153.188 5.0272 152.804 4.88705 152.23 4.74689C151.32 4.53297 150.653 4.25634 150.228 3.91701C149.811 3.57031 149.602 3.03181 149.602 2.30152C149.602 1.56385 149.867 0.99585 150.396 0.59751C150.933 0.19917 151.6 0 152.398 0C152.919 0 153.441 0.0885197 153.963 0.26556C154.485 0.4426 154.94 0.693407 155.327 1.01798L154.444 2.27939C153.766 1.7704 153.065 1.51591 152.342 1.51591Z" fill="currentColor"/>
    <path d="M163.571 5.91978C163.862 6.27386 164.253 6.4509 164.745 6.4509C165.237 6.4509 165.625 6.27386 165.908 5.91978C166.199 5.55832 166.344 5.06777 166.344 4.44813V0.17704H168.089V4.50346C168.089 5.62471 167.776 6.48778 167.149 7.09267C166.523 7.69018 165.722 7.98893 164.745 7.98893C163.769 7.98893 162.963 7.68649 162.33 7.0816C161.704 6.47672 161.391 5.61734 161.391 4.50346V0.17704H163.135V4.44813C163.135 5.06777 163.28 5.55832 163.571 5.91978Z" fill="currentColor"/>
    <path d="M177.039 2.74412C177.039 3.9834 176.543 4.78377 175.552 5.14523L177.531 7.91148H175.384L173.651 5.44398H172.443V7.91148H170.699V0.17704H173.662C174.877 0.17704 175.742 0.379898 176.256 0.785615C176.778 1.19133 177.039 1.84417 177.039 2.74412ZM173.718 3.95021C174.314 3.95021 174.72 3.85431 174.937 3.66252C175.153 3.47072 175.261 3.16828 175.261 2.75519C175.261 2.33472 175.149 2.04703 174.925 1.89212C174.702 1.73721 174.31 1.65975 173.751 1.65975H172.443V3.95021H173.718Z" fill="currentColor"/>
    <path d="M183.044 7.91148H179.622V0.17704H182.663C183.193 0.17704 183.647 0.239742 184.028 0.365145C184.415 0.490549 184.706 0.660212 184.9 0.874135C185.25 1.27248 185.425 1.72245 185.425 2.22407C185.425 2.82895 185.228 3.27893 184.833 3.574C184.698 3.67727 184.605 3.74366 184.553 3.77317C184.501 3.7953 184.408 3.83587 184.274 3.89488C184.758 3.99816 185.142 4.21577 185.425 4.54772C185.716 4.87229 185.861 5.27801 185.861 5.76487C185.861 6.30337 185.675 6.77916 185.302 7.19226C184.87 7.67174 184.117 7.91148 183.044 7.91148ZM181.366 3.30844H182.194C182.678 3.30844 183.036 3.2568 183.267 3.15353C183.506 3.05025 183.625 2.82895 183.625 2.48963C183.625 2.14292 183.517 1.91425 183.301 1.8036C183.085 1.69295 182.719 1.63762 182.205 1.63762H181.366V3.30844ZM181.366 6.4509H182.563C183.062 6.4509 183.435 6.39189 183.681 6.27386C183.934 6.14846 184.061 5.90871 184.061 5.55463C184.061 5.19318 183.927 4.95712 183.659 4.84647C183.398 4.72845 182.976 4.66943 182.395 4.66943H181.366V6.4509Z" fill="currentColor"/>
    <path d="M193.611 7.91148L192.885 6.24066H189.608L188.881 7.91148H187.025L190.402 0.17704H192.091L195.468 7.91148H193.611ZM191.252 2.47856L190.268 4.72476H192.225L191.252 2.47856Z" fill="currentColor"/>
    <path d="M202.641 0.17704H204.386V7.91148H202.641L198.918 3.06501V7.91148H197.173V0.17704H198.806L202.641 5.15629V0.17704Z" fill="currentColor"/>
    <path d="M212.681 7.91148L211.954 6.24066H208.678L207.951 7.91148H206.095L209.472 0.17704H211.16L214.537 7.91148H212.681ZM210.322 2.47856L209.337 4.72476H211.294L210.322 2.47856Z" fill="currentColor"/>
    <path d="M215.899 5.32227V3.85062H219.88V5.32227H215.899Z" fill="currentColor"/>
    <path d="M225.982 6.38451C226.839 6.38451 227.54 6.04887 228.084 5.37759L229.202 6.51729C228.315 7.50576 227.268 8 226.06 8C224.86 8 223.869 7.62379 223.086 6.87137C222.31 6.11895 221.923 5.17105 221.923 4.02766C221.923 2.8769 222.318 1.91793 223.108 1.15076C223.906 0.383587 224.879 0 226.027 0C227.309 0 228.382 0.483172 229.247 1.44952L228.162 2.66667C227.611 1.98801 226.925 1.64869 226.105 1.64869C225.449 1.64869 224.886 1.86261 224.416 2.29046C223.954 2.71093 223.723 3.28262 223.723 4.00553C223.723 4.72107 223.943 5.29645 224.383 5.73167C224.823 6.1669 225.356 6.38451 225.982 6.38451Z" fill="currentColor"/>
    <path d="M236.234 0.17704H237.979V7.91148H236.234V4.8686H233.126V7.91148H231.381V0.17704H233.126V3.40802H236.234V0.17704Z" fill="currentColor"/>
    <path d="M246.266 7.91148L245.539 6.24066H242.263L241.536 7.91148H239.68L243.057 0.17704H244.746L248.123 7.91148H246.266ZM243.907 2.47856L242.923 4.72476H244.88L243.907 2.47856Z" fill="currentColor"/>
    <path d="M256.828 3.04288L254.715 7.26971H253.675L251.573 3.04288V7.91148H249.828V0.17704H252.188L254.201 4.426L256.225 0.17704H258.573V7.91148H256.828V3.04288Z" fill="currentColor"/>
    <path d="M264.058 0.17704C265.258 0.17704 266.13 0.409405 266.675 0.874135C267.226 1.33149 267.502 2.03965 267.502 2.99862C267.502 3.95021 267.219 4.6473 266.652 5.0899C266.093 5.5325 265.236 5.7538 264.08 5.7538H263.04V7.91148H261.296V0.17704H264.058ZM264.215 4.26003C264.796 4.26003 265.191 4.14569 265.4 3.91701C265.609 3.68096 265.713 3.34163 265.713 2.89903C265.713 2.44906 265.575 2.13186 265.299 1.94744C265.031 1.75565 264.61 1.65975 264.036 1.65975H263.04V4.26003H264.215Z" fill="currentColor"/>
    <path d="M274.772 7.91148L274.045 6.24066H270.769L270.042 7.91148H268.186L271.563 0.17704H273.252L276.629 7.91148H274.772ZM272.413 2.47856L271.429 4.72476H273.386L272.413 2.47856Z" fill="currentColor"/>
    <path d="M278.334 0.17704H280.079V7.91148H278.334V0.17704Z" fill="currentColor"/>
    <path d="M287.879 3.97234H289.634V6.71646C288.859 7.57215 287.786 8 286.414 8C285.266 8 284.301 7.62379 283.518 6.87137C282.743 6.11895 282.355 5.17105 282.355 4.02766C282.355 2.8769 282.75 1.91793 283.54 1.15076C284.338 0.383587 285.296 0 286.414 0C287.54 0 288.516 0.365145 289.344 1.09544L288.438 2.39004C288.088 2.0876 287.763 1.88105 287.465 1.7704C287.174 1.65237 286.858 1.59336 286.515 1.59336C285.851 1.59336 285.292 1.81835 284.837 2.26833C284.383 2.71093 284.155 3.29737 284.155 4.02766C284.155 4.75795 284.371 5.3444 284.804 5.787C285.244 6.22222 285.765 6.43983 286.369 6.43983C286.973 6.43983 287.476 6.3255 287.879 6.09682V3.97234Z" fill="currentColor"/>
    <path d="M297.456 0.17704H299.2V7.91148H297.456L293.732 3.06501V7.91148H291.988V0.17704H293.62L297.456 5.15629V0.17704Z" fill="currentColor"/>
</svg>
        </a>
                <a href="https://faa.illinois.edu/" class="site-logo-link__logo-college" aria-label="College of Fine & Applied Arts">
            <svg xmlns="http://www.w3.org/2000/svg" width="423" height="36" viewBox="0 0 423 36" fill="none">
    <g class="icon-illinois-block-i">
        <path class="icon-illinois-block-i__outline" fill-rule="evenodd" clip-rule="evenodd"
              d="M25.5 0H0v10.5h6v15H0V36h25.5V25.5h-6v-15h6V0z"/>
        <path class="icon-illinois-block-i__fill" fill-rule="evenodd" clip-rule="evenodd"
              d="M24 9V1.5H1.5V9H6a1.5 1.5 0 011.5 1.5v15A1.5 1.5 0 016 27H1.5v7.5H24V27h-4.5a1.5 1.5 0 01-1.5-1.5v-15A1.5 1.5 0 0119.5 9H24z"
              />
    </g>
    <g class="icon-college-wordmark">
        <path
            d="M63 17.349c0 6.266 3.784 9.731 8.578 9.731 2.397 0 4.361-.982 5.892-2.743l-1.848-2.05c-1.07 1.184-2.311 1.877-3.986 1.877-3.148 0-5.199-2.6-5.199-6.902 0-4.245 2.224-6.844 5.314-6.844 1.444 0 2.513.607 3.495 1.56l1.849-2.08c-1.185-1.27-3.062-2.396-5.373-2.396-4.852 0-8.722 3.667-8.722 9.847zM79.383 19.659c0 4.707 3.206 7.421 6.73 7.421 3.552 0 6.758-2.714 6.758-7.421 0-4.736-3.206-7.45-6.758-7.45-3.524 0-6.73 2.714-6.73 7.45zm3.408 0c0-2.859 1.242-4.736 3.322-4.736s3.35 1.877 3.35 4.736c0 2.83-1.27 4.707-3.35 4.707s-3.322-1.877-3.322-4.707zM96.159 23.095c0 2.455.866 3.985 3.235 3.985.78 0 1.357-.115 1.762-.289l-.434-2.483c-.26.058-.375.058-.519.058-.347 0-.722-.289-.722-1.098V6.347h-3.322v16.748zM104 23.095c0 2.455.867 3.985 3.235 3.985.78 0 1.357-.115 1.762-.289l-.433-2.483c-.26.058-.376.058-.52.058-.347 0-.722-.289-.722-1.098V6.347H104v16.748zM110.917 19.659c0 4.678 3.062 7.421 6.99 7.421 1.79 0 3.494-.635 4.852-1.53l-1.127-2.08c-1.039.665-2.079 1.04-3.292 1.04-2.282 0-3.899-1.444-4.188-4.014h9.011c.087-.346.145-.924.145-1.56 0-3.955-2.022-6.727-5.864-6.727-3.321 0-6.527 2.83-6.527 7.45zm3.206-1.27c.289-2.369 1.733-3.61 3.408-3.61 1.935 0 2.888 1.357 2.888 3.61h-6.296zM128.017 28.813c0-.664.347-1.3 1.098-1.877.549.144 1.155.202 1.935.202h1.935c1.618 0 2.513.318 2.513 1.415 0 1.213-1.56 2.281-3.841 2.281-2.253 0-3.64-.75-3.64-2.021zm-2.772.49c0 2.484 2.512 3.697 5.892 3.697 4.621 0 7.567-2.195 7.567-4.996 0-2.454-1.791-3.494-5.199-3.494h-2.513c-1.733 0-2.31-.49-2.31-1.3 0-.635.26-.981.693-1.357.635.26 1.328.376 1.935.376 3.004 0 5.372-1.675 5.372-4.823 0-.981-.347-1.848-.809-2.396h2.6v-2.455h-5.084a6.382 6.382 0 00-2.079-.346c-2.975 0-5.603 1.819-5.603 5.082 0 1.675.895 3.032 1.848 3.754v.115c-.808.578-1.559 1.53-1.559 2.628 0 1.155.548 1.906 1.27 2.368v.116c-1.299.808-2.021 1.848-2.021 3.032zm6.065-9.153c-1.386 0-2.484-1.04-2.484-2.86 0-1.79 1.098-2.8 2.484-2.8s2.455 1.04 2.455 2.8c0 1.82-1.098 2.86-2.455 2.86zM139.828 19.659c0 4.678 3.061 7.421 6.989 7.421 1.791 0 3.495-.635 4.852-1.53l-1.126-2.08c-1.04.665-2.08 1.04-3.293 1.04-2.281 0-3.899-1.444-4.188-4.014h9.012c.086-.346.144-.924.144-1.56 0-3.955-2.022-6.727-5.863-6.727-3.322 0-6.527 2.83-6.527 7.45zm3.205-1.27c.289-2.369 1.733-3.61 3.409-3.61 1.935 0 2.888 1.357 2.888 3.61h-6.297zM160.389 19.659c0 4.707 3.206 7.421 6.73 7.421 3.552 0 6.758-2.714 6.758-7.421 0-4.736-3.206-7.45-6.758-7.45-3.524 0-6.73 2.714-6.73 7.45zm3.408 0c0-2.859 1.242-4.736 3.322-4.736 2.079 0 3.35 1.877 3.35 4.736 0 2.83-1.271 4.707-3.35 4.707-2.08 0-3.322-1.877-3.322-4.707zM184.937 6.49a7.174 7.174 0 00-2.599-.49c-3.351 0-4.708 2.137-4.708 5.082v1.473l-1.906.145v2.483h1.906v11.55h3.321v-11.55h2.773v-2.628h-2.773v-1.53c0-1.646.636-2.397 1.791-2.397.491 0 1.04.115 1.56.346l.635-2.483zM192.402 26.734h3.35V18.85h6.846v-2.83h-6.846v-5.342h8.059v-2.83h-11.409v18.886zM208.428 10.072c1.184 0 2.05-.78 2.05-1.877 0-1.127-.866-1.906-2.05-1.906-1.184 0-2.051.78-2.051 1.906 0 1.097.867 1.877 2.051 1.877zm-1.675 16.662h3.321V12.555h-3.321v14.179zM214.312 26.734h3.321v-9.905c1.184-1.155 1.993-1.762 3.235-1.762 1.56 0 2.224.867 2.224 3.206v8.46h3.321V17.84c0-3.581-1.328-5.631-4.361-5.631-1.935 0-3.379 1.01-4.65 2.252h-.116l-.231-1.906h-2.743v14.179zM229.549 19.659c0 4.678 3.062 7.421 6.99 7.421 1.79 0 3.494-.635 4.852-1.53l-1.127-2.08c-1.039.665-2.079 1.04-3.292 1.04-2.282 0-3.899-1.444-4.188-4.014h9.011c.087-.346.145-.924.145-1.56 0-3.955-2.022-6.727-5.864-6.727-3.321 0-6.527 2.83-6.527 7.45zm3.206-1.27c.289-2.369 1.733-3.61 3.408-3.61 1.935 0 2.888 1.357 2.888 3.61h-6.296zM252.912 21.565c0-1.155.751-2.08 1.82-2.946 1.213 1.704 2.802 3.35 4.477 4.765-.953.693-1.993 1.126-3.033 1.126-1.877 0-3.264-1.184-3.264-2.945zm1.993-9.385c0-1.444.838-2.426 2.022-2.426 1.098 0 1.531.78 1.531 1.79 0 1.473-1.242 2.426-2.802 3.408-.462-.982-.751-1.906-.751-2.772zm11.986 12.186c-1.01-.202-2.166-.751-3.408-1.502 1.473-1.963 2.542-4.187 3.235-6.555h-3.061c-.52 1.964-1.358 3.639-2.398 5.025-1.617-1.242-3.148-2.773-4.303-4.332 2.051-1.444 4.101-3.003 4.101-5.486 0-2.397-1.588-4.014-4.159-4.014-2.888 0-4.765 2.108-4.765 4.707 0 1.299.433 2.714 1.213 4.158-1.907 1.27-3.611 2.8-3.611 5.4 0 2.974 2.282 5.313 6.037 5.313 2.31 0 4.188-.78 5.69-2.021 1.559 1.01 3.148 1.675 4.592 2.021l.837-2.714zM278.842 18.995l.664-2.31c.606-1.993 1.155-4.13 1.675-6.238h.116c.548 2.08 1.126 4.245 1.704 6.238l.664 2.31h-4.823zm7.047 7.739h3.552l-6.152-18.886h-3.928l-6.18 18.886h3.437l1.473-5.112h6.325l1.473 5.112zM294.66 25.52c1.155.983 2.397 1.56 3.639 1.56 3.148 0 6.066-2.8 6.066-7.652 0-4.39-2.051-7.22-5.575-7.22-1.559 0-3.09.838-4.274 1.849h-.116l-.231-1.502h-2.744v19.78h3.322V27.89l-.087-2.368zm.087-2.367V16.54c1.097-1.068 2.079-1.588 3.119-1.588 2.137 0 3.062 1.675 3.062 4.505 0 3.205-1.445 4.88-3.322 4.88-.838 0-1.82-.318-2.859-1.184zM310.963 25.52c1.155.983 2.397 1.56 3.639 1.56 3.148 0 6.065-2.8 6.065-7.652 0-4.39-2.05-7.22-5.574-7.22-1.56 0-3.09.838-4.275 1.849h-.115l-.231-1.502h-2.744v19.78h3.321V27.89l-.086-2.368zm.086-2.367V16.54c1.098-1.068 2.08-1.588 3.12-1.588 2.137 0 3.061 1.675 3.061 4.505 0 3.205-1.444 4.88-3.321 4.88-.838 0-1.82-.318-2.86-1.184zM324.031 23.095c0 2.455.866 3.985 3.235 3.985.779 0 1.357-.115 1.761-.289l-.433-2.483c-.26.058-.375.058-.52.058-.346 0-.722-.289-.722-1.098V6.347h-3.321v16.748zM333.547 10.072c1.184 0 2.051-.78 2.051-1.877 0-1.127-.867-1.906-2.051-1.906-1.184 0-2.051.78-2.051 1.906 0 1.097.867 1.877 2.051 1.877zm-1.675 16.662h3.321V12.555h-3.321v14.179zM338.507 19.659c0 4.678 3.061 7.421 6.989 7.421 1.791 0 3.495-.635 4.852-1.53l-1.126-2.08c-1.04.665-2.08 1.04-3.293 1.04-2.281 0-3.899-1.444-4.188-4.014h9.012c.086-.346.144-.924.144-1.56 0-3.955-2.022-6.727-5.863-6.727-3.321 0-6.527 2.83-6.527 7.45zm3.206-1.27c.288-2.369 1.733-3.61 3.408-3.61 1.935 0 2.888 1.357 2.888 3.61h-6.296zM353.203 19.659c0 4.678 2.282 7.421 5.834 7.421 1.531 0 2.975-.837 4.015-1.877h.115l.232 1.53h2.743V6.348h-3.321v5.14l.115 2.28c-1.097-.952-2.108-1.558-3.725-1.558-3.091 0-6.008 2.83-6.008 7.45zm3.437-.03c0-2.973 1.473-4.677 3.293-4.677.953 0 1.906.318 2.888 1.184v6.613c-.953 1.097-1.877 1.588-2.975 1.588-2.051 0-3.206-1.646-3.206-4.707zM379.732 18.995l.665-2.31c.606-1.993 1.155-4.13 1.675-6.238h.115c.549 2.08 1.127 4.245 1.704 6.238l.665 2.31h-4.824zm7.048 7.739h3.552L384.18 7.848h-3.928l-6.181 18.886h3.437l1.473-5.112h6.326l1.473 5.112zM392.316 26.734h3.322V18.07c.866-2.137 2.223-2.917 3.35-2.917.606 0 .982.087 1.473.231l.578-2.888c-.434-.202-.896-.288-1.618-.288-1.502 0-3.004 1.01-4.014 2.858h-.116l-.231-2.512h-2.744v14.179zM403.582 21.94c0 3.061 1.213 5.14 4.505 5.14 1.127 0 2.109-.26 2.888-.52l-.577-2.454c-.405.173-.982.317-1.473.317-1.358 0-1.993-.808-1.993-2.483v-6.757h3.61v-2.628h-3.61v-3.87h-2.773l-.404 3.87-2.195.145v2.483h2.022v6.757zM412.111 25.117c1.387 1.126 3.437 1.963 5.372 1.963 3.582 0 5.517-1.963 5.517-4.39 0-2.656-2.137-3.58-4.072-4.302-1.531-.548-2.946-1.01-2.946-2.108 0-.895.664-1.56 2.079-1.56 1.127 0 2.137.492 3.119 1.214l1.531-2.022c-1.155-.895-2.744-1.703-4.708-1.703-3.177 0-5.17 1.761-5.17 4.244 0 2.368 2.109 3.437 3.986 4.13 1.502.577 3.033 1.097 3.033 2.281 0 .982-.722 1.704-2.253 1.704-1.444 0-2.657-.607-3.928-1.588l-1.56 2.137z"/>
    </g>
    <rect x="43.5" width="1.5" height="36" rx=".5" fill="#B3B3B3"/>
</svg>
        </a>
                <a href="/" class="site-logo-link__logo-department">
                Music
            </a>
            </div>
        </div>
    </div>
    <div class="header__navigation">
        <div class="header__eyebrow">
            <ul class="eyebrow-menu eyebrow-menu--music">
                <li class="eyebrow-menu__item">
                    <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">
                News
            </a>
                </li>
                <li class="eyebrow-menu__item">
                    <a href="#" class="
                    eyebrow-menu__item-link
                     eyebrow-menu__item-link--is-active
                ">
                Events
            </a>
                </li>
                <li class="eyebrow-menu__item">
                    <div class="quick-search quick-search--music ">
                        <form role="search" method="get" aria-label="quick search form" id="quick-search-form" class="quick-search__form" action="">
                            <input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
                            <label for="quick-search-input" class="quick-search__input-label">
            Search the website
        </label>
                            <div class="quick-search__icon">
                                <svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z"/>
</svg>
                            </div>
                            <input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
                        </form>
                    </div>
                </li>
            </ul>
        </div>
        <div class="header__main-navigation">
            <div role="navigation" aria-label="Main Navigation" class="main-navigation main-navigation--music">
                <ul class="main-navigation__list">
                    <li class="main-navigation__item">
                        <a aria-expanded="false" class="
                    js-mega-menu-toggle
                    main-navigation__item-link
                    
                    main-navigation__item-link--active-trail
                " href="https://google.com">Programs & Applying
                                <div class="main-navigation__item-link-icon">
                    <div class="main-navigation__item-link-icon-inactive">
                        <svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
    <path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
                    </div>
                    <div class="main-navigation__item-link-icon-active">
                        <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

                    </div>
                </div>
                            </a>
                        <div class="main-navigation__children">
                            <div data-active="false" class="mega-menu mega-menu--music js-mega-menu">
                                <div class="mega-menu__container">
                                    <div class="mega-menu__title">
                                        <div class="mega-menu__title-text">
                                            <a href="https://google.com" class="mega-menu__title-text-link">
                                        Programs & Applying
                                        <span class="mega-menu__title-text-link-icon">
                                            <svg aria-hidden="true" class="right-chevron-large" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
    <path class="_mark right-chevron-large__shape" fill="#FF552E" d="M.347 2.476C-.17 1.847-.1.9.504.361c.605-.539 1.516-.466 2.034.163L12 12 2.538 23.476c-.518.63-1.43.702-2.034.163-.605-.54-.675-1.486-.157-2.115L8.2 12 .347 2.476z"/>
</svg>
                                        </span>
                                    </a>
                                        </div>
                                    </div>
                                    <ul class="mega-menu__list">
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Bachelor of Arts in Urban Studies and Planning
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Minor in Urban Studies and Planning
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Master of Urban Planning
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                mega-menu__item-link--active-trail
                                            " href="http://google.com">Master of Science in Sustainable Urban Management
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">PhD in Regional Planning
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Financial Aid
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Request a Visit
                                        </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="main-navigation__item">
                        <a aria-expanded="false" class="
                    js-mega-menu-toggle
                    main-navigation__item-link
                    
                    
                " href="http://google.com">Our Work
                                <div class="main-navigation__item-link-icon">
                    <div class="main-navigation__item-link-icon-inactive">
                        <svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
    <path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
                    </div>
                    <div class="main-navigation__item-link-icon-active">
                        <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

                    </div>
                </div>
                            </a>
                        <div class="main-navigation__children">
                            <div data-active="false" class="mega-menu mega-menu--music js-mega-menu">
                                <div class="mega-menu__container">
                                    <div class="mega-menu__title">
                                        <div class="mega-menu__title-text">
                                            <a href="http://google.com" class="mega-menu__title-text-link">
                                        Our Work
                                        <span class="mega-menu__title-text-link-icon">
                                            <svg aria-hidden="true" class="right-chevron-large" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
    <path class="_mark right-chevron-large__shape" fill="#FF552E" d="M.347 2.476C-.17 1.847-.1.9.504.361c.605-.539 1.516-.466 2.034.163L12 12 2.538 23.476c-.518.63-1.43.702-2.034.163-.605-.54-.675-1.486-.157-2.115L8.2 12 .347 2.476z"/>
</svg>
                                        </span>
                                    </a>
                                        </div>
                                    </div>
                                    <ul class="mega-menu__list">
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Financial Aid
                                        </a>
                                        </li>
                                        <li class="mega-menu__item">
                                            <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Request a Visit
                                        </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="main-navigation__item">
                        <a class="
                    
                    main-navigation__item-link
                    
                    
                " href="http://google.com">People
                            </a>
                    </li>
                    <li class="main-navigation__item">
                        <a class="
                    
                    main-navigation__item-link
                    
                    
                " href="http://google.com">Student Life
                            </a>
                    </li>
                    <li class="main-navigation__item">
                        <a class="
                    
                    main-navigation__item-link
                    
                    
                " href="http://google.com">About Us
                            </a>
                    </li>
                </ul>
            </div>
            <button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle
                                                                        js-small-main-navigation-toggle
                                                                        small-main-navigation-toggle--music">
    <span class="small-main-navigation-toggle__text">
        Menu
    </span>
    <span class="small-main-navigation-toggle__icon">
        <svg class="menu" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path class="menu__shape" fill-rule="evenodd" clip-rule="evenodd" d="M11 10C11.5523 10 12 10.4477 12 11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H11ZM11 5C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H11ZM11 0C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H11Z" fill="#FF552E"/>
</svg>
    </span>
</button>
            <div role="navigation" aria-label="Small Main Navigation" class="small-main-navigation small-main-navigation--music">
                <ul class="small-main-navigation__list">
                    <li class="small-main-navigation__item">
                        <div class="small-main-navigation__item-container">
                            <a class="
                    small-main-navigation__item-link
                    
                    small-main-navigation__item-link--active-trail
                " href="https://google.com">Programs & Applying
                                            <span class="small-main-navigation__item-link-icon">
                            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

                        </span>
                                    </a>
                            <button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Programs & Applying menu">
                        <span class="small-main-navigation__item-toggle-icon">
                            <svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
    <path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
                        </span>
                    </button>
                        </div>
                        <div class="small-main-navigation__children">
                            <ul class="small-main-navigation__children-list">
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Bachelor of Arts in Urban Studies and Planning
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Minor in Urban Studies and Planning
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Master of Urban Planning
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        small-main-navigation__children-item-link--active-trail
                                    " href="http://google.com">Master of Science in Sustainable Urban Management
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">PhD in Regional Planning
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Financial Aid
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Request a Visit
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="small-main-navigation__item">
                        <div class="small-main-navigation__item-container">
                            <a class="
                    small-main-navigation__item-link
                    
                    
                " href="http://google.com">Our Work
                                            <span class="small-main-navigation__item-link-icon">
                            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

                        </span>
                                    </a>
                            <button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Our Work menu">
                        <span class="small-main-navigation__item-toggle-icon">
                            <svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
    <path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
                        </span>
                    </button>
                        </div>
                        <div class="small-main-navigation__children">
                            <ul class="small-main-navigation__children-list">
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Financial Aid
                                    </a>
                                </li>
                                <li class="small-main-navigation__children-item">
                                    <a class="
                                        small-main-navigation__children-item-link
                                        
                                        
                                    " href="http://google.com">Request a Visit
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="small-main-navigation__item">
                        <div class="small-main-navigation__item-container">
                            <a class="
                    small-main-navigation__item-link
                    
                    
                " href="http://google.com">People
                                    </a>
                        </div>
                    </li>
                    <li class="small-main-navigation__item">
                        <div class="small-main-navigation__item-container">
                            <a class="
                    small-main-navigation__item-link
                    
                    
                " href="http://google.com">Student Life
                                    </a>
                        </div>
                    </li>
                    <li class="small-main-navigation__item">
                        <div class="small-main-navigation__item-container">
                            <a class="
                    small-main-navigation__item-link
                    
                    
                " href="http://google.com">About Us
                                    </a>
                        </div>
                    </li>
                </ul>
                <div class="small-main-navigation__search">
                    <div class="quick-search quick-search--music quick-search--large">
                        <form role="search" method="get" aria-label="quick search form" id="quick-search-small-form" class="quick-search__form" action="">
                            <input id="quick-search-small-input" name="s" type="text" placeholder="Search" class="quick-search__input quick-search__input--large">
                            <label for="quick-search-small-input" class="quick-search__input-label">
            Search the website
        </label>
                            <div class="quick-search__icon">
                                <svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z"/>
</svg>
                            </div>
                            <input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% if isTestMode %}
    {% include 'partials/test-banner/test-banner.twig' %}
{% endif %}
<div class="header header--{{ siteUnit }}">
    <div class="header__brand">
        {% if siteUnit == 'dance' or siteUnit == 'theatre' or siteUnit == 'music' %}
            {% include 'bits/site-logo-link/site-logo-link.twig' with {
                background: 'dark'
            }%}
        {% elseif siteUnit == 'college'%}
            {% include 'bits/college-site-logo-link/college-site-logo-link.twig' %}
        {% else %}
            {% include 'bits/site-logo-link/site-logo-link.twig' with {
                background: 'light'
            }%}
        {% endif %}
    </div>
    <div class="header__navigation">
        <div class="header__eyebrow">
            {% include 'partials/eyebrow/eyebrow.twig' %}
        </div>
        <div class="header__main-navigation">
            {% include 'partials/main-navigation/main-navigation.twig' %}
            {% include 'partials/small-main-navigation/small-main-navigation.twig' %}
        </div>
    </div>
</div>
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Programs & Applying",
      "url": "#"
    },
    {
      "title": "Master of Science in Sustainable Urban Management",
      "url": "#"
    },
    {
      "title": "Resources",
      "url": "#"
    },
    {
      "title": "Student projects",
      "url": "#"
    }
  ],
  "eyebrowMenu": {
    "items": [
      {
        "title": "News",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      }
    ]
  },
  "mainMenu": {
    "currentPageInMenu": true,
    "items": [
      {
        "title": "Programs & Applying",
        "url": "https://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": true,
        "children": [
          {
            "title": "Bachelor of Arts in Urban Studies and Planning",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Minor in Urban Studies and Planning",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Master of Urban Planning",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Master of Science in Sustainable Urban Management",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": true,
            "children": [
              {
                "title": "What to Expect",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "How to Apply",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": false,
                "children": []
              },
              {
                "title": "Resources",
                "url": "http://google.com",
                "isActive": false,
                "isChildActive": false,
                "isDescendantActive": true,
                "children": [
                  {
                    "title": "Financial Aid",
                    "url": "http://google.com",
                    "isActive": false,
                    "isChildActive": false,
                    "isDescendantActive": true,
                    "children": []
                  },
                  {
                    "title": "Student Projects",
                    "url": "http://google.com",
                    "isActive": false,
                    "isChildActive": false,
                    "isDescendantActive": true,
                    "children": [
                      {
                        "title": "See all projects",
                        "url": "http://google.com",
                        "isActive": false,
                        "isChildActive": false,
                        "isDescendantActive": false,
                        "children": []
                      },
                      {
                        "title": "Award winning projects",
                        "url": "http://google.com",
                        "isActive": true,
                        "isChildActive": false,
                        "isDescendantActive": false,
                        "children": []
                      }
                    ]
                  },
                  {
                    "title": "Required class materials",
                    "url": "http://google.com",
                    "isActive": false,
                    "isChildActive": false,
                    "isDescendantActive": false,
                    "children": []
                  },
                  {
                    "title": "Additional Resources",
                    "url": "http://google.com",
                    "isActive": false,
                    "isChildActive": false,
                    "isDescendantActive": false,
                    "children": []
                  }
                ]
              }
            ]
          },
          {
            "title": "PhD in Regional Planning",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Financial Aid",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Request a Visit",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "Our Work",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Financial Aid",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Request a Visit",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "People",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      },
      {
        "title": "Student Life",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      },
      {
        "title": "About Us",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      }
    ]
  },
  "isTestMode": true
}
  • Content:
    breakpointLarge = breakpointHeaderLarge
    breakpointSmall = breakpointHeaderSmall
    breakpointMedium = breakpointNavigationSmall
    
    .header
        &--arch
            --backgroundColor white
    
        &--art
            --backgroundColor white
    
        &--college
            --backgroundColor white
    
        &--dance
            --backgroundColor charcoalDark
    
        &--durp
            --backgroundColor white
    
        &--landarch
            --backgroundColor white
    
        &--theatre
            --backgroundColor illiniBlue
    
        &--music
            --backgroundColor almaMater
    
        background-color var(--backgroundColor)
        display flex
        padding-top 12px
        padding-bottom 8px
        padding-left 16px
        padding-right 16px
        position relative
    
        +above(breakpointSmall)
            padding-top 32px
            padding-bottom 24px
            padding-left 32px
            padding-right 32px
    
        +above(1000px)
            @extends $contentContainer
            padding 32px 48px
    
        &__brand
            +above(breakpointLarge)
                width 320px
                margin-right 128px
                flex-shrink 0
    
        &--music &__brand
            margin-right 72px
    
        &__navigation
            display flex
            flex 1
            flex-direction column
            justify-content flex-end
    
            +above(breakpointMedium)
                justify-content space-between
    
        &__eyebrow
            display flex
            justify-content flex-end
    
            +below(breakpointMedium)
                display none
    
  • URL: /components/raw/header/header.styl
  • Filesystem Path: components/partials/header/header.styl
  • Size: 1.4 KB

There are no notes for this item.