@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mjLoading {
  overflow: hidden;
}

.mjLoading main:before {
  content: '';
  position: fixed;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #9F2671;
/*  background-color: darkgoldenrod;*/
  z-index: 100000;
}

.loadingGif {
  display: none;
}

.mjLoading .loadingGif {
  display: block;
  position: absolute;
  width: fit-content;
  text-align: left;
/*  background-color: lightcoral;*/
  top: 50%;
  left: 50%;
  z-index: 1000001;
  transform: translate(-50%,-50%);
}

main {
  overflow: hidden;
}

.container-fluid:has(.maxw) {
/*  background-color: yellowgreen;*/
  padding-left: 40px;
}

.maxw {
/*  border: solid black 2px;*/
/*    border-left: dashed #FFF 2px;*/
}

.imgCol {
  padding-top: 15px;
/*  border: solid yellowgreen 2px;*/
}

.textCol {
  padding-top: 30px;
}

.subhead {
  color: #FFF;
}

/* Horiz Markers */
.marker {
/*  position: fixed;
  z-index: 100000;
  height: 1px !important;
  padding: 0 !important;
  width: 100% !important;
  top: 40vh;
  left: 0;*/
}

/* Vert Markers */
.marker {
/*  position: fixed;
  z-index: 100000;
  height: 100vh !important;
  width: 1px !important;
  padding: 0 !important;
  top: 0;
  left: 50vw;*/
}

.marker1 {
  background-color: red;
}

.marker2 {
  background-color: green;
}

.marker3 {
  background-color: yellow;
}

.maxw {
/*  border: dotted red 1px;*/
}

.hero {
  position: relative;
  z-index: 101;
}

.journeyStart {
  border-top: solid 2px red;
}

#mjSpot {
/*  position: fixed;
  top: 100px;
  left: 100px;*/
  z-index: 100;
  top: 0;
/*  width: 160px;
  height: 160px;*/
  background-color: #CC539E;
  border-radius: 100px;
}

.mjfpo img {
  border-radius: 1000px;
/*  filter: brightness(.5);*/
}

.imgCol h3 {
  margin-top: 15px;
}

.imgCol:has(.img1) figure {
/*  background-color: turquoise;*/
  aspect-ratio: 1 / 1; /* ⏹ a perfect square */
}

.img1 {
/*  background-color: sandybrown;*/
  position: relative;
}

.img1 img {
  position: relative;
  border-radius: 1000px;
  width: 86%;
  height: 86%;
  left: 7%;
  top: 7%;
}

.img1 img.ring {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.rightside .img1 {
  margin-left: 20%;
}

.rightside .img2 img {
  margin-left: -25%;
}

.leftside .img2 img {
  margin-left: 45%;
}

.img2.round {
  padding: 20%;
}

.leftside .img2.round {
  margin-left: 20%;
}

.img2.round img {
  border-radius: 1000px;
}

.z4 .img2.round img {
  background-color: #DF93C2;
  border: #DF93C2 solid 10px;
}

.z5 .img2.round img  {
  background-color: #E6A9CF;
  border: #E6A9CF solid 10px;
}

.z6 .img2.round img  {
  background-color: #ECBFDC;
  border: #ECBFDC solid 10px;
}

.z8 .img2.round img  {
  background-color: #F9EAF3;
  border: #F9EAF3 solid 10px;
}

.stepText {
  margin-bottom: 0;
  margin-top: 15px;
}

/*.zone:not(.zone.z3) {*/
.zone {
  overflow: hidden;
}

.zone .maxw {  
/*  border-top: solid lightgray 2px;*/
/*  border-top: none; !important*/
/*  overflow: hidden;
  background-color: orangered;*/
}

.zone h2 {
  font-weight: bold;
  z-index: 110;
  position: relative;
}

.zone p {
  position: relative;
  z-index: 101;
}

.zone .row > div {
  position: relative;
}

.zone .textCol {
/*  background-color: mediumseagreen;*/
}

.zone figure:not(.imgGroup figure) {
    max-width: 80%;
}

.zone .imgGroup,
.zone figure {
/*  background-color: lightgreen;*/
  position: relative;
}

/* parent container - for postioning */
.zone .wp-block-group > div,
.zone .imgCol
 {
/*  background-color: orangered;*/
  display: grid;
  grid-template-columns: 1fr;
}

/* child element - for postioning */
.zone .wp-block-group figure,
.imgGroup,
figure.img2 {
  padding: 50px;
  grid-row-start: 1;
  grid-column-start: 1;
}

.zone .wp-block-group figure.circled {
  width: 84%;
  margin-top: 8%;
  margin-left: 8%;
}

.zone .imgCol {
  display: grid;
  grid-template-columns: 1fr;
/*  background-color: orangered;*/
}

.zone .imgCol figure {
  grid-row-start: 1;
  grid-column-start: 1;
}

.zone .img1 {
/*  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);*/
/*  max-width: 40%;
  height: auto;*/
}

.cta_block {
  border-top: none !important;
}

#subscribe_form.fancybox-content {
  background-color: #edeef7 !important;
  width: 80%;
  max-width: 500px;
}

.zone .dotLine,
.zone .dotLine2,
.zone .dotLine3 {
  display: none;
}

.zone .dotLineM {
  border-left: dashed 2px #FFF;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1000;
}

.z1 {
  position: relative;
  background-color: #CC539E;
}

