/* ei_core.css
(special styles that ONLY apply to the home page content. no need to include in the core.css file)

*/

/* --- Home Page Video Feature --- */
.video-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 55.5vw; /* 56.25vw */
    display: flex;
    flex-direction: column;
    /* CAN *NOT* PUT BG COLOR ON THIS ELEMENT - IT BLOCKS CHILD IMG */
}
/* only shorten panel in wider window case */
@media only screen and (min-width:1020.1px) {
    .video-wrapper.shorter {
        min-height:45.5vw;
    }
}
.video-wrapper.static { /* video replaced by static image */
    min-height: auto;
    height: 43.5vw; /* fit image to panel height */
    /* replace this height spec for one fitting the new single image */
    height: 31.8vw; /* skip for the moment */
    /* 500px H / 1551px W = 32.24vw */
}
.video-wrapper/* .static */ img.hero-background {
    display:block;
    width:100%;
    height: auto;
    inset: 0px;
    position: absolute;
    z-index: -1;
}
.video-wrapper .gray-overlay,
.video-wrapper::before,
.video-wrapper::after { /* overlay to tone down the brightness of the video */
    content:'';
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    /* bg-color only goes on the 'after' since element has a bg-color set already */
}
.video-wrapper .gray-overlay /* ,
.video-wrapper::after */ {
    /* background-color: rgba(0,0,0,0.45); */
    width:var(--hero-overlay-width);
    /* background-image: linear-gradient(to top,rgba(0,0,0,0.45) 81%,transparent 89%,transparent); */
    background-image: linear-gradient(to right,rgba(0,0,0,0.45) 81%,transparent /* 89%,transparent */);
    top:auto;
    bottom:0px;
}
@media only screen and (min-width:1020.1px) {
    .video-wrapper .gray-overlay {
        height:calc(100% - var(--header-height) - var(--scroll-down,0px));
    }
}
.video-wrapper .gray-overlay.show-outline {
    outline:2px solid brown;
}
/* apply a soft fade out to the right of the gray overlay */
.not .video-wrapper .gray-overlay::after {
	content: '';
	position: absolute;
	right: -25px;
	width: 25px;
	height: 85%;
	background-image: linear-gradient(to right,rgba(0,0,0,0.45),transparent);
	bottom: 0px;
}

.video-wrapper::before {
    /* background-color:black; /* black is better behind static image */
    background-color:#93a7a5; /* brown tone retrieved from video */
    z-index: -1;
}
#video_bg {
    position: absolute;
    /* top:0px; */
    top:auto;
    left:0px;
    /* bottom:0px; */
    bottom:auto;
    right:0px;
    width: 100%;
    height: auto;
    z-index: -1; /* prevent video from obscuring neighbor content */
    top:50%;
    translate:0px -50%;
}
@media only screen and (max-width:1020px) {
    #video_bg.full-center {
        translate:-50% -50%;
        /* inset:0px; */
        left:50%;
        top:50%;
        right:auto;
        bottom:auto;
        width:auto;
        height:100%;
        max-width:none; /* allow video element to scale up to height of container by relaxing width contraint */
    }
}

/* same breakpoint shared by hero-crawler in ei_sliders.css*/
@media only screen and (max-width:11500px) { /* was 1150px */
    .video-wrapper.static {
        min-height: 500px;
    }
    .video-wrapper.static img.hero-background {
        height:100%;
        width:auto;
    }
    .video-wrapper img.hero-background.full-center {
        top: 0px;
        bottom: 0px;
        left: 50%;
        right: auto;
        height: 100%;
        width: auto;
        translate: -50%;
    }
}

/* special overlay image to serve as an accent in front of the image */
hex-grid {
    position: absolute;
    background-image: url('/assets/images/shapes-overlay.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom:0px;
    left:40%;
    right:-5%;
    top:25%;
}
.interior-page-background hex-grid {
    left:50%;
    right:-10%;
}

#hold_text_down {
    height:calc(0.5 * var(--header-height));
}

hero-centered-content {
    --hcc_y_margin: 2.82vw;
    display:block;
    z-index:1;
    margin-top:var(--hcc_y_margin) !important;
    margin-bottom:calc(2 * var(--hcc_y_margin)) !important;
}
@media only screen and (min-width:1020.1px) {
    .not hero-centered-content.general-container::before {
        content:'';
        display:block;
        height:calc(var(--header-height) + 10px);
    }
    #hold_text_down {
        height:var(--header-height);
    }
}

