/* @group District
------------------------------------ */
.district-map .mapContainer { height: 100vh; }
.district-map .mapContainer .map { background: rgba(230,231,236,1); }
.district-map .mapContainer .control { left: auto; right: 5.2rem; }
.district-map .district-list { position: absolute; left: 0; top: calc(50% - 32.3rem); height: 64.6rem; width: 49.7rem; background: rgba(255,255,255,1); box-shadow: 0 2px 11px 0 rgba(0,0,0,0.18); z-index: 3; }
.district-list header { height: 7rem; padding-left: 15.1rem;
background: linear-gradient(to right, rgba(0,178,221,1) 4.1rem,
  rgba(199,233,244,1) 4.1rem,
  rgba(199,233,244,1) 5.5rem,
  rgba(0,100,163,1) 5.5rem,
  rgba(0,100,163,1) 10rem,
  rgba(243,190,169,1) 10rem,
  rgba(243,190,169,1) 12.4rem,
  rgba(26,46,87,1) 12.4rem);
}
.district-list header h2 { color: rgba(255,255,255,1); font-size: 1.6em; font-weight: 600; letter-spacing: 3.2px; line-height: 1.250em; margin: 0; }
.district-list .content-list { height: calc(100% - 7rem); overflow: hidden; overflow-y: auto; padding: 5.6rem 5rem 5.6rem 15rem; }
.district-list h3 { color: rgba(26,46,87,1); font-size: 2.4em; letter-spacing: 0.51px; line-height: 1em; text-transform: uppercase; position: relative; cursor: pointer; }

