/* Components — everything the theme composes pages out of: boxes and their grids, the
   header and navigation, sliders, people and event listings, the sidebar and footer
   furniture. Third of the three contiguous pieces described at the top of layout.css. */
.accordion {
    outline: 0
}
p+.accordion {
    margin-top: var(--space-md)
}
.accordion+h3 {
    margin-top: var(--space-lg)
}
.accordion__header a {
    display: block;
    color: var(--color-dark)
}
.accordion__header a h1,
.accordion__header a h2,
.accordion__header a h3,
.accordion__header a h4,
.accordion__header a h5,
.accordion__header a h6,
.accordion__header a p {
    line-height: 36px;
    margin: 0
}
.accordion__content {
    display: none;
    box-sizing: border-box
}
.accordion__content.active {
    display: block
}
.accordion__content p {
    margin: var(--space-md) 0
}
.accordion__content p:first-child {
    margin-top: 0
}
.accordion--icon .accordion__header>a {
    box-sizing: border-box;
    position: relative
}
.accordion--icon .accordion__header .accordion__icon {
    position: absolute;
    top: 19px;
    font-size: inherit
}
.accordion--icon .accordion__header p .accordion__icon {
    margin-top: -8px
}
.accordion--icon .accordion__header h1 .accordion__icon {
    margin-top: -14px
}
.accordion--icon .accordion__header h2 .accordion__icon {
    margin-top: -var(--space-md)
}
.accordion--icon .accordion__header h3 .accordion__icon {
    margin-top: -10px
}
.accordion--icon .accordion__header h4 .accordion__icon,
.accordion--icon .accordion__header h5 .accordion__icon {
    margin-top: -8px
}
.accordion--icon .accordion__header h6 .accordion__icon {
    margin-top: -6px
}
.accordion--icon--left .accordion__header>a {
    padding-left: 36px
}
.accordion--icon--left .accordion__icon {
    left: var(--space-md)
}
.accordion--default .accordion__header h1 .accordion__icon,
.accordion--default .accordion__header h2 .accordion__icon,
.accordion--default .accordion__header h3 .accordion__icon,
.accordion--default .accordion__header h4 .accordion__icon,
.accordion--default .accordion__header h5 .accordion__icon,
.accordion--default .accordion__header h6 .accordion__icon,
.accordion--default .accordion__header p .accordion__icon {
    margin-top: -7px;
    font-size: 14px
}
.accordion--icon--left.accordion--default .accordion__header>a {
    padding-left: var(--space-lg)
}
.accordion--icon--left.accordion--default .accordion__icon {
    left: 0
}
.icon,
.fc-prev-button,
.fc-next-button {
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
/* The size is a default every icon-bearing component overrides. `:where()` gives it zero
   specificity, so `.social__icon` and the four others win by rule instead of by sitting
   further down the file — which is exactly what made this rule unmovable before. */
:where(.icon, .fc-prev-button, .fc-next-button) {
    font-size: inherit
}

.play__button {
	    position: absolute;
    top: 40%;
    left: 40%;
    color: #66666;
    font-size: 2em;
    background: var(--color-white);
    mix-blend-mode: screen;
    padding: var(--space-8) var(--space-lg)
}
.slider {
    position: relative
}
/* Cycle2 sizes the slideshow by leaving slide 0 in flow and stacking the rest on top of it
   absolutely, but it gets there in two steps: every slide goes absolute first, so the
   container collapses to zero for a frame, and before the script runs at all the slides are
   still a plain column of every image. .topimage carries the view-transition-name, so both
   land inside the incoming page transition and flicker. slider-gallery.php writes slide 0's
   ratio here, which gives the container the same height in all three states. */
.slider__slides {
    margin: 0;
    padding: 0;
    list-style: none;
    aspect-ratio: var(--slider-ratio);
    overflow: hidden
}
.slider__slide {
    width: 100%
}
.color-one {
    color: var(--color-dark)
}
/* The muted prefix of a headline. It renders at 28px, where 3:1 is the AA floor;
   `--color-gray-cool` is 2.61 and the lighter variant it used to have was 1.95. */
.color-three {
    color: var(--color-gray-cool-dark)
}
.color-four {
    color: var(--color-red)
}
.color-bright {
    color: #fff
}
.color-error {
    color: var(--color-red)
}
.color-success {
    color: var(--color-green)
}
@media screen and (width <= 976px) {
    body {
        padding-top: 154px
    }
}
@media screen and (width <= 480px) {
    body {
        padding-top: 123px
    }
}
@media screen and (width <= 480px) {
    .wrap--grid {
        padding: 0px
    }
}
@media screen and (width <= 976px) {
    .wrap--header {
        padding: 0;
        position: fixed;
        z-index: 2000000;
        top: 0;
        left: 50%;
        margin-left: -352px;
        width: 704px;
        height: 154px
    }
}
@media screen and (width <= 720px) {
    .wrap--header {
        left: 0;
        margin-left: 0;
        width: 100%;
        background: #fff
    }
}
@media screen and (width <= 480px) {
    .wrap--header {
        height: 123px
    }
}
.area-logos {
    background: #fff;
    padding: var(--space-sm) 0
}
.logo-kisd {
    float: left;
    margin-left: var(--space-lg);
    padding: var(--space-md) 0;
    line-height: 1
}
.logo-kisd a,
.logo-fh a {
    color: #000
}
@media screen and (width <= 480px) {
    .logo-kisd {
        margin-left: 16px;
        padding: var(--space-8) 0
    }
}
.logo-kisd__headline {
    display: inline-block;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 3.2px 0;
    @media screen and (width <= 480px) {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 1.6px 0
    }
}
.logo-kisd__subline {
    display: inline-block;
    font-weight: 400;
    font-size: 16.2px;
    margin-left: 1px;
    line-height: 1.2em;
    @media screen and (width <= 480px) {
        font-size: 14px;
        margin-left: 1px
    }
}
.logo-fh {
    float: left;
    padding: var(--space-md) 0;
    line-height: 1;
    margin-left: 56px;
    @media screen and (width <= 976px) {
        margin-left: 0;
        margin-right: var(--space-lg);
        float: right
    }
    @media screen and (width >= 1441px) {
        margin-left: 50px
    }
    @media screen and (width <= 480px) {
        padding: var(--space-8) var(--space-8) var(--space-8) 0px;
        margin-right: var(--space-8)
    }
}
.logo-fh__link {
    display: block
}
.logo-fh__headline {
    display: inline-block;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    @media screen and (width <= 480px) {
        font-size: 18px;
        position: relative
    }
}
.logo-fh__subline {
    display: block;
    font-weight: 600;
    font-size: 26px;
    margin: 0 0 2.4px 0;
    @media screen and (width <= 480px) {
        font-size: 18px;
        margin: 0
    }
}
.logo-fh__technology {
    display: block;
    color: var(--color-red)
}
.logo-fh__arts {
    color: var(--color-orange)
}
.logo-fh__sciences {
    color: var(--color-violet)
}
.burger {
    display: block;
    float: left;
    height: 42px;
    width: 42px;
    position: relative;
    top: var(--space-15);
    @media screen and (width <= 480px) {
        top: var(--space-5)
    }
}
.burger.active .burger__ham {
    background: transparent
}
.burger.active .burger__ham:before {
    top: 0;
    transition: transform 0.2s ease-in-out;
    transform: rotate(45deg)
}
.burger.active .burger__ham:after {
    top: 0;
    transition: transform 0.2s ease-in-out;
    transform: rotate(-45deg)
}
.burger__ham,
.burger__ham:before,
.burger__ham:after {
    content: '';
    cursor: pointer;
    border-radius: 1px;
    height: var(--space-xs);
    width: var(--space-lg);
    background: #000;
    position: absolute;
    display: block
}
.burger__ham {
    top: var(--space-10);
    left: var(--space-15)
}
.burger__ham:before {
    top: -7px
}
.burger__ham:after {
    bottom: -7px
}
.box {
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
    position: relative
}
/* White is a default that a colour modifier — `.box--application`, `.background-information`
   — is meant to override. Same reasoning as `:where(.icon)` above. */
:where(.box) {
    background: #fff
}
.box__description {
    display: block;
    position: absolute;
    padding: var(--space-lg) var(--space-lg) 18px;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0
}
/* The description and its lines are headings on some tiles, so they arrive with a bottom
   margin the absolute positioning would turn into a gap. `.box--1`/`.box--2` set their own
   rhythm with `gap` below; this covers every other tile. */
.box__description > * {
    margin: 0
}
.box__description .box__title {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 20px;
}
/* The chip's material, shared by the two places a tag is rendered as one: the tile's kicker and
   the sidebar's tag menu. Everything that makes it the same object lives here; each ground only
   names its four colours. They travel as custom properties rather than as a second declaration
   block so the two rules stay order-independent — a custom property cascades on its own. */
.box__description .box__kicker,
.navigation__filter li a {
    padding: var(--chip-padding);
    border-radius: var(--chip-radius);
    background: var(--chip-fill);
    border: var(--border-width) solid var(--chip-hairline);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    /* box-shadow: inset 0 1px 0 var(--chip-highlight), var(--chip-shadow); */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease
}
/* Hovering a chip sets the glass. It is the one state both grounds render identically, so it
   takes no --chip-* colours of its own. The menu's `.active` shares it because a selected tag
   and a pointed-at one are the same affordance here. */
:is(.box--1, .box--2):hover .box__description .box__kicker,
.navigation__filter li.active a,
.navigation__filter li a:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    box-shadow: none;
    color: #fff
}
/* Dark fill, not the usual white frost: the caption's text is white, and a white translucent
   layer would lighten the backdrop away from the 4.5:1 the veil below is sized to hold.
   `align-self` keeps the chip shrink-wrapped — the caption is a flex column, which would
   otherwise stretch it across the tile. */
