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

:root {  /* no enclosing rgb */
  --colorstAB: 253, 204, 39;/* fdcc27 */
  --colorstC: 237, 120, 41;  /* ed7829 */
  --colorstD: 0, 191, 99;  /* 00bf63 */
  --colorstE: 229, 69, 69;  /* e54545 */
  --colorstF: 0, 192, 243;  /* 00c0f3 */
  --colorstG: 40, 187, 184;  /* 28bbb8 */
  --colorstH: 172, 130, 255;  /* ac82ff */
  --colorstJ: 254, 134, 246;  /* fe86f6 */
  --colorstK: 182, 44, 149;  /* b62c95 */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  text-rendering: optimizeLegibility;
  background-image: url('/wp-content/uploads/2025/03/moe60_befaftBG.jpg');
  background-color: #585554;
  overflow-x: hidden;
}

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

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

.logo {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  column-gap: 6px;
  align-items: end;
  justify-items: flex-start;
  opacity: .8;
}

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

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

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

#popinmenu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  z-index: 300;
  transition: right 0.5s ease;
  margin-block-start: 0; 
  margin-block-end: 0;
}

#popinmenu.open {
  right: 0px;
}

.navtoggle {
    position: absolute;
    top: 0;
    right: 320px;
    padding: 10px 15px;
    margin: 10px;
    font-size: 24px;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 40px;
}

.navtoggle div {
  width: 25px;
  height: 25px;
  text-align: center;
}

#popinmenu ul {
  margin: 0;
  padding: 0;
}

#popinmenu ul li {
  position: relative;
  list-style-type: none;
  background-size: cover;
  background-position: center;
  width: 325px;
  height: 11.111111vh;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  padding: 0px 20px 0 20px;
  margin-left: 10px;
  color: #ffffff;
  font-weight: 600;
  border-radius: 10px 0px 0px 10px;
  text-transform: uppercase;
  cursor: pointer;
  transition: margin 0.5s ease;
}

#popinmenu ul li:hover {
  margin-left: 0;
}

#popinmenu ul li>div {
  z-index: 305;
}

#popinmenu ul li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0.7;
  border-radius: 10px 0px 0px 10px;
  transition: opacity 0.5s ease;
}

#popinmenu ul li:hover::after {
  opacity: 1;
}

.navgrid {
  display: flex;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  transition: filter 0.5s ease;
}

.navgrid.darken {
  filter: brightness(0.5) grayscale(1);
}

.navgrid .col-12 {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  height:11.111vh;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}

.navgrid .col-12>div {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 3;
  text-align: center;
  padding: 20px 60px;
  line-height: 1.2;
  font-size: 20px;
}

.navgrid .col-12::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content:'';
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.navgrid .col-12 .chapnum {
  font-style: italic;
  position: absolute;
  top: 45%;
  left: 10%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.4;
}

.navgrid .col-12:hover::after {
  opacity: 1;
}

.navsectB::after {  background: rgb(var(--colorstAB));}
.navsectC::after {  background: rgb(var(--colorstC));}
.navsectD::after {  background: rgb(var(--colorstD));}
.navsectE::after {  background: rgb(var(--colorstE));}
.navsectF::after {  background: rgb(var(--colorstF));}
.navsectG::after {  background: rgb(var(--colorstG));}
.navsectH::after {  background: rgb(var(--colorstH));}
.navsectJ::after {  background: rgb(var(--colorstJ));}
.navsectK::after {  background: rgb(var(--colorstK));}
.navsectL::after {  background: rgb(var(--colorstAB));}

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


.content-wrapper {
  /* max-width: 1200px; */
  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;
}

.flex-center {
  width: 700px;
  min-height: 100vh;
  padding: 1.3rem 1.5rem 2rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.35rem;
  line-height: 1.8rem;
}

.flex-static-content {
  z-index: 2;
  /* overflow-y: auto; */
}

.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: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

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

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

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

