/* SES Components
   ===================================================================================================================== */

/* Icons
   --------------------------------------------------------------------------------------------------------------------- */
.icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: var(--space4);
    height: var(--space4);
    transition: all var(--a-time-short) var(--a-easing); 
}

.icon > * {
    color: var(--black);
    background: var(--black);
    transition: all var(--a-time-short) var(--a-easing); 
}

.icon-fill {
    fill: var(--black);
}

.icon-stroke {
    stroke: var(--black);
}

.icon-menu span {
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-menu span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 9px));
}

.icon-menu span:nth-child(2) {
    transform: translate(-100%, calc(-50% + 9px));
    width: var(--space3);
}

.icon-menu span:nth-child(3) {

}

.icon-close span {
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.icon-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(45deg);
    width: 100%;
}

.icon-close span:nth-child(3) {
    width: 0;
}

.icon-plus span {
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-plus span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(90deg);
}

.icon-stroke {
    fill: none;
}

/* SES Perspective
   --------------------------------------------------------------------------------------------------------------------- */
.ses-perspective-wrapper {
    --size: 1024px; /* don't change */
    --scale: 1;
    position: relative;
    display: block;
    width: calc(var(--size) * var(--scale));
    height: calc(var(--size) * var(--scale));
}

.ses-perspective {
    position: relative;
    display: block;
    width: var(--size);
    height: var(--size);
    transform-origin: 0 0;
    transform: scale(var(--scale));
}

.ses-perspective-base {
    position: relative;
    display: block;
    perspective: 1000px;
    width: 100%;
    height: 100%;
    transform: scale(0.8, 0.775) translate(-36px, -193px);
}

.ses-perspective-main {
    position: relative;
    display: block;
    transform: rotateX(21.5deg) rotateY(341deg) rotateZ(18.8deg) translateZ(-500px);
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    border-radius: 7%;
}

.ses-perspective-main-content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 30;
    transform: rotateX(0deg) rotateY(0deg) translateZ(500px);
    transition-property: transform;
    transition-duration: var(--a-time-short);
    transition-timing-function: linear;
}

.ses-perspective-main-content * {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    border-radius: 7%;
}

.ses-perspective-main-content.bg:before, 
.ses-perspective-main-content.border:after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    border-radius: 7%;
}

.ses-perspective-main-content.bg:before {
    background: var(--neutral);
    opacity: .15;
    z-index: 10;
}

.ses-perspective-main-content.border:after {
    z-index: 30;
    box-shadow: inset 2px 2px 4px 4px rgba(var(--neutralRGB), 0.2);
}

/* Link
   --------------------------------------------------------------------------------------------------------------------- */
.link:link,
.link:visited {
    text-decoration: underline;
    color: var(--black);
}

.link:hover,
.link:focus {
    color: var(--red);
    text-decoration: none;
}

.link:active {
    color: var(--black);
}

/* Menu Item Primary
   --------------------------------------------------------------------------------------------------------------------- */
.menu-item-primary:link,
.menu-item-primary:visited {
    display: inline-block;
    vertical-align: top;
    font-family: var(--font-heading);
    text-transform: uppercase;
    line-height: 1em;
    text-decoration: none;
    color: var(--black);
    transition: all var(--a-time-short) var(--a-easing);
}

.menu-item-primary:not(:active):hover,
.menu-item-primary:not(:active):focus {
    color: var(--red);
    transition: all var(--a-time-short) var(--a-easing);
}

.menu-item-primary:active,
.menu-item-primary.current:link,
.menu-item-primary.current:visited,
.menu-item-primary.current:hover,
.menu-item-primary.current:focus,
.menu-item-primary.current:active {
    color: var(--white);
    -webkit-text-stroke: 1px var(--red);
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)";
}

.menu-item-primary.current:link,
.menu-item-primary.current:visited,
.menu-item-primary.current:hover,
.menu-item-primary.current:focus,
.menu-item-primary.current:active {
    pointer-events: none;
    cursor: default;
}

