/* @group Location
------------------------------------ */

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

/* @group Location Header
------------------------------------ */
.location-header { position: relative; }
.location-header::before { content: ''; position: absolute; pointer-events: none; top: 0; width: 14.4rem; height: 14.4rem; background: no-repeat url('../../img/layout/location/deco-left.svg') left top; background-size: contain; left: 0; }
.location-header .text-box { margin: 0 0 3.1rem; }
@media only screen
and (min-width : 961px) {
    .location-header { padding: 10rem 0; }
    .location-header::before { content: none; }
    .location-header h2 { color: var(--dark-beige); }
    .location-header .text-box { max-width: 70rem; margin: 0 0 1.2rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end Location Header */

/* @group Location Image and text */
.location-image-text { color: var(--off-white); }
.location-image-text .image::after { content: ''; position: absolute; pointer-events: none; }
.location-image-text .image .img-box { height: 40.5rem; }
.location-image-text .image .img-box img { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--transition-delay) ease; }
.location-image-text .image .img-box img.show { opacity: 1;  }
.location-image-text .text { z-index: 3; }
.location-image-text .text h2 { font-size: 4.5em; line-height: 1.1em; margin: 0 0 2rem; }
.location-image-text .text ul { list-style: disc outside; padding-left: 3rem;  }
.location-image-text .text ul li { font-size: 2em; line-height: 1.3em; cursor: pointer; transition: all var(--transition-delay) ease; opacity: .3; }
.location-image-text .text ul li.active { opacity: 1; }
@media only screen
and (min-width : 961px) {
    .location-image-text .image { padding: 0; }
    .location-image-text .image .img-box { height: 62rem; margin: 0; }
    .location-image-text .text h2 { font-size: 4.5em; }
}

/* @group Location Bars
------------------------------------ */
.location-bars { padding: 5rem 0 6rem; }

.location-bars .image::before { content: ''; position: absolute; pointer-events: none; }
.location-bars .image::after { margin: 0 3rem 0 0; top: 2.5rem; right: 0; bottom: 0; left: 7.6rem; background: no-repeat url('../../img/layout/globals/texture-3.jpg') center; background-size: cover; z-index: 2; }
.location-bars .image::before { width: 10rem; height: 10rem; background: no-repeat url('../../img/layout/location/deco-live.svg') right top; background-size: contain; right: 1rem; top: -5rem; z-index: 1; }
.location-bars .image .img-box { z-index: 3; }
@media only screen
and (min-width : 961px) {
    .location-bars { padding: 1.5rem 0 19.8rem; }
    .location-bars .text { z-index: 1; }
    .location-bars .text p { margin: 0 0 3rem; }
    .location-bars .image::before { content: none; }
    .location-bars .image::after { right: -5rem; bottom: -5rem; left: 6.7rem; top: 4rem; margin: 0; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1200px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .location-bars .image { padding-bottom: 3.3rem; margin-bottom: 3rem; }
    .location-bars .image .img-box { height: 41rem; margin-right: 3rem; }
}
/* @end Location Bars
------------------------------------ */




/* @grup Location Entertainment
------------------------------------ */
.location-entertainment { padding: 0 0 7.9rem; }
.location-entertainment .image::after { margin-left: 3rem; top: 0; left: 0; right: 3rem; bottom: 2.5rem; background: no-repeat url('../../img/layout/globals/texture-5.jpg') center center; background-size: cover; }
.location-entertainment .image .img-box { z-index: 3; }
@media only screen
and (min-width : 961px) {
    .location-entertainment { padding: 0 0 12rem; }
    .location-entertainment .image::after { top: -5rem; left: -5rem; bottom: 4rem; right: 6.7rem; margin: 0; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1200px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .location-entertainment .image { padding-top: 3rem; margin-bottom: 4rem; }
    .location-entertainment .image .img-box { margin-left: 3rem; }
}
/* @end Location Entertainment
------------------------------------ */


/* @grup Location Grocery
------------------------------------ */
.location-grocery { padding: 0 0 13.5rem; position: relative; }
.location-grocery .image::after { margin: 0 3rem 0 0; top: 2.5rem; right: 0; bottom: 0; left: 7.6rem; background: no-repeat url('../../img/layout/globals/texture-6.png') center; background-size: cover; z-index: 2; }
.location-grocery .image .img-box { z-index: 3; }

.location-grocery .outerVideo { position: absolute; inset: 0; pointer-events: none; }
.location-grocery .outerVideo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #5B7282 10%, rgba(91, 114, 130, 0.70) 100%); }

@media only screen
and (min-width : 961px) {
    .location-grocery .image::after { margin: 0; top: 4rem; right: -5rem; bottom: -5rem; left: 6.7rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1200px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .location-grocery .image  { padding-bottom: 3rem; margin-bottom: 3rem; }
    .location-grocery .image .img-box { margin-right: 3rem; }
}
/* @grup Location Entertainment
------------------------------------ */


/* @grup Location Grocery
------------------------------------ */
.location-image .img-box { width: 100%; height: 84.3rem; }
@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1200px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @grup Location Entertainment
------------------------------------ */


/* @end */


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

.location-image-text  { opacity: 0; }
.location-image-text.animateActive { animation: fade var(--transition-delay) forwards; }
.location-image-text.animateActive { animation-delay: var(--transition-delay); }

.location-image  { opacity: 0; }
.location-image.animateActive { animation: fade var(--transition-delay) forwards; }
.location-image.animateActive { animation-delay: var(--transition-delay); }