:root {
    --bkc-blue-100: #b0c9ea; /* rgb(176, 201, 234) */
    --bkc-blue-200: #6583c2; /* rgb(101, 131, 194) */
    --bkc-blue-300: #343e76; /* rgb(52, 62, 118) */
    --bkc-blue-350: #464b81; /* rgb(70, 75, 129) */
    --bkc-orange:   #e85c0f; /* rgb(232, 92, 15) */
}

.text-bkc-blue100, .text-bkc-blue100-hover:hover {color: var(--bkc-blue-100) !important;}
.text-bkc-blue200, .text-bkc-blue200-hover:hover {color: var(--bkc-blue-200) !important;}
.text-bkc-blue300, .text-bkc-blue300-hover:hover {color: var(--bkc-blue-300) !important;}
.text-bkc-orange, .text-bkc-orange-hover:hover {color: var(--bkc-orange) !important;}

.bg-bkc-blue100, .bg-bkc-blue100-hover:hover {background-color: var(--bkc-blue-100) !important;}
.bg-bkc-blue100\/\[\.1\], .bg-bkc-blue100-hover\/\[\.1\]:hover {background-color: rgb(176 201 234 / .1) !important;}
.bg-bkc-blue100\/\[\.2\], .bg-bkc-blue100-hover\/\[\.2\]:hover {background-color: rgb(176 201 234 / .2) !important;}
.bg-bkc-blue100\/\[\.6\], .bg-bkc-blue100-hover\/\[\.6\]:hover {background-color: rgb(176 201 234 / .6) !important;}
.bg-bkc-blue100\/\[\.8\], .bg-bkc-blue100-hover\/\[\.8\]:hover {background-color: rgb(176 201 234 / .8) !important;}

.bg-bkc-blue200, .bg-bkc-blue200-hover:hover {background-color: var(--bkc-blue-200) !important;}
.bg-bkc-blue200\/\[\.1\], .bg-bkc-blue200-hover\/\[\.1\]:hover {background-color: rgb(101 131 194 / .1) !important;}
.bg-bkc-blue200\/\[\.2\], .bg-bkc-blue200-hover\/\[\.2\]:hover {background-color: rgb(101 131 194 / .2) !important;}
.bg-bkc-blue200\/\[\.6\], .bg-bkc-blue200-hover\/\[\.6\]:hover {background-color: rgb(101 131 194 / .6) !important;}
.bg-bkc-blue200\/\[\.8\], .bg-bkc-blue200-hover\/\[\.8\]:hover {background-color: rgb(101 131 194 / .8) !important;}

.bg-bkc-blue300, .bg-bkc-blue300-hover:hover {background-color: var(--bkc-blue-300) !important;}
.bg-bkc-blue300\/\[\.6\], .bg-bkc-blue300-hover\/\[\.6\]:hover {background-color: rgb(52 62 118 / .6) !important;}
.bg-bkc-blue300\/\[\.8\], .bg-bkc-blue300-hover\/\[\.8\]:hover {background-color: rgb(52 62 118 / .8) !important;}

.bg-bkc-orange, .bg-bkc-orange-hover:hover {background-color: var(--bkc-orange) !important;}
.bg-bkc-orange\/\[\.6\], .bg-bkc-orange-hover\/\[\.6\]:hover {background-color: rgb(232 92 15 / .6) !important;}
.bg-bkc-orange\/\[\.8\], .bg-bkc-orange-hover\/\[\.8\]:hover {background-color: rgb(232 92 15 / .8) !important;}

.navbar {
    box-shadow: 0px 12px 12px -8px rgba(var(--mdb-box-shadow-color-rgb),0.07),0px 4px 4px -1px rgba(var(--mdb-box-shadow-color-rgb),0.05) !important;
}

/*
 * MDB - Extend
*/
section#content a {
    color: var(--bkc-orange);
    /*text-decoration: underline;*/
}
section#content a:hover {
    /*color: var(--bkc-orange) !important;*/
    text-decoration: none;
}
.shadow-inner-bottom {
    box-shadow: inset 0 -2px 4px 0 rgba(var(--mdb-box-shadow-color-rgb), 0.07) !important;
}

/*
 * BKC
*/
body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100svh;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
main {
    min-height: calc(100svh - 224px);
    /*padding-top: 60px;*/
}
/*main > section#content > article {*/
/*    hyphens: auto;*/
/*}*/
@media (max-width: 767px) {
    main {
        min-height: calc(100svh - 146px);
        /*padding-top: 50px;*/
    }
}
footer .btn-facebook:hover {
    background-color: rgba(59, 89, 152, 1);
}
footer .btn-facebook {
    background-color: rgba(59, 89, 152, 0.6);
}
footer .btn-instagram:hover {
    background-color: rgba(172, 43, 172, 1);
}
footer .btn-instagram {
    background-color: rgba(172, 43, 172, 0.6);
}
footer .btn-youtube:hover {
    background-color: rgba(204, 24, 30, 1);
}
footer .btn-youtube {
    background-color: rgba(204, 24, 30, 0.6);
}


/* Root - ShortcutMenu */
body.rootpage nav#shortcuts .nav-pills .nav-link {
    font-size: 1.125rem;
}
footer .nav-pills .nav-link {
    background-color: transparent !important;
}

.card .staff-image-empty {
    height: 90px;
    width: 90px;
    font-size: 70px;
    color: rgb(52 62 118 / .6) !important;
}
.tx-kesearch-pi1 #results .result-list-item .hit {
    color: var(--bkc-orange) !important;
    font-weight: bold;
}

section#hero .page-hero {
    height: 200px;
}
body.concertpage section#hero .page-hero,
body.staffpage section#hero .page-hero{
    height: 400px;
}
section#hero img#hero-image {
    max-height: 350px;
    width: auto;
    max-width: 350px;
    height: auto;
}
@media (max-width: 767px) {
    section#hero img#hero-image {
        max-height: 250px;
    }
}


main section#content {
    hyphens: auto ;
}


/* Responsive Table */
@media only screen and (max-width: 767px) {

    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table tr { border: 1px solid #ccc; }

    table tr td {
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee;*/
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align:left;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    td:before { content: attr(data-title); }
}

img {
  pointer-events: none; }