/* Menu Item Secondary
   --------------------------------------------------------------------------------------------------------------------- */
.menu-item-secondary:link,
.menu-item-secondary:visited {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: var(--neutral);
    transition: all var(--a-time-short) var(--a-easing);
    font-family: var(--font-heading);
    text-transform: uppercase;
    line-height: 1.5em;
    font-size: var(--title2);
    color: var(--black);
}

.menu-item-secondary:not(:active):hover,
.menu-item-secondary:not(:active):focus {
    color: var(--red);
    transition: all var(--a-time-short) var(--a-easing);
}

.menu-item-secondary:active,
.menu-item-secondary.current:link,
.menu-item-secondary.current:visited,
.menu-item-secondary.current:hover,
.menu-item-secondary.current:focus,
.menu-item-secondary.current:active {
    color: var(--white);
    -webkit-text-stroke: 1px var(--red);
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=-0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-0, Color=#a72b2a)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color=#a72b2a)";
}

.menu-item-secondary.current:link,
.menu-item-secondary.current:visited,
.menu-item-secondary.current:hover,
.menu-item-secondary.current:focus,
.menu-item-secondary.current:active {
    pointer-events: none;
    cursor: default;
}

/* Menu Item Secondary in Submenus */
.submenu .menu-item-secondary:link,
.submenu .menu-item-secondary:visited {
    color: var(--neutral);
}

.submenu .menu-item-secondary:not(:active):hover,
.submenu .menu-item-secondary:not(:active):focus {
    color: var(--red);
    transition: all var(--a-time-short) var(--a-easing);
}

.submenu .menu-item-secondary:active,
.submenu .menu-item-secondary.current:link,
.submenu .menu-item-secondary.current:visited,
.submenu .menu-item-secondary.current:hover,
.submenu .menu-item-secondary.current:focus,
.submenu .menu-item-secondary.current:active {
    color: var(--black);
    -webkit-text-stroke: 0px;
    -ms-filter: none;
}

.submenu .menu-item-secondary.current:link,
.submenu .menu-item-secondary.current:visited,
.submenu .menu-item-secondary.current:hover,
.submenu .menu-item-secondary.current:focus,
.submenu .menu-item-secondary.current:active {
    pointer-events: none;
    cursor: default;
}

/* SES Button
   --------------------------------------------------------------------------------------------------------------------- */
.ses-button {
    --height: calc(var(--space4) + var(--space2)); /* change only this to change all metrics */
    --radius: calc(var(--height) / 2);
    --padding: calc(var(--radius) * 0.8);
    position: relative;
    vertical-align: top;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    color: var(--red);
    height: var(--height);
    line-height: var(--height);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0px 1px var(--red);
    padding: 0 var(--padding);
    text-decoration: none;
    outline: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    background: var(--white);
    transition: all var(--a-time-short) var(--a-easing); 
}

.ses-button:hover,
.ses-button:focus {
    border: none;
    box-shadow: none;
    background: var(--red);
    color: var(--white);
    transition: all var(--a-time-short) var(--a-easing); 
}

.ses-button:active {
    border: none;
    box-shadow: none;
    background: var(--black);
    color: var(--white);
}

.ses-button-small {
    --height: calc(var(--space3_5) + var(--space1));
    font-size: var(--micro-text);
}

.ses-button-small .icon {
    width: var(--small-text);
    height: var(--small-text);
}

.ses-button.icon-only {
    width: var(--height);
    padding: 0;
}

.ses-button .icon > * {
    color: var(--red);
    background: var(--red);
}

.ses-button:hover .icon > *,
.ses-button:focus .icon > *,
.ses-button:active .icon > * {
    color: var(--white);
    background: var(--white);
}

.ses-button .icon-fill > * {
    fill: var(--red);
}