.box__description .box__kicker {
    --chip-fill: rgba(0, 0, 0, 0.22);
    --chip-hairline: rgba(255, 255, 255, 0.12);
    --chip-highlight: rgba(255, 255, 255, 0.16);
    --chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    font-weight: 400;
    align-self: flex-start
}
.box__description .box__date {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: var(--space-lg);
    margin: 0px
}
.box__description p {
    font-size: 14px;
    margin-top: 0;
    color: #fff
}
.box--1 {
    height: 276px;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
/* The caption's ground is a veil that dissolves upward over `--caption-fade` rather than a band
   with an edge, and it hangs off the caption, so a wrapping title carries the fade up with it
   instead of stretching it. Two layers: `:before` is a light blur plus the scrim — the only layer
   that creates measurable contrast — and `:after` a heavier blur masked to start lower, so the
   radii accumulate downward instead of ending on a hard line. The fade has to be a `mask-image`
   and not a gradient fill: `backdrop-filter` applies to the whole box, so masking the box feathers
   the blur along with the fill and one curve does both jobs.
   Below the fade line, where the text sits, the mask is fully opaque and the veil is at
   `--caption-scrim` flat — 0.56, which is the floor for white text over a white highlight
   (4.94:1, against 4.59 at 0.54). Measured across all 40 front-page tiles: worst case 4.95, the
   theoretical bound, so the veil clamps the photo rather than depending on it. `--caption-drop`
   slides the veil down under the text, which stays where it is; `--caption-fade` sets how far the
   dissolve reaches. See
   plan-contrast.md. */
:is(.box--1, .box--2) .box__description {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: --caption-scrim 0.3s ease
}
/* The lines ride above the veil. Unpositioned content paints below positioned descendants, so
   otherwise `:after` covers the text — and blurs it, a backdrop being whatever was painted
   underneath. `gap` sets the rhythm, hence no margins. */
:is(.box--1, .box--2) .box__description > * {
    position: relative;
    z-index: 1;
    margin: 0;
    text-shadow: var(--tile-text-shadow)
}
:is(.box--1, .box--2) .box__description:before,
:is(.box--1, .box--2) .box__description:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* The veil slides rather than stretches: both edges carry --caption-drop, so its height stays
       --caption-fade plus the caption's, and the tile's overflow crops what leaves the bottom. */
    bottom: calc(-1 * var(--caption-drop));
    top: calc(var(--caption-drop) - var(--caption-fade));
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--caption-fade));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--caption-fade))
}
:is(.box--1, .box--2) .box__description:before {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.02)) calc(var(--caption-fade) * 0.12),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.08)) calc(var(--caption-fade) * 0.25),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.19)) calc(var(--caption-fade) * 0.38),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.36)) calc(var(--caption-fade) * 0.5),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.58)) calc(var(--caption-fade) * 0.62),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.8)) calc(var(--caption-fade) * 0.75),
        rgba(0, 0, 0, calc(var(--caption-scrim) * 0.95)) calc(var(--caption-fade) * 0.88),
        rgba(0, 0, 0, var(--caption-scrim)) var(--caption-fade))
}
:is(.box--1, .box--2) .box__description:after {
    /* backdrop-filter: blur(6px) saturate(112%);
    -webkit-backdrop-filter: blur(6px) saturate(112%); */
    mask-image: linear-gradient(to bottom, transparent calc(var(--caption-fade) * 0.55), #000 var(--caption-fade));
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--caption-fade) * 0.55), #000 var(--caption-fade))
}
/* Hover deepens the veil. The alpha is a registered property, so it is the one thing that moves
   and the whole ramp follows it. */
