.check-usps {
    gap: 20px 80px;
    padding-left: 0;
    margin-bottom: 0;
    flex-flow: row wrap;
    .check-usp {
        list-style: none;
        padding-left: 0;
        display: flex;
        gap: 12px;
        p {
          width: calc(100% - 30px);
        }
    }
}

.plate--element__ups {
    margin-top: auto;
    margin-bottom: auto;
}

.item-card.item-card-apply {
  display: flex;

  .item-card__content-image {
      margin-bottom: 40px;
  } 
 .item-card__content {
  padding: 48px 40px 60px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .button {
    width: max-content;
    margin-top: auto;
  }
  h4 {
    margin-bottom: 40px;
  }
 }
}
.item-card.item-card-apply:after {
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  background-color: #050505;
  opacity: .12;
}
.vacature.yellow-block {
    width: max-content;
    margin-left: auto;
    padding: 0px 32px 49px 32px;
    display: flex;
    align-items: center;
    border-radius: 0 0 0 32px;
    position: relative;
    &:after {
        content: '';
        left: 32px;
        bottom: 32px;
        width: calc(100% - 64px);
        background-color: #050505;
        opacity: .16;
        position: absolute;
        height: 1px;
    }
    .vacature-amount {
        font-size: 48px;
        line-height: 1;
        font-weight: 800;
        margin-bottom: -4px;
    }
    h5 {
        margin-left: 16px;
        margin-bottom: 0;
        margin-right: 62px;
        font-size: 18px;
        line-height: 1;
        span {
            font-size: inherit;
            line-height: inherit;
        }
    }
}

.text-button.scroll-down, .text-button.button-round {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s ease-in-out;
    background-color: white;
    a:after {
        display: none;
    }
    &:hover {
      background-color: #eeeeee;
    }
}

.button-round {
    &.invert {
        background-color: #050505;
        &:hover {
          background-color: #414141;
        }
        svg {
            [stroke] {
                stroke: white;
            }   
        }
    }
}

.apply-button {
  margin-left: auto;
}
.vacature--grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 32px;
    grid-row-gap: 48px;
    @media only screen and (max-width: 989px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media only screen and (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
    }
    .vacature--top {
        grid-column: span 3;
        justify-content: space-between;
        align-items: center;
        @media only screen and (max-width: 989px) {
          grid-column: span 2;
        }
        @media only screen and (max-width: 767px) {
          grid-column: span 1;
          flex-direction: column;
          gap: 24px;
          align-items: flex-start;
          justify-content: flex-start;
        }
    }

    .item-card {
        margin-bottom: 0;
        .button {
            z-index: 3;
        }
    }
    .item-card {
        &::after {
            content: '';
            left: 0;
            bottom: 0;
            position: absolute;

        }
    }
}

.post-header h1 span {
  font-weight: 400;
  color: inherit;
  font-size: inherit;
}
.vacature-index {
  .post-header {
    height: 720px;
    .contact-block {
      position: absolute;
      bottom: 0;
      right: 0;
      height: auto;
    }
  }
  .post-header:after {
    content: '';
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    opacity: .4;
  }
  .post-header__content {
    padding-bottom: 64px;
    padding-left: 0;
    @media only screen and (max-width: 767px) {
      padding-right: 0;
      .post-title {
        width: 100%;
      }
    }
  }
}

html {
  scroll-behavior: smooth;
}
.usp-banner {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: 32px;
  justify-content: space-between;
  @media only screen and (max-width: 767px) {
    flex-flow: column-reverse nowrap;
  }
  .vacature {
    width: max-content;
  }
}

@media only screen and (max-width: 767px) {
  .usp-banner .vacature {
    width: 100%;
    margin-left: 0;
  }
}

