@charset "utf-8";
/* CSS Document */

/* ###################################################################

    ITEM NAME  : BLS ev (LSK)
    VERSION    : 1.0.002
    AUTHOR     : PROJEKT 77
    AUTHOR URI : http://projekt-77.de

################################################################### */

/* ###################################################################

    //  1.    SCREEN / DEFAULTS

    //  2.    ACCESSEBILITY

    //  3.     HEADER / NAVIGATION

    //  4.     CONTENT

    //  5.     FOOTER

    //  6.    ELSE


################################################################### */


/* VERSION CONTROL
###################################################################

    // 09.05.19    CREATED
    // 18.08.20 EDIT FOR LSK

################################################################### */


/* STYLE
###################################################################

    COLOR

        BLACK            rgba(0,0,0,1.00)
        RED                rgba(216,19,40,1.00)
        BLUE            rgba(37,101,164,1.00)

        grey lines        rgba(153,153,153,1.00)
        grey areas        rgba(244,244,244,1.00)


    FONTS
                        Open Sans
                        PT Sans

    SPACER
                        100px / 40px

################################################################### */


/* SCREEN / DEFAULTS
################################################################### */

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

.columns.right {text-align: right;}

@media all and (max-width: 999px) {

    #content .columns.right,
    .filter .columns {text-align: center;}

}

img {
    width: 100%;
    max-width: 100%;
}

@media all and (min-width: 1080px) {

    #content .eight.columns img {
        width: 70%;
        max-width: 70%;
        margin: 10px 15% 0 15%;
    }

}
.red-txt {color: rgba(216,19,40,1.00);}


footer {border: 0;}


/* links
################################ */

a,
a:link,
a:visited {
    color: rgba(216,19,40,1.00);
    font-weight: 700;
}

li a,
li a:link,
li a:visited {font-weight: 400;}


    footer a,
    footer a:link,
    footer a:visited {text-decoration: none;}

    a.external-link-new-window,
    a.external-link-new-window:link,
    a.external-link-new-window:visited,

    a.internal-link,
    a.internal-link:link,
    a.internal-link:visited,

    a.mailing,
    a.mailing:link,
    a.mailing:visited,

    a.download,
    a.download:link,
    a.download:visited,

    .news-list a {text-decoration: none;}

a:hover,
a:active,
a:focus {
    color: rgba(0,0,0,1.00);
}

.red a,
.red a:link,
.red a:visited {
    color: rgba(255,255,255,1.00);
}

.red a:hover,
.red a:active,
.red a:focus {
    color: rgba(221,221,221,1.00);
}

dt a,
dt a:link,
.dt a:visited {
    text-decoration: none;
}

dt a:hover,
dt a:active,
dt a:focus {
}


    dt a::before,
    a.internal-link::before {
        color: rgba(216,19,40,1.00);
        content: "\f0c1";
        font-family: "FontAwesome";
        font-style: normal;
        font-weight: normal;
        padding-right: 5px;
        padding-left: 2px;
        text-decoration: none;
        position: relative;
    }

    a.download::before {
        color: rgba(216,19,40,1.00);
        content: "\f019";
        font-family: "FontAwesome";
        font-style: normal;
        font-weight: normal;
        padding-right: 5px;
        padding-left: 2px;
        text-decoration: none;
        position: relative;
    }

    a.mailing::before {
        color: rgba(216,19,40,1.00);
        content: "\f003";
        font-family: "FontAwesome";
        font-style: normal;
        font-weight: normal;
        padding-right: 5px;
        padding-left: 2px;
        text-decoration: none;
        position: relative;
    }

    a.external-link-new-window::before {
        color: rgba(216,19,40,1.00);
        content: "\f08e";
        font-family: "FontAwesome";
        font-style: normal;
        font-weight: normal;
        padding-right: 5px;
        padding-left: 2px;
        text-decoration: none;
        position: relative;
    }

    .red a.external-link-new-window::before,
    .red a.mailing::before,
    .red a.download::before {
        color: rgba(255,255,255,1.00);

    }

        dt a:hover::before,
        a.internal-link:hover::before,
        a.download:hover::before,
        a.mailing:hover::before,
        a.external-link-new-window:hover::before {
            color: rgba(0,0,0,1.00);
            text-decoration: none;
        }


        .red a.internal-link::before,
        .red a.download::before,
        .red a.mailing::before,
        .red a.external-link-new-window:hover::before {
            color: rgba(255,255,255,1.00);
            text-decoration: none;
        }

        .red a.internal-link:hover::before,
        .red a.download:hover::before,
        .red a.mailing:hover::before,
        .red a.external-link-new-window:hover::before {
            color: rgba(221,221,221,1.00);
            text-decoration: none;
        }

a.more,
a.more:link,
a.more:visited {
    color: rgba(216,19,40,1.00) !important;
    font-weight: 700;
}

a.more:hover,
a.more:active,
a.more:focus {
    color: rgba(0,0,0,1.00) !important;
}

/* Fließtext
################################ */

main p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 20px 0;
}

main ul {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 20px 25px;
}

main ol {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 20px 25px;
}


/* Sitemap
################################ */

main dl {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

    main dt {
        margin: 0;
        padding: 15px 0 5px 0;
    }

        main dd {
            margin: 0;
            padding: 0 0 10px 0;
        }

main dl dl {
    margin: 0 0 0 40px;
    padding: 0;
}

main dl dl dl {
    margin: 0 0 0 80px;
    padding: 0;
}

/* ACCESSEBILITY
################################################################### */

#sprungmarken {
    list-style: none;
    margin-top: -16px;
}

.invisible:focus < #sprungmarken {
    list-style: none;
    position: relative;
}

    .invisible,
    #searchform label {
          width: 0;
          height: 0;
          left: -1000px;
          top: -1000px;
          overflow: hidden;
          display: inline;
        position: absolute;
    }

    .invisible:focus {
          width: 100%;
          height: auto;
        left: 0;
          top: 0;
        color: rgba(255,255,255,1.00);
        background-color: rgba(216,19,40,1.00);
        font-size: 1rem;
        margin: 0 auto;
        padding: 20px 0 25px 0;
        text-align: center;
        z-index: 999;
    }


/* HEADER / NAVIGATION
###################################################################

/* navigation service
################################ */

#servicenav-footer ul {
    background-color: rgba(255,255,255,1.00);
    margin: 56px 0 0 0;
    padding: 0;
    list-style: none;
}

    #servicenav-footer li {
        width: auto;
        list-style: none;
        display: inline;
    }

        #servicenav-footer li a,
        #servicenav-footer li a:link,
        #servicenav-footer li a:visited {
            width: auto;
            color: rgba(0,0,0,1.00);
            font-size: 1.1rem;
            line-height: 60px;
            margin: 0;
            padding: 0 10px;
            display: inline-block;
            text-decoration: none;
        }



            #servicenav-footer li {
                content: '|';
                padding-right: 20px;
            }

        #servicenav-footer li a:hover,
        #servicenav-footer li a:active,
        #servicenav-footer li a:focus,

        #servicenav-footer li a.active {
            color: rgba(216,19,40,1.00);
            text-decoration: underline;
        }

/* navigation service
################################ */

