.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: fixed;
    z-index: 2000;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        content: '';
        display: block;
        /*border: 5px solid #2980b9;*/
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 0;
        background: #79A70A;
        background: linear-gradient(#9BC90D 0%, #79A70A 100%);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
        text-align: center;
    }

.ribbon-bottom-right {
    bottom: 0px;
    right: 0px;
}

    .ribbon-bottom-right::before,
    .ribbon-bottom-right::after {
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-bottom-right::before {
        bottom: 0;
        left: 0;
    }

    .ribbon-bottom-right::after {
        top: 0;
        right: 0;
    }

    .ribbon-bottom-right span {
        left: -25px;
        bottom: 30px;
        transform: rotate(-45deg);
    }

.ribbon-aktiviteter-fullbokad {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon-aktiviteter-fullbokad span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#F70505 0%, #8F0808 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon-aktiviteter-fullbokad span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #8F0808;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #8F0808;
        }

        .ribbon-aktiviteter-fullbokad span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #8F0808;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #8F0808;
        }

.ribbon-aktiviteter {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon-aktiviteter span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#9BC90D 0%, #79A70A 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon-aktiviteter span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #79A70A;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

        .ribbon-aktiviteter span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #79A70A;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

.ribbon-ansok-bidrag {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon-ansok-bidrag span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#9BC90D 0%, #79A70A 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon-ansok-bidrag span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #79A70A;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

        .ribbon-ansok-bidrag span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #79A70A;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

.ribbon-ansok-koplats {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon-ansok-koplats span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#659DD6 0%, #44698E 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon-ansok-koplats span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #44698E;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #44698E;
        }

        .ribbon-ansok-koplats span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #44698E;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #44698E;
        }

.ribbon-ansok-ovrigt {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon-ansok-ovrigt span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#F2EE00 0%, #898900 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon-ansok-ovrigt span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #898900;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #898900;
        }

        .ribbon-ansok-ovrigt span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #898900;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #898900;
        }

/********/
.ribbon-red {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: fixed;
    z-index: 2000;
}

    .ribbon-red::before,
    .ribbon-red::after {
        position: absolute;
        content: '';
        display: block;
        /*border: 5px solid #2980b9;*/
    }

    .ribbon-red span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 0;
        background: linear-gradient(#7F0037 0%, #FF0000 100%);
        /*box-shadow: 0 5px 10px rgba(0,0,0,.1);*/
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /*text-transform: uppercase;*/
        text-align: center;
    }

/********/
.ribbon-yellow {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: fixed;
    z-index: 2000;
}

    .ribbon-yellow::before,
    .ribbon-yellow::after {
        position: absolute;
        content: '';
        display: block;
        /*border: 5px solid #2980b9;*/
    }

    .ribbon-yellow span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 0;
        background: linear-gradient(#FF6A00 0%, #FFD800 100%);
        /*box-shadow: 0 5px 10px rgba(0,0,0,.1);*/
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /*text-transform: uppercase;*/
        text-align: center;
    }