:is(.box--1, .box--2):hover .box__description {
    --caption-scrim: 0.72
}
/* The tile answers the pointer as one object: it lifts on a shadow and its photo warms
   slightly. Nothing is displaced — no transform, no reflow — so the caption, the chip and the
   crop stay exactly where they are and only light changes. */
:is(.box--1, .box--2) {
    transition: box-shadow 0.25s ease
}
:is(.box--1, .box--2) img {
    transition: filter 0.25s ease
}
:is(.box--1, .box--2):hover {
    box-shadow: 0 1px 2px rgba(42, 57, 68, 0.12), 0 6px 16px rgba(42, 57, 68, 0.2)
}
:is(.box--1, .box--2):hover img {
    filter: saturate(1.08) brightness(1.04)
}
@media screen and (width <= 976px) {
    .box--1 {
        height: auto
    }
}
.box--2 {
    height: auto;
    @media screen and (width >= 1441px) {
        height: 488px
    }
}
@media screen and (width <= 976px) {
    .box--2 img {
        height: auto
    }
}
.box--3 {
    height: 276px;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.box--3 .box__description {
    background: #fff;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-md) var(--space-lg)
}
.box--3 .box__description .box__title {
    color: var(--color-dark)
}
.box--5 {
    min-height: 276px;
    @media screen and (width >= 1441px) {
        min-height: 240px
    }
}
.box.box--5 img {
    height: 276px;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.box--5 .box__description {
    background: #fff;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-md) var(--space-lg);
    font-weight: 300
}
.box--5 .box__description .box__title {
    color: var(--color-dark)
}
.box--dialog {
    position: relative;
    box-sizing: border-box;
    min-height: 276px;
    @media screen and (width >= 1441px) {
        min-height: 240px
    }
}
.box--dialog h4 {
    line-height: 28px
}
.box--dialog__image {
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 348px;
    height: 100%;
    max-height: 276px;
    @media screen and (width <= 1440px) {
        position: static;
        width: 100%;
        padding-top: 70%
    }
    @media screen and (width <= 480px) {
        padding-top: 60%
    }
    @media screen and (width >= 1441px) {
        width: 303px;
        height: 240px;
        max-height: 240px
    }
}
.box--dialog__content {
    margin-left: 360px;
    padding: var(--space-lg);
    box-sizing: border-box;
    @media screen and (width <= 1440px) {
        margin-left: 0
    }
}
.box--dialog__content h4 {
    margin: 0;
    font-weight: 400
}
.box--dialog__content h3 {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    @media screen and (width <= 1440px) {
        margin: 0;
        font-weight: 300;
        font-size: 20px;
        line-height: 36px
    }
}
@media screen and (width >= 1441px) {
    .box--dialog__content {
        margin-left: 312px
    }
    .box--dialog__content h3 {
        margin: 0;
        font-weight: 300;
        font-size: 20px;
        line-height: 36px
    }
}
.box--dialog__content--single {
    margin-left: 0
}
.box-controls {
    padding: var(--space-lg);
    box-sizing: border-box
}
.box-controls__headline {
    margin: 0;
    margin-right: 40px;
    @media screen and (width <= 720px) {
        text-overflow: ellipsis
    }
    @media screen and (width <= 480px) {
        width: 100%;
        max-width: 100%;
        margin-right: 0
    }
}
.box-controls__headline a {
    line-height: 46px
}
.box-controls__headline--link-level-2 {
    max-width: 50%;
    line-height: 46px;
    display: inline-block;
    white-space: nowrap;
    @media screen and (width >= 1441px) {
        max-width: 60%
    }
    @media screen and (width <= 480px) {
        width: 100%;
        max-width: 100%
    }
}
.box-sort {
    padding-top: var(--space-sm);
    margin-left: var(--space-sm)
}
.box-sort__item {
    float: left;
    margin-left: var(--space-xs)
}
.box-sort__item.active .box-sort__link {
    background: var(--color-near-black)
}
.box-sort__link {
    display: block;
    width: 46px;
    height: 46px;
    background: var(--color-dark);
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10.5px
}
.box-sort__icon {
    font-size: var(--space-lg)
}
.box-menu {
    width: 25%;
    margin: 0;
    height: 46px;
    @media screen and (width <= 720px) {
        width: 40%
    }
    @media screen and (width <= 480px) {
        width: 59%
    }
}
.link-level-2__text {
    vertical-align: top;
    display: inline-block;
    text-overflow: ellipsis;
    max-width: 14%;
    height: 38px;
    overflow: hidden;
    @media screen and (width <= 720px) {
        max-width: 20%
    }
}
.link-level-25 {
    vertical-align: top;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 60%
}
.link-level-25.link-level-25--single {
    max-width: none;
    @media screen and (width <= 720px) {
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        max-width: 100%;
        height: 46px
    }
}
.box--application {
    display: block;
    position: relative;
    color: #fff;
    /* Ramps to the brand orange at the bottom; the text sits on the deep end. Same shape as
       --tile-text-scrim, but shading by colour rather than by a black overlay, which would
       cost 11% chroma and read as brown. */
    background: linear-gradient(to bottom, var(--color-orange-dark) 0%, var(--color-orange-dark) 60%, var(--color-orange) 100%);
    text-shadow: var(--tile-text-shadow);
    box-sizing: border-box;
    height: 276px;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.box--application__content {
    padding: var(--space-20)
}
.box--application__content h2 {
    margin: 0 0 var(--space-sm) 0;
    white-space: nowrap
}
.box--application__content a, .box--application__content a:visited {
    color: #fff
}
.box--application__content h6 {
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    border-radius: 17px;
    display: inline-block;
    padding: var(--space-4) var(--space-14);
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase
}
.box--application__content ul {
    list-style-type: none;
    list-style: none;
    padding: 0
}
.box--application__content li {
    padding: var(--space-5) 0
}
/* Hollow pill — the theme's mark for "this is the clickable thing on a colour tile", same
   shape as `.box--dates .box__forward-link`. Solid white, not that one's 0.75: this tile is
   the lightest of the four, and 0.75 white on it is 2.86 against the 3:1 a control's
   boundary needs. */
.box--application__content li a {
    border: var(--border-width) solid #fff;
    border-radius: 17px;
    display: inline-block;
    padding: var(--space-4) var(--space-14);
    line-height: var(--space-lg)
}
.box--talk,
.box--conference,
.box--event {
    display: block;
    padding: var(--space-lg);
    box-sizing: border-box;
    height: 276px;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.box.box--dates {
    display: block;
    padding: var(--space-lg);
    box-sizing: border-box;
    height: 560px;
    @media screen and (width >= 1441px) {
        height: 488px
    }
}
.box--dates p {
    margin-top: var(--space-xs);
    font-size: 16px;
    line-height: var(--space-lg)
}
.box--dates a {
    color: #fff
}
.box--dates h5 {
    margin: 0
}
/* 13px/500, not the 12px/400 default: the meta line is the smallest type on any tile and it
   sits on colour. Same treatment as `.box--application__content h6`. */
.box--dates .box__meta {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 20px;
    margin-top: var(--space-sm)
}
.box--dates .group__left {
    margin-right: var(--space-md)
}
.box--dates .box__forward {
    text-align: center;
    margin-top: var(--space-lg);
    text-transform: uppercase
}
.box--dates .box__forward-link {
    /* 0.6 white on violet is 2.93:1 — under the 3:1 a control's boundary needs. */
    border: var(--border-width) solid rgba(255, 255, 255, 0.75);
    border-radius: 17px;
    display: inline-block;
    padding: var(--space-4) var(--space-14);
    height: var(--space-lg);
    line-height: var(--space-lg);
    margin: 0
}
.box--dates .box__item {
    position: relative;
    padding-top: var(--space-md);
    margin-top: var(--space-md)
}
.box--dates .box__item:first-of-type {
    margin-top: 0;
    padding-top: 0
}
.box--dates .box__item:first-of-type:before {
    display: none
}
.box--dates .box__item:before {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    top: 0;
    width: 100%;
    height: 1px
}
.box__icon {
    display: block;
    text-align: center;
    padding-top: 72px;
    padding-bottom: 48px;
    font-size: 84px;
    box-sizing: border-box;
    transition: all 0.4s ease-in-out;
    color: var(--color-dark);
    @media screen and (width >= 1441px) {
        padding-top: 48px
    }
}
.box__icon:hover {
    padding-top: 84px;
    transform: rotate(2deg);
    @media screen and (width >= 1441px) {
        padding-top: 60px
    }
}
/* `.box-single-image` sits *inside* a `.box--5`, so this is not a modifier: the class is
   written twice purely to outrank `.box--5 .box__description`, which matches the same
   element with the same specificity and would otherwise win on document order alone. The
   h3/h4 rule below is doubled to match — raise one without the other and it stops winning. */
.box-single-image.box-single-image .box__description {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    padding: var(--space-md) var(--space-lg);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
    line-height: var(--space-lg);
    background: var(--color-white)
}
.box-single-image.box-single-image h2.box__description,
.box-single-image.box-single-image h3.box__description,
.box-single-image.box-single-image h4.box__description {
    font-weight: normal
}
.box-circles {
    margin: 0;
    padding: var(--space-lg) 0;
    list-style: none
}
.box .box-circles {
    padding: var(--space-lg)
}
.box-circles__subline {
    float: left;
    width: 100%;
    margin-bottom: var(--space-xs)
}
.box-circles__subline .h6 {
    margin: 0;
    line-height: 36px
}
.box-circles__circle {
    float: left;
    position: relative;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    height: 46px;
    width: 46px;
    text-align: center;
    border-radius: 50%;
    border: var(--border-width) solid var(--color-dark);
    font-size: 12px;
    font-weight: 400
}
.box-circles__circle:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 0;
    height: 48px;
    width: 48px;
    transform: scale(0);
    transition: all 0.4s ease-in-out
}
.box-circles__circle a {
    position: absolute;
    display: block;
    height: 46px;
    width: 46px;
    line-height: 44px;
    color: var(--color-dark);
    border-radius: 50%
}
.box-circles__circle a img {
    border-radius: 50%
}
.box-circles__circle:hover:before,
.box-circles__circle.active:before {
    opacity: 1;
    transform: scale(1);
    background: var(--color-dark);
    border-radius: 50%
}
.box-circles__circle:hover a,
.box-circles__circle.active a {
    color: #fff
}
.box-circles__more {
    text-align: center;
    font-size: 7px
}
.box-circles__more .icon--circle,
.box-squares__more .icon--circle {
    margin: 0 0.75px
}
.box-circles--images a {
    height: 48px;
    width: 48px
}
.box-circles--images .box-circles__circle {
    border: 0;
    height: 48px;
    width: 48px
}
.box-circles--images .box-circles__circle:before {
    display: none
}
.box-circles--images .box__image {
    height: 48px;
    width: 48px
}
.box-circles--images .box-circles__more {
    border: var(--border-width) solid var(--color-dark);
    height: 46px;
    width: 46px
}
.box-circles--images .box-circles__more a,
.box-squares--images .box-squares__more a {
    line-height: 45px;
    height: 46px;
    width: 46px
}
.box-circles--images .box-circles__more:before {
    display: block
}
.box-squares {
    margin: 0;
    padding: var(--space-15) 21px 72px var(--space-lg);
    list-style: none
}
.box-squares__subline {
    float: left;
    width: 100%;
    margin-bottom: var(--space-xs)
}
.box-squares__subline .h6 {
    margin: 0;
    line-height: 26.4px
}
.box-squares__square {
    float: left;
    position: relative;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    height: 46px;
    width: 46px;
    text-align: center;
    font-size: 11px;
    font-weight: 700
}
.box-squares__square:before,
.box-squares__square-twocolumns:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 0;
    height: 46px;
    width: 46px;
    transform: scale(0);
    transition: all 0.4s ease-in-out
}
.box-squares__square a {
    position: absolute;
    display: block;
    height: 46px;
    width: 46px;
    line-height: 44px;
    color: var(--color-dark)
}
.box-squares__square img {
  width: 100%
}
.box-squares__square a.active img {
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-dark)
}
.box-squares__square:hover a {
    color: var(--color-red)
}
.box-squares__square-twocolumns {
    float: left;
    position: relative;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    height: 46px;
    width: 336px;
    text-align: left;
    font-size: 16px
}
.box-squares__square-twocolumns a {
    position: absolute;
    display: block;
    height: 46px;
    width: 46px;
    line-height: 44px;
    color: var(--color-dark)
}
.box-squares__square-twocolumns:hover a {
    color: var(--color-red)
}
.box-squares__more {
    text-align: center;
    font-size: 7px
}
.box-squares--images a {
    height: 48px;
    width: 48px
}
.box-squares--images .box-squares__square {
    border: 0;
    height: 68px;
    width: 48px
}
.box-squares--images .box-squares__square:before {
    display: none
}
.box-squares--images .box__image {
    height: 48px;
    width: 48px
}
.box-squares--images .box-squares__more {
    border: none;
    height: 46px;
    width: 46px
}
.box-squares--images .box-squares__more:before {
    display: block
}
.box-rectangles {
    margin: 0;
    padding: var(--space-lg) 21px 72px var(--space-lg);
    list-style: none
}
.box-rectangles__rectangle {
    float: left
}
.box-rectangles__rectangle a {
    display: inline-block;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    border: var(--border-width) solid var(--color-dark);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    border-radius: 1px;
    transition: all 0.2s ease-in-out;
    padding: var(--space-5);
    color: var(--color-dark);
    text-transform: uppercase
}
.box-rectangles__rectangle a:hover,
.navigation .box-rectangles__rectangle a:hover {
    background: var(--color-dark);
    color: #fff
}
.box-text {
    padding: var(--space-lg);
    box-sizing: border-box
}
.box-text__text strong:hover {
    border-bottom: var(--border-width) solid var(--color-dark);
    transition: 0.2s all ease-in-out
}
.frontpage .navigation__targetgroup .filter--dropdown {
    padding: 0
}
.frontpage .navigation__targetgroup .filter--dropdown-list {
    padding: 0
}
.navigation {
    margin: var(--space-8) 0 0 0
}
.navigation .box-circles,
.navigation .box-rectangles {
    margin: 0;
    padding: 18px 0px 0px 0px;
    list-style: none
}
.navigation .box-rectangles__rectangle a {
    display: block;
    margin: 0 var(--space-2) var(--space-2) 0;
    text-align: center;
    border: 2px solid var(--color-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    padding: 0 var(--space-sm);
    color: var(--color-dark);
    text-transform: uppercase
}
.navigation .box-circles__circle a img {
    height: 100%
}
.navigation .subnav a {
    font-size: 13px !important;
    margin-left: var(--space-15)
}
.navigation--no-menu {
    margin-bottom: var(--space-8)
}
.navigation--fluid {
    top: 0;
    position: fixed;
    width: 230px;
    @media screen and (width >= 1441px) {
        width: 304px
    }
    @media screen and (width <= 976px) {
        width: 348px
    }
    @media screen and (width <= 720px) {
        width: calc(50% - var(--space-md))
    }
}
@media screen and (width >= 977px) {
    .navigation--tablet {
        display: block !important
    }
     
}
@media screen and (width <= 976px) {
    .navigation--tablet {
        width: 704px;
        margin: 0;
        top: 160px;
        display: none;
        position: fixed;
        z-index: 200000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
    }
    .navigation--tablet.active {
        display: block
    }
}

.navigation__targetgroup {
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-lg)
}
@media screen and (width <= 720px) {
    .navigation--tablet {
        width: calc(100% - 16px)
    }
    .navigation__targetgroup {
        padding: var(--space-md) var(--space-lg)
    }
}
@media screen and (width <= 480px) {
    .navigation--tablet {
        margin: 0;
        top: 130px
    }
    
}
@media screen and (width >= 481px) {
    .navigation--mobile {
        display: block !important
    }
    
}
@media screen and (width <= 480px) {
    .navigation--mobile {
        width: calc(100% - 16px);
        margin: 0;
        top: 76px;
        display: none;
        position: fixed;
        z-index: 200000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
    }
    .navigation--mobile.active {
        display: block
    }
}

.filter-headline span {
    font-size: 10px;
    font-weight: 700
}
.filter--dropdown {
    margin: 0;
    position: relative;
    display: block;
    box-sizing: border-box
}
.filter--dropdown:hover .filter--dropdown-list {
    visibility: visible;
    opacity: 1
}
.filter--dropdown-list {
    list-style: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box
}
/* Three names for one vertical nav list: the sidebar's term dropdown, a conference's
   sub-navigation and the sitemap. Same component, so one rule. */
.filter--dropdown-list li.active a,
.filter--dropdown-list li:hover a,
.conference-sidenav li.active a,
.conference-sidenav li:hover a,
.sitemap-list li.active a,
.sitemap-list li:hover a {
    font-weight: 500;
    color: var(--color-red);
    border-top: var(--border-width) solid var(--color-red)
}
.filter--dropdown-list li a,
.conference-sidenav li a,
.sitemap-list li a {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-dark);
    width: 100%;
    box-sizing: border-box;
    border-top: var(--border-width) solid var(--color-gray-light);
    padding: 0 0 var(--space-4) 0
}
.navigation__filter ul {
    padding: 0;
    margin: 0
}
.navigation__filter li {
    float: left
}
/* The same chip inverted for a light ground. Over the sidebar's flat white the blur has nothing
   to work on, so the hairline and the top highlight are what carry the material. */