#servicenav ul {
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
}

    #servicenav li {
        width: auto;
        list-style: none;
        display: inline;
    }

        #servicenav li a,
        #servicenav li a:link,
        #servicenav li a:visited {
            width: auto;
            color: rgba(0,0,0,1.00);
            font-size: 1.1rem;
            line-height: 60px;
            margin: 0;
            padding: 0 10px;
            display: inline-block;
            text-decoration: none;
        }

            #servicenav li:last-of-type {
                padding: 0 0 0 20px;
            }

            #servicenav li:last-of-type::before {
                content: '|';
                padding-right: 20px;
            }

        #servicenav li a:hover,
        #servicenav li a:active,
        #servicenav li a:focus,

        #servicenav li a.active {
            color: rgba(216,19,40,1.00);
            text-decoration: underline;
        }


/* navigation font size
################################ */

#fontnav ul {
    text-align: right;
    margin: 0 30px 0 0;
    padding: 0;
    list-style: none;
}

    #fontnav li {
        width: auto;
        list-style: none;
        display: inline;
    }

        #fontnav li a,
        #fontnav li a:link,
        #fontnav li a:visited {
            width: auto;
            color: rgba(0,0,0,1.00);
            font-family: 'Open Sans ExtraBold';
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 60px;
            margin: 0;
            padding: 0 3px;
            display: inline-block;
            text-decoration: none;
        }

            #fontnav li:nth-of-type(2) a {
                font-size: 1.3rem;
                line-height: 50px;
            }

            #fontnav li:nth-of-type(3) a {
                font-size: 1.5rem;
                line-height: 50px;
            }

        #fontnav li a:hover,
        #fontnav li a:active,
        #fontnav li a:focus,

        #fontnav li a:active {
            color: rgba(216,19,40,1.00);
            text-decoration: none;
        }




@media all and (max-width : 1170px) {

    #servicenav li a,
    #servicenav li a:link,
    #servicenav li a:visited {
        font-size: 1.1rem;
        padding: 0 6px;
    }

}

@media all and (max-width : 1080px) {

        #servicenav ul {margin: 16px 0 0 30px;}

            #servicenav li a,
            #servicenav li a:link,
            #servicenav li a:visited {
                font-size: 0.9rem;
                padding: 0 4px;
                line-height: 76px;
            }

        #fontnav ul {margin: 16px 30px 0 0;}

            #fontnav li a,
            #fontnav li a:link,
            #fontnav li a:visited {
                font-size: 1.0rem;
                line-height: 79px;
            }

                #fontnav li:nth-of-type(2) a {
                    font-size: 1.2rem;
                    line-height: 30px;
                }

                #fontnav li:nth-of-type(3) a {
                    font-size: 1.4rem;
                    line-height: 30px;
                }

        #searchform {
            margin: 13px 10px 0 0;
            line-height: 80px;
        }

}

/* For devices larger than 400px */
@media (max-width: 800px) {

    header .row.grey .columns:nth-of-type(1) {margin-top: 30px;}

    #servicenav ul {margin: 0;}

        #servicenav li a,
        #servicenav li a:link,
        #servicenav li a:visited {
            font-size: 0.9rem;
            padding: 0 4px;
            line-height: 1.4;
        }

    #fontnav ul {
        text-align: center;
        margin: 20px 0 15px 0;
    }

        #fontnav li a,
        #fontnav li a:link,
        #fontnav li a:visited {line-height: 1.4;}

            #fontnav li:nth-of-type(2) a {line-height: 0;}

            #fontnav li:nth-of-type(3) a {line-height: 0;}

}


@media all and (max-width : 800px) {

    main input,
            input#search {
                width: 54%;
                padding: 0 0px 0 12px;
            }


    button {left: -10%;}

}


@media all and (max-width : 600px) {

    main input,
    input#search {
        width: 64%;
        padding: 0 0px 0 12px;
    }

        button {left: -14%;}

}


@media all and (max-width : 549px) {

    #servicenav li a,
    #servicenav li a:link,
    #servicenav li a:visited {
        font-size: 0.85rem;
        padding: 0 6px;
        line-height: 2;
    }

    main input,
    input#search {
        width: 70%;
        padding: 0 0px 0 12px;
    }

        button {left: -20%;}

}


@media all and (max-width : 399px) {

    #fontnav ul {margin: 20px 20px 18px 0;}

        #fontnav li a,
        #fontnav li a:link,
        #fontnav li a:visited {
            font-size: 0.8rem;
            line-height: 1;
        }

            #fontnav li:nth-of-type(2) a {font-size: 1.0rem;}

            #fontnav li:nth-of-type(3) a {font-size: 1.2rem;}

    #searchform {
        text-align: left;
        margin: 13px 10px 0 10px;
        line-height: 1;
    }


    #searchform::before {
        top: 4px;
        height: 30px;
        margin-left: -18px;

    }

        main input,
        input#search {
            width: 72%;
            padding: 0 0 0 8px;
        }

        button {left: -23%;}

}


/* logo
################################ */

.logo img {
    /* max-width: 153px; */
    max-width: 120px;
    margin: 0;
}

@media all and (max-width : 1079px) {

    .logo {
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 150px;
            background-color: rgba(255,255,255,1.00);
            margin: 0;
            padding: 5px 0;
            position: fixed;
            overflow: hidden;
            z-index: 99;
        }

            .logo img {
                max-width: 115px;
                margin: 5px 10px 5px 30px;
            }

}

@media all and (min-width : 1080px) {

    .logo img {
        width: 100%;
        max-width: 160px;
        margin: 48px 40px 0 0;
    }

}




/* navigation main
################################ */

@media all and (max-width : 1090px) {

    header .nav .nine.columns.left {display: none;}

}

@media all and (min-width : 1091px) {

    .container.nav {
        position: relative;
        display: block;
        background-color: rgba(255,255,255,1.00);
        z-index: 9;
    }

        .container.nav::before {
            content: "";
            background: rgba(255,255,255,1.00) url("../graphic/bg/bg-1.svg") center center no-repeat;
            background-size: 270%;
            opacity: 0.2;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: 8;
        }


    .container.nav h1 {
        width: 48%;
        font-family: 'Open Sans', 'PT Sans', 'sans-serif';
        font-size: 2.0rem;
        line-height: 1.2;
        margin: 72px 0 72px 38px;
        padding: 0;
        z-index: 20;
    }


}


nav#menu .toggle,
nav#menu [id^=drop] {display: none;}

