/* Timeline CSS @anankitpatil */

.kaufman-timeline {
  position: fixed;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  overflow-y: scroll;
  background: #012169;
  @media (min-width: 768px) {
    background: linear-gradient(
      90deg,
      rgba(1, 33, 105, 1) 0%,
      rgba(1, 33, 105, 1) 50%,
      rgba(248, 248, 248, 1) 50%,
      rgba(248, 248, 248, 1) 100%
    );
  }
  &.open {
    display: block;
  }
  .kaufman-timeline-container {
    max-width: 1280px;
    margin: 0 auto;
    @media (min-width: 768px) {
      display: flex;
    }
    .timeline-col {
      @media (min-width: 768px) {
        width: 50%;
      }
      display: block;
      &.left {
        @media (min-width: 768px) {
          height: 100vh;
          position: sticky;
          top: 0;
          display: flex;
          flex-direction: column;
        }
        display: unset;
        background: #012169;
        .text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 60px 20px;
          height: 100%;
			@media (min-width: 1024px){
				justify-content: end;
				gap:40px;
			}
          h2,
          h3 {
            color: #ffffff;
          }
          h2 {
            font-size: 56px;
            @media (max-width: 768px) {
              margin-bottom: 90px;
            }
          }
          h3 {
            font-size: 48px;
            span {
              display: inline-block;
              width: 60px;
              height: 1px;
              background: #ffffff;
              margin-left: 12px;
            }
            n {
              font-size: 24px;
              display: block;
              margin-top: 20px;
            }
          }
        }
        .date-slider {
          background: #1a75cf;
          padding: 45px 20px 30px;
          @media (min-width: 1280px) {
            box-shadow: -600px 0px 0px 0px #1a75cf;
          }
          @media (max-width: 768px) {
            position: sticky;
            top: 0;
            padding: 20px 20px 10px;
          }
          .progress {
            width: calc(100% - 50px);
            margin: 0 auto;
            height: 2px;
            background: #ffffff;
            span {
              width: 0;
              height: 2px;
              display: block;
              background: #012169;
            }
          }
          .years {
            display: flex;
            justify-content: space-between;
            color: #ffffff;
            font-weight: bold;
            font-size: 21px;
            span {
              display: block;
              padding-top: 20px;
              position: relative;
              &::before {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 8px;
                background: #012169;
                border: 1px solid #ffffff;
                position: absolute;
                left: 17px;
                top: -8px;
              }
            }
          }
        }
      }
      &.right {
        padding: 60px 20px;
        background: #f8f8f8;
        .year {
          &:not(:last-child) {
            margin-bottom: 60px;
          }
          img {
            margin-bottom: 20px;
          }
          h3 {
            margin-bottom: 20px;
            padding-bottom: 0;
          }
          p {
            margin-bottom: 20px;
          }
          a {
            color: #1a75cf;
            font-size: 18px;
          }
        }
      }
    }
  }
  .close {
    position: fixed;
    z-index: 10;
    right: 60px;
    top: 60px;
    padding: 3px;
    border-radius: 999px;
	background: #006892;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
  }
}