.content-box {
  margin-left: 0px;
  padding: 10px 20px;
  /*-webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);*/
  max-width: 100%;
  /*max-height: 68vh;
  overflow-y: 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;
}

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;
}

.darkb {
  background: rgba(27, 27, 27, 0.65);
  padding: 25px;
  border-radius: 5px;
}

.photoinfo {
  position: absolute;
  width: 70%;
  bottom: 65px;
  right: 50%;
  transform: translateX(50%);
  background: rgba(27, 27, 27, 0.65);
  padding: 5px 30px 10px;
  border-radius: 5px;
}

.photoinfo.righty {
  left: 50%;
  transform: translateX(-50%);
  right: initial;
}

.photoinfo.photocred {
  background: none;
  text-shadow: 2px 2px 2px black;
  bottom: 20px;
  padding: 5px 5px 10px;
}

.sectB .colbg {  background: rgba(var(--colorstAB), 0.75);}
.sectC .colbg {  background: rgba(var(--colorstC), 0.75);}
.sectD .colbg {  background: rgba(var(--colorstD), 0.75);}
.sectE .colbg {  background: rgba(var(--colorstE), 0.75);}
.sectF .colbg {  background: rgba(var(--colorstF), 0.75);}
.sectG .colbg {  background: rgba(var(--colorstG), 0.75);}
.sectH .colbg {  background: rgba(var(--colorstH), 0.75);}
.sectJ .colbg {  background: rgba(var(--colorstJ), 0.75);}
.sectK .colbg {  background: rgba(var(--colorstK), 0.75);}
.sectL .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%);
}

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

.fullwrapper.infobox {
  width: calc(90vw - 100px);
  padding: 30px 50px;
}

.bulb {
  display: block;
  width: 100%;
  height:50px;
  background-image: url('/wp-content/uploads/2025/03/lightbulb.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding:5px;
}

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

.content-box p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.intro-overlay, .outro-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 75%;
  max-width: 960px;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

.intro-overlay h1 {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  color: rgb(var(--colorstAB));
  line-height: 1.1;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}

.intro-overlay h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: rgb(var(--colorstAB));
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}

.intro-overlay h2 {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: .3px;
}

.outro-overlay h1, h1.darkb {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
}

.outro-overlay h3, h3.darkb {
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.1;
}

.outro-overlay a {
  text-decoration: none;
  color: rgb(var(--colorstAB));
}

h3 .tnsub {
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 500;
  line-height: normal;
  display: block;
}


.sectB .hdg { color: rgb(var(--colorstAB)); }
.sectC .hdg { color: rgb(var(--colorstC)); }
.sectD .hdg { color: rgb(var(--colorstD)); }
.sectE .hdg { color: rgb(var(--colorstE)); }
.sectF .hdg { color: rgb(var(--colorstF)); }
.sectG .hdg { color: rgb(var(--colorstG)); }
.sectH .hdg { color: rgb(var(--colorstH)); }
.sectJ .hdg { color: rgb(var(--colorstJ)); }
.sectK .hdg { color: rgb(var(--colorstK)); }
.sectL .hdg { color: rgb(var(--colorstAB)); }


p.darkb {
  color:#ffffff;
}

.colbg h3 {
  display: block;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .3px;
  margin: 0 auto;
}

.outro-overlay p, .colbg p {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .3px;
}

.colbg.quotebg p {
  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;
}

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

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

p.quoted .finalquote {
  font-size: 1.8rem;
}

p.byline .finalquote {
  font-size: 1.2rem;
}

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

.photoinfo p {
  color: #ffffff;
  font-style: italic;
  font-weight: 700;
  text-align: center;
  font-size: 18px !important;
  margin: 0;
}

.photoinfo.righty p {
  left: 50px;
  right: initial;
  text-align: center;
}

.photoinfo.photocred p {
  font-size: 10px !important;
  font-weight: 300;
  opacity: 0.8;
}

.photoinfo span.hdg {
  font-size: 28px;
  line-height: 1;
  padding-top: 10px;
  display: inline-block;
}

.quoteanim div {
  display: inline-block;
}


.scroll-indicator {
  margin-top: 10vh;
  font-size: 0.9rem;
}

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

p.date {
  margin-top: 40px;
  font-size: 0.9rem;
}

.btow {
  filter:invert(1);
}

/*------------------------------------*\
    BG IMAGES
\*------------------------------------*/

#sectA .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectA.jpg'); }
#sectB .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectB1.jpg'); }
#sectB2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectA.jpg'); }
#sectB3 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectB2.jpg'); }
#sectB4 .bg.bef { background-image: url('/wp-content/uploads/2025/03/moe60_sectB3bef.jpg'); }
#sectB4 .bg.aft { background-image: url('/wp-content/uploads/2025/03/moe60_sectB3aft.jpg'); }
#sectB5 .bg.bef { background-image: url('/wp-content/uploads/2025/03/moe60_sectB4bef.jpg'); }
#sectB5 .bg.aft { background-image: url('/wp-content/uploads/2025/03/moe60_sectB4aft.jpg'); }
#sectC .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectC1.jpg'); }
#sectC2 .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectC2bef.jpg'); background-position: center 80%;  }
#sectC2 .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectC2aft.jpg'); }
#sectD .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectD1.jpg'); background-position: top center; }
#sectD2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectD2.jpg'); }
#sectD3 .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectD3bef.jpg'); }
#sectD3 .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectD3aft.jpg'); background-position: top center; }
#sectE .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectE1bef.jpg'); }
#sectE .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectE1aft.jpg'); }
#sectF .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectF1bef.jpg'); background-position: 80% 50%; }
#sectF .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectF1aft.jpg'); background-position: 70% 50%;}
#sectG .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectG1.jpg'); }
#sectG2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectG2.jpg'); }
#sectG3 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectG3.jpg'); }
#sectG4 .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectG4bef.jpg'); background-position: 80% 50%; }
#sectG4 .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectG4aft.jpg'); background-position: 80% 50%; }
#sectH .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectH1.jpg'); }
#sectH2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectH2.jpg'); }
#sectH3 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectH3.jpg'); }
#sectH4 .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectH4bef.jpg'); }
#sectH4 .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectH4aft.jpg'); }
#sectJ .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectJ1.jpg');  background-position: 60% 50%;  }
#sectJ2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectJ2.jpg');    background-position: 80% 50%; }
#sectJ3 .bg.bef  { background-image: url('/wp-content/uploads/2025/03/moe60_sectJ3bef.jpg'); }
#sectJ3 .bg.aft  { background-image: url('/wp-content/uploads/2025/03/moe60_sectJ3aft.jpg'); }
#sectK .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK1.jpg');     background-position: 80% 90%;}
#sectK2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK2.jpg'); }
#sectK3 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK3.jpg'); }
#sectK4 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK4.jpg'); }
#sectK5 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK5.jpg');     background-position: 80% 50%; }
#sectK6 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectK6.jpg'); }
#sectL .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectL1.jpg'); }
#sectL2 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectL2.jpg'); }
#sectL3 .bg { background-image: url('/wp-content/uploads/2025/03/moe60_sectA.jpg'); }

.navsectB { background-image: url('/wp-content/uploads/2025/03/moe60_sectA.jpg'); }
.navsectC { background-image: url('/wp-content/uploads/2025/03/moe60_sectC1.jpg'); }
.navsectD { background-image: url('/wp-content/uploads/2025/03/moe60_sectD1.jpg'); }
.navsectE { background-image: url('/wp-content/uploads/2025/03/moe60_sectE1bef.jpg'); }
.navsectF { background-image: url('/wp-content/uploads/2025/03/moe60_sectF1bef.jpg'); }
.navsectG { background-image: url('/wp-content/uploads/2025/03/moe60_sectG1.jpg'); }
.navsectH { background-image: url('/wp-content/uploads/2025/03/moe60_sectH1.jpg'); }
.navsectJ { background-image: url('/wp-content/uploads/2025/03/moe60_sectJ1.jpg'); }
.navsectK { background-image: url('/wp-content/uploads/2025/03/moe60_sectK1.jpg'); }

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

/* Bottom gradient overlay the video */
/* #sectA .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%);
} */

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


/*------------------------------------*\
    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
\*------------------------------------*/

/* MD */
@media only screen and (min-width : 768px) {
  .fullwrapper .quotebg {
    padding: 50px 12vw;
  }

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

/* LG */
@media only screen and (min-width : 992px) {
  .content-box {
    margin-left: 40px;
    max-width: 45%;
  }

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

  .photoinfo {
    position: absolute;
    bottom: 50px;
    right: 50px;
    transform: none;
    background: rgba(27, 27, 27, 0.65);
    padding: 5px 30px 10px;
    border-radius: 5px;
  }
  
  .photoinfo.righty {
    left: 50px;
    right: initial;
    transform: none;
  }

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

  .colbg.quotebg {
    width: 40vw;
  }

  .darkb {
    padding: 25px 40px 25px 25px;
  }

  .photoinfo {
    bottom: 50px;
    right: 35px;
    width: fit-content;
  }

  .photoinfo.righty {
    left: 35px;
    right: initial;
  }

  .photoinfo p {
    text-align: right;
  }

  .photoinfo.righty p {
    text-align: left;
  }

  p.quoted {
    font-size: 2rem;
  }

  p.quoted.finalquote {
    font-size: 2.4rem;
    line-height:1.2;
  }
  
  p.byline.finalquote {
    font-size: 1.4rem;
  }
}

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


}

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

}