/* Giving a background-color to the nav container. */
nav#menu {
    margin: 0;
    padding: 0 37px 0 0;
    z-index: 9;
}

    /* Since we'll have the "ul li" "float:left"
     * we need to add a clear after the container. */
    nav#menu:after {
        content:"";
        display: table;
        clear: both;
    }

    /* Removing padding, margin and "list-style" from the "ul",
     * and adding "position:reltive" */
    nav#menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        float: right;
        z-index: 9;
    }

        /* Positioning the navigation items inline */
        nav#menu ul li {
            margin: 0;
            padding: 0;
            display: inline-block;
            float: left;
            position: relative;
        }

            /* Styling the links */
            nav#menu a,
            nav#menu a:link,
            nav#menu a:visited,

            nav#menu .active ul li a,
            nav#menu .active ul li a:link,
            nav#menu .active ul li a:visited,

            nav#menu ul .active ul .active ul li a,
            nav#menu ul .active ul .active ul li a:link,
            nav#menu ul .active ul .active ul li a:visited {
                color: rgba(0,0,0,1.00);
                background-color: rgba(255,255,255,1.00);
                font-family: 'Open Sans';
                letter-spacing: 0.5px;
                font-weight: 700;
                font-size: 1.1rem;
                text-transform: uppercase;
                margin: 0 3px;
                padding: 10px 12px;
                display: block;
                text-decoration: none;
            }

            /* Background color change on Hover */
            nav#menu a:hover,
            nav#menu a:active,
            nav#menu a:focus,

            nav#menu .active a,

            nav#menu .active ul li a:hover,
            nav#menu .active ul li a:active,
            nav#menu .active ul li a:focus,

            nav#menu ul .active ul .active a,

            nav#menu ul .active ul .active ul li a:hover,
            nav#menu ul .active ul .active ul li a:active,
            nav#menu ul .active ul .active ul li a:focus,

            nav#menu ul .active ul .active ul li.active a {
                color: rgba(255,255,255,1.00);
                background-color: rgba(216,19,40,1.00);
                text-decoration: none;
            }


            nav#menu .active a:hover,
            nav#menu .active a:active,
            nav#menu .active a:focus,

            nav#menu .active ul li.active a:hover,
            nav#menu .active ul li.active a:active,
            nav#menu .active ul li.active a:focus,


            nav#menu ul .active ul .active ul li.active a:hover,
            nav#menu ul .active ul .active ul li.active a:active,
            nav#menu ul .active ul .active ul li.active a:focus {
                color: rgba(255,255,255,1.00);
                background-color: rgba(0,0,0,1.00);
                text-decoration: none;
            }

                nav#menu ul li ul li:hover {  }

            /* Hide Dropdowns by Default
             * and giving it a position of absolute */
            nav#menu ul li ul {
                background-color: rgba(255,255,255,1.0);
                /* border-radius: 18px; */
                margin: 0 0 0 -6px;
                padding: 6px 0 10px 0;
                display: none;
                position: absolute;
                white-space: nowrap;
            }

                /* Display Dropdowns on Hover */
                nav#menu ul li:focus-within > ul {display: inherit;}

                nav#menu ul li:focus > ul {display: inherit;}
                nav#menu ul li:focus ul {display: inherit;}

                nav#menu ul li:hover > ul,
                nav#menu ul li:active > ul,
                nav#menu ul li:focus > ul {display: inherit;}


                /* First Tier Dropdown */
                nav#menu ul ul li {
                    width: auto;
                    margin: 0;
                    padding: 2px 6px;
                    text-align: left;
                    display: list-item;
                    position: relative;
                    float: none;
                }

nav#menu ul ul ul {
    width: auto;
    top: -10px;
    left: 98%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
    padding: 10px 0 10px 0;
    position: absolute;
    white-space: nowrap;
}


/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav#menu ul ul ul li {
    top: auto;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left: auto;
    position: relative;
}


/* Change ' +' in order to change the Dropdown symbol */
#menu li > a:after { content:  ' +'; }
#menu li > a:only-child:after { content: ''; }


/* Larger than mobile */
@media (max-width: 1320px) {

    /* Styling the links */
    nav#menu a,
    nav#menu a:link,
    nav#menu a:visited,

    nav#menu .active ul li a,
    nav#menu .active ul li a:link,
    nav#menu .active ul li a:visited,

    nav#menu ul .active ul .active ul li a,
    nav#menu ul .active ul .active ul li a:link,
    nav#menu ul .active ul .active ul li a:visited {
        /* border-radius: 12px; */
        letter-spacing: 0.2px;
        font-weight: 700;
        font-size: 1.10rem;
        padding: 10px 12px;
    }

}