/* reduce up-shift to allow text block to fit better within panel shape */
@media only screen and (min-width:768.1px) {
    .shift-first-panel-up {
        margin-top:calc(-0.5 * var(--header-height));
    }
}
/* was 768.1px then 1020.1px */
@media only screen and (min-width:1020.1px) {
    .shift-first-panel-up {
        margin-top:calc(-1 * var(--header-height));
        /* padding-top:var(--menu-height); */
        /* padding-bottom:35px; */
    }
}

/* inspired by page design found on (www.) infinum technology(dot)com/ */
.vertical-choices { /* wrapper container for the vc content */
    display:flex;
    flex-direction:column;
}

@media only screen and (min-width:1020.1px) {    
    vertical-choice {
        margin-bottom:35px; /* only need space in 'wider' view */
    }
}

vertical-choice {
    display:flex;
    align-items:center;
    cursor:pointer;
    padding:10px 0px 10px 20px;
    position: relative;
    transition:color 125ms linear;
}
.vertical-choices + right-column {
    border-radius: 10px;
    /* box-shadow: 0px 3px 3px 3px black; */
    height:380px;
    width:100%;
    max-width: 575px;
    position:relative;
    margin:0px auto;
}
.vertical-choices + right-column::before {
	content: '';
	position: absolute;
	width: 100%;
	background-image: linear-gradient(to right,#87BE49,#28A8DF);
	height: 100%;
	border-radius: 10px;
	translate: 15px 15px;
}
right-column .content-choice {
    display:none;
    position:relative;
    /* pointer-events: none; */
    height:100%;
    /* background-color: black; */
    color:white;
    border-radius: 10px;
    padding:10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow:hidden; /* prevent float-ups from leaking past the bottom corners */
}
right-column .content-choice-1 {
    background-image: url(/assets/images/goals_mobile.jpg);
}
right-column .content-choice-2 {
    background-image: url(/assets/images/goals_export.jpg);
}
right-column .content-choice-3 {
    background-image: url(/assets/images/goals_decarb.jpg);
}
.vertical-choices.show-content1 + right-column .content-choice-1,
.vertical-choices.show-content2 + right-column .content-choice-2,
.vertical-choices.show-content3 + right-column .content-choice-3,
.vertical-choices.show-content4 + right-column .content-choice-4 {
    display:block;
}

.content-choice p.title {
	/* text-align: center; */
	font-size: 120%;
	font-weight: bold;
}
p.title + p {
    margin-bottom:0px;
}

div.float-up {
    --transition-duration:0.5s;
    overflow:hidden;
    position: absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:0px;
    transition: height var(--transition-duration) ease-in-out, padding var(--transition-duration) ease-in-out;
    color:white;
    background-color:rgba(0,0,0,0.33);
    padding:0px 10px;
}
content-choice .show-float, /* script doesn't use this yet */
div.float-up.show {
    height:40%;
    padding-top:10px;
    padding-bottom: 10px;
}

/* present left-side bar that expands on hover/active-state to cover caption */
.white-fade-bar::before,
.vertical-choices .vc-1::before,
.vertical-choices .vc-2::before,
.vertical-choices .vc-3::before {
    content:'';
    display:block;
    height: 100%;
    border-left:2px solid var(--dark-blue-background);
    margin:0px;
    left:0px;
    position:absolute;
    /* z-index: -1; /* not needed when element children are position:relative */
    width:230px;
    max-width:0%;
    background-color: var(--dark-blue-background);
    transition:max-width 125ms linear;
}
.white-fade-bar::before {
    border-left-color:white;
    background-color: white;
    top:50%;
    translate: 0px -50%;
    width:202px;
}
.white-fade-bar {
    position: relative;
    padding-left:15px !important;
}
.vertical-choices vertical-choice:hover,
.vertical-choices.show-content1 .vc-1,
.vertical-choices.show-content2 .vc-2,
.vertical-choices.show-content3 .vc-3 {
    color:white;
}
.mission-vision-panel .white-fade-bar::before {
    width:160px;
}
.mission-vision-panel .white-fade-bar::before {
    width:202px;
}
.white-fade-bar:hover::before,
.vertical-choices vertical-choice:hover::before,
.vertical-choices.show-content1 .vc-1::before,
.vertical-choices.show-content2 .vc-2::before,
.vertical-choices.show-content3 .vc-3::before {
    /* width:70%; */
    max-width:100%; /* 230px */
}
.vertical-choices.show-content1 .vc-1 .green-arrow,
.vertical-choices.show-content2 .vc-2 .green-arrow,
.vertical-choices.show-content3 .vc-3 .green-arrow {
    display:inline-block;
}
.vertical-choices {
    /* margin-right:30px; */
    margin:20px 30px 20px 0px;
}
vertical-choice .green-arrow {
    display:none;
    margin-left:auto;
    height:auto;
    width:40px;
}
vertical-choice .raise-to-new-layer {
    position:relative;
}
@media only screen and (min-width:768.1px) {
    vertical-choice .raise-to-new-layer {
        white-space:nowap;
    }
}

/* roll vertical choices section over so right-column content isn't squished */
/* also make vertical choices into a row */
@media only screen and (max-width:1020px) {
    .one-third-two-thirds {
        flex-direction: column;
    }
    .vertical-choices {
        flex-direction: row;
        margin-right:0px; /* kill indent */
    }
    vertical-choice {
        flex:1; /* even spacing */
    }
    .vertical-choices + right-column,
    right-column .content-choice {
        min-height: 380px;
    }
    .vertical-choices.show-content1 .vc-1 .green-arrow,
    .vertical-choices.show-content2 .vc-2 .green-arrow,
    .vertical-choices.show-content3 .vc-3 .green-arrow {
        display:none;
    }
    .vertical-choices .vc-1::before,
    .vertical-choices .vc-2::before,
    .vertical-choices .vc-3::before {
        width:270px;
    }
}


.mission-vision-panel {
    overflow:hidden;
}
.not .mission-vision-panel {
    display:flex;
    /* overflow-hidden applied to parent/wrapper item */
    /* overflow:hidden; /* NO SCROLLING! */
}
#mv-panel-observer-target {
    position: absolute;
    top:0px;
    height:50px;
    width:1px;
    pointer-events: none;
    /* opacity: 0; */
}
.mission-vision-panel text-column {
    flex-basis: 50%;
    min-height: 625px; /* this element governs panel height */
}
diamonds-column {
    position: relative;
    flex-basis: 50%;
    translate: 50px; /* 200px; */
    /* these don't appear to have any affect on flex container child */
    /* height:100%;
    margin-right:-110px; */
}
@media only screen and (max-width:1615px) {
    diamonds-column {
        height:39.95vw;
    }
}
@media only screen and (max-width:600px) {
    diamonds-column {
        display: none;
    }
    .mission-vision-panel text-column {
        flex-basis:auto;
    }
}

