publik-base-theme/static/mnhn/_custom.scss

$toplink-separator: 1px solid rgba(34, 34, 34, 0.3);
$required-label-color: #ff0000;

%button {
    box-shadow: none;
    text-transform: uppercase;
    &:hover {
        box-shadow: none;
    }
}

%inverted-button {
    background-color: $white;
    color: $carbon;
    border: 2px solid $button-background;
    &:hover {
        border: 2px solid $button-hover-background;
        background: $gray-light-2;
        color: $carbon;
    }
}

%title {
    text-transform: uppercase;
}

main {
    line-height: 1.5em;
}
// header and navigation

div#header {
    background: $white;
    max-width: 100%;
    box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);
    padding: $space-small $space-medium;
    @media screen and ($min-desktop-viewport) {
        padding: $space-large;
    }
}
#logo {
    @media screen and ($max-mobile-viewport) {
        padding-left: unset;
    }
}
#logo.has-logo a::before {
    @media screen and ($min-desktop-viewport) {
        z-index: 3;
        width: 100px;
        height: 62.5px
    }
}
.site-nav {
    z-index: 2;
    margin-bottom: $space-xlarge;
    @media screen and ($min-desktop-viewport) {
        margin-top: -$space-xlarge * 1.75;
    }
}
div#nav {
    max-width: 100%;
    padding: 0 $space-large 0 $space-small;

}
div.gru-nav {
    @media screen and ($min-desktop-viewport) {
        text-align: right;
    }
    @media screen and ($max-mobile-viewport) {
        .gru-nav-button {
            right: $space-medium;
            left: unset;
            & + ul::before {
                display: none;
            }
        }
        &.togglable .menu {
            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);
            & > li {
                border-bottom: 1px solid $gray-light-3;
            }
        }
    }
    li .menu--label, li .submenu--label {
        text-transform: uppercase;
        font-size: $fz-small;
        &:hover {
            padding-bottom: $space-small;
            border-bottom: 2px solid $carbon;
        }
    }
    li.selected .menu--label {
        padding-bottom: $space-small;
        border-bottom: 2px solid $carbon;
    }
    .submenu {
        @media screen and ($min-desktop-viewport) {
            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);
            font-size: $fz-xsmall;
            z-index: 101;
        }
    }
}
#toplinks {
    text-transform: uppercase;
    font-size: $fz-xxsmall;
    font-weight: 700;
    right: $space-xlarge;
    @media screen and ($max-mobile-viewport) {
        margin-right: $nav-menu-side;
        background: transparent;
    }
    a {
        color: $carbon;
        @media screen and ($max-mobile-viewport) {
            padding: $space-medium 0;
            margin-left: $space-large;
        }
        @media screen and ($min-desktop-viewport) {
            padding: $space-xsmall;
            &:not(:first-child) {
                padding-left: $space-medium;
                border-left: $toplink-separator;
            }
        }
    }
}

div#main-content-wrapper {
    z-index: 1;
}


a#publik-portal-agent {
    right: 45%;
    left: 45%;
    text-align: center;
}

// forms

.title label {
    text-transform: uppercase;
    font-weight: 700;
}

#side {
    font-size: 90%;
    border: $wcs-step-border-bottom;
    @media screen and ($min-desktop-viewport) {
        box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.1);
    }
}
[role="radiogroup"] {
    margin-top: $space-medium;
}
.previous-button button {
    @extend %inverted-button;
}

label .required {
    color: $required-label-color;
}

.TextWidget + .comment-field > p:first-child {
    margin-top: -$space-medium * 1.5;
}
// cells

.cell {
    h1, h2, h3, h4, h5, h6 {
        text-transform: uppercase;
        text-align: center;
    }
    h1 {
        font-size: 52px;
    }
    h2 {
        font-size: 36px;
    }
}

// links / underline expand/collapse animation
main a:not(.links-list *, .categories-cell *, .carrousel-content *, .pk-button, .pk-big-button, .account-management *, .collection-button) {
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: center 100%;
    background-image: linear-gradient(120deg, lighten($epicea, 15%), lighten($epicea, 15%));
    transition: background-size .2s ease-in-out;
    &:hover {
        background-image: linear-gradient(120deg, lighten($epicea, 35%), lighten($epicea, 35%));
        background-size: 100% 100%;
    }
}
//  other content

hr {
    margin: $space-large 0;
    border: none;
    border-bottom: 1px solid $gray-light-3;

}

.collection-button {
    @extend %inverted-button;
    margin-bottom: $space-small;
    margin-right: $space-xsmall;
    margin-left: $space-xsmall;
    display: inline-block;
}
// footers

.dark-footer {
    background: $carbon;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: $space-large;

    img {
        margin-right: $space-large;
    }
    a {
        font-weight: 400;
        color: $white;
        &::after {
            font-family: FontAwesome;
            content: "\f061";
            margin-left: $space-small;

        }
    }
}
#footer-wrapper {
    margin-top: 0;
}