@import url("https://use.typekit.net/rjh0jrk.css");

:root {
--red-marking:#6a0b0d;
--shoebox-green:#02661d;
--main-green:#242b24;
--accent-green:#81E1B3;
--main-blue:#0c2845;
--accent-blue:#ACC9DB;
--main-red:#400d00;
--accent-red:#FFCADE;
--secondary-green:#242b24;
--accent-secondary-green:#B4D6AC;
--main-tan:#625e41;
--secondary-tan:#ede39d;
}

/* #site-wrapper .sub-nav {
  overflow:hidden !important;
} */

picture {
  display:block;
  margin:0;
}

.relative {position:relative}
.desktop{display:none}
.mobile{display:block}
@media(min-width:64em){.desktop{display:block}.mobile{display:none}} 
#header, #trp-floater-ls {z-index:999 !important;}

#end-video {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


#bgCanvas{height:215vh;height: calc(var(--vh, 1vh) * 215);;display:block;margin-inline: 0;position: absolute;top: 0;z-index:0;overflow:hidden;mask-image: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%);display:none;}

@media(min-width:48em){
  #bgCanvas{display:block;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.text-scramble-char{display:inline-block;color:var(--accent-blue);opacity:.7;}

.pin-spacer {margin:0!important;}

header h2{font-size:var(--h1)}fu
.opacity {visibility: hidden;}
#occ-logo{width:5em;margin-bottom:-1em;}
@media (min-width:64em){#occ-logo{width:6em;margin-bottom:-1em;}}
.banner {height:215vh;height:calc(var(--vh, 1vh) * 215);position:relative;overflow:hidden;padding-bottom:0;}
h1, h2 {font-size:min(2em, 70vw);font-family: "cheddar-gothic-rough", sans-serif;color:#fff;font-weight: 400;font-style: normal;line-height:1;text-shadow:none !important;}
#jungle {display: block;font-size: 425%;color:var(--shoebox-green);padding-top:8px;}
h3 {font-family: "cheddar-gothic-rough", sans-serif;color:#fff;font-weight: 400;font-style: normal;line-height:1;text-shadow:none !important;}
#red-line-headline {position: absolute;top:-0.6em;left:-5vw;margin-top:0;max-width:none;width:calc(100% + 10vw);z-index:-1;}
@media(min-width:64em){h1{font-size:2.309em;}#red-line-headline{top:-0.75em;left:-2vw;width:calc(100% + 4vw)}}
@media (min-width:90em) {h1 {font-size:3em}#red-line-headline{top:-1em;left:-2vw;width:calc(100% + 4vw)}}

p {font-family: "Playfair Display", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;line-height: 2.4;color: #fff;}

#headline-container {position:absolute;z-index:99;top:15vh;top:calc(var(--vh, 1vh) * 15);}

section {position:relative;z-index:4;overflow:hidden !important;}

.mobile-header {
  height:215vh;
  height:calc(var(--vh, 1vh) * 215);
}

.banner {background:linear-gradient(#161922 0%, #454958 25%, #a39fa8 50%, #e0d7db 75%, #ebe2e5 100%);}

@media(min-width:48em) {
.banner {min-height:70em;}
}

  .banner figure.desktop {display:none;}

    .banner figure.mobile {z-index:9;height:215vh;height:calc(var(--vh, 1vh) * 215);bottom:0;position:absolute;object-fit:cover;}

@media(min-width:64em){
  .banner figure.desktop {height:calc(var(--vh, 1vh) * 100);bottom:0;width:100%;position:absolute;object-fit:contain;mask-image: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 100%);display:block;z-index:9}
}

#jungle {z-index:2}
#night-sky {width:100%;height:auto;position:absolute;top:0;z-index:4;}
#introduction {background-color:var(--main-green);padding-top:2.618em;background-image:url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.6/img/river-green.svg');background-repeat:no-repeat;background-size:150%;background-position:50% 96%;padding-bottom:0!important;}
#gospel-presentation{padding-top:0!important;background-color:#343223;background-image:url('');
  background-repeat:no-repeat;background-size:150%;background-position:0% 50%;}
#chapra-people{padding-top:0!important;background-color:#213a31;}
#impact-shoebox{background-color:var(--main-red);padding-bottom:0;}

#immersive-container {display:flex;flex-direction:row;gap:1em;justify-content:center;align-items:center}

.tall {width: 80%;
    margin-top: -5em;
    margin-right: 0;
    margin-left: auto;
  position:relative;}

.two-images {position:relative;max-width: 48em;margin-left: auto;margin-right: auto;}

@media (min-width:64em){
  #gospel-presentation,#introduction{background-size:105%;}

.two-images {position:relative;max-width: 48em;margin-left: auto;margin-right: auto;}
.square {width:30em;}
.tall {width:20em;margin-left: auto;margin-right:0;margin-top: -17em;}

#impact-shoebox .tall {margin-top:-24em;}

}

#chapra-people blockquote p {color:#83e5c2}

.disconnected p {margin:1em auto;}
.three-images > * {margin:1em auto;}

.disconnected-text {
  position:relative;margin:1.618em auto;
}

@media(min-width:48em) {
  .disconnected-text {
    position:relative;margin:1em;margin-left: 1.618em;
  }
}

@media (min-width:64em){

.three-images {position:relative;max-width: 48em;margin-left: auto;margin-right: auto;}
.one {width:40em;margin-right:0;margin-left:auto;}
.three-images .two{margin-left:0;margin-right:auto;}
.three-images .three{width:26em;margin-right:0;margin-left:auto;margin-top:-4em;}

#gospel-presentation .one {width:25em;margin-right:auto;margin-left:0;}
#gospel-presentation .two {width:30em;margin-right:0;margin-left:auto;margin-top:-4em;}
#gospel-presentation .three{width:30em;margin-right:auto;margin-left:0;margin-top:-2em;}

.disconnected {display:flex;flex-direction: row;align-items:center;margin-top:-4em;}
.disconnected > * {width:50% !important;}
.disconnected p {margin:0 auto;}

}

#gospel-presentation blockquote p {color:var(--secondary-tan)}

#disconnected-red-paint {position:absolute;bottom:0;left:1em;width:8em;z-index:1}

figure.square img, figure.tall img {width:100%;}
.secondary-image{margin:1.618em auto;width:100%;max-width:48em;position:relative;}

.twinkle{width:5px;height:5px;background-color:#fff;position:absolute;z-index:2;margin:0;opacity:0.8;border-radius:50%;}
.full-width{width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);margin:0;}
.full-width>*{width:100%;height:100%;object-fit:cover}

section .space-large {
  width: 100%;
  padding: 0 1.618em;
  padding-bottom: 3.618em;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width:64em) {
  section .space-large {
    width: 75%;
  }
}

section p, section header {
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
  margin: 1.618em auto;
}

section .space-large p {
  width: 100%;
}

.padding-right {padding-right: 1.618em;}
.padding-left {padding-left: 1.618em;}
.padding-top {padding-top: 1.618em;}
.padding-bottom {padding-bottom: 1.618em;}

@media(min-width:48em) {
  .padding-right {padding-right: 2.618em;}
.padding-left {padding-left: 2.618em;}
.padding-top {padding-top: 2.618em;}
.padding-bottom {padding-bottom: 2.618em;}
}

.line {height:25em;width:5px;position:absolute;z-index:999}
.line.green {background-color:var(--accent-green)}
.line.tan {background-color:var(--secondary-tan);z-index:-1;}
.line.turquoise {background-color:#83e5c2;}
.line.pink {background-color:var(--accent-red)}

#first-green-line{left:0;top:-30em;height: 35em;}
#second-green-line{right:0;bottom:-27em;height:30em}
#third-green-line{left:auto;bottom:-9em;height:18em}

#first-tan-line{width:25em;height:5px;left: 0;bottom: 20%;width: 750%;}
#second-tan-line{height: 60%;left: 0;bottom: 20%;}
#third-tan-line{right:0;bottom:-20em;height:35em;}

#first-turquoise-line{right:auto;left:0;bottom:32em;height:50em;}
#second-turquoise-line{left:auto;right:0;bottom:-65em;height:70em}
#third-turquoise-line{left:0;right:auto;top:10em;height:55em}
#fourth-turquoise-line{left:auto;right:0;top:10em;height:28em}

#first-pink-line{top:0;left:0;height:35em;}
#second-pink-line{right:0;bottom:-57em;height:65em;}
#third-pink-line{left:0;bottom:-35em;height:40em;}
#fourth-pink-line{right:0;bottom:-65em;height:70em;}
#fifth-pink-line{left:0;bottom:14em;height:37em;}

@media(min-width:64em) {
#first-green-line{top:-23em;}
#second-green-line{bottom:-18em;height:20em}
#third-green-line{bottom:-9em;height:18em;}

#first-turquoise-line{left:0;bottom:28em;height:30em;}
#second-turquoise-line{right:0;bottom:-35em;height:40em}
#third-turquoise-line{left:0;right:auto;top:25em;height:44em}
#fourth-turquoise-line{left:auto;right:0;top:25em;}


#first-pink-line{top:0;left:0;height:30em;}
#second-pink-line{right:0;bottom:-35em;height:40em;}
#third-pink-line{left:0;bottom:-25em;height:30em;}
#fourth-pink-line{right:0;bottom:-35em;height:40em;}
#fifth-pink-line{bottom:24em;}


}

@media (min-width:64em) {
#gospel-presentation .three-dots-circle, #gospel-presentation .swiggle-line, #gospel-presentation .red-star {z-index:-1;}
}

.three-dots-circle{
    width: 10em;
    height: auto;
    position: absolute;
    bottom: 4em;
    left: -8em;
    overflow:hidden;
  }



.swiggle-line{
  width: 10em;
    height: auto;
    position: absolute;
    top: 0;
    right: -3em;
  overflow:hidden;}

#red-star{
  width:6em;
  height:auto;
  position:absolute;
  top:-5em;
  left:1em;
}

#red-star-3 {
    position: absolute;
    top: 5em;
    left: 2em;
    width: 8em;
}

#red-star-4 {
position: absolute;
    bottom: 8em;
    left: auto;
    width: 6em;
    top: auto;
    right: 3em;
    transform:rotate(-45deg);
}

#red-star{
  width:6em;
  height:auto;
  position:absolute;
  top:-5em;
  left:1em;
}

#swiggle-line-3{
    width: 14em;
    height: auto;
    bottom: 3em;
    right: 10em;
    top: auto;
  }
  
  #three-dots-circle-2{
    width: 10em;
    height: auto;
    position: absolute;
    bottom: auto;
    right: -3em;
    top:-9em;
    left: auto;} 

@media(min-width:64em) {
.three-dots-circle{width: 12em;
        height: auto;
        position: absolute;
        bottom: -2em;
        left: 1em;}
       #three-dots-circle-2{width: 12em;
        height: auto;
        position: absolute;
        bottom: 2em;
        top:auto;
        left: -5em;
      right:auto;} 
#swiggle-line-1{width: 14em;
        height: auto;
        position: absolute;
        top: -16em;
        right: -8em;}
.red-star{
  width:8em;
  height:auto;
  position:absolute;
  top:11em;
  left:-3em;
}

#red-star {
    width:8em;
      top: 5em;
      left: -10em;
}