diamond-shape {
    --transition-duration:1s;
    --tile-size:49%; /* 300px; */
    position:absolute;
    top:0px;
    right:0px;
    /* background-size: cover; */
    background-size: contain; /* prevent cropping */
    background-position: center;
    background-repeat: no-repeat;
    width:var(--tile-size);
    height:var(--tile-size);
    opacity: 1;
    transition:transform var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in;
}

diamonds-column:not(.in-view) diamond-shape { opacity: 0.5; }
diamonds-column:not(.in-view) #diamond1 { transform:translate(-50px,-220px); }
diamonds-column:not(.in-view) #diamond2 { transform:translate(100px,-160px); }
diamonds-column:not(.in-view) #diamond3 { transform:translate(0px,-100px); }
diamonds-column:not(.in-view) #diamond4 { transform:translate(100px,-25px); }
diamonds-column:not(.in-view) #diamond5 { transform:translate(-400px,25px); }
diamonds-column:not(.in-view) #diamond6 { transform:translate(50px,125px); }
diamonds-column:not(.in-view) #diamond7 { transform:translate(-220px,125px); }

#diamond1 { background-image:url('/assets/images/diamonds1.png');
    right:375px;
    top:-45px;
    right:61.157%;
    top:-7.2%;
}
#diamond2 { background-image:url('/assets/images/diamonds2.png');
    right: 55px; /* 110px; */
    top:-50px;
    right:8.97%;
    top:-8%;
}
#diamond3 { background-image:url('/assets/images/diamonds3.png');
    right: 218px; /* 220px; */
    top:110px;
    right:35.553%;
    top:17.6%;
}
#diamond4 { background-image:url('/assets/images/diamonds4.png');
    right:-100px;
    top: 108px; /* 110px; */
    right:-16.31%;
    top:17.28%
}
#diamond5 { background-image:url('/assets/images/diamonds5.png');
    right:377px;
    top:273px;
    right:61.483%;
    top:43.68%
}
#diamond6 { background-image:url('/assets/images/diamonds6.png');
    right:64px; /* 110px; */
    top:268px; /* 220px; */
    right:10.438%;
    top:42.882%;
}
#diamond7 { background-image:url('/assets/images/diamonds7.png');
    right:222px; /* 220px; */
    top:433px; /* 330px; */
    right:36.205%;
    top:69.28%;
}