.navigation__filter li a {
    --chip-fill: rgba(42, 57, 68, 0.07);
    --chip-hairline: rgba(42, 57, 68, 0.05);
    --chip-highlight: rgba(255, 255, 255, 0.45);
    --chip-shadow: 0 1px 2px rgba(42, 57, 68, 0.06);
    display: block;
    line-height: 1;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    font-size: 12px;
    color: var(--color-dark);
    font-weight: 400
}
.navigation__footer {
    list-style: none;
    margin:var(--space-10) 0px 0px var(--space-lg);
    padding: 0 0 var(--space-lg) 0;
    font-size: 12px;
    @media screen and (width >= 1441px) {
        margin: 35px 0px 0px var(--space-lg)
    }
}
.navigation__footer li {
    display: inline-block;
    border-right: var(--border-width) solid var(--color-dark);
    margin-left: -4px;
    line-height: 14px
}
.navigation__footer li:last-child {
    border: 0
}
.navigation__footer a {
    display: block;
    color: var(--color-dark);
    padding: 0 var(--space-sm)
}
.navigation__search_langugage_box{
   display: flex;
  padding:var(--space-8) 0px var(--space-8) var(--space-lg);
  background: white
}
.navigation__search{
	margin: 0px var(--space-lg) 0px 0px;
	padding: var(--space-8) 0px;
    height: 36px;
    position: relative
      }
