/* scrolly componenets css */
/*#region*/
#scrolly {
position: relative;
margin:45px;
padding-top: 4.5rem;
padding-bottom: 1rem;

}

.scrolly-overlay {
position: relative;
padding: 0;
max-width: 35rem;
margin: 0 auto;
}

.sticky-thing {
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        margin: 0;
        top: 12.5vh;
        height: 75vh;
        /* Center everything inside */
        display: flex;
        align-items: center;
        justify-content: center;
      }

.hydroHolder{
   width:100vh;
   height:100vh !important;
   /* object-fit: contain; */
}

  .stepHydro {
        margin: 0 auto 2rem auto;
        margin-bottom: 25rem;
        color: #282828;
		    border: .5px solid #d3d1d1;
		    background-color: #f9fbfe;
		    padding: .75rem;
		
      }

      .stepHydro p {
        font-family: Bitter;
        font-weight: 400;
        line-height: 1.3;
        text-align: left;
        padding: .2rem;
        font-size: 1.15rem;
		    margin-block: .7em;
        visibility: visible;
      }


/* When use normal scrollytelling for narrow viewports */
@media only screen and (min-width: 1040px) {
#scrolly.side-by-side {
display: flex;
}

#scrolly.side-by-side>div {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: 0.75em;
}

#scrolly.side-by-side .scrolly-overlay {
margin-top: 70vh;
order: 0;
/* Change these to adjust sizing options */
min-width: 15rem;
max-width: 20rem;
}

#scrolly.side-by-side .sticky-thing {
order: 1;
flex-grow: 2;
}
}
/*#endregion*/


