.teaser-large { position: relative; margin: 5rem 0 7.5rem 0; background-color: $secondary; border-radius: 30px; color: #fff; &.bg-nav-teaser { background-image: url("../images/backgrounds/category-navigation.jpg"); background-repeat: no-repeat; background-position: 0 0; background-size: cover; } .ce_image { position: absolute; left: 34px; top: 50%; transform: translate(0, -50%); .image_container { position: relative; width: 298px; height: 298px; background: transparent url("../images/elements/highlight-star.svg") no-repeat left top; background-size: 100% auto; } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; } } .ce_text { padding: 25px 0 12px 330px; h3 { padding: 0 0 5px 0; font-family: 'Lato', sans-serif; font-size: size(34); line-height: size(40); } .text { } p { padding: 0; margin: 0; font-size: size(28); line-height: size(34); } } .ce_hyperlink { padding: 8px 36px 27px 330px; display: flex; justify-content: flex-end; a { @include button(); padding: 10px 24px; border-radius: 25px; font-size: size(22); line-height: size(26); } } .mod_navigation { ul { display: flex; justify-content: space-evenly; padding: 0 0 0 304px; background: $secondary; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } li { flex-grow: 1; flex-basis: 0; &:last-child { a, strong { color: #fff; background: $font; border-bottom-right-radius: 30px; &:hover { color: rgba(255, 255, 255, .3); } } } } a, strong { display: block; padding: 9px 0 2px 0; color: $font; font-family: 'Mohave', sans-serif; font-weight: 700; text-align: center; text-transform: uppercase; font-size: size(54); line-height: size(64); text-decoration: none; @include transition(); &:hover { color: #fff; } } } }