/* Larger than mobile */
@media (max-width: 1200px) {

    /* Styling the links */
    nav#menu a,
    nav#menu a:link,
    nav#menu a:visited,

    nav#menu .active ul li a,
    nav#menu .active ul li a:link,
    nav#menu .active ul li a:visited,

    nav#menu ul .active ul .active ul li a,
    nav#menu ul .active ul .active ul li a:link,
    nav#menu ul .active ul .active ul li a:visited {
        /* border-radius: 10px; */
        letter-spacing: 0;
        font-weight: 700;
        font-size: 1.10rem;
        padding: 10px 12px;
    }

}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1080px) {

    header {margin-top: 130px;}

        nav#menu {
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            background-color: rgba(255,255,255,1.00);
            border-bottom: 1px solid rgba(216,19,40,1.00);
            margin: 10px 0 0 0;
            padding: 19px 0 25px 0;
            position: fixed;
            overflow: auto;
            z-index: 98;
        }

            /* Hide the navigation menu by default */
            /* Also hide the  */
            nav#menu .toggle + a,
            nav#menu .menu {display: none;}

            nav#menu .toggle + a {display: none !important;}

            /* Stylinf the toggle lable */
            nav#menu .toggle {
                color: rgba(0,0,0,1.00);
                background-color: rgba(255,255,255,1.00);
                padding: 14px 40px;

                font-size: 0.9rem;

                border: none;
                display: block;
                cursor: pointer;
                text-decoration: none;
            }

                nav#menu .toggle i {
                    color: rgba(216,19,40,1.00);
                    font-size: 2rem;
                }

            nav#menu .toggle:hover {background-color: rgba(255,255,255,1.00);}

        /* Display Dropdown when clicked on Parent Lable */
        nav#menu  [id^=drop]:checked + ul {display: block;}


            /* Removing padding, margin and "list-style" from the "ul",
            * and adding "position:reltive" */
            nav#menu ul {
                width: 100%;
                margin: 20px 40px 0 0;
                padding: 0;
            }

                /* Change menu item's width to 100% */
                nav#menu ul li {
                    width: 100%;
                    display: block;
                }

                    nav#menu a,
                    nav#menu a:link,
                    nav#menu a:visited,

                    nav#menu .active ul li a,
                    nav#menu .active ul li a:link,
                    nav#menu .active ul li a:visited,

                    nav#menu ul .active ul .active ul li a,
                    nav#menu ul .active ul .active ul li a:link,
                    nav#menu ul .active ul .active ul li a:visited {
                        color: rgba(0,0,0,1.00);
                        background-color: rgba(255,255,255,1.00);
                        border-radius: 0;
                        font-size: 1.1rem;
                        font-weight: 700;
                        text-transform: uppercase;
                        margin: 5px 0;
                        padding: 5px;
                    }

                        /* Stylinf the toggle lable */
                        nav#menu ul .toggle {
                            font-family: 'Open Sans ExtraBold';
                            color: rgba(0,0,0,1.00);
                            background-color: rgba(255,255,255,1.00);
                            margin: 5px 0;
                            padding: 5px;
                            font-size: 1.1rem;
                            font-weight: 700;
                            text-transform: uppercase;
                            display: block;
                            cursor: pointer;
                            text-decoration: none;
                        }

                            nav#menu ul .toggle::after {
                                content: ' +';
                            }

                        nav#menu ul .toggle:hover,
                        nav#menu ul .toggle:active,
                        nav#menu ul .toggle:focus {
                            color: rgba(216,19,40,1.00);
                            background-color: rgba(255,255,255,1.00);
                        }

                    nav#menu a:hover,
                    nav#menu a:active,
                    nav#menu a:focus,

                    nav#menu .active a,

                    nav#menu .active ul li a:hover,
                    nav#menu .active ul li a:active,
                    nav#menu .active ul li a:focus,

                    nav#menu ul .active ul .active a,

                    nav#menu ul .active ul .active ul li a:hover,
                    nav#menu ul .active ul .active ul li a:active,
                    nav#menu ul .active ul .active ul li a:focus,

                    nav#menu ul .active ul .active ul li.active a {
                        width: auto;
                        color: rgba(216,19,40,1.00);
                        background-color: transparent;
                        text-decoration: none;
                    }

                nav#menu ul ul .toggle,
                nav#menu ul ul a {}

                    nav ul ul ul a {
                        background-color: rgba(255,255,255,1.00);
                        margin: 0;
                        padding: 0;
                    }

                    nav#menu a:hover,
                    nav#menu ul ul ul a {
                        color: rgba(216,19,40,1.00);
                        background-color: rgba(255,255,255,1.00);
                    }

                    nav#menu ul li ul li .toggle {
                        color: rgba(0,0,0,1.00);
                        /* font-size: 1.2rem; */
                        padding: 0;
                    }

                    nav#menu ul ul a {
                        color: rgba(0,0,0,1.00);
                        /* font-size: 1.2rem; */
                        padding: 14px 20px 14px 0;
                    }

                    nav#menu ul ul ul a {
                        color: rgba(0,0,0,1.00);
                        /* font-size: 1.2rem; */
                        padding: 14px 20px 14px 0;
                    }

                    nav#menu ul li ul li .toggle,
                    nav#menu ul ul a {
                        background-color: rgba(255,255,255,1.00);
                    }

            /* Hide Dropdowns by Default
             * and giving it a position of absolute */
            nav#menu ul li ul {
                background-color: rgba(255,255,255,1.0);
                border-radius: 0;
                margin: 0 0 0 -20px;
                padding:  0;
                display: none;
                position: relative;
                white-space: nowrap;
            }

                /* First Tier Dropdown */
                nav#menu ul ul li {
                    width: auto;
                    margin: 0 0 0 -20px;
                    padding: 2px 5px;
                    text-align: right;
                    display: list-item;
                    position: relative;
                    float: none;
                }

                    /* First Tier Dropdown */
                    nav#menu ul ul li ul li {
                        width: auto;
                        margin: 0;
                        padding: 2px 40px 2px 0;
                        text-align: right;
                        display: list-item;
                        position: relative;
                        float: none;
                    }

                /* Hide Dropdowns by Default */
                nav#menu ul ul {
                    float: none;
                    position: static;
                    color: #ffffff;
                    /* has to be the same number as the "line-height" of "nav a" */
                }

                nav#menu ul li ul li ul {
                    width: auto;
                    background-color: rgba(255,255,255,1.0);
                    border-radius: 0;
                    text-align: right;
                    margin: 0;
                    padding: 5px 0 0 0;
                    display: none;
                    position: static;
                    white-space: nowrap;
                    }

                nav#menu ul li ul li a,
                nav#menu ul li ul li a:link,
                nav#menu ul li ul li a:visited,

                nav#menu .active ul li ul li a,
                nav#menu .active ul li ul li a:link,
                nav#menu .active ul li ul li a:visited,

                nav#menu ul li ul li ul li a,
                nav#menu ul li ul li ul li a:link,
                nav#menu ul li ul li ul li a:visited,

                nav#menu .active ul .active ul .active ul a,
                nav#menu .active ul .active ul .active ul a:link,
                nav#menu .active ul .active ul .active ul a:visited,

                nav#menu ul .active ul .active ul .active a,
                nav#menu ul .active ul .active ul .active a:link,
                nav#menu ul .active ul .active ul .active a:visited {
                    color: rgba(0,0,0,1.00);
                    background-color: rgba(255,255,255,1.0);
                }

                nav#menu ul li ul li a:hover,
                nav#menu ul li ul li a:active,
                nav#menu ul li ul li a:focus,

                nav#menu ul li ul li ul li a:hover,
                nav#menu ul li ul li ul li a:active,
                nav#menu ul li ul li ul li a:focus,

                nav#menu ul .active ul li a:hover,
                nav#menu ul .active ul li a:active,
                nav#menu ul .active ul li a:focus,

                nav#menu ul .active ul .active ul li a:hover,
                nav#menu ul .active ul .active ul li a:active,
                nav#menu ul .active ul .active ul li a:focus,

                nav#menu ul .active ul .active ul .active a:hover,
                nav#menu ul .active ul .active ul .active a:active,
                nav#menu ul .active ul .active ul .active a:focus {
                    color: rgba(216,19,40,1.00) ;
                    background-color: rgba(255,255,255,1.0);
                }

                    nav#menu ul .active ul .active ul .active a,
                    nav#menu ul .active ul .active ul .active a:link,
                    nav#menu ul .active ul .active ul .active a:visited {
                        color: rgba(216,19,40,1.00) !important;
                        background-color: rgba(255,255,255,1.0) !important;
                    }

                    nav#menu ul .active .toggle {
                        color: rgba(216,19,40,1.00) !important;
                        background-color: rgba(255,255,255,1.0) !important;
                    }


            /* Hide menus on hover */
            nav#menu ul ul li:hover > ul,
            nav#menu ul li:hover > ul {display: none;}

            /* Fisrt Tier Dropdown */
            nav#menu ul ul li {
                display: block;
                width: 100%;
            }

            nav#menu ul ul ul li {position: static;}

            nav#menu ul li ul li .toggle,
            nav#menu ul li ul li a {text-transform: inherit !important;}

                nav#menu ul li ul li ul li .toggle,
                nav#menu ul li ul li ul li a {font-size: 1rem !important;}


}

@media all and (max-width : 330px) {

    nav#menu ul li {
        display:block;
        width: 94%;
    }

}


/* CONTENT
################################################################### */