/* SHORT */
@media only screen and (max-height : 700px) {

  .intro-overlay h1, .outro-overlay h1 {
    font-size: clamp(3rem, 15vh, 4rem);
  }
  
  h1.darkb {
    font-size: clamp(1.8rem, 7vh, 3rem);
  }

  .intro-overlay h3, .outro-overlay h3, h3.darkb {
    font-size: clamp(1.35rem, 6vh, 2rem);
  }
  
  .intro-overlay h2, .outro-overlay p, .content-box p {
    font-size: clamp(1rem, 4vh, 1.25rem);
  }

  p.quoted {
    font-size: clamp(1.2rem, 4vh, 1.5rem);
  }

  p.quoted.finalquote {
    font-size: clamp(1.35rem, 5vh, 1.7rem);
  }

}

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

  .intro-overlay, .outro-overlay {
    width: 90%;
  }

  .intro-overlay h1, .outro-overlay h1 {
    font-size: 1.6rem;
  }
  
  h1.darkb {
    font-size: 1.8rem;
  }

  .intro-overlay h3, .outro-overlay h3, h3.darkb {
    font-size: 1.35rem;
  }
  
  .intro-overlay h2, .outro-overlay p, .content-box p {
    font-size: 0.9rem;
  }

  p.quoted {
    font-size: 1.2rem;
  }

  p.quoted.finalquote {
    font-size: 1.35rem;
  }

}