#swiggle-line-2{
        width: 13em;
        height: aut
        position: absolute;
        top: 16em;
        right: auto;
        left: -15em;
  }

#red-star-5 {
        position: absolute;
        top: 1em;
        left: -3em;
        width: 6em;
        bottom: auto;
        right: 0;
}

}

#chapra-people {padding-top:0!important;background-image:url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/img/river-dark-green.svg');background-repeat:no-repeat;background-size:cover;background-position:40% 50%;padding-bottom:0;}
#chapra-people .two-images {margin: 2em auto;display:flex;flex-direction:column;gap:1em;}
#chapra-people .two-images img {position:absolute;top:0;left:0;object-fit:cover;width:100%;height:100%;}
 #chapra-people .two-images figure {position:relative;width:100%;aspect-ratio:1/1.618;}
  #chapra-people .two-images .two {margin-left:auto;margin-right:0;}
.greyscale{filter: grayscale(1);z-index:2;display:none;}
.color{z-index:1}

@media(min-width:64em) {
.greyscale {display:block;}
}

#chapra-people figcaption {color:#83e5c2;font-family:roboto,system-ui;}

.right-caption, .left-caption{display:none;}

@media(min-width:64em){
  #chapra-people .two-images figure {position:relative;width:25em;height:30.5em;}
  #chapra-people .two-images .one {margin-left:0;margin-right:auto;}
  #chapra-people .two-images .two {margin-left:auto;margin-right:0;margin-top:-20em}
  .right-caption, .left-caption{display:inline-block;position:absolute;}
.left-caption{left:2em;bottom:-2.309em;}
.right-caption{right:2em;top:-2.309em;}
}

