.page_header > div { background-color: #4bb; background-image: linear-gradient(#4bb, #aec); } .page_header > div > div { margin: auto; padding: 0 1.5em; max-width: calc(960px - 3em); background-repeat: no-repeat; background-position: center center; background-size: contain; overflow: hidden; } /* .page_header > div > div { background-image: url('/data/861b9a42-20d5-43cd-b272-8d0e020beeda'); } */ .page_header > div > div.image_1 { background-image: url('/data/891f2678-1b64-4c30-8f2e-54969d1e580d'); } .page_header > div > div.image_2 { background-image: url('/data/f12ae6e7-e8ad-460d-a1d9-8b684b8dbb04'); } .page_header > div > div.image_3 { background-image: url('/data/1aae6e48-d533-4287-a6da-9554ef069708'); } .page_header > div > div.image_4 { background-image: url('/data/4c3fd277-7999-47d0-8d33-1041f88071f1'); } .page_header > div > div > a:first-child { float: left; display: block; padding: 1.25em 0; width: 13.5em; height: 7.5em; } .page_header > div > div > a:last-child { float: right; display: block; padding: 2.75em 0 2.25em 0; width: 9em; height: 5em; /* width: 11.25em; height: 6.25em; */ } .page_header > div > div > a > img { margin: 0; padding: 0; width: inherit; height: inherit; border: none; } .page_header > nav { background-color: #235; border-top: 0.2em solid #fff; } .page_header > nav > ul { list-style-type: none; margin: 0 auto; padding: 0 1.5em; max-width: calc(960px - 3em); overflow: hidden; } .page_header > nav > ul > li { float: left; margin: 0; padding: 0; width: 50%; } .page_header > nav > ul > li > a { display: block; width: calc(100% - 0.25em); height: 2.5em; line-height: 2.5em; color: #fff; font-size: 1.25em; text-align: center; text-decoration: none; border: 0.125em solid #235; border-top: none; border-bottom: none; background-color: #235; transition: background-color 0.2s, border-color 0.2s; } .page_header > nav > ul > li > a > svg { width: 1em; height: 1.25em; } .page_header > nav > ul > li > a > svg > rect { stroke: none; fill: #fff; } .page_header > nav > ul > li > a > svg > ellipse { stroke: #fff; stroke-width: 0.15; fill: none; } .page_header > nav > ul > li > a > svg > circle { stroke: none; fill: #235; transition: fill 0.2s; } .page_header > nav > ul > li > a:hover { border-color: #fff; background-color: #a22; } .page_header > nav > ul > li > a:hover > svg > circle { fill: #a22; } @media screen and (max-width: 1023px) { .page_header > nav > ul { padding: 0; max-width: 100%; } .page_header > nav > ul > li { float: none; width: 100%; } .page_header > nav > ul > li > a { width: 100%; border-top: 0.125em solid #235; border-bottom: 0.125em solid #235; border-left: none; border-right: none; } .page_header > nav > ul > li:first-child > a { border-top: none; } .page_header > nav > ul > li:last-child > a { border-bottom: none; } }