.navigation__search_langugage_box .navigation__search{
	padding: 0px !important;
    height: 36px;
    width: 65%;
        position: relative
    
}

.navigation__language{
     width: 35%;
     text-align: right;
     background:white
  
}
.navigation__search .search-button {
    color: var(--color-dark);
    right: var(--space-10);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    margin: 0;
    padding: 0
}
.navigation__language .social {
    margin: 7px var(--space-lg) 0 0px
    
}
.navigation__search input {
    margin: 0;
    font-size: 15px;
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-color: var(--color-gray-light)
}
.navigation__search input:focus,
.navigation__search input:active {
    border-color: var(--color-dark)
}
.navigation__top {
    width: 300px;
    @media screen and (width <= 976px) {
        display: none
    }
}
.navigation__top .language-top {
    margin: var(--space-md) 0px;
    list-style: none;
    padding: 0 var(--space-lg) 0 0
}
.navigation__top .navigation__search {
    margin-top: var(--space-md);
    margin-bottom: 0;
    position: relative
}
.participants {
    margin: 0 0 var(--space-lg) 0
}
.social {
    list-style: none;
    margin: 0 var(--space-lg)
}
.social__link {
    display: block;
    line-height: 1;
    color: var(--color-white);
    transition: 0.4s all ease-in-out;
    font-weight: 700;
        padding: var(--space-xs) var(--space-sm)
}
.social__link:hover,
.social__link.active {
    color: var(--color-dark)
}
.social__item {
    float: left;
    margin-right: var(--space-xs);
    display: inline-block;
    background: var(--color-blue-gray)
}
.social__icon {
    font-size: 20px
}
.language__item {
    float: right;
    padding-left: var(--space-xs);
    text-align: center;
    vertical-align: top;
    height: var(--space-lg);
    width: var(--space-lg)
}
.language__link {
    background: var(--color-blue-gray);
    color: var(--color-dark);
    display: block;
    line-height: var(--space-lg);
    height: var(--space-lg);
    width: var(--space-lg);
    font-size: 11px;
    text-transform: uppercase;
    transition: 0.4s all ease-in-out;
    font-weight: 700
}
.language__link:hover,
.language__link.active {
    background: var(--color-dark);
    color: var(--color-white)
}
.glyph {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: 700
}
.glyph a {
    color: var(--color-dark)
}
.glyph--circle {
    border-radius: 50%;
    border: var(--border-width) solid var(--color-dark)
}
.glyph--square {
    border-radius: 2px;
    border: var(--border-width) solid var(--color-dark)
}
.testimonial {
    position: relative;
    margin: var(--space-lg) 0
}
.testimonial__image {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    height: 96px
}
.testimonial__image img {
    width: 96px;
    height: 96px
}
.testimonial__placeholder {
    display: block;
    color: var(--color-dark);
    position: absolute;
    top: 0;
    left: 0;
    border: var(--border-width) solid var(--color-dark);
    text-align: center;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    padding-top: 27px
}
.testimonial__placeholder .icon,
.testimonial__placeholder .fc-prev-button,
.testimonial__placeholder .fc-next-button {
    font-size: 42px
}
.testimonial__abbreviation {
    display: block;
    color: var(--color-dark);
    position: absolute;
    top: 0;
    left: 0;
    border: var(--border-width) solid var(--color-dark);
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    padding-top: 33px;
    font-size: var(--space-lg);
    font-weight: 700
}
.testimonial__content {
    margin-left: 120px;
    min-height: 96px
}
.former {
    margin: 0px 0px
}
.former .h5 {
    font-weight: 400;
    border-bottom: var(--border-width) solid var(--color-gray-light);
    padding-bottom: var(--space-md)
}
.former .testimonial__content {
    margin-left: 0px;
    min-height: auto
}
.testimonial__area {
    font-size: 1rem;
    line-height: var(--space-lg);
    font-weight: 400;
    margin: 0
}
.archive table {
    width: 100%
}
.archive td {
    padding-bottom: var(--space-md);
    padding-top: var(--space-md)
}
.single-details .glyph {
    float: left;
    margin: 0 0 0 var(--space-lg)
}
.single-details .glyph--square-image img{
   width: 100%
}
.single-details__meta {
    padding-top: var(--space-sm);
    margin: 0 0 36px 96px
}
.single-details__meta p {
    line-height: 18px;
    margin: 0;
    padding: 0 var(--space-lg) 0 0
}
.single-details__list li {
    line-height: 18px
}
.single-details__list li:after {
    content: ','
}
.single-details__list li:last-child:after {
    content: ''
}
.background--white {
    background: #fff
}
.background--color-one {
    background: var(--color-dark)
}
.page-dates {
    color: #fff;
    min-height: 720px;
    @media screen and (width <= 480px) {
        min-height: 360px
    }
}
.slider {
    position: relative
}
.slider__navigation {
    user-select: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    z-index: 5000;
    bottom: var(--space-md);
    left: 0;
    width: 100%;
    text-align: center;
    @media screen and (width <= 480px) {
        bottom: var(--space-sm)
    }
}
.slider__caption {
    position: absolute;
    top: 0px;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0 var(--space-md)
}
.slider__navigation__prev {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 20px;
    margin: 0 var(--space-sm) 0 0;
    color: var(--color-gray-medium);
    font-size: 20px;
    @media screen and (width <= 480px) {
        display: none
    }
}
.slider__navigation__prev:before {
    content: "\f053";
    @media screen and (width <= 480px) {
        display: none
    }
}
.slider__navigation__more {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    margin: 0 var(--space-sm) 0 0;
    border: 2px solid var(--color-gray-medium);
    @media screen and (width <= 480px) {
        display: none
    }
}
.slider__navigation__next {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 20px;
    margin: 0 var(--space-sm) var(--space-sm) 0;
    color: var(--color-gray-medium);
    font-size: 20px;
    @media screen and (width <= 480px) {
        display: none
    }
}
.slider__navigation__next:before {
    content: "\f054";
    @media screen and (width <= 480px) {
        display: none
    }
}
.slider__navigation__single {
    display: inline-block
}
.slider__navigation__item {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 var(--space-sm) var(--space-sm) 0;
    border: 2px solid var(--color-gray-medium);
    border-radius: 50%;
    @media screen and (width <= 480px) {
        height: var(--space-8);
        width: var(--space-8)
    }
}
.slider__navigation__item--active {
    background: var(--color-gray-medium)
}
.slider__overview {
    box-sizing: border-box;
    top: 0;
    list-style: none;
    position: absolute;
    z-index: 5001;
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    display: none;
    @media screen and (width <= 480px) {
        display: none !important
    }
}
.slider__overview__close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 36px;
    padding-top: var(--space-2)
}
.tags {
    padding: 0 var(--space-lg)
}
.related:empty {
    display: none
}
.related h4 {
    color: #fff;
    background: var(--color-dark);
    padding: var(--space-sm) var(--space-md);
    margin: 0
}
.related .box {
    height: auto;
    margin: 0;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.related .box .box__image {
    height: auto;
    @media screen and (width >= 1441px) {
        height: 240px
    }
}
.related__headline-container {
    background: #fff;
    padding: var(--space-md) var(--space-lg)
}
.related__headline-container h3 {
    margin: 0px
}
.content {
    padding-top: var(--space-8)
}
.content--with-head {
    padding: 48px 0
}
.content--people .box-circles__circle {
    margin: 0 var(--space-sm) var(--space-sm) 0
}
.content--people .box-circles__circle:before {
    height: 60px;
    width: 60px
}
.content--people .box-circles--images {
    padding: var(--space-lg) 0
}
.content--people .box-circles--images a {
    height: 60px;
    width: 60px
}
.content--people .box-circles__circle {
    height: 62px;
    width: 62px
}
.content--people .box__image {
    height: 60px;
    width: 60px
}
.content--people .box__image_twocolumns {
    height: 60px;
    width: 60px;
    margin: 0 var(--space-md) 0 0
}
.content--people .box-circles__more {
    height: 58px;
    width: 58px
}
.content--people .box-circles__more a {
    line-height: 57px;
    height: 58px;
    width: 58px
}
.content--people .box-squares__square {
    margin: 0 var(--space-sm) var(--space-sm) 0;
    height: 60px;
    width: 60px
}
.content--people .box-squares__square:before {
    height: 58px;
    width: 58px
}
.content--people .box-squares__square-twocolumns {
    margin: 0 var(--space-sm) var(--space-md) 0;
    padding: var(--space-lg) 0
}
.content--people .box-squares__square-twocolumns:before {
    height: 58px;
    width: 336px
}
.content--people .box-squares--images {
    padding: var(--space-lg) 0
}
.content--people .box-squares--images a {
    height: 60px;
    width: 60px
}
.content--people .box-squares__square-twocolumns a {
    height: 60px;
    width: 336px
}
.content--people .box-squares__more {
    height: 58px;
    width: 58px
}
.content--people .box-squares__more a {
    line-height: 57px;
    height: 58px;
    width: 58px
}
.background--pinstripe {
    background: url("../img/pinstripe.png");
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        background: url("../img/pinstripe_@2X.png");
        background-size: 50px 500px
    }
}
.background--axiom {
    background: url("../img/struckaxiom.png");
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        background: url("../img/struckaxiom_@2X.png");
        background-size: 81px 81px
    }
}
.background--cubes {
    background: url("../img/cubes.png");
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        background: url("../img/cubes_@2X.png");
        background-size: 67px 100px
    }
}
.background--zebra {
    background: url("../img/zebra.png");
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        background: url("../img/zebra_@2X.png");
        background-size: 121px 38px
    }
}
.background--graphy {
    background: url("../img/graphy.png");
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        background: url("../img/graphy_@2X.png");
        background-size: 80px 160px
    }
}
/* The scrim is load-bearing, not decoration: magenta fails AA without it and orange-red
   fails badly. Worst measured background under the text band: orange-red 4.66, magenta
   5.44, violet 6.98. */
