/*
PAT25 Schoolbag CSS
Julian Yeo with Happy3Media for MOE
Adapted from MOE Schoolbag Int Story Pool Heroes
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {  /* no enclosing rgb */
  --colorcrem: 255, 227, 166; /* FFE3A6 */
  --colorpink: 239, 132, 193; /* EF84C1 */
  --colorblue: 40, 85, 231; /* 2855E7 */
  --colorlpnk: 255, 217, 227; /* FFD9E3 */
  --colornavy: 75, 84, 127; /* 4B547F */
  --coloryelw: 253, 204, 39; /* FDCC27 */
  --colorofwt: 349, 242, 234; /* F9F2EA */
  --fontmono: "Roboto Mono", "Courier", monospace;
  --fontttlw: "Titillium Web", Helvetica, Arial, sans-serif;
}

html, body {
      height: 100vh;
      height: 100dvh; /* dynamic vh will make the trick on iOS */
}

html { font-size: 12px; }

body {
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: var(--fontttlw);
    font-size: 1.2rem;
    text-rendering: optimizeLegibility;
    background-color: rgb(var(--colorofwt));
    transition: background-color 0.5s ease;
    overflow-x: hidden;
}

body.stopscroll {
    overflow: hidden;
}

a {
    color: #fff;
    text-decoration: underline;
}

.header {
    position: absolute;
    width: calc(100% - 30px);
    z-index: 3;
    padding: 15px;
}

.logo {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    align-items: center;
    justify-items: end;
    opacity: 1;
}

.logo img {
    max-width: 128px;
}

.logo-btm {
    margin: 0 auto;
    text-align: center;
    padding-top: 30vh;
    opacity: .8;
}

.scroll-indicator {
    margin-top: 15vh;
    font-size: 0.9rem;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgb(var(--colorpink));
}

/*------------------------------------*\
    NAVIGATION
\*------------------------------------*/



/*------------------------------------*\
    SECTIONS
\*------------------------------------*/


.content-wrapper {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.fullwrapper {
    max-width: 100vw;
}

section {
    position: relative;
    height: 100%;
    /* padding-top: 100vh; */
    margin-block-start: 0 !important;
    overflow: hidden;
}

section#sectTOP {
    height: 80%;
    padding-top: 80vh;
}

section#sectnav {
      border-radius: 40px 40px 0 0;
}


section.halfheight {
    height: 50%;
    padding-top: 50vh;
}

section#outro1 {
    height: 25%;
    padding-top: 25vh;
}

#outro1 .scroll-box {
    height: 25vh;
}

.hozc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    margin:0 !important;
}

.hozc.sectshow, .finuicontain.sectshow {
    opacity: 1;
    pointer-events: all;
}

.bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.scroll-box {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    height: 100vh;
    z-index: 2;
}

.scroll-box.single {
    height: 150vh;
}

.scroll-box.double {
    height: 200vh;
}

.scroll-box.no-height {
    height: fit-content;
}

.scroll-box.righty {
    justify-self: flex-end;
}

.content-box {
    padding: .6rem 1.5rem .6rem;
    /*-webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);*/
  max-width: 100%;
    /*max-height: 68vh;
    overflow-y: auto;*/
}

.content-box.centered {
    margin: 0 auto;
}

.scroll-box.righty .content-box {
    margin-left: 0;
}

.colbg {
    text-align: center;
    display: flex;
    width: 90vw;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 10px;
    border-radius: 5px;
}

.fincontain {
    padding: 60px 20px 30px;
}

.fincontain.fincenter{
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.finbg {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-content: center;
}

button.top {
    margin-top: 40px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #fff;
    border-radius: 50px;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}

button.top:hover {
    color: #ff8737;
    border: 1px solid #ff8737;
}

.sectB .colbg {  background: rgba(var(--colorstAB), 0.75);}

.colbg.quotebg {
    display: flex;
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
    padding: 40px;
    margin: 0 auto 0 0;
    border-radius: 0;
    text-align: left;
    justify-content: flex-start;
    align-content: center;
}

.fullwrapper .quotebg {
    padding: 20px 50px;
}

.colbg.infobox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}