.vacature-show {
  background-color: #F7F8F8;
  .plate--row {
    margin-right: -16px;
    margin-left: -16px;
    .plate--column {
      padding-left: 16px;
      padding-right: 16px;
      min-height: unset;
    }
  }
  .post-header {
    height: 720px;
    .post-header__inner {
      @media only screen and (max-width: 989px) {
        display: flex;
        flex-direction: column;
      }
    }
    .contact-block {
      position: absolute;
      bottom: 0;
      right: 0;
      height: auto;
      @media only screen and (max-width: 989px) {
        position: relative;
        max-width: unset;
        margin-left: 0;
      }
    }
  }
  .post-header:after {
    content: '';
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    opacity: .4;
  }
  .post-header__content {
    padding-bottom: 64px;
    padding-left: 0;
    @media only screen and (max-width: 767px) {
      padding-right: 0;
    }
    
  }
  
  .apply-block {
    background-color: #FFFFFF;
    padding-top: 112px;
    padding-bottom: 112px;
    .contact-form.indent {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .related-block {
    padding-top: 128px;
    padding-bottom: 68px;
  }
  .post-title__title h1 {
    margin-bottom: 0;
  }
}

.post-title {
  @media only screen and (max-width: 767px) {
    width: 100%;
  }
}

.vacature-item {
    background-color: var(--grey);
    position: relative;
    display: flex;
    flex-direction: column;
    &::after {
        content: '';
        left: 0;
        bottom: 0;
        height: 12px;
        width: 100%;
        background-color: #050505;
        opacity: .12;
        position: absolute;
        width: 100%;
    }
    .vacature-item__inner {
        padding: 40px 40px 52px 40px;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
    }
    h4 {
        margin-bottom: 24px;
    }
    
    p {
        font-size: 16px;
        opacity: .64;
        margin-bottom: 0;
    }
    h5 {
        font-size: 12px;
        line-height: 1;
    }

    .vacature-item__bottom {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        h5 {
            margin-bottom: 0;
        }
    }
}


picture {
    position: relative;
    display: block;
    line-height: 0;
    height: 0;
    img {
      position: absolute;
      top: 0;
    }
  }
  .width-cover {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
  .height-contain {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
  }

.checklist {
    padding: 32px 32px 60px;
    position: relative;
   
    .checklist-title {
      margin-bottom: 35px;
      color: white;
    }
    ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        color: white;
        li {
            padding-left: 0;
            display: flex;
            margin-bottom: 24px;
            p {
                color: white;
            }
            &:nth-last-child(1) {
            margin-bottom: 0;
            }
            .check-icon {
                display: flex;
                /* background: var(--yellow); */
                width: 20px;
                height: 20px;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                margin-right: 8px;
                transform: translateY(3px);
                & + p {
                    width: calc(100% - 40px);
                    margin-bottom: 0;
                }
            }
        }
    }
}
  
.plate--element.plate--element__checklist {
    height: 100%;
    background-color: #050505;
    position: relative;
    &:after {
        content: '';
        position: absolute;
        left: 0;
        height: 12px;
        bottom: 0;
        width: 100%;
        background: var(--yellow);
    }
    @media only screen and (max-width: 989px) {
      margin-bottom: 16px;
    }
}

.upcase-label {
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
}
.share-block {
  padding-bottom: 120px;
  padding-top: 120px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  p {
    margin-bottom: 0;
  }
  .social-share__text {
    margin-bottom: 24px;
  }
  .social-share {
    justify-content: center;
    gap: 4px;
  }
}
.social-media__icon {
  position: relative;
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background-color: white;
  justify-content: center;
  align-items: center;
  
  svg {
    width: auto;
    height: 12px;
  }
}
a.mobile {
  display: none!important;
  @media only screen and (max-width: 767px) {
    display: block!important;
  }
}
a.desktop {
  display: block!important;
  @media only screen and (max-width: 767px) {
    display: none!important;
  }
}

.post-tags {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  flex-flow: row wrap;
  .post-tags--tag {
    background-color: rgba(5, 5, 5, 0.32);
    padding: 12px 16px 12px 16px;
    gap: 10px;
    border-radius: 32px;
    color: white;
  }
}
.contact-block {
  display: flex;
  padding: 32px 24px 34px;
  border-radius: 32px 0 0 0;
  align-items: center;
  max-width: fit-content;
  margin-left: auto;
  .contact-block--image {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    margin-right: 24px;
    position: relative;
    overflow: hidden;
  }
  .contact-block--content {
    padding-right: 48px;
    h5 {
      margin-bottom: 0;
    }
  }
  .contact-block--naw {
    display: flex;
    gap: 4px;
    @media only screen and (max-width: 989px) {
      margin-left: auto;
    }
  }
}
.black-label {
  background-color: #050505;
  color: white;
  padding: 12px 16px 12px 16px;
  border-radius: 32px;
  display: flex;
  width: max-content;
  margin-bottom: 24px;
}
.planning {
  h3 {
    margin-bottom: 40px;
  }
}
.day--planning {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    @media only screen and (max-width: 989px) {
      gap: 32px;
    } 
}
.day {
    gap: 46px;
    @media only screen and (max-width: 989px) {
      flex-direction: column;
      gap: 24px;
    }
    .day--time {
        width: 66px;
        text-align: center;
        border-radius: 30px;
        height: 32px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
            margin-bottom: 0;
        }
    }
    .day--content {
        width: calc(100% - 112px);
        background-color: var(--yellow);
        border-radius: 0 30px 30px;
        padding: 20px;
        p:nth-last-child(1) {
            margin-bottom: 0;
        }
        @media only screen and (max-width: 989px) {
          width: 100%;
        }
    }
}

.video-element {
    --transition: all 0.5s ease;
    position: relative;
    width: calc(100% + 64px);
    overflow: hidden;
    @media only screen and (max-width: 989px) {
      width: 100%;
      margin-left: 0;
    }
  }
  .video-element__inner {
    position: relative;
    padding-top: 56%;
    width: calc(100% + 3px);
    left: -2px;
  }
  .video-element__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
  }
  .video-element__video iframe {
    width: inherit;
    height: inherit;
  }
  .video-element__video.video--loaded {
    z-index: 2;
  }
  .video-element__thumbnail {
    position: absolute;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .video-element__placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-element__placeholder picture {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
  }
  .video-element__placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    transform: scale(1.05);
    transition: var(--transition);
  }
  .video-element__play {
    position: absolute;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition: var(--transition);
    cursor: pointer;
  }
  .video-element__play__btn {
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition) !important;
  }
  .video-element__play__btn svg {
    height:auto;
    width: 12px;
    transform: rotate(0deg) translate(-50%, -50%);
    flex-shrink: 0;
    position: absolute;
    left: calc(50% + 2px);
    top: calc(50% + 1px);
  }
  .video-element__play__btn svg path {
    fill: #050505;
  }
  .video-element__play:before {
    content: "";
    position: absolute;
    width: 100% !important;
    opacity: 0;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: var(--transition) !important;
  }
  .video-element:hover .video-element__play__btn {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .video-element:hover .video-element__play:before {
    opacity: 0.8;
  }
  .video-element:hover .video-element__placeholder img {
    transform: scale(1);
  }
  

.proces-items-timeline {
  left: 12px;
  width: calc(100% - 24px);
  top: -12px;
  height: 1px;
  position: relative;
  background: rgba(0, 0, 0, 0.08);
  z-index: -1;
  opacity: 1;
  .proces-items-timeline-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    background-color: #050505;
    transform-origin: left center;
  }
}
.proces {
    padding-bottom: 115px;
}
.proces-items {
    position: relative;
    display: flex;
    justify-content: space-between;
    
    .proces-item {
      position: relative;
  
      .proces-item-tooltip {
        position: absolute;
        left: 50%;
        top: 56px;
        background-color: #050505;
        transform: translateX(-50%);
        padding: 13px 24px 11px 24px;
        opacity: 0;
        border-radius: 64px;
        min-width: 200px;
        h6 {
            color: var(--yellow);
        }
        p {
            color: white;
        }
        p,
        h6 {
          margin-bottom: 0 !important;
          text-wrap: nowrap;
        }
      }
      &:hover {
        .proces-item-tooltip {
          opacity: 1;
        }
      }
        &:not(:nth-child(1)):not(:nth-last-child(1)) {
            .proces-item-tooltip {
                &:after {
                    content: '';
                    left: 50%;
                    transform: translateX(-50%);
                    top: 0;
                    height: 50px;
                    width: 50px;
                    position: absolute;
                }
            }
        }
        &:nth-child(1) .proces-item-tooltip {
            left: 0;
            transform: translateX(0);
            border-top-left-radius: 0;
        }
        &:nth-last-child(1) .proces-item-tooltip {
            left: unset;
            right: 0;
            transform: translateX(0);
            border-top-right-radius: 0;
        }
    }
    .proces-item-bullet {
      width: 24px;
      height: 24px;
      border-radius: 100%;
      background-color: #c1c1c1;
      position: relative;
      cursor: pointer;
      &:after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: var(--white);
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
      }
    }
  }