.background-information {
    color: #fff;
    background: var(--tile-text-scrim), var(--color-violet);
    text-shadow: var(--tile-text-shadow)
}
.background-conferences {
    color: #fff;
    background: var(--tile-text-scrim), linear-gradient(45deg, var(--color-magenta) 0%, var(--color-magenta-dark) 100%);
    text-shadow: var(--tile-text-shadow)
}
.background-talks {
    color: #fff;
    background: var(--tile-text-scrim), linear-gradient(45deg, var(--color-orange-red) 0%, var(--color-orange-red-dark) 100%);
    text-shadow: var(--tile-text-shadow)
}
.dates-summary {
    font-size: 15px
}
.dates-adress__title a {
    color: inherit
}
.dates-timings__item {
    margin-top: var(--space-lg);
    position: relative
}
.dates-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 28px
}
.dates-timings__title {
    margin-left: 36px;
    display: inline-block;
    vertical-align: top;
    padding-top: var(--space-2);
    line-height: var(--space-lg)
}
.dates-recurrence {
    cursor: help;
    font-weight: 700
}
.dates-recurrence .icon,
.dates-recurrence .fc-prev-button,
.dates-recurrence .fc-next-button {
    font-size: 14px
}
.edit_float {
    position: absolute;
    top: var(--space-10);
    right: var(--space-10)
}
.edit_float .icon--edit {
    color: #000000
}
.navigation .box-squares {
    list-style: outside none none;
    margin: 0;
    padding: 18px 0 0
}
#wpadminbar {
    top: auto !important;
    bottom: 0;
    z-index: 60000
}
#wpadminbar .quicklinks .ab-sub-wrapper {
    bottom: 28px
}
#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
    border-width: var(--border-width) var(--border-width) 0 var(--border-width);
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2)
}
#wpadminbar .quicklinks .menupop ul#wp-admin-bar-wp-logo-default {
    background-color: #eee
}
#wpadminbar .quicklinks .menupop ul#wp-admin-bar-wp-logo-external {
    background-color: white
}
body.wp-admin div#wpwrap div#footer {
    bottom: 28px !important
}
@media screen and (width <= 720px) {
    #wpadminbar {
        position: fixed;
        z-index: 60000
    }
    #wpadminbar .quicklinks .ab-sub-wrapper {
        bottom: 46px
    }
    body.wp-admin div#wpwrap div#footer {
        bottom: 46px !important
    }
}
@media screen and (width >= 1441px) {
    #wpadminbar {
        top: auto !important;
        bottom: 0;
        z-index: 60000
    }
    #wpadminbar .quicklinks .ab-sub-wrapper {
        bottom: 28px
    }
    #wpadminbar .menupop .ab-sub-wrapper,
    #wpadminbar .shortlink-input {
        border-width: var(--border-width) var(--border-width) 0 var(--border-width);
        box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2)
    }
    #wpadminbar .quicklinks .menupop ul#wp-admin-bar-wp-logo-default {
        background-color: #eee
    }
    #wpadminbar .quicklinks .menupop ul#wp-admin-bar-wp-logo-external {
        background-color: white
    }
    body.wp-admin div#wpwrap div#footer {
        bottom: 28px !important
    }
}
.dialog-toggle-content {
    display: none;
    @media screen and (width >= 976px) {
        margin: 30px var(--space-10) 0px 0px
    }
}
.accordion__header h3 {
    font-size: 16px
}
#gmap {
    width: 100%;
    height: 288px
}
.text--center {
    text-align: center
}
.gallery .gallery-item {
    float: left;
    margin-top: var(--space-10);
    text-align: center;
    width: 25%
}
.gallery img {
    border: var(--border-width) solid #cfcfcf;
    width: auto
}
embed,
iframe,
object {
    width: 100%
}
.conference-sidenav {
    list-style: none;
    margin: 0 var(--space-lg);
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--space-lg) var(--space-lg) 0
}
.conference-img-gallery {
    height: 30px;
    width: 44px !important;
    margin: var(--space-2) var(--space-2) 0 0
}
#program {
    margin-top: var(--space-lg)
}
.meta-information {
    margin-top: var(--space-8);
    background: #fff;
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-8);
    @media screen and (width <= 976px) {
        margin-top: 0
    }
}
.meta-information h5 {
    padding: 0 var(--space-lg);
    margin: 0
}
.grid .topimagespeaker img {
    max-width: 50%;
    max-height: 350px;
    width: auto
}
.error {
    color: var(--color-red)
}
/* The related grid is a lone 75% column on its own row and belongs under the content,
   not under the sidebar. text-align: right did that while columns were inline-block. */