.content {
    padding: 66px 40px 53px 40px;
    border-right: 2px solid rgba(244,244,244,1.00);
    border-left: 2px solid rgba(244,244,244,1.00);
}

    .content.red {
        border-right: none;
        border-left: none;
    }

        .content.red.nl {
            position: relative;
            display: block;
            background-color: rgba(216,19,40,1.00);
            z-index: 1;
        }

            .content.red.nl::before {
                  content: "";
                  background: rgba(216,19,40,1.00) url("../graphic/bg/bg-10.svg") left no-repeat;
                background-size: cover;
                  opacity: 0.2;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  position: absolute;
                  z-index: -1;
            }


        footer .row.grey {
            position: relative;
            display: block;
            z-index: 1;
        }


            footer .row.grey::before {
                  content: "";
                  background: url("../graphic/bg/bg-11.svg") center bottom no-repeat;
                transform: rotate(180deg);
                background-size: 150%;
                  opacity: 0.2;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  position: absolute;
                  z-index: -1;
            }

        footer .row.grey2 {
            position: relative;
            display: block;
            z-index: 1;
        }


            footer .row.grey2::before {
                  content: "";
                  background: url("../graphic/bg/bg-11.svg") center bottom no-repeat;
                transform: rotate(180deg);
                background-size: 150%;
                  opacity: 0.2;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  position: absolute;
                  z-index: -1;
            }

    /* .content.title {padding: 66px 40px 53px 40px;} */


    .content h2 {
        width: 100%;
        color: rgba(0,0,0,1.0);
        font-family: 'PT Sans Bold';
        font-size: 2rem;
        letter-spacing: 0;
        text-transform: uppercase;
        margin: 0;
        padding: 10px 0 20px 0;
    }

    .content h3 {
        width: 100%;
        color: rgba(0,0,0,1.0);
        font-family: 'PT Sans Bold';
        font-size: 1.5rem;
        letter-spacing: 0;
        font-weight: 700;
        margin: 0;
        padding: 10px 0 20px 0;
    }

    .content h4 {
        width: 100%;
        color: rgba(0,0,0,1.0);
        font-family: 'PT Sans Bold';
        font-size: 1.2rem;
        letter-spacing: 0;
        font-weight: 700;
        margin: 0;
        padding: 10px 0 10px 0;
    }


        /* .content h2 a,
        .content h3 a,
        .content h4 a {
            color: rgba(0,0,0,1.0);
            text-decoration: none;
        } */

        .content h2 a,
        .content h3 a,
        .content h4 a {
            color: rgba(216,19,40,1.00);
            text-decoration: none;
        }

        .content h2 a:hover,
        .content h3 a:hover,
        .content h4 a:hover {
            color: rgba(0,0,0,1.0);
            text-decoration: none;
        }

        .content.red h2 a,
        .content.red h3 a,
        .content.red h4 a {
            color: rgba(255,255,255,1.00);
            text-decoration: none;
        }

        .content.red h2 a:hover,
        .content.red h3 a:hover,
        .content.red h4 a:hover {
            color: rgba(221,221,221,1.00);
            text-decoration: none;
        }





    main .content p,
    main .content ul,
    main .content ol{
        color: rgba(0,0,0,1.00);
        font-size: 1.0rem;
    }


.img-element img {margin-top: 60px;}

.content.red h2,
.content.red h3,
.content.red h4,

.content.red p,
.content.red ul,
.content.red ol {color: rgba(255,255,255,1.0);}


.content .themes .sky-form .input input,
.content .themes .sky-form .select select,
.content .themes .sky-form .textarea textarea {margin-top: 10px;}


.event-detail.booking form .row {
    margin: 0 0 20px 0;
}


/* teaser
################################ */

.teaser h1 {
    width: 40%;
    top: 120px;
    left: 40px;
    color: rgba(255,255,255,1.00);
    font-family: 'PT Sans';
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0;
    padding: 40px;
    text-align: left;
    position: absolute;
    overflow: hidden;
    display: block;
    z-index: 90;
}

@media all and (max-width: 1380px) {

    .teaser h1 {
        width: 50%;
        top: 120px;
        left: 40px;
        font-size: 2rem;
    }

}

@media all and (max-width: 1280px) {

    .teaser h1 {
        width: 40%;
        top: 60px;
        left: 40px;
        font-size: 2rem;
    }

}

@media all and (max-width: 1100px) {

    .teaser h1 {
        width: 40%;
        top: 30px;
        left: 40px;
        font-size: 2rem;
    }

}

@media all and (max-width: 999px) {

    .teaser h1 {
        width: 44%;
        top: 54px;
        left: 40px;
        font-size: 1.6rem;
    }

}

@media all and (max-width: 900px) {

    .teaser h1 {
        width: 44%;
        top: 24px;
        left: 40px;
        font-size: 1.6rem;
    }

}

@media all and (max-width: 800px) {

    .teaser h1 {
        width: 44%;
        top: 18px;
        left: 0;
        font-size: 1.4rem;
    }

}


@media all and (max-width: 700px) {

    .teaser h1 {
        width: 50%;
        top: 10px;
        left: 0;
        font-size: 1.2rem;
    }

}

@media all and (max-width: 550px) {

    .teaser h1 {
        width: 50%;
        background-color: rgba(0,0,0,0.6);
        top: 10px;
        padding: 20px;
        left: 0;
        font-size: 1.0rem;
        line-height: 1.2;
    }

}


@media all and (max-width: 500px) {

        .twelve.columns.center.teaser img {display: none;}

        .teaser h1 {
            width: calc(100% - 40px);
            background-color: rgba(0,0,0,1.0);
            top: 0;
            margin: 0 0 2px 0;
            padding: 20px;
            font-size: 1.0rem;
            line-height: 1.2;
            position: relative;
            hyphens: auto;
        }

}


/* breadcrumb
################################ */

#breadcrumb ol {
    width: auto;
    color: rgba(255,255,255,1.00);
    font-size: 0.9rem;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: inline-block;
}

    #breadcrumb ol li {display: inline-block;}

        #breadcrumb ol li::before {
            content: "\f101";
            font-family: "FontAwesome";
            font-style: normal;
            font-weight: normal;
            padding-right: 5px;
            padding-left: 2px;
            text-decoration: none;
            position: relative;
        }

            #breadcrumb ol li:nth-of-type(1)::before {display: none;}

        #breadcrumb ol li.y-a-h-next {
            color: rgba(255,255,255,1.00);
            cursor: help;
        }

            #breadcrumb ol a,
            #breadcrumb ol a:link,
            #breadcrumb ol a:visited {
                color: rgba(255,255,255,1.00);
                background-color: transparent;
                margin: 0 3px 0 0;
                padding: 0;
                text-decoration: none;
            }

                #breadcrumb ol a:hover,
                #breadcrumb ol a:active,
                #breadcrumb ol a:focus,
                #breadcrumb ol a.active {
                    color: rgba(255,255,255,1.00);
                    background-color: transparent;
                    text-decoration: underline;

                }

                    breadcrumb ol a.active {text-decoration: none;}



.four.columns.right.service {
    padding-top: 2px;
}

@media (max-width: 999px) {


    .four.columns.right.service {
    border-top: 1px solid rgba(255,255,255,1.00);
}


}



.service a,
.service a:link,
.service a:visited,
.service a:hover,
.service a:active,
.service a:focus {
    color: rgba(255,255,255,1.00);
    background-color: transparent;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 6px 5px 0 5px;
    padding: 0;
    text-decoration: none;
}

.service a.active,
.service a:hover,
.service a:active,
.service a:focus {text-decoration: underline;}


/* filter
################################ */

.filter ul {
        line-height: 2;
        margin: 0px 0 0 0;
        padding: 0;
    }

        .filter ul li {
            background-image: none;
            margin: 0 10px 0 0;
            padding: 0;
            display: inline;
        }

        /* .filter ul li:nth-of-type(1) {margin-right: 60px;} */


            .filter ul li a,
            .filter ul li a:link,
            .filter ul li a:visited {
                color: rgba(50,67,77,1.00);
                background-color: rgba(50,67,77,0.10);
                font-size: 1.00rem;
                border-radius: 28px;
                margin: 8px 0;
                padding: 2px 20px 3px 20px;
                display: inline-block;
                text-decoration: none;
            }

                .filter.number ul li a,
                .filter.number ul li a:link,
                .filter.number ul li a:visited {
                    margin: 8px 0;
                    padding: 0 12px 0 10px;
                }

            .filter ul li a:hover,
            .filter ul li a:active,
            .filter ul li a:focus,

            .filter ul li a.active {
                color: rgba(255,255,255,1.00);
                background-color: rgba(216,19,40,1.00);
            }