.background-wave {
    position:relative;
}
.background-wave::after {
	content: '';
	position: absolute;
	bottom: 0px;
    top:auto;
	width: 100%;
	left: 0px;
	right: 0px;
	background-image: url('/assets/images/wave_white.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	height: 2.82vw; /* 80px H / 2836 W = 2.82vw*/
}

/* SUPER UBER FANCY WIZBANG TIMELINE
    with FADE-IN, SLIDE-IN boxes 
    and TAILS and DOTS connected to a CENTRAL VINE
*/
.timeline-element {
    position:relative;
    padding-bottom:30px;
}

@media only screen and (min-width:768px) {
    .timeline-element {
        --timeline-outer-padding: 10%;
        padding-left:var(--timeline-outer-padding);
        padding-right:var(--timeline-outer-padding);
        display:-ms-grid;
        display:grid;
        gap:50px;
        grid-template-columns: 1fr 2px 1fr;
        grid-template-rows: repeat(calc(var(--entries) + 1),auto);
    }
    .timeline-element::before { /* the divider strip down the middle */
        background-image:linear-gradient(black 95%, transparent);
        content: '';
        -ms-grid-column: 2;
        grid-column:2;
        grid-row:1/-1;
        height:100%;
    }
    .timeline-element timeline-entry:last-child {
        margin-bottom:2rem; /* make sure timeline center column extends far enough down */
    }
    timeline-entry {
        -ms-grid-column: 1;
        grid-column:1;
        grid-row:calc(var(--entry-number) + 1)/span 2;
        margin:0;
        --ms-grid-row-align:start;
        align-self:start;
        position:relative;
    }
    /* the right-column of even numbered entries */
    timeline-entry:nth-child(2n) {
        -ms-grid-column:3;
        grid-column:3;
    }

    timeline-entry::before,
    timeline-entry::after,
    timeline-entry:nth-child(2n)::before,
    timeline-entry:nth-child(2n)::after {
        content:'';
        position:absolute;
        top:50%;
    }
    timeline-entry::before { /* line */
        right:-40px;
        transition:transform 250ms linear 500ms;
        transform-origin: center left;
    }
    timeline-entry:nth-child(2n)::before {
        left:-40px;
        transform-origin: center right;
    }
    timeline-entry::before,
    timeline-entry:nth-child(2n)::before {
        border-top:2px solid black;
        width:30px;
    }
    timeline-entry::after, /* joint-dot */
    timeline-entry:nth-child(2n)::after {
        border-radius:50%;
        border:4px solid white;
        background-color:var(--light-green-text);
        width:18px;
        height:18px;
        translate:6px -8px;
    }
    timeline-entry::after { /* joint-dot */
        right:-54px;
        transition:scale 250ms linear 900ms;
        scale:1;
    }
    timeline-entry:nth-child(2n)::after {
        left:-54px;
        translate:-6px -8px;
    }

    timeline-entry:not(.show) {
        translate:-20px;
    }
    timeline-entry:not(.show)::before {
        transform:scaleX(0);
    }
    timeline-entry:not(.show)::after {
        scale:0;
    }
    /* these not needed because grid arranges the content */
    .not timeline-entry:nth-child(2n+1) {
        float:right;
        position:relative;
        translate:0% -60%;
    }
    .not timeline-entry:not(.show):nth-child(2n+1) {
        translate:20px -60%;
    }
}
middle-white-line {
    position:absolute;
    left:50%;
    translate:-50%;
    width:4px;
    height:100%;
    background-color:gray;
}
middle-white-line::after {
    content:'';
    position:absolute;
    bottom:0px;
    width:100%;
    height:100px;
    background-image:linear-gradient(transparent,white);
}
timeline-entry {
    padding:40px 20px;
    border-radius:10px;
    background-color:#555;
    color:white;
    /* width:calc(50% - 50px); /* allow for 'tail' */
    margin-bottom:10px;
    transition:all 250ms linear; /* opacity, translate, box-shadow, outline */
    position:relative;
    opacity:1;
    box-shadow:0px 0px 0px 0px var(--dark-blue-background);
    outline:0px solid lightblue;
}
timeline-entry:hover {
    box-shadow:0px 0px 6px 6px var(--dark-blue-background);
    outline:1px solid lightblue;
}
timeline-entry:not(.show) {
    opacity:0;
}

timeline-head, timeline-body, timeline-entry, date-line, event-line {
    display:block;
}
event-line {
    font-weight:bold;
}
timeline-head {
    cursor:pointer;
}
timeline-body {
    max-height:0px;
    overflow:hidden;
    transition:max-height 0.5s linear;
}
timeline-body > div:first-child {
    padding-top:1rem;
}
timeline-head.show-body + timeline-body {
    max-height:100px;
}


/* -- H2 Fuel Forward Panel -- */
.fuel-forward-panel {
    position: relative;
    background-repeat:no-repeat;
    background-position: left center;
    background-size: contain;
    /* background-image:url('/assets/images/h2_fueling_bus_1920px.jpg'); */   
}
.ff-img-wrapper {
    position: absolute;
    top:0px;
    left:0px;
    height:100%;
    width:50%; /* principal property to achieve position!! */
}
.h2-fuel-bus-img {
	position: absolute;
	height: 100%;
    top:0px;
    right:20px;
}
@media screen and (max-width:1400px) {
    .not .h2-fuel-bus-img {
        left: calc(50% - 690px);
    }
}
@media screen and (min-width:1400.1px) {
    .fuel-forward-panel {
        min-height:32vw;
        /* background-position: left center; */
    }
}
.fuel-forward-panel right-column {
    margin-left:auto;
    width:50%;
}
@media screen and (max-width:768px) {
    .fuel-forward-panel right-column {
        margin-left:0px;
        width:100%;
    }
    .h2-fuel-bus-img,
    .ff-img-wrapper {
        right:0px;
        width:100%;
    }
    .ff-img-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: white;
        opacity:0.5;
    }
}