.district-list h3 .icon-Artboard-Copy-2 { font-size: 2em; position: absolute; left: -6.2rem; top: -2rem; -webkit-text-fill-color: transparent; background: linear-gradient(270deg, rgba(241,201,119,1) 0%, rgba(249,230,175,1) 100%); -webkit-background-clip: text; line-height: 1.2em; }
.district-list .downtown-wellen .icon-Artboard-Copy-2 { background: linear-gradient(270deg, rgba(241,201,119,1) 0%, rgba(249,230,175,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
.district-list .playmore-district .icon-Artboard-Copy-2 { background: linear-gradient(270deg, rgba(0,178,221,1) 0%, rgba(147,232,253,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
.district-list .west-villages-district .icon-Artboard-Copy-2 { background: linear-gradient(270deg, rgba(195,62,99,1) 0%, rgba(253,155,157,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
.district-list h3 .ico-change { color: rgba(0,178,221,1); font-size: .585em; position: absolute; right: 0; display: block; top: .4rem; pointer-events: none; }
.district-list .active .ico-change { transform: rotate(180deg); }
.district-list h3::after { content: ''; display: block; background: rgba(0,178,221,1); height: .2rem; margin: 2rem 0 .6rem; }
.district-list ul { animation: closeDraw .04s cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: 0; overflow: hidden; margin: 0 0 4.1rem; }
.district-list .active + ul { animation: openDraw 1s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: 0; }
.district-list ul:last-child,
.district-list .active + ul:last-child { margin: 0; }
.district-list li { color: rgba(0,100,163,1); font-size: 1.6em; font-weight: 600; letter-spacing: 1px; line-height: 1.875em; }
.district-list li a { color: rgba(0,100,163,1); }
.district-list .active a { color: rgba(26,46,87,1); }
/* Children
----------------------*/
.district-children { position: absolute; top: calc(50% - 32.3rem); height: 64.6rem; width: 76.8rem; background: rgba(255,255,255,1); overflow: hidden; opacity: 0; visibility: hidden; z-index: 2;
  box-shadow: 0 2px 11px 0 rgba(0,0,0,0.18); left: -100%;
  -webkit-transition: left 0.8s linear;
  -moz-transition: left 0.8s linear;
  -ms-transition: left 0.8s linear;
  -o-transition: left 0.8s linear;
  transition: left 0.8s linear;
}
.district-children .slick-button { color: rgba(26,46,87,1); font-size: 1.4em; height: 5rem; width: 5rem; background: linear-gradient(0deg, rgba(241,201,119,1) 0%, rgba(249,230,175,1) 100%); position: absolute; right: 0; z-index: 2; overflow: hidden; }
.district-children .slick-prev { top: 33.3rem; }
.district-children .slick-next { top: 28.2rem; }
.showDistrictChildren .district-children { left: 49.7rem; opacity: 1; visibility: visible; }
/* Children - Item
----------------------*/
.child-item .img-box { height: 30rem; margin: 0 0 3.3rem;  }
.child-item h3 { color: rgba(26,46,87,1); font-size: 2.8em; font-weight: 800; letter-spacing: 0.4px; line-height: 1.286em; }
.child-item h6 { color: rgba(26,46,87,1); font-size: 1.6em; font-weight: 700; letter-spacing: 0.3px; line-height: 1.929em; }
.child-item article p { color: rgba(0,100,163,1); font-size: 1.6em; letter-spacing: 0.3px; line-height: 1.929em; margin: 0 0 2.2rem; }
.child-item aside .amenity-icon { width: 5em; height: 5em; margin: 2rem auto .5rem; object-fit: contain; }
.child-item aside .amenity-box:nth-child(1) img { margin-top: 5em !important; }
.child-item aside i { color: rgba(0,178,221,1); font-size: 4.6em; margin: 5rem 0 .6rem; display: block; }
.child-item aside .icon-Group-14 { font-size: 3.4em; margin-bottom: 1.3rem; }
.child-item aside p { color: rgba(26,46,87,1); font-size: 1.2em; letter-spacing: 0.2px; line-height: 1.667em; margin: 0 0 5rem; }
/* Animations
----------------------*/
@keyframes openDraw {
  0% { max-height: 0; }
  100% { max-height: 999vh; }
}
@keyframes closeDraw {
  0% { max-height: 999vh; }
  100% { max-height: 0; }
}
@media only screen
and (min-width : 961px) {
  .district-map .mapContainer { min-height: 830px; }
  /* List
  ----------------------*/
  .district-list .content-list { scrollbar-color: rgba(197,233,245,1) rgba(26,46,87,1); scrollbar-width: thin; }
  .district-list .content-list::-webkit-scrollbar { width: .5rem; }
  .district-list .content-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 6px 6px 6px rgba(26,46,87,1); }
  .district-list .content-list::-webkit-scrollbar-thumb { background-color: rgba(197,233,245,1); outline: .1rem solid rgba(197,233,245,1); }
  /* Children
  ----------------------*/
  .district-children article { -ms-flex: 0 0 45.4rem; flex: 0 0 45.4rem; max-width: 45.4rem; opacity: 0; visibility: hidden; }
  .district-children aside { -ms-flex: 0 0 18.1rem; flex: 0 0 18.1rem; max-width: 18.1rem; opacity: 0; visibility: hidden; }
  .district-children header { height: 7rem; background: rgba(26,46,87,1); padding: 0 1.3rem; }
  .district-children header .close { color: rgba(255,255,255,1); font-size: 3.6em; z-index: 3; }
  .district-children .slick-active article,
  .district-children .slick-active aside { animation: sectionUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: .6s; }
  .district-children .slick-active aside { animation-delay: .8s; }

  .Mozilla.v11 .district-children header .close:hover,
  .Explorer .district-children header .close:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
  @media (hover: hover) {
    .district-children header .close:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
  }
  /* Children - Item
  ----------------------*/
  .district-children .slick-container { margin-top: -3.6rem; padding: 0 2rem 0 7.4rem; }
  .child-item .bttn { padding: 2.5rem 6.5rem; }
  .child-item aside { padding-top: 3rem; }
  .district-children .slick-button::after { background: rgba(255,255,255,.4); content: ''; height: 15.5rem; left: -7.5rem; opacity: .2; position: absolute; top: -5rem; -webkit-transform: rotate(35deg); transform: rotate(35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 5rem; }
  .Mozilla.v11 .district-children .slick-button:hover::after,
  .Explorer .district-children .slick-button:hover::after { left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); }
  .Mozilla.v11 .district-children .slick-prev:hover,
  .Explorer .district-children .slick-prev:hover { text-indent: -8px; }
  .Mozilla.v11 .district-children .slick-next:hover,
  .Explorer .district-children .slick-next:hover { text-indent: 8px; }
  @media (hover: hover) {
    .district-children .slick-button:hover::after { left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); }
    .district-children .slick-prev:hover { text-indent: -8px; }
    .district-children .slick-next:hover { text-indent: 8px; }
  }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .district-map { padding-bottom: 88.7rem; }
  .district-map .mapContainer { height: 111.8rem; }
  .district-map .district-list { left: 5.5rem; top: 86.2rem; height: 99rem; width: calc(100% - 11rem); }
  .district-list header { height: 8rem; padding-left: 13rem;
  background: linear-gradient(to right, rgba(0,178,221,1) 3.3rem,
    rgba(199,233,244,1) 3.3rem,
    rgba(199,233,244,1) 4.4rem,
    rgba(0,100,163,1) 4.4rem,
    rgba(0,100,163,1) 8rem,
    rgba(243,190,169,1) 8rem,
    rgba(243,190,169,1) 9.9rem,
    rgba(26,46,87,1) 9.9rem);
  }
  .district-list header h2 { font-size: 2.4em; letter-spacing: 2px; line-height: 1.210em; }
  .district-list .content-list { height: calc(100% - 9rem); padding: 5.8rem 5.3rem 9rem 11.2rem; }
  .district-list h3 { font-size: 3.4em; letter-spacing: 0.73px; line-height: 1em; padding-right: 2rem; }
  .district-list h3 .icon-Artboard-Copy-2 { font-size: 1.412em; left: -6.2rem; top: -1.1rem; }
  .district-list h3 .ico-change { font-size: .412em; right: 2.3rem; top: 1.2rem; }
  .district-list li { font-size: 2.6em; letter-spacing: 1.63px; line-height: 2.500em; }
  /* Children
  ----------------------*/
  .district-children { left: 5.5rem; top: 94.2rem; height: 110rem; width: calc(100% - 11rem); overflow: visible; display: none; }
  .showDistrictChildren .district-children { left: 5.5rem; z-index: 3; display: block; }
  .district-children header.right { height: 7.9rem; padding: 0 4.9rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .district-children header .close { color: rgba(241,201,119,1); font-size: 1.4em; }
  .district-children header .close span { color: rgba(0,100,163,1); font: 700 1.718em / 1em proxima-nova, Arial, helvetica sans-serif; letter-spacing: 0.51px; }
  .district-children .slick-button { font-size: 1.7em; height: 7rem; width: 7rem; right: -3.5rem; }
  .district-children .slick-prev { top: 55rem; }
  .district-children .slick-next { top: 47.8rem; }
  /* Children - Item
  ----------------------*/
  .child-item { padding: 0 5.5rem 0 5.2rem; }
  .child-item .img-box { height: 35.2rem; margin: 0 0 5rem;  }
  .child-item h3 { font-size: 4.4em; line-height: 1em; margin: 0 0 1.6rem; }
  .child-item h6 { font-size: 2.6em; letter-spacing: 0.56px; line-height: 1.231em; margin: 0 0 2.4rem; }
  .child-item article p { font-size: 2.6em; letter-spacing: 0.56px; line-height: 1.694em; margin: 0 0 2.4rem; }
  .child-item .bttn { padding: 2.6rem 3.4rem 2.5rem; }
  .child-item .amenity-box { display: inline-block; width: calc(25% - 7.5rem); margin: 0 7.5rem 3.1rem 0; }
  .child-item .amenity-box:last-of-type { margin-right: 0; }
  .child-item aside.center { text-align: left; }
  .child-item aside i { font-size: 6.4em; margin: 0 0 1.8rem; }
  .child-item aside .icon-Group-14 { font-size: 4.1em; margin-bottom: 2.5rem; }
  .child-item aside p { font-size: 2em; letter-spacing: 0.22px; line-height: 1em; margin: 0 0 0; }
}
/* @end */