.level-3-page {
    justify-content: flex-end
}
@media screen and (width <= 976px) {
    .level-3-page {
        flex-direction: column;
        justify-content: flex-start
    }
    /* Content above the sidebar once the two columns stack. This was unscoped, which did
       nothing while .grid was inline-block and flipped the columns once it became flex.
       The sidebar's float: left went for the same reason — floats do not apply to flex
       items. */
    .level-3-page .level-3-main {
        order: -1
    }
}
.level-3-sidebar {
    text-align: left
}
/* Content and related listing are one column, so the listing follows the content instead
   of wrapping onto a second flex line below the taller sidebar. */
.level-3-content {
    text-align: left;
    margin-bottom: var(--space-8)
}
.level-3-related {
    text-align: left
}
@media screen and (width <= 976px) {
    .level-2-sidebar {
        display: block
    }
}
#decoder {
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    line-height: 120px;
    margin: var(--space-lg) 0 48px 0;
    height: 120px
}
#decoder span {
    display: inline-block;
    position: relative
}
.decoder-description {
    text-align: center
}
.sitemap-item {
    background: #fff;
    padding: var(--space-lg);
    margin-top: var(--space-8);
    min-height: 220px
}
.sitemap-headline {
    margin: 0 0 var(--space-md) 0
}
.sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box
}
.sitemap-list li {
    margin: 0;
    padding: 0
}