.shift-img-left-10px {
    position:relative;
    left:-10px;
}

.green-down-arrow {
    max-height: 90px;
    scale: 67%;
}

.green-down-arrow.scalex-with-margin {
    transform: scaleX(67%);
    margin-top: 20px;
    margin-bottom: 20px;
}

.green-down-arrow.just-scale-to-67 {
    scale: 67%;
}

#green-arrow-choices:not(.arrow-choice-1) .choice-1-comment,
#green-arrow-choices:not(.arrow-choice-2) .choice-2-comment { display:none;  }

.choice-1-comment, .choice-2-comment { position:absolute; left:0px; text-align:start; }

/* -- OUR EXPERTISE panel -- */

.green-border {
    border-radius:10px;
    border:1px solid var(--light-green-text);
}
.padding-3-percent {
    padding:3%;
}
.not .row-of-3 .green-border {
    padding-top:40px;
    padding-bottom:40px;
}
.green-diamond {
    position:relative;
}
.green-diamond .top-edge-image {
    position: absolute;
    top:-20px;
    left:0px;
    right:0px;
    display:flex;
    align-items: center;
    justify-content: center;
    --icon-font-size:40px;
    --diamond-size:64px;
}
.top-edge-image::before {
    content:'';
    /* z-index:100; /* why is this needed? */
    width:var(--diamond-size);
    height:var(--diamond-size);
    background-color:var(--light-green-text);
    border-radius:10px;
    /* order of transformations between rotate, translate */
    position: absolute;
    left:50%;
    transform:translate(-50%) rotate(45deg);
}
.top-edge-image .bi {
    color:white;
    font-size: var(--icon-font-size);
    z-index: 1;
}
.top-edge-image img {
    height:var(--icon-font-size);
    z-index:1;
}
img.filter-invert {
    filter:invert(1);
}
.green-cell-margins {
    margin-top:2em;
    margin-bottom:0px;
}
.green-cell-margins + p {
    margin-bottom:0px;
}