.ses-button:hover .icon-fill > *,
.ses-button:focus .icon-fill > *,
.ses-button:active .icon-fill > * {
    fill: var(--white);
}

.ses-button .icon-stroke > * {
    stroke: var(--red);
}

.ses-button:hover .icon-stroke > *,
.ses-button:focus .icon-stroke > *,
.ses-button:active .icon-stroke > * {
    stroke: var(--white);
}

/* SES Player
   --------------------------------------------------------------------------------------------------------------------- */
.ses-player {
    position: fixed;
    display: flex;
}

.ses-player .image img {
    filter: blur(2px);
}

.ses-player.is-unbound .controls {
    display: none;
}

.ses-player:not(.is-unbound) .audio  {
    display: none;
}

.ses-player .controls {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.ses-player .controls .control {
    cursor: pointer;
}

.ses-player .controls .control:hover,
.ses-player .controls .control:focus {
    fill: var(--red);
}

.ses-player .controls .control:active {
    fill: var(--black);
}

.ses-player .controls .control-play .icon-pause {
    display: none;
}

.ses-player.is-playing .controls .control-play .icon-play {
    display: none;
}

.ses-player.is-playing .controls .control-play .icon-pause {
    display: inline-block;
}

.ses-player p .artist {
    font-weight: 700;
}

.progress-wrapper {
    position: relative;
    opacity: 0;
    width: 0;
    margin: calc(var(--space2) * -0.5) 0 calc(var(--space2) * -1);
    padding: var(--space2) 0;
    cursor: pointer;
}

.progress {
    position: relative;
    width: 100%;
    background: var(--neutral-light);
    height: var(--space0);
    border-radius: 1px;
    transition: opacity var(--a-time-short) var(--a-easing);
}

.preview {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 1%;
    width: 1%;
    background: var(--black);
    height: 100%;
    border-radius: 1px;
    opacity: 0.3;
    z-index: 20;
    transition: width var(--a-time-short) var(--a-easing);
}

.elapsed {
    position: relative;
    min-width: 1%;
    width: 1%;
    background: var(--neutral);
    height: 100%;
    border-radius: 1px;
    opacity: 0.5;
    z-index: 10;
    transition: width var(--a-time-short) var(--a-easing);
}

@media (max-width: 640px) {
    .ses-player {
        flex-flow: row nowrap;
        max-width: 100vw;
        width: calc(100vw - (var(--headerTopHPadding) * 2));
        align-items: center;
        right: 0;
        bottom: 0;
        padding: var(--space2) var(--headerTopHPadding);
        border-top: var(--ses-border);
        background: var(--white);
    }

    .ses-player .image {
        --scale: calc(var(--ses-logo-height-percent) * 0.7);
    }

    .ses-player .controls {
        margin-left: var(--space3);
    }

    .ses-player .controls .control .icon {
        width: calc(var(--space3) * 1.2);
        height: calc(var(--space3) * 1.2);
    }

    .ses-player .controls .control:not(:last-child) {
        margin-right: var(--space2_5);
    }

    .ses-player p {
        font-size: var(--small-text);
        margin-left: var(--space3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ses-player p br {
        display: none;
    }

    .ses-player p span:last-child:before {
        content: "—\00a0";
        position: relative;
        display: inline-block;
    }
}

@media (min-width: 641px) {
    .ses-player {
        flex-flow: column nowrap;
        align-items: flex-end;
        bottom: var(--bottomPadding);
        right: var(--headerTopHPadding);
        max-width: var(--space5_5);
    }

    @media (min-width: 1600px) {
        .ses-player {
            right: calc(((100vw - var(--max-width)) / 2) + var(--headerTopHPadding));
        }
    }

    .ses-player .image {
        --scale: calc(var(--ses-logo-height-percent) * 1.2);
    }

    .ses-player .controls {
        margin-top: var(--space3);
    }

    .ses-player .controls .control .icon {
        width: var(--space2_5);
        height: var(--space2_5);
    }

    .ses-player .controls .control:not(:last-child) {
        margin-right: var(--space2_5);
    }

    .ses-player p {
        font-size: var(--mini-text);
        margin-top: var(--space2);
        text-align: right;
    }

    .ses-player p {
        width: 100%;
        line-height: var(--lh2);
        letter-spacing: var(--letter-spacing-double);
    }

    .ses-player p span {
        width: 100%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .progress-wrapper.is-visible {
        width: 100%;
        opacity: 1;
    }
}

/* Side Panel
   --------------------------------------------------------------------------------------------------------------------- */
.side-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--white);
    z-index: 10;
    transition: transform var(--a-time-mid) var(--a-easing);
    overflow-x: hidden;
    z-index: 20;
}

.side-panel.left {
    border-right: var(--ses-border);
    transform: translateX(-100%);
}

.toggle-side-panel:hover,
.toggle-side-panel:focus {
    cursor: pointer;
}

.toggle-side-panel:hover .icon > *,
.toggle-side-panel:focus .icon > * {
    background: var(--red);
}

.toggle-side-panel:active .icon > * {
    background: var(--black);
}

.side-panel.left .toggle-side-panel {
    position: absolute;
    top: calc(var(--space2_5) + 12px);
    left: var(--headerTopHPadding);
}

.side-panel.left.is-open {
    transform: translateX(0);
}

.side-panel .inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transition: transform var(--a-time-mid) var(--a-easing);
}

.side-panel.left .inner {
    padding: calc(var(--space2_5) + 8px) var(--headerTopHPadding) var(--space2_5) calc(var(--headerTopHPadding) + var(--space4) + var(--space3_5));
}

.side-panel .inner .bottom {
    margin-top: var(--space4);
    padding-bottom: var(--space2_5);
}

@media (max-width: 432px) {
    body .side-panel {
        width: 100%;
        min-width: 100%;
        --dist: (432px - 100vw);
    }

    .side-panel.left .inner {
        padding-left: calc(var(--headerTopHPadding) + var(--space4) + var(--space3_5) - (var(--dist) * 0.2))
    }
    
    .side-panel .toggle-side-panel .icon {
        width: calc(var(--space4) - (var(--dist) * 0.09));
        height: calc(var(--space4) - (var(--dist) * 0.09));
    }

    @media (max-width: 319px) {
        .side-panel.left .inner {
            padding-left: calc(var(--headerTopHPadding) + var(--space4) + var(--space3_5) - 22px);
        }

        .side-panel .toggle-side-panel .icon {
            width: 22px;
            height: 22px;
        }
    }
}

@media (min-width: 1600px) {
    .side-panel.left.is-open {
        transform: translateX(calc((100vw - var(--max-width)) / 2));
    }
}

/* Date
   --------------------------------------------------------------------------------------------------------------------- */
.date {
    font-size: var(--small-text);
    color: var(--neutral);
}

/* Latest updates
   --------------------------------------------------------------------------------------------------------------------- */
.latest-updates {
    padding-bottom: var(--bottomPadding);
}

.latest-updates h1 + .update {
    margin-top: calc(var(--space5) - var(--space2));
}

.latest-updates .update {
    position: relative;
    margin-top: var(--space4);
    padding-left: calc(var(--space5) - var(--space2));
}

.latest-updates .update h4 + div {
    margin-top: var(--space2);
}

.latest-updates .update .date {
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
}

/* Loading Skeleton
   --------------------------------------------------------------------------------------------------------------------- */
.loading-skeleton {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity var(--a-time-mid) var(--a-easing);
    pointer-events: none;
    background: var(--white);
    padding: 0 var(--space4);
}

.is-loading + .loading-skeleton {
    opacity: 1;
    z-index: 10;
    transition: opacity var(--a-time-mid) var(--a-easing);
    pointer-events: all;
}

.loading-skeleton .layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space3);
    opacity: .15;
}

