a {
    text-decoration: none;
    color: $red;
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;

    @include transition-property(all);
    @include transition-duration(0.5s);

    &:after {
        position: absolute;
        top: 95%;
        left: 0;
        width: 100%;
        height: 1px;
        background: $red;
        content: '';
        opacity: 0;
        @include transition(height 0.3s, opacity 0.3s, transform 0.3s);
        @include transform(translateY(-10px));
    }

    &:hover:after {
        height: 3px;
        opacity: 1;
        @include transform(translateY(0px));

    }
}

h1 {
    font-size: 2.2em;
    line-height: 1.15;
    margin: 0 auto 8px auto;
    padding-bottom: 8px;
    //border-bottom: 1px solid $body-font-color;
    word-break: break-word;

    @include breakpoint($mobile-s) {
        font-size: 2.6em;
    }
}

h2 {
    font-size: 1.6em;
    line-height: 110%;
    border-bottom: 1px solid $body-font-color;
    margin: 0 auto 16px auto;

    &.smallFont {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 8px;
    }
}

h3 {
    font-size: 1.4em;
    line-height: 110%;
    //border-bottom: 1px solid $body-font-color;
    margin: 0 auto 8px auto;
}

p.headline {
    //@extend h2;
    border-bottom: 1px solid $body-font-color;
    font-size: 120%;
    padding: 0 0 8px;
    margin: 0 0 8px;
}

p {
    margin: 0 0 16px;
}

ul {
    @extend p;
    list-style: circle url('../Images/listponint.png') outside;
    margin-left: 32px;
}

ol {
    @extend p;
}

.align-center {
    text-align: center;
}

span.red {
    color: $red;
}
span.magenta {
    color: #c7348c;
}
span.font-noto,
.font-noto {
    font-family: 'Noto-Serif', serif;
}

strong, b {
    font-weight: bold;
}

em {
    font-style: italic;
}

sub, sup {
    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
    font-size: 75%;

    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
    line-height: 0;

    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
    position: relative;

    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
    vertical-align: baseline;
}

sup {
    /* Move the superscripted text up */
    top: -0.5em;
}

sub {
    /* Move the subscripted text down, but only half as far down as the superscript moved up */
    bottom: -0.25em;
}

div.textCols2 {

    @include breakpoint($mobile-l) {
        column-count: 2;

        p, li {
            break-inside: avoid;
        }
    }
}

.ce-headline-center,
.text-center {
    text-align: center;
}

.ce-headline-right,
.text-right {
    text-align: right;
}


.button {
    &:after {
        content: normal;
    }
}

.button-hollow {
    @extend .button;
    @extend .hollow;
}

.button-secondary {
    @extend .button;
    @extend .secondary;
}

.button-secondary-hollow {
    @extend .button;
    @extend .secondary;
    @extend .hollow;
}

.f3-widget-paginator {
    margin: 10px 0;
    display: inline-block;
    li {
        float: left;
        list-style: none;
        margin-right: 10px;
        font-weight: bold;
    }
}