@media only screen and (max-width: 992px) {

/**** Menu ******/
.menu-logo-img {
    width: 20em;
    margin-top: 2em;
    margin-left: 2em;
}



.flex-row{
    flex-direction: column !important;
}


/* Homepage */

.overlay-text-container {
    position: absolute;
    bottom: 5svw;
    right: auto;
    align-items: start;
}

.overlay-text{
    margin-left: 1em;
}

.overlay-text:nth-of-type(2) {
    margin-left: 3em;
    margin-right: 0;
    width: 10em;
    margin-top: 0.3em;
}

section.panel-1 .mask-layer-mobile{
    width:100%;
    max-width: var(--custom-maxWidth-l);
    margin: 0 auto;
    height:100vh;
    background-color: var(--jc-bg-color);
    mask-image:url('../img/mobile/section1_clipImage_inverse_mobile-extend.svg');
    mask-position: 52% 44%;
    mask-size: 198.8%;
    mask-repeat: no-repeat;
    position:sticky;
    top:0;
    left: 0;
    z-index: 2;
}

section.panel-1 .panel-wrapper .panel-items .panel-item-content{
    width: var(--custom-width-l);
    margin-top: 1em;
}

.green-bubble {
    background-image: url(../img/mobile/green-bubble-mobile.svg);
    background-position: 47% top;
    width: 23em !important;
    height: 4em;
}

.blue-highlight{
    border-radius: 3em;
    padding: 0.1em 1.7em 0.1em 2em;
}

section.panel-1 .panel-wrapper .panel-items .jc-slogan {
    width: auto;
    height: 9em;
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container {
    flex-direction: column;
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container .circle-bgs {
    /* margin: 0 0.3em; */
    margin-right: 1.5em;
    margin-left: 0em;
    margin-bottom: -0.3em;
}

section.panel-1 .panel-wrapper .panel-items-group .circle-bg-titles-container .circle-bgs:nth-of-type(2n) {
    margin-top: auto;
    margin-left: 1.5em;
    margin-right: 0;
}

section.panel .panel-wrapper .panel-items .panel-item-content.flex-align-end {
    align-items: center;
}

section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-left,
section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-right{
    width: 100%;
    text-align: center;
}

section.panel-1 .panel-wrapper .panel-items .panel-item-content .panel-item-content-left .small-text {
    padding-left: 0;
    text-align: center;
}

section.panel .panel-wrapper .panel-items .panel-item-content .panel-item-content-right .jc-image {
    width: 74%;
    height: auto;
    margin-bottom: 2em;
}

section.panel .panel-wrapper .panel-items-group img.childrenWithBinoculars {
    bottom: 0%;
    width: 78vw;
    max-width: 350px;
}

/***** Banner Section ****/
.jc-banner-container{
    margin-top: -15em;
    margin-bottom: -1em;
    z-index: 1;
    position: relative;
}
.jc-banner-container .jc-banner-bg{
    height: 80%;
}

/****** Panel 2 ******/
section.panel-2,
section.panel-2 .panel-wrapper{
    height: 70vh;
}

section.panel-2 .jc-slides-container .circle-bg-titles-container{
    top: 34px;
    left: -3em;
    transform: scale(0.7);
}

section.panel-2 .panel-text{
    bottom: -0.1em;
    right: -1%;
}

section.panel-2 .jc-slides-container{
    margin-right: 3em;
}

/****** Panel Video *****/
section.video-section{
    height: 60vh;
}

section.video-section .video-childplay-img-1{
    top: -9%;
    left: 4%;
    width: 10vw;
}
section.video-section .video-childplay-img-2{
    width: 20vw;
    bottom: -5%;
    right: -1%;
}

/****** Panel 3 ******/
section.panel-3 .panel-wrapper .panel-content {
    flex-direction: column;
    padding-top: 6em;
}

.panel-tabs-container{
    display: flex;
    flex-direction: row;
}

.panel-section-tabs{
    font-size: 1.2em;
    margin-right: 0.5em;
    padding: 0 0.6em;
}

.panel-section-tabs:first-of-type {
    margin-left: -1em;
    margin-top: auto;
}

.panel-section-tabs:last-of-type {
    margin-right: -1em;
}

.panel-3 .panel-wrapper .panel-content .panel-content-left {
    width: 100%;
    padding-bottom: 2em;
}
.panel-3 .panel-wrapper .panel-content .panel-content-right {
    width: 100%;
}

.popUps-container .popUp-content-right .popUp-slide-title-container {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    justify-content: flex-start;
}

.popUps-container .popUp-title {
        top: -1.5em;
        bottom: auto;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
        transform: translate(-25%, 0%) scale(0.5);
}

.popUps-container .popUp-title .popUp-title-container{
    margin-left: 0;
}

.popUps-container .popUp .popUp-content {
    max-width: 500px;
    min-width: 350px; 
} 

#popUps-container-1 .popUp .popUp-content .popUp-content-wrapper{
    padding: 8em 2em 4em;
}

#popUps-container-2 .popUp .popUp-content {
        overflow-y: hidden;
        background-color: #fefbf3;
        width: 100%;
        background-image: url(../img/mobile/gridlines-img-mobile.svg);
        background-position: center;
        background-size: 259%;
        padding: 2.5em;
        max-width: 500px;
        min-width: 350px;
}

.popUps-container .popUp-content-right {
    width: 100%;
}



.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content{
    flex-direction: column;
}
.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content:not(.overlapping-items) .popUp-slide-items .popUp-slide-text {
    margin-left: 0;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.single-item .popUp-slide-items{
    flex-direction: column;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-img img {
    width: 51vw;
}

.popUp-overlay-title-container{
        position: absolute;
        top: 1.8em;
        bottom: auto;
        margin-left: auto;
        margin-right: auto;
        transform: scale(0.5);
}


.bg-circle-orange {
    height: 29%;
    transform: translate(-50%, 127%);
}

.popUps-container .popUp-overlay-container .childplay-group-img {
    width: 25em;
    bottom: 8%;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-text p {
    text-align: center;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content .popUp-slide-items .popUp-slide-img img{
    max-width: 220px;
}

.popUps-container .cards-indicator{
    z-index: 98;
    position: absolute;
    bottom: 2%;
    right: 10%;
    width: 6em;
}

/***** Panel 4 *******/
.dev-map-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.phases-line-wrapper-mobile{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 8em;
    position: relative;
}

.phases-line-wrapper-mobile img{
    width: 100%;
}

.phases-line-wrapper-mobile .phases-line-tags{
    position: absolute;
    width: 7em;
    /* transform: rotate(15deg); */
}


.phases-line-wrapper-mobile .phases-line-tag-1{
    top: -4.8em;
    right: -2em;
}
.phases-line-wrapper-mobile .phases-line-tag-2{
    top: 31.3em;
    right: -2em;
}
.phases-line-wrapper-mobile .phases-line-tag-3{
    top: 76.2em;
    right: -4.7em;
    width: 10em;
    /* transform: rotate(9deg); */
}

.phases-line-wrapper-mobile .phase-textBox-mobile{
    position: absolute;
    width: 50vw;
    max-width: 300px;
}

.phases-line-wrapper-mobile img.phase-textBox-mobile-1{
    top: 1.2em;
    right: -52vw;
}
.phases-line-wrapper-mobile img.phase-textBox-mobile-2{
    top: 37.3em;
    right: -52vw;
}
.phases-line-wrapper-mobile img.phase-textBox-mobile-3{
    top: 83.2em;
    right: -52vw;
}

.popUps-container .popUp {
    height: 95%;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-1 .popUp-slide-items .popUp-slide-img img {
    width: 41vw;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-2 .popUp-slide-items .popUp-slide-img img {
    width: 62vw;
    max-width: 400px;
}

.popUps-container .popUp .popUp-content-right .popUp-slide .popUp-slide-content.custom-img-size-3 .popUp-slide-items .popUp-slide-img img {
    width: 49vw;
}

.popUps-container .splide__pagination{
    position: absolute;
    top: -5em;
    height: fit-content;
}

.popUps-container .splide__pagination li{
    padding: 0 0.4em;
}

#popUps-container-2 .popUp-cards{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#popUps-container-2 .popUp-card-1{
    position: absolute;
    background-color: #fefbf3;
    width: 100%;
    background-image: url(../img/mobile/gridlines-img-mobile.svg);
    background-position: center;
    background-size: 259%;
    left: 0;
    top: 0;
    z-index: 2;
}

#popUps-container-2 .popUp-card-2{
    justify-content: flex-end;
}

#popUps-container-2 .popUp-cards img{
    width: 100%;
    max-width: 360px;
}


#popUps-container-2 .popUp-content-text p {
    margin-bottom: 0.1em;
}

#popUps-container-2 .publicSpace-img-container{
    text-align: center;
    margin-top: 4em;
}

#popUps-container-2 .publicSpace-img-container img{
    width: 78%;
}

#popUps-container-2 .popUp-cards .popUp-bubbles-wrapper{
    position: relative;
}