@media (min-width: 1200px) {
    .loading-skeleton .layout {
        width: 90%;
        margin-left: auto;
    }
}

.loading-skeleton .layout > * {
    position: relative;
    overflow: hidden;
}

.loading-skeleton .layout > *:after,
.loading-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    right: -100%;
    bottom: 0;
    background: rgb(255,255,255);
    background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%);
    transform: translateX(0%);
    
    animation-name: skeleton-animation;
    animation-duration: 1.25s;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
    animation-iteration-count: infinite;
}
  
@keyframes skeleton-animation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.loading-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--neutral);
    opacity: .15;
}

.loading-skeleton .header {
    border-radius: var(--radius-small);
    width: 70%;
    height: var(--space4);
    background: var(--neutral);
    margin: var(--space5) 0 var(--space3);
}

.loading-skeleton .line {
    border-radius: var(--radius-small);
    width: 100%;
    height: var(--space3);
    background: var(--neutral);
}

.loading-skeleton .line.s1 {
    width: 20%;
}

.loading-skeleton .line.s2 {
    width: 40%;
}

.loading-skeleton .line.s3 {
    width: 60%;
}

.loading-skeleton .line.s4 {
    width: 80%;
}

.loading-skeleton .media {
    border-radius: var(--radius-small);
    width: 55%;
    height: var(--space7);
    background: var(--neutral);
    margin-top: var(--space3);
}