#impact-shoebox {background-image:url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.6/img/river-red.svg');background-size:cover;background-position:40% 50%;}
#impact-shoebox figcaption{color:var(--accent-red);font-family:roboto,system-ui;}

#chapra-three-dots-circle {left:auto;right:-5em;top:20em;position:absolute;width:10em;z-index:4;bottom:auto;}

@media(min-width:48em){
  #chapra-three-dots-circle {right:5em;top:9em;;width:12em;}
}

.quotation-mark {height:4em;width:auto;margin-top:0.618em}

#hwrap blockquote {margin:0 auto;}

blockquote {border-left:none;max-width: 48em;
    margin-left: auto;
    margin-right: auto;width: 100%;display:flex;flex-direction:column;gap:1.618em;}

blockquote p {font-size:165%;margin: 0 auto;line-height:1.2;}

@media(min-width:64em){
blockquote {
  flex-direction:row;}

}

#impact-shoebox blockquote p {color:var(--accent-red)}

.verse {
  flex-direction:column;
}

#chapra-people blockquote.verse cite {
    text-align: right;
    line-height: 1;
    color: #83e5c2;
    font-family: roboto, system-ui;
}

/* CSS */
.broll {
  width: 100%;
  height: auto;
  opacity: 1;
  z-index:4;
}