div.share{
  margin:0px 0px 0px 0em;
  clear:both;
       position: relative;
    z-index: 100000;
    @media screen and (width >= 977px) {
        margin: var(--space-20) 00px 0px 0px;
        position: absolute;
        top: .5em;
        right: 1em;
        z-index: 1000000
    }
}
div.share i{
  color:var(--color-white);
  font-size:var(--space-lg)
 
}
ul.wpfai-list{
  list-style: none;
  
  margin:0px;
  display: none;
  position: absolute;
    background: #fffff;
  
    top: 3em
  
}
ul.wpfai-list li{
  margin:0px;
  padding:0px 0px 0px 0px;
  display: inherit
}

ul.wpfai-list .wpfai-icon {
    position: relative;
    display: inline-block;
    width: 3em;
    height: 2.65em;
    line-height: 2em;
    vertical-align: middle;
    background: var(--color-blue-gray);
    margin: .1em 0 .1em 0
}
ul.wpfai-list .wpfai-icon .icon {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 1.7em;
    text-align: center
}

.sharebutton{
	    padding: 7px 0px var(--space-2) 0px;
  margin:0px 0px 0px 0px;
  width:4em;
  line-height: 2.5em;
   vertical-align: middle;
    background: var(--color-blue-gray);
    font-size: 12px
 
}
.sharebutton:hover, ul.wpfai-list .wpfai-icon:hover, .sharebutton.active{
    background: var(--color-dark)
}
a.wpfai-link {
    opacity: .85
    }
    

.th-violett-background {
       background: var(--color-violet)
    }

/* Padding helpers. Last in the last stylesheet on purpose: a helper and a component rule are
   both one class, so source order is the only thing that lets the helper win. Use one *instead
   of* a bespoke padding rule, never on top of one — layering the two is exactly the
   equal-specificity collision `tools/vrt/collisions.mjs` is there to keep at 1. Named
   `<axis>-<token>` off the `--space-*` scale; add a helper when a second call site wants it,
   not before. */
.px-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg)
}
.pb-lg {
    padding-bottom: var(--space-lg)
}