/* Side Mask
   --------------------------------------------------------------------------------------------------------------------- */
.side-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    pointer-events: none;
    background: transparent;
}

.side-mask.is-visible {
    pointer-events: all;
}

/* SES Gallery
   --------------------------------------------------------------------------------------------------------------------- */
.ses-gallery {
    position: relative;
    overflow: hidden;
}

.ses-gallery > * {
    position: relative;
    z-index: 30;
}

.ses-gallery.loading-box:before {
    z-index: 1;
    top: 0.1%;
    left: 0.1%;
    width: 99.8%;
    height: 99.8%;
}

.ses-gallery.loading-box:after {
    z-index: 2;
}

.ses-gallery.by-width {
    --width: 100%;
    width: var(--width);
    padding-bottom: calc(var(--width) * 0.9536);
}

.ses-gallery.by-height {
    height: 104%;
}

.ses-gallery.masked .mask {
    display: block;
    fill: var(--white);
    z-index: 20;
    pointer-events: none;
}

.ses-gallery.masked.by-width .mask {
    position: absolute;
    width: 104%;
    height: auto;
    margin-top: -2%;
    margin-left: -2%;
}

.ses-gallery.masked.by-height .mask {
    position: relative;
    width: auto;
    height: 100%;
}

.ses-gallery.masked .mask .inner {
    display: block;
    fill: transparent;
    z-index: 30;
}

.ses-gallery.masked.is-interactive .mask .inner {
    display: none;
}

.ses-gallery.masked.is-interactive .mask .reverse-shape {
    pointer-events: painted;
}

.ses-gallery .item {
    position: absolute;
    z-index: 10;
    opacity: 1;
    transition: opacity var(--a-time-long) var(--a-easing), transform var(--a-time-mid) var(--a-easing) 0.1s;
}