.fullwrapper.colbg {
    width: 100vw;
    padding: 0;
}

.readmorecta {
      display: block;
      border-radius: 30px;
      width: 70%;
      margin: 0 auto;
      padding: 10px 20px;
      margin-top: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.2rem;
      background-color: rgb(var(--colorcyan));
      color: #ffffff;
}

.finui {
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 40;
    transition: all 0.5s ease;
    opacity:0;
    pointer-events: none;
}

.finui.cls {
    position: relative;
    top: -15px;
    left: calc(100% - 10px);
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/uploads/2025/11/mw2510_btn_close.png');
    cursor:pointer;
}

.finui.home {
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/uploads/2025/11/mw2510_icon_home.png');
    cursor:pointer;
    pointer-events: all;
    opacity:1;
    margin-top: 3px;
}

.finui.ques {
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/uploads/2025/11/mw2510_icon_ques.png');
    cursor:pointer;
    pointer-events: none;
    opacity:0;
    margin-top: 3px;
}

.finui.showup, .finui.ques .showup {
    opacity:1;
    pointer-events: all;
}

.dimmer {
    position:fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

.content-box h5 {
    font-family: var(--fontttlw);
    margin: 0;
    font-size: clamp(1.2rem, 3vmin, 1.8rem);
    font-weight: 700;
    line-height: 1.1;
    padding-bottom:10px;
    color: #000000;
}

.content-box p {
    font-family: var(--fontttlw);
    margin: 0;
    font-size: clamp(1.2rem, 3vmin, 1.8rem);
    line-height: 1.1;
    padding-bottom:10px;
    color: rgb(var(--colorblue));
}

.panelcontain p {
    font-family: var(--fontttlw);
    font-size: clamp(1.25rem, 4vmin, 1.5rem);
    font-weight: 500;
    line-height: 1.1;
    color: rgb(var(--colorblue));
}

.locbox-contain {
    background: rgb(var(--colorpink));
    border-radius: 15px;
    color: #ffffff;
    position: relative;
}

.locbox-contain p {
    padding: 15px;
    font-family: var(--fontmono);
    font-size: 1.5rem !important;
    color: #ffffff;
}

.location-bg {
      aspect-ratio: 2 / 1;
      border-radius: 15px;
}

h1 {
    font-family: var(--fontttlw);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.finalists h1, .finalists h3 {
    font-family: var(--fontmono);
    font-size: 2rem;
    color: #000000;
    text-align: center;
}

.outrolink.finalists h1, .outrolink.finalists h3 {
    font-family: var(--fontttlw);
    color: rgb(var(--colorwite));
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.outrolink.finalists a {
    font-family: var(--fontttlw);
    color: rgb(var(--colorblue));
}


.fin-cat h2 {
    font-family: var(--fontttlw);
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: rgb(var(--colorblue));
    margin: 30px 10px 5px;
}

.panelcontain h2 {
    font-family: var(--fontttlw);
    font-size: clamp(2.2rem, 2.5vw, 4rem);
    color: rgb(var(--colorblue));
}


h3 {
    font-family: var(--fontttlw);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

h3 .tnsub {
    font-family: var(--fontttlw);
    font-size: clamp(2rem, 2vw, 3rem);
    font-weight: 500;
    line-height: 1;
    display: block;
}

.panelcontain h3 {
    font-family: var(--fontttlw);
    font-size: clamp(1.4rem, 1.5vw, 2rem);
    font-style: italic;
    line-height: 1.4;
}

.fincenter h3 {
    font-family: var(--fontttlw);
    font-style: normal;
    font-weight: 700;
    color: rgb(var(--colorblue));
    line-height: 1.1;
}

.sectB .hdg { color: rgb(var(--colorstAB)); }

.colbg h3 {
    font-family: var(--fontttlw);
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .3px;
    margin: 0 auto;
}

.colbg p {
    font-family: var(--fontttlw);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .3px;
}

.colbg.quotebg p {
    font-family: var(--fontttlw);
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.colbg li {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .3px;
    text-align: left;
}

.content-centered > * {
    text-align: center;
}

p.quoted {
    font-size: 1.5rem;
    font-weight: 500;
}

.fincenter p.quoted {
      font-size: clamp(1.6rem, 2.2vw, 4rem);
      font-weight: 700;
      font-style: italic;
      color: #000000;
}

.infobox p.quoted {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
    padding: 0px 20px;
}

p.byline {
    margin-left: 0px;
    position: relative;
    font-size: 1rem;
}

.fincenter p.byline  {
    font-size: clamp(1.1rem, 1.5vw, 2rem);
    font-weight: 400;
}

/* p.byline:before {
    content:"–";
    font-size:1.5rem;
    position: absolute;
    line-height: 0.8;
    top: 0;
    left: -25px;
} */

.quoteanim div {
    display:inline-block;
}

.fin-who {
      font-size: clamp(0.8rem,3vmin,1.2rem);
      width: calc(100% - 30px);
      position: absolute;
      bottom: 0;
      left: 0;
      color: #ffffff;
      padding: 15px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 80%);
}

.backtotop {
    bottom: inherit;
}

.fa-computer-mouse {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.btow {
    filter:invert(1);
}

.explore-btn {
      position: absolute;
      left: 10px;
      bottom: 10px;
      border: 2px solid #000000;
      background-color: rgb(var(--colorpink));
      padding: 5px 10px;
      border-radius: 15px;
      color: #000000;
      font-size: 1rem;
      font-family: var(--fontmono);
      cursor: pointer;
      transition: all 0.5s ease;
      user-select: none;
}

.locbox:hover .explore-btn, .explore-btn:hover {
      background-color: #000000;
      color: rgb(var(--colorpink));
}


/*------------------------------------*\
    BG IMAGES AND BOXES
\*------------------------------------*/

.gridbg { background: url('/wp-content/uploads/2025/11/bg/pat25_bggrid.png') center 2px repeat; width: 100%; padding-bottom: 80px;}

.bg.sakurabg { background: linear-gradient(0deg,rgba(255, 255, 255, 1) 10%, rgba(255, 217, 227, 1) 100%);}

.bg.orgbg { background: url('/wp-content/uploads/2025/11/bg/pat25_accent-orangetop.png') left top/300px no-repeat, rgb(var(--colororng)); border-radius: 40px 40px 0 0;}

.crmbgc { background-color: rgb(var(--colorcrem)); }
.ofwbgc { background-color: rgb(var(--colorofwt)); }
.nvybgc { background-color: rgb(var(--colornavy)); }
.crmbgc { background-color: rgb(var(--colorcrem)); }


.location-bg { transition: all 0.5s ease; }

.locbox.lb1 .location-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen.jpg') 0% top/cover no-repeat }
.locbox.lb1:hover .location-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen.jpg') 20% top/cover no-repeat }
.locbox.lb2 .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom.jpg') 50% top/cover no-repeat;}
.locbox.lb2:hover .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom.jpg') 70% top/cover no-repeat;}
.locbox.lb3 .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout.jpg') 50% top/cover no-repeat;}
.locbox.lb3:hover .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout.jpg') 30% top/cover no-repeat;}
.locbox.lb4 .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_field.jpg') 100% top/cover no-repeat;}
.locbox.lb4:hover .location-bg {background: url('/wp-content/uploads/2025/11/mw2510_bg_field.jpg') 80% top/cover no-repeat;}

.obg { background: rgba(var(--colorcrem), 0.5);  width: 150vw; height: 180vh; opacity:0; transition: opacity 0.5s ease; z-index: 29; pointer-events:none; }
.nbg { background: rgba(var(--colornavy), 0.5);  width: 150vw; height: 180vh; opacity:0; transition: opacity 0.5s ease; z-index: 29; pointer-events:none; }
.ovrbg { opacity:0; transition: opacity 0.5s ease; 
    aspect-ratio: 16 / 10;}
.ovrbg.showup, .ovrcbg.showup { opacity:1; }

#sectA .locbox-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen.jpg') left top/cover no-repeat }
#sectA .obgA1 { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen-O1.png') left top/cover no-repeat }
#sectA .obgA2 { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen-O2.png') left top/cover no-repeat }
#sectA .obgA3 { background: url('/wp-content/uploads/2025/11/mw2510_bg_canteen-O3.png') left top/cover no-repeat }

#sectB .locbox-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom.jpg') left bottom/cover no-repeat }
#sectB .obgB1 { background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom-O1.png') left bottom/cover no-repeat }
#sectB .obgB2 { background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom-O2.png') left bottom/cover no-repeat }
#sectB .obgB3 { background: url('/wp-content/uploads/2025/11/mw2510_bg_classroom-O3.png') left bottom/cover no-repeat }

#sectC .locbox-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout.jpg') left top/cover no-repeat }
#sectC .obgC1 { background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout-O1.png') left top/cover no-repeat }
#sectC .obgC2 { background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout-O2.png') left top/cover no-repeat }
#sectC .obgC3 { background: url('/wp-content/uploads/2025/11/mw2510_bg_hangout-O3.png') left top/cover no-repeat }

#sectD .locbox-bg { background: url('/wp-content/uploads/2025/11/mw2510_bg_field.jpg') left bottom/cover no-repeat }
#sectD .obgD1 { background: url('/wp-content/uploads/2025/11/mw2510_bg_field-O1.png') left bottom/cover no-repeat }
#sectD .obgD2 { background: url('/wp-content/uploads/2025/11/mw2510_bg_field-O2.png') left bottom/cover no-repeat }
#sectD .obgD3 { background: url('/wp-content/uploads/2025/11/mw2510_bg_field-O3.png') left bottom/cover no-repeat }



/*------------------------------------*\
    LOCATION BOX
\*------------------------------------*/

nav.locnav {
    position: fixed;
    margin: 0px;
    width: 360px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 27;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

nav.locnav ul {
	list-style: none;
    width: 250px;
	margin: 0;
	padding: 0;
}
nav.locnav ul li {
  /* Sub Menu */
}
nav.locnav ul li a {
	display: block;
	background: #ebebeb;
	padding: 5px 15px;
	margin: 0px 10px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	background: #ef85c2;
	border: 2px solid #000000;
	border-radius: 5px;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
}
nav.locnav ul li a:hover {
	background: #ffffff;
	color: #333333;
}
nav.locnav ul li a .fa {
	width: 16px;
	text-align: center;
	margin-right: 0px;
	margin-top: 3px;
	float:right;
}
nav.locnav ul ul {
	background-color:transparent;
}
nav.locnav ul li ul li a {
	background: #FFD9E3;
	color: #333333;
	border-left: 4px solid transparent;
	padding: 10px 20px;
	border-radius: 0;
	border: none;
    cursor: pointer;
}
nav.locnav ul li ul li a:hover {
	background: #ebebeb;
	border-left: 4px solid #ef85c2;
}

.location-contain {
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

.locbox-bg {
    aspect-ratio: 16/10;
    width: auto;
}

.locbox {
    cursor: pointer;
}

.locationoverlay {
    opacity:0;
    position: fixed;
    top:0;
    left:0;
    width: 100vw;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.locationoverlay.showup, .locdlg-overlay.showup, nav.locnav.showup  {
    opacity:1;
    pointer-events: all;
}

.readmore {
    border: 2px solid #000000;
    background-color: rgb(var(--coloryelw));
    padding: 5px 10px;
    margin: 0 auto;
    width: 80%;
    max-width: 300px;
    border-radius: 15px;
    color: #000000;
    font-size: 1.2rem;
    font-family: var(--fontmono);
    cursor: pointer;
    transition: all 0.5s ease;
    user-select: none;
    text-decoration: none;
}

.locdlg-overlay a {
    text-decoration: none;
}

.readmore:hover {
    border: 2px #000000 solid !important;
    background-color: rgb(var(--coloryelw));
    background-color: #ffffff !important;
}

.clsdialog {
    border: 2px solid #000000;
    background-color: rgb(var(--colorpink));
    padding: 5px 10px;
    margin: 0 auto;
    width: 80%;
    max-width: 300px;
    border-radius: 15px;
    color: #000000;
    font-size: 1.2rem;
    font-family: var(--fontmono);
    cursor: pointer;
    transition: all 0.5s ease;
    user-select: none;
}

.clsdialog:hover {
      background-color: #000000;
      color: rgb(var(--colorpink));
}

.ppoint-contain {
    z-index: 25;
    position: absolute;
    height: 100vh;
    aspect-ratio: 16/10;
}

.ppoint {
    width: 40px;
    height: 40px;
    position: absolute;
    cursor:pointer;
}
.ppoint.click {background: url('/wp-content/uploads/2025/11/mw2510_icon_dotted.png') left top/contain no-repeat, url('/wp-content/uploads/2025/11/mw2510_icon_target.png') left top/contain no-repeat; animation: pulse linear 2s infinite; 
    border-radius: 20px;}
/* .ppoint.tagspin {background: url('/wp-content/uploads/2025/11/mw2510_icon_dotted.png') left top/contain no-repeat; animation: rotates linear 5s infinite;} */

@keyframes rotates {
    0% {
      transform: rotate(0deg);
    }
  100% {
      transform: rotate(360deg);
    }
}

@keyframes pulse {
      0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(193, 168, 63, 0.7);
      }

    70% {
          transform: scale(1);
          box-shadow: 0 0 0 10px rgba(193, 168, 63, 0.2);
      }

    100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 10px rgba(0,0,0, 0);
      }
}

.spoint-contain {
    width: 100vw;
    height: 100vh;
    background: rgba(var(--colorcrem), 0.5);
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spoint {
    background-color: rgb(var(--coloryelw));
    color: #000000;
    font-family: var(--fontmono);
    font-size: 14px;
    padding: 10px 10px;
    margin:  0 auto;
    border-radius: 10px;
    display: flex;
    position: relative;
    z-index: 50;
    align-items: center;
    width: 70vw;
    margin: 15px 0;
}

.spoint .po-arw {
    position: absolute;
    right: 20px;
}

.locdlg-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: 100vh;
    z-index: 35;
    color: #fff;
    text-align: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.locdlg-overlay.olpop .overlay-contain {
    width: calc(90vw - 80px);
    margin: 0 5vw;
    background-color: rgb(var(--colorofwt));
    border-radius: 20px;
    border: rgb(var(--colorpink)) solid 0px;
    padding: 30px 40px;
    color: #000000;
}


.locdlg-overlay h1 {
    font-family: var(--fontmono);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: rgb(var(--colorblue));
}

.locdlg-overlay h3 {
    font-family: var(--fontttlw);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #000000;
}

.locdlg-overlay h3 strong {
    font-weight: 700;
    color: rgb(var(--colorblue));
}

.locdlg-overlay p {
	font-size: 1.4rem;
}

.locdlg-overlay.olpop p {
    font-size: 1.2rem;
    text-align: left;
}

.content-contain {
    margin-top: -30px;
}

img.locdlg {
    width: 80%;
    padding: 20px 20px 0px;
    max-width: 500px;
}

.popover { display:none; }
.popover, .popover-header {
    font-family: var(--fontmono);
    font-size: 14px;
    max-width: fit-content;
    border-radius: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.popover-header {
    margin: 12px 45px 12px 15px;
}

.po-btn {
    display: flex;
    cursor: pointer;
}

.spoint .po-btn {
    padding-right: 60px;
}

.po-arw {
    background: url('/wp-content/uploads/2025/11/mw2510_icon_arrow.png') center/cover no-repeat;
    width: 15px;
    height: 15px;
    margin-left: 40px;
    cursor: pointer;
}

@media (min-aspect-ratio: 16/10) {

    .location-contain {
        position: absolute;
        left: 0%;
        bottom: 0%;
        transform: translate(0%, 0%);
    }

    .locbox-bg, .ppoint-contain, .bg.ovrbg {
      width: 100vw;
      height: auto;
    }

    .locdlg-overlay {
        bottom: 0;
    }

}

@media (max-aspect-ratio: 16/10) {

    .location-contain {
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translate(-50%, 0%);
    }

    .locbox-bg, .ppoint-contain, .bg.ovrbg {
      width: auto;
      height: 100vh;
        left: 50%;
        top: 0%;
        transform: translate(-50%, 0%);
    }

    .locdlg-overlay {
        top: 0;
    }
}

/*------------------------------------*\
    VIDEO
\*------------------------------------*/

/* Bottom gradient overlay the video */
/* #sectTOP .bg::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(to bottom,
      rgba(64, 64, 64, 0) 70%,
      rgba(64, 64, 64, 1) 100%);
} */

#sectTOP video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow-x: hidden;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    /* max-width: 800px; */
    height: 80%;
    z-index: 35;
    color: #fff;
    background-color: rgba(var(--colordblu), 0.5);
    transform: translateX(-50%);
    text-align: center;
}

.video-overlay h1 {
    font-family: "Roboto Mono", "Courier", monospace;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: rgb(var(--colorblue));
}

.video-overlay p {
	font-size: 1.1rem;
}

.overlay-contain {
    width: calc(94vw - 100px);
    margin: 0 0;
    background-color: rgb(var(--colorofwt));
    border-radius: 20px;
    border: rgb(var(--colorpink)) solid 3px;
    padding: 30px 40px 10px;
    color: #000000;
    line-height: 1.4;
}

.location-contain .overlay-contain {
    width: calc(80vw - 80px);
    margin: 0 10vw;
    padding: 30px 40px 30px;
}

#outro1 iframe {
    height: calc(55vh - 100px);
    width: auto;
    margin: 0 auto;
}

/*------------------------------------*\
    LENIS Scrolling
\*------------------------------------*/

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

/* SMALL */
@media only screen and (min-width : 400px) {

  .finalist-box {
      background-position: right bottom;
    }

}

/* MD */
@media only screen and (min-width : 768px) {

  .fullwrapper .quotebg {
      padding: 50px 12vw;
    }

  nav.locnav {
    position: fixed;
    margin: 50px;
    top: 0;
    left: 0;
    transform: none;
  }

  .navgrid .col-12 {
      height:33.333vh;
    }
  .navgrid .col-12 .chapnum {
      left: 45%;
      transform: translate(-50%, -50%);
      font-size: 300px;
    }

  .bg {
      background-size: cover;
    }

  .location-bg {
        aspect-ratio: 1 / 1;
    }

  .overlay-contain, .location-contain .overlay-contain {
    width: calc(70vw - 80px);
    margin: 0 15vw;
    padding: 30px 40px 30px;
  }

  .video-overlay p {
    font-size: 1.4rem;
  }

  .content-box h5, .content-box p {
      font-size: 1.25rem;
    }

  .popover { z-index:50; 
    background: url('/wp-content/uploads/2025/11/mw2510_icon_arrow.png') right 10px center/15px no-repeat rgb(var(--coloryelw));
    color: #000000; transition: background-position 0.5s ease; }

  .popover:hover { background: url('/wp-content/uploads/2025/11/mw2510_icon_arrow.png') right 5px center/15px no-repeat rgb(var(--coloryelw)); }

  .finsbg {
      height: 100%;
      align-content: center;
    }

  .finsbg.mcbg { background-color: inherit !important; }

  .fin-who {
      font-size: 0.9rem;
    }

  .fin-pix {
      height: 100%;
      border-radius: 17px 0 0 17px;
    }

  .fin-cat h2 {
      margin: 30px 100px 5px;
    }

  .hozcontain {
      height: 90vh;
      margin: 5vh 1.5vw 5vh;
    }

  .panel {
        height: 90vh;
    }

  .panelcontain h2 {
      font-size: clamp(1.6rem, 2.2vw, 4rem);
    }

  .panelcontain h3 {
      font-size: clamp(1.1rem, 1.5vw, 2rem);
    }

  .panelcontain p {
      font-size: clamp(1.1rem, 1.5vw, 2rem);
    }

  .finalist-box .fin-name {
      font-size: 0.8rem;
    }

  .finalist-box .finb-quote {
      font-size: 0.9rem;
    }

  .panel {
      justify-content: center;
      align-items: center;
    }

  .locdlg-overlay.olpop .overlay-contain {
      width: calc(70vw - 80px);
      margin: 0 15vw;
  }

  .readmorecta {
      width: 450px;
      font-size: 1.5rem;
    }
  
  .scroll-indicator {
      margin-top: 10vh;
      font-size: 0.9rem;
      position: absolute;
      bottom: 50px;
      left: 50%;
    }

  #outro1 iframe {
      height: calc(70vh - 100px);
      width: auto;
      margin: 0 auto;
    }

  .bg.orgbg { background: url('/wp-content/uploads/2025/11/bg/pat25_accent-orangetop.png') left top/300px no-repeat, url('/wp-content/uploads/2025/11/bg/pat25_accent-pinkorgbtm.png') right bottom/300px no-repeat, rgb(var(--colororng)); border-radius: 40px 40px 0 0;}


}

/* LG */
@media only screen and (min-width : 992px) {

  html { font-size: 14px; }

  .content-box {
      margin-left: 40px;
      max-width: 80%;
      margin: 0 auto;
    }

  .content-box.centered {
      margin: 0 auto;
      max-width: 70%;
    }

  .content-box.finalists {
      margin: 0 auto;
      max-width: 100%;
    }

  .fin-pix {
      aspect-ratio: auto;
    }

  .finalists-contain-bg {
      padding: 30px 0 60px;
      background: #fff3b1;
      border-radius: 30px;
    }

  .contain-all-finalists {
        margin: auto -50px;
    }

  .fincontain {
      padding: 40px 50px;
    }
  
  .fincontain.fincenter{
      text-align: center;
      width: 60%;
      margin: 0 auto;
    }

  .scroll-box.righty .content-box{
      margin-left: calc(40px + 55%);
    }

  .colbg {
      width: 60vw;
      padding: 20px 50px;
    }

  .colbg.quotebg {
      width: 40vw;
    }

  .locdlg-overlay.olpop .overlay-contain {
    width: calc(50vw - 80px);
    margin: 0 25vw; 
  }

  
}

/* XL */
@media only screen and (min-width : 1200px) {

  .content-wrapper {
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

  .hozcontain {
        width: 90vw;
        height: 90vh;
        margin: 5vh 5vw;
    }

  .finui.prv {
      top: calc(50% - 50px);
      left: -30px;
      background-image: url('/wp-content/uploads/2025/11/icons/pat25_btn_prev.png');
    }

  .finui.prv:hover {
      left: -32px;
    }
  

  .finui.nxt {
      top: calc(50% - 50px);
      right: -30px;
      background-image: url('/wp-content/uploads/2025/11/icons/pat25_btn_next.png');
    }

  .finui.nxt:hover {
      right: -32px;
    }

}

@media only screen and (min-width : 1400px) {

  .content-wrapper {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

  .hozcontain {
        width: 80vw;
        height: 90vh;
        margin: 5vh 10vw;
    }
}

@media only screen and (max-height : 750px) and (max-width : 767px){

  .fincontain.fincenter{
      text-align: center;
      width: 80%;
      margin: 0 auto;
    }

  p.quoted, .infobox p.quoted, .fincenter p.quoted {
      font-size: clamp(0.8rem, 4vmin, 2.4rem)
  }

  p.byline strong {
      font-size: 1rem;
    }

  p.byline {
      font-size: 0.8rem;
    }

  .fin-pix {
      height: auto;
      aspect-ratio: 1.6 / 1;
    }

}

@media only screen and (max-height : 750px) {

  html { font-size: 11.5px; }

  .locdlg-overlay.olpop .overlay-contain {
      width: calc(80vw - 80px);
      margin: 0 10vw;
        overflow-y: auto;
  }

}

/*------------------------------------*\
    OVERRIDES
\*------------------------------------*/

.has-global-padding > .alignfull {
    margin: 0 !important;
}

.entry-content.has-global-padding {
    padding: 0 !important;
}