.z1 h2 {
  color: #E6A9CF;
  color: #FFF;
}
.z1 p,
.z2 p {
  color: #FFF;
}

.zone p.stepText {
  color: #333;
}

.z2 {
  background-color: #D269AA;
}

.z2 h2 {
  color: #FFF;
}

.z3 {
  background-color: #D97EB6;
}

.z3 h2, .z3 p {
  color: #FFF;
}

.z4 {
  background-color: #DF93C2;
  position: relative;
}

.z4 h2, .z4 p {
  color: #FFF;
}

 .z5 {
  background-color: #E6A9CF;
}

.z6 {
  background-color: #ECBFDB;
}

.z7 {
  padding-bottom: 100px;  
  background-color: #F2D4E7;
}

.z7 p:not(.stepText), .z7 h3 {
  background-color: #F2D4E7;
}  

.z8 {
  background-color: #F9EAF3;
}

.z9 {
  background-color: #FFF;
}

.z9 .imgCol {
  padding-top: 15px;
}

.z9 .bgspot {
  display: block;
  position: absolute;
  width: 100%;
  height: 500%;
  background-color: #CC539E;
  border-radius: 2000px;
  opacity: 0.25;
  top: 10%;
  z-index: 100;
}

.z9 .img_end {
  position: relative;
  z-index: 200;
}



/* fix pixel offset */
/*.z4 .textCol, 
.z5 .textCol, 
.z6 .textCol,
.z7 .textCol,
.z8 .textCol {
  position: relative;
  left: 1.5px;
}*/


@media (min-width: 992px) {

  .container-fluid:has(.maxw) {
/*    background-color: pink;*/
    padding-left: 15px;
  }  

  .show_second_dtop {
    order: 2;
  }  

  .dotLineM {
    display: none;
  }

  .textCol {
    padding-top: 0;
  }

  .stepText {
    margin-bottom: 0;
    margin-top: 0;
  }

  .stepText:not(.z2 .stepText) {
    margin-top: 15px;
  }  

  .zone .dotLine,
  .zone .dotLine2,
  .zone .dotLine3 {
    display: block;
  }

  .z1 .textCol {
    padding-left: 45px;
  }  

  .z1 .dotLine {
    border-left: dashed 2px #FFF;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
  }

  .z2 p,  
  .z2 h2 {
    text-align: center;
  }  

  .z2 {
    padding-bottom: 100px;  
  }

  .z2 .textCol {
    padding-top: 60px;
  }  

  .z2 .dotLine {
    /* height set in js */
    border-left: dashed #FFF 2px;
    border-bottom: dashed #FFF 2px;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;    
  }

  /*.z2 .dotLine2, */
  .z2 .dotLine3 {
    border-left: dashed #FFF 2px;
    width: 50%;
    position: absolute;
    left: 50%;
    margin-left: -2px;
/*    background-color: black;*/
  }

  .z2 .dotLine2 {
    top: 40px;
    height: 25px;
  }

  .z2 .dotLine3 {
    top: 200px;
    height: 100vh;
  }


  .z3 .dotLine,
  .z3 .dotLine2 {
    border-left: dashed #FFF 2px;
    width: 50%;
    height: 25%;
    position: absolute;
    left: -2px;
    top: 0;
  }

  .z3 .dotLine2 {
  /*  top: 50%;*/
    height: 100vh;
  }

  .z4 .dotLine {
    border-right: dashed #FFF 2px;
    border-bottom: dashed #FFF 2px;  
    right: 1px;
    width: 100%;
    height: 40px;
    position: absolute;
    transform: translate(1px 0);
  }

  .z4 .dotLine2 {
    border-left: dashed #FFF 2px;
    left: 0;
    top: 40px;
    height: 60vh;
    position: absolute;
  }

  .z4 .textCol {
    padding-left: 45px;
  }


  .z5 .dotLine,
  .z5 .dotLine2 {
    position: absolute;
    border-left: dashed #333 2px;
    border-bottom: dashed #333 2px;
    top: 0;
    left: -100%;
    height: 160px;
    width: 100%;
  }

  .z5 .dotLine2 {
    border-bottom: none;
    height: 100vh;
  }

  .z6 .textCol {
    padding: 30px 0 30px 45px;
  }  

  .z6 .dotLine {
    border-left: dashed #333 2px;
    left: 0;
    top: 40px;
    height: 60vh;
    position: absolute;
  }

  .z6 .dotLine {
    border-bottom: none;
    height: 100vh;
    top: 0;
  }

  .z7 .textCol {
    padding-top: 60px;
  }  

  .z7 p,  
  .z7 h2 {
    text-align: center;
  }    

  .z7 .dotLine {
    border-left: dashed #666 2px;
    border-bottom: dashed #666 2px;
    width: 50%;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .z7 .dotLine2, 
  .z7 .dotLine3 {
    border-left: dashed #666 2px;
    width: 50%;
    position: absolute;
    left: 50%;
/*    background-color: red;*/
    margin-left: -2px;
  }

  .z7 .dotLine2 {
    top: 40px;
    height: 25px;
  }

  .z7 .dotLine3 {
    display: none;
  }

  .z8 .dotLine,
  .z8 .dotLine2 {
    border-left: dashed #666 2px;
    width: 50%;
    height: 25%;
    position: absolute;
    left: -2px;
    top: 0;
  }

  .z8 .dotLine2 {
    height: 100vh;
  }

}