/* ### calender
###################### */

.cal-box {
    width: 100%;
       background-color: rgba(244,244,244,1.00);
      line-height: 1;
    margin: 0 0 30px 0;
    padding: 0 0 5px 0;
     display: inline;
    float: left;
}


@media all and (max-width: 999px) {

    .cal-box {
        width: 60%;
        margin: 10px 20% 30px 20%;
    }

}

@media all and (max-width: 600px) {

    .cal-box {
        width: 100%;
        margin: 10px 0 30px 0;
    }

}
    .cal-month {
          width: 100%;
        color: rgba(255,255,255,1.00);
        background-color: rgba(216,19,40,1.00);
          text-align: center;
        margin: 0 auto;
          padding: 5px 0 5px 0;
          display: block;
        float: left;
    }

        .month-before {
              width: 14.28%;
              text-align: center;
              margin: 0 auto;
              padding: 0;
              display: inline;
          }

              .month-before a,
              .month-before a:link,
            .month-before a:visited,

            .month-next a,
            .month-next a:link,
            .month-next a:visited {
                width: 14.28%;
                  color: rgba(255,255,255,1.00);
                text-align: center;
                margin: 0 auto;
                padding: 5px 0 5px 0;
                display: inline;
                float: left;
                text-decoration: none;
            }

                .month-before a:hover,
                .month-before a:active,
                .month-before a:focus,

                .month-next a:hover,
                .month-next a:active,
                .month-next a:focus{
                    color: rgba(0,0,0,1.00);
                    text-decoration: none;
                }

          .month-now {
              width: 71.4%;
              text-align: center;
            margin: 0 auto;
              padding: 5px 0 5px 0;
              display: inline;
              float: left;
          }

          .month-next {
              width: 14.28%;
              text-align: center;
              margin: 0 auto;
              padding: 0;
              display: inline;
          }

    .cal-detail {
      width: 100%;
      margin: 0;
      padding: 0;
      display: inline;
      float: left;
    }

          .cal-day-line {
              width: 100%;
              margin: 0;
              padding: 0;
              display: inline;
              float: left;
          }

            .cal-day {
                width: calc(14.28% - 2px);
                text-align: center;
                margin: 1px;
                padding: 10px 0;
                display: inline;
                float: left;
            }

        .cal-week-days .cal-day {
              width: 14.28%;
            color: rgba(255,255,255,1.00);
              background-color: rgba(153,153,153,1.00);
              text-align: center;
              margin: 0;
              display: inline;
              float: left;
        }

            .cal-now {
                  color: rgba(255,255,255,1.00);
                  background-color: rgba(51,51,51,0.80);
            }

            .cal-day-active {
                  width: calc(14.28% - 2px);
                 color: rgba(255,255,255,1.00);
                  background-color: rgba(216,19,40,1.00);
                  text-align: center;
                  margin: 1px;
                  padding: 10px 0;
                  position: relative;
                  display: inline;
                  float: left;
                  cursor: pointer;
            }

                  .cal-day-active a,
                  .cal-day-active a:link,
                  .cal-day-active a:visited {
                    color: rgba(255,255,255,1.00);
                    text-align: center;
                    margin: 0 auto;
                    padding: 0;
                    display: block;
                    text-decoration: none;
                }

                  .cal-day-active:hover {
                    color: rgba(255,255,255,1.00) !important;
                    background-color: rgba(0,0,0,1.00);
                    text-decoration: none;
                 }

                  .cal-day-active a:hover,
                  .cal-day-active a:active,
                  .cal-day-active a:focus {
                    color: rgba(255,255,255,1.00);
                    text-decoration: none;
                  }

                  .cal-week-days .cal-last,
                  .cal-last {margin: 0;}

                      .no-month {color: rgba(51,51,51,0.30);}


/* themes
################################ */

.themes {
    position: relative;
    display: block;
    background-color: rgba(244,244,244,1.00);
    z-index: 1;
}


    .themes::before {
        content: "";
        background: rgba(244,244,244,1.00) url("../graphic/bg/bg-8.svg") center no-repeat;
        background-size: cover;
        opacity: 0.2;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }

    .themes .row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

        .themes .three.columns {
            background-color: rgba(255,255,255,1.00);
            text-align: center;
        }

            .themes h2 {
                width: 100%;
                height: 100%;
                font-family: 'PT Sans Bold';
                font-size: 2rem;
                letter-spacing: 0;
                text-transform: uppercase;
                text-align: center;
                margin: 0;
                padding: 0;
            }

                .themes form h2 {
                    width: 100%;
                    color: rgba(216,19,40,1.00);
                    font-family: 'PT Sans Bold';
                    font-size: 2rem;
                    letter-spacing: 0;
                    text-transform: uppercase;
                    margin: 0;
                    padding: 0;
                }

                    .themes .row:nth-of-type(1) .three form h2:hover::before,
                    .themes .row:nth-of-type(2) .three form h2:hover::before {display: none;}

                    .themes .sky-form section {margin-bottom: 0;}

            .themes .three a,
            .themes .three a:link,
            .themes .three a:visited {
                color: rgba(216,19,40,1.00);
                text-decoration: none;
            }

            .themes .three a:hover,
            .themes .three a:active,
            .themes .three a:focus  {
                color: rgba(0,0,0,1.00);
                text-decoration: none;
            }

                .themes .three h2::before {
                    font-family: "FontAwesome";
                    font-size: 3rem;
                    display: block;
                    padding: 0 0 20px 0;
                    position: relative;
                }


                    .themes .row:nth-of-type(1) .three:nth-of-type(1) h2::before {content: "\f24e"; font-family: "Font Awesome 5 Free"}

                    .themes .row:nth-of-type(1) .three:nth-of-type(2) h2::before {content: "\f1cd"; font-family: "Font Awesome 5 Free"}

                    /* .themes .row:nth-of-type(1) .three:nth-of-type(3) h2::before {content: "\f11b";} */
                    .themes .row:nth-of-type(1) .three:nth-of-type(3) h2::before {content: "\f526"; font-family: "Font Awesome 5 Free";}

                    /* .themes .row:nth-of-type(1) .three:nth-of-type(4) h2::before {content: "\f0c0";} */
                    .themes .row:nth-of-type(1) .three:nth-of-type(4) h2::before {content: "\f0c0"; font-family: "Font Awesome 5 Free";}




                    /* .themes .row:nth-of-type(2) .three:nth-of-type(1) h2::before {content: "\f132";} */
                    .themes .row:nth-of-type(2) .three:nth-of-type(1) h2::before {

                        content: "";
                        width: 50px;
                        height: 50px;
                        margin: 0 auto 0 auto;
                        background: url("../graphic/default/vulnerable.svg") center no-repeat;
                        background-size: 50px;


                    }

                    /* .themes .row:nth-of-type(2) .three:nth-of-type(2) h2::before {content: "\f085";} */
                    .themes .row:nth-of-type(2) .three:nth-of-type(2) h2::before {content: "\f5a6"; font-family: "Font Awesome 5 Free";}

                    .themes .row:nth-of-type(2) .three:nth-of-type(3) h2::before {content: "\f086"; font-family: "Font Awesome 5 Free"}

                    .themes .row:nth-of-type(2) .three:nth-of-type(4) h2::before {content: "\f05a"; font-family: "Font Awesome 5 Free"}

                        .themes .row:nth-of-type(1) .three h2:hover::before,
                        .themes .row:nth-of-type(2) .three h2:hover::before {
                            content: "\f005";
                            font-family: "FontAwesome";
                            display: block;
                            position: relative;
                        }

                    /* .themes .row:nth-of-type(2) .three:nth-of-type(1) h2::before {content: "\f132";} */
                    .themes .row:nth-of-type(2) .three:nth-of-type(1) h2:hover::before {
                        background: none;
                        margin: 14px auto -14px auto;
                    }


                    .themes form.sky-form .label {
                        text-align: center;
                        margin: 5px 0 5px 0;
                        padding: 0 0 0 0;
                    }

                    .themes form.sky-form .input {
                        width: 100%;
                        text-align: center;
                        margin: 0;
                    }