/* illustrator components css */
/*#region*/
#g-hc_18-box {
	container-type:inline-size;
	container-name:g-hc_18-box;
}
#g-hc_18-box,
#g-hc_18-box .g-artboard {
	margin:0 auto;
}
#g-hc_18-box p {
	margin:0;
}
#g-hc_18-box .g-aiAbs {
	position:absolute;
}
#g-hc_18-box .g-aiImg {
	position:absolute;
	top:0;
	display:block;
	width:100% !important;
}
#g-hc_18-box .g-aiSymbol {
	position:absolute;
	box-sizing:border-box;
}
#g-hc_18-box .g-aiPointText p {
	white-space:nowrap;
}
#g-hydroCycle-ab_1 {
	position:relative;
	overflow:hidden;
}
#g-hydroCycle-ab_1 {
	display:none;
}
@container g-hc_18-box (width >= 635px) {
#g-hydroCycle-ab_1 {
	display:block;
}
}
#g-hydroCycle-ab_1 p {
	font-family:Open Sans;
	font-weight: 400;
	font-style:normal;
	line-height:15px;
	opacity:1;
	letter-spacing:0em;
	font-size:17px;
	text-align:left;
	color:rgb(0,0,0);
	text-transform:none;
	padding-bottom:0;
	padding-top:0;
	mix-blend-mode:normal;
	height:auto;
	position:static;
}
#g-hydroCycle-ab_1 .g-pstyle0 {
	font-weight:400;
	font-style:Regular;
	text-align:right;
}
#g-hydroCycle-ab_1 .g-pstyle1 {
	font-weight:400;
	font-style:Regular;
	line-height:18px;
	height:18px;
	font-size:15px;
	text-align:center;
}
#g-hydroCycle-ab_1 .g-pstyle2 {
	font-weight:400;
	font-style:Regular;
	height:15px;
	text-align:right;
	color:rgb(19,57,214);
}
#g-hydroCycle-ab_1 .g-pstyle3 {
	font-weight:400;
	font-style:Regular;
	height:15px;
	text-align:right;
}
#g-hydroCycle-ab_2 {
	position:relative;
	overflow:hidden;
}
#g-hydroCycle-ab_2 {
	display:none;
}
@container g-hc_18-box (width >= 356px) and (width < 635px) {
#g-hydroCycle-ab_2 {
	display:block;
}
}
#g-hydroCycle-ab_2 p {
	font-family:Open Sans;
	font-weight: 400;
	font-style:normal;
	line-height:10px;
	height:auto;
	opacity:1;
	letter-spacing:0em;
	font-size:8px;
	text-align:left;
	color:rgb(0,0,0);
	text-transform:none;
	padding-bottom:0;
	padding-top:0;
	mix-blend-mode:normal;
	position:static;
}
#g-hydroCycle-ab_2 .g-pstyle0 {
	font-weight:400;
	font-style:Regular;
	line-height:12px;
	font-size:12px;
	text-align:right;
}
#g-hydroCycle-ab_2 .g-pstyle1 {
	font-weight:400;
	font-style:Regular;
	line-height:12px;
	height:12px;
	font-size:12px;
	text-align:right;
}
#g-hydroCycle-ab_2 .g-pstyle2 {
	font-weight:400;
	font-style:Regular;
	height:10px;
	text-align:center;
}
#g-hydroCycle-ab_2 .g-pstyle3 {
	font-weight:400;
	font-style:Regular;
	line-height:8px;
	font-size:12px;
	text-align:right;
}
#g-hydroCycle-ab_2 .g-pstyle4 {
	font-weight:400;
	font-style:Regular;
	line-height:12px;
	height:12px;
	font-size:12px;
	text-align:right;
	color:rgb(19,57,214);
}
#g-hydroCycle-ab_3 {
	position:relative;
	overflow:hidden;
}
@container g-hc_18-box (width >= 356px) {
#g-hydroCycle-ab_3 {
	display:none;
}
}
#g-hydroCycle-ab_3 p {
	font-family:Open Sans;
	font-weight: 400;
	font-style:normal;
	line-height:10px;
	height:auto;
	opacity:1;
	letter-spacing:0em;
	font-size:10px;
	text-align:left;
	color:rgb(0,0,0);
	text-transform:none;
	padding-bottom:0;
	padding-top:0;
	mix-blend-mode:normal;
	position:static;
}
#g-hydroCycle-ab_3 .g-pstyle0 {
	font-weight:400;
	font-style:Regular;
	text-align:right;
}
#g-hydroCycle-ab_3 .g-pstyle1 {
	font-weight:400;
	font-style:Regular;
	height:10px;
	text-align:right;
}
#g-hydroCycle-ab_3 .g-pstyle2 {
	font-weight:400;
	font-style:Regular;
	line-height:8px;
	height:8px;
	font-size:7px;
	text-align:center;
}
#g-hydroCycle-ab_3 .g-pstyle3 {
	font-weight:400;
	font-style:Regular;
	line-height:7px;
	text-align:right;
}
#g-hydroCycle-ab_3 .g-pstyle4 {
	font-weight:400;
	font-style:Regular;
	height:10px;
	text-align:right;
	color:rgb(19,57,214);
}
#g-hydroCycle-ab_3 .g-pstyle5 {
	font-weight:400;
	font-style:Regular;
	line-height:9px;
	height:9px;
	font-size:7px;
	text-align:center;
}
/*#endregion*/

    
/*  */
svg {
visibility: hidden;

}
p {
visibility: hidden;
 
} 
/* transition above/below ground sections with fade */
img {
transition: opacity 0.45s linear;
}

/* add transition for clouds in conjunction with fadeClouds() */
#g-hydroCycle-ab_1-clouds-img,
#g-hydroCycle-ab_2-clouds-img,
#g-hydroCycle-ab_3-clouds-img {
      opacity: 0;
      visibility: visible;
      transition: opacity 1.45s ease;
  }

#g-hydroCycle-ab_1-Rain-img,
#g-hydroCycle-ab_2-Rain-img,
#g-hydroCycle-ab_3-Rain-img {
	opacity: 0;
	visibility: visible;
	transition: opacity 1.95s ease;
}

#g-hydroCycle-ab_1-Sun-img,
#g-hydroCycle-ab_2-Sun-img,
#g-hydroCycle-ab_3-Sun-img {
	opacity: 0;
	visibility: visible;
	transition: opacity 1.45s ease
}