#popUps-container-2 .popUp-cards .popUp-bubbles-wrapper .popUp-bubble-bg{width: 100%;}

#popUps-container-2 .popUp-cards .popUp-bubbles-wrapper .popUp-bubble-text{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
        font-family: 'MYuenHK-Medium';
        font-size: var(--custom-fontsize-m-m-s);
        font-weight: 100;
        color: white;
        line-height: var(--custom-lineheight-s);
        transform: translate(-51%, -55%);
        width: 90%;
        text-align-last: center;
}

#popUps-container-2 .popUp-cards .popUp-img-container{
    margin-bottom: 9em;
}

#popUps-container-2 .popUp-cards .popUp-content-labels{
    width: 8em;
    left: 0;
    bottom: -8em;
}




/***** Footer ******/
.footer-container{
    padding-top: 4em;
}

.footer-images img{
    width: 80%;
}

.footer-container .footer-content .footer-table .footer-images {
    width: 16em;
    margin-top: 2em;
}

.footer-links ul {
    text-align: center;
}

.footer-links:first-of-type{
    /* margin-top: 0.7em; */
    margin-top: 4.7em;
    margin-bottom: 1.3em;
}

.footer-links ul li .footer-items, .footer-links ul li > a {
    line-height: 1.6em;
}




}/*** End of Media Query Max 993px*/


@media only screen and (max-width: 700px){
    section.panel-1 .mask-layer-mobile {
        mask-position: 50.5% 44%;
        mask-size: 302.8%;
    }

    .overlay-text-container {
        position: absolute;
        bottom: 19svw;
        right: auto;
        align-items: start;
        /* width: 100%; */
    }

}