.square-video.broll {
  object-fit:cover;
  object-position: 45% 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.hwrap .square-video.broll {
  border: 0.309em solid var(--secondary-tan);
  max-width: 40em;
}

.svg-divider {
  width:100%;
  margin:0;
  transform: scale(-1, -1);
  z-index: 0;
  position: relative;
}

.white-shoebox {
  position: absolute;
  width:11em;
  opacity:0.2;
}

#shoebox-1 {
  right:-5em;
  width:15em;
  top:9em;
  transform: rotate(11deg);
}

#shoebox-2 {
display:none;
}

#shoebox-3 {
    right: -13em;
    width: 13em;
    top: 60em;
    transform: rotate(13deg);
    overflow:hidden;
}

#shoebox-4 {
    left: -7em;
    width: 14em;
    top: 90em;
    transform: rotate(356deg);
}

#shoebox-5 {
    right: -14em;
    width: 19em;
    top: 125em;
    transform: rotate(15deg);
}

#shoebox-6 {
left: -2em;
    width: 19em;
    top: auto;
    bottom: -3em;
    transform: rotate(9deg);
}

@media(min-width:64em) {

  .white-shoebox {opacity:1;}

  #shoebox-1 {
  right:-5em;
  width:8em;
  top:5em;
  transform: rotate(11deg);
}

#shoebox-2 {
    left: -15em;
    width: 18em;
    top: 30em;
    transform: rotate(6deg);
    display:block;
}

#shoebox-4 {
left: -7em;
width: 15em;
top: 81em;
transform: rotate(356deg);
}

#shoebox-5 {
    right: -8em;
    width: 15em;
    top: 115em;
    transform: rotate(15deg);
}

#shoebox-6 {
    left: -13em;
    top: auto;
    bottom: 40em;
}

}

.close {
     width: 100%;
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: relative;
}

.close p {
    color:#000;
    padding-top:2.618em;
    margin-top:0;
}

.close p span {
  display: block;
  margin-top: 1.618em;
  padding: 0;
  color:#000;
}

#closing-section {
  background-color: #fff;
  background-image: image-set(
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.8/img/webp/2559PE-F-855__S.webp') type('image/webp'),
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.6/img/2559PE-F-855__S.jpg') type('image/jpeg'));
  background-position:bottom;
  background-repeat:no-repeat;
  background-size:cover;
  padding-bottom:0 !important;
  height:200vh;
  height:calc(var(--vh, 1vh) * 200);;
  width:100%;
}

@media (min-width:48em){

#closing-section {
  background-image: image-set(
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.8/img/webp/2559PE-F-855__M.webp') type('image/webp'),
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.6/img/2559PE-F-855__M.jpg') type('image/jpeg'));
}
}

@media (min-width:64em){

#closing-section {
     background-image: image-set(
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.8/img/webp/2559PE-F-855__L.webp') type('image/webp'),
    url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/occ-peru/1.6/img/2559PE-F-855__L.jpg') type('image/jpeg'));
}
}



#introduction p span {
  display:block;
  padding-left:0;
}

.figure-close {
  width:100%;
  top:0;
  right:0;
  opacity:1;
}

span.new-line {
    display:block;
    padding-left:0;
  }

  .prayer-statement {
    padding-top:0 !important;
    font-family: roboto,system-ui;
  }

  span i {
    padding-right: 10px;
}

.quote-image {
  width: 18em;
    transform: rotate(5deg);
    border: #83e5c2 8px solid;
    height: 100%;
    aspect-ratio: 1 / 1;
}

@media(min-width:64em) {

#impact-shoebox .three-images .two {
  margin-left:auto;
  margin-right:0;
  width:37em;
}

#impact-shoebox .three-images .three {
  margin-right:auto;
  margin-left:0;
  width:37em;
  margin-top:-3em;
}
}

@media only screen and (max-width: 767px) {
    #site-wrapper .sub-nav .ubermenu-responsive-toggle {
        margin: 13px 15px 10px 0 !important;
        padding: 0 !important;
    }
}