/* @group Residences
------------------------------------ */

[data-page="residences"] { background: none var(--dark-blue-secondary); color: var(--beige); }
@media only screen
and (min-width : 961px) {
    [data-page="residences"] { background: no-repeat url('../../img/layout/residences/background.png') var(--dark-blue-secondary) top center; background-size: 100% auto; }
}

/* @group Residences Header
------------------------------------ */
.residences-header { position: relative; }
.residences-header::before { content: ''; position: absolute; pointer-events: none; top: 0; left: 0; height: 15rem; width: 15rem; background: no-repeat url('../../img/layout/residences/deco-left-mobile.svg') left top; background-size: contain; }
.residences-header article { z-index: 3; }
.residences-header .text-box { margin-bottom: .8rem; }
@media only screen
and (min-width : 961px) {
    .residences-header::before { content: none; }
    .residences-header .text-box { margin-bottom: 1.8rem; }
    .residences-header h2 { margin: 0 0 5.5rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Residences Header
------------------------------------ */


/* @group Residences Features
------------------------------------ */
.residences-features { background-color: var(--off-white); padding: 8rem 0 2.7rem; }
.residences-features .boxes { display: flex; flex-wrap: wrap; justify-content: space-between; }
.residences-features .boxes .box { color: var(--dark-green); margin-bottom: 4rem; padding: 0 2rem; flex: 0 1 100%; max-width: 100%; }
.residences-features .boxes .box h4 { color: var(--rust); text-transform: uppercase; margin: 0 0 1.2rem; }
.residences-features .boxes .box ul { list-style: disc inside; }
@media only screen
and (min-width : 961px) {
    .residences-features { padding: 8rem 0 1rem; }
    .residences-features .boxes .box { margin-bottom: 7rem; padding: 0 1.5rem; flex: 0 1 25%; max-width: 25%; }
    .residences-features .boxes .box ul { list-style: disc outside; padding-left: 1rem; }
    .residences-features .boxes .box li,
    .residences-features .boxes .box p { font-size: 1.7em; line-height: 1.4em; letter-spacing: .117em; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .residences-features .boxes .box { text-align: center; }
}
/* @end Residences Features
------------------------------------ */


/* @end */

/* Animations
------------------------------------ */

.residences-slider::before,
.residences-slider::after,
.residences-slider .splide__list,
.residences-slider .splide__arrows { opacity: 0; }
.residences-slider.animateActive::before,
.residences-slider.animateActive::after,
.residences-slider.animateActive .splide__list,
.residences-slider.animateActive .splide__arrows { animation: fade var(--transition-delay) forwards; }
.residences-slider.animateActive .splide__list { animation-delay: calc(var(--transition-delay-short) * 3); }
.residences-slider.animateActive .splide__arrows { animation-delay: calc(var(--transition-delay-short) * 3.5); }
.residences-slider.animateActive::before,
.residences-slider.animateActive::after { animation-delay: calc(var(--transition-delay-short) * 4); }

.residences-features .box { opacity: 0; }
.residences-features.animateActive .box { animation: fade var(--transition-delay) forwards; }
.residences-features.animateActive .box:nth-child(1) { animation-delay: var(--transition-delay-short); }
.residences-features.animateActive .box:nth-child(2) { animation-delay: calc(var(--transition-delay-short) * 2); }
.residences-features.animateActive .box:nth-child(3) { animation-delay: calc(var(--transition-delay-short) * 2.5); }
.residences-features.animateActive .box:nth-child(4) { animation-delay: calc(var(--transition-delay-short) * 3); }
.residences-features.animateActive .box:nth-child(5) { animation-delay: calc(var(--transition-delay-short) * 3.5); }
.residences-features.animateActive .box:nth-child(6) { animation-delay: calc(var(--transition-delay-short) * 4); }
.residences-features.animateActive .box:nth-child(7) { animation-delay: calc(var(--transition-delay-short) * 4.5); }
.residences-features.animateActive .box:nth-child(8) { animation-delay: calc(var(--transition-delay-short) * 5); }
.residences-features.animateActive .box:nth-child(9) { animation-delay: calc(var(--transition-delay-short) * 5.5); }