.page_header { background-image: url("/data/f205233a-c443-4e6d-ba76-199a2641455f"); background-size: cover; background-position: center center; } .page_header > div { max-width: calc(1000px - 10em); padding: 0 5em; margin: auto; overflow: hidden; } .page_header > div > a { display: block; float: left; width: 15em; height: 4em; padding: 1.25em 1.5em; margin-bottom: 2em; border-bottom-left-radius: 0.7em; border-bottom-right-radius: 0.7em; background-color: #fff; } .page_header > div > a > img { width: 15em; height: 4em; border: none; } .page_header > div > aside { float: right; } .page_header > div > aside > a { display: block; float: left; width: 5em; height: 5em; margin: 0; opacity: 0.9; padding: 1em 0.25em; transition: all 0.2s; } .page_header > div > aside > a > img { width: inherit; height: inherit; border: none; } .page_header > div > aside > a:hover { width: 5.5em; height: 5.5em; padding: 0.75em 0; opacity: 1; } /* .kapittel { padding: 1.5em 0 0 0; font-size: 1.25em; } .kapittel.orange { color: #EE6B11; } .kapittel.green { color: #418833; } .kapittel.purple { color: #994888; } */ .kapittel { margin: 1em 0; width: 7em; height: 2em; font-size: 1.15em; color: #fff; background-size: 7em 2em; overflow: hidden; } .kapittel > div { float: left; display: block; width: 4.75em; height: 2em; line-height: 1.75em; text-align: center; } .kapittel > div > span { font-size: 0.75em; } .kapittel > span { float: right; display: block; width: 2.25em; height: 2em; line-height: 2em; text-align: center; } .kapittel.orange { background-image: url('/data/70f56b64-f627-4df5-9b70-7fb0bc9fcf39'); } .kapittel.green { background-image: url('/data/1c2b8eae-c6ff-4f08-bada-2eb1f94dc658'); } .kapittel.purple { background-image: url('/data/1fc1e86d-7a2f-4355-964f-03e93bf9b69f'); }