.ses-gallery.masked.by-width .item {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ses-gallery.masked.by-height .item {
    top: 1.8%;
    left: 1.8%;
    width: 96.4%;
    height: 96.4%;
}

.ses-gallery .item:not(.current) {
    opacity: 0;
    pointer-events: none;
}

.ses-gallery .item.image {
    object-fit: cover;
}

/* Grayscale filter for browser in this order
   * Firefox 10+, Firefox on Android
   * IE6-9
   * Chrome 19+, Safari 6+, Safari 6+ iOS */
.ses-gallery .item.image {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray; 
    -webkit-filter: grayscale(100%);
}

.ses-gallery.masked.is-interactive .item {
    cursor: pointer;
    transform: scale(1);
}

.ses-gallery.masked.is-interactive .item:hover,
.ses-gallery.masked.is-interactive .item:focus,
.ses-gallery.masked.is-interactive .item:active {
    transform: scale(1.03);
    transition: opacity var(--a-time-long) var(--a-easing), transform var(--a-time-mid) var(--a-easing);
}

/* SES Floor plan
   --------------------------------------------------------------------------------------------------------------------- */
.ses-floor-plan {
}

.ses-floor-plan .plan {
    position: relative;
    overflow: visible;
}

.ses-floor-plan .plan path {
    fill: var(--white);
    stroke: var(--black);
    stroke-width: 1px;
    cursor: pointer;
    transition: all var(--a-time-mid) var(--a-easing);
}

.ses-floor-plan .plan path:hover,
.ses-floor-plan .plan path:focus {
    stroke: var(--red);
    stroke-width: 2.5px;
}

.ses-floor-plan .plan path:active {
    stroke: var(--black);
    stroke-width: 3.5px;
}

.ses-floor-plan .plan path.is-selected {
    fill: var(--red-light);
    pointer-events: none;
    cursor: pointer;
    stroke: var(--red);
    stroke-width: 2.5px;
}

.ses-floor-plan .plan .legend {
    fill: var(--black);
    font-family: var(--font-body);
    font-size: calc(var(--small-text) * 1.1);
    font-style: italic;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    transition: all var(--a-time-mid) var(--a-easing);
    dominant-baseline: "middle";
    text-anchor: "middle";
}

.ses-floor-plan .plan path:hover + .legend,
.ses-floor-plan .plan path:focus + .legend {
    fill: var(--red);
}

.ses-floor-plan .plan path:active + .legend {
    fill: var(--black);
}

.ses-floor-plan .plan path.is-selected + .legend {
    fill: var(--red);
}

/* Red Light
   --------------------------------------------------------------------------------------------------------------------- */
.red-light {
    position: relative;
    display: inline-block;
    width: var(--space2);
    height: var(--space2);
    background: var(--red-full);
    border-radius: 50%;
    vertical-align: 0.4em;
    margin-left: 0.25em;
}

.red-light:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--red-full);
    transform-origin: 50%;
    transform: scale(1);
    opacity: 0.4;
    animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.link:hover .red-light,
.link:focus .red-light {
    background: var(--red);
}

.link:active .red-light {
    background: var(--black);
}

/* In page anchor
   --------------------------------------------------------------------------------------------------------------------- */
.in-page-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

/* Modal
   --------------------------------------------------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
}

.modal-backdrop.is-visible {
}

.modal-backdrop:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--translucent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    opacity: 0;
    transition: opacity var(--a-time-mid) var(--a-easing);
}

.modal-backdrop.is-visible:before {
    opacity: 1;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0px;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    border-radius: var(--radius-large);
    overflow: hidden;
    padding: 0px;
    box-shadow: var(--ses-shadow);
    transition: all var(--a-time-mid) var(--a-easing);
    transition-delay: 0s;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.is-visible .modal {
    transition-delay: 0s;
}

.modal > * {
    display: block;
    width: 100%;
    border-radius: var(--radius-large);
    z-index: 30;
}

.modal-link:link,
.modal-link:visited {
    display: block;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-large);
    transition: var(--a-time-mid);
    padding: 2px;
}

.modal-link:hover,
.modal-link:focus {
    border: var(--ses-border-actionable-red);
    outline: none;
}

.modal-link:active {
    border: var(--ses-border-actionable-black);
}

.modal-controls {
    position: fixed;
    display: inline-block;
    width: auto;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all var(--a-time-short) var(--a-easing);
}

.modal-controls.is-visible {
    opacity: 1;
    transition: all var(--a-time-long) var(--a-easing);
}

.modal-controls {
    margin-bottom: var(--space3);
}

.modal-controls a:not(:first-child) {
    margin-left: var(--space3);
}