.climate-week {
  .default-page-header {
    max-height: 456px;
    transition: all .4s ease;

    .default-header-content__inner {
      margin-left: 100px;

      @include md {
        margin-left: 30px;
      }
    }

    h1 {
      font-size: 8.4rem;
      line-height: 9rem;
      font-weight: 600;
      letter-spacing: -.2rem;

      @include sm {
        font-size: 4rem;
        line-height: 4.4rem;
      }
    }
  }

  &__line {
    > div {
      max-width: $max-width;
      margin-left: auto;
      margin-right: auto;
    }
  }

  &__vertical-line {
    position: absolute;
    background: #fff;
    background: linear-gradient(180deg,#fff,#fff 120px,#95c224 121px,#{$green});
    width: 1px;
    height: 450px;
    left: calc(50vw - 620px);
    top: 406px;
    z-index: 15;

    @include lg {
      left: 90px;
    }

    @include md {
      top: 349px;
    }

    @include sm {
      left: 20px;
      top: 219px;
    }
  }

  &__waves-content {
    position: relative;
    margin-bottom: 60px;
    background-color: $primary-color;

    p {
      line-height: 2.5rem;
    }

    > div {
      display: flex;
      position: relative;
      z-index: 5;
      max-width: $max-width;
      margin-left: auto;
      margin-right: auto;
    }

    &:after {
      content: '';
      width: 66.666%;
      background: url('../assets/img/svg/waves.svg') repeat-y;
      background-position-x: 300px;
      background-position-y: 0;
      background-repeat: space;
      position: absolute;
      right: 0;
      top: 0;
      height: 200px;
      z-index: 1;

      @include lg {
        width: 100%;
      }
    }

    &:before {
      content: '';
      width: 33.333%;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      z-index: 1;

      @include lg {
        display: none;
      }
    }
  }

  &__map-wrapper {
    padding-top: 1px;

    h2 {
      font-size: 8rem;
      line-height: 7rem;
      color: $primary-color;
      position: absolute;
      margin: 0 0 0 calc(50vw - 610px);
      z-index: 11;
      font-weight: 600;
      pointer-events: none;

      @include lg {
        margin: 0 0 0 100px;
      }

      @include sm {
        font-size: 3rem;
        margin: 0 0 0 24px;
      }
    }
  }

  &__map {
    width: 100%;
    height: 780px;
    margin-top: 38px;

    @include sm {
      height: calc(100vh - 85px);
    }

    .marker {
      opacity: 1;
      transition: opacity .3s;
      background-position: 50%;
      background-size: 65px 76px;
      background-repeat: no-repeat;

      &.js-active,
      &:hover {

        background: url(../assets/img/svg/spg_flag_hover.svg)!important;
        opacity: 1!important;
      }
    }
  }

  &__footer {
    padding-top: 70px;
    padding-bottom: 100px;
    background-color: #f0f0f0;
    position: relative;
    z-index: 15;

    &:before {
      content: '';
      background: url('../assets/img/svg/white_waves.svg') repeat-y;
      background-position-x: 100%;
      background-repeat: space;
      position: absolute;
      right: 75%;
      width: 25%;
      bottom: 0;
      height: 151px;

      @include sm {
        height: 100px;
        right: 50%;
        width: 50%;
      }
    }

    &-content {
      max-width: $max-width;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    &-col-1 {
      width: 33.33333333%;
      padding-left: 10px;
      padding-right: 10px;
      z-index: 2;

      @include sm {
        width: 100%;
        padding-left: 54px;
        padding-right: 40px;
      }

      h2 {
        color: #676767;
        font-size: 4.2rem;
        line-height: 5rem;
        font-weight: 600;
        margin: 0 0 0 113px;
        max-width: 353px;

        @include sm {
          margin: 0 0 0 0;
          margin-bottom: 20px;
        }
      }
    }

    &-col-2 {
      width: 66.66666667%;

      @include sm {
        width: 100%;
        padding-left: 54px;
        padding-right: 40px;
      }

      p {
        color: #676767;
        font-size: 1.4rem;
        line-height: 2rem;
        width: 80%;
        margin: auto;

        @include sm {
          width: 100%;
        }
      }

      a {
        display: block;
        float: left;
        margin-left: 10%;
        margin-top: 20px;
        font-size: 1.4rem;
        line-height: 4.2rem;

        @include sm {
          margin-left: 0;
        }
      }
    }
  }

  &__bottom-vertical-line {
    position: absolute;
    background: #{$green};
    width: 1px;
    height: 200px;
    left: calc(50vw - 620px);
    top: -150px;
    z-index: 15;

    @include lg {
      left: 90px;
    }

    @include sm {
      left: 20px;
    }
  }

  &__waves-content-wrapper {
    color: #fff;
    padding: 40px 75px;
    margin-left: 33.33333333%;

    @include lg {
      margin-left: 9%;
    }

    @include md {
      padding: 30px 54px;
      margin-left: 0;
    }
  }

  &__info-holder {
    width: 90px;
    height: calc(100% - 38px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    margin-top: 38px;
    background-color: hsla(0,0%,96.1%,.8);
    transition: all .4s ease;

    &.js-open {
      width: 430px;
    }

    @include sm {
      width: 100%;
      top: 100%;
      margin-top: 0;

      &.js-open {
        width: 100%;
        top: 67px;
      }
    }
  }

  &__info-open {
    width: 30px;
    height: 100px;
    background-color: hsla(0,0%,96.1%,.8);
    position: absolute;
    right: -30px;
    top: 50%;
    z-index: 12;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    display: none;

    @include sm {
      width: 100%;
      height: 30px;
      top: 0px;
      right: auto;
      transform: translateY(0);
    }

    &:after {
      content: " ";
      background: url(../assets/img/svg/green-arrow.svg) no-repeat 50%;
      width: 100%;
      height: 100%;
      display: block;

      .js-open & {
        transform: rotate(180deg);

        @include sm {
          transform: rotate(90deg);
        }
      }
    }
  }

  &__info-content {
    transition: opacity .2s ease;
    position: absolute;
    right: 0;
    top: 100px;
    width: 300px;
    opacity: 0;
    pointer-events: none;

    @include sm {
      top: 30px;
      right: calc(50% - 150px);
      max-height: calc(100vh - 150px);
      overflow-y: auto;
    }

    &.js-active {
      .js-open & {
        opacity: 1;
        transition: opacity .4s ease;
        pointer-events: all;
      }
    }

    &-type {
      color: $gray-90;
      font-size: 1.8rem;
      line-height: 2.4rem;
      margin: 20px 20px 0 0;
      font-weight: 700;
    }

    &-title {
      color: $primary-color;
      font-size: 2.4rem;
      line-height: 3rem;
      margin: 20px 20px 0 0;
      font-weight: 700;
    }

    &-summary {
      color: #676767;
      font-size: 1.4rem;
      line-height: 2rem;
      margin: 20px 0 0;
      max-height: 300px;
      overflow-y: auto;
      padding-right: 20px;

      p {
        margin: 0;
      }
    }

    &-link a {
      color: #{$green};
      font-weight: 700;
      font-size: 1.8rem;
      line-height: 3rem;
      margin: 20px 0 0;
      display: inline-block;
      transition: color 0.25s linear;

      &:hover {
        color: $primary-color;
      }
    }
  }
}