@media (min-width: 1001px) {


    .themes .row {padding: 80px 40px;}

        .themes .row:nth-of-type(2) {padding: 0 40px 80px 40px;}

            .themes .three.columns {padding: 80px 40px;}
/*
                .themes .three.columns:nth-of-type(4),
                .themes .three.columns:nth-of-type(8) {padding: 31px 40px;}*/

}


@media (max-width: 1280px) {

    .themes .row {padding: 80px 40px 0 40px;}

        .themes .row:nth-of-type(2) {padding: 0 40px 80px 40px;}

            .themes .three.columns {
                width: 38%;
                margin: 20px 8%;
                padding: 80px 40px;
            }

                .themes .three.columns:nth-of-type(even) {margin-left: 0%;}
/*
                    .themes .three.columns:nth-of-type(4),
                    .themes .three.columns:nth-of-type(8) {padding: 31px 40px;}
*/
                    .themes form.sky-form .input {
                        width: 80%;
                        text-align: center;
                        margin: 0 10%;
                    }

}


@media (max-width: 800px) {

    .themes .row {padding: 80px 40px 0 40px;}

    .themes .row {
        display: flex;
           flex-direction: row;
           flex-wrap: none;
    }

        .themes .row:nth-of-type(2) {padding: 0 40px 80px 40px;}

            .themes .three.columns {
                width: 60%;
                margin: 20px 20%;
                padding: 80px 40px;
            }

            .themes .three.columns:nth-of-type(even) {margin-left: 20%;}
/*
                .themes .three.columns:nth-of-type(4),
                .themes .three.columns:nth-of-type(8) {padding: 31px 40px;}
*/
                    .themes form.sky-form .input {
                        width: 90%;
                        text-align: center;
                        margin: 0 5%;
                    }

                    .themes form.sky-form .button {
                           position: inherit;
                        display: inline-block;
                    }

}


@media (max-width: 550px) {

    .themes .row {padding: 60px 20px 0 20px;}

    .themes .row {
        display: flex;
           flex-direction: row;
           flex-wrap: none;
    }

        .themes .row:nth-of-type(2) {padding: 0 20px 60px 20px;}

            .themes .three.columns {
                width: 100%;
                margin: 20px 0;
                padding: 60px 20px;
            }

                .themes .three.columns:nth-of-type(even) {margin-left: 0%;}
/*
                .themes .three.columns:nth-of-type(4),
                .themes .three.columns:nth-of-type(8) {padding: 31px 20px;}
*/
                    .themes form.sky-form .input {
                        width: 100%;
                        text-align: center;
                        margin: 0;
                    }
}


/* title
################################

section.red.kreis {
    background: rgba(216,19,40,1.00) url("../graphic/bg/bg-2.svg") left center no-repeat;
    background-size: contain;

} */

section.red.kreis,
section.red.kreis2 {
    position: relative;
    display: block;
    background-color: rgba(216,19,40,1.00);
    z-index: 1;
}


