.methodology {
  overflow: hidden
}
.methodology::before {
  background: rgba(0,0,0,.09);
  content: "";
  position: absolute;
  top: calc(var(--lg-1) + 65px);
  left: 0;
  height: calc(95% - 60px);
  width: calc(50% + 150px)
}
.methodology__animation {
  transform: scale(1.3);
}
.methodology__content:first-child {
  margin-bottom: 4rem
}
.methodology__content-levels {
  position: relative
}
.methodology__content-level {
  padding-left: 22px;
  margin-bottom: 30px
}
.methodology__content-level::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 34px;
  background-image: url(../~/media/Images/D/Diageo-V2/Diageo-Corp/distilled/methodology-module/level-icon.svg); 
  border-radius: 50%;
  height: 22px;
  width: 22px
}
.methodology__content-level::after {
  content: "";
  position: absolute;
  height: calc(100% + 27px);
  width: 2px;
  background: var(--white);
  left: -2px;
  top: 42px;
  z-index: -1
}
.methodology__content-level:last-child::after {
  display: none
}
.methodology__background-animation {
  width: 450px;
  height: 500px;
  mix-blend-mode: screen;
  filter: hue-rotate(45deg) contrast(2.5);
  opacity: .8;
  -webkit-transform: translate(-50px,-100px);
  -ms-transform: translate(-50px,-100px);
  transform: translate(-50px,-100px)
}
.methodology__time-content-year img {
  margin: 0 18px;
  width: 146px
}
@media (min-width:768px) {
  .methodology::before {
    top: calc(var(--lg-1) + 74px);
    height: calc(88% - 60px);
    width: calc(50% + 116px)
  }
  .methodology__time-content-year img {
    width: 100px
  }
  .methodology__content-level::after {
    height: calc(100% + 30px)
  }
  .methodology__content-level:last-child::after {
    display: none
  }
  .methodology__content-level.show-line::after {
    height: calc(100% + 27px) !important;
  }
}
@media (max-width:767px) {
.methodology .methodology__time-content-year br{
  display: none
}
}

@media (min-width:992px) {
  .methodology::before {
    top: calc(var(--lg-1) + 90px);
    height: calc(85% - 70px);
    width: calc(50% + 152px)
  }
  .methodology__content-level::after {
    height: calc(100% + 32px)
  }
  .methodology__background-animation {
    width: 500px;
    height: 500px;
    -webkit-transform: translate(-80px,-100px);
    -ms-transform: translate(-80px,-100px);
    transform: translate(-80px,-100px)
  }
}
@media (min-width:1200px) {
  .methodology::before {
    top: calc(var(--lg-1) + 100px);
    height: calc(80% - 79px);
    width: calc(50% + 200px)
  }
  .methodology__time-content-year img {
      width: 215px;
  }
  .methodology__image-bg {
    width: 450px;
    height: 450px;
    top: -50px
  }
  .methodology__background-animation {
    width: 600px;
    height: 600px;
    -webkit-transform: translate(-82px,-75px);
    -ms-transform: translate(-82px,-75px);
    transform: translate(-82px,-75px)
  }
  .methodology__content-level.show-line::after {
  height: calc(100% + 33px) !important;
}
}
@media screen and (width <= 767px) and (width >= 400px) {
  .methodology__image {
    width: 330px;
    height: 330px
  }
  .methodology__background-animation {
    -webkit-transform: translate(-45px,-88px);
    -ms-transform: translate(-45px,-88px);
    transform: translate(-45px,-88px)
  }
}
@media screen and (width <= 900px) and (width >= 768px) {
  .methodology__background-animation {
    width: 350px;
    height: 350px;
    -webkit-transform: translate(-55px,-85px);
    -ms-transform: translate(-55px,-85px);
    transform: translate(-55px,-85px)
  }
}
@media screen and (width <= 980px) and (width >= 901px) {
  .methodology__background-animation {
    width: 400px;
    height: 400px;
    -webkit-transform: translate(-60px,-75px);
    -ms-transform: translate(-60px,-75px);
    transform: translate(-60px,-75px)
  }
}
/*animation*/

.methodology__content-level::after {
  content: "";
  height: 0;
  transition: height 1s ease-out; 
}


.methodology__content-level.show-line::after {
  height: calc(100% + 20px);
}

.methodology__content-level {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.methodology__content-level.show {
  opacity: 1;
  transform: translateY(0);
}
.methodology__time-year-wrapper {
    width: fit-content;
}