/* Misc */
.big-image-cfh-cta .bg-btn {font-size: 21px; padding: 15px 30px;}
.timeline-badge {display: none !important;}
.timeline-wrap.container {padding-top: 70px;}
.cfh-bottom-cta.bottom-slider .bg-btn {padding: 15px 35px; font-size: 22px;}

.cfh-video-vimeo {padding: 50px 0px 0px 0px;}


/* Mobile */
@media (max-width:1000px) {
.video-hero .home-content h1 br {display: none;}
}
@media (max-width:844px) {
	.electric-home.smaller-intro {padding: 60px 0px 30px 0 !important;}
	.video-hero-buttons a {margin-bottom: 5px; min-width: 100%;}
	 .left-right.two-col-cfh .left-txt {min-width: 90%;}
  .big-image-cfh-cta .bg-btn {font-size: 18px !important; line-height: 1.3em; padding: 10px 10px !important;}
  .big-image-cfh-cta {position: relative !important; }
  .cfh-bottom-cta .bg-btn {text-align: center;}
.video-hero .home-content h1 {line-height: 1.2em;}
  .video-hero .home-content h5 {line-height: 1.3em;}
	.video-hero .home-content h5 {font-size: 18px !important;}
  .video-hero {height: 50vh !important;}
  .video-hero .home-content {padding-top: 18vh !important;}
  .mm-launch-container {margin-top: 40px !important;}
  .video-cfh-text {padding-top: 30px !important; padding-bottom: 0 !important;}
  .timeline-title {padding-bottom: 50px !important;}
  .two-col-cfh .left-txt p {font-size: 18px !important;}
  .big-image-cfh {border-top: 5px solid #FFF;}
  
  
  .video-hero .home-content h1 {font-size: 36px !important; }
  .electric-home.smaller-intro h2, .video-cfh-text h3 {font-size: 32px !important;}
  .electric-home.smaller-intro p {line-height: 1.25em; font-size: 22px;}
  .two-col-cfh .left-txt {padding: 20px 0px;}
  .timeline-title h3 {font-size: 36px !important;}
  .timeline-title h4 {font-size: 22px !important;}
  .timeline-section {padding-top: 0 !important;}
  .timeline-title {margin-top: 60px;}
  .timeline-badge {max-width: 100px; margin-top: 20px;}
  .timeline-wrap.container {background-size: 180% !important; background-position: right top !important;}

  .timeline-section .stop:before {margin-left: 10px;}
  .timeline-section main::before {left: 40px !important;}
  
.timeline-section article h2 {font-size: 30px !important; line-height: 1.2em !important;}
  .timeline-section article li {font-size: 20px !important; line-height: 1.2em !important;}
  .timeline-section article ul {padding-left: 20px !important;}
  .timeline-section .text {padding: 10px !important;}
  .timeline-section .stop:after {max-width: 80%;}
.timeline-section main {padding-bottom: 0 !important;}
.timeline-section .container {padding-bottom: 20px !important;}


  .timeline-section .container {width: 95%;}
  .big-image-cfh-wrap {margin: 100px 0px !important;}
  .big-image-cfh h3 {font-size: 28px !important;}
  .big-image-cfh-wrap {padding: 50px 30px !important;}
  .big-image-cfh-wrap p {font-size: 20px !important; line-height: 1.3em !important;}
  .big-image-cfh h3:before {max-width: 25px; max-height: 25px; background-size: cover; left: -20px !important;}
  .big-image-cfh-cta .btn {font-size: 17px !important; padding: 15px 20px !important;}
}


.electric-home.smaller-intro {border-bottom: none; padding: 70px 0px;}
.smaller-intro-no-padding {padding-bottom: 0 !important;}
/* Video Hero */


.video-hero-title-wrap {min-height: 40px; position: relative;}
.video-hero-title-2 {opacity:0; margin-top: -20px;}
.video-hero-title-1, .video-hero-title-2 {position: absolute; width: 100%; text-align: center; transition: all 0.4s ease;} 

.go-away {margin-top: -20px; opacity:0;}
.come-in {margin-top: 0; opacity: 1;}

.video-hero {
    height: 80vh;
	min-height: 600px;
    position: relative;
}
.video-hero video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-hero .home-content {
    position: absolute;
	z-index: 5;
	width: 100%;
    padding-top: 25vh;
    color: #fff;
    text-align: center;
}
.video-hero .home-content h5 { letter-spacing: 1px; font-size: 24px;}
.video-hero .home-content h1 {font-weight: 100; font-size: 60px; margin-bottom: 30px;}
.video-hero-overlay {position: absolute; background: rgba(0,0,0,0.15); width: 100%; height: 100%; left: 0; top: 0; z-index: 4;}
.bg-btn span {letter-spacing: 0.01em;}


@media (max-width:1024px) {
  .mm-product-video-modal.open {top: 30vh !important; min-width: 95%;}
  .close-video {left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important;}
  .close-video svg {transform: unset !important;}
  
}



/* Video CFH */


.close-video {position: absolute; z-index: 99; right: 0; top: 180px; width: 90px; height: 90px; color: #FFF;  font-size: 40px;  font-weight: 100; cursor: pointer;}
.close-video svg {filter: invert(1); transform: scale(2,2);}
.video-cfh-thumb {width: 100%; height: auto; border-radius: 20px; cursor: pointer;}
.video-cfh-thumb:hover {filter: brightness(120%); box-shadow: 0 0 30px #8393e5;}
.video-cfh-thumb:hover, .video-cfh-thumb {transition: all 0.4s ease;}
.video-cfh-text {padding: 50px 0px 60px 0px; text-align: center;}
.video-cfh-text h3 {font-weight: 100; font-size: 50px; margin-bottom: 20px;}
.video-cfh-text p {font-size: 26px;}

.mm-product-video-modal-container {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  overflow: hidden;
}

.mm-product-video-modal-container.open {
  display: block;
}

.mm-product-video-modal-close:hover {
  cursor: pointer;
}

.mm-product-video-modal-close {
  color: #fff;
  position: fixed;
  z-index: 1000000000;
  top: 20px;
  right: 20px;
  font-size: 40px;
}

.mm-product-video-modal {
  width: 60%;
  max-height: 800px;
  overflow: hidden;
  position: relative;
  top: -1000px;
  text-align: left;
  border-radius: 4px;
}

.mm-product-video-modal.open {
  top: 150px;
  margin-bottom: 150px;
}

.mm-video-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.mm-launch-container {
  margin-top: 100px;
}

.mm-launch {

}
.mm-launch img {width: 100%; height: auto; }



.dropper {
    transition: top 0.5s ease-in-out;
}








/* Timeline */
.timeline-text {width: 90%;}
.timeline-image img {width: 90%; height: auto; border-radius: 10px;}
.timeline-section {padding-top: 10px; background-repeat: no-repeat; background-size: 100%; background-position: center top;}
.timeline-section .container {background-color: #FFF; position: relative; max-width: 1380px; border-radius: 15px; padding-bottom: 90px;}
.timeline-title {text-align: center; padding-bottom: 120px;}
.timeline-title h3 {font-size: 110px; letter-spacing: -0.01em;}
.timeline-title h4 {font-size: 40px; letter-spacing: -0.01em;}

.timeline-badge {position: absolute; width: 150px; left: 0; right: 0; margin-left: auto; margin-right: auto; top: -75px; z-index: 2;}
.timeline-badge img {width: 100%; display: inline-block; margin: 0 auto;}
.timeline-section article h2 {margin-top: 20px; font-size: 30px; margin-bottom: 10px; line-height: 1.2em;}
.timeline-section article li, .timeline-section article p {font-family: 'SF Pro Display'; font-weight: 100; letter-spacing: 0.01em; font-size: 22px; line-height: 1.2em;}

.two-col-cfh .left-txt {max-width: 65%; min-width: 350px;}
.two-col-cfh .left-txt p {font-size: 20px; line-height: 1.4em; letter-spacing: 0.01em; color: #141414;}
.timeline-section article {text-align: left !important;}
.timeline-section article li {list-style: circle; display: list-item; margin-bottom: 5px;}
.timeline-section article ul {padding-left: 40px;}
.timeline-wrap.container {background-image: url(https://elephantenergy.com/wp-content/uploads/2023/10/stars-bg.jpg) !important; background-position: center top; background-size: contain; background-repeat: no-repeat;}
.big-image-cfh {background-size: cover; background-position: center top;}
.big-image-cfh-wrap {background: #FFF; padding: 70px; margin: 240px 0px; display: inline-block; position: relative;}
.big-image-cfh h3 {position: relative; font-size: 44px; margin-bottom:20px; }
.big-image-cfh h3:before {position: absolute;
    content: "";
    top: -23px;
    left: -40px;
    background-image: url(assets/images/bg-icon.png);
    background-size: cover;
    width: 35px;
    height: 35px;}
.big-image-cfh-cta {position: absolute; z-index: 2; width: 100%; text-align: center; bottom: -30px; left:0;}
.big-image-cfh-cta .btn {background: #8393e5; color: #FFF !important; border-radius: 50px; padding: 15px 35px; font-size: 22px;}
.big-image-cfh-wrap p {font-size: 22px;}



@property --clip-vertical {
  syntax: "<percentage>";
  initial-value: 95%;
  inherits: false;
}

@property --clip-horizontal {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: false;
}

@property --intro-radial {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.timeline-section main {
  --timeline-width: 100%;

  position: relative;
  padding-block: 0px;
  margin-inline: auto;
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    margin-left: -3px;
    border-right: 5px dotted #8393e5;
    content: "";
  }
}

.timeline-section .stop {
  --clip-horizontal: 100%;
  --clip-vertical: 93%;

  position: relative;
  min-height: 70vh;
  padding-top: 15vh;
  width: calc(var(--timeline-width) / 2);
  padding-inline: 30px;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFF;
    border: 4px solid #141414;
	box-shadow: 0px 0px 0px 4px #8393e5;
    content: "";
    translate: 50% 0;
    transform-origin: center;
    animation: popIn linear both;
    animation-timeline: view(block);
    animation-range: cover 5% contain 22%;
  }
  &::after {
    position: absolute;
    top: 20px;
    right: 40px;
    width: 75%;
    height: calc(15vh - 20px);
    border-width: 5px 0 0 5px;
    border-style: dotted;
    border-color: #8393e5;
    clip-path: inset(0 0 var(--clip-vertical) var(--clip-horizontal));
    transform-origin: center;
    animation: showLine linear both;
    animation-timeline: view(block);
    animation-range: cover 10% contain 40%;
    content: "";
  }

  &:nth-child(even) {
    justify-content: flex-end;
    text-align: end;
    margin-left: calc(var(--timeline-width) / 2);
    &::before {
      right: auto;
      left: 0;
      translate: -50% 0;
    }
    &::after {
      right: auto;
      left: 40px;
      border-width: 5px 5px 0 0;
      clip-path: inset(0 var(--clip-horizontal) var(--clip-vertical) 0);
    }
  }
}

.timeline-section .text {
  animation: slideIn linear both;
  animation-timeline: view(block);
  animation-range: cover 0% contain 12%;
}

/* keyframes */
@keyframes popIn {
  0% {
    scale: 0;
  }
  60% {
    scale: 1.2;
  }
}

@keyframes moveGradient {
  to {
    --intro-radial: 100%;
  }
}

@keyframes showLine {
  0% {
    --clip-horizontal: 100%;
    --clip-vertical: 95%;
  }
  60% {
    --clip-horizontal: 0%;
    --clip-vertical: 95%;
  }
  100% {
    --clip-horizontal: 0%;
    --clip-vertical: 0%;
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    translate: 0 50%;
  }
  100% {
    opacity: 1;
    translate: 0 3%;
  }
}

/* Default styles */

.timeline-section *,
.timeline-section *::before,
.timeline-section *::after {
  box-sizing: border-box;
}




.timeline-section .text {
  background: rgba(0, 0, 0, 0);
  color: #141414;
  padding: 0 1rem;

}




@media screen and (width <= 600px) {
  .timeline-section main::before {
    left: 30px;
    margin-left: 0;
  }
  .timeline-section .stop,
  .timeline-section .stop:nth-child(even) {
    justify-content: flex-end;
    text-align: end;
    margin-bottom: 30px;
    margin-left: 33px;
    width: calc(var(--timeline-width) - 33px);
    padding-inline: 30px 8px;
    &::before {
      right: auto;
      left: 0;
      translate: -50% 0;
    }
    &::after {
      right: auto;
      left: 40px;
      border-width: 5px 5px 0 0;
      clip-path: inset(0 var(--clip-horizontal) var(--clip-vertical) 0);
    }
    .timeline-section .text {
      text-align: left;
    }
  }
}