section.red.kreis::before {
  content: "";
  background: rgba(216,19,40,1.00) url("../graphic/bg/bg-7.svg") bottom left no-repeat;
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

section.red.kreis2::before {
  content: "";
  background: rgba(216,19,40,1.00) url("../graphic/bg/bg-7.svg") bottom left no-repeat;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}



.red {background-color: rgba(216,19,40,1.00);}

.title h2 {
    width: 100%;
    color: rgba(0,0,0,1.0);
    font-family: 'PT Sans Bold';
    font-size: 2rem;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
    padding: 75px 0 20px 0;
}

    .red .title h2,
    .red .title p {color: rgba(255,255,255,1.0);}

.title p {
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0 0 36px 0;
}


/* more
################################ */

.more {padding: 9px 0 68px 0;}

    .more a,
    .more a:link,
    .more a:visited {
        color: rgba(0,0,0,1.0);
        background-color: rgba(244,244,244,1.00);
        font-size: 1.1rem;
        font-weight: 700;
        height: 30px;
        border-radius: 15px;
        margin: 0;
        padding: 8px 30px;
        text-decoration: none;
    }

    .more a:hover,
    .more a:active,
    .more a:focus {
        color: rgba(216,19,40,1.00);
        text-decoration: none;
    }

        .red .more a,
        .red .more a:link,
        .red .more a:visited {background-color: rgba(255,255,255,1.00);}


    .content.red a.more,
    .content.red a.more:link,
    .content.red a.more:visited {
        color: rgba(0,0,0,1.0);
        background-color: rgba(255,255,255,1.00);
        font-size: 1.1rem;
        font-weight: 700;
        border-radius: 15px;
        margin: 20px 0 0 0;
        padding: 8px 30px;
        display: inline-block;
        text-decoration: none;
    }

    .content.red a.more:hover,
    .content.red a.more:active,
    .content.red a.more:focus {
        color: rgba(216,19,40,1.00);
        text-decoration: none;
    }


    .event-header .more:nth-of-type(1) {
        color: rgba(0,0,0,1.0);
        background-color: rgba(244,244,244,1.00);
        font-size: 1.1rem;
        font-weight: 700;
        height: auto;
        border-radius: 12px;
        margin: 20px 0 0 0;
        padding: 4px 14px 8px 14px;
        display: inline-block;
        text-decoration: none;
    }

    .event-header .more:nth-of-type(2) {
        color: rgba(255,255,255,1.00) !important;
        background-color: rgba(216,19,40,1.00);
        font-size: 1.1rem;
        font-weight: 700;
        height: auto;
        border-radius: 12px;
        margin: 20px 0 0 40px;
        padding: 4px 14px 8px 14px;
        display: inline-block;
        text-decoration: none;
    }

        .event-header .more:hover {
            color: rgba(255,255,255,1.00) !important;
            background-color: rgba(0,0,0,1.00);
        }


/* news home
################################ */

section.news-section {
    position: relative;
    display: block;
    border-right: 2px solid rgba(244,244,244,1.00);
    border-left: 2px solid rgba(244,244,244,1.00);
    z-index: 1;
}


section.news-section::before {
      content: "";
      background: transparent url("../graphic/bg/bg-12.svg") bottom no-repeat;
    background-size: 300%;
      opacity: 0.2;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;
}

    .row.news {
        display: flex;
        flex-wrap: wrap;
    }

.news .columns {
    color: rgba(0,0,0,1.00);
    background-color: rgba(244,244,244,1.00);
    padding: 20px 20px 0 20px ;
}

    .red .news .columns {background-color: rgba(255,255,255,1.00);}

.news article p:nth-of-type(1) {
    color: rgba(85,85,85,1.00);
    padding: 10px 0 20px 0;
}

    .news h3 {
        width: 100%;
        min-height: 40px;
        font-family: 'Open Sans';
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1.4;
        margin: 0;
        padding: 0 0 10px 0;
    }

        .news h3 a,
        .news h3 a:link,
        .news h3 a:visited,

        .news p a,
        .news p a:link,
        .news p a:visited {
            color: rgba(0,0,0,1.00);
            text-decoration: none;
        }

        .news h3 a:hover,
        .news h3 a:active,
        .news h3 a:focus,

        .news p a:hover,
        .news p a:active,
        .news p a:focus {
            color: rgba(216,19,40,1.00);
            text-decoration: none;
        }

    .news p a {
        text-decoration: none;
        font-weight: 400 !important;
    }

    .news p a.more {
        text-decoration: none;
        font-weight: 700 !important;
    }

    .news p {
        hyphens: auto;
        padding: 0 0 20px 0;
    }

@media (max-width: 1280px) {

    .news .columns {
        width: 46%;
        color: rgba(0,0,0,1.00);
        background-color: rgba(244,244,244,1.00);
        padding: 20px 20px 0 20px;
        margin: 0 2% 20px 2%;

    }

}

@media (max-width: 800px) {

    .news .columns {
        width: 70%;
        color: rgba(0,0,0,1.00);
        background-color: rgba(244,244,244,1.00);
        padding: 20px 20px 0 20px;
        margin: 0 15% 20px 15%;

    }

}

@media (max-width: 550px) {

    .news .columns {
        width: 90%;
        color: rgba(0,0,0,1.00);
        background-color: rgba(244,244,244,1.00);
        padding: 20px 20px 0 20px;
        margin: 0 5% 20px 5%;

    }

}


/* news-list
################################ */

.news-list .seven.columns p:nth-of-type(1) {margin-top: 10px;}


.news-list p a {
    color: rgba(0,0,0,1.00);
    font-weight: 400;
    text-decoration: none;
}


@media (max-width: 999px) {

    .news-list p:nth-of-type(1) {margin-top: 10px;}

    .event-header {margin-top: 10px;}

}



a.back-news {
    bottom: -24px;
    left: -24px;
    text-align: center;
    font-size: 3.0rem;
    line-height: 20px;
    font-weight: 700;
    color: rgba(255,255,255,1.00);
    background-color: rgba(216,19,40,1.00);
    border: 3px solid rgba(255,255,255,1.0);
    border-radius: 100%;
    margin: 0;
    padding: 1px 13px 4px 10px;
    position: absolute;
    float: right;
}

    .more-round {
        color: rgba(255,255,255,1.00) !important;
        background-color: rgba(216,19,40,1.00);
        font-size: 1.1rem;
        font-weight: 700;
        height: auto;
        border-radius: 12px;
        margin: 0 40px 0 0;
        padding: 4px 14px 8px 14px;
        display: inline-block;
        text-decoration: none;
    }

     .more-round {margin: 15px 40px 0 0;}

        .more-round:hover {
            color: rgba(255,255,255,1.00) !important;
            background-color: rgba(0,0,0,1.00);
        }



.news-list a.more-round + strong {color: grey;}

@media (max-width: 500px) {

    .news-list a.more-round + strong {
        margin-top: 10px;
        display: inline-block;
    }

}

.event-details {
    color: rgba(216,19,40,1.00);
    display: inline-block;
    margin-bottom: 20px;
}

    .event-details p span:nth-of-type(1) {
        width: 100px;
        color: rgba(216,19,40,1.00);
        margin: 5px 0;
        display: inline;
        float: left;
    }

    .event-details p span:nth-of-type(2) {
        width: calc(100% - 100px);
        color: rgba(0,0,0,1.00);
        margin: 5px 0;
        display: inline;
        float: left;
    }

.event-details2 {font-weight: 700;}

    .event-details2 p span:nth-of-type(1) {color: rgba(216,19,40,1.00); display: block;}

    .event-details2 p span:nth-of-type(2) {color: rgba(0,0,0,1.00);}

/* event
################################ */

.red.news .columns {
    color: rgba(0,0,0,1.00);
    background-color: rgba(255,255,255,1.00);
    padding: 20px 20px 0 20px ;
}

/* about
################################ */

.about {background-color: rgba(244,244,244,1.00);}

    .about .txt {padding-right: 40px;}

.about .row .columns {margin-bottom: 75px;}

    .about .row.title .columns {margin-bottom: 40px;}

@media (max-width: 999px) {

    .about .row .columns {
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
    }

    .about .row .columns {margin-bottom: 20px;}

    .about .row .columns.txt {
        padding-right: 0;
        margin-bottom: 55px;
    }

}

/* FOOTER
################################################################### */

footer h4 {
    font-family: 'Open Sans';
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
    padding: 0 0 20px 0;
}

footer span {
    font-size: 1rem;
    line-height: 1.5;
}

/* ELSE
################################################################### */

/* main .row:nth-of-type(even) {
        background-color: red;
        margin: 0;
        padding: 0;
    } */

.row.breadcrumb {
    color: rgba(255,255,255,1.00);
    background-color: rgba(216,19,40,1.00);
    font-size: 0.9rem;
    line-height: 34px;
    margin: 0 0 0 0;
    padding: 2px 40px 4px 40px;
}


.grey {background-color: rgba(244,244,244,1.00);}


@media all and (max-width: 500px) {

    .row.breadcrumb {
        font-size: 0.9rem;
        line-height: 40px;
        margin: -2px 0 0 0;
        padding: 10px 40px 4px 40px;
    }

}

video {
    width:100%;
    height:auto;
    margin-bottom:40px;
}



details {
    margin-bottom:10px;
}

details summary {
    color: rgba(216,19,40,1.00);
    font-weight: 700;
    cursor:pointer;
    font-size:110%;
}

details summary > i.hide-if-closed {
    display:none;
}

details[open] summary > i.hide-if-open {
    display:none;
}
details[open] summary > i.hide-if-closed {
    display:inline;
}

details div.details-content {
    padding-top: 5px;
}

details summary h1::before,
details summary h2::before,
details summary h3::before,
details summary h4::before,
details summary h5::before,
details summary h6::before
{
    /*font: normal normal normal 16px/1 FontAwesome;*/
    font-family: FontAwesome;
    content: "\f0fe";
    padding-right: 5px;
}

details[open] summary h1::before,
details[open] summary h2::before,
details[open] summary h3::before,
details[open] summary h4::before,
details[open] summary h5::before,
details[open] summary h6::before
{
    /*font: normal normal normal 16px/1 FontAwesome;*/
    font-family: FontAwesome;
    content: "\